/* ---------- grid ---------- */
            #gridwrap {
                flex: 1;
                overflow: auto;
                background: var(--bg);
                position: relative;
            }
            #grid {
                width: max-content;
                min-width: 100%;
                padding-bottom: 120px;
            }
            /* virtualization spacers: reserve the scroll height of off-window
               rows so the scrollbar + scroll position stay accurate */
            .g-spacer {
                width: 100%;
            }
            .g-row {
                display: flex;
                width: max-content;
                min-width: 100%;
                background: var(--paper);
            }
            .g-head {
                position: sticky;
                top: 0;
                z-index: 30;
            }
            .g-head .g-row {
                background: var(--head-bg);
            }
            .g-hcell {
                position: relative;
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 0 8px;
                height: 34px;
                border-right: 1px solid var(--line);
                border-bottom: 1px solid var(--line2);
                font-weight: 600;
                font-size: 12.5px;
                color: var(--ink);
                user-select: none;
                background: var(--head-bg);
            }
            .g-hcell:hover {
                background: var(--head-hover);
            }
            /* whole-column / whole-row selection cues (Phase 6D) */
            .g-hcell.col-selected {
                background: var(--range-fill);
                box-shadow: inset 0 -2px 0 var(--range-bd);
            }
            .g-handle.row-selected {
                background: var(--range-fill);
            }
            .g-handle.row-selected .rn {
                color: var(--range-bd);
                font-weight: 700;
            }
            .g-hcell .ficon {
                flex: 0 0 auto;
                width: 16px;
                height: 16px;
                display: grid;
                place-items: center;
                font-size: 10px;
                font-weight: 700;
                color: var(--faint);
                border: 1px solid var(--line2);
                border-radius: 4px;
            }
            .g-hcell .fname {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex: 1;
            }
            .g-hcell .fcaret {
                opacity: 0;
                font-size: 9px;
                color: var(--mut);
            }
            .g-hcell:hover .fcaret {
                opacity: 0.8;
            }
            .g-hcell.dragover {
                box-shadow: inset 3px 0 0 var(--sel);
            }
            .resize {
                position: absolute;
                right: -3px;
                top: 0;
                width: 7px;
                height: 100%;
                cursor: col-resize;
                z-index: 5;
            }
            .resize:hover,
            .resize.active {
                background: rgba(11, 23, 34, 0.18);
            }
            .hcell-add {
                width: 46px;
                display: grid;
                place-items: center;
                color: var(--mut);
                font-size: 15px;
                border-right: 1px solid var(--line);
                border-bottom: 1px solid var(--line2);
                background: var(--head-bg);
                height: 34px;
            }
            .hcell-add:hover {
                background: var(--head-hover);
                color: var(--ink);
            }

            .g-handle {
                flex: 0 0 76px;
                width: 76px;
                display: flex;
                align-items: center;
                gap: 2px;
                padding: 0 4px 0 8px;
                border-right: 1px solid var(--line);
                border-bottom: 1px solid var(--line);
                position: sticky;
                left: 0;
                z-index: 10;
                background: inherit;
                color: var(--faint);
                font-size: 11px;
                font-variant-numeric: tabular-nums;
            }
            .g-head .g-handle {
                border-bottom-color: var(--line2);
                z-index: 35;
            }
            .g-handle .rn {
                width: 22px;
                text-align: right;
                flex: 0 0 auto;
            }
            .g-handle input[type="checkbox"] {
                display: none;
                margin-left: 2px;
                accent-color: var(--sel);
            }
            .g-handle .expand {
                display: none;
                margin-left: auto;
                width: 20px;
                height: 20px;
                border-radius: 4px;
                color: var(--mut);
                font-size: 11px;
                line-height: 20px;
                text-align: center;
            }
            .g-row:hover .g-handle .expand {
                display: block;
            }
            .g-row:hover .g-handle .expand:hover {
                background: var(--hover);
                color: var(--ink);
            }
            .g-row:hover .g-handle input[type="checkbox"],
            .g-handle input[type="checkbox"]:checked {
                display: block;
            }
            .g-row:hover .g-handle .rn.hideable,
            .g-handle.checked .rn {
                display: none;
            }
            .g-handle.checked input[type="checkbox"] {
                display: block;
            }

            .g-cell {
                position: relative;
                display: flex;
                align-items: center;
                padding: 0 8px;
                height: 32px;
                border-right: 1px solid var(--line);
                border-bottom: 1px solid var(--line);
                background: inherit;
                overflow: hidden;
                white-space: nowrap;
                cursor: default;
            }
            .g-cell.prim {
                position: sticky;
                left: 76px;
                z-index: 9;
                font-weight: 500;
                box-shadow: 1px 0 0 var(--line2);
            }
            .g-head .g-hcell.prim {
                position: sticky;
                left: 76px;
                z-index: 34;
                box-shadow: 1px 0 0 var(--line2);
            }
            .g-row:hover .g-cell {
                background: var(--hover);
            }
            .g-row {
                background: var(--paper);
            }
            .g-cell.selected {
                box-shadow: inset 0 0 0 2px var(--sel);
                border-radius: 1px;
                z-index: 8;
            }
            /* ---------- multi-cell range selection (Phase 6C) ----------
               A range fill tints every covered cell; perimeter edges draw a
               border only on the outer sides via .range-top/-bottom/-left/-right.
               --range-fill / --range-bd are theme-aware (defined in palettes). */
            .g-cell.in-range {
                background: var(--range-fill);
                z-index: 8;
            }
            .g-row:hover .g-cell.in-range {
                background: var(--range-fill);
            }
            .g-cell.in-range.range-top {
                box-shadow: inset 0 2px 0 var(--range-bd);
            }
            .g-cell.in-range.range-bottom {
                box-shadow: inset 0 -2px 0 var(--range-bd);
            }
            .g-cell.in-range.range-left {
                box-shadow: inset 2px 0 0 var(--range-bd);
            }
            .g-cell.in-range.range-right {
                box-shadow: inset -2px 0 0 var(--range-bd);
            }
            /* combine perimeter edges (a corner/single-row range needs several) */
            .g-cell.in-range.range-top.range-left {
                box-shadow:
                    inset 0 2px 0 var(--range-bd),
                    inset 2px 0 0 var(--range-bd);
            }
            .g-cell.in-range.range-top.range-right {
                box-shadow:
                    inset 0 2px 0 var(--range-bd),
                    inset -2px 0 0 var(--range-bd);
            }
            .g-cell.in-range.range-bottom.range-left {
                box-shadow:
                    inset 0 -2px 0 var(--range-bd),
                    inset 2px 0 0 var(--range-bd);
            }
            .g-cell.in-range.range-bottom.range-right {
                box-shadow:
                    inset 0 -2px 0 var(--range-bd),
                    inset -2px 0 0 var(--range-bd);
            }
            .g-cell.in-range.range-top.range-bottom.range-left {
                box-shadow:
                    inset 0 2px 0 var(--range-bd),
                    inset 0 -2px 0 var(--range-bd),
                    inset 2px 0 0 var(--range-bd);
            }
            .g-cell.in-range.range-top.range-bottom.range-right {
                box-shadow:
                    inset 0 2px 0 var(--range-bd),
                    inset 0 -2px 0 var(--range-bd),
                    inset -2px 0 0 var(--range-bd);
            }
            .g-cell.in-range.range-top.range-left.range-right {
                box-shadow:
                    inset 0 2px 0 var(--range-bd),
                    inset 2px 0 0 var(--range-bd),
                    inset -2px 0 0 var(--range-bd);
            }
            .g-cell.in-range.range-bottom.range-left.range-right {
                box-shadow:
                    inset 0 -2px 0 var(--range-bd),
                    inset 2px 0 0 var(--range-bd),
                    inset -2px 0 0 var(--range-bd);
            }
            .g-cell.in-range.range-top.range-bottom.range-left.range-right {
                box-shadow:
                    inset 0 2px 0 var(--range-bd),
                    inset 0 -2px 0 var(--range-bd),
                    inset 2px 0 0 var(--range-bd),
                    inset -2px 0 0 var(--range-bd);
            }
            /* fill handle: small square at the range's bottom-right corner */
            .fill-handle {
                position: absolute;
                right: -4px;
                bottom: -4px;
                width: 8px;
                height: 8px;
                background: var(--range-bd);
                border: 1px solid var(--paper);
                box-sizing: border-box;
                cursor: crosshair;
                z-index: 20;
            }
            .fill-handle:hover {
                transform: scale(1.25);
            }
            /* preview tint while dragging the fill handle */
            .g-cell.fill-target {
                background: var(--range-fill);
                box-shadow: inset 0 0 0 1px var(--range-bd);
            }
            .g-row:hover .g-cell.fill-target {
                background: var(--range-fill);
            }
            .g-cell .txt {
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .g-cell.t-number,
            .g-cell.t-rating .num {
                justify-content: flex-end;
            }
            .g-cell.t-number {
                justify-content: flex-end;
                font-variant-numeric: tabular-nums;
            }
            .g-cell.t-checkbox {
                justify-content: center;
            }
            .g-cell .linklike {
                color: var(--link-tx);
                text-decoration: none;
            }
            .g-cell .linklike:hover {
                text-decoration: underline;
            }
            .cellcheck {
                width: 14px;
                height: 14px;
                accent-color: #16683b;
                pointer-events: none;
            }
            .stars {
                letter-spacing: 2px;
                color: #e8b70a;
                font-size: 13px;
            }
            .stars .off {
                color: var(--line2);
            }