/* AllItems.cshtml extracted styles - UI-PLAN-338 */
        /* List view specific styles */
        .ms-list-view-page {
            padding: var(--spm-spacing-md, 16px);
        }

        .ms-list-header {
            margin-bottom: var(--spm-spacing-md, 16px);
        }

        .ms-list-title {
            font-size: var(--spm-font-size-xl, 20px);
            font-weight: 600;
            margin: 0 0 var(--spm-spacing-xs, 4px) 0;
            color: var(--spm-text, #333);
        }

        .ms-list-description {
            font-size: var(--spm-font-size-md, 14px);
            color: var(--spm-text-secondary, #666);
            margin: 0;
        }

        /* PLAN-387: Old .ms-list-toolbar removed — replaced by CommandBar + action strip */
        .ms-list-toolbar {
            display: none !important; /* Legacy: hidden if any old markup remains */
        }

        /* PLAN-1025: New slim 3-menu toolbar (View / Format / Dev) */
        .ms-toolbar-menus {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background-color: var(--spm-surface, #f4f4f4);
            border-bottom: 1px solid var(--spm-border, #e1e1e1);
            flex-wrap: nowrap;
            min-height: 34px;
        }

        .ms-toolbar-dropdown {
            display: inline-block;
        }

        .ms-toolbar-menu-btn {
            font-size: 12px;
            padding: 3px 10px;
            border: 1px solid var(--spm-border, #e1e1e1);
            background: var(--spm-bg, #fff);
            color: var(--spm-text, #333);
            border-radius: 3px;
            white-space: nowrap;
        }

        .ms-toolbar-menu-btn:hover {
            background: var(--spm-surface, #f4f4f4);
            border-color: var(--spm-text-secondary, #999);
        }

        .ms-toolbar-menu-btn-dev {
            border-color: #f97316;
            color: #c05f00;
        }

        .ms-toolbar-dropdown-menu {
            font-size: 12px;
            min-width: 200px;
        }

        .dropdown-menu-scrollable {
            max-height: 70vh;
            overflow-y: auto;
        }

        /* PLAN-1025: Floating panels (extracted from action strip) — fixed positioning */
        .sp-floating-panel {
            position: fixed;
            z-index: 1050;
            top: 120px;
            right: 16px;
        }

        /* PLAN-1025: Legacy action strip + secondary toolbar — hidden, kept for JS ID compatibility */
        #sp-legacy-toolbar {
            display: none !important;
        }

        /* PLAN-387: Compact action strip — kept for legacy selector compatibility */
        .ms-action-strip {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 8px;
            background-color: var(--spm-surface, #f4f4f4);
            border-bottom: 1px solid var(--spm-border, #e1e1e1);
            min-height: 30px;
            overflow: visible;
        }

        .ms-action-strip-left,
        .ms-action-strip-right {
            display: flex;
            gap: 2px;
            align-items: center;
            flex-wrap: nowrap;
            overflow: hidden;
        }

        .ms-action-strip-left {
            flex-shrink: 1;
            overflow: hidden;
        }

        .ms-action-strip-right {
            flex-shrink: 0;
        }

        .ms-action-strip-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 26px;
            padding: 0;
            border: none;
            background: transparent;
            color: var(--spm-text-secondary, #666);
            cursor: pointer;
            border-radius: 3px;
            font-size: 13px;
            transition: background 0.1s ease, color 0.1s ease;
            flex-shrink: 0;
            overflow: hidden;
        }

        .ms-action-strip-btn:hover {
            background: rgba(0, 0, 0, 0.06);
            color: var(--spm-text, #333);
        }

        .ms-action-strip-btn:active {
            background: rgba(0, 0, 0, 0.1);
        }

        .ms-action-strip-btn i {
            font-size: 13px;
        }

        /* PLAN-766: Secondary toolbar — collapsed by default, auto-width text buttons */
        .ms-action-strip-secondary {
            display: none !important;
        }
        .ms-action-strip-secondary.expanded {
            display: flex !important;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 6px 0;
            padding: 4px 8px 6px;
        }
        .ms-action-strip-secondary .ms-action-strip-btn {
            width: auto;
            padding: 0 6px;
            font-size: 11px;
            white-space: nowrap;
        }

        /* PLAN-885: Secondary toolbar groups — 8 labeled categories with visual separators */
        .ms-action-strip-secondary .sp-toolbar-group {
            display: inline-flex;
            flex-direction: column;
            gap: 2px;
            padding-right: 10px;
            margin-right: 2px;
            border-right: 1px solid var(--spm-border, #ddd);
        }
        .ms-action-strip-secondary .sp-toolbar-group:last-child {
            border-right: none;
            padding-right: 0;
        }
        .sp-toolbar-group-label {
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            color: #999;
            letter-spacing: 0.6px;
            padding: 0 2px;
            pointer-events: none;
            white-space: nowrap;
            line-height: 1.2;
        }
        .sp-toolbar-group-btns {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
        }

        .ms-button {
            padding: 6px 12px;
            border: 1px solid var(--spm-border, #e1e1e1);
            background-color: var(--spm-bg, #ffffff);
            color: var(--spm-text, #333);
            cursor: pointer;
            font-size: var(--spm-font-size-md, 14px);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .ms-button:hover:not(:disabled) {
            background-color: var(--spm-surface, #f4f4f4);
        }

        .ms-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .ms-button-primary {
            background-color: var(--spm-primary, #0072c6);
            color: #ffffff;
            border-color: var(--spm-primary, #0072c6);
        }

        .ms-button-primary:hover:not(:disabled) {
            background-color: var(--spm-secondary, #2b88d8);
        }

        .ms-list-grid-container {
            border: 1px solid var(--spm-border, #e1e1e1);
            overflow-x: auto;
        }

        .ms-list-grid {
            width: 100%;
            min-width: max-content;
            border-collapse: collapse;
            background-color: var(--spm-bg, #ffffff);
        }

        .ms-list-grid thead {
            background-color: var(--spm-surface, #f4f4f4);
            border-bottom: 2px solid var(--spm-border, #e1e1e1);
        }

        /* Phase 72: Sticky column headers */
        #sp-list-table thead tr th {
            position: sticky;
            top: 0;
            z-index: 20;
            background-color: var(--spm-surface, #f4f4f4);
        }

        /* Shadow visible when content scrolls under the sticky header */
        .sp-headers-floating #sp-list-table thead tr th {
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
        }

        /* Phase 72: Scroll-to-top button */
        .sp-scroll-top-btn {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9000;
            width: 36px;
            height: 36px;
            background: #0072c6;
            color: white;
            border: none;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: opacity 0.2s, background 0.2s;
            opacity: 0;
            pointer-events: none;
        }
        .sp-scroll-top-btn:hover {
            background: #106ebe;
        }
        .sp-scroll-top-btn.sp-scroll-top-visible {
            opacity: 1;
            pointer-events: auto;
        }

        /* Phase 84: Sticky first two columns (checkbox + first data column) */

        /* Sticky checkbox column — thead corner cell */
        #sp-list-table thead tr th.ms-checkbox-column {
            position: sticky;
            left: 0;
            z-index: 30; /* higher than header z-index: 20, to appear above data rows */
            background-color: var(--spm-surface, #f4f4f4);
        }

        /* Sticky first data column — thead corner cell */
        #sp-list-table thead tr th:nth-child(2) {
            position: sticky;
            left: 32px; /* 32px = width of ms-checkbox-column */
            z-index: 30;
            background-color: var(--spm-surface, #f4f4f4);
        }

        /* Sticky checkbox column — tbody cells */
        #sp-list-table tbody td.ms-checkbox-column {
            position: sticky;
            left: 0;
            z-index: 10;
            background: inherit;
        }

        /* Sticky first data column — tbody cells.
           NOTE: no z-index here. With z-index:10 the sticky TD paints on top of
           the Title cell (nth-child 3), and because even-row/hover/selected
           rules make its background opaque, the first ~33px of the Title text
           gets visually clipped. Natural document order keeps the Title cell
           painting above the sticky overlap while sticky scroll still works. */
        #sp-list-table tbody td:nth-child(2) {
            position: sticky;
            left: 32px;
            background: inherit;
        }

        /* Sticky checkbox column — group-header rows */
        #sp-list-table tr td.ms-checkbox-column {
            position: sticky;
            left: 0;
            z-index: 10;
            background: inherit;
        }

        /* Visual separator shadow after the pinned column */
        #sp-list-table td:nth-child(2)::after,
        #sp-list-table th:nth-child(2)::after {
            content: '';
            position: absolute;
            top: 0;
            right: -4px;
            bottom: 0;
            width: 4px;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.07), transparent);
            pointer-events: none;
        }

        /* Correct background for alternating (even) rows */
        #sp-list-table tbody tr:nth-child(even) td.ms-checkbox-column,
        #sp-list-table tbody tr:nth-child(even) td:nth-child(2) {
            background-color: var(--spm-row-alt, #faf9f8);
        }

        /* Correct background on row hover */
        #sp-list-table tbody tr:hover td.ms-checkbox-column,
        #sp-list-table tbody tr:hover td:nth-child(2) {
            background-color: var(--spm-row-hover, #f4f4f4);
        }

        /* Correct background for selected rows */
        #sp-list-table tbody tr.sp-row-selected td.ms-checkbox-column,
        #sp-list-table tbody tr.sp-row-selected td:nth-child(2) {
            background-color: var(--spm-row-selected, #deecf9);
        }

        /* Phase 86: Row double-click cursor hint — pointer on data cells */
        #sp-list-tbody .ms-list-row td.ms-field-cell {
            cursor: pointer;
            text-align: left;
        }

        /* Phase 88: Keyboard-focused row highlight */
        #sp-list-tbody .ms-list-row.sp-row-focused {
            outline: 2px solid var(--focus-ring-color, #0072c6);
            outline-offset: -2px;
            background-color: rgba(0, 120, 212, 0.05) !important;
        }

        /* Phase 99: Return highlight flash animation */
        @keyframes sp-row-flash {
            0%   { background-color: rgba(255, 215, 0, 0.6); }
            60%  { background-color: rgba(255, 215, 0, 0.25); }
            100% { background-color: transparent; }
        }
        .sp-row-flash-anim {
            animation: sp-row-flash 2s ease-out forwards;
        }

        .ms-list-grid th {
            padding: var(--spm-spacing-sm, 8px);
            text-align: left;
            font-weight: 600;
            font-size: var(--spm-font-size-md, 14px);
            color: var(--spm-text, #333);
        }

        .ms-checkbox-column {
            width: 32px;
            text-align: center;
        }

        .ms-sort-link {
            color: var(--spm-text, #333);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .ms-sort-link:hover {
            color: var(--spm-primary, #0072c6);
        }

        .ms-sort-link.ms-sorted {
            color: var(--spm-primary, #0072c6);
            font-weight: 700;
        }

        .ms-sort-indicator {
            font-size: 10px;
        }

        .ms-list-grid td {
            padding: var(--spm-spacing-sm, 8px);
            border-bottom: 1px solid var(--spm-border, #e1e1e1);
            font-size: var(--spm-font-size-md, 14px);
            color: var(--spm-text, #333);
        }

        .ms-list-row:hover {
            background-color: var(--spm-row-hover, #f4f4f4);
        }
        .ms-list-row:hover td {
            background-color: var(--spm-row-hover, #f4f4f4);
        }

        .ms-list-row.ms-row-hover {
            background-color: #f8f8f8;
        }

        .ms-empty-list {
            padding: var(--spm-spacing-xl, 32px);
            text-align: center;
        }

        .ms-empty-message {
            color: var(--spm-text-secondary, #666);
        }

        /* Phase 71: Enhanced empty state */
        .ms-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px;
        }
        .ms-empty-state-text {
            font-size: 14px;
            color: var(--spm-text-secondary, #666);
            margin: 0;
        }

        .ms-list-paging {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spm-spacing-md, 16px);
            background-color: var(--spm-surface, #f4f4f4);
            border: 1px solid var(--spm-border, #e1e1e1);
            margin-top: var(--spm-spacing-md, 16px);
        }

        .ms-paging-info {
            font-size: var(--spm-font-size-sm, 12px);
            color: var(--spm-text-secondary, #666);
        }

        .ms-paging-controls {
            display: flex;
            gap: var(--spm-spacing-xs, 4px);
        }

        .ms-paging-button {
            padding: 4px 8px;
            border: 1px solid var(--spm-border, #e1e1e1);
            background-color: var(--spm-bg, #ffffff);
            color: var(--spm-text, #333);
            text-decoration: none;
            font-size: var(--spm-font-size-sm, 12px);
        }

        .ms-paging-button:hover {
            background-color: var(--spm-surface, #f4f4f4);
            color: var(--spm-primary, #0072c6);
        }

        .ms-paging-current {
            padding: 4px 8px;
            background-color: var(--spm-primary, #0072c6);
            color: #ffffff;
            font-weight: 600;
            font-size: var(--spm-font-size-sm, 12px);
        }

        .ms-field-cell a {
            color: var(--spm-primary, #0072c6);
            text-decoration: none;
        }

        .ms-field-cell a:hover {
            text-decoration: underline;
        }

        .ms-view-info {
            display: flex;
            align-items: center;
            gap: var(--spm-spacing-sm, 8px);
            font-size: var(--spm-font-size-sm, 12px);
            color: var(--spm-text-secondary, #666);
        }

        .ms-filter-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background-color: var(--spm-primary, #0072c6);
            color: #ffffff;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        /* Folder breadcrumb styles */
        .ms-folder-breadcrumb {
            display: flex;
            align-items: center;
            gap: var(--spm-spacing-xs, 4px);
            padding: var(--spm-spacing-sm, 8px) var(--spm-spacing-md, 16px);
            background-color: var(--spm-surface, #f4f4f4);
            border: 1px solid var(--spm-border, #e1e1e1);
            margin-bottom: var(--spm-spacing-md, 16px);
            font-size: var(--spm-font-size-md, 14px);
        }

        .ms-folder-breadcrumb .fa {
            color: var(--spm-text-secondary, #666);
        }

        .ms-breadcrumb-link {
            color: var(--spm-primary, #0072c6);
            text-decoration: none;
        }

        .ms-breadcrumb-link:hover {
            text-decoration: underline;
        }

        .ms-breadcrumb-separator {
            color: var(--spm-text-secondary, #666);
            margin: 0 4px;
        }

        .ms-breadcrumb-current {
            font-weight: 600;
            color: var(--spm-text, #333);
        }

        /* File icon styles */
        .ms-file-icon {
            margin-right: var(--spm-spacing-xs, 4px);
            color: var(--spm-text-secondary, #666);
            width: 16px;
            display: inline-block;
        }

        .fa-folder {
            color: #FFB900;
        }

        .fa-file-pdf {
            color: #D13438;
        }

        .fa-file-word {
            color: #2B579A;
        }

        .fa-file-excel {
            color: #217346;
        }

        .fa-file-powerpoint {
            color: #D24726;
        }

        .fa-file-image {
            color: #498205;
        }

        .fa-file-archive {
            color: #8764B8;
        }

        .fa-file-code {
            color: #0078D4;
        }

        /* Folder link style */
        .ms-folder-link {
            color: var(--spm-text, #333);
            text-decoration: none;
            font-weight: 600;
        }

        .ms-folder-link:hover {
            color: var(--spm-primary, #0072c6);
            text-decoration: underline;
        }

        /* Download link style */
        .ms-download-link {
            margin-left: var(--spm-spacing-xs, 4px);
            color: var(--spm-text-secondary, #666);
            text-decoration: none;
            font-size: 13px;
            opacity: 0.7;
        }

        .ms-download-link:hover {
            color: var(--spm-primary, #0072c6);
            opacity: 1;
        }

        /* Folder action icons style */
        .ms-folder-actions {
            margin-left: var(--spm-spacing-sm, 8px);
            display: inline-flex;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .ms-list-row:hover .ms-folder-actions {
            opacity: 1;
        }

        .ms-folder-action-link {
            color: var(--spm-text-secondary, #666);
            text-decoration: none;
            font-size: 13px;
            padding: 2px 4px;
            border-radius: 2px;
        }

        .ms-folder-action-link:hover {
            color: var(--spm-primary, #0072c6);
            background-color: var(--spm-surface, #f4f4f4);
        }

        .ms-folder-action-link.ms-delete-action:hover {
            color: #d13438;
        }

        /* ─── PLAN-424: Document Set badge ──────────────────────── */
        .ms-docset-badge {
            display: inline-block;
            background-color: var(--spm-primary, #0072c6);
            color: #fff;
            font-size: 10px;
            font-weight: 600;
            padding: 1px 4px;
            border-radius: 3px;
            margin-left: 6px;
            vertical-align: middle;
            letter-spacing: 0.5px;
        }

        /* ─── Phase 57: GroupBy rendering ──────────────────────── */
        .ms-group-header {
            background: #f4f4f4;
            cursor: pointer;
            user-select: none;
        }
        .ms-group-header:hover {
            background: #e1e1e1;
        }
        .ms-group-header-cell {
            padding: 6px 10px !important;
            font-size: 13px;
            border-top: 1px solid #d0d0d0;
        }
        .ms-group-toggle {
            display: inline-block;
            width: 16px;
            font-size: 10px;
            color: #333;
            transition: transform 0.15s;
            margin-right: 6px;
        }
        .ms-group-toggle.ms-group-collapsed {
            transform: rotate(-90deg);
        }
        .ms-group-count {
            font-size: 11px;
            color: #666;
            margin-left: 6px;
        }

        /* ─── View Management Links (Phase 56) ─────────────────── */
        .ms-view-manage-links {
            display: inline-flex;
            gap: 12px;
            align-items: center;
            padding: 0 8px 4px;
            font-size: 12px;
        }
        .ms-view-manage-link {
            color: #0072c6;
            text-decoration: none;
            font-size: 12px;
        }
        .ms-view-manage-link:hover {
            text-decoration: underline;
            color: #106ebe;
        }

        /* ─── Quick Edit (Datasheet View) ─────────────────────── */
        .qe-active td.qe-ed  { padding: 1px 2px !important; background: #fffde7; }
        .qe-active td.qe-ro  { background: #f0f0f0; color: #aaa; }
        .qe-active .qe-dirty { outline: 2px solid #0072c6; outline-offset: -1px; }
        .qe-inp {
            width: 100%;
            min-width: 60px;
            max-width: 260px;
            border: 1px solid #0072c6;
            padding: 1px 4px;
            font-size: 12px;
            background: #fff;
            box-sizing: border-box;
            font-family: inherit;
        }
        .qe-chk  { width: auto !important; min-width: unset !important; }
        select.qe-inp { padding: 0; }

        /* Phase 61: Drag-and-drop upload */
        #sp-dropzone-overlay {
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(0, 120, 212, 0.10);
            border: 3px dashed #0072c6;
            display: flex; align-items: center; justify-content: center;
            pointer-events: none;
        }
        .sp-dz-hidden { display: none !important; }
        .sp-dz-inner { text-align: center; color: #0072c6; font-size: 16px; font-weight: 600; }
        #sp-upload-progress {
            position: fixed; bottom: 20px; right: 20px; width: 360px; z-index: 9998;
            background: white; border: 1px solid #d2d0ce; border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .sp-up-hidden { display: none !important; }
        .sp-up-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 8px 12px; background: #f4f4f4; font-weight: 600; font-size: 13px;
            border-bottom: 1px solid #d2d0ce; border-radius: 4px 4px 0 0;
        }
        .sp-up-item { padding: 6px 12px; font-size: 12px; border-top: 1px solid #e1e1e1; }
        .sp-up-name { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .sp-up-status { font-size: 11px; }
        .sp-up-uploading { color: #0072c6; }
        .sp-up-done { color: #107c10; }
        .sp-up-error { color: #a4262c; }

        /* Phase 64: Column header filter dropdowns */
        th .sp-col-filter-btn {
            display: inline-block;
            background: none; border: none; cursor: pointer;
            padding: 1px 3px; margin-left: 3px;
            color: #888; font-size: 11px; vertical-align: middle;
            line-height: 1;
        }
        th:hover .sp-col-filter-btn,
        th.sp-col-filter-active .sp-col-filter-btn {
            display: inline-block;
        }
        th.sp-col-filter-active .sp-col-filter-icon { color: #0072c6; }
        th.sp-col-filter-active { background-color: #f0f6ff; }

        #sp-col-filter-dropdown {
            position: fixed; z-index: 9000; min-width: 200px; max-width: 320px;
            background: white; border: 1px solid #bbb; border-radius: 4px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
        }
        .sp-col-filter-hidden { display: none !important; }

        .sp-col-filter-search { padding: 6px 8px; border-bottom: 1px solid #eee; }
        .sp-col-filter-search input {
            width: 100%; box-sizing: border-box;
            border: 1px solid #ccc; border-radius: 3px;
            padding: 3px 6px; font-size: 12px; outline: none;
        }
        .sp-col-filter-search input:focus { border-color: #0072c6; }

        .sp-col-filter-list {
            max-height: 220px; overflow-y: auto; padding: 4px 0;
        }
        .sp-col-filter-list label {
            display: flex; align-items: center; gap: 6px;
            padding: 3px 10px; font-size: 12px; cursor: pointer;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            user-select: none;
        }
        .sp-col-filter-list label:hover { background: #f4f4f4; }
        .sp-col-filter-list .sp-blank-value { color: #999; font-style: italic; }
        .sp-col-filter-empty { padding: 8px 12px; color: #999; font-size: 12px; text-align: center; }

        .sp-col-filter-actions {
            display: flex; gap: 6px; padding: 6px 8px;
            border-top: 1px solid #eee; justify-content: flex-end;
        }
        .sp-col-filter-actions button {
            font-size: 12px; padding: 3px 12px; border-radius: 3px; cursor: pointer;
        }
        #sp-col-filter-apply {
            background: #0072c6; color: white; border: 1px solid #0072c6;
        }
        #sp-col-filter-apply:hover { background: #106ebe; border-color: #106ebe; }
        #sp-col-filter-clear {
            background: white; color: #333; border: 1px solid #ccc;
        }
        #sp-col-filter-clear:hover { background: #f4f4f4; }

        #sp-allitems-no-results {
            display: none; padding: 20px; text-align: center;
            color: #666; font-size: 13px;
        }
        #sp-allitems-no-results a { color: #0072c6; }

        /* Phase 66: Copy/Move Files Modal */
        .sp-modal {
            position: fixed; inset: 0; z-index: 10000;
            display: flex; align-items: center; justify-content: center;
        }
        .sp-modal-backdrop {
            position: absolute; inset: 0;
            background: rgba(0,0,0,0.4);
        }
        .sp-modal-dialog {
            position: relative; z-index: 1;
            background: white; border-radius: 4px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.22);
            width: 440px; max-width: 95vw;
        }
        .sp-modal-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 16px; border-bottom: 1px solid #e1e1e1;
        }
        .sp-modal-title { font-size: 16px; font-weight: 600; }
        .sp-modal-close {
            background: none; border: none; cursor: pointer;
            font-size: 20px; color: #666; line-height: 1; padding: 0 4px;
        }
        .sp-modal-close:hover { color: #000; }
        .sp-modal-body { padding: 16px; }
        .sp-modal-footer {
            display: flex; padding: 10px 16px; border-top: 1px solid #e1e1e1;
            justify-content: flex-end;
        }

        /* Copy/Move progress items */
        .sp-cm-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 4px 0; font-size: 12px; border-bottom: 1px solid #f4f4f4;
        }
        .sp-cm-item:last-child { border-bottom: none; }
        .sp-cm-filename { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
        .sp-cm-status-pending { color: #666; }
        .sp-cm-status-working { color: #0072c6; }
        .sp-cm-status-done { color: #107c10; }
        .sp-cm-status-error { color: #a4262c; }

        /* Phase 69: Bulk Edit Panel */
        .sp-bulkedit-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 300px;
            height: 100vh;
            background: #fff;
            border-left: 1px solid #c8c6c4;
            box-shadow: -4px 0 16px rgba(0,0,0,.15);
            z-index: 9200;
            display: flex;
            flex-direction: column;
            font-size: 13px;
        }
        .sp-bulkedit-hidden { display: none !important; }
        .sp-bulkedit-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.15);
            z-index: 9190;
        }
        .sp-bulkedit-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid #e1e1e1;
            background: #f4f4f4;
        }
        .sp-bulkedit-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
        .sp-bulkedit-close-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 18px;
            color: #555;
            line-height: 1;
            padding: 0 4px;
        }
        .sp-bulkedit-close-btn:hover { color: #a4262c; }
        .sp-bulkedit-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .sp-bulkedit-info {
            font-size: 12px;
            color: #666;
            margin: 0;
        }
        .sp-bulkedit-field-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .sp-bulkedit-label {
            font-size: 12px;
            font-weight: 600;
            color: #333;
        }
        .sp-bulkedit-select {
            font-size: 13px;
        }
        .sp-bulkedit-progress {
            font-size: 12px;
            padding: 4px 0;
        }
        .sp-bulkedit-progress-text { color: #666; }
        .sp-bulkedit-progress-ok { color: #107c10; }
        .sp-bulkedit-progress-err { color: #a4262c; }
        .sp-bulkedit-footer {
            padding: 12px 16px;
            border-top: 1px solid #e1e1e1;
            display: flex;
            align-items: center;
        }

        /* Phase 68: Row context menu (ECB) */
        .sp-ecb-col,
        .sp-ecb-cell {
            width: 28px;
            min-width: 28px;
            padding: 0 2px !important;
            text-align: center;
            vertical-align: middle;
        }
        .sp-ecb-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px 6px;
            font-size: 16px;
            color: #555;
            border-radius: 3px;
            line-height: 1;
        }
        .ms-list-row:hover .sp-ecb-btn,
        .sp-ecb-btn:focus {
            display: inline-block;
        }
        .sp-ecb-btn:hover {
            background: #f4f4f4;
            color: #000;
        }
        .sp-ecb-menu {
            position: absolute;
            z-index: 9100;
            min-width: 170px;
            background: #fff;
            border: 1px solid #c8c6c4;
            border-radius: 4px;
            box-shadow: 0 4px 14px rgba(0,0,0,.18);
            padding: 4px 0;
        }
        .sp-ecb-hidden { display: none !important; }
        .sp-ecb-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 14px;
            font-size: 13px;
            color: #333;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
        }
        .sp-ecb-item:hover {
            background: #f4f4f4;
            color: #000;
            text-decoration: none;
        }
        .sp-ecb-item-icon {
            width: 14px;
            text-align: center;
            color: #666;
            flex-shrink: 0;
        }
        .sp-ecb-item-danger:hover {
            background: #fde7e9;
            color: #a4262c;
        }
        .sp-ecb-item-danger:hover .sp-ecb-item-icon {
            color: #a4262c;
        }
        .sp-ecb-sep {
            border-top: 1px solid #e1e1e1;
            margin: 4px 0;
        }

        /* Phase 74: Quick search box */
        .sp-quick-search-bar {
            padding: 6px 0 4px 0;
        }
        .sp-quick-search-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
            max-width: 320px;
            width: 100%;
        }
        .sp-quick-search-icon {
            position: absolute;
            left: 8px;
            color: #999;
            font-size: 13px;
            pointer-events: none;
        }
        .sp-quick-search-input {
            width: 100%;
            padding: 5px 28px 5px 28px;
            border: 1px solid #c8c6c4;
            border-radius: 3px;
            font-size: 13px;
            color: #333;
            background: white;
            outline: none;
        }
        .sp-quick-search-input:focus {
            border-color: #0072c6;
            box-shadow: 0 0 0 1px #0072c6;
        }
        .sp-quick-search-clear {
            position: absolute;
            right: 6px;
            background: none;
            border: none;
            cursor: pointer;
            color: #999;
            padding: 0;
            font-size: 13px;
            line-height: 1;
        }
        .sp-quick-search-clear:hover { color: #333; }

        /* Phase 75: Field display improvements */
        .sp-bool-yes { color: #107c10; font-size: 14px; }
        .sp-bool-no  { color: #a19f9d; font-size: 14px; }
        .sp-url-link { color: #0072c6; text-decoration: none; }
        .sp-url-link:hover { text-decoration: underline; }

        /* Phase 76: Items per page selector */
        .sp-pagesize-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: #666;
            margin-top: 4px;
            padding: 2px 0;
        }
        .sp-pagesize-label,
        .sp-pagesize-unit {
            white-space: nowrap;
        }
        .sp-pagesize-select {
            padding: 2px 6px;
            border: 1px solid #c8c6c4;
            border-radius: 3px;
            font-size: 13px;
            color: #333;
            background: white;
            cursor: pointer;
        }
        .sp-pagesize-select:focus {
            outline: 1px solid var(--focus-ring-color, #0072c6);
            border-color: var(--focus-ring-color, #0072c6);
        }

        /* Phase 77: Column visibility panel */
        .sp-col-vis-container {
            display: inline-block;
            position: relative;
        }
        .sp-col-vis-btn {
            white-space: nowrap;
        }
        .sp-col-vis-panel {
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            z-index: 9500;
            background: #ffffff;
            border: 1px solid #c8c6c4;
            border-radius: 4px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
            min-width: 200px;
            max-width: 280px;
        }
        .sp-col-vis-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            border-bottom: 1px solid #e1e1e1;
            font-size: 13px;
            font-weight: 600;
            color: #201f1e;
        }
        .sp-col-vis-close {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 18px;
            line-height: 1;
            color: #666;
            padding: 0;
            margin-left: 8px;
        }
        .sp-col-vis-close:hover { color: #333; }
        .sp-col-vis-list {
            padding: 6px 0;
            max-height: 300px;
            overflow-y: auto;
        }
        .sp-col-vis-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 12px;
            font-size: 13px;
            color: #333;
            cursor: default;
        }
        .sp-col-vis-item:hover { background: #f4f4f4; }
        .sp-col-vis-item input[type="checkbox"] {
            cursor: pointer;
            flex-shrink: 0;
        }
        .sp-col-vis-item label {
            cursor: pointer;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sp-col-vis-item input[type="checkbox"]:disabled + label {
            color: #a19f9d;
            cursor: default;
        }
        .sp-col-vis-footer {
            padding: 6px 12px;
            border-top: 1px solid #e1e1e1;
            text-align: right;
        }

        /* Phase 79: Active filter chip bar */
        .sp-filter-chips-bar {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            padding: 6px 12px;
            background: #f0f8ff;
            border: 1px solid #c8e6f9;
            border-radius: 4px;
            margin-bottom: 6px;
            font-size: 13px;
        }
        .sp-filter-chips-label {
            color: #666;
            white-space: nowrap;
            font-weight: 500;
            margin-right: 4px;
        }
        .sp-filter-chips-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            flex: 1;
        }
        .sp-filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: white;
            border: 1px solid #0072c6;
            color: #0072c6;
            border-radius: 12px;
            padding: 2px 6px 2px 10px;
            font-size: 12px;
            white-space: nowrap;
        }
        .sp-filter-chip-label {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sp-filter-chip-remove {
            background: none;
            border: none;
            cursor: pointer;
            color: #0072c6;
            font-size: 14px;
            line-height: 1;
            padding: 0 2px;
        }
        .sp-filter-chip-remove:hover { color: #004578; }
        .sp-filter-chips-clear-all {
            white-space: nowrap;
            color: #666;
            font-size: 12px;
            margin-left: auto;
            padding: 0 4px;
            text-decoration: underline;
        }
        .sp-filter-chips-clear-all:hover { color: #333; }

        /* Phase 78: Resizable column headers */
        .sp-col-resize-handle {
            position: absolute;
            top: 0;
            right: 0;
            width: 7px;
            height: 100%;
            cursor: col-resize;
            z-index: 20;
            background: transparent;
            transition: background-color 0.1s;
        }
        .sp-col-resize-handle:hover {
            background-color: rgba(0, 120, 212, 0.3);
        }
        body.sp-col-resizing,
        body.sp-col-resizing * {
            cursor: col-resize !important;
            user-select: none !important;
        }
        #sp-list-table thead th {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Phase 102: Selected count badge */
        .sp-sel-count-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #0072c6;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            padding: 3px 8px 3px 10px;
            border-radius: 12px;
            margin-left: 6px;
            vertical-align: middle;
            white-space: nowrap;
            line-height: 1.4;
        }
        .sp-sel-count-clear {
            background: none;
            border: none;
            color: rgba(255,255,255,0.85);
            font-size: 15px;
            line-height: 1;
            cursor: pointer;
            padding: 0;
            margin-left: 2px;
            display: inline-flex;
            align-items: center;
        }
        .sp-sel-count-clear:hover { color: #fff; }

        /* Phase 109: Column reorder drag-drop */
        th.ms-field-header { cursor: grab; user-select: none; }
        th.ms-field-header.sp-col-dragging { opacity: 0.4; cursor: grabbing; }
        th.ms-field-header.sp-col-drag-over {
            box-shadow: -3px 0 0 var(--bs-primary, #0d6efd) inset;
        }

        /* Phase 110: Row density toggle */
        #sp-density-btn { min-width: 36px; }

        #sp-list-table.sp-density-compact th,
        #sp-list-table.sp-density-compact td {
            padding: 2px 6px !important;
            font-size: 0.85em;
            line-height: 1.2;
        }

        #sp-list-table.sp-density-comfortable th,
        #sp-list-table.sp-density-comfortable td {
            padding: 12px 8px !important;
            line-height: 1.6;
        }

        /* Phase 113: Cell copy on hover */
        td[data-field-name] { position: relative; }

        .sp-cell-copy-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            opacity: 0;
            padding: 1px 4px;
            border: none;
            background: transparent;
            color: #888;
            cursor: pointer;
            border-radius: 3px;
            font-size: 0.72em;
            line-height: 1.4;
            transition: opacity 0.15s, color 0.15s, background 0.15s;
            z-index: 1;
        }
        td[data-field-name]:hover .sp-cell-copy-btn { opacity: 1; }
        .sp-cell-copy-btn:hover { color: #0072c6; background: rgba(0,120,212,0.1); }
        .sp-cell-copy-btn:focus { outline: 2px solid var(--focus-ring-color, #0072c6); opacity: 1; }

        .sp-cell-copy-tooltip {
            position: absolute;
            top: 2px;
            right: 26px;
            font-size: 0.68em;
            color: #0072c6;
            background: #fff;
            border: 1px solid #0072c6;
            border-radius: 3px;
            padding: 1px 5px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            white-space: nowrap;
            z-index: 2;
        }
        .sp-cell-copy-tooltip.sp-visible { opacity: 1; }

        /* Hide copy buttons in Quick Edit mode */
        #sp-list-table.sp-qe-mode .sp-cell-copy-btn,
        #sp-list-table.sp-qe-mode .sp-cell-copy-tooltip { display: none !important; }

        /* Hide copy buttons in print */
        @media print { .sp-cell-copy-btn, .sp-cell-copy-tooltip { display: none !important; } }

        /* Phase 115: Filter by cell value */
        .sp-cell-filter-btn {
            position: absolute;
            top: 2px;
            right: 22px;
            opacity: 0;
            padding: 1px 4px;
            border: none;
            background: transparent;
            color: #888;
            cursor: pointer;
            border-radius: 3px;
            font-size: 0.72em;
            line-height: 1.4;
            transition: opacity 0.15s, color 0.15s, background 0.15s;
            z-index: 1;
        }
        td[data-field-name]:hover .sp-cell-filter-btn { opacity: 1; }
        .sp-cell-filter-btn:hover { color: #0072c6; background: rgba(0,120,212,0.1); }
        .sp-cell-filter-btn:focus { outline: 2px solid var(--focus-ring-color, #0072c6); opacity: 1; }

        /* Hide in Quick Edit and print */
        #sp-list-table.sp-qe-mode .sp-cell-filter-btn { display: none !important; }
        @media print { .sp-cell-filter-btn { display: none !important; } }

        /* PLAN-1025 migration completion: the ~50 legacy action buttons
           (Wrap, Focus, 1K, Auto, Stripe, No., Groups, Share, Bar, Flags,
           Calc, Chart, Timeline, Kanban, Pivot, Map, Schema, Annot.,
           Auto-Hide, Badges, Stale, Theme, Toolbar, Rel, A±, Empty, Col,
           ΣCol, Grp, Dup Rows, Gauge, Order, Types, Lock, ΣSel, Drag, HTML,
           Grid, Freeze, Sort, Anchor, Undo, Trail, Quality, Smart, ΣTotal…)
           are dynamically injected into .ms-toolbar-right by the phase IIFEs
           in allitems-main.js. PLAN-1025 hid the static #sp-legacy-toolbar
           but overlooked this dynamic container. The buttons are now reached
           via the View / Format / Dev dropdowns (which dispatch .click() on
           them by id), so the dynamic container can be hidden. Gated on
           #sp-toolbar-menus existing so other pages aren't affected. */
        .ms-webpart-page:has(#sp-toolbar-menus) .ms-toolbar-right,
        .ms-webpart-page:has(#sp-toolbar-menus) .ms-toolbar-left {
            display: none !important;
        }

        /* Phase 112: Print view */
        .sp-allitems-print-header { display: none; }

        @media print {
            /* Hide all chrome */
            #sp-quicklaunch,
            .ms-commandbar,
            .ms-toolbar-left,
            .ms-toolbar-right,
            .sp-filter-chips,
            .sp-filter-chips-bar,
            .sp-pagination,
            .card-header,
            .card-footer,
            #sp-scroll-top-btn,
            #sp-keyboard-help-btn,
            #sp-keyboard-help-offcanvas,
            .navbar,
            nav,
            .breadcrumb-wrapper,
            .breadcrumb { display: none !important; }

            /* Show print header */
            .sp-allitems-print-header {
                display: flex !important;
                justify-content: space-between;
                align-items: baseline;
                margin-bottom: 8px;
                border-bottom: 2px solid #000;
                padding-bottom: 4px;
            }
            .sp-allitems-print-title { font-size: 16px; font-weight: 700; }
            .sp-allitems-print-date  { font-size: 10px; color: #555; }

            /* Reset table for print */
            body, .card, .container, .container-fluid { background: white !important; }
            .card { box-shadow: none !important; border: none !important; }
            #sp-list-table { width: 100% !important; font-size: 11px; border-collapse: collapse !important; }

            /* Reset sticky positioning (breaks in print) */
            #sp-list-table th,
            #sp-list-table td {
                position: static !important;
                left: auto !important;
                padding: 3px 6px !important;
            }

            /* Hide checkbox and ECB columns */
            .ms-checkbox-column,
            .sp-ecb-col,
            .sp-ecb-cell { display: none !important; }

            /* No hover highlight */
            #sp-list-table tbody tr:hover td { background: transparent !important; }

            /* Keep table container visible */
            .ms-list-grid-container { overflow: visible !important; }
        }

        /* Phase 118: Saved Filter Presets */
        .sp-saved-filters-container { position: relative; display: inline-block; }
        .sp-saved-filters-panel {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            z-index: 1050;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            min-width: 270px;
            max-width: 360px;
        }
        .sp-saved-filters-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            border-bottom: 1px solid #dee2e6;
            font-weight: 600;
            font-size: 0.85em;
            background: #f8f9fa;
            border-radius: 4px 4px 0 0;
        }
        .sp-saved-filters-close {
            background: none; border: none; font-size: 1.1em;
            line-height: 1; cursor: pointer; color: #666; padding: 0 2px;
        }
        .sp-saved-filters-close:hover { color: #000; }
        .sp-saved-filters-body { padding: 8px 10px; }
        .sp-preset-save-row { margin-bottom: 8px; }
        .sp-preset-save-row label { font-size: 0.8em; color: #666; display: block; margin-bottom: 3px; }
        .sp-preset-save-row .sp-preset-input-group { display: flex; gap: 4px; }
        .sp-preset-save-row input[type="text"] {
            flex: 1; padding: 3px 6px; border: 1px solid #ced4da;
            border-radius: 3px; font-size: 0.85em;
        }
        .sp-preset-save-btn-elem {
            padding: 3px 10px; background: #0072c6; color: #fff;
            border: none; border-radius: 3px; font-size: 0.85em; cursor: pointer;
        }
        .sp-preset-save-btn-elem:hover { background: #005a9e; }
        .sp-preset-divider { border-top: 1px solid #dee2e6; margin: 6px 0; }
        .sp-preset-item {
            display: flex; align-items: center; padding: 4px 2px;
            border-radius: 3px; cursor: pointer;
        }
        .sp-preset-item:hover { background: rgba(0,120,212,0.08); }
        .sp-preset-item-name {
            flex: 1; font-size: 0.85em; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; padding: 0 4px;
        }
        .sp-preset-item-del {
            background: none; border: none; color: #999;
            cursor: pointer; font-size: 0.85em; padding: 0 4px;
            line-height: 1; border-radius: 2px;
        }
        .sp-preset-item-del:hover { color: #dc3545; background: rgba(220,53,69,0.08); }
        .sp-preset-empty { font-size: 0.82em; color: #888; padding: 2px 4px; }
        @media print { .sp-saved-filters-container { display: none !important; } }

        /* Phase 119: Column Aggregate Footer */
        #sp-list-table tfoot.sp-agg-footer { border-top: 2px solid #c8c6c4; }
        #sp-list-table tfoot.sp-agg-footer td {
            font-size: 0.8em;
            color: #333;
            font-weight: 600;
            padding: 4px 8px;
            white-space: nowrap;
            background: #f0f0f0;
        }
        #sp-list-table tfoot.sp-agg-footer td:first-child {
            text-align: center;
            color: #0072c6;
            font-size: 0.9em;
        }
        #sp-agg-footer-btn.sp-agg-active {
            background: #0072c6 !important;
            color: #fff !important;
            border-color: #0072c6 !important;
        }
        @media print { #sp-agg-footer-btn { display: none !important; } }

        /* Phase 121: Conditional Row Formatting */
        .sp-row-fmt-container { position: relative; display: inline-block; }
        .sp-row-fmt-panel {
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            z-index: 1050;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            min-width: 300px;
            max-width: 380px;
        }
        .sp-row-fmt-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            border-bottom: 1px solid #dee2e6;
            font-weight: 600;
            font-size: 0.85em;
            background: #f8f9fa;
            border-radius: 4px 4px 0 0;
        }
        .sp-row-fmt-close {
            background: none; border: none; font-size: 1.1em; line-height: 1;
            cursor: pointer; color: #666; padding: 0 2px;
        }
        .sp-row-fmt-close:hover { color: #000; }
        .sp-row-fmt-body { padding: 8px 10px; }
        .sp-row-fmt-add-section { margin-bottom: 8px; }
        .sp-row-fmt-add-section label { font-size: 0.8em; color: #666; display: block; margin-bottom: 2px; }
        .sp-row-fmt-add-section select, .sp-row-fmt-add-section input[type="text"] {
            width: 100%; padding: 3px 6px; border: 1px solid #ced4da;
            border-radius: 3px; font-size: 0.82em; margin-bottom: 4px; box-sizing: border-box;
        }
        .sp-row-fmt-colors { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
        .sp-row-fmt-swatch {
            width: 20px; height: 20px; border-radius: 3px; cursor: pointer;
            border: 2px solid transparent; flex-shrink: 0;
        }
        .sp-row-fmt-swatch.selected { border-color: #0072c6; }
        .sp-row-fmt-swatch:hover { border-color: #666; }
        .sp-row-fmt-add-btn {
            width: 100%; padding: 4px; background: #0072c6; color: #fff;
            border: none; border-radius: 3px; font-size: 0.82em; cursor: pointer;
        }
        .sp-row-fmt-add-btn:hover { background: #005a9e; }
        .sp-row-fmt-divider { border-top: 1px solid #dee2e6; margin: 8px 0 6px; }
        .sp-row-fmt-rule {
            display: flex; align-items: center; padding: 3px 2px;
            border-radius: 3px; font-size: 0.82em; gap: 6px;
        }
        .sp-row-fmt-rule:hover { background: rgba(0,120,212,0.06); }
        .sp-row-fmt-rule-dot {
            width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15);
        }
        .sp-row-fmt-rule-desc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .sp-row-fmt-del {
            background: none; border: none; color: #999; cursor: pointer;
            font-size: 0.85em; padding: 0 3px; border-radius: 2px; line-height: 1;
        }
        .sp-row-fmt-del:hover { color: #dc3545; background: rgba(220,53,69,0.08); }
        .sp-row-fmt-empty { font-size: 0.82em; color: #888; padding: 2px 4px; }
        @media print { .sp-row-fmt-container { display: none !important; } }

        /* Phase 122: Group Aggregate Subtotals */
        #sp-list-tbody tr.sp-group-subtotal td {
            font-size: 0.78em;
            color: #555;
            font-weight: 500;
            padding: 2px 8px 4px;
            background: #f8f9fa;
            border-top: 1px dashed #dee2e6;
            white-space: nowrap;
        }
        #sp-list-tbody tr.sp-group-subtotal td:first-child {
            color: #0072c6;
            text-align: center;
            font-style: italic;
            font-weight: 600;
        }
        @media print { #sp-list-tbody tr.sp-group-subtotal { display: none !important; } }

        /* Phase 123: Page Jump Input */
        .ms-paging-jump {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-left: 12px;
        }
        .ms-paging-jump-label {
            font-size: 0.82em;
            color: #666;
            white-space: nowrap;
        }
        .ms-paging-jump-input {
            width: 4.5ch;
            padding: 2px 4px;
            border: 1px solid #ced4da;
            border-radius: 3px;
            font-size: 0.82em;
            text-align: center;
            /* Hide browser spin buttons */
            -moz-appearance: textfield;
        }
        .ms-paging-jump-input::-webkit-inner-spin-button,
        .ms-paging-jump-input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .ms-paging-jump-btn {
            padding: 2px 8px !important;
            font-size: 0.82em !important;
        }
        @media print { .ms-paging-jump { display: none !important; } }

        /* Phase 124: Multi-Column Sort */
        .sp-msort-badge {
            display: inline-block;
            font-size: 0.65em;
            font-weight: 700;
            color: #0072c6;
            line-height: 1;
            margin-left: 1px;
            vertical-align: super;
        }
        #sp-msort-clear {
            display: none;
            font-size: 0.78em;
            color: #0072c6;
            background: #e8f4fe;
            border: 1px solid #b3d9f7;
            border-radius: 3px;
            padding: 2px 8px;
            cursor: pointer;
            margin-bottom: 4px;
        }
        #sp-msort-clear:hover { background: #cce5ff; }
        @media print { .sp-msort-badge, #sp-msort-clear { display: none !important; } }

        /* Phase 125: Row Expand Panel */
        .sp-row-expand-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.9em;
            color: #0072c6;
            padding: 0 4px 0 0;
            line-height: 1;
            vertical-align: middle;
            flex-shrink: 0;
            font-weight: bold;
        }
        tr[data-item-id]:hover .sp-row-expand-btn,
        tr[data-item-id].sp-row-expanded .sp-row-expand-btn {
            display: inline;
        }
        .sp-row-expand-btn.sp-expanded { color: #005a9e; }
        tr.sp-row-detail > td {
            padding: 0 !important;
            background: #f8f9fa !important;
            border-top: none !important;
        }
        .sp-row-detail-inner {
            display: grid;
            grid-template-columns: max-content 1fr;
            gap: 0;
            padding: 8px 48px 8px 40px;
            font-size: 0.82em;
            border-left: 3px solid #0072c6;
            margin: 4px 10px;
            background: #fff;
            border-radius: 0 4px 4px 0;
            box-shadow: 0 1px 4px rgba(0,0,0,0.07);
        }
        .sp-row-detail-label {
            font-weight: 600;
            color: #444;
            padding: 3px 20px 3px 0;
            white-space: nowrap;
            border-bottom: 1px solid #f0f0f0;
        }
        .sp-row-detail-value {
            color: #222;
            padding: 3px 0;
            word-break: break-word;
            border-bottom: 1px solid #f0f0f0;
        }
        .sp-row-detail-label:last-of-type,
        .sp-row-detail-value:last-child { border-bottom: none; }
        @media print { .sp-row-expand-btn, tr.sp-row-detail { display: none !important; } }

        /* Phase 126: Command Palette */
        #sp-cmd-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.25);
            z-index: 2000;
        }
        #sp-cmd-palette {
            display: none;
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 480px;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.18);
            z-index: 2001;
            overflow: hidden;
        }
        #sp-cmd-search-wrap {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            border-bottom: 1px solid #dee2e6;
            gap: 8px;
        }
        #sp-cmd-search-wrap .bi { color: #888; font-size: 1em; flex-shrink: 0; }
        #sp-cmd-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 0.9em;
            background: transparent;
            min-width: 0;
        }
        #sp-cmd-input::placeholder { color: #aaa; }
        #sp-cmd-esc-hint {
            font-size: 0.72em;
            color: #999;
            border: 1px solid #ddd;
            border-radius: 3px;
            padding: 1px 5px;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
        }
        #sp-cmd-esc-hint:hover { background: #f0f0f0; }
        #sp-cmd-list {
            max-height: 320px;
            overflow-y: auto;
            padding: 4px 0;
        }
        .sp-cmd-item {
            display: flex;
            align-items: center;
            padding: 7px 14px;
            cursor: pointer;
            gap: 10px;
            font-size: 0.85em;
        }
        .sp-cmd-item:hover, .sp-cmd-item.sp-cmd-selected { background: #e8f4fe; }
        .sp-cmd-icon { width: 18px; text-align: center; color: #555; flex-shrink: 0; font-size: 0.9em; }
        .sp-cmd-label { flex: 1; }
        .sp-cmd-desc { font-size: 0.82em; color: #888; margin-left: 4px; }
        .sp-cmd-shortcut {
            font-size: 0.75em;
            color: #666;
            border: 1px solid #ddd;
            border-radius: 3px;
            padding: 1px 5px;
            background: #f8f9fa;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .sp-cmd-empty { padding: 20px 14px; font-size: 0.85em; color: #888; text-align: center; }
        @media print { #sp-cmd-backdrop, #sp-cmd-palette { display: none !important; } }

        /* Phase 127: Column Data Bars */
        .sp-db-toggle-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.75em;
            color: #888;
            padding: 0 0 0 4px;
            line-height: 1;
            vertical-align: middle;
        }
        thead th:hover .sp-db-toggle-btn,
        thead th.sp-db-active .sp-db-toggle-btn { display: inline-block; }
        thead th.sp-db-active .sp-db-toggle-btn { color: #0072c6; }
        .sp-db-toggle-btn:hover { color: #0072c6; }
        @media print { .sp-db-toggle-btn { display: none !important; } }

        /* Phase 128: Cross-Page Selection */
        #sp-xsel-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.8em;
            color: #0072c6;
            background: #e8f4fe;
            border: 1px solid #b3d9f7;
            border-radius: 12px;
            padding: 2px 8px 2px 10px;
            margin-left: 6px;
            vertical-align: middle;
            white-space: nowrap;
        }
        #sp-xsel-clear {
            background: none;
            border: none;
            cursor: pointer;
            color: #888;
            padding: 0;
            font-size: 1.1em;
            line-height: 1;
            vertical-align: middle;
        }
        #sp-xsel-clear:hover { color: #d32f2f; }
        @media print { #sp-xsel-badge { display: none !important; } }

        /* Phase 130: Column Color Scale */
        .sp-cs-toggle-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.75em;
            color: #888;
            padding: 0 0 0 4px;
            line-height: 1;
            vertical-align: middle;
        }
        thead th:hover .sp-cs-toggle-btn,
        thead th.sp-cs-active .sp-cs-toggle-btn { display: inline-block; }
        thead th.sp-cs-active .sp-cs-toggle-btn { color: #107c10; }
        .sp-cs-toggle-btn:hover { color: #107c10; }
        @media print { .sp-cs-toggle-btn { display: none !important; } }

        /* Phase 131: Pinned Rows */
        .sp-pin-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.8em;
            color: #bbb;
            padding: 0 2px;
            line-height: 1;
            vertical-align: middle;
            position: absolute;
            right: 3px;
            top: 50%;
            transform: translateY(-50%);
        }
        tr[data-item-id]:hover .sp-pin-btn,
        tr.sp-row-pinned .sp-pin-btn { display: inline-block; }
        tr.sp-row-pinned .sp-pin-btn { color: #f9a825; }
        .sp-pin-btn:hover { color: #f9a825; }
        tr.sp-row-pinned > td:first-of-type {
            border-left: 3px solid #f9a825 !important;
        }
        tr.sp-row-pinned {
            background-color: rgba(249, 168, 37, 0.04) !important;
        }
        @media print { .sp-pin-btn { display: none !important; } }

        /* Phase 132: Selection Status Bar */
        #sp-sel-statusbar {
            position: fixed;
            bottom: 16px;
            right: 16px;
            display: flex;
            align-items: center;
            gap: 0;
            background: rgba(255, 255, 255, 0.97);
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            padding: 5px 6px 5px 12px;
            font-size: 0.78em;
            color: #333;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
            z-index: 300;
            white-space: nowrap;
            pointer-events: auto;
            max-width: 520px;
        }
        .sp-statusbar-close {
            background: none;
            border: none;
            cursor: pointer;
            color: #888;
            padding: 0 2px 0 8px;
            font-size: 1.1em;
            line-height: 1;
            vertical-align: middle;
            flex-shrink: 0;
        }
        .sp-statusbar-close:hover { color: #d32f2f; }
        @media print { #sp-sel-statusbar { display: none !important; } }

        /* Phase 133: Inline Column Filter Row */
        #sp-inline-filter-row td {
            padding: 2px 4px;
            background: #f3f6fb;
            border-bottom: 2px solid #0072c6;
        }
        .sp-ifilter-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }
        .sp-ifilter-input {
            width: 100%;
            padding: 2px 20px 2px 5px;
            border: 1px solid #c8c8c8;
            border-radius: 3px;
            font-size: 0.8em;
            outline: none;
            background: #fff;
            min-width: 0;
            box-sizing: border-box;
        }
        .sp-ifilter-input:focus { border-color: #0072c6; box-shadow: 0 0 0 1px #0072c6; }
        .sp-ifilter-input.sp-ifilter-active { border-color: #0072c6; background: #e8f1fb; }
        .sp-ifilter-clear {
            position: absolute;
            right: 3px;
            background: none;
            border: none;
            cursor: pointer;
            color: #888;
            font-size: 0.75em;
            padding: 0;
            line-height: 1;
            display: none;
        }
        .sp-ifilter-clear.visible { display: block; }
        .sp-ifilter-clear:hover { color: #d32f2f; }
        #sp-inline-filter-btn.sp-ifilter-btn-active { color: #0072c6; font-weight: 600; }
        @media print { #sp-inline-filter-row { display: none !important; } }

        /* Phase 135: Row Color Tags */
        :root {
            --sp-tag-red:    #ef4444;
            --sp-tag-orange: #f97316;
            --sp-tag-yellow: #eab308;
            --sp-tag-green:  #22c55e;
            --sp-tag-blue:   #3b82f6;
            --sp-tag-purple: #a855f7;
        }
        .sp-tag-btn {
            display: none;
            background: none;
            border: 1px solid #ccc;
            border-radius: 50%;
            width: 12px;
            height: 12px;
            cursor: pointer;
            padding: 0;
            font-size: 0px;
            vertical-align: middle;
            position: absolute;
            left: 2px;
            top: 50%;
            transform: translateY(-50%);
            flex-shrink: 0;
            transition: background 0.1s;
        }
        tr[data-item-id]:hover .sp-tag-btn,
        tr.sp-tagged .sp-tag-btn { display: inline-block; }
        tr.sp-tag-red    .sp-tag-btn { background: var(--sp-tag-red);    border-color: var(--sp-tag-red); }
        tr.sp-tag-orange .sp-tag-btn { background: var(--sp-tag-orange); border-color: var(--sp-tag-orange); }
        tr.sp-tag-yellow .sp-tag-btn { background: var(--sp-tag-yellow); border-color: var(--sp-tag-yellow); }
        tr.sp-tag-green  .sp-tag-btn { background: var(--sp-tag-green);  border-color: var(--sp-tag-green); }
        tr.sp-tag-blue   .sp-tag-btn { background: var(--sp-tag-blue);   border-color: var(--sp-tag-blue); }
        tr.sp-tag-purple .sp-tag-btn { background: var(--sp-tag-purple); border-color: var(--sp-tag-purple); }
        tr.sp-tag-red    > td:first-of-type { border-left: 3px solid var(--sp-tag-red)    !important; background-color: rgba(239,68,68,0.05)   !important; }
        tr.sp-tag-orange > td:first-of-type { border-left: 3px solid var(--sp-tag-orange) !important; background-color: rgba(249,115,22,0.05)  !important; }
        tr.sp-tag-yellow > td:first-of-type { border-left: 3px solid var(--sp-tag-yellow) !important; background-color: rgba(234,179,8,0.05)   !important; }
        tr.sp-tag-green  > td:first-of-type { border-left: 3px solid var(--sp-tag-green)  !important; background-color: rgba(34,197,94,0.05)   !important; }
        tr.sp-tag-blue   > td:first-of-type { border-left: 3px solid var(--sp-tag-blue)   !important; background-color: rgba(59,130,246,0.05)  !important; }
        tr.sp-tag-purple > td:first-of-type { border-left: 3px solid var(--sp-tag-purple) !important; background-color: rgba(168,85,247,0.05)  !important; }
        #sp-tag-picker {
            position: fixed;
            background: #fff;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            padding: 6px 8px;
            z-index: 600;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
        }
        .sp-tag-swatch {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid transparent;
            cursor: pointer;
            flex-shrink: 0;
            padding: 0;
            transition: transform 0.1s;
        }
        .sp-tag-swatch:hover { border-color: #333; transform: scale(1.2); }
        .sp-tag-swatch-clear {
            background: #e8e8e8 !important;
            border-color: #bbb !important;
            position: relative;
            font-size: 11px;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #sp-tags-btn.sp-tags-active { color: #0072c6; font-weight: 600; }
        .sp-tag-filter-item:hover { background: #f3f3f3; }
        @media print { .sp-tag-btn, #sp-tag-picker { display: none !important; } }

        /* Phase 136: Find in Page */
        #sp-find-bar {
            position: fixed;
            top: 8px;
            right: 8px;
            z-index: 700;
            display: none;
            background: #fff;
            border: 1px solid #c8c8c8;
            border-radius: 6px;
            padding: 5px 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
            align-items: center;
            gap: 6px;
            font-size: 0.85em;
        }
        #sp-find-bar.sp-find-open { display: flex; }
        #sp-find-input {
            width: 200px;
            padding: 3px 8px;
            border: 1px solid #c8c8c8;
            border-radius: 3px;
            font-size: 0.9em;
            outline: none;
            box-sizing: border-box;
        }
        #sp-find-input:focus { border-color: #0072c6; box-shadow: 0 0 0 1px #0072c6; }
        #sp-find-count { color: #666; min-width: 52px; text-align: center; font-size: 0.85em; white-space: nowrap; }
        #sp-find-count.sp-find-noresult { color: #d32f2f; }
        .sp-find-nav-btn {
            background: none;
            border: 1px solid #c8c8c8;
            border-radius: 3px;
            cursor: pointer;
            padding: 2px 6px;
            font-size: 0.8em;
            color: #444;
            line-height: 1.2;
        }
        .sp-find-nav-btn:hover { background: #f0f0f0; }
        .sp-find-nav-btn:disabled { opacity: 0.4; cursor: default; }
        #sp-find-close-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #888;
            font-size: 1.1em;
            padding: 0 2px;
            line-height: 1;
        }
        #sp-find-close-btn:hover { color: #d32f2f; }
        #sp-list-table td.sp-find-match {
            background-color: rgba(255, 230, 0, 0.45) !important;
        }
        #sp-list-table td.sp-find-active {
            background-color: rgba(255, 140, 0, 0.65) !important;
            outline: 2px solid #e65c00;
            outline-offset: -2px;
        }
        @media print { #sp-find-bar { display: none !important; } }

        /* Phase 137: Row Notes */
        .sp-note-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: #aaa;
            font-size: 0.85em;
            padding: 0;
            line-height: 1;
            z-index: 2;
        }
        tr[data-item-id]:hover .sp-note-btn,
        tr.sp-has-note .sp-note-btn { display: inline-block; }
        tr.sp-has-note .sp-note-btn { color: #f97316; }
        .sp-note-dot {
            display: none;
            position: absolute;
            right: 14px;
            top: 3px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #f97316;
            pointer-events: none;
            z-index: 3;
        }
        tr.sp-has-note .sp-note-dot { display: block; }
        #sp-note-popup {
            position: fixed;
            display: none;
            background: #fff;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            padding: 10px 12px;
            min-width: 240px;
            max-width: 320px;
            z-index: 800;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
            font-size: 0.85em;
        }
        #sp-note-popup .sp-note-popup-title {
            font-weight: 600;
            color: #0072c6;
            margin-bottom: 6px;
            font-size: 0.9em;
        }
        #sp-note-textarea {
            width: 100%;
            min-height: 64px;
            resize: vertical;
            border: 1px solid #c8c8c8;
            border-radius: 3px;
            padding: 4px 6px;
            font-size: 0.9em;
            font-family: inherit;
            box-sizing: border-box;
            outline: none;
        }
        #sp-note-textarea:focus { border-color: #0072c6; box-shadow: 0 0 0 1px #0072c6; }
        .sp-note-popup-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
        .sp-note-popup-actions button { font-size: 0.85em; padding: 3px 10px; border-radius: 3px; cursor: pointer; border: 1px solid #c8c8c8; background: #fafafa; }
        .sp-note-popup-actions button:hover { background: #f0f0f0; }
        .sp-note-popup-actions .sp-note-save { background: #0072c6; color: #fff; border-color: #0072c6; }
        .sp-note-popup-actions .sp-note-save:hover { background: #106ebe; }
        .sp-note-popup-actions .sp-note-clear { color: #d32f2f; }
        #sp-rownotes-btn.sp-rownotes-active { color: #f97316; font-weight: 600; }
        @media print { .sp-note-btn, .sp-note-dot, #sp-note-popup { display: none !important; } }

        /* Phase 134: Column Statistics Tooltip */
        #sp-col-stats-tip {
            position: fixed;
            display: none;
            background: #fff;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            padding: 8px 12px;
            min-width: 160px;
            font-size: 0.78em;
            color: #333;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 500;
            pointer-events: none;
        }
        #sp-col-stats-tip .sp-stats-title {
            font-weight: 600;
            font-size: 0.9em;
            border-bottom: 1px solid #e8e8e8;
            padding-bottom: 4px;
            margin-bottom: 4px;
            color: #0072c6;
            white-space: nowrap;
        }
        #sp-col-stats-tip .sp-stats-row {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 1px 0;
            white-space: nowrap;
        }
        #sp-col-stats-tip .sp-stats-label { color: #666; }
        #sp-col-stats-tip .sp-stats-val { font-weight: 600; text-align: right; }
        @media print { #sp-col-stats-tip { display: none !important; } }

        /* Phase 138: Column Context Menu */
        #sp-col-context-menu {
            position: fixed;
            display: none;
            background: #fff;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            padding: 4px 0;
            min-width: 180px;
            z-index: 900;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
            font-size: 0.85em;
        }
        .sp-col-menu-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            cursor: pointer;
            color: #333;
            background: none;
            border: none;
            width: 100%;
            text-align: left;
            font-size: 0.9em;
            font-family: inherit;
        }
        .sp-col-menu-item:hover { background: #f3f3f3; }
        .sp-col-menu-item .sp-col-menu-icon { width: 14px; text-align: center; color: #666; font-size: 0.9em; flex-shrink: 0; }
        .sp-col-menu-separator { height: 1px; background: #e8e8e8; margin: 3px 0; }
        th[data-field] .sp-col-menu-trigger {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            color: #888;
            padding: 0 2px;
            font-size: 0.8em;
            line-height: 1;
            vertical-align: middle;
            margin-left: 2px;
        }
        th[data-field]:hover .sp-col-menu-trigger { display: inline; }
        th[data-field] .sp-col-menu-trigger:hover { color: #0072c6; }
        @media print { #sp-col-context-menu { display: none !important; } }

        /* Phase 139: Cell Overflow Tooltip */
        #sp-cell-tip {
            position: fixed;
            display: none;
            background: #2b2b2b;
            color: #f0f0f0;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.82em;
            max-width: 340px;
            min-width: 80px;
            word-break: break-word;
            white-space: pre-wrap;
            line-height: 1.45;
            z-index: 1000;
            pointer-events: none;
            box-shadow: 0 3px 10px rgba(0,0,0,0.3);
            border: 1px solid #444;
        }
        @media print { #sp-cell-tip { display: none !important; } }

        /* Phase 140: Smart Row Actions Bar */
        .sp-row-actions-th,
        .sp-row-actions-cell {
            position: sticky;
            right: 0;
            width: 82px;
            min-width: 82px;
            max-width: 82px;
            z-index: 3;
            background: var(--sp-row-bg, #fff);
            padding: 0 !important;
            border-left: 1px solid #e8e8e8;
        }
        .sp-row-actions-th { background: #f8f8f8; }
        tr[data-item-id]:hover .sp-row-actions-cell { background: #f0f6ff; }
        .sp-row-actions {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 2px;
            height: 100%;
            padding: 0 4px;
        }
        tr[data-item-id]:hover .sp-row-actions { display: flex; }
        .sp-row-action-btn {
            background: none;
            border: 1px solid transparent;
            border-radius: 3px;
            cursor: pointer;
            padding: 3px 5px;
            font-size: 0.78em;
            color: #555;
            line-height: 1;
            transition: background 0.1s, border-color 0.1s;
        }
        .sp-row-action-btn:hover { background: #e0ecff; border-color: #0072c6; color: #0072c6; }
        .sp-row-action-btn.sp-row-act-copy:hover { color: #107c10; border-color: #107c10; background: #e8f5e9; }
        .sp-row-action-btn.sp-row-act-new:hover { color: #8764b8; border-color: #8764b8; background: #f3eeff; }
        @media print { .sp-row-actions-cell, .sp-row-actions-th { display: none !important; } }

        /* Phase 141: Column Freeze */
        th.sp-col-frozen {
            position: sticky !important;
            z-index: 3;
            background: #f8f8f8;
            border-left: 2px solid #0072c6 !important;
        }
        th.sp-col-frozen::after {
            content: '\00a0\1F4CC';
            font-size: 0.65em;
            opacity: 0.55;
            vertical-align: super;
        }
        td.sp-col-frozen {
            position: sticky !important;
            z-index: 2;
            background: inherit;
        }
        tr[data-item-id]:hover td.sp-col-frozen {
            background: #f0f6ff;
        }

        /* Phase 143: My Views Panel */
        #sp-views-panel {
            position: fixed;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-width: 200px;
            max-width: 280px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
            z-index: 200;
            display: none;
            max-height: 320px;
            overflow-y: auto;
        }
        .sp-views-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.88em;
            color: #333;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }
        .sp-views-item:hover { background: #f0f6ff; }
        .sp-views-item.sp-views-save { color: #0072c6; font-style: italic; }
        .sp-views-separator { height: 1px; background: #eee; margin: 2px 0; }
        .sp-views-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
        .sp-views-del {
            margin-left: auto;
            flex-shrink: 0;
            opacity: 0;
            background: none;
            border: none;
            cursor: pointer;
            color: #999;
            font-size: 0.85em;
            padding: 0 3px;
            line-height: 1;
        }
        .sp-views-item:hover .sp-views-del { opacity: 1; }
        .sp-views-del:hover { color: #d32f2f !important; }

        /* Phase 145: Inline Cell Editing */
        .sp-cell-editing {
            outline: 2px solid var(--focus-ring-color, #0072c6) !important;
            outline-offset: -2px;
            background: #fff !important;
            position: relative;
        }
        .sp-cell-editing input,
        .sp-cell-editing select {
            width: 100%;
            border: none;
            outline: none;
            background: transparent;
            font: inherit;
            color: inherit;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .sp-cell-saving { opacity: 0.55; pointer-events: none; }
        .sp-cell-saved-flash { outline: 2px solid #2e7d32 !important; transition: outline 0.15s; }
        .sp-cell-error { outline: 2px solid #c62828 !important; }
        /* Phase 146: Quick Add Item Row */
        .sp-quickadd-row td { background: #f0f6ff; border-top: 2px solid #0072c6; }
        .sp-quickadd-row td input,
        .sp-quickadd-row td select {
            width: 100%;
            border: 1px solid #c8d6e8;
            border-radius: 3px;
            padding: 2px 4px;
            font: inherit;
            background: #fff;
            box-sizing: border-box;
        }
        .sp-quickadd-row td input:focus,
        .sp-quickadd-row td select:focus { border-color: #0072c6; outline: none; }
        .sp-quickadd-actions { display: flex; gap: 4px; align-items: center; }
        .sp-quickadd-save { color: #0072c6; cursor: pointer; font-size: 1.1em; }
        .sp-quickadd-cancel { color: #999; cursor: pointer; font-size: 1.1em; }
        .sp-quickadd-save:hover { color: #005a9e; }
        .sp-quickadd-cancel:hover { color: #c62828; }
        @keyframes sp-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-4px)} 40%,80%{transform:translateX(4px)} }
        .sp-shake { animation: sp-shake 0.35s ease; }
        /* Phase 147: Multi-Sort Priority Badge & Group-By Highlight */
        .sp-msort-badge {
            display: inline-block;
            font-size: 0.75em;
            color: #0072c6;
            margin-left: 3px;
            vertical-align: middle;
            line-height: 1;
            user-select: none;
        }
        th.sp-groupby-active {
            border-bottom: 3px solid #00b4d8 !important;
            background: linear-gradient(to bottom, transparent 85%, rgba(0,180,216,0.12) 100%);
        }
        /* Phase 148: Undo Last Inline Edit */
        .sp-cell-undo-flash {
            outline: 2px solid #e65100 !important;
            transition: outline 0.3s;
        }
        /* Phase 149: Paste Rows from Clipboard */
        #sp-paste-preview-wrap { max-height: 280px; overflow-y: auto; }
        #sp-paste-preview-wrap table { font-size: 0.82em; }
        #sp-paste-preview-wrap th { white-space: nowrap; }
        #sp-paste-progress { display: none; }
        .sp-paste-col-ignored { color: #999; text-decoration: line-through; }
        /* Phase 150: Duplicate Row Action */
        .sp-dup-btn {
            cursor: pointer;
            color: #666;
            font-size: 1em;
            margin-left: 4px;
            opacity: 0.75;
            user-select: none;
            display: inline-block;
            vertical-align: middle;
        }
        .sp-dup-btn:hover { color: #0072c6; opacity: 1; }
        /* Phase 152: Column Auto-Fit Width */
        th.sp-autofit-flash {
            background-color: rgba(0, 120, 212, 0.12) !important;
            transition: background-color 0.4s;
        }
        /* Phase 153: Bulk Field Edit */
        #sp-bulkfield-btn { display: none; }
        #sp-bulkfield-btn.sp-bulkfield-visible { display: inline-block; }
        #sp-bulkfield-progress { display: none; }
        /* Phase 156: Inline Edit Type Validation */
        td.sp-cell-validation-error input,
        td.sp-cell-validation-error select {
            border-color: #d13438 !important;
            background-color: #fff0f0 !important;
            outline-color: #d13438 !important;
        }
        td.sp-cell-validation-error {
            position: relative;
        }
        .sp-cell-val-tip {
            position: absolute;
            left: 0;
            top: 100%;
            z-index: 9999;
            background: #d13438;
            color: #fff;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 0 0 3px 3px;
            white-space: nowrap;
            pointer-events: none;
            display: none;
        }

        /* Phase 159: Read-Only Cell Indicator */
        td.sp-cell-readonly {
            cursor: not-allowed !important;
            opacity: 0.75;
        }
        td.sp-cell-readonly:hover {
            background-color: rgba(0, 0, 0, 0.03) !important;
        }

        /* Phase 161: URL/Hyperlink Dual Editor */
        .sp-url-editor {
            display: flex;
            flex-direction: column;
            gap: 2px;
            width: 100%;
        }
        .sp-url-editor input {
            width: 100%;
            box-sizing: border-box;
            font: inherit;
            font-size: 0.92em;
            padding: 1px 3px;
            border: 1px solid #aaa;
            border-radius: 2px;
        }
        .sp-url-editor input:focus {
            outline: none;
            border-color: #0072c6;
            box-shadow: 0 0 0 2px rgba(0,120,212,0.2);
        }

        /* Phase 162: Cell Selection & Ctrl+C Copy */
        td.sp-cell-selected {
            outline: 2px solid var(--focus-ring-color, #0072c6) !important;
            outline-offset: -2px;
            background: rgba(0, 120, 212, 0.06) !important;
        }
        td.sp-cell-copy-flash {
            background: rgba(40, 167, 69, 0.25) !important;
            transition: background 0.4s ease-out;
        }

        /* Phase 165: Multi-Choice Inline Checkboxes */
        .sp-mchoice-panel {
            display: flex;
            flex-direction: column;
            gap: 2px;
            background: #fff;
            border: 1px solid #0072c6;
            border-radius: 2px;
            padding: 4px 6px;
            max-height: 160px;
            overflow-y: auto;
            min-width: 120px;
            font-size: 0.92em;
        }
        .sp-mchoice-panel label {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            white-space: nowrap;
            padding: 1px 0;
        }
        .sp-mchoice-panel label:hover {
            color: #0072c6;
        }
        .sp-mchoice-panel input[type="checkbox"] {
            width: auto;
            margin: 0;
            cursor: pointer;
        }

        /* Phase 167: Inline Edit Keyboard Hint */
        #sp-edit-hint {
            position: fixed;
            bottom: 18px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(30, 30, 30, 0.88);
            color: #fff;
            font-size: 0.82em;
            padding: 5px 14px 5px 10px;
            border-radius: 20px;
            z-index: 1040;
            display: none;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            pointer-events: auto;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        #sp-edit-hint.sp-edit-hint-visible {
            display: flex;
        }
        #sp-edit-hint kbd {
            background: rgba(255,255,255,0.15);
            border-radius: 3px;
            padding: 1px 5px;
            font-size: 0.95em;
            font-family: inherit;
        }
        #sp-edit-hint-close {
            background: none;
            border: none;
            color: #ccc;
            cursor: pointer;
            font-size: 1.1em;
            line-height: 1;
            padding: 0 0 0 4px;
        }
        #sp-edit-hint-close:hover {
            color: #fff;
        }

        /* Phase 168: Cell Range Selection */
        .sp-cell-range-selected {
            background: rgba(0, 120, 212, 0.10) !important;
            outline: 1px solid rgba(0, 120, 212, 0.35);
            outline-offset: -1px;
        }

        /* Phase 174: Cell/Range Right-Click Context Menu */
        #sp-cell-ctx-menu {
            position: fixed;
            background: #fff;
            border: 1px solid #d0d7de;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,.15);
            z-index: 9999;
            min-width: 190px;
            display: none;
            padding: 4px 0;
            font-size: 13px;
            user-select: none;
        }
        #sp-cell-ctx-menu button {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 5px 14px;
            text-align: left;
            border: none;
            background: none;
            cursor: pointer;
            color: #1a1a2e;
            line-height: 1.5;
            gap: 8px;
        }
        #sp-cell-ctx-menu button:hover:not(:disabled) {
            background: #f0f6ff;
            color: #0066cc;
        }
        #sp-cell-ctx-menu button:disabled {
            color: #adb5bd;
            cursor: default;
        }
        #sp-cell-ctx-menu .sp-ctx-icon {
            width: 16px;
            text-align: center;
            flex-shrink: 0;
        }
        #sp-cell-ctx-menu .sp-ctx-label {
            flex: 1;
        }
        #sp-cell-ctx-menu .sp-ctx-shortcut {
            color: #8a8a9a;
            font-size: 11px;
            margin-left: auto;
            white-space: nowrap;
        }
        #sp-cell-ctx-menu .sp-ctx-sep {
            height: 1px;
            background: #e9ecef;
            margin: 4px 0;
        }

        /* Phase 175: Find & Replace bar */
        #sp-fr-bar {
            display: none;
            position: sticky;
            top: 0;
            z-index: 200;
            background: #f8f9fa;
            border-bottom: 2px solid #0066cc;
            padding: 6px 12px;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            font-size: 13px;
        }
        #sp-fr-bar.sp-fr-visible {
            display: flex;
        }
        #sp-fr-bar > div {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            width: 100%;
        }
        #sp-fr-bar input[type="text"] {
            border: 1px solid #ced4da;
            border-radius: 4px;
            padding: 3px 8px;
            font-size: 13px;
            width: 160px;
        }
        #sp-fr-bar input[type="text"]:focus {
            outline: 2px solid #0066cc;
            border-color: #0066cc;
        }
        #sp-fr-bar label {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
        }
        #sp-fr-bar select {
            border: 1px solid #ced4da;
            border-radius: 4px;
            padding: 3px 6px;
            font-size: 13px;
        }
        #sp-fr-count {
            color: #6c757d;
            font-size: 12px;
            min-width: 90px;
        }
        #sp-fr-close {
            margin-left: auto;
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
            color: #6c757d;
            padding: 0 4px;
        }
        #sp-fr-close:hover { color: #dc3545; }
        td.sp-fr-match {
            outline: 2px solid #ffa500;
            outline-offset: -2px;
            background: #fff8e1 !important;
        }
        td.sp-fr-match-active {
            outline: 2px solid #e65100;
            outline-offset: -2px;
            background: #ffe0b2 !important;
        }

        /* Phase 177: Highlight Duplicates */
        td.sp-cell-duplicate {
            background-color: #fff3cd !important;
            position: relative;
        }
        td.sp-cell-duplicate::after {
            content: '';
            position: absolute;
            inset: 0;
            border: 1px solid #ffc107;
            pointer-events: none;
        }
        th.sp-dup-active::after {
            content: ' ◑';
            color: #e6a800;
            font-size: 11px;
        }
        /* Phase 180: Multi-Sort Dialog */
        #sp-msort-dialog .sp-msort-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }
        #sp-msort-dialog .sp-msort-row select {
            flex: 1;
            border: 1px solid #ced4da;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 13px;
        }
        #sp-msort-dialog .sp-msort-dir-btn {
            border: 1px solid #ced4da;
            border-radius: 4px;
            padding: 4px 10px;
            font-size: 13px;
            background: #f8f9fa;
            cursor: pointer;
            white-space: nowrap;
            min-width: 72px;
            text-align: center;
        }
        #sp-msort-dialog .sp-msort-dir-btn:hover {
            background: #e2e6ea;
        }
        #sp-msort-dialog .sp-msort-remove-btn {
            border: none;
            background: none;
            color: #dc3545;
            cursor: pointer;
            font-size: 15px;
            padding: 2px 6px;
            line-height: 1;
        }
        #sp-msort-dialog .sp-msort-remove-btn:hover {
            background: #fff0f0;
            border-radius: 4px;
        }
        #sp-msort-dialog .sp-msort-badge {
            color: #6c757d;
            font-size: 12px;
            min-width: 18px;
            text-align: center;
        }
        /* Phase 181: Text Wrap Toggle */
        #sp-list-table.sp-wrap-on td {
            white-space: normal !important;
            word-break: break-word;
            overflow: visible;
            min-width: 60px;
        }
        #sp-wrap-btn.sp-btn-active {
            background: #e8f0fe !important;
            color: #1a73e8 !important;
            border-color: #1a73e8 !important;
        }
        /* Phase 182: Column Header Rename */
        .sp-col-rename-input {
            position: absolute;
            z-index: 300;
            border: 2px solid #0066cc;
            border-radius: 3px;
            padding: 2px 6px;
            font-size: 13px;
            font-weight: 600;
            background: #fff;
            color: #1a1a2e;
            min-width: 60px;
            max-width: 280px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            outline: none;
        }
        th[data-field][data-custom-label] .sp-col-header-text {
            font-style: italic;
            color: #0055a5;
        }

        /* Phase 184: Focus / Distraction-Free Mode */
        body.sp-focus-mode .ms-core-siteactions,
        body.sp-focus-mode #titleRow,
        body.sp-focus-mode .ms-quicklaunch,
        body.sp-focus-mode #DeltaBreadcrumb {
            display: none !important;
        }
        body.sp-focus-mode .ms-content-wrapper {
            display: block !important;
        }
        body.sp-focus-mode #contentArea {
            padding-left: 8px !important;
            padding-right: 8px !important;
            max-width: 100vw !important;
            width: 100% !important;
        }
        #sp-focus-btn.sp-btn-active {
            background: #e8f0fe !important;
            color: #1a73e8 !important;
            border-color: #1a73e8 !important;
        }

        /* Phase 185: Column Header Click to Sort */
        th[data-field] {
            cursor: pointer;
        }
        th[data-field] button,
        th[data-field] input {
            cursor: default;
        }
        th[data-field].sp-col-sort-active {
            background-color: #f0f6ff;
        }

        /* Phase 188: Auto-Refresh Mode */
        #sp-autorefresh-btn.sp-btn-active {
            background: #e8f0fe !important;
            color: #1a73e8 !important;
            border-color: #1a73e8 !important;
        }

        /* Phase 189: Zebra Row Stripes */
        #sp-list-table.sp-stripe-on tbody tr.ms-list-row:nth-child(even) {
            background-color: #f5f8ff;
        }
        #sp-stripe-btn.sp-btn-active {
            background: #e8f0fe !important;
            color: #1a73e8 !important;
            border-color: #1a73e8 !important;
        }
        /* Phase 190: Row Number Column */
        .sp-rownum-th, .sp-rownum-td {
            width: 36px !important;
            min-width: 36px !important;
            max-width: 36px !important;
            text-align: center !important;
            color: #aaa;
            font-size: 11px;
            user-select: none;
            padding: 0 4px !important;
        }
        .sp-rownum-th {
            font-weight: normal;
            color: #888;
        }
        #sp-rownum-btn.sp-btn-active {
            background: #e8f0fe !important;
            color: #1a73e8 !important;
            border-color: #1a73e8 !important;
        }
        /* Phase 191: Item Quick-Preview Modal */
        #sp-preview-modal .sp-preview-table {
            width: 100%;
            border-collapse: collapse;
        }
        #sp-preview-modal .sp-preview-table td {
            padding: 6px 10px;
            border-bottom: 1px solid #eee;
            vertical-align: top;
        }
        #sp-preview-modal .sp-preview-table td:first-child {
            width: 35%;
            font-weight: 600;
            color: #555;
            white-space: nowrap;
        }
        #sp-preview-modal .sp-preview-table tr:last-child td {
            border-bottom: none;
        }
        .sp-preview-btn {
            color: #0072c6;
            cursor: pointer;
            background: none;
            border: none;
            padding: 2px 5px;
            font-size: 14px;
            opacity: 0.6;
        }
        .sp-preview-btn:hover {
            opacity: 1;
        }
        /* Phase 193: Sticky Group Headers */
        .sp-sticky-groups-on .ms-group-header {
            position: sticky;
            top: var(--sp-group-sticky-top, 40px);
            z-index: 3;
            background: #fff;
        }
        .sp-sticky-groups-on .ms-group-header td {
            background: inherit;
        }
        #sp-sticky-groups-btn.sp-btn-active {
            background: #e8f0fe !important;
            color: #1a73e8 !important;
            border-color: #1a73e8 !important;
        }
        /* Phase 195: Column Collapse / Fold */
        #sp-list-table th.sp-col-collapsed {
            width: 16px !important;
            min-width: 16px !important;
            max-width: 16px !important;
            overflow: hidden;
            text-overflow: clip;
            white-space: nowrap;
            cursor: pointer;
            background: #f0f4ff !important;
            padding: 0 2px !important;
            text-align: center;
            vertical-align: middle;
        }
        #sp-list-table th.sp-col-collapsed .sp-col-collapse-indicator {
            display: inline-block;
            font-size: 10px;
            color: #888;
            cursor: pointer;
            user-select: none;
            line-height: 1;
        }
        #sp-list-table td.sp-col-collapsed-td {
            width: 16px !important;
            min-width: 16px !important;
            max-width: 16px !important;
            overflow: hidden;
            padding: 0 !important;
            background: #f8f9ff;
            border-right: 1px solid #e0e0e0;
        }

        /* Phase 196: Group Value Filter Panel */
        #sp-grp-vis-btn.sp-btn-active {
            background: #e8f0fe !important;
            color: #1a73e8 !important;
            border-color: #1a73e8 !important;
        }
        #sp-grp-vis-panel button {
            font-size: 12px;
            padding: 2px 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
            background: #fff;
            cursor: pointer;
        }
        #sp-grp-vis-panel button:hover {
            background: #f0f0f0;
        }

        /* Phase 197: Quick Edit Sidebar */
        #sp-quickedit-offcanvas {
            width: 420px !important;
        }
        #sp-quickedit-offcanvas .offcanvas-body {
            padding: 12px 16px;
        }
        #sp-qe-form .sp-qe-field-row {
            margin-bottom: 12px;
        }
        #sp-qe-form .sp-qe-label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #444;
            margin-bottom: 3px;
        }
        #sp-qe-form .sp-qe-input {
            width: 100%;
            font-size: 13px;
            padding: 4px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        #sp-qe-form .sp-qe-input:focus {
            outline: none;
            border-color: #1a73e8;
            box-shadow: 0 0 0 2px rgba(26,115,232,0.2);
        }
        #sp-qe-form .sp-qe-readonly {
            font-size: 13px;
            color: #666;
            padding: 4px 8px;
            background: #f5f5f5;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            display: block;
            width: 100%;
            box-sizing: border-box;
        }
        #sp-qe-nav-prev, #sp-qe-nav-next {
            font-size: 14px;
            padding: 2px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            color: #333;
        }
        #sp-qe-nav-prev:hover, #sp-qe-nav-next:hover {
            background: #f0f0f0;
        }
        .sp-quickedit-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px 5px;
            font-size: 14px;
            color: #1a73e8;
            border-radius: 3px;
        }
        .sp-quickedit-btn:hover {
            background: #e8f0fe;
        }

        /* Phase 198: Row Age Heatmap */
        tr.ms-list-row.sp-age-today   > td { background-color: #f0fff0 !important; }
        tr.ms-list-row.sp-age-week    > td { background-color: #e6f5e6 !important; }
        tr.ms-list-row.sp-age-month   > td { background-color: #fffde7 !important; }
        tr.ms-list-row.sp-age-quarter > td { background-color: #fff3e0 !important; }
        tr.ms-list-row.sp-age-old     > td { background-color: #fce4e4 !important; }
        #sp-row-age-btn.sp-btn-active {
            background: #e8f0fe !important;
            color: #1a73e8 !important;
            border-color: #1a73e8 !important;
        }

        /* Phase 199: Cell Formula Bar */
        #sp-formula-bar {
            display: none;
            align-items: center;
            padding: 3px 10px;
            background: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            font-size: 13px;
            min-height: 28px;
            gap: 10px;
        }
        #sp-formula-bar-btn.sp-btn-active {
            background: #e8f0fe !important;
            color: #1a73e8 !important;
            border-color: #1a73e8 !important;
        }
        #sp-fb-field {
            background: #e8f0fe;
            color: #1a73e8;
            border-radius: 3px;
            padding: 1px 8px;
            font-size: 11px;
            font-weight: 600;
            min-width: 60px;
            max-width: 140px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            flex-shrink: 0;
        }
        #sp-fb-value {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333;
            user-select: text;
            cursor: text;
        }
        #sp-fb-value.sp-fb-placeholder {
            color: #aaa;
            font-style: italic;
        }

        /* Phase 200: Selected Cell Statistics Bar */
        #sp-cellstats-bar {
            display: none;
            position: fixed;
            bottom: 0;
            right: 0;
            background: #1e2a3a;
            color: #e8eaf0;
            font-size: 12px;
            padding: 5px 14px;
            z-index: 2100;
            border-top-left-radius: 6px;
            gap: 0;
            align-items: center;
            box-shadow: -2px -2px 8px rgba(0,0,0,0.2);
            font-family: monospace;
        }
        #sp-cellstats-bar .sp-cstat-sep {
            color: #4a5568;
            margin: 0 8px;
        }
        #sp-cellstats-bar .sp-cstat-item {
            cursor: pointer;
            padding: 1px 3px;
            border-radius: 3px;
            white-space: nowrap;
        }
        #sp-cellstats-bar .sp-cstat-item:hover {
            background: rgba(255,255,255,0.15);
        }
        /* Phase 203: Row Flag System */
        .sp-flag-col-th {
            width: 28px !important;
            min-width: 28px !important;
            max-width: 28px !important;
            text-align: center !important;
            padding: 4px 2px !important;
            font-size: 13px;
            cursor: default;
        }
        .sp-flag-cell {
            text-align: center;
            padding: 2px !important;
            width: 28px;
            cursor: pointer;
            user-select: none;
        }
        .sp-flag-btn {
            font-size: 14px;
            cursor: pointer;
            display: inline-block;
            transition: transform 0.1s;
            line-height: 1;
        }
        .sp-flag-btn:hover {
            transform: scale(1.2);
        }
        #sp-flag-col-btn.sp-btn-active {
            background: #fff8e1 !important;
            color: #f57f17 !important;
            border-color: #f57f17 !important;
        }
        /* Phase 204: Bulk CSV File Import */
        #sp-csv-drop-zone {
            border: 2px dashed #90a4ae;
            border-radius: 8px;
            padding: 30px 20px;
            text-align: center;
            color: #607d8b;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            margin-bottom: 12px;
        }
        #sp-csv-drop-zone:hover,
        #sp-csv-drop-zone.sp-csv-dragover {
            border-color: #1a73e8;
            background: #e8f0fe;
            color: #1a73e8;
        }
        #sp-csv-preview-table {
            font-size: 12px;
            margin-top: 8px;
        }
        #sp-csv-preview-table th {
            background: #f1f3f4;
            font-weight: 600;
        }
        .sp-csv-map-row td {
            padding: 4px 8px;
            font-size: 13px;
            vertical-align: middle;
        }
        .sp-csv-col-map {
            font-size: 12px;
            padding: 2px 4px;
            min-width: 140px;
        }
        #sp-csv-progress-bar {
            height: 8px;
            transition: width 0.2s;
        }
        /* Phase 202: Inline Image/URL Preview */
        .sp-img-preview-btn {
            cursor: pointer;
            opacity: 0;
            font-size: 12px;
            margin-left: 4px;
            vertical-align: middle;
            transition: opacity 0.15s;
            user-select: none;
            display: inline-block;
        }
        td:hover .sp-img-preview-btn,
        .sp-img-preview-btn:hover {
            opacity: 1;
        }
        #sp-img-preview {
            display: none;
            position: fixed;
            z-index: 9990;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 6px;
            padding: 4px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
            pointer-events: none;
            max-width: 212px;
            max-height: 212px;
        }
        #sp-img-preview img {
            max-width: 200px;
            max-height: 200px;
            object-fit: contain;
            display: block;
            border-radius: 3px;
        }
        /* Phase 206: Quick Chart Panel */
        #sp-chart-offcanvas {
            width: 420px !important;
        }
        #sp-chart-offcanvas .offcanvas-header {
            padding: 12px 16px;
            border-bottom: 1px solid #e5e7eb;
        }
        #sp-chart-offcanvas .offcanvas-body {
            padding: 12px 16px;
            overflow-y: auto;
        }
        #sp-chart-canvas {
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            display: block;
            width: 100%;
            margin-top: 8px;
        }
        #sp-chart-controls {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 4px;
        }
        #sp-chart-col-select,
        #sp-chart-topn-select {
            font-size: 12px;
            padding: 2px 4px;
        }
        #sp-chart-col-select {
            flex: 1;
            min-width: 80px;
        }
        #sp-chart-topn-select {
            max-width: 80px;
        }
        .sp-chart-footer {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }
        #sp-chart-empty-msg {
            color: #6b7280;
            font-size: 13px;
            text-align: center;
            padding: 20px;
            display: none;
        }
        /* Phase 207: Item Version History Timeline */
        #sp-history-offcanvas {
            width: 420px !important;
        }
        #sp-history-offcanvas .offcanvas-header {
            padding: 12px 16px;
            border-bottom: 1px solid #e5e7eb;
        }
        #sp-history-offcanvas .offcanvas-body {
            padding: 0;
            overflow-y: auto;
        }
        #sp-history-title {
            font-size: 13px;
            color: #6b7280;
            padding: 8px 16px 4px;
            border-bottom: 1px solid #f3f4f6;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sp-hist-timeline {
            padding: 12px 16px;
        }
        .sp-hist-entry {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
            position: relative;
        }
        .sp-hist-entry:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 19px;
            top: 40px;
            width: 2px;
            height: calc(100% + 4px);
            background: #e5e7eb;
        }
        .sp-hist-ver-badge {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #1a73e8;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            z-index: 1;
            text-align: center;
            line-height: 1.2;
        }
        .sp-hist-ver-badge.sp-hist-first {
            background: #34a853;
        }
        .sp-hist-content {
            flex: 1;
            min-width: 0;
            padding-top: 4px;
        }
        .sp-hist-meta {
            font-size: 12px;
            color: #374151;
            font-weight: 600;
            line-height: 1.4;
        }
        .sp-hist-date {
            font-size: 11px;
            color: #6b7280;
            font-weight: 400;
            margin-left: 4px;
        }
        .sp-hist-field-change {
            font-size: 12px;
            color: #374151;
            margin-top: 4px;
            background: #f9fafb;
            border-radius: 4px;
            padding: 3px 8px;
            border-left: 3px solid #1a73e8;
            word-break: break-word;
        }
        .sp-hist-field-change strong {
            color: #1a73e8;
        }
        .sp-hist-no-changes {
            font-size: 12px;
            color: #9ca3af;
            font-style: italic;
            margin-top: 4px;
        }
        #sp-history-loading {
            text-align: center;
            padding: 24px;
            color: #6b7280;
            font-size: 13px;
        }
        #sp-history-error {
            padding: 16px;
            color: #c62828;
            font-size: 13px;
            display: none;
        }
        /* Phase 205: Calculated Column Display */
        .sp-calc-th {
            background: #f0f4ff !important;
            color: #3730a3 !important;
            font-style: italic;
            min-width: 80px;
            white-space: nowrap;
        }
        .sp-calc-td {
            background: #f8f9ff;
            color: #374151;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .sp-calc-td.sp-calc-err {
            color: #c2410c;
            font-style: italic;
            font-size: 11px;
        }
        #sp-calc-col-btn.sp-btn-active {
            background: #ede9fe !important;
            color: #3730a3 !important;
            border-color: #7c3aed !important;
        }
        .sp-calc-form-row {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .sp-calc-expr-hint {
            font-size: 11px;
            color: #6b7280;
            margin-top: 4px;
        }

        /* Phase 208: Clipboard History Ring */
        #sp-clip-ring-panel {
            position: absolute;
            z-index: 1060;
            width: 280px;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            display: none;
        }
        #sp-clip-ring-panel.sp-clip-open {
            display: block;
        }
        #sp-clip-ring-panel .sp-clip-header {
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 600;
            color: #374151;
            border-bottom: 1px solid #f3f4f6;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        #sp-clip-ring-list {
            max-height: 240px;
            overflow-y: auto;
            padding: 4px 0;
        }
        .sp-clip-entry {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-bottom: 1px solid #f9fafb;
            font-size: 12px;
        }
        .sp-clip-entry:hover { background: #f0f9ff; }
        .sp-clip-text {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #1f2937;
            font-family: monospace;
            font-size: 11px;
        }
        .sp-clip-time {
            font-size: 10px;
            color: #9ca3af;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .sp-clip-use-btn, .sp-clip-paste-btn, .sp-clip-del-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 3px;
            font-size: 12px;
            flex-shrink: 0;
            color: #6b7280;
        }
        .sp-clip-use-btn:hover { color: #1a73e8; background: #e8f0fe; }
        .sp-clip-paste-btn:hover { color: #059669; background: #d1fae5; }
        .sp-clip-del-btn:hover { color: #dc2626; background: #fee2e2; }
        #sp-clip-ring-footer {
            padding: 6px 10px;
            border-top: 1px solid #f3f4f6;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
            color: #6b7280;
        }
        #sp-clip-ring-clear {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 11px;
            color: #dc2626;
            padding: 0;
        }
        #sp-clip-ring-badge {
            background: #1a73e8;
            color: #fff;
            border-radius: 10px;
            font-size: 10px;
            padding: 1px 5px;
            margin-left: 3px;
            display: none;
        }
        #sp-clip-ring-badge.sp-clip-has-items {
            display: inline;
        }

        /* Phase 210: Horizontal Timeline Visualizer */
        #sp-timeline-offcanvas {
            height: 360px !important;
        }
        #sp-timeline-offcanvas .offcanvas-header {
            padding: 8px 14px;
            border-bottom: 1px solid #e5e7eb;
            flex-wrap: wrap;
            gap: 6px;
        }
        #sp-timeline-offcanvas .offcanvas-title {
            font-size: 14px;
        }
        #sp-timeline-controls {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        #sp-timeline-field-sel, #sp-timeline-field-end {
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid #d1d5db;
        }
        #sp-timeline-render-btn {
            font-size: 12px;
            padding: 3px 10px;
        }
        #sp-timeline-svg-wrap {
            overflow-x: auto;
            overflow-y: hidden;
            height: calc(100% - 0px);
            background: #fafafa;
        }
        #sp-timeline-svg-wrap svg {
            display: block;
        }
        .sp-tl-grid { stroke: #e5e7eb; stroke-width: 1; }
        .sp-tl-today { stroke: #dc2626; stroke-width: 1.5; stroke-dasharray: 4,3; }
        .sp-tl-bar { rx: 4; ry: 4; cursor: pointer; opacity: 0.85; }
        .sp-tl-bar:hover { opacity: 1; filter: brightness(1.08); }
        .sp-tl-label { font-size: 10px; fill: #fff; pointer-events: none; dominant-baseline: middle; }
        .sp-tl-axis-label { font-size: 10px; fill: #6b7280; }
        #sp-timeline-empty, #sp-timeline-loading, #sp-timeline-hint {
            text-align: center;
            padding: 16px;
            font-size: 12px;
            color: #6b7280;
            font-style: italic;
        }
        #sp-timeline-empty { display: none; }

        /* Phase 209: Field Schema Inspector */
        #sp-schema-offcanvas {
            width: 560px !important;
        }
        #sp-schema-search-wrap {
            padding: 8px 12px;
            border-bottom: 1px solid #e5e7eb;
        }
        #sp-schema-search {
            width: 100%;
        }
        #sp-schema-table-wrap {
            overflow-y: auto;
            height: calc(100% - 100px);
            padding: 0;
        }
        #sp-schema-table {
            font-size: 12px;
            margin-bottom: 0;
            width: 100%;
        }
        #sp-schema-table th {
            font-size: 11px;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            padding: 6px 8px;
            position: sticky;
            top: 0;
            background: #f9fafb;
            border-bottom: 1px solid #e5e7eb;
        }
        #sp-schema-table td {
            padding: 5px 8px;
            vertical-align: middle;
            border-bottom: 1px solid #f3f4f6;
        }
        .sp-schema-row-visible {
            background: #eff6ff !important;
        }
        .sp-schema-row-visible td:first-child {
            border-left: 3px solid #1a73e8;
        }
        td.sp-schema-iname {
            font-family: monospace;
            font-size: 11px;
            color: #1a73e8;
            cursor: pointer;
        }
        td.sp-schema-iname:hover {
            text-decoration: underline;
        }
        .sp-schema-req { color: #059669; font-weight: 700; }
        .sp-schema-idx { color: #7c3aed; }
        .sp-schema-type { color: #374151; font-size: 11px; }
        #sp-schema-loading { text-align: center; padding: 32px; color: #6b7280; }
        #sp-schema-error { padding: 16px; color: #dc2626; font-size: 13px; display: none; }
        #sp-schema-footer {
            padding: 8px 12px;
            border-top: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
            color: #6b7280;
            flex-shrink: 0;
        }

        /* Phase 211: Kanban Board View */
        #sp-kb-offcanvas {
            height: 480px !important;
        }
        #sp-kb-offcanvas .offcanvas-header {
            padding: 8px 14px;
            border-bottom: 1px solid #e5e7eb;
            gap: 8px;
        }
        #sp-kb-controls {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 1;
        }
        #sp-kb-field-sel {
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid #d1d5db;
            max-width: 200px;
        }
        #sp-kb-board {
            display: flex;
            gap: 12px;
            padding: 12px;
            overflow-x: auto;
            height: 100%;
            align-items: flex-start;
            background: #f3f4f6;
        }
        .sp-kb-col {
            flex-shrink: 0;
            width: 220px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            display: flex;
            flex-direction: column;
            max-height: 100%;
        }
        .sp-kb-col-header {
            padding: 8px 10px;
            font-size: 12px;
            font-weight: 600;
            color: #374151;
            border-bottom: 1px solid #f3f4f6;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            background: #f9fafb;
            border-radius: 8px 8px 0 0;
        }
        .sp-kb-col-count {
            background: #e5e7eb;
            color: #6b7280;
            border-radius: 10px;
            font-size: 10px;
            padding: 1px 6px;
            font-weight: 600;
        }
        .sp-kb-cards {
            flex: 1;
            overflow-y: auto;
            padding: 6px;
            min-height: 60px;
        }
        .sp-kb-cards.sp-kb-dragover {
            background: #eff6ff;
            border-radius: 0 0 8px 8px;
        }
        .sp-kb-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 6px 8px;
            margin-bottom: 6px;
            cursor: pointer;
            font-size: 12px;
            line-height: 1.4;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            transition: box-shadow 0.15s;
        }
        .sp-kb-card:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
            border-color: #1a73e8;
        }
        .sp-kb-card.sp-kb-dragging {
            opacity: 0.4;
        }
        .sp-kb-card-title {
            font-weight: 500;
            color: #1f2937;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sp-kb-card-id {
            font-size: 10px;
            color: #9ca3af;
            margin-top: 2px;
        }

        /* Phase 213: Item Comparison Modal */
        #sp-compare-modal .modal-dialog {
            max-width: 90vw;
        }
        #sp-compare-table th:first-child {
            width: 180px;
            background: #f9fafb;
            font-size: 11px;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        #sp-compare-table th {
            position: sticky;
            top: 0;
            background: #f9fafb;
            z-index: 1;
        }
        #sp-compare-table td {
            font-size: 12px;
            vertical-align: middle;
            word-break: break-word;
            max-width: 300px;
        }
        .sp-compare-diff {
            background: #fef9c3 !important;
        }
        .sp-compare-diff td:first-child {
            background: #fef08a !important;
        }
        #sp-compare-btn {
            display: none;
        }
        /* Phase 212: Pivot Table */
        #sp-pivot-offcanvas {
            width: 640px !important;
        }
        #sp-pivot-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px 12px;
            border-bottom: 1px solid #e5e7eb;
            align-items: center;
        }
        #sp-pivot-controls label {
            font-size: 11px;
            color: #6b7280;
            margin: 0;
        }
        #sp-pivot-controls select {
            font-size: 12px;
            padding: 2px 4px;
            border-radius: 4px;
            border: 1px solid #d1d5db;
            max-width: 130px;
        }
        #sp-pivot-result {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        #sp-pivot-table-wrap {
            overflow: auto;
            flex: 1;
        }
        #sp-pivot-table {
            font-size: 12px;
            white-space: nowrap;
            border-collapse: collapse;
            width: 100%;
        }
        #sp-pivot-table th {
            background: #f9fafb;
            font-size: 11px;
            font-weight: 600;
            color: #6b7280;
            padding: 5px 8px;
            border: 1px solid #e5e7eb;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        #sp-pivot-table td {
            padding: 4px 8px;
            border: 1px solid #f3f4f6;
            text-align: right;
            color: #1f2937;
            font-variant-numeric: tabular-nums;
        }
        #sp-pivot-table td:first-child {
            text-align: left;
            font-weight: 500;
            background: #f9fafb;
            position: sticky;
            left: 0;
        }
        #sp-pivot-table th:first-child {
            left: 0;
            z-index: 2;
        }
        #sp-pivot-table tr:hover td {
            background: #f0f9ff;
        }
        #sp-pivot-table tfoot td {
            font-weight: 600;
            background: #f3f4f6;
            border-top: 2px solid #e5e7eb;
        }
        #sp-pivot-footer {
            padding: 6px 12px;
            border-top: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
            color: #6b7280;
            flex-shrink: 0;
        }
        #sp-pivot-loading {
            text-align: center;
            padding: 24px;
            color: #6b7280;
            font-size: 12px;
            font-style: italic;
            display: none;
        }
        #sp-pivot-empty {
            text-align: center;
            padding: 24px;
            color: #9ca3af;
            font-size: 12px;
        }
        /* Phase 214: Reading Pane */
        #sp-reading-pane {
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            width: 300px;
            background: #fff;
            border-left: 1px solid #e5e7eb;
            box-shadow: -4px 0 16px rgba(0,0,0,0.10);
            z-index: 1040;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.25s ease;
        }
        #sp-reading-pane.sp-rpane-open {
            transform: translateX(0);
        }
        #sp-reading-pane-header {
            padding: 10px 14px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f9fafb;
            flex-shrink: 0;
        }
        #sp-reading-pane-title {
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #sp-reading-pane-body {
            flex: 1;
            overflow-y: auto;
            padding: 0;
        }
        .sp-rpane-field {
            padding: 8px 14px;
            border-bottom: 1px solid #f3f4f6;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .sp-rpane-field:hover {
            background: #f9fafb;
        }
        .sp-rpane-field-label {
            font-size: 10px;
            font-weight: 600;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .sp-rpane-field-value {
            font-size: 13px;
            color: #1f2937;
            word-break: break-word;
            line-height: 1.4;
        }
        .sp-rpane-empty {
            padding: 40px 14px;
            text-align: center;
            color: #9ca3af;
            font-size: 12px;
            font-style: italic;
        }
        #sp-reading-pane-footer {
            padding: 8px 14px;
            border-top: 1px solid #e5e7eb;
            display: flex;
            gap: 6px;
            flex-shrink: 0;
            background: #f9fafb;
        }
        #sp-reading-pane-btn.active {
            background: #e0e7ff;
            border-color: #6366f1;
            color: #4f46e5;
        }
        /* Phase 215: Column Value Histogram */
        #sp-hist-popup {
            position: absolute;
            z-index: 1060;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.14);
            width: 280px;
            display: none;
        }
        #sp-hist-popup.sp-hist-visible {
            display: block;
        }
        #sp-hist-header {
            padding: 8px 12px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f9fafb;
            border-radius: 8px 8px 0 0;
        }
        #sp-hist-title {
            font-size: 12px;
            font-weight: 600;
            color: #374151;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 210px;
        }
        #sp-hist-body {
            padding: 8px 12px;
            max-height: 280px;
            overflow-y: auto;
        }
        .sp-hist-bar-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 5px;
        }
        .sp-hist-bar-label {
            font-size: 11px;
            color: #374151;
            width: 80px;
            flex-shrink: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
        }
        .sp-hist-bar-track {
            flex: 1;
            background: #f3f4f6;
            border-radius: 3px;
            height: 14px;
            overflow: hidden;
        }
        .sp-hist-bar-fill {
            height: 100%;
            background: #6366f1;
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        .sp-hist-bar-count {
            font-size: 10px;
            color: #6b7280;
            width: 30px;
            flex-shrink: 0;
            text-align: right;
        }
        #sp-hist-footer {
            padding: 6px 12px;
            border-top: 1px solid #f3f4f6;
            font-size: 10px;
            color: #9ca3af;
            border-radius: 0 0 8px 8px;
        }
        /* Phase 217: Print Selection — no additional page CSS needed */
        /* Phase 218: Row Minimap */
        #sp-minimap-panel {
            position: fixed;
            right: 0;
            top: 50px;
            bottom: 0;
            width: 12px;
            background: #f3f4f6;
            z-index: 1035;
            display: none;
            border-left: 1px solid #e5e7eb;
            cursor: ns-resize;
            user-select: none;
        }
        #sp-minimap-panel.sp-minimap-visible {
            display: block;
        }
        body.sp-rpane-active #sp-minimap-panel {
            right: 300px;
        }
        #sp-minimap-canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
        #sp-minimap-btn.active {
            background: #e0e7ff;
            border-color: #6366f1;
            color: #4f46e5;
        }
        /* Phase 219: Quick Search Autocomplete */
        #sp-qsearch-dropdown {
            position: absolute;
            z-index: 1070;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.12);
            max-width: 320px;
            min-width: 200px;
            display: none;
            overflow: hidden;
        }
        #sp-qsearch-dropdown.sp-qsd-visible {
            display: block;
        }
        .sp-qsd-group {
            padding: 4px 0 2px;
            border-bottom: 1px solid #f3f4f6;
        }
        .sp-qsd-group:last-child {
            border-bottom: none;
        }
        .sp-qsd-group-label {
            padding: 3px 10px 1px;
            font-size: 9px;
            font-weight: 700;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .sp-qsd-item {
            padding: 5px 12px;
            font-size: 12px;
            color: #374151;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 310px;
        }
        .sp-qsd-item:hover,
        .sp-qsd-item.sp-qsd-active {
            background: #eff6ff;
            color: #1d4ed8;
        }
        /* Phase 220: Scroll Progress Bar */
        #sp-scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0%;
            background: linear-gradient(to right, #6366f1, #818cf8);
            z-index: 2000;
            transition: width 0.08s linear;
            pointer-events: none;
            border-radius: 0 2px 2px 0;
        }
        /* Phase 221: Column Top Values Panel */
        #sp-topval-panel {
            position: absolute;
            z-index: 1065;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.13);
            width: 260px;
            display: none;
            overflow: hidden;
        }
        #sp-topval-panel.sp-topval-visible {
            display: block;
        }
        #sp-topval-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 10px 6px;
            border-bottom: 1px solid #f3f4f6;
            background: #f9fafb;
            border-radius: 8px 8px 0 0;
        }
        #sp-topval-title {
            font-size: 11px;
            font-weight: 700;
            color: #374151;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        #sp-topval-close {
            background: none;
            border: none;
            cursor: pointer;
            color: #9ca3af;
            font-size: 13px;
            line-height: 1;
            padding: 0 2px;
        }
        #sp-topval-close:hover { color: #374151; }
        #sp-topval-list {
            padding: 4px 0;
            max-height: 280px;
            overflow-y: auto;
        }
        .sp-topval-item {
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            cursor: pointer;
            overflow: hidden;
        }
        .sp-topval-item:hover {
            background: #eff6ff;
        }
        .sp-topval-bar-bg {
            position: absolute;
            left: 0; top: 0; bottom: 0;
            background: #eff6ff;
            z-index: 0;
            border-radius: 0;
            transition: width 0.3s ease;
        }
        .sp-topval-label {
            position: relative;
            z-index: 1;
            flex: 1;
            font-size: 12px;
            color: #1f2937;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sp-topval-count {
            position: relative;
            z-index: 1;
            font-size: 10px;
            color: #6b7280;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .sp-topval-empty {
            padding: 16px 12px;
            text-align: center;
            font-size: 12px;
            color: #9ca3af;
            font-style: italic;
        }
        /* Phase 222: List Annotation Panel */
        #sp-listann-panel {
            display: none;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 12px;
            background: #fefce8;
            border-bottom: 1px solid #fde68a;
            border-top: 1px solid #fde68a;
            margin-bottom: 4px;
        }
        #sp-listann-panel.sp-listann-open {
            display: flex;
        }
        #sp-listann-meta {
            flex-shrink: 0;
            min-width: 120px;
            max-width: 160px;
        }
        #sp-listann-name {
            font-size: 12px;
            font-weight: 700;
            color: #92400e;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #sp-listann-count {
            font-size: 10px;
            color: #b45309;
            margin-top: 1px;
        }
        #sp-listann-note-label {
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #d97706;
            margin-top: 6px;
        }
        #sp-listann-textarea {
            flex: 1;
            min-height: 48px;
            max-height: 120px;
            border: 1px solid #fde68a;
            border-radius: 4px;
            padding: 5px 8px;
            font-size: 12px;
            background: #fffbeb;
            resize: vertical;
            font-family: inherit;
            color: #1f2937;
            line-height: 1.5;
        }
        #sp-listann-textarea:focus {
            outline: none;
            border-color: #f59e0b;
            box-shadow: 0 0 0 2px rgba(245,158,11,0.2);
        }
        #sp-listann-close {
            background: none;
            border: none;
            cursor: pointer;
            color: #d97706;
            font-size: 14px;
            padding: 0 2px;
            line-height: 1;
            flex-shrink: 0;
            align-self: flex-start;
            margin-top: 2px;
        }
        #sp-listann-close:hover { color: #92400e; }
        #sp-listann-btn.active {
            background: #fef9c3;
            border-color: #f59e0b;
            color: #b45309;
        }
        /* Phase 223: Cell Sparkline Mini-Charts */
        .sp-sparkline-svg {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 16px;
            height: 8px;
            pointer-events: none;
            opacity: 0.75;
            display: block;
        }
        td.sp-sparkline-cell {
            position: relative;
        }
        /* Phase 224: Quick Date Range Filter Panel */
        #sp-dates-panel {
            display: none;
            position: absolute;
            z-index: 1050;
            width: 280px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            padding: 0;
            font-size: 12px;
        }
        #sp-dates-panel.sp-dates-visible {
            display: block;
        }
        #sp-dates-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px 6px;
            border-bottom: 1px solid #e5e7eb;
            font-weight: 600;
            font-size: 12px;
            color: #374151;
        }
        #sp-dates-close-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #9ca3af;
            font-size: 14px;
            line-height: 1;
            padding: 0 2px;
        }
        #sp-dates-close-btn:hover { color: #374151; }
        #sp-dates-col-row {
            padding: 8px 12px 4px;
        }
        #sp-dates-col-row label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #6b7280;
            display: block;
            margin-bottom: 4px;
        }
        #sp-dates-col-select {
            width: 100%;
            font-size: 12px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 4px 6px;
            color: #374151;
            background: #f9fafb;
        }
        #sp-dates-presets {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            padding: 8px 12px;
        }
        .sp-dates-preset-btn {
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 5px 8px;
            font-size: 11px;
            cursor: pointer;
            text-align: center;
            color: #374151;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: background 0.1s;
        }
        .sp-dates-preset-btn:hover {
            background: #e0e7ff;
            border-color: #6366f1;
            color: #4338ca;
        }
        .sp-dates-preset-btn.active {
            background: #6366f1;
            border-color: #4338ca;
            color: #fff;
        }
        #sp-dates-divider {
            border-top: 1px solid #e5e7eb;
            margin: 4px 12px;
        }
        #sp-dates-custom-label {
            padding: 4px 12px 2px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #6b7280;
        }
        #sp-dates-custom-row {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px 8px;
        }
        #sp-dates-custom-row input[type="date"] {
            flex: 1;
            font-size: 11px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 3px 5px;
            color: #374151;
            background: #f9fafb;
        }
        #sp-dates-custom-row span {
            color: #9ca3af;
            font-size: 10px;
            flex-shrink: 0;
        }
        #sp-dates-footer {
            display: flex;
            gap: 6px;
            padding: 6px 12px 10px;
            border-top: 1px solid #e5e7eb;
        }
        #sp-dates-apply-btn {
            flex: 1;
            background: #6366f1;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 5px 8px;
            font-size: 11px;
            cursor: pointer;
            font-weight: 600;
        }
        #sp-dates-apply-btn:hover { background: #4338ca; }
        #sp-dates-clear-btn {
            flex: 0 0 auto;
            background: #f9fafb;
            color: #6b7280;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 11px;
            cursor: pointer;
        }
        #sp-dates-clear-btn:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
        #sp-dates-btn.active {
            background: #e0e7ff;
            border-color: #6366f1;
            color: #4338ca;
        }
        /* Phase 225: Saved Row Selection Sets */
        #sp-selsets-panel {
            display: none;
            position: absolute;
            z-index: 1050;
            width: 260px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            font-size: 12px;
        }
        #sp-selsets-panel.sp-selsets-visible {
            display: block;
        }
        #sp-selsets-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px 6px;
            border-bottom: 1px solid #e5e7eb;
            font-weight: 600;
            font-size: 12px;
            color: #374151;
        }
        #sp-selsets-close-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #9ca3af;
            font-size: 14px;
            line-height: 1;
            padding: 0 2px;
        }
        #sp-selsets-close-btn:hover { color: #374151; }
        #sp-selsets-save-row {
            display: flex;
            gap: 6px;
            padding: 8px 12px;
            border-bottom: 1px solid #e5e7eb;
            align-items: center;
        }
        #sp-selsets-name-input {
            flex: 1;
            font-size: 11px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 4px 7px;
            color: #374151;
            background: #f9fafb;
        }
        #sp-selsets-name-input:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
        }
        #sp-selsets-save-btn {
            flex-shrink: 0;
            background: #6366f1;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 4px 9px;
            font-size: 11px;
            cursor: pointer;
            font-weight: 600;
            white-space: nowrap;
        }
        #sp-selsets-save-btn:hover { background: #4338ca; }
        #sp-selsets-save-btn:disabled {
            background: #e5e7eb;
            color: #9ca3af;
            cursor: not-allowed;
        }
        #sp-selsets-sel-info {
            font-size: 10px;
            color: #6b7280;
            padding: 0 12px 6px;
        }
        #sp-selsets-list {
            max-height: 200px;
            overflow-y: auto;
            padding: 4px 0 8px;
        }
        #sp-selsets-list:empty::after {
            content: 'No saved sets yet';
            display: block;
            text-align: center;
            color: #9ca3af;
            font-size: 11px;
            padding: 10px 12px;
            font-style: italic;
        }
        .sp-selset-row {
            display: flex;
            align-items: center;
            padding: 4px 12px;
            gap: 6px;
            border-bottom: 1px solid #f3f4f6;
        }
        .sp-selset-row:last-child { border-bottom: none; }
        .sp-selset-row:hover { background: #f9fafb; }
        .sp-selset-name {
            flex: 1;
            font-size: 11px;
            color: #374151;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 500;
        }
        .sp-selset-count {
            flex-shrink: 0;
            background: #e0e7ff;
            color: #4338ca;
            border-radius: 9px;
            font-size: 10px;
            padding: 1px 6px;
            font-weight: 600;
        }
        .sp-selset-restore-btn {
            flex-shrink: 0;
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 2px 7px;
            font-size: 10px;
            cursor: pointer;
            color: #374151;
            white-space: nowrap;
        }
        .sp-selset-restore-btn:hover {
            background: #e0e7ff;
            border-color: #6366f1;
            color: #4338ca;
        }
        .sp-selset-del-btn {
            flex-shrink: 0;
            background: none;
            border: none;
            cursor: pointer;
            color: #d1d5db;
            font-size: 13px;
            line-height: 1;
            padding: 0 2px;
        }
        .sp-selset-del-btn:hover { color: #ef4444; }
        #sp-selsets-btn.active {
            background: #e0e7ff;
            border-color: #6366f1;
            color: #4338ca;
        }

        /* Phase 226: Cell Number Format Customizer */
        #sp-numfmt-panel {
            display: none;
            position: absolute;
            z-index: 1060;
            width: 190px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.13);
            font-size: 12px;
            padding: 0 0 6px;
        }
        #sp-numfmt-panel.sp-numfmt-visible {
            display: block;
        }
        #sp-numfmt-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 10px 5px;
            border-bottom: 1px solid #e5e7eb;
            font-weight: 600;
            font-size: 11px;
            color: #374151;
        }
        #sp-numfmt-close {
            background: none;
            border: none;
            cursor: pointer;
            color: #9ca3af;
            font-size: 13px;
            line-height: 1;
            padding: 0 2px;
        }
        #sp-numfmt-close:hover { color: #374151; }
        #sp-numfmt-options {
            padding: 6px 10px 4px;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .sp-numfmt-option {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 3px;
            color: #374151;
            font-size: 11px;
        }
        .sp-numfmt-option:hover { background: #f3f4f6; }
        .sp-numfmt-option input[type="radio"] { margin: 0; cursor: pointer; accent-color: #6366f1; }
        .sp-numfmt-option .sp-numfmt-example {
            margin-left: auto;
            color: #9ca3af;
            font-size: 10px;
            font-family: monospace;
        }
        #sp-numfmt-actions {
            display: flex;
            gap: 6px;
            padding: 6px 10px 2px;
            border-top: 1px solid #f3f4f6;
        }
        #sp-numfmt-apply-btn {
            flex: 1;
            background: #6366f1;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 4px 0;
            font-size: 11px;
            cursor: pointer;
            font-weight: 600;
        }
        #sp-numfmt-apply-btn:hover { background: #4338ca; }
        #sp-numfmt-clear-btn {
            flex-shrink: 0;
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 11px;
            cursor: pointer;
            color: #6b7280;
        }
        #sp-numfmt-clear-btn:hover { background: #fef2f2; border-color: #f87171; color: #ef4444; }

        /* Phase 227: Smart Empty Column Auto-Hide */
        #sp-autohide-btn.active {
            background: #fef3c7;
            border-color: #f59e0b;
            color: #92400e;
        }
        #sp-autohide-btn.active:hover {
            background: #fde68a;
        }

        /* Phase 228: New Items Since Last Visit Badge */
        .sp-row-new {
            border-left: 3px solid #3b82f6 !important;
        }
        #sp-newrows-btn {
            display: none;
        }
        #sp-newrows-btn.sp-newrows-has-items {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        #sp-newrows-btn.active {
            background: #dbeafe;
            border-color: #3b82f6;
            color: #1d4ed8;
        }
        #sp-newrows-btn.active:hover {
            background: #bfdbfe;
        }
        .sp-newrows-count-badge {
            display: inline-block;
            background: #3b82f6;
            color: #fff;
            border-radius: 9px;
            font-size: 10px;
            font-weight: 700;
            padding: 0 5px;
            line-height: 16px;
            min-width: 16px;
            text-align: center;
        }

        /* Phase 229: Due Date Alert Rows */
        .sp-duedate-overdue {
            border-left: 3px solid #ef4444 !important;
        }
        .sp-duedate-soon {
            border-left: 3px solid #f59e0b !important;
        }
        #sp-duedate-btn.active {
            background: #fef3c7;
            border-color: #f59e0b;
            color: #92400e;
        }
        #sp-duedate-btn.active:hover {
            background: #fde68a;
        }
        #sp-duedate-panel {
            display: none;
            position: absolute;
            z-index: 1060;
            width: 230px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.13);
            font-size: 12px;
            padding: 0 0 8px;
        }
        #sp-duedate-panel.sp-duedate-visible {
            display: block;
        }
        #sp-duedate-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 10px 5px;
            border-bottom: 1px solid #e5e7eb;
            font-weight: 600;
            font-size: 11px;
            color: #374151;
        }
        #sp-duedate-close {
            background: none;
            border: none;
            cursor: pointer;
            color: #9ca3af;
            font-size: 13px;
            line-height: 1;
            padding: 0 2px;
        }
        #sp-duedate-close:hover { color: #374151; }
        #sp-duedate-body {
            padding: 8px 10px 4px;
            display: flex;
            flex-direction: column;
            gap: 7px;
        }
        .sp-duedate-field-row,
        .sp-duedate-days-row {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .sp-duedate-field-row label,
        .sp-duedate-days-row label {
            font-size: 11px;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        #sp-duedate-field-sel {
            width: 100%;
            font-size: 11px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 3px 5px;
            background: #f9fafb;
        }
        #sp-duedate-days-input {
            width: 70px;
            font-size: 11px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 3px 5px;
            text-align: center;
        }
        .sp-duedate-legend {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            font-size: 10px;
            color: #6b7280;
            padding: 2px 0;
        }
        .sp-duedate-legend-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .sp-duedate-legend-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .sp-duedate-legend-dot.overdue { background: #ef4444; }
        .sp-duedate-legend-dot.soon    { background: #f59e0b; }
        #sp-duedate-actions {
            display: flex;
            gap: 6px;
            padding: 6px 10px 2px;
            border-top: 1px solid #f3f4f6;
        }
        #sp-duedate-apply-btn {
            flex: 1;
            background: #f59e0b;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 4px 0;
            font-size: 11px;
            cursor: pointer;
            font-weight: 600;
        }
        #sp-duedate-apply-btn:hover { background: #d97706; }
        #sp-duedate-clear-btn {
            flex-shrink: 0;
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 11px;
            cursor: pointer;
            color: #6b7280;
        }
        #sp-duedate-clear-btn:hover { background: #fef2f2; border-color: #f87171; color: #ef4444; }

        /* Phase 231: Value Quick Filter from Column Menu */
        .sp-231-qf-header {
            padding: 4px 12px 2px;
            font-size: 10px;
            font-weight: 700;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            user-select: none;
        }
        .sp-231-qf-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 12px;
            cursor: pointer;
            font-size: 12px;
            color: #374151;
            gap: 8px;
        }
        .sp-231-qf-item:hover {
            background: #eff6ff;
            color: #1d4ed8;
        }
        .sp-231-qf-value {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sp-231-qf-count {
            flex-shrink: 0;
            font-size: 10px;
            color: #9ca3af;
            background: #f3f4f6;
            border-radius: 9px;
            padding: 0 5px;
            line-height: 16px;
            min-width: 18px;
            text-align: center;
        }
        .sp-231-qf-item:hover .sp-231-qf-count {
            background: #dbeafe;
            color: #1d4ed8;
        }
        .sp-231-qf-more {
            padding: 2px 12px 4px;
            font-size: 10px;
            color: #9ca3af;
            font-style: italic;
        }
        /* Phase 230: Choice Badge Pills */
        .sp-badge-pill {
            display: inline-block;
            padding: 1px 7px;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 500;
            line-height: 1.6;
            white-space: nowrap;
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
            border: 1px solid transparent;
        }
        #sp-badges-btn.active {
            background: #ede9fe;
            border-color: #7c3aed;
            color: #5b21b6;
        }
        #sp-badges-btn.active:hover {
            background: #ddd6fe;
        }
        /* Phase 232: Cell-Level Conditional Formatting */
        #sp-232-rules-panel {
            position: absolute;
            z-index: 1070;
            width: 300px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            padding: 10px 12px 12px;
            font-size: 13px;
            display: none;
        }
        #sp-232-rules-panel .sp-232-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 600;
            color: #111827;
            margin-bottom: 8px;
            font-size: 12px;
        }
        #sp-232-rules-panel .sp-232-close-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #6b7280;
            font-size: 14px;
            padding: 0 2px;
            line-height: 1;
        }
        #sp-232-rules-panel .sp-232-close-btn:hover { color: #111827; }
        .sp-232-rule-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 5px;
        }
        .sp-232-rule-value {
            flex: 1;
            padding: 4px 6px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            font-size: 12px;
            min-width: 0;
        }
        .sp-232-rule-value:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
        }
        .sp-232-rule-color {
            width: 28px;
            height: 28px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            cursor: pointer;
            padding: 1px;
            flex-shrink: 0;
        }
        .sp-232-rule-del {
            background: none;
            border: none;
            cursor: pointer;
            color: #9ca3af;
            font-size: 13px;
            padding: 0 2px;
            flex-shrink: 0;
            line-height: 1;
        }
        .sp-232-rule-del:hover { color: #ef4444; }
        .sp-232-add-btn {
            background: none;
            border: 1px dashed #d1d5db;
            border-radius: 4px;
            color: #6b7280;
            cursor: pointer;
            font-size: 11px;
            padding: 3px 8px;
            width: 100%;
            text-align: center;
            margin-top: 4px;
        }
        .sp-232-add-btn:hover:not(:disabled) {
            border-color: #6366f1;
            color: #4f46e5;
            background: #eef2ff;
        }
        .sp-232-add-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .sp-232-panel-footer {
            display: flex;
            gap: 6px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #f3f4f6;
        }
        .sp-232-apply-btn {
            flex: 1;
            background: #4f46e5;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            font-weight: 500;
        }
        .sp-232-apply-btn:hover { background: #4338ca; }
        .sp-232-clear-btn {
            background: none;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            color: #6b7280;
        }
        .sp-232-clear-btn:hover { border-color: #ef4444; color: #ef4444; }
        .sp-232-header-badge {
            display: inline-block;
            font-size: 9px;
            margin-left: 3px;
            vertical-align: middle;
            cursor: pointer;
            opacity: 0.8;
        }
        .sp-232-header-badge:hover { opacity: 1; }
        /* Phase 233: Stale Row Alert */
        #sp-stale-panel {
            position: absolute;
            z-index: 1060;
            width: 240px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            padding: 10px 12px 12px;
            font-size: 13px;
            display: none;
        }
        #sp-stale-panel .sp-stale-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 600;
            color: #111827;
            margin-bottom: 10px;
            font-size: 12px;
        }
        #sp-stale-panel .sp-stale-close-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #6b7280;
            font-size: 14px;
            padding: 0 2px;
            line-height: 1;
        }
        #sp-stale-panel .sp-stale-close-btn:hover { color: #111827; }
        #sp-stale-panel label {
            display: block;
            font-size: 11px;
            color: #6b7280;
            margin-bottom: 3px;
            font-weight: 500;
        }
        #sp-stale-panel select,
        #sp-stale-panel input[type="number"] {
            width: 100%;
            padding: 5px 7px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            font-size: 12px;
            margin-bottom: 8px;
            box-sizing: border-box;
        }
        #sp-stale-panel select:focus,
        #sp-stale-panel input[type="number"]:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
        }
        .sp-stale-panel-footer {
            display: flex;
            gap: 6px;
            margin-top: 4px;
        }
        .sp-stale-apply-btn {
            flex: 1;
            background: #4f46e5;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            font-weight: 500;
        }
        .sp-stale-apply-btn:hover { background: #4338ca; }
        .sp-stale-clear-btn {
            background: none;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            color: #6b7280;
        }
        .sp-stale-clear-btn:hover { border-color: #ef4444; color: #ef4444; }
        /* Stale row visual */
        tr.sp-stale-row > td {
            opacity: 0.55;
            font-style: italic;
        }
        tr.sp-stale-row > td:first-child {
            position: relative;
        }
        tr.sp-stale-row > td:first-child::before {
            content: '\23F3 ';
            font-style: normal;
            opacity: 0.7;
        }
        #sp-stale-btn.active {
            background: #fef3c7;
            border-color: #f59e0b;
            color: #92400e;
        }
        #sp-stale-btn.active:hover {
            background: #fde68a;
        }
        /* Phase 234: Column Header Notes */
        #sp-234-note-popup {
            position: absolute;
            z-index: 1070;
            width: 250px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            padding: 10px 12px 12px;
            font-size: 13px;
            display: none;
        }
        #sp-234-note-popup .sp-234-popup-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 600;
            color: #111827;
            margin-bottom: 8px;
            font-size: 12px;
        }
        #sp-234-note-popup .sp-234-close-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #6b7280;
            font-size: 14px;
            padding: 0 2px;
            line-height: 1;
        }
        #sp-234-note-popup .sp-234-close-btn:hover { color: #111827; }
        #sp-234-note-popup textarea {
            width: 100%;
            box-sizing: border-box;
            padding: 5px 7px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            font-size: 12px;
            resize: vertical;
            min-height: 60px;
            font-family: inherit;
        }
        #sp-234-note-popup textarea:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
        }
        .sp-234-char-counter {
            text-align: right;
            font-size: 10px;
            color: #9ca3af;
            margin-top: 2px;
            margin-bottom: 6px;
        }
        .sp-234-char-counter.sp-234-over { color: #ef4444; }
        .sp-234-popup-footer {
            display: flex;
            gap: 6px;
            margin-top: 4px;
            border-top: 1px solid #f3f4f6;
            padding-top: 8px;
        }
        .sp-234-save-btn {
            flex: 1;
            background: #4f46e5;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            font-weight: 500;
        }
        .sp-234-save-btn:hover { background: #4338ca; }
        .sp-234-save-btn:disabled {
            background: #c7d2fe;
            cursor: not-allowed;
        }
        .sp-234-clear-btn {
            background: none;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            color: #6b7280;
        }
        .sp-234-clear-btn:hover { border-color: #ef4444; color: #ef4444; }
        /* Note indicator in column header */
        .sp-234-note-icon {
            display: inline-block;
            font-size: 10px;
            margin-left: 4px;
            vertical-align: middle;
            cursor: help;
            opacity: 0.75;
            line-height: 1;
            user-select: none;
        }
        .sp-234-note-icon:hover { opacity: 1; }

        /* Phase 235: Quick Search Text Highlight */
        .sp-235-mark {
            background: #fef08a;
            color: #1a1a1a;
            border-radius: 2px;
            padding: 0 1px;
            font-weight: inherit;
        }

        /* Phase 237: Row Read/Unread Tracking */
        .sp-237-unread-dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #3b82f6;
            margin-right: 5px;
            vertical-align: middle;
            flex-shrink: 0;
        }
        /* Unread-only filter active: hide read rows */
        body.sp-237-unread-filter-on tr.ms-list-row:not(.sp-237-unread) {
            display: none !important;
        }
        /* Active state on unread button */
        #sp-unread-btn.active {
            background: #eff6ff;
            border-color: #3b82f6;
            color: #1d4ed8;
        }
        #sp-unread-btn.active:hover {
            background: #dbeafe;
        }
        /* Style first td when row is unread — make dot visible */
        tr.sp-237-unread > td:first-of-type {
            display: flex !important;
            align-items: center;
        }
        /* Phase 236: Per-List Accent Color Theme */
        #sp-theme-panel {
            position: absolute;
            z-index: 1060;
            width: 230px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            padding: 10px 12px 12px;
            font-size: 13px;
            display: none;
        }
        #sp-theme-panel .sp-theme-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 600;
            color: #111827;
            margin-bottom: 10px;
            font-size: 12px;
        }
        #sp-theme-panel .sp-theme-close-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #6b7280;
            font-size: 14px;
            padding: 0 2px;
            line-height: 1;
        }
        #sp-theme-panel .sp-theme-close-btn:hover { color: #111827; }
        .sp-theme-swatches {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 10px;
        }
        .sp-theme-swatch {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 2px solid transparent;
            cursor: pointer;
            transition: transform 0.1s, border-color 0.1s;
        }
        .sp-theme-swatch:hover {
            transform: scale(1.15);
            border-color: rgba(0,0,0,0.2);
        }
        .sp-theme-swatch.sp-theme-swatch-active {
            border-color: #111827;
            box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827;
        }
        .sp-theme-custom-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            font-size: 11px;
            color: #6b7280;
        }
        .sp-theme-custom-row input[type="color"] {
            width: 36px;
            height: 26px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 1px;
            cursor: pointer;
        }
        .sp-theme-panel-footer {
            display: flex;
            gap: 6px;
        }
        .sp-theme-apply-btn {
            flex: 1;
            background: #4f46e5;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            font-weight: 500;
        }
        .sp-theme-apply-btn:hover { background: #4338ca; }
        .sp-theme-reset-btn {
            background: none;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            color: #6b7280;
        }
        .sp-theme-reset-btn:hover { border-color: #ef4444; color: #ef4444; }
        /* Active state on theme button — colored with the theme */
        #sp-theme-btn.active {
            border-color: var(--sp236-accent, #4f46e5);
            color: var(--sp236-accent, #4f46e5);
            background: var(--sp236-accent-bg, #eef2ff);
        }
        /* Phase 238: Toolbar Button Customization */
        #sp-toolbar-cust-panel {
            display: none;
            position: absolute;
            z-index: 1060;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            width: 270px;
            max-height: 420px;
            overflow-y: auto;
            padding: 0;
            font-size: 13px;
        }
        #sp-toolbar-cust-panel .sp-238-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            border-bottom: 1px solid #e5e7eb;
            font-weight: 600;
            font-size: 13px;
            background: #f9fafb;
            border-radius: 6px 6px 0 0;
            position: sticky;
            top: 0;
        }
        #sp-toolbar-cust-panel .sp-238-close {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 14px;
            color: #6b7280;
            padding: 0 2px;
            line-height: 1;
        }
        #sp-toolbar-cust-panel .sp-238-close:hover { color: #1f2937; }
        #sp-toolbar-cust-panel .sp-238-section-title {
            font-size: 11px;
            font-weight: 700;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 8px 12px 4px;
        }
        #sp-toolbar-cust-panel .sp-238-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 12px;
            cursor: pointer;
        }
        #sp-toolbar-cust-panel .sp-238-row:hover {
            background: #f3f4f6;
        }
        #sp-toolbar-cust-panel .sp-238-row input[type="checkbox"] {
            accent-color: #4f46e5;
            cursor: pointer;
        }
        #sp-toolbar-cust-panel .sp-238-row label {
            cursor: pointer;
            flex: 1;
            color: #374151;
        }
        #sp-toolbar-cust-panel .sp-238-footer {
            border-top: 1px solid #e5e7eb;
            padding: 8px 12px;
            display: flex;
            justify-content: flex-end;
            gap: 6px;
            position: sticky;
            bottom: 0;
            background: #fff;
            border-radius: 0 0 6px 6px;
        }
        #sp-toolbar-cust-btn.active {
            background: #eff6ff;
            border-color: #4f46e5;
            color: #4f46e5;
        }

        /* Phase 239: All-Dates Relative Format Toggle */
        #sp-reldate-btn.active {
            background: #eff6ff;
            border-color: #3b82f6;
            color: #1d4ed8;
        }
        #sp-reldate-btn.active:hover {
            background: #dbeafe;
        }
        td.sp-239-rel {
            font-style: italic;
            color: #4b5563;
        }

        /* Phase 240: Scroll-to-Column Navigation */
        #sp-coljump-bar {
            display: none;
            position: fixed;
            bottom: 60px;
            right: 20px;
            z-index: 1070;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            padding: 6px 8px;
            align-items: center;
            gap: 6px;
            width: 260px;
        }
        #sp-coljump-bar.sp-240-open {
            display: flex !important;
        }
        #sp-coljump-input {
            flex: 1;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 13px;
            outline: none;
            min-width: 0;
        }
        #sp-coljump-input:focus {
            border-color: #4f46e5;
            box-shadow: 0 0 0 2px rgba(79,70,229,0.15);
        }
        #sp-coljump-close {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 14px;
            color: #6b7280;
            padding: 0 2px;
            flex-shrink: 0;
        }
        #sp-coljump-close:hover { color: #1f2937; }
        #sp-coljump-dropdown {
            display: none;
            position: fixed;
            z-index: 1071;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            max-height: 220px;
            overflow-y: auto;
            min-width: 240px;
        }
        #sp-coljump-dropdown .sp-240-item {
            padding: 7px 12px;
            cursor: pointer;
            font-size: 13px;
            color: #374151;
        }
        #sp-coljump-dropdown .sp-240-item:hover,
        #sp-coljump-dropdown .sp-240-item.sp-240-active {
            background: #eff6ff;
            color: #1d4ed8;
        }
        /* Column flash highlight animation */
        @keyframes sp240ColFlash {
            0%   { background-color: #fef08a; }
            70%  { background-color: #fef08a; }
            100% { background-color: transparent; }
        }
        th.sp-240-col-flash {
            animation: sp240ColFlash 1.5s ease-out forwards;
        }

        /* Phase 241: Cell Font Size Scale */
        #sp-list-table td,
        #sp-list-table th {
            font-size: var(--sp241-fontsize, 100%);
        }
        #sp-fontsize-panel {
            display: none;
            position: absolute;
            z-index: 1060;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            padding: 10px 12px;
            width: 200px;
            right: 0;
            top: calc(100% + 4px);
        }
        #sp-fontsize-panel.sp-241-open {
            display: block;
        }
        #sp-fontsize-panel .sp-241-title {
            font-size: 12px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #sp-fontsize-panel .sp-241-close {
            background: none;
            border: none;
            cursor: pointer;
            color: #6b7280;
            font-size: 14px;
            padding: 0;
            line-height: 1;
        }
        #sp-fontsize-panel .sp-241-close:hover { color: #1f2937; }
        .sp-241-options {
            display: flex;
            gap: 6px;
            justify-content: space-between;
        }
        .sp-241-opt {
            flex: 1;
            padding: 5px 2px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            font-size: 12px;
            color: #374151;
            background: #f9fafb;
            transition: background 0.15s, border-color 0.15s;
            user-select: none;
        }
        .sp-241-opt:hover {
            background: #eff6ff;
            border-color: #93c5fd;
        }
        .sp-241-opt.sp-241-active {
            background: #dbeafe;
            border-color: #3b82f6;
            color: #1d4ed8;
            font-weight: 600;
        }
        #sp-fontsize-btn.active {
            background: #dbeafe;
            border-color: #3b82f6;
            color: #1d4ed8;
        }
        /* Wrapper for positioning the panel relative to button */
        .sp-241-wrapper {
            position: relative;
            display: inline-block;
        }

        /* Phase 242: Hide Empty Groups Toggle */
        #sp-hideempty-btn.active {
            background: #dbeafe;
            border-color: #3b82f6;
            color: #1d4ed8;
        }
        /* Hidden group rows when hide-empty is active */
        tr.sp-242-group-hidden {
            display: none !important;
        }

        /* Phase 243: Copy Item Permalink */
        .sp-243-link-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 13px;
            padding: 0 3px;
            color: #6b7280;
            line-height: 1;
            vertical-align: middle;
        }
        .sp-243-link-btn:hover {
            color: #2563eb;
        }

        /* Phase 244: My Items Filter */
        #sp-myitems-btn.active {
            background: #dbeafe;
            border-color: #3b82f6;
            color: #1d4ed8;
        }

        /* Phase 245: Group Header Select All */
        .sp-245-grp-chk-cell {
            width: 28px;
            min-width: 28px;
            padding: 0 4px !important;
            vertical-align: middle;
            text-align: center;
        }
        .sp-245-grp-chk {
            width: 14px;
            height: 14px;
            cursor: pointer;
            vertical-align: middle;
            accent-color: #3b82f6;
        }

        /* Phase 246: Per-Column Text Wrap */
        .sp-246-wrap-dot {
            display: inline-block;
            background: #3b82f6;
            color: #fff;
            font-size: 9px;
            font-weight: 700;
            border-radius: 3px;
            padding: 0 3px;
            margin-left: 3px;
            vertical-align: middle;
            line-height: 14px;
            user-select: none;
        }
        /* Dynamic per-column wrap rules are injected into <style id="sp-246-styles"> */

        /* Phase 247: Active Filter Column Indicator */
        .sp-247-filter-dot {
            display: inline-block;
            background: #f59e0b;
            color: #fff;
            font-size: 9px;
            font-weight: 700;
            border-radius: 3px;
            padding: 0 3px;
            margin-left: 3px;
            vertical-align: middle;
            line-height: 14px;
            cursor: pointer;
            user-select: none;
            transition: background 0.15s;
        }
        .sp-247-filter-dot:hover {
            background: #d97706;
        }

        /* Phase 248: Copy Row as JSON */
        .sp-248-json-btn {
            font-family: monospace;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: -0.5px;
        }

        /* Phase 249: Column Header Field Info Tooltip */
        #sp-249-field-tip {
            position: fixed;
            z-index: 1060;
            background: #1e293b;
            color: #e2e8f0;
            font-size: 11px;
            font-family: 'Segoe UI', Consolas, monospace;
            border-radius: 5px;
            padding: 6px 10px;
            pointer-events: none;
            display: none;
            white-space: pre;
            line-height: 1.6;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            max-width: 280px;
        }
        #sp-249-field-tip.sp-249-visible {
            display: block;
        }

        /* Phase 250: Active Filter Count Badge */
        #sp-inline-filter-btn {
            position: relative;
        }
        .sp-250-filter-badge {
            display: none;
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: #fff;
            font-size: 9px;
            font-weight: 700;
            border-radius: 8px;
            min-width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            padding: 0 3px;
            pointer-events: none;
            z-index: 1;
        }
        .sp-250-filter-badge.sp-250-active {
            display: inline-block;
        }

        /* Phase 252: Dynamic Clear All Filters Button */
        #sp-252-clear-filters-btn {
            display: none;
        }
        #sp-252-clear-filters-btn.sp-252-active {
            display: inline-flex;
        }
        .sp-252-clear-btn {
            color: #dc2626;
            border-color: #dc2626;
            font-size: 11px;
            padding: 2px 7px;
            white-space: nowrap;
        }
        .sp-252-clear-btn:hover {
            background: #dc2626;
            color: #fff;
        }

        /* Phase 253: Filter Row Match Count Indicator */
        #sp-253-match-count {
            display: none;
            font-size: 10px;
            color: #6b7280;
            font-weight: 500;
            margin-left: 4px;
            pointer-events: none;
            white-space: nowrap;
            vertical-align: middle;
        }
        #sp-253-match-count.sp-253-active {
            display: inline;
        }

        /* Phase 254: Active Filter Summary Tooltip */
        #sp-254-filter-tip {
            display: none;
            position: fixed;
            background: #1f2937;
            color: #f9fafb;
            border-radius: 6px;
            font-size: 11px;
            padding: 8px 10px;
            max-width: 280px;
            z-index: 9990;
            pointer-events: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            line-height: 1.7;
        }
        #sp-254-filter-tip.sp-254-visible {
            display: block;
            animation: sp254FadeIn 0.15s ease;
        }
        @keyframes sp254FadeIn {
            from { opacity: 0; transform: translateY(-3px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .sp-254-tip-header {
            font-weight: 700;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #9ca3af;
            margin-bottom: 4px;
            display: block;
        }
        .sp-254-tip-row {
            display: block;
            color: #f9fafb;
        }
        .sp-254-tip-col {
            color: #93c5fd;
            font-weight: 600;
        }

        /* Phase 256: Inline Filter Input Clear Buttons */
        .sp-256-wrap {
            position: relative;
            display: inline-flex;
            width: 100%;
            align-items: center;
        }
        .sp-256-wrap input.sp-ifilter-input {
            padding-right: 20px !important;
            width: 100%;
            box-sizing: border-box;
        }
        .sp-256-clr-btn {
            display: none;
            position: absolute;
            right: 3px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #9ca3af;
            font-size: 11px;
            line-height: 1;
            padding: 0 2px;
            cursor: pointer;
            z-index: 2;
            border-radius: 2px;
        }
        .sp-256-clr-btn:hover {
            color: #374151;
            background: #f3f4f6;
        }
        .sp-256-clr-btn.sp-256-visible {
            display: block;
        }

        /* Phase 257: Filter Text Highlight in Matching Cells */
        mark.sp-257-mark {
            background: #fef9c3;
            color: inherit;
            padding: 0;
            border-radius: 2px;
            font-style: inherit;
            font-weight: inherit;
        }

        /* Phase 260: Filter Row Per-Column Value Suggestions */
        #sp-260-suggestions {
            position: absolute;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
            list-style: none;
            margin: 0;
            padding: 2px 0;
            z-index: 9999;
            min-width: 140px;
            max-width: 320px;
            max-height: 220px;
            overflow-y: auto;
            font-size: 12px;
        }
        #sp-260-suggestions li {
            padding: 4px 10px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #374151;
        }
        #sp-260-suggestions li:hover,
        #sp-260-suggestions li.sp-260-active {
            background: #eff6ff;
            color: #1d4ed8;
        }

        /* Phase 261: Filter Input Column History */
        .sp-261-hist-dropdown {
            position: absolute;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
            list-style: none;
            margin: 0;
            padding: 2px 0;
            z-index: 9998;
            min-width: 140px;
            max-width: 320px;
            font-size: 12px;
        }
        .sp-261-hist-header {
            font-size: 10px;
            color: #9ca3af;
            padding: 3px 10px 2px;
            border-bottom: 1px solid #f3f4f6;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            cursor: default;
            user-select: none;
        }
        .sp-261-hist-dropdown li {
            display: flex;
            align-items: center;
            padding: 4px 8px 4px 10px;
            cursor: pointer;
            color: #6b7280;
            gap: 4px;
        }
        .sp-261-hist-dropdown li:hover,
        .sp-261-hist-dropdown li.sp-261-active {
            background: #f9fafb;
            color: #374151;
        }
        .sp-261-hist-val {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sp-261-hist-del {
            flex-shrink: 0;
            background: none;
            border: none;
            color: #d1d5db;
            font-size: 10px;
            cursor: pointer;
            padding: 0 3px;
            line-height: 1;
            border-radius: 2px;
        }
        .sp-261-hist-del:hover {
            color: #ef4444;
            background: #fee2e2;
        }

        /* Phase 262: Filter Row Operator Selector */
        .sp-262-op-btn {
            flex-shrink: 0;
            background: #f3f4f6;
            border: 1px solid #d1d5db;
            border-right: none;
            border-radius: 3px 0 0 3px;
            color: #6b7280;
            font-size: 11px;
            cursor: pointer;
            padding: 0 5px;
            height: 100%;
            min-width: 22px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.1s, color 0.1s;
            user-select: none;
        }
        .sp-262-op-btn:hover {
            background: #e5e7eb;
            color: #374151;
        }
        .sp-262-op-btn.sp-262-op-notdefault {
            background: #dbeafe;
            color: #1d4ed8;
            border-color: #93c5fd;
        }
        #sp-262-op-menu {
            position: absolute;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
            list-style: none;
            margin: 0;
            padding: 2px 0;
            z-index: 10000;
            min-width: 155px;
            font-size: 12px;
        }
        #sp-262-op-menu li {
            padding: 5px 12px;
            cursor: pointer;
            color: #374151;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        #sp-262-op-menu li:hover {
            background: #eff6ff;
            color: #1d4ed8;
        }
        #sp-262-op-menu li.sp-262-selected {
            font-weight: 600;
            color: #1d4ed8;
            background: #f0f9ff;
        }
        .sp-262-op-sym {
            font-size: 13px;
            width: 16px;
            text-align: center;
            flex-shrink: 0;
        }
        /* Adjust sp-256-wrap input to remove left-side radius when operator button present */
        .sp-256-wrap:has(.sp-262-op-btn) .sp-ifilter-input {
            border-left: none;
            border-radius: 0;
        }

        /* Phase 263: Filter Row Boolean Column Quick-Toggle */
        .sp-263-bool-toggle {
            width: 100%;
            min-height: 26px;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            background: #f9fafb;
            cursor: pointer;
            font-size: 14px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
            user-select: none;
            padding: 0 6px;
            box-sizing: border-box;
        }
        .sp-263-bool-toggle[data-state="all"] {
            color: #9ca3af;
            background: #f9fafb;
            border-color: #d1d5db;
        }
        .sp-263-bool-toggle[data-state="yes"] {
            color: #16a34a;
            background: #f0fdf4;
            border-color: #86efac;
        }
        .sp-263-bool-toggle[data-state="no"] {
            color: #dc2626;
            background: #fef2f2;
            border-color: #fca5a5;
        }
        .sp-263-bool-toggle:hover {
            filter: brightness(0.96);
        }
        .sp-263-bool-label {
            font-size: 10px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            opacity: 0.75;
            line-height: 1;
        }
        .sp-263-bool-sym {
            font-size: 15px;
            line-height: 1;
        }

        /* Phase 264: Filter Row Case-Sensitive Toggle */
        .sp-264-case-btn {
            flex-shrink: 0;
            background: none;
            border: 1px solid transparent;
            border-radius: 3px;
            color: #9ca3af;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: -0.5px;
            cursor: pointer;
            padding: 0 3px;
            height: 100%;
            min-width: 20px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
            user-select: none;
            margin-left: 1px;
        }
        .sp-264-case-btn:hover {
            background: #f3f4f6;
            color: #6b7280;
            border-color: #d1d5db;
        }
        .sp-264-case-btn.sp-264-active {
            background: #dbeafe;
            color: #1d4ed8;
            border-color: #93c5fd;
            font-weight: 900;
        }

        /* Phase 265: Filter Row Number Range Filter */
        .sp-265-range-wrap {
            display: flex;
            align-items: center;
            gap: 2px;
            flex: 1;
            min-width: 0;
            height: 100%;
        }
        .sp-265-range-input {
            flex: 1;
            min-width: 0;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            font-size: 11px;
            padding: 0 4px;
            text-align: center;
            background: #fff;
            color: #374151;
            outline: none;
            height: 100%;
            min-height: 24px;
        }
        .sp-265-range-input:focus {
            border-color: #93c5fd;
            box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
        }
        .sp-265-range-input::placeholder { color: #d1d5db; font-style: italic; font-size: 10px; }
        .sp-265-range-input::-webkit-inner-spin-button { opacity: 0; }
        .sp-265-range-input:hover::-webkit-inner-spin-button { opacity: 1; }
        .sp-265-sep {
            flex-shrink: 0;
            color: #9ca3af;
            font-size: 11px;
            line-height: 1;
        }
        .sp-265-active .sp-265-range-input {
            background: #eff6ff;
            border-color: #93c5fd;
        }

        /* Phase 266: Filter Row Date Range Picker */
        .sp-266-date-wrap {
            display: flex;
            align-items: center;
            gap: 2px;
            flex: 1;
            min-width: 0;
            height: 100%;
        }
        .sp-266-date-input {
            flex: 1;
            min-width: 0;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            font-size: 10px;
            padding: 0 2px;
            background: #fff;
            color: #374151;
            outline: none;
            height: 100%;
            min-height: 24px;
            cursor: pointer;
        }
        .sp-266-date-input:focus {
            border-color: #93c5fd;
            box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
        }
        .sp-266-sep {
            flex-shrink: 0;
            color: #9ca3af;
            font-size: 10px;
            line-height: 1;
        }
        .sp-266-active .sp-266-date-input {
            background: #eff6ff;
            border-color: #93c5fd;
        }

        /* Phase 267: Filter Row Empty/Non-Empty Toggle */
        .sp-267-empty-btn {
            flex-shrink: 0;
            background: none;
            border: 1px solid transparent;
            border-radius: 3px;
            color: #9ca3af;
            font-size: 11px;
            cursor: pointer;
            padding: 0 3px;
            height: 100%;
            min-width: 20px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
            user-select: none;
            margin-left: 1px;
        }
        .sp-267-empty-btn:hover {
            background: #f3f4f6;
            color: #6b7280;
            border-color: #d1d5db;
        }
        .sp-267-empty-btn[data-state="empty"] {
            background: #eff6ff;
            color: #1d4ed8;
            border-color: #93c5fd;
        }
        .sp-267-empty-btn[data-state="nonempty"] {
            background: #fff7ed;
            color: #c2410c;
            border-color: #fdba74;
        }

        /* Phase 268: Filter Row Quick Date Presets */
        .sp-268-preset-btn {
            flex-shrink: 0;
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            color: #6b7280;
            font-size: 10px;
            cursor: pointer;
            padding: 0 3px;
            height: 100%;
            min-height: 22px;
            min-width: 18px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
            user-select: none;
            margin-right: 2px;
        }
        .sp-268-preset-btn:hover {
            background: #f3f4f6;
            color: #374151;
            border-color: #9ca3af;
        }
        .sp-268-preset-btn.sp-268-active {
            background: #eff6ff;
            color: #1d4ed8;
            border-color: #93c5fd;
        }
        .sp-268-preset-menu {
            position: absolute;
            z-index: 9100;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
            min-width: 140px;
            padding: 3px 0;
            font-size: 12px;
            color: #374151;
        }
        .sp-268-preset-item {
            display: block;
            width: 100%;
            padding: 4px 12px;
            background: none;
            border: none;
            text-align: left;
            cursor: pointer;
            white-space: nowrap;
            color: #374151;
            font-size: 12px;
            line-height: 1.4;
        }
        .sp-268-preset-item:hover {
            background: #f3f4f6;
            color: #111827;
        }
        .sp-268-preset-item.sp-268-item-clear {
            color: #6b7280;
            border-top: 1px solid #f3f4f6;
            margin-top: 2px;
            padding-top: 5px;
        }

        /* Phase 269: Filter Row Regex Mode Toggle */
        .sp-269-regex-btn {
            flex-shrink: 0;
            background: none;
            border: 1px solid transparent;
            border-radius: 3px;
            color: #9ca3af;
            font-size: 10px;
            cursor: pointer;
            padding: 0 3px;
            height: 100%;
            min-width: 22px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: monospace;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
            user-select: none;
            margin-left: 1px;
        }
        .sp-269-regex-btn:hover {
            background: #f3f4f6;
            color: #6b7280;
            border-color: #d1d5db;
        }
        .sp-269-regex-btn[data-active="1"] {
            background: #eef2ff;
            color: #4338ca;
            border-color: #a5b4fc;
        }
        .sp-269-regex-btn[data-active="1"]:hover {
            background: #e0e7ff;
            color: #3730a3;
        }
        /* Invalid regex — red input border */
        .sp-ifilter-input.sp-269-invalid {
            border-color: #f87171 !important;
            background: #fff5f5 !important;
            box-shadow: 0 0 0 2px rgba(239,68,68,0.15) !important;
        }

        /* Phase 270: Filter Row Compact Mode */
        .sp-270-compact-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: 1px solid transparent;
            border-radius: 3px;
            color: #d1d5db;
            font-size: 12px;
            cursor: pointer;
            padding: 1px 3px;
            line-height: 1;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
            user-select: none;
            vertical-align: middle;
        }
        .sp-270-compact-btn:hover {
            background: #f3f4f6;
            color: #9ca3af;
            border-color: #d1d5db;
        }
        .sp-270-compact-btn[data-compact="1"] {
            color: #3b82f6;
            border-color: #93c5fd;
            background: #eff6ff;
        }
        /* Compact mode rules applied to the filter row */
        .sp-ifilter-row.sp-270-compact th {
            padding-top: 1px !important;
            padding-bottom: 1px !important;
            height: 22px;
        }
        .sp-ifilter-row.sp-270-compact .sp-256-wrap {
            height: 20px !important;
            min-height: 20px !important;
        }
        .sp-ifilter-row.sp-270-compact .sp-ifilter-input {
            font-size: 10px !important;
            height: 20px !important;
            min-height: 20px !important;
            padding: 0 3px !important;
        }
        .sp-ifilter-row.sp-270-compact .sp-265-range-input {
            font-size: 10px !important;
            height: 20px !important;
            min-height: 20px !important;
        }
        .sp-ifilter-row.sp-270-compact .sp-266-date-input {
            font-size: 9px !important;
            height: 20px !important;
            min-height: 20px !important;
        }
        .sp-ifilter-row.sp-270-compact .sp-262-op-btn,
        .sp-ifilter-row.sp-270-compact .sp-263-bool-toggle,
        .sp-ifilter-row.sp-270-compact .sp-264-case-btn,
        .sp-ifilter-row.sp-270-compact .sp-267-empty-btn,
        .sp-ifilter-row.sp-270-compact .sp-269-regex-btn,
        .sp-ifilter-row.sp-270-compact .sp-256-clr-btn,
        .sp-ifilter-row.sp-270-compact .sp-268-preset-btn {
            font-size: 9px !important;
            height: 20px !important;
            min-height: 20px !important;
            padding: 0 2px !important;
        }

        /* Phase 271: Invert Row Selection */
        #sp-271-invert-btn {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            color: #6b7280;
            font-size: 11px;
            cursor: pointer;
            padding: 2px 6px;
            line-height: 1;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
            user-select: none;
            vertical-align: middle;
            margin-left: 4px;
        }
        #sp-271-invert-btn:hover {
            background: #f3f4f6;
            color: #374151;
            border-color: #9ca3af;
        }
        #sp-271-invert-btn:active {
            background: #e5e7eb;
        }

        /* Phase 272: Column Filter Clear from Context Menu */
        .sp-272-clear-filter-item {
            color: #dc2626 !important;
            font-weight: 500;
        }
        .sp-272-clear-filter-item:hover {
            background: #fef2f2 !important;
            color: #b91c1c !important;
        }
        .sp-272-separator {
            border: none;
            border-top: 1px solid #f3f4f6;
            margin: 3px 0;
        }

        /* Phase 273: Reset Column Widths */
        .sp-273-reset-widths-item {
            color: #6b7280;
        }
        .sp-273-reset-widths-item:hover {
            background: #f0fdf4 !important;
            color: #15803d !important;
        }
        /* Phase 274: Focus Selection Toggle */
        #sp-274-focus-btn {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            color: #6b7280;
            font-size: 11px;
            cursor: pointer;
            padding: 2px 6px;
            line-height: 1;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
            user-select: none;
            vertical-align: middle;
            margin-left: 4px;
        }
        #sp-274-focus-btn:hover {
            background: #f3f4f6;
            color: #374151;
            border-color: #9ca3af;
        }
        #sp-274-focus-btn.sp-274-active {
            background: #dbeafe;
            color: #1d4ed8;
            border-color: #93c5fd;
        }
        #sp-274-focus-btn.sp-274-active:hover {
            background: #bfdbfe;
        }
        .sp-274-hidden {
            display: none !important;
        }
        /* Phase 275: Bulk Tag & Flag from Status Bar */
        #sp-275-tag-btn,
        #sp-275-flag-btn {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            color: #6b7280;
            font-size: 11px;
            cursor: pointer;
            padding: 2px 6px;
            line-height: 1;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
            user-select: none;
            vertical-align: middle;
            margin-left: 4px;
            position: relative;
        }
        #sp-275-tag-btn:hover,
        #sp-275-flag-btn:hover {
            background: #f3f4f6;
            color: #374151;
            border-color: #9ca3af;
        }
        #sp-275-tag-menu,
        #sp-275-flag-menu {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            padding: 6px;
            z-index: 9100;
            white-space: nowrap;
        }
        #sp-275-tag-menu.sp-275-open,
        #sp-275-flag-menu.sp-275-open {
            display: block;
        }
        .sp-275-swatch {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 3px;
            border: 2px solid transparent;
            cursor: pointer;
            margin: 2px;
            vertical-align: middle;
            transition: border-color 0.1s, transform 0.1s;
        }
        .sp-275-swatch:hover {
            border-color: #374151;
            transform: scale(1.15);
        }
        .sp-275-swatch-clear {
            background: #f3f4f6;
            border: 2px dashed #9ca3af;
            color: #6b7280;
            font-size: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 3px;
            cursor: pointer;
            margin: 2px;
            vertical-align: middle;
            transition: border-color 0.1s;
        }
        .sp-275-swatch-clear:hover {
            border-color: #374151;
            color: #374151;
        }
        .sp-275-label {
            font-size: 10px;
            color: #6b7280;
            padding: 2px 4px 4px;
            display: block;
        }
        /* Phase 276: Copy Selected Rows as TSV */
        #sp-276-copy-btn {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            color: #6b7280;
            font-size: 11px;
            cursor: pointer;
            padding: 2px 6px;
            line-height: 1;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
            user-select: none;
            vertical-align: middle;
            margin-left: 4px;
        }
        #sp-276-copy-btn:hover {
            background: #f3f4f6;
            color: #374151;
            border-color: #9ca3af;
        }
        #sp-276-copy-btn:active {
            background: #e5e7eb;
        }
        #sp-276-copy-btn.sp-276-copied {
            background: #d1fae5;
            color: #065f46;
            border-color: #6ee7b7;
        }

        /* Phase 277: Selection Quick Stats */
        #sp-277-stats-btn {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            color: #6b7280;
            font-size: 11px;
            cursor: pointer;
            padding: 2px 6px;
            line-height: 1;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
            user-select: none;
            vertical-align: middle;
            margin-left: 4px;
        }
        #sp-277-stats-btn:hover, #sp-277-stats-btn.sp-277-active {
            background: #eff6ff;
            color: #1d4ed8;
            border-color: #93c5fd;
        }
        #sp-277-stats-panel {
            position: absolute;
            z-index: 2100;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            min-width: 360px;
            max-width: 520px;
            font-size: 12px;
            display: none;
            padding: 0;
            overflow: hidden;
        }
        #sp-277-stats-panel.sp-277-visible {
            display: block;
        }
        #sp-277-stats-panel table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }
        #sp-277-stats-panel thead th {
            background: #f3f4f6;
            color: #374151;
            font-weight: 600;
            padding: 6px 8px;
            border-bottom: 1px solid #e5e7eb;
            text-align: right;
            font-size: 11px;
            letter-spacing: 0.02em;
        }
        #sp-277-stats-panel thead th:first-child {
            text-align: left;
        }
        #sp-277-stats-panel tbody td {
            padding: 5px 8px;
            border-bottom: 1px solid #f3f4f6;
            color: #374151;
            text-align: right;
            white-space: nowrap;
        }
        #sp-277-stats-panel tbody td:first-child {
            text-align: left;
            font-weight: 500;
            color: #111827;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #sp-277-stats-panel tbody tr:last-child td {
            border-bottom: none;
        }
        #sp-277-stats-panel tbody tr:hover td {
            background: #f9fafb;
        }
        #sp-277-stats-empty {
            padding: 12px;
            color: #9ca3af;
            text-align: center;
            font-size: 12px;
        }

        /* Phase 278: Saved Column Sets */
        #sp-278-sets-section {
            border-top: 1px solid #e5e7eb;
            padding: 8px 8px 4px 8px;
            margin-top: 4px;
        }
        #sp-278-sets-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
        }
        #sp-278-sets-label {
            font-size: 11px;
            font-weight: 600;
            color: #374151;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }
        #sp-278-save-row {
            display: flex;
            gap: 4px;
            margin-bottom: 6px;
        }
        #sp-278-name-input {
            flex: 1;
            font-size: 11px;
            padding: 3px 6px;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            color: #111827;
            min-width: 0;
        }
        #sp-278-name-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
        }
        #sp-278-save-btn {
            font-size: 11px;
            padding: 3px 8px;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            background: #f9fafb;
            color: #374151;
            cursor: pointer;
            white-space: nowrap;
        }
        #sp-278-save-btn:hover {
            background: #e5e7eb;
        }
        #sp-278-sets-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
            max-height: 120px;
            overflow-y: auto;
        }
        .sp-278-set-item {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 3px 4px;
            border-radius: 3px;
            cursor: default;
        }
        .sp-278-set-item:hover {
            background: #f3f4f6;
        }
        .sp-278-set-name {
            flex: 1;
            font-size: 11px;
            color: #111827;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            min-width: 0;
        }
        .sp-278-set-name:hover {
            color: #1d4ed8;
            text-decoration: underline;
        }
        .sp-278-set-del {
            background: none;
            border: none;
            color: #9ca3af;
            cursor: pointer;
            font-size: 13px;
            line-height: 1;
            padding: 0 2px;
            border-radius: 2px;
            flex-shrink: 0;
        }
        .sp-278-set-del:hover {
            color: #ef4444;
            background: #fee2e2;
        }
        #sp-278-sets-empty {
            font-size: 11px;
            color: #9ca3af;
            text-align: center;
            padding: 4px 0;
            font-style: italic;
        }

        /* Phase 279: Sticky Total Row */
        #sp-279-total-row {
            position: sticky;
            top: var(--sp-header-height, 36px);
            z-index: 5;
            background: #eff6ff;
            border-bottom: 2px solid #93c5fd;
        }
        #sp-279-total-row td {
            font-size: 11px;
            font-weight: 700;
            color: #1e40af;
            padding: 3px 6px;
            border-right: 1px solid #dbeafe;
            white-space: nowrap;
            vertical-align: middle;
            text-align: right;
        }
        #sp-279-total-row td:first-child,
        #sp-279-total-row td.sp-279-label-cell {
            text-align: left;
            color: #1d4ed8;
            font-size: 10px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        #sp-279-total-row td.sp-279-empty-cell {
            color: #93c5fd;
            font-weight: 400;
            text-align: center;
        }
        #sp-279-total-btn.sp-279-active {
            background: #dbeafe;
            border-color: #3b82f6;
            color: #1d4ed8;
        }

        /* Phase 280: Column Width Lock */
        th.sp-col-locked .sp-col-resize-handle,
        th.sp-col-locked [class*="resize"] {
            pointer-events: none !important;
            cursor: default !important;
        }
        .sp-280-lock-icon {
            font-size: 9px;
            opacity: 0.6;
            margin-right: 3px;
            vertical-align: middle;
            user-select: none;
        }

        /* Phase 281: Selection to Filter */
        #sp-281-active-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #fef3c7;
            border: 1px solid #f59e0b;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 12px;
            color: #92400e;
            font-weight: 600;
            margin-left: 6px;
            white-space: nowrap;
            vertical-align: middle;
        }
        #sp-281-active-chip .sp-281-close {
            cursor: pointer;
            font-weight: bold;
            opacity: 0.7;
            padding: 0 2px;
            font-size: 14px;
            line-height: 1;
        }
        #sp-281-active-chip .sp-281-close:hover {
            opacity: 1;
        }

        /* Phase 282: Strikethrough Completed Rows */
        .sp-282-done td {
            text-decoration: line-through !important;
            opacity: 0.5;
            background-color: #f9fafb !important;
            color: #6b7280 !important;
        }
        .sp-282-done td .sp-badge-pill,
        .sp-282-done td a {
            opacity: 0.6;
        }
        #sp-282-strikethrough-btn.sp-282-active {
            background: #f0fdf4;
            border-color: #22c55e;
            color: #15803d;
        }
        #sp-282-config-panel {
            position: fixed;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            padding: 14px 16px;
            z-index: 10000;
            min-width: 280px;
            font-size: 13px;
        }
        #sp-282-config-panel label {
            display: block;
            font-weight: 600;
            margin-bottom: 4px;
            color: #374151;
        }
        #sp-282-config-panel select,
        #sp-282-config-panel input[type="text"] {
            width: 100%;
            padding: 4px 8px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            margin-bottom: 10px;
            font-size: 12px;
        }
        #sp-282-config-panel .sp-282-btns {
            display: flex;
            gap: 6px;
        }
        #sp-282-config-panel .sp-282-btns button {
            flex: 1;
            padding: 4px 8px;
            font-size: 12px;
            border-radius: 4px;
            cursor: pointer;
        }
        .sp-282-apply-btn {
            background: #22c55e;
            color: #fff;
            border: 1px solid #16a34a;
        }
        .sp-282-clear-btn {
            background: #f3f4f6;
            color: #374151;
            border: 1px solid #d1d5db;
        }
        .sp-282-close-btn {
            position: absolute;
            top: 6px;
            right: 8px;
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
            color: #6b7280;
            line-height: 1;
            padding: 0;
        }

        /* Phase 283: Row Bookmark Panel */
        .sp-283-bm {
            border-left: 3px solid #f59e0b !important;
        }
        #sp-283-bm-btn .sp-283-badge {
            background: #f59e0b;
            color: #fff;
            border-radius: 10px;
            font-size: 10px;
            padding: 1px 5px;
            margin-left: 3px;
            vertical-align: middle;
        }
        .sp-283-bm-action-btn {
            opacity: 0.45;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0 2px;
            font-size: 13px;
            line-height: 1;
            transition: opacity 0.15s;
        }
        .sp-283-bm-action-btn:hover,
        .sp-283-bm-action-btn.sp-283-active {
            opacity: 1;
        }
        .sp-283-bm-entry {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            padding: 6px 8px;
            border: 1px solid #f3f4f6;
            border-radius: 6px;
            margin-bottom: 4px;
            background: #fffbeb;
            cursor: pointer;
            font-size: 12px;
        }
        .sp-283-bm-entry:hover {
            background: #fef3c7;
            border-color: #f59e0b;
        }
        .sp-283-bm-entry-info {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }
        .sp-283-bm-entry-title {
            font-weight: 600;
            color: #1f2937;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sp-283-bm-entry-sub {
            color: #6b7280;
            font-size: 11px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sp-283-bm-remove {
            flex-shrink: 0;
            background: none;
            border: none;
            color: #9ca3af;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            padding: 0;
        }
        .sp-283-bm-remove:hover {
            color: #ef4444;
        }
        @keyframes sp283flash {
            0%   { background-color: #fef3c7; }
            50%  { background-color: #fbbf24; }
            100% { background-color: inherit; }
        }
        .sp-283-flash {
            animation: sp283flash 0.8s ease;
        }

        /* Phase 285: Row Star Rating */
        #sp-285-rating-btn.sp-285-active {
            background: #fffbeb;
            border-color: #f59e0b;
            color: #92400e;
        }
        #sp-285-rating-th {
            text-align: center;
            width: 76px;
            min-width: 76px;
            max-width: 76px;
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
            font-size: 13px;
            padding: 4px 4px !important;
        }
        #sp-285-rating-th:hover {
            background: #fffbeb;
        }
        .sp-285-stars-td {
            text-align: center;
            width: 76px;
            min-width: 76px;
            max-width: 76px;
            padding: 2px 4px !important;
            white-space: nowrap;
        }
        .sp-285-star {
            cursor: pointer;
            font-size: 14px;
            line-height: 1;
            padding: 0 1px;
            transition: transform 0.1s;
            display: inline-block;
            color: #d1d5db;
        }
        .sp-285-star.sp-285-filled {
            color: #f59e0b;
        }
        .sp-285-star:hover,
        .sp-285-stars-td:hover .sp-285-star.sp-285-hover-fill {
            color: #fbbf24;
            transform: scale(1.15);
        }

        /* Phase 284: Edit Session Log */
        #sp-284-log-btn .sp-284-badge {
            background: #6366f1;
            color: #fff;
            border-radius: 10px;
            font-size: 10px;
            padding: 1px 5px;
            margin-left: 3px;
            vertical-align: middle;
        }
        #sp-284-log-panel {
            position: fixed;
            bottom: 60px;
            right: 16px;
            width: 440px;
            max-height: 420px;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 10px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.14);
            z-index: 10500;
            display: flex;
            flex-direction: column;
            font-size: 12px;
        }
        #sp-284-log-panel.sp-284-hidden {
            display: none;
        }
        #sp-284-log-header {
            padding: 8px 12px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            gap: 6px;
            background: #f8fafc;
            border-radius: 10px 10px 0 0;
        }
        #sp-284-log-header strong {
            flex: 1;
            color: #1f2937;
        }
        #sp-284-log-clear-btn {
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 1px 8px;
            font-size: 11px;
            cursor: pointer;
            color: #6b7280;
        }
        #sp-284-log-clear-btn:hover {
            background: #fee2e2;
            border-color: #ef4444;
            color: #dc2626;
        }
        #sp-284-log-close-btn {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: #9ca3af;
            line-height: 1;
            padding: 0;
        }
        #sp-284-log-close-btn:hover { color: #374151; }
        #sp-284-log-body {
            overflow-y: auto;
            flex: 1;
            padding: 6px 8px;
        }
        .sp-284-log-entry {
            display: grid;
            grid-template-columns: 56px 90px 1fr auto auto;
            align-items: center;
            gap: 4px;
            padding: 4px 4px;
            border-bottom: 1px solid #f3f4f6;
            font-size: 11px;
        }
        .sp-284-log-entry:last-child { border-bottom: none; }
        .sp-284-log-ts { color: #9ca3af; font-size: 10px; }
        .sp-284-log-field { font-weight: 600; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .sp-284-log-change { color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .sp-284-log-old { color: #ef4444; text-decoration: line-through; }
        .sp-284-log-arrow { color: #9ca3af; margin: 0 2px; }
        .sp-284-log-new { color: #16a34a; }
        .sp-284-log-row-link {
            color: #6366f1;
            cursor: pointer;
            text-decoration: underline;
            font-size: 10px;
            white-space: nowrap;
        }
        .sp-284-log-row-link:hover { color: #4f46e5; }
        .sp-284-log-undo-btn {
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            padding: 1px 4px;
            font-size: 10px;
            cursor: pointer;
            color: #6b7280;
        }
        .sp-284-log-undo-btn:hover { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
        #sp-284-log-empty {
            text-align: center;
            color: #9ca3af;
            padding: 24px 8px;
            font-size: 12px;
        }

        /* Phase 288: List Notepad */
        #sp-288-pad-btn .sp-288-dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            background: #10b981;
            border-radius: 50%;
            vertical-align: middle;
            margin-left: 3px;
        }
        #sp-288-pad-textarea:focus {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 2px rgba(99,102,241,0.12) !important;
        }
        /* Phase 287: Row Custom Background Color */
        .sp-287-color-btn {
            opacity: 0.45;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0 2px;
            font-size: 13px;
            line-height: 1;
            transition: opacity 0.15s;
        }
        .sp-287-color-btn:hover,
        .sp-287-color-btn.sp-287-active {
            opacity: 1;
        }
        .sp-287-popover {
            position: fixed;
            z-index: 10700;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 10px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.14);
            padding: 10px;
            width: 196px;
        }
        .sp-287-popover.sp-287-hidden {
            display: none;
        }
        .sp-287-swatches {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 4px;
            margin-bottom: 8px;
        }
        .sp-287-swatch {
            width: 26px;
            height: 26px;
            border-radius: 5px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.1s, transform 0.1s;
        }
        .sp-287-swatch:hover {
            border-color: #374151;
            transform: scale(1.12);
        }
        .sp-287-swatch.sp-287-selected {
            border-color: #1f2937;
        }
        .sp-287-custom-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
            font-size: 11px;
            color: #6b7280;
        }
        .sp-287-custom-row input[type="color"] {
            width: 32px;
            height: 26px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            cursor: pointer;
            padding: 1px 2px;
        }
        .sp-287-clear-btn {
            width: 100%;
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 5px;
            padding: 4px;
            font-size: 11px;
            cursor: pointer;
            color: #6b7280;
            text-align: center;
        }
        .sp-287-clear-btn:hover {
            background: #fee2e2;
            border-color: #ef4444;
            color: #dc2626;
        }

        /* Phase 286: Quick Row Jump by ID */
        #sp-286-jump-bar {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10600;
            background: #fff;
            border: 2px solid #6366f1;
            border-radius: 10px;
            box-shadow: 0 8px 30px rgba(99,102,241,0.18);
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 280px;
            font-size: 13px;
        }
        #sp-286-jump-bar.sp-286-hidden {
            display: none;
        }
        #sp-286-jump-bar label {
            color: #6366f1;
            font-weight: 600;
            white-space: nowrap;
            margin: 0;
        }
        #sp-286-jump-input {
            border: 1px solid #d1d5db;
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 13px;
            width: 90px;
            outline: none;
            transition: border-color 0.15s;
        }
        #sp-286-jump-input:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
        }
        #sp-286-jump-go-btn {
            background: #6366f1;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 4px 12px;
            font-size: 12px;
            cursor: pointer;
            white-space: nowrap;
        }
        #sp-286-jump-go-btn:hover {
            background: #4f46e5;
        }
        #sp-286-jump-close-btn {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: #9ca3af;
            line-height: 1;
            padding: 0;
            margin-left: 2px;
        }
        #sp-286-jump-close-btn:hover { color: #374151; }
        @keyframes sp286flash {
            0%   { outline: 3px solid #6366f1; outline-offset: 1px; }
            50%  { outline: 3px solid #818cf8; outline-offset: 3px; }
            100% { outline: none; }
        }
        .sp-286-flash {
            animation: sp286flash 0.7s ease;
        }

        /* Phase 291: Item ID Column */
        .sp-291-id-th {
            background: #f3f4f6;
            font-size: 11px;
            color: #6b7280;
            white-space: nowrap;
            min-width: 48px;
            text-align: center;
            font-weight: 600;
        }
        .sp-291-id-td {
            text-align: center;
            font-size: 11px;
            color: #9ca3af;
            white-space: nowrap;
            padding: 2px 6px !important;
            cursor: pointer;
            user-select: none;
        }
        .sp-291-id-td:hover {
            color: #4f46e5;
            background: rgba(99,102,241,0.07);
        }
        /* Phase 291: Clipboard emoji on hover removed — was causing overlay errors.
           Click-to-copy still works via JS handler. */
        .sp-291-active {
            background: #4f46e5 !important;
            color: #fff !important;
            border-color: #4f46e5 !important;
        }
        /* Phase 290: Column Quick Hide */
        .sp-290-badge-wrapper {
            display: inline-block;
            position: relative;
        }
        #sp-290-restore-panel {
            position: absolute;
            z-index: 9600;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            padding: 8px 10px;
            top: 100%;
            left: 0;
            margin-top: 4px;
            min-width: 200px;
            max-width: 280px;
        }
        #sp-list-table thead th[data-field]:not([data-field=""]) {
            cursor: default;
        }
        /* Phase 290: Alt+click hint removed — was causing overlay errors on hover.
           Users can discover column-hide via context menu instead. */
        /* Phase 289: Row Expiry Countdown */
        #sp-289-expiry-panel {
            position: absolute;
            z-index: 9500;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            padding: 8px 12px;
            top: 100%;
            right: 0;
            margin-top: 4px;
            min-width: 320px;
            white-space: nowrap;
        }
        .sp-289-th {
            background: #f9fafb;
            font-size: 11px;
            color: #6b7280;
            white-space: nowrap;
            min-width: 72px;
            text-align: center;
        }
        .sp-289-td {
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            padding: 2px 6px !important;
        }
        .sp-289-td.sp-289-overdue { color: #dc2626; }
        .sp-289-td.sp-289-urgent  { color: #ea580c; }
        .sp-289-td.sp-289-soon    { color: #ca8a04; }
        .sp-289-td.sp-289-ok      { color: #16a34a; }
        .sp-289-active-dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            background: #10b981;
            border-radius: 50%;
            vertical-align: middle;
            margin-left: 3px;
        }
        /* Phase 294: URL Field External Link Button */
        td[data-field-type="url"] {
            position: relative;
        }
        .sp-294-ext-btn {
            position: absolute;
            top: 2px;
            right: 3px;
            background: rgba(79, 70, 229, 0.85);
            color: #fff;
            border: none;
            border-radius: 3px;
            font-size: 10px;
            line-height: 1;
            padding: 2px 4px;
            cursor: pointer;
            z-index: 10;
            opacity: 0;
            transition: opacity 0.1s;
            pointer-events: none;
        }
        td[data-field-type="url"]:hover .sp-294-ext-btn {
            opacity: 1;
            pointer-events: auto;
        }
        .sp-294-ext-btn:hover {
            background: rgba(67, 56, 202, 0.95);
        }
        /* Phase 295: Attachment File List Popup */
        .sp-295-popup {
            position: absolute;
            z-index: 99998;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.14);
            min-width: 200px;
            max-width: 340px;
            font-size: 12px;
            overflow: hidden;
        }
        .sp-295-popup-header {
            background: #f3f4f6;
            padding: 6px 10px;
            font-weight: 600;
            color: #374151;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }
        .sp-295-popup-list {
            list-style: none;
            margin: 0;
            padding: 4px 0;
            max-height: 200px;
            overflow-y: auto;
        }
        .sp-295-popup-list li {
            padding: 0;
        }
        .sp-295-file-link {
            display: block;
            padding: 5px 10px;
            color: #4f46e5;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sp-295-file-link:hover {
            background: #f3f4f6;
            color: #3730a3;
            text-decoration: underline;
        }
        .sp-295-popup-footer {
            border-top: 1px solid #e5e7eb;
            padding: 5px 10px;
            text-align: right;
            background: #fafafa;
        }
        .sp-295-popup-displink {
            font-size: 11px;
            color: #6b7280;
            text-decoration: none;
        }
        .sp-295-popup-displink:hover {
            color: #374151;
            text-decoration: underline;
        }
        /* Phase 292: Attachment Count Column */
        .sp-292-att-th {
            background: #f3f4f6;
            font-size: 11px;
            color: #6b7280;
            white-space: nowrap;
            min-width: 48px;
            text-align: center;
            font-weight: 600;
        }
        .sp-292-att-td {
            text-align: center;
            font-size: 11px;
            white-space: nowrap;
            padding: 2px 6px !important;
            color: #9ca3af;
        }
        .sp-292-att-td.sp-292-has-att {
            color: #4f46e5;
            cursor: pointer;
        }
        .sp-292-att-td.sp-292-has-att:hover {
            color: #3730a3;
            text-decoration: underline;
        }
        .sp-292-att-td.sp-292-loading {
            color: #d1d5db;
            font-style: italic;
        }
        #sp-292-att-btn.sp-292-active {
            background: #4f46e5;
            color: #fff;
            border-color: #4f46e5;
        }
        /* Phase 296: Group Row Count Badge */
        .sp-296-count {
            font-size: 10px;
            color: #9ca3af;
            margin-left: 6px;
            font-weight: normal;
            font-style: normal;
            white-space: nowrap;
            user-select: none;
        }
        #sp-296-grp-count-btn.sp-296-active {
            background: #4f46e5;
            color: #fff;
            border-color: #4f46e5;
        }
        /* Phase 298 */
        .sp-298-age-th, .sp-298-age-td {
            width: 54px; min-width: 54px; max-width: 54px;
            text-align: center; white-space: nowrap;
            font-size: 0.82em; padding: 2px 4px !important;
        }
        .sp-298-age-th { color: #555; font-weight: 600; }
        .sp-298-age-td { color: #777; }
        .sp-298-age-td.sp-298-today { color: #198754; font-weight: 600; }
        .sp-298-age-td.sp-298-recent { color: #0d6efd; }
        /* Phase 299 */
        #sp-list-table.sp-299-hdr-wrap thead th {
            white-space: normal;
            word-break: break-word;
            line-height: 1.3;
            vertical-align: bottom;
            min-height: 2.6em;
            max-width: 160px;
        }
        /* Phase 300 */
        #sp-300-freq-panel {
            position: fixed;
            right: 12px;
            top: 80px;
            width: 270px;
            max-height: 440px;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            box-shadow: 0 4px 14px rgba(0,0,0,.18);
            z-index: 1045;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            font-size: .84em;
        }
        #sp-300-freq-panel .sp-300-head {
            padding: 7px 10px;
            background: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
        }
        #sp-300-freq-panel .sp-300-head select {
            font-size: .83em;
            padding: 1px 4px;
            border-radius: 4px;
            border: 1px solid #ced4da;
            flex: 1;
            min-width: 0;
        }
        #sp-300-freq-list {
            overflow-y: auto;
            flex: 1;
            padding: 3px 0;
        }
        .sp-300-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 3px 10px;
            cursor: pointer;
            gap: 6px;
        }
        .sp-300-row:hover { background: #eef2ff; }
        .sp-300-val {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333;
        }
        .sp-300-val.sp-300-empty { color: #aaa; font-style: italic; }
        .sp-300-bar-wrap { width: 60px; background: #e9ecef; border-radius: 3px; height: 6px; flex-shrink: 0; }
        .sp-300-bar { height: 6px; background: #0d6efd; border-radius: 3px; }
        .sp-300-cnt {
            min-width: 28px;
            text-align: right;
            font-weight: 600;
            color: #0d6efd;
            flex-shrink: 0;
        }
        #sp-300-footer {
            padding: 5px 10px;
            font-size: .78em;
            color: #888;
            border-top: 1px solid #dee2e6;
            background: #f8f9fa;
            display: flex;
            justify-content: space-between;
        }
        /* Phase 301 */
        #sp-301-fit-btn.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
        /* Phase 302 */
        #sp-302-colsearch-wrap {
            padding: 6px 8px 4px 8px;
            border-bottom: 1px solid #dee2e6;
            background: #f8f9fa;
        }
        #sp-302-colsearch-input {
            width: 100%;
            font-size: .83em;
            padding: 3px 7px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            outline: none;
            box-sizing: border-box;
        }
        #sp-302-colsearch-input:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 2px rgba(13,110,253,.15);
        }
        .sp-302-col-hidden { display: none !important; }
        /* Phase 303 */
        #sp-303-row-tip {
            position: fixed;
            z-index: 1060;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,.18);
            padding: 0;
            min-width: 220px;
            max-width: 320px;
            font-size: .83em;
            pointer-events: none;
            display: none;
        }
        #sp-303-row-tip .sp-303-head {
            background: #f0f4ff;
            border-bottom: 1px solid #dee2e6;
            padding: 5px 10px;
            font-weight: 600;
            border-radius: 6px 6px 0 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #0d47a1;
        }
        #sp-303-row-tip .sp-303-body {
            padding: 6px 10px;
        }
        .sp-303-field-row {
            display: flex;
            gap: 6px;
            padding: 2px 0;
            align-items: baseline;
        }
        .sp-303-label {
            color: #888;
            font-size: .78em;
            min-width: 68px;
            flex-shrink: 0;
            text-align: right;
        }
        .sp-303-value {
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }
        .sp-303-value.sp-303-empty { color: #bbb; font-style: italic; }
        /* Phase 304 */
        #sp-304-color-popover {
            position: fixed;
            z-index: 1080;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            box-shadow: 0 4px 14px rgba(0,0,0,.18);
            padding: 8px 10px;
            display: none;
            min-width: 170px;
        }
        #sp-304-color-popover .sp-304-popover-title {
            font-size: .78em;
            color: #666;
            margin-bottom: 6px;
        }
        .sp-304-swatch-row {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            margin-bottom: 6px;
        }
        .sp-304-swatch {
            width: 20px;
            height: 20px;
            border-radius: 3px;
            border: 2px solid transparent;
            cursor: pointer;
            transition: transform .1s, border-color .1s;
        }
        .sp-304-swatch:hover { transform: scale(1.15); }
        .sp-304-swatch.sp-304-selected { border-color: #333; }
        .sp-304-clear-btn {
            font-size: .75em;
            background: none;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 1px 7px;
            cursor: pointer;
            color: #555;
        }
        .sp-304-clear-btn:hover { background: #f5f5f5; }
        /* Phase 305 */
        td[data-sp305-has-note] {
            position: relative;
        }
        .sp-305-note-dot {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 8px 8px 0;
            border-color: transparent #f97316 transparent transparent;
            pointer-events: none;
            z-index: 1;
        }
        #sp-305-note-popover {
            position: fixed;
            z-index: 1075;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            box-shadow: 0 4px 14px rgba(0,0,0,.2);
            padding: 8px 10px;
            min-width: 210px;
            max-width: 300px;
            display: none;
        }
        #sp-305-note-popover .sp-305-pop-title {
            font-size: .76em;
            color: #888;
            margin-bottom: 5px;
        }
        #sp-305-note-popover .sp-305-pop-title b { color: #444; }
        #sp-305-note-ta {
            width: 100%;
            min-height: 64px;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 4px 6px;
            font-size: .82em;
            resize: vertical;
            box-sizing: border-box;
            font-family: inherit;
        }
        .sp-305-pop-actions {
            display: flex;
            justify-content: flex-end;
            gap: 5px;
            margin-top: 5px;
        }
        .sp-305-pop-save {
            font-size: .78em;
            background: #0072c6;
            color: #fff;
            border: none;
            border-radius: 3px;
            padding: 2px 9px;
            cursor: pointer;
        }
        .sp-305-pop-save:hover { background: #006cbf; }
        .sp-305-pop-del {
            font-size: .78em;
            background: none;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 2px 7px;
            cursor: pointer;
            color: #555;
        }
        .sp-305-pop-del:hover { background: #f5f5f5; }
        /* Phase 306 */
        .sp-col-stripe-on #sp-list-table thead th:nth-child(even),
        .sp-col-stripe-on #sp-list-table tbody td:nth-child(even) {
            background-color: rgba(0, 120, 212, 0.05);
        }
        #sp-306-col-stripe-btn.sp-306-active {
            background: rgba(0, 120, 212, 0.12) !important;
            color: #0072c6 !important;
            border-color: #0072c6 !important;
        }
        /* Phase 307 */
        #sp-307-hl-popover {
            position: fixed;
            z-index: 1090;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            box-shadow: 0 4px 14px rgba(0,0,0,.18);
            padding: 7px 9px;
            display: none;
            min-width: 160px;
        }
        #sp-307-hl-popover .sp-307-title {
            font-size: .76em;
            color: #666;
            margin-bottom: 5px;
        }
        .sp-307-swatch-row {
            display: flex;
            gap: 5px;
            margin-bottom: 6px;
        }
        .sp-307-swatch {
            width: 22px;
            height: 22px;
            border-radius: 3px;
            border: 2px solid rgba(0,0,0,.15);
            cursor: pointer;
            transition: transform .1s;
        }
        .sp-307-swatch:hover { transform: scale(1.18); }
        .sp-307-clear-btn {
            font-size: .74em;
            background: none;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 1px 7px;
            cursor: pointer;
            color: #555;
        }
        .sp-307-clear-btn:hover { background: #f5f5f5; }
        /* Phase 308 */
        .sp-308-chip {
            display: none;
            font-size: .67em;
            color: #888;
            font-weight: 400;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }
        #sp-list-table.sp-308-on .sp-308-chip {
            display: block;
        }
        #sp-308-col-sum-btn.sp-308-active {
            background: rgba(0, 120, 212, 0.12) !important;
            color: #0072c6 !important;
            border-color: #0072c6 !important;
        }
        /* Phase 309 */
        tr[data-sp309-band="0"] { background-color: rgba(255, 235, 150, 0.3) !important; }
        tr[data-sp309-band="1"] { background-color: rgba(180, 230, 200, 0.3) !important; }
        tr[data-sp309-band="2"] { background-color: rgba(180, 215, 255, 0.3) !important; }
        tr[data-sp309-band="3"] { background-color: rgba(255, 200, 200, 0.3) !important; }
        tr[data-sp309-band="4"] { background-color: rgba(220, 195, 255, 0.3) !important; }
        tr[data-sp309-band="5"] { background-color: rgba(200, 240, 255, 0.3) !important; }
        #sp-309-grp-color-btn.sp-309-active {
            background: rgba(0, 120, 212, 0.12) !important;
            color: #0072c6 !important;
            border-color: #0072c6 !important;
        }
        /* Phase 310 */
        .sp-310-bar-wrap {
            display: block;
            height: 4px;
            background: rgba(0,0,0,.08);
            border-radius: 2px;
            margin-top: 3px;
            overflow: hidden;
        }
        .sp-310-bar-fill {
            height: 100%;
            border-radius: 2px;
            transition: width .2s;
            min-width: 0;
            max-width: 100%;
        }
        #sp-310-progbar-panel {
            position: fixed;
            z-index: 1090;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            box-shadow: 0 4px 14px rgba(0,0,0,.18);
            padding: 10px 12px;
            display: none;
            min-width: 200px;
            font-size: .83em;
        }
        #sp-310-progbar-panel label {
            display: block;
            margin-bottom: 2px;
            color: #555;
            font-weight: 500;
        }
        #sp-310-progbar-panel input[type="number"] {
            width: 80px;
            padding: 2px 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: .9em;
        }
        #sp-310-progbar-panel input[type="color"] {
            width: 32px;
            height: 22px;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 1px;
            cursor: pointer;
        }
        .sp-310-panel-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
        }
        .sp-310-panel-btns {
            display: flex;
            gap: 5px;
            margin-top: 8px;
        }
        .sp-310-panel-btns button {
            font-size: .8em;
            padding: 2px 9px;
            border-radius: 3px;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #f8f8f8;
        }
        .sp-310-panel-btns button:hover { background: #e9e9e9; }
        .sp-310-panel-btns .sp-310-save-btn {
            background: #0072c6;
            color: #fff;
            border-color: #0072c6;
        }
        .sp-310-panel-btns .sp-310-save-btn:hover { background: #106ebe; }
        /* Phase 311 */
        #sp-311-csort-panel {
            position: fixed;
            z-index: 1090;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            box-shadow: 0 4px 14px rgba(0,0,0,.18);
            padding: 10px 12px;
            display: none;
            min-width: 210px;
            font-size: .83em;
        }
        #sp-311-csort-panel .sp-311-title {
            font-size: .78em;
            color: #666;
            margin-bottom: 6px;
        }
        #sp-311-csort-panel textarea {
            width: 100%;
            height: 90px;
            font-size: .82em;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 4px 6px;
            resize: vertical;
            box-sizing: border-box;
        }
        .sp-311-panel-btns {
            display: flex;
            gap: 5px;
            margin-top: 7px;
        }
        .sp-311-panel-btns button {
            font-size: .8em;
            padding: 2px 9px;
            border-radius: 3px;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #f8f8f8;
        }
        .sp-311-panel-btns button:hover { background: #e9e9e9; }
        .sp-311-panel-btns .sp-311-save-btn {
            background: #0072c6;
            color: #fff;
            border-color: #0072c6;
        }
        .sp-311-panel-btns .sp-311-save-btn:hover { background: #106ebe; }
        .sp-311-badge {
            display: inline-block;
            font-size: .65em;
            background: rgba(0,120,212,.15);
            color: #0072c6;
            border-radius: 2px;
            padding: 0 3px;
            margin-left: 3px;
            vertical-align: middle;
            line-height: 1.4;
        }
        /* Phase 312 */
        tr[data-sp312-dup] {
            border-left: 3px solid transparent;
        }
        tr[data-sp312-dup="1"] { border-left-color: #e53935 !important; }
        tr[data-sp312-dup="2"] { border-left-color: #1e88e5 !important; }
        tr[data-sp312-dup="3"] { border-left-color: #43a047 !important; }
        tr[data-sp312-dup="4"] { border-left-color: #fb8c00 !important; }
        tr[data-sp312-dup="5"] { border-left-color: #8e24aa !important; }
        tr[data-sp312-dup="6"] { border-left-color: #00acc1 !important; }
        .sp-312-dup-badge {
            display: inline-block;
            font-size: .65em;
            font-weight: bold;
            border-radius: 3px;
            padding: 0 4px;
            margin-right: 4px;
            vertical-align: middle;
            line-height: 1.5;
            color: #fff;
        }
        #sp-312-duprow-btn.sp-312-active {
            background: rgba(229, 57, 53, 0.12) !important;
            color: #e53935 !important;
            border-color: #e53935 !important;
        }
        .sp-312-count-badge {
            display: inline-block;
            background: #e53935;
            color: #fff;
            border-radius: 8px;
            font-size: .65em;
            padding: 1px 5px;
            margin-left: 3px;
            vertical-align: middle;
            line-height: 1.4;
        }
        /* Phase 313 */
        .sp-313-hi::after {
            content: ' \2191';
            color: #43a047;
            font-weight: bold;
            font-size: .85em;
        }
        .sp-313-lo::after {
            content: ' \2193';
            color: #e53935;
            font-weight: bold;
            font-size: .85em;
        }
        .sp-313-hilo-active-item {
            color: #43a047 !important;
            font-weight: 600;
        }
        /* Phase 314 */
        .sp-314-gauge-th {
            width: 60px;
            min-width: 60px;
            text-align: center;
            font-size: .78em;
            white-space: nowrap;
        }
        .sp-314-gauge-td {
            text-align: center;
            padding: 2px 4px !important;
        }
        .sp-314-pct {
            display: inline-block;
            border-radius: 10px;
            font-size: .72em;
            font-weight: bold;
            padding: 1px 6px;
            color: #fff;
            white-space: nowrap;
        }
        .sp-314-p100 { background: #2e7d32; }
        .sp-314-p75  { background: #66bb6a; color: #fff; }
        .sp-314-p50  { background: #f9a825; color: #fff; }
        .sp-314-p25  { background: #ef6c00; }
        .sp-314-p0   { background: #c62828; }
        #sp-314-gauge-btn.sp-314-active {
            background: rgba(46, 125, 50, 0.12) !important;
            color: #2e7d32 !important;
            border-color: #2e7d32 !important;
        }
        /* Phase 315 */
        table.sp-315-spotlight-on th:not(.sp-315-focus-col),
        table.sp-315-spotlight-on td:not(.sp-315-focus-col):not(.ms-check-col):not(.sp-row-actions) {
            opacity: 0.35;
            transition: opacity 0.2s ease;
        }
        table.sp-315-spotlight-on .sp-315-focus-col {
            opacity: 1 !important;
            transition: opacity 0.2s ease;
        }
        th.sp-315-focus-col {
            background: rgba(25, 118, 210, 0.10) !important;
            box-shadow: inset 0 -2px 0 #1976d2;
        }
        .sp-315-spotlight-item.sp-315-active {
            color: #0072c6 !important;
            font-weight: 600;
        }

        /* Phase 316 */
        #sp-316-drag-order-btn.sp-316-active {
            background: rgba(25, 118, 210, 0.12) !important;
            color: #1976d2 !important;
            border-color: #1976d2 !important;
        }
        #sp-list-tbody.sp-316-drag-active tr.ms-list-row {
            cursor: grab;
            user-select: none;
        }
        #sp-list-tbody.sp-316-drag-active tr.ms-list-row:active {
            cursor: grabbing;
        }
        tr.sp-316-dragging {
            opacity: 0.45;
        }
        tr.sp-316-drag-over {
            box-shadow: 0 -2px 0 0 #1976d2;
        }

        /* Phase 317 */
        #sp-317-typicons-btn.sp-317-active {
            background: rgba(25, 118, 210, 0.12) !important;
            color: #1976d2 !important;
            border-color: #1976d2 !important;
        }
        .sp-317-type-icon {
            font-style: normal;
            opacity: 0.6;
            font-size: .82em;
            margin-right: 3px;
            cursor: default;
            vertical-align: middle;
        }

        /* Phase 318 */
        .sp-318-filter-icon {
            cursor: pointer;
            font-size: .72em;
            opacity: 0.45;
            margin-left: 4px;
            vertical-align: middle;
            user-select: none;
            transition: opacity 0.15s;
            display: inline-block;
            line-height: 1;
        }
        .sp-318-filter-icon:hover {
            opacity: 0.9;
        }
        .sp-318-filter-icon.sp-318-filter-active {
            opacity: 1;
            color: #1976d2;
        }
        #sp-318-chkfilter-popup {
            position: absolute;
            z-index: 9500;
            background: #fff;
            border: 1px solid #bdbdbd;
            border-radius: 6px;
            box-shadow: 0 4px 20px rgba(0,0,0,.18);
            min-width: 180px;
            max-width: 300px;
            font-size: .84em;
            overflow: hidden;
        }
        .sp-318-popup-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 10px 5px;
            border-bottom: 1px solid #e0e0e0;
            font-weight: 600;
            font-size: .92em;
            background: #f5f5f5;
        }
        .sp-318-popup-close {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0 3px;
            line-height: 1;
            color: #757575;
            font-size: 1em;
        }
        .sp-318-popup-close:hover { color: #212121; }
        .sp-318-popup-actions {
            padding: 4px 8px;
            border-bottom: 1px solid #f0f0f0;
        }
        .sp-318-popup-list {
            max-height: 240px;
            overflow-y: auto;
            list-style: none;
            margin: 0;
            padding: 4px 0;
        }
        .sp-318-popup-list li {
            padding: 2px 10px;
        }
        .sp-318-popup-list li label {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            padding: 2px 0;
        }
        .sp-318-popup-list li label:hover {
            background: #f5f5f5;
            border-radius: 3px;
        }
        tr.sp-318-hidden {
            display: none !important;
        }
        /* Phase 319 */
        .sp-319-align-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .sp-319-align-item .sp-319-check {
            display: inline-block;
            width: 14px;
            text-align: center;
            color: #1976d2;
            font-size: .85em;
            flex-shrink: 0;
        }

        /* Phase 320 */
        tr.sp-320-locked {
            background-image: repeating-linear-gradient(
                135deg,
                transparent,
                transparent 10px,
                rgba(0,0,0,.025) 10px,
                rgba(0,0,0,.025) 20px
            );
        }
        .sp-320-lock-icon {
            cursor: pointer;
            font-size: .85em;
            opacity: 0.5;
            user-select: none;
            transition: opacity 0.15s;
            padding: 0 2px;
        }
        .sp-320-lock-icon:hover { opacity: 1; }
        tr.sp-320-locked .sp-320-lock-icon { opacity: 1; color: #e65100; }
        #sp-320-lock-btn.sp-320-lock-mode-active {
            background: #fff3e0;
            border-color: #e65100;
            color: #e65100;
        }

        /* Phase 321 */
        #sp-321-statsbar {
            display: none;
            background: #e8f5e9;
            border: 1px solid #a5d6a7;
            border-radius: 5px;
            padding: 3px 10px;
            margin: 4px 0 2px;
            font-size: .78em;
            line-height: 1.6;
            flex-wrap: wrap;
            gap: 0 14px;
            align-items: center;
            color: #2e7d32;
        }
        #sp-321-statsbar.sp-321-visible {
            display: flex;
        }
        .sp-321-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
            padding: 1px 0;
        }
        .sp-321-chip-label {
            font-weight: 600;
            color: #1b5e20;
        }
        .sp-321-chip-stats {
            color: #388e3c;
        }
        #sp-321-statsbar-close {
            margin-left: auto;
            background: none;
            border: none;
            cursor: pointer;
            color: #4caf50;
            padding: 0 2px;
            font-size: 1em;
            line-height: 1;
        }
        #sp-321-statsbar-close:hover { color: #1b5e20; }

        /* Phase 322 */
        #sp-list-table.sp-322-drag-active {
            user-select: none;
            -webkit-user-select: none;
        }
        #sp-list-table.sp-322-drag-active td:first-child {
            cursor: cell;
        }
        tr.sp-322-drag-hover > td:first-child {
            background: rgba(25, 118, 210, 0.12) !important;
        }

        /* Phase 323 */
        .sp-323-hdr-badge {
            display: inline-block;
            font-size: .62em;
            font-weight: 500;
            background: #e3f2fd;
            color: #1565c0;
            border: 1px solid #90caf9;
            border-radius: 3px;
            padding: 0 3px;
            margin-left: 5px;
            vertical-align: middle;
            line-height: 1.5;
            white-space: nowrap;
        }
        .sp-323-badge-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .sp-323-badge-item .sp-323-check {
            display: inline-block;
            width: 14px;
            text-align: center;
            color: #1976d2;
            font-size: .85em;
            flex-shrink: 0;
        }

        /* Phase 324 — Copy Table as HTML */
        #sp-324-html-copy-btn {
            /* inherits from btn btn-sm btn-outline-secondary */
        }

        /* Phase 325 — Cell Border Mode (Grid Lines Toggle) */
        #sp-325-grid-btn { /* inherits from btn btn-sm btn-outline-secondary */ }

        /* Rows-only mode: suppress vertical cell borders */
        #sp-list-table.sp-325-rows-only td,
        #sp-list-table.sp-325-rows-only th {
            border-left: none !important;
            border-right: none !important;
        }

        /* Bare mode: suppress all inner borders (keep outer table border via border-collapse) */
        #sp-list-table.sp-325-bare td,
        #sp-list-table.sp-325-bare th {
            border-color: transparent !important;
        }

        /* Phase 326 — Sort Quick Reset Button */
        #sp-326-sort-reset-btn { /* inherits from btn btn-sm btn-outline-warning */ }
        #sp-326-sort-reset-btn.d-none { display: none !important; }

        /* Phase 327 — Sticky Top Data Rows (Row Freeze) */
        #sp-327-rowfreeze-btn { /* inherits from btn btn-sm btn-outline-secondary */ }
        #sp-327-rowfreeze-btn.active {
            background-color: var(--bs-warning, #ffc107);
            border-color: var(--bs-warning, #ffc107);
            color: #000;
        }
        .sp-327-frozen-row {
            position: -webkit-sticky;
            position: sticky;
            z-index: 10;
        }
        .sp-327-frozen-row > td,
        .sp-327-frozen-row > th {
            background: var(--bs-body-bg, #fff);
        }
        .sp-327-frozen-row td {
            box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15);
        }
        /* Phase 328 — Saved Sort Presets */
        #sp-328-sort-presets-panel {
            display: none;
            position: absolute;
            z-index: 1050;
            min-width: 280px;
            max-width: 380px;
            background: var(--bs-body-bg, #fff);
            border: 1px solid var(--bs-border-color, #dee2e6);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,.15);
            padding: 10px;
            font-size: 13px;
        }
        #sp-328-sort-presets-panel.sp-328-open { display: block; }
        #sp-328-sort-presets-panel .sp-328-save-row {
            display: flex;
            gap: 4px;
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--bs-border-color, #dee2e6);
        }
        #sp-328-sort-presets-panel .sp-328-save-row input {
            flex: 1;
            font-size: 12px;
        }
        #sp-328-preset-list { max-height: 220px; overflow-y: auto; }
        .sp-328-preset-item {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 3px 0;
            border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.08));
        }
        .sp-328-preset-item:last-child { border-bottom: none; }
        .sp-328-preset-name {
            flex: 1;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
        }
        .sp-328-preset-summary {
            font-size: 11px;
            color: var(--bs-secondary, #6c757d);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 120px;
        }
        .sp-328-empty-msg {
            color: var(--bs-secondary, #6c757d);
            font-style: italic;
            font-size: 12px;
            text-align: center;
            padding: 6px 0;
        }
        /* Phase 329 — Column Value Inspector Panel */
        #sp-329-inspector {
            display: none;
            position: fixed;
            z-index: 1055;
            min-width: 220px;
            max-width: 320px;
            background: var(--bs-body-bg, #fff);
            border: 1px solid var(--bs-border-color, #dee2e6);
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,.18);
            padding: 10px 12px;
            font-size: 12px;
            pointer-events: auto;
        }
        #sp-329-inspector.sp-329-open { display: block; }
        #sp-329-inspector .sp-329-header {
            font-weight: 700;
            font-size: 13px;
            margin-bottom: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #sp-329-inspector .sp-329-close-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--bs-secondary, #6c757d);
            font-size: 14px;
            line-height: 1;
            padding: 0 2px;
        }
        #sp-329-inspector .sp-329-row {
            display: flex;
            gap: 6px;
            margin: 2px 0;
            align-items: baseline;
        }
        #sp-329-inspector .sp-329-label {
            color: var(--bs-secondary, #6c757d);
            white-space: nowrap;
            min-width: 70px;
        }
        #sp-329-inspector .sp-329-value {
            font-weight: 500;
            word-break: break-word;
            flex: 1;
        }
        #sp-329-inspector .sp-329-divider {
            border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.08));
            margin: 5px 0;
        }
        #sp-329-inspector .sp-329-type-badge {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 3px;
            background: var(--bs-light, #f8f9fa);
            border: 1px solid var(--bs-border-color, #dee2e6);
            font-size: 10px;
            color: var(--bs-secondary, #6c757d);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .sp-329-bool-yes { color: var(--bs-success, #198754); font-weight: 700; }
        .sp-329-bool-no  { color: var(--bs-danger, #dc3545);  font-weight: 700; }
        .sp-329-inspect-btn {
            display: none;
            position: absolute;
            top: 2px;
            right: 2px;
            width: 16px;
            height: 16px;
            background: var(--bs-primary, #0d6efd);
            color: #fff;
            border: none;
            border-radius: 50%;
            font-size: 9px;
            line-height: 16px;
            text-align: center;
            cursor: pointer;
            padding: 0;
            z-index: 2;
            opacity: 0.7;
        }
        .sp-329-inspect-btn:hover { opacity: 1; }
        #sp-list-tbody td:hover .sp-329-inspect-btn { display: block; }
        #sp-list-tbody td { position: relative; }
        /* Phase 330 — Row Comparison Anchor Mode */
        #sp-330-anchor-mode-btn.sp-330-mode-on {
            background-color: var(--bs-warning, #ffc107);
            border-color: var(--bs-warning, #ffc107);
            color: #000;
        }
        .sp-330-anchor-active #sp-list-tbody { cursor: crosshair; }
        .sp-330-anchor-row {
            outline: 2px solid var(--bs-warning, #ffc107);
            outline-offset: -2px;
        }
        .sp-330-anchor-row > td {
            background-color: rgba(255, 193, 7, 0.12) !important;
        }
        .sp-330-match-cell {
            background-color: rgba(25, 135, 84, 0.10) !important;
            border-left: 3px solid rgba(25, 135, 84, 0.45) !important;
        }
        .sp-330-diff-cell {
            background-color: rgba(253, 126, 20, 0.10) !important;
            border-left: 3px solid rgba(253, 126, 20, 0.45) !important;
        }
        .sp-330-legend {
            display: none;
            align-items: center;
            gap: 10px;
            font-size: 11px;
            padding: 2px 8px;
            background: var(--bs-light, #f8f9fa);
            border: 1px solid var(--bs-border-color, #dee2e6);
            border-radius: 4px;
            margin-left: 6px;
        }
        .sp-330-legend.sp-330-legend-on { display: inline-flex; }
        .sp-330-legend-match,
        .sp-330-legend-diff {
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }
        .sp-330-legend-swatch {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            border: 1px solid rgba(0,0,0,.2);
        }
        .sp-330-match-swatch { background: rgba(25, 135, 84, 0.40); }
        .sp-330-diff-swatch  { background: rgba(253, 126, 20, 0.40); }
        /* Phase 331 — Multi-Level Undo Stack */
        #sp-331-undo-stack-btn { position: relative; }
        .sp-331-undo-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: var(--bs-danger, #dc3545);
            color: #fff;
            border-radius: 8px;
            font-size: 9px;
            font-weight: 700;
            padding: 1px 4px;
            min-width: 14px;
            text-align: center;
            line-height: 12px;
            display: none;
            pointer-events: none;
        }
        .sp-331-undo-badge.sp-331-badge-visible { display: block; }
        /* Phase 333 — Row Timestamp Trail */
        .sp-333-tstamp-row .sp-333-tstamp-td {
            font-size: 10px;
            color: var(--bs-secondary, #6c757d);
            padding: 0 8px 3px 8px !important;
            border-top: none !important;
            background: transparent !important;
            white-space: nowrap;
            font-style: italic;
            letter-spacing: 0.01em;
        }
        .sp-333-tstamp-row { line-height: 1.2; }
        #sp-333-tstamp-btn.sp-333-trail-on {
            background-color: var(--bs-teal, #20c997);
            border-color: var(--bs-teal, #20c997);
            color: #fff;
        }
        /* Phase 334 — Data Quality Rules Panel */
        .sp-334-violation {
            outline: 2px solid var(--bs-danger, #dc3545) !important;
            outline-offset: -1px;
            background-color: rgba(220, 53, 69, 0.08) !important;
        }
        #sp-334-dq-panel .sp-334-violation-row {
            font-size: 12px;
            border-left: 3px solid var(--bs-danger, #dc3545);
            padding: 4px 8px;
            margin-bottom: 4px;
            background: rgba(220, 53, 69, 0.05);
            border-radius: 0 4px 4px 0;
        }
        #sp-334-dq-panel .sp-334-rule-row {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 0;
            border-bottom: 1px solid var(--bs-border-color, #dee2e6);
        }
        #sp-334-dq-btn.sp-334-active {
            background-color: var(--bs-warning, #ffc107);
            border-color: var(--bs-warning, #ffc107);
            color: #000;
        }
        /* Phase 332 — Cell Smart Link Detection */
        .sp-332-phone-btn,
        .sp-332-email-btn {
            display: inline-flex;
            align-items: center;
            margin-left: 4px;
            font-size: 11px;
            text-decoration: none;
            opacity: 0.65;
            transition: opacity 0.15s;
            vertical-align: middle;
        }
        .sp-332-phone-btn:hover,
        .sp-332-email-btn:hover { opacity: 1; }
        #sp-332-smartlink-btn.sp-332-on {
            background-color: var(--bs-info, #0dcaf0);
            border-color: var(--bs-info, #0dcaf0);
            color: #000;
        }
        /* Phase 750 — Script Editor Web Part */
        .sp-750-hidden { display:none !important; }
        .sp-750-editpage-btn { background:#0072c6; color:#fff; border:none; border-radius:3px; padding:4px 10px; font-size:12px; cursor:pointer; margin-left:4px; }
        .sp-750-editpage-btn:hover { background:#106ebe; }
        .sp-750-stopediting-btn { background:#107c10; color:#fff; border:none; border-radius:3px; padding:4px 10px; font-size:12px; cursor:pointer; margin-left:4px; }
        .sp-750-editing-badge { display:inline-flex; align-items:center; background:#fff4ce; color:#8a6914; border:1px solid #f1c40f; border-radius:3px; padding:2px 8px; font-size:11px; font-weight:600; margin-left:4px; }
        #sp-750-webpart-zone { border:2px dashed #0072c6; border-radius:4px; padding:10px 12px; margin:8px 0; background:#f8f9ff; }
        .sp-750-zone-label { font-size:10px; font-weight:600; color:#0072c6; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
        .sp-750-wp-widget { background:#fff; border:1px solid #c8c6c4; border-radius:3px; margin-bottom:6px; overflow:hidden; }
        .sp-750-wp-titlebar { display:flex; align-items:center; background:#f4f4f4; padding:4px 8px; font-size:12px; font-weight:600; border-bottom:1px solid #e1e1e1; gap:4px; position:relative; }
        .sp-750-wp-title { flex:1; }
        .sp-750-wp-gear-btn { background:none; border:none; cursor:pointer; font-size:11px; color:#666; padding:2px 4px; border-radius:2px; }
        .sp-750-wp-gear-btn:hover { background:#e1e1e1; }
        .sp-750-wp-gear-menu { position:absolute; z-index:9060; background:#fff; border:1px solid #c8c6c4; border-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,.15); min-width:100px; right:0; top:100%; }
        .sp-750-wp-gear-item { padding:6px 12px; font-size:12px; cursor:pointer; color:#333; }
        .sp-750-wp-gear-item:hover { background:#f4f4f4; }
        .sp-750-wp-preview { padding:6px 8px; font-size:11px; color:#8a8886; max-height:60px; overflow:hidden; }
        .sp-750-wp-preview code { font-family:Consolas,monospace; white-space:pre-wrap; word-break:break-all; }
        .sp-750-add-wp-btn { background:none; border:1px dashed #0072c6; color:#0072c6; border-radius:3px; padding:4px 10px; font-size:12px; cursor:pointer; width:100%; margin-top:4px; }
        .sp-750-add-wp-btn:hover { background:#e8f3fc; }
        #sp-750-wp-picker { position:fixed; z-index:9070; background:#fff; border:1px solid #c8c6c4; border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,.18); min-width:240px; }
        .sp-750-picker-header { font-weight:700; font-size:12px; padding:8px 12px; border-bottom:1px solid #e1e1e1; color:#333; }
        .sp-750-picker-item { display:flex; flex-direction:column; gap:2px; padding:8px 12px; cursor:pointer; }
        .sp-750-picker-item:hover { background:#f4f4f4; }
        .sp-750-picker-item > div { display:flex; align-items:center; gap:6px; }
        .sp-750-picker-icon { font-size:16px; }
        .sp-750-picker-name { font-weight:600; font-size:12px; color:#0072c6; }
        .sp-750-picker-desc { font-size:11px; color:#666; }
        #sp-750-sewp-dialog { position:fixed; top:0; left:0; right:0; bottom:0; z-index:9080; display:flex; align-items:center; justify-content:center; }
        .sp-750-dialog-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.4); }
        .sp-750-dialog-box { position:relative; background:#fff; border-radius:4px; box-shadow:0 8px 32px rgba(0,0,0,.3); width:480px; max-width:95vw; display:flex; flex-direction:column; }
        .sp-750-dialog-header { font-weight:700; font-size:14px; padding:12px 16px; border-bottom:1px solid #e1e1e1; color:#333; }
        .sp-750-dialog-body { padding:12px 16px; flex:1; }
        .sp-750-label { font-size:12px; font-weight:600; color:#333; display:block; margin-bottom:3px; }
        .sp-750-input { width:100%; box-sizing:border-box; border:1px solid #c8c6c4; border-radius:2px; padding:5px 8px; font-size:12px; }
        .sp-750-textarea { width:100%; box-sizing:border-box; border:1px solid #c8c6c4; border-radius:2px; padding:5px 8px; font-size:11px; font-family:Consolas,monospace; resize:vertical; min-height:150px; }
        .sp-750-dialog-footer { display:flex; justify-content:flex-end; gap:6px; padding:10px 16px; border-top:1px solid #e1e1e1; }
        .sp-750-btn-primary { background:#0072c6; color:#fff; border:none; border-radius:2px; padding:5px 14px; font-size:12px; cursor:pointer; }
        .sp-750-btn-primary:hover { background:#106ebe; }
        .sp-750-btn-secondary { background:#fff; color:#333; border:1px solid #c8c6c4; border-radius:2px; padding:5px 14px; font-size:12px; cursor:pointer; }
        .sp-750-btn-secondary:hover { background:#f4f4f4; }

/* Phase B4: Document properties info panel */
.sp-doc-info-panel { position: absolute; background: #fff; border: 1px solid #c8c6c4; box-shadow: 2px 2px 6px rgba(0,0,0,.18); padding: 8px 12px; font-size: 12px; z-index: 1200; min-width: 210px; max-width: 290px; pointer-events: auto; border-radius: 2px; }
.sp-doc-info-hidden { display: none !important; }
.sp-doc-info-name { font-weight: 600; margin-bottom: 5px; color: #333; font-size: 13px; word-break: break-word; }
.sp-doc-info-row { display: flex; gap: 6px; margin: 2px 0; color: #666; }
.sp-doc-info-row span:first-child { min-width: 75px; color: #8a8886; }

/* H6: Custom Action ECB items */
.sp-ecb-custom-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
}
.sp-ecb-custom-action:hover {
    background: #f4f4f4;
}
/* H6: Custom Ribbon group */
.sp-ribbon-custom-group {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 0 8px;
    border-left: 1px solid #c8c6c4;
}
.sp-ribbon-custom-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #c8c6c4;
    border-radius: 2px;
    cursor: pointer;
    font-size: 12px;
    color: #333;
}
.sp-ribbon-custom-btn:hover {
    background: #f4f4f4 !important;
    border-color: #8a8886 !important;
}
.sp-ribbon-custom-btn-icon {
    width: 16px;
    height: 16px;
}

/* ===== Gantt View (D4) ===== */
#spGanttLayout {
    font-size: 13px;
    background: #fff;
    min-height: 200px;
    user-select: none;
}

/* Toolbar: zoom buttons */
.sp-gantt-zoom-btn {
    padding: 3px 10px;
    border: 1px solid #c8c6c4;
    border-radius: 3px;
    background: #fff;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    font-weight: 500;
}
.sp-gantt-zoom-btn:hover { background: #f4f4f4; }
.sp-gantt-zoom-active {
    background: #0072c6 !important;
    color: #fff !important;
    border-color: #0072c6 !important;
}

/* Left panel — task table */
.sp-gantt-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
.sp-gantt-table th {
    background: #f4f4f4;
    border-bottom: 2px solid #c8c6c4;
    border-right: 1px solid #e1e1e1;
    padding: 6px 8px;
    font-weight: 600;
    color: #333;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-gantt-th-title { width: auto; }
.sp-gantt-td-title, .sp-gantt-th-title {
    padding-left: 10px;
}
.sp-gantt-td-date, .sp-gantt-th-date {
    text-align: center;
    font-size: 11px;
    color: #666;
    padding: 0 4px;
}
.sp-gantt-td-pct, .sp-gantt-th-pct {
    text-align: center;
    font-size: 10px;
    color: #666;
    padding: 2px 4px;
}
.sp-gantt-row td {
    height: 36px;
    border-bottom: 1px solid #f4f4f4;
    border-right: 1px solid #e1e1e1;
    padding: 4px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.sp-gantt-row a {
    color: #0072c6;
    text-decoration: none;
    font-size: 12px;
}
.sp-gantt-row a:hover { text-decoration: underline; }
.sp-gantt-row-hover td { background: #f0f9ff !important; }
.sp-gantt-row-overdue td:first-child { border-left: 3px solid #c00; }

/* Mini percent complete bar in left table */
.sp-gantt-pct-mini {
    display: inline-block;
    width: 28px;
    height: 6px;
    background: #e1e1e1;
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 2px;
}
.sp-gantt-pct-mini-fill {
    height: 100%;
    background: #0072c6;
    border-radius: 3px;
}
.sp-gantt-pct-text { font-size: 10px; color: #666; }

/* Primary header (month/year row) */
.sp-gantt-primary-hdr {
    min-height: 28px;
    line-height: 28px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    border-right: 1px solid #c8c6c4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #faf9f8;
    flex-shrink: 0;
}

/* Secondary headers: day/week/month cells */
.sp-gantt-day-hdr, .sp-gantt-week-hdr, .sp-gantt-month-hdr {
    min-height: 28px;
    line-height: 28px;
    font-size: 10px;
    font-weight: 500;
    color: #666;
    border-right: 1px solid #e1e1e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.sp-gantt-week-hdr {
    padding: 0 4px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
}
.sp-gantt-month-hdr {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    background: #faf9f8;
}
.sp-gantt-day-hdr.sp-gantt-weekend {
    background: #f9f0f0;
    color: #a19f9d;
}

/* Grid lines */
.sp-gantt-grid-line {
    position: absolute;
    top: 0;
    width: 1px;
    background: #e1e1e1;
    pointer-events: none;
}
.sp-gantt-weekend-bg {
    position: absolute;
    top: 0;
    background: rgba(0,0,0,0.02);
    pointer-events: none;
}

/* Gantt bar */
.sp-gantt-bar {
    background: #0072c6;
    border-radius: 3px;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    transition: filter 0.1s;
    z-index: 2;
}
.sp-gantt-bar-overdue {
    background: #d13438;
}
.sp-gantt-bar-hover {
    filter: brightness(1.15);
    outline: 2px solid #004578;
    z-index: 3;
}
.sp-gantt-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px 0 0 3px;
    pointer-events: none;
}
.sp-gantt-bar-label {
    position: absolute;
    left: 6px;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    font-weight: 500;
}

/* Tooltip */
.sp-gantt-tooltip {
    display: none;
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid #c8c6c4;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 10px 14px;
    font-size: 12px;
    color: #333;
    max-width: 300px;
    pointer-events: none;
    line-height: 1.5;
}
.sp-gantt-tt-row { margin-top: 2px; }
.sp-gantt-tt-label { color: #666; font-weight: 600; }
.sp-gantt-tt-overdue {
    margin-top: 4px;
    color: #c00;
    font-weight: 600;
    font-size: 11px;
}

/* Dependency lines (SVG) */
.sp-gantt-dep-line {
    fill: none;
    stroke: #8a8886;
    stroke-width: 1.5;
    stroke-dasharray: 4 2;
}
.sp-gantt-dep-arrow {
    fill: #8a8886;
}

/* ── Tasks List Specialized View (Phase W) ─────────────────────────────────── */
.sp-tasks-table th, .sp-tasks-table td { vertical-align: middle; }

/* Priority indicators */
.sp-priority-high  { color: #c00; font-weight: 600; }
.sp-priority-low   { color: #888; }
.sp-priority-icon  { display: inline-block; width: 14px; margin-right: 3px; font-weight: 700; }

/* Status indicators */
.sp-status-completed  { color: #107c10; }
.sp-status-inprogress { color: #0072c6; }

/* Overdue row highlight */
.sp-task-overdue { background-color: #fff4ce !important; }
.sp-overdue-date { color: #c00; font-weight: 600; }
.sp-overdue-badge { margin-left: 4px; font-size: 12px; }

/* Completed task title strikethrough */
.sp-task-title-completed { text-decoration: line-through; color: #888; }

/* % Complete progress bar */
.sp-pct-bar {
    position: relative;
    background: #e0e0e0;
    border-radius: 2px;
    height: 14px;
    min-width: 60px;
    max-width: 100px;
    overflow: hidden;
}
.sp-pct-bar-fill {
    background: #0072c6;
    height: 100%;
    transition: width 0.2s;
}
.sp-pct-label {
    position: absolute;
    top: 0; left: 0; right: 0;
    text-align: center;
    font-size: 10px;
    line-height: 14px;
    color: #fff;
    mix-blend-mode: difference;
}

/* ── Contacts List Specialized View (Phase W) ─────────────────────────────── */
.sp-contact-email { color: #0072c6; text-decoration: none; }
.sp-contact-email:hover { text-decoration: underline; }
.sp-contact-phone { color: #444; text-decoration: none; }
.sp-contact-phone:hover { color: #0072c6; text-decoration: underline; }

/* ── PLAN-914: List View Threshold Warning ───────────────────────────────── */
.sp-threshold-warning {
    background: #fff4ce;
    border: 1px solid #f0c900;
    border-left: 4px solid #f0c900;
    color: #444;
    padding: 8px 12px;
    margin: 6px 0 8px 0;
    font-size: 13px;
    border-radius: 2px;
}
.sp-threshold-warning .fa {
    color: #c0a000;
    margin-right: 6px;
}

/* ── PLAN-917: SignalR Real-Time Updates ─────────────────────────────────── */
.sp-realtime-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0.7;
    transition: background-color 0.4s ease;
}
.sp-realtime-connected    { background: #107c10; }  /* green */
.sp-realtime-reconnecting { background: #d47600; }  /* amber */
.sp-realtime-disconnected { background: #ccc; }     /* grey */

.sp-realtime-toast {
    display: none;
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff4ce;
    border: 1px solid #f0c900;
    border-left: 4px solid #107c10;
    color: #333;
    padding: 8px 20px;
    font-size: 13px;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 9999;
    white-space: nowrap;
    pointer-events: none;
}
.sp-realtime-toast-visible {
    display: block !important;
}