@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

      /* ── Design System Tokens ─────────────────────────────────────── */
      :root {
        --tdb-card-dark: #17243A; /* dark raised row/card surface — Accounts + Forecast rows (Fix 1/2). Matched to nav-bar navy (.nexus-premium-header #17243A) so cards read lighter/bluer than the #121722 main bg and stand out across all tabs. */
        --tdb-header-navy: #20457b; /* Column-header navy — matches reference image, theme-independent; white labels stay legible */
        --bg:          #f5f7fa;
        --surface:     #ffffff;
        --surface-2:   #f8fafc;
        --surface-3:   #f1f5f9;
        --border:      #e8edf2;
        --border-soft: #eef1f5;
        --tdb-gridline: rgba(0,0,0,0.12);
        --text-primary:   #0f172a;
        --text-secondary: #475569;
        --text-muted:     #64748b;
        --text-faint:     #94a3b8;
        --blue:    #2563eb;
        --blue-lt: #eff6ff;
        --blue-bd: #bfdbfe;
        --green:   #16a34a;
        --amber:   #d97706;
        --purple:  #7c3aed;
        --red:     #dc2626;
        --shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
        --shadow-sm: 0 1px 4px rgba(15,23,42,0.07), 0 0 0 1px rgba(15,23,42,0.04);
        --shadow-md: 0 4px 16px rgba(15,23,42,0.10), 0 1px 4px rgba(15,23,42,0.06);
        --shadow-lg: 0 8px 32px rgba(15,23,42,0.13), 0 2px 8px rgba(15,23,42,0.07);
        --radius-sm: 5px;
        --radius:    7px;
        --radius-lg: 10px;
        --font-mono: 'JetBrains Mono', 'Fira Mono', 'Cascadia Code', ui-monospace, monospace;
      }

      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

      body {
        background: var(--bg);
        font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
        color: var(--text-primary);
        -webkit-font-smoothing: antialiased;
      }

      /* ── Scrollbar polish ─────────────────────────────────────────── */
      ::-webkit-scrollbar { width: 7px; height: 7px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: #d1d9e0; border-radius: 4px; }
      ::-webkit-scrollbar-thumb:hover { background: #b0bac4; }

      /* ── Input / select base ──────────────────────────────────────── */
      input, select, textarea {
        font-family: inherit;
        transition: border-color 0.15s, box-shadow 0.15s;
      }
      input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--blue) !important;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
      }

      /* ── Button base ──────────────────────────────────────────────── */
      button { font-family: inherit; transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s; }

      /* ── Account table ────────────────────────────────────────────── */
      .acct-table td, .acct-table th { border-right: none; }
      .acct-table td:last-child, .acct-table th:last-child { border-right: none; }
      .acct-table th { position: relative; }
      .acct-table tbody tr { transition: background 0.1s; }
      .acct-table tbody tr:hover { /* cleared — handled by 7C per-td rule */ }
      /* ── Excel-style gridlines — shared across the Accounts, Forecast, and Heat Map tables.
         border-right + border-bottom on every cell: border-collapse merges adjacent edges
         into clean single ~1px near-black lines. Header gets a top edge; the left outer edge
         comes from the table itself so the Accounts colored action-accent on the first cell is
         preserved. The -sep variant is for the separate-border Heat Map grid (sticky columns),
         where the first cell carries the left edge to avoid doubled internal lines. */
      .tdb-grid { border-left: 1px solid var(--tdb-gridline) !important; }
      .tdb-grid th, .tdb-grid td { border-right: 1px solid var(--tdb-gridline) !important; border-bottom: 1px solid var(--tdb-gridline) !important; }
      .tdb-grid thead th { border-top: 1px solid var(--tdb-gridline) !important; }
      .tdb-grid-sep th, .tdb-grid-sep td { border-right: 1px solid var(--tdb-gridline) !important; border-bottom: 1px solid var(--tdb-gridline) !important; }
      .tdb-grid-sep th:first-child, .tdb-grid-sep td:first-child { border-left: 1px solid var(--tdb-gridline) !important; }
      .tdb-grid-sep thead th { border-top: 1px solid var(--tdb-gridline) !important; }

      /* ── Col resize handle ────────────────────────────────────────── */
      .col-resize-handle { position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;z-index:10;border-radius:2px; }
      .col-resize-handle:hover, .col-resize-handle.dragging { background: rgba(37,99,235,0.30); }

      /* ── Card / surface ───────────────────────────────────────────── */
      .ds-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
      }

      /* ── KPI tile ─────────────────────────────────────────────────── */
      .kpi-tile {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px;
        display: flex; flex-direction: column; gap: 5px;
        box-shadow: var(--shadow-xs);
        transition: box-shadow 0.15s;
      }
      .kpi-tile:hover { box-shadow: var(--shadow-sm); }
      .kpi-tile .kpi-label {
        font-size: 9px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.9px; color: var(--text-muted); white-space: nowrap;
      }
      .kpi-tile .kpi-value {
        font-size: 18px; font-weight: 800; font-family: var(--font-mono);
        letter-spacing: -0.5px; line-height: 1.1;
      }

      /* ── Forecast table thead ─────────────────────────────────────── */
      .forecast-thead th {
        padding: 9px 12px;
        text-align: left;
        font-size: 10px; font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase; letter-spacing: 0.8px;
        background: var(--surface-3);
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
      }
      .forecast-thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
      .forecast-thead th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

      /* ── Forecast deal row ────────────────────────────────────────── */
      .forecast-row { transition: background 0.1s; }
      .forecast-row:hover { background: #f0f5ff !important; }

      /* ── Phase 7: Compact Next Steps display for Forecast deal rows ──
         Reduces only vertical padding + line-height. Never clips: no
         width/height cap and no overflow, so full Next Steps text wraps
         exactly as in Auto, just with tighter spacing. */
      .fc-deal-table.fc-compact td { padding-top: 4px !important; padding-bottom: 4px !important; line-height: 1.35 !important; }
      .fc-deal-table.fc-compact .fc-select { padding-top: 2px; padding-bottom: 2px; }

      /* ── Select in forecast cells ─────────────────────────────────── */
      .fc-select {
        width: 100%; font-size: 11px; font-family: inherit;
        padding: 4px 6px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text-primary);
        cursor: pointer; outline: none;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%2394a3b8' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 6px center;
        padding-right: 20px;
        transition: border-color 0.15s;
      }
      .fc-select:hover { border-color: #b0bac4; }

      /* ── Quarter section header ───────────────────────────────────── */
      .q-section-btn {
        width: 100%; display: flex; align-items: center; gap: 12px;
        padding: 11px 16px; border: none; cursor: pointer; text-align: left;
        transition: background 0.12s;
      }
      .q-section-btn:hover { background: #f0f5ff !important; }

      /* ── ToDo card ────────────────────────────────────────────────── */
      .todo-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-left: 3px solid var(--amber);
        border-radius: var(--radius);
        padding: 14px 16px;
        display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
        box-shadow: var(--shadow-xs);
        transition: box-shadow 0.15s, border-left-color 0.15s;
      }
      .todo-card:hover { box-shadow: var(--shadow-sm); border-left-color: #b45309; }

      /* ── Setup section card ───────────────────────────────────────── */
      .setup-section {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 22px 26px;
        margin-bottom: 20px;
        box-shadow: var(--shadow-xs);
      }
      .setup-head {
        font-size: 11px; font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase; letter-spacing: 0.9px;
        margin-bottom: 16px;
      }

      /* ── Action badge ─────────────────────────────────────────────── */
      .action-badge {
        display: inline-flex; align-items: center;
        font-size: 11px; font-weight: 600;
        border-radius: 4px; padding: 2px 7px;
        letter-spacing: 0.2px;
      }

      /* ── WorkspaceBar button base ─────────────────────────────────── */
      .ws-btn {
        font-size: 11px; font-weight: 600;
        padding: 4px 11px; border-radius: var(--radius-sm);
        cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
        border: 1px solid var(--border); white-space: nowrap;
        background: var(--surface); color: var(--text-secondary);
        box-shadow: var(--shadow-xs);
        transition: border-color 0.12s, color 0.12s, box-shadow 0.12s, background 0.12s;
      }
      .ws-btn:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow-sm); }
      .ws-btn.dirty { background: var(--blue-lt); border-color: var(--blue-bd); color: var(--blue); }

      /* ── Popup / modal overlay ────────────────────────────────────── */
      .popup-overlay { background: rgba(15,23,42,0.40); }
      .popup-surface {
        background: var(--surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border-soft);
      }

      /* ══════════════════════════════════════════════════════════════
         Phase 7B — Layout & Workspace Polish
         CSS-only. No JSX changes. No render tree modifications.
         ══════════════════════════════════════════════════════════════ */

      /* ── 1. Global body + scrollbar ──────────────────────────────── */
      body { background: #f2f4f7; }
      ::-webkit-scrollbar { width: 6px; height: 6px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: #c8d0d9; border-radius: 4px; }
      ::-webkit-scrollbar-thumb:hover { background: #a6b0bc; }

      /* ── 2. Focus ring — more refined across all inputs ──────────── */
      input:focus, select:focus, textarea:focus {
        box-shadow: 0 0 0 2.5px rgba(37,99,235,0.13) !important;
      }

      /* ── 3. Nav header ────────────────────────────────────────────── */
      /* ── NexusOne Premium Header ─────────────────────────────── */
      /* ── Phase 9 Premium Header ──────────────────────────────────── */
      /* ── Phase M: Premium NexusOne header shell ────────────────────
         One integrated dark navy panel. Four-stop diagonal base, two
         soft inner radial highlights, and a wider third halo on the
         right side that anchors the file-panel area without being a
         separate notch/dip element. */
      /* ════════════════════════════════════════════════════════════════
         ACTIVE HEADER — do not create duplicate header implementations.
         ════════════════════════════════════════════════════════════════ */
      .nexus-premium-header {
        position: relative;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: visible;
        background:
          radial-gradient(circle at 6% 16%, rgba(0,125,255,0.34), transparent 32%),
          radial-gradient(ellipse 650px 280px at 92% 56%, rgba(0,205,255,0.28), transparent 70%),
          radial-gradient(circle at 88% 88%, rgba(0,210,255,0.20), transparent 38%),
          linear-gradient(135deg, #061a3d 0%, #061734 28%, #050f29 62%, #020817 100%);
        box-shadow:
          0 24px 56px rgba(0,28,80,0.42),
          0 1px 0 rgba(0,180,255,0.10),
          inset 0 1px 0 rgba(120,180,255,0.10);
        z-index: 20;
        flex-shrink: 0;
      }
      /* Bottom faded cyan glow — brighter, slightly thicker bloom */
      .nexus-premium-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          rgba(0, 115, 255, 0.00) 0%,
          rgba(0, 160, 255, 0.55) 10%,
          rgba(80, 230, 255, 1.00) 50%,
          rgba(0, 160, 255, 0.55) 90%,
          rgba(0, 115, 255, 0.00) 100%
        );
        box-shadow:
          0 0 14px rgba(0, 215, 255, 0.52),
          0 0 30px rgba(0, 140, 255, 0.26),
          0 0 1px rgba(190, 240, 255, 0.70);
        z-index: 6;
        pointer-events: none;
      }
      .nexus-header-inner {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 28px 14px 32px;
        box-sizing: border-box;
        overflow: visible;
      }
      .nexus-brand-block {
        flex: 0 0 auto;
        z-index: 6;
      }
      .nexus-brand-mark {
        display: flex;
        align-items: center;
        gap: 11px;
      }
      .nexus-logo-icon {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #1686ff 0%, #0057ff 52%, #00c2ff 100%);
        color: white;
        font-size: 21px;
        font-weight: 900;
        letter-spacing: -0.06em;
        box-shadow:
          0 0 0 1px rgba(120,215,255,0.55),
          0 9px 22px rgba(0,112,255,0.48),
          inset 0 1px 0 rgba(255,255,255,0.32),
          inset 0 -8px 18px rgba(0,40,120,0.30);
        flex-shrink: 0;
      }
      .nexus-logo-icon::before {
        /* faint inner top-left specular highlight to give the chip dimension */
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 10px;
        background: radial-gradient(circle at 28% 22%, rgba(255,255,255,0.22), transparent 60%);
        pointer-events: none;
      }
      .nexus-logo-text {
        display: flex;
        align-items: baseline;
        font-size: 33px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: -0.025em;
        padding-right: 6px;
      }
      .nexus-logo-main {
        color: #ffffff;
        text-shadow: 0 8px 24px rgba(0,0,0,0.28);
      }
      .nexus-logo-accent {
        margin-left: 7px;
        padding-right: 4px;
        background: linear-gradient(135deg, #a8d4ff 0%, #4a9bff 40%, #1677ff 75%, #00d4ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: none;
      }
      .nexus-brand-tagline {
        margin-top: 4px;
        margin-left: 51px;
        color: rgba(190,215,255,0.72);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
      }
      /* ── HEADER LAYOUT FIX — four independent regions ─────────────────
         [brand][core-nav: Home][AE tabs — the ONLY flexible region,
         horizontally scrollable][core-nav: To Do · Forecast · Heat Map]
         [utility region: Save · Settings · Sign Out pinned far right].
         Core nav and utilities are flex-shrink:0 and never wrap, overlap,
         or move; the AE strip scrolls inside its own lane no matter how
         many AE tabs exist (5 or 25). */
      /* All nav tabs (Home · AE tabs · To Do · Forecast · Heat Map) live in
         ONE auto-fill grid. Equal-width tracks mean wrapping always produces
         clean, even rows (e.g. 2 rows x 4 columns) — never ragged, never
         overlapping, and NO horizontal scrolling. Track count adapts to the
         space left between the brand and the pinned utility region. */
      .nexus-tab-grid {
        flex: 1 1 auto;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(132px, 158px));
        gap: 8px 10px;
        justify-content: start;
        align-items: center;
        z-index: 6;
      }
      .nexus-tab-grid .nexus-tab { min-width: 0; }
      .nexus-util-region {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        margin-left: auto;
        white-space: nowrap;
        z-index: 12;
      }
      .nexus-tab {
        appearance: none;
        -webkit-appearance: none;
        flex: 0 0 auto;
        white-space: nowrap;
        width: auto !important;
        height: 44px;
        min-width: 130px;
        padding: 7px 16px;
        border-radius: 12px;
        border: 1px solid rgba(125,170,255,0.22);
        background:
          linear-gradient(180deg, rgba(14,32,68,0.78) 0%, rgba(6,18,42,0.78) 100%);
        color: rgba(235,242,255,0.96);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 800;
        font-family: inherit;
        line-height: 1;
        cursor: pointer;
        outline: none;
        box-shadow:
          0 8px 16px rgba(0,0,0,0.22),
          inset 0 1px 0 rgba(255,255,255,0.07);
        transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
      }
      .nexus-tab svg { width: 15px; height: 15px; }
      .nexus-tab:hover {
        background:
          linear-gradient(180deg, rgba(26,52,108,0.88) 0%, rgba(12,28,62,0.88) 100%);
        border-color: rgba(125,200,255,0.50);
        transform: translateY(-1px);
      }
      .nexus-tab.active {
        background: linear-gradient(135deg, #1e92ff 0%, #0066ff 52%, #00c8ff 100%);
        border-color: rgba(140,230,255,0.95);
        box-shadow:
          0 0 0 1px rgba(0,221,255,0.55),
          0 0 14px rgba(0,180,255,0.40),
          0 10px 22px rgba(0,112,255,0.45),
          inset 0 1px 0 rgba(255,255,255,0.34);
      }
      /* (Removed: legacy tabs-count-7/8 grid hacks — the AE strip now
         scrolls horizontally at any tab count, so per-count layouts are
         obsolete. The tabs-count-N class is no longer emitted.) */
      /* ── Settings surface (redesign) ────────────────────────────────────
         Interaction states only. The base look is set inline in SetupView so
         the tokens stay in one place; this adds the things inline styles
         can't express: hover, focus-visible, and placeholder colour. */
      .tdb-set-navitem:not(.active):hover {
        background: #f4f7fc !important;
        color: #0f172a !important;
      }
      .tdb-set-subitem:not(.active):hover { color: #0f172a !important; background: #f4f7fc !important; }
      .tdb-set-close:hover { color: #0f172a !important; background: #f1f5f9 !important; }
      /* Inputs inside settings: quiet by default, clear blue ring on focus. */
      .tdb-set-shell input:focus,
      .tdb-set-shell select:focus,
      .tdb-set-shell textarea:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
      }
      .tdb-set-shell input::placeholder,
      .tdb-set-shell textarea::placeholder { color: #a8b4c5; }
      /* Secondary buttons pick up the accent on hover instead of shifting fill. */
      .tdb-set-shell button[style*="border: 1px solid rgb(219, 227, 238)"]:hover {
        border-color: #2563eb !important;
        color: #2563eb !important;
      }
      @media (max-width: 760px) {
        .tdb-set-shell { flex-direction: column !important; }
        .tdb-set-nav {
          flex-basis: 100% !important;
          flex-direction: row !important;
          flex-wrap: wrap !important;
          gap: 6px !important;
        }
        .tdb-set-nav .tdb-set-navitem { width: auto !important; flex: 1 1 auto; }
        .tdb-set-content { flex-basis: 100% !important; width: 100%; }
      }
      .nexus-settings-button {
        flex: 0 0 auto;
        order: 1;
        align-self: center;
        width: 60px;
        height: 68px;
        padding: 0;
        border-radius: 12px;
        border: 1px solid rgba(140,195,255,0.32);
        border-top-color: rgba(140,230,255,0.65);
        background:
          linear-gradient(180deg, rgba(11,28,64,0.92) 0%, rgba(6,18,42,0.92) 100%);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 18px 38px rgba(0,0,0,0.34),
          0 0 28px rgba(0,170,255,0.18),
          0 -1px 0 rgba(140,230,255,0.30),
          inset 0 1px 0 rgba(180,230,255,0.22),
          inset 0 0 0 1px rgba(0,180,255,0.08);
        cursor: pointer;
        font-family: inherit;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        transition: background 0.15s, border-color 0.15s, transform 0.12s;
        z-index: 11;
      }
      .nexus-settings-button svg { width: 22px; height: 22px; }
      .nexus-settings-button:hover {
        background: linear-gradient(180deg, rgba(22,52,108,0.95) 0%, rgba(12,28,62,0.95) 100%);
        border-color: rgba(0,210,255,0.60);
        transform: translateY(-1px);
      }
      .nexus-settings-button.active {
        background: linear-gradient(135deg, #1686ff 0%, #0057ff 52%, #00b7ff 100%);
        border-color: rgba(120,215,255,0.9);
        box-shadow:
          0 0 0 1px rgba(0,221,255,0.36),
          0 14px 30px rgba(0,112,255,0.48),
          inset 0 1px 0 rgba(255,255,255,0.30);
      }

      /* ── File panel — flex item, horizontal grid for compactness.
         Part of the ACTIVE HEADER block above. ──────────────────────── */
      .nexus-file-panel {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: auto auto auto;
        column-gap: 6px;
        row-gap: 4px;
        padding: 8px 10px;
        border-radius: 12px;
        background:
          linear-gradient(180deg, rgba(11,28,64,0.92) 0%, rgba(6,18,42,0.92) 100%);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(140,195,255,0.32);
        border-top-color: rgba(140,230,255,0.65);
        box-shadow:
          0 18px 38px rgba(0,0,0,0.34),
          0 0 28px rgba(0,170,255,0.18),
          0 -1px 0 rgba(140,230,255,0.30),
          inset 0 1px 0 rgba(180,230,255,0.22),
          inset 0 0 0 1px rgba(0,180,255,0.08);
        z-index: 12;
      }
      .nexus-file-action {
        width: auto;
        height: 30px;
        margin: 0;
        border-radius: 7px;
        border: 1px solid rgba(170,205,255,0.32);
        background: rgba(255,255,255,0.04);
        color: white;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 800;
        font-family: inherit;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        transition: background 0.13s, border-color 0.13s;
      }
      .nexus-file-action:hover {
        background: rgba(120,180,255,0.10);
        border-color: rgba(0,210,255,0.65);
      }
      .nexus-file-action svg { width: 13px; height: 13px; flex-shrink: 0; }
      .nexus-last-saved {
        grid-column: 1 / -1;
        margin: 0;
        padding: 4px 2px 0;
        border-top: 1px solid rgba(140,195,255,0.18);
        color: rgba(200,222,255,0.78);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        font-family: 'JetBrains Mono','Fira Mono',ui-monospace,monospace;
        text-align: center;
        line-height: 1.3;
      }
      /* ── Save-status bar: always-visible second header row under the
         Save / Settings / Sign Out cluster. Shows where data currently
         lives — browser local storage vs the exported .TDB file. ──────── */
      .nexus-save-status-bar {
        position: relative;
        z-index: 6;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        flex-wrap: wrap;
        padding: 6px 28px 8px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.02em;
        border-top: 1px solid rgba(140,195,255,0.16);
        color: rgba(205,225,255,0.82);
      }
      .nexus-save-status-bar .ssb-lead {
        color: rgba(150,185,235,0.85);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        font-size: 9.5px;
      }
      .nexus-save-status-bar .ssb-k { color: rgba(165,200,245,0.95); font-weight: 800; }
      .nexus-save-status-bar .ssb-dot { color: rgba(120,160,210,0.55); }
      .nexus-save-status-bar .ssb-warn { color: #fbbf24; font-weight: 800; }
      @media (max-width: 1023px) { .nexus-save-status-bar { display: none; } }
      /* ── Phase E: Notes full-screen overlay (portal) ──────────────── */
      .notes-modal-overlay,
      .notes-page-overlay,
      .nexus-notes-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw;
        height: 100vh;
        z-index: 9999 !important;
        background:
          radial-gradient(circle at 18% 10%, rgba(0, 119, 255, 0.10), transparent 30%),
          linear-gradient(180deg, rgba(15,23,42,0.45) 0%, rgba(15,23,42,0.45) 100%);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .notes-modal,
      .notes-page,
      .nexus-notes-panel {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        border-radius: 0;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      /* ── Phase D: Action color picker (single square + 3x3 popover) ─ */
      .action-color-picker {
        position: relative;
        display: inline-flex;
        align-items: center;
      }
      .action-color-current {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        border: 2px solid rgba(255,255,255,0.95);
        box-shadow:
          0 0 0 1px rgba(15, 40, 80, 0.18),
          0 4px 9px rgba(10, 30, 70, 0.12),
          inset 0 1px 0 rgba(255,255,255,0.28);
        cursor: pointer;
        padding: 0;
        transition: transform 0.12s, box-shadow 0.12s;
      }
      .action-color-current:hover {
        transform: translateY(-1px);
        box-shadow:
          0 0 0 2px rgba(0, 101, 255, 0.35),
          0 6px 12px rgba(10, 30, 70, 0.16),
          inset 0 1px 0 rgba(255,255,255,0.28);
      }
      .action-color-menu {
        position: absolute;
        top: 32px;
        left: 0;
        z-index: 100;
        display: grid;
        grid-template-columns: repeat(3, 24px);
        gap: 8px;
        padding: 10px;
        border-radius: 12px;
        background: rgba(255,255,255,0.98);
        border: 1px solid rgba(24, 55, 100, 0.16);
        box-shadow:
          0 14px 30px rgba(4, 20, 50, 0.18),
          inset 0 1px 0 rgba(255,255,255,0.95);
      }
      .action-color-option {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        border: 2px solid rgba(255,255,255,0.95);
        box-shadow:
          0 0 0 1px rgba(15, 40, 80, 0.16),
          inset 0 1px 0 rgba(255,255,255,0.24);
        cursor: pointer;
        padding: 0;
        transition: transform 0.1s;
      }
      .action-color-option.selected {
        outline: 2px solid rgba(0, 101, 255, 0.85);
        outline-offset: 2px;
      }
      .action-color-option:hover {
        transform: scale(1.08);
      }

      /* ── Phase F Workspace Shell — full-width, slim internal padding ─
         This is the SINGLE vertical scroll container for the Accounts
         view on laptop/desktop. Previously the shell was overflow-y:
         visible and the account table had its own internal flex:1 +
         overflow-y:auto wrapper, which trapped the table in a small
         half-page scroll box and showed only 2-3 rows at a time on
         shorter laptop screens. Now the shell scrolls naturally: the
         KPI cards live at the top and scroll away, the table thead
         (position:sticky, top:0 already set elsewhere) sticks to the
         top of the shell after the KPIs scroll past, and the user
         sees as many account rows as their viewport allows. */
      .nexus-workspace-shell {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: none;
        margin: 0;
        box-sizing: border-box;
        background:
          radial-gradient(circle at 88% 8%, rgba(0, 153, 255, 0.045), transparent 34%),
          linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        border: none;
        border-radius: 0;
        box-shadow:
          0 -10px 26px rgba(0, 28, 80, 0.10);
        padding: 24px 24px 32px;
        flex: 1;
        min-height: 0;
        overflow-x: auto;
        overflow-y: auto;
      }

      /* ── Phase F Outer wrappers — kill any gutter ────────────────── */
      html, body, #root {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
      }
      body { overflow-x: hidden; }
      .app, .app-shell, .nexus-app, .nexus-main, .nexus-dashboard {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
      }
      #root > div { width: 100%; max-width: none; }
      main { width: 100%; max-width: none; margin: 0; padding: 0; }
      /* Defensive: any direct child of the workspace shell shouldn't be capped */
      .nexus-workspace-shell > div { width: 100%; max-width: none; }

      /* ── Phase B Title Row ───────────────────────────────────────── */
      .nexus-page-title {
        display: flex;
        align-items: baseline;
        gap: 18px;
        margin: 0 0 28px;
        color: #07122f;
        font-size: 32px;
        font-weight: 850;
        letter-spacing: -0.035em;
        line-height: 1.1;
      }
      .nexus-account-count {
        color: #5d6f99;
        font-size: 19px;
        font-weight: 650;
        letter-spacing: normal;
      }

      /* ── Phase B Content Width ───────────────────────────────────── */
      .nexus-content-inner,
      .nexus-dashboard-content,
      .nexus-main-content,
      .nexus-table-section {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
      }

      /* ── Phase B KPI Grid (overrides inline styles) ──────────────── */
      .nexus-kpi-grid,
      div[style*="gridTemplateColumns:repeat(7"],
      div[style*="gridTemplateColumns: repeat(7"] {
        width: 100% !important;
        max-width: none !important;
        grid-template-columns: repeat(7, minmax(145px, 1fr)) !important;
        gap: 18px !important;
        margin-bottom: 32px !important;
      }

      /* KPI cards — children of the 7-column grid */
      div[style*="gridTemplateColumns:repeat(7"] > div,
      div[style*="gridTemplateColumns: repeat(7"] > div {
        height: 96px !important;
        border-radius: 12px !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, #f8fbff 100%) !important;
        border: 1px solid rgba(15, 40, 80, 0.11) !important;
        box-shadow:
          0 9px 20px rgba(4, 20, 50, 0.13),
          inset 0 1px 0 rgba(255,255,255,0.95) !important;
        padding: 18px 20px !important;
        position: relative !important;
        overflow: hidden !important;
      }
      /* The accent strip at the top of each KPI card (inline div using --kpi-accent) */
      div[style*="gridTemplateColumns:repeat(7"] > div > div:first-child,
      div[style*="gridTemplateColumns: repeat(7"] > div > div:first-child {
        height: 4px !important;
      }
      /* KPI label (second child div) */
      div[style*="gridTemplateColumns:repeat(7"] > div > div:nth-child(2),
      div[style*="gridTemplateColumns: repeat(7"] > div > div:nth-child(2) {
        font-size: 13px !important;
        font-weight: 850 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.055em !important;
        color: #49618f !important;
        margin-bottom: 10px !important;
      }
      /* KPI value (third child div) */
      div[style*="gridTemplateColumns:repeat(7"] > div > div:nth-child(3),
      div[style*="gridTemplateColumns: repeat(7"] > div > div:nth-child(3) {
        font-size: 29px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
      }

      /* ── Phase B Search Bar ──────────────────────────────────────── */
      /* The search wrapper is the inline-styled flex row directly above the table.
         Target by the placeholder on its descendant input. */
      /* Scoped to the desktop shell (main). These match by placeholder
         text, and the mobile companion's account search — which lives
         OUTSIDE <main> at the root — was getting caught: its content
         wrapper was forced to 240px wide, which crushed the search bar
         and every account card under it. Desktop is unchanged; the
         mobile app never renders inside <main>. */
      main div:has(> input[placeholder^="Search accounts"]) {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        height: 40px !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,0.94) !important;
        border: 1px solid rgba(24, 55, 100, 0.14) !important;
        box-shadow:
          0 4px 11px rgba(10, 30, 70, 0.07),
          inset 0 1px 0 rgba(255,255,255,0.95) !important;
        padding: 0 12px !important;
        margin-bottom: 11px !important;
        gap: 7px !important;
        box-sizing: border-box !important;
      }
      main input[placeholder^="Search accounts"] {
        border: none !important;
        outline: none !important;
        background: transparent !important;
        width: 100% !important;
        height: 26px !important;
        font-size: 12px !important;
        color: #07122f !important;
        padding: 0 !important;
        box-shadow: none !important;
      }
      main input[placeholder^="Search accounts"]::placeholder {
        color: #7183a6 !important;
      }
      main input[placeholder^="Search accounts"]:focus {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
      }

      /* ── Phase B Table Wrapper & Width ───────────────────────────── */
      .nexus-table-wrapper,
      .account-table-wrapper,
      .table-container {
        width: 100%;
        max-width: none;
        overflow-x: auto;
        border-top: 1px solid rgba(20, 50, 90, 0.08);
      }
      .nexus-account-table,
      .account-table,
      table.acct-table {
        width: 100% !important;
        min-width: 1080px !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
      }

      /* ── Phase B Table Header Row ────────────────────────────────── */
      .nexus-table-header,
      .account-table thead tr,
      table.acct-table thead tr {
        height: 54px !important;
        background: linear-gradient(180deg, #f7faff 0%, #eef3fb 100%) !important;
        border-bottom: 1px solid rgba(20, 50, 90, 0.12) !important;
      }
      .nexus-table-header-cell,
      .account-table th,
      table.acct-table thead th {
        color: #36517f !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        letter-spacing: 0.045em !important;
        text-transform: uppercase !important;
        padding: 0 18px !important;
        white-space: nowrap !important;
      }

      /* ── Phase B Table Rows ──────────────────────────────────────── */
      table.acct-table tbody tr {
        border-bottom: 1px solid rgba(20, 50, 90, 0.075) !important;
      }
      table.acct-table tbody tr:hover {
        background: #f8fbff;
      }
      table.acct-table tbody tr > td {
        color: #07122f;
      }
      /* Account-name first column gets a slightly stronger contrast */
      table.acct-table tbody tr > td:first-child > div:first-child {
        color: #07122f !important;
      }

      /* ── Phase 8 Layout Fix ──────────────────────────────────────── */

      /* Kill the old WorkspaceBar visual strip — it uses display:none inline
         but belt-and-suspenders to prevent any ghost spacing */
      .nexus-premium-header ~ div[style*="borderBottom"],
      .nexus-premium-header ~ div[style*="border-bottom"],
      .nexus-premium-header + div[style*="minHeight: 42"],
      .nexus-premium-header + div[style*="min-height: 42"] {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
      }

      /* Ensure the root column flex container doesn't add extra gap */
      div[style*="height: 100vh"] > header.nexus-premium-header {
        flex-shrink: 0;
      }

      /* Main content below header — no top offset */
      div[style*="height: 100vh"] > main {
        margin-top: 0 !important;
        padding-top: 0 !important;
      }
      /* ── Phase 9 Tab inline width overrides ─────────────────────── */
      /* Ensure inline style widths on tabs are respected by force */
      /* Tighter height, better vertical rhythm */
      .ws-btn {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1px;
        height: 26px;
        padding: 0 10px;
        border-radius: 5px;
      }

      /* Workspace name text: slightly stronger */
      .ws-name-text {
        font-size: 12px;
        font-weight: 700;
        color: #1e293b;
        letter-spacing: -0.1px;
      }

      /* ── 5. KPI tiles (AE tab) ────────────────────────────────────── */
      .kpi-tile {
        padding: 11px 13px;
        gap: 4px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(15,23,42,0.06);
      }
      .kpi-tile:hover { box-shadow: var(--shadow-sm); }
      .kpi-tile .kpi-label {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.9px;
        color: #8898aa;
      }
      .kpi-tile .kpi-value {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.7px;
        line-height: 1.1;
      }

      /* ── 6. AE account table ──────────────────────────────────────── */
      /* Header: stronger hierarchy, cleaner separation */
      .acct-table thead tr {
        border-bottom: 2px solid #dce3ec !important;
      }
      .acct-table thead th {
        padding: 8px 10px !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        color: #7b8fa6 !important;
        letter-spacing: 0.85px !important;
        text-transform: uppercase !important;
        background: #f4f6f9 !important;
        white-space: nowrap;
      }
      /* Body rows: comfortable row height, subtle full-row separator */
      .acct-table tbody tr {
        border-bottom: 1px solid #e3e8ef !important;
      }
      /* PHASE 1B — zebra striping removed. The previous
         `tr:nth-child(even) > td { background: #fafbfc; }` rule painted
         over the per-row action tint set on the <tr> inline style,
         because cell backgrounds win against the row's transparent
         default cell layer. Only the first matching action row looked
         tinted because the zebra rule clobbered every even row. Hover
         used to clear the cell background → that's why colors "showed
         on hover". Row separation now comes from the slightly stronger
         border-bottom above plus the per-cell border in Hp. */
      /* PHASE 1B — The previous `tr:hover > td { background: rgba(0,0,0,0) !important; }`
         rule existed only to override the now-removed zebra stripe on
         hover. Removing it ensures hover never strips the action tint
         from a cell. Hover row separation is handled by the outline
         rule (where present) and the per-row border-bottom. */

      /* Cell padding: uniform, slightly airier */
      .acct-table td { padding: 7px 8px; }

      /* ── 7. AE table search bar ───────────────────────────────────── */
      /* Add a bit more vertical padding for breathing room */
      .acct-search-bar {
        padding: 7px 14px;
        background: #fff;
        border-bottom: 1px solid #e4eaf1;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* ── 8. Forecast view ─────────────────────────────────────────── */
      /* Quarter section container: more distinct card feel */
      .q-section-btn {
        padding: 10px 16px;
        gap: 10px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -0.1px;
        background: #fafbfc;
        border-bottom: 1px solid #eef1f5;
      }
      .q-section-btn:hover { background: #eef4ff !important; }

      /* Forecast deal rows: consistent vertical rhythm */
      .forecast-row td { vertical-align: middle; }
      .forecast-row:hover { background: #eef4ff !important; }

      /* Forecast table header */
      .forecast-thead th {
        padding: 8px 10px;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0.85px;
        color: #7b8fa6;
        background: #f4f6f9;
        border-bottom: 2px solid #dce3ec;
      }

      /* Forecast select — slightly tighter */
      .fc-select {
        padding: 3px 5px;
        padding-right: 18px;
        font-size: 11px;
        border-radius: 4px;
      }

      /* ── 9. To-Do cards ───────────────────────────────────────────── */
      .todo-card {
        padding: 12px 16px;
        border-left-width: 3px;
        border-radius: 7px;
        gap: 10px;
      }
      .todo-card:hover { box-shadow: var(--shadow-sm); }

      /* ── 10. Setup view ───────────────────────────────────────────── */
      .setup-section {
        padding: 20px 24px;
        margin-bottom: 16px;
        border-radius: 10px;
      }
      .setup-head {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.85px;
        margin-bottom: 14px;
        color: #7b8fa6;
        text-transform: uppercase;
        padding-bottom: 10px;
        border-bottom: 1px solid #f0f3f7;
      }

      /* ── 11. Action badge ─────────────────────────────────────────── */
      .action-badge {
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 4px;
      }

      /* ── 12. ds-card ──────────────────────────────────────────────── */
      .ds-card {
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(15,23,42,0.06);
      }
      .ds-card:hover {
        box-shadow: var(--shadow-sm);
        transition: box-shadow 0.15s;
      }

      /* ── 13. Notes workspace modal ────────────────────────────────── */
      /* Tighter modal header */
      .ws-modal-header {
        padding: 14px 24px;
        border-bottom: 1px solid #e4eaf1;
      }
      /* History entry separator */
      .ws-history-entry {
        padding-bottom: 14px;
        margin-bottom: 14px;
      }
      /* Right panel (Contacts) uniform width hint */
      .ws-contacts-panel {
        width: 300px;
        min-width: 260px;
        max-width: 340px;
      }

      /* ── 14. Import / paste area ──────────────────────────────────── */
      /* Tighter action bar */
      .import-action-bar {
        padding: 10px 14px;
        border-radius: 7px;
        border: 1px solid #e4eaf1;
        background: #f8fafc;
        gap: 10px;
      }

      /* ── 15. Popup / modal overlay ────────────────────────────────── */
      .popup-overlay { background: rgba(15,23,42,0.42); }
      .popup-surface {
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        border: 1px solid #e4eaf1;
      }

      /* ── 16. Revenue popover ──────────────────────────────────────── */
      /* Tighter padding + cleaner shadow */
      .rev-popover {
        border-radius: 8px;
        box-shadow: 0 8px 28px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.07);
        padding: 12px 14px;
        min-width: 210px;
      }

      /* ── 17. Add-account inline row ───────────────────────────────── */
      .add-acct-row {
        background: #eef4ff;
        border-bottom: 1px solid #c7d8f5 !important;
      }

      /* ── 18. Inline selects (AE table cells) ──────────────────────── */
      /* Remove default appearances for consistent look */
      .acct-table td select {
        font-size: 11.5px;
        border-radius: 4px;
        border-color: #e4eaf1;
        background: transparent;
        padding: 2px 4px;
        min-width: 0;
        color: var(--text-secondary);
      }
      .acct-table td select:hover { border-color: #b5c3d4; }

      /* ── 19. Forecast view section wrapper ────────────────────────── */
      /* Slight shadow under each quarter section card */
      .forecast-q-section {
        border: 1px solid #e4eaf1 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        margin-bottom: 8px !important;
        box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
      }

      /* ══════════════════════════════════════════════════════════════
         Phase 7C — Premium SaaS Polish
         CSS-only. No JSX changes. No render tree modifications.
         ══════════════════════════════════════════════════════════════ */

      /* ── Typography & Font Import ─────────────────────────────────── */

      /* ── Design System Upgrades ───────────────────────────────────── */
      :root {
        /* Refined palette — cooler, more premium */
        --bg:          #f0f2f5;
        --surface:     #ffffff;
        --surface-2:   #f7f9fb;
        --surface-3:   #eef1f6;
        --border:      #dde3ec;
        --border-soft: #e8edf5;

        /* Deeper nav for premium feel */
        --nav-bg:      #0a1628;
        --nav-border:  #111f38;
        --nav-text:    #c8d5e8;
        --nav-active:  #ffffff;

        /* Accent — slightly richer blue */
        --blue:        #1d4ed8;
        --blue-lt:     #eff6ff;
        --blue-bd:     #bfdbfe;

        /* Status colors — refined */
        --green:       #15803d;
        --green-lt:    #f0fdf4;
        --amber:       #b45309;
        --amber-lt:    #fffbeb;
        --red:         #b91c1c;
        --purple:      #6d28d9;

        /* Elevation system */
        --shadow-xs: 0 1px 2px rgba(10,22,40,0.04);
        --shadow-sm: 0 1px 4px rgba(10,22,40,0.06), 0 0 0 1px rgba(10,22,40,0.03);
        --shadow-md: 0 3px 12px rgba(10,22,40,0.09), 0 1px 3px rgba(10,22,40,0.05);
        --shadow-lg: 0 8px 28px rgba(10,22,40,0.12), 0 2px 8px rgba(10,22,40,0.06);
        --shadow-xl: 0 20px 48px rgba(10,22,40,0.16), 0 4px 12px rgba(10,22,40,0.08);

        /* Border radii */
        --radius-xs: 4px;
        --radius-sm: 5px;
        --radius:    8px;
        --radius-lg: 11px;
        --radius-xl: 14px;

        /* Typography */
        --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
        --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
      }

      /* ── 1. Body & Global ─────────────────────────────────────────── */
      body {
        background: var(--bg) !important;
        font-family: var(--font-sans) !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      /* ── 2. Scrollbars — more refined ────────────────────────────── */
      ::-webkit-scrollbar { width: 5px; height: 5px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: #c5cdd8; border-radius: 10px; }
      ::-webkit-scrollbar-thumb:hover { background: #a0aab7; }

      /* ── 3. Navigation Header — premium dark ─────────────────────── */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) {
        background: linear-gradient(180deg, #0c1a2e 0%, #08111f 100%) !important;
        border-bottom: 1px solid #0f1e35 !important;
        box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 2px 8px rgba(0,0,0,0.25) !important;
      }

      /* Nav text refinements */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) span,
      header:not(.nexus-premium-header):not(.tdb-mobile-header) div {
        -webkit-font-smoothing: antialiased;
      }

      /* ── 4. WorkspaceBar — more refined strip ────────────────────── */
      /* The WorkspaceBar div rendered inline */
      div[style*="borderBottom: '1px solid #dce3ec'"],
      div[style*="border-bottom: 1px solid #dce3ec"] {
        background: #fafbfd !important;
        border-bottom: 1px solid #e2e8f2 !important;
        box-shadow: 0 1px 3px rgba(10,22,40,0.04) !important;
      }

      .ws-btn {
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05px;
        height: 26px;
        padding: 0 10px;
        border-radius: var(--radius-sm);
        border-color: var(--border) !important;
        color: #4b5a6e;
        transition: all 0.13s ease;
      }
      .ws-btn:hover {
        border-color: var(--blue) !important;
        color: var(--blue) !important;
        background: #f0f5ff !important;
        box-shadow: var(--shadow-xs) !important;
      }
      .ws-btn.dirty {
        background: var(--blue-lt) !important;
        border-color: #93c5fd !important;
        color: var(--blue) !important;
      }

      /* ── 5. KPI Tiles — elevated card feel ───────────────────────── */
      .kpi-tile {
        background: var(--surface) !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: var(--radius) !important;
        padding: 12px 14px !important;
        gap: 5px !important;
        box-shadow: var(--shadow-xs) !important;
        transition: box-shadow 0.18s ease, transform 0.18s ease !important;
        position: relative;
        overflow: hidden;
      }
      .kpi-tile::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--blue), #60a5fa);
        opacity: 0;
        transition: opacity 0.18s;
      }
      .kpi-tile:hover {
        box-shadow: var(--shadow-md) !important;
        transform: translateY(-1px);
      }
      .kpi-tile:hover::before {
        opacity: 1;
      }
      .kpi-tile .kpi-label {
        font-family: var(--font-sans) !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        color: #8898aa !important;
        text-transform: uppercase !important;
      }
      .kpi-tile .kpi-value {
        font-family: var(--font-mono) !important;
        font-size: 19px !important;
        font-weight: 600 !important;
        letter-spacing: -0.8px !important;
        color: #0a1628 !important;
        line-height: 1.1 !important;
      }

      /* ── 6. Account Table — premium data grid ────────────────────── */
      .acct-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
      }
      .acct-table thead tr {
        border-bottom: 1px solid #d9e1ec !important;
      }
      .acct-table thead th {
        padding: 7px 9px !important;
        font-family: var(--font-sans) !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        color: #8595a8 !important;
        letter-spacing: 0.9px !important;
        text-transform: uppercase !important;
        background: #f3f6fa !important;
        white-space: nowrap !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
      }
      .acct-table tbody tr {
        border-bottom: 1px solid #e3e8ef !important;
        transition: background 0.1s ease !important;
      }
      /* PHASE 1B — zebra striping removed. See note above the first
         zebra rule. The cell-level background here was overriding the
         action tint on every even row. */
      .acct-table tbody tr:hover > td {
        /* Safe hover: NEVER use filter here — filter on a table row creates
           a new stacking/containing block which breaks position:fixed children
           (the Notes modal overlay is position:fixed and rendered as a DOM
           child of the table td; filter would trap it in the row's context).
           Use a box-shadow inset or outline instead, which are safe. */
        outline: 1px solid rgba(148,163,184,0.25);
        outline-offset: -1px;
      }
      /* Hover background matches the Forecast table; !important overrides the
         inline per-cell zebra background so the whole row lifts on hover. */
      .acct-table tbody tr:hover > td { background: #f0f5ff !important; }
      .acct-table td {
        padding: 9px 12px !important;
        font-family: var(--font-sans) !important;
        font-size: 12px !important;
        color: #1e2d3d !important;
        vertical-align: middle !important;
      }

      /* Selects inside table */
      .acct-table td select {
        font-family: var(--font-sans) !important;
        font-size: 11px !important;
        border-radius: var(--radius-xs) !important;
        border-color: #e0e8f0 !important;
        background: transparent !important;
        color: #3d4e60 !important;
        padding: 1px 4px !important;
        transition: border-color 0.12s !important;
      }
      .acct-table td select:hover {
        border-color: #a0b4cc !important;
      }

      /* ── 7. Action Badges — crisper ──────────────────────────────── */
      .action-badge {
        font-family: var(--font-sans) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
        padding: 2px 8px !important;
        border-radius: var(--radius-xs) !important;
      }

      /* ── 8. Search Bar ────────────────────────────────────────────── */
      .acct-search-bar {
        padding: 7px 14px !important;
        background: #f7f9fb !important;
        border-bottom: 1px solid #e2e8f0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
      }

      /* ── 9. Forecast View — polished table ───────────────────────── */
      .forecast-q-section {
        border: 1px solid #dde5f0 !important;
        border-radius: var(--radius) !important;
        overflow: hidden !important;
        margin-bottom: 10px !important;
        box-shadow: var(--shadow-xs) !important;
        transition: box-shadow 0.15s ease !important;
      }
      .forecast-q-section:hover {
        box-shadow: var(--shadow-sm) !important;
      }

      .forecast-thead th {
        padding: 7px 10px !important;
        font-family: var(--font-sans) !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 0.9px !important;
        color: #8595a8 !important;
        background: #f3f6fa !important;
        border-bottom: 1px solid #d9e1ec !important;
        text-transform: uppercase !important;
      }

      .forecast-row td {
        vertical-align: middle !important;
        padding: 5px 8px !important;
        font-family: var(--font-sans) !important;
        font-size: 12px !important;
      }
      .forecast-row:hover {
        background: #eef4ff !important;
      }

      /* Quarter section button */
      .q-section-btn {
        padding: 9px 14px !important;
        gap: 10px !important;
        background: #f7f9fb !important;
        border-bottom: 1px solid #e8edf5 !important;
        font-family: var(--font-sans) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: -0.1px !important;
        transition: background 0.12s ease !important;
      }
      .q-section-btn:hover {
        background: #eef4ff !important;
      }

      /* Forecast select */
      .fc-select {
        font-family: var(--font-sans) !important;
        font-size: 11px !important;
        border-radius: var(--radius-xs) !important;
        border-color: #dde5f0 !important;
        padding: 3px 5px !important;
        padding-right: 18px !important;
        transition: border-color 0.12s ease !important;
        background-color: var(--surface) !important;
      }
      .fc-select:hover {
        border-color: #a0b4cc !important;
      }

      /* ── 10. ToDo Cards — refined left-accent style ──────────────── */
      .todo-card {
        background: var(--surface) !important;
        border: 1px solid var(--border-soft) !important;
        border-left: 3px solid var(--amber) !important;
        border-radius: var(--radius) !important;
        padding: 13px 16px !important;
        gap: 12px !important;
        box-shadow: var(--shadow-xs) !important;
        transition: box-shadow 0.15s ease, border-left-color 0.15s ease !important;
      }
      .todo-card:hover {
        box-shadow: var(--shadow-md) !important;
        border-left-color: #92400e !important;
      }

      /* ── 11. Setup Sections ───────────────────────────────────────── */
      .setup-section {
        background: var(--surface) !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: var(--radius-lg) !important;
        padding: 20px 24px !important;
        margin-bottom: 16px !important;
        box-shadow: var(--shadow-xs) !important;
      }
      .setup-head {
        font-family: var(--font-sans) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        color: #8595a8 !important;
        text-transform: uppercase !important;
        padding-bottom: 12px !important;
        margin-bottom: 14px !important;
        border-bottom: 1px solid #edf1f7 !important;
      }

      /* ── 12. DS Card ─────────────────────────────────────────────── */
      .ds-card {
        background: var(--surface) !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--shadow-xs) !important;
        transition: box-shadow 0.18s ease !important;
      }
      .ds-card:hover {
        box-shadow: var(--shadow-sm) !important;
      }

      /* ── 13. Popup / Modal Overlay ──────────────────────────────── */
      .popup-overlay {
        background: rgba(8,17,31,0.48) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
      }
      .popup-surface {
        background: var(--surface) !important;
        border: 1px solid #d8e1ee !important;
        border-radius: var(--radius-xl) !important;
        box-shadow: var(--shadow-xl) !important;
      }

      /* ── 14. Notes Workspace Modal ──────────────────────────────── */
      .ws-modal-header {
        padding: 14px 22px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        background: #fafbfd !important;
      }
      .ws-history-entry {
        padding-bottom: 14px !important;
        margin-bottom: 14px !important;
      }
      .ws-contacts-panel {
        width: 300px !important;
        min-width: 260px !important;
        max-width: 340px !important;
        border-left: 1px solid #e2e8f0 !important;
        background: #fafbfd !important;
      }

      /* ── 15. Revenue Popover ─────────────────────────────────────── */
      .rev-popover {
        border-radius: var(--radius) !important;
        box-shadow: var(--shadow-lg) !important;
        border: 1px solid #d8e1ee !important;
        padding: 12px 14px !important;
        min-width: 210px !important;
        background: var(--surface) !important;
      }

      /* ── 16. Add Account Inline Row ─────────────────────────────── */
      .add-acct-row {
        background: #eef4ff !important;
        border-bottom: 1px solid #c7d8f5 !important;
      }

      /* ── 17. Import Action Bar ──────────────────────────────────── */
      .import-action-bar {
        padding: 10px 14px !important;
        border-radius: var(--radius) !important;
        border: 1px solid #e0e8f2 !important;
        background: var(--surface-2) !important;
        gap: 10px !important;
      }

      /* ── 18. Input / Focus Refinements ──────────────────────────── */
      input, select, textarea {
        font-family: var(--font-sans) !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
      }
      input:focus, select:focus, textarea:focus {
        outline: none !important;
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
      }

      /* ── 19. Global Font Override ────────────────────────────────── */
      /* Apply IBM Plex Sans to all rendered React content */
      #root, #root * {
        font-family: var(--font-sans);
      }
      #root code, #root pre, #root [style*="monospace"], #root [style*="mono"] {
        font-family: var(--font-mono) !important;
      }

      /* ── 20. Col Resize Handle ──────────────────────────────────── */
      .col-resize-handle:hover,
      .col-resize-handle.dragging {
        background: rgba(29,78,216,0.25) !important;
        border-radius: 2px !important;
      }

      /* ── 21. Workspace name text ─────────────────────────────────── */
      .ws-name-text {
        font-family: var(--font-sans) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #0f1e35 !important;
        letter-spacing: -0.15px !important;
      }

      /* ── 22. Premium micro-transition for all interactive elements ─ */
      button, a, [role="button"] {
        transition: background 0.13s ease, color 0.13s ease,
                    border-color 0.13s ease, box-shadow 0.13s ease,
                    opacity 0.13s ease !important;
      }

      /* ── 23. Table empty state & loading placeholders ────────────── */
      [style*="color: #94a3b8"][style*="flexDirection: column"] {
        font-family: var(--font-sans) !important;
        color: #8595a8 !important;
      }

    

      /* ── Notes rich-text editor + rendered note HTML ─────────────── */
      /* Empty contenteditable placeholder. */
      .tdb-note-editor:empty:before {
        content: attr(data-placeholder);
        color: #94a3b8;
        pointer-events: none;
      }
      .tdb-note-editor:focus { outline: none; }
      .tdb-note-editor ul, .tdb-note-editor ol,
      .tdb-note-html ul, .tdb-note-html ol {
        margin: 4px 0; padding-left: 22px;
      }
      .tdb-note-editor li, .tdb-note-html li { margin: 2px 0; }
      .tdb-note-editor p, .tdb-note-html p { margin: 6px 0; }
      .tdb-note-editor p:first-child, .tdb-note-html p:first-child { margin-top: 0; }
      .tdb-note-editor h1, .tdb-note-editor h2, .tdb-note-editor h3, .tdb-note-editor h4,
      .tdb-note-html h1, .tdb-note-html h2, .tdb-note-html h3, .tdb-note-html h4 {
        font-size: 13px; font-weight: 700; margin: 10px 0 4px; color: #0f172a;
      }
      .tdb-note-html { white-space: normal; }

      /* ── Notes workspace history left-alignment ──────────────────── */
      /* The Notes modal is position:fixed and rendered inside a td with  */
      /* textAlign:center. Even though fixed positioning removes it from  */
      /* normal flow, text-align IS inherited down the DOM tree.          */
      /* Force left-align on all text inside the modal.                  */
      /* The modal inner panel has a unique combination: position:absolute */
      /* inset:0 with a white background inside the fixed overlay.        */

      /* Target: the notes modal's full-page overlay and all descendants  */
      /* The outer wrapper of Op is in a td — reset inheritance here.     */
      .acct-table td > div > div[style*="position: fixed"],
      .acct-table td > div > div[style*="position:fixed"] {
        text-align: left;
      }
      .acct-table td > div > div[style*="position: fixed"] *,
      .acct-table td > div > div[style*="position:fixed"] * {
        text-align: left;
      }


      /* ══════════════════════════════════════════════════════════════
         Phase 7D — NexusOne Product Identity & Visual Facelift
         CSS-only. Minimal JS touch (logo injection only).
         Brand: Navy #0b1a38 · Blue #1a56db · Electric #2563eb · Sky #38bdf8
         ══════════════════════════════════════════════════════════════ */

      /* ── 7D Design Token Overrides ───────────────────────────────── */
      :root {
        /* NexusOne brand palette */
        --nx-navy:       #0b1a38;
        --nx-navy-mid:   #0e2247;
        --nx-navy-soft:  #162d5e;
        --nx-blue:       #1a56db;
        --nx-blue-mid:   #2563eb;
        --nx-electric:   #3b82f6;
        --nx-sky:        #38bdf8;
        --nx-sky-soft:   #bae6fd;

        /* Override 7C design tokens with NexusOne brand */
        --blue:        #1a56db;
        --blue-lt:     #eff6ff;
        --blue-bd:     #bfdbfe;

        /* App chrome */
        --nav-bg:      var(--nx-navy);
        --nav-border:  var(--nx-navy-mid);

        /* Refined background */
        --bg:          #eef1f6;
        --surface:     #ffffff;
        --border:      #dae1ec;
        --border-soft: #e4eaf4;
      }

      /* ── 7D Header / Nav — NexusOne navy premium bar ─────────────── */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) {
        background: linear-gradient(135deg, var(--nx-navy) 0%, #0d1f45 60%, #0f2248 100%) !important;
        border-bottom: 1px solid rgba(56,189,248,0.12) !important;
        box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 3px 12px rgba(0,0,0,0.3) !important;
        height: 52px !important;
      }

      /* Header divider lines — blue-tinted */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) > div[style*="width:1"] {
        background: rgba(56,189,248,0.15) !important;
      }

      /* Nav buttons — AE names */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) nav button {
        letter-spacing: 0.15px !important;
        font-size: 12.5px !important;
      }

      /* Active nav indicator — use NexusOne sky blue */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) nav button[style*="color: #f1f5f9"],
      header:not(.nexus-premium-header):not(.tdb-mobile-header) nav button[style*='color:"#f1f5f9"'] {
        color: #f0f7ff !important;
      }

      /* Settings gear button */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) > button:last-child {
        border-radius: 7px !important;
      }

      /* ── 7D Global body ───────────────────────────────────────────── */
      body {
        background: var(--bg) !important;
      }

      /* ── 7D WorkspaceBar ──────────────────────────────────────────── */
      /* Slightly taller, NexusOne branded accent on save */
      .ws-btn.dirty {
        background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
        border-color: #93c5fd !important;
        color: var(--nx-blue-mid) !important;
        font-weight: 700 !important;
      }

      /* ── 7D KPI tiles — brand-accented top border ─────────────────── */
      .kpi-tile {
        border-radius: 9px !important;
        border-color: #dae3f2 !important;
        box-shadow: 0 1px 4px rgba(11,26,56,0.07), 0 0 0 1px rgba(11,26,56,0.03) !important;
      }
      .kpi-tile::before {
        background: linear-gradient(90deg, var(--nx-blue), var(--nx-sky)) !important;
      }
      .kpi-tile:hover {
        box-shadow: 0 4px 16px rgba(26,86,219,0.12), 0 1px 4px rgba(11,26,56,0.06) !important;
        border-color: #bfdbfe !important;
      }
      .kpi-tile .kpi-value {
        color: var(--nx-navy) !important;
      }
      .kpi-tile .kpi-label {
        color: #6b7fa3 !important;
        letter-spacing: 0.9px !important;
      }

      /* ── 7D Account table — refined NexusOne treatment ───────────── */
      .acct-table thead th {
        background: #f0f4fb !important;
        color: #6b7fa3 !important;
        border-bottom: 1px solid #d4dff0 !important;
        font-size: 9px !important;
        letter-spacing: 1px !important;
      }
      .acct-table thead tr {
        border-bottom: 1px solid #d4dff0 !important;
      }
      /* PHASE 1B — zebra striping removed. The cell-level background
         was overriding action tint on every even row; see note above
         the first zebra rule for full context. */
      .acct-table tbody tr {
        border-bottom: 1px solid #dde3ed !important;
      }

      /* Action badge — aligned with brand */
      .action-badge {
        border-radius: 4px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
      }

      /* ── 7D Forecast sections — NexusOne accented ────────────────── */
      .forecast-q-section {
        border-color: #dae3f2 !important;
        box-shadow: 0 1px 4px rgba(11,26,56,0.06) !important;
      }
      .forecast-thead th {
        background: #f0f4fb !important;
        color: #6b7fa3 !important;
        border-bottom: 1px solid #d4dff0 !important;
      }
      .q-section-btn {
        background: #f5f8fd !important;
        border-bottom-color: #dae3f2 !important;
      }
      .q-section-btn:hover {
        background: #eaf0fb !important;
      }

      /* ── 7D Setup sections ────────────────────────────────────────── */
      .setup-section {
        border-color: #dae3f2 !important;
        box-shadow: 0 1px 4px rgba(11,26,56,0.06) !important;
      }
      .setup-head {
        color: #6b7fa3 !important;
        border-bottom-color: #eaeff8 !important;
      }

      /* ── 7D DS card ───────────────────────────────────────────────── */
      .ds-card {
        border-color: #dae3f2 !important;
        box-shadow: 0 1px 4px rgba(11,26,56,0.06) !important;
      }
      .ds-card:hover {
        box-shadow: 0 4px 14px rgba(26,86,219,0.10), 0 1px 3px rgba(11,26,56,0.05) !important;
      }

      /* ── 7D Todo cards ────────────────────────────────────────────── */
      .todo-card {
        border-color: #e8eef8 !important;
        border-left-color: #f59e0b !important;
        box-shadow: 0 1px 4px rgba(11,26,56,0.06) !important;
      }
      .todo-card:hover {
        box-shadow: 0 4px 14px rgba(26,86,219,0.09), 0 1px 3px rgba(11,26,56,0.05) !important;
        border-left-color: #d97706 !important;
      }

      /* ── 7D Popups / modals ───────────────────────────────────────── */
      .popup-overlay {
        background: rgba(11,26,56,0.52) !important;
      }
      .popup-surface {
        border-color: #d4dff0 !important;
        box-shadow: 0 24px 64px rgba(11,26,56,0.2), 0 4px 16px rgba(11,26,56,0.1) !important;
      }

      /* ── 7D Focus ring — NexusOne blue ───────────────────────────── */
      input:focus, select:focus, textarea:focus {
        border-color: var(--nx-blue-mid) !important;
        box-shadow: 0 0 0 3px rgba(26,86,219,0.12) !important;
      }

      /* ── 7D Forecast KPI cards override (inline styled in JS) ───── */
      /* The Forecast view renders KPI cards with inline styles.
         We can override background and box-shadow globally. */
      #root div[style*="borderRadius:8"][style*="boxShadow"][style*="flexDirection"] {
        box-shadow: 0 1px 4px rgba(11,26,56,0.07), 0 0 0 1px rgba(11,26,56,0.04) !important;
      }

      /* ── 7D Revenue popover ───────────────────────────────────────── */
      .rev-popover {
        border-color: #d4dff0 !important;
        box-shadow: 0 12px 36px rgba(11,26,56,0.15), 0 2px 8px rgba(11,26,56,0.07) !important;
      }

      /* ── 7D Scrollbar — brand-tinted ─────────────────────────────── */
      ::-webkit-scrollbar-thumb {
        background: #c0cde3 !important;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #96aacb !important;
      }

      /* ── 7D Notes workspace — NexusOne branded header ────────────── */
      /* The notes modal header area gets a subtle brand tint */
      .ws-modal-header {
        background: linear-gradient(135deg, #f8faff 0%, #f3f7fe 100%) !important;
        border-bottom-color: #dae3f2 !important;
      }
      .ws-contacts-panel {
        background: #f7f9fd !important;
        border-left-color: #dae3f2 !important;
      }

      /* ── 7D Search bar ────────────────────────────────────────────── */
      .acct-search-bar {
        background: #f5f8fd !important;
        border-bottom-color: #dae3f2 !important;
      }

      /* ── 7D Add account row ───────────────────────────────────────── */
      .add-acct-row {
        background: #eef4ff !important;
        border-bottom-color: #bfdbfe !important;
      }

      /* ── 7D ws-btn (workspace bar buttons) ───────────────────────── */
      .ws-btn {
        border-color: #d4dff0 !important;
        color: #4a5a7a !important;
      }
      .ws-btn:hover {
        border-color: var(--nx-blue-mid) !important;
        color: var(--nx-blue-mid) !important;
        background: #f0f6ff !important;
      }

      /* ── 7D Tagline — show in header at wider viewports ──────────── */
      /* The NexusOne logo contains the name; the tagline prints next to it
         at lg screens as a premium identity element */
      @media (min-width: 1200px) {
        #nx-tagline { display: block !important; }
      }

      /* ── 7D Section headers in Forecast ──────────────────────────── */
      /* "Pipeline by Quarter" heading color */
      #root h3[style*="color:"#0f172a""],
      #root h2[style*="color:"#0f172a""] {
        color: var(--nx-navy) !important;
      }


      /* ══════════════════════════════════════════════════════════════
         Phase 7E — App Shell / Layout Facelift
         CSS-only layer. All JS dimension changes applied separately.
         ══════════════════════════════════════════════════════════════ */

      /* ── 7E Header: enforce new height + gradient over any prior rules ── */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) {
        height: 68px !important;
        padding: 0 28px !important;
        background: linear-gradient(135deg, #07122a 0%, #0b1a38 55%, #0d2048 100%) !important;
        border-bottom: 1px solid rgba(56,189,248,0.14) !important;
        box-shadow:
          0 1px 0 rgba(255,255,255,0.04),
          0 4px 20px rgba(0,0,0,0.35) !important;
        position: relative;
        z-index: 100;
      }

      /* Subtle top accent line on the header */
      header:not(.nexus-premium-header):not(.tdb-mobile-header)::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg,
          transparent 0%,
          rgba(56,189,248,0.5) 20%,
          rgba(59,130,246,0.7) 50%,
          rgba(56,189,248,0.5) 80%,
          transparent 100%
        );
        pointer-events: none;
      }

      /* ── 7E Logo — ensure crisp rendering ─────────────────────────── */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) img {
        height: 46px !important;
        width: auto !important;
        object-fit: contain !important;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
      }

      /* ── 7E Nav buttons — all active/inactive states ──────────────── */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) nav button {
        font-size: 12.5px !important;
        padding: 0 18px !important;
        letter-spacing: 0.1px !important;
        font-weight: 500 !important;
        position: relative;
      }

      /* Hover state for nav items */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) nav button:hover {
        color: #c8deff !important;
        background: rgba(255,255,255,0.04) !important;
      }

      /* Active AE tab and section tabs */
      header:not(.nexus-premium-header):not(.tdb-mobile-header) nav button[style*="color: #e8f4ff"],
      header:not(.nexus-premium-header):not(.tdb-mobile-header) nav button[style*="color: #f0f7ff"],
      header:not(.nexus-premium-header):not(.tdb-mobile-header) nav button[style*="color: #fbbf24"],
      header:not(.nexus-premium-header):not(.tdb-mobile-header) nav button[style*="color: #a78bfa"] {
        font-weight: 700 !important;
      }

      /* ── 7E WorkspaceBar ──────────────────────────────────────────── */
      /* WorkspaceBar is the second strip below the header */
      /* Target the inline div that renders the workspace controls */
      /* It has background:#fafbfd from the JS change — add subtle shadow */
      [style*="minHeight: 42"],
      [style*="minHeight:42"] {
        background: #f8fafd !important;
        border-bottom: 1px solid #dde6f2 !important;
        box-shadow: 0 1px 4px rgba(11,26,56,0.07) !important;
      }

      /* Workspace name text */
      .ws-name-text {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #0f1e35 !important;
        letter-spacing: -0.15px !important;
      }

      /* WorkspaceBar buttons */
      .ws-btn {
        height: 30px !important;
        font-size: 11.5px !important;
        padding: 0 13px !important;
        border-radius: 6px !important;
        gap: 5px !important;
      }

      /* ── 7E Main content area — workspace framing ─────────────────── */
      main {
        background: #eef2f8 !important;
      }

      /* Tighten the scroll wrappers */
      main > div[style*="flex: 1"][style*="overflowY"] {
        background: #eef2f8;
      }

      /* ── 7E Content panels — card-framed sections ─────────────────── */
      /* AE accounts view: wrap in a slight card lift */
      #root main [style*="flex: 1"][style*="display: flex"][style*="flexDirection: column"][style*="minHeight: 0"] {
        background: #ffffff;
        border-radius: 10px 10px 0 0;
        box-shadow: 0 -1px 0 #dde6f2, 0 2px 8px rgba(11,26,56,0.05);
        margin: 10px 10px 0;
        overflow: hidden;
      }

      /* ── 7E Account table search bar ──────────────────────────────── */
      .acct-search-bar {
        background: #f5f8fd !important;
        border-bottom: 1px solid #dae3f2 !important;
        padding: 8px 16px !important;
      }

      /* ── 7E Account table thead sticky ────────────────────────────── */
      .acct-table thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        background: #edf2fa !important;
        box-shadow: 0 1px 0 #d4dff0 !important;
      }

      /* ── 7E Forecast & other full-page views ──────────────────────── */
      /* Forecast, Todo, Setup views: proper content padding */
      main > div[style*="overflowY"] > div[style*="padding"] {
        max-width: 1280px;
        margin: 0 auto;
      }

      /* ── 7E KPI tile refinement ───────────────────────────────────── */
      .kpi-tile {
        border-radius: 10px !important;
        padding: 13px 16px !important;
      }

      /* ── 7E Forecast KPI cards (inline-styled in JS) ──────────────── */
      /* These render with borderRadius:8, give them more depth */
      #root div[style*="borderRadius:8"][style*="padding"],
      #root div[style*="border-radius: 8px"][style*="padding: 13px"] {
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(11,26,56,0.08), 0 0 0 1px rgba(11,26,56,0.04) !important;
      }

      /* ── 7E Setup view framing ─────────────────────────────────────── */
      .setup-section {
        border-radius: 12px !important;
        padding: 22px 26px !important;
        box-shadow: 0 1px 6px rgba(11,26,56,0.07), 0 0 0 1px rgba(11,26,56,0.03) !important;
      }

      /* ── 7E Todo dashboard ─────────────────────────────────────────── */
      /* Max width for readability */
      #root div[style*="maxWidth: 760"],
      #root div[style*="maxWidth:760"] {
        max-width: 800px !important;
        padding: 32px 28px !important;
      }
      .todo-card {
        border-radius: 9px !important;
        box-shadow: 0 1px 6px rgba(11,26,56,0.07) !important;
      }

      /* ── 7E Forecast quarter sections ─────────────────────────────── */
      .forecast-q-section {
        border-radius: 10px !important;
        box-shadow: 0 1px 6px rgba(11,26,56,0.07), 0 0 0 1px rgba(11,26,56,0.03) !important;
        margin-bottom: 12px !important;
      }

      /* ── 7E Notes workspace modal header ──────────────────────────── */
      .ws-modal-header {
        background: linear-gradient(135deg, #f5f9ff 0%, #eef4ff 100%) !important;
        border-bottom: 1px solid #d4e1f8 !important;
        padding: 18px 28px !important;
      }

      /* ── 7E Popup surface ─────────────────────────────────────────── */
      .popup-surface {
        border-radius: 14px !important;
        box-shadow: 0 28px 72px rgba(11,26,56,0.22), 0 4px 16px rgba(11,26,56,0.1) !important;
      }

      /* ── 7E Revenue popover ───────────────────────────────────────── */
      .rev-popover {
        border-radius: 10px !important;
        box-shadow: 0 12px 40px rgba(11,26,56,0.16), 0 2px 8px rgba(11,26,56,0.07) !important;
      }

      /* ── 7E DS card ───────────────────────────────────────────────── */
      .ds-card {
        border-radius: 12px !important;
        box-shadow: 0 1px 6px rgba(11,26,56,0.07) !important;
      }

      /* ── 7E Global: stronger visual hierarchy for section labels ───── */
      .setup-head {
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 1.1px !important;
        color: #7b93b8 !important;
        padding-bottom: 13px !important;
        margin-bottom: 16px !important;
      }

      /* ── 7E Body background: richer ───────────────────────────────── */
      body {
        background: #e8ecf4 !important;
      }

      /* ── 7E Scrollbar track: tinted ───────────────────────────────── */
      ::-webkit-scrollbar-track {
        background: rgba(11,26,56,0.03) !important;
      }

      /* ── Next Steps row-size modes ────────────────────────────────────
         The .ns-preview span wraps the visible Next Steps text inside
         the Accounts table Bp cell. Row height is driven by content;
         these rules control whether that content wraps or clamps.
         Auto = full text, wraps, row grows. Compact = single line,
         ellipsis, fixed row height. ────────────────────────────────── */
      /* ── Forecast → Accounts row focus flash ─────────────────────────
         Applied via JS (tdbFocusAccountRow) when an account name is
         clicked in the Forecast tab. Pulses a visible blue highlight on
         the target row, then fades. Uses box-shadow + background so it
         layers over the row's inline action-tint background without
         fighting React's inline style. */
      @keyframes tdbRowFlash {
        0%   { box-shadow: inset 0 0 0 9999px rgba(37,99,235,0.18); }
        15%  { box-shadow: inset 0 0 0 9999px rgba(37,99,235,0.18); }
        100% { box-shadow: inset 0 0 0 9999px rgba(37,99,235,0); }
      }
      tr.acct-data-row.tdb-row-flash > td {
        animation: tdbRowFlash 3s ease-out forwards;
        outline: 2px solid #2563eb;
        outline-offset: -2px;
      }
      .acct-rows-auto .ns-preview {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        overflow: visible;
        max-height: none;
      }
      .acct-rows-compact .ns-preview {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      /* ─────────────────────────────────────────────────────────────
         Home tab refinement utilities — animations, hover lifts,
         and a subtle below-header glow band. Scoped to .tdb-home-* so
         nothing else in the app is affected.
         ───────────────────────────────────────────────────────────── */

      /* One-shot mount fade-in (no infinite animation, no perf hit). */
      @keyframes tdbHomeFadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .tdb-home-fade-in {
        animation: tdbHomeFadeIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      /* Stagger children slightly so the dashboard "assembles" cleanly. */
      .tdb-home-fade-in > * { animation: tdbHomeFadeIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
      .tdb-home-fade-in > *:nth-child(1) { animation-delay: 0.02s; }
      .tdb-home-fade-in > *:nth-child(2) { animation-delay: 0.07s; }
      .tdb-home-fade-in > *:nth-child(3) { animation-delay: 0.11s; }
      .tdb-home-fade-in > *:nth-child(4) { animation-delay: 0.15s; }
      .tdb-home-fade-in > *:nth-child(5) { animation-delay: 0.19s; }
      .tdb-home-fade-in > *:nth-child(6) { animation-delay: 0.23s; }
      .tdb-home-fade-in > *:nth-child(7) { animation-delay: 0.27s; }
      .tdb-home-fade-in > *:nth-child(n+8) { animation-delay: 0.31s; }
      @media (prefers-reduced-motion: reduce) {
        .tdb-home-fade-in, .tdb-home-fade-in > * { animation: none !important; }
        .tdb-hero-shimmer { animation: none !important; }
      }

      /* Hero ambient gradient drift — extremely slow, GPU-cheap. The
         hero card itself paints a fixed dark navy gradient; this layer
         sits *on top* of the static gradient with low opacity so it
         reads as a faint moving sheen rather than a color change. */
      @keyframes tdbHeroShimmer {
        0%   { background-position:   0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position:   0% 50%; }
      }
      .tdb-hero-shimmer {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          110deg,
          rgba(255,255,255,0.00) 0%,
          rgba(120,180,255,0.06) 35%,
          rgba(160,210,255,0.10) 50%,
          rgba(120,180,255,0.06) 65%,
          rgba(255,255,255,0.00) 100%
        );
        background-size: 220% 220%;
        animation: tdbHeroShimmer 18s ease-in-out infinite;
        mix-blend-mode: screen;
        border-radius: inherit;
      }

      /* Shared hover lift used on every interactive card (stat tiles,
         start-here cards, workflow steps, recent activity, quick action
         chips). Transform + box-shadow only — no layout shift. */
      .tdb-card-lift {
        transition:
          transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
          border-color 0.18s ease;
        will-change: transform;
      }
      .tdb-card-lift:hover {
        transform: translateY(-2px);
        box-shadow:
          0 1px 2px rgba(15, 23, 42, 0.05),
          0 10px 24px rgba(15, 23, 42, 0.09);
        border-color: #c7d6ea !important;
      }
      /* Quick-action chips need a lighter lift since they're slim. */
      .tdb-chip-lift {
        transition:
          transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.18s ease,
          border-color 0.15s ease,
          background 0.15s ease;
      }
      .tdb-chip-lift:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
        border-color: #c7d6ea;
        background: #f8fbff;
      }

      /* Subtle ambient glow band BELOW the premium header — adds
         depth without restructuring the header itself. */
      .nexus-premium-header::before {
        content: "";
        position: absolute;
        left: 0; right: 0;
        bottom: -14px;
        height: 14px;
        background: linear-gradient(
          180deg,
          rgba(15, 30, 70, 0.10) 0%,
          rgba(15, 30, 70, 0.00) 100%
        );
        pointer-events: none;
        z-index: 4;
      }
      /* ─────────────────────────────────────────────────────────────
         RESPONSIVE / MOBILE LAYER
         Breakpoints:
           ≤480px  — phone portrait
           ≤767px  — phone landscape & small tablet
           ≤1023px — tablet
           ≥1024px — desktop (untouched)

         Design intent: desktop layout is preserved at ≥1024px. Below
         that, we progressively collapse multi-column grids to fewer
         columns, hide non-essential decorations, enlarge tap targets,
         and let dense tables scroll horizontally within their own
         container so nothing overflows the page.

         Many components use inline `gridTemplateColumns` styles in
         JSX. Those win over class styles unless we use !important,
         which we do — strictly inside @media queries — so desktop is
         never affected.
         ───────────────────────────────────────────────────────────── */

      /* Global guards — applied at every width. */
      html, body { overflow-x: hidden; }
      body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

      /* Make all tables that can grow wide scroll inside their own
         container on small screens. The .acct-table already lives in
         a parent with overflowX:auto. The Forecast inner-quarter table
         got an inline minWidth + overflowX:auto wrapper. This rule
         backstops both and keeps tap-scrolling smooth on iOS. */
      .acct-table, table.acct-table {
        min-width: 980px;
      }
      .acct-table { -webkit-overflow-scrolling: touch; }

      /* Tap-target bump for interactive controls inside Home (mobile only). */
      /* (Applied in media queries below.) */

      /* ════════════════════════════════════════════════════════════
         ≤1023px — TABLET
         ════════════════════════════════════════════════════════════ */
      @media (max-width: 1023px) {
        /* Desktop header doesn't render below 1024px — the mobile
           header (.tdb-mobile-header) renders instead. The workspace
           bar (Untitled Workspace / Save / download mode / last saved)
           is also hidden at this breakpoint since Save / Save As / Open
           live inside the mobile hamburger menu and the rest is desktop
           utility chrome that adds noise to a phone viewing experience. */
        .tdb-workspace-bar { display: none !important; }

        /* Body-content media rules continue to apply: */

        /* Home hero — collapse two columns to one. */
        .tdb-hero-grid {
          grid-template-columns: 1fr !important;
          gap: 22px !important;
        }

        /* Forecast KPI rows: 4-col → 2-col, 3-col → 2-col. */
        .tdb-forecast-kpi-row-4 { grid-template-columns: repeat(2, 1fr) !important; }
        .tdb-forecast-kpi-row-3 { grid-template-columns: repeat(2, 1fr) !important; }

        /* AE Accounts KPI tiles (7 columns) → 3 columns on tablet. */
        .tdb-ae-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
      }

      /* ════════════════════════════════════════════════════════════
         ≤767px — PHONES
         ════════════════════════════════════════════════════════════ */
      @media (max-width: 767px) {
        /* Header at phone widths is rendered as a SEPARATE component
           (.tdb-mobile-header), not by morphing the desktop header.
           See the .tdb-mobile-header rules further down for details. */

        /* ── WORKSPACE BAR ──────────────────────────────────────── */
        /* Hidden entirely on phones — Save/Save As/Open live in the
           hamburger menu, and "Untitled Workspace" / last-saved status
           are not useful on a viewing/demo experience. The workspace
           bar is also hidden at ≤1023px via the tablet block below. */

        /* ── HOME ──────────────────────────────────────────────── */
        .tdb-home-fade-in {
          padding: 10px 14px 36px !important;
        }

        /* Hero — slim padding, smaller headline, single column. */
        .tdb-home-fade-in > div:first-child {
          padding: 26px 22px !important;
          border-radius: 16px !important;
        }
        .tdb-home-fade-in > div:first-child h1 {
          font-size: 26px !important;
          line-height: 1.18 !important;
          letter-spacing: -0.5px !important;
        }
        .tdb-hero-grid {
          grid-template-columns: 1fr !important;
          gap: 20px !important;
        }
        /* Hero pill — wraps cleanly. */
        .tdb-home-fade-in > div:first-child div[style*="border-radius:20"] {
          max-width: 100% !important;
        }

        /* Quick Actions strip — wrap, full-width chips, tap-friendly. */
        .tdb-chip-lift {
          flex: 1 0 calc(50% - 6px) !important;
          min-height: 44px !important;
          justify-content: center !important;
        }

        /* Snapshot tiles: 1 column on small phone, 2 above. */
        .tdb-snapshot-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 10px !important;
        }
        /* Start Here cards — 1 column. */
        .tdb-starthere-grid {
          grid-template-columns: 1fr !important;
          gap: 14px !important;
        }
        /* Workflow steps — vertical stack, hide chevrons. */
        .tdb-workflow-row > div[style*="color:\"#cfd9e6\""],
        .tdb-workflow-row > div[style*="color:#cfd9e6"] {
          display: none !important;
        }
        /* Stack workflow row vertically. */
        .tdb-workflow-row {
          flex-direction: column !important;
        }

        /* Private by design — stack the trust pill below the body. */
        .tdb-privacy-banner {
          padding: 18px 18px !important;
          gap: 12px !important;
        }

        /* ── ACCOUNTS / AE TAB ─────────────────────────────────── */
        /* KPI tiles strip: 7 columns → 2 columns on phone. */
        .tdb-ae-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
        /* Page-title block: drop count to a new line. */

        /* The accounts table scrolls horizontally; nothing to do
           except prevent the parent from overflowing the viewport. */
        .nexus-workspace-shell { min-width: 0 !important; }

        /* ── TO DO ─────────────────────────────────────────────── */
        /* TodoDashboard already stacks; just bump padding & taps. */
        /* The to-do container has maxWidth:760 — fine. */
        /* Make the checkbox bigger and tap target generous. */
        /* (Reached via the inline style; we just enlarge it.) */

        /* ── FORECAST ──────────────────────────────────────────── */
        .tdb-forecast-kpi-row-4 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
        .tdb-forecast-kpi-row-3 { grid-template-columns: 1fr !important; gap: 8px !important; }
        /* Forecast page padding shrink. */

        /* ── GLOBAL ────────────────────────────────────────────── */
        /* Buttons and chips bump to 44px tap target where possible. */
        button { min-height: 36px; }
        /* Inputs keep 16px font to prevent iOS Safari from zooming. */
        input[type="text"], input[type="number"], input[type="password"],
        input[type="search"], input[type="email"], textarea, select {
          font-size: 16px !important;
        }
      }

      /* ════════════════════════════════════════════════════════════
         ≤480px — TIGHT PHONE
         ════════════════════════════════════════════════════════════ */
      @media (max-width: 480px) {
        .tdb-home-fade-in {
          padding: 10px 12px 36px !important;
        }
        .tdb-home-fade-in > div:first-child {
          padding: 22px 18px !important;
        }
        .tdb-home-fade-in > div:first-child h1 {
          font-size: 23px !important;
        }
        /* Snapshot tiles → single column on tightest viewport. */
        .tdb-snapshot-grid {
          grid-template-columns: 1fr !important;
        }
        /* Quick Action chips full-width on tightest screens. */
        .tdb-chip-lift {
          flex: 1 0 100% !important;
        }
        /* AE KPI tiles to 1 column on tightest. */
        .tdb-ae-kpi-row { grid-template-columns: 1fr !important; }

        /* Brand tagline already hidden; shrink logo a touch more. */
        .nexus-logo-icon { width: 28px !important; height: 28px !important; font-size: 14px !important; }
        .nexus-logo-main, .nexus-logo-accent { font-size: 17px !important; }
      }

      /* ═══════════════════════════════════════════════════════════════
         MOBILE HEADER + DRAWER  (final, rendered-verified version)
         ═══════════════════════════════════════════════════════════════ */
      html, body { max-width: 100% !important; overflow-x: hidden !important; }

      header.tdb-mobile-header {
        all: unset !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: 60px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 50 !important;
        flex-shrink: 0 !important;
        background: linear-gradient(180deg, #07142a 0%, #050d1c 100%) !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.40), 0 1px 6px rgba(2,8,20,0.30) !important;
        font-family: -apple-system, 'Segoe UI', system-ui, sans-serif !important;
      }
      header.tdb-mobile-header::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        height: 1px !important;
        background: linear-gradient(90deg, rgba(91,143,214,0) 0%, rgba(91,143,214,0.35) 22%, rgba(120,165,225,0.55) 50%, rgba(91,143,214,0.35) 78%, rgba(91,143,214,0) 100%) !important;
        pointer-events: none !important;
      }

      header.tdb-mobile-header > div.tdb-mobile-brand {
        all: unset !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 11px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        font-family: inherit !important;
      }
      header.tdb-mobile-header div.tdb-mobile-logo {
        all: unset !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
        background: linear-gradient(180deg, #335f93 0%, #21456f 100%) !important;
        color: #ffffff !important;
        font-family: -apple-system, 'Segoe UI', system-ui, sans-serif !important;
        font-size: 17px !important;
        font-weight: 900 !important;
        letter-spacing: -0.04em !important;
        line-height: 1 !important;
        text-align: center !important;
        box-shadow: 0 0 0 1px rgba(120,150,190,0.18), inset 0 1px 0 rgba(255,255,255,0.10) !important;
      }
      header.tdb-mobile-header div.tdb-mobile-wordmark {
        all: unset !important;
        box-sizing: border-box !important;
        display: inline-block !important;
        font-family: -apple-system, 'Segoe UI', system-ui, sans-serif !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: -0.3px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important;
      }
      header.tdb-mobile-header div.tdb-mobile-wordmark span.tdb-mobile-accent {
        all: unset !important;
        display: inline !important;
        margin-left: 1px !important;
        background: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        -webkit-text-fill-color: #5b8fd6 !important;
        color: #5b8fd6 !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
      }
      header.tdb-mobile-header > div.tdb-mobile-actions {
        all: unset !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
      }
      /* Theme toggle + Territory AI, relocated here because the workspace bar
         that normally hosts them is hidden at this width. Sized down to sit
         level with the burger without crowding it. */
      header.tdb-mobile-header .tdb-mobile-ai,
      header.tdb-mobile-header .tdb-mobile-tt {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
      }
      header.tdb-mobile-header .tdb-mobile-tt .tdb-theme-toggle {
        transform: scale(0.88) !important;
        transform-origin: center right !important;
      }
      header.tdb-mobile-header .tdb-mobile-ai button {
        max-width: 132px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }
      /* Territory AI stays fully visible — icon AND label — at every width.
         Tight phones compress padding/font instead of amputating the label. */
      @media (max-width: 420px) {
        header.tdb-mobile-header .tdb-mobile-ai button {
          max-width: none !important;
          font-size: 11px !important;
          padding: 5px 10px !important;
          gap: 5px !important;
        }
        header.tdb-mobile-header { gap: 8px !important; }
        header.tdb-mobile-header div.tdb-mobile-wordmark { font-size: 16px !important; }
      }

      /* Inline repair for the "no file linked" state. Small and quiet enough
         to live in a status strip, but it is a real button, not a hint. */
      .ssb-fix {
        margin-left: 8px !important;
        padding: 2px 9px !important;
        border-radius: 5px !important;
        border: 1px solid rgba(248,113,113,0.55) !important;
        background: rgba(248,113,113,0.12) !important;
        color: #fecaca !important;
        font-family: inherit !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 1.6 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background .12s, border-color .12s !important;
      }
      .ssb-fix:hover { background: rgba(248,113,113,0.22) !important; border-color: rgba(248,113,113,0.8) !important; }
      /* In the light popover the same button needs light-surface colours. */
      .ssb-fix-menu {
        border-color: #fecaca !important;
        background: #fef2f2 !important;
        color: #b91c1c !important;
        margin-left: 0 !important;
        margin-top: 6px !important;
        display: block !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
      }
      .ssb-fix-menu:hover { background: #fee2e2 !important; border-color: #f87171 !important; }
      html[data-theme="dark"] .ssb-fix-menu { background: rgba(248,113,113,0.14) !important; border-color: rgba(248,113,113,0.45) !important; color: #fca5a5 !important; }

      /* ── Save status tones (single consolidated state) ───────────────── */
      .nexus-save-status-bar .ssb-state { font-weight: 600 !important; }
      .ssb-ok    { color: #34d399 !important; }
      .ssb-busy  { color: #60a5fa !important; }
      .ssb-warn  { color: #fbbf24 !important; }
      .ssb-err   { color: #f87171 !important; }
      .ssb-muted { color: #94a3b8 !important; }
      /* Inside the popover the surface is light, so the tones need darker
         variants to stay legible. */
      div.tdb-mobile-menu > div.tdb-mobile-menu-status.ssb-ok    { color: #15803d !important; }
      div.tdb-mobile-menu > div.tdb-mobile-menu-status.ssb-busy  { color: #1d4ed8 !important; }
      div.tdb-mobile-menu > div.tdb-mobile-menu-status.ssb-warn  { color: #b45309 !important; }
      div.tdb-mobile-menu > div.tdb-mobile-menu-status.ssb-err   { color: #b91c1c !important; }
      div.tdb-mobile-menu > div.tdb-mobile-menu-status.ssb-muted { color: #64748b !important; }
      html[data-theme="dark"] div.tdb-mobile-menu > div.tdb-mobile-menu-status.ssb-ok   { color: #4ade80 !important; }
      html[data-theme="dark"] div.tdb-mobile-menu > div.tdb-mobile-menu-status.ssb-warn { color: #fbbf24 !important; }
      html[data-theme="dark"] div.tdb-mobile-menu > div.tdb-mobile-menu-status.ssb-err  { color: #f87171 !important; }

      header.tdb-mobile-header button.tdb-mobile-burger {
        all: unset !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 10px !important;
        background: linear-gradient(180deg, rgba(11,28,64,0.92) 0%, rgba(6,18,42,0.92) 100%) !important;
        border: 1px solid rgba(140,195,255,0.32) !important;
        color: #ffffff !important;
        cursor: pointer !important;
        font-family: inherit !important;
        box-shadow: 0 6px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(180,230,255,0.18) !important;
        transition: background 0.13s, border-color 0.13s, transform 0.1s !important;
      }
      header.tdb-mobile-header button.tdb-mobile-burger:hover {
        background: linear-gradient(180deg, rgba(22,52,108,0.94) 0%, rgba(12,28,62,0.94) 100%) !important;
      }
      header.tdb-mobile-header button.tdb-mobile-burger svg {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        color: currentColor !important;
        stroke: currentColor !important;
      }

      /* ── Nav popover ────────────────────────────────────────────────
         Was a full-bleed drawer: 100vw wide, floor-to-ceiling, dark navy
         gradient, glowing gradient pills. It read as navigating to a new
         page rather than opening a menu, and on a 14" laptop it buried the
         work you were trying to get back to.

         Now a compact popover anchored under the burger, using the same
         surface, borders and active state as the settings rail. The
         backdrop is an invisible click-catcher, not a dimming scrim — this
         is a menu, not a modal, and dimming the page implies you left it. */
      div.tdb-mobile-menu-backdrop {
        all: unset !important;
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: transparent !important;
        z-index: 49 !important;
      }
      div.tdb-mobile-menu {
        all: unset !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 66px !important;
        right: 12px !important;
        left: auto !important;
        width: 264px !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 82px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 51 !important;
        padding: 8px !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: 1px solid #e6ebf2 !important;
        border-radius: 12px !important;
        box-shadow: 0 16px 40px rgba(8,20,45,0.20), 0 2px 6px rgba(8,20,45,0.06) !important;
        font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', system-ui, sans-serif !important;
      }
      div.tdb-mobile-menu > div.tdb-mobile-menu-label {
        all: unset !important;
        box-sizing: border-box !important;
        display: block !important;
        padding: 8px 10px 5px !important;
        margin: 0 !important;
        font-family: inherit !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.7px !important;
        text-transform: uppercase !important;
        color: #94a3b8 !important;
      }
      div.tdb-mobile-menu > button.tdb-mobile-menu-item {
        all: unset !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 10px !important;
        margin: 0 0 1px 0 !important;
        border-radius: 7px !important;
        border-left: 2px solid transparent !important;
        background: transparent !important;
        color: #475569 !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: -0.1px !important;
        text-align: left !important;
        line-height: 1 !important;
        cursor: pointer !important;
        transition: background 0.12s, color 0.12s !important;
      }
      div.tdb-mobile-menu > button.tdb-mobile-menu-item:hover {
        background: #f4f7fc !important;
        color: #0f172a !important;
      }
      div.tdb-mobile-menu > button.tdb-mobile-menu-item:disabled {
        opacity: 0.42 !important;
        cursor: not-allowed !important;
      }
      div.tdb-mobile-menu > button.tdb-mobile-menu-item.active {
        background: #eff5ff !important;
        border-left-color: #2563eb !important;
        color: #1d4ed8 !important;
        font-weight: 700 !important;
      }
      div.tdb-mobile-menu > button.tdb-mobile-menu-item svg {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
        opacity: 1 !important;
        color: currentColor !important;
        stroke: currentColor !important;
      }
      div.tdb-mobile-menu > div.tdb-mobile-menu-divider {
        all: unset !important;
        display: block !important;
        width: auto !important;
        height: 1px !important;
        margin: 6px 6px 5px !important;
        background: #eef2f7 !important;
      }
      div.tdb-mobile-menu > div.tdb-mobile-menu-status {
        all: unset !important;
        box-sizing: border-box !important;
        display: block !important;
        padding: 9px 10px 4px !important;
        margin: 4px 0 0 !important;
        border-top: 1px solid #eef2f7 !important;
        font-family: inherit !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
        color: #64748b !important;
        text-align: left !important;
        line-height: 1.45 !important;
      }
      div.tdb-mobile-menu > div.tdb-mobile-menu-status { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }

      /* ── Hide desktop chrome on mobile (two redundant mechanisms) ─ */
      body:has(header.tdb-mobile-header) .nexus-premium-header,
      body:has(header.tdb-mobile-header) .tdb-workspace-bar {
        display: none !important;
      }
      @media (max-width: 1023px) {
        .nexus-premium-header { display: none !important; }
        .tdb-workspace-bar    { display: none !important; }
      }

      @media (max-width: 480px) {
        header.tdb-mobile-header { padding: 0 12px !important; }
        header.tdb-mobile-header div.tdb-mobile-logo {
          width: 32px !important; height: 32px !important; font-size: 16px !important;
        }
        header.tdb-mobile-header div.tdb-mobile-wordmark { font-size: 17px !important; }
      }

      /* ═══════════════════════════════════════════════════════════════
         MOBILE CONTENT LAYOUT FIX
         ─────────────────────────────────────────────────────────────
         On desktop the app is a fixed-height shell where <main> has
         overflow:hidden and individual views scroll inside their own
         flex:1 panes. On mobile (<=1023px) that pattern breaks: the
         viewport is tiny, KPI cards stack into a single column ~700px
         tall, and the accounts table gets pushed below the visible
         pane with no way to reach it. The mobile menu's hamburger
         scrolls the document, but the document isn't taller than the
         viewport because <main> is overflow:hidden.

         Fix on mobile only:
           - Root flex column: switch from height:100vh to min-height:
             100vh so it can grow with content.
           - <main>: drop overflow:hidden so child content can spill
             into the document scroll.
           - Inner overflowY:auto wrappers from JSX (Forecast/Todo/Setup
             and the Accounts inner pane): allow visible overflow so the
             body scrolls instead of an inner container.

         The Accounts inner table wrapper keeps overflow-x:auto so the
         table can scroll horizontally, but its overflow-y becomes
         visible so its rows extend down the page naturally.

         The Forecast table is wide (10 columns) and gets crushed on
         mobile if forced to viewport width. We give it a fixed
         min-width (~960px) and wrap its scroll container with
         -webkit-overflow-scrolling:touch for momentum.
         ═══════════════════════════════════════════════════════════════ */
      @media (max-width: 1023px) {

        /* 1. Allow the root app container to grow with content. The
              inline style is height:100vh which would otherwise lock
              the whole page to the viewport. */
        #root > div[style*="height:100vh"],
        #root > div[style*="height: 100vh"] {
          height: auto !important;
          min-height: 100vh !important;
        }

        /* 2. Release <main> from overflow:hidden and let it grow. The
              inline style sets overflow:hidden + flex:1. */
        #root main {
          overflow: visible !important;
          flex: 0 0 auto !important;
          display: block !important;
        }

        /* 3. Release inner per-view scroll wrappers (Forecast / Todo /
              Setup / Accounts). These are <div style="flex:1; overflowY:auto">
              wrappers around each view. On mobile they should let the
              document scroll, not trap scroll internally. */
        #root main > div[style*="overflowY:auto"],
        #root main > div[style*="overflowY: auto"],
        #root main > div[style*="overflow-y:auto"],
        #root main > div[style*="overflow-y: auto"] {
          overflow-y: visible !important;
          flex: 0 0 auto !important;
        }

        /* 4. Accounts view: the outer Jp component returns a flex
              column with minHeight:0 + flex:1, and an inner div with
              overflowX:auto + overflowY:auto wrapping the table. Drop
              the inner overflow-y; keep overflow-x so the wide table
              still scrolls sideways inside its panel. */
        #root main > div[style*="minHeight:0"][style*="flexDirection:column"],
        #root main > div[style*="minHeight: 0"][style*="flexDirection: column"] {
          min-height: 0 !important;
          flex: 0 0 auto !important;
          display: block !important;
        }
        #root main div[style*="overflowX:auto"][style*="overflowY:auto"],
        #root main div[style*="overflowX: auto"][style*="overflowY: auto"] {
          overflow-y: visible !important;
          overflow-x: auto !important;
          -webkit-overflow-scrolling: touch !important;
          flex: 0 0 auto !important;
        }

        /* 5. .nexus-workspace-shell wraps each view. Strip its overflow
              clipping so the page can scroll naturally. */
        .nexus-workspace-shell {
          height: auto !important;
          max-height: none !important;
          overflow-x: visible !important;
          overflow-y: visible !important;
          flex: 0 0 auto !important;
        }

        /* 6. Body must allow vertical scroll on mobile. Earlier rules
              set body { overflow-x: hidden } which is fine; do NOT set
              overflow-y here so the default 'visible' (i.e. scrolls
              with the html element) wins. */
        html, body {
          overflow-x: hidden !important;
          /* overflow-y intentionally left unset (default visible) */
        }
        body {
          height: auto !important;
          min-height: 100vh !important;
        }
      }

      /* ── Accounts AE table: horizontal scroll on mobile ───────────── */
      /* Desktop renders the table at viewport width with column resize.
         On mobile the table layout:fixed widths total ~1100px, which
         is wider than the viewport. Let it scroll inside its panel. */
      @media (max-width: 1023px) {
        table.acct-table {
          min-width: 720px !important;
        }
        /* Accounts table wrapper: keep horizontal scroll on mobile. At this
           breakpoint .nexus-workspace-shell (the desktop scroller) is set to
           overflow:visible and the wrapper had no overflow of its own, so the
           ~720px table clipped on the right with no way to scroll. Mobile-only,
           so desktop shell scrolling / sticky thead are unchanged. */
        .tdb-acct-scroll {
          overflow-x: auto !important;
          -webkit-overflow-scrolling: touch !important;
        }
        /* Sticky proxy horizontal scrollbar pinned to the viewport bottom on
           mobile/condensed widths (the document scrolls vertically, so the
           table's own scrollbar is far below the fold past 50+ rows). */
        .tdb-sticky-hscroll::-webkit-scrollbar { height: 12px; -webkit-appearance: none; }
        .tdb-sticky-hscroll::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; border: 3px solid #ffffff; }
        .tdb-sticky-hscroll::-webkit-scrollbar-track { background: #f1f5f9; }
        .tdb-sticky-hscroll { scrollbar-color: #94a3b8 #f1f5f9; scrollbar-width: auto; }
        /* Make sure the panel that wraps the search bar + table doesn't
           clip horizontally — only the inner table-scroll div does. */
        .nexus-workspace-shell {
          padding: 16px 0 24px !important;
        }
        .nexus-workspace-shell > div {
          padding-left: 14px !important;
          padding-right: 14px !important;
        }
        /* The inner div with overflowX:auto (table wrapper) — pull
           the inner padding off so the table can use the full width
           of the scroll viewport. */
        #root main div[style*="overflowX:auto"],
        #root main div[style*="overflowX: auto"] {
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
      }

      /* ═══════════════════════════════════════════════════════════════
         FORECAST TABLE — mobile column spacing
         ─────────────────────────────────────────────────────────────
         The Forecast view uses percentage column widths (account 20%,
         ae 5%, action 7%, partner 9%, status 12%, …) totalling 100%.
         At 393px viewport that produces columns as narrow as 19px,
         so AE/Action/Partner/Status text overlaps badly.

         Fix on mobile: give the table a fixed min-width so columns get
         readable absolute widths, and let it scroll horizontally inside
         its container. Also force key cells to whitespace-nowrap so
         status badges and AE labels don't collide.
         ═══════════════════════════════════════════════════════════════ */
      @media (max-width: 1023px) {
        /* Forecast section "deals" tables — they live inside expandable
           buckets (Commit / Upside / Stretch / Q1 / Q3 / Q4). Each has a
           wrapper div with overflowX:auto, then a <table>. */
        #root main table {
          min-width: 0;
        }
        /* The forecast deal tables specifically — match by their thead
           "Account / AE / Action / Partner / Status / …" header row. */
        #root main div[style*="overflowX"] > table,
        #root main div[style*="overflow-x"] > table {
          min-width: 940px !important;
          table-layout: auto !important;
        }
        /* Forecast table cells: stop badge/text overlap by enforcing
           whitespace-nowrap and tighter padding on mobile. */
        #root main div[style*="overflowX"] > table th,
        #root main div[style*="overflowX"] > table td {
          white-space: nowrap !important;
          padding: 8px 10px !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
        }
        /* Account name column — give it more room and let it wrap on
           a forecast table since names are long. */
        #root main div[style*="overflowX"] > table td:first-child,
        #root main div[style*="overflowX"] > table th:first-child {
          min-width: 160px !important;
          max-width: 220px !important;
          white-space: normal !important;
          font-weight: 600 !important;
        }
        /* Next steps (last column) — wrap text since it's long-form. */
        #root main div[style*="overflowX"] > table td:last-child,
        #root main div[style*="overflowX"] > table th:last-child {
          white-space: normal !important;
          min-width: 200px !important;
        }
        /* Status / FC select pills need to fit on one line. */
        #root main .fc-select {
          min-width: 86px !important;
          white-space: nowrap !important;
        }
      }

      /* ═══════════════════════════════════════════════════════════════
         KPI ROW — keep cards readable but smaller on mobile so the
         table is reachable without infinite scroll past KPIs. Don't
         change layout (still single column at ≤480), just trim height.
         ═══════════════════════════════════════════════════════════════ */
      @media (max-width: 1023px) {
        .tdb-ae-kpi-row .kpi-tile,
        .tdb-ae-kpi-row > div {
          padding: 10px 14px !important;
          min-height: 0 !important;
        }
      }
      @media (max-width: 480px) {
        .tdb-ae-kpi-row .kpi-tile,
        .tdb-ae-kpi-row > div {
          padding: 9px 13px !important;
        }
      }


      /* ════════════════════════════════════════════════════════════════
         ENTERPRISE POLISH PASS — visual identity only. Appended last so
         it overrides earlier rules via cascade. Touches NO layout logic,
         NO JS, NO data, NO behavior. Flattens the AI-dashboard gradients,
         glows, and glass into a denser, branded command-center look.
         Desktop header/nav/file chrome only (.nexus-* classes); the
         mobile header uses separate .tdb-mobile-* classes rendered by a
         different component and is intentionally left untouched.
         ════════════════════════════════════════════════════════════════ */

      /* ── Header: flat navy command bar (kills neon radial gradient + heavy bloom) ── */
      .nexus-premium-header {
        background: linear-gradient(180deg, #0a1f44 0%, #07172f 100%) !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.30), 0 2px 8px rgba(3,12,30,0.22) !important;
      }
      /* Replace glowing cyan underline with a thin, flat brand accent line */
      .nexus-premium-header::after {
        height: 2px !important;
        background: linear-gradient(90deg,
          rgba(37,99,235,0.00) 0%,
          rgba(37,99,235,0.55) 18%,
          rgba(96,165,250,0.85) 50%,
          rgba(37,99,235,0.55) 82%,
          rgba(37,99,235,0.00) 100%) !important;
        box-shadow: none !important;
      }
      /* Compact the header bar vertically */
      .nexus-header-inner { padding: 10px 24px 10px 24px !important; }

      /* ── Logo: smaller, flatter chip; restrained wordmark ── */
      .nexus-logo-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        font-size: 17px !important;
        background: linear-gradient(180deg, #2563eb 0%, #1149b8 100%) !important;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.14) !important;
      }
      .nexus-logo-icon::before { display: none !important; }
      .nexus-logo-text { font-size: 23px !important; }
      .nexus-logo-main { text-shadow: none !important; }
      .nexus-logo-accent {
        background: linear-gradient(90deg, #8fbaff 0%, #4f8bff 100%) !important;
        text-shadow: none !important;
      }
      .nexus-brand-tagline { margin-left: 44px !important; }

      /* ── Nav tabs: compact flat command buttons, restrained active state ── */
      .nexus-tab {
        height: 38px !important;
        border-radius: 6px !important;
        padding: 6px 14px !important;
        font-weight: 700 !important;
        border: 1px solid rgba(125,160,220,0.18) !important;
        background: rgba(146,180,255,0.06) !important;
        box-shadow: none !important;
      }
      .nexus-tab:hover {
        background: rgba(146,180,255,0.13) !important;
        border-color: rgba(125,160,220,0.42) !important;
        transform: none !important;
      }
      .nexus-tab.active {
        background: #1d4ed8 !important;
        border-color: rgba(120,170,255,0.55) !important;
        box-shadow: inset 0 -2px 0 rgba(150,200,255,0.95) !important;
      }

      /* ── Settings button: de-glass, compact, matching active treatment ── */
      .nexus-settings-button {
        height: 54px !important;
        border-radius: 6px !important;
        background: rgba(146,180,255,0.06) !important;
        border: 1px solid rgba(125,160,220,0.20) !important;
        border-top-color: rgba(125,160,220,0.20) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
      }
      .nexus-settings-button:hover {
        background: rgba(146,180,255,0.13) !important;
        border-color: rgba(125,160,220,0.42) !important;
        transform: none !important;
      }
      .nexus-settings-button.active {
        background: #1d4ed8 !important;
        border-color: rgba(120,170,255,0.55) !important;
        box-shadow: inset 0 -2px 0 rgba(150,200,255,0.95) !important;
      }

      /* ── File panel: de-glass, flat, subtle border ── */
      .nexus-file-panel {
        border-radius: 6px !important;
        background: rgba(146,180,255,0.05) !important;
        border: 1px solid rgba(125,160,220,0.18) !important;
        border-top-color: rgba(125,160,220,0.18) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
      }
      .nexus-file-action {
        border-radius: 5px !important;
        font-weight: 650 !important;
        border-color: rgba(160,195,245,0.26) !important;
      }
      .nexus-file-action:hover {
        background: rgba(120,170,255,0.12) !important;
        border-color: rgba(120,170,255,0.5) !important;
      }

      /* ── Workspace surface: flat white, drop the faint blue top glow ── */
      .nexus-workspace-shell {
        background: #ffffff !important;
        box-shadow: none !important;
      }

      /* ── KPI cards: flatter, tighter radius, lighter shadow ── */
      .kpi-tile {
        border-radius: 7px !important;
        padding: 12px 14px !important;
        box-shadow: 0 1px 2px rgba(11,26,56,0.05) !important;
      }
      .kpi-tile:hover { box-shadow: 0 1px 4px rgba(11,26,56,0.08) !important; }
      /* Inline-styled forecast KPI cards (borderRadius:8 in JS) — match + flatten */
      #root div[style*="borderRadius:8"][style*="padding"],
      #root div[style*="border-radius: 8px"][style*="padding: 13px"] {
        border-radius: 7px !important;
        box-shadow: 0 1px 2px rgba(11,26,56,0.05) !important;
      }
      /* KPI top accent strip — thinner, squared, sharper (was a loud 4px) */
      div[style*="gridTemplateColumns:repeat(7"] > div > div:first-child,
      div[style*="gridTemplateColumns: repeat(7"] > div > div:first-child {
        height: 3px !important;
        border-radius: 0 !important;
      }

      /* ── Account table: reinforce the signature left status strip + faint
         brand underline under the header. Status colors/widths/logic stay
         in JS; this only thickens the existing inline left accent 3px→4px
         and adds a restrained header accent. No data or column changes. ── */
      .acct-table tbody td:first-child { border-left-width: 4px !important; }
      .acct-table thead th { box-shadow: inset 0 -2px 0 rgba(29,78,216,0.16); }

      /* ── Buttons: quieter secondary hover (no shadow lift) ── */
      .ws-btn:hover { box-shadow: none !important; }


      /* ════════════════════════════════════════════════════════════════
         TERRITORYDB IDENTITY PASS 2 — visual identity only, appended last
         so it wins the cascade. CSS-only; no layout/logic/data/behavior
         changes. Goal: move off the generic royal-blue SaaS look toward a
         restrained, dense "sales command center" identity — deep near-black
         navy chrome, muted steel-blue accent, squared command tabs, flatter
         operational tiles, structured table rails. Desktop .nexus-* chrome
         only; mobile .tdb-mobile-* is left untouched.
         Identity tokens (literals, applied directly so nothing leaks into
         inline-styled app code): ink navy #07142a/#050d1c · panel slate
         #13243f · steel accent #5b8fd6 · active slate fill #15294a.
         ════════════════════════════════════════════════════════════════ */

      /* ── BUG FIX: wordmark "DB" was a clipped gradient that painted a solid
         blue box when text-clip didn't apply. Render it as solid steel text
         so the brand always reads "TerritoryDB". ── */
      .nexus-logo-accent {
        margin-left: 2px !important;
        background: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        -webkit-text-fill-color: #5b8fd6 !important;
        color: #5b8fd6 !important;
        text-shadow: none !important;
      }

      /* ── Header: deeper near-black navy command rail, muted accent line ── */
      .nexus-premium-header {
        background: linear-gradient(180deg, #07142a 0%, #050d1c 100%) !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.40), 0 1px 6px rgba(2,8,20,0.30) !important;
      }
      .nexus-premium-header::after {
        height: 1px !important;
        background: linear-gradient(90deg,
          rgba(91,143,214,0.00) 0%,
          rgba(91,143,214,0.35) 22%,
          rgba(120,165,225,0.55) 50%,
          rgba(91,143,214,0.35) 78%,
          rgba(91,143,214,0.00) 100%) !important;
        box-shadow: none !important;
      }
      .nexus-header-inner { padding: 9px 22px 9px 22px !important; }

      /* ── Logo chip: flat slate/steel, less royal ── */
      .nexus-logo-icon {
        background: linear-gradient(180deg, #335f93 0%, #21456f 100%) !important;
        box-shadow: 0 0 0 1px rgba(120,150,190,0.18), inset 0 1px 0 rgba(255,255,255,0.10) !important;
      }
      .nexus-logo-text { font-size: 22px !important; }
      .nexus-brand-tagline { color: rgba(150,175,210,0.62) !important; }

      /* ── Nav tabs: squared command buttons; restrained contained active ── */
      .nexus-tab {
        border-radius: 5px !important;
        border: 1px solid rgba(110,140,180,0.16) !important;
        background: rgba(120,150,190,0.05) !important;
        color: rgba(214,226,244,0.92) !important;
        box-shadow: none !important;
      }
      .nexus-tab:hover {
        background: rgba(120,150,190,0.11) !important;
        border-color: rgba(120,150,190,0.34) !important;
        transform: none !important;
      }
      .nexus-tab.active {
        background: #15294a !important;
        color: #ffffff !important;
        border-color: rgba(91,143,214,0.45) !important;
        box-shadow: inset 0 -2px 0 #5b8fd6, inset 3px 0 0 rgba(91,143,214,0.55) !important;
      }

      /* ── Settings button: squared dark slate, matching active ── */
      .nexus-settings-button {
        border-radius: 5px !important;
        background: rgba(120,150,190,0.05) !important;
        border: 1px solid rgba(110,140,180,0.18) !important;
        border-top-color: rgba(110,140,180,0.18) !important;
        box-shadow: none !important;
      }
      .nexus-settings-button:hover {
        background: rgba(120,150,190,0.11) !important;
        border-color: rgba(120,150,190,0.34) !important;
        transform: none !important;
      }
      .nexus-settings-button.active {
        background: #15294a !important;
        border-color: rgba(91,143,214,0.45) !important;
        box-shadow: inset 0 -2px 0 #5b8fd6 !important;
      }

      /* ── File panel: flat slate ── */
      .nexus-file-panel {
        border-radius: 5px !important;
        background: rgba(120,150,190,0.045) !important;
        border: 1px solid rgba(110,140,180,0.16) !important;
        border-top-color: rgba(110,140,180,0.16) !important;
        box-shadow: none !important;
      }
      .nexus-file-action { border-radius: 4px !important; border-color: rgba(120,150,190,0.22) !important; }
      .nexus-file-action:hover { background: rgba(91,143,214,0.12) !important; border-color: rgba(91,143,214,0.5) !important; }

      /* ── KPI cards: flat operational tiles ── */
      .kpi-tile {
        border-radius: 6px !important;
        box-shadow: inset 0 0 0 1px rgba(11,26,56,0.05), 0 1px 1px rgba(11,26,56,0.04) !important;
      }
      .kpi-tile:hover { box-shadow: inset 0 0 0 1px rgba(63,114,173,0.20), 0 1px 3px rgba(11,26,56,0.07) !important; }
      #root div[style*="borderRadius:8"][style*="padding"],
      #root div[style*="border-radius: 8px"][style*="padding: 13px"] {
        border-radius: 6px !important;
        box-shadow: inset 0 0 0 1px rgba(11,26,56,0.05), 0 1px 1px rgba(11,26,56,0.04) !important;
      }
      /* Home KPI colored top strip → short top-left corner marker (less SaaS) */
      div[style*="gridTemplateColumns:repeat(7"] > div > div:first-child,
      div[style*="gridTemplateColumns: repeat(7"] > div > div:first-child {
        height: 3px !important;
        width: 26px !important;
        border-radius: 0 !important;
      }
      /* Home KPI value — tighter, less oversized */
      div[style*="gridTemplateColumns:repeat(7"] > div > div:nth-child(3),
      div[style*="gridTemplateColumns: repeat(7"] > div > div:nth-child(3) {
        font-size: 25px !important;
      }

      /* ── Account table: structured rails + crisper, less-pastel framing ── */
      .acct-table thead th {
        background: #eef2f7 !important;
        border-bottom: 2px solid #c6d2e0 !important;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        box-shadow: inset 0 -3px 0 rgba(63,114,173,0.18);
      }
      .acct-table td { border-right-color: #e3e8ef !important; }
      /* Signature left status rail — keep the inline action color, give it presence */
      .acct-table tbody td:first-child { border-left-width: 4px !important; }
      .acct-table tbody tr { transition: background 0.1s; }

      /* ── Forecast: structured pipeline sections, flat panels ── */
      .forecast-q-section {
        border-radius: 7px !important;
        border-top: 2px solid rgba(63,114,173,0.45) !important;
        box-shadow: inset 0 0 0 1px rgba(11,26,56,0.05), 0 1px 2px rgba(11,26,56,0.05) !important;
      }
      .forecast-thead th {
        background: #eef2f7 !important;
        color: #5b6b82 !important;
        border-bottom: 2px solid #c6d2e0 !important;
      }
      .forecast-row:hover { background: #eef3fb !important; }

      /* ── Home hero shimmer: off (flat panel, no moving sheen) ── */
      .tdb-hero-shimmer { display: none !important; }

      /* ── Buttons: keep secondary hovers quiet ── */
      .ws-btn:hover { box-shadow: none !important; }


      /* ════════════════════════════════════════════════════════════════
         TERRITORYDB IDENTITY PASS 3 — command-board identity. CSS-only,
         appended last (wins cascade). No layout/logic/data/behavior change.
         Moves: (1) cool, lightly-structured workspace field instead of warm
         gray + floating white cards; (2) KPI tiles get a steel LEFT accent
         line instead of a colored top strip; (3) the account status rail +
         table read as a command board; (4) panels anchored with borders,
         not heavy shadows. Desktop chrome only; mobile .tdb-mobile-* left
         untouched. Identity steel accent #3f72ad.
         ════════════════════════════════════════════════════════════════ */

      /* ── Workspace field: cooler slate with a very faint structural grid.
         Tiles + tables sit on it as bordered panels (not floating). ── */
      body {
        background-color: #e7ebf3 !important;
        background-image:
          linear-gradient(rgba(38,66,110,0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(38,66,110,0.045) 1px, transparent 1px) !important;
        background-size: 32px 32px !important;
        background-attachment: fixed !important;
      }
      /* Accounts shell shows the field instead of a white slab */
      .nexus-workspace-shell {
        background: transparent !important;
        box-shadow: none !important;
      }

      /* ── KPI tiles: operational metric tiles. Drop the colored top strip,
         add a consistent steel LEFT accent line, square + anchor them. ── */
      div[style*="gridTemplateColumns:repeat(7"] > div,
      div[style*="gridTemplateColumns: repeat(7"] > div {
        border-left: 3px solid #3f72ad !important;
        border-radius: 5px !important;
        box-shadow: inset 0 0 0 1px rgba(11,26,56,0.06) !important;
        background: #ffffff !important;
      }
      /* hide the old colored top strip (first child block) */
      div[style*="gridTemplateColumns:repeat(7"] > div > div:first-child,
      div[style*="gridTemplateColumns: repeat(7"] > div > div:first-child {
        display: none !important;
      }
      /* faint divider beneath the uppercase label, value stays strong */
      div[style*="gridTemplateColumns:repeat(7"] > div > div:nth-child(2),
      div[style*="gridTemplateColumns: repeat(7"] > div > div:nth-child(2) {
        border-bottom: 1px solid rgba(38,66,110,0.09) !important;
        padding-bottom: 7px !important;
        margin-bottom: 8px !important;
      }
      /* .kpi-tile (Forecast / AE tiles) — same steel left accent, flat */
      .kpi-tile {
        border-left: 3px solid #3f72ad !important;
        border-radius: 6px !important;
        box-shadow: inset 0 0 0 1px rgba(11,26,56,0.05) !important;
      }
      .kpi-tile:hover { box-shadow: inset 0 0 0 1px rgba(63,114,173,0.22) !important; }
      /* Forecast KPI inline cards (borderRadius:8 in JS) — steel left accent */
      #root div[style*="borderRadius:8"][style*="padding"] {
        border-left: 3px solid #3f72ad !important;
        border-radius: 6px !important;
        box-shadow: inset 0 0 0 1px rgba(11,26,56,0.05) !important;
      }

      /* ── Account table: command board. Stronger left status rail, crisp
         structure; the table reads as one anchored panel on the field. ── */
      .acct-table tbody td:first-child { border-left-width: 4px !important; }
      .acct-table thead th {
        background: #e9eef4 !important;
        border-bottom: 2px solid #c2cedd !important;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        box-shadow: inset 0 -3px 0 rgba(63,114,173,0.22);
      }
      .acct-table td { border-right-color: #e1e7ef !important; }

      /* ── Panels anchored with borders, not heavy shadows ── */
      .ds-card { box-shadow: none !important; border-color: #d7dfea !important; border-radius: 8px !important; }
      .todo-card { box-shadow: inset 0 0 0 1px rgba(11,26,56,0.05) !important; }

      /* ── Nav: a touch more squared for the command-tab feel ── */
      .nexus-tab { border-radius: 4px !important; }
      .nexus-settings-button, .nexus-file-panel { border-radius: 4px !important; }

      /* ── Forecast rows/headers: cooler, structured, connected to Accounts ── */
      .forecast-thead th {
        background: #e9eef4 !important;
        color: #5b6b82 !important;
        border-bottom: 2px solid #c2cedd !important;
      }
      .forecast-row:hover { background: #eef3fb !important; }

      /* ════════════════════════════════════════════════════════════════
         HEADER ACTION CONTROLS — native integration. The Save/Save As/Open
         file panel and Settings gear are now shown natively in the header
         (their sr-only hide was removed). This styles the new native Sign
         Out button to match the command bar, and safety-hides any stale
         injected #tdb-ctrl-stack from a cached build (it is no longer
         created). ════════════════════════════════════════════════════════ */
      #tdb-ctrl-stack { display: none !important; }
      .nexus-signout-btn {
        flex: 0 0 auto;
        display: inline-flex; align-items: center; gap: 7px;
        height: 30px; padding: 4px 12px; margin: 0;
        border-radius: 4px;
        border: 1px solid rgba(120,150,190,0.20);
        background: rgba(120,150,190,0.05);
        color: rgba(226,232,240,0.92);
        font-size: 12px; font-weight: 650; font-family: inherit; line-height: 1;
        cursor: pointer; appearance: none; -webkit-appearance: none; outline: none;
        transition: background 0.13s, border-color 0.13s, color 0.13s;
      }
      .nexus-signout-btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.9; }
      .nexus-signout-btn:hover {
        background: rgba(120,30,40,0.30);
        border-color: rgba(248,113,113,0.50);
        color: #fecaca;
      }
      /* ════════════════════════════════════════════════════════════════
         HEADER RIGHT GROUP REFINEMENT — show only Save / Settings / Sign
         Out as the visible header actions. Save As, Open, and the Last
         Saved status are kept in the DOM (so Settings ▸ Workspace Files and
         the mobile menu still proxy/click them) but hidden in the header.
         The three visible controls share one compact command-bar style and
         are ordered Save · Settings · Sign Out via flex order (no DOM move).
         ════════════════════════════════════════════════════════════════ */
      /* File panel becomes a bare inline wrapper around the Save button */
      .nexus-file-panel {
        display: inline-flex !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        border-top-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        gap: 0 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
      }
      /* Hide Save As (2nd) + Open (3rd) + the Last Saved status in the header */
      .nexus-file-panel .nexus-file-action:nth-of-type(2),
      .nexus-file-panel .nexus-file-action:nth-of-type(3) { display: none !important; }
      .nexus-last-saved { display: none !important; }

      /* Shared compact command-bar look for the three visible actions */
      .nexus-file-panel .nexus-file-action,
      .nexus-settings-button,
      .nexus-signout-btn {
        height: 30px !important;
        padding: 4px 12px !important;
        margin: 0 !important;
        border-radius: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        background: rgba(120,150,190,0.05) !important;
        border: 1px solid rgba(120,150,190,0.20) !important;
        box-shadow: none !important;
        color: rgba(226,232,240,0.92) !important;
        font-size: 12px !important;
        font-weight: 650 !important;
        font-family: inherit !important;
        line-height: 1 !important;
        cursor: pointer;
      }
      /* Settings: convert the old icon-only box into a compact labeled button */
      .nexus-settings-button {
        width: auto !important;
        border-top-color: rgba(120,150,190,0.20) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
      }
      .nexus-settings-button svg,
      .nexus-file-panel .nexus-file-action svg,
      .nexus-signout-btn svg { width: 14px !important; height: 14px !important; flex-shrink: 0; }
      .nexus-set-lbl { font-family: inherit; }

      /* Hover: Save + Settings steel-blue; Sign Out red */
      .nexus-file-panel .nexus-file-action:hover,
      .nexus-settings-button:hover {
        background: rgba(91,143,214,0.14) !important;
        border-color: rgba(91,143,214,0.45) !important;
        transform: none !important;
      }
      .nexus-settings-button.active {
        background: #15294a !important;
        border-color: rgba(91,143,214,0.45) !important;
        box-shadow: inset 0 -2px 0 #5b8fd6 !important;
        color: #fff !important;
      }
      .nexus-signout-btn:hover {
        background: rgba(120,30,40,0.30) !important;
        border-color: rgba(248,113,113,0.50) !important;
        color: #fecaca !important;
      }

      /* Order the right group: Save · Settings · Sign Out (visual only) */
      .nexus-file-panel    { order: 1 !important; }
      .nexus-settings-button { order: 2 !important; }
      .nexus-signout-btn   { order: 3 !important; }
      /* Utility shrink tiers — Save/Settings/Sign Out stay pinned right:
         Tier 1 (<=1500px): compact padding + smaller type, tighter gap.
         Tier 2 (<=1280px): icon-only buttons; brand tagline hides; nav
         tracks narrow slightly. Below 1024px the existing hamburger
         header takes over entirely (final fallback). */
      @media (max-width: 1500px) {
        .nexus-util-region { gap: 8px; }
        .nexus-file-panel .nexus-file-action,
        .nexus-settings-button,
        .nexus-signout-btn {
          padding: 4px 8px !important;
          font-size: 11.5px !important;
        }
      }
      @media (max-width: 1280px) {
        .nexus-set-lbl { display: none !important; }
        .nexus-file-panel .nexus-file-action span { display: none !important; }
        .nexus-signout-btn span { display: none !important; }
        .nexus-brand-tagline { display: none; }
        .nexus-tab { min-width: 0; padding: 7px 10px; }
        .nexus-tab-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 146px)); }
      }
      /* ════════════════════════════════════════════════════════════════
         READABILITY PASS — typography + contrast only, appended last.
         Larger small-caps labels, stronger muted text, legible tagline and
         action labels. No layout, data, or behavior changes.
         ════════════════════════════════════════════════════════════════ */
      /* Small uppercase labels were too tiny/pale to scan */
      .kpi-tile .kpi-label {
        font-size: 11px !important;
        letter-spacing: 0.4px !important;
        color: #5b6b82 !important;
      }
      .kpi-tile .kpi-value { font-size: 19px !important; }
      .forecast-thead th {
        font-size: 11px !important;
        letter-spacing: 0.4px !important;
        color: #5b6b82 !important;
      }
      .acct-table thead th {
        font-size: 11px !important;
        letter-spacing: 0.03em !important;
        color: #4a5a72 !important;
      }
      /* Home KPI (repeat-7) label: a touch stronger contrast */
      div[style*="gridTemplateColumns:repeat(7"] > div > div:nth-child(2),
      div[style*="gridTemplateColumns: repeat(7"] > div > div:nth-child(2) {
        color: #3f526f !important;
      }
      /* Header tagline: subdued but legible (was 8px, very faint) */
      .nexus-brand-tagline {
        font-size: 9px !important;
        color: rgba(176,198,230,0.80) !important;
        letter-spacing: 0.18em !important;
      }
      /* Nav + right-group action labels: crisp and not cramped */
      .nexus-tab { font-size: 13px !important; }
      .nexus-file-panel .nexus-file-action,
      .nexus-settings-button,
      .nexus-signout-btn { font-size: 12.5px !important; }
      /* Forecast deal rows: firm dark text */
      .forecast-row td { color: #1e293b !important; }

      /* ════════════════════════════════════════════════════════════════
         UI CLEANUP PASS — appended last so it wins the cascade. CSS only.
         (1) Defensive kill of any legacy decorative accent strips on KPI
         tiles (the live inline rails were removed at the source in JS).
         No black replacements — cards keep their light backgrounds and
         normal 1px neutral borders. (2) Readability: body/table text a
         touch darker, muted/labels less pale, headers easier to scan.
         Functional status colors (Action rail, Won/Lost, badges, warn/
         error states) are untouched. No layout, logic, or data changes. */
      .kpi-tile::before { display: none !important; background: none !important; }
      .kpi-tile { border-left-width: 1px !important; }

      /* Table headers: a hair larger and meaningfully darker */
      .acct-table thead th {
        color: #64748b !important;
        font-size: 11px !important;
      }
      .forecast-thead th { color: #46556b !important; }

      /* Body/table text: clearer without bulking up */
      .acct-table tbody td { color: #1e293b; }
      .acct-table select, .acct-table input { font-weight: 500; }

      /* Section + bucket headers: less washed out */
      .setup-head { color: #51617c !important; }
      .q-section-btn { color: #2b3a52 !important; font-weight: 700 !important; }

      /* KPI labels rendered with class hooks */
      .kpi-tile .kpi-label { color: #4d5d76 !important; }
      .kpi-tile .kpi-value { color: #0f172a !important; }

      /* One-time feature highlight pulse (announcement "Show me") */
      @keyframes tdbFeaturePulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}50%{box-shadow:0 0 0 7px rgba(37,99,235,0.32);}}
      .tdb-feature-pulse{animation:tdbFeaturePulse 1.1s ease-in-out 4 !important;border-color:#2563eb !important;color:#2563eb !important;}

      /* ── Accounts card-rows (final override; last in cascade so it wins
            across every theme block; scoped to .acct-data-row so the inline
            Next Steps expansion row and the add-sub form row are untouched) ── */
      table.acct-table { border-spacing: 0 8px !important; }
      .acct-table tbody tr.acct-data-row > td {
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        border-top: 0.5px solid #e6eaf0 !important;
        border-bottom: 0.5px solid #e6eaf0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        padding: 7px 12px !important;
      }
      .acct-table tbody tr.acct-data-row > td:first-child {
        position: relative !important;
        border-left: 0.5px solid #e6eaf0 !important;
        border-top-left-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
        padding-left: 18px !important;
      }
      .acct-table tbody tr.acct-data-row > td:last-child {
        border-right: 0.5px solid #e6eaf0 !important;
        border-top-right-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
      }
      .acct-table tbody tr.acct-data-row:hover > td { background: #f6f8fb !important; }
      /* FIX 1 — the first data row sits directly beneath the dark navy header, so its standard light card border (same #e6eaf0 as every other row) reads as a harsh bright line against the navy instead of the soft low-contrast edge it shows between cards. Drop only the first row's top border-color so it matches the others' clean card look (radius + shadow + side/bottom borders keep the card shape). */
      .acct-table tbody tr.acct-data-row:first-child > td { border-top-color: transparent !important; }

      /* ── Accounts header: on-brand light accent wash + deep-navy labels.
         Brand accent #5b8fd6 = rgb(91,143,214); brand navy #07142a. Appended
         last so it overrides the earlier gray-blue header rules. ── */
      /* Header bar matches the logo "T" square's deep navy exactly: solid
         #21456f, white labels, thin steel underline. Same navy the page
         background is tinted toward, so brand mark, header, and bg align. */
      table.acct-table thead th {
        background: var(--tdb-header-navy) !important; /* lighter nav navy, single-sourced */
        color: #F8FAFC !important;
      }
      table.acct-table thead tr {
        background: var(--tdb-header-navy) !important; /* lighter nav navy, single-sourced (was #21456f) */
        border-bottom: 1px solid rgba(91,143,214,0.55) !important;
      }
      /* Round the Column Header band corners (both light + dark). border-spacing separates the header into its own band, so rounding the outer th corners rounds the whole bar. */
      table.acct-table thead th:first-child { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; }
      table.acct-table thead th:last-child { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; }
      /* ── Accounts rows: uniform white cards on the blue-tinted page; row
         separation comes from the card shadow + border + gap (no zebra). ── */
      .acct-table tbody tr.acct-data-row { background: #ffffff !important; }
      .acct-table tbody tr.acct-data-row:hover > td { background: rgba(91,143,214,0.14) !important; }

      /* Perfectly center column headers regardless of theme: the label gets a
         fixed letter-spacing plus an equal left pad, so the trailing
         letter-spacing after the last character is balanced by an equal lead.
         A direct declaration on the span beats the theme's inherited value. */
      .acct-table thead th .tdb-th-label { display: inline-block; letter-spacing: 0.6px !important; padding-left: 0.6px; }

      /* ===================================================================
         DARK MODE  —  html[data-theme="dark"]  (light mode = default, untouched)
         Matte enterprise theme: layered charcoal/slate surfaces, muted accents,
         soft borders. Inline colors remapped via property-aware attribute
         selectors (color: vs background:). Tokens —
         bg #0B0F16 · main #121722 · card var(--tdb-card-dark) · row #151B26 / alt #111722 ·
         border rgba(148,163,184,.16/.32) · text #E6EDF7 / #A8B3C7 / #718096 ·
         accent #5B8DEF.
         =================================================================== */
      html[data-theme="dark"]{ color-scheme:dark;
        --bg:#0B0F16; --surface:#121722; --surface-2:var(--tdb-card-dark); --surface-3:var(--tdb-card-dark);
        --border-soft:rgba(148,163,184,0.16); --border:rgba(148,163,184,0.16);
        --text-primary:#E6EDF7; --text-secondary:#A8B3C7; --text-muted:#718096; --text-faint:#718096; }

      /* page = deepest (#0B0F16); shell = main surface (#121722) */
      html[data-theme="dark"] body,
      html[data-theme="dark"] #root > div{ background:#090D14 !important; }
      html[data-theme="dark"] main,
      html[data-theme="dark"] main > div[style*="overflowY"]{ background:#121722 !important; }
      html[data-theme="dark"] .nexus-workspace-shell{ background:transparent !important; }

      /* TEXT scale */
      html[data-theme="dark"] [style*="color: rgb(15, 23, 42)"],
      html[data-theme="dark"] [style*="color: rgb(30, 41, 59)"],
      html[data-theme="dark"] [style*="color: rgb(31, 41, 55)"],
      html[data-theme="dark"] [style*="color: rgb(17, 24, 39)"]{ color:#E6EDF7 !important; }
      html[data-theme="dark"] [style*="color: rgb(51, 65, 85)"],
      html[data-theme="dark"] [style*="color: rgb(71, 85, 105)"]{ color:#A8B3C7 !important; }
      html[data-theme="dark"] [style*="color: rgb(100, 116, 139)"],
      html[data-theme="dark"] [style*="color: rgb(126, 138, 153)"],
      html[data-theme="dark"] [style*="color: rgb(148, 163, 184)"]{ color:#718096 !important; }

      /* white surfaces -> elevated card var(--tdb-card-dark) */
      html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
      html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"],
      html[data-theme="dark"] [style*="background: rgb(250, 251, 252)"]{ background-color:var(--tdb-card-dark) !important; }
      /* Fix 2 (real cause): KPI tiles have NO .kpi-tile class — the tile div uses inline background:#fff with a unique height:72px. Prior .kpi-tile edits hit a dead selector. Target the tile directly and raise it to the shared row/card surface. Accent stripes (separate 3px children) untouched. */
      html[data-theme="dark"] [style*="height: 72px"][style*="background: rgb(255, 255, 255)"]{ background:var(--tdb-card-dark) !important; border:1px solid rgba(148,163,184,0.16) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 3px 8px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.48) !important; }
      /* light-gray sections -> main surface #121722 */
      html[data-theme="dark"] [style*="background: rgb(248, 250, 252)"],
      html[data-theme="dark"] [style*="background: rgb(241, 245, 249)"],
      html[data-theme="dark"] [style*="background: rgb(245, 247, 250)"],
      html[data-theme="dark"] [style*="background: rgb(244, 246, 249)"],
      html[data-theme="dark"] [style*="background: rgb(249, 250, 251)"],
      html[data-theme="dark"] [style*="background: rgb(244, 247, 251)"],
      html[data-theme="dark"] [style*="background: rgb(243, 244, 246)"],
      html[data-theme="dark"] [style*="background: rgb(237, 242, 247)"],
      html[data-theme="dark"] [style*="background: rgb(238, 241, 246)"],
      html[data-theme="dark"] [style*="background: rgb(240, 244, 248)"],
      html[data-theme="dark"] [style*="background: rgb(247, 249, 252)"]{ background-color:#121722 !important; }
      html[data-theme="dark"] [style*="background: rgb(246, 248, 251)"]{ background-color:#1B2230 !important; }
      html[data-theme="dark"] [style*="background: rgb(238, 242, 248)"]{ background-color:#0B0F16 !important; }

      /* neutral borders -> soft slate */
      html[data-theme="dark"] [style*="solid rgb(226, 232, 240)"],
      html[data-theme="dark"] [style*="solid rgb(232, 237, 242)"],
      html[data-theme="dark"] [style*="solid rgb(230, 234, 240)"],
      html[data-theme="dark"] [style*="solid rgb(238, 241, 246)"],
      html[data-theme="dark"] [style*="solid rgb(203, 213, 225)"],
      html[data-theme="dark"] [style*="solid rgb(208, 216, 228)"],
      html[data-theme="dark"] [style*="dashed rgb(226, 232, 240)"]{ border-color:rgba(148,163,184,0.18) !important; }

      /* ===== muted badge / pill tints ===== */
      html[data-theme="dark"] [style*="background: rgb(240, 253, 244)"],
      html[data-theme="dark"] [style*="background: rgb(220, 252, 231)"],
      html[data-theme="dark"] [style*="background: rgb(209, 250, 229)"],
      html[data-theme="dark"] [style*="background: rgb(236, 253, 245)"]{ background-color:#14301f !important; }
      html[data-theme="dark"] [style*="color: rgb(22, 163, 74)"],
      html[data-theme="dark"] [style*="color: rgb(21, 128, 61)"],
      html[data-theme="dark"] [style*="color: rgb(22, 101, 52)"]{ color:#86efac !important; }
      html[data-theme="dark"] [style*="solid rgb(134, 239, 172)"],
      html[data-theme="dark"] [style*="solid rgb(187, 247, 208)"]{ border-color:rgba(74,222,128,0.30) !important; }
      html[data-theme="dark"] [style*="background: rgb(254, 226, 226)"]{ background-color:#3a1717 !important; }
      html[data-theme="dark"] [style*="color: rgb(185, 28, 28)"],
      html[data-theme="dark"] [style*="color: rgb(153, 27, 27)"]{ color:#fca5a5 !important; }
      html[data-theme="dark"] [style*="solid rgb(252, 165, 165)"],
      html[data-theme="dark"] [style*="solid rgb(254, 202, 202)"]{ border-color:rgba(248,113,113,0.30) !important; }
      html[data-theme="dark"] [style*="background: rgb(219, 234, 254)"],
      html[data-theme="dark"] [style*="background: rgb(224, 242, 254)"]{ background-color:#1b2740 !important; }
      html[data-theme="dark"] [style*="background: rgb(239, 246, 255)"]{ background-color:#161d2b !important; }
      html[data-theme="dark"] [style*="color: rgb(37, 99, 235)"],
      html[data-theme="dark"] [style*="color: rgb(29, 78, 216)"]{ color:#93c5fd !important; }
      html[data-theme="dark"] [style*="solid rgb(191, 219, 254)"],
      html[data-theme="dark"] [style*="solid rgb(147, 197, 253)"]{ border-color:rgba(91,141,239,0.30) !important; }
      html[data-theme="dark"] [style*="background: rgb(237, 233, 254)"],
      html[data-theme="dark"] [style*="background: rgb(243, 232, 255)"]{ background-color:#241b3a !important; }
      html[data-theme="dark"] [style*="color: rgb(124, 58, 237)"],
      html[data-theme="dark"] [style*="color: rgb(147, 51, 234)"]{ color:#d8b4fe !important; }
      html[data-theme="dark"] [style*="background: rgb(255, 237, 213)"]{ background-color:#3a2410 !important; }
      html[data-theme="dark"] [style*="color: rgb(234, 88, 12)"],
      html[data-theme="dark"] [style*="color: rgb(154, 52, 18)"]{ color:#fdba74 !important; }
      /* gray tint + partner chip -> matte blue-gray */
      html[data-theme="dark"] [style*="background: rgb(226, 232, 240)"]{ background-color:#1b2230 !important; }
      html[data-theme="dark"] [style*="background: rgb(226, 232, 240)"][style*="color: rgb(51, 65, 85)"]{ background-color:#1e2a44 !important; border:1px solid rgba(91,141,239,0.28) !important; color:#A8B3C7 !important; }
      html[data-theme="dark"] [style*="background: rgb(240, 247, 255)"]{ background-color:#151d2c !important; }

      /* ===== muted YELLOW notice / alert banners (incl. gradients) ===== */
      html[data-theme="dark"] [style*="rgb(255, 251, 235)"],
      html[data-theme="dark"] [style*="rgb(254, 243, 199)"],
      html[data-theme="dark"] [style*="rgb(255, 247, 237)"],
      html[data-theme="dark"] [style*="rgb(254, 252, 232)"],
      html[data-theme="dark"] [style*="rgb(254, 249, 195)"]{ background:#2e2608 !important; }
      html[data-theme="dark"] [style*="solid rgb(253, 230, 138)"],
      html[data-theme="dark"] [style*="solid rgb(252, 211, 77)"]{ border-color:rgba(250,204,21,0.28) !important; }
      html[data-theme="dark"] [style*="color: rgb(120, 53, 15)"],
      html[data-theme="dark"] [style*="color: rgb(146, 64, 14)"],
      html[data-theme="dark"] [style*="color: rgb(133, 77, 14)"],
      html[data-theme="dark"] [style*="color: rgb(180, 83, 9)"],
      html[data-theme="dark"] [style*="color: rgb(161, 98, 7)"]{ color:#fde68a !important; }

      /* ===== HEAT MAP — muted urgency (kills the candy colors) ===== */
      html[data-theme="dark"] [style*="background: rgb(220, 38, 38)"]{ background-color:#7F1D1D !important; }
      html[data-theme="dark"] [style*="background: rgb(249, 115, 22)"]{ background-color:#7C3E0A !important; }
      html[data-theme="dark"] [style*="background: rgb(234, 179, 8)"]{ background-color:#713F12 !important; }
      html[data-theme="dark"] [style*="background: rgb(22, 163, 74)"]{ background-color:#14532D !important; }
      html[data-theme="dark"] [style*="background: rgb(148, 163, 184)"]{ background-color:#1E293B !important; }
      html[data-theme="dark"] [style*="background: rgb(254, 242, 242)"]{ background-color:#3a1717 !important; }

      /* ===== PRIMARY blue buttons -> muted matte blue ===== */
      html[data-theme="dark"] [style*="background: rgb(37, 99, 235)"],
      html[data-theme="dark"] [style*="background: rgb(59, 130, 246)"],
      html[data-theme="dark"] [style*="background: rgb(0, 87, 255)"],
      html[data-theme="dark"] [style*="background: rgb(22, 119, 255)"]{ background:#2f4d86 !important; box-shadow:none !important; }


      /* ===== Accounts table — matte zebra cards, soft dividers ===== */
      html[data-theme="dark"] table.acct-table thead th{ background:#152033 !important; color:#F8FAFC !important; border-bottom-color:rgba(148,163,184,0.18) !important; } /* darker nav-bar navy (lower nav bar / .nexus-save-status-bar) */
      html[data-theme="dark"] .acct-table tbody tr.acct-data-row,
      html[data-theme="dark"] .acct-table tbody tr.acct-data-row > td{ background:var(--tdb-card-dark) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.32) !important; }
      html[data-theme="dark"] .acct-table{ background:#111827 !important; }
      /* Zebra striping removed — all dark Accounts rows use the lighter #232c3d set on the base rule above. */
      html[data-theme="dark"] .acct-table tbody tr.acct-data-row > td{ border-top-color:rgba(148,163,184,0.12) !important; border-bottom-color:rgba(148,163,184,0.12) !important; border-left-color:transparent !important; border-right-color:transparent !important; box-shadow:0 1px 2px rgba(0,0,0,0.35) !important; }
      /* FIX 1 (dark) — same first-row fix in dark mode: its light steel top border pops against the navy header. Higher specificity (:first-child) wins over the row rule above. */
      html[data-theme="dark"] .acct-table tbody tr.acct-data-row:first-child > td{ border-top-color:transparent !important; }
      html[data-theme="dark"] .acct-table tbody tr.acct-data-row:hover > td,
      html[data-theme="dark"] .acct-table tbody tr.acct-data-row.acct-row-even:hover > td{ background:#2c3a4f !important; }

      /* KPI tiles -> matte card */
      html[data-theme="dark"] .kpi-tile{ background:var(--tdb-card-dark) !important; border-color:rgba(148,163,184,0.16) !important; box-shadow:0 1px 3px rgba(0,0,0,0.35) !important; }

      /* Forecast rows: same raised card surface as Accounts. Fix 1 retry: prior .forecast-row selector missed forecast tables whose rows have NO className; both forecast tables are uniquely identifiable by inline min-width:680px (Accounts table does not use it). Dark-only, no render or light-mode change. */
      html[data-theme="dark"] table[style*="min-width: 680px"] tbody tr td{ background:var(--tdb-card-dark) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.32) !important; border-bottom:1px solid rgba(148,163,184,0.12) !important; }
      /* Forecast row hover */
      html[data-theme="dark"] table[style*="min-width: 680px"] tbody tr:hover td{ background:#2c3a4f !important; }

      /* Saved status bar */
      html[data-theme="dark"] .nexus-save-status-bar{ background:#152033 !important; }

      /* ===== Header / nav — matte (no layout change, colors only) ===== */
      html[data-theme="dark"] .nexus-premium-header{ background:#0E1320 !important; border-bottom:1px solid rgba(148,163,184,0.12) !important; box-shadow:none !important; }
      html[data-theme="dark"] .nexus-tab{ background:transparent !important; border-color:rgba(148,163,184,0.12) !important; color:#A8B3C7 !important; box-shadow:none !important; }
      html[data-theme="dark"] .nexus-tab:hover{ background:rgba(91,141,239,0.12) !important; color:#E6EDF7 !important; }
      html[data-theme="dark"] .nexus-tab.active{ background:rgba(91,141,239,0.18) !important; border-color:rgba(91,141,239,0.45) !important; color:#E6EDF7 !important; box-shadow:inset 0 -2px 0 rgba(91,141,239,0.65) !important; }
      html[data-theme="dark"] .nexus-settings-button{ background:transparent !important; border-color:rgba(148,163,184,0.12) !important; color:#A8B3C7 !important; box-shadow:none !important; }
      html[data-theme="dark"] .nexus-settings-button.active{ background:rgba(91,141,239,0.18) !important; border-color:rgba(91,141,239,0.45) !important; color:#E6EDF7 !important; }

      /* ===== Inputs / selects / search — dark matte + focus ring ===== */
      html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select,
      html[data-theme="dark"] input[style], html[data-theme="dark"] textarea[style], html[data-theme="dark"] select[style]{ background-color:#0F1520 !important; color:#E6EDF7 !important; -webkit-text-fill-color:#E6EDF7 !important; border:1px solid rgba(148,163,184,0.22) !important; border-radius:var(--radius-xs) !important; box-shadow:none !important; }
      /* Fix 3: gray dashed +Add buttons -> solid soft (dark). Blue #93c5fd CTAs excluded; robust vs Add Sub hover recolor since border-STYLE stays "dashed". */
      html[data-theme="dark"] button[style*="dashed"]:not([style*="147, 197, 253"]){ border:1px solid rgba(148,163,184,0.22) !important; background:rgba(148,163,184,0.10) !important; box-shadow:0 1px 2px rgba(0,0,0,0.28) !important; color:#B7C2D0 !important; }
      html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus,
      html[data-theme="dark"] input[style]:focus, html[data-theme="dark"] textarea[style]:focus, html[data-theme="dark"] select[style]:focus{ border-color:rgba(91,141,239,0.65) !important; box-shadow:0 0 0 3px rgba(91,141,239,0.16) !important; outline:none !important; }
      /* Accounts table dropdowns (Action/Status/Product/QTR): roomier boxes so the words aren't cramped, and a softer fill (#171c28 — a step under the row #1d2330) instead of the harsh near-black, so they read as distinct without being a sore thumb. */
      html[data-theme="dark"] .acct-table select, html[data-theme="dark"] .acct-table select[style]{ padding:5px 9px !important; }
      html[data-theme="dark"] option{ background-color:#0F1520 !important; color:#E6EDF7 !important; }
      html[data-theme="dark"] ::placeholder{ color:#718096 !important; }

      /* Sticky horizontal scrollbar */
      html[data-theme="dark"] .tdb-sticky-hscroll{ background:#0B0F16 !important; border-top-color:rgba(148,163,184,0.16) !important; }
      html[data-theme="dark"] .tdb-sticky-hscroll::-webkit-scrollbar-thumb{ background:#2a3343 !important; border-color:#0B0F16 !important; }
      html[data-theme="dark"] .tdb-sticky-hscroll::-webkit-scrollbar-track{ background:#121722 !important; }

      /* ===================================================================
         DARK MODE — CLASS OVERRIDES (winning layer).
         The matte tokens above remap INLINE colors; this block overrides the
         hardcoded class/attribute CSS rules (with !important) that were winning
         on real surfaces: search bars, table headers, forecast/notes/workspace
         panels, page title, nav. Each selector is html[data-theme="dark"]-scoped
         so light mode is untouched, and carries enough specificity + !important
         to beat the original rules.
         =================================================================== */

      /* ---- Header / nav (exact matte spec) ---- */
      html[data-theme="dark"] .nexus-premium-header{ background:#0D1320 !important; border-bottom:1px solid rgba(148,163,184,0.14) !important; box-shadow:none !important; }
      html[data-theme="dark"] .nexus-tab{ background:rgba(15,22,33,0.75) !important; border-color:rgba(148,163,184,0.14) !important; color:#B4C0D4 !important; box-shadow:none !important; }
      html[data-theme="dark"] .nexus-tab:hover{ background:rgba(107,147,232,0.12) !important; color:#E5ECF6 !important; }
      html[data-theme="dark"] .nexus-tab.active{ background:rgba(107,147,232,0.18) !important; border-color:rgba(107,147,232,0.48) !important; color:#E5ECF6 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04) !important; }
      html[data-theme="dark"] .nexus-file-action,
      html[data-theme="dark"] .nexus-file-panel .nexus-file-action{ background:rgba(148,163,184,0.06) !important; border-color:rgba(148,163,184,0.18) !important; color:#B4C0D4 !important; }
      html[data-theme="dark"] .nexus-file-action:hover,
      html[data-theme="dark"] .nexus-file-panel .nexus-file-action:hover{ background:rgba(107,147,232,0.14) !important; border-color:rgba(107,147,232,0.42) !important; }
      html[data-theme="dark"] div.tdb-mobile-menu{ background:#141b28 !important; border-color:rgba(148,163,184,0.20) !important; box-shadow:0 16px 40px rgba(0,0,0,0.55) !important; }
      html[data-theme="dark"] div.tdb-mobile-menu > div.tdb-mobile-menu-label{ color:#7d8ba1 !important; }
      html[data-theme="dark"] div.tdb-mobile-menu > button.tdb-mobile-menu-item{ color:#a9b6c9 !important; }
      html[data-theme="dark"] div.tdb-mobile-menu > button.tdb-mobile-menu-item:hover{ background:#1a2233 !important; color:#dbe4f0 !important; }
      html[data-theme="dark"] div.tdb-mobile-menu > button.tdb-mobile-menu-item.active{ background:#1b2942 !important; border-left-color:#3b82f6 !important; color:#bfd6ff !important; box-shadow:none !important; }
      html[data-theme="dark"] div.tdb-mobile-menu > div.tdb-mobile-menu-divider{ background:rgba(148,163,184,0.18) !important; }
      html[data-theme="dark"] div.tdb-mobile-menu > div.tdb-mobile-menu-status{ color:#8c9ab0 !important; border-top-color:rgba(148,163,184,0.18) !important; }

      /* ---- Page title ---- */
      html[data-theme="dark"] .nexus-page-title{ color:#E5ECF6 !important; }

      /* ---- Accounts table header (kills the navy #21456f + light gradients) ---- */
      html[data-theme="dark"] .nexus-table-header,
      html[data-theme="dark"] .account-table thead tr,
      html[data-theme="dark"] table.acct-table thead tr{ background:#10151F !important; border-bottom:1px solid rgba(148,163,184,0.24) !important; }
      /* Accounts header row band = same lighter nav navy as the cells (was the hidden #10151F) */
      html[data-theme="dark"] table.acct-table thead tr{ background:#152033 !important; }
      html[data-theme="dark"] .nexus-table-header-cell,
      html[data-theme="dark"] .account-table th,
      html[data-theme="dark"] table.acct-table thead th,
      html[data-theme="dark"] .acct-table thead th{ background:#152033 !important; color:#F8FAFC !important; border-bottom-color:rgba(148,163,184,0.18) !important; box-shadow:none !important; }
      /* account cell + name text readable on dark rows */
      html[data-theme="dark"] table.acct-table tbody tr > td,
      html[data-theme="dark"] table.acct-table tbody tr > td:first-child > div:first-child{ color:#E5ECF6 !important; }

      /* ---- Forecast header / quarter accordion / add-account row ---- */
      html[data-theme="dark"] .forecast-thead th{ background:#152033 !important; color:#F8FAFC !important; border-bottom-color:rgba(148,163,184,0.24) !important; }
      html[data-theme="dark"] .fc-deal-table thead tr{ background:#152033 !important; } /* Forecast column header (DealTableHead): inline #f5f7fa was remapped to the #121722 canvas, so it read as "still dark". Now the darker nav-bar navy. */
      html[data-theme="dark"] .fc-deal-table thead th{ color:#F8FAFC !important; }
      html[data-theme="dark"] .tdb-grid-sep thead th{ background:#152033 !important; color:#F8FAFC !important; } /* Heat Map matrix column headers */
      /* ── Forecast View dark — match the Accounts table: kill the light "white" outlines/dividers, keep dark surfaces + subtle slate borders. Dark-only; light untouched. ── */
      /* Quarter-section box outline (#dfe5ee) + row dividers (#f0f3f7) -> subtle slate, like the Accounts rows. */
      html[data-theme="dark"] [style*="solid rgb(223, 229, 238)"]{ border-color:rgba(148,163,184,0.12) !important; }
      html[data-theme="dark"] [style*="solid rgb(240, 243, 247)"]{ border-color:rgba(148,163,184,0.12) !important; }
      /* Forecast KPI summary cards: subtle slate borders + soft shadow. row-4 has no accent top (all sides safe); row-3 keeps its 3px category accent stripe (top untouched). */
      html[data-theme="dark"] .tdb-forecast-kpi-row-4 > div{ border-color:rgba(148,163,184,0.16) !important; box-shadow:0 1px 2px rgba(0,0,0,0.35) !important; }
      html[data-theme="dark"] .tdb-forecast-kpi-row-3 > div{ border-left-color:rgba(148,163,184,0.16) !important; border-right-color:rgba(148,163,184,0.16) !important; border-bottom-color:rgba(148,163,184,0.16) !important; box-shadow:0 1px 2px rgba(0,0,0,0.35) !important; }
      /* Forecast row hover -> Accounts dark hover (no light flash). */
      html[data-theme="dark"] .forecast-row:hover, html[data-theme="dark"] .forecast-row:hover td{ background:#2c3a4f !important; }

      /* ── Heat Map dark — match the Accounts/Forecast tables: dark surfaces, subtle slate borders, dark view-switcher track, refined status pills. Dark-only; light untouched. ── */
      /* Account Detail / Cleared / Actioned: light surfaces the global remap missed -> dark. */
      html[data-theme="dark"] [style*="background: rgb(251, 252, 254)"]{ background-color:var(--tdb-card-dark) !important; }
      html[data-theme="dark"] [style*="background: rgb(241, 245, 249)"]{ background-color:#232c3d !important; }
      /* Light borders/dividers across the heat-map tables -> subtle slate. */
      html[data-theme="dark"] [style*="solid rgb(226, 232, 240)"]{ border-color:rgba(148,163,184,0.14) !important; }
      html[data-theme="dark"] [style*="solid rgb(238, 242, 247)"]{ border-color:rgba(148,163,184,0.12) !important; }
      html[data-theme="dark"] [style*="solid rgb(241, 245, 249)"]{ border-color:rgba(148,163,184,0.12) !important; }
      /* View-switcher track (Heat Map / Account Detail / Cleared / Actioned): dark recessed instead of light. */
      html[data-theme="dark"] [style*="background: rgb(232, 237, 243)"]{ background-color:#141a26 !important; }
      /* Heat Map: asset cells get a backdrop 10% lighter than the darkest table
         background (#121722 -> #2A2E38), so the asset area reads distinct from
         the ?/N/A markers, which keep their own darker fills. */
      /* Heat Map (dark): data cell backdrop uses the app base dark navy
         (#121722), the same surface the rest of dark mode sits on. This is
         distinct from the #17243A card navy the table originally used. */
      html[data-theme="dark"] .tdb-grid-sep tbody td:not(:first-child){ background-color:#121722 !important; }
      /* The ? and N/A markers sit on that navy as a slightly lighter navy pill
         so they stay visible, matching how the colored day-count pills sit on it. */
      html[data-theme="dark"] .tdb-grid-sep tbody td button[style*="background: rgb(232, 237, 243)"],
      html[data-theme="dark"] .tdb-grid-sep tbody td button[style*="background: rgb(248, 250, 252)"]{
        background-color:#2c3a4f !important;
        border:none !important;
      }
      /* Heat Map (light): exact mirror of the dark treatment. Data cells sit on
         the light base surface (#eef2f8) while the account column keeps the white
         card, and the ? / N/A markers are one uniform light-slate pill on top.
         Plain selectors so this applies in light mode; the higher-specificity
         dark rules above override it when dark mode is active. */
      .tdb-grid-sep tbody td:not(:first-child){ background-color:#eef2f8 !important; }
      .tdb-grid-sep tbody td button[style*="background: rgb(232, 237, 243)"],
      .tdb-grid-sep tbody td button[style*="background: rgb(248, 250, 252)"]{
        background-color:#dde5f0 !important;
        border:none !important;
      }
      /* Status pills: muted translucent chips with light text in dark (match the matte band colors). */
      html[data-theme="dark"] .tdb-hm-pill-urgent, html[data-theme="dark"] .tdb-hm-pill-expired{ background:rgba(192,90,90,0.20) !important; color:#e6a6a6 !important; border-color:rgba(192,90,90,0.42) !important; }
      html[data-theme="dark"] .tdb-hm-pill-upcoming{ background:rgba(205,133,87,0.20) !important; color:#e6b491 !important; border-color:rgba(205,133,87,0.42) !important; }
      html[data-theme="dark"] .tdb-hm-pill-later{ background:rgba(194,160,74,0.20) !important; color:#ddc587 !important; border-color:rgba(194,160,74,0.42) !important; }
      html[data-theme="dark"] .tdb-hm-pill-healthy{ background:rgba(78,157,114,0.20) !important; color:#8fd4ad !important; border-color:rgba(78,157,114,0.42) !important; }
      html[data-theme="dark"] .tdb-hm-pill-unknown{ background:rgba(148,163,184,0.16) !important; color:#cbd5e1 !important; border-color:rgba(148,163,184,0.35) !important; }
      /* Status fills are vibrant in light mode; restore the dark matte look for solid grid cells, swatches, and dots. */
      html[data-theme="dark"] [style*="background: rgb(20, 163, 94)"]{ background-color:#4e9d72 !important; }
      html[data-theme="dark"] [style*="background: rgb(217, 148, 19)"]{ background-color:#c2a04a !important; }
      html[data-theme="dark"] [style*="background: rgb(236, 122, 44)"]{ background-color:#cd8557 !important; }
      html[data-theme="dark"] [style*="background: rgb(219, 58, 58)"]{ background-color:#c05a5a !important; }
      /* ── Settings page dark polish — close the gaps the global remaps miss so every card matches the rest of the app. Text colors are already handled globally; this covers off-white boxes, tinted callouts, the secondary-button text/fill, and light hairline borders. Scoped to the settings shell; light mode untouched. ── */
      html[data-theme="dark"] .tdb-set-shell button[style*="background: rgb(255, 255, 255)"]{ background-color:#232c3d !important; }
      /* Settings modal — the settings page is rendered inside a dialog, so the
         dialog chrome needs the same dark treatment the page background gets. */
      html[data-theme="dark"] .tdb-settings-modal{ background:#121722 !important; border-color:rgba(148,163,184,0.18) !important; }
      html[data-theme="dark"] .tdb-settings-modal-head{ background:#152033 !important; border-bottom-color:rgba(148,163,184,0.18) !important; }
      html[data-theme="dark"] .tdb-settings-modal-head div{ color:#dbe4f0 !important; }
      html[data-theme="dark"] .tdb-settings-modal-body{ background:#121722 !important; }
      html[data-theme="dark"] .tdb-settings-modal-nav{ border-right-color:rgba(148,163,184,0.18) !important; }
      html[data-theme="dark"] .tdb-settings-modal-nav button{ color:#a9b6c9 !important; }
      html[data-theme="dark"] .tdb-settings-modal-nav button.active{ background:#1b2942 !important; border-color:rgba(59,130,246,0.45) !important; color:#bfd6ff !important; }
      html[data-theme="dark"] .tdb-set-shell [style*="background: rgb(251, 253, 255)"],
      html[data-theme="dark"] .tdb-set-shell [style*="background: rgb(248, 250, 252)"],
      html[data-theme="dark"] .tdb-set-shell [style*="background: rgb(248, 251, 255)"]{ background-color:#232c3d !important; }
      /* Redesign tokens: card border, hairline divider, tag + input borders,
         and the flat nav active state. Keyed the same way the older settings
         rules are, so both generations of colour survive side by side. */
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(230, 235, 242)"],
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(219, 227, 238)"],
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(223, 230, 240)"],
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(232, 237, 244)"],
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(238, 242, 247)"]{ border-color:rgba(148,163,184,0.18) !important; }
      html[data-theme="dark"] .tdb-set-navitem{ color:#a9b6c9 !important; }
      html[data-theme="dark"] .tdb-set-navitem.active{ background:#1b2942 !important; color:#bfd6ff !important; border-left-color:#3b82f6 !important; }
      html[data-theme="dark"] .tdb-set-navitem:not(.active):hover{ background:#1a2233 !important; color:#dbe4f0 !important; }
      html[data-theme="dark"] .tdb-set-subitem{ color:#8c9ab0 !important; }
      html[data-theme="dark"] .tdb-set-subitem.active{ color:#dbe4f0 !important; }
      html[data-theme="dark"] .tdb-set-subitem:not(.active):hover{ background:#1a2233 !important; color:#dbe4f0 !important; }
      html[data-theme="dark"] .tdb-set-close:hover{ background:#1f2937 !important; color:#dbe4f0 !important; }
      html[data-theme="dark"] .tdb-set-nav{ background:#141b28 !important; border-right-color:rgba(148,163,184,0.18) !important; }
      html[data-theme="dark"] .tdb-set-shell [style*="background: rgb(255, 251, 235)"]{ background-color:#2a2410 !important; }
      html[data-theme="dark"] .tdb-set-shell [style*="background: rgb(254, 242, 242)"]{ background-color:#2a1517 !important; }
      html[data-theme="dark"] .tdb-set-shell [style*="background: rgb(240, 253, 244)"]{ background-color:#14241b !important; }
      html[data-theme="dark"] .tdb-set-shell [style*="color: rgb(30, 45, 61)"]{ color:#dbe4f0 !important; }
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(207, 219, 239)"],
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(232, 238, 247)"],
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(220, 227, 236)"],
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(212, 223, 240)"]{ border-color:rgba(148,163,184,0.18) !important; }
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(253, 230, 138)"]{ border-color:rgba(245,158,11,0.34) !important; }
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(254, 202, 202)"]{ border-color:rgba(239,68,68,0.34) !important; }
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(187, 247, 208)"]{ border-color:rgba(34,197,94,0.34) !important; }
      html[data-theme="dark"] .tdb-set-shell [style*="solid rgb(240, 243, 247)"]{ border-bottom-color:rgba(148,163,184,0.14) !important; }
      /* Product Category Rules: in dark mode the whole card takes a MATTE tint of its category color (no harsh light pastel), and the "+ product" add pills match the table dropdown shade. */
      html[data-theme="dark"] .tdb-pc-card-blue{ background-color:#15203a !important; border-color:rgba(37,99,235,0.45) !important; }
      html[data-theme="dark"] .tdb-pc-card-green{ background-color:#122a1d !important; border-color:rgba(22,163,74,0.45) !important; }
      html[data-theme="dark"] .tdb-pc-card-purple{ background-color:#211a3a !important; border-color:rgba(124,58,237,0.45) !important; }
      html[data-theme="dark"] .tdb-pc-card-orange{ background-color:#2b1c0f !important; border-color:rgba(234,88,12,0.45) !important; }
      html[data-theme="dark"] .tdb-pc-card-pink{ background-color:#2b1626 !important; border-color:rgba(219,39,119,0.45) !important; }
      html[data-theme="dark"] .tdb-pc-card-teal{ background-color:#0e2925 !important; border-color:rgba(13,148,136,0.5) !important; }
      html[data-theme="dark"] .tdb-pc-card-red{ background-color:#2b1416 !important; border-color:rgba(220,38,38,0.45) !important; }
      html[data-theme="dark"] .tdb-pc-card-slate{ background-color:#17243A !important; border-color:rgba(148,163,184,0.30) !important; }
      html[data-theme="dark"] .tdb-pc-card-amber{ background-color:#2a2210 !important; border-color:rgba(217,119,6,0.45) !important; }
      html[data-theme="dark"] .tdb-pc-addpill{ background-color:#171c28 !important; border-color:rgba(148,163,184,0.22) !important; color:#94a3b8 !important; }
      html[data-theme="dark"] .tdb-pc-addpill:hover{ background-color:#1f2636 !important; color:#cbd5e1 !important; }
      /* Accounts: the Next Steps expander panel and the non-data rows (add row, expander) were flashing a light hover in dark mode. Keep the panel matte and make every row hover dark. */
      html[data-theme="dark"] .acct-table tbody tr.next-steps-expanded-row > td{ background-color:#161d2b !important; border-top-color:rgba(148,163,184,0.14) !important; border-bottom-color:rgba(148,163,184,0.14) !important; }
      html[data-theme="dark"] .acct-table tbody tr:hover > td{ background-color:#2c3a4f !important; }
      html[data-theme="dark"] .acct-table tbody tr.next-steps-expanded-row:hover > td{ background-color:#161d2b !important; }
      /* Forecast: replace the harsh white underline under each quarter header with a faint outline + a subtle header band. */
      html[data-theme="dark"] .tdb-fc-qsection{ border-color:rgba(148,163,184,0.16) !important; }
      html[data-theme="dark"] .tdb-fc-qhead{ background-color:#1c2638 !important; border-bottom-color:rgba(148,163,184,0.10) !important; }
      /* Notes & Contacts modal: the rich-text toolbar header (light-blue bar) and the contacts action buttons (the white "Extract" and purple "Load sample") are inline-styled with light colors the global remaps miss. Recolor to the app's dark surfaces, scoped to the notes panel. */
      html[data-theme="dark"] .nexus-notes-panel [style*="background: rgb(240, 247, 255)"],
      html[data-theme="dark"] .nexus-notes-panel [style*="background: rgb(232, 241, 255)"]{ background-color:#232c3d !important; }
      html[data-theme="dark"] .nexus-notes-panel [style*="background: rgb(203, 213, 225)"]{ background-color:#2c3647 !important; }
      html[data-theme="dark"] .nexus-notes-panel [style*="solid rgb(219, 234, 254)"]{ border-color:rgba(148,163,184,0.18) !important; }
      /* Forecast column header = Accounts navy + white text, both modes (theme-independent), matching table.acct-table thead. */
      .forecast-thead th{ background:var(--tdb-header-navy) !important; color:#F8FAFC !important; }
      html[data-theme="dark"] .q-section-btn{ background:#131A26 !important; border-bottom-color:rgba(148,163,184,0.14) !important; color:#B4C0D4 !important; }
      html[data-theme="dark"] .q-section-btn:hover{ background:#1A2535 !important; }
      html[data-theme="dark"] .add-acct-row{ background:#151d2c !important; border-bottom-color:rgba(107,147,232,0.28) !important; }

      /* ---- WorkspaceBar buttons + notes/workspace panels + popovers ---- */
      html[data-theme="dark"] .ws-btn{ background:#141C2A !important; border-color:rgba(148,163,184,0.22) !important; color:#B4C0D4 !important; }
      html[data-theme="dark"] .ws-btn:hover{ background:#1A2535 !important; border-color:rgba(107,147,232,0.42) !important; color:#E5ECF6 !important; box-shadow:none !important; }
      html[data-theme="dark"] .ws-btn.dirty{ background:rgba(107,147,232,0.16) !important; border-color:rgba(107,147,232,0.42) !important; color:#cbd9f5 !important; }
      html[data-theme="dark"] .notes-modal,
      html[data-theme="dark"] .notes-page,
      html[data-theme="dark"] .nexus-notes-panel{ background:#0D1320 !important; }
      /* Notes: keep text readable in dark mode; bold + headers go white. */
      [data-theme="dark"] .tdb-note-html,
      [data-theme="dark"] .tdb-note-editor{ color:#cbd5e1 !important; }
      [data-theme="dark"] .tdb-note-html b, [data-theme="dark"] .tdb-note-html strong,
      [data-theme="dark"] .tdb-note-editor b, [data-theme="dark"] .tdb-note-editor strong,
      [data-theme="dark"] .tdb-note-html h1, [data-theme="dark"] .tdb-note-html h2,
      [data-theme="dark"] .tdb-note-html h3, [data-theme="dark"] .tdb-note-html h4,
      [data-theme="dark"] .tdb-note-editor h1, [data-theme="dark"] .tdb-note-editor h2,
      [data-theme="dark"] .tdb-note-editor h3, [data-theme="dark"] .tdb-note-editor h4{ color:#ffffff !important; }
      [data-theme="dark"] .tdb-note-editor:empty:before{ color:#64748b !important; }
      html[data-theme="dark"] .ws-modal-header{ background:#131A26 !important; border-bottom-color:rgba(148,163,184,0.18) !important; }
      html[data-theme="dark"] .ws-contacts-panel{ background:#131A26 !important; border-left-color:rgba(148,163,184,0.18) !important; }
      html[data-theme="dark"] .action-color-menu{ background:#171F2D !important; border-color:rgba(148,163,184,0.24) !important; }

      /* ---- SEARCH BARS — the white ones were CSS-controlled, override here ---- */
      html[data-theme="dark"] .acct-search-bar{ background:#0D1320 !important; border-bottom-color:rgba(148,163,184,0.18) !important; }
      html[data-theme="dark"] div:has(> input[placeholder^="Search accounts"]){ background:#0B111B !important; border:1px solid rgba(148,163,184,0.24) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.03) !important; }
      html[data-theme="dark"] input[placeholder^="Search accounts"]{ background:var(--tdb-card-dark) !important; border:1px solid rgba(148,163,184,0.24) !important; border-radius:6px !important; box-shadow:none !important; color:#e2e8f0 !important; -webkit-text-fill-color:#e2e8f0 !important; }
      html[data-theme="dark"] input[placeholder^="Search accounts"]::placeholder{ color:#7E8BA3 !important; }

      /* ---- KPI / metric cards: real elevated matte gradient cards ---- */
      html[data-theme="dark"] .kpi-tile{ background:linear-gradient(180deg,#171F2D 0%,#131A26 100%) !important; border:1px solid rgba(148,163,184,0.16) !important; box-shadow:0 10px 24px rgba(0,0,0,0.18) !important; border-radius:14px !important; }

      /* ---- PRIMARY buttons -> muted blue gradient (overrides flat mute above) ---- */
      html[data-theme="dark"] [style*="background: rgb(37, 99, 235)"],
      html[data-theme="dark"] [style*="background: rgb(59, 130, 246)"],
      html[data-theme="dark"] [style*="background: rgb(0, 87, 255)"],
      html[data-theme="dark"] [style*="background: rgb(22, 119, 255)"]{ background:linear-gradient(180deg,#4F7EDB 0%,#3F68B8 100%) !important; border:1px solid rgba(147,197,253,0.28) !important; box-shadow:none !important; }

      /* ---- a couple of light tints my inline maps missed ---- */
      html[data-theme="dark"] [style*="background: rgb(240, 249, 255)"]{ background-color:#0F1621 !important; }

      /* ===================================================================
         HEAT MAP v2 — muted but clear gradient risk colors (not candy, not mud).
         Overrides the flat fills above (later in source = wins). These also
         calm any same-colored buttons/dots, which is on-theme.
         =================================================================== */
      html[data-theme="dark"] [style*="background: rgb(220, 38, 38)"]{ background:linear-gradient(180deg,#8A2D2D 0%,#6F2424 100%) !important; border:1px solid rgba(248,113,113,0.30) !important; color:#FFE3E3 !important; border-radius:9px !important; box-shadow:inset 0 1px 2px rgba(0,0,0,0.22) !important; }
      html[data-theme="dark"] [style*="background: rgb(249, 115, 22)"]{ background:linear-gradient(180deg,#9A4F18 0%,#733A12 100%) !important; border:1px solid rgba(251,146,60,0.30) !important; color:#FFE7C2 !important; border-radius:9px !important; box-shadow:inset 0 1px 2px rgba(0,0,0,0.22) !important; }
      html[data-theme="dark"] [style*="background: rgb(234, 179, 8)"]{ background:linear-gradient(180deg,#8A6418 0%,#674A12 100%) !important; border:1px solid rgba(250,204,21,0.28) !important; color:#FFF1B8 !important; border-radius:9px !important; box-shadow:inset 0 1px 2px rgba(0,0,0,0.22) !important; }
      html[data-theme="dark"] [style*="background: rgb(22, 163, 74)"]{ background:linear-gradient(180deg,#236844 0%,#174D33 100%) !important; border:1px solid rgba(74,222,128,0.25) !important; color:#DDFBEA !important; border-radius:9px !important; box-shadow:inset 0 1px 2px rgba(0,0,0,0.22) !important; }
      html[data-theme="dark"] [style*="background: rgb(148, 163, 184)"]{ background:#202A3A !important; border:1px dashed rgba(148,163,184,0.28) !important; color:#A8B3C7 !important; border-radius:9px !important; }

      /* ===================================================================
         SEARCH BAR TEST  —  debug change to prove the dark layer is active.
         Placed LAST in the dark CSS so it wins on specificity AND source order.
         Targets every <input> directly, and neutralizes the white wrappers that
         paint behind transparent search inputs. Exact values per request.
         =================================================================== */
      html[data-theme="dark"] input{
        background:#0B111B !important;
        border:1px solid #334155 !important;
        color:#E5ECF6 !important;
        -webkit-text-fill-color:#E5ECF6 !important;
        box-shadow:none !important;
      }
      html[data-theme="dark"] input::placeholder{ color:#7E8BA3 !important; opacity:1 !important; }
      /* remove white wrapper backgrounds around search inputs (Accounts toolbar,
         AE bar, and any field box that directly wraps a search input) */
      html[data-theme="dark"] .acct-search-bar,
      html[data-theme="dark"] div:has(> input[placeholder*="earch"]),
      html[data-theme="dark"] div:has(> div > input[placeholder*="earch"]){
        background:#0B111B !important;
        border-color:#334155 !important;
        box-shadow:none !important;
      }

      /* Search box-in-box fix: the Accounts INPUT now carries the single box (filled with the row surface --tdb-card-dark). Neutralize the wrappers around the Accounts search so there is no second/outer box. Dark-only, Accounts-specific. */
      html[data-theme="dark"] div:has(> input[placeholder^="Search accounts"]),
      html[data-theme="dark"] div:has(> div > input[placeholder^="Search accounts"]){ background:transparent !important; border:none !important; box-shadow:none !important; }

      /* Item 6 (all tabs): every search/filter input matches the Accounts search — one clean #1d2330 box, single border, white text, muted placeholder; wrappers neutralized so there is no box-in-box. Dark-only; only "Search" placeholders contain "earch". */
      html[data-theme="dark"] input[placeholder*="earch"]{ background:var(--tdb-card-dark) !important; border:1px solid rgba(148,163,184,0.24) !important; border-radius:var(--radius-xs) !important; box-shadow:none !important; color:#e2e8f0 !important; -webkit-text-fill-color:#e2e8f0 !important; }
      html[data-theme="dark"] input[placeholder*="earch"]::placeholder{ color:#7E8BA3 !important; }
      html[data-theme="dark"] div:has(> input[placeholder*="earch"]),
      html[data-theme="dark"] div:has(> div > input[placeholder*="earch"]){ background:transparent !important; border:none !important; box-shadow:none !important; }

      /* ── Search accounts: dark box sized like light ────────────────────
         Light draws the control on the WRAPPER (240x40) and leaves the input
         transparent/borderless at 26px. Dark had it inverted, so the visible
         box was the 26px input and read short. Paint the wrapper instead.

         Scoped to `div:has(> input...)` ONLY — the input's DIRECT parent. The
         `div:has(> div > input...)` form matches the whole toolbar row, so
         painting through it boxes and recolors the entire bar.

         Colours are the ones the dark search box already used
         (--tdb-card-dark, radius 6) so only the SIZE changes, not the look. */
      html[data-theme="dark"] div:has(> input[placeholder^="Search accounts"]){
        background:var(--tdb-card-dark) !important;
        border:1px solid rgba(148,163,184,0.24) !important;
        border-radius:6px !important;
        box-shadow:none !important;
        /* The light rules give this wrapper margin-bottom:11px. In a flex row
           with align-items:center the MARGIN box is what gets centred, so the
           visible box rides ~5.5px high. That was unnoticeable while the box
           was 26px; at full height it reads clearly off-centre. */
        margin-bottom:0 !important;
      }
      html[data-theme="dark"] div:has(> input[placeholder^="Search accounts"]):focus-within{
        border-color:rgba(91,141,239,0.65) !important;
      }
      html[data-theme="dark"] input[placeholder^="Search accounts"],
      html[data-theme="dark"] input[placeholder^="Search accounts"]:focus{
        background:transparent !important;
        border:none !important;
        border-radius:0 !important;
        box-shadow:none !important;
        height:26px !important;
        padding:0 !important;
        color:#E5ECF6 !important;
        -webkit-text-fill-color:#E5ECF6 !important;
      }
      html[data-theme="dark"] input[placeholder^="Search accounts"]::placeholder{
        color:#7E8BA3 !important;
      }

      /* ===================================================================
         DARK FIXES (final layer): To Do cue, Home info cards, Heat unknown/NA,
         Heat urgency gradients (re-asserted as the last word). Scoped + !important.
         =================================================================== */

      /* To Do indicator on the account-name cell is now applied directly in the
         row render (var hasOpenTodo) — no CSS-matching of the old outline string. */

      /* 2) Home light-blue info cards / panels -> matte slate */
      html[data-theme="dark"] [style*="background: rgb(239, 246, 255)"],
      html[data-theme="dark"] [style*="background: rgb(240, 247, 255)"],
      html[data-theme="dark"] [style*="background: rgb(240, 249, 255)"]{
        background-color:#131A26 !important;
        border-color:rgba(148,163,184,0.18) !important;
      }

      /* 3) Heat Map unknown ("?") + N/A cells -> dark matte (not light gray) */
      html[data-theme="dark"] [style*="background: rgb(148, 163, 184)"]{
        background:#202A3A !important;
        border:1px dashed rgba(148,163,184,0.28) !important;
        color:#A8B3C7 !important;
        border-radius:9px !important;
        box-shadow:none !important;
      }
      /* N/A cell is uniquely identified by bg #f8fafc + text #cbd5e1 */
      html[data-theme="dark"] [style*="background: rgb(248, 250, 252)"][style*="rgb(203, 213, 225)"]{
        background:#0D1320 !important;
        border:1px solid rgba(148,163,184,0.28) !important;
        color:#B4C0D4 !important;
        border-radius:9px !important;
      }

      /* 4) Heat Map urgency -> exact muted gradients (final, winning) */
      html[data-theme="dark"] [style*="background: rgb(220, 38, 38)"]{ background:linear-gradient(180deg,#8A2D2D 0%,#6F2424 100%) !important; border:1px solid rgba(248,113,113,0.30) !important; color:#FFE3E3 !important; border-radius:9px !important; box-shadow:inset 0 1px 2px rgba(0,0,0,0.22) !important; }
      html[data-theme="dark"] [style*="background: rgb(249, 115, 22)"]{ background:linear-gradient(180deg,#9A4F18 0%,#733A12 100%) !important; border:1px solid rgba(251,146,60,0.30) !important; color:#FFE7C2 !important; border-radius:9px !important; box-shadow:inset 0 1px 2px rgba(0,0,0,0.22) !important; }
      html[data-theme="dark"] [style*="background: rgb(234, 179, 8)"]{ background:linear-gradient(180deg,#8A6418 0%,#674A12 100%) !important; border:1px solid rgba(250,204,21,0.28) !important; color:#FFF1B8 !important; border-radius:9px !important; box-shadow:inset 0 1px 2px rgba(0,0,0,0.22) !important; }
      html[data-theme="dark"] [style*="background: rgb(22, 163, 74)"]{ background:linear-gradient(180deg,#236844 0%,#174D33 100%) !important; border:1px solid rgba(74,222,128,0.25) !important; color:#DDFBEA !important; border-radius:9px !important; box-shadow:inset 0 1px 2px rgba(0,0,0,0.22) !important; }
      /* Fix 2: action status DOT (8px round green, Target) -> vivid emerald to match the blue dot. Higher specificity than the heat-map green remap, so large healthy cells keep their gradient. */
      html[data-theme="dark"] [style*="width: 8px"][style*="border-radius: 50%"][style*="background: rgb(22, 163, 74)"]{ background:#22c55e !important; border:none !important; border-radius:50% !important; box-shadow:0 0 0 1px rgba(15,40,80,0.15) !important; }
      /* Fix 1: left ACCENT BAR (4px green, Target) -> same vivid emerald as the action dot, so bar and dot match. Same getActionColor source; only the dark remap differed. */
      html[data-theme="dark"] [style*="width: 4px"][style*="background: rgb(22, 163, 74)"]{ background:#22c55e !important; border:none !important; border-radius:3px !important; box-shadow:none !important; }


      /* ===================================================================
         HEADER / NAV — branded shell, both modes (final winning layer).
         Scoped strictly to header/nav classes (these exist only in the header).
         Light = pale slate-blue; Dark = deeper slate-blue. Active nav = blue card.
         =================================================================== */
      /* ---- TOP HEADER REGION locked to dark navy in BOTH modes (theme-independent).
         Base (light) values set equal to the dark values so the nav bar + saved
         strip never change with the theme. Content below stays light in light mode. ---- */
      .nexus-premium-header{ background:#17243A !important; border-bottom:1px solid rgba(96,165,250,0.22) !important; box-shadow:none !important; }
      .nexus-premium-header::after{ background:rgba(96,165,250,0.22) !important; opacity:1 !important; }
      .nexus-save-status-bar{ background:#152033 !important; }
      .nexus-logo-main{ color:#F8FAFC !important; }
      .nexus-brand-tagline{ color:rgba(190,215,255,0.72) !important; }
      .nexus-tab{ background:rgba(15,23,42,0.70) !important; border:1px solid rgba(148,163,184,0.20) !important; color:#CBD5E1 !important; box-shadow:none !important; }
      .nexus-tab:hover{ background:rgba(96,165,250,0.12) !important; border-color:rgba(96,165,250,0.45) !important; color:#F8FAFC !important; transform:none !important; }
      .nexus-tab.active{ background:rgba(96,165,250,0.20) !important; border:1px solid rgba(96,165,250,0.55) !important; color:#F8FAFC !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.08) !important; }
      .nexus-settings-button{ background:rgba(15,23,42,0.62) !important; border:1px solid rgba(148,163,184,0.20) !important; color:#CBD5E1 !important; box-shadow:none !important; }
      .nexus-settings-button:hover{ background:rgba(96,165,250,0.12) !important; border-color:rgba(96,165,250,0.45) !important; transform:none !important; }
      .nexus-settings-button.active{ background:rgba(96,165,250,0.20) !important; border:1px solid rgba(96,165,250,0.55) !important; color:#F8FAFC !important; }
      .nexus-file-action{ background:rgba(15,23,42,0.62) !important; border:1px solid rgba(148,163,184,0.20) !important; color:#CBD5E1 !important; }
      .nexus-file-action:hover{ background:rgba(96,165,250,0.16) !important; border-color:rgba(96,165,250,0.45) !important; }
      .nexus-signout-btn{ background:rgba(15,23,42,0.62) !important; border:1px solid rgba(148,163,184,0.20) !important; color:#CBD5E1 !important; }
      .nexus-signout-btn:hover{ background:rgba(96,165,250,0.16) !important; border-color:rgba(96,165,250,0.45) !important; }

      /* ---- DARK mode: deeper slate-blue header (separate from page + table) ---- */
      html[data-theme="dark"] .nexus-premium-header{ background:#17243A !important; border-bottom:1px solid rgba(96,165,250,0.22) !important; box-shadow:none !important; }
      html[data-theme="dark"] .nexus-premium-header::after{ background:rgba(96,165,250,0.22) !important; opacity:1 !important; }
      html[data-theme="dark"] .nexus-logo-main{ color:#F8FAFC !important; }
      html[data-theme="dark"] .nexus-brand-tagline{ color:rgba(190,215,255,0.72) !important; }
      html[data-theme="dark"] .nexus-tab{ background:rgba(15,23,42,0.70) !important; border:1px solid rgba(148,163,184,0.20) !important; color:#CBD5E1 !important; box-shadow:none !important; }
      html[data-theme="dark"] .nexus-tab:hover{ background:rgba(96,165,250,0.12) !important; border-color:rgba(96,165,250,0.45) !important; color:#F8FAFC !important; transform:none !important; }
      html[data-theme="dark"] .nexus-tab.active{ background:rgba(96,165,250,0.20) !important; border:1px solid rgba(96,165,250,0.55) !important; color:#F8FAFC !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.08) !important; }
      html[data-theme="dark"] .nexus-settings-button{ background:rgba(15,23,42,0.62) !important; border:1px solid rgba(148,163,184,0.20) !important; color:#CBD5E1 !important; box-shadow:none !important; }
      html[data-theme="dark"] .nexus-settings-button:hover{ background:rgba(96,165,250,0.12) !important; border-color:rgba(96,165,250,0.45) !important; transform:none !important; }
      html[data-theme="dark"] .nexus-settings-button.active{ background:rgba(96,165,250,0.20) !important; border:1px solid rgba(96,165,250,0.55) !important; color:#F8FAFC !important; }
      html[data-theme="dark"] .nexus-file-action{ background:rgba(15,23,42,0.62) !important; border:1px solid rgba(148,163,184,0.20) !important; color:#CBD5E1 !important; }
      html[data-theme="dark"] .nexus-file-action:hover{ background:rgba(96,165,250,0.16) !important; border-color:rgba(96,165,250,0.45) !important; }
      html[data-theme="dark"] .nexus-signout-btn{ background:rgba(15,23,42,0.62) !important; border:1px solid rgba(148,163,184,0.20) !important; color:#CBD5E1 !important; }
      html[data-theme="dark"] .nexus-signout-btn:hover{ background:rgba(96,165,250,0.16) !important; border-color:rgba(96,165,250,0.45) !important; }

      /* ============ Theme toggle pill (in the Saved bar) ============ */
      /* Theme toggle and Territory AI sit together at the left of the save-status
         row. The row is justify-content:flex-end, so the auto margin now lives
         on the AI button (the last of the pair) to push the save/export status
         text to the right edge. */
      .tdb-tt-wrap{ display:inline-flex; align-items:center; }
      .nexus-save-status-bar .tdb-nav-ai{ display:inline-flex; align-items:center; margin-right:auto; }
      .tdb-theme-toggle{ position:relative; width:52px; height:24px; border-radius:999px;
        border:1px solid rgba(170,200,255,0.35); background:rgba(255,255,255,0.10);
        cursor:pointer; padding:0; flex:0 0 auto; display:inline-flex; align-items:center;
        transition:background .15s, border-color .15s; }
      .tdb-theme-toggle .tdb-tt-ico{ position:absolute; top:50%; transform:translateY(-50%); font-size:11px; line-height:1; pointer-events:none; }
      .tdb-theme-toggle .tdb-tt-sun{ left:6px; color:#fbbf24; }
      .tdb-theme-toggle .tdb-tt-moon{ right:6px; color:#c7d6ee; opacity:.55; }
      .tdb-theme-toggle .tdb-tt-knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#ffffff; box-shadow:0 1px 2px rgba(0,0,0,0.35); transition:left .16s ease; }
      .tdb-theme-toggle.on{ background:rgba(20,45,80,0.6); border-color:rgba(91,143,214,0.6); }
      .tdb-theme-toggle.on .tdb-tt-knob{ left:30px; background:#cfe0ff; }
      .tdb-theme-toggle.on .tdb-tt-moon{ opacity:1; color:#cfe0ff; }
      .tdb-theme-toggle.on .tdb-tt-sun{ opacity:.4; }


      /* ── HOME / Command Center dark polish: match Accounts cards (lighter raised surface, subtle dark border, soft shadow); remove harsh light outlines. Dark-only. ── */
      /* FIX 1 — KPI cards (card border #dbe4f0): subtle dark border + soft shadow, depth not bright outline. */
      html[data-theme="dark"] [style*="solid rgb(219, 228, 240)"]{ border-color:rgba(148,163,184,0.16) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 6px rgba(0,0,0,0.35) !important; }
      /* FIX 1 — Needs Attention alert rows (border #eef2f7): subtle dark border. */
      html[data-theme="dark"] [style*="solid rgb(238, 242, 247)"]{ border-color:rgba(148,163,184,0.16) !important; }
      /* FIX 2 — privacy box (light-blue gradient #eef4ff/#f5f9ff + #cfd9ee border): Accounts dark card surface, subtle border, soft shadow. */
      html[data-theme="dark"] [style*="gradient"][style*="rgb(238, 244, 255)"]{ background:var(--tdb-card-dark) !important; border-color:rgba(148,163,184,0.16) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 6px rgba(0,0,0,0.35) !important; }
      /* FIX 1/3 — Getting started box (light-green gradient #ecfdf5/#f0fdf4): Accounts dark card surface, subtle border, soft shadow. */
      html[data-theme="dark"] [style*="gradient"][style*="rgb(236, 253, 245)"]{ background:var(--tdb-card-dark) !important; border-color:rgba(148,163,184,0.16) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 6px rgba(0,0,0,0.35) !important; }
      /* FIX 2 (dark) — Needs Attention item cards: white bg already remaps to the dark card surface and the #e6eaf0 border to soft slate via the global rules above; this only matches their shadow to the other dark Home cards (depth, not a bright outline). */
      /* FIX — kill the light horizontal lines bracketing Needs Attention cards in dark mode: (1) the inset white top line came from this rule's own box-shadow; (2) the neutral-border rule above recolored the border to rgba(148,163,184,0.18), brighter than the Accounts rows' 0.12. Pin top/right/bottom to the exact Accounts dark border value and use the exact Accounts soft shadow — no inset white. border-left is left alone so the action-color accent bar is untouched. */
      html[data-theme="dark"] .tdb-nax-card{ border-top-color:rgba(148,163,184,0.12) !important; border-right-color:rgba(148,163,184,0.12) !important; border-bottom-color:rgba(148,163,184,0.12) !important; box-shadow:0 1px 2px rgba(0,0,0,0.35) !important; }

      /* ── Dark-mode Home polish (Fixes 1–4) — dark-only; light mode untouched. ── */
      /* FIX 1a — Demo Workspace banner: quiet dark-amber tint, soft amber text/icon, understated buttons (no bright glow). */
      html[data-theme="dark"] .tdb-demo-banner{ background:#161e31 !important; border:1px solid rgba(96,141,239,0.30) !important; box-shadow:none !important; }
      html[data-theme="dark"] .tdb-demo-banner *{ color:#cadcfb !important; }
      html[data-theme="dark"] .tdb-demo-banner button{ background:rgba(96,141,239,0.13) !important; border:1px solid rgba(96,141,239,0.42) !important; color:#cadcfb !important; }
      /* FIX 1b — "Not updated in X days" status pills: subtle muted amber/orange warning chips instead of bright pastel blobs. */
      html[data-theme="dark"] .tdb-sb-amber{ background:rgba(96,141,239,0.14) !important; color:#aecbf7 !important; border-color:rgba(96,141,239,0.38) !important; }
      html[data-theme="dark"] .tdb-sb-orange{ background:rgba(96,141,239,0.22) !important; color:#cadcfb !important; border-color:rgba(96,141,239,0.52) !important; }
      /* FIX 2 — Getting Started: Setup Workspace + Load Demo as one matched secondary style (dark surface, clear border, light text); Import More Data stays the blue primary. */
      html[data-theme="dark"] .tdb-gs-secondary{ background:#1d2330 !important; border:1px solid rgba(148,163,184,0.30) !important; color:#cbd5e1 !important; box-shadow:none !important; }
      /* FIX 3 — Needs Attention container recessed (darker, near page bg) so its deal cards read as raised. */
      html[data-theme="dark"] .tdb-nax-wrap{ background:#152033 !important; } /* lower nav bar color (.nexus-save-status-bar) */
      /* FIX 4 — select dropdowns app-wide: soft #171c28 fill (a step under the row #1d2330), not harsh near-black; light text + subtle border kept. */
      html[data-theme="dark"] select, html[data-theme="dark"] select[style]{ background-color:#171c28 !important; }

      /* ── LIGHT-MODE AIRY RESTYLE — light only via html[data-theme="light"]; the dark theme is fully untouched (no dark rule edited, nothing here matches data-theme="dark"). Shared airy tokens keep surfaces matched across Home / Accounts / To Do / Forecast / Heat Map. ── */
      html[data-theme="light"]{
        --tdb-airy-border:#e4eaf3;
        --tdb-airy-shadow:0 1px 2px rgba(15,23,42,0.04), 0 4px 10px rgba(15,23,42,0.05);
      }
      /* Canvas: unify the body edge to the same cool light blue-gray the main canvas already uses. */
      html[data-theme="light"] body{ background:#eef2f8 !important; }
      /* KPI tiles (inline white height:72px cards): thinner light border + soft floating shadow so they lift cleanly off the canvas. Colored accent stripes (separate children) untouched. */
      html[data-theme="light"] [style*="height: 72px"][style*="background: rgb(255, 255, 255)"]{ background:#fafcff !important; border-color:var(--tdb-airy-border) !important; box-shadow:0 2px 5px rgba(15,23,42,0.07), 0 10px 24px rgba(15,23,42,0.12) !important; }
      /* Home "Needs Attention" cards: same soft floating shadow for a light, crisp lift. */
      html[data-theme="light"] .tdb-nax-card{ box-shadow:var(--tdb-airy-shadow) !important; }
      /* Soften the saturated blue Accounts row hover so the page reads airier. */
      html[data-theme="light"] .acct-table tbody tr.acct-data-row:hover > td{ background:rgba(91,143,214,0.07) !important; }

      /* ── NAV BAR + SUB BAR — pale airy look, LIGHT mode only (matches reference image). Scoped html[data-theme="light"] so dark mode's navy nav is fully preserved. ── */
      html[data-theme="light"] .nexus-premium-header{ background:linear-gradient(180deg, #f8fafd 0%, #f0f4fb 100%) !important; border-bottom:1px solid #dde5f1 !important; box-shadow:0 1px 3px rgba(30,60,120,0.05) !important; }
      html[data-theme="light"] .nexus-premium-header::after{ opacity:0 !important; }
      html[data-theme="light"] .nexus-save-status-bar{ background:#ecf1fa !important; border-top:1px solid #dde5f1 !important; color:#475e85 !important; }
      html[data-theme="light"] .nexus-save-status-bar .ssb-lead{ color:#1e3a63 !important; }
      html[data-theme="light"] .nexus-save-status-bar .ssb-k{ color:#2f4f8c !important; }
      html[data-theme="light"] .nexus-save-status-bar .ssb-dot{ color:#9bb0d0 !important; }
      html[data-theme="light"] .nexus-logo-main{ color:#13234e !important; text-shadow:none !important; }
      html[data-theme="light"] .nexus-logo-accent{ background:linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; }
      html[data-theme="light"] .nexus-brand-tagline{ color:#5b76a6 !important; }
      html[data-theme="light"] .nexus-tab{ background:#f4f7fc !important; border:1px solid #d6e0ef !important; color:#1e3a63 !important; box-shadow:0 1px 2px rgba(30,60,120,0.05) !important; }
      html[data-theme="light"] .nexus-tab:hover{ background:#e9f0fa !important; border-color:#b7cbe8 !important; color:#13294d !important; transform:none !important; }
      html[data-theme="light"] .nexus-tab.active{ background:#a9c1eb !important; border:1px solid #8aa9e0 !important; color:#16305a !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.5) !important; }
      html[data-theme="light"] .nexus-settings-button{ background:#f4f7fc !important; border:1px solid #d6e0ef !important; color:#1e3a63 !important; box-shadow:none !important; }
      html[data-theme="light"] .nexus-settings-button:hover{ background:#e9f0fa !important; border-color:#b7cbe8 !important; }
      html[data-theme="light"] .nexus-settings-button.active{ background:#a9c1eb !important; border-color:#8aa9e0 !important; color:#16305a !important; }
      html[data-theme="light"] .nexus-file-action{ background:#f4f7fc !important; border:1px solid #d6e0ef !important; color:#1e3a63 !important; }
      html[data-theme="light"] .nexus-file-action:hover{ background:#e9f0fa !important; border-color:#b7cbe8 !important; }
      html[data-theme="light"] .nexus-signout-btn{ background:#f4f7fc !important; border:1px solid #d6e0ef !important; color:#1e3a63 !important; }
      /* Add Task modal — dark mode. Backgrounds are already remapped by the
         global white/gray rules; these fix the text colors + search input
         that weren't in the remap table (dark-on-dark otherwise). */
      html[data-theme="dark"] .tdb-addtask-card [style*="color: rgb(15, 23, 42)"]{ color:#E6EDF7 !important; }
      html[data-theme="dark"] .tdb-addtask-card [style*="color: rgb(30, 41, 59)"]{ color:#E6EDF7 !important; }
      html[data-theme="dark"] .tdb-addtask-card [style*="color: rgb(100, 116, 139)"]{ color:#93A2BA !important; }
      html[data-theme="dark"] .tdb-addtask-card input,
      html[data-theme="dark"] .tdb-addtask-card textarea{ border-color:rgba(148,163,184,0.30) !important; }
      html[data-theme="dark"] .tdb-addtask-card input::placeholder,
      html[data-theme="dark"] .tdb-addtask-card textarea::placeholder{ color:#7C8AA0 !important; }
      html[data-theme="light"] .nexus-signout-btn:hover{ background:#e9f0fa !important; border-color:#b7cbe8 !important; }
    
      /* ── Feedback button clearance ──────────────────────────────────────
         Pinned bottom-right at 16px inline, which put it on top of the mobile
         tab bar and over the Settings tab. Needs !important because the value
         it is overriding is an inline style on the button. Broad rule first,
         narrow second: equal specificity means source order decides. */
      @media (max-width: 1023px) {
        .tdb-feedback-btn { bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
      }
      @media (max-width: 640px) {
        .tdb-feedback-btn {
          bottom: calc(78px + env(safe-area-inset-bottom)) !important;
          right: 12px !important;
          transform: scale(0.9) !important;
          transform-origin: bottom right !important;
        }
      }
/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNTS — GRID VIEW
   ---------------------------------------------------------------------------
   Standalone on purpose. Everything the grid looks like lives in this file and
   nowhere else, so it can be edited by hand without going near the main
   styles.css block.

   Structure of this file:
     1. Theme tokens      — every colour the grid uses, light + dark
     2. Grid container    — the card matrix
     3. Collapsed card    — one dense line per account
     4. Expanded card     — header bar, deal blocks, meta grid
     5. Field strip       — the divided Status/Product/Value/… row
     6. Next steps editor — previous steps, textarea, to-do, save
     7. Meta panels       — action, partners, contacts, sub-accounts

   Change a colour once in section 1 and the whole view follows.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. THEME TOKENS ───────────────────────────────────────────────────── */
:root {
  --agrid-card-bg:   #ffffff;   /* card surface                        */
  --agrid-line:      #e8edf2;   /* card + control borders              */
  --agrid-line-hi:   #b9cdea;   /* border on hover                     */
  --agrid-line-open: #93b4e0;   /* border while expanded               */
  --agrid-body:      #f8fafc;   /* expanded body background            */
  --agrid-panel:     #ffffff;   /* deal block background               */
  --agrid-ink:       #0f172a;   /* primary text                        */
  --agrid-sub:       #94a3b8;   /* secondary text                      */
  --agrid-micro:     #8c97a8;   /* micro labels                        */
  --agrid-rule:      #eef2f7;   /* internal divider lines              */
  --agrid-chip:      #f1f5f9;   /* chip background                     */
  --agrid-accent:    #2563eb;   /* action / focus blue                 */
  --agrid-accent-sf: #eff6ff;   /* soft blue fill                      */
  --agrid-accent-ln: #bfdbfe;   /* soft blue border                    */
  --agrid-sh:        0 1px 2px rgba(15,23,42,.05);
  --agrid-sh-hi:     0 3px 12px rgba(37,99,235,.10);
  --agrid-sh-open:   0 10px 30px rgba(15,23,42,.10);
}
html[data-theme="dark"] {
  --agrid-card-bg:   var(--tdb-card-dark, #17243A);
  --agrid-line:      rgba(148,163,184,.17);
  --agrid-line-hi:   rgba(96,165,250,.50);
  --agrid-line-open: rgba(96,165,250,.50);
  --agrid-body:      rgba(255,255,255,.03);
  --agrid-panel:     rgba(255,255,255,.05);
  --agrid-ink:       #e8eef7;
  --agrid-sub:       #93a2b8;
  --agrid-micro:     #8496ad;
  --agrid-rule:      rgba(148,163,184,.17);
  --agrid-chip:      rgba(148,163,184,.15);
  --agrid-accent:    #60a5fa;
  --agrid-accent-sf: rgba(37,99,235,.18);
  --agrid-accent-ln: rgba(96,165,250,.40);
  --agrid-sh:        0 1px 2px rgba(0,0,0,.30);
  --agrid-sh-hi:     0 3px 12px rgba(0,0,0,.42);
  --agrid-sh-open:   0 12px 34px rgba(0,0,0,.50);
}

/* ── 2. GRID CONTAINER ─────────────────────────────────────────────────── */
.tdb-agrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(222px, 1fr));
  gap: 9px;
  padding: 12px 12px 24px;
  align-items: start;
}

/* ── 3. COLLAPSED CARD ─────────────────────────────────────────────────── */
.tdb-acard {
  position: relative;
  border: 1px solid var(--agrid-line);
  border-radius: 10px;
  background: var(--agrid-card-bg);
  overflow: hidden;
  box-shadow: var(--agrid-sh);
  transition: border-color .14s, box-shadow .14s;
}
.tdb-acard:not(.open):hover { border-color: var(--agrid-line-hi); box-shadow: var(--agrid-sh-hi); }
.tdb-acard.open { grid-column: 1 / -1; border-color: var(--agrid-line-open); box-shadow: var(--agrid-sh-open); }

.tdb-acard-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }

.tdb-acard-head { padding: 9px 11px 9px 14px; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.tdb-acard-headmain { flex: 1; min-width: 0; }
.tdb-acard-name {
  font-size: 13px; font-weight: 700; color: var(--agrid-ink);
  letter-spacing: -.15px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tdb-acard.open .tdb-acard-name { white-space: normal; font-size: 15.5px; }
.tdb-acard-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; min-width: 0; }
.tdb-acard-ae { font-size: 10.5px; font-weight: 600; color: var(--agrid-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-acard-pill { font-size: 9px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; padding: 1.5px 6px; border-radius: 999px; white-space: nowrap; }
.tdb-acard-dot { width: 6px; height: 6px; border-radius: 999px; background: #f59e0b; flex: 0 0 auto; }
.tdb-acard-val { font-size: 12.5px; font-weight: 800; color: var(--agrid-ink); font-variant-numeric: tabular-nums; letter-spacing: -.2px; text-align: right; white-space: nowrap; }
.tdb-acard-valsub { font-size: 9.5px; font-weight: 600; color: var(--agrid-sub); text-align: right; margin-top: 1px; }

/* ── 4. EXPANDED CARD ──────────────────────────────────────────────────── */
.tdb-acard-bar { display: flex; align-items: center; gap: 8px; padding: 0 11px 10px 14px; border-bottom: 1px solid var(--agrid-rule); flex-wrap: wrap; }
.tdb-acard-body { background: var(--agrid-body); padding: 12px 14px 13px; animation: tdbCardIn .16s ease-out; }
@keyframes tdbCardIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

.tdb-acard-sec { margin-bottom: 12px; }
.tdb-acard-sec:last-child { margin-bottom: 0; }
.tdb-acard-micro { font-size: 9px; font-weight: 800; letter-spacing: .75px; text-transform: uppercase; color: var(--agrid-micro); margin-bottom: 6px; }

.tdb-acard-deal { border: 1px solid var(--agrid-line); border-radius: 8px; background: var(--agrid-panel); padding: 10px 11px; margin-bottom: 8px; }
.tdb-acard-deal:last-of-type { margin-bottom: 0; }
.tdb-acard-dealhead { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--agrid-rule); }
.tdb-acard-dealname { font-size: 12px; font-weight: 800; color: var(--agrid-ink); letter-spacing: -.1px; }

/* buttons */
.tdb-acard-btn {
  font-size: 11px; font-weight: 700; padding: 5px 11px;
  border: 1px solid var(--agrid-line); border-radius: 6px;
  background: var(--agrid-card-bg); color: var(--agrid-sub);
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.tdb-acard-btn:hover { border-color: var(--agrid-accent); color: var(--agrid-accent); }
.tdb-acard-btn.primary { border-style: dashed; }

/* Notes pill — the WHOLE box is the click target (JS forwards the click). */
.tdb-acard-notesbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; padding: 5px 12px;
  border: 1px solid var(--agrid-accent-ln); border-radius: 6px;
  background: var(--agrid-accent-sf); color: var(--agrid-accent);
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.tdb-acard-notesbtn:hover { filter: brightness(.97); border-color: var(--agrid-accent); }
.tdb-acard-notesbtn button { cursor: pointer; }

/* ── 5. FIELD STRIP ────────────────────────────────────────────────────── */
/* One bordered container; every cell divided by a rule so it reads as a table
   row. Columns are generated from the user's visible account columns, so the
   count varies — auto-fit keeps them even, and `.narrow` pins value-ish cells. */
.tdb-acard-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  border: 1px solid var(--agrid-line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--agrid-card-bg);
}
.tdb-acard-fld { padding: 8px 10px; border-left: 1px solid var(--agrid-rule); min-width: 0; }
.tdb-acard-fld:first-child { border-left: none; }
.tdb-acard-fld.narrow { max-width: 128px; }
.tdb-acard-fld.wide   { grid-column: span 2; }
.tdb-acard-fld > span {
  display: block; font-size: 9px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--agrid-micro); margin-bottom: 4px;
}
.tdb-acard-fld input, .tdb-acard-fld select { width: 100%; box-sizing: border-box; max-width: 100%; }
@media (max-width: 900px) {
  .tdb-acard-fields { grid-template-columns: repeat(2, 1fr); }
  .tdb-acard-fld { border-top: 1px solid var(--agrid-rule); }
  .tdb-acard-fld:nth-child(-n+2) { border-top: none; }
  .tdb-acard-fld:nth-child(odd) { border-left: none; }
  .tdb-acard-fld.wide { grid-column: span 2; }
}

/* current next step — sits in the widest cell, must be readable */
.tdb-acard-cur { font-size: 12px; line-height: 1.5; color: var(--agrid-ink); max-height: 60px; overflow-y: auto; }
.tdb-acard-cur .d { display: inline-block; font-size: 10px; font-weight: 800; color: var(--agrid-accent); background: var(--agrid-accent-sf); border-radius: 4px; padding: 1px 5px; margin-right: 5px; }
.tdb-acard-cur .none { color: var(--agrid-micro); font-style: italic; }

/* ── 6. NEXT STEPS EDITOR ──────────────────────────────────────────────── */
.tdb-acard-ns { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--agrid-rule); }
.tdb-acard-prev { font-size: 12px; color: var(--agrid-ink); line-height: 1.55; margin-bottom: 7px; }
.tdb-acard-prev .d { display: inline-block; font-size: 10px; font-weight: 800; color: var(--agrid-sub); margin-right: 5px; }
.tdb-acard-ta {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 12.5px; line-height: 1.5;
  padding: 7px 9px; border: 1px solid var(--agrid-line); border-radius: 6px;
  background: var(--agrid-card-bg); color: var(--agrid-ink); resize: vertical; outline: none;
}
.tdb-acard-ta:focus { border-color: var(--agrid-accent); }
.tdb-acard-todorow { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.tdb-acard-todochk { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--agrid-sub); white-space: nowrap; cursor: pointer; }
.tdb-acard-todoin {
  flex: 1; min-width: 180px; box-sizing: border-box; font-family: inherit; font-size: 12.5px;
  padding: 6px 9px; border: 1px solid var(--agrid-line); border-radius: 6px;
  background: var(--agrid-card-bg); color: var(--agrid-ink); outline: none;
}
.tdb-acard-todoin:focus { border-color: #f59e0b; }
.tdb-acard-save { font-size: 11.5px; font-weight: 700; padding: 6px 14px; border: none; border-radius: 6px; background: var(--agrid-accent); color: #fff; cursor: pointer; font-family: inherit; }
.tdb-acard-save:hover { filter: brightness(1.08); }
.tdb-acard-save[disabled] { opacity: .45; cursor: default; filter: none; }

/* ── 7. META PANELS (action / partners / contacts / subs) ──────────────── */
.tdb-acard-metagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.tdb-acard-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2.5px 8px; border-radius: 999px; background: var(--agrid-chip); color: var(--agrid-ink); border: 1px solid var(--agrid-line); }
.tdb-acard-empty { font-size: 11.5px; color: var(--agrid-micro); }

/* people list — shared shape for PARTNERS and CONTACTS so both read the same:
   bold name line, then role/email beneath in muted text. */
.tdb-acard-people { display: flex; flex-direction: column; gap: 7px; }
.tdb-acard-person { font-size: 11.5px; line-height: 1.45; min-width: 0; }
.tdb-acard-person .nm { font-weight: 700; color: var(--agrid-ink); font-size: 12px; display: block; word-break: break-word; }
.tdb-acard-person .sub { color: var(--agrid-sub); display: block; word-break: break-word; }
.tdb-acard-person .em { color: var(--agrid-accent); display: block; word-break: break-all; }

/* A partner is a ROW, not a box: org name with its actions inline, assigned
   rep on the lines beneath. Keeps three or four partners readable as a short
   list instead of a stack of cards. */
.tdb-acard-partner { position: relative; padding: 6px 0; border-bottom: 1px solid var(--agrid-rule); }
.tdb-acard-partner:last-child { border-bottom: none; }
.tdb-acard-partner .org { display: flex; align-items: baseline; gap: 7px; }
.tdb-acard-partner .orgname { font-size: 12px; font-weight: 800; color: var(--agrid-ink); letter-spacing: -.1px; word-break: break-word; }
/* inline text actions — quiet until hovered so the name stays the focus */
.tdb-acard-partner .lnk {
  border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 10.5px; font-weight: 700; color: var(--agrid-sub); white-space: nowrap;
}
.tdb-acard-partner .lnk:hover { color: var(--agrid-accent); text-decoration: underline; }
.tdb-acard-partner .rm { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--agrid-sub); font-size: 14px; line-height: 1; padding: 0 2px; }
.tdb-acard-partner .rm:hover { color: #dc2626; }
.tdb-acard-partner .who { margin-top: 2px; padding-left: 1px; }
.tdb-acard-partner .who .nm { font-size: 11.5px; font-weight: 600; }
.tdb-acard-partner .who .em { font-size: 11px; }
.tdb-acard-addrow { margin-top: 7px; }
.tdb-acard-addin {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 12px;
  padding: 5px 8px; border: 1px solid var(--agrid-accent); border-radius: 6px;
  background: var(--agrid-card-bg); color: var(--agrid-ink); outline: none;
}
/* Deal proposal card — scoped, no !important, tokens for theming.
   Follows the convention set by ImportAccountsModal.css. */
.tdb-vtu-deal {
  --vd-line: #e6ebf2;
  --vd-field: #dbe3ee;
  --vd-ink: #0f172a;
  --vd-ink-3: #64748b;
  --vd-surface: #fff;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid var(--vd-line);
  border-radius: 8px;
  background: #f8fafc;
}
.tdb-vtu-deal-head {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--vd-ink-3); margin-bottom: 9px;
}
.tdb-vtu-deal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 9px; }
.tdb-vtu-deal-grid label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tdb-vtu-deal-grid label > span { font-size: 10.5px; font-weight: 700; color: var(--vd-ink-3); text-transform: uppercase; letter-spacing: .4px; }
.tdb-vtu-deal-grid select,
.tdb-vtu-deal-grid input {
  width: 100%; box-sizing: border-box; padding: 6px 8px;
  border: 1px solid var(--vd-field); border-radius: 6px; outline: none;
  background: var(--vd-surface); color: var(--vd-ink);
  font: inherit; font-size: 12.5px;
}
.tdb-vtu-deal-grid select:focus,
.tdb-vtu-deal-grid input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tdb-vtu-deal-note { margin-top: 8px; font-size: 11px; color: var(--vd-ink-3); line-height: 1.5; }
html[data-theme="dark"] .tdb-vtu-deal {
  --vd-line: rgba(148,163,184,.2); --vd-field: rgba(148,163,184,.28);
  --vd-ink: #dbe4f0; --vd-ink-3: #8c9ab0; --vd-surface: #141b28;
  background: #161d2b;
}
/* ══ Import accounts modal ═══════════════════════════════════════════════
   Template for how styling should be written from here on.

   Rules this file follows, and the reasons:

   1. ONE FILE PER COMPONENT, imported by that component. Vite bundles it
      automatically. Deleting the component deletes its styles with it —
      no orphaned rules accumulating in a shared sheet.

   2. EVERYTHING SCOPED under .tdb-ia. Nothing here can leak into another
      component, so nobody has to defend against it later.

   3. NO !important ANYWHERE. Scoping already wins the specificity fight.
      The moment one rule needs !important, the next one does too, and the
      file becomes unarguable.

   4. NEVER SELECT ON INLINE STYLE VALUES. The shared sheet is full of
      things like [style*="background: rgb(251, 253, 255)"], which means
      changing a colour in JS silently breaks the CSS. Classes only.

   5. TOKENS AS CUSTOM PROPERTIES, declared once on the root and reused.
      Dark mode then reassigns the tokens instead of restating every rule.
   ════════════════════════════════════════════════════════════════════════ */

.tdb-ia {
  --ia-surface: #fff;
  --ia-raised: #f5f9ff;
  --ia-line: #e6ebf2;
  --ia-hairline: #eef2f7;
  --ia-field: #dbe3ee;
  --ia-idle: #e3e9f1;
  --ia-accent: #2563eb;
  --ia-ink: #0f172a;
  --ia-ink-2: #475569;
  --ia-ink-3: #64748b;
  --ia-muted: #94a3b8;
  --ia-ok: #166534;
  --ia-err: #b91c1c;
  --ia-disabled: #cbd5e1;
}

/* ── Shell ───────────────────────────────────────────────────────────── */
.tdb-ia-overlay {
  position: fixed;
  inset: 0;
  z-index: 100060;
  background: rgba(9, 20, 44, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px;
}
.tdb-ia {
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ia-surface);
  border: 1px solid var(--ia-line);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(8, 20, 45, 0.34);
}
.tdb-ia-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 15px 20px;
  border-bottom: 1px solid var(--ia-hairline);
}
.tdb-ia-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ia-ink);
}
.tdb-ia-step {
  font-size: 11px;
  font-weight: 700;
  color: var(--ia-muted);
}
.tdb-ia-x {
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--ia-muted);
  font: inherit;
  font-size: 19px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tdb-ia-x:hover { background: var(--ia-hairline); color: var(--ia-ink); }
.tdb-ia-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.tdb-ia-foot {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-shrink: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--ia-hairline);
}

/* ── Type ────────────────────────────────────────────────────────────── */
.tdb-ia h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ia-ink);
}
.tdb-ia-sub {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ia-ink-3);
}
.tdb-ia-sub strong { color: var(--ia-ink); }
.tdb-ia-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ia-ink-3);
}

/* ── Choice cards ────────────────────────────────────────────────────── */
.tdb-ia-choices { display: grid; gap: 9px; margin-top: 18px; }
.tdb-ia-card {
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  border: 1.5px solid var(--ia-idle);
  border-radius: 9px;
  background: var(--ia-surface);
  font: inherit;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.tdb-ia-card:hover { border-color: #c3d4ee; }
.tdb-ia-card.is-on {
  border-color: var(--ia-accent);
  background: var(--ia-raised);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
.tdb-ia-card-top { display: flex; align-items: center; gap: 9px; }
.tdb-ia-radio {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--ia-disabled);
  border-radius: 999px;
  background: var(--ia-surface);
  transition: border-color .12s, border-width .12s;
}
.tdb-ia-card.is-on .tdb-ia-radio { border: 4.5px solid var(--ia-accent); }
.tdb-ia-card-name { font-size: 13.5px; font-weight: 700; color: var(--ia-ink); }
.tdb-ia-card-blurb {
  margin-top: 5px;
  padding-left: 23px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ia-ink-3);
}
.tdb-ia-card-extra { margin-top: 10px; padding-left: 23px; }

/* ── Fields ──────────────────────────────────────────────────────────── */
.tdb-ia-field {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--ia-field);
  border-radius: 7px;
  outline: none;
  background: var(--ia-surface);
  color: var(--ia-ink);
  font: inherit;
  font-size: 13.5px;
  transition: border-color .14s, box-shadow .14s;
}
.tdb-ia-field:focus {
  border-color: var(--ia-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.tdb-ia-field::placeholder { color: #a8b4c5; }
textarea.tdb-ia-field {
  min-height: 190px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
}
.tdb-ia-paste { margin-top: 16px; }
.tdb-ia-paste-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.tdb-ia-count { font-size: 11.5px; font-weight: 700; color: var(--ia-ok); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.tdb-ia-btn {
  border-radius: 7px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.tdb-ia-btn-primary {
  font-size: 13px;
  padding: 9px 18px;
  border: 1px solid var(--ia-accent);
  background: var(--ia-accent);
  color: #fff;
}
.tdb-ia-btn-primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }
.tdb-ia-btn-primary:disabled {
  background: var(--ia-disabled);
  border-color: var(--ia-disabled);
  cursor: default;
}
.tdb-ia-btn-secondary {
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 15px;
  border: 1px solid var(--ia-field);
  background: var(--ia-surface);
  color: var(--ia-ink-2);
}
.tdb-ia-btn-secondary:hover { border-color: var(--ia-accent); color: var(--ia-accent); }

/* ── States ──────────────────────────────────────────────────────────── */
.tdb-ia-error { margin-top: 11px; font-size: 12.5px; font-weight: 700; color: var(--ia-err); }
.tdb-ia-done { padding: 10px 0; }
.tdb-ia-done-head { font-size: 15px; font-weight: 700; color: var(--ia-ok); }

/* ── Dark ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .tdb-ia {
  --ia-surface: #141b28;
  --ia-raised: #1b2942;
  --ia-line: rgba(148, 163, 184, 0.20);
  --ia-hairline: rgba(148, 163, 184, 0.16);
  --ia-field: rgba(148, 163, 184, 0.28);
  --ia-idle: rgba(148, 163, 184, 0.22);
  --ia-accent: #3b82f6;
  --ia-ink: #dbe4f0;
  --ia-ink-2: #a9b6c9;
  --ia-ink-3: #8c9ab0;
  --ia-muted: #7d8ba1;
  --ia-ok: #4ade80;
  --ia-err: #f87171;
  --ia-disabled: #3a4557;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .tdb-ia-card:hover { border-color: rgba(59, 130, 246, 0.45); }
html[data-theme="dark"] .tdb-ia-field::placeholder { color: #6b7890; }