/* ---------------- attachment field ---------------- */
            .att-cell {
                display: flex;
                align-items: center;
                gap: 4px;
                overflow: hidden;
            }
            .att-thumb {
                width: 24px;
                height: 24px;
                border-radius: 4px;
                object-fit: cover;
                background: var(--hover);
                border: 1px solid var(--line);
                flex: 0 0 auto;
                display: block;
            }
            .att-clk {
                cursor: pointer;
            }
            .att-chip {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                max-width: 150px;
                height: 22px;
                padding: 0 7px 0 4px;
                border-radius: 5px;
                background: var(--hover);
                border: 1px solid var(--line);
                font-size: 11.5px;
                color: var(--ink);
                flex: 0 0 auto;
            }
            .att-ext {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 24px;
                height: 16px;
                padding: 0 4px;
                border-radius: 3px;
                background: var(--lime);
                color: #0b1722;
                font-size: 9px;
                font-weight: 700;
                letter-spacing: 0.3px;
            }
            .att-name {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .att-more {
                font-size: 11px;
                color: var(--mut);
                flex: 0 0 auto;
            }
            .g-cell.att-dropon {
                box-shadow: inset 0 0 0 2px var(--lime);
            }
            /* editor popover */
            .att-editor .att-drop {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 14px 10px;
                margin: 4px 0 8px;
                border: 1.5px dashed var(--line2);
                border-radius: 8px;
                color: var(--mut);
                font-size: 12.5px;
                cursor: pointer;
                text-align: center;
            }
            .att-editor .att-drop.on {
                border-color: var(--lime);
                background: var(--hover);
            }
            .att-drop-ic {
                font-size: 16px;
            }
            .att-edit-grid,
            .att-expand {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }
            .att-expand {
                width: 100%;
                align-items: flex-start;
            }
            .att-expand.att-dropon {
                outline: 2px dashed var(--lime);
                outline-offset: 3px;
                border-radius: 6px;
            }
            .att-tile {
                position: relative;
                width: 72px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 3px;
                cursor: pointer;
            }
            .att-tile-img {
                width: 72px;
                height: 72px;
                object-fit: cover;
                border-radius: 6px;
                border: 1px solid var(--line);
                background: var(--hover);
                display: block;
            }
            .att-tile-file {
                width: 72px;
                height: 72px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 6px;
                border: 1px solid var(--line);
                background: var(--hover);
            }
            .att-tile-name {
                width: 72px;
                font-size: 10.5px;
                color: var(--mut);
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .att-x {
                position: absolute;
                top: -6px;
                right: -6px;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                border: 1px solid var(--line2);
                background: var(--paper);
                color: var(--mut);
                font-size: 10px;
                line-height: 1;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
            }
            .att-x:hover {
                color: #d4361f;
                border-color: #d4361f;
            }
            .att-add {
                width: 72px;
                height: 72px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px;
                border: 1.5px dashed var(--line2);
                border-radius: 6px;
                background: transparent;
                color: var(--mut);
                font-size: 11.5px;
                cursor: pointer;
            }
            .att-add:hover {
                border-color: var(--lime);
                color: var(--ink);
            }
            .att-add-ic {
                font-size: 18px;
                line-height: 1;
            }
            /* preview modal */
            .att-preview-body {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 240px;
                max-height: 70vh;
                overflow: auto;
                background: var(--hover);
            }
            .att-preview-img {
                max-width: 100%;
                max-height: 66vh;
                object-fit: contain;
                display: block;
            }
            .att-preview-file {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                padding: 40px 20px;
                text-align: center;
            }
            .att-ext-lg {
                min-width: 64px;
                height: 48px;
                font-size: 16px;
                border-radius: 8px;
            }
            .att-pf-name {
                font-size: 15px;
                font-weight: 600;
                color: var(--ink);
                word-break: break-word;
            }
            .att-pf-meta {
                font-size: 12.5px;
                color: var(--mut);
            }
            .gal-cover-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
            .numbar-wrap {
                display: flex;
                align-items: center;
                gap: 8px;
                width: 100%;
            }
            .numbar {
                flex: 1;
                height: 7px;
                border-radius: 999px;
                background: var(--meter-track);
                overflow: hidden;
                min-width: 24px;
            }
            .numbar-fill {
                display: block;
                height: 100%;
                background: var(--accent);
                border-radius: 999px;
            }
            .numbar-num {
                flex: 0 0 auto;
                font-variant-numeric: tabular-nums;
                font-size: 12px;
                color: var(--mut);
            }
            .pill {
                display: inline-flex;
                align-items: center;
                max-width: 100%;
                padding: 1px 8px;
                margin-right: 4px;
                border-radius: 999px;
                font-size: 12px;
                font-weight: 500;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex: 0 0 auto;
                /* faint edge so low-contrast (e.g. light-grey) pills stay
                   visible against a white/paper background */
                box-shadow: inset 0 0 0 1px rgba(13, 23, 34, 0.09);
            }
            .pill.linkpill {
                background: var(--linkpill-bg);
                color: var(--linkpill-tx);
                border: 1px solid var(--linkpill-bd);
            }
            /* ---- computed / formula field rendering ---- */
            .fx-err {
                display: inline-flex;
                align-items: center;
                padding: 0 6px;
                height: 18px;
                border-radius: 4px;
                font:
                    600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
                letter-spacing: 0.2px;
                background: var(--danger-bg);
                color: var(--danger-tx);
                border: 1px solid var(--danger-tx);
            }
            .fx-bool {
                font-size: 14px;
                font-weight: 700;
                line-height: 1;
            }
            .fx-bool.on {
                color: var(--ok-tx);
            }
            .fx-bool.off {
                color: var(--faint);
            }
            /* formula editor */
            .fx-editor {
                position: relative;
            }
            .fx-ta {
                width: 100%;
                min-height: 64px;
                resize: vertical;
                padding: 7px 8px;
                border: 1px solid var(--line2);
                border-radius: var(--r);
                background: var(--field-bg);
                color: var(--ink);
                font:
                    12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
            }
            .fx-ta:focus {
                outline: none;
                border-color: var(--accent-border);
            }
            .fx-preview {
                margin: 6px 0 0;
                padding: 5px 8px;
                border-radius: var(--r);
                background: var(--hover);
                color: var(--mut);
                font-size: 11.5px;
                word-break: break-word;
            }
            .fx-preview b {
                color: var(--ink);
                font-weight: 600;
            }
            .fx-errmsg {
                margin: 6px 0 0;
                padding: 5px 8px;
                border-radius: var(--r);
                background: var(--danger-bg);
                color: var(--danger-tx);
                font:
                    11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
            }
            .fx-ac {
                position: absolute;
                z-index: 50;
                min-width: 160px;
                max-height: 180px;
                overflow: auto;
                background: var(--pop-bg);
                border: 1px solid var(--line2);
                border-radius: var(--r);
                box-shadow: var(--shadow);
                padding: 4px;
            }
            .fx-ac button {
                display: block;
                width: 100%;
                text-align: left;
                padding: 5px 8px;
                border-radius: 4px;
                font-size: 12.5px;
                color: var(--ink);
            }
            .fx-ac button:hover,
            .fx-ac button.sel {
                background: var(--hover);
            }
            .fx-hint {
                padding: 2px 8px;
                color: var(--faint);
                font-size: 11.5px;
            }
            .rowadd {
                display: flex;
                align-items: center;
                gap: 8px;
                height: 32px;
                padding: 0 0 0 8px;
                color: var(--mut);
                background: var(--paper);
                border-bottom: 1px solid var(--line);
                width: max-content;
                min-width: 100%;
                position: sticky;
                left: 0;
            }
            .rowadd:hover {
                color: var(--ink);
                background: var(--hover);
            }
            .rowadd .plus {
                width: 60px;
                text-align: left;
                padding-left: 18px;
                font-size: 15px;
            }

            .grouphead {
                display: flex;
                align-items: center;
                height: 36px;
                width: max-content;
                min-width: 100%;
                background: var(--group-bg);
                border-bottom: 1px solid var(--line2);
                border-top: 1px solid var(--line2);
            }
            .grouphead .ginner {
                position: sticky;
                left: 0;
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 0 10px;
                max-width: 100vw;
            }
            .grouphead .gtgl {
                width: 18px;
                height: 18px;
                display: grid;
                place-items: center;
                color: var(--mut);
                font-size: 10px;
                border-radius: 4px;
            }
            .grouphead .gtgl:hover {
                background: var(--group-hover);
                color: var(--ink);
            }
            .grouphead .gfield {
                font-size: 10.5px;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                color: var(--faint);
                font-weight: 600;
            }
            .grouphead .gcount {
                color: var(--faint);
                font-size: 12px;
                font-variant-numeric: tabular-nums;
            }
            .grouphead .gtick {
                width: 6px;
                height: 14px;
                background: var(--accent);
                border-radius: 2px;
                border: 1px solid var(--accent-border);
            }
            /* nested group depth: deeper levels indent + soften the accent tick */
            .grouphead.depth-1 .ginner {
                padding-left: 26px;
            }
            .grouphead.depth-2 .ginner {
                padding-left: 42px;
            }
            .grouphead.depth-1 {
                background: var(--paper);
            }
            .grouphead.depth-2 {
                background: var(--paper);
            }
            .grouphead.depth-1 .gtick {
                opacity: 0.6;
            }
            .grouphead.depth-2 .gtick {
                opacity: 0.32;
            }
            /* per-group subtotal row (innermost group foot) */
            .groupsub {
                display: flex;
                width: max-content;
                min-width: 100%;
                background: var(--group-bg);
                border-bottom: 1px solid var(--line2);
            }
            .groupsub .g-handle {
                background: var(--group-bg);
                border-bottom-color: var(--line2);
            }
            .groupsub .sum-cell {
                background: var(--group-bg);
            }
            .groupsub .sum-cell.prim {
                box-shadow: 1px 0 0 var(--line2);
            }

            /* ---------- conditional row color (left stripe + tint) ---------- */
            .g-row.row-colored .g-handle::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 4px;
                background: var(--row-stripe);
            }
            .g-row.row-colored .g-cell,
            .g-row.row-colored .g-handle {
                background: var(--row-tint);
            }
            .g-row.row-colored:hover .g-cell,
            .g-row.row-colored:hover .g-handle {
                background: var(--row-tint-hover);
            }

            /* ---------- sticky summary bar (bottom of grid) ---------- */
            .g-summary {
                position: sticky;
                bottom: 0;
                z-index: 28;
                display: flex;
                width: max-content;
                min-width: 100%;
                background: var(--summary-bg);
                border-top: 1px solid var(--line2);
            }
            .sum-cell {
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-end;
                gap: 1px;
                padding: 0 8px;
                height: 36px;
                border-right: 1px solid var(--line);
                background: var(--summary-bg);
                overflow: hidden;
                white-space: nowrap;
                cursor: pointer;
                user-select: none;
            }
            .sum-cell:hover {
                background: var(--head-hover);
            }
            .sum-cell.prim {
                position: sticky;
                left: 76px;
                z-index: 9;
                box-shadow: 1px 0 0 var(--line2);
            }
            .sum-cell .sum-handle {
                flex: 0 0 76px;
            }
            .g-summary .g-handle {
                background: var(--summary-bg);
                border-bottom: 0;
                color: var(--faint);
                font-size: 11px;
                align-items: center;
            }
            .g-summary .g-handle .sum-total {
                width: 100%;
                text-align: left;
                font-variant-numeric: tabular-nums;
            }
            .sum-cell .sum-lbl {
                font-size: 9.5px;
                text-transform: uppercase;
                letter-spacing: 0.04em;
                color: var(--faint);
                font-weight: 600;
                line-height: 1;
            }
            .sum-cell .sum-val {
                font-size: 12.5px;
                color: var(--ink);
                font-weight: 600;
                font-variant-numeric: tabular-nums;
                line-height: 1.2;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }
            .sum-cell .sum-val.empty {
                color: var(--faint);
                font-weight: 400;
            }
            .sum-cell:hover .sum-caret {
                opacity: 0.7;
            }
            .sum-cell .sum-caret {
                position: absolute;
                right: 4px;
                top: 3px;
                font-size: 8px;
                color: var(--mut);
                opacity: 0;
            }
            /* color-rule panel swatches */
            .swrow {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
                padding: 4px 2px 2px;
            }
            .swatch {
                width: 20px;
                height: 20px;
                border-radius: 5px;
                border: 2px solid transparent;
                cursor: pointer;
            }
            .swatch.sel {
                border-color: var(--sel);
            }
            .crule {
                border: 1px solid var(--line);
                border-radius: 8px;
                padding: 6px;
                margin: 6px 0;
            }
            .crule-head {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 2px 4px 4px;
            }
            .crule-swatch {
                width: 18px;
                height: 18px;
                border-radius: 5px;
                flex: 0 0 auto;
                cursor: pointer;
                border: 1px solid rgba(0, 0, 0, 0.15);
            }

            .emptystate {
                padding: 60px 24px;
                color: var(--mut);
                position: sticky;
                left: 0;
                max-width: 520px;
            }
            .emptystate b {
                color: var(--ink);
            }

            /* ---------- cell editor ---------- */
            .cell-editor {
                position: absolute;
                z-index: 60;
                background: var(--paper);
                box-shadow:
                    0 0 0 2px var(--sel),
                    var(--shadow);
                border-radius: 2px;
                display: flex;
            }
            .cell-editor input,
            .cell-editor textarea {
                border: 0;
                outline: none !important;
                padding: 6px 8px;
                width: 100%;
                font-size: 13px;
                background: var(--paper);
                color: var(--ink);
                resize: none;
            }
            .cell-editor textarea {
                min-height: 96px;
                line-height: 1.5;
            }
            .cell-editor {
                flex-wrap: wrap;
            }
            .editor-hint {
                width: 100%;
                padding: 2px 8px 5px;
                font-size: 11px;
                color: var(--faint);
                background: var(--paper);
            }