/* Little Bro app stylesheet.
 * Extracted from web/index.html <style> in v2.164.0 (modular monolith Phase 1).
 * New CSS goes here — do not add a <style> block to index.html.
 * See docs/tdp/2026-08-25-modular-monolith.md and docs/CODEMAP.md.
 */
      /* Theme + typography (single scale) */
      :root {
        color-scheme: light dark;
        /* One font across all themes — Inter for sans + display, IBM
           Plex Mono for code/data. Earlier versions had DM Sans /
           Fraunces serifs on dark+light and only swapped to Inter for
           Harper; that meant theme toggles changed the typeface as
           well as the colors, which was jarring. Unified to Inter
           everywhere so theme switching is purely about color. */
        --font-harper: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --font-sans: var(--font-harper);
        --font-display: var(--font-harper);
        --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        --text-xs: 0.75rem;
        --text-sm: 0.8125rem;
        --text-base: 0.9375rem;
        --lh: 1.45;
        --radius: 10px;
        --radius-lg: 14px;
        --bg: #0b1220;
        --panel: rgba(255, 255, 255, 0.06);
        --text: rgba(255, 255, 255, 0.92);
        --muted: rgba(255, 255, 255, 0.68);
        --border: rgba(255, 255, 255, 0.12);
        /* Toned-down sky (Harris, 2026-07-23): #7dd3fc was searing on
           the dark background — same hue, less glare. */
        --accent: #67b8e3;
        --danger: #fb7185;
        --input-bg: rgba(0, 0, 0, 0.18);
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
        --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.22);
        --ring: rgba(103, 184, 227, 0.42);
        --section-title: rgba(255, 255, 255, 0.98);
        /* Solid modal surface (Harris, 2026-07-23): --panel is a 4–6%
           alpha tint meant for inline panels on the page background —
           floating over a blurred backdrop it reads as clear glass and
           modal text washes out. Every theme defines a SOLID surface for
           modal cards: darker navy here so compose text pops. */
        --modal-surface: #101a2c;
      }
      @media (prefers-color-scheme: light) {
        :root {
          /* Dimmer paper so Harry/Ammar breath glows read (v2.78.86). */
          --bg: #dfe7ef;
          --panel: rgba(15, 23, 42, 0.05);
          --text: rgba(2, 6, 23, 0.92);
          --muted: rgba(2, 6, 23, 0.62);
          --border: rgba(2, 6, 23, 0.14);
          --accent: #0284c7;
          --danger: #e11d48;
          --input-bg: rgba(255, 255, 255, 0.78);
          --shadow: 0 4px 24px rgba(15, 23, 42, 0.1);
          --shadow-sm: 0 2px 12px rgba(15, 23, 42, 0.07);
          --ring: rgba(2, 132, 199, 0.35);
          --section-title: #000;
          --modal-surface: #eef4fa;
        }
      }
      [data-theme="dark"] {
        color-scheme: dark;
        --bg: #0b1220;
        --panel: rgba(255, 255, 255, 0.06);
        --text: rgba(255, 255, 255, 0.92);
        --muted: rgba(255, 255, 255, 0.68);
        --border: rgba(255, 255, 255, 0.12);
        --accent: #67b8e3; /* toned-down sky — see :root note */
        --danger: #fb7185;
        --input-bg: rgba(0, 0, 0, 0.22);
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
        --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.22);
        --ring: rgba(103, 184, 227, 0.42);
        --section-title: rgba(255, 255, 255, 0.98);
        --modal-surface: #101a2c;
      }
      [data-theme="light"] {
        color-scheme: light;
        /* Dimmer slate paper — Harry/Ammar breath glows need contrast (v2.78.86). */
        --bg: #dfe7ef;
        --panel: rgba(15, 23, 42, 0.05);
        --text: rgba(2, 6, 23, 0.92);
        --muted: rgba(2, 6, 23, 0.62);
        --border: rgba(2, 6, 23, 0.14);
        --accent: #0284c7;
        --danger: #e11d48;
        --input-bg: rgba(255, 255, 255, 0.78);
        --shadow: 0 4px 24px rgba(15, 23, 42, 0.1);
        --shadow-sm: 0 2px 12px rgba(15, 23, 42, 0.07);
        --ring: rgba(2, 132, 199, 0.35);
        --section-title: #000;
        --modal-surface: #eef4fa;
      }
      /* Quiet the default blue/pink body wash on light — it was bleaching
         the topbar brain glows. */
      [data-theme="light"] body {
        background:
          radial-gradient(1100px 520px at 18% -8%, rgba(2, 132, 199, 0.07), transparent 58%),
          radial-gradient(900px 500px at 82% 0%, rgba(15, 23, 42, 0.04), transparent 55%),
          var(--bg);
      }
      /* Harper theme — matches harperinsure.com brand language.
         Warm cream paper background, deep navy text, brand green accent.
         Font is Inter (set globally in :root, so no override needed
         here — only colors differ from the dark/light defaults). */
      [data-theme="harper"] {
        color-scheme: light;
        /* Dimmer warm paper so green/navy brain breath shows (v2.78.86). */
        --bg: #e4dccf;
        --panel: rgba(255, 255, 255, 0.72);
        --text: #0a1f3d;
        --muted: rgba(10, 31, 61, 0.6);
        --border: rgba(10, 31, 61, 0.14);
        --accent: #1a8f5e;
        --danger: #c2410c;
        --input-bg: rgba(255, 255, 255, 0.88);
        --shadow: 0 4px 24px rgba(10, 31, 61, 0.1);
        --shadow-sm: 0 2px 12px rgba(10, 31, 61, 0.07);
        --ring: rgba(26, 143, 94, 0.32);
        --section-title: #000;
        --modal-surface: #f3efe6;
      }
      [data-theme="harper"] body {
        background:
          radial-gradient(1100px 500px at 15% -5%, rgba(26, 143, 94, 0.07), transparent 55%),
          radial-gradient(900px 500px at 85% 5%, rgba(10, 31, 61, 0.05), transparent 60%),
          var(--bg);
      }
      /* Monochromatic theme (Harris, 2026-07-23) — black, white, and
         grays only. Everything driven by the theme variables goes
         grayscale: paper-white background, ink-black text and accents,
         gray borders/shadows/rings. Brand logos and semantically colored
         bits (status reds/greens, the coral Harper marks) keep their
         color — Harris explicitly exempted those. NOTE: a page-level
         filter: grayscale(1) is NOT an option here — the document body
         scrolls (sticky sidebar), and a filter on a scrolling ancestor
         re-anchors every position:fixed modal/toast to the document. */
      [data-theme="mono"] {
        color-scheme: light;
        /* Dimmer gray field for breath contrast (v2.78.86). */
        --bg: #dcdcdc;
        --panel: rgba(0, 0, 0, 0.055);
        --text: rgba(12, 12, 12, 0.93);
        --muted: rgba(12, 12, 12, 0.58);
        --border: rgba(12, 12, 12, 0.2);
        --accent: #111111;
        --danger: #4a4a4a;
        --input-bg: rgba(255, 255, 255, 0.88);
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
        --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.09);
        --ring: rgba(0, 0, 0, 0.35);
        --section-title: #000;
        --modal-surface: #ececec;
      }
      /* The default body/sidebar washes are blue/pink tints — regray them. */
      [data-theme="mono"] body {
        background:
          radial-gradient(1200px 600px at 20% -10%, rgba(0, 0, 0, 0.07), transparent 60%),
          radial-gradient(900px 600px at 80% 0%, rgba(0, 0, 0, 0.05), transparent 55%),
          var(--bg);
      }
      [data-theme="mono"] .sidebar {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), transparent 40%), var(--panel);
      }
      /* ── Light-scheme readable accent text (v2.151.0) ─────────────────
         Tomas couldn't read the light theme: dozens of pills, badges,
         counters, and status labels hardcoded PASTEL dark-theme accent
         colors (mint #34d399, amber #fbbf24, sky #7dd3fc, coral #ff6d63,
         rose #fb7185 …) that sit at 1.1–3.2:1 contrast on light paper.
         Instead of hand-overriding ~100 rules per theme, those rules now
         say `color: var(--lb-ok-text, #34d399)`: on dark the var is
         undefined so the original pastel wins; on every light-scheme
         theme the vars below supply a deep, WCAG-AA-contrast version of
         the same hue. Themes with bespoke per-component overrides
         (audit pills, uw tags, ps outcomes …) keep them — higher
         specificity still wins. When adding a new status color, use
         these vars, never a bare pastel. */
      [data-theme="light"], [data-theme="harper"], [data-theme="mono"] {
        --lb-ok-text: #067647;      /* greens / mints */
        --lb-warn-text: #92400e;    /* ambers / golds */
        --lb-orange-text: #9a3412;
        --lb-bad-text: #b42318;     /* reds */
        --lb-rose-text: #be123c;    /* pink-reds (#fb7185) */
        --lb-coral-text: #c03d33;   /* Harper coral, deepened */
        --lb-sky-text: #075985;     /* pale skies (#7dd3fc) */
        --lb-blue-text: #1d4ed8;
        --lb-violet-text: #5b21b6;
        --lb-pink-text: #be185d;
        --lb-slate-text: #475569;
      }
      /* No explicit theme picked + OS in light mode — same story. */
      @media (prefers-color-scheme: light) {
        html:not([data-theme]) {
          --lb-ok-text: #067647;
          --lb-warn-text: #92400e;
          --lb-orange-text: #9a3412;
          --lb-bad-text: #b42318;
          --lb-rose-text: #be123c;
          --lb-coral-text: #c03d33;
          --lb-sky-text: #075985;
          --lb-blue-text: #1d4ed8;
          --lb-violet-text: #5b21b6;
          --lb-pink-text: #be185d;
          --lb-slate-text: #475569;
        }
      }
      [data-theme="harper"] h1, [data-theme="harper"] h2, [data-theme="harper"] h3, [data-theme="harper"] .display {
        font-family: var(--font-harper);
        letter-spacing: -0.02em;
        font-weight: 600;
      }
      [data-theme="harper"] .panel {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
      [data-theme="harper"] .sidebar {
        background:
          linear-gradient(180deg, rgba(26, 143, 94, 0.08), transparent 30%),
          rgba(255, 255, 255, 0.78);
      }
      [data-theme="harper"] .sidebar-nav .nav-item:hover { background: rgba(26, 143, 94, 0.08); }
      [data-theme="harper"] .sidebar-nav .nav-item.active { background: rgba(26, 143, 94, 0.14); color: var(--accent); }
      body {
        margin: 0;
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        line-height: var(--lh);
        background: radial-gradient(1200px 600px at 20% -10%, rgba(125, 211, 252, 0.20), transparent 60%),
          radial-gradient(900px 600px at 80% 0%, rgba(251, 113, 133, 0.14), transparent 55%),
          var(--bg);
        color: var(--text);
      }
      code {
        font-family: var(--font-mono);
        font-size: 0.9em;
      }
      /* === Editorial typography overlay (added) === */
      h1, h2, h3, .display { font-family: var(--font-display); font-feature-settings: "ss01" on, "ss02" on; letter-spacing: -0.015em; }
      .mono, .table-data .col-id, .table-data .col-renewal, .table-data .col-target,
      .table-data .col-urgency, .pill, .urg, .item-urg, .cal-urg, .cal-day-num,
      .activity-list .when, .table-data th { font-family: var(--font-mono); }

      /* === Layout: sidebar + main (added) === */
      body { display: flex; min-height: 100vh; width: 100%; }
      .sidebar {
        position: sticky; top: 0;
        flex-shrink: 0;
        /* Classic rail — Pro (body.layout-v2) narrows to bubble chrome below.
           v2.92.0 — widened 240 → 250px for the roomier rows. */
        width: 250px;
        height: 100vh;
        padding: 22px 16px 16px;
        display: flex; flex-direction: column;
        border-right: 1px solid var(--border);
        background: linear-gradient(180deg, rgba(125,211,252,0.08), transparent 40%), var(--panel);
        backdrop-filter: blur(12px);
        z-index: 10;
        overflow: hidden;  /* the inner scroll region handles overflow */
      }
      body.layout-v2 .sidebar {
        width: 208px;
        padding: 16px 12px 12px;
      }
      /* Brand stays pinned at top, foot at bottom; only the middle scrolls. */
      .sidebar-scroll {
        flex: 1 1 auto;
        min-height: 0;        /* required for nested overflow in flex column */
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex; flex-direction: column; gap: 8px;
        padding-top: 0;
        padding-right: 0;
        margin-right: 0;
      }
      body.layout-v2 .sidebar-scroll {
        gap: 12px;
        /* Top pad so iOS rim badges on the first bubble aren't clipped. */
        padding-top: 12px;
        padding-right: 4px;
        margin-right: -4px;
      }
      .sidebar-scroll::-webkit-scrollbar { width: 6px; }
      .sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
      .sidebar-scroll::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 3px;
      }
      .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }
      [data-theme="light"] .sidebar { background: linear-gradient(180deg, rgba(2,132,199,0.06), transparent 40%), rgba(255,255,255,0.7); }
      /* Classic brand — left stack. Pro centers it (body.layout-v2). */
      .sidebar-brand {
        font-family: var(--font-display);
        padding: 4px 8px 12px;
        line-height: 1.1;
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 6px;
      }
      .brand-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 4px;
        min-width: 0;
        flex: 1;
      }
      .sidebar-brand .sidebar-collapse-btn {
        position: relative;
        top: auto;
        right: auto;
        flex-shrink: 0;
      }
      .sidebar-brand .brand-harper-logo { display: inline-block; height: 22px; width: auto; align-self: flex-start; margin-bottom: 2px; }
      body.layout-v2 .sidebar-brand {
        justify-content: center;
        padding: 4px 6px 12px;
      }
      body.layout-v2 .brand-stack {
        align-items: center;
        text-align: center;
        gap: 3px;
      }
      body.layout-v2 .sidebar-brand .sidebar-collapse-btn {
        position: absolute;
        top: 2px;
        right: 2px;
      }
      body.layout-v2 .sidebar-brand .brand-harper-logo {
        height: 20px;
        align-self: center;
      }
      /* Pro badge — tiny Harper-coral pill. Only when Little Bro Pro
         (body.layout-v2) is on — classic splash/AFK/sidebar hide it. */
      .splash-name,
      .sidebar-brand .brand-name,
      .lb-afk-name {
        position: relative;
        overflow: visible;
      }
      .lb-pro-badge {
        position: absolute;
        /* Sit just past the right edge of "Little Bro" — left of Pro
           starts where the word ends, nudged up slightly for the corner. */
        top: -0.18em;
        left: 100%;
        right: auto;
        margin-left: 0.14em;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0.22em 0.5em 0.2em;
        border-radius: 999px;
        font-family: var(--font-mono);
        font-size: 0.22em;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-indent: 0.04em;
        text-transform: uppercase;
        line-height: 1;
        color: #ffffff;
        background: linear-gradient(180deg, #ff8f87 0%, #FF6D63 52%, #e85a52 100%);
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow:
          0 0 0 1.5px rgba(255, 109, 99, 0.3),
          0 0 10px 2px rgba(255, 109, 99, 0.48),
          0 1px 3px rgba(200, 60, 50, 0.3);
        transform: scale(1);
        transform-origin: center;
        animation: lbProBreath 2.8s ease-in-out infinite;
        white-space: nowrap;
        pointer-events: none;
        z-index: 2;
      }
      /* Pro badge only when Little Bro Pro is on (classic splash/AFK/sidebar hide it). */
      body.layout-v2 .splash-name .lb-pro-badge,
      body.layout-v2 .lb-afk-name .lb-pro-badge,
      body.layout-v2 .sidebar-brand .brand-name .lb-pro-badge { display: inline-flex; }
      @keyframes lbProBreath {
        0%, 100% {
          transform: scale(1);
          box-shadow:
            0 0 0 1.5px rgba(255, 109, 99, 0.26),
            0 0 8px 2px rgba(255, 109, 99, 0.4),
            0 1px 3px rgba(200, 60, 50, 0.26);
        }
        50% {
          transform: scale(1.08);
          box-shadow:
            0 0 0 2.5px rgba(255, 109, 99, 0.42),
            0 0 16px 4px rgba(255, 109, 99, 0.62),
            0 2px 5px rgba(200, 60, 50, 0.34);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .lb-pro-badge { animation: none; }
      }
      /* "Pro" tag on the settings section title. */
      .lb-upgrade-tag {
        display: inline-flex;
        align-items: center;
        margin-left: 8px;
        padding: 2px 9px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        background: rgba(255, 109, 99, 0.16);
        color: var(--lb-coral-text, #FF6D63);
        border: 1px solid rgba(255, 109, 99, 0.35);
        vertical-align: middle;
      }
      /* Brand wordmarks — Inter (original). Merienda / Noto experiments reverted. */
      .splash-name,
      .sidebar-brand .brand-name,
      .lb-afk-name,
      .lv2-hub-word,
      .lv2-hub-heading-word {
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      .sidebar-brand .brand-name {
        font-size: 1.4rem;
        color: var(--text);
        line-height: 1.05;
      }
      body.layout-v2 .sidebar-brand .brand-name {
        font-size: 1.3rem;
        line-height: 1.15;
      }
      [data-theme="harper"] .sidebar-brand .brand-name {
        font-family: var(--font-harper);
        color: #0a1f3d;
      }
      .sidebar-brand .brand-tagline {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--muted);
        font-weight: 500;
      }
      [data-theme="harper"] .sidebar-brand .brand-tagline {
        color: #1a8f5e;
      }

      /* Module switcher (v26.60). Two-button segmented control at the
         top of the sidebar that toggles between Renewals and Post-Sales
         modes. The active button gets the brand accent fill; the other
         is a quiet outline. State persists in localStorage. */
      /* Module switcher — a vertical stack of full-width pills. Horizontal
         segments were cramped (three labels, one of them "Submissions",
         squeezed into a ~196px sidebar). Stacking gives each module a roomy,
         tappable row with a leading active indicator that never truncates. */
      .module-switcher {
        display: flex;
        flex-direction: column;
        margin: 2px 2px 8px;
        gap: 2px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 3px;
      }
      .module-switcher .module-btn {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        text-align: left;
        background: transparent;
        border: none;
        /* v2.92.0 — bigger tap target + label so the top-level module
           choice reads as the rail's primary control. */
        padding: 8px 10px;
        font-family: var(--font-base);
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
        border-radius: 9px;
        transition: background 0.12s, color 0.12s;
        letter-spacing: 0.01em;
      }
      /* Leading dot doubles as the active indicator. */
      .module-switcher .module-btn::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--border);
        transition: background 0.12s, box-shadow 0.12s;
      }
      .module-switcher .module-btn:hover:not(.is-active) {
        color: var(--text);
        background: rgba(255, 255, 255, 0.04);
      }
      .module-switcher .module-btn:hover:not(.is-active)::before { background: var(--muted); }
      [data-theme="light"] .module-switcher .module-btn:hover:not(.is-active),
      [data-theme="mono"] .module-switcher .module-btn:hover:not(.is-active) {
        background: rgba(15, 23, 42, 0.04);
      }
      .module-switcher .module-btn.is-active {
        background: var(--accent);
        color: var(--bg);
        box-shadow: 0 1px 4px rgba(15, 37, 64, 0.2);
      }
      .module-switcher .module-btn.is-active::before {
        background: var(--bg);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
      }
      [data-theme="harper"] .module-switcher .module-btn.is-active {
        background: #1a8f5e;
        color: #FFFFFF;
      }
      [data-theme="harper"] .module-switcher .module-btn.is-active::before {
        background: #FFFFFF;
        box-shadow: 0 0 0 2px rgba(26, 143, 94, 0.35);
      }

      .sidebar-collapse-btn {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--muted);
        border-radius: 6px;
        padding: 2px 8px;
        font-size: 12px;
        font-family: var(--font-mono);
        cursor: pointer;
        line-height: 1;
        transition: color 0.12s, border-color 0.12s, background 0.12s;
      }
      .sidebar-collapse-btn:hover {
        color: var(--text);
        border-color: var(--accent);
        background: var(--input-bg);
      }
      /* Floating expand button — shown only when sidebar is collapsed. */
      .sidebar-expand-btn {
        position: fixed;
        top: 14px;
        left: 14px;
        z-index: 80;
        background: var(--panel);
        border: 1px solid var(--border);
        color: var(--muted);
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 12px;
        font-family: var(--font-mono);
        cursor: pointer;
        line-height: 1;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
        display: none;
      }
      .sidebar-expand-btn:hover {
        color: var(--text);
        border-color: var(--accent);
      }
      /* Collapsed state — set via JS toggling the `sidebar-collapsed` class on body. */
      body.sidebar-collapsed .sidebar { display: none; }
      body.sidebar-collapsed .sidebar-expand-btn { display: inline-block; }
      body.sidebar-collapsed .main { padding-left: 56px; }
      .sidebar-section-label {
        position: relative;
        font-family: var(--font-mono);
        text-transform: uppercase;
        /* v2.92.0 — headers were 10px and easy to miss; slightly larger,
           wider tracking, and a touch more contrast so groups anchor the
           eye when scanning the rail. */
        letter-spacing: 0.12em;
        font-size: 10.5px;
        font-weight: 700;
        color: color-mix(in srgb, var(--muted) 78%, var(--text));
        padding: 6px 10px;
        margin-top: 4px;
      }
      /* v2.90.0 sidebar restyle (Harris: "confusing where to click") —
         hairline separators between the module-agnostic groups so the rail
         reads as distinct sections instead of one continuous list. Drawn
         as a ::before hairline (not border-top) so the rounded hover pill
         on the toggle doesn't bend the line. Module groups sit directly
         under the module switcher and nested groups (Admin → Bots) already
         carry an indent rail, so neither gets a separator. */
      .sidebar-scroll .sidebar-section-label:not(.module-section):not(.admin-nested-section) {
        margin-top: 14px;
      }
      .sidebar-scroll .sidebar-section-label:not(.module-section):not(.admin-nested-section)::before {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        top: -8px;
        height: 1px;
        background: color-mix(in srgb, var(--border) 92%, transparent);
      }
      /* Collapsible section headers (accordion). The label becomes a
         clickable toggle with a caret; its paired .sidebar-nav collapses
         underneath it. State persists per-section in localStorage. */
      .sidebar-section-label.section-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        cursor: pointer;
        user-select: none;
        border-radius: 6px;
        transition: color 0.12s ease, background 0.12s ease;
      }
      .sidebar-section-label.section-toggle:hover {
        color: var(--text);
        background: var(--input-bg);
      }
      .sidebar-section-label .section-caret {
        font-size: 10px;
        line-height: 1;
        opacity: 0.75;
        transition: transform 0.15s ease, color 0.12s ease, opacity 0.12s ease;
      }
      .sidebar-section-label.section-toggle:hover .section-caret {
        color: var(--accent);
        opacity: 1;
      }
      .sidebar-section-label.collapsed .section-caret { transform: rotate(-90deg); }
      .sidebar-nav.collapsed { display: none; }
      /* Show all / Collapse all toggle pill at the top of the nav. */
      .sidebar-toolbar {
        display: flex;
        padding: 0 6px 2px;
      }
      .sidebar-toggle-all {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: transparent;
        border: 1px solid var(--border);
        color: var(--muted);
        font-family: var(--font-mono);
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 4px 8px;
        border-radius: 999px;
        cursor: pointer;
        transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
      }
      .sidebar-toggle-all:hover {
        color: var(--text);
        border-color: var(--accent);
        background: var(--input-bg);
      }
      [data-theme="harper"] .sidebar-toggle-all:hover { border-color: rgba(26, 143, 94, 0.45); }
      .sidebar-toggle-all .sta-icon { font-size: 11px; line-height: 1; }
      .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0;
      }
      /* Classic flat nav rows. Pro bubble chips live under body.layout-v2.
         v2.92.0 revamp (Harris: "more visible, more intuitive, flow
         better") — taller rows with a real minimum height, a fixed 13px
         label, bigger icons, and a gentle indent-on-hover so every row
         reads and feels like a button. */
      .sidebar-nav .nav-item {
        position: relative;
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 500;
        text-align: left;
        padding: 8px 11px;
        border: 1px solid transparent;
        border-radius: var(--radius);
        background: transparent;
        color: var(--text);
        cursor: pointer;
        display: flex;
        align-items: center;
        /* v2.90.0 — items now lead with an icon, so the row flows
           icon → label left-aligned and the count pushes itself to the
           right edge via margin-left:auto (space-between would strand
           the label in the middle of the row). */
        justify-content: flex-start;
        gap: 10px;
        line-height: 1.25;
        min-height: 36px;
        white-space: normal;
        overflow: hidden;
        box-shadow: none;
        transition: background 0.12s ease, border-color 0.12s ease,
                    color 0.12s ease, transform 0.12s ease;
      }
      /* v2.90.0 sidebar restyle — per-tab line icons (same Harper stroke
         style as the Hub's LV2_ICONS; injected by initSidebarNavIcons()).
         Icons anchor each row so the eye can scan the rail by shape, and
         the icon inherits the row's state color: muted at rest, text on
         hover, accent when active. Pro's bubble chips keep their own
         centered look — icons are a classic-rail affordance only. */
      .sidebar-nav .nav-item .nav-ic {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        color: var(--muted);
        transition: color 0.12s ease;
      }
      .sidebar-nav .nav-item .nav-ic svg { width: 16px; height: 16px; }
      .sidebar-nav .nav-item:hover .nav-ic { color: var(--text); }
      .sidebar-nav .nav-item.active .nav-ic { color: var(--accent); }
      /* v2.93.0 — icons now show in Pro too (they were classic-only,
         which is why the Pro bubble rail never looked any different
         after the v2.90/v2.92 sidebar work). Pro-specific icon state
         colors live in the Pro block below. */
      .sidebar-nav .nav-item:hover {
        background: rgba(125, 211, 252, 0.08);
        border-color: var(--border);
        /* v2.92.0 — tiny indent on hover: cheap, obvious "this is
           clickable" affordance without any layout shift. */
        transform: translateX(2px);
        box-shadow: none;
      }
      .sidebar-nav .nav-item.active:hover { transform: none; }
      [data-theme="light"] .sidebar-nav .nav-item:hover { background: rgba(2, 132, 199, 0.06); }
      .sidebar-nav .nav-item.active {
        background: rgba(125, 211, 252, 0.18);
        border-color: var(--accent);
        /* v2.92.0 — active label picks up the accent in every theme
           (was harper-only), pairing with the accent bar + icon so "you
           are here" is unmistakable. */
        color: var(--accent);
        font-weight: 650;
        box-shadow: none;
      }
      /* v2.90.0 — active accent bar. The old 2px focus ring around the
         whole row read as noise next to the module switcher; a rounded
         accent bar on the left edge is the calmer "you are here". */
      .sidebar-nav .nav-item.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 7px;
        bottom: 7px;
        width: 3px;
        border-radius: 999px;
        background: var(--accent);
      }
      body.layout-v2 .sidebar-nav .nav-item.active::before { display: none; }
      [data-theme="light"] .sidebar-nav .nav-item.active { background: rgba(2, 132, 199, 0.12); }
      [data-theme="harper"] .sidebar-nav .nav-item:hover {
        background: rgba(26, 143, 94, 0.08);
        box-shadow: none;
      }
      [data-theme="harper"] .sidebar-nav .nav-item.active {
        background: rgba(26, 143, 94, 0.14);
        color: var(--accent);
        box-shadow: none; /* v2.90.0 — accent bar replaces the ring */
      }
      /* Nested Admin → Bots (and future bot homes). Indented so it reads
         as a child of Admin without adding a second top-level weight. */
      .sidebar-section-label.admin-nested-section {
        margin-top: 2px;
        margin-left: 10px;
        padding-left: 10px;
        font-size: 10px;
        letter-spacing: 0.06em;
        border-left: 2px solid color-mix(in srgb, var(--border) 80%, transparent);
      }
      .sidebar-nav.admin-nested-section {
        margin-left: 10px;
        padding-left: 8px;
        border-left: 2px solid color-mix(in srgb, var(--border) 80%, transparent);
      }
      .sidebar-nav .nav-count {
        position: static;
        top: auto;
        right: auto;
        z-index: auto;
        /* v2.90.0 — rows are flex-start now (icon + label lead), so the
           count claims the right edge itself.
           v2.92.0 — counts became soft pills instead of bare mono digits:
           far easier to spot at a glance, and the tint tells state (muted
           at rest, accent on the active row, red when follow-ups are due). */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        min-width: 22px;
        height: 17px;
        padding: 0 6px;
        border-radius: 999px;
        border: none;
        background: color-mix(in srgb, var(--muted) 14%, transparent);
        color: var(--muted) !important;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0;
        box-shadow: none;
        pointer-events: auto;
      }
      .sidebar-nav .nav-count:empty,
      .sidebar-nav .nav-count.hide { display: none; }
      /* v2.131.0 — lane tag on the Agentic Enablement nav rows: same
         feature, two lanes (Renewals / PSS), so the chip says which
         book this one works (Harris, 2026-08-07). */
      .nav-lane-tag {
        display: inline-flex;
        align-items: center;
        margin-left: 5px;
        padding: 1px 5px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--accent) 16%, transparent);
        color: var(--accent);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        line-height: 1.4;
      }
      /* v2.134.1 — the lane tag sat inline after "Agentic Enablement" and
         spilled past the rounded edge of Pro's bubble chips (the chip is a
         rigid flex item and the pill has no room left). The label + tag now
         stack as a two-line lockup inside the row, so the tag always stays
         inside the bubble in both rails (Harris, 2026-08-07).
         v2.134.2: the label itself was wrapping to a second line in Pro's
         narrow pill, turning the lockup into three misaligned lines
         ("centering … is funky") — nav-label-main pins it to one line,
         slightly condensed in Pro so it fits. */
      .sidebar-nav .nav-item .nav-label-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 3px;
        flex: 1 1 auto;
        min-width: 0;
      }
      .sidebar-nav .nav-item .nav-label-stack .nav-label-main {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      body.layout-v2 .sidebar-nav .nav-item .nav-label-stack .nav-label-main {
        font-size: 12px;
        letter-spacing: -0.01em;
      }
      .sidebar-nav .nav-item .nav-label-stack .nav-lane-tag { margin-left: 0; }
      /* Active rows repaint the bubble (Pro fills solid accent / harper
         green with white text) — an accent-on-accent tag vanished there
         (Harris, 2026-08-07). currentColor keys the tag off the row's own
         text color, so it stays legible on every theme in both rails. */
      .sidebar-nav .nav-item.active .nav-lane-tag {
        background: color-mix(in srgb, currentColor 22%, transparent);
        color: currentColor;
      }
      /* v2.92.1 — the accent tint applies ONLY to the classic rail's
         plain count pills. It must be scoped to :not(.layout-v2) and
         :not(.nav-count-due): the unscoped v2.92.0 rule out-ranked both
         Pro's red iOS rim badges and the red follow-up-due pill, so
         clicking a tab (e.g. Post-Sales → Pipeline in Pro) washed its
         red bubble out to a near-transparent accent (Harris, 2026-07-28). */
      body:not(.layout-v2) .sidebar-nav .nav-item.active .nav-count:not(.nav-count-due) {
        color: var(--accent) !important;
        background: color-mix(in srgb, var(--accent) 16%, transparent);
      }
      .sidebar-nav .nav-count.nav-count-due {
        background: rgba(239, 68, 68, 0.14);
        color: var(--lb-bad-text, #ef4444) !important;
        font-weight: 700;
      }
      .sidebar-nav .nav-count.nav-count-due:empty { display: none; }

      /* ---- Little Bro Pro: bubble chips + iOS rim badges ---- */
      body.layout-v2 .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
        /* Room for rim badges that peek above each bubble. */
        padding: 6px 4px 4px;
      }
      /* Named bubbles — roomy oval chips; counts sit on the top rim
         like iOS notification badges (Harris, 2026-07-24).
         v2.93.0 revamp (Harris: the sidebar STILL wasn't fixed — the
         v2.90/v2.92 passes only touched the classic rail): bubbles now
         lead with the same line icons as classic, content flows
         icon → label left-aligned (iOS Settings style) so rows scan by
         shape instead of reading twenty identical centered ovals. */
      body.layout-v2 .sidebar-nav .nav-item {
        position: relative;
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 650;
        text-align: left;
        padding: 11px 16px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--input-bg);
        color: var(--text);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        line-height: 1.25;
        min-height: 40px;
        white-space: normal;
        overflow: visible;
        box-shadow: 0 1px 2px rgba(15, 37, 64, 0.04);
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
                    transform 0.15s ease, box-shadow 0.15s ease;
      }
      /* Bubbles without a mapped icon stay centered (rare fallback). */
      body.layout-v2 .sidebar-nav .nav-item:not(:has(.nav-ic)) {
        justify-content: center;
        text-align: center;
      }
      body.layout-v2 .sidebar-nav .nav-item .nav-ic {
        display: inline-flex;
        color: var(--muted);
      }
      body.layout-v2 .sidebar-nav .nav-item:hover .nav-ic { color: var(--text); }
      body.layout-v2 .sidebar-nav .nav-item:hover {
        background: rgba(125, 211, 252, 0.12);
        border-color: var(--accent);
        transform: translateY(-1px);
        box-shadow:
          0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
          0 0 18px 2px color-mix(in srgb, var(--accent) 28%, transparent),
          0 4px 12px rgba(15, 37, 64, 0.1);
      }
      [data-theme="light"] body.layout-v2 .sidebar-nav .nav-item:hover {
        background: rgba(2, 132, 199, 0.08);
        box-shadow:
          0 0 0 3px rgba(2, 132, 199, 0.18),
          0 0 16px 2px rgba(2, 132, 199, 0.22),
          0 4px 12px rgba(15, 23, 42, 0.08);
      }
      /* v2.93.0 — the active bubble fills SOLID in the accent color
         (same visual language as the module switcher's active pill).
         The old faint tint was nearly indistinguishable from a hover
         among twenty white ovals; a filled bubble is unmissable. */
      body.layout-v2 .sidebar-nav .nav-item.active {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--bg);
        font-weight: 700;
        box-shadow:
          0 0 0 2px var(--ring),
          0 0 14px 1px color-mix(in srgb, var(--accent) 20%, transparent);
      }
      body.layout-v2 .sidebar-nav .nav-item.active .nav-ic { color: var(--bg); }
      [data-theme="light"] body.layout-v2 .sidebar-nav .nav-item.active {
        background: var(--accent);
        color: #ffffff;
      }
      [data-theme="light"] body.layout-v2 .sidebar-nav .nav-item.active .nav-ic { color: #ffffff; }
      [data-theme="harper"] body.layout-v2 .sidebar-nav .nav-item:hover {
        background: rgba(26, 143, 94, 0.1);
        box-shadow:
          0 0 0 3px rgba(26, 143, 94, 0.22),
          0 0 18px 2px rgba(26, 143, 94, 0.28),
          0 4px 12px rgba(10, 31, 61, 0.08);
      }
      [data-theme="harper"] body.layout-v2 .sidebar-nav .nav-item.active {
        background: #1a8f5e;
        color: #ffffff;
        box-shadow:
          0 0 0 2px rgba(26, 143, 94, 0.28),
          0 0 14px 1px rgba(26, 143, 94, 0.22);
      }
      [data-theme="harper"] body.layout-v2 .sidebar-nav .nav-item.active .nav-ic { color: #ffffff; }
      /* iOS-style red count badge on the top-right rim of the bubble. */
      body.layout-v2 .sidebar-nav .nav-count {
        position: absolute;
        top: -7px;
        right: 2px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 19px;
        height: 19px;
        padding: 0 6px;
        border-radius: 999px;
        border: 1.5px solid var(--panel);
        background: #FF3B30;
        color: #fff !important;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0;
        box-shadow: 0 2px 6px rgba(255, 59, 48, 0.35);
        pointer-events: none;
      }
      body.layout-v2 .sidebar-nav .nav-count:empty,
      body.layout-v2 .sidebar-nav .nav-count.hide { display: none; }
      body.layout-v2 .sidebar-nav .nav-item.active .nav-count { color: #fff !important; }
      /* Follow-up due — same rim badge, deeper red pulse weight. */
      body.layout-v2 .sidebar-nav .nav-count.nav-count-due {
        background: #FF3B30;
        font-weight: 800;
      }
      body.layout-v2 .sidebar-nav .nav-count.nav-count-due:empty { display: none; }

      /* ============ Version pill (bottom of sidebar) ============ */
      /* Discreet build identifier — visible enough to surface in bug
         reports ("what version do you see?"), not so prominent it
         distracts. Click copies to clipboard with a brief flash to
         confirm the copy worked. */
      .sidebar-version-area {
        margin-top: auto;
        padding: 10px 6px 10px;
        display: flex;
        justify-content: center;
      }
      .version-pill {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.05em;
        color: var(--muted);
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 5px 12px;
        cursor: pointer;
        opacity: 0.55;
        transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
      }
      .version-pill:hover {
        opacity: 1;
        color: var(--accent);
        border-color: var(--accent);
      }
      [data-theme="harper"] .version-pill:hover {
        color: #1a8f5e;
        border-color: rgba(26, 143, 94, 0.45);
      }
      .version-pill.copied {
        color: var(--accent);
        border-color: var(--accent);
        opacity: 1;
      }
      [data-theme="harper"] .version-pill.copied {
        color: #1a8f5e;
        border-color: rgba(26, 143, 94, 0.55);
      }

      /* Inline version on the splash login screen — same idea, just an
         understated text node next to the "Internal use only" tagline. */
      .splash-version {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.06em;
        opacity: 0.7;
      }

      /* ============ Layout V2 — Hub + Hot Bar / Tool Bar ============ */
      /* Per-browser toggle (Settings → Layout, ON by default). When on,
         body.layout-v2 hides the Personal / Tickets / Admin sidebar
         sections and replaces them with:
           1. two pinnable bars — the "Hot Bar" (views starred from the
              Renewals / Post-Sales / Submissions pages) and the "Tool
              Bar" (every other starred item) — and
           2. a "Hub" button that opens an Apple-style floating bubble
              launcher (Renewals / Post-Sales / Submissions / Quo /
              Personal / Tools / Tickets / Admin).
         All navigation is delegated to the hidden legacy nav buttons, so
         counts, guards, and active states keep working unchanged. */
      .lv2-only { display: none !important; }
      body.layout-v2 .sidebar-toolbar,
      body.layout-v2 .sidebar-section-label[data-section-key="sec:personal"],
      body.layout-v2 .sidebar-section-label[data-section-key="sec:tickets"],
      body.layout-v2 .sidebar-section-label[data-section-key="sec:admin"],
      body.layout-v2 .sidebar-section-label[data-section-key="sec:bots"],
      body.layout-v2 #sidebarPersonalNav,
      body.layout-v2 #sidebarNav,
      body.layout-v2 #sidebarAdminNav,
      body.layout-v2 #sidebarBotsNav {
        display: none !important;
      }
      body.layout-v2 .lv2-hotbar-wrap.lv2-only { display: block !important; }
      body.layout-v2 .lv2-hub-area.lv2-only { display: block !important; }

      /* --- Layout V2 sidebar arrangement (Harris, 2026-07-23) ---
         Deliberately a different stack from the classic layout:
           Brand → module circles → HUB button → Quo → Hot Bar → Tool Bar
           → pipeline nav → version pill.
         The HUB is the command center so it presides near the top, Quo
         sits right under it (Harris, v2.98.0), and your pinned favorites
         lead the scroll instead of trailing it. Pure CSS `order` on the
         existing flex columns — the DOM keeps its legacy shape so
         guards / counts / mirroring are untouched. */
      body.layout-v2 .lv2-hub-area { order: 1; padding-bottom: 4px; }
      body.layout-v2 .sidebar-scroll { order: 2; }
      body.layout-v2 .sidebar-version-area { order: 3; }
      body.layout-v2 .lv2-hotbar-wrap { order: -1; margin-top: 0; }
      /* Quo above the pinned bars — first thing under the Hub button.
         (data-section-key is assigned from the label text at boot.) */
      body.layout-v2 .sidebar-section-label[data-section-key="sec:quo"],
      body.layout-v2 #sidebarMessagesNav { order: -2; }

      /* --- Hot Bar (leads the sidebar scroll in V2) --- */
      .lv2-hotbar-wrap { margin-top: 10px; }
      .lv2-hotbar-label {
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 10px;
        color: var(--muted);
        padding: 4px 10px;
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .lv2-hotbar-label .lv2-hot-star { color: var(--lb-warn-text, #f5b83d); font-size: 9px; }
      /* Tool Bar label leads with a tiny wrench instead of the gold star. */
      .lv2-hotbar-label .lv2-tool-star { color: var(--muted); display: inline-flex; }
      .lv2-hotbar-label .lv2-tool-star svg { width: 10px; height: 10px; display: block; }
      .lv2-hot-empty {
        font-size: 11px;
        color: var(--muted);
        padding: 6px 10px 8px;
        line-height: 1.45;
      }

      /* --- Hub button (top of the V2 sidebar, under the module circles) ---
         Harper-branded: the coral wordmark with HUB below it in the same
         coral (#FF6D63 — sampled from the wordmark SVG fills), inside a
         soft oval. */
      .lv2-hub-area { padding: 8px 14px 0; }
      .lv2-hub-btn {
        position: relative; /* anchors the ⇧⇧ hotkey tip bubble */
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 12px 7px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--input-bg);
        cursor: pointer;
        transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
      }
      .lv2-hub-btn:hover {
        border-color: #ff6d63;
        box-shadow: 0 0 0 3px rgba(255, 109, 99, 0.18);
        transform: translateY(-1px);
      }
      .lv2-hub-logo { height: 11px; width: auto; display: block; }
      .lv2-hub-word {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-indent: 0;
        text-transform: none;
        color: #ff6d63;
        line-height: 1;
      }

      /* --- Hub overlay: backdrop + floating category bubbles ---
         Contrast contract: the scrim is always dark, and every surface on
         it (bubbles, item ovals) is SOLID + theme-aware via the --lv2-*
         vars below — never a translucent panel over the scrim (that read
         as dark-on-dark mud on the cream Harper theme). Text directly on
         the scrim (heading / hint) is always bright. */
      .lv2-hub-overlay {
        position: fixed;
        inset: 0;
        /* Summon layer (Harris, 2026-07-23): ⇧⇧ must surface the Hub
           above compose (.modal z 10000), the unsaved-confirm layer
           (10050), and the expanded rich editor (10060) — same doctrine
           as the ⌘H/⌘A brains. Brains (10080) still outrank the Hub. */
        z-index: 10070;
        display: none;
        --lv2-surface: #141d2e;
        --lv2-surface-hi: #1e2a41;
        --lv2-text: #f0f5fc;
        --lv2-sub: #a9b9cf;
        --lv2-border: rgba(255, 255, 255, 0.17);
        --lv2-coral: #ff6d63;
        --lv2-coral-ring: rgba(255, 109, 99, 0.28);
      }
      [data-theme="light"] .lv2-hub-overlay,
      [data-theme="harper"] .lv2-hub-overlay,
      [data-theme="mono"] .lv2-hub-overlay {
        --lv2-surface: #ffffff;
        --lv2-surface-hi: #fdf8f1;
        --lv2-text: #0a1f3d;
        --lv2-sub: rgba(10, 31, 61, 0.66);
        --lv2-border: rgba(10, 31, 61, 0.16);
      }
      /* Light theme Hub: Harris (2026-07-23) — bubbles stay WHITE like
         Harper's, and instead the SCRIM behind them goes light blue.
         Everything that sits directly on the scrim (hint, items title,
         notif header) flips from bright-on-dark to navy-on-light. */
      [data-theme="light"] .lv2-hub-backdrop {
        /* Light blue tint + lighter blur — heavy saturate/blur was janking
           Hub opens on RAM-tight MacBooks (Harris, 2026-07-27). */
        background: rgba(214, 233, 253, 0.58);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
      [data-theme="light"] .lv2-hub-heading-logo {
        filter: drop-shadow(0 2px 8px rgba(10, 31, 61, 0.18));
      }
      [data-theme="light"] .lv2-hub-heading-word {
        text-shadow: 0 2px 10px rgba(10, 31, 61, 0.16);
      }
      [data-theme="light"] .lv2-hub-hint {
        color: rgba(10, 31, 61, 0.72);
        text-shadow: none;
      }
      [data-theme="light"] .lv2-items-title,
      [data-theme="light"] .lv2-notif-head {
        color: #0a1f3d;
        text-shadow: none;
      }
      [data-theme="light"] .lv2-notif-clear {
        border-color: rgba(10, 31, 61, 0.3);
        color: #0a1f3d;
      }
      /* Light Hub bubbles: beat global `[data-theme=light] button` (blue
         gradient + padding) which out-specs bare `.lv2-bubble` and made
         the bubbles read as tinted discs. Soft `box-shadow` under a row of
         circles also merged into a visible RECTANGLE on the light-blue
         scrim (Harris, 2026-07-24) — switch to per-bubble drop-shadow so
         the glow follows the circle and the square is gone. */
      [data-theme="light"] .lv2-hub-overlay button.lv2-bubble,
      [data-theme="light"] .lv2-hub-overlay button.lv2-item-go,
      [data-theme="light"] .lv2-hub-overlay button.lv2-hub-close,
      [data-theme="light"] .lv2-hub-overlay button.lv2-item-pin {
        background: var(--lv2-surface);
        background-image: none;
        border-color: var(--lv2-border);
        padding: 0;
        -webkit-appearance: none;
        appearance: none;
        box-shadow: none;
      }
      [data-theme="light"] .lv2-hub-overlay button.lv2-bubble,
      [data-theme="light"] .lv2-hub-overlay button.lv2-item-go {
        filter: drop-shadow(0 8px 14px rgba(10, 31, 61, 0.14));
      }
      [data-theme="light"] .lv2-hub-overlay button.lv2-bubble:hover,
      [data-theme="light"] .lv2-item-bubble:hover .lv2-item-go {
        border-color: var(--lv2-coral);
        box-shadow: 0 0 0 3px var(--lv2-coral-ring);
        filter: drop-shadow(0 10px 18px rgba(10, 31, 61, 0.18));
      }
      [data-theme="light"] .lv2-hub-bubbles,
      [data-theme="light"] .lv2-hub-items,
      [data-theme="light"] .lv2-hub-stage {
        background: transparent;
        border: 0;
        outline: none;
        box-shadow: none;
      }
      [data-theme="light"] .lv2-notif-card { box-shadow: 0 8px 20px rgba(10, 31, 61, 0.14); }
      .lv2-hub-overlay.is-open { display: block; }
      .lv2-hub-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(9, 14, 23, 0.55);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
      }
      .lv2-hub-stage {
        position: relative;
        z-index: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 26px;
        padding: 40px 24px;
      }
      .lv2-hub-close {
        position: absolute;
        top: 22px;
        right: 26px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid var(--lv2-border);
        background: var(--lv2-surface);
        color: var(--lv2-text);
        font-size: 17px;
        line-height: 1;
        /* v2.93.3 — flex-center the × glyph inside the circle (it sat
           off-center on the button's default text baseline). */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        transition: color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
      }
      .lv2-hub-close:hover { border-color: var(--lv2-coral); color: var(--lv2-coral); transform: scale(1.08); }
      /* Harper Hub masthead — floats in the open air above the bubbles
         (absolute, so the bubble stage stays perfectly centered). 12vh
         puts it at the median of the gap between the screen top and the
         centered content — balanced, not glued to the edge (Harris,
         2026-07-23); clamp keeps it sane on very short/tall screens.
         v2.93.2 — logo and "Hub" now stack: the word sits centered
         BELOW the Harper logo instead of beside it (Harris, 2026-07-28). */
      .lv2-hub-heading {
        position: absolute;
        top: clamp(22px, 10vh, 130px);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin: 0;
      }
      .lv2-hub-heading-logo {
        height: 38px;
        width: auto;
        display: block;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
      }
      .lv2-hub-heading-word {
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-indent: 0;
        text-transform: none;
        color: #ff6d63;
        line-height: 1;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
      }
      .lv2-hub-hint {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.05em;
        color: rgba(244, 248, 253, 0.78);
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
        text-transform: uppercase;
      }
      /* v2.90.0 — Hub search pill. Sits in normal stage flow above the
         bubbles; SOLID --lv2-* surface per the Hub contrast contract
         (never a translucent panel over the scrim). The inner input
         selector carries .lv2-hub-overlay so it out-specs the global
         [data-theme] input skins. */
      .lv2-hub-search {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 9px;
        width: min(400px, 78vw);
        padding: 10px 16px;
        border-radius: 999px;
        background: var(--lv2-surface);
        border: 1px solid var(--lv2-border);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
        transition: border-color 0.12s ease, box-shadow 0.12s ease;
      }
      .lv2-hub-search:focus-within {
        border-color: var(--lv2-coral);
        box-shadow: 0 0 0 3px var(--lv2-coral-ring), 0 10px 28px rgba(0, 0, 0, 0.28);
      }
      .lv2-hub-search svg {
        width: 15px;
        height: 15px;
        flex: none;
        color: var(--lv2-sub);
      }
      .lv2-hub-overlay .lv2-hub-search input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        box-shadow: none;
        padding: 0;
        color: var(--lv2-text);
        font-family: var(--font-sans);
        font-size: 14px;
      }
      .lv2-hub-overlay .lv2-hub-search input::placeholder { color: var(--lv2-sub); }
      [data-theme="light"] .lv2-hub-search { box-shadow: 0 8px 20px rgba(10, 31, 61, 0.14); }
      /* Search-result ovals carry a tiny category tag under the label so
         you know which bubble a match lives in. */
      .lv2-item-go .lv2-item-src {
        display: block;
        font-family: var(--font-mono);
        font-size: 8.5px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--lv2-sub);
      }
      .lv2-search-empty {
        flex-basis: 100%;
        text-align: center;
        font-size: 13px;
        color: rgba(244, 248, 253, 0.85);
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
      }
      [data-theme="light"] .lv2-search-empty {
        color: rgba(10, 31, 61, 0.75);
        text-shadow: none;
      }
      @keyframes lv2Pop {
        from { transform: scale(0.92); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
      }
      /* Quiet re-render: keep layout, skip spring pop (count syncs). */
      .lv2-hub-overlay.is-quiet .lv2-bubble,
      .lv2-hub-overlay.is-quiet .lv2-item-bubble,
      .lv2-hub-overlay.is-quiet .lv2-notif-card {
        animation: none !important;
      }
      @media (prefers-reduced-motion: reduce) {
        .lv2-bubble,
        .lv2-item-bubble,
        .lv2-notif-card,
        .lv2-thought {
          animation: none !important;
          transition: none !important;
        }
        .lv2-hub-backdrop {
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
        }
        .lv2-hub-overlay.is-closing .lv2-bubble,
        .lv2-hub-overlay.is-closing .lv2-item-bubble,
        .lv2-hub-overlay.is-closing .lv2-notif-card,
        .lv2-hub-overlay.is-closing .lv2-hub-backdrop {
          animation: none !important;
        }
        .lv2-thought.is-on { opacity: 1; transform: none; }
      }
      /* Flowing exit — mirrors the pop-in. hub.close() adds .is-closing,
         the bubbles shrink away with a light stagger while the backdrop
         and chrome lift, then the overlay unmounts after the animations
         finish (JS timeout). pointer-events off so nothing is clickable
         mid-exit. animation-delay needs !important because item bubbles
         carry inline pop-in stagger delays that would otherwise hold the
         exit hostage. */
      .lv2-hub-overlay.is-closing { pointer-events: none; }
      .lv2-hub-overlay.is-closing .lv2-bubble,
      .lv2-hub-overlay.is-closing .lv2-item-bubble,
      .lv2-hub-overlay.is-closing .lv2-notif-card {
        animation: lv2PopOut 0.12s cubic-bezier(0.5, 0, 0.75, 0.4) forwards !important;
        animation-delay: 0s !important;
      }
      .lv2-hub-overlay.is-closing .lv2-hub-bubbles > :nth-child(2),
      .lv2-hub-overlay.is-closing .lv2-hub-items > :nth-child(3n + 2) { animation-delay: 0.02s !important; }
      .lv2-hub-overlay.is-closing .lv2-hub-bubbles > :nth-child(3),
      .lv2-hub-overlay.is-closing .lv2-hub-items > :nth-child(3n) { animation-delay: 0.04s !important; }
      .lv2-hub-overlay.is-closing .lv2-hub-bubbles > :nth-child(4) { animation-delay: 0.06s !important; }
      .lv2-hub-overlay.is-closing .lv2-hub-bubbles > :nth-child(5) { animation-delay: 0.08s !important; }
      .lv2-hub-overlay.is-closing .lv2-hub-heading,
      .lv2-hub-overlay.is-closing .lv2-hub-hint,
      .lv2-hub-overlay.is-closing .lv2-hub-close,
      .lv2-hub-overlay.is-closing .lv2-items-title,
      .lv2-hub-overlay.is-closing .lv2-notif-head { animation: lv2FadeOut 0.15s ease forwards; }
      .lv2-hub-overlay.is-closing .lv2-hub-backdrop { animation: lv2FadeOut 0.2s ease 0.04s forwards; }
      @keyframes lv2PopOut {
        to { transform: scale(0.45); opacity: 0; }
      }
      @keyframes lv2FadeOut {
        to { opacity: 0; }
      }
      /* Category bubbles — all full size on the home stage. While a
         category's items are open above, the row holds a single small
         Home bubble that brings all the categories back. */
      .lv2-hub-bubbles {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        justify-content: center;
        max-width: 720px;
        transition: gap 0.2s ease;
      }
      .lv2-bubble {
        width: 128px;
        height: 128px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid var(--lv2-border);
        background: var(--lv2-surface);
        color: var(--lv2-text);
        cursor: pointer;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
        animation: lv2Pop 0.22s ease-out backwards;
        transition: transform 0.15s ease, border-color 0.12s ease, box-shadow 0.12s ease,
                    width 0.15s ease, height 0.15s ease;
        will-change: transform;
      }
      .lv2-hub-bubbles .lv2-bubble:nth-child(1) { animation-delay: 0.02s; }
      .lv2-hub-bubbles .lv2-bubble:nth-child(2) { animation-delay: 0.07s; }
      .lv2-hub-bubbles .lv2-bubble:nth-child(3) { animation-delay: 0.12s; }
      .lv2-hub-bubbles .lv2-bubble:nth-child(4) { animation-delay: 0.17s; }
      .lv2-bubble:hover {
        transform: scale(1.08);
        border-color: var(--lv2-coral);
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--lv2-coral-ring);
      }
      /* Custom Harper line icons (inline SVG, colored coral). */
      .lv2-bubble-icon { line-height: 1; color: var(--lv2-coral); }
      .lv2-bubble-icon svg { width: 28px; height: 28px; display: block; }
      .lv2-bubble-name { font-size: 13px; font-weight: 700; color: var(--lv2-text); }
      .lv2-bubble-sub {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--lv2-sub);
      }
      /* Expanded view: the bubble row holds a single Home bubble. */
      .lv2-hub-bubbles.is-docked { gap: 16px; }
      .lv2-hub-bubbles.is-docked .lv2-bubble { width: 86px; height: 86px; gap: 3px; }
      .lv2-hub-bubbles.is-docked .lv2-bubble-icon svg { width: 20px; height: 20px; }
      .lv2-hub-bubbles.is-docked .lv2-bubble-name { font-size: 10px; }
      .lv2-hub-bubbles.is-docked .lv2-bubble-sub { display: none; }

      /* Cartoon thought bubble — appears after ~2s hover on Hub bubbles.
         Mounted INSIDE .lv2-hub-overlay (not document.body) so it shares the
         Hub stacking context (z 10070) and stays above nested Admin→Bots
         stages instead of painting one layer behind the scrim. */
      .lv2-hub-overlay > .lv2-thought {
        position: absolute;
        z-index: 30;
        max-width: min(260px, 70vw);
        pointer-events: none;
        opacity: 0;
        transform: translateY(6px) scale(0.92);
        transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
      }
      .lv2-thought {
        position: absolute;
        z-index: 30;
        max-width: min(260px, 70vw);
        pointer-events: none;
        opacity: 0;
        transform: translateY(6px) scale(0.92);
        transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
      }
      .lv2-thought.is-on {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      .lv2-thought-cloud {
        position: relative;
        padding: 10px 14px;
        border-radius: 18px;
        background: #fffef8;
        color: #1a2740;
        border: 2px solid #1a2740;
        box-shadow: 4px 5px 0 rgba(26, 39, 64, 0.18);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.35;
        text-align: center;
      }
      .lv2-thought-cloud::before,
      .lv2-thought-cloud::after {
        content: "";
        position: absolute;
        left: 50%;
        border: 2px solid #1a2740;
        background: #fffef8;
        border-radius: 50%;
      }
      .lv2-thought-cloud::before {
        width: 14px;
        height: 14px;
        bottom: -10px;
        margin-left: -18px;
      }
      .lv2-thought-cloud::after {
        width: 8px;
        height: 8px;
        bottom: -18px;
        margin-left: -4px;
      }
      .lv2-thought-text { margin: 0; }
      [data-theme="dark"] .lv2-thought-cloud,
      [data-theme="mono"] .lv2-hub-overlay .lv2-thought-cloud {
        background: #1e2a41;
        color: #f0f5fc;
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.35);
      }
      [data-theme="dark"] .lv2-thought-cloud::before,
      [data-theme="dark"] .lv2-thought-cloud::after,
      [data-theme="mono"] .lv2-hub-overlay .lv2-thought-cloud::before,
      [data-theme="mono"] .lv2-hub-overlay .lv2-thought-cloud::after {
        background: #1e2a41;
        border-color: rgba(255, 255, 255, 0.35);
      }

      /* Category name shown above the expanded circles. */
      .lv2-items-title {
        flex-basis: 100%;
        text-align: center;
        color: #f4f8fd;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        margin: 0 0 2px;
      }

      /* --- Expanded category items: big circular bubbles --- */
      /* Much larger than the docked category bubbles below them, so the
         hierarchy reads instantly: big circles = where you can go, small
         circles = other categories. Labels wrap inside the circle. */
      .lv2-hub-items {
        display: flex;
        flex-wrap: wrap;
        gap: 22px 18px;
        justify-content: center;
        max-width: 780px;
        max-height: 56vh;
        overflow: visible;
      }
      .lv2-item-bubble {
        position: relative;
        animation: lv2Pop 0.2s ease-out backwards;
      }
      .lv2-item-go {
        width: 126px;
        height: 126px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 14px;
        text-align: center;
        border: 1px solid var(--lv2-border);
        background: var(--lv2-surface);
        color: var(--lv2-text);
        font-family: var(--font-sans);
        font-size: 12.5px;
        font-weight: 650;
        line-height: 1.25;
        cursor: pointer;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
        transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      }
      .lv2-item-label { max-width: 100%; overflow-wrap: break-word; }
      /* Nested Hub folder (Admin → Bots) — same oval, small icon cue. */
      .lv2-item-group .lv2-item-go {
        gap: 6px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .lv2-item-group-icon {
        display: inline-flex;
        width: 22px;
        height: 22px;
        color: var(--lv2-coral);
      }
      .lv2-item-group-icon svg { width: 100%; height: 100%; }
      .lv2-item-bubble:hover .lv2-item-go {
        transform: scale(1.06);
        border-color: var(--lv2-coral);
      }
      .lv2-item-bubble.is-active .lv2-item-go {
        border-color: var(--lv2-coral);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 0 0 3px var(--lv2-coral-ring);
      }
      /* Hub item counts — iOS red badge on the top rim (not inline muted text). */
      .lv2-item-go .nav-count {
        position: absolute;
        top: 4px;
        right: 10px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        border: 1.5px solid var(--lv2-surface);
        background: #FF3B30;
        color: #fff !important;
        font-family: var(--font-mono);
        font-size: 9px;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 2px 6px rgba(255, 59, 48, 0.4);
        pointer-events: none;
      }
      .lv2-item-go .nav-count:empty { display: none; }
      .lv2-item-go { position: relative; }
      /* Hover-revealed favorite star, floating off the bubble's shoulder.
         Stays visible while pinned so favorites read at a glance. */
      .lv2-item-pin {
        position: absolute;
        top: 4px;
        left: 12px;
        right: auto;
        width: 27px;
        height: 27px;
        border-radius: 50%;
        border: 1px solid var(--lv2-border);
        background: var(--lv2-surface-hi);
        color: var(--lv2-sub);
        font-size: 13px;
        line-height: 1;
        padding: 0;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
        opacity: 0;
        transform: scale(0.7);
        transition: opacity 0.12s ease, transform 0.12s ease, color 0.12s ease;
      }
      .lv2-item-bubble:hover .lv2-item-pin,
      .lv2-item-pin:focus-visible,
      .lv2-item-pin.is-pinned { opacity: 1; transform: scale(1); }
      .lv2-item-pin:hover { transform: scale(1.18); color: var(--lv2-coral); }
      .lv2-item-pin.is-pinned { color: var(--lb-warn-text, #f5b83d); }

      /* --- Layout V2 softness: circles / ovals / pills over squares.
         Same roomy rail as classic — chips fill the vertical space so
         Pro doesn't look empty under the pipeline list. --- */
      body.layout-v2 .sidebar-nav .nav-item {
        padding: 12px 14px;
        font-size: 13px;
        min-height: 42px;
      }
      body.layout-v2 .sidebar-nav { gap: 10px; }
      body.layout-v2 .sidebar-collapse-btn { border-radius: 999px; }
      body.layout-v2 .sidebar-section-label.section-toggle { border-radius: 999px; }
      body.layout-v2 .sidebar { width: 200px; padding: 14px 12px 12px; }
      body.layout-v2 .lv2-hub-area { padding: 8px 10px 0; }
      body.layout-v2 .lv2-hub-btn { padding: 10px 12px 9px; }
      body.layout-v2 .lv2-hub-logo { height: 12px; }
      body.layout-v2 .lv2-hub-word { font-size: 16px; letter-spacing: 0.02em; text-indent: 0; }
      body.layout-v2 .lv2-hotbar-label { font-size: 10px; padding: 4px 10px; }
      body.layout-v2 .lv2-hot-empty { font-size: 12px; padding: 8px 10px 10px; }
      body.layout-v2 .lv2-hub-btn:hover {
        box-shadow:
          0 0 0 3px rgba(255, 109, 99, 0.28),
          0 0 18px 2px rgba(255, 109, 99, 0.3);
      }

      /* --- Layout V2 module switcher: three tap bubbles --- */
      /* The classic stacked full-width pills overflowed once V2 rounded
         their container, so V2 replaces the whole control with a row of
         circular icon bubbles + captions. CSS-only: same buttons, same
         data-module wiring — the leading-dot ::before becomes the bubble. */
      body.layout-v2 .module-switcher {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
        background: transparent;
        border: none;
        padding: 0;
        margin: 2px 0 8px;
      }
      body.layout-v2 .module-switcher .module-btn {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 4px 2px 6px;
        border-radius: 18px;
        background: transparent;
        box-shadow: none;
        font-family: var(--font-mono);
        font-size: 8.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: center;
        color: var(--muted);
        white-space: normal;
        line-height: 1.25;
      }
      /* Custom Harper module marks (coral line SVGs, not OS emojis):
         renewals = cyclical arrows, post-sales = dollar, submissions = mail.
         The icon lives in a custom property on the BUTTON (inherited by
         ::before) and every V2 state repaints the FULL background shorthand.
         Reason: the classic layout's active/hover ::before rules (e.g.
         `[data-theme="harper"] … .is-active::before { background:#FFFFFF }`)
         out-rank a lone background-image here and their shorthand resets it
         to none — which blanked the active module's icon (Harris,
         2026-07-23: white empty renewals circle on the harper theme). */
      body.layout-v2 .module-switcher .module-btn {
        --lv2-module-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6d63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
      }
      body.layout-v2 .module-switcher .module-btn[data-module="post_sales"] {
        --lv2-module-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6d63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
      }
      body.layout-v2 .module-switcher .module-btn[data-module="submissions"] {
        --lv2-module-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6d63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
      }
      body.layout-v2 .module-switcher .module-btn {
        font-size: 9.5px;
        gap: 6px;
        padding: 4px 2px 8px;
      }
      body.layout-v2 .module-switcher .module-btn::before {
        content: "";
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--input-bg) var(--lv2-module-icon) center / 20px 20px no-repeat;
        border: 1px solid var(--border);
        box-shadow: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
      }
      body.layout-v2 .module-switcher .module-btn:hover:not(.is-active) {
        background: transparent;
        color: var(--text);
      }
      body.layout-v2 .module-switcher .module-btn:hover:not(.is-active)::before {
        border-color: #ff6d63;
        transform: scale(1.08);
        background: var(--input-bg) var(--lv2-module-icon) center / 20px 20px no-repeat;
        box-shadow: 0 0 0 3px rgba(255, 109, 99, 0.22), 0 0 14px rgba(255, 109, 99, 0.3);
      }
      body.layout-v2 .module-switcher .module-btn.is-active {
        background: transparent;
        color: var(--lb-coral-text, #ff6d63);
        font-weight: 700;
        box-shadow: none;
      }
      body.layout-v2 .module-switcher .module-btn.is-active::before {
        border-color: #ff6d63;
        box-shadow: 0 0 0 3px rgba(255, 109, 99, 0.28), 0 0 14px rgba(255, 109, 99, 0.28);
        background: var(--input-bg) var(--lv2-module-icon) center / 20px 20px no-repeat;
      }

      /* --- Layout V2 sticky-note pop-ups --- */
      /* When V2 is on, toasts stop stacking: only the newest is visible and
         a coral badge on its top-right corner counts what's waiting behind
         it. Dismissing reveals the next. Badge opens the 🔔 center. */
      body.layout-v2 .lv2-note-hidden { display: none !important; }
      .lv2-note-badge {
        display: none;
        position: absolute;
        top: -9px;
        right: -9px;
        z-index: 2;
        min-width: 26px;
        height: 26px;
        padding: 0 8px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 2px solid rgba(255, 255, 255, 0.92);
        background: #ff6d63;
        color: #fff;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        pointer-events: auto;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
        transition: transform 0.12s ease;
      }
      .lv2-note-badge:hover { transform: scale(1.12); }
      body.layout-v2 .lv2-note-badge.is-on { display: inline-flex; }
      /* Light-family toasts sit on paper — soften the badge shadow so the
         coral count chip still pops without a muddy black halo. */
      [data-theme="light"] .lv2-note-badge,
      [data-theme="harper"] .lv2-note-badge,
      [data-theme="mono"] .lv2-note-badge {
        box-shadow: 0 6px 16px rgba(10, 31, 61, 0.2);
      }
      [data-theme="mono"] .lv2-note-badge {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
      }

      /* --- Notification center (🔔 bubble in the Hub) --- */
      /* iPhone-style stacked soft cards, newest first. Same solid
         --lv2-* surfaces as the rest of the Hub for contrast. */
      .lv2-bubble.has-unread .lv2-bubble-sub { color: var(--lv2-coral); font-weight: 700; }
      .lv2-hub-items.lv2-notif-mode {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        width: min(430px, 92vw);
        max-height: 54vh;
        overflow: auto;
        padding: 4px;
      }
      .lv2-notif-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: #f4f8fd;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
        font-size: 13px;
        font-weight: 700;
        padding: 0 4px;
      }
      .lv2-notif-clear {
        border: 1px solid rgba(255, 255, 255, 0.35);
        background: rgba(255, 255, 255, 0.08);
        color: #f4f8fd;
        border-radius: 999px;
        padding: 4px 12px;
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: border-color 0.12s ease, color 0.12s ease;
      }
      .lv2-notif-clear:hover { border-color: var(--lv2-coral); color: var(--lv2-coral); }
      .lv2-notif-empty {
        background: var(--lv2-surface);
        border: 1px solid var(--lv2-border);
        color: var(--lv2-sub);
        border-radius: 22px;
        padding: 18px 20px;
        font-size: 13px;
        line-height: 1.5;
        text-align: center;
      }
      .lv2-notif-card {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        background: var(--lv2-surface);
        border: 1px solid var(--lv2-border);
        border-radius: 22px;
        padding: 12px 14px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
        animation: lv2Pop 0.2s ease-out backwards;
        content-visibility: auto;
        contain-intrinsic-size: 72px;
      }
      .lv2-notif-card.is-unread { border-color: var(--lv2-coral); }
      .lv2-notif-icon { line-height: 1; color: var(--lv2-coral); }
      .lv2-notif-icon svg { width: 18px; height: 18px; display: block; margin-top: 2px; }
      .lv2-notif-main { flex: 1; min-width: 0; }
      .lv2-notif-top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
      }
      .lv2-notif-title {
        color: var(--lv2-text);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
      }
      .lv2-notif-time {
        color: var(--lv2-sub);
        font-family: var(--font-mono);
        font-size: 10px;
        white-space: nowrap;
      }
      .lv2-notif-body {
        color: var(--lv2-sub);
        font-size: 12px;
        line-height: 1.4;
        margin-top: 2px;
        overflow-wrap: anywhere;
      }
      .lv2-notif-del {
        border: none;
        background: transparent;
        color: var(--lv2-sub);
        font-size: 14px;
        line-height: 1;
        padding: 2px 4px;
        cursor: pointer;
        border-radius: 50%;
        transition: color 0.12s ease, transform 0.12s ease;
      }
      .lv2-notif-del:hover { color: var(--lv2-coral); transform: scale(1.2); }

      .sidebar-foot {
        margin-top: auto;
        display: flex; flex-direction: column; gap: 6px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
      }
      .sidebar-foot button {
        font-family: var(--font-sans);
        font-size: var(--text-xs);
        font-weight: 500;
        text-align: left;
        padding: 7px 10px;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text);
        cursor: pointer;
        box-shadow: none;
      }
      .sidebar-foot button:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }

      /* Theme picker — hover/click dropdown above the trigger button. */
      .theme-picker {
        position: relative;
      }
      .theme-picker-btn.lb-top-action {
        width: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .theme-picker-caret {
        font-size: 9px;
        color: inherit;
      }
      .theme-picker-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 140px;
        background: rgba(15, 23, 42, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(125, 211, 252, 0.35);
        border-radius: var(--radius);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
        padding: 5px;
        display: none;
        z-index: 100;
      }
      [data-theme="light"] .theme-picker-menu, [data-theme="harper"] .theme-picker-menu, [data-theme="mono"] .theme-picker-menu {
        background: rgba(255, 255, 255, 0.97);
        border-color: rgba(2, 132, 199, 0.35);
      }
      [data-theme="harper"] .theme-picker-menu { border-color: rgba(26, 143, 94, 0.35); }
      .theme-picker:hover .theme-picker-menu,
      .theme-picker.is-open .theme-picker-menu {
        display: block;
      }
      .theme-option {
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 7px 10px !important;
        border-radius: var(--radius) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        color: #f1f5f9 !important;
        text-align: left;
        cursor: pointer;
        font-family: inherit;
        font-size: var(--text-xs);
      }
      [data-theme="light"] .theme-option, [data-theme="harper"] .theme-option, [data-theme="mono"] .theme-option {
        color: #0f172a !important;
      }
      .theme-option:hover { background: rgba(255, 255, 255, 0.08) !important; }
      [data-theme="light"] .theme-option:hover, [data-theme="harper"] .theme-option:hover, [data-theme="mono"] .theme-option:hover {
        background: rgba(15, 23, 42, 0.06) !important;
      }
      .theme-option.is-active {
        background: rgba(125, 211, 252, 0.16) !important;
        border-color: rgba(125, 211, 252, 0.4) !important;
        font-weight: 600;
      }
      [data-theme="harper"] .theme-option.is-active {
        background: rgba(26, 143, 94, 0.14) !important;
        border-color: rgba(26, 143, 94, 0.4) !important;
        color: #1a8f5e !important;
      }
      /* Metallic theme swatches (Harris, 2026-07-23) — same colors as
         before, but with a shine: a specular highlight dot up top-left,
         a diagonal banded metal gradient, and an inset bevel so each dot
         reads like a polished ball bearing in its theme's color. */
      .theme-swatch {
        width: 14px; height: 14px;
        border-radius: 50%;
        flex-shrink: 0;
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow:
          inset 0 1px 1px rgba(255, 255, 255, 0.55),
          inset 0 -2px 3px rgba(0, 0, 0, 0.35),
          0 1px 2px rgba(0, 0, 0, 0.25);
      }
      .theme-swatch-dark {
        background:
          radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 30%),
          linear-gradient(135deg, #46587a 0%, #0b1220 42%, #2c3d5c 55%, #0b1220 78%, #1e3a5f 100%);
      }
      .theme-swatch-light {
        background:
          radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 34%),
          linear-gradient(135deg, #ffffff 0%, #cbd5e1 42%, #f2f6fa 55%, #aebccd 78%, #e2e8f0 100%);
        border-color: rgba(15, 23, 42, 0.18);
      }
      .theme-swatch-harper {
        background:
          radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 32%),
          linear-gradient(135deg, #8fd4b4 0%, #1a8f5e 42%, #56b98c 55%, #107047 78%, #1a8f5e 100%);
        border-color: rgba(10, 31, 61, 0.18);
      }
      .theme-swatch-mono {
        background:
          radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 32%),
          linear-gradient(135deg, #f5f5f5 0%, #4d4d4d 42%, #bfbfbf 55%, #1a1a1a 78%, #8c8c8c 100%);
        border-color: rgba(0, 0, 0, 0.3);
      }

      /* ============ Renewals Guidebook (interactive document) ============ */
      /* The Guidebook is rendered as a "document inside the app" — its
         own visual identity, locked to Harper's brand palette regardless
         of which app theme the user is in. That means the cream paper
         background, deep navy text, and Harper coral accents stay
         constant whether the user is in dark, light, or harper theme.
         Reasoning: this view is meant to look and feel like the printed
         Guidebook PDF (the canonical onboarding document) — flipping
         its colors per theme breaks that recognition.

         Layout: sticky TOC sidebar on the left, scrollable content on
         the right. Search filters the TOC. Scroll position highlights
         the current section in the TOC. */

      #guidebookView .gb-book-switch {
        display: flex;
        gap: 8px;
        margin: 0 0 14px;
        padding: 6px;
        background: #F5EEDF;
        border: 1px solid rgba(15, 37, 64, 0.18);
        border-radius: 12px;
      }
      #guidebookView .gb-book-tab {
        flex: 1;
        border: 0;
        background: transparent;
        color: #0F2540;
        font: inherit;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.3;
        padding: 10px 14px;
        border-radius: 8px;
        cursor: pointer;
      }
      #guidebookView .gb-book-tab:hover:not(.is-active) {
        background: rgba(255, 105, 95, 0.12);
      }
      #guidebookView .gb-book-tab.is-active {
        background: #FF695F;
        color: #fff;
      }
      @media (max-width: 640px) {
        #guidebookView .gb-book-switch { flex-direction: column; }
      }

      .gb-doc {
        /* Frozen brand palette — does not respond to [data-theme].
           The coral was sampled directly from the Harper Renewals
           Guidebook cover graphic; it's a brighter, more orange-leaning
           shade than typical "coral red" so the brand reads as warm
           orange even at small sizes. */
        --gb-coral:        #FF695F;
        --gb-coral-dim:    #E5564D;
        --gb-coral-soft:   #FFE9E4;
        /* v2.151.0 — coral as TEXT on the cream paper only reads at
           ~2.3:1; small text (quiz counters, option letters, badges)
           uses this deepened coral (~5.7:1) instead. Fills/borders keep
           the bright brand coral. */
        --gb-coral-text:   #C9382E;
        --gb-navy:         #0F2540;
        --gb-navy-dim:     #4A5A6B;
        --gb-cream:        #FDF8EE;
        --gb-cream-warm:   #F6E1CE;   /* matches the logo image backdrop */
        --gb-cream-shaded: #F5EEDF;
        --gb-rule:         rgba(15, 37, 64, 0.10);
        --gb-rule-strong:  rgba(15, 37, 64, 0.25);

        background: var(--gb-cream);
        color: var(--gb-navy);
        border-radius: var(--radius-lg);
        border: 1px solid var(--gb-rule-strong);
        /* NOTE: no `overflow: hidden` here — that would create a
           scroll-container ancestor for the sticky TOC and break its
           ability to follow viewport scroll. We use border-radius on
           the .gb-cover (and the last .gb-section) to clip the visual
           edges instead. */
        position: relative;
      }

      .gb-progress-bar {
        position: sticky;
        top: 0;
        height: 3px;
        background: var(--gb-coral);
        width: 0%;
        z-index: 12;
        transition: width 100ms linear;
      }

      .gb-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 0;
        align-items: start;
      }
      @media (max-width: 880px) {
        .gb-layout { grid-template-columns: 1fr; }
        .gb-toc { position: static !important; border-right: 0; border-bottom: 1px solid var(--gb-rule); max-height: none; }
      }

      .gb-toc {
        position: sticky;
        top: 3px;
        background: var(--gb-cream-shaded);
        border-right: 1px solid var(--gb-rule);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        padding: 20px 16px;
        /* Match the .gb-doc rounded corner — visible when the TOC
           reaches the bottom of the scrolling region. */
        border-bottom-left-radius: var(--radius-lg);
      }
      .gb-toc::-webkit-scrollbar { width: 6px; }
      .gb-toc::-webkit-scrollbar-thumb { background: var(--gb-rule-strong); border-radius: 3px; }

      .gb-toc-search {
        width: 100%;
        padding: 8px 11px;
        border: 1px solid var(--gb-rule-strong);
        background: white;
        border-radius: 5px;
        font-size: 13px;
        color: var(--gb-navy);
        font-family: inherit;
        margin-bottom: 14px;
        box-sizing: border-box;
      }
      .gb-toc-search:focus {
        outline: none;
        border-color: var(--gb-coral);
        box-shadow: 0 0 0 2px rgba(229, 90, 74, 0.18);
      }

      .gb-toc-section { margin-bottom: 14px; }
      .gb-toc-section.is-hidden { display: none; }

      .gb-toc-section-title {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 6px 10px;
        font-size: 13px;
        font-weight: 700;
        color: var(--gb-navy);
        text-decoration: none;
        border-radius: 4px;
        margin-bottom: 2px;
        line-height: 1.3;
      }
      .gb-toc-section-title:hover { background: rgba(229, 90, 74, 0.08); color: var(--gb-coral); }
      .gb-toc-section-title.is-active { background: var(--gb-coral); color: white; }
      .gb-toc-section-title.is-active .gb-toc-num { color: white; opacity: 0.9; }
      .gb-toc-num {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--gb-coral);
        font-weight: 700;
        min-width: 14px;
      }

      .gb-toc-sub {
        display: block;
        padding: 4px 10px 4px 30px;
        font-size: 12.5px;
        color: var(--gb-navy-dim);
        text-decoration: none;
        line-height: 1.4;
        border-left: 2px solid transparent;
        margin-left: 14px;
      }
      .gb-toc-sub:hover { color: var(--gb-coral); border-left-color: var(--gb-coral); }
      .gb-toc-sub.is-active { color: var(--gb-coral); border-left-color: var(--gb-coral); font-weight: 600; }
      .gb-toc-sub.is-hidden { display: none; }

      .gb-toc-empty {
        font-size: 12px;
        color: var(--gb-navy-dim);
        padding: 16px 8px;
        font-style: italic;
        text-align: center;
      }

      .gb-content { min-width: 0; }

      .gb-cover {
        background:
          radial-gradient(ellipse 60% 50% at 80% 30%, rgba(255, 105, 95, 0.15) 0%, transparent 50%),
          linear-gradient(135deg, var(--gb-coral-soft) 0%, var(--gb-cream) 100%);
        padding: 32px 56px 48px;
        border-bottom: 1px solid var(--gb-rule);
        position: relative;
        /* Rounded top corners so the cover edge follows the .gb-doc
           border-radius now that the doc no longer clips with
           overflow: hidden. */
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
      }
      .gb-cover-image {
        display: block;
        width: 100%;
        max-width: 720px;
        margin: 20px auto 28px;
        /* The PNG has a transparent backdrop (we processed out the cream
           panel); no box-shadow or border-radius needed — the artwork
           composites directly onto the cover's gradient. */
      }
      .gb-cover-kicker {
        /* Centered version badge at the very top of the cover. We use
           display:block + width:fit-content so the box hugs the text
           (preserving the coral border) while margin:auto centers the
           box itself within the cover. */
        display: block;
        width: fit-content;
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--gb-coral);
        font-weight: 700;
        padding: 4px 10px;
        border: 1.5px solid var(--gb-coral);
        border-radius: 4px;
        margin: 0 auto 24px;
        text-align: center;
      }
      .gb-cover-title {
        font-family: var(--font-display);
        font-size: 56px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: -0.025em;
        color: var(--gb-navy);
        margin: 0 0 8px 0;
        text-align: center;
      }
      .gb-cover-title-coral { color: var(--gb-coral); display: block; }
      .gb-cover-subtitle {
        font-style: italic;
        font-size: 17px;
        color: var(--gb-navy-dim);
        margin: 14px auto 36px;
        max-width: 600px;
        text-align: center;
      }
      .gb-cover-tagline {
        color: var(--gb-coral);
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin: 0 0 24px 0;
      }
      .gb-cover-tagline span { margin-right: 16px; }
      .gb-cover-meta {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 6px 16px;
        font-size: 13px;
        color: var(--gb-navy-dim);
        max-width: 480px;
        padding-top: 20px;
        border-top: 1px solid var(--gb-rule);
        margin: 0;
      }
      .gb-cover-meta dt {
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--gb-coral);
        font-weight: 700;
      }
      .gb-cover-meta dd { margin: 0; color: var(--gb-navy); }
      @media (max-width: 720px) {
        .gb-cover { padding: 40px 28px; }
        .gb-cover-title { font-size: 40px; }
      }

      .gb-section {
        padding: 56px 64px 32px;
        scroll-margin-top: 8px;
        border-bottom: 1px solid var(--gb-rule);
      }
      .gb-section:last-of-type {
        border-bottom: none;
        /* Round the right column's bottom corner so the document shell
           remains visually intact now that .gb-doc no longer uses
           overflow: hidden. The TOC handles the left bottom corner via
           its own border-bottom-left-radius below. */
        border-bottom-right-radius: var(--radius-lg);
      }
      @media (max-width: 720px) {
        .gb-section { padding: 36px 28px; }
      }

      .gb-section-header {
        display: flex;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 36px;
        padding-bottom: 18px;
        border-bottom: 3px solid var(--gb-coral);
      }
      .gb-section-number {
        font-family: var(--font-display);
        font-size: 72px;
        font-weight: 800;
        color: var(--gb-coral);
        line-height: 0.9;
        letter-spacing: -0.05em;
        flex-shrink: 0;
      }
      .gb-section-title {
        font-family: var(--font-display);
        font-size: 30px;
        font-weight: 700;
        color: var(--gb-navy);
        margin: 8px 0 0 0;
        line-height: 1.15;
        letter-spacing: -0.02em;
      }

      .gb-subsection { margin: 40px 0 0; scroll-margin-top: 8px; }
      .gb-subsection:first-of-type { margin-top: 0; }
      .gb-subsection-title {
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 700;
        color: var(--gb-navy);
        margin: 0 0 14px;
        line-height: 1.25;
        letter-spacing: -0.01em;
      }
      .gb-subsection-num {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--gb-coral);
        font-weight: 700;
        margin-right: 10px;
        vertical-align: middle;
      }

      .gb-h4 {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 700;
        color: var(--gb-coral);
        margin: 24px 0 8px;
      }

      .gb-prose {
        font-size: 15px;
        line-height: 1.7;
        color: var(--gb-navy);
      }
      .gb-prose > p { margin: 0 0 16px; }
      .gb-prose strong { color: var(--gb-navy); font-weight: 650; }
      .gb-prose ul, .gb-prose ol { padding-left: 24px; margin: 12px 0 16px; }
      .gb-prose li { margin-bottom: 7px; line-height: 1.65; }
      .gb-prose ul li::marker { color: var(--gb-coral); }
      .gb-prose ol li::marker { color: var(--gb-coral); font-weight: 700; }

      .gb-principle {
        margin: 22px 0;
        padding: 0 0 0 24px;
        border-left: 3px solid var(--gb-coral);
      }
      .gb-principle-title {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 700;
        color: var(--gb-coral);
        margin: 0 0 8px;
      }
      .gb-principle p { margin: 0; line-height: 1.65; }

      .gb-callout {
        margin: 20px 0;
        padding: 14px 18px;
        background: white;
        border: 1px solid var(--gb-rule-strong);
        border-left: 4px solid var(--gb-coral);
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.6;
      }
      .gb-callout-title {
        display: block;
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--gb-coral);
        font-weight: 700;
        margin-bottom: 6px;
      }
      .gb-callout p { margin: 0 0 8px; }
      .gb-callout p:last-child { margin-bottom: 0; }
      .gb-callout-warn {
        background: rgba(229, 90, 74, 0.05);
        border-color: var(--gb-coral);
      }

      .gb-table-wrap {
        margin: 16px 0 24px;
        overflow-x: auto;
        border: 1px solid var(--gb-rule-strong);
        border-radius: 6px;
        background: white;
      }
      .gb-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13.5px;
      }
      .gb-table th, .gb-table td {
        padding: 10px 14px;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid var(--gb-rule);
        border-right: 1px solid var(--gb-rule);
        line-height: 1.5;
      }
      .gb-table th:last-child, .gb-table td:last-child { border-right: none; }
      .gb-table tr:last-child td { border-bottom: none; }
      .gb-table th {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--gb-coral);
        font-weight: 700;
        background: var(--gb-cream-shaded);
        border-bottom: 2px solid var(--gb-coral);
      }
      .gb-table tr:nth-child(even) td { background: var(--gb-cream); }
      .gb-table tr:hover td { background: rgba(229, 90, 74, 0.05); }
      .gb-table .gb-col-num {
        font-family: var(--font-mono);
        font-weight: 700;
        color: var(--gb-coral);
        white-space: nowrap;
      }

      .gb-template {
        margin: 16px 0;
        background: white;
        border: 1px solid var(--gb-rule-strong);
        border-radius: 6px;
        overflow: hidden;
      }
      .gb-template-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--gb-cream-shaded);
        padding: 9px 14px;
        border-bottom: 1px solid var(--gb-rule);
        gap: 10px;
      }
      .gb-template-kind {
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--gb-coral);
        font-weight: 700;
      }
      .gb-template-title {
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 700;
        color: var(--gb-navy);
        flex: 1;
      }
      .gb-template-body {
        padding: 14px 18px;
        font-size: 13.5px;
        line-height: 1.7;
        color: var(--gb-navy);
        white-space: pre-wrap;
      }
      .gb-template-subject {
        display: block;
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--gb-coral);
        font-weight: 700;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px dashed var(--gb-rule);
      }
      .gb-template-copy {
        background: transparent;
        border: 1px solid var(--gb-coral);
        color: var(--gb-coral);
        font-size: 10.5px;
        font-family: var(--font-mono);
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 4px;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        transition: all 0.12s;
        white-space: nowrap;
      }
      .gb-template-copy:hover { background: var(--gb-coral); color: white; }

      .gb-script {
        margin: 16px 0;
        background: white;
        border: 1px solid var(--gb-rule-strong);
        border-radius: 6px;
        padding: 18px 22px;
      }
      .gb-script-title {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 700;
        color: var(--gb-navy);
        margin: 0 0 14px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--gb-coral);
      }
      .gb-script-part { margin-top: 16px; }
      .gb-script-part:first-of-type { margin-top: 0; }
      .gb-script-part-label {
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--gb-coral);
        font-weight: 700;
        margin-bottom: 6px;
      }
      .gb-script-spoken {
        font-style: italic;
        color: var(--gb-navy);
        padding: 10px 14px;
        background: var(--gb-cream-shaded);
        border-left: 3px solid var(--gb-coral);
        border-radius: 3px;
        font-size: 14px;
        margin: 0;
        line-height: 1.55;
      }
      .gb-script ul { margin: 6px 0 0; padding-left: 22px; }
      .gb-script li { margin-bottom: 5px; font-size: 14px; line-height: 1.55; }
      .gb-script li::marker { color: var(--gb-coral); }

      .gb-sop {
        margin: 18px 0;
        padding: 16px 22px;
        background: white;
        border: 1px solid var(--gb-rule-strong);
        border-radius: 6px;
        border-left: 4px solid var(--gb-coral);
      }
      .gb-sop-head {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--gb-coral);
        font-weight: 700;
        margin-bottom: 2px;
      }
      .gb-sop-title {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 700;
        color: var(--gb-navy);
        margin: 0 0 12px;
        line-height: 1.25;
      }
      .gb-sop ol { margin: 0; padding-left: 22px; }
      .gb-sop li { margin-bottom: 6px; font-size: 14px; line-height: 1.6; }
      .gb-sop ol li::marker { color: var(--gb-coral); font-weight: 700; }

      .gb-quick-ref {
        margin: 24px 0;
        background: var(--gb-cream-shaded);
        border: 2px solid var(--gb-coral);
        border-radius: 8px;
        padding: 22px 26px;
      }
      .gb-quick-ref-head {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 700;
        color: var(--gb-coral);
        margin: 0 0 14px;
      }

      /* Back-to-top button — app-wide (every tab/view).

         Position-trapping note: lives on document.body (not inside
         .panel.hero) so position:fixed is relative to the viewport,
         not a backdrop-filter containing block.

         Visibility: shown when scrolled >80px and user is authenticated
         (body:not(.not-authed)). Future views get this automatically —
         no per-tab wiring required. */
      .app-back-to-top {
        position: fixed;
        bottom: 32px;
        right: 32px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #FF695F;
        color: #FFFFFF;
        border: 2px solid rgba(255, 255, 255, 0.85);
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(255, 105, 95, 0.45),
                    0 0 0 1px rgba(15, 37, 64, 0.08);
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 150;
        transition: background 0.15s, transform 0.15s, box-shadow 0.15s, opacity 0.2s;
      }
      .app-back-to-top:hover {
        background: #E5564D;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(255, 105, 95, 0.55),
                    0 0 0 1px rgba(15, 37, 64, 0.08);
      }
      .app-back-to-top:focus-visible {
        outline: none;
        box-shadow: 0 6px 20px rgba(255, 105, 95, 0.45),
                    0 0 0 4px rgba(255, 105, 95, 0.35);
      }
      body:not(.not-authed) .app-back-to-top.is-visible { display: flex; }

      .gb-section-footer {
        margin-top: 48px;
        padding-top: 14px;
        border-top: 1px solid var(--gb-rule);
        font-family: var(--font-mono);
        font-size: 10.5px;
        color: var(--gb-navy-dim);
        text-align: center;
        letter-spacing: 0.04em;
      }

      .gb-search-hit {
        background: rgba(229, 90, 74, 0.22);
        color: var(--gb-navy);
        padding: 0 2px;
        border-radius: 2px;
      }
      /* The currently-focused match — distinguished so the user can see
         which one their Up/Down/Enter key will jump to next. Stronger
         coral fill + thin outline + slight scale. */
      .gb-search-hit.is-current {
        background: rgba(229, 90, 74, 0.65);
        color: #FFFFFF;
        outline: 2px solid var(--gb-coral);
        outline-offset: 1px;
        box-shadow: 0 0 0 4px rgba(229, 90, 74, 0.18);
      }

      /* Inline nav bar under the search input — appears only when the
         user has a non-empty query. Holds the match counter and prev/
         next/clear controls. */
      .gb-search-nav {
        display: none;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        padding: 4px 8px;
        background: var(--gb-cream);
        border: 1px solid rgba(15, 37, 64, 0.10);
        border-radius: 6px;
        font-family: var(--font-base);
        font-size: 12px;
        color: var(--gb-navy);
      }
      .gb-search-nav.is-active { display: flex; }
      .gb-search-nav-count {
        flex: 1;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
      }
      .gb-search-nav-count.is-empty { color: rgba(15, 37, 64, 0.5); font-weight: 400; }
      .gb-search-nav button {
        background: transparent;
        border: 1px solid rgba(15, 37, 64, 0.18);
        border-radius: 4px;
        width: 22px;
        height: 22px;
        padding: 0;
        cursor: pointer;
        font-family: var(--font-base);
        font-size: 13px;
        line-height: 1;
        color: var(--gb-navy);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.12s, color 0.12s;
      }
      .gb-search-nav button:hover:not(:disabled) {
        background: var(--gb-coral);
        color: #FFFFFF;
        border-color: var(--gb-coral);
      }
      .gb-search-nav button:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      .gb-pullquote {
        margin: 32px 0;
        padding: 24px 32px;
        background: linear-gradient(135deg, var(--gb-coral-soft) 0%, var(--gb-cream) 100%);
        border-left: 4px solid var(--gb-coral);
        border-radius: 6px;
        font-family: var(--font-display);
        font-size: 17px;
        font-style: italic;
        line-height: 1.55;
        color: var(--gb-navy);
      }
      .gb-pullquote-attr {
        display: block;
        margin-top: 12px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--gb-coral);
        font-weight: 700;
      }

      /* ============ Guidebook Quiz ============ */
      /* The quiz is a full-screen modal launched from a CTA at the end
         of the Guidebook. It uses the same locked palette as the doc
         (so it reads as "an extension of the Guidebook") and lives
         appended to document.body — same containing-block trick as
         the back-to-top button. */

      .gb-quiz-cta {
        margin: 24px 0 0;
        padding: 28px 32px;
        background: linear-gradient(135deg, #FF695F 0%, #E5564D 100%);
        border-radius: 12px;
        color: #FFFFFF;
        text-align: center;
        box-shadow: 0 8px 24px rgba(255, 105, 95, 0.25);
      }
      .gb-quiz-cta-kicker {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        opacity: 0.85;
        margin-bottom: 8px;
      }
      .gb-quiz-cta-title {
        font-family: var(--font-display);
        font-size: 26px;
        font-weight: 800;
        margin: 0 0 10px;
        letter-spacing: -0.015em;
      }
      .gb-quiz-cta-desc {
        font-size: 14.5px;
        line-height: 1.55;
        max-width: 560px;
        margin: 0 auto 18px;
        opacity: 0.95;
      }
      .gb-quiz-cta-btn {
        background: #FFFFFF;
        color: var(--gb-coral-text, #E5564D);
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 15px;
        padding: 11px 26px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: transform 0.12s, box-shadow 0.12s;
        letter-spacing: -0.005em;
      }
      .gb-quiz-cta-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
      }

      .gb-quiz-modal {
        position: fixed;
        inset: 0;
        background: rgba(15, 37, 64, 0.55);
        backdrop-filter: blur(4px);
        z-index: 9000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }
      .gb-quiz-modal.is-open { display: flex; }

      .gb-quiz-card {
        /* Same frozen paper as .gb-doc — carry the readable-coral var
           since the quiz modal mounts on <body>, outside .gb-doc. */
        --gb-coral-text: #C9382E;
        background: #FDF8EE;
        color: #0F2540;
        border-radius: 14px;
        width: 100%;
        max-width: 720px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 24px 60px rgba(15, 37, 64, 0.35);
        overflow: hidden;
      }
      .gb-quiz-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px;
        border-bottom: 1px solid rgba(15, 37, 64, 0.12);
        gap: 16px;
      }
      .gb-quiz-progress {
        flex: 1;
        height: 6px;
        background: rgba(15, 37, 64, 0.1);
        border-radius: 3px;
        overflow: hidden;
      }
      .gb-quiz-progress-bar {
        height: 100%;
        background: #FF695F;
        width: 0%;
        transition: width 0.25s ease-out;
      }
      .gb-quiz-counter {
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 700;
        color: var(--gb-coral-text, #FF695F);
        letter-spacing: 0.06em;
        white-space: nowrap;
      }
      .gb-quiz-close {
        background: transparent;
        border: none;
        color: #0F2540;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        padding: 0 4px;
        opacity: 0.6;
        transition: opacity 0.12s;
      }
      .gb-quiz-close:hover { opacity: 1; }

      .gb-quiz-body {
        padding: 28px 32px;
        overflow-y: auto;
        flex: 1;
      }

      .gb-quiz-intro-title {
        font-family: var(--font-display);
        font-size: 28px;
        font-weight: 800;
        color: #0F2540;
        margin: 0 0 12px;
        letter-spacing: -0.015em;
      }
      .gb-quiz-intro-sub {
        color: rgba(15, 37, 64, 0.7);
        line-height: 1.6;
        font-size: 15px;
        margin: 0 0 16px;
      }
      .gb-quiz-intro-list {
        background: white;
        border-radius: 8px;
        padding: 16px 20px;
        margin: 16px 0 24px;
        border: 1px solid rgba(15, 37, 64, 0.12);
      }
      .gb-quiz-intro-list-title {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--gb-coral-text, #FF695F);
        font-weight: 700;
        margin-bottom: 8px;
      }
      .gb-quiz-intro-list ul { margin: 0; padding-left: 20px; }
      .gb-quiz-intro-list li { margin-bottom: 4px; font-size: 14px; line-height: 1.55; }

      .gb-quiz-intro-prev {
        margin-top: 18px;
        padding: 12px 16px;
        background: rgba(255, 105, 95, 0.08);
        border: 1px solid rgba(255, 105, 95, 0.25);
        border-radius: 6px;
        font-size: 13.5px;
        color: #0F2540;
      }
      .gb-quiz-intro-prev strong { color: var(--gb-coral-text, #E5564D); }

      .gb-quiz-section-badge {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--gb-coral-text, #FF695F);
        font-weight: 700;
        padding: 4px 10px;
        border: 1.5px solid #FF695F;
        border-radius: 4px;
        margin-bottom: 14px;
      }
      .gb-quiz-q-prompt {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
        color: #0F2540;
        margin: 0 0 22px;
        letter-spacing: -0.01em;
      }
      .gb-quiz-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .gb-quiz-option {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 13px 16px;
        background: white;
        border: 2px solid rgba(15, 37, 64, 0.12);
        border-radius: 8px;
        text-align: left;
        font-size: 14.5px;
        line-height: 1.5;
        color: #0F2540;
        cursor: pointer;
        font-family: inherit;
        transition: all 0.12s;
      }
      .gb-quiz-option:hover:not(:disabled) {
        border-color: #FF695F;
        background: rgba(255, 105, 95, 0.04);
      }
      .gb-quiz-option:disabled { cursor: default; }
      .gb-quiz-option-letter {
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 700;
        color: var(--gb-coral-text, #FF695F);
        background: rgba(255, 105, 95, 0.12);
        width: 24px;
        height: 24px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .gb-quiz-option.is-selected.is-wrong {
        background: rgba(220, 38, 38, 0.06);
        border-color: #DC2626;
      }
      .gb-quiz-option.is-selected.is-wrong .gb-quiz-option-letter {
        background: #DC2626;
        color: white;
      }
      .gb-quiz-option.is-correct {
        background: rgba(22, 163, 74, 0.08);
        border-color: #16A34A;
      }
      .gb-quiz-option.is-correct .gb-quiz-option-letter {
        background: #16A34A;
        color: white;
      }
      .gb-quiz-explanation {
        margin-top: 18px;
        padding: 14px 18px;
        background: white;
        border-left: 4px solid #FF695F;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.6;
        color: #0F2540;
      }
      .gb-quiz-explanation-label {
        display: block;
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--gb-coral-text, #FF695F);
        font-weight: 700;
        margin-bottom: 6px;
      }

      .gb-quiz-foot {
        padding: 18px 24px;
        border-top: 1px solid rgba(15, 37, 64, 0.12);
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        background: rgba(15, 37, 64, 0.02);
      }
      .gb-quiz-btn {
        background: #FF695F;
        color: white;
        border: none;
        padding: 10px 22px;
        border-radius: 6px;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        letter-spacing: -0.005em;
        transition: background 0.12s;
      }
      .gb-quiz-btn:hover { background: #E5564D; }
      .gb-quiz-btn:disabled {
        background: rgba(15, 37, 64, 0.18);
        cursor: not-allowed;
      }
      .gb-quiz-btn-ghost {
        background: transparent;
        color: #0F2540;
        border: 1px solid rgba(15, 37, 64, 0.2);
      }
      .gb-quiz-btn-ghost:hover { background: rgba(15, 37, 64, 0.05); }

      .gb-quiz-results-score {
        text-align: center;
        padding: 16px 0 24px;
      }
      .gb-quiz-results-big {
        font-family: var(--font-display);
        font-size: 64px;
        font-weight: 800;
        color: var(--gb-coral-text, #FF695F);
        line-height: 1;
        letter-spacing: -0.03em;
      }
      .gb-quiz-results-fraction {
        font-family: var(--font-mono);
        font-size: 14px;
        color: rgba(15, 37, 64, 0.6);
        margin-top: 8px;
        letter-spacing: 0.04em;
      }
      .gb-quiz-results-headline {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 700;
        color: #0F2540;
        text-align: center;
        margin: 0 0 8px;
      }
      .gb-quiz-results-sub {
        text-align: center;
        color: rgba(15, 37, 64, 0.65);
        font-size: 14px;
        line-height: 1.55;
        max-width: 480px;
        margin: 0 auto 24px;
      }
      .gb-quiz-results-saved {
        margin-top: 16px;
        text-align: center;
        font-family: var(--font-mono);
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        /* v2.151.0 — was #16A34A (~2.6:1 on the cream paper). */
        color: #15803d;
        font-weight: 700;
      }
      .gb-quiz-results-error {
        margin-top: 16px;
        text-align: center;
        font-size: 13px;
        color: #DC2626;
      }

      /* ============ Admin: Team Performance view ============ */
      /* This view is theme-aware (uses the app's normal CSS variables),
         not Guidebook-locked, because it's an admin reporting surface
         that should match the rest of the admin chrome. */
      .perf-view { display: flex; flex-direction: column; gap: 16px; }
      .perf-hero {
        padding: 18px 22px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
      }
      .perf-hero h2 { margin: 0 0 6px; font-size: 1.25rem; }
      .perf-hero .muted { margin: 0; font-size: var(--text-sm); }

      .perf-table-wrap {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }
      .perf-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--text-sm);
      }
      .perf-table th, .perf-table td {
        padding: 10px 14px;
        text-align: left;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
      }
      .perf-table th {
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        font-weight: 600;
        background: var(--input-bg);
        cursor: pointer;
        user-select: none;
      }
      .perf-table th.sortable:hover { color: var(--text); }
      .perf-table th.sort-asc::after { content: " ▲"; font-size: 9px; }
      .perf-table th.sort-desc::after { content: " ▼"; font-size: 9px; }
      .perf-table tr:last-child td { border-bottom: none; }
      .perf-table tr:hover td { background: rgba(125, 211, 252, 0.04); }
      [data-theme="harper"] .perf-table tr:hover td { background: rgba(26, 143, 94, 0.05); }
      .perf-name { font-weight: 650; }
      .perf-email {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        margin-top: 2px;
      }
      .perf-num {
        font-family: var(--font-mono);
        font-weight: 600;
        white-space: nowrap;
      }
      .perf-score-bar {
        display: inline-block;
        width: 56px;
        height: 6px;
        background: rgba(15, 37, 64, 0.10);
        border-radius: 3px;
        margin-left: 8px;
        vertical-align: middle;
        overflow: hidden;
      }
      .perf-score-bar-fill {
        height: 100%;
        background: var(--accent);
      }
      [data-theme="harper"] .perf-score-bar-fill { background: #1a8f5e; }
      .perf-pill-empty {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        padding: 2px 6px;
        background: var(--input-bg);
        border-radius: 3px;
      }
      .perf-empty {
        padding: 36px 24px;
        text-align: center;
        color: var(--muted);
        font-size: var(--text-sm);
      }

      /* ============ Topbar Feedback / Settings / Logout (v2.78.84) ============
         Compact topbar chips — theme-neutral at rest, hover swag per button.
         Icons MUST keep a real box (never display:contents) or SVGs blow up. */
      .lb-top-action {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: rgba(0, 0, 0, 0.16);
        background-image: none !important;
        color: var(--muted);
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1;
        cursor: pointer;
        overflow: hidden;
        isolation: isolate;
        box-sizing: border-box;
        flex-shrink: 0;
        box-shadow: none;
        transition:
          color 0.16s ease,
          border-color 0.16s ease,
          background 0.16s ease,
          box-shadow 0.18s ease,
          transform 0.16s ease;
      }
      [data-theme="light"] .lb-top-action {
        background: rgba(255, 255, 255, 0.78);
        color: #4b5b6e;
        border-color: rgba(15, 37, 64, 0.14);
      }
      [data-theme="harper"] .lb-top-action {
        background: rgba(255, 255, 255, 0.82);
        color: #3d4f63;
        border-color: rgba(10, 31, 61, 0.16);
      }
      [data-theme="mono"] .lb-top-action {
        background: rgba(255, 255, 255, 0.06);
        color: var(--muted);
      }
      .lb-top-action:hover { transform: translateY(-1px); }
      .lb-top-action:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--ring);
      }
      .lb-top-action-label {
        position: relative;
        z-index: 1;
        white-space: nowrap;
      }
      .lb-top-action-icon {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        opacity: 0.75;
        transition: opacity 0.16s ease, transform 0.18s ease, color 0.16s ease;
      }
      .lb-top-action-icon svg {
        display: block;
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
      }
      .lb-top-action:hover .lb-top-action-icon { opacity: 1; }

      /* Feedback — coral lift on hover */
      .lb-top-action-feedback:hover,
      .lb-top-action-feedback:focus-visible {
        color: #fff;
        border-color: rgba(255, 105, 95, 0.65);
        background: #FF695F;
        box-shadow:
          0 0 0 1px rgba(255, 105, 95, 0.3),
          0 0 14px 1px rgba(255, 105, 95, 0.4);
      }
      .lb-top-action-feedback:hover .lb-top-action-icon {
        transform: translateY(-0.5px) rotate(-6deg);
      }
      .lb-fb-spark {
        transform-origin: 18px 5px;
        opacity: 0.55;
      }
      .lb-top-action-feedback:hover .lb-fb-spark { opacity: 1; }

      /* Settings — the button IS the gear (no sun rays). Spins on hover. */
      .lb-top-action-settings {
        width: 32px;
        height: 32px;
        padding: 0;
        border-color: transparent;
        background: transparent;
      }
      [data-theme="light"] .lb-top-action-settings,
      [data-theme="harper"] .lb-top-action-settings,
      [data-theme="mono"] .lb-top-action-settings,
      [data-theme="dark"] .lb-top-action-settings {
        background: transparent;
        border-color: transparent;
      }
      .lb-top-action-settings .lb-top-action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .lb-top-action-settings .lb-top-action-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        opacity: 0.7;
      }
      .lb-top-action-settings .lb-top-action-icon svg,
      .lb-top-action-settings .lb-settings-gear {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
      }
      .lb-top-action-settings:hover,
      .lb-top-action-settings:focus-visible {
        color: var(--accent);
        border-color: transparent;
        background: transparent;
        box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 45%, transparent);
        transform: none;
      }
      [data-theme="harper"] .lb-top-action-settings:hover,
      [data-theme="harper"] .lb-top-action-settings:focus-visible {
        color: #1a8f5e;
        box-shadow: 0 0 14px 2px rgba(26, 143, 94, 0.45);
      }
      .lb-top-action-settings:hover .lb-settings-gear,
      .lb-top-action-settings:focus-visible .lb-settings-gear {
        animation: lbTopActionGearSpin 0.9s linear infinite;
      }
      @keyframes lbTopActionGearSpin {
        to { transform: rotate(360deg); }
      }

      /* Tour — quiet compass at rest; hover glows accent and the needle
         swings to a new heading (Harris, 2026-07-24) */
      .lb-top-action-tour:hover,
      .lb-top-action-tour:focus-visible {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 55%, transparent);
        box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 35%, transparent);
      }
      .lb-tour-needle {
        transform-origin: 12px 12px;
        transition: transform 0.45s ease;
      }
      .lb-top-action-tour:hover .lb-tour-needle,
      .lb-top-action-tour:focus-visible .lb-tour-needle {
        transform: rotate(315deg);
      }
      @media (prefers-reduced-motion: reduce) {
        .lb-tour-needle { transition: none; }
      }

      /* Theme — same quiet chip at rest; hover = Bob Ross happy-tree glow */
      .theme-picker .lb-top-action-theme {
        gap: 6px;
        min-width: 0;
        width: auto;
      }
      .lb-top-action-theme .theme-picker-caret {
        position: relative;
        z-index: 2;
        font-size: 9px;
        opacity: 0.7;
        color: inherit;
      }
      .lb-theme-paint {
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0;
        pointer-events: none;
        border-radius: inherit;
        /* Soft sky → meadow → distant trees (happy little scene) */
        background:
          radial-gradient(ellipse 40% 35% at 78% 28%, rgba(255, 236, 160, 0.85), transparent 60%),
          radial-gradient(ellipse 28% 40% at 22% 62%, rgba(34, 90, 44, 0.95), transparent 70%),
          radial-gradient(ellipse 34% 45% at 48% 70%, rgba(46, 120, 58, 0.9), transparent 72%),
          radial-gradient(ellipse 30% 38% at 72% 68%, rgba(28, 78, 40, 0.92), transparent 70%),
          linear-gradient(
            180deg,
            #7ec8e3 0%,
            #b8dff0 38%,
            #8fbf6a 55%,
            #3f8f4a 78%,
            #2a6b38 100%
          );
        transition: opacity 0.2s ease;
      }
      .lb-top-action-theme:hover .lb-theme-paint,
      .lb-top-action-theme:focus-visible .lb-theme-paint,
      .theme-picker.is-open .lb-top-action-theme .lb-theme-paint {
        opacity: 1;
      }
      .lb-top-action-theme:hover,
      .lb-top-action-theme:focus-visible,
      .theme-picker.is-open .lb-top-action-theme {
        color: #f7fff4;
        border-color: rgba(90, 180, 95, 0.7);
        background: transparent;
        text-shadow: 0 1px 2px rgba(20, 50, 25, 0.55);
        box-shadow:
          0 0 0 1px rgba(120, 200, 110, 0.35),
          0 0 18px 3px rgba(80, 180, 90, 0.55),
          0 0 28px 6px rgba(126, 200, 227, 0.25);
      }
      .lb-top-action-theme:hover .lb-top-action-label,
      .lb-top-action-theme:focus-visible .lb-top-action-label,
      .theme-picker.is-open .lb-top-action-theme .lb-top-action-label,
      .lb-top-action-theme:hover .theme-picker-caret,
      .theme-picker.is-open .lb-top-action-theme .theme-picker-caret {
        position: relative;
        z-index: 2;
        color: #f7fff4;
      }

      /* Logout — “Logout” text at rest; exit-red + runner on hover */
      .lb-top-action-logout .lb-exit-runner,
      .lb-top-action-logout .lb-exit-motion {
        opacity: 0;
        transition: opacity 0.16s ease;
      }
      .lb-top-action-logout .lb-exit-door { opacity: 0.9; }
      .lb-top-action-logout:hover,
      .lb-top-action-logout:focus-visible {
        color: #fff;
        border-color: rgba(239, 68, 68, 0.75);
        background: #dc2626;
        box-shadow:
          0 0 0 1px rgba(239, 68, 68, 0.4),
          0 0 16px 2px rgba(239, 68, 68, 0.5);
      }
      .lb-top-action-logout:hover .lb-exit-runner,
      .lb-top-action-logout:hover .lb-exit-motion,
      .lb-top-action-logout:focus-visible .lb-exit-runner,
      .lb-top-action-logout:focus-visible .lb-exit-motion {
        opacity: 1;
      }
      .lb-top-action-logout:hover .lb-exit-runner {
        animation: lbExitRun 0.55s ease-in-out infinite alternate;
      }
      .lb-top-action-logout:hover .lb-exit-motion {
        animation: lbExitDash 0.45s ease-in-out infinite;
      }
      @keyframes lbExitRun {
        from { transform: translate(0, 0); }
        to { transform: translate(1.6px, -0.4px); }
      }
      @keyframes lbExitDash {
        0%, 100% { opacity: 0.35; transform: translateX(0); }
        50% { opacity: 1; transform: translateX(1px); }
      }
      @media (prefers-reduced-motion: reduce) {
        .lb-top-action:hover { transform: none; }
        .lb-top-action-settings:hover .lb-settings-gear,
        .lb-top-action-settings:focus-visible .lb-settings-gear,
        .lb-top-action-logout:hover .lb-exit-runner,
        .lb-top-action-logout:hover .lb-exit-motion {
          animation: none;
        }
        .lb-theme-paint { transition: none; }
      }

      /* Topbar bubbles (Harris redesign, 2026-07-23) — Harry Brain, Ammar
         Brain, and Gmail are circular icon bubbles now, carrying the
         Layout V2 bubble language into the top bar. Hovering (or focusing)
         shows a tiny hotkey tip bubble underneath (⌘H / ⌘A / Gmail state). */
      .lb-topbar-bubble {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
        transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
      }
      .lb-topbar-bubble:hover { transform: scale(1.1); }
      .lb-topbar-bubble:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
      /* The tiny tip bubble — pure CSS from data-tip, no JS. Shared by
         the topbar bubbles (⌘H / ⌘A / Gmail) and the sidebar Hub button
         (⇧⇧), so every hotkey owner teaches its chord the same way. */
      .lb-topbar-bubble[data-tip]::after,
      .lv2-hub-btn[data-tip]::after {
        content: attr(data-tip);
        position: absolute;
        top: calc(100% + 9px);
        left: 50%;
        transform: translateX(-50%) scale(0.9);
        white-space: nowrap;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(10, 16, 28, 0.92);
        color: #f2f6fc;
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.04em;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
        z-index: 400;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
      }
      .lb-topbar-bubble[data-tip]:hover::after,
      .lb-topbar-bubble[data-tip]:focus-visible::after,
      .lv2-hub-btn[data-tip]:hover::after,
      .lv2-hub-btn[data-tip]:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) scale(1);
      }
      .ammar-brain-btn {
        background: #1F4E79;
        color: #FFFFFF;
        box-shadow:
          0 0 0 2px rgba(91, 155, 213, 0.28),
          0 0 14px 3px rgba(31, 78, 121, 0.42),
          0 2px 6px rgba(31, 78, 121, 0.28);
        animation: ammarBrainBreath 3.2s ease-in-out infinite;
      }
      .ammar-brain-btn:hover {
        background: #163A5C;
        animation: none;
        box-shadow:
          0 0 0 3px rgba(91, 155, 213, 0.4),
          0 0 20px 5px rgba(31, 78, 121, 0.55),
          0 2px 8px rgba(31, 78, 121, 0.35);
      }
      @keyframes ammarBrainBreath {
        0%, 100% {
          box-shadow:
            0 0 0 2px rgba(91, 155, 213, 0.22),
            0 0 12px 2px rgba(31, 78, 121, 0.35),
            0 2px 6px rgba(31, 78, 121, 0.24);
        }
        50% {
          box-shadow:
            0 0 0 3px rgba(91, 155, 213, 0.38),
            0 0 20px 5px rgba(91, 155, 213, 0.5),
            0 2px 8px rgba(31, 78, 121, 0.32);
        }
      }
      .ammar-brain-btn-icon {
        display: inline-flex;
        width: 21px;
        height: 21px;
        flex-shrink: 0;
      }
      .ammar-brain-btn-icon svg { width: 21px; height: 21px; display: block; }
      /* Gmail bubble — the real Gmail mark on white; the glow IS the
         status: green = linked, red = not linked (Harris, 2026-07-23). */
      .gmail-bubble {
        background: #ffffff;
        border: 1px solid rgba(10, 20, 35, 0.16);
      }
      .gmail-bubble svg { width: 19px; height: 19px; display: block; }
      .gmail-bubble.is-connected {
        box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.35), 0 0 14px 3px rgba(52, 199, 89, 0.55);
      }
      .gmail-bubble.is-disconnected {
        box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.35), 0 0 14px 3px rgba(229, 57, 53, 0.55);
      }
      /* Google revoked the grant (needs_reconnect from /api/gmail/status):
         yellow breathing glow — linked but sending is dead until re-link
         (2026-07-27 revocation incident). */
      .gmail-bubble.is-needs-reconnect {
        box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.45), 0 0 14px 3px rgba(250, 204, 21, 0.65);
        animation: gmailReconnectPulse 1.8s ease-in-out infinite;
      }
      @keyframes gmailReconnectPulse {
        0%, 100% { box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.45), 0 0 14px 3px rgba(250, 204, 21, 0.65); }
        50%      { box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.30), 0 0 22px 6px rgba(250, 204, 21, 0.85); }
      }
      .ab-beta-pill {
        display: inline-flex;
        align-items: center;
        margin-left: 8px;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: rgba(91, 155, 213, 0.22);
        color: var(--lb-sky-text, #9CC7EB);
        vertical-align: middle;
      }
      [data-theme="light"] .ab-beta-pill {
        background: #E8F1FA;
        color: #1F4E79;
      }
      [data-theme="harper"] .ab-beta-pill {
        /* Navy, not Harper green — Ammar's pill keeps his brand color. */
        background: #E8F1FA;
        color: #1F4E79;
      }
      /* Harry Brain bubble — forest green + soft breathing glow. */
      .harry-brain-btn {
        background: #0F5C45;
        color: #FFFFFF;
        box-shadow:
          0 0 0 2px rgba(61, 155, 120, 0.28),
          0 0 14px 3px rgba(15, 92, 69, 0.42),
          0 2px 6px rgba(15, 92, 69, 0.28);
        animation: harryBrainBreath 3.2s ease-in-out infinite;
      }
      .harry-brain-btn:hover {
        background: #0A4433;
        animation: none;
        box-shadow:
          0 0 0 3px rgba(61, 155, 120, 0.4),
          0 0 20px 5px rgba(15, 92, 69, 0.55),
          0 2px 8px rgba(15, 92, 69, 0.35);
      }
      @keyframes harryBrainBreath {
        0%, 100% {
          box-shadow:
            0 0 0 2px rgba(61, 155, 120, 0.22),
            0 0 12px 2px rgba(15, 92, 69, 0.35),
            0 2px 6px rgba(15, 92, 69, 0.24);
        }
        50% {
          box-shadow:
            0 0 0 3px rgba(61, 155, 120, 0.38),
            0 0 20px 5px rgba(61, 155, 120, 0.5),
            0 2px 8px rgba(15, 92, 69, 0.32);
        }
      }
      /* The global themed button gradients (e.g. [data-theme=light]
         button) beat the class rules above on specificity and washed
         both brain bubbles white (Harris, 2026-07-23). Re-assert the
         brand fills per theme — same trick as .feedback-btn. Harry is
         ALWAYS green, Ammar is ALWAYS navy. */
      [data-theme="dark"] .harry-brain-btn,
      [data-theme="light"] .harry-brain-btn,
      [data-theme="harper"] .harry-brain-btn,
      [data-theme="mono"] .harry-brain-btn {
        background: #0F5C45 !important;
        background-image: none !important;
        color: #FFFFFF !important;
        border: none !important;
      }
      [data-theme="dark"] .harry-brain-btn:hover,
      [data-theme="light"] .harry-brain-btn:hover,
      [data-theme="harper"] .harry-brain-btn:hover,
      [data-theme="mono"] .harry-brain-btn:hover {
        background: #0A4433 !important;
      }
      [data-theme="dark"] .ammar-brain-btn,
      [data-theme="light"] .ammar-brain-btn,
      [data-theme="harper"] .ammar-brain-btn,
      [data-theme="mono"] .ammar-brain-btn {
        background: #1F4E79 !important;
        background-image: none !important;
        color: #FFFFFF !important;
        border: none !important;
      }
      [data-theme="dark"] .ammar-brain-btn:hover,
      [data-theme="light"] .ammar-brain-btn:hover,
      [data-theme="harper"] .ammar-brain-btn:hover,
      [data-theme="mono"] .ammar-brain-btn:hover {
        background: #163A5C !important;
      }
      /* Light-family themes: punch the breath a bit so the glow still
         reads after the paper dim (v2.78.86). */
      [data-theme="light"] .harry-brain-btn,
      [data-theme="harper"] .harry-brain-btn,
      [data-theme="mono"] .harry-brain-btn {
        animation-name: harryBrainBreathLight;
      }
      [data-theme="light"] .ammar-brain-btn,
      [data-theme="harper"] .ammar-brain-btn,
      [data-theme="mono"] .ammar-brain-btn {
        animation-name: ammarBrainBreathLight;
      }
      @keyframes harryBrainBreathLight {
        0%, 100% {
          box-shadow:
            0 0 0 2px rgba(61, 155, 120, 0.32),
            0 0 14px 3px rgba(15, 92, 69, 0.42),
            0 2px 6px rgba(15, 92, 69, 0.28);
        }
        50% {
          box-shadow:
            0 0 0 3px rgba(61, 155, 120, 0.55),
            0 0 24px 7px rgba(61, 155, 120, 0.62),
            0 2px 8px rgba(15, 92, 69, 0.38);
        }
      }
      @keyframes ammarBrainBreathLight {
        0%, 100% {
          box-shadow:
            0 0 0 2px rgba(91, 155, 213, 0.32),
            0 0 14px 3px rgba(31, 78, 121, 0.42),
            0 2px 6px rgba(31, 78, 121, 0.28);
        }
        50% {
          box-shadow:
            0 0 0 3px rgba(91, 155, 213, 0.55),
            0 0 24px 7px rgba(91, 155, 213, 0.62),
            0 2px 8px rgba(31, 78, 121, 0.38);
        }
      }
      .harry-brain-btn-icon {
        display: inline-flex;
        width: 21px;
        height: 21px;
        flex-shrink: 0;
      }
      .harry-brain-btn-icon svg { width: 21px; height: 21px; display: block; }
      /* Harry modal reuses Ammar chrome; green accent overrides.
         Brand lock (Harris, 2026-07-23): Harry Brain is GREEN in every
         theme — including the chip hover states and user bubbles, which
         used to fall through to Ammar's navy. */
      .hb-modal {
        --ab-user-bg: #0F5C45;
        --ab-user-fg: #FFFFFF;
        --ab-accent: #3D9B78;
        --ab-cite-bg: rgba(61, 155, 120, 0.22);
        --ab-cite-fg: #A8E0C8;
        --ab-chip-hover-bg: #1C3B30;
        --ab-chip-hover-fg: #FFFFFF;
        --ab-chip-hover-border: #3D9B78;
        --ab-send-bg: #0F5C45;
        --ab-send-hover: #0A4433;
      }
      [data-theme="light"] .hb-modal {
        --ab-user-bg: #0F5C45;
        --ab-user-fg: #FFFFFF;
        --ab-accent: #0F5C45;
        --ab-cite-bg: #E6F4EE;
        --ab-cite-fg: #0F5C45;
        --ab-chip-hover-bg: #E6F4EE;
        --ab-chip-hover-fg: #0A4433;
        --ab-chip-hover-border: #0F5C45;
        --ab-send-bg: #0F5C45;
        --ab-send-hover: #0A4433;
      }
      [data-theme="harper"] .hb-modal {
        --ab-user-bg: #0F5C45;
        --ab-user-fg: #FFFFFF;
        --ab-accent: #0F6B47;
        --ab-cite-bg: rgba(15, 92, 69, 0.14);
        --ab-cite-fg: #0F5C45;
        --ab-chip-hover-bg: rgba(15, 92, 69, 0.12);
        --ab-chip-hover-fg: #0A1F3D;
        --ab-chip-hover-border: #0F5C45;
        --ab-send-bg: #0F5C45;
        --ab-send-hover: #0A4433;
      }
      .hb-beta-pill {
        display: inline-flex;
        align-items: center;
        margin-left: 8px;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: rgba(61, 155, 120, 0.22);
        color: var(--lb-ok-text, #A8E0C8);
        vertical-align: middle;
      }
      [data-theme="light"] .hb-beta-pill,
      [data-theme="harper"] .hb-beta-pill {
        background: #E6F4EE;
        color: #0F5C45;
      }


      /* Classic topbar: brains/Gmail as compact chips (still fully usable). */
      body:not(.layout-v2) .lb-topbar-bubble {
        width: auto;
        height: 34px;
        min-width: 34px;
        padding: 0 10px;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        animation: none !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
        transform: none !important;
      }
      body:not(.layout-v2) .lb-topbar-bubble:hover {
        transform: none !important;
        filter: brightness(1.05);
      }
      body:not(.layout-v2) .harry-brain-btn,
      body:not(.layout-v2) .ammar-brain-btn,
      body:not(.layout-v2) .gmail-bubble {
        animation: none !important;
      }

      /* Ammar Brain modal — self-contained theme tokens.
         Never use global --text/--muted/--border inside .ab-card: Harper's
         tokens are dark navy (for cream page backgrounds) and go invisible
         on a dark opaque card. Every surface here is fully opaque. */
      .ab-modal {
        --ab-overlay: rgba(8, 16, 32, 0.78);
        --ab-card-bg: #0F1728;
        --ab-card-fg: #E8EEF7;
        --ab-card-border: rgba(255, 255, 255, 0.14);
        --ab-muted: #A8B6C9;
        --ab-divider: rgba(255, 255, 255, 0.12);
        --ab-bubble-bg: #1A2438;
        --ab-bubble-border: rgba(255, 255, 255, 0.12);
        --ab-bubble-fg: #E8EEF7;
        --ab-user-bg: #1F4E79;
        --ab-user-fg: #FFFFFF;
        --ab-input-bg: #162033;
        --ab-input-fg: #E8EEF7;
        --ab-input-border: rgba(255, 255, 255, 0.16);
        --ab-chip-bg: #1A2438;
        --ab-chip-fg: #E8EEF7;
        --ab-chip-border: rgba(255, 255, 255, 0.22);
        --ab-chip-hover-bg: #243552;
        --ab-chip-hover-fg: #FFFFFF;
        --ab-chip-hover-border: #5B9BD5;
        --ab-cite-bg: rgba(91, 155, 213, 0.22);
        --ab-cite-fg: #B7D7F2;
        --ab-code-bg: rgba(0, 0, 0, 0.28);
        --ab-accent: #5B9BD5;
        --ab-close-hover: rgba(255, 255, 255, 0.08);
        --ab-send-bg: #1F4E79;
        --ab-send-hover: #163A5C;
        position: fixed;
        inset: 0;
        background: var(--ab-overlay);
        backdrop-filter: blur(6px);
        /* Brains outrank EVERYTHING (Harris, 2026-07-23): ⌘H/⌘A must
           surface Harry/Ammar above compose (.modal z 10000), the
           unsaved-confirm layer (10050), and the expanded rich editor
           (10060) — a hotkey summon that opens BEHIND the current
           popup is a broken hotkey. Clicking the brain's own backdrop
           still exits it, revealing whatever was underneath. */
        z-index: 10080;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }
      [data-theme="light"] .ab-modal {
        --ab-overlay: rgba(15, 37, 64, 0.52);
        --ab-card-bg: #FFFFFF;
        --ab-card-fg: #152238;
        --ab-card-border: #D5DCE8;
        --ab-muted: #5A6B80;
        --ab-divider: #E2E8F0;
        --ab-bubble-bg: #F1F5FB;
        --ab-bubble-border: #D5DCE8;
        --ab-bubble-fg: #152238;
        --ab-user-bg: #1F4E79;
        --ab-user-fg: #FFFFFF;
        --ab-input-bg: #FFFFFF;
        --ab-input-fg: #152238;
        --ab-input-border: #D5DCE8;
        --ab-chip-bg: #F1F5FB;
        --ab-chip-fg: #152238;
        --ab-chip-border: #C5D0E0;
        --ab-chip-hover-bg: #E4EEF8;
        --ab-chip-hover-fg: #163A5C;
        --ab-chip-hover-border: #3D7EB5;
        --ab-cite-bg: #E8F1FA;
        --ab-cite-fg: #1F4E79;
        --ab-code-bg: rgba(15, 37, 64, 0.08);
        --ab-accent: #3D7EB5;
        --ab-close-hover: rgba(15, 37, 64, 0.06);
        --ab-send-bg: #1F4E79;
        --ab-send-hover: #163A5C;
      }
      /* Harper = cream paper + navy text (match page brand, stay opaque).
         Brand lock (Harris, 2026-07-23): Ammar Brain is NAVY in every
         theme — this block used to recolor his accents Harper-green,
         which broke the identity. The paper follows the theme; the
         accents never do. (Harry's green lives in .hb-modal below.) */
      [data-theme="harper"] .ab-modal {
        --ab-overlay: rgba(10, 31, 61, 0.48);
        --ab-card-bg: #FFFCF6;
        --ab-card-fg: #0A1F3D;
        --ab-card-border: rgba(10, 31, 61, 0.16);
        --ab-muted: rgba(10, 31, 61, 0.68);
        --ab-divider: rgba(10, 31, 61, 0.12);
        --ab-bubble-bg: #F3EFE4;
        --ab-bubble-border: rgba(10, 31, 61, 0.12);
        --ab-bubble-fg: #0A1F3D;
        --ab-user-bg: #0A1F3D;
        --ab-user-fg: #FFFCF6;
        --ab-input-bg: #FFFFFF;
        --ab-input-fg: #0A1F3D;
        --ab-input-border: rgba(10, 31, 61, 0.18);
        --ab-chip-bg: #F3EFE4;
        --ab-chip-fg: #0A1F3D;
        --ab-chip-border: rgba(10, 31, 61, 0.22);
        --ab-chip-hover-bg: rgba(61, 126, 181, 0.12);
        --ab-chip-hover-fg: #0A1F3D;
        --ab-chip-hover-border: #3D7EB5;
        --ab-cite-bg: rgba(61, 126, 181, 0.16);
        --ab-cite-fg: #1F4E79;
        --ab-code-bg: rgba(10, 31, 61, 0.08);
        --ab-accent: #3D7EB5;
        --ab-close-hover: rgba(10, 31, 61, 0.06);
        --ab-send-bg: #1F4E79;
        --ab-send-hover: #163A5C;
      }
      .ab-modal.is-open { display: flex; }
      .hb-shell {
        display: flex;
        align-items: stretch;
        gap: 12px;
        width: min(720px, 100%);
        max-height: min(86vh, 820px);
      }
      .hb-modal.has-desks .hb-shell {
        width: min(1080px, 100%);
      }
      .hb-modal .ab-card {
        width: 100%;
        max-height: none;
        flex: 1 1 auto;
        min-width: 0;
      }
      .hb-desk-rail {
        display: none;
        width: min(300px, 34%);
        flex: 0 0 min(300px, 34%);
        background: var(--ab-card-bg);
        color: var(--ab-card-fg);
        border: 1px solid var(--ab-card-border);
        border-radius: var(--radius-lg);
        box-shadow: 0 22px 56px rgba(0, 0, 0, 0.45);
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
      }
      .hb-modal.has-desks .hb-desk-rail { display: flex; }
      .hb-desk-rail-head {
        padding: 14px 14px 10px;
        border-bottom: 1px solid var(--ab-divider);
      }
      .hb-desk-rail-head h4 {
        margin: 0 0 4px;
        font-size: var(--text-sm);
        font-weight: 700;
      }
      .hb-desk-rail-head p {
        margin: 0;
        font-size: 11.5px;
        color: var(--ab-muted);
        line-height: 1.35;
      }
      .hb-desk-rail-list {
        padding: 10px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
        min-height: 0;
      }
      .hb-desk-card {
        border: 1px solid var(--ab-bubble-border);
        background: var(--ab-bubble-bg);
        border-radius: 8px;
        padding: 10px 10px 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .hb-desk-card-name {
        font-weight: 650;
        font-size: var(--text-sm);
        line-height: 1.25;
      }
      .hb-desk-card-meta {
        font-size: 11.5px;
        color: var(--ab-muted);
        line-height: 1.3;
        word-break: break-word;
      }
      .hb-desk-card-btn {
        margin-top: 2px;
        border: none !important;
        border-radius: 6px;
        background: var(--ab-send-bg) !important;
        background-image: none !important;
        color: #FFFFFF !important;
        font-weight: 600;
        font-size: 11.5px;
        padding: 7px 10px;
        cursor: pointer;
        text-align: center;
      }
      .hb-desk-card-btn:hover {
        background: var(--ab-send-hover) !important;
      }
      .hb-desk-card-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }
      .hb-desk-empty {
        padding: 16px 12px;
        font-size: 12px;
        color: var(--ab-muted);
        font-style: italic;
      }
      @media (max-width: 820px) {
        .hb-modal.has-desks .hb-shell {
          flex-direction: column;
          width: min(720px, 100%);
          overflow-y: auto;
        }
        .hb-desk-rail {
          width: 100%;
          flex: 0 0 auto;
          max-height: 240px;
        }
      }
      .ab-card {
        background: var(--ab-card-bg);
        color: var(--ab-card-fg);
        border: 1px solid var(--ab-card-border);
        border-radius: var(--radius-lg);
        width: min(720px, 100%);
        max-height: min(86vh, 820px);
        display: flex;
        flex-direction: column;
        box-shadow: 0 22px 56px rgba(0, 0, 0, 0.45);
      }
      .ab-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 20px 12px;
        border-bottom: 1px solid var(--ab-divider);
        background: var(--ab-card-bg);
      }
      .ab-head h3 {
        margin: 0 0 4px;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--ab-card-fg);
      }
      .ab-head-icon {
        display: inline-flex;
        width: 22px;
        height: 22px;
        color: var(--ab-accent);
      }
      .ab-head-icon svg { width: 22px; height: 22px; }
      .ab-head-sub {
        margin: 0;
        font-size: var(--text-xs);
        color: var(--ab-muted);
        max-width: 52ch;
      }
      .ab-head-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }
      .ab-reset {
        border: 1px solid var(--ab-chip-border) !important;
        background: var(--ab-chip-bg) !important;
        background-image: none !important;
        color: var(--ab-chip-fg) !important;
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.01em;
        cursor: pointer;
        box-shadow: none !important;
        white-space: nowrap;
        line-height: 1.2;
      }
      .ab-reset:hover {
        border-color: var(--ab-chip-hover-border) !important;
        background: var(--ab-chip-hover-bg) !important;
        color: var(--ab-chip-hover-fg) !important;
      }
      .ab-reset.is-on {
        border-color: var(--ab-accent) !important;
        color: var(--ab-accent) !important;
      }
      /* Teach CTA — bright + obvious in both Ammar (navy) and Harry (green) modals */
      .ab-teach-cta {
        border: none !important;
        background: var(--ab-accent) !important;
        background-image: none !important;
        color: #fff !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--ab-accent) 35%, transparent),
                    0 2px 10px color-mix(in srgb, var(--ab-accent) 45%, transparent) !important;
      }
      .ab-teach-cta:hover {
        filter: brightness(1.12);
        border: none !important;
        background: var(--ab-accent) !important;
        color: #fff !important;
      }
      .ab-teach-cta.is-on {
        filter: brightness(1.08);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-accent) 50%, transparent),
                    0 2px 12px color-mix(in srgb, var(--ab-accent) 55%, transparent) !important;
        color: #fff !important;
        border: none !important;
      }
      .hb-modal .ab-teach-cta {
        background: #1f8a4c !important;
        box-shadow: 0 0 0 2px rgba(31, 138, 76, 0.4),
                    0 2px 10px rgba(31, 138, 76, 0.45) !important;
      }
      .hb-modal .ab-teach-cta:hover,
      .hb-modal .ab-teach-cta.is-on {
        background: #22a057 !important;
        color: #fff !important;
      }
      .ab-teach-panel {
        display: none;
        border-bottom: 1px solid var(--ab-divider);
        padding: 12px 16px 14px;
        background: var(--ab-chip-bg);
      }
      .ab-teach-panel.is-open { display: block; }
      .ab-teach-panel-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--ab-card-fg);
        margin: 0 0 6px;
      }
      .ab-teach-panel-hint {
        font-size: 11px;
        color: var(--ab-muted);
        margin: 0 0 8px;
        line-height: 1.4;
      }
      .ab-teach-panel textarea {
        width: 100%;
        min-height: 72px;
        resize: vertical;
        font: inherit;
        font-size: 13px;
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px solid var(--ab-divider);
        background: var(--ab-card-bg, transparent);
        color: inherit;
        box-sizing: border-box;
      }
      .ab-teach-panel-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-top: 8px;
      }
      .ab-teach-panel-actions .ab-teach-submit {
        border: none;
        border-radius: 6px;
        padding: 6px 14px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        background: var(--ab-accent, #1e3a5f);
        color: #fff;
      }
      .ab-teach-panel-actions .ab-teach-cancel {
        border: 1px solid var(--ab-divider);
        background: transparent;
        color: var(--ab-muted);
        border-radius: 6px;
        padding: 5px 12px;
        font-size: 12px;
        cursor: pointer;
      }
      .ab-teach-panel-status {
        font-size: 11px;
        color: var(--ab-muted);
        margin-top: 6px;
        min-height: 1.2em;
      }
      .ab-close {
        background: transparent;
        border: none;
        color: var(--ab-muted);
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        padding: 2px 6px;
        border-radius: 4px;
      }
      .ab-close:hover {
        color: var(--ab-card-fg);
        background: var(--ab-close-hover);
      }
      .ab-messages {
        flex: 1;
        overflow-y: auto;
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 280px;
        background: var(--ab-card-bg);
      }
      .ab-msg {
        max-width: 92%;
        padding: 12px 14px;
        border-radius: 10px;
        font-size: var(--text-sm);
        line-height: 1.5;
        word-break: break-word;
      }
      .ab-msg-user {
        align-self: flex-end;
        background: var(--ab-user-bg);
        color: var(--ab-user-fg);
        white-space: pre-wrap;
      }
      .ab-msg-assistant {
        align-self: flex-start;
        background: var(--ab-bubble-bg);
        border: 1px solid var(--ab-bubble-border);
        color: var(--ab-bubble-fg);
      }
      .ab-msg-body p { margin: 0 0 0.65em; }
      .ab-msg-body p:last-child { margin-bottom: 0; }
      .ab-msg-body ul {
        margin: 0.35em 0 0.65em;
        padding-left: 1.2em;
      }
      .ab-msg-body li { margin: 0.2em 0; }
      .ab-msg-body strong { font-weight: 700; color: inherit; }
      .ab-msg-body code {
        font-size: 0.92em;
        background: var(--ab-code-bg);
        padding: 1px 5px;
        border-radius: 3px;
      }
      .ab-msg-meta {
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid var(--ab-divider);
        font-size: 11px;
        color: var(--ab-muted);
        white-space: normal;
        line-height: 1.4;
      }
      .ab-cite {
        display: inline-block;
        margin: 3px 8px 3px 0;
        padding: 3px 8px;
        border-radius: 999px;
        background: var(--ab-cite-bg);
        color: var(--ab-cite-fg);
        font-size: 10px;
        line-height: 1.3;
        white-space: nowrap;
      }
      .ab-teach {
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid var(--ab-divider);
        font-size: 12px;
      }
      .ab-teach-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
      }
      .ab-teach-btn {
        border: 1px solid var(--ab-divider);
        background: transparent;
        color: var(--ab-muted);
        border-radius: 6px;
        padding: 3px 9px;
        font-size: 11px;
        cursor: pointer;
      }
      .ab-teach-btn:hover { color: var(--ab-fg, inherit); border-color: var(--ab-muted); }
      .ab-teach-btn.is-on { color: var(--ab-fg, inherit); border-color: currentColor; }
      .ab-teach-form { margin-top: 8px; display: none; }
      .ab-teach-form.is-open { display: block; }
      .ab-teach-form textarea {
        width: 100%;
        min-height: 56px;
        resize: vertical;
        font: inherit;
        font-size: 12px;
        padding: 8px;
        border-radius: 6px;
        border: 1px solid var(--ab-divider);
        background: var(--ab-code-bg, transparent);
        color: inherit;
        box-sizing: border-box;
      }
      .ab-teach-form .ab-teach-submit {
        margin-top: 6px;
        border: none;
        border-radius: 6px;
        padding: 5px 12px;
        font-size: 12px;
        cursor: pointer;
        background: var(--ab-accent, #1e3a5f);
        color: #fff;
      }
      .ab-teach-thanks {
        margin-top: 6px;
        color: var(--ab-muted);
        font-size: 11px;
      }
      .ab-empty {
        margin: auto;
        text-align: center;
        color: var(--ab-muted);
        font-size: var(--text-sm);
        max-width: 38ch;
        line-height: 1.5;
      }
      .ab-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-top: 14px;
      }
      .ab-chip {
        border: 1px solid var(--ab-chip-border) !important;
        background: var(--ab-chip-bg) !important;
        color: var(--ab-chip-fg) !important;
        border-radius: 999px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        box-shadow: none !important;
        background-image: none !important;
      }
      .ab-chip:hover {
        border-color: var(--ab-chip-hover-border) !important;
        background: var(--ab-chip-hover-bg) !important;
        color: var(--ab-chip-hover-fg) !important;
        transform: none;
      }
      .ab-foot {
        border-top: 1px solid var(--ab-divider);
        padding: 12px 16px 14px;
        display: flex;
        gap: 8px;
        align-items: flex-end;
        background: var(--ab-card-bg);
      }
      .ab-input {
        flex: 1;
        min-height: 44px;
        max-height: 120px;
        resize: vertical;
        border-radius: 8px;
        border: 1px solid var(--ab-input-border);
        background: var(--ab-input-bg);
        color: var(--ab-input-fg);
        padding: 10px 12px;
        font: inherit;
        font-size: var(--text-sm);
      }
      .ab-input::placeholder { color: var(--ab-muted); opacity: 0.85; }
      .ab-input:focus {
        outline: none;
        border-color: var(--ab-accent);
        box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.28);
      }
      /* Focus rings follow the BRAIN, not the theme (Harris,
         2026-07-23): Ammar's input glows navy everywhere, Harry's
         glows green everywhere. */
      [data-theme="harper"] .ab-input:focus {
        box-shadow: 0 0 0 3px rgba(61, 126, 181, 0.28);
      }
      [data-theme="light"] .ab-input:focus {
        box-shadow: 0 0 0 3px rgba(61, 126, 181, 0.28);
      }
      .hb-modal .ab-input:focus {
        box-shadow: 0 0 0 3px rgba(61, 155, 120, 0.32);
      }
      .ab-send {
        padding: 10px 16px;
        border: none !important;
        border-radius: 8px;
        background: var(--ab-send-bg) !important;
        background-image: none !important;
        color: #FFFFFF !important;
        font-weight: 600;
        font-size: var(--text-sm);
        cursor: pointer;
        white-space: nowrap;
        box-shadow: none !important;
      }
      .ab-send:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }
      .ab-send:not(:disabled):hover {
        background: var(--ab-send-hover) !important;
        background-image: none !important;
      }
      .ab-send.is-stop {
        background: #b42318 !important;
        color: #FFFFFF !important;
      }
      .ab-send.is-stop:not(:disabled):hover {
        background: #912018 !important;
      }
      .ab-typing {
        color: var(--ab-muted);
        font-style: italic;
      }
      .ab-msg-stopped {
        color: var(--ab-muted);
        font-style: italic;
        font-size: var(--text-sm);
      }
      /* Beat global theme button gradients (light/harper apply to all buttons). */
      [data-theme="light"] .ab-chip,
      [data-theme="harper"] .ab-chip,
      [data-theme="dark"] .ab-chip,
      [data-theme="light"] .ab-send,
      [data-theme="harper"] .ab-send,
      [data-theme="dark"] .ab-send,
      [data-theme="light"] .ab-close,
      [data-theme="harper"] .ab-close,
      [data-theme="dark"] .ab-close {
        background-image: none !important;
      }

      /* Theme overrides — beat global themed button gradients so the
         neutral resting state + hover swag of .lb-top-action wins. */
      [data-theme="light"] .lb-top-action,
      [data-theme="harper"] .lb-top-action,
      [data-theme="dark"] .lb-top-action,
      [data-theme="mono"] .lb-top-action {
        background-image: none !important;
      }
      [data-theme="light"] .lb-top-action-feedback:hover,
      [data-theme="harper"] .lb-top-action-feedback:hover,
      [data-theme="dark"] .lb-top-action-feedback:hover,
      [data-theme="mono"] .lb-top-action-feedback:hover {
        background: #FF695F !important;
        color: #fff !important;
        border-color: rgba(255, 105, 95, 0.65) !important;
      }
      [data-theme="light"] .lb-top-action-logout:hover,
      [data-theme="harper"] .lb-top-action-logout:hover,
      [data-theme="dark"] .lb-top-action-logout:hover,
      [data-theme="mono"] .lb-top-action-logout:hover {
        background: #dc2626 !important;
        color: #fff !important;
        border-color: rgba(239, 68, 68, 0.75) !important;
      }
      [data-theme="light"] .lb-top-action-theme:hover,
      [data-theme="harper"] .lb-top-action-theme:hover,
      [data-theme="dark"] .lb-top-action-theme:hover,
      [data-theme="mono"] .lb-top-action-theme:hover,
      [data-theme="light"] .theme-picker.is-open .lb-top-action-theme,
      [data-theme="harper"] .theme-picker.is-open .lb-top-action-theme,
      [data-theme="dark"] .theme-picker.is-open .lb-top-action-theme,
      [data-theme="mono"] .theme-picker.is-open .lb-top-action-theme {
        background: transparent !important;
        color: #f7fff4 !important;
        border-color: rgba(90, 180, 95, 0.7) !important;
      }
      [data-theme="light"] .lb-top-action-settings:hover,
      [data-theme="harper"] .lb-top-action-settings:hover,
      [data-theme="dark"] .lb-top-action-settings:hover,
      [data-theme="mono"] .lb-top-action-settings:hover {
        background: transparent !important;
        border-color: transparent !important;
      }

      .fb-modal {
        position: fixed;
        inset: 0;
        background: rgba(15, 37, 64, 0.55);
        backdrop-filter: blur(4px);
        z-index: 9000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }
      .fb-modal.is-open { display: flex; }
      .fb-card {
        /* fb_24: this card floats over a blurred overlay, so it needs an
           OPAQUE surface. --panel is only ~4–6% alpha in the light/dark
           themes (intended for inline panels layered on the page, not a
           modal), which made the Share-feedback popup see-through and hard
           to read. Use solid theme surfaces below. Harper's --panel is
           already 0.78 opaque ("Harper theme is fine"), so it keeps it. */
        background: #131c30;
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        width: 100%;
        max-width: 560px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 24px 60px rgba(15, 37, 64, 0.35);
        overflow: hidden;
      }
      [data-theme="dark"] .fb-card { background: #131c30; }
      [data-theme="light"] .fb-card { background: #ffffff; }
      [data-theme="harper"] .fb-card { background: var(--panel); }
      @media (prefers-color-scheme: light) {
        :root:not([data-theme]) .fb-card { background: #ffffff; }
      }
      .fb-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 22px;
        border-bottom: 1px solid var(--border);
      }
      .fb-head h3 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
      }
      .fb-head-sub {
        margin: 4px 0 0;
        font-size: var(--text-xs);
        color: var(--muted);
      }
      .fb-close {
        background: transparent;
        border: none;
        color: var(--text);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        padding: 0 4px;
        opacity: 0.55;
        transition: opacity 0.12s;
      }
      .fb-close:hover { opacity: 1; }
      .fb-body { padding: 20px 22px; overflow-y: auto; }
      .fb-field { margin-bottom: 16px; }
      .fb-field-label {
        display: block;
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        font-weight: 600;
        margin-bottom: 6px;
      }
      .fb-kind-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .fb-kind-opt {
        flex: 1;
        min-width: 100px;
        padding: 10px 14px;
        background: var(--input-bg);
        border: 1.5px solid var(--border);
        border-radius: 6px;
        color: var(--text);
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: 500;
        cursor: pointer;
        text-align: center;
        transition: all 0.12s;
      }
      .fb-kind-opt:hover { border-color: #FF695F; }
      .fb-kind-opt.is-active {
        background: rgba(255, 105, 95, 0.12);
        border-color: var(--lb-coral-text, #FF695F);
        color: var(--lb-coral-text, #FF695F);
        font-weight: 700;
      }
      .fb-textarea {
        width: 100%;
        min-height: 140px;
        padding: 12px 14px;
        background: var(--input-bg);
        border: 1.5px solid var(--border);
        border-radius: 6px;
        color: var(--text);
        font-family: inherit;
        font-size: var(--text-sm);
        line-height: 1.55;
        resize: vertical;
        box-sizing: border-box;
      }
      .fb-textarea:focus {
        outline: none;
        border-color: #FF695F;
        box-shadow: 0 0 0 3px rgba(255, 105, 95, 0.15);
      }
      .fb-charcount {
        display: block;
        margin-top: 4px;
        text-align: right;
        font-family: var(--font-mono);
        font-size: 10.5px;
        color: var(--muted);
      }
      .fb-charcount.is-warn { color: #DC2626; }
      .fb-foot {
        padding: 16px 22px;
        border-top: 1px solid var(--border);
        background: rgba(15, 37, 64, 0.02);
        display: flex;
        justify-content: flex-end;
        gap: 10px;
      }
      [data-theme="dark"] .fb-foot { background: rgba(0, 0, 0, 0.15); }
      .fb-btn {
        background: #FF695F;
        color: #FFFFFF;
        border: none;
        padding: 9px 20px;
        border-radius: 6px;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: var(--text-sm);
        cursor: pointer;
        transition: background 0.12s;
      }
      .fb-btn:hover { background: #E5564D; }
      .fb-btn:disabled {
        background: rgba(15, 37, 64, 0.18);
        cursor: not-allowed;
      }
      .fb-btn-ghost {
        background: transparent;
        color: var(--text);
        border: 1px solid var(--border);
      }
      .fb-btn-ghost:hover { background: var(--input-bg); }
      .fb-success {
        text-align: center;
        padding: 28px 20px;
      }
      .fb-success-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        background: rgba(22, 163, 74, 0.12);
        border-radius: 50%;
        font-size: 28px;
        color: var(--lb-ok-text, #16A34A);
        margin-bottom: 14px;
      }
      .fb-success h4 {
        margin: 0 0 6px;
        font-size: 18px;
        font-weight: 700;
      }
      .fb-success p {
        margin: 0;
        color: var(--muted);
        font-size: var(--text-sm);
        line-height: 1.55;
      }
      .fb-error {
        padding: 10px 14px;
        background: rgba(220, 38, 38, 0.10);
        border: 1px solid rgba(220, 38, 38, 0.25);
        color: #DC2626;
        border-radius: 6px;
        font-size: 13px;
        margin-bottom: 14px;
      }

      /* ============ Admin: Documents view (markdown) ============ */
      .docs-view {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
        height: calc(100vh - 120px);
      }
      .docs-hero {
        padding: 16px 20px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        flex-shrink: 0;
      }
      .docs-hero h2 { margin: 0 0 4px; font-size: 1.2rem; }
      .docs-layout {
        display: flex;
        gap: 14px;
        flex: 1;
        min-height: 0;
      }
      .docs-sidebar {
        width: 280px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-height: 0;
      }
      .docs-section-tabs {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .docs-section-btn {
        text-align: left;
        border: 1px solid var(--border);
        background: var(--input-bg);
        color: var(--text);
        font-size: 12px;
        font-weight: 600;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.12s ease;
      }
      .docs-section-btn:hover { border-color: var(--accent); }
      .docs-section-btn.is-active {
        border-color: var(--accent);
        background: rgba(26, 143, 94, 0.12);
        color: var(--accent);
      }
      .docs-file-list {
        flex: 1;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--panel);
        padding: 6px;
      }
      .docs-file-btn {
        display: block;
        width: 100%;
        text-align: left;
        border: none;
        background: transparent;
        color: var(--text);
        font-size: 12px;
        line-height: 1.35;
        padding: 8px 10px;
        border-radius: 6px;
        cursor: pointer;
      }
      .docs-file-btn:hover { background: var(--input-bg); }
      .docs-file-btn.is-active {
        background: var(--accent);
        color: #fff;
      }
      .docs-file-name {
        display: block;
        font-family: var(--font-mono);
        font-size: 10px;
        opacity: 0.65;
        margin-top: 2px;
        word-break: break-all;
      }
      .docs-main {
        flex: 1;
        min-width: 0;
        min-height: 0;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--panel);
        padding: 24px 28px 32px;
      }
      .docs-empty {
        color: var(--muted);
        font-style: italic;
        padding: 40px 20px;
        text-align: center;
      }
      .md-content {
        font-size: 14px;
        line-height: 1.65;
        color: var(--text);
        max-width: 820px;
      }
      .md-content h1, .md-content h2, .md-content h3, .md-content h4 {
        margin: 1.4em 0 0.55em;
        line-height: 1.25;
        letter-spacing: -0.02em;
      }
      .md-content h1 { font-size: 1.55rem; margin-top: 0; }
      .md-content h2 { font-size: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0.35em; }
      .md-content h3 { font-size: 1.05rem; }
      .md-content h4 { font-size: 0.95rem; color: var(--muted); }
      .md-content p { margin: 0 0 0.85em; }
      .md-content ul, .md-content ol { margin: 0 0 0.85em 1.25em; padding: 0; }
      .md-content li { margin: 0.25em 0; }
      .md-content li > ul, .md-content li > ol { margin-top: 0.25em; }
      .md-content code {
        font-family: var(--font-mono);
        font-size: 0.88em;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 0.1em 0.35em;
      }
      .md-content pre {
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 14px 16px;
        overflow-x: auto;
        margin: 0 0 1em;
      }
      .md-content pre code {
        border: none;
        background: none;
        padding: 0;
        font-size: 12px;
        line-height: 1.5;
      }
      .md-content blockquote {
        margin: 0 0 1em;
        padding: 0.5em 0 0.5em 1em;
        border-left: 3px solid var(--accent);
        color: var(--muted);
      }
      .md-content hr {
        border: none;
        border-top: 1px solid var(--border);
        margin: 1.5em 0;
      }
      .md-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 1em;
        font-size: 13px;
      }
      .md-content th, .md-content td {
        border: 1px solid var(--border);
        padding: 8px 10px;
        text-align: left;
        vertical-align: top;
      }
      .md-content th { background: var(--input-bg); font-weight: 700; }
      .md-content a {
        color: var(--accent);
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .md-content a:hover { opacity: 0.85; }
      .md-content strong { font-weight: 700; }
      @media (max-width: 900px) {
        .docs-layout { flex-direction: column; height: auto; }
        .docs-sidebar { width: 100%; max-height: 240px; }
        .docs-view { height: auto; }
      }

      /* ============ Admin: UW Follow-ups (Michale / RT) ============ */
      .uwfu-view { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
      .uwfu-banner {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 10px 14px;
        background: rgba(220, 38, 38, 0.08);
        border: 1px solid rgba(220, 38, 38, 0.35);
        border-radius: var(--radius-lg);
        color: var(--text);
        font-size: var(--text-sm);
      }
      .uwfu-banner strong { color: #DC2626; letter-spacing: 0.02em; }
      .uwfu-inbox {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; flex-wrap: wrap;
        padding: 10px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        font-size: var(--text-sm);
      }
      .uwfu-inbox-meta { display: grid; gap: 2px; min-width: 0; }
      .uwfu-inbox-meta strong { font-size: 12px; }
      .uwfu-inbox-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
      .uwfu-inbox .is-ok { color: #15803D; font-weight: 650; }
      .uwfu-inbox .is-warn { color: #A16207; font-weight: 650; }
      .uwfu-hero {
        padding: 12px 16px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; flex-wrap: wrap;
      }
      .uwfu-hero h2 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.25; max-width: 40rem; }
      .uwfu-hero p.muted { margin: 0; font-size: var(--text-sm); max-width: 44rem; line-height: 1.4; }
      .uwfu-counts { display: flex; gap: 8px; flex-wrap: wrap; }
      .uwfu-pill {
        font-family: var(--font-mono); font-size: 11px; font-weight: 700;
        padding: 5px 10px; border-radius: 4px; letter-spacing: 0.03em;
        background: var(--input-bg); border: 1px solid var(--border);
      }
      .uwfu-pill.is-review { background: rgba(255, 105, 95, 0.14); color: var(--lb-coral-text, #FF695F); border-color: transparent; }
      .uwfu-pill.is-approved { background: rgba(22, 163, 74, 0.14); color: var(--lb-ok-text, #16A34A); border-color: transparent; }
      .uwfu-pill.is-completed { background: rgba(2, 132, 199, 0.14); color: #0284C7; border-color: transparent; }
      .uwfu-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
      .uwfu-toolbar input[type="search"] {
        min-width: 200px; flex: 1; max-width: 280px;
        padding: 7px 10px; border-radius: 6px;
        border: 1px solid var(--border); background: var(--input-bg); color: var(--text);
        font-size: var(--text-sm);
      }
      .uwfu-filter-btn {
        padding: 6px 12px; background: var(--input-bg); border: 1px solid var(--border);
        border-radius: 6px; color: var(--text); font-family: var(--font-mono);
        font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
        cursor: pointer;
      }
      .uwfu-filter-btn.is-active { background: #FF695F; border-color: #FF695F; color: #fff; }
      .uwfu-toolbar-spacer { flex: 1; min-width: 8px; }
      .uwfu-quiet-btn {
        padding: 6px 10px; background: transparent; border: 1px dashed var(--border);
        border-radius: 6px; color: var(--muted); font-size: 12px; cursor: pointer;
      }
      .uwfu-quiet-btn:hover { color: var(--text); border-color: var(--muted); }
      .uwfu-layout {
        display: grid; grid-template-columns: minmax(260px, 320px) 1fr;
        gap: 12px; min-height: 0; flex: 1;
      }
      @media (max-width: 900px) {
        .uwfu-layout { grid-template-columns: 1fr; }
      }
      .uwfu-list {
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius-lg); overflow: auto; max-height: calc(100vh - 260px);
        min-height: 360px;
      }
      .uwfu-row {
        width: 100%; text-align: left; display: block;
        padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border);
        background: transparent; color: var(--text); cursor: pointer;
      }
      .uwfu-row:hover { background: rgba(255, 105, 95, 0.06); }
      .uwfu-row.is-active { background: rgba(255, 105, 95, 0.12); }
      .uwfu-row-name { font-weight: 650; font-size: var(--text-sm); margin-bottom: 4px; }
      .uwfu-row-meta {
        display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
        font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
      }
      .uwfu-badge {
        padding: 2px 6px; border-radius: 3px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.04em;
      }
      .uwfu-badge.tmpl-michale { background: rgba(2, 132, 199, 0.14); color: #0284C7; }
      .uwfu-badge.tmpl-retain { background: rgba(124, 58, 237, 0.14); color: #7C3AED; }
      .uwfu-badge.tmpl-both { background: rgba(217, 119, 6, 0.16); color: var(--lb-warn-text, #D97706); }
      .uwfu-badge.st-needs_review { background: rgba(255, 105, 95, 0.14); color: var(--lb-coral-text, #FF695F); }
      .uwfu-badge.st-approved { background: rgba(22, 163, 74, 0.14); color: var(--lb-ok-text, #16A34A); }
      .uwfu-badge.st-sent { background: rgba(2, 132, 199, 0.14); color: #0284C7; }
      .uwfu-badge.st-rejected { background: rgba(100, 116, 139, 0.16); color: #64748B; }
      .uwfu-badge.st-skipped { background: rgba(100, 116, 139, 0.16); color: #64748B; }
      .uwfu-badge.bucket-WON { background: rgba(22, 163, 74, 0.16); color: #15803D; }
      .uwfu-badge.bucket-ELSEWHERE { background: rgba(2, 132, 199, 0.14); color: #0284C7; }
      .uwfu-badge.bucket-UNRESPONSIVE { background: rgba(217, 119, 6, 0.16); color: #B45309; }
      .uwfu-badge.bucket-BUSINESS_CLOSED { background: rgba(100, 116, 139, 0.18); color: #475569; }
      .uwfu-badge.bucket-HOLD { background: rgba(124, 58, 237, 0.14); color: #7C3AED; }
      .uwfu-conf {
        display: inline-flex; align-items: center; gap: 4px;
        font-family: var(--font-mono); font-size: 10px; font-weight: 700;
        padding: 2px 7px; border-radius: 999px; border: 1px solid transparent;
      }
      .uwfu-conf.band-green { background: rgba(22, 163, 74, 0.16); color: #15803D; }
      .uwfu-conf.band-yellow { background: rgba(234, 179, 8, 0.2); color: #A16207; }
      .uwfu-conf.band-red { background: rgba(239, 68, 68, 0.16); color: #B91C1C; }
      .uwfu-insight {
        border: 1px solid var(--border); border-radius: 8px;
        padding: 12px 14px; background: var(--input-bg);
      }
      .uwfu-insight-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
      }
      .uwfu-insight-head strong { font-size: 12px; }
      .uwfu-insight-text { margin: 0 0 10px; font-size: var(--text-sm); line-height: 1.4; }
      .uwfu-score-rows { display: grid; gap: 6px; }
      .uwfu-score-row {
        display: grid; grid-template-columns: 7.5rem 1fr 2.4rem;
        gap: 8px; align-items: center; font-size: 11px;
      }
      .uwfu-score-row span:first-child { color: var(--muted); font-family: var(--font-mono); }
      .uwfu-score-bar {
        height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--border) 70%, transparent);
        overflow: hidden;
      }
      .uwfu-score-bar > i {
        display: block; height: 100%; border-radius: 999px;
        background: #FF695F;
      }
      .uwfu-score-row.is-top .uwfu-score-bar > i { background: #16A34A; }
      .uwfu-score-row span:last-child {
        text-align: right; font-family: var(--font-mono); font-weight: 700;
      }
      .uwfu-agree {
        margin: 8px 0 0; font-size: 11px; color: var(--muted);
      }
      .uwfu-agree.is-aligned { color: #15803D; }
      .uwfu-agree.is-override { color: #A16207; }
      .uwfu-template-lock {
        border: 1px solid var(--border); border-radius: 8px;
        padding: 12px 14px; background: var(--panel);
      }
      .uwfu-template-lock h4 { margin: 0 0 6px; font-size: 12px; }
      .uwfu-template-name {
        display: inline-flex; align-items: center; gap: 8px;
        font-weight: 700; font-size: 13px; margin: 0 0 8px;
      }
      .uwfu-v2-preview {
        border: 1px solid var(--border); border-radius: 8px;
        background: #f3efe6; overflow: hidden; max-height: 420px;
        overflow-y: auto; margin: 10px 0 12px; min-height: 280px;
      }
      /* Inline Harper V2 shell (same as Duo / Message Templates) — not an
         iframe. Empty sandbox + contentDocument.write left this cream box blank. */
      .uwfu-v2-preview > div {
        min-height: 280px;
        box-sizing: border-box;
      }
      .uwfu-body-details { margin: 8px 0 0; }
      .uwfu-body-details summary {
        cursor: pointer; font-size: 12px; color: var(--muted); font-weight: 600;
      }
      .uwfu-override-box {
        margin-top: 10px; padding: 10px; border-radius: 8px;
        border: 1px dashed var(--border); background: var(--input-bg);
        display: none;
      }
      .uwfu-override-box.is-open { display: block; }
      .uwfu-override-box label { display: block; font-size: 11px; margin: 0 0 4px; }
      .uwfu-override-box textarea {
        width: 100%; min-height: 64px; margin-bottom: 8px;
        font-size: var(--text-sm);
      }
      /* Approved staged summary — Preview opens the compose modal. */
      .uwfu-staged {
        border: 1px solid color-mix(in srgb, #16A34A 35%, var(--border));
        border-radius: 10px;
        padding: 16px 18px;
        background: color-mix(in srgb, #16A34A 6%, var(--panel));
      }
      .uwfu-staged h4 { margin: 0 0 4px; font-size: 13px; color: #15803D; }
      .uwfu-staged-meta {
        display: grid; gap: 6px; margin: 12px 0 14px;
        font-size: var(--text-sm);
      }
      .uwfu-staged-meta > div {
        display: grid; grid-template-columns: 5.5rem 1fr; gap: 8px; align-items: baseline;
      }
      .uwfu-staged-meta .k { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
      .uwfu-detail {
        /* Block scroll — do NOT flex-pin a footer. Flex+overflow let the
           Copy/Save/Approve chips sit in the panel while draft/sources
           painted through them on scroll (v2.79.2 collision). */
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius-lg); padding: 16px 18px;
        overflow: auto; max-height: calc(100vh - 260px); min-height: 360px;
      }
      .uwfu-detail > * + * { margin-top: 14px; }
      .uwfu-detail-empty { color: var(--muted); padding: 40px 12px; text-align: center; }
      .uwfu-detail h3 { margin: 0 0 4px; font-size: 1.15rem; }
      .uwfu-standing {
        padding: 10px 12px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: var(--text-sm);
        line-height: 1.45;
        white-space: pre-wrap;
      }
      /* Standing / evidence collapsed by default — engineer audit only
         (Harris: was eating the review viewport; draft is the job). */
      .uwfu-audit {
        border: 1px solid var(--border);
        border-radius: 8px;
        background: color-mix(in srgb, var(--input-bg) 70%, transparent);
        padding: 0;
      }
      .uwfu-audit > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        padding: 10px 14px;
        font-size: 12px;
        font-weight: 650;
        color: var(--muted);
        user-select: none;
      }
      .uwfu-audit > summary::-webkit-details-marker { display: none; }
      .uwfu-audit > summary::before {
        content: "▸";
        display: inline-block;
        margin-right: 6px;
        color: var(--muted);
        transition: transform 0.12s ease;
      }
      .uwfu-audit[open] > summary::before { transform: rotate(90deg); }
      .uwfu-audit > summary .uwfu-audit-sub {
        font-weight: 500;
        font-size: 11px;
        opacity: 0.85;
      }
      .uwfu-audit-body {
        padding: 0 14px 14px;
        border-top: 1px solid var(--border);
        display: grid;
        gap: 12px;
      }
      .uwfu-audit-toolbar {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; flex-wrap: wrap; padding-top: 12px;
      }
      .uwfu-audit-toolbar h4 {
        margin: 0; font-size: 11px; font-family: var(--font-mono);
        text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
      }
      .uwfu-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        align-items: start;
      }
      .uwfu-draft, .uwfu-sources {
        border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px;
        background: var(--input-bg); min-width: 0;
        /* Contain paint so nested scroll can't leak over siblings */
        position: relative; z-index: 0;
      }
      .uwfu-draft h4, .uwfu-sources h4 {
        margin: 0 0 10px; font-size: 11px; font-family: var(--font-mono);
        text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
      }
      .uwfu-draft label {
        display: block; margin: 0 0 4px;
        font-size: 11px; color: var(--muted);
      }
      .uwfu-draft label + * { margin-bottom: 12px; }
      .uwfu-draft textarea {
        width: 100%; min-height: 340px; resize: vertical;
        border: 1px solid var(--border); border-radius: 6px;
        background: var(--panel); padding: 12px 14px; box-sizing: border-box;
        font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--text);
      }
      .uwfu-draft input[type="text"], .uwfu-draft select {
        width: 100%; box-sizing: border-box; padding: 9px 12px;
        border: 1px solid var(--border); border-radius: 6px;
        background: var(--panel); color: var(--text); font-size: var(--text-sm);
      }
      .uwfu-sources-list {
        display: flex; flex-direction: column; gap: 10px;
        max-height: min(420px, 50vh);
        overflow: auto;
      }
      .uwfu-ev {
        padding: 10px 12px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 8px;
      }
      .uwfu-ev-top {
        display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
        margin-bottom: 6px;
      }
      .uwfu-ev-source {
        font-size: 12px; font-weight: 700; color: var(--text);
      }
      .uwfu-ev-when {
        font-size: 11px; color: var(--muted); font-family: var(--font-mono);
      }
      .uwfu-ev-body {
        margin: 0; font-size: 13px; line-height: 1.45; color: var(--text);
        white-space: pre-wrap; word-break: break-word;
      }
      .uwfu-inbound details {
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--input-bg);
        padding: 8px 12px;
      }
      .uwfu-inbound summary {
        cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted);
      }
      .uwfu-inbound pre {
        margin: 8px 0 0; white-space: pre-wrap; word-break: break-word;
        font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; color: var(--text);
      }
      .uwfu-actions {
        /* Anchored under the draft fields (inside .uwfu-draft) — normal
           document flow only. Never sticky/fixed (that caused the chips
           to float over scrolling sources/standing). */
        position: static;
        display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
        margin: 4px 0 0;
        padding: 12px 0 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        z-index: 0;
      }
      .uwfu-actions .chip {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        z-index: auto !important;
      }
      .uwfu-actions .chip.is-primary {
        background: #FF695F; border-color: #FF695F; color: #fff; font-weight: 700;
      }
      .uwfu-actions .chip.is-secondary { opacity: 0.9; }
      .uwfu-actions-note { margin-left: auto; font-size: 11px; color: var(--muted); }
      .uwfu-teach {
        margin-top: 12px;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--panel);
      }
      .uwfu-teach-head {
        display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
        margin-bottom: 8px;
      }
      .uwfu-teach-head strong { font-size: 13px; }
      .uwfu-teach-head .muted { font-size: 11px; }
      .uwfu-teach textarea {
        width: 100%; min-height: 72px; resize: vertical; box-sizing: border-box;
        margin: 8px 0; padding: 10px 12px;
        border: 1px solid var(--border); border-radius: 6px;
        background: var(--input-bg); color: var(--text);
        font-family: var(--font-sans); font-size: 13px; line-height: 1.4;
      }
      .uwfu-teach-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
      .uwfu-teach-status { font-size: 12px; color: var(--muted); min-height: 1.2em; }

      /* ============ Admin: Feedback view ============ */
      .feedback-view { display: flex; flex-direction: column; gap: 16px; }
      .feedback-hero {
        padding: 18px 22px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
      }
      .feedback-hero h2 { margin: 0 0 6px; font-size: 1.25rem; }
      .feedback-hero p.muted { margin: 0; font-size: var(--text-sm); }
      .feedback-counts {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
      }
      .feedback-count-pill {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        padding: 5px 10px;
        border-radius: 4px;
        letter-spacing: 0.04em;
      }
      .feedback-count-open {
        background: rgba(255, 105, 95, 0.14);
        color: var(--lb-coral-text, #FF695F);
      }
      .feedback-count-resolved {
        background: rgba(22, 163, 74, 0.14);
        color: var(--lb-ok-text, #16A34A);
      }

      .feedback-filter-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .feedback-filter-btn {
        padding: 6px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--text);
        font-family: var(--font-mono);
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: all 0.12s;
      }
      .feedback-filter-btn:hover { border-color: #FF695F; }
      .feedback-filter-btn.is-active {
        background: #FF695F;
        border-color: #FF695F;
        color: white;
      }

      .feedback-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .feedback-item {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 16px 18px;
        position: relative;
      }
      .feedback-item.is-resolved { opacity: 0.7; }
      .feedback-item-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        flex-wrap: wrap;
      }
      .feedback-kind-badge {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 3px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .fk-feature_request {
        background: rgba(125, 211, 252, 0.18);
        color: #0284C7;
      }
      .fk-bug {
        background: rgba(220, 38, 38, 0.14);
        color: #DC2626;
      }
      .fk-general {
        background: rgba(100, 116, 139, 0.18);
        color: var(--muted);
      }
      .feedback-status-badge {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 3px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .fs-open {
        background: rgba(255, 105, 95, 0.14);
        color: var(--lb-coral-text, #E5564D);
      }
      .fs-resolved {
        background: rgba(22, 163, 74, 0.14);
        color: var(--lb-ok-text, #16A34A);
      }
      .feedback-author {
        font-size: var(--text-sm);
        font-weight: 600;
      }
      .feedback-meta {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        margin-left: auto;
      }
      .feedback-body {
        font-size: var(--text-sm);
        line-height: 1.55;
        color: var(--text);
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      .feedback-admin-note {
        margin-top: 12px;
        padding: 10px 12px;
        background: var(--input-bg);
        border-left: 3px solid #16A34A;
        border-radius: 0 4px 4px 0;
        font-size: 13px;
        line-height: 1.5;
      }
      .feedback-admin-note-label {
        display: block;
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--lb-ok-text, #16A34A);
        font-weight: 700;
        margin-bottom: 4px;
      }
      .feedback-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        align-items: center;
      }
      .feedback-action-btn {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text);
        padding: 5px 12px;
        border-radius: 4px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: all 0.12s;
      }
      .feedback-action-btn:hover { border-color: var(--lb-coral-text, #FF695F); color: var(--lb-coral-text, #FF695F); }
      .feedback-action-btn.is-resolve:hover {
        background: rgba(22, 163, 74, 0.10);
        border-color: var(--lb-ok-text, #16A34A);
        color: var(--lb-ok-text, #16A34A);
      }
      .feedback-resolve-inline {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
        padding: 12px;
        background: var(--input-bg);
        border-radius: 6px;
      }
      .feedback-resolve-inline textarea {
        width: 100%;
        min-height: 60px;
        padding: 8px 10px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 4px;
        color: var(--text);
        font-family: inherit;
        font-size: 13px;
        line-height: 1.5;
        resize: vertical;
        box-sizing: border-box;
      }
      .feedback-resolve-inline .row {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
      }

      .feedback-empty {
        padding: 36px 24px;
        text-align: center;
        color: var(--muted);
        font-size: var(--text-sm);
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
      }

      /* ============ Auth splash + not-authed lock ============ */
      /* Until the user is signed in, hide every piece of app chrome so no
         tab labels, data, or layout leaks through. We intentionally use
         display:none (not just visibility:hidden) so the DOM tree itself
         can't be poked at via DevTools to surface anything sensitive. */
      body.not-authed .sidebar,
      body.not-authed .main,
      body.not-authed #sidebarExpandBtn {
        display: none !important;
      }
      /* Splash login screen — fills the viewport with a clean branded
         intro. No translucency: an opaque background hides anything
         behind it. */
      .splash {
        position: fixed; inset: 0;
        display: none;
        align-items: center; justify-content: center;
        padding: 24px;
        background: var(--bg);
        z-index: 1000;
      }
      [data-theme="harper"] .splash {
        background:
          radial-gradient(ellipse at top, rgba(26, 143, 94, 0.06), transparent 60%),
          var(--bg);
      }
      [data-theme="dark"] .splash {
        background:
          radial-gradient(ellipse at top, rgba(125, 211, 252, 0.08), transparent 55%),
          var(--bg);
      }
      [data-theme="light"] .splash {
        background:
          radial-gradient(ellipse at top, rgba(2, 132, 199, 0.05), transparent 55%),
          var(--bg);
      }
      .splash.is-visible { display: flex; }
      /* Hint cookie / Google return: hide the login card before /api/me.
         html.lb-hint-authed is set from boot.js (script is above #splash). */
      html.lb-hint-authed #splash.is-visible { display: none !important; }
      .splash-card {
        width: 100%;
        max-width: 440px;
        display: flex;
        flex-direction: column;
        gap: 28px;
        align-items: stretch;
        text-align: left;
      }
      .splash-brand {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        text-align: center;
      }
      .splash-logo {
        height: 38px; width: auto;
        display: block;
      }
      .splash-name {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 2.55rem;
        letter-spacing: -0.02em;
        color: var(--text);
        line-height: 1.1;
        white-space: nowrap;
      }
      [data-theme="harper"] .splash-name {
        font-family: var(--font-harper);
        color: #0a1f3d;
      }
      .splash-tagline {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--muted);
      }
      [data-theme="harper"] .splash-tagline { color: #1a8f5e; }
      /* The global `form` selector sets display:grid + align-items:end, which
         leaks into our splash-form and shoves items to the right edge.
         Override every layout property explicitly so the splash is hermetic. */
      .splash-form {
        width: 100%;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 22px 24px;
        display: flex !important;
        grid-template-columns: none !important;
        flex-direction: column;
        gap: 14px;
        align-items: stretch !important;
        justify-content: flex-start;
        text-align: left;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
      }
      [data-theme="light"] .splash-form { box-shadow: 0 8px 32px rgba(2, 132, 199, 0.08); }
      [data-theme="harper"] .splash-form { box-shadow: 0 8px 32px rgba(26, 143, 94, 0.10); }
      .splash-form-title {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1.05rem;
        letter-spacing: -0.01em;
        color: var(--text);
      }
      [data-theme="harper"] .splash-form-title { font-family: var(--font-harper); }
      .splash-form-sub {
        font-size: var(--text-xs);
        color: var(--muted);
        margin-top: -8px;
      }
      /* Same story as .splash-form — global `label { display: grid }` would
         turn each label into a 1-column grid item with weird behavior. Force
         flex column layout so EMAIL/PASSWORD labels sit above their inputs
         the way you'd expect. */
      .splash-form label {
        display: flex !important;
        grid-template-columns: none !important;
        flex-direction: column;
        gap: 6px;
        font-size: var(--text-xs);
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text);
        text-align: left;
        align-self: stretch;
      }
      .splash-form input {
        width: 100%;
        padding: 11px 14px;
        font-size: var(--text-base);
        background: var(--input-bg);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-family: inherit;
        text-transform: none;
        letter-spacing: normal;
      }
      .splash-form input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--ring);
      }
      .splash-form button[type="submit"] {
        align-self: stretch;
        margin-top: 6px;
        padding: 12px 16px;
        font-size: 0.95rem;
        font-weight: 600;
        background: var(--accent);
        color: #0b1220;
        border: 1px solid var(--accent);
        border-radius: var(--radius);
        cursor: pointer;
      }
      [data-theme="light"] .splash-form button[type="submit"] { color: #ffffff; }
      [data-theme="harper"] .splash-form button[type="submit"] {
        color: #ffffff;
        background: #1a8f5e;
        border-color: #1a8f5e;
        font-family: var(--font-harper);
      }
      .splash-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
      .splash-error {
        color: var(--danger);
        font-size: var(--text-sm);
        display: none;
        text-align: left;
      }
      .splash-error.is-visible { display: block; }
      .splash-auth {
        width: 100%;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 24px 26px 22px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
        text-align: left;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
      }
      [data-theme="light"] .splash-auth { box-shadow: 0 8px 32px rgba(2, 132, 199, 0.08); }
      [data-theme="harper"] .splash-auth {
        box-shadow: 0 8px 32px rgba(26, 143, 94, 0.10);
        border-color: color-mix(in srgb, #1a8f5e 18%, var(--border));
      }
      .splash-auth .splash-form-title { margin: 0; }
      .splash-auth .splash-form-sub { margin: 0; }
      .clerk-sign-in-mount {
        width: 100%;
        min-height: 0;
        display: block;
      }
      .clerk-sign-in-mount.hide { display: none !important; }
      .splash-clerk-btn {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 16px;
        border: 1px solid #d7e3df;
        border-radius: 10px;
        background: #ffffff;
        color: #0a1f3d;
        font: 600 15px/1.2 Inter, system-ui, sans-serif;
        cursor: pointer;
        box-shadow: none;
      }
      .splash-clerk-btn:hover { background: #f7faf8; }
      .splash-clerk-btn:disabled { opacity: 0.6; cursor: not-allowed; }
      .splash-clerk-btn-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
      }
      .splash-password-fields.hide { display: none !important; }
      .splash-password-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--muted);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .splash-password-divider::before,
      .splash-password-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
      }
      .clerk-user-btn { display: flex; align-items: center; }
      .clerk-user-btn.hide { display: none !important; }
      .splash-foot {
        font-size: var(--text-xs);
        color: var(--muted);
        text-align: center;
      }

      /* ============ Savings Calculator ============ */
      .sc-hero {
        padding: 20px 24px;
        margin-bottom: 18px;
      }
      .sc-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 16px;
      }
      @media (max-width: 760px) { .sc-grid { grid-template-columns: 1fr; } }
      .sc-card {
        padding: 18px 20px;
      }
      .sc-card-head {
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border);
      }
      .sc-card-kicker {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.10em;
        color: var(--muted);
      }
      .sc-card-renewal .sc-card-kicker { color: var(--accent); }
      .sc-card-title {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 600;
        letter-spacing: -0.015em;
        margin-top: 2px;
      }
      [data-theme="harper"] .sc-card-title { font-family: var(--font-harper); font-weight: 700; }
      .sc-fields {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .sc-fields label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text);
      }
      .sc-input {
        position: relative;
        display: flex;
        align-items: center;
      }
      .sc-prefix {
        position: absolute;
        left: 12px;
        font-family: var(--font-mono);
        color: var(--muted);
        font-size: var(--text-sm);
        pointer-events: none;
      }
      .sc-input input {
        flex: 1;
        padding: 10px 12px 10px 26px;
        font-family: var(--font-mono);
        font-size: var(--text-base);
        background: var(--input-bg);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .sc-input input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--ring);
      }
      .sc-fee-pill {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        background: rgba(125, 211, 252, 0.10);
        border: 1px solid rgba(125, 211, 252, 0.30);
        border-radius: var(--radius);
        font-size: var(--text-sm);
        color: var(--text);
      }
      [data-theme="harper"] .sc-fee-pill {
        background: rgba(26, 143, 94, 0.10);
        border-color: rgba(26, 143, 94, 0.32);
      }
      .sc-fee-pill-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--accent);
        color: #0b1220;
        font-weight: 700;
        font-size: 13px;
        flex-shrink: 0;
      }
      [data-theme="harper"] .sc-fee-pill-icon { color: #ffffff; background: #1a8f5e; }
      [data-theme="light"] .sc-fee-pill-icon { color: #ffffff; }

      .sc-results {
        padding: 20px 24px;
      }
      .sc-results-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border);
      }
      .sc-results-actions { display: flex; gap: 6px; }
      .sc-results-actions button:not(.chip) {
        padding: 8px 14px;
        font-weight: 600;
        background: var(--accent);
        color: #0b1220;
        border: 1px solid var(--accent);
        border-radius: var(--radius);
        cursor: pointer;
      }
      [data-theme="light"] .sc-results-actions button:not(.chip) { color: #ffffff; }
      [data-theme="harper"] .sc-results-actions button:not(.chip) { color: #ffffff; }
      .sc-row {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 16px;
        padding: 10px 4px;
        align-items: baseline;
      }
      .sc-row-label {
        font-size: var(--text-sm);
        color: var(--text);
      }
      .sc-row-pct {
        font-family: var(--font-mono);
        font-size: var(--text-base);
        font-weight: 600;
        min-width: 110px;
        text-align: right;
      }
      .sc-row-delta {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--muted);
        min-width: 110px;
        text-align: right;
      }
      .sc-dir-up { color: var(--danger); }
      .sc-dir-down { color: var(--lb-ok-text, #34d399); }
      [data-theme="harper"] .sc-dir-down { color: #1a8f5e; }
      [data-theme="light"] .sc-dir-down { color: #067647; }
      .sc-dir-flat { color: var(--muted); }
      .sc-divider {
        height: 1px;
        background: var(--border);
        margin: 10px 0;
      }
      .sc-row-feature {
        padding: 14px 12px;
        background: rgba(125, 211, 252, 0.06);
        border-radius: var(--radius);
        border: 1px solid rgba(125, 211, 252, 0.20);
      }
      [data-theme="harper"] .sc-row-feature {
        background: rgba(26, 143, 94, 0.06);
        border-color: rgba(26, 143, 94, 0.22);
      }
      .sc-row-feature .sc-row-label { font-weight: 600; }
      .sc-row-feature .sc-row-pct { font-size: 1.1rem; }
      .sc-headline {
        margin-top: 14px;
        padding: 14px 16px;
        border-radius: var(--radius);
        background: var(--input-bg);
        border: 1px solid var(--border);
        font-size: var(--text-sm);
        line-height: 1.5;
      }
      .sc-headline-good {
        background: rgba(52, 211, 153, 0.10);
        border-color: rgba(52, 211, 153, 0.30);
      }
      [data-theme="harper"] .sc-headline-good {
        background: rgba(26, 143, 94, 0.10);
        border-color: rgba(26, 143, 94, 0.30);
      }
      .sc-headline-warn {
        background: rgba(251, 113, 133, 0.06);
        border-color: rgba(251, 113, 133, 0.22);
      }

      /* ============ Surplus Lines Tax Calculator ============
         Native in-app page (v26.91+). Replaces the old iframe embed of
         web/tools/surplus-tax.html — everything below is scoped under
         #surplusTaxView and rides the app theme tokens so it adapts to
         dark / light / harper like every other view. */
      #surplusTaxView .slc-hero { padding: 20px 24px; margin-bottom: 18px; }
      #surplusTaxView .slc-grid {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        gap: 14px;
        align-items: start;
        margin-bottom: 16px;
      }
      @media (max-width: 860px) { #surplusTaxView .slc-grid { grid-template-columns: 1fr; } }
      #surplusTaxView .slc-card { padding: 18px 20px; }
      #surplusTaxView .slc-card h3 {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 600;
        margin: 0 0 2px;
      }
      #surplusTaxView .slc-card .slc-hint { color: var(--muted); font-size: var(--text-xs); margin: 0 0 16px; }
      #surplusTaxView .slc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
      #surplusTaxView .slc-field > label,
      #surplusTaxView .slc-lab {
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text);
      }
      #surplusTaxView .slc-lab small { display:block; font-weight: 400; color: var(--muted); font-size: 11px; margin-top: 1px; }
      #surplusTaxView .slc-input { position: relative; display: flex; align-items: center; }
      #surplusTaxView .slc-prefix {
        position: absolute; left: 12px;
        font-family: var(--font-mono); color: var(--muted); font-size: var(--text-sm);
        pointer-events: none;
      }
      #surplusTaxView .slc-input input,
      #surplusTaxView select.slc-sel {
        flex: 1; width: 100%;
        padding: 10px 12px;
        font-family: var(--font-mono);
        font-size: var(--text-base);
        background: var(--input-bg);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      #surplusTaxView .slc-input.has-prefix input { padding-left: 26px; }
      #surplusTaxView select.slc-sel { font-family: var(--font-sans); cursor: pointer; }
      #surplusTaxView .slc-input input:focus,
      #surplusTaxView select.slc-sel:focus {
        outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring);
      }
      #surplusTaxView .slc-toggle {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius);
        background: var(--input-bg); font-size: var(--text-sm); color: var(--text);
      }
      #surplusTaxView .slc-toggle .slc-t-lab small { color: var(--muted); font-size: 11px; }
      #surplusTaxView .slc-switch { position: relative; width: 44px; height: 24px; flex: none; cursor: pointer; }
      #surplusTaxView .slc-switch input { opacity: 0; width: 0; height: 0; }
      #surplusTaxView .slc-slider {
        position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: .15s;
      }
      #surplusTaxView .slc-slider::before {
        content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
        background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3);
      }
      #surplusTaxView .slc-switch input:checked + .slc-slider { background: var(--accent); }
      #surplusTaxView .slc-switch input:checked + .slc-slider::before { transform: translateX(20px); }
      #surplusTaxView .slc-divider {
        display: flex; align-items: center; gap: 10px; margin: 18px 0 14px;
        font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
        color: var(--muted); font-weight: 600;
      }
      #surplusTaxView .slc-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
      #surplusTaxView .slc-row2 { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
      #surplusTaxView .slc-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
      #surplusTaxView .slc-seg button {
        border: 0; background: transparent; padding: 10px 13px; cursor: pointer;
        font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted);
      }
      #surplusTaxView .slc-seg button.on { background: var(--accent); color: #0b1220; font-weight: 600; }
      [data-theme="light"] #surplusTaxView .slc-seg button.on,
      [data-theme="harper"] #surplusTaxView .slc-seg button.on { color: #fff; }

      /* Additional-charge repeater rows */
      #surplusTaxView .slc-charges { display: flex; flex-direction: column; gap: 8px; }
      #surplusTaxView .slc-charge {
        display: grid;
        grid-template-columns: 1.3fr 0.9fr auto 1.2fr auto;
        gap: 6px; align-items: center;
      }
      @media (max-width: 600px) { #surplusTaxView .slc-charge { grid-template-columns: 1fr 1fr; } }
      #surplusTaxView .slc-charge input,
      #surplusTaxView .slc-charge select {
        width: 100%; padding: 8px 9px; font-size: var(--text-sm);
        background: var(--input-bg); color: var(--text);
        border: 1px solid var(--border); border-radius: 8px;
        font-family: var(--font-mono);
      }
      #surplusTaxView .slc-charge select { font-family: var(--font-sans); cursor: pointer; }
      #surplusTaxView .slc-charge input:focus,
      #surplusTaxView .slc-charge select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
      #surplusTaxView .slc-charge .slc-x {
        border: 1px solid var(--border); background: var(--input-bg); color: var(--danger);
        border-radius: 8px; width: 30px; height: 32px; cursor: pointer; font-size: 15px; line-height: 1;
      }
      #surplusTaxView .slc-charge .slc-x:hover { border-color: var(--danger); }
      #surplusTaxView .slc-addbtn {
        margin-top: 4px; padding: 8px 12px; cursor: pointer;
        background: transparent; color: var(--accent); border: 1px dashed var(--border);
        border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600;
      }
      #surplusTaxView .slc-addbtn:hover { border-color: var(--accent); }

      /* Results */
      #surplusTaxView .slc-results { padding: 20px 24px; }
      #surplusTaxView .slc-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
      @media (max-width: 480px) { #surplusTaxView .slc-hero-stats { grid-template-columns: 1fr; } }
      #surplusTaxView .slc-stat {
        padding: 14px 16px; border-radius: var(--radius);
        background: var(--input-bg); border: 1px solid var(--border);
      }
      #surplusTaxView .slc-stat.feature {
        background: rgba(125, 211, 252, 0.08); border-color: rgba(125, 211, 252, 0.28);
      }
      [data-theme="harper"] #surplusTaxView .slc-stat.feature { background: rgba(26,143,94,0.08); border-color: rgba(26,143,94,0.28); }
      #surplusTaxView .slc-stat .slc-stat-lab {
        font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
        color: var(--muted); margin-bottom: 6px;
      }
      #surplusTaxView .slc-stat .slc-stat-num {
        font-family: var(--font-mono); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em;
        font-variant-numeric: tabular-nums;
      }
      #surplusTaxView .slc-ledger { border-top: 1px solid var(--border); margin-top: 4px; }
      #surplusTaxView .slc-lrow {
        display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
        padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: var(--text-sm);
      }
      #surplusTaxView .slc-lrow .slc-l-lab { color: var(--text); }
      #surplusTaxView .slc-lrow .slc-l-lab span { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 1px; }
      #surplusTaxView .slc-lrow .slc-l-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
      #surplusTaxView .slc-lrow.subtotal { font-weight: 600; background: var(--panel); border-radius: 6px; padding: 9px 8px; }
      #surplusTaxView .slc-lrow.total { border-bottom: 2px solid var(--border); font-weight: 700; padding-top: 12px; }
      #surplusTaxView .slc-lrow.total .slc-l-val { font-size: 1.05rem; }
      #surplusTaxView .slc-lrow.minus .slc-l-val { color: var(--accent); }
      #surplusTaxView .slc-lrow.fin { border-bottom: none; font-weight: 700; padding-top: 12px; }
      #surplusTaxView .slc-lrow.muted-row .slc-l-lab,
      #surplusTaxView .slc-lrow.muted-row .slc-l-val { color: var(--muted); }
      #surplusTaxView .slc-resfoot {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        margin-top: 16px; flex-wrap: wrap;
      }
      #surplusTaxView .slc-eff { font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); }

      /* Detail / rate editor */
      #surplusTaxView .slc-detail { padding: 18px 20px; margin-bottom: 16px; }
      #surplusTaxView .slc-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
      #surplusTaxView .slc-st-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
      #surplusTaxView .slc-cite { font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--input-bg); border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px; }
      #surplusTaxView .slc-rategrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 6px; }
      #surplusTaxView .slc-ratebox { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--input-bg); }
      #surplusTaxView .slc-ratebox .slc-rb-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
      #surplusTaxView .slc-ratebox .slc-rb-inwrap { display: flex; align-items: center; gap: 6px; }
      #surplusTaxView .slc-ratebox input { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 8px 9px; font-family: var(--font-mono); font-size: var(--text-base); background: var(--bg); color: var(--text); }
      #surplusTaxView .slc-ratebox input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
      #surplusTaxView .slc-rb-unit { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
      #surplusTaxView .slc-optfees { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
      #surplusTaxView .slc-optfee { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; background: var(--input-bg); }
      #surplusTaxView .slc-optfee input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
      #surplusTaxView .slc-optfee .slc-of-tag { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
      #surplusTaxView .slc-note { margin-top: 14px; font-size: var(--text-sm); color: var(--text); background: var(--panel); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 11px 13px; line-height: 1.5; }
      #surplusTaxView .slc-bf { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--input-bg); }
      #surplusTaxView .slc-bf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
      #surplusTaxView .slc-bf-title { font-weight: 600; font-size: var(--text-base); }
      #surplusTaxView .slc-bf-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap; }
      #surplusTaxView .slc-bf-badge.ok { color: var(--lb-ok-text, #059669); background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.35); }
      [data-theme="dark"] #surplusTaxView .slc-bf-badge.ok { color: #34d399; }
      #surplusTaxView .slc-bf-badge.warn { color: var(--danger); background: rgba(251,113,133,0.10); border-color: rgba(251,113,133,0.35); }
      #surplusTaxView .slc-bf-summary { font-weight: 600; font-size: var(--text-sm); margin: 4px 0 8px; }
      #surplusTaxView .slc-bf-detail { font-size: var(--text-sm); color: var(--muted); line-height: 1.55; }
      #surplusTaxView .slc-bf-cite { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; display: inline-block; }
      #surplusTaxView .slc-disc { font-size: var(--text-xs); color: var(--muted); line-height: 1.55; padding: 16px 20px; }
      #surplusTaxView .slc-disc b { color: var(--text); }
      #surplusTaxView .slc-disc a { color: var(--accent); }
      /* v2.90.0 — light-theme readability (Harris: "really hard to read
         text in the Surplus Lines Tax Calculator"). This view is unusually
         dense with 10px mono micro-labels (stat labels, rate-box labels,
         dividers, ledger metas, hints) that all ride --muted — on the
         light-family papers that token is a ~58–66% alpha ink, which
         washes out at these sizes. Re-scope --muted DARKER inside this
         view only (the token cascades to every descendant, so each
         muted-text rule above picks it up automatically; borders keep the
         global --border), and give the smallest labels one more px. */
      [data-theme="light"] #surplusTaxView { --muted: rgba(2, 6, 23, 0.78); }
      [data-theme="harper"] #surplusTaxView { --muted: rgba(10, 31, 61, 0.78); }
      [data-theme="mono"] #surplusTaxView { --muted: rgba(12, 12, 12, 0.78); }
      /* System default (no data-theme attribute) resolving to light. */
      @media (prefers-color-scheme: light) {
        html:not([data-theme]) #surplusTaxView { --muted: rgba(2, 6, 23, 0.78); }
      }
      #surplusTaxView .slc-stat .slc-stat-lab,
      #surplusTaxView .slc-ratebox .slc-rb-lab,
      #surplusTaxView .slc-divider,
      #surplusTaxView .slc-lrow .slc-l-lab span { font-size: 11px; }

      /* ============ Liquor License directory ============ */
      .liquor-hero {
        padding: 20px 24px;
        margin-bottom: 14px;
      }
      .liquor-search-panel {
        padding: 16px 18px;
        margin-bottom: 14px;
      }
      .liquor-search-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      .liquor-search-row input[type="search"] {
        flex: 1 1 360px;
        min-width: 240px;
        padding: 11px 14px;
        font-size: var(--text-base);
        font-family: inherit;
        background: var(--input-bg);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .liquor-search-row input[type="search"]:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--ring);
      }
      .liquor-state-chips {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
        flex-wrap: wrap;
      }
      .liquor-state-chip {
        padding: 7px 14px !important;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.05em;
      }
      .liquor-status {
        margin-top: 10px;
        font-size: var(--text-xs);
        font-family: var(--font-mono);
      }
      .liquor-results {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .liquor-more {
        display: flex;
        justify-content: center;
        padding: 10px 0 4px;
      }
      .liquor-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 16px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        cursor: pointer;
        transition: border-color 0.08s ease, background 0.08s ease;
      }
      .liquor-row:hover {
        border-color: var(--accent);
        background: rgba(125, 211, 252, 0.04);
      }
      [data-theme="harper"] .liquor-row:hover {
        border-color: rgba(26, 143, 94, 0.45);
        background: rgba(26, 143, 94, 0.05);
      }
      [data-theme="light"] .liquor-row:hover {
        background: rgba(2, 132, 199, 0.04);
      }
      .liquor-row:focus-visible {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--ring);
      }
      .liquor-row-main {
        flex: 1;
        min-width: 0;
      }
      .liquor-row-name {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1rem;
        color: var(--text);
        line-height: 1.3;
        word-break: break-word;
      }
      [data-theme="harper"] .liquor-row-name { font-family: var(--font-harper); font-weight: 700; }
      .liquor-row-addr {
        font-size: var(--text-xs);
        margin-top: 2px;
        word-break: break-word;
      }
      .liquor-row-type {
        font-size: 10px;
        margin-top: 2px;
        font-family: var(--font-mono);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        opacity: 0.85;
      }
      .liquor-row-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        flex-shrink: 0;
      }
      .liquor-row-state-pill {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        padding: 2px 8px;
        border-radius: 3px;
        background: rgba(125, 211, 252, 0.14);
        color: var(--accent);
      }
      .liquor-row-state-pill[data-state="CA"] {
        background: rgba(251, 191, 36, 0.16);
        color: var(--lb-warn-text, #d97706);
      }
      .liquor-row-state-pill[data-state="CO"] {
        background: rgba(96, 165, 250, 0.16);
        color: #2563eb;
      }
      .liquor-row-state-pill[data-state="FL"] {
        background: rgba(244, 114, 182, 0.16);
        color: #db2777;
      }
      .liquor-row-state-pill[data-state="OR"] {
        background: rgba(74, 222, 128, 0.16);
        color: var(--lb-ok-text, #16a34a);
      }
      [data-theme="harper"] .liquor-row-state-pill:not([data-state]) {
        background: rgba(26, 143, 94, 0.14);
        color: #1a8f5e;
      }
      [data-theme="light"] .liquor-row-state-pill:not([data-state]) {
        background: rgba(2, 132, 199, 0.10);
      }
      .liquor-row-license {
        font-family: var(--font-mono);
        font-size: 11px;
      }
      /* Detail modal */
      .liquor-detail-card {
        max-width: 720px !important;
        width: 92vw !important;
      }
      .liquor-detail-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
      }
      .liquor-detail-title {
        font-family: var(--font-display);
        font-size: 1.4rem;
        font-weight: 650;
        letter-spacing: -0.015em;
      }
      [data-theme="harper"] .liquor-detail-title { font-family: var(--font-harper); font-weight: 700; }
      .liquor-detail-grid {
        display: grid;
        grid-template-columns: 130px 1fr;
        gap: 10px 18px;
        font-size: var(--text-sm);
        margin-bottom: 16px;
      }
      .liquor-detail-key {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        padding-top: 1px;
      }
      .liquor-detail-val {
        color: var(--text);
        word-break: break-word;
      }
      .liquor-detail-raw {
        margin-top: 12px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px 14px;
      }
      .liquor-detail-raw summary {
        cursor: pointer;
        font-size: var(--text-xs);
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        padding: 4px 0;
      }
      .liquor-detail-raw summary:hover { color: var(--accent); }
      .liquor-detail-raw pre {
        margin: 8px 0 0;
        padding: 12px;
        background: var(--bg);
        border-radius: 6px;
        font-family: var(--font-mono);
        font-size: 11px;
        line-height: 1.5;
        overflow-x: auto;
        max-height: 360px;
        overflow-y: auto;
        color: var(--text);
      }

      /* ============ Email-drafter call-to-action card ============ */
      .email-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 16px;
        padding: 14px 16px 14px 18px;
        border-radius: var(--radius-lg);
        background: linear-gradient(135deg, rgba(125, 211, 252, 0.10) 0%, rgba(125, 211, 252, 0.04) 100%);
        border: 1px solid rgba(125, 211, 252, 0.30);
      }
      [data-theme="light"] .email-cta {
        background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(2, 132, 199, 0.03) 100%);
        border-color: rgba(2, 132, 199, 0.25);
      }
      [data-theme="harper"] .email-cta {
        background: linear-gradient(135deg, rgba(26, 143, 94, 0.10) 0%, rgba(26, 143, 94, 0.03) 100%);
        border-color: rgba(26, 143, 94, 0.30);
      }
      .email-cta-text {
        flex: 1;
        min-width: 0;
      }
      .email-cta-headline {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text);
      }
      [data-theme="harper"] .email-cta-headline {
        font-family: var(--font-harper);
      }
      .email-cta-sub {
        font-size: var(--text-xs);
        color: var(--muted);
        margin-top: 2px;
      }
      .email-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        font-size: 0.95rem;
        font-weight: 600;
        font-family: var(--font-sans);
        background: var(--accent);
        color: #0b1220;
        border: 1px solid var(--accent);
        border-radius: var(--radius);
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        box-shadow: 0 4px 14px rgba(125, 211, 252, 0.25);
        transition: transform 0.06s ease, box-shadow 0.12s ease;
      }
      [data-theme="light"] .email-cta-btn {
        color: #ffffff;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
      }
      [data-theme="harper"] .email-cta-btn {
        color: #ffffff;
        font-family: var(--font-harper);
        box-shadow: 0 4px 14px rgba(26, 143, 94, 0.30);
      }
      .email-cta-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(125, 211, 252, 0.40);
      }
      [data-theme="harper"] .email-cta-btn:hover { box-shadow: 0 6px 20px rgba(26, 143, 94, 0.45); }
      .email-cta-btn:active { transform: translateY(0); }
      .email-cta-icon { font-size: 1.1rem; }

      /* ============ Email drafter modal ============ */
      .ed-card {
        max-width: 1400px !important;
        width: min(96vw, 1400px) !important;
        max-height: 96vh !important;
        height: 96vh !important;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 !important;
        overflow: hidden;
      }
      .ed-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 22px 26px 18px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .ed-head h2 {
        margin: 0;
        font-size: 1.4rem;
        letter-spacing: -0.02em;
      }
      .ed-sub {
        margin: 5px 0 0;
        font-size: var(--text-sm);
        line-height: 1.45;
      }
      .ed-layout {
        display: grid;
        grid-template-columns: 20% 1fr;
        grid-template-rows: minmax(0, 1fr);
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }
      @media (max-width: 780px) {
        .ed-layout { grid-template-columns: 1fr; grid-template-rows: minmax(180px, 30vh) minmax(0, 1fr); }
      }
      .ed-sidebar {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-right: 1px solid var(--border);
        background: color-mix(in srgb, var(--input-bg) 55%, transparent);
      }
      /* Quote fields + template list share one scroll so a manual pitch
         with many fill-ins is not clipped by overflow:hidden on .ed-layout. */
      .ed-sidebar-body {
        flex: 1;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .ed-sidebar-body .ed-tpl-scroll {
        flex: none;
        min-height: unset;
        overflow: visible;
      }
      .ed-sidebar-head {
        padding: 12px 14px 10px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .ed-sidebar-head input[type="text"] {
        width: 100%;
        font-size: var(--text-sm);
      }
      .ed-kind-pills {
        display: flex;
        gap: 4px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 3px;
      }
      .ed-kind-pill {
        flex: 1;
        border: 0;
        background: transparent;
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 650;
        padding: 5px 8px;
        border-radius: 999px;
        cursor: pointer;
        transition: background 0.12s, color 0.12s;
      }
      .ed-kind-pill:hover:not(.is-active) { color: var(--text); }
      .ed-kind-pill.is-active {
        background: var(--accent);
        color: #fff;
      }
      [data-theme="harper"] .ed-kind-pill.is-active { background: #1a8f5e; }
      [data-theme="light"] .ed-kind-pill.is-active { background: #0284c7; }
      .ed-tpl-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 8px 10px 12px;
      }
      .ed-cat-group { margin-bottom: 6px; }
      .ed-cat-head {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        text-align: left;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--input-bg);
        cursor: pointer;
        font: inherit;
        color: var(--text);
        transition: background 0.12s;
      }
      .ed-cat-head:hover { background: var(--panel); }
      .ed-cat-group.is-collapsed .ed-cat-head { border-radius: 8px; }
      .ed-cat-chevron {
        font-size: 11px;
        color: var(--muted);
        transition: transform 0.15s ease;
        flex-shrink: 0;
      }
      .ed-cat-group.is-collapsed .ed-cat-chevron { transform: rotate(-90deg); }
      .ed-cat-label {
        flex: 1;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-family: var(--font-mono);
      }
      .ed-cat-count {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--muted);
        background: var(--panel);
        padding: 2px 7px;
        border-radius: 8px;
      }
      .ed-cat-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 6px 0 2px 4px;
      }
      .ed-cat-group.is-collapsed .ed-cat-body { display: none; }
      .ed-tpl-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        text-align: left;
        padding: 9px 10px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        cursor: pointer;
        font: inherit;
        color: var(--text);
        transition: background 0.12s, border-color 0.12s;
      }
      .ed-tpl-item:hover {
        background: var(--input-bg);
        border-color: var(--border);
      }
      .ed-tpl-item.is-active {
        background: color-mix(in srgb, var(--accent) 14%, var(--input-bg));
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
      }
      [data-theme="harper"] .ed-tpl-item.is-active {
        background: rgba(26, 143, 94, 0.1);
        border-color: rgba(26, 143, 94, 0.35);
      }
      .ed-tpl-item-kind {
        font-size: 14px;
        line-height: 1.2;
        flex-shrink: 0;
        margin-top: 1px;
      }
      .ed-tpl-item-text { min-width: 0; flex: 1; }
      .ed-tpl-item-title {
        display: block;
        font-size: var(--text-sm);
        font-weight: 650;
        line-height: 1.3;
      }
      .ed-tpl-item-sub {
        display: block;
        font-size: 11px;
        color: var(--muted);
        margin-top: 2px;
        line-height: 1.35;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .ed-tpl-empty {
        padding: 24px 16px;
        text-align: center;
        font-size: var(--text-sm);
        color: var(--muted);
      }
      .ed-compose {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        /* Dark themes get a darkening tint so compose text pops; light
           themes get a LIGHT OPAQUE surface — the universal dark tint
           read as "translucent and dark" murk on light paper
           (Harris, 2026-07-23). */
        background: rgba(0, 0, 0, 0.14);
      }
      [data-theme="light"] .ed-compose { background: #f6faff; }
      [data-theme="harper"] .ed-compose { background: #fbf7ef; }
      [data-theme="mono"] .ed-compose { background: #f7f7f7; }
      /* Compact hint — not a full-height grey void before a template is picked */
      .ed-empty-state {
        flex: 0 0 auto;
        margin: 14px 16px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--muted));
        border-radius: 10px;
        background: color-mix(in srgb, var(--input-bg) 45%, transparent);
        color: var(--muted);
      }
      .ed-empty-icon { font-size: 1.35rem; opacity: 0.55; flex-shrink: 0; }
      .ed-empty-copy { min-width: 0; }
      .ed-empty-title { font-weight: 650; color: var(--text); font-size: var(--text-sm); margin-bottom: 2px; }
      .ed-empty-sub { font-size: 11px; line-height: 1.4; }
      /* Right column = headers (auto) + live preview (1fr). */
      .ed-compose-panel {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding: 16px 20px 18px;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 12px;
      }
      /* Account contact strip in the Compose modal — surfaces the insured's
         email + phone so a producer doesn't have to bounce to Big Brother /
         Gmail to find them. */
      .ed-contact-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 14px;
        padding: 8px 18px;
        margin: 0;
        border-bottom: 1px solid var(--border);
        background: var(--input-bg);
        font-size: var(--text-sm);
      }
      .ed-contact-bar[hidden] { display: none !important; }
      .ed-contact-name { font-weight: 600; }
      .ed-contact-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--muted);
      }
      .ed-contact-item a { color: var(--accent); text-decoration: none; }
      .ed-contact-item a:hover { text-decoration: underline; }
      .ed-contact-copy {
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--muted);
        border-radius: 6px;
        font-size: 11px;
        line-height: 1;
        padding: 3px 6px;
      }
      .ed-contact-copy:hover { color: var(--text); border-color: var(--accent); }
      .ed-contact-missing { color: var(--muted); font-style: italic; }
      .ed-gmail-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
      }
      .ed-gmail-bar[hidden] { display: none !important; }
      .ed-gmail-from { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
      .ed-from-chip.is-active { border-color: var(--accent); color: var(--accent); }
      .ed-auto-cc-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--muted);
        white-space: nowrap;
        user-select: none;
        cursor: pointer;
      }
      .ed-auto-cc-toggle input {
        width: 14px;
        height: 14px;
        accent-color: var(--accent);
        margin: 0;
        cursor: pointer;
      }
      .ed-auto-cc-toggle.is-on { color: var(--accent); font-weight: 600; }
      .ed-headers {
        display: flex;
        flex-direction: column;
        gap: 0;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--panel);
        overflow: hidden;
      }
      .ed-headers[hidden] { display: none !important; }
      .ed-header-row {
        display: grid;
        grid-template-columns: 4.25rem minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 10px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        min-height: 42px;
      }
      .ed-header-row:last-child { border-bottom: none; }
      .ed-header-row[hidden] { display: none !important; }
      .ed-header-row label {
        margin: 0;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        letter-spacing: 0;
        text-transform: none;
        font-family: inherit;
      }
      .ed-header-row input[type="text"] {
        width: 100%;
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 4px 0;
        font-size: var(--text-sm);
        min-width: 0;
      }
      .ed-header-row input[type="text"]:focus {
        outline: none;
      }
      .ed-attach-row {
        align-items: start;
      }
      .ed-attach-main {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
      }
      .ed-attach-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        min-height: 0;
      }
      .ed-attach-list:empty { display: none; }
      .ed-attach-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        padding: 3px 8px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--input-bg);
        font-size: 12px;
        color: var(--text);
      }
      .ed-attach-chip-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 14rem;
      }
      .ed-attach-chip-size { color: var(--muted); flex-shrink: 0; }
      .ed-attach-chip-remove {
        border: none;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        padding: 0 2px;
        font-size: 14px;
        line-height: 1;
      }
      .ed-attach-chip-remove:hover { color: var(--danger); }
      .ed-attach-hint {
        font-size: 11px;
        color: var(--muted);
        line-height: 1.3;
      }
      .ed-attach-error {
        font-size: 11px;
        color: var(--danger);
        line-height: 1.3;
      }
      .ed-attach-btn {
        font-weight: 700 !important;
        border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
        background: color-mix(in srgb, var(--accent) 12%, var(--panel)) !important;
        color: var(--accent) !important;
      }
      .ed-attach-btn:hover {
        border-color: var(--accent) !important;
        background: color-mix(in srgb, var(--accent) 18%, var(--panel)) !important;
      }
      .ed-attach-paperclip {
        height: 36px; padding: 0 12px 0 8px; border-radius: 999px; gap: 6px;
        border: 1px solid var(--border); background: var(--panel); color: var(--muted);
        display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
      }
      .ed-attach-paperclip:hover {
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
        color: var(--accent);
      }
      .ed-attach-paperclip svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
      .ed-header-actions {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
      }
      .ed-header-link {
        border: none;
        background: transparent;
        color: var(--accent);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        padding: 2px 6px;
        border-radius: 6px;
      }
      .ed-header-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
      .ed-header-link.is-on { color: var(--text); }
      .ed-from-row-main {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }
      .ed-from-status {
        font-size: 11px;
        color: var(--muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
      }
      .gmail-actions {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .gmail-send-btn:disabled,
      #edSendGmail:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        filter: grayscale(0.4);
      }
      #edSendGmail {
        background: var(--accent);
        color: #fff;
        border: none;
        padding: 6px 14px;
        border-radius: 5px;
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }
      .gmail-send-btn:not(:disabled),
      .gmail-compose-btn {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
      }
      [data-theme="harper"] .gmail-send-btn:not(:disabled),
      [data-theme="harper"] .gmail-compose-btn,
      [data-theme="harper"] #edSendGmail:not(:disabled) { background: #1a8f5e; }
      [data-theme="light"] .gmail-send-btn:not(:disabled),
      [data-theme="light"] .gmail-compose-btn,
      [data-theme="light"] #edSendGmail:not(:disabled) { background: #0284C7; }
      /* Honor the `hidden` attribute even though the classes below set a
         display — combined attribute+class specificity wins. */
      .ed-compose-main[hidden],
      .ed-text-compose[hidden],
      .ed-empty-state[hidden],
      .ed-compose-panel[hidden],
      .ed-headers[hidden],
      #edSubjectRow[hidden] { display: none !important; }
      #edHeaderTagRow[hidden], #edHeadlineRow[hidden] { display: none !important; }
      .ed-header-tag-suffix {
        font-size: var(--text-xs); color: var(--muted); white-space: nowrap;
        align-self: center;
      }
      /* Per the spec the right side is ONLY headers + preview. */
      #edSelectedTpl,
      #edSavedDrafts { display: none; }
      .ed-headers { grid-row: 1; }
      .ed-compose-main {
        grid-row: 2;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
      .ed-text-compose {
        grid-row: 1 / 3;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
      .ed-text-compose textarea {
        flex: 1;
        min-height: 0;
        resize: none;
      }
      .ed-compose-preview-pane {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: color-mix(in srgb, var(--input-bg) 40%, var(--panel));
      }
      .ed-compose-preview-pane .sb-paper {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #ffffff;
        display: flex;
        flex-direction: column;
      }
      /* Email fills the whole preview pane — no skinny floating sheet.
         Overrides the shared builder's inline max-width:920px + the
         global ".sb-paper > div { margin:0 auto }" centering. */
      #edPreview {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
      /* v2.75.6 — the shell gained a beige page wrapper (root div), so the
         card sits one level deeper. In this pane the wrapper collapses
         (no gutters) and the card fills edge-to-edge for editing. */
      #edPreview > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 !important;
        /* Never let the email shell clip itself here — as a flex item,
           overflow:hidden zeroes its auto min-height, so a long email got
           cut at the pane edge with no scroll (v2.75.3 Manual Pitch bug).
           The pane (#edPreview) owns scrolling. */
        overflow: visible !important;
      }
      #edPreview > div > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
      }
      #edPreview > div > div > div {
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
      }
      /* v2 shell: middle (white) section grows so the beige footer sits at
         the bottom of the pane on short emails, like the v1 fill did. */
      #edPreview > div > div > div:nth-of-type(2) {
        flex: 1;
      }
      .ed-preview-body {
        flex: 1;
        min-height: 420px;
        outline: none;
        cursor: text;
        border-radius: 0 !important;
        /* Larger default type — this is the insured-facing message. */
        font-size: 16px;
        line-height: 1.65;
      }
      .ed-preview-body:focus {
        box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
      }
      .ed-preview-body:empty::before {
        content: "Click to edit your message…";
        color: var(--lb-slate-text, #94a3b8);
      }
      /* Expand the rich HTML email paper (what the insured sees) — not the modal chrome. */
      .ed-preview-label-row {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; padding: 10px 14px;
        border-bottom: 1px solid var(--border); flex-shrink: 0;
      }
      .ed-compose-preview-pane > .ed-preview-label-row > label,
      .ed-compose-preview-pane > label {
        display: block; margin: 0;
        font-size: var(--text-xs); font-weight: 650;
        text-transform: uppercase; letter-spacing: 0.05em;
        font-family: var(--font-mono); color: var(--muted);
      }
      .ed-compose-preview-pane > label { padding: 10px 14px; border-bottom: 1px solid var(--border); }
      .ed-rich-expand-btn {
        flex: 0 0 auto; border: 1px solid var(--border);
        background: var(--panel); color: var(--text);
        font-size: 12px; font-weight: 650;
        padding: 5px 11px; border-radius: 8px; cursor: pointer;
      }
      .ed-rich-expand-btn:hover { background: var(--input-bg); }
      /* v2.97.0 — Word-style formatting toolbar on the message body. Sticky
         so it stays reachable while scrolling a long email, including in the
         expanded overlay. */
      .ed-format-bar {
        display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
        padding: 6px 10px;
        border-bottom: 1px solid var(--border);
        background: var(--panel);
        position: sticky; top: 0; z-index: 6;
      }
      .ed-fmt-btn {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 27px; height: 27px; padding: 0 7px;
        border: 1px solid transparent; border-radius: 6px;
        background: transparent; color: var(--text);
        font-size: 13px; line-height: 1; cursor: pointer;
      }
      .ed-fmt-btn:hover { background: var(--input-bg); }
      .ed-fmt-btn.is-on { background: var(--input-bg); border-color: var(--border); }
      .ed-fmt-btn svg { display: block; }
      .ed-fmt-clear small { font-size: 9px; margin-left: 1px; }
      .ed-fmt-select {
        height: 27px; max-width: 130px;
        border: 1px solid var(--border); border-radius: 6px;
        background: var(--input-bg); color: var(--text);
        font-size: 12px; padding: 0 4px; cursor: pointer;
      }
      .ed-fmt-sep {
        width: 1px; height: 18px; margin: 0 4px;
        background: var(--border); flex: 0 0 auto;
      }
      .ed-compose-preview-pane.is-rich-expanded .ed-format-bar {
        border-radius: 14px 14px 0 0;
      }
      .ed-compose-preview-pane.is-rich-expanded {
        position: fixed;
        inset: 3vh 4vw;
        z-index: 10060;
        border-radius: 14px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
        background: #f4f1ea;
      }
      .ed-compose-preview-pane.is-rich-expanded .sb-paper,
      .ed-compose-preview-pane.is-rich-expanded #edPreview {
        font-size: 17px;
      }
      .ed-compose-preview-pane.is-rich-expanded .ed-preview-body {
        font-size: 18px;
        line-height: 1.7;
        min-height: 60vh;
      }
      .ed-rich-expand-backdrop {
        display: none;
        position: fixed; inset: 0; z-index: 10055;
        background: rgba(12, 18, 28, 0.55);
      }
      .ed-rich-expand-backdrop.is-on { display: block; }
      .ed-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
      .ed-selected-tpl {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 8px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        font-size: var(--text-sm);
      }
      .ed-selected-tpl-kind {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-family: var(--font-mono);
        padding: 2px 8px;
        border-radius: 6px;
        background: var(--panel);
        color: var(--muted);
      }
      .ed-selected-tpl-kind.is-email { color: var(--accent); }
      [data-theme="harper"] .ed-selected-tpl-kind.is-email { color: #1a8f5e; }
      .ed-selected-tpl-kind.is-text { color: #a16207; }
      .ed-field label {
        display: block;
        margin: 0;
        font-size: 11px;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-family: var(--font-mono);
        color: var(--muted);
        margin-bottom: 6px;
      }
      .ed-field input,
      .ed-field textarea {
        width: 100%;
        font-family: inherit;
        font-size: var(--text-base);
      }
      .ed-field textarea { min-height: 120px; resize: vertical; }
      .ed-preview-wrap .sb-paper { max-height: none; }
      .ed-foot {
        padding: 12px 18px;
        border-top: 1px solid var(--border);
        flex-shrink: 0;
        margin: 0;
      }
      .ed-section { margin-top: 0; }

      /* Same pattern in the Guidebook templates section. */
      .gb-template-group + .gb-template-group {
        margin-top: 28px;
        padding-top: 20px;
        border-top: 1px dashed var(--border);
      }
      .gb-template-group-title {
        font-family: var(--font-display);
        font-size: 1rem;
        margin: 0 0 10px;
        color: var(--accent);
      }
      [data-theme="harper"] .gb-template-group-title { color: #1a8f5e; }
      [data-theme="light"] .gb-template-group-title  { color: #075985; }

      /* And in the kanban template picker. */
      .tpl-picker-group {
        display: flex; flex-direction: column; gap: 8px;
      }
      .tpl-picker-group + .tpl-picker-group {
        margin-top: 6px;
        padding-top: 10px;
        border-top: 1px dashed var(--border);
      }
      .tpl-picker-group-label {
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--muted);
        font-weight: 700;
        margin-bottom: 2px;
      }
      .ed-saved-list {
        max-height: 200px;
        overflow-y: auto;
        padding: 8px 10px;
        background: var(--input-bg);
        border-radius: 8px;
        border: 1px solid var(--border);
      }
      .ed-saved-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 8px;
        align-items: start;
        border-bottom: 1px solid var(--border);
      }
      .ed-saved-row:last-child { border-bottom: none; }
      .ed-saved-info {
        cursor: pointer;
        min-width: 0;
      }
      .ed-saved-info:hover { opacity: 0.8; }
      .ed-saved-actions {
        display: flex; gap: 4px;
        flex-shrink: 0;
      }
      .ed-saved-actions .chip { padding: 4px 8px; font-size: 11px; }

      .main {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        max-width: none;
        /* A little breathing room — not edge-to-edge, not sparse. */
        padding: 22px clamp(18px, 2.2vw, 36px) 56px;
        box-sizing: border-box;
      }
      /* Pipeline / book views stretch edge-to-edge inside main. */
      #pipelineView,
      #policiesView,
      #analyticsView,
      #todosView,
      #postSalesView,
      #submissionsView {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
      }
      .kanban {
        width: 100%;
      }
      .topbar {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; flex-wrap: wrap;
        margin-bottom: 18px;
        /* Elevated stacking context (Harris, 2026-07-23): the panels
           below use backdrop-filter, which makes them stacking contexts
           that paint OVER later-painted topbar children — the ⌘H/⌘A/Gmail
           hover tip bubbles were sliding behind the pipeline view. Well
           under every modal/overlay (those start at z 220+ fixed). */
        position: relative;
        z-index: 90;
      }
      /* Pro hides the Connected pill; classic shows it. */
      body.layout-v2 #status { display: none !important; }
      .topbar .status-area { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
      .topbar .user-area { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
      /* Settings uses .lb-top-action (v2.78.83); keep .topbar-gear as a
         harmless alias so older selectors still resolve. */
      .topbar-gear.lb-top-action { /* styled by .lb-top-action */ }
      /* Classic: plain name. Pro: name bubble + admin crown. */
      .user-email {
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text);
        max-width: 22ch;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        position: relative;
        padding: 0;
        border-radius: 0;
        border: none;
        background: transparent;
      }
      .user-email.is-admin { overflow: hidden; }
      .user-email.is-admin::before { content: none; }
      body.layout-v2 .user-email {
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--input-bg);
      }
      body.layout-v2 .user-email.is-admin {
        overflow: visible; /* the crown hangs outside the pill */
      }
      body.layout-v2 .user-email.is-admin::before {
        content: "";
        position: absolute;
        top: -9px;
        left: -7px;
        width: 16px;
        height: 16px;
        transform: rotate(-45deg);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5B942' stroke='%23C98A1B' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M3.5 17.5 L4.8 8.8 L9 12.4 L12 6 L15 12.4 L19.2 8.8 L20.5 17.5 Z'/%3E%3Cline x1='4.5' y1='19.5' x2='19.5' y2='19.5' stroke-linecap='round' stroke-width='1.6' stroke='%23C98A1B'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        filter:
          drop-shadow(0 0 3px rgba(250, 204, 21, 0.85))
          drop-shadow(0 0 7px rgba(245, 185, 66, 0.55))
          drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
      }
      /* Admin pose-as banner — deliberately loud so nobody forgets they're
         acting as someone else. */
      .posing-banner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 8px 16px;
        margin-bottom: 12px;
        border-radius: 8px;
        border: 1px solid #d97706;
        background: rgba(217, 119, 6, 0.16);
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: 600;
      }
      .posing-banner .posing-exit-btn {
        border: 1px solid #d97706;
        background: #d97706;
        color: #fff;
        border-radius: 6px;
        padding: 3px 12px;
        font-size: var(--text-xs);
        font-weight: 700;
        cursor: pointer;
      }
      .posing-banner .posing-exit-btn:hover { filter: brightness(1.1); }
      /* Classic SLA — text pill (breach-only). Pro uses the glowing orb. */
      .sla-banner {
        position: relative;
        font-size: var(--text-xs);
        padding: 6px 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: rgba(251, 113, 133, 0.14);
        color: var(--danger);
        border: 1px solid rgba(251, 113, 133, 0.35);
        font-weight: 600;
        font-family: var(--font-sans);
        letter-spacing: 0;
        text-indent: 0;
        line-height: 1.2;
        cursor: pointer;
        width: auto;
        height: auto;
        box-shadow: none;
        animation: none;
        transition: background 0.12s ease, border-color 0.12s ease;
      }
      .sla-banner:hover,
      .sla-banner.is-open {
        transform: none;
        background: rgba(251, 113, 133, 0.2);
        box-shadow: none;
        animation: none;
      }
      .sla-banner.is-clear {
        /* Classic hides clear SLA via .hide in JS; style is inert. */
        background: rgba(148, 163, 184, 0.14);
        color: var(--muted);
        border-color: rgba(148, 163, 184, 0.35);
        box-shadow: none;
        animation: none;
        cursor: default;
      }
      .sla-banner.is-clear:hover,
      .sla-banner.is-clear.is-open {
        transform: none;
        box-shadow: none;
        animation: none;
      }
      .sla-banner.hide { display: none; }
      .sla-banner #slaText {
        pointer-events: none;
        user-select: none;
      }

      /* Pro SLA orb — glowing circle with soft flash. */
      body.layout-v2 .sla-banner {
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #ff6b63 0%, #FF3B30 55%, #c81e1e 100%);
        color: #fff;
        border: 2px solid rgba(255, 255, 255, 0.88);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-indent: 0.04em;
        line-height: 1;
        box-shadow:
          0 0 0 3px rgba(255, 59, 48, 0.22),
          0 0 12px 2px rgba(255, 59, 48, 0.32),
          0 4px 12px rgba(200, 30, 30, 0.3);
        animation: slaFlash 3.8s ease-in-out infinite;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }
      body.layout-v2 .sla-banner:hover,
      body.layout-v2 .sla-banner.is-open {
        transform: scale(1.08);
        box-shadow:
          0 0 0 4px rgba(255, 59, 48, 0.38),
          0 0 26px 8px rgba(255, 59, 48, 0.55),
          0 6px 16px rgba(200, 30, 30, 0.4);
        animation: none;
      }
      body.layout-v2 .sla-banner.is-clear {
        background: radial-gradient(circle at 35% 30%, #b8c0cc 0%, #8b949e 55%, #6e7681 100%);
        color: rgba(255, 255, 255, 0.92);
        border-color: rgba(255, 255, 255, 0.55);
        box-shadow:
          0 0 0 2px rgba(110, 118, 129, 0.22),
          0 2px 8px rgba(0, 0, 0, 0.18);
        animation: none;
        cursor: default;
      }
      body.layout-v2 .sla-banner.is-clear:hover,
      body.layout-v2 .sla-banner.is-clear.is-open {
        transform: scale(1.04);
        box-shadow:
          0 0 0 3px rgba(110, 118, 129, 0.28),
          0 3px 10px rgba(0, 0, 0, 0.22);
        animation: none;
      }
      @keyframes slaFlash {
        0%, 82%, 100% {
          box-shadow:
            0 0 0 3px rgba(255, 59, 48, 0.2),
            0 0 12px 2px rgba(255, 59, 48, 0.3),
            0 4px 12px rgba(200, 30, 30, 0.28);
        }
        88%, 94% {
          box-shadow:
            0 0 0 4px rgba(255, 59, 48, 0.36),
            0 0 22px 6px rgba(255, 59, 48, 0.52),
            0 4px 14px rgba(200, 30, 30, 0.38);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .harry-brain-btn,
        .ammar-brain-btn,
        .sla-banner {
          animation: none !important;
        }
      }

      /* Mobile: collapse sidebar to a top horizontal scroller */
      /* === Responsive sidebar ===
       * Three sizes:
       *   ≥1100px: roomy sidebar @ 208px (layout-v2 @ 200px)
       *   720-1100px: slightly tighter but still readable
       *   <860px: horizontal scroll bar at top (mobile / very narrow)
       */
      @media (max-width: 1100px) {
        .sidebar { width: 196px; padding: 16px 12px 12px; }
        body.layout-v2 .sidebar { width: 180px; padding: 14px 10px 12px; }
        .sidebar-brand .brand-name { font-size: 1.15rem; }
        .sidebar-brand .brand-tagline { font-size: 9px; }
        .sidebar-nav .nav-item { padding: 10px 12px; font-size: 12px; min-height: 36px; }
      }

      @media (max-width: 860px) {
        body { flex-direction: column; }
        .sidebar {
          position: static;
          width: 100%; height: auto;
          flex-direction: row; align-items: center; gap: 8px;
          padding: 12px 14px;
          border-right: 0; border-bottom: 1px solid var(--border);
          overflow-x: auto;
        }
        .sidebar-brand { padding: 0 10px 0 0; flex-shrink: 0; }
        .sidebar-brand .brand-tagline { display: none; }
        .sidebar-section-label { display: none; }
        /* In the horizontal mobile bar the vertical stack would be too tall,
           so lay the module pills back out in a compact row. */
        .module-switcher {
          flex-direction: row;
          margin: 0;
          gap: 3px;
          flex-shrink: 0;
        }
        .module-switcher .module-btn { padding: 7px 10px; font-size: 12px; }
        .module-switcher .module-btn::before { display: none; }
        /* Bulk show/collapse is a vertical-sidebar affordance only. */
        .sidebar-toolbar { display: none; }
        /* The .sidebar-scroll inner wrapper needs to flow horizontally
           too, otherwise its flex-column flips would stack everything
           vertically inside a horizontal sidebar. */
        .sidebar-scroll {
          flex: 1 1 auto;
          flex-direction: row;
          align-items: center;
          gap: 6px;
          overflow-x: auto;
          overflow-y: visible;
          padding: 0; margin: 0;
        }
        .sidebar-nav { flex-direction: row; gap: 8px; flex-wrap: nowrap; padding: 6px 2px 2px; }
        .sidebar-nav .nav-item { white-space: nowrap; padding: 6px 12px; min-height: 28px; }
        .sidebar-nav .nav-count { top: -5px; right: -2px; }
        /* Accordion collapse is a vertical-sidebar affordance only — in the
           horizontal mobile bar the labels are hidden, so force every nav
           group visible regardless of its saved collapsed state. */
        .sidebar-nav.collapsed { display: flex; }
        .section-caret { display: none; }
        /* Admin section in horizontal mode: still hidden for non-admins
           via .hide, but for admins, render the nav inline like every
           other group. The label is hidden via the .sidebar-section-label
           rule above. */
        .admin-only-section.sidebar-nav { flex-shrink: 0; }
        /* Version pill area was margin-top:auto in vertical mode (pinned
           to bottom). In horizontal mode that's meaningless — flatten it
           so the pill sits inline with everything else, on the right. */
        .sidebar-version-area {
          margin-top: 0; margin-left: auto;
          padding: 0 0 0 8px;
          flex-shrink: 0;
        }
        .sidebar-foot {
          margin-top: 0; flex-direction: row; gap: 6px;
          padding-top: 0; padding-left: 10px;
          border-top: 0; border-left: 1px solid var(--border);
          flex-shrink: 0;
        }
        .main { padding: 18px 18px 60px; }
        .user-email { max-width: 14ch; }
      }

      /* Very narrow / phone — even tighter spacing. */
      @media (max-width: 560px) {
        .sidebar { padding: 10px 12px; }
        .sidebar-brand .brand-name { font-size: 1.1rem; }
        .sidebar-nav .nav-item { padding: 5px 9px; font-size: 12px; }
        .topbar { gap: 8px; margin-bottom: 12px; }
        .topbar .user-area { gap: 6px; }
        .user-email { max-width: 10ch; }
      }

      /* The old .wrap reset (kept for safety; no longer used as canvas) */
      .wrap { max-width: none; width: auto; margin: 0; padding: 0; box-sizing: border-box; }
      @media (max-width: 900px) { .wrap { margin: 0; } }

      header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
      }
      h1 {
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        margin: 0;
      }
      .sub {
        font-size: var(--text-sm);
        color: var(--muted);
        margin: 4px 0 0;
        max-width: 42rem;
      }
      .panel {
        border: 1px solid var(--border);
        background: var(--panel);
        border-radius: var(--radius-lg);
        padding: 14px;
        backdrop-filter: blur(10px);
        box-shadow: var(--shadow-sm);
      }
      .panel.hero {
        padding: 16px;
        box-shadow: var(--shadow);
        border-color: rgba(125, 211, 252, 0.22);
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
      }
      [data-theme="light"] .panel.hero {
        border-color: rgba(2, 132, 199, 0.2);
      }
      form {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 10px 12px;
        align-items: end;
      }
      form .span-12 { grid-column: span 12; }
      form .span-8 { grid-column: span 8; }
      form .span-6 { grid-column: span 6; }
      form .span-4 { grid-column: span 4; }
      form .span-3 { grid-column: span 3; }
      form .span-2 { grid-column: span 2; }
      @media (max-width: 900px) {
        form .span-8,
        form .span-6,
        form .span-4,
        form .span-3,
        form .span-2 { grid-column: span 12; }
      }
      label {
        display: grid;
        gap: 6px;
        font-size: var(--text-xs);
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted);
      }
      input,
      select,
      textarea {
        font-family: inherit;
        font-size: var(--text-sm);
        line-height: var(--lh);
        padding: 10px 12px;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        background: var(--input-bg);
        color: var(--text);
        outline: none;
        width: 100%;
        box-sizing: border-box;
      }
      textarea {
        resize: vertical;
        min-height: 4.5rem;
        max-height: 14rem;
      }
      button {
        font-family: inherit;
        font-size: var(--text-sm);
        line-height: var(--lh);
        padding: 10px 14px;
        border-radius: var(--radius);
        border: 1px solid rgba(125, 211, 252, 0.35);
        background: linear-gradient(180deg, rgba(125, 211, 252, 0.22), rgba(125, 211, 252, 0.1));
        color: var(--text);
        cursor: pointer;
        font-weight: 600;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
      }
      button:hover {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--ring), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
      }
      [data-theme="light"] button {
        border-color: rgba(2, 132, 199, 0.35);
        background: linear-gradient(180deg, rgba(2, 132, 199, 0.14), rgba(2, 132, 199, 0.06));
      }
      .row {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        margin: 14px 0 10px;
      }
      .muted {
        color: var(--muted);
        font-size: var(--text-sm);
      }
      .table-wrap {
        margin-top: 4px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: var(--shadow-sm);
        background: rgba(0, 0, 0, 0.08);
      }
      [data-theme="light"] .table-wrap {
        background: rgba(255, 255, 255, 0.45);
      }
      table.table-data {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
      }
      .table-data th,
      .table-data td {
        border-top: 1px solid var(--border);
        padding: 10px 12px;
        font-size: var(--text-sm);
        line-height: var(--lh);
        text-align: left;
        vertical-align: top;
      }
      .table-data th {
        font-size: var(--text-xs);
        font-weight: 650;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        background: rgba(0, 0, 0, 0.12);
      }
      [data-theme="light"] .table-data th {
        background: rgba(15, 23, 42, 0.08);
      }
      .table-data tbody tr:nth-child(even) td {
        background: rgba(255, 255, 255, 0.03);
      }
      [data-theme="light"] .table-data tbody tr:nth-child(even) td {
        background: rgba(15, 23, 42, 0.03);
      }
      .table-data tbody tr:hover td {
        background: rgba(125, 211, 252, 0.08);
      }
      [data-theme="light"] .table-data tbody tr:hover td {
        background: rgba(2, 132, 199, 0.08);
      }
      .table-data td.cell-tight {
        white-space: nowrap;
      }
      .table-data td.cell-wrap {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
      }
      .table-data .col-id { width: 3.25rem; }
      .table-data .col-status { width: 4.5rem; }
      .table-data .col-urgency { width: 3.5rem; }
      .table-data .col-type { width: 6.5rem; }
      .table-data .col-renewal,
      .table-data .col-target { width: 6.75rem; }
      .table-data .col-owner { width: 5.5rem; }
      .table-data .col-actions { width: 4.25rem; text-align: right; }
      .table-data .col-actions .actions { justify-content: flex-end; }
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 5px 12px;
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--text);
        background: rgba(0, 0, 0, 0.15);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
      }
      [data-theme="light"] .pill {
        background: rgba(255, 255, 255, 0.85);
        color: var(--text);
      }
      .type-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: var(--text-xs);
        font-weight: 650;
        letter-spacing: 0.02em;
        border: 1px solid transparent;
      }
      .type-badge.type-renewals {
        background: rgba(125, 211, 252, 0.2);
        border-color: rgba(125, 211, 252, 0.45);
        color: var(--accent);
      }
      .type-badge.type-upsells {
        background: rgba(167, 139, 250, 0.2);
        border-color: rgba(167, 139, 250, 0.45);
        color: var(--lb-violet-text, #c4b5fd);
      }
      [data-theme="light"] .type-badge.type-upsells { color: #6d28d9; }
      .type-badge.type-remarkets {
        background: rgba(52, 211, 153, 0.16);
        border-color: rgba(52, 211, 153, 0.4);
        color: var(--lb-ok-text, #6ee7b7);
      }
      [data-theme="light"] .type-badge.type-remarkets { color: #047857; }
      .p0 { color: var(--danger); }
      .p1 { color: var(--lb-warn-text, #fbbf24); }
      .p2 { color: var(--accent); }
      .p3 { color: var(--muted); }
      .done {
        opacity: 0.55;
        text-decoration: line-through;
      }
      .actions {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
      }
      .actions button {
        background: transparent;
      }
      .actions button.danger {
        border-color: rgba(251, 113, 133, 0.35);
      }
      .actions button.danger:hover {
        border-color: rgba(251, 113, 133, 0.7);
      }
      .filters {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 12px 0 10px;
      }
      .filters .group {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
      }
      .chip {
        font-family: inherit;
        font-size: var(--text-sm);
        line-height: var(--lh);
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: rgba(0, 0, 0, 0.2);
        color: var(--text);
        cursor: pointer;
        font-weight: 600;
      }
      [data-theme="light"] .chip { background: rgba(255, 255, 255, 0.88); }
      /* Harper theme has a cream paper background — a dark translucent
         chip fill renders muddy and the icon glyphs lose contrast. Use
         a near-white fill so the chip reads as a button against the
         cream surface, and stiffen the border so it stays visible. */
      [data-theme="harper"] .chip {
        background: rgba(255, 255, 255, 0.85);
        border-color: rgba(10, 31, 61, 0.18);
      }
      [data-theme="harper"] .chip:hover {
        background: rgba(255, 255, 255, 1);
        border-color: rgba(26, 143, 94, 0.45);
      }
      .chip.active {
        border-color: var(--accent);
        background: rgba(125, 211, 252, 0.22);
        box-shadow: 0 0 0 2px var(--ring);
        color: var(--text);
      }
      /* Hero Refresh — custom mark + soft baby-blue glow (always on). */
      .lb-refresh-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-color: rgba(125, 211, 252, 0.55);
        background: color-mix(in srgb, #7dd3fc 14%, var(--input-bg));
        color: var(--text);
        box-shadow:
          0 0 0 2px rgba(125, 211, 252, 0.28),
          0 0 14px 3px rgba(125, 211, 252, 0.38);
        transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
      }
      .lb-refresh-btn:hover {
        border-color: rgba(125, 211, 252, 0.75);
        box-shadow:
          0 0 0 3px rgba(125, 211, 252, 0.36),
          0 0 18px 5px rgba(125, 211, 252, 0.48);
        transform: translateY(-1px);
      }
      .lb-refresh-btn:active { transform: translateY(0); }
      .lb-refresh-icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        color: var(--lb-sky-text, #38bdf8);
      }
      [data-theme="light"] .lb-refresh-btn,
      [data-theme="harper"] .lb-refresh-btn {
        background: rgba(224, 242, 254, 0.92);
        color: #0c4a6e;
      }
      [data-theme="light"] .lb-refresh-icon,
      [data-theme="harper"] .lb-refresh-icon { color: #075985; }
      /* ======== Universal "on = glow" (Harris, 2026-07-23) ========
         System-wide rule: anything that is ACTIVE / turned ON glows in
         the theme accent — the same language as the Gmail bubble's
         connection glow. One shared token so every future toggle joins
         with a single line. (Declared on :root; var(--accent) resolves
         per-theme because data-theme also lives on the html element.) */
      :root {
        --glow-on:
          0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent),
          0 0 12px 3px color-mix(in srgb, var(--accent) 42%, transparent);
      }
      .chip.is-active,
      .chip.active,
      .pl-group-chip.is-active,
      .ps-stage-chip.is-active,
      .ed-from-chip.is-active,
      .sb-from-chip.is-active,
      .lb-stage-trigger.is-open {
        box-shadow: var(--glow-on);
      }
      /* (Grouped / Select are .lb-switch now — their glow lives on the
         switch track so the whole label doesn't halo.) */
      /* ── Stage mover bubbles (policy modal) ──
         The native <select id="policyStageSelect"> stays in the DOM as
         the single source of truth — save reads it, modal-open writes
         it, the loss-reason toggle listens to it — but it's visually
         replaced by a bubble trigger + pop-up bubble list in the Little
         Bro language (Harris, 2026-07-23: raw browser dropdowns read as
         "default Google"). Each stage carries its own dot color; the
         current stage's bubble glows in that color. */
      #policyStageSelect { display: none !important; }
      .lb-stage-picker { position: relative; display: inline-flex; }
      .lb-stage-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--input-bg);
        background-image: none !important; /* beat global themed button gradients */
        color: var(--text);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
      }
      .lb-stage-trigger:hover { border-color: var(--accent); }
      .lb-stage-caret { font-size: 10px; opacity: 0.65; }
      .lb-stage-dot,
      .lb-stage-opt-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--stage-color, var(--muted));
        box-shadow: 0 0 6px 1px color-mix(in srgb, var(--stage-color, var(--muted)) 55%, transparent);
      }
      .lb-stage-trigger[data-stage="working"], .lb-stage-opt[data-stage="working"] { --stage-color: #3B82F6; }
      .lb-stage-trigger[data-stage="won"], .lb-stage-opt[data-stage="won"] { --stage-color: #22C55E; }
      .lb-stage-trigger[data-stage="lost"], .lb-stage-opt[data-stage="lost"] { --stage-color: #EF4444; }
      .lb-stage-trigger[data-stage="cancelled"], .lb-stage-opt[data-stage="cancelled"] { --stage-color: #F59E0B; }
      .lb-stage-trigger[data-stage="archived_active"], .lb-stage-opt[data-stage="archived_active"] { --stage-color: #14B8A6; }
      .lb-stage-trigger[data-stage="archived"], .lb-stage-opt[data-stage="archived"] { --stage-color: #94A3B8; }
      .lb-stage-pop {
        position: absolute;
        bottom: calc(100% + 10px);
        left: 0;
        z-index: 60;
        display: none;
        flex-direction: column;
        gap: 6px;
        padding: 10px;
        border-radius: 20px;
        background: var(--modal-surface, var(--panel));
        border: 1px solid var(--border);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
        min-width: 220px;
      }
      .lb-stage-pop.is-open { display: flex; }
      .lb-stage-opt {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 13px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--input-bg);
        background-image: none !important;
        color: var(--text);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
        text-align: left;
      }
      .lb-stage-opt:hover {
        border-color: var(--stage-color, var(--accent));
        box-shadow: 0 0 10px 1px color-mix(in srgb, var(--stage-color, var(--accent)) 40%, transparent);
      }
      .lb-stage-opt.is-current {
        border-color: var(--stage-color, var(--accent));
        background: color-mix(in srgb, var(--stage-color, var(--accent)) 18%, var(--input-bg));
        box-shadow:
          0 0 0 2px color-mix(in srgb, var(--stage-color, var(--accent)) 35%, transparent),
          0 0 12px 3px color-mix(in srgb, var(--stage-color, var(--accent)) 42%, transparent);
      }
      [data-theme="light"] .chip.active {
        background: rgba(2, 132, 199, 0.14);
      }
      [data-theme="harper"] .chip.active {
        background: rgba(26, 143, 94, 0.14);
        border-color: rgba(26, 143, 94, 0.55);
        color: #064e3b;
      }
      .selectSlim {
        min-width: 11rem;
      }
      .hide { display: none !important; }
      .tabs-nav {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin: 12px 0 12px;
      }
      .tabs-nav .tab {
        cursor: pointer;
        transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
      }
      .tabs-nav .tab.tab-active {
        border-color: var(--accent) !important;
        background: rgba(125, 211, 252, 0.18);
        box-shadow: 0 0 0 2px var(--ring), var(--shadow-sm);
        color: var(--text);
        font-weight: 650;
      }
      [data-theme="light"] .tabs-nav .tab.tab-active {
        background: rgba(2, 132, 199, 0.12);
      }
      .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 10px;
      }
      .cal-cell {
        min-height: 92px;
        min-width: 0;
      }
      .panel.cal-cell {
        padding: 10px;
      }
      .cal-cell-head {
        font-size: var(--text-xs);
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
      }
      .cal-day-num {
        font-weight: 750;
        font-size: var(--text-sm);
      }
      .form-actions {
        display: flex;
        align-items: end;
      }
      .btn-block {
        width: 100%;
      }
      .modal {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 1.25rem;
        box-sizing: border-box;
      }
      .modal.is-open {
        display: flex;
      }
      /* ======== Unified soft open/close (Harris, 2026-07-23) ========
         Every major surface that opens gets the same soft zoom-in, and
         everything that closes breathes out instead of blinking away.
         Implemented with @starting-style + transition-behavior:
         allow-discrete, so the existing display:none ↔ flex/block class
         toggles animate in pure CSS — zero JS choreography, and browsers
         without support just keep the old instant toggle. Uses the
         standalone `scale` property (never `transform`, which would
         clobber surfaces that position themselves with translate), and
         the open state is `scale: none` so no permanent containing block
         is created for fixed-position descendants. The Layout V2 Hub
         overlay is deliberately NOT in this list — it has its own bubble
         pop choreography. */
      /* Backdrop-carrying overlays (Harris, 2026-07-23): the dark
         tinted backdrop snaps to FULL darkness instantly on open —
         watching the veil and the card fade up together read as
         sloppy. Only the CARD pops (children re-render when the
         overlay's display flips, so @starting-style fires on every
         open). Closing keeps the soft breathe-out: the base state
         below carries the fade transition, and the open state sets
         transition:none so it only applies on the way OUT. */
      .modal, .gb-quiz-modal, .ab-modal, .fb-modal {
        opacity: 0;
        transition:
          opacity 0.16s ease,
          display 0.16s allow-discrete,
          overlay 0.16s allow-discrete;
      }
      .modal.is-open, .gb-quiz-modal.is-open, .ab-modal.is-open, .fb-modal.is-open {
        opacity: 1;
        transition: none; /* instant dark on open; fade only on close */
      }
      .modal .modal-card,
      .ab-modal > .ab-card,
      .ab-modal > .hb-shell,
      .fb-modal .fb-card,
      .gb-quiz-modal .gb-quiz-card {
        transition: opacity 0.16s ease, scale 0.16s ease;
      }
      @starting-style {
        .modal.is-open .modal-card,
        .ab-modal.is-open > .ab-card,
        .ab-modal.is-open > .hb-shell,
        .fb-modal.is-open .fb-card,
        .gb-quiz-modal.is-open .gb-quiz-card {
          opacity: 0;
          scale: 0.96;
        }
      }
      /* Self-surfaced popovers (no backdrop) — the element IS the card,
         so the whole thing keeps the soft zoom in and out. */
      .pl-hover-card, .pl-assignee-popover, .theme-picker-menu, .lb-stage-pop {
        opacity: 0;
        scale: 0.96;
        transition:
          opacity 0.16s ease,
          scale 0.16s ease,
          display 0.16s allow-discrete,
          overlay 0.16s allow-discrete;
      }
      .pl-hover-card.is-open, .pl-assignee-popover.is-open, .lb-stage-pop.is-open,
      .theme-picker:hover .theme-picker-menu, .theme-picker.is-open .theme-picker-menu {
        opacity: 1;
        scale: none;
      }
      @starting-style {
        .pl-hover-card.is-open, .pl-assignee-popover.is-open, .lb-stage-pop.is-open,
        .theme-picker:hover .theme-picker-menu, .theme-picker.is-open .theme-picker-menu {
          opacity: 0;
          scale: 0.96;
        }
      }
      .modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.52);
        backdrop-filter: blur(6px);
      }
      .modal-card {
        position: relative;
        z-index: 1;
        /* Bumped from 34rem → 42rem (v26.53) so the unified user-row
           layout (name + email + admin checkbox + remove) has room to
           breathe without wrapping awkwardly. Still capped by 100vw on
           narrow screens. */
        width: min(100%, 42rem);
        max-height: min(90vh, 40rem);
        overflow: auto;
        box-shadow: var(--shadow);
        /* Solid, theme-aware surface — overrides .panel's translucent
           var(--panel) tint, which read as clear glass over the blurred
           backdrop in light/mono (Harris, 2026-07-23: compose + discard
           dialogs "too translucent, can't see anything"). */
        background: var(--modal-surface, var(--panel));
      }
      .modal-card h2 {
        margin: 0 0 6px;
        font-size: var(--text-base);
        font-weight: 700;
      }
      .modal-card h3 {
        margin: 16px 0 8px;
        font-size: var(--text-sm);
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
      }
      .settings-list {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .settings-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 12px;
        margin-bottom: 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--input-bg);
        font-size: var(--text-sm);
      }
      .settings-list li span {
        overflow-wrap: anywhere;
      }
      .settings-list .btn-icon {
        padding: 6px 10px;
        font-size: var(--text-xs);
        flex-shrink: 0;
      }
      .settings-add-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: end;
        margin-top: 8px;
      }
      .settings-add-row input {
        flex: 1;
        min-width: 12rem;
      }

      /* v3 unified user list: each row is avatar + name/email + role
         toggles (Producer / Admin) + remove button on one line. Apple-ish:
         soft surfaces, pill toggles, subtle hover lift. Collapses
         gracefully on narrow widths. */
      .settings-list-users { display: flex; flex-direction: column; gap: 8px; }
      .settings-list-users .settings-user-row {
        display: flex;
        align-items: center;
        gap: 12px 14px;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--input-bg);
        transition: border-color .15s ease, box-shadow .15s ease;
      }
      .settings-list-users .settings-user-row:hover {
        border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      }
      @media (max-width: 640px) {
        .settings-list-users .settings-user-row {
          flex-wrap: wrap;
        }
        .settings-user-toggles {
          width: 100%;
          padding-left: 52px;
        }
      }
      .settings-user-avatar {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-sm);
        font-weight: 700;
        letter-spacing: 0.5px;
        color: #fff;
        background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8b5cf6));
        text-transform: uppercase;
      }
      .settings-user-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .settings-user-name {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--text);
        overflow-wrap: anywhere;
      }
      .settings-role-tag {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        padding: 3px 8px;
        border-radius: 999px;
        line-height: 1.4;
      }
      .settings-role-tag.is-admin {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
      }
      .settings-role-tag.is-producer {
        color: var(--lb-ok-text, #16a34a);
        background: rgba(34,197,94,0.12);
        border: 1px solid rgba(34,197,94,0.32);
      }
      /* v2.315.0 — Renewals Coordinator toggle (pre-quote intake role).
         Amber so Producer (green) and Coordinator read apart at a glance. */
      .settings-role-tag.is-coordinator {
        color: #b45309;
        background: rgba(245,158,11,0.12);
        border: 1px solid rgba(245,158,11,0.35);
      }
      [data-theme="dark"] .settings-role-tag.is-coordinator {
        color: #fbbf24;
      }
      /* v2.89.0 / v2.92.0 — team lane tags. Non-default lanes show a tag
         next to the name: Post-Sales keeps its purple; every other lane
         (Placements / Engineering / Service / Sales / Special Projects)
         shares a neutral slate so the roster doesn't turn into confetti. */
      .settings-role-tag.is-team {
        color: #64748b;
        background: rgba(100,116,139,0.12);
        border: 1px solid rgba(100,116,139,0.32);
      }
      .settings-role-tag.is-post-sales {
        color: #9333ea;
        background: rgba(168,85,247,0.12);
        border: 1px solid rgba(168,85,247,0.32);
      }
      .settings-team-select {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text);
        background: var(--surface, var(--bg));
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 4px 8px;
        cursor: pointer;
      }
      .settings-team-select:disabled { cursor: default; opacity: 0.7; }
      .settings-toggle-team { cursor: default; }
      .settings-user-email {
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-family: var(--font-mono);
        overflow-wrap: anywhere;
      }
      .settings-user-toggles {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
      }
      /* Global `label { display:grid }` + `input { width:100% }` break
         settings controls — reset inside the gear modal only. */
      .settings-modal-card label.settings-toggle,
      .settings-modal-card label.settings-add-admin {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        text-transform: none;
        letter-spacing: 0;
        width: auto;
        margin: 0;
      }
      .settings-modal-card label.settings-toggle input[type="checkbox"],
      .settings-modal-card label.settings-add-admin input[type="checkbox"] {
        width: 16px;
        height: 16px;
        min-width: 16px;
        padding: 0;
        margin: 0;
        flex-shrink: 0;
        border: none;
        background: transparent;
        box-shadow: none;
      }
      .settings-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        user-select: none;
        padding: 8px 18px;
        min-width: 7.5rem;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--panel);
        transition: border-color .15s ease, color .15s ease, background .15s ease;
        white-space: nowrap;
      }
      .settings-toggle:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
      .settings-toggle:has(input:checked) {
        color: var(--text);
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
        background: color-mix(in srgb, var(--accent) 8%, var(--panel));
      }
      .settings-toggle input[type="checkbox"] { transform: none; accent-color: var(--accent); }
      .settings-afk-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
        margin-top: 4px;
      }
      .settings-afk-label {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text);
      }
      .settings-select {
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text);
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 8px 12px;
        min-width: 11rem;
        cursor: pointer;
      }
      .settings-select:focus-visible {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--ring);
      }
      .settings-user-remove {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--text-muted);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color .15s ease, color .15s ease, background .15s ease;
      }
      .settings-user-remove:hover {
        border-color: rgba(251,113,133,0.5);
        color: var(--danger);
        background: rgba(251,113,133,0.12);
      }

      /* Add-user composite row: full name + email + admin toggle +
         button, one line on wide screens, wraps on narrow. */
      .settings-add-user-row {
        display: grid;
        grid-template-columns: 1fr 1fr auto auto auto;
        gap: 10px;
        align-items: center;
        margin-top: 16px;
        padding: 16px;
        border: 1px dashed var(--border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--panel) 70%, transparent);
      }
      @media (max-width: 720px) {
        .settings-add-user-row {
          grid-template-columns: 1fr 1fr;
        }
        .settings-add-user-row .chip { grid-column: 1 / -1; justify-self: start; }
      }
      .settings-add-user-row input[type="text"],
      .settings-add-user-row input[type="email"] {
        min-width: 0;
        font-size: var(--text-sm);
        padding: 10px 12px;
      }
      .settings-add-admin {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--text-sm);
        color: var(--text);
        cursor: pointer;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 600;
        user-select: none;
        white-space: nowrap;
      }
      .settings-sla-modes {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
      }
      .settings-sla-option {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        width: 100%;
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        cursor: pointer;
        font-size: var(--text-base);
        text-transform: none;
        letter-spacing: 0;
        color: var(--text);
        margin: 0;
        box-sizing: border-box;
      }
      .settings-sla-option:has(input:checked) {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 8%, transparent);
      }
      .settings-modal-card label.settings-sla-option input[type="radio"] {
        width: 18px;
        height: 18px;
        min-width: 18px;
        padding: 0;
        margin: 3px 0 0;
        flex: 0 0 18px;
        border: none;
        background: transparent;
        box-shadow: none;
        accent-color: var(--accent);
      }
      .settings-sla-option-body { flex: 1; min-width: 0; }
      .settings-sla-option-title { font-weight: 650; font-size: var(--text-base); color: var(--text); margin-bottom: 4px; line-height: 1.35; }
      .settings-sla-option-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
      .settings-data-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
      }
      .settings-data-block {
        padding: 18px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--input-bg);
        margin-bottom: 16px;
      }
      .settings-data-block h4 {
        margin: 0 0 8px;
        font-size: var(--text-sm);
        font-weight: 700;
        color: var(--text);
      }
      #settingsError {
        color: var(--danger);
        font-size: var(--text-sm);
        margin-top: 10px;
        display: none;
      }
      #settingsError.is-visible {
        display: block;
      }
      .modal-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-top: 18px;
      }

      /* === New stuff added on top of original === */
      .col-check { width: 2.25rem; }
      .col-check input { transform: translateY(2px); cursor: pointer; }
      .table-data tbody tr.row-clickable { cursor: pointer; }
      .table-data tbody tr.row-selected td { background: rgba(125, 211, 252, 0.16) !important; }
      [data-theme="light"] .table-data tbody tr.row-selected td { background: rgba(2, 132, 199, 0.10) !important; }
      .modal-card.lg { width: min(100%, 48rem); max-height: min(92vh, 48rem); }

      /* Settings gear modal — expanded admin surface (v2.50.51) */
      .settings-modal-card {
        width: min(100%, 56rem);
        max-height: min(92vh, 52rem);
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
      }
      .settings-modal-header {
        flex-shrink: 0;
        padding: 22px 26px 0;
      }
      .settings-modal-header h2 {
        margin: 0 0 8px;
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      .settings-modal-lead {
        margin: 0;
        font-size: var(--text-sm);
        line-height: 1.55;
        color: var(--text-muted);
      }
      .settings-tabs {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        padding: 18px 26px 0;
        flex-shrink: 0;
        border-bottom: 1px solid var(--border);
      }
      .settings-tab {
        padding: 10px 16px;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        background: transparent;
        color: var(--text-muted);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        font-weight: 650;
        letter-spacing: 0.02em;
        cursor: pointer;
        border-radius: 8px 8px 0 0;
        transition: color .15s ease, background .15s ease, border-color .15s ease;
      }
      .settings-tab:hover {
        color: var(--text);
        background: color-mix(in srgb, var(--accent) 6%, transparent);
      }
      .settings-tab.is-active {
        color: var(--text);
        border-bottom-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 10%, transparent);
      }
      .settings-modal-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 20px 26px 8px;
      }
      .settings-tab-panel { display: none; }
      .settings-tab-panel.is-active { display: block; }
      /* Knowledge Bank (admin) — Ammar / Harry KB browser */
      /* Settings → Management roster (v2.308.0) */
      .mgmt-roster { display: flex; flex-direction: column; gap: 12px; }
      .mgmt-lede { font-size: var(--text-sm); }
      .mgmt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
      .mgmt-row {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
        font-size: var(--text-sm);
      }
      .mgmt-badge {
        font-size: var(--text-xs); color: var(--muted);
        border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
      }
      .mgmt-btn {
        font-size: var(--text-xs); padding: 4px 10px; border-radius: 6px;
        border: 1px solid var(--border); background: transparent; color: inherit; cursor: pointer;
      }
      .mgmt-btn:hover { border-color: var(--accent, #888); }
      .mgmt-promote-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
      .mgmt-promote-row select { max-width: 340px; }
      .mgmt-error { color: var(--danger, #c0392b); font-size: var(--text-sm); min-height: 1.2em; }

      .kb-bank { display: flex; flex-direction: column; gap: 14px; min-height: 420px; }
      .kb-bank-subtabs {
        display: flex; gap: 6px; flex-wrap: wrap;
      }
      .kb-bank-subtab {
        border: 1px solid var(--border); background: var(--panel);
        color: var(--text); font-size: 12.5px; font-weight: 650;
        padding: 6px 12px; border-radius: 8px; cursor: pointer;
      }
      .kb-bank-subtab.is-active {
        border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
        background: color-mix(in srgb, var(--accent) 12%, var(--panel));
      }
      .kb-bank-layout {
        display: grid; grid-template-columns: minmax(14rem, 17rem) 1fr;
        gap: 12px; min-height: 380px; align-items: stretch;
      }
      @media (max-width: 720px) {
        .kb-bank-layout { grid-template-columns: 1fr; }
      }
      .kb-bank-list {
        border: 1px solid var(--border); border-radius: 10px;
        background: var(--input-bg); overflow: auto; max-height: 55vh;
        padding: 6px;
      }
      .kb-bank-group-lbl {
        font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
        text-transform: uppercase; color: var(--muted);
        padding: 10px 8px 4px;
      }
      .kb-bank-item {
        display: block; width: 100%; text-align: left;
        border: 0; background: transparent; color: var(--text);
        padding: 8px 10px; border-radius: 8px; cursor: pointer;
        font-size: 12.5px; line-height: 1.35;
      }
      .kb-bank-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
      .kb-bank-item.is-active {
        background: color-mix(in srgb, var(--accent) 14%, var(--panel));
        font-weight: 650;
      }
      .kb-bank-item-meta {
        display: block; font-size: 11px; color: var(--muted); margin-top: 2px;
      }
      .kb-bank-preview {
        border: 1px solid var(--border); border-radius: 10px;
        background: var(--panel); display: flex; flex-direction: column;
        min-height: 380px; max-height: 55vh; overflow: hidden;
      }
      .kb-bank-preview-head {
        padding: 12px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
      }
      .kb-bank-preview-head h4 { margin: 0 0 4px; font-size: 14px; }
      .kb-bank-preview-body {
        flex: 1; min-height: 0; overflow: auto; padding: 14px 16px;
        font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
        white-space: pre-wrap; word-break: break-word;
      }
      .kb-bank-preview-body.kb-md {
        font-family: var(--font-sans); font-size: 13.5px; line-height: 1.6;
      }
      .kb-teach-card {
        border: 1px solid var(--border); border-radius: 10px;
        padding: 12px 14px; margin-bottom: 10px; background: var(--panel);
      }
      .kb-teach-card-top {
        display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
        justify-content: space-between; margin-bottom: 6px;
        font-size: 12px; color: var(--muted);
      }
      .kb-teach-pill {
        display: inline-block; font-size: 10.5px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.04em;
        padding: 2px 7px; border-radius: 999px;
        border: 1px solid var(--border); background: var(--input-bg);
      }
      .kb-teach-pill.is-ammar { color: #1a5f8a; border-color: #b7d4e8; background: #eef6fb; }
      .kb-teach-pill.is-harry { color: #6b3d12; border-color: #e4c7a8; background: #fbf4ec; }
      .kb-teach-text { font-size: 13.5px; line-height: 1.5; margin: 0 0 6px; }
      .kb-teach-query { font-size: 12px; color: var(--muted); margin: 0; }
      .settings-section-title {
        margin: 0 0 10px;
        font-size: var(--text-base);
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.01em;
      }
      .settings-help {
        margin: 0 0 18px;
        font-size: var(--text-sm);
        line-height: 1.6;
        color: var(--text-muted);
      }
      .settings-help code {
        font-size: 0.92em;
      }
      .settings-modal-footer {
        flex-shrink: 0;
        padding: 12px 26px 22px;
        border-top: 1px solid var(--border);
        background: color-mix(in srgb, var(--panel) 92%, var(--bg));
      }
      /* Non-admin: view Settings, no team/pipeline/data mutations (v2.78.46).
         Layout / Pro toggle stays interactive — it's per-browser only. */
      .settings-modal-card.is-readonly #settingsAddUserRow,
      .settings-modal-card.is-readonly .settings-user-toggles,
      .settings-modal-card.is-readonly .settings-user-remove,
      .settings-modal-card.is-readonly #saveSettings,
      .settings-modal-card.is-readonly #backupsPanel,
      .settings-modal-card.is-readonly #poseAsPanel {
        display: none !important;
      }
      .settings-modal-card.is-readonly #followUpSlaModeGroup {
        pointer-events: none;
        opacity: 0.72;
      }
      .settings-modal-card.is-readonly #settingsReadonlyBanner {
        display: block !important;
      }
      .settings-unsaved-confirm,
      .lb-unsaved-confirm,
      .lb-gmail-dialog {
        z-index: 10050;
      }
      /* Stale-tab refresh (v2.152.11 / v2.154.4) — above AFK (12000)
         and brains (10080). Modal can be dismissed; the breathing
         banner then stays until they refresh on their own time. */
      .lb-stale-version {
        z-index: 12100;
      }
      .lb-stale-version-card {
        width: min(100%, 28rem);
        padding: 22px 24px;
      }
      .lb-stale-version-card h2 {
        margin: 0 0 10px;
        font-size: 1.1rem;
      }
      .lb-stale-version-card p {
        margin: 0;
        font-size: var(--text-sm);
        line-height: 1.55;
        color: var(--text-muted);
      }
      .lb-stale-version-card strong {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        color: var(--text);
      }
      /* Own control — do not use .chip. Theme chip rules (Harper/Light
         near-white fill) beat a one-class accent override and made
         "Refresh now" white-on-white (Harris, 2026-08-13). */
      .lb-stale-refresh {
        appearance: none;
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: 700;
        line-height: 1.2;
        padding: 10px 18px;
        min-width: 8.5rem;
        border-radius: 999px;
        cursor: pointer;
        background: #1a8f5e;
        color: #ffffff;
        border: 1px solid #157a50;
      }
      .lb-stale-refresh:hover {
        filter: brightness(1.08);
      }
      [data-theme="dark"] .lb-stale-refresh {
        background: #67b8e3;
        color: #0b1220;
        border-color: #4aa3d4;
      }
      [data-theme="light"] .lb-stale-refresh {
        background: #0284c7;
        color: #ffffff;
        border-color: #0369a1;
      }
      [data-theme="harper"] .lb-stale-refresh {
        background: #1a8f5e;
        color: #ffffff;
        border-color: #157a50;
      }
      [data-theme="mono"] .lb-stale-refresh {
        background: #111111;
        color: #ffffff;
        border-color: #111111;
      }
      .lb-stale-later {
        appearance: none;
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        line-height: 1.2;
        padding: 10px 16px;
        border-radius: 999px;
        cursor: pointer;
        background: transparent;
        color: var(--text);
        border: 1px solid var(--border);
      }
      .lb-stale-later:hover {
        background: var(--input-bg);
      }
      .lb-stale-banner {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0 0 12px;
        padding: 9px 16px;
        border-radius: 10px;
        border: 1px solid #d97706;
        background: rgba(217, 119, 6, 0.22);
        color: var(--text);
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: 800;
        letter-spacing: 0.01em;
        cursor: pointer;
        position: sticky;
        top: 0;
        z-index: 95;
        --lb-stale-glow: rgba(217, 119, 6, 0.42);
        animation: lb-stale-breathe 2.2s ease-in-out infinite;
      }
      .lb-stale-banner:hover {
        filter: brightness(1.06);
      }
      [data-theme="dark"] .lb-stale-banner {
        border-color: #67b8e3;
        background: rgba(103, 184, 227, 0.22);
        --lb-stale-glow: rgba(103, 184, 227, 0.5);
      }
      [data-theme="light"] .lb-stale-banner {
        border-color: #0284c7;
        background: rgba(2, 132, 199, 0.16);
        --lb-stale-glow: rgba(2, 132, 199, 0.42);
      }
      [data-theme="harper"] .lb-stale-banner {
        border-color: #ff6d63;
        background: rgba(255, 109, 99, 0.22);
        --lb-stale-glow: rgba(255, 109, 99, 0.5);
      }
      [data-theme="mono"] .lb-stale-banner {
        border-color: #111111;
        background: rgba(17, 17, 17, 0.12);
        --lb-stale-glow: rgba(17, 17, 17, 0.35);
      }
      @keyframes lb-stale-breathe {
        0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 var(--lb-stale-glow); }
        50% { filter: brightness(1.14); box-shadow: 0 0 16px 1px var(--lb-stale-glow); }
      }
      @media (prefers-reduced-motion: reduce) {
        .lb-stale-banner { animation: none; }
      }
      .settings-unsaved-card,
      .lb-unsaved-card,
      .lb-gmail-dialog-card {
        width: min(100%, 36rem);
        max-width: calc(100vw - 24px);
        max-height: min(88vh, 42rem);
        padding: 22px 24px 18px;
        overflow: auto;
        color: var(--text);
        background: var(--modal-surface, var(--panel));
      }
      .settings-unsaved-card h2,
      .lb-unsaved-card h2 {
        margin: 0 0 10px;
        font-size: 1.15rem;
        font-weight: 800;
        line-height: 1.3;
        color: var(--text);
      }
      .lb-gmail-dialog-card h2 {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 800;
        line-height: 1.3;
        color: var(--text);
      }
      .lb-gmail-dialog-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 12px;
      }
      .lb-gmail-dialog-x {
        appearance: none;
        flex: 0 0 auto;
        width: 2.25rem;
        height: 2.25rem;
        margin: -4px -6px 0 0;
        padding: 0;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        background: var(--input-bg);
        color: var(--text);
        font-size: 1.35rem;
        line-height: 1;
        font-weight: 700;
        cursor: pointer;
      }
      .lb-gmail-dialog-x:hover {
        filter: brightness(1.06);
        border-color: var(--text);
      }
      [data-theme="harper"] .lb-gmail-dialog-x {
        background: #ffffff;
        color: #0a1f3d;
        border-color: #0a1f3d;
      }
      [data-theme="light"] .lb-gmail-dialog-x {
        background: #ffffff;
        color: #0f172a;
        border-color: #0f172a;
      }
      [data-theme="dark"] .lb-gmail-dialog-x {
        background: #1a2740;
        color: #e8eef8;
        border-color: #9bb0cc;
      }
      [data-theme="mono"] .lb-gmail-dialog-x {
        background: #ffffff;
        color: #111111;
        border-color: #111111;
      }
      .settings-unsaved-card p,
      .lb-unsaved-card p,
      .lb-gmail-dialog-lead {
        margin: 0;
        font-size: var(--text-sm);
        line-height: 1.55;
        font-weight: 600;
        color: var(--text);
      }
      .lb-gmail-dialog-meta {
        margin: 14px 0 0;
        display: grid;
        grid-template-columns: 4.5rem 1fr;
        gap: 6px 10px;
        font-size: var(--text-sm);
      }
      .lb-gmail-dialog-meta dt {
        margin: 0;
        color: var(--muted);
        font-weight: 600;
      }
      .lb-gmail-dialog-meta dd {
        margin: 0;
        word-break: break-word;
        color: var(--text);
      }
      .lb-gmail-dialog-detail {
        margin: 14px 0 0;
        padding: 10px 12px;
        max-height: 12rem;
        overflow: auto;
        white-space: pre-wrap;
        word-break: break-word;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px;
        line-height: 1.45;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        color: var(--text);
      }
      .lb-gmail-dialog-input-wrap {
        margin: 14px 0 0;
      }
      .lb-gmail-dialog-input {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        background: var(--input-bg);
        color: var(--text);
        font: inherit;
        font-size: var(--text-sm);
      }
      .lb-gmail-dialog-input:focus {
        outline: none;
        border-color: var(--accent, #3D7EB5);
        box-shadow: 0 0 0 3px rgba(61, 126, 181, 0.22);
      }
      .lb-gmail-dialog-card .modal-actions {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
        position: sticky;
        bottom: 0;
        background: var(--modal-surface, var(--panel));
        z-index: 2;
      }
      /* Dialog actions — never .chip. Harper/Light near-white chips vanish
         on the cream/white card (same class of bug as v2.152.14 Got it). */
      .lb-gmail-btn {
        appearance: none;
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: 700;
        line-height: 1.25;
        padding: 10px 16px;
        min-height: 2.55rem;
        min-width: 7.25rem;
        border-radius: 999px;
        cursor: pointer;
        flex: 1 1 auto;
      }
      .lb-gmail-btn-secondary {
        background: var(--input-bg);
        color: var(--text);
        border: 1.5px solid var(--text);
      }
      .lb-gmail-btn-secondary:hover {
        filter: brightness(1.05);
      }
      [data-theme="harper"] .lb-gmail-btn-secondary {
        background: #ffffff;
        color: #0a1f3d;
        border-color: #0a1f3d;
      }
      [data-theme="light"] .lb-gmail-btn-secondary {
        background: #ffffff;
        color: #0f172a;
        border-color: #0f172a;
      }
      [data-theme="dark"] .lb-gmail-btn-secondary {
        background: #1a2740;
        color: #e8eef8;
        border-color: #9bb0cc;
      }
      [data-theme="mono"] .lb-gmail-btn-secondary {
        background: #ffffff;
        color: #111111;
        border-color: #111111;
      }
      .lb-gmail-btn-primary {
        background: #1a8f5e;
        color: #ffffff;
        border: 1.5px solid #157a50;
      }
      .lb-gmail-btn-primary:hover {
        filter: brightness(1.06);
      }
      [data-theme="light"] .lb-gmail-btn-primary {
        background: #0284c7;
        border-color: #0369a1;
        color: #ffffff;
      }
      [data-theme="harper"] .lb-gmail-btn-primary {
        background: #1a8f5e;
        border-color: #157a50;
        color: #ffffff;
      }
      [data-theme="mono"] .lb-gmail-btn-primary {
        background: #111111;
        border-color: #111111;
        color: #ffffff;
      }
      [data-theme="dark"] .lb-gmail-btn-primary {
        background: #67b8e3;
        color: #0b1220;
        border-color: #4aa3d4;
      }
      /* Got it / danger OK — do not inherit .chip fills. Harper/Light
         near-white chips made a red-outline label easy to miss; solid
         per-theme paint matches .lb-stale-refresh (v2.152.14). */
      #lbGmailDialogOk.danger {
        appearance: none;
        background: #e11d48;
        color: #ffffff;
        border: 1.5px solid #be123c;
        font-weight: 700;
      }
      #lbGmailDialogOk.danger:hover {
        filter: brightness(1.08);
        background: #e11d48;
      }
      [data-theme="dark"] #lbGmailDialogOk.danger {
        background: #fb7185;
        color: #0b1220;
        border-color: #f43f5e;
      }
      [data-theme="light"] #lbGmailDialogOk.danger {
        background: #e11d48;
        color: #ffffff;
        border-color: #be123c;
      }
      [data-theme="harper"] #lbGmailDialogOk.danger {
        background: #c2410c;
        color: #ffffff;
        border-color: #9a3412;
      }
      [data-theme="harper"] #lbGmailDialogOk.danger:hover {
        background: #c2410c;
      }
      [data-theme="mono"] #lbGmailDialogOk.danger {
        background: #111111;
        color: #ffffff;
        border-color: #111111;
      }
      #lbGmailDialogOk.lb-gmail-ok-send:not(:disabled) {
        background: #1a8f5e;
        color: #fff;
        border-color: #1a8f5e;
      }
      [data-theme="light"] #lbGmailDialogOk.lb-gmail-ok-send:not(:disabled) {
        background: #0284C7;
        border-color: #0284C7;
      }
      [data-theme="harper"] #lbGmailDialogOk.lb-gmail-ok-send:not(:disabled) {
        background: #1a8f5e;
        color: #ffffff;
        border-color: #157a50;
      }
      [data-theme="mono"] #lbGmailDialogOk.lb-gmail-ok-send:not(:disabled) {
        background: #111111;
        color: #ffffff;
        border-color: #111111;
      }
      [data-theme="dark"] #lbGmailDialogOk.lb-gmail-ok-send:not(:disabled) {
        background: #67b8e3;
        color: #0b1220;
        border-color: #4aa3d4;
      }
      .settings-unsaved-card .modal-actions,
      .lb-unsaved-card .modal-actions {
        margin-top: 20px;
      }
      .settings-modal-card .settings-list li {
        padding: 12px 16px;
        font-size: var(--text-sm);
        line-height: 1.45;
        margin-bottom: 10px;
      }
      .modal-card .actions-bar {
        display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center;
      }
      .modal-card .actions-bar .spacer { flex: 1; }
      .bulk-bar {
        position: fixed;
        left: 50%; transform: translateX(-50%);
        bottom: 18px;
        display: none;
        align-items: center; gap: 8px;
        padding: 8px 12px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 999px;
        backdrop-filter: blur(10px);
        box-shadow: var(--shadow);
        z-index: 200;
        font-size: var(--text-sm);
      }
      .bulk-bar.is-open { display: flex; }
      .bulk-bar .bulk-count { font-weight: 700; }
      .bulk-bar select, .bulk-bar button {
        padding: 6px 10px;
        font-size: var(--text-sm);
        border-radius: 999px;
      }
      .comments-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
      .comments-list li {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 8px 12px;
        background: var(--input-bg);
      }
      .comments-list .meta {
        font-size: var(--text-xs);
        color: var(--muted);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 4px;
        display: flex; gap: 8px; align-items: baseline;
      }
      .comments-list .meta .author { color: var(--text); }
      .comments-list .body { white-space: pre-wrap; font-size: var(--text-sm); }
      .activity-list { list-style: none; margin: 0; padding: 0; }
      .activity-list li {
        font-size: var(--text-xs);
        color: var(--muted);
        padding: 4px 0;
        display: flex; gap: 8px; align-items: baseline;
      }
      .activity-list .when { color: var(--muted); width: 11rem; flex-shrink: 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
      .activity-list .actor { color: var(--text); font-weight: 600; }
      .activity-list .what code {
        background: rgba(0,0,0,0.18);
        padding: 0 4px; border-radius: 4px;
      }
      [data-theme="light"] .activity-list .what code { background: rgba(15,23,42,0.06); }
      .admins-list-row {
        display: flex; align-items: center; gap: 10px;
        padding: 8px 12px; margin-bottom: 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--input-bg);
        font-size: var(--text-sm);
      }
      .admins-list-row input[type="checkbox"] { transform: scale(1.1); }
      .admins-list-row label { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); cursor: pointer; flex: 1; }

      /* Analytics */
      .analytics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
      @media (max-width: 900px) { .analytics-grid { grid-template-columns: repeat(2, 1fr); } }
      .metric-card .metric-label {
        font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600;
      }
      .metric-card .metric-num {
        font-size: 2.25rem; font-weight: 750; letter-spacing: -0.01em; margin-top: 4px; line-height: 1;
      }
      .metric-card.metric-warn .metric-num { color: var(--danger); }
      .charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
      @media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }
      .charts-grid .panel h3 { margin: 0 0 10px; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
      /* Pipeline analytics rows */
      .analytics-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
      @media (max-width: 900px) { .analytics-row { grid-template-columns: 1fr; } }
      .analytics-card h3 { margin: 0 0 12px; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
      .analytics-card .row-clickable:hover { background: var(--input-bg); }
      /* v2.00 — retention intelligence */
      .analytics-hero {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 14px;
      }
      @media (max-width: 1100px) { .analytics-hero { grid-template-columns: repeat(2, 1fr); } }
      .analytics-hero-card {
        padding: 18px 20px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--panel) 88%, var(--bg));
      }
      .analytics-hero-card.is-highlight {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
        background: color-mix(in srgb, var(--accent) 8%, var(--panel));
      }
      .analytics-hero-label {
        font-size: 10px;
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--muted);
        margin-bottom: 6px;
      }
      .analytics-hero-num {
        font-size: 32px;
        font-weight: 750;
        line-height: 1.1;
        font-family: var(--font-mono);
      }
      .analytics-hero-sub {
        font-size: var(--text-xs);
        color: var(--muted);
        margin-top: 6px;
        line-height: 1.35;
      }
      .analytics-banner {
        padding: 10px 14px;
        border-radius: 8px;
        margin-bottom: 14px;
        font-size: var(--text-xs);
        line-height: 1.45;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--warn, #f59e0b) 12%, var(--panel));
      }
      .analytics-banner.is-ok {
        background: color-mix(in srgb, #34d399 10%, var(--panel));
        border-color: color-mix(in srgb, #34d399 35%, var(--border));
      }
      .loss-reason-row {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      }
      .loss-reason-row:last-child { border-bottom: none; }
      .loss-reason-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
      .loss-reason-label span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .loss-reason-tag {
        font-size: 9px;
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 2px 6px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--muted) 15%, transparent);
        color: var(--muted);
        flex-shrink: 0;
      }
      .loss-reason-tag.is-excluded { background: color-mix(in srgb, #94a3b8 20%, transparent); }
      .analytics-month-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
      }
      .analytics-month-table th,
      .analytics-month-table td {
        padding: 8px 10px;
        text-align: left;
        border-bottom: 1px solid var(--border);
      }
      .analytics-month-table th {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        font-weight: 650;
      }
      .analytics-month-table td.num { font-family: var(--font-mono); text-align: right; }
      .analytics-span-full { grid-column: 1 / -1; }
      .bar-row { display: grid; grid-template-columns: 7rem 1fr 4rem; gap: 8px; align-items: center; margin: 4px 0; font-size: var(--text-sm); }
      .bar-track { background: rgba(0,0,0,0.18); border-radius: 6px; height: 14px; overflow: hidden; }
      [data-theme="light"] .bar-track { background: rgba(15,23,42,0.08); }
      .bar-fill { background: var(--accent); height: 100%; }
      .bar-fill.bar-done { background: rgba(52, 211, 153, 0.7); }
      .bar-val { text-align: right; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--text-xs); color: var(--muted); }
      .through-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 90px; }
      .through-bar { background: var(--accent); border-radius: 4px 4px 0 0; position: relative; min-height: 4px; }
      .through-bar .v { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-family: ui-monospace, monospace; font-size: var(--text-xs); color: var(--muted); }
      .through-labels { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 4px; }
      .through-labels span { text-align: center; font-family: ui-monospace, monospace; font-size: var(--text-xs); color: var(--muted); }

      /* Calendar polish: clickable cells, inline urgency pill on each item */
      .cal-cell-clickable { cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease; }
      .cal-cell-clickable:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring), var(--shadow-sm); }
      .cal-cell-clickable:active { transform: translateY(1px); }
      .cal-cell-today {
        border-color: var(--accent);
        box-shadow: 0 0 0 1px var(--ring) inset;
      }
      .cal-event {
        display: flex; align-items: center; gap: 6px;
        margin-top: 6px;
        padding: 4px 6px;
        font-size: var(--text-xs);
        line-height: 1.3;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.18);
        border: 1px solid var(--border);
        cursor: pointer;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        min-width: 0;
      }
      .cal-event > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
      .cal-event .cal-acct { flex: 1 1 auto; min-width: 0; }
      [data-theme="light"] .cal-event { background: rgba(255, 255, 255, 0.7); }
      .cal-event:hover { border-color: var(--accent); }
      .cal-event.breach { background: rgba(251, 113, 133, 0.16); border-color: rgba(251, 113, 133, 0.45); }
      [data-theme="light"] .cal-event.breach { background: rgba(225, 29, 72, 0.10); border-color: rgba(225, 29, 72, 0.35); }
      .cal-event .cal-urg {
        font-family: ui-monospace, Menlo, Consolas, monospace;
        font-size: 10px;
        font-weight: 700;
        padding: 1px 5px;
        border-radius: 4px;
        background: rgba(0,0,0,0.22);
        flex-shrink: 0;
      }
      [data-theme="light"] .cal-event .cal-urg { background: rgba(15,23,42,0.08); }
      .cal-event .cal-acct {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .cal-more { margin-top: 6px; font-size: var(--text-xs); }

      /* Day modal — list of items on a clicked day */
      .day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
      .day-list li {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--input-bg);
        cursor: pointer;
        transition: border-color 0.12s ease, box-shadow 0.12s ease;
      }
      .day-list li:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
      .day-list .item-urg {
        font-family: ui-monospace, monospace; font-weight: 700; font-size: var(--text-xs);
        padding: 3px 7px; border-radius: 4px; background: rgba(0,0,0,0.22); flex-shrink: 0;
      }
      [data-theme="light"] .day-list .item-urg { background: rgba(15,23,42,0.08); }
      .day-list .item-body { flex: 1; min-width: 0; }
      .day-list .item-acct { font-weight: 650; font-size: var(--text-sm); }
      .day-list .item-meta {
        font-size: var(--text-xs); color: var(--muted); margin-top: 2px;
        display: flex; flex-wrap: wrap; gap: 6px 12px;
      }
      .day-list .item-notes {
        margin-top: 6px;
        font-size: var(--text-xs);
        color: var(--muted);
        white-space: pre-wrap;
        overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      }

      /* === Pipeline (kanban + cards + policy detail) === */
      #pipelineView {
        min-width: 0;
        max-width: 100%;
      }
      .pipeline-header {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
      }
      .pipeline-toolbar {
        display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
      }
      /* Pipeline home: center the control clusters as one composition. */
      #pipelineView .pipeline-toolbar {
        justify-content: center;
      }
      #pipelineView .pl-toolbar-actions {
        margin-left: 0;
      }
      .pipeline-toolbar .total {
        font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted);
      }
      /* Related controls share a cluster so feature pairs stay in a line. */
      .pl-toolbar-cluster {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        flex-shrink: 0;
      }
      .pl-toolbar-cluster.pl-filter-cluster {
        padding: 6px 8px 6px 12px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 14px;
        gap: 8px;
      }
      .pl-toolbar-cluster-label {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--muted);
        white-space: nowrap;
      }
      .pl-filter-cluster select {
        min-width: 0;
      }
      /* Full-width search — separate row below view toggles so it isn't
         confused with Kanban/List or My/All deals controls. */
      .pipeline-search-bar {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
      }
      /* Search is THE control (Harris, 2026-07-23): pill bubble with a
         bold accent "Search" label + magnifying glass, glowing at rest
         and glowing harder while you type — unmistakably "type here". */
      .pipeline-search-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 13px 20px;
        background: var(--input-bg);
        border: 2px solid color-mix(in srgb, var(--accent) 38%, var(--border));
        border-radius: 999px;
        box-shadow:
          0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent),
          0 0 16px 2px color-mix(in srgb, var(--accent) 22%, transparent);
        transition: box-shadow 0.16s ease, border-color 0.16s ease;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
      }
      [data-theme="harper"] .pipeline-search-wrap {
        border-color: color-mix(in srgb, #1a8f5e 35%, var(--border));
      }
      .pipeline-search-wrap:focus-within {
        border-color: var(--accent);
        box-shadow: var(--glow-on);
      }
      [data-theme="harper"] .pipeline-search-wrap:focus-within {
        border-color: #1a8f5e;
      }
      .pipeline-search-icon {
        flex-shrink: 0;
        width: 21px;
        height: 21px;
        color: var(--accent);
        opacity: 1;
      }
      [data-theme="harper"] .pipeline-search-icon { color: #1a8f5e; }
      .pipeline-search-label {
        flex-shrink: 0;
        font-weight: 800;
        font-size: var(--text-sm);
        letter-spacing: 0.02em;
        color: var(--accent);
        padding-right: 10px;
        border-right: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
      }
      [data-theme="harper"] .pipeline-search-label { color: #1a8f5e; }
      .pipeline-search-wrap input[type="search"] {
        flex: 1;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        border: none;
        background: transparent;
        font-family: var(--font-sans);
        font-size: 1.0625rem;
        font-weight: 500;
        padding: 0;
        margin: 0;
        color: var(--text);
        -webkit-appearance: none;
        appearance: none;
      }
      .pipeline-search-wrap input[type="search"]:focus {
        outline: none;
      }
      .pipeline-search-wrap input[type="search"]::placeholder {
        color: var(--muted);
        font-weight: 450;
      }
      .pipeline-search-hint {
        font-size: 11px;
        padding-left: 2px;
      }

      /* ============ Pipeline view-mode toggle (Kanban / List) ============ */
      /* Apple-esque segmented control — larger, soft track, raised active
         pill. Persists to localStorage as rt_pipeline_view_mode. */
      .pv-toggle {
        display: inline-flex;
        background: color-mix(in srgb, var(--muted) 12%, var(--input-bg));
        border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
        border-radius: 14px;
        padding: 4px;
        gap: 3px;
        flex-shrink: 0;
        box-shadow: inset 0 1px 2px rgba(15, 37, 64, 0.06);
      }
      [data-theme="dark"] .pv-toggle {
        background: rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
      }
      .pv-toggle-btn {
        background: transparent;
        border: none;
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 15px;
        font-weight: 650;
        letter-spacing: -0.01em;
        padding: 11px 22px;
        border-radius: 11px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 44px;
        transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease,
                    transform 0.18s ease;
        line-height: 1.15;
      }
      .pv-toggle-btn:hover:not(.is-active) {
        color: var(--text);
        background: color-mix(in srgb, var(--text) 5%, transparent);
      }
      .pv-toggle-btn.is-active {
        background: var(--panel);
        color: var(--text);
        box-shadow:
          0 1px 2px rgba(15, 37, 64, 0.08),
          0 4px 12px rgba(15, 37, 64, 0.1),
          0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
        font-weight: 700;
      }
      [data-theme="dark"] .pv-toggle-btn.is-active {
        background: rgba(255, 255, 255, 0.14);
        box-shadow:
          0 1px 3px rgba(0, 0, 0, 0.35),
          0 0 0 1px rgba(255, 255, 255, 0.08);
        color: #fff;
      }
      [data-theme="harper"] .pv-toggle-btn.is-active {
        color: #0a1f3d;
        background: #fff;
        box-shadow:
          0 1px 2px rgba(10, 31, 61, 0.08),
          0 4px 14px rgba(10, 31, 61, 0.1),
          0 0 0 1px rgba(26, 143, 94, 0.22);
      }
      [data-theme="light"] .pv-toggle-btn.is-active {
        color: #0f172a;
        background: #fff;
        box-shadow:
          0 1px 2px rgba(15, 23, 42, 0.06),
          0 4px 14px rgba(2, 132, 199, 0.12),
          0 0 0 1px rgba(2, 132, 199, 0.18);
      }
      .pv-toggle-btn svg {
        width: 18px; height: 18px;
        stroke-width: 2.1;
        flex-shrink: 0;
        opacity: 0.85;
      }
      .pv-toggle-btn.is-active svg { opacity: 1; }

      /* Pipeline — My deals / All deals scope (prominent; easy to spot) */
      .pl-deals-scope {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        padding: 5px 8px 5px 12px;
        background: color-mix(in srgb, var(--accent) 10%, var(--input-bg));
        border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
      }
      [data-theme="harper"] .pl-deals-scope {
        background: color-mix(in srgb, #1a8f5e 11%, var(--input-bg));
        border-color: color-mix(in srgb, #1a8f5e 42%, var(--border));
      }
      .pl-deals-scope-label {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--muted);
        white-space: nowrap;
      }
      .pl-deals-toggle {
        display: inline-flex;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 3px;
        gap: 2px;
      }
      .pl-deals-toggle-btn {
        background: transparent;
        border: none;
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 700;
        padding: 8px 20px;
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
        line-height: 1.2;
      }
      .pl-deals-toggle-btn:hover {
        color: var(--text);
        background: color-mix(in srgb, var(--accent) 8%, transparent);
      }
      .pl-deals-toggle-btn.is-active {
        background: var(--accent);
        color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
      }
      [data-theme="harper"] .pl-deals-toggle-btn.is-active {
        background: #1a8f5e;
        color: #fff;
      }
      [data-theme="light"] .pl-deals-toggle-btn.is-active {
        background: #0284C7;
        color: #fff;
      }
      /* Pipeline producer filter — sits next to the View toggle. */
      .pl-producer-scope select {
        appearance: auto;
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 650;
        color: var(--text);
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 7px 10px;
        cursor: pointer;
        max-width: 200px;
      }
      .pl-producer-scope.is-filtered {
        background: color-mix(in srgb, var(--accent) 20%, var(--input-bg));
        border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
      }
      [data-theme="harper"] .pl-producer-scope.is-filtered {
        background: color-mix(in srgb, #1a8f5e 20%, var(--input-bg));
        border-color: color-mix(in srgb, #1a8f5e 60%, var(--border));
      }

      /* Pipeline — auto renewal include/hide toggle (next to My/All deals) */
      .pl-auto-scope {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        padding: 5px 8px 5px 12px;
        background: color-mix(in srgb, #7c3aed 10%, var(--input-bg));
        border: 1px solid color-mix(in srgb, #7c3aed 32%, var(--border));
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
      }
      .pl-auto-scope-label {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--muted);
        white-space: nowrap;
      }
      .pl-auto-toggle {
        display: inline-flex;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 3px;
        gap: 2px;
      }
      .pl-auto-toggle-btn {
        background: transparent;
        border: none;
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 700;
        padding: 8px 14px;
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.12s ease, color 0.12s ease;
        line-height: 1.2;
      }
      .pl-auto-toggle-btn:hover { color: var(--text); }
      .pl-auto-toggle-btn.is-active {
        background: #7c3aed;
        color: #fff;
        box-shadow: 0 1px 4px rgba(124, 58, 237, 0.35);
      }
      .pcard-auto-tag.is-active,
      .pl-auto-tag-btn.is-active {
        background: color-mix(in srgb, #7c3aed 18%, var(--panel));
        border-color: color-mix(in srgb, #7c3aed 55%, var(--border));
        color: #7c3aed;
        font-weight: 700;
      }
      .pcard-auto-tag.is-inferred,
      .pl-auto-tag-btn.is-inferred {
        border-style: dashed;
        opacity: 0.88;
      }
      .pl-auto-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin-left: 6px;
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        font-family: var(--font-mono);
        letter-spacing: 0.03em;
        background: color-mix(in srgb, #7c3aed 16%, transparent);
        color: #7c3aed;
        vertical-align: middle;
      }
      .pl-auto-badge.is-inferred {
        border: 1px dashed color-mix(in srgb, #7c3aed 45%, var(--border));
        background: transparent;
      }
      /* Red "Overdue" bubble — same shape as the Auto tag, shown when the
         renewal date has passed (mirrors the red Days Out pill). */
      .pl-overdue-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin-left: 6px;
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        font-family: var(--font-mono);
        letter-spacing: 0.03em;
        background: color-mix(in srgb, #dc2626 16%, transparent);
        color: #dc2626;
        vertical-align: middle;
      }
      /* Dark theme: purple/red/cyan ink at 16% wash was dark-on-dark in
         List View (Harris, 2026-07-24). Lift the fill + use pastel ink so
         Auto / Overdue / Commit stay glanceable on navy panels. */
      [data-theme="dark"] .pl-auto-badge {
        background: rgba(167, 139, 250, 0.28);
        color: #ddd6fe;
        box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.38);
      }
      [data-theme="dark"] .pl-auto-badge.is-inferred {
        border-color: rgba(196, 181, 253, 0.55);
        color: #c4b5fd;
        background: transparent;
        box-shadow: none;
      }
      [data-theme="dark"] .pl-overdue-badge {
        background: rgba(248, 113, 113, 0.26);
        color: #fecaca;
        box-shadow: inset 0 0 0 1px rgba(252, 165, 165, 0.4);
      }
      /* "Needs owner" bubble (v2.314.0) — post-quote account with no
         producer owner. Same shape as Overdue, hollow so the two read
         differently side by side. */
      .pl-needsowner-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin-left: 6px;
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        font-family: var(--font-mono);
        letter-spacing: 0.03em;
        border: 1px dashed color-mix(in srgb, #dc2626 55%, var(--border));
        background: transparent;
        color: #dc2626;
        vertical-align: middle;
        white-space: nowrap;
      }
      [data-theme="dark"] .pl-needsowner-badge {
        border-color: rgba(252, 165, 165, 0.55);
        color: #fecaca;
      }
      [data-theme="dark"] .pl-commit-badge {
        background: rgba(34, 211, 238, 0.22);
        color: #a5f3fc;
        box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.38);
      }
      [data-theme="dark"] .pcard-auto-tag.is-active,
      [data-theme="dark"] .pl-auto-tag-btn.is-active {
        background: rgba(167, 139, 250, 0.24);
        border-color: rgba(196, 181, 253, 0.55);
        color: #ddd6fe;
      }
      /* Company cell layout — the name truncates, the bubbles never do.
         Without this the badges sit inline after the name inside an
         ellipsized cell, so a long company name pushed them past the clip
         and they vanished (the "Auto tag disappears" bug). */
      .pl-primary-cell {
        display: flex;
        align-items: center;
        min-width: 0;
      }
      .pl-primary-cell .pl-company-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
      }
      .pl-primary-cell .pl-auto-badge,
      .pl-primary-cell .pl-overdue-badge,
      .pl-primary-cell .pl-needsowner-badge,
      .pl-primary-cell .pl-commit-badge,
      .pl-primary-cell .pl-temp-emoji,
      .pl-primary-cell .pl-muted { flex-shrink: 0; }
      /* Flex drops the whitespace text nodes that used to separate the
         temperature emoji / inferred-dates marker from the name. */
      .pl-primary-cell .pl-temp-emoji { margin-right: 4px; }
      .pl-primary-cell .pl-muted { margin-left: 4px; }
      /* Committed-pay-date badge — shows on a row/card in any bucket (incl.
         Past Due) so a committed payment is always visible at a glance. */
      .pl-commit-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin-left: 6px;
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        font-family: var(--font-mono);
        letter-spacing: 0.03em;
        background: color-mix(in srgb, #0891b2 18%, transparent);
        color: #0891b2;
        vertical-align: middle;
        white-space: nowrap;
      }
      /* Follow-up flag badge (v2.104.0) — same pill family as the commit
         badge; amber while parked, red-tinted once the wait is over. */
      .pl-flag-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin-left: 6px;
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        font-family: var(--font-mono);
        letter-spacing: 0.03em;
        background: color-mix(in srgb, #d97706 16%, transparent);
        color: #b45309;
        vertical-align: middle;
        white-space: nowrap;
      }
      .pl-flag-badge.pl-flag-due {
        background: color-mix(in srgb, #dc2626 16%, transparent);
        color: #dc2626;
      }
      [data-theme="dark"] .pl-flag-badge {
        background: rgba(217, 119, 6, 0.22);
        color: #fcd34d;
        box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.35);
      }
      [data-theme="dark"] .pl-flag-badge.pl-flag-due {
        background: rgba(220, 38, 38, 0.24);
        color: #fca5a5;
        box-shadow: inset 0 0 0 1px rgba(252, 165, 165, 0.35);
      }
      .pl-primary-cell .pl-flag-badge { flex-shrink: 0; }
      .pcard .acct .pl-flag-badge { flex-shrink: 0; }
      .pl-hover-auto-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .pl-auto-tag-btn {
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--panel);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
      }

      /* ============ Airtable-style List view ============ */
      /* The list view shows the same data as the kanban but in a
         compact tabular layout. Style aims for Airtable's specific
         visual language: thin borders, sticky header row, frozen
         primary column (Company), small field-type glyphs in
         headers, colored "select" pills for categorical fields. */
      .pl-wrap {
        position: relative;
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow: auto;
        background: var(--panel);
        max-height: calc(100vh - 180px);
        /* Stop Grouped mode from flashing a scrollbar and shoving columns. */
        scrollbar-gutter: stable;
      }
      .pl-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 14.5px;
        font-family: var(--font-sans);
        background: var(--panel);
      }
      .pl-table thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--input-bg);
        color: var(--muted);
        font-family: var(--font-mono);
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 11px 14px;
        border-bottom: 2px solid var(--border);
        border-right: 1px solid var(--border);
        text-align: left;
        white-space: nowrap;
        user-select: none;
      }
      .pl-table thead th:last-child { border-right: none; }
      .pl-table thead th.pl-sortable { cursor: pointer; transition: background 0.12s; }
      .pl-table thead th.pl-sortable:hover { background: var(--border); color: var(--text); }
      .pl-table thead th.pl-sorted { color: var(--accent); }
      .pl-th-inner {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .pl-th-icon {
        opacity: 0.5;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        display: inline-block;
        min-width: 9px;
        text-align: center;
      }
      .pl-th-sort {
        font-size: 9px;
        opacity: 0.7;
        line-height: 1;
      }

      .pl-table tbody td {
        padding: 11px 14px;
        border-bottom: 1px solid var(--border);
        border-right: 1px solid var(--border);
        vertical-align: middle;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 300px;
      }
      .pl-table tbody td:last-child { border-right: none; }
      .pl-table tbody tr {
        cursor: pointer;
        transition: background 0.10s ease;
      }
      .pl-table tbody tr:hover td { background: var(--input-bg); }
      .pl-table tbody tr.pl-row-overdue .pl-col-primary {
        border-left: 3px solid #DC2626;
        padding-left: 9px;
      }
      .pl-table tbody tr.pl-row-touched .pl-col-primary {
        position: sticky;  /* preserve sticky positioning */
        left: 92px;  /* matches the slimmed Assigned column width */
      }
      .pl-table tbody tr.pl-row-touched .pl-col-primary::after {
        content: "";
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 6px; height: 6px;
        background: #16A34A;
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--panel);
      }

      /* Primary field (Company Name) — slightly bolder, second sticky
         column. Pinned just to the right of the Assigned column so
         both are always visible during horizontal scroll. */
      .pl-table .pl-col-primary {
        font-weight: 600;
        position: sticky;
        left: 92px;  /* matches the slimmed Assigned column width */
        background: var(--panel);
        z-index: 2;
        box-shadow: 1px 0 0 var(--border);
        min-width: 200px;
        max-width: 280px;
      }
      .pl-table tbody tr:hover .pl-col-primary { background: var(--input-bg); }
      .pl-table thead th.pl-col-primary {
        z-index: 6;
        background: var(--input-bg);
      }

      /* Assigned column — the LEFTMOST sticky column. Width is fixed
         at 92px so the .pl-col-primary `left: 92px` offset stays
         exact. Avatars are always in view regardless of horizontal
         scroll position. */
      .pl-table .pl-col-assignees {
        position: sticky;
        left: 0;
        background: var(--panel);
        z-index: 3;
        box-shadow: 1px 0 0 var(--border);
        /* Slimmed 150px → 116px → 92px per operator feedback (it kept eating
           width that the Notes column needs). Still fits the overlapping 22px
           avatars + the "+ Assign" prompt. NOTE: the Company column's sticky
           `left` offset below is pinned to this exact width — keep them in
           lockstep. */
        width: 92px;
        min-width: 92px;
        max-width: 92px;
      }
      .pl-table tbody tr:hover .pl-col-assignees { background: var(--input-bg); }
      .pl-table thead th.pl-col-assignees {
        z-index: 7;
        background: var(--input-bg);
      }

      /* fb_23: light-theme pipeline list visibility. The frozen left columns
         (Assigned + Company) are sticky and used --panel (only 4% alpha in
         light), so the other columns scrolled THROUGH them and the text bled
         together during horizontal scroll. Pin them to a solid surface that
         matches the list strip so they stay readable and fully mask the
         scrolling cells underneath. */
      [data-theme="light"] .pl-wrap { background: #eef1f5; }
      [data-theme="light"] .pl-table tbody .pl-col-primary,
      [data-theme="light"] .pl-table tbody .pl-col-assignees,
      [data-theme="light"] .ps-pl-wrap .pl-table tbody .ps-pl-col-working { background: #eef1f5; }

      /* Right-aligned numeric columns. */
      .pl-table .pl-col-num {
        font-family: var(--font-mono);
        text-align: right;
      }
      .pl-table .pl-col-money {
        font-family: var(--font-mono);
        text-align: right;
        font-weight: 500;
      }
      .pl-table .pl-col-date {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--muted);
      }
      .pl-table .pl-col-touched {
        text-align: center;
        font-family: var(--font-mono);
      }
      /* Notes column (v26.59 — moved up next to Company). Capped at a
         fixed width so long notes don't push every other column off-
         screen. Overflow truncates with an ellipsis; full text shows
         on hover via the cell's title attribute. */
      .pl-table .pl-col-notes {
        /* Widened per operator feedback so more of each note is visible
           without opening the row (was 180–280px → 300–460px → 360–620px).
           Notes is the column producers read most, so it gets the space
           freed up by slimming Assigned. */
        max-width: 620px;
        min-width: 360px;
      }
      .pl-table .pl-col-notes > span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--muted);
        font-size: 12.5px;
      }
      /* Inline-editable notes cell (Airtable-style click-to-edit). */
      .pl-table td.pl-note-cell {
        cursor: text;
        position: relative;
      }
      .pl-table td.pl-note-cell:hover {
        background: color-mix(in srgb, var(--accent) 7%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--border));
      }
      .pl-table td.pl-note-cell .pl-note-text {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--muted);
        font-size: 12.5px;
        vertical-align: middle;
      }
      .pl-note-empty {
        color: var(--muted);
        opacity: 0.55;
        font-size: 12px;
        font-style: italic;
      }
      .pl-table td.pl-note-cell:hover .pl-note-empty { opacity: 0.85; }
      .pl-note-hist {
        display: inline;
        margin-left: 4px;
        font-size: 9.5px;
        font-weight: 600;
        color: var(--muted);
        opacity: 0.6;
        vertical-align: super;
        white-space: nowrap;
      }
      .pl-table td.pl-note-cell.is-editing {
        padding: 3px 6px;
        box-shadow: inset 0 0 0 2px var(--accent);
        background: var(--panel);
      }
      textarea.pl-note-input {
        width: 100%;
        min-width: 320px;
        box-sizing: border-box;
        resize: vertical;
        font: inherit;
        font-size: 12.5px;
        line-height: 1.4;
        color: var(--text);
        background: var(--panel);
        border: none;
        outline: none;
        padding: 4px 2px;
      }
      /* Archived-note marker in the comment thread (policy modal). */
      .pm-note-badge {
        display: inline-block;
        margin: 0 8px;
        padding: 0 7px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      }

      /* Underwriter-of-record columns (name + clickable email). Capped so a
         long email doesn't blow out the row; full value shows on hover. */
      .pl-table .pl-col-uwname  { max-width: 200px; min-width: 130px; }
      .pl-table .pl-col-uwemail { max-width: 240px; min-width: 150px; }
      .pl-email-link {
        color: var(--accent);
        text-decoration: none;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
      }
      .pl-email-link:hover { text-decoration: underline; }

      .pl-muted { color: var(--muted); }

      /* Airtable-style "select" pills. Each color variant has a
         pastel background + saturated text for contrast. The palette
         covers our categorical fields (carrier, wholesaler, line,
         status, stage) and the days-out urgency. */
      .pl-pill {
        display: inline-block;
        padding: 2px 9px;
        border-radius: 10px;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.45;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }
      .pl-pill-red    { background: #FFD2C7; color: #7A2C1C; }
      .pl-pill-orange { background: #FECC97; color: #7A4419; }
      .pl-pill-yellow { background: #FFE89C; color: #75561C; }
      .pl-pill-green  { background: #BCE2C0; color: #1F5E2C; }
      .pl-pill-teal   { background: #A5E1E1; color: #1C5E5E; }
      .pl-pill-blue   { background: #A6D2F7; color: #1C4E7A; }
      .pl-pill-purple { background: #D5C5F7; color: #4E2C7A; }
      .pl-pill-pink   { background: #F7C5DC; color: #7A1C4E; }
      .pl-pill-gray   { background: #DCDEE3; color: #4C4C4C; }
      /* Avatar-only extras — not in PL_PILL_COLORS (hash length stays 9). */
      .pl-pill-navy   { background: #C7D2F7; color: #1C2C7A; }
      .pl-pill-brown  { background: #E8D0B8; color: #5E3A1C; }

      /* In dark mode the pastels can blow out — slightly desaturate. */
      [data-theme="dark"] .pl-pill-red    { background: #5A2519; color: #FFC7B8; }
      [data-theme="dark"] .pl-pill-orange { background: #5A3A19; color: #FBC58A; }
      [data-theme="dark"] .pl-pill-yellow { background: #5A4A15; color: #FBE594; }
      [data-theme="dark"] .pl-pill-green  { background: #1F4A28; color: #B8E2BD; }
      [data-theme="dark"] .pl-pill-teal   { background: #1F4A4A; color: #A0DEDE; }
      [data-theme="dark"] .pl-pill-blue   { background: #1C3D5A; color: #A0CCF7; }
      [data-theme="dark"] .pl-pill-purple { background: #3D255A; color: #CFBEF7; }
      [data-theme="dark"] .pl-pill-pink   { background: #5A1F40; color: #F7B8D5; }
      [data-theme="dark"] .pl-pill-gray   { background: #3A3D44; color: #C8CBD0; }
      [data-theme="dark"] .pl-pill-navy   { background: #1C255A; color: #C7D2F7; }
      [data-theme="dark"] .pl-pill-brown  { background: #4A3019; color: #E8D0B8; }

      /* Templates action chip inside the row. */
      .pl-actions {
        display: flex;
        gap: 4px;
        justify-content: flex-end;
      }
      .pl-action-btn {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--muted);
        font-family: var(--font-mono);
        font-size: 10.5px;
        padding: 3px 8px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.12s ease;
        line-height: 1.2;
      }
      .pl-action-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--panel);
      }
      .pl-bucket-select {
        max-width: 118px;
        font-family: var(--font-mono);
        font-size: 10.5px;
        padding: 3px 6px;
        border-radius: 4px;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text);
        cursor: pointer;
      }
      .pl-bucket-select:hover,
      .pl-bucket-select:focus {
        border-color: var(--accent);
        outline: none;
      }
      .pl-bucket-select.is-saving { opacity: 0.55; pointer-events: none; }

      .pl-empty {
        padding: 60px 24px;
        text-align: center;
        color: var(--muted);
        font-size: var(--text-sm);
      }

      /* Work-bucket group headers (list view grouped mode).
         Constrain width so long hints / chip toolbars can't expand the
         whole table when Grouped flips on (that was the weird UI shift). */
      .pl-group-header td {
        padding: 0 !important;
        border-bottom: none !important;
        background: var(--input-bg);
        position: sticky;
        top: 40px; /* matches taller .pl-table thead after content scale-up */
        z-index: 4;
        /* Keep the colspan cell from forcing table wider than the wrap. */
        width: 100%;
        max-width: 0;
      }
      .pl-group-header-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 14px;
        border-bottom: 2px solid var(--border);
        border-left: 4px solid var(--border);
        user-select: none;
        transition: background 0.12s ease;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }
      .pl-group-header-inner:hover { background: var(--border); }
      .pl-group-past_due .pl-group-header-inner { border-left-color: #DC2626; }
      .pl-group-needs_owner .pl-group-header-inner { border-left-color: #DC2626; background: color-mix(in srgb, #dc2626 8%, transparent); }
      .pl-group-unassigned .pl-group-header-inner { border-left-color: #6B7280; }
      .pl-group-submissions .pl-group-header-inner { border-left-color: #CA8A04; }
      .pl-group-quoted .pl-group-header-inner { border-left-color: #2563EB; }
      .pl-group-pitch .pl-group-header-inner { border-left-color: #16A34A; }
      .pl-group-awaiting_payment .pl-group-header-inner { border-left-color: #0891B2; }
      .pl-group-follow_up .pl-group-header-inner { border-left-color: #EA580C; }
      .pl-group-auto_renewal .pl-group-header-inner { border-left-color: #7C3AED; }
      .pl-group-chevron {
        font-size: 10px;
        color: var(--muted);
        width: 12px;
        flex-shrink: 0;
      }
      .pl-group-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
      .pl-group-title {
        font-weight: 700;
        font-size: 13px;
        color: var(--text);
        flex-shrink: 0;
      }
      .pl-group-count {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 10px;
        background: var(--panel);
        color: var(--muted);
        flex-shrink: 0;
      }
      .pl-group-premium {
        font-family: var(--font-mono);
        font-size: 11.5px;
        font-weight: 600;
        color: var(--text);
        flex-shrink: 0;
      }
      .pl-group-hint {
        font-size: 12px;
        color: var(--muted);
        margin-left: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 42%;
      }
      .pl-group-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        max-width: 100%;
        cursor: pointer;
        overflow: hidden;
      }
      .pl-group-toolbar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
      }
      .pl-group-toolbar-label {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        margin-right: 2px;
      }
      .pl-group-chip {
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--text);
        font-size: 11.5px;
        font-weight: 600;
        font-family: var(--font-sans);
        padding: 4px 10px;
        border-radius: 14px;
        cursor: pointer;
        transition: all 0.12s ease;
        line-height: 1.2;
      }
      .pl-group-chip:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .pl-group-chip.is-active {
        border-color: var(--accent);
        background: var(--accent);
        color: #fff;
      }
      .pl-group-controls {
        display: none;
      }
      .pl-group-filtered-note {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--muted);
        font-weight: 600;
      }
      .pl-group-empty td {
        padding: 14px 16px !important;
        color: var(--muted);
        font-size: 12px;
        font-style: italic;
        border-bottom: 1px solid var(--border);
      }

      /* ── Apple-style slide switches (Harris, 2026-07-23) ──
         Grouped and Select mode are real on/off states, so they get a
         real switch: label + sliding knob, Apple green when on, with
         the universal active glow on the track. Same button elements
         and ids as before — all JS wiring (click, .is-active, .hide)
         is untouched; only the face changed. */
      .lb-switch {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: none;
        padding: 4px 6px;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        color: var(--text);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
      }
      .lb-switch-label { line-height: 1; }
      .lb-switch-track {
        position: relative;
        width: 40px;
        height: 24px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--muted) 32%, transparent);
        border: 1px solid var(--border);
        flex-shrink: 0;
        transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      }
      .lb-switch-knob {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
        transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .lb-switch.is-active .lb-switch-track {
        background: #34C759;
        border-color: #34C759;
        box-shadow:
          0 0 0 2px rgba(52, 199, 89, 0.30),
          0 0 12px 3px rgba(52, 199, 89, 0.40);
      }
      .lb-switch.is-active .lb-switch-knob { transform: translateX(16px); }
      .lb-switch.is-active .lb-switch-label { color: var(--lb-ok-text, #34C759); }
      .pl-toolbar-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        flex-wrap: wrap;
      }
      /* List options cluster keeps a stable footprint so flipping
         Grouped / Select doesn't shove the centered toolbar around. */
      .pl-toolbar-cluster[aria-label="List options"] {
        position: relative;
        min-height: 32px;
        min-width: 11.5rem;
      }
      .pl-grouped-sort-hint {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 2px);
        font-size: 10px;
        line-height: 1.2;
        pointer-events: none;
      }
      /* ── De-Googled renewals toolbars (Harris, 2026-07-23) ──
         Every select in a pipeline toolbar (Pipeline, Upcoming, Full
         Book) drops the native OS chrome for the Little Bro pill: soft
         round, coral chevron (same mark as submissions), accent hover,
         and the universal glow on focus. */
      .pipeline-toolbar select {
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid var(--border);
        border-radius: 999px;
        background-color: var(--input-bg);
        color: var(--text);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        padding: 8px 34px 8px 14px;
        cursor: pointer;
        width: auto;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23ff6d63' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 13px;
        transition: border-color 0.14s ease, box-shadow 0.14s ease;
      }
      .pipeline-toolbar select:hover { border-color: var(--accent); }
      .pipeline-toolbar select:focus-visible {
        outline: none;
        border-color: var(--accent);
        box-shadow: var(--glow-on);
      }
      /* Standalone search rows (Upcoming / Full Book — not inside
         .pipeline-header, which spaces its children with flex gap). */
      :not(.pipeline-header) > .pipeline-search-bar { margin-bottom: 12px; }
      /* Graveyard search joins the pill + glow language. */
      .gy-toolbar input[type="search"]#gySearch {
        border-radius: 999px;
        border: 2px solid color-mix(in srgb, var(--accent) 38%, var(--border));
        box-shadow:
          0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent),
          0 0 12px 2px color-mix(in srgb, var(--accent) 18%, transparent);
        transition: box-shadow 0.16s ease, border-color 0.16s ease;
      }
      .gy-toolbar input[type="search"]#gySearch:focus {
        border-color: var(--accent);
        box-shadow: var(--glow-on);
        outline: none;
      }
      /* ── AFK screen (Harris, 2026-07-23; idle timeout 2026-07-24) ──
         Escape on a resting main page (or idle after a per-browser
         timeout from Settings → Pro) blurs Little Bro behind a dark
         veil with the Harper mark, the Little Bro wordmark, and
         RENEWALS CRM. Any key or click returns you; mouse movement
         deliberately doesn't dismiss the cover once it's up, so a
         bumped desk won't wake it. */
      .lb-afk {
        position: fixed;
        inset: 0;
        z-index: 12000; /* above everything — brains included */
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(4, 9, 18, 0.62);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        cursor: pointer;
        opacity: 0;
        scale: 1.02;
        transition:
          opacity 0.28s ease,
          scale 0.28s ease,
          display 0.28s allow-discrete,
          overlay 0.28s allow-discrete;
      }
      .lb-afk.is-open { display: flex; opacity: 1; scale: none; }
      @starting-style {
        .lb-afk.is-open { opacity: 0; scale: 1.02; }
      }
      .lb-afk-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
        animation: lbAfkBreathe 7s ease-in-out infinite;
      }
      @keyframes lbAfkBreathe {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.02); }
      }
      .lb-afk-logo {
        height: clamp(34px, 6vh, 54px);
        width: auto;
        filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
      }
      .lb-afk-name {
        font-size: clamp(52px, 9vw, 104px);
        font-weight: 700;
        line-height: 1.08;
        color: #f4f8ff;
        text-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        white-space: nowrap;
      }
      .lb-afk-sub {
        font-family: var(--font-mono);
        font-size: clamp(13px, 1.6vw, 17px);
        letter-spacing: 0.55em;
        text-indent: 0.55em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.78);
      }
      .lb-afk-hint {
        margin-top: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
      }
      /* Rotating founder quotes — in the cover stack under Renewals CRM,
         with the press-any-key hint directly below. */
      .lb-afk-quote {
        position: static;
        width: min(680px, 90vw);
        margin: 2px 0 0;
        text-align: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.55s ease;
      }
      .lb-afk-quote.is-in { opacity: 1; }
      .lb-afk-quote-text {
        margin: 0;
        font-family: var(--font-display);
        font-size: clamp(14px, 1.85vw, 18px);
        font-weight: 500;
        font-style: italic;
        line-height: 1.45;
        color: rgba(244, 248, 255, 0.9);
        text-wrap: balance;
      }
      .lb-afk-quote-attr {
        display: block;
        margin-top: 8px;
        font-family: var(--font-mono);
        font-size: clamp(10px, 1.2vw, 12px);
        font-style: normal;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.55);
      }
      @media (prefers-reduced-motion: reduce) {
        .lb-afk-quote { transition: none; }
      }
      /* ── Welcome screen (Harris, 2026-07-24) ──
         Shown on first visit and after every fresh login (password or
         Google). Same visual language as the AFK cover, but the wordmark
         is a cursive "Welcome" that writes itself on — Apple-hello
         style stroke draw, then the ink fills in. Any key or click
         steps inside; the button at the very top starts the guided
         tour instead. */
      .lb-welcome {
        position: fixed;
        inset: 0;
        z-index: 12400; /* above the AFK cover */
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(4, 9, 18, 0.62);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        cursor: pointer;
        opacity: 0;
        scale: 1.02;
        transition:
          opacity 0.28s ease,
          scale 0.28s ease,
          display 0.28s allow-discrete,
          overlay 0.28s allow-discrete;
      }
      .lb-welcome.is-open { display: flex; opacity: 1; scale: none; }
      @starting-style {
        .lb-welcome.is-open { opacity: 0; scale: 1.02; }
      }
      .lb-welcome-top {
        position: absolute;
        top: 22px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        pointer-events: none;
      }
      .lb-welcome-tour-btn {
        pointer-events: auto;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        background: rgba(255, 255, 255, 0.08);
        color: rgba(244, 248, 255, 0.92);
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.02em;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      }
      .lb-welcome-tour-btn:hover {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 24px rgba(255, 109, 99, 0.35);
      }
      .lb-welcome-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
      }
      .lb-welcome-script {
        width: min(720px, 92vw);
        height: auto;
        overflow: visible;
        margin: -10px 0;
      }
      .lb-welcome-script text {
        font-family: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
        font-size: 150px;
        fill: #f4f8ff;
        fill-opacity: 0;
        stroke: #f4f8ff;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 2600;
        stroke-dashoffset: 2600;
        filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.5));
      }
      /* The draw only starts once .is-write lands (JS waits for the
         script font so a cold cache doesn't animate the fallback). */
      .lb-welcome.is-write .lb-welcome-script text {
        animation:
          lbWelcomeDraw 3s ease-in-out 0.25s forwards,
          lbWelcomeInk 1.1s ease 2.4s forwards;
      }
      @keyframes lbWelcomeDraw {
        to { stroke-dashoffset: 0; }
      }
      @keyframes lbWelcomeInk {
        to { fill-opacity: 1; }
      }
      @media (prefers-reduced-motion: reduce) {
        .lb-welcome.is-write .lb-welcome-script text {
          animation: none;
          stroke-dashoffset: 0;
          fill-opacity: 1;
        }
      }
      /* ── Guided tour (Harris, 2026-07-24) ──
         Spotlight walkthrough started from the Welcome screen. The spot
         ring cuts a hole in a full-screen veil (giant box-shadow) and a
         card explains each stop. Esc or "End tour" leaves; clicking the
         veil, Enter, or → advances; ← goes back. */
      .lb-tour {
        position: fixed;
        inset: 0;
        z-index: 12500;
        display: none;
      }
      .lb-tour.is-active { display: block; }
      .lb-tour-spot {
        position: fixed;
        border-radius: 12px;
        border: 2px solid var(--accent, #ff6d63);
        box-shadow:
          0 0 0 200vmax rgba(4, 9, 18, 0.66),
          0 0 26px rgba(255, 109, 99, 0.45);
        transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
        pointer-events: none;
      }
      .lb-tour-card {
        position: fixed;
        width: min(340px, calc(100vw - 32px));
        padding: 16px 18px;
        border-radius: 14px;
        background: rgba(12, 18, 30, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
        color: #f4f8ff;
        cursor: default;
        transition: top 0.3s ease, left 0.3s ease;
      }
      .lb-tour-step {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 6px;
      }
      .lb-tour-title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 6px;
      }
      .lb-tour-body {
        font-size: 13px;
        line-height: 1.5;
        color: rgba(244, 248, 255, 0.85);
      }
      .lb-tour-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
      }
      .lb-tour-actions button {
        cursor: pointer;
        border-radius: 8px;
        font-family: var(--font-display);
        font-size: 12.5px;
        font-weight: 600;
        padding: 7px 14px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(244, 248, 255, 0.9);
        transition: background 0.15s ease, border-color 0.15s ease;
      }
      .lb-tour-actions button:hover { background: rgba(255, 255, 255, 0.14); }
      .lb-tour-actions button:disabled { opacity: 0.35; cursor: default; }
      .lb-tour-actions .lb-tour-next {
        background: var(--accent, #ff6d63);
        border-color: transparent;
        color: #10131c;
      }
      .lb-tour-actions .lb-tour-next:hover { filter: brightness(1.08); background: var(--accent, #ff6d63); }
      .lb-tour-actions .lb-tour-end { margin-left: auto; border-color: transparent; background: transparent; color: rgba(255, 255, 255, 0.5); }
      .lb-tour-actions .lb-tour-end:hover { color: rgba(255, 255, 255, 0.85); background: transparent; }
      @media (prefers-reduced-motion: reduce) {
        .lb-tour-spot, .lb-tour-card { transition: none; }
      }
      /* ── Custom search everywhere (Harris, 2026-07-23) ──
         The glowing Search pill is the system-wide search language now:
         Won/Lost/Cancelled, Post-Sales, and Submissions get the full
         wrap (icon + label); every other toolbar search picks up the
         pill + glow via CSS. `body` prefix wins specificity ties
         against each module's own later-in-sheet input rules. */
      .pipeline-search-wrap--slim { padding: 8px 14px; }
      .pipeline-search-wrap--slim .pipeline-search-icon { width: 17px; height: 17px; }
      .pipeline-search-wrap--slim .pipeline-search-label { padding-right: 8px; }
      body .pipeline-search-wrap--slim input[type="search"] { font-size: 13px; }
      /* Inner inputs must stay naked — module rules (.ps-toolbar,
         .sub-list-toolbar) would otherwise draw their own borders
         inside the pill. */
      body .pipeline-search-wrap input[type="search"] {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-width: 0;
        width: 100%;
      }
      body .ps-search-wrap .pipeline-search-wrap { width: 100%; }
      body .sub-list-toolbar .pipeline-search-wrap { flex: 1; width: auto; min-width: 220px; }
      /* Submissions keeps its coral brand on the pill. */
      body .sub-list-toolbar .pipeline-search-wrap {
        border-color: color-mix(in srgb, #ff6d63 45%, var(--border));
        box-shadow:
          0 0 0 2px rgba(255, 109, 99, 0.10),
          0 0 12px 2px rgba(255, 109, 99, 0.16);
      }
      body .sub-list-toolbar .pipeline-search-wrap:focus-within {
        border-color: #ff6d63;
        box-shadow:
          0 0 0 2px rgba(255, 109, 99, 0.28),
          0 0 12px 3px rgba(255, 109, 99, 0.38);
      }
      body .sub-list-toolbar .pipeline-search-icon,
      body .sub-list-toolbar .pipeline-search-label {
        color: var(--lb-coral-text, #ff6d63);
        border-right-color: color-mix(in srgb, #ff6d63 35%, var(--border));
      }
      /* Pill + glow for every remaining toolbar search (CSS only —
         markup and wiring untouched). */
      body .uw-toolbar input[type="search"],
      body .iqp-toolbar input[type="search"],
      body .vel-toolbar input[type="search"],
      body .lrv-toolbar input[type="search"],
      body input#pcalSearch,
      body input#tplvSearch,
      body input#tplvBizSearch,
      body input#edTplSearch,
      body input#tplPickerBizSearch {
        border-radius: 999px;
        border: 2px solid color-mix(in srgb, var(--accent) 32%, var(--border));
        box-shadow:
          0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent),
          0 0 10px 1px color-mix(in srgb, var(--accent) 15%, transparent);
        transition: box-shadow 0.16s ease, border-color 0.16s ease;
      }
      body .uw-toolbar input[type="search"]:focus,
      body .iqp-toolbar input[type="search"]:focus,
      body .vel-toolbar input[type="search"]:focus,
      body .lrv-toolbar input[type="search"]:focus,
      body input#pcalSearch:focus,
      body input#tplvSearch:focus,
      body input#tplvBizSearch:focus,
      body input#edTplSearch:focus,
      body input#tplPickerBizSearch:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: var(--glow-on);
      }
      /* Same pill dropdowns as the pipeline for the UW + IQ toolbars. */
      body .uw-toolbar select,
      body .iqp-toolbar select {
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid var(--border);
        border-radius: 999px;
        background-color: var(--input-bg);
        color: var(--text);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        padding: 8px 34px 8px 14px;
        cursor: pointer;
        width: auto;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23ff6d63' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 13px;
        transition: border-color 0.14s ease, box-shadow 0.14s ease;
      }
      body .uw-toolbar select:hover,
      body .iqp-toolbar select:hover { border-color: var(--accent); }
      body .uw-toolbar select:focus-visible,
      body .iqp-toolbar select:focus-visible {
        outline: none;
        border-color: var(--accent);
        box-shadow: var(--glow-on);
      }

      /* ── Multi-select mode (list view) ──
         Rows become one big checkbox: a ☐/☑ glyph appears in the frozen
         Company cell and the selected rows get an accent wash strong
         enough to beat the lead-temperature tints (hence !important —
         selection is a transient interaction state that must always
         read). The bulk bar carrying the hover card's temp/bucket/stage
         buttons is fixed to the bottom of the viewport. */
      .pl-select-mode tbody tr[data-policy-id] { cursor: pointer; }
      .pl-select-mode tbody tr[data-policy-id] .pl-col-primary::before {
        content: "☐";
        display: inline-block;
        width: 1.25em;
        color: var(--muted);
        font-size: 13px;
      }
      .pl-select-mode tbody tr.pl-row-selected .pl-col-primary::before {
        content: "☑";
        color: var(--accent);
      }
      .pl-table tbody tr.pl-row-selected td {
        background: color-mix(in srgb, var(--accent) 16%, var(--panel)) !important;
      }
      .pl-table tbody tr.pl-row-selected .pl-col-primary {
        box-shadow: inset 3px 0 0 var(--accent) !important;
      }
      .pl-bulk-bar {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 14px;
        z-index: 950;
        width: min(960px, calc(100vw - 32px));
        /* --panel is a translucent tint meant to sit on the solid --bg —
           floating over table rows it reads see-through. Composite the
           tint over the solid background so the bar is fully opaque but
           still matches the theme's panel look. */
        background: linear-gradient(var(--panel), var(--panel)) var(--bg);
        border: 1px solid var(--accent);
        border-radius: 12px;
        box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
        padding: 10px 14px 12px;
      }
      .pl-bulk-bar.is-busy .pl-bulk-btnrow button,
      .pl-bulk-bar.is-busy .pl-bulk-link {
        opacity: 0.55;
        pointer-events: none;
      }
      .pl-bulk-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
      }
      .pl-bulk-count { font-size: 12.5px; }
      .pl-bulk-link {
        border: none;
        background: none;
        color: var(--accent);
        font-size: 11.5px;
        font-weight: 600;
        cursor: pointer;
        padding: 2px 4px;
      }
      .pl-bulk-link:disabled { opacity: 0.45; cursor: default; }
      .pl-bulk-status {
        font-size: 11.5px;
        color: var(--muted);
        font-family: var(--font-mono);
      }
      .pl-bulk-done {
        margin-left: auto;
        border: 1px solid var(--border);
        background: var(--input-bg);
        color: var(--text);
        font-size: 12px;
        font-weight: 700;
        padding: 5px 14px;
        border-radius: 16px;
        cursor: pointer;
      }
      .pl-bulk-done:hover { border-color: var(--accent); color: var(--accent); }
      .pl-bulk-groups {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
      }
      .pl-bulk-group-lbl {
        display: block;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 4px;
      }
      .pl-bulk-btnrow {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .pl-bulk-btnrow button:disabled { opacity: 0.45; pointer-events: none; }
      #pipelineSort.is-group-overridden {
        opacity: 0.45;
        pointer-events: none;
      }
      .pl-grouped-sort-hint {
        font-size: 10px;
        color: var(--muted);
        font-family: var(--font-mono);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Row hover card — notes, comments preview, quick bucket moves. */
      .pl-hover-card {
        position: fixed;
        /* Static top-left of the main panel (Garrett): stays out of the
           top-right notification / reminder stack so both stay readable. */
        top: 64px;
        left: 256px; /* 240px sidebar + 16px gutter */
        right: auto;
        bottom: auto;
        z-index: 8500;
        background: var(--bg);
        border: 2px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 18px 42px rgba(15, 37, 64, 0.32),
                    0 4px 12px rgba(15, 37, 64, 0.18);
        width: min(420px, calc(100vw - 24px));
        max-height: calc(100vh - 84px);
        display: none;
        flex-direction: column;
        overflow: hidden;
        animation: pl-hover-pop-in 0.14s ease-out;
        pointer-events: auto;
      }
      body.sidebar-collapsed .pl-hover-card { left: 72px; }
      @media (max-width: 1100px) {
        .pl-hover-card { left: 212px; } /* 196px sidebar + 16px */
      }
      @media (max-width: 860px) {
        .pl-hover-card { left: 16px; }
      }
      @keyframes pl-hover-pop-in {
        from { opacity: 0; transform: translateX(-10px) scale(0.98); }
        to   { opacity: 1; transform: translateX(0) scale(1); }
      }
      .pl-hover-card.is-open { display: flex; }
      .pl-hover-card-head {
        position: relative;
        padding: 14px 38px 12px 16px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
        background: var(--panel);
      }
      .pl-hover-close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--panel);
        color: var(--muted);
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
      }
      .pl-hover-close:hover {
        color: var(--danger);
        border-color: var(--danger);
        background: var(--input-bg);
      }
      .pl-hover-card-title {
        font-weight: 750;
        font-size: 15px;
        color: var(--text);
        margin-bottom: 6px;
        line-height: 1.3;
        letter-spacing: -0.02em;
      }
      .pl-hover-card-meta {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        line-height: 1.45;
      }
      .pl-hover-card-body {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
        padding: 12px 14px 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .pl-hover-section-label {
        font-size: 12px;
        font-weight: 750;
        letter-spacing: -0.01em;
        color: var(--text);
        margin-bottom: 8px;
      }
      .pl-hover-notes {
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--text);
        white-space: pre-wrap;
        word-break: break-word;
      }
      .pl-hover-comment {
        padding: 8px 10px;
        border-radius: 6px;
        background: var(--input-bg);
        border: 1px solid var(--border);
      }
      .pl-hover-comment + .pl-hover-comment { margin-top: 6px; }
      .pl-hover-comment-meta {
        font-size: 10.5px;
        color: var(--muted);
        margin-bottom: 4px;
        display: flex;
        justify-content: space-between;
        gap: 8px;
      }
      .pl-hover-comment-body {
        font-size: 12px;
        line-height: 1.4;
        white-space: pre-wrap;
        word-break: break-word;
      }
      .pl-hover-empty {
        font-size: 12px;
        color: var(--muted);
        font-style: italic;
      }
      .pl-hover-card-foot {
        padding: 12px 14px 14px;
        border-top: 1px solid var(--border);
        flex-shrink: 0;
        background: color-mix(in srgb, var(--input-bg) 88%, var(--panel));
      }
      .pl-hover-foot-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--section-title);
        margin: 0 0 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
        letter-spacing: -0.02em;
      }
      .pl-hover-bucket-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .pl-hover-bucket-btn {
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--text);
        font-size: 11.5px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 14px;
        cursor: pointer;
        transition: all 0.12s ease;
        line-height: 1.2;
      }
      .pl-hover-bucket-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .pl-hover-bucket-btn.is-active {
        border-color: var(--accent);
        background: var(--accent);
        color: #fff;
      }
      .pl-hover-bucket-btn.is-saving { opacity: 0.6; pointer-events: none; }
      .pl-hover-followup-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
      }
      .pl-followup-btn,
      .pm-followup-btn {
        border: 1px solid rgba(234, 88, 12, 0.45);
        background: rgba(234, 88, 12, 0.1);
        color: #c2410c;
        font-size: 12px;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 16px;
        cursor: pointer;
        transition: all 0.12s ease;
        line-height: 1.2;
        white-space: nowrap;
      }
      .pl-followup-btn:hover,
      .pm-followup-btn:hover {
        border-color: #ea580c;
        background: rgba(234, 88, 12, 0.18);
      }
      .pl-followup-btn.is-saving,
      .pm-followup-btn.is-saving {
        opacity: 0.55;
        pointer-events: none;
      }
      .pl-followup-hint {
        font-size: 11px;
        line-height: 1.3;
      }
      .pm-followup-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 12px;
      }
      .pl-table tbody tr.pl-row-hoverable { cursor: default; }
      .pl-table tbody tr.pl-row-hoverable:hover td {
        background: var(--input-bg);
      }
      .pl-temp-emoji {
        display: inline-block;
        width: 1.2em;
        text-align: center;
        flex-shrink: 0;
      }
      .pl-table tbody tr.pl-row-temp-hot td {
        background: rgba(220, 38, 38, 0.07);
      }
      .pl-table tbody tr.pl-row-temp-hot:hover td {
        background: rgba(220, 38, 38, 0.12);
      }
      .pl-table tbody tr.pl-row-temp-hot .pl-col-primary {
        box-shadow: inset 3px 0 0 rgba(220, 38, 38, 0.75);
      }
      .pl-table tbody tr.pl-row-temp-cold td {
        background: rgba(37, 99, 235, 0.07);
      }
      .pl-table tbody tr.pl-row-temp-cold:hover td {
        background: rgba(37, 99, 235, 0.12);
      }
      .pl-table tbody tr.pl-row-temp-cold .pl-col-primary {
        box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.75);
      }
      /* Warm is the default lead temperature — intentionally NO color (no
         wash, no marker) so only hot (red) and cold (blue) stand out. */

      /* ── Lead-temperature highlight, per-theme (cold / warm / hot) ──
         The base tints above use one low alpha tuned for Harper's opaque
         cream surface. On the LIGHT theme they wash out, and on DARK a 7%
         red over near-black is basically invisible. Boost the alpha — and on
         dark, switch to brighter base hues — so the temperature wash reads at
         Harper-like strength in every theme. Targeting `td` carries the color
         across the frozen Assigned/Company columns too, so the whole row is
         tinted. Harper stays on the base rules (it already looks right). */
      [data-theme="light"] .pl-table tbody tr.pl-row-temp-hot td { background: rgba(220, 38, 38, 0.14); }
      [data-theme="light"] .pl-table tbody tr.pl-row-temp-hot:hover td { background: rgba(220, 38, 38, 0.22); }
      [data-theme="light"] .pl-table tbody tr.pl-row-temp-cold td { background: rgba(37, 99, 235, 0.14); }
      [data-theme="light"] .pl-table tbody tr.pl-row-temp-cold:hover td { background: rgba(37, 99, 235, 0.22); }

      [data-theme="dark"] .pl-table tbody tr.pl-row-temp-hot td { background: rgba(248, 113, 113, 0.40); }
      [data-theme="dark"] .pl-table tbody tr.pl-row-temp-hot:hover td { background: rgba(248, 113, 113, 0.50); }
      [data-theme="dark"] .pl-table tbody tr.pl-row-temp-hot .pl-col-primary { box-shadow: inset 3px 0 0 rgba(248, 113, 113, 1); }
      [data-theme="dark"] .pl-table tbody tr.pl-row-temp-cold td { background: rgba(96, 165, 250, 0.40); }
      [data-theme="dark"] .pl-table tbody tr.pl-row-temp-cold:hover td { background: rgba(96, 165, 250, 0.50); }
      [data-theme="dark"] .pl-table tbody tr.pl-row-temp-cold .pl-col-primary { box-shadow: inset 3px 0 0 rgba(96, 165, 250, 1); }

      /* Harper — already readable on the cream surface, bumped a notch richer
         per request. (Warm stays colorless on every theme.) */
      [data-theme="harper"] .pl-table tbody tr.pl-row-temp-hot td { background: rgba(220, 38, 38, 0.12); }
      [data-theme="harper"] .pl-table tbody tr.pl-row-temp-hot:hover td { background: rgba(220, 38, 38, 0.19); }
      [data-theme="harper"] .pl-table tbody tr.pl-row-temp-hot .pl-col-primary { box-shadow: inset 3px 0 0 rgba(220, 38, 38, 0.9); }
      [data-theme="harper"] .pl-table tbody tr.pl-row-temp-cold td { background: rgba(37, 99, 235, 0.12); }
      [data-theme="harper"] .pl-table tbody tr.pl-row-temp-cold:hover td { background: rgba(37, 99, 235, 0.19); }
      [data-theme="harper"] .pl-table tbody tr.pl-row-temp-cold .pl-col-primary { box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.9); }

      /* Mono — Hot/Cold were nearly invisible on the gray wash (7% base
         alpha), and Warm/default rows read as a muddy dark slab. Lighten
         Warm to a clean paper white; punch Hot/Cold with stronger tint +
         left markers so temperature is obvious at a glance. */
      [data-theme="mono"] .pl-table tbody tr.pl-row-temp-warm td {
        background: rgba(255, 255, 255, 0.94);
      }
      [data-theme="mono"] .pl-table tbody tr.pl-row-temp-warm:hover td {
        background: #ffffff;
      }
      [data-theme="mono"] .pl-table tbody tr.pl-row-temp-hot td {
        background: rgba(220, 38, 38, 0.22);
      }
      [data-theme="mono"] .pl-table tbody tr.pl-row-temp-hot:hover td {
        background: rgba(220, 38, 38, 0.32);
      }
      [data-theme="mono"] .pl-table tbody tr.pl-row-temp-hot .pl-col-primary {
        box-shadow: inset 3px 0 0 rgba(185, 28, 28, 1);
      }
      [data-theme="mono"] .pl-table tbody tr.pl-row-temp-cold td {
        background: rgba(37, 99, 235, 0.20);
      }
      [data-theme="mono"] .pl-table tbody tr.pl-row-temp-cold:hover td {
        background: rgba(37, 99, 235, 0.30);
      }
      [data-theme="mono"] .pl-table tbody tr.pl-row-temp-cold .pl-col-primary {
        box-shadow: inset 3px 0 0 rgba(29, 78, 216, 1);
      }
      /* Active temp chips: don't paint Warm with --accent (#111) — solid
         black on mono. Color each temperature so the picker stays legible. */
      [data-theme="mono"] .pl-hover-temp-btn.is-active[data-pl-temp-move="warm"],
      [data-theme="mono"] .pl-hover-temp-btn.is-active[data-pl-bulk-temp="warm"] {
        background: #ececec;
        color: #111;
        border-color: #111;
      }
      [data-theme="mono"] .pl-hover-temp-btn.is-active[data-pl-temp-move="hot"],
      [data-theme="mono"] .pl-hover-temp-btn.is-active[data-pl-bulk-temp="hot"] {
        background: #dc2626;
        color: #fff;
        border-color: #b91c1c;
      }
      [data-theme="mono"] .pl-hover-temp-btn.is-active[data-pl-temp-move="cold"],
      [data-theme="mono"] .pl-hover-temp-btn.is-active[data-pl-bulk-temp="cold"] {
        background: #2563eb;
        color: #fff;
        border-color: #1d4ed8;
      }

      .pl-hover-temp-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 10px;
      }
      .pl-hover-temp-btn {
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--text);
        font-size: 11.5px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 14px;
        cursor: pointer;
        transition: all 0.12s ease;
        line-height: 1.2;
      }
      .pl-hover-temp-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .pl-hover-temp-btn.is-active {
        border-color: var(--accent);
        background: var(--accent);
        color: #fff;
      }
      .pl-hover-temp-btn.is-saving { opacity: 0.6; pointer-events: none; }
      .pl-hover-stage-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .pl-hover-stage-btn {
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--text);
        font-size: 11.5px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 14px;
        cursor: pointer;
        transition: all 0.12s ease;
        line-height: 1.2;
      }
      .pl-hover-stage-btn:hover { border-color: var(--accent); color: var(--accent); }
      .pl-hover-stage-btn.is-active {
        border-color: var(--accent);
        background: var(--accent);
        color: #fff;
      }
      /* Outcome-tinted hover/active states so Won/Lost/Cancelled read at a glance. */
      .pl-hover-stage-won:hover { border-color: var(--lb-ok-text, #2ec47c); color: var(--lb-ok-text, #2ec47c); }
      .pl-hover-stage-won.is-active { border-color: #2ec47c; background: #2ec47c; color: #fff; }
      .pl-hover-stage-lost:hover { border-color: #dc4949; color: #dc4949; }
      .pl-hover-stage-lost.is-active { border-color: #dc4949; background: #dc4949; color: #fff; }
      .pl-hover-stage-cancelled:hover { border-color: var(--lb-slate-text, #94a3b8); color: var(--lb-slate-text, #94a3b8); }
      .pl-hover-stage-cancelled.is-active { border-color: #94a3b8; background: #94a3b8; color: #fff; }
      .pl-hover-stage-btn.is-saving { opacity: 0.6; pointer-events: none; }
      .pl-hover-pastdue-note {
        font-size: 12px;
        color: var(--muted);
        line-height: 1.45;
        padding: 8px 10px;
        border-radius: 6px;
        background: rgba(220, 38, 38, 0.08);
        border: 1px solid rgba(220, 38, 38, 0.2);
      }

      /* Footer total bar (sticky bottom) — total count + premium sum. */
      .pl-totals {
        position: sticky;
        bottom: 0;
        background: var(--input-bg);
        border-top: 2px solid var(--border);
        padding: 8px 14px;
        font-family: var(--font-mono);
        font-size: 11.5px;
        color: var(--muted);
        display: flex;
        gap: 18px;
        justify-content: flex-end;
        z-index: 4;
      }
      .pl-totals strong { color: var(--text); font-weight: 700; }

      /* ============ Assignee column + popover ============ */
      /* Compact circular initials per assignee, lined up in the cell.
         Click the cell anywhere → opens a multi-select popover anchored
         to the cell with checkboxes for every team member. Color is
         deterministic per email (same hash function as other pills) so
         each person gets a stable color across all rows and sessions. */
      /* Assigned column width + sticky positioning is set further down
         alongside the .pl-col-primary sticky rule. The cell content
         styling is here. */
      .pl-assignees-cell {
        display: flex;
        align-items: center;
        gap: -4px;
        flex-wrap: nowrap;
        min-height: 22px;
      }
      .pl-avatar {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        /* 9px holds 2 letters comfortably inside a 22px circle. v3
           schema upgraded initials from "H" → "HD"; the tighter font
           prevents the second letter from clipping. */
        font-size: 9px;
        font-weight: 700;
        flex-shrink: 0;
        border: 2px solid var(--panel);
        margin-left: -6px;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        transition: transform 0.12s ease;
        line-height: 1;
      }
      .pl-assignees-cell:hover .pl-avatar { transform: translateY(-1px); }
      .pl-avatar:first-child { margin-left: 0; }
      .pl-avatar.pl-avatar-mine {
        box-shadow: 0 0 0 2px var(--accent);
      }
      .pl-table tbody tr:hover .pl-avatar { border-color: var(--input-bg); }
      .pl-table tbody tr:hover .pl-col-primary .pl-avatar { border-color: var(--input-bg); }

      .pl-assignees-empty {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--muted);
        font-family: var(--font-mono);
        font-size: 11px;
        opacity: 0.55;
        transition: opacity 0.12s ease;
      }
      .pl-assignees-cell:hover .pl-assignees-empty { opacity: 1; color: var(--accent); }
      .pl-assignees-empty-plus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px; height: 18px;
        border: 1px dashed var(--border);
        border-radius: 50%;
        font-size: 12px;
        line-height: 1;
      }
      .pl-assignees-cell:hover .pl-assignees-empty-plus {
        border-color: var(--accent);
        color: var(--accent);
      }

      /* Multi-select popover. Appended to document.body (avoids the
         table's overflow:auto trap) and positioned absolutely. Closes
         on outside click or Escape. */
      .pl-assignee-popover {
        /* Fixed positioning (was absolute). Reasons:
           1) viewport-relative math is simpler and always lands in view
           2) doesn't get clipped by .pl-wrap's overflow:auto if we ever
              reach into a nested scroll container
           3) max-height + internal overflow guarantees the whole
              popover (title, checkboxes, footer) is reachable even on
              tiny viewports — the buttons never get pushed off-screen */
        position: fixed;
        z-index: 9000;
        /* v26.53: was var(--panel), but that's rgba(.., .04-.78) per
           theme, so the popover was bleeding through to the list view
           underneath. --bg is fully solid in every theme. Stronger
           shadow + 2px border give clear visual separation from rows. */
        background: var(--bg);
        border: 2px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 18px 42px rgba(15, 37, 64, 0.32),
                    0 4px 12px rgba(15, 37, 64, 0.18);
        min-width: 240px;
        max-width: 300px;
        max-height: calc(100vh - 24px);
        display: none;
        flex-direction: column;
        animation: pl-pop-in 0.12s ease-out;
      }
      .pl-assignee-popover.is-open { display: flex; }
      @keyframes pl-pop-in {
        from { opacity: 0; transform: translateX(10px) scale(0.98); }
        to   { opacity: 1; transform: translateX(0) scale(1); }
      }
      .pl-assignee-popover-title {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        padding: 10px 12px 6px;
        font-weight: 600;
        flex-shrink: 0;
      }
      /* Scrollable middle (the checkbox list). If the list is short
         it stays at natural height; if it's long, it scrolls so the
         footer stays pinned at the bottom of the popover. */
      .pl-assignee-popover-list {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
        padding: 0 6px;
      }
      .pl-assignee-option {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 7px 10px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.10s ease;
        user-select: none;
      }
      .pl-assignee-option:hover { background: var(--input-bg); }
      .pl-assignee-option input[type="checkbox"] {
        width: 14px; height: 14px;
        accent-color: var(--accent);
        margin: 0;
        cursor: pointer;
      }
      .pl-assignee-option .pl-avatar {
        margin-left: 0;
        border: none;
        width: 22px; height: 22px;
      }
      .pl-assignee-option-name {
        font-size: 13px;
        font-weight: 500;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .pl-assignee-option-you {
        font-family: var(--font-mono);
        font-size: 9.5px;
        color: var(--accent);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 1px 5px;
        border: 1px solid var(--accent);
        border-radius: 3px;
        flex-shrink: 0;
      }
      .pl-assignee-popover-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        margin-top: 4px;
        border-top: 1px solid var(--border);
        background: rgba(15, 37, 64, 0.02);
        flex-shrink: 0;
      }
      [data-theme="dark"] .pl-assignee-popover-foot { background: rgba(0, 0, 0, 0.18); }
      .pl-assignee-clear {
        background: transparent;
        border: none;
        color: var(--muted);
        font-family: var(--font-mono);
        font-size: 10.5px;
        padding: 5px 8px;
        cursor: pointer;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
      }
      .pl-assignee-clear:hover { color: #DC2626; background: rgba(220, 38, 38, 0.08); }
      .pl-assignee-clear:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
      }
      /* Primary "Assign" button — accent-colored, disabled when there
         are no pending changes. Counter inside the label tells the
         user exactly how many people they're about to assign. */
      .pl-assignee-save-btn {
        background: var(--accent);
        color: #FFFFFF;
        border: none;
        padding: 6px 14px;
        border-radius: 5px;
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.12s ease, transform 0.10s ease, opacity 0.12s ease;
        letter-spacing: -0.005em;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        line-height: 1.2;
      }
      [data-theme="harper"] .pl-assignee-save-btn { background: #1a8f5e; }
      [data-theme="light"]  .pl-assignee-save-btn { background: #0284C7; }
      .pl-assignee-save-btn:hover:not(:disabled) {
        filter: brightness(1.08);
        transform: translateY(-1px);
      }
      .pl-assignee-save-btn:disabled {
        background: var(--input-bg);
        color: var(--muted);
        cursor: not-allowed;
        opacity: 0.7;
      }
      .pl-assignee-save-count {
        font-family: var(--font-mono);
        font-size: 10.5px;
        background: rgba(255, 255, 255, 0.22);
        padding: 1px 6px;
        border-radius: 8px;
        font-weight: 700;
      }
      .pl-assignee-save-btn:disabled .pl-assignee-save-count {
        background: rgba(0, 0, 0, 0.06);
      }
      .pl-assignee-save-btn.is-saving {
        pointer-events: none;
        opacity: 0.75;
      }


      .kanban {
        display: grid;
        grid-template-columns: repeat(7, minmax(320px, 1fr));
        gap: 18px;
        align-items: start;
        overflow-x: auto;
        padding-bottom: 12px;
      }
      @media (max-width: 560px) {
        .kanban {
          grid-template-columns: 1fr;
          overflow-x: visible;
        }
      }
      .kanban-col {
        display: flex; flex-direction: column; gap: 12px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        /* No top padding — the sticky header carries its own padding-top so
           it sits flush against the column's top edge and stays anchored
           there as cards scroll behind it. */
        padding: 0 14px 14px;
        min-height: 160px;
        max-height: calc(100vh - 180px);
        overflow-y: auto;
      }
      .kanban-col-head {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 8px;
        /* Padding-top replaces the column's missing top padding; horizontal
           bleed via negative margin + matching padding makes the bg cover
           the full column width so cards scrolling under it are fully hidden. */
        padding: 14px 16px 10px;
        margin: 0 -14px;
        border-bottom: 1px dashed var(--border);
        position: sticky; top: 0;
        background: var(--panel); /* must be opaque — cards scroll under */
        z-index: 5;
      }
      [data-theme="harper"] .kanban-col-head { background: var(--panel); }
      /* fb_23: light-theme pipeline visibility. --panel is only 4% alpha, so
         the sticky column header let cards bleed through as they scrolled
         under it (the header is explicitly meant to be opaque), and the lanes
         barely separated from the near-white page. Give the lanes + their
         sticky headers a solid light-gray surface so cards read as distinct
         tiles and the header fully masks rows scrolling beneath it. */
      [data-theme="light"]  .kanban-col      { background: #eaeef4; }
      [data-theme="light"]  .kanban-col-head { background: #eaeef4; }
      .kanban-col-head .label {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1.15rem;
        letter-spacing: -0.015em;
      }
      .kanban-col-head .meta {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--muted);
      }
      .kanban-col.col-overdue .kanban-col-head .label { color: var(--danger); }
      .kanban-col.col-7 .kanban-col-head .label { color: var(--lb-warn-text, #fbbf24); }
      .kanban-col.col-empty { opacity: 0.55; }

      .pcard {
        border: 1px solid var(--border);
        background: var(--input-bg);
        border-radius: 10px;
        padding: 14px 16px;
        cursor: pointer;
        display: flex; flex-direction: column; gap: 8px;
        transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
      }
      .pcard:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
      .pcard:active { transform: translateY(1px); }
      .pcard.overdue { border-color: rgba(251, 113, 133, 0.45); background: rgba(251, 113, 133, 0.06); }
      [data-theme="light"] .pcard.overdue { background: rgba(225, 29, 72, 0.05); }
      .pcard .head {
        display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
      }
      .pcard .acct {
        font-weight: 650;
        font-size: 1.05rem;
        line-height: 1.3;
        /* Flex (not -webkit-box on the whole block) so the Auto/Overdue
           bubbles are separate items that never get clipped by a long
           name — only the name itself line-clamps. */
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        row-gap: 2px;
        flex: 1;
        min-width: 0;
      }
      .pcard .acct .acct-name {
        overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        min-width: 0;
      }
      .pcard .acct .pl-auto-badge,
      .pcard .acct .pl-overdue-badge,
      .pcard .acct .pl-needsowner-badge,
      .pcard .acct .pl-commit-badge { flex-shrink: 0; }
      .pcard .days {
        font-family: var(--font-mono);
        font-size: 12.5px;
        color: var(--muted);
        flex-shrink: 0;
      }
      .pcard.overdue .days { color: var(--danger); font-weight: 700; }
      .pcard .meta {
        font-size: 12.5px;
        color: var(--muted);
        line-height: 1.35;
        display: flex; flex-wrap: wrap; gap: 4px 8px;
      }
      .pcard .meta .premium { font-family: var(--font-mono); color: var(--text); font-weight: 600; }
      .pl-prem-compare {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        line-height: 1.15;
      }
      .pl-prem-new {
        font-family: var(--font-mono);
        font-weight: 650;
        color: var(--text);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .pl-prem-new.is-save { color: var(--lb-ok-text, #34d399); }
      .pl-prem-new.is-up { color: var(--danger); }
      [data-theme="harper"] .pl-prem-new.is-save,
      [data-theme="light"] .pl-prem-new.is-save { color: #067647; }
      .pl-prem-exp {
        font-family: var(--font-mono);
        text-decoration: line-through;
        color: var(--muted);
        font-size: 11px;
      }
      .pl-prem-chip {
        font-size: 10px;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 999px;
        letter-spacing: 0.01em;
        line-height: 1.3;
      }
      .pl-prem-chip.is-save {
        background: rgba(52, 211, 153, 0.16);
        color: var(--lb-ok-text, #34d399);
      }
      .pl-prem-chip.is-up {
        background: rgba(251, 113, 133, 0.14);
        color: var(--danger);
      }
      .pl-prem-chip.is-flat {
        background: var(--input-bg, rgba(148, 163, 184, 0.16));
        color: var(--muted);
      }
      .pl-prem-chip.is-rework {
        background: rgba(234, 88, 12, 0.16);
        color: #ea580c;
      }
      [data-theme="harper"] .pl-prem-chip.is-rework,
      [data-theme="light"] .pl-prem-chip.is-rework {
        background: rgba(194, 65, 12, 0.12);
        color: #c2410c;
      }
      [data-theme="harper"] .pl-prem-chip.is-save,
      [data-theme="light"] .pl-prem-chip.is-save {
        background: rgba(6, 118, 71, 0.12);
        color: #067647;
      }
      .pcard .meta .uw { font-style: italic; }
      .pcard-market {
        display: grid;
        grid-template-columns: 3.7rem minmax(0, 1fr);
        gap: 1px 6px;
        align-items: baseline;
        margin-top: 2px;
      }
      .pcard-market .k {
        font-family: var(--font-mono);
        font-size: 9px;
        font-weight: 650;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .pcard-market .v {
        font-size: 12px;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
      }
      .pcard-market .v.is-empty { color: var(--muted); opacity: 0.78; }

      /* Templates chip on each kanban card. Sits in its own row at the
         bottom of the card so it doesn't crowd the company name or premium.
         Click bubbles up but is captured before the card-click handler so
         the chip opens the template picker instead of the policy modal. */
      .pcard-actions {
        display: flex; gap: 6px; flex-wrap: wrap;
        margin-top: 4px;
      }
      .pcard-chip {
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 500;
        color: var(--muted);
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 3px 9px;
        cursor: pointer;
        transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
      }
      .pcard-chip:hover {
        color: var(--accent);
        border-color: var(--accent);
        background: var(--input-bg);
      }
      [data-theme="harper"] .pcard-chip:hover {
        color: #1a8f5e;
        border-color: rgba(26, 143, 94, 0.45);
      }

      /* Template picker modal — quick-pick popup that lets the user copy a
         template body to the clipboard from anywhere in the kanban view
         without opening the full email drafter. Uses the same modal-overlay
         tokens as other modals so it themes cleanly. */
      .tpl-picker {
        max-width: 720px;
        width: min(92vw, 720px);
        max-height: 86vh;
        display: flex; flex-direction: column; gap: 12px;
      }
      .tpl-picker-list {
        display: flex; flex-direction: column; gap: 8px;
        overflow-y: auto;
        padding: 2px;
      }
      .tpl-picker-row {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px;
        background: var(--input-bg);
        display: flex; flex-direction: column; gap: 6px;
      }

      /* ============ Standalone Templates tab (Personal nav) ============ */
      /* The full template library laid out as a scannable reference,
         not a modal. Search bar + kind filter at top, then category
         groups with copy-able cards. Designed to match the kanban
         template picker's card style so users build muscle memory. */
      .tplv-hero {
        padding: 18px 22px;
        margin-bottom: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
      }
      .tplv-hero h2 { font-size: 1.25rem; }
      .tplv-hero-lang { text-align: right; }
      .tplv-lang-note { font-size: var(--text-xs); margin-top: 6px; max-width: 260px; }

      /* v2.112.0 — EN/Español template language segmented toggle. Lives in
         the Templates hero, the SMS composer header, and the win-back
         modal (v2.112.1: removed from the Compose sidebar — flipping there
         couldn't re-write an inserted draft, so it looked broken). One
         delegated click handler (see setTemplateLang) drives every
         instance. */
      .tpl-lang-seg {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        border: 1px solid var(--border);
        border-radius: 999px;
        overflow: hidden;
        background: var(--bg);
        flex: none;
      }
      /* Inside the win-back modal title the seg sits next to the heading
         text — give it breathing room and keep it off the baseline. */
      .gy-wb-head-text h3 .tpl-lang-seg { margin-left: 10px; }
      .tpl-lang-btn {
        border: 0;
        background: transparent;
        color: var(--muted);
        font-size: var(--text-xs);
        font-weight: 600;
        padding: 4px 12px;
        cursor: pointer;
        line-height: 1.4;
      }
      .tpl-lang-btn.is-active {
        background: var(--accent);
        color: #fff;
      }
      .tpl-lang-btn:not(.is-active):hover { color: var(--text); }

      /* v26.83 — Patch Notes view. Stacked timeline of release entries,
         each card listing the version + date + change items. Items are
         color-coded by kind (added / changed / fixed / removed) using
         small pill badges that match the existing accent/danger/warning
         palette. */
      .pn-hero {
        padding: 18px 22px;
        margin-bottom: 14px;
      }
      .pn-hero h2 { font-size: 1.25rem; }
      .pn-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .pn-card {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 16px 18px;
      }
      .pn-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px 14px;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border);
      }
      /* v26.84 — header is now a full-width button (clickable to
         expand/collapse). Chevron rotates -90deg when collapsed. */
      button.pn-head {
        width: 100%;
        background: transparent;
        border: 0;
        text-align: left;
        cursor: pointer;
        font: inherit;
        color: var(--text);
        padding: 0 0 10px;
        border-radius: 6px;
        transition: background 0.12s;
      }
      button.pn-head:hover { background: var(--input-bg); padding-left: 4px; padding-right: 4px; margin: -2px -4px 12px; }
      .pn-chevron {
        display: inline-block;
        font-size: 13px;
        color: var(--muted);
        transition: transform 0.18s ease;
        transform-origin: 50% 50%;
        width: 14px;
        flex-shrink: 0;
      }
      .pn-card.is-collapsed .pn-chevron { transform: rotate(-90deg); }
      .pn-card.is-collapsed .pn-body    { display: none; }
      /* When collapsed, push summary up against the header for a tighter look. */
      .pn-card.is-collapsed .pn-summary { margin-bottom: 0; }
      .pn-summary {
        font-size: 13.5px;
        color: var(--muted);
        margin: 0 0 14px;
        line-height: 1.55;
        font-style: italic;
      }
      .pn-version-block {
        display: inline-flex;
        align-items: baseline;
        gap: 10px;
        flex-shrink: 0;
      }
      .pn-version {
        font-family: var(--font-mono);
        font-size: 13.5px;
        font-weight: 700;
        color: var(--accent);
        letter-spacing: 0;
      }
      [data-theme="harper"] .pn-version { color: #1a8f5e; }
      [data-theme="light"]  .pn-version { color: #0284C7; }
      .pn-date {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        font-weight: 500;
      }
      .pn-title {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 600;
        color: var(--text);
        margin: 0;
        letter-spacing: -0.01em;
        line-height: 1.25;
        flex: 1 1 auto;
        min-width: 0;
      }
      .pn-items {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .pn-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13.5px;
        color: var(--text);
        line-height: 1.5;
      }
      .pn-kind {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        padding: 2px 8px;
        border-radius: 5px;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        line-height: 1.6;
        margin-top: 2px;
      }
      .pn-kind-added {
        background: rgba(34, 145, 90, 0.16);
        color: #1a8f5e;
        border: 1px solid rgba(34, 145, 90, 0.32);
      }
      .pn-kind-changed {
        background: rgba(56, 132, 255, 0.16);
        color: #1e4ec5;
        border: 1px solid rgba(56, 132, 255, 0.32);
      }
      .pn-kind-fixed {
        background: rgba(154, 107, 22, 0.16);
        color: #8a5e10;
        border: 1px solid rgba(154, 107, 22, 0.32);
      }
      .pn-kind-removed {
        background: rgba(142, 43, 34, 0.14);
        color: #8E2B22;
        border: 1px solid rgba(142, 43, 34, 0.32);
      }
      .pn-text {
        flex: 1 1 auto;
      }
      /* v26.84 — rich-change card (Problem / Solution / Implementation / Rationale).
         Each change in a release gets its own block with a header and four
         labeled sections. Visually nested inside the parent .pn-card so the
         version is the unit of release and each change is the unit of work. */
      .pn-changes {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .pn-change {
        padding: 14px 14px 12px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 8px;
      }
      .pn-change-head {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px dashed var(--border);
      }
      /* v2.297.0 — compact {kind, text} change: no sections below, so no
         dangling divider. */
      .pn-change--compact .pn-change-head {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }
      .pn-change-title {
        font-family: var(--font-display);
        font-size: 14.5px;
        font-weight: 600;
        color: var(--text);
        line-height: 1.35;
        flex: 1 1 auto;
      }
      .pn-change-section {
        margin-top: 10px;
      }
      .pn-change-section:first-of-type {
        margin-top: 0;
      }
      .pn-change-section-label {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--muted);
        margin-bottom: 4px;
      }
      .pn-change-section-body {
        font-size: 13.5px;
        color: var(--text);
        line-height: 1.6;
      }

      /* Expand-all / Collapse-all buttons in the patch notes hero */
      .pn-controls {
        display: inline-flex;
        gap: 6px;
      }
      .pn-control-btn {
        background: var(--input-bg);
        border: 1px solid var(--border);
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 11.5px;
        font-weight: 600;
        padding: 5px 11px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.12s, color 0.12s;
      }
      .pn-control-btn:hover {
        background: var(--panel);
        color: var(--text);
      }

      /* Sidebar NEW badge for unread patch notes — same rim placement as
         numeric badges, Harper green instead of iOS red. */
      .sidebar-nav .nav-count.nav-count-new {
        background: #1a8f5e;
        color: #fff !important;
        font-weight: 800;
        font-size: 8px;
        letter-spacing: 0.04em;
        padding: 0 5px;
        min-width: 28px;
        text-transform: uppercase;
        box-shadow: 0 2px 6px rgba(26, 143, 94, 0.35);
      }
      .sidebar-nav .nav-count.nav-count-new:empty { display: none; }

      /* Sticky toolbar with two stacked rows (v26.63). Row 1: search +
         kind filter. Row 2: category chips — the primary navigation
         when there are 6+ groups of templates. Sticks to the top of
         the scrollable container so the filters follow you down the
         page. */
      .tplv-toolbar-sticky {
        position: sticky;
        top: 0;
        z-index: 8;
        background: var(--bg);
        padding: 10px 0 8px;
        margin: 0 0 14px;
        border-bottom: 1px solid var(--border);
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
      }
      .tplv-toolbar-row {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 8px;
        min-width: 0;
        max-width: 100%;
      }
      .tplv-toolbar-row input[type="text"] {
        flex: 1 1 180px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
      }

      /* Category chip row — bigger than the kind pills since these are
         the primary nav. The active chip uses the brand accent fill so
         the current filter is unmistakable. */
      .tplv-cat-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .tplv-cat-pill {
        background: var(--input-bg);
        border: 1px solid var(--border);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 600;
        padding: 6px 13px;
        border-radius: 16px;
        cursor: pointer;
        transition: background 0.12s, color 0.12s, border-color 0.12s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        letter-spacing: -0.005em;
      }
      .tplv-cat-pill:hover {
        border-color: var(--text);
      }
      .tplv-cat-pill.is-active {
        background: var(--accent);
        color: #FFFFFF;
        border-color: var(--accent);
      }
      [data-theme="harper"] .tplv-cat-pill.is-active {
        background: #1a8f5e;
        border-color: #1a8f5e;
      }
      [data-theme="light"]  .tplv-cat-pill.is-active {
        background: #0284C7;
        border-color: #0284C7;
      }
      .tplv-cat-count {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        opacity: 0.6;
      }
      .tplv-cat-pill.is-active .tplv-cat-count {
        opacity: 0.85;
      }

      /* Keep the old toolbar styles for backwards-compat with anything
         else that uses .tplv-toolbar without -sticky. */
      .tplv-toolbar {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 14px;
      }
      .tplv-toolbar input[type="text"] { min-width: 260px; max-width: 380px; }

      /* v26.78 — global .tplv-kind-pills + .tplv-kind-pill CSS removed.
         The global Email/Text/All filter was retired in favor of
         per-section toggles in each accordion header. See
         .tplv-section-kind / .tplv-section-kind-pill below. */

      .tplv-group {
        margin-bottom: 18px;
      }
      /* v26.78 — category section is now an accordion. Header is a
         clickable button (full-width, looks like a card stripe) with a
         rotating chevron. Body collapses via .is-collapsed on .tplv-group.
         Per-section kind toggle pills sit in their own toolbar row below
         the header so the click target for collapse is unambiguous. */
      .tplv-group-header {
        display: flex;
        align-items: baseline;
        gap: 12px;
        width: 100%;
        text-align: left;
        margin: 18px 0 0;
        padding: 12px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-bottom: 3px solid var(--accent);
        border-radius: 8px 8px 0 0;
        cursor: pointer;
        font: inherit;
        color: var(--text);
        transition: background 0.12s;
      }
      .tplv-group-header:hover { background: var(--panel); }
      [data-theme="harper"] .tplv-group-header { border-bottom-color: #1a8f5e; }
      [data-theme="light"]  .tplv-group-header { border-bottom-color: #0284C7; }
      .tplv-group:first-child .tplv-group-header { margin-top: 6px; }
      .tplv-group-chevron {
        display: inline-block;
        font-size: 13px;
        color: var(--muted);
        transition: transform 0.18s ease;
        transform-origin: 50% 50%;
        flex-shrink: 0;
        width: 14px;
      }
      .tplv-group.is-collapsed .tplv-group-chevron {
        transform: rotate(-90deg);
      }
      .tplv-group.is-collapsed .tplv-group-header {
        border-bottom: 1px solid var(--border);
        border-radius: 8px;
      }
      .tplv-group-label-text {
        font-family: var(--font-display);
        font-size: 19px;
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.015em;
        line-height: 1.1;
        flex: 1 1 auto;
      }
      .tplv-group-count {
        font-family: var(--font-mono);
        font-size: 11.5px;
        background: var(--panel);
        color: var(--muted);
        padding: 3px 9px;
        border-radius: 10px;
        letter-spacing: 0;
        font-weight: 600;
        flex-shrink: 0;
      }
      .tplv-group-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-top: 0;
      }
      .tplv-group.is-collapsed .tplv-group-toolbar { display: none; }
      .tplv-group-body {
        padding: 14px 0 4px;
        border: 1px solid var(--border);
        border-top: 0;
        border-radius: 0 0 8px 8px;
        background: transparent;
      }
      .tplv-group-body > .tplv-card:first-child { margin-top: 0; }
      .tplv-group-body > .tplv-card { margin-left: 14px; margin-right: 14px; }
      .tplv-group.is-collapsed .tplv-group-body { display: none; }
      .tplv-section-empty {
        padding: 18px 16px;
        text-align: center;
        font-size: 13px;
        color: var(--muted);
        font-style: italic;
      }

      /* Per-section email/text toggle pills inside .tplv-group-toolbar.
         Same tab-style aesthetic as the global pills (which were retired
         in v26.78), but smaller — these are scoped to one category. */
      .tplv-section-kind {
        display: inline-flex;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 7px;
        padding: 2px;
        gap: 1px;
      }
      .tplv-section-kind-pill {
        background: transparent;
        border: none;
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 11.5px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.12s, color 0.12s;
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }
      .tplv-section-kind-pill:hover:not(:disabled):not(.is-active) { color: var(--text); }
      .tplv-section-kind-pill.is-active {
        background: var(--input-bg);
        color: var(--accent);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
      }
      [data-theme="harper"] .tplv-section-kind-pill.is-active { color: #1a8f5e; }
      [data-theme="light"]  .tplv-section-kind-pill.is-active { color: #0284C7; }
      .tplv-section-kind-pill.is-empty,
      .tplv-section-kind-pill:disabled {
        opacity: 0.35;
        cursor: not-allowed;
      }
      .tplv-section-kind-count {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 600;
        opacity: 0.85;
      }

      /* Expand-all / Collapse-all in the main toolbar */
      .tplv-collapse-controls {
        display: inline-flex;
        gap: 6px;
      }
      .tplv-collapse-btn {
        background: var(--input-bg);
        border: 1px solid var(--border);
        color: var(--muted);
        font-family: var(--font-sans);
        font-size: 11.5px;
        font-weight: 600;
        padding: 5px 11px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.12s, color 0.12s;
      }
      .tplv-collapse-btn:hover {
        background: var(--panel);
        color: var(--text);
      }
      .tplv-card {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 16px 18px;
        margin-bottom: 10px;
        transition: border-color 0.14s ease, box-shadow 0.14s ease;
      }
      .tplv-card:hover {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
      }
      .tplv-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
      }
      .tplv-card-titles { flex: 1; min-width: 0; }
      .tplv-card-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 650;
        font-size: var(--text-sm);
        color: var(--text);
      }
      .tplv-card-kind {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 3px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        flex-shrink: 0;
      }
      .tplv-card-kind-email {
        background: rgba(125, 211, 252, 0.18);
        color: #0284C7;
      }
      [data-theme="dark"] .tplv-card-kind-email {
        background: rgba(125, 211, 252, 0.12);
        color: #7DD3FC;
      }
      .tplv-card-kind-text {
        background: rgba(34, 197, 94, 0.16);
        color: #15803D;
      }
      [data-theme="dark"] .tplv-card-kind-text {
        background: rgba(34, 197, 94, 0.12);
        color: #6EE7B7;
      }
      .tplv-card-sub {
        font-size: 12px;
        color: var(--muted);
        margin-top: 4px;
      }
      .tplv-copy-btn {
        background: var(--accent);
        color: #FFFFFF;
        border: none;
        padding: 6px 14px;
        border-radius: 5px;
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.12s ease, transform 0.10s ease;
        flex-shrink: 0;
        letter-spacing: -0.005em;
      }
      [data-theme="harper"] .tplv-copy-btn { background: #1a8f5e; }
      [data-theme="light"]  .tplv-copy-btn { background: #0284C7; }
      .tplv-copy-btn:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
      }
      .tplv-copy-btn.is-copied {
        background: #16A34A !important;
        filter: none;
      }
      .tplv-card-subject {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
        padding: 8px 12px;
        background: var(--input-bg);
        border-radius: 6px;
        font-size: 13px;
        line-height: 1.5;
      }
      .tplv-card-subject-label {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        flex-shrink: 0;
        padding-top: 3px;
      }
      .tplv-card-body {
        background: var(--input-bg);
        padding: 12px 14px;
        border-radius: 6px;
        font-family: var(--font-sans);
        font-size: 13px;
        line-height: 1.6;
        color: var(--text);
        white-space: pre-wrap;
        word-wrap: break-word;
        margin: 0;
        max-height: 260px;
        overflow-y: auto;
      }
      .tplv-email-preview {
        max-height: 320px;
        overflow: auto;
        margin: 0;
      }
      .tpl-picker-row .tplv-email-preview {
        max-height: 280px;
      }
      .tplv-empty {
        padding: 60px 24px;
        text-align: center;
        color: var(--muted);
        font-size: var(--text-sm);
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
      }

      .tpl-picker-row .tp-head {
        display: flex; align-items: center; gap: 10px; justify-content: space-between;
      }
      .tpl-picker-row .tp-title { font-weight: 650; }
      .tpl-picker-row .tp-sub { color: var(--muted); font-size: var(--text-xs); }
      .tpl-picker-row .tp-subject {
        font-family: var(--font-mono); font-size: 11px;
        color: var(--muted);
        padding: 6px 8px;
        background: var(--bg);
        border: 1px dashed var(--border);
        border-radius: 6px;
      }
      .tpl-picker-row .tp-body {
        font-family: var(--font-mono); font-size: 11.5px;
        white-space: pre-wrap;
        max-height: 12em; overflow-y: auto;
        padding: 8px 10px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--text);
      }
      .tpl-picker-row .tp-copy.copied {
        border-color: var(--accent);
        color: var(--accent);
      }

      /* Policies table view (won / lost / cancelled) — kept for any
         leftover table markup (CSV reconcile panel still uses tables). */
      .policies-table th, .policies-table td {
        padding: 8px 10px;
      }
      .policies-table .col-renewal-date { width: 7rem; }
      .policies-table .col-premium { width: 6rem; text-align: right; font-family: var(--font-mono); }
      .policies-table .col-carrier { width: 14rem; }
      /* Line of business — can be a long comma-separated list (e.g.
         "Professional Liability/Errors & Omissions,General Liability").
         Cap the column width and truncate with an ellipsis; full value
         shows on hover via the cell's title attribute, and clicking the
         row opens the policy modal where it's shown in full. */
      .policies-table .col-line {
        max-width: 16rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* Book list cards — Full Book / Upcoming / Won / Lost / Cancelled.
         Labeled dossier rows so market + term fields are readable after
         the MGA/carrier backfill, not a naked spreadsheet. */
      .book-list-wrap { width: 100%; }
      .book-list-head,
      .book-row {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.2fr) minmax(210px, 1.15fr) 7.4rem;
        gap: 6px 16px;
        padding: 0 14px 0 16px;
      }
      .book-list-head {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 8px 14px 8px 16px;
        margin-bottom: 6px;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 650;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--muted);
        background: var(--bg);
        border-bottom: 1px solid var(--border);
      }
      .book-list-head span:last-child { text-align: right; }
      .book-list {
        display: flex;
        flex-direction: column;
        gap: 7px;
      }
      .book-row {
        grid-template-areas:
          "acct mkt term prem"
          "foot foot foot foot";
        align-items: start;
        padding: 11px 14px 10px 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--input-bg) 62%, var(--panel));
        cursor: pointer;
        position: relative;
        --book-accent: var(--muted);
      }
      .book-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--book-accent);
      }
      .book-row[data-stage="working"] { --book-accent: var(--accent); }
      .book-row[data-stage="archived_active"] { --book-accent: var(--lb-violet-text, #c4b5fd); }
      .book-row[data-stage="archived"] { --book-accent: var(--muted); }
      .book-row[data-stage="won"] { --book-accent: var(--lb-ok-text, #34d399); }
      .book-row[data-stage="lost"] { --book-accent: var(--danger); }
      .book-row[data-stage="cancelled"] { --book-accent: var(--muted); }
      .book-row:hover,
      .book-row:focus-visible {
        outline: none;
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
        background: color-mix(in srgb, var(--input-bg) 78%, var(--panel));
      }
      .book-row.is-touched {
        border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
      }
      .book-col-acct { grid-area: acct; min-width: 0; }
      .book-col-mkt { grid-area: mkt; min-width: 0; }
      .book-col-term { grid-area: term; min-width: 0; }
      .book-col-prem {
        grid-area: prem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        min-width: 0;
      }
      .book-col-prem .book-premium-kicker { white-space: nowrap; }
      .book-premium-kicker-2 { margin-top: 6px; }
      .book-row-foot {
        grid-area: foot;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        align-items: baseline;
        padding-top: 6px;
        margin-top: 2px;
        border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      }
      .book-name {
        font-size: 14.5px;
        font-weight: 650;
        letter-spacing: -0.015em;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .book-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        align-items: center;
        margin-top: 6px;
      }
      .book-badges .fb-loss-pill { margin-left: 0; }
      .book-flag {
        display: inline-flex;
        align-items: center;
        padding: 2px 7px;
        border-radius: 999px;
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 650;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted);
        background: var(--input-bg);
        border: 1px solid var(--border);
      }
      .book-flag-auto {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
        background: color-mix(in srgb, var(--accent) 12%, transparent);
      }
      .book-kv {
        display: grid;
        grid-template-columns: 4.7rem minmax(0, 1fr);
        gap: 1px 8px;
        align-items: baseline;
      }
      .book-col-mkt,
      .book-col-term {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .book-kicker {
        font-family: var(--font-mono);
        font-size: 9px;
        font-weight: 650;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .book-val {
        font-size: 12.5px;
        font-weight: 550;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
      }
      .book-val.is-empty,
      .book-foot-item.is-empty {
        color: var(--muted);
        font-weight: 450;
        opacity: 0.78;
      }
      .book-premium-kicker { text-align: right; }
      .book-premium {
        font-family: var(--font-mono);
        font-size: 15.5px;
        font-weight: 650;
        letter-spacing: -0.02em;
        white-space: nowrap;
        line-height: 1.2;
      }
      .book-days {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 650;
        margin-left: 4px;
        color: var(--muted);
      }
      .book-days.is-overdue { color: var(--danger); }
      .book-days.is-soon { color: var(--lb-warn-text, #fbbf24); }
      .book-foot-item {
        font-size: 11.5px;
        color: var(--text);
        min-width: 0;
      }
      .book-foot-item .book-kicker { margin-right: 4px; }
      .book-foot-note {
        flex: 1 1 12rem;
        min-width: 0;
        font-size: 11.5px;
        color: var(--muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .book-touched {
        font-family: var(--font-mono);
        font-size: 10.5px;
        color: var(--muted);
      }
      .book-empty {
        padding: 28px 12px;
        text-align: center;
        color: var(--muted);
        font-size: var(--text-sm);
      }
      @media (max-width: 920px) {
        .book-list-head { display: none; }
        .book-row {
          grid-template-columns: minmax(0, 1fr) auto;
          grid-template-areas:
            "acct prem"
            "mkt mkt"
            "term term"
            "foot foot";
        }
      }

      /* Policy detail modal — Apple-ish bubbly layout */
      .policy-detail.pm-shell {
        width: min(96vw, 52rem) !important;
        max-height: min(94vh, 52rem);
        border-radius: 22px;
        padding: 0 !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow:
          0 24px 80px rgba(0, 0, 0, 0.22),
          0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
      }
      [data-theme="light"] .policy-detail.pm-shell,
      [data-theme="harper"] .policy-detail.pm-shell {
        box-shadow:
          0 24px 64px rgba(29, 58, 71, 0.12),
          0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
      }
      .pm-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 0 22px 22px;
      }
      .pm-hero {
        padding: 22px 22px 18px;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
        background: linear-gradient(
          180deg,
          color-mix(in srgb, var(--input-bg) 55%, var(--panel)) 0%,
          var(--panel) 100%
        );
        flex-shrink: 0;
      }
      .pm-hero-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
      }
      .pm-stage-pill {
        display: inline-flex;
        align-items: center;
        padding: 5px 12px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-family: var(--font-mono);
        background: color-mix(in srgb, var(--accent) 16%, var(--panel));
        color: var(--accent);
        border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
      }
      [data-theme="harper"] .pm-stage-pill {
        background: rgba(26, 143, 94, 0.12);
        color: #1a8f5e;
        border-color: rgba(26, 143, 94, 0.25);
      }
      .pm-stage-pill.is-won { background: rgba(52, 211, 153, 0.14); color: var(--lb-ok-text, #34d399); border-color: rgba(52,211,153,0.3); }
      .pm-stage-pill.is-lost { background: rgba(251, 113, 133, 0.14); color: var(--lb-rose-text, #fb7185); border-color: rgba(251,113,133,0.3); }
      .pm-stage-pill.is-cancelled { background: rgba(148, 163, 184, 0.14); color: var(--muted); }
      .pm-hero-title {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.15;
      }
      /* Admin-only business rename + delete, sit under the hero title. */
      .pm-hero-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
      }
      .pm-rename-btn,
      .pm-delete-btn {
        margin-top: 0;
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--muted);
        font-size: 11px;
        font-weight: 600;
        font-family: var(--font-sans);
        padding: 3px 10px;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.12s ease;
        line-height: 1.3;
        align-self: flex-start;
      }
      .pm-rename-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .pm-delete-btn:hover {
        border-color: #fb7185;
        color: #fb7185;
      }
      .rd-modal-card {
        max-width: 640px;
        width: min(640px, 94vw);
      }
      .rd-body {
        margin: 14px 0 8px;
        max-height: min(60vh, 420px);
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .rd-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--panel);
      }
      .rd-row-name {
        font-weight: 650;
        font-size: 14px;
      }
      .rd-row-meta {
        margin: 3px 0 0;
        font-size: 12px;
        color: var(--muted);
        line-height: 1.4;
      }
      .rd-restore {
        flex-shrink: 0;
      }
      .pm-hero-meta {
        margin: 6px 0 0;
        font-size: var(--text-xs);
        color: var(--muted);
        line-height: 1.45;
      }
      .pm-hero-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
      }
      /* v2.139.0 — "Why it was lost" strip under the hero (lost stage
         only). Red-tinted so the loss story is the first thing the
         card says; the pill dims to a dashed "guess" look when the
         reason is inferred rather than recorded. */
      .pm-loss-banner {
        display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
        margin: 12px 22px 0;
        padding: 10px 14px;
        border: 1px solid rgba(251, 113, 133, 0.35);
        border-radius: var(--radius);
        background: rgba(251, 113, 133, 0.07);
      }
      .pm-loss-kicker {
        font-family: var(--font-mono);
        font-size: 10px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--danger, var(--lb-rose-text, #fb7185));
        white-space: nowrap;
      }
      .pm-loss-pill {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 12px;
        border-radius: 999px;
        font-size: var(--text-sm); font-weight: 650;
        color: var(--danger, var(--lb-rose-text, #fb7185));
        background: rgba(251, 113, 133, 0.12);
        border: 1px solid rgba(251, 113, 133, 0.45);
        max-width: 100%;
      }
      .pm-loss-pill.is-guess { border-style: dashed; opacity: 0.92; }
      .pm-loss-src {
        font-size: 11px; color: var(--muted);
      }
      .pm-loss-src.is-guess { font-style: italic; }
      .pm-loss-moved {
        font-family: var(--font-mono);
        font-size: 10.5px; color: var(--muted);
      }
      .pm-loss-set-btn { margin-left: auto; }
      /* Compact loss-reason pill in table rows (Full Book). */
      .fb-loss-pill {
        display: inline-flex; align-items: center; gap: 4px;
        margin-left: 6px;
        padding: 1px 8px;
        border-radius: 999px;
        font-size: 10px; font-weight: 650;
        color: var(--danger, var(--lb-rose-text, #fb7185));
        background: rgba(251, 113, 133, 0.10);
        border: 1px solid rgba(251, 113, 133, 0.35);
        white-space: nowrap;
      }
      .fb-loss-pill.is-guess { border-style: dashed; opacity: 0.85; }
      .pm-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border-radius: 999px;
        font-size: var(--text-xs);
        font-weight: 600;
        background: var(--input-bg);
        border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
        color: var(--text);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      }
      .pm-chip-label {
        color: var(--muted);
        font-weight: 500;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-family: var(--font-mono);
      }
      .pm-account-shell { margin: 18px 0 6px; }
      /* Quo comms panel (v2.60.0) — read-only call/text history in the
         policy modal, matched by phone number. */
      .pm-comms-list { display: flex; flex-direction: column; gap: 6px; }
      .pm-comms-item {
        display: flex; align-items: baseline; gap: 8px;
        padding: 7px 10px; border-radius: 10px; font-size: 13px;
        background: color-mix(in srgb, var(--input-bg) 45%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
      }
      .pm-comms-icon { flex: 0 0 auto; }
      .pm-comms-main { flex: 1 1 auto; min-width: 0; }
      .pm-comms-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
      .pm-comms-text {
        display: block; color: var(--muted); font-size: 12px;
        white-space: pre-wrap; overflow-wrap: anywhere;
      }
      .pm-comms-status.is-missed { color: var(--danger, #c0392b); font-weight: 600; }
      .pm-comms-more { color: var(--muted); font-size: 12px; padding: 4px 2px 0; }
      .pm-comms-empty { font-size: 13px; padding: 2px 2px 0; }
      .pm-account-card {
        border-radius: 18px;
        padding: 20px 20px 18px;
        background: color-mix(in srgb, var(--input-bg) 50%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
        box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .pm-account-card.is-loading {
        min-height: 88px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
        font-size: var(--text-sm);
      }
      .pm-account-card.is-empty {
        text-align: left;
        color: var(--muted);
        font-size: var(--text-sm);
        padding: 20px;
      }
      .pm-account-empty-note {
        font-size: var(--text-sm);
        color: var(--muted);
        line-height: 1.45;
      }
      .pm-account-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 2px;
        padding-bottom: 14px;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
      }
      .pm-account-head-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        flex-shrink: 0;
      }
      .pm-account-kicker {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-family: var(--font-mono);
        color: var(--muted);
        margin-bottom: 6px;
      }
      .pm-account-name {
        font-size: 1.2rem;
        font-weight: 750;
        letter-spacing: -0.02em;
        line-height: 1.22;
      }
      .pm-account-alias {
        margin-top: 4px;
        font-size: 11px;
        color: var(--muted);
      }
      .pm-account-badge {
        flex-shrink: 0;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: rgba(52, 211, 153, 0.12);
        color: var(--lb-ok-text, #34d399);
        border: 1px solid rgba(52, 211, 153, 0.22);
      }
      /* v2.152.5 — pipeline assignee on the Renewals company card. */
      .pm-assignees-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin: 0;
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--input-bg, var(--panel));
        color: var(--text);
        cursor: pointer;
        text-align: left;
        font-family: inherit;
      }
      .pm-assignees-btn:hover {
        border-color: var(--accent);
      }
      .pm-assignees-avatars {
        display: flex;
        align-items: center;
        flex-shrink: 0;
      }
      .pm-assignees-avatars .pl-avatar + .pl-avatar { margin-left: -4px; }
      .pm-assignees-copy {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
      }
      .pm-assignees-names {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--text);
      }
      .pm-assignees-hint {
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
      }
      .pm-contact-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .pm-contact-bubble {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        border-radius: 14px;
        background: var(--panel);
        border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
        font-size: var(--text-sm);
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      }
      .pm-contact-bubble .pm-bubble-icon { opacity: 0.55; font-size: 0.95rem; }
      a.pm-contact-bubble {
        text-decoration: none;
        color: var(--text);
        transition: border-color 0.12s, box-shadow 0.12s;
      }
      a.pm-contact-bubble:hover {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      }
      /* Click-to-copy fields (business name, email, phone). The contact
         bubbles become buttons; reset native button chrome to match the
         span version, then add a hover + a brief "copied" state. */
      button.pm-contact-bubble {
        cursor: pointer;
        font: inherit;
        font-weight: 500;
        color: var(--text);
        transition: border-color 0.12s, box-shadow 0.12s, color 0.12s;
      }
      button.pm-contact-bubble:hover {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      }
      .pm-contact-bubble.is-copied {
        border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
        color: var(--accent);
      }
      .pm-contact-bubble.is-copied .pm-bubble-icon { opacity: 1; }
      .pm-contact-edit-btn {
        font: inherit;
        font-size: 12px;
        font-weight: 650;
        padding: 6px 10px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--text);
        cursor: pointer;
      }
      .pm-contact-edit-btn:hover {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
      }
      .pm-contact-role-label {
        font-size: 10px;
        font-weight: 750;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        margin: 4px 0 6px;
      }
      .pm-contact-editor {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .pm-contact-editor-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .pm-contact-editor label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 11px;
        font-weight: 650;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .pm-contact-editor input {
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        text-transform: none;
        letter-spacing: normal;
        color: var(--text);
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--input-bg, var(--panel));
      }
      .pm-contact-editor-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 4px;
      }
      .pm-contact-hint {
        font-size: 11px;
        color: var(--muted);
        font-weight: 500;
        text-transform: none;
        letter-spacing: normal;
      }
      /* Business name rendered as a copy button — keep the big bold look. */
      button.pm-account-name {
        display: inline-block;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        text-align: left;
        cursor: pointer;
        color: var(--text);
        border-radius: 6px;
        transition: color 0.12s;
      }
      button.pm-account-name:hover { color: var(--accent); text-decoration: underline; }
      button.pm-account-name.is-copied { color: var(--accent); }
      .pm-stat-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 10px;
      }
      .pm-stat-bubble {
        padding: 12px 14px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--input-bg) 55%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
      }
      .pm-stat-bubble .pm-stat-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-family: var(--font-mono);
        color: var(--muted);
        margin-bottom: 5px;
      }
      .pm-stat-bubble .pm-stat-val {
        font-size: var(--text-sm);
        font-weight: 700;
        line-height: 1.35;
        word-break: break-word;
        color: var(--text);
      }
      .pm-desc-block {
        font-size: var(--text-sm);
        line-height: 1.55;
        color: color-mix(in srgb, var(--text) 88%, var(--muted));
      }
      .pm-desc-source {
        margin-top: 8px;
        font-size: 10px;
        font-family: var(--font-mono);
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .fee-law-block {
        margin-top: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: none;
      }
      .fee-law-block.is-compact {
        margin-top: 0;
        padding: 0;
        border-radius: 0;
      }
      .fee-law-block.is-loading .fee-law-summary { color: var(--muted); font-weight: 500; }
      .fee-law-head {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-bottom: 8px;
        flex-wrap: wrap;
      }
      .fee-law-head:empty { display: none; }
      .fee-law-title { display: none; }
      .fee-law-badge {
        font-family: var(--font-mono);
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        padding: 3px 9px;
        border-radius: 99px;
        border: 1px solid transparent;
        white-space: nowrap;
      }
      .fee-law-badge.ok { color: var(--lb-ok-text, #059669); background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.35); }
      [data-theme="dark"] .fee-law-badge.ok { color: #34d399; }
      .fee-law-badge.warn { color: var(--danger); background: rgba(251,113,133,0.10); border-color: rgba(251,113,133,0.35); }
      .fee-law-summary { font-weight: 700; font-size: var(--text-sm); line-height: 1.45; color: var(--text); }
      .fee-law-detail {
        margin-top: 8px;
        font-size: 12.5px;
        color: var(--muted);
        line-height: 1.5;
      }
      .fee-law-cite {
        margin-top: 10px;
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--muted);
        background: color-mix(in srgb, var(--input-bg) 70%, var(--panel));
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 6px 10px;
        display: block;
        max-width: 100%;
        word-break: break-word;
      }
      .fee-law-ref {
        margin-top: 8px;
        font-size: 10px;
        color: var(--muted);
        font-style: italic;
      }
      .pl-hover-fee-law { margin-top: 0; }
      /* v2.137.0 — standalone Fee Laws reference page: searchable grid
         of every state's broker / service fee rule (same dataset as
         the Surplus Tax Calculator, no longer trapped inside it). */
      .fee-laws-toolbar {
        display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
        margin-bottom: 14px;
        padding: 10px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .fee-laws-toolbar input[type="search"] {
        min-width: 22rem; border-radius: 10px; padding: 8px 12px;
      }
      .fee-laws-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 14px;
      }
      .fee-laws-card {
        padding: 16px 18px;
        border-radius: 14px;
        background: var(--panel);
        border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
        min-width: 0;
      }
      .fee-laws-card-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; margin-bottom: 8px;
      }
      .fee-laws-state {
        font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
      }
      /* Shared section panels for hover + company cards */
      .acct-section {
        padding: 12px 14px;
        border-radius: 12px;
        background: var(--panel);
        border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
      }
      .acct-section--subtle {
        background: color-mix(in srgb, var(--input-bg) 65%, var(--panel));
      }
      .acct-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 48%, transparent);
      }
      .acct-section-title {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--section-title);
        line-height: 1.25;
      }
      .acct-section-body { min-width: 0; }
      .acct-action-group {
        margin-bottom: 14px;
      }
      .acct-action-group:last-child { margin-bottom: 0; }
      .acct-action-label {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: -0.01em;
        font-family: inherit;
        color: var(--section-title);
        margin-bottom: 8px;
      }
      .pm-placement-block {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
      }
      .pm-placement-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
      }
      .pm-placement-title {
        font-size: 13px;
        font-weight: 750;
        letter-spacing: -0.01em;
        color: var(--text);
        margin: 0;
      }
      .pm-placement-meta {
        font-size: var(--text-xs);
        color: var(--muted);
        line-height: 1.4;
      }
      .pm-placement-badge {
        flex-shrink: 0;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        font-family: var(--font-mono);
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .pm-placement-badge.is-ready {
        background: color-mix(in srgb, #22c55e 18%, var(--panel));
        border: 1px solid color-mix(in srgb, #22c55e 45%, var(--border));
        color: color-mix(in srgb, var(--lb-ok-text, #22c55e) 85%, var(--text));
      }
      .pm-placement-badge.is-blocked {
        background: color-mix(in srgb, #ef4444 14%, var(--panel));
        border: 1px solid color-mix(in srgb, #ef4444 40%, var(--border));
        color: color-mix(in srgb, #ef4444 85%, var(--text));
      }
      .pm-placement-blockers {
        margin: 0 0 12px;
        padding: 10px 12px;
        border-radius: 12px;
        background: color-mix(in srgb, #ef4444 8%, var(--panel));
        border: 1px solid color-mix(in srgb, #ef4444 28%, var(--border));
        font-size: var(--text-xs);
        line-height: 1.45;
        color: color-mix(in srgb, #ef4444 75%, var(--text));
      }
      .pm-placement-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
        gap: 8px;
      }
      .pm-placement-portal {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 12px;
        border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
        background: var(--panel);
        font-size: var(--text-xs);
        font-weight: 600;
        line-height: 1.25;
        min-height: 38px;
      }
      .pm-placement-portal.is-good {
        border-color: color-mix(in srgb, #22c55e 42%, var(--border));
        background: color-mix(in srgb, #22c55e 10%, var(--panel));
      }
      .pm-placement-portal.is-bad {
        border-color: color-mix(in srgb, #ef4444 32%, var(--border));
        background: color-mix(in srgb, #ef4444 6%, var(--panel));
        color: color-mix(in srgb, var(--text) 72%, var(--muted));
      }
      .pm-placement-icon {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
      }
      .pm-placement-portal.is-good .pm-placement-icon {
        background: color-mix(in srgb, #22c55e 88%, #000);
        color: #fff;
      }
      .pm-placement-portal.is-bad .pm-placement-icon {
        background: color-mix(in srgb, #ef4444 82%, #000);
        color: #fff;
      }
      .pm-placement-name {
        flex: 1;
        min-width: 0;
        word-break: break-word;
      }
      .pm-bucket-current {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin: 0 0 12px;
        font-size: var(--text-sm);
      }
      .pm-bucket-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--accent) 14%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
        font-weight: 650;
        font-size: var(--text-sm);
      }
      .pm-bucket-pill.is-pending {
        background: color-mix(in srgb, var(--accent) 24%, var(--panel));
        border-color: var(--accent);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
      }
      .pm-bucket-arrow {
        font-weight: 700;
        color: var(--accent);
      }
      .pm-bucket-unsaved {
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--accent);
      }
      #policyBucketSection.has-pending-bucket {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
      }
      .pm-bucket-move-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .pm-bucket-btn {
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        cursor: pointer;
        transition: border-color 0.12s, background 0.12s;
      }
      .pm-bucket-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .pm-bucket-btn.is-active {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 18%, var(--bg));
        color: var(--accent);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
      }
      .pm-bucket-btn.is-pending.is-active {
        background: color-mix(in srgb, var(--accent) 28%, var(--bg));
      }
      .pm-bucket-btn.is-saving { opacity: 0.55; pointer-events: none; }
      .pm-panel {
        margin-top: 18px;
        padding: 18px;
        border-radius: 18px;
        background: color-mix(in srgb, var(--input-bg) 35%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      }
      .pm-panel-label {
        margin: 0 0 14px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--section-title);
      }
      .pm-panel-label .muted {
        font-weight: 600;
        color: var(--muted);
      }
      /* Beat .modal-card h3 { color: var(--muted) } inside policy / company card */
      .modal-card.policy-detail .acct-section-title,
      .modal-card.policy-detail .pm-panel-label,
      .pm-account-card .acct-section-title {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.02em;
        text-transform: none;
        color: var(--section-title);
      }
      .modal-card.policy-detail .pm-panel-label {
        margin: 0 0 14px;
      }
      .policy-detail .pm-form {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 18px 20px;
        align-items: start;
        align-content: start;
      }
      .policy-detail .pm-form > * {
        min-width: 0;
      }
      .policy-detail .pm-form label {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 11px;
        font-weight: 650;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .policy-detail .pm-form input:not([type="checkbox"]):not([type="radio"]),
      .policy-detail .pm-form select,
      .policy-detail .pm-form textarea {
        font-size: var(--text-sm);
        font-weight: 500;
        border-radius: 12px;
        padding: 9px 12px;
        border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
        background: var(--panel);
        color: var(--text);
        text-transform: none;
        letter-spacing: normal;
      }
      .policy-detail .pm-form textarea { min-height: 88px; resize: vertical; }
      /* Preferred-contact "check all that apply" pills. Styled to match the
         form labels above (small uppercase heading + chunky tappable pills). */
      .policy-detail .pm-form .pm-contactpref {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .pm-contactpref-label {
        font-size: 11px;
        font-weight: 650;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .pm-contactpref-hint {
        text-transform: none;
        letter-spacing: normal;
        font-weight: 500;
        opacity: 0.75;
      }
      .pm-contactpref-opts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .pm-quotes-panel {
        margin-top: 0;
      }
      .pm-quotes-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 6px;
      }
      .pm-quotes-hint { margin: 0 0 12px; font-size: var(--text-xs); line-height: 1.4; }
      .pm-quotes-list { display: flex; flex-direction: column; gap: 8px; }
      .pm-quote-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 10px;
        background: var(--surface-2, rgba(127,127,127,0.08));
        font-size: var(--text-xs);
      }
      .pm-quote-row.is-selected { outline: 1px solid var(--lb-ok-text, #34d399); }
      .pm-quote-row.is-pick { cursor: pointer; }
      .pm-quote-row.is-expiring {
        background: color-mix(in srgb, var(--accent) 10%, var(--surface-2, rgba(127,127,127,0.08)));
      }
      .pm-quote-row.is-rework { opacity: 0.62; }
      .pm-quote-badge {
        display: inline-block;
        margin-right: 8px;
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        background: color-mix(in srgb, var(--text) 10%, transparent);
        color: var(--muted);
        vertical-align: middle;
      }
      .is-expiring .pm-quote-badge {
        background: color-mix(in srgb, var(--accent) 22%, transparent);
        color: var(--text);
      }
      .is-rework .pm-quote-badge {
        background: color-mix(in srgb, var(--danger, #f87171) 18%, transparent);
        color: var(--danger, #f87171);
      }
      .pm-quote-meta { color: var(--muted); }
      .pm-check {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
        background: var(--panel);
        font-size: var(--text-sm) !important;
        font-weight: 600 !important;
        color: var(--text) !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
        user-select: none;
      }
      .pm-check:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
      .pm-check:active { transform: scale(0.97); }
      .pm-check input { width: 15px; height: 15px; margin: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
      /* Selected state: tint the whole pill so the preference reads at a glance. */
      .pm-check:has(input:checked) {
        background: color-mix(in srgb, var(--accent) 14%, var(--panel));
        border-color: color-mix(in srgb, var(--accent) 45%, transparent);
        color: var(--accent) !important;
      }
      [data-theme="harper"] .pm-check:has(input:checked) {
        background: rgba(26, 143, 94, 0.12);
        border-color: rgba(26, 143, 94, 0.4);
        color: #1a8f5e !important;
      }
      /* v2.160.10 — Remarketed is a labeled switch in line with the other
         renewal-detail fields (heading above, control row matching inputs). */
      .policy-detail .pm-form .pm-flag-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .pm-switch {
        position: relative;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 12px;
        min-height: 42px;
        cursor: pointer;
        user-select: none;
        text-transform: none !important;
        letter-spacing: normal !important;
        font-weight: 600 !important;
        color: var(--text) !important;
      }
      .pm-switch input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        border: 0;
        pointer-events: none;
      }
      .pm-switch-ui {
        position: relative;
        width: 44px;
        height: 26px;
        flex-shrink: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--muted) 28%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
        transition: background 0.15s ease, border-color 0.15s ease;
      }
      .pm-switch-knob {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.18);
        transition: transform 0.15s ease;
      }
      .pm-switch:has(input:checked) .pm-switch-ui {
        background: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 55%, transparent);
      }
      .pm-switch:has(input:checked) .pm-switch-knob {
        transform: translateX(18px);
      }
      .pm-switch-state {
        font-size: var(--text-sm);
        font-weight: 650;
        line-height: 1.2;
      }
      .pm-switch-state::before { content: attr(data-off); color: var(--muted); }
      .pm-switch:has(input:checked) .pm-switch-state::before {
        content: attr(data-on);
        color: var(--text);
      }
      .pm-switch-hint {
        display: block;
        font-size: 11px;
        font-weight: 500;
        color: var(--muted);
        text-transform: none;
        letter-spacing: normal;
      }
      /* Grouped searchable picker for Carrier / Wholesaler / Line. In-flow
         list rows (same idea as address suggestions) — never the browser's
         black autocomplete popup. Open list is full-width and tall enough
         to actually read. */
      .policy-detail .pm-form .pm-combo-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .policy-detail .pm-form .pm-followup-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(11rem, 13.5rem);
        gap: 18px 24px;
        align-items: start;
      }
      @media (max-width: 900px) {
        .policy-detail .pm-form .pm-followup-row {
          grid-template-columns: 1fr;
        }
      }
      .policy-detail .pm-form .pm-combo-field:has(.pm-combo.is-open) {
        grid-column: span 12;
      }
      .pm-combo {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
      }
      .pm-combo .pm-pick-value {
        width: 100%;
        padding-right: 40px !important;
      }
      .pm-combo .pm-pick-value[readonly] { cursor: text; }
      .pm-combo-caret {
        position: absolute;
        right: 4px;
        top: 8px;
        width: 32px;
        height: 32px;
        border: 0;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
        padding: 0;
        z-index: 1;
      }
      .pm-combo.is-open .pm-combo-caret { transform: rotate(180deg); color: var(--text); }
      .pm-combo-caret:hover { color: var(--text); }
      .pm-pick-panel {
        display: none;
        flex-direction: column;
        gap: 6px;
        margin-top: 8px;
        width: 100%;
        flex: 1 0 100%;
      }
      .pm-combo.is-open .pm-pick-panel { display: flex; }
      .pm-pick-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: min(52vh, 420px);
        overflow: auto;
        padding: 0;
      }
      .pm-pick-group {
        padding: 10px 4px 4px;
        font-size: 11px;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
      }
      .pm-pick-group:first-child { padding-top: 2px; }
      .pm-pick-row {
        font-family: inherit;
        font-size: 15px;
        font-weight: 650;
        text-align: left;
        text-transform: none;
        letter-spacing: normal;
        line-height: 1.4;
        padding: 12px 14px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--input-bg, var(--panel));
        color: var(--text);
        cursor: pointer;
        width: 100%;
      }
      .pm-pick-row:hover,
      .pm-pick-row.is-active {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
        background: color-mix(in srgb, var(--accent) 12%, var(--input-bg, var(--panel)));
      }
      .pm-pick-row.is-selected {
        border-color: color-mix(in srgb, var(--accent) 55%, transparent);
        color: var(--accent);
      }
      .pm-pick-row.is-add {
        border-style: dashed;
        color: var(--accent);
        font-weight: 700;
      }
      .pm-pick-hint {
        padding: 6px 2px;
        font-size: 11px;
        color: var(--muted);
        text-transform: none;
        letter-spacing: normal;
        font-weight: 500;
      }
      .pm-combo.is-multi .pm-multi-face {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        width: 100%;
        min-height: 42px;
        padding: 6px 40px 6px 8px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--input-bg, var(--panel));
        box-sizing: border-box;
        cursor: text;
      }
      .pm-combo.is-multi.is-open .pm-multi-face {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
      }
      .pm-combo.is-multi .pm-pick-value {
        flex: 1 1 140px;
        min-width: 120px;
        width: auto !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 6px 4px !important;
      }
      .pm-multi-chips {
        display: contents;
      }
      .pm-multi-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        padding: 5px 8px 5px 10px;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
        background: color-mix(in srgb, var(--accent) 14%, var(--panel));
        color: var(--text);
        font-size: 13px;
        font-weight: 650;
        line-height: 1.25;
      }
      .pm-multi-chip-x {
        border: 0;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        padding: 0 2px;
      }
      .pm-multi-chip-x:hover { color: var(--text); }
      .pm-pick-row.is-selected::before {
        content: "✓ ";
        color: var(--accent);
        font-weight: 800;
      }
      .policy-detail .pm-foot {
        padding: 14px 22px 18px;
        border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
        background: var(--panel);
        flex-shrink: 0;
      }
      .policy-detail .pm-foot .email-cta {
        margin-top: 14px;
        border-radius: 16px;
      }
      /* v2.65.1 — company-card tabbed dashboard. Tab bar sits under the
         hero on every screen size; the active tab's body partitions into
         columns on wide screens (each scrolling internally) and stacks on
         narrow ones. Workspace = bucket (first, always in view) + account
         + renewal details + comments. More tab = placement · comms ·
         activity. */
      .pm-tabs {
        display: flex; gap: 4px; flex-shrink: 0;
        padding: 8px 22px 0;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
        background: var(--panel);
      }
      .pm-tab {
        border: 0; background: transparent; cursor: pointer;
        font-family: inherit; font-size: 13px; font-weight: 600;
        color: var(--muted); padding: 8px 14px 10px;
        border-radius: 10px 10px 0 0; position: relative;
      }
      .pm-tab:hover { color: var(--text); background: color-mix(in srgb, var(--input-bg) 55%, transparent); }
      .pm-tab.is-active { color: var(--text); }
      .pm-tab.is-active::after {
        content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
        height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
      }
      @media (min-width: 1100px) {
        .policy-detail.pm-shell {
          width: min(96vw, 110rem) !important;
          height: 94vh;
          max-height: 94vh;
        }
        .pm-dash {
          display: grid;
          grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
          gap: 16px;
          padding: 16px 22px 18px;
          overflow: hidden;
        }
        .pm-dash.hide { display: none; }
        .pm-col {
          display: flex; flex-direction: column; gap: 16px;
          min-width: 0; min-height: 0;
          overflow-y: auto;
        }
        .pm-dash .pm-panel { margin-top: 0; flex-shrink: 0; }
        .pm-dash .pm-account-shell { margin: 0; }
        /* Workspace middle: renewal details fills, form scrolls inside. */
        .pm-col-mid { overflow: hidden; }
        #policyDetailsSection {
          flex: 1 1 auto; min-height: 0;
          display: flex; flex-direction: column;
        }
        #policyDetailsSection .pm-form {
          flex: 1 1 auto; min-height: 0; overflow-y: auto;
          align-content: start;
          padding-right: 4px;
        }
        /* Workspace right: comments fill the column, list scrolls. */
        .pm-col-right { overflow: hidden; }
        #policyCommentsSection {
          flex: 1 1 auto; min-height: 0;
          display: flex; flex-direction: column;
        }
        #policyCommentsSection .comments-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
        #policyCommentsSection .pm-comment-add { flex-shrink: 0; }
        /* More tab: three equal reference columns, each scrolls itself. */
        .pm-dash-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); }
        .pm-dash-quotes { grid-template-columns: minmax(0, 1fr); }
        /* v2.137.0 — PSS card's two-column tabs (Post-Sales:
           financials | provenance; More: comms | activity). */
        .pm-dash-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
        #policyActivitySection .activity-list .when { width: 8.5rem; }
      }

      /* Legacy summary grid — kept for other views if referenced */
      .policy-detail .summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px 16px;
        margin: 12px 0;
        font-size: var(--text-sm);
      }
      @media (max-width: 700px) { .policy-detail .summary { grid-template-columns: 1fr 1fr; } }
      .policy-detail .summary .field-name {
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 10px;
        color: var(--muted);
      }
      .policy-detail .summary .field-val {
        font-weight: 500;
        word-break: break-word;
      }
      .policy-detail .summary .field-val.empty { color: var(--muted); font-style: italic; font-weight: 400; }

      /* ============ Audit Log view ============ */
      /* Admin-only tab. Wide table of (timestamp, actor, action, summary,
         IP). Action category is color-coded for quick scanning — auth.* in
         neutral, ticket.* in cyan, policy.* in violet, settings.* in amber,
         assign_notif.* in orange. */
      .audit-toolbar {
        display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
        margin-bottom: 12px;
        padding: 10px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .audit-toolbar select,
      .audit-toolbar input[type="text"] {
        padding: 6px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
      }
      .audit-toolbar input[type="text"] { min-width: 240px; }
      .audit-table-wrap {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow-x: auto;
      }
      .audit-table {
        width: 100%;
        font-size: var(--text-sm);
      }
      .audit-table th, .audit-table td {
        padding: 7px 10px;
        text-align: left;
        vertical-align: top;
      }
      .audit-table thead th {
        position: sticky; top: 0;
        background: var(--input-bg);
        border-bottom: 1px solid var(--border);
        font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
        z-index: 1;
      }
      .audit-row { border-top: 1px solid var(--border); }
      .audit-row:hover { background: var(--input-bg); }
      .audit-col-ts        { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; width: 11rem; color: var(--muted); }
      .audit-col-actor     { font-family: var(--font-mono); font-size: 11.5px; width: 9rem; }
      /* v2.149.0 — origin badge: who-kind-of-thing acted (agent / automation)
         vs a human manually in the UI (no badge). */
      .audit-origin-pill {
        display: inline-block; margin-left: 6px; padding: 1px 6px;
        border-radius: 999px; font-size: 9.5px; font-weight: 700;
        letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px;
      }
      .audit-origin-pill.origin-cursor-agent { background: rgba(96, 165, 250, 0.2); color: var(--lb-sky-text, #60a5fa); }
      .audit-origin-pill.origin-automation   { background: rgba(244, 114, 182, 0.18); color: var(--lb-pink-text, #f472b6); }
      [data-theme="light"] .audit-origin-pill.origin-cursor-agent { background: rgba(37, 99, 235, 0.10); color: #1d4ed8; }
      [data-theme="light"] .audit-origin-pill.origin-automation   { background: rgba(219, 39, 119, 0.10); color: #9d174d; }
      .audit-col-action    { width: 14rem; }
      .audit-col-summary   { word-break: break-word; }
      .audit-col-ip        { font-family: var(--font-mono); font-size: 10.5px; width: 8rem; white-space: nowrap; }

      /* Action pill — colored by category for fast scanning. */
      .audit-action-pill {
        display: inline-block;
        padding: 1px 7px;
        border-radius: 3px;
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 600;
        background: rgba(148, 163, 184, 0.15);
        color: var(--text);
        white-space: nowrap;
      }
      .audit-action-pill.audit-cat-auth         { background: rgba(125, 211, 252, 0.18); color: var(--lb-sky-text, #7dd3fc); }
      .audit-action-pill.audit-cat-ticket       { background: rgba(167, 139, 250, 0.18); color: var(--lb-violet-text, #a78bfa); }
      .audit-action-pill.audit-cat-policy       { background: rgba(52, 211, 153, 0.18);  color: var(--lb-ok-text, #34d399); }
      .audit-action-pill.audit-cat-settings     { background: rgba(251, 191, 36, 0.18);  color: var(--lb-warn-text, #fbbf24); }
      .audit-action-pill.audit-cat-assign_notif { background: rgba(251, 146, 60, 0.18);  color: var(--lb-orange-text, #fb923c); }
      [data-theme="light"] .audit-action-pill.audit-cat-auth         { background: rgba(2, 132, 199, 0.10);  color: #075985; }
      [data-theme="light"] .audit-action-pill.audit-cat-ticket       { background: rgba(124, 58, 237, 0.10); color: #5b21b6; }
      [data-theme="light"] .audit-action-pill.audit-cat-policy       { background: rgba(5, 150, 105, 0.10);  color: #065f46; }
      [data-theme="light"] .audit-action-pill.audit-cat-settings     { background: rgba(217, 119, 6, 0.10);  color: #92400e; }
      [data-theme="light"] .audit-action-pill.audit-cat-assign_notif { background: rgba(234, 88, 12, 0.10);  color: #9a3412; }
      [data-theme="harper"] .audit-action-pill.audit-cat-auth         { background: rgba(2, 132, 199, 0.10);  color: #075985; }
      [data-theme="harper"] .audit-action-pill.audit-cat-ticket       { background: rgba(124, 58, 237, 0.10); color: #5b21b6; }
      [data-theme="harper"] .audit-action-pill.audit-cat-policy       { background: rgba(5, 150, 105, 0.12);  color: #065f46; }
      [data-theme="harper"] .audit-action-pill.audit-cat-settings     { background: rgba(217, 119, 6, 0.12);  color: #92400e; }
      [data-theme="harper"] .audit-action-pill.audit-cat-assign_notif { background: rgba(234, 88, 12, 0.12);  color: #9a3412; }

      .audit-pagination {
        display: flex; gap: 12px; align-items: center; justify-content: center;
        margin-top: 12px;
      }
      .audit-pagination .chip:disabled { opacity: 0.4; cursor: not-allowed; }

      .eng-level-pill {
        display: inline-block; padding: 1px 7px; border-radius: 3px;
        font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
        letter-spacing: 0.04em; text-transform: uppercase;
      }
      .eng-level-error { background: rgba(248, 113, 113, 0.18); color: var(--danger, #f87171); }
      .eng-level-warn  { background: rgba(251, 191, 36, 0.18); color: var(--lb-warn-text, #fbbf24); }
      .eng-level-info  { background: rgba(148, 163, 184, 0.15); color: var(--muted); }
      [data-theme="light"] .eng-level-error { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }
      [data-theme="light"] .eng-level-warn  { background: rgba(217, 119, 6, 0.10); color: #92400e; }

      /* ============ Underwriters directory ============ */
      /* MGA groups → UW cards (expandable) → quirks list. Admin actions
         (edit / delete / add) appear inline when isAdmin. Designed for
         desktop primarily but stays usable at narrow widths. */
      .uw-toolbar {
        display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
        margin-bottom: 14px;
        padding: 10px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .uw-toolbar input[type="search"] {
        flex: 1 1 280px;
        min-width: 220px;
        padding: 7px 11px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
      }
      .uw-toolbar-spacer { flex: 1 1 auto; }
      .uw-groupby {
        display: inline-flex; align-items: center; gap: 6px;
        color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em;
      }
      .uw-groupby select {
        padding: 5px 8px;
        border: 1px solid var(--border);
        border-radius: 5px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        text-transform: none; letter-spacing: 0;
      }

      .uw-list-wrap { display: flex; flex-direction: column; gap: 16px; }
      .uw-group {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--input-bg);
        overflow: hidden;
      }
      .uw-group-head {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        background: var(--bg);
        cursor: pointer;
        user-select: none;
      }
      .uw-group-head:hover { background: var(--input-bg); }
      .uw-group-chevron {
        flex-shrink: 0;
        width: 14px;
        font-size: 11px;
        color: var(--muted);
        transition: transform 0.15s ease;
      }
      .uw-group.is-collapsed .uw-group-chevron { transform: rotate(-90deg); }
      .uw-group.is-collapsed .uw-group-head { border-bottom: 0; }
      .uw-group.is-collapsed .uw-cards,
      .uw-group.is-collapsed .uw-inline-form { display: none; }
      .uw-group-title {
        flex: 1 1 auto;
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 650;
        color: var(--accent);
        display: flex; align-items: baseline; gap: 8px;
      }
      [data-theme="harper"] .uw-group-title { color: #1a8f5e; }
      [data-theme="light"]  .uw-group-title { color: #075985; }
      .uw-group-actions { display: flex; gap: 6px; flex-wrap: wrap; }

      .uw-cards {
        display: flex; flex-direction: column;
        padding: 6px 8px;
      }
      .uw-card {
        border-bottom: 1px solid var(--border);
      }
      .uw-card:last-child { border-bottom: 0; }
      .uw-card-head {
        display: flex; align-items: center; gap: 10px;
        padding: 8px 6px;
      }
      .uw-card.is-expanded .uw-card-head { background: rgba(125, 211, 252, 0.05); }
      [data-theme="harper"] .uw-card.is-expanded .uw-card-head { background: rgba(26, 143, 94, 0.07); }
      .uw-toggle {
        flex: 1 1 auto;
        display: flex; align-items: center; gap: 8px;
        background: none; border: 0; cursor: pointer;
        padding: 4px 6px;
        font-family: inherit;
        font-size: var(--text-sm);
        color: var(--text);
        text-align: left;
      }
      .uw-toggle:hover { background: var(--input-bg); border-radius: 4px; }
      .uw-chev { color: var(--muted); font-size: 11px; width: 12px; display: inline-block; }
      .uw-name { font-weight: 600; }
      .uw-team-pill {
        font-family: var(--font-mono);
        font-size: 10.5px;
        padding: 1px 7px;
        border-radius: 3px;
        background: rgba(125, 211, 252, 0.16);
        color: var(--accent);
      }
      [data-theme="harper"] .uw-team-pill { background: rgba(26, 143, 94, 0.14); color: #1a8f5e; }
      [data-theme="light"]  .uw-team-pill { background: rgba(2, 132, 199, 0.10);  color: #075985; }
      .uw-quirk-count {
        font-family: var(--font-mono);
        font-size: 11px;
        padding: 1px 6px;
        border-radius: 3px;
        background: rgba(251, 191, 36, 0.18);
        color: var(--lb-warn-text, #fbbf24);
        white-space: nowrap;
      }
      [data-theme="harper"] .uw-quirk-count, [data-theme="light"] .uw-quirk-count {
        background: rgba(217, 119, 6, 0.12); color: #92400e;
      }
      .uw-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
      .uw-card-actions .chip { font-size: 11px; padding: 3px 8px; }

      .uw-card-body {
        padding: 8px 24px 14px 24px;
      }
      .uw-fields {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 4px 16px;
        margin-bottom: 12px;
      }
      .uw-fields .uw-field-area { grid-column: 1 / -1; }
      .uw-field-label {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        margin-right: 6px;
      }
      .uw-fields a { color: var(--accent); text-decoration: none; }
      .uw-fields a:hover { text-decoration: underline; }
      [data-theme="harper"] .uw-fields a { color: #1a8f5e; }
      [data-theme="light"]  .uw-fields a { color: #075985; }

      .uw-quirks {
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px dashed var(--border);
      }
      .uw-quirks-head {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 8px;
      }
      .uw-quirks-title {
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        font-weight: 700;
      }
      .uw-no-quirks { font-size: var(--text-xs); margin-top: 2px; }
      .uw-quirk-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
      .uw-quirk-item {
        display: flex; align-items: flex-start; gap: 6px;
        font-size: var(--text-sm);
        line-height: 1.45;
      }
      .uw-quirk-bullet { color: var(--muted); flex-shrink: 0; }
      /* pre-wrap keeps typed newlines (pseudo-lists like "- A\n- B") —
         without it HTML collapses them to spaces. Same fix as
         .iqp-quirk-text. Data always stored the newlines. */
      .uw-quirk-text { flex: 1 1 auto; white-space: pre-wrap; word-wrap: break-word; }
      .uw-quirk-meta { margin-left: 6px; font-size: 11px; }
      .uw-quirk-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.1s; }
      .uw-quirk-item:hover .uw-quirk-actions { opacity: 1; }
      .uw-quirk-actions button {
        background: none; border: 0; color: var(--muted);
        cursor: pointer; padding: 0 4px;
        font-size: 12px;
      }
      .uw-quirk-actions button:hover { color: var(--accent); }
      .uw-quirk-actions .uw-quirk-delete:hover { color: var(--danger); }

      .uw-inline-form {
        display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
        padding: 10px 14px;
        background: rgba(125, 211, 252, 0.06);
        border-bottom: 1px solid var(--border);
      }
      [data-theme="harper"] .uw-inline-form { background: rgba(26, 143, 94, 0.06); }
      .uw-inline-form input[type="text"],
      .uw-inline-form textarea {
        flex: 1 1 180px;
        padding: 5px 9px;
        border: 1px solid var(--border);
        border-radius: 5px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        min-width: 120px;
      }
      .uw-add-form input { min-width: 110px; }
      .uw-add-quirk-form { padding: 8px 0; background: transparent; border-bottom: 0; }
      .uw-add-quirk-form textarea { flex: 1 1 100%; }
      .chip.danger {
        border-color: rgba(239, 68, 68, 0.35);
        color: var(--danger);
      }
      .chip.danger:hover {
        background: rgba(239, 68, 68, 0.1);
      }

      /* Editor mode for UW card — full form replaces the head/body */
      .uw-card-editing {
        padding: 14px;
        background: rgba(125, 211, 252, 0.06);
      }
      [data-theme="harper"] .uw-card-editing { background: rgba(26, 143, 94, 0.06); }
      .uw-edit-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 8px 12px;
      }
      .uw-edit-grid label {
        display: flex; flex-direction: column;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        gap: 3px;
      }
      .uw-edit-grid label.uw-edit-area { grid-column: 1 / -1; }
      .uw-edit-grid input, .uw-edit-grid select {
        padding: 5px 9px;
        border: 1px solid var(--border);
        border-radius: 5px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        text-transform: none; letter-spacing: 0;
      }
      .uw-edit-actions {
        display: flex; gap: 6px; margin-top: 10px;
      }
      .uw-quirk-editing { flex-direction: column; gap: 6px; align-items: stretch; }
      .uw-quirk-edit-text {
        width: 100%;
        padding: 6px 9px;
        border: 1px solid var(--border);
        border-radius: 5px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
      }
      .uw-quirk-edit-actions { display: flex; gap: 6px; }

      /* ---- Regions / States / Specialties (feedback fb_8, fb_9) ---- */
      /* At-a-glance region pills in the card header. */
      .uw-region-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 2px; }
      .uw-region-pill {
        font-size: 10px;
        font-weight: 600;
        padding: 1px 7px;
        border-radius: 999px;
        background: rgba(125, 211, 252, 0.16);
        color: var(--lb-sky-text, #7dd3fc);
        white-space: nowrap;
      }
      [data-theme="harper"] .uw-region-pill { background: rgba(26, 143, 94, 0.14); color: #1a8f5e; }
      [data-theme="light"]  .uw-region-pill { background: rgba(2, 132, 199, 0.10);  color: #075985; }

      /* Read-view facet blocks inside the expanded body. */
      .uw-facets { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
      .uw-facet-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
      .uw-tag-wrap { display: inline-flex; flex-wrap: wrap; gap: 4px; }
      .uw-tag {
        font-size: 11px;
        font-weight: 600;
        padding: 1px 8px;
        border-radius: 999px;
        white-space: nowrap;
      }
      .uw-tag-region { background: rgba(125, 211, 252, 0.16); color: var(--lb-sky-text, #7dd3fc); }
      .uw-tag-state  { background: rgba(167, 139, 250, 0.16); color: var(--lb-violet-text, #c4b5fd); font-family: var(--font-mono); }
      [data-theme="harper"] .uw-tag-region { background: rgba(26, 143, 94, 0.14); color: #1a8f5e; }
      [data-theme="light"]  .uw-tag-region { background: rgba(2, 132, 199, 0.10);  color: #075985; }
      [data-theme="light"]  .uw-tag-state  { background: rgba(109, 40, 217, 0.10);  color: #5b21b6; }
      .uw-facet-spec .uw-field-label { display: block; margin-bottom: 4px; }
      .uw-spec-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
      .uw-spec-list li { font-size: var(--text-sm); }
      .uw-no-spec { font-size: var(--text-sm); font-style: italic; }
      .uw-tag-region-ex {
        background: rgba(239, 68, 68, 0.14); color: var(--lb-bad-text, #f87171);
        text-decoration: line-through;
      }
      [data-theme="light"] .uw-tag-region-ex { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }

      /* Read-only state coverage grid (served / via-region / excluded). */
      .uw-facet-states { margin-top: 2px; }
      .uw-states-head { display: block; margin-bottom: 7px; }
      .uw-stlegend {
        display: inline-flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
        margin-left: 10px; text-transform: none; letter-spacing: 0;
        font-size: 12.5px; color: var(--text);
      }
      .uw-stlegend .uw-stcell {
        cursor: default; font-size: 12px; padding: 2px 7px; min-width: 20px;
      }
      .uw-stgrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
        gap: 4px;
      }
      .uw-stcell {
        font-family: var(--font-mono); font-size: 11px; font-weight: 600;
        text-align: center; padding: 3px 0; border-radius: 5px;
        border: 1px solid transparent; user-select: none;
      }
      .uw-stcell-served   { background: rgba(34, 197, 94, 0.20);  color: var(--lb-ok-text, #4ade80); border-color: rgba(34,197,94,0.35); }
      .uw-stcell-region   { background: rgba(34, 197, 94, 0.09);  color: var(--lb-ok-text, #86efac); border-style: dashed; border-color: rgba(34,197,94,0.30); }
      .uw-stcell-excluded { background: rgba(239, 68, 68, 0.16);  color: var(--lb-bad-text, #f87171); text-decoration: line-through; border-color: rgba(239,68,68,0.30); }
      .uw-stcell-neutral  { background: rgba(148, 163, 184, 0.10); color: var(--muted); }
      [data-theme="light"] .uw-stcell-served   { background: rgba(22,163,74,0.14);  color: #15803d; }
      [data-theme="light"] .uw-stcell-region   { background: rgba(22,163,74,0.07);  color: #067647; }
      [data-theme="light"] .uw-stcell-excluded { background: rgba(220,38,38,0.10);  color: #b91c1c; }

      /* Tri-state edit cells (click to cycle serves → excluded → off). */
      .uw-tri-grid { display: flex; flex-wrap: wrap; gap: 5px; }
      .uw-tri-grid-states {
        max-height: 168px; overflow-y: auto;
        border: 1px solid var(--border); border-radius: 6px; padding: 8px;
        display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
      }
      .uw-tri {
        font-family: var(--font-mono); font-size: 11px; font-weight: 600;
        padding: 4px 8px; border-radius: 6px; cursor: pointer;
        border: 1px solid var(--border); background: rgba(148,163,184,0.10);
        color: var(--muted); transition: background .1s, color .1s, border-color .1s;
      }
      .uw-tri-grid-states .uw-tri { padding: 4px 0; text-align: center; }
      .uw-tri-neutral:hover { border-color: var(--accent); }
      .uw-tri-served   { background: rgba(34,197,94,0.22);  color: var(--lb-ok-text, #4ade80); border-color: rgba(34,197,94,0.45); }
      .uw-tri-excluded { background: rgba(239,68,68,0.18);  color: var(--lb-bad-text, #f87171); border-color: rgba(239,68,68,0.45); text-decoration: line-through; }
      [data-theme="light"] .uw-tri-served   { background: rgba(22,163,74,0.16);  color: #15803d; }
      [data-theme="light"] .uw-tri-excluded { background: rgba(220,38,38,0.12);  color: #b91c1c; }

      /* Edit/add facet controls. */
      .uw-facet-edit {
        display: flex; flex-direction: column; gap: 10px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed var(--border);
        flex: 1 1 100%;  /* full-width row when inside the flex add-form */
      }
      .uw-facet-edit-label {
        font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
        color: var(--muted); margin-bottom: 5px;
      }
      .uw-facet-edit-label .muted { text-transform: none; letter-spacing: 0; }
      .uw-check-grid {
        display: flex; flex-wrap: wrap; gap: 4px 12px;
      }
      .uw-check-grid-states {
        max-height: 132px; overflow-y: auto;
        border: 1px solid var(--border); border-radius: 6px;
        padding: 8px; gap: 4px 10px;
      }
      .uw-check {
        display: inline-flex; align-items: center; gap: 5px;
        font-size: var(--text-sm); cursor: pointer; user-select: none;
      }
      .uw-check input { cursor: pointer; margin: 0; }
      .uw-check-state { min-width: 52px; font-family: var(--font-mono); }
      .uw-spec-input {
        width: 100%;
        padding: 6px 9px;
        border: 1px solid var(--border);
        border-radius: 5px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        resize: vertical;
      }
      .uw-add-form-actions { display: flex; gap: 6px; margin-top: 4px; flex: 1 1 100%; }
      .uw-facet-filter select { text-transform: none; letter-spacing: 0; }

      .uw-empty {
        padding: 40px 20px;
        text-align: center;
        font-size: var(--text-sm);
      }

      /* ============ IQ Portals ============ */
      /* Parallel to Underwriters but flatter (no MGAs), no contact fields,
         with line-of-business pills. Same theme-aware color discipline as
         the Graveyard: a CSS variable per known line tag, three palettes
         (dark / light / harper), inline `style="--c: var(--iqp-c-<slug>)"`.
         Unknown / custom line tags fall back to a neutral grey. */
      :root {
        --iqp-c-workers__comp:          #34d399;
        --iqp-c-commercial_auto:        #fbbf24;
        --iqp-c-general_liability:      #7dd3fc;
        --iqp-c-professional_liability: #a78bfa;
        --iqp-c-property:               #fb7185;
        --iqp-c-bop:                    #c084fc;
        --iqp-c-tech_e_o:               #38bdf8;
        --iqp-c-cyber:                  #2dd4bf;
        --iqp-c-d_o:                    #f472b6;
        --iqp-c-epli:                   #facc15;
        --iqp-c-contractors:            #fb923c;
        --iqp-c-daycare:                #fda4af;
        --iqp-c-manufacturing:          #94a3b8;
        --iqp-c-specialty___e_s:        #d8b4fe;
        --iqp-c-multi-line:             #a3a3a3;
        --iqp-c-umbrella:               #60a5fa;
        --iqp-c-default:                #94a3b8;
      }
      [data-theme="light"] {
        --iqp-c-workers__comp:          #047857;
        --iqp-c-commercial_auto:        #b45309;
        --iqp-c-general_liability:      #075985;
        --iqp-c-professional_liability: #6d28d9;
        --iqp-c-property:               #be123c;
        --iqp-c-bop:                    #7e22ce;
        --iqp-c-tech_e_o:               #0369a1;
        --iqp-c-cyber:                  #0f766e;
        --iqp-c-d_o:                    #be185d;
        --iqp-c-epli:                   #a16207;
        --iqp-c-contractors:            #c2410c;
        --iqp-c-daycare:                #be185d;
        --iqp-c-manufacturing:          #475569;
        --iqp-c-specialty___e_s:        #7e22ce;
        --iqp-c-multi-line:             #525252;
        --iqp-c-umbrella:               #1d4ed8;
        --iqp-c-default:                #475569;
      }
      [data-theme="harper"] {
        --iqp-c-workers__comp:          #065f46;
        --iqp-c-commercial_auto:        #92400e;
        --iqp-c-general_liability:      #075985;
        --iqp-c-professional_liability: #5b21b6;
        --iqp-c-property:               #9a3412;
        --iqp-c-bop:                    #6b21a8;
        --iqp-c-tech_e_o:               #075985;
        --iqp-c-cyber:                  #115e59;
        --iqp-c-d_o:                    #9d174d;
        --iqp-c-epli:                   #854d0e;
        --iqp-c-contractors:            #9a3412;
        --iqp-c-daycare:                #9d174d;
        --iqp-c-manufacturing:          #475569;
        --iqp-c-specialty___e_s:        #6b21a8;
        --iqp-c-multi-line:             #525252;
        --iqp-c-umbrella:               #1e40af;
        --iqp-c-default:                #475569;
      }

      /* ============ Producer Licenses ============ */
      /* NB: prl- prefix (not pl-) — pl- is already the Policies/pipeline
         list view's namespace; reusing it clobbered pipeline styles. */
      .prl-wrap { display: flex; flex-direction: column; gap: 18px; }

      /* Producer selector — gradient avatar cards */
      .prl-producers { display: flex; gap: 12px; flex-wrap: wrap; }
      .prl-producer-card {
        position: relative; display: flex; align-items: center; gap: 12px;
        padding: 11px 18px 11px 11px; min-width: 184px;
        border: 1px solid var(--border); border-radius: 16px;
        background: var(--panel); cursor: pointer; isolation: isolate;
        transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
      }
      .prl-producer-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.18); border-color: var(--accent); }
      .prl-producer-card.is-active { border-color: transparent; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.24); }
      .prl-producer-card.is-active::before {
        content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 2px;
        background: var(--prl-grad, var(--accent));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1;
      }
      .prl-avatar {
        width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff;
        background: var(--prl-grad, var(--accent)); box-shadow: 0 4px 12px rgba(0,0,0,0.28);
      }
      .prl-producer-meta { display: flex; flex-direction: column; gap: 3px; }
      .prl-producer-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); line-height: 1; }
      .prl-producer-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

      /* Hero header */
      .prl-hero {
        position: relative; overflow: hidden; isolation: isolate;
        border: 1px solid var(--border); border-radius: 20px;
        padding: 22px 24px; background: var(--panel);
      }
      .prl-hero::after {
        content: ""; position: absolute; right: -70px; top: -80px;
        width: 260px; height: 260px; border-radius: 50%;
        background: var(--prl-grad, var(--accent)); opacity: 0.16;
        filter: blur(26px); z-index: -1; pointer-events: none;
      }
      .prl-hero-top { display: flex; align-items: center; gap: 16px; }
      .prl-hero-avatar {
        width: 60px; height: 60px; border-radius: 18px; flex: 0 0 auto;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-display); font-weight: 800; font-size: 26px; color: #fff;
        background: var(--prl-grad, var(--accent)); box-shadow: 0 6px 18px rgba(0,0,0,0.3);
      }
      .prl-hero-name { font-family: var(--font-display); font-size: 1.65rem; font-weight: 800; color: var(--text); line-height: 1.05; letter-spacing: -0.01em; }
      .prl-hero-role { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 4px; }
      .prl-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
      .prl-stat {
        flex: 1 1 130px; min-width: 120px; padding: 13px 15px;
        border-radius: 14px; background: var(--input-bg); border: 1px solid var(--border);
      }
      .prl-stat-num { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; color: var(--text); line-height: 1; }
      .prl-stat-num.mono { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; word-break: break-all; }
      .prl-stat-label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 6px; }

      /* Search */
      .prl-searchwrap { position: relative; }
      .prl-searchwrap .prl-search-icon {
        position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
        width: 16px; height: 16px; color: var(--muted); pointer-events: none;
      }
      .prl-search {
        width: 100%; padding: 11px 14px 11px 38px; box-sizing: border-box;
        border: 1px solid var(--border); border-radius: 12px;
        background: var(--input-bg); color: var(--text);
        font-family: var(--font-sans); font-size: var(--text-sm);
        transition: border-color 0.14s, box-shadow 0.14s;
      }
      .prl-search:focus {
        outline: none; border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
      }

      /* State license cards */
      .prl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
      .prl-card {
        position: relative; overflow: hidden;
        border: 1px solid var(--border); border-radius: 16px;
        padding: 15px; background: var(--panel);
        transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
      }
      .prl-card::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
        background: var(--prl-grad, var(--accent)); opacity: 0.9;
      }
      .prl-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); border-color: var(--accent); }
      .prl-card.is-unlicensed { opacity: 0.62; }
      .prl-card.is-unlicensed::before { background: var(--muted); opacity: 0.4; }
      .prl-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
      .prl-plate {
        font-family: var(--font-mono); font-weight: 800; font-size: 13px; letter-spacing: 0.07em;
        padding: 5px 9px; border-radius: 9px; color: #fff;
        background: var(--prl-grad, var(--accent)); box-shadow: 0 2px 8px rgba(0,0,0,0.22);
        flex: 0 0 auto;
      }
      .prl-card.is-unlicensed .prl-plate { background: var(--muted); box-shadow: none; }
      .prl-card-state { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.12; }
      .prl-card-liclabel { font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }
      .prl-card-lic { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--text); word-break: break-all; margin-top: 2px; }
      /* Editable license number input — sits where .prl-card-lic would,
         visually quiet until focused so the grid still reads as a list. */
      .prl-lic-input {
        width: 100%; box-sizing: border-box; margin-top: 2px;
        font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text);
        background: transparent; border: 1px solid transparent; border-radius: 8px;
        padding: 4px 6px; transition: border-color 0.14s, background 0.14s;
      }
      .prl-lic-input::placeholder { color: var(--muted); font-weight: 500; }
      .prl-lic-input:hover { border-color: var(--border); background: var(--input-bg); }
      .prl-lic-input:focus {
        outline: none; border-color: var(--accent); background: var(--input-bg);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
      }
      .prl-npn-input {
        width: 100%; box-sizing: border-box;
        font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--text);
        background: var(--input-bg); border: 1px solid var(--border); border-radius: 9px;
        padding: 5px 8px; transition: border-color 0.14s, box-shadow 0.14s;
      }
      .prl-npn-input:focus {
        outline: none; border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
      }
      .prl-status {
        display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
        font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.06em;
        padding: 4px 9px; border-radius: 999px;
      }
      .prl-status .prl-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
      .prl-status.active  { color: #16a34a; background: color-mix(in srgb, #16a34a 16%, transparent); }
      .prl-status.active .prl-dot  { background: #16a34a; box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 22%, transparent); }
      .prl-status.pending { color: #d97706; background: color-mix(in srgb, #d97706 16%, transparent); }
      .prl-status.pending .prl-dot { background: #d97706; box-shadow: 0 0 0 3px color-mix(in srgb, #d97706 22%, transparent); }
      .prl-status.none { color: var(--muted); background: var(--input-bg); }
      .prl-status.none .prl-dot { background: var(--muted); }
      .prl-empty { color: var(--muted); padding: 36px; text-align: center; font-style: italic; grid-column: 1 / -1; }

      .iqp-toolbar {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 14px;
        padding: 10px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        flex-wrap: wrap;
      }
      .iqp-toolbar input[type="search"] {
        flex: 1 1 280px;
        min-width: 200px;
        padding: 7px 11px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
      }
      .iqp-toolbar-spacer { flex: 0 0 auto; }
      .iqp-groupby {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: var(--text-xs);
        color: var(--muted);
      }
      .iqp-groupby select {
        padding: 5px 8px;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text);
        border-radius: 5px;
        font-size: var(--text-xs);
      }

      .iqp-add-form {
        padding: 14px 16px;
        margin-bottom: 14px;
      }
      .iqp-add-head {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        font-weight: 700;
        margin-bottom: 8px;
      }
      .iqp-add-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      @media (max-width: 720px) { .iqp-add-grid { grid-template-columns: 1fr; } }
      .iqp-add-grid input {
        padding: 7px 10px;
        border: 1px solid var(--border);
        border-radius: 5px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
      }
      .iqp-add-hint {
        font-size: 10.5px;
        margin-top: 8px;
        line-height: 1.5;
      }
      .iqp-add-actions {
        display: flex; gap: 6px; justify-content: flex-end;
        margin-top: 10px;
      }
      .iqp-primary {
        background: color-mix(in srgb, var(--accent) 18%, var(--input-bg)) !important;
        border-color: color-mix(in srgb, var(--accent) 50%, var(--border)) !important;
        color: var(--accent) !important;
      }
      .iqp-primary:hover {
        background: color-mix(in srgb, var(--accent) 28%, var(--input-bg)) !important;
      }
      .iqp-danger {
        color: var(--danger) !important;
        border-color: color-mix(in srgb, var(--danger) 35%, var(--border)) !important;
      }
      .iqp-danger:hover {
        background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
      }

      .iqp-list-wrap {
        display: flex; flex-direction: column; gap: 14px;
      }
      .iqp-group {
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px 12px;
      }
      .iqp-group-head {
        display: flex; justify-content: space-between; align-items: baseline;
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px dashed var(--border);
      }
      .iqp-group-line {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text);
        font-weight: 700;
      }
      .iqp-group-count {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--muted);
      }
      .iqp-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 10px;
      }
      .iqp-card {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px 12px;
        display: flex; flex-direction: column; gap: 7px;
        transition: border-color 0.15s;
      }
      .iqp-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
      .iqp-card.is-expanded {
        grid-column: 1 / -1;
      }
      .iqp-card-head {
        display: flex; justify-content: space-between; align-items: center; gap: 10px;
        cursor: pointer;
        user-select: none;
      }
      .iqp-card-title {
        display: flex; align-items: center; gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
      }
      .iqp-card-name {
        font-size: var(--text-base);
        color: var(--text);
        font-weight: 650;
      }
      .iqp-card-url {
        font-size: 12px;
        color: var(--accent);
        text-decoration: none;
        opacity: 0.7;
      }
      .iqp-card-url:hover { opacity: 1; }
      .iqp-card-head-meta {
        display: flex; align-items: center; gap: 8px;
        flex-shrink: 0;
      }
      .iqp-quirk-badge {
        font-family: var(--font-mono);
        font-size: 10px;
        padding: 2px 7px;
        border-radius: 3px;
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--accent);
        border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      }
      .iqp-expand-chevron {
        color: var(--muted);
        font-size: 11px;
        width: 11px;
        text-align: center;
      }
      .iqp-card-lines {
        display: flex; flex-wrap: wrap; gap: 4px;
      }
      .iqp-line-pill {
        display: inline-flex; align-items: center;
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 3px;
        color: var(--c, var(--iqp-c-default));
        background: color-mix(in srgb, var(--c, var(--iqp-c-default)) 14%, transparent);
        border: 1px solid color-mix(in srgb, var(--c, var(--iqp-c-default)) 35%, transparent);
        white-space: nowrap;
      }

      /* Chip editor for the per-portal lines field (v26.64). Replaces
         the original comma-separated text input. Each label is a chip
         the same size and shape as the read-only pills (so the visual
         language is consistent between view and edit modes), with an
         × button to remove. The add-input below has datalist auto-
         complete and accepts free-form labels too — type a new tag
         and press Enter or comma to add it. */
      .iqp-lines-editor {
        display: flex; flex-direction: column; gap: 8px;
        padding: 8px 10px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 6px;
      }
      .iqp-lines-chips {
        display: flex; flex-wrap: wrap; gap: 6px;
        min-height: 22px;
      }
      .iqp-lines-chips:empty::before {
        content: "No labels yet — add one below";
        color: var(--muted);
        font-size: var(--text-xs);
        font-style: italic;
      }
      .iqp-lines-chip {
        display: inline-flex; align-items: center; gap: 4px;
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 600;
        padding: 2px 4px 2px 7px;
        border-radius: 3px;
        color: var(--c, var(--iqp-c-default));
        background: color-mix(in srgb, var(--c, var(--iqp-c-default)) 14%, transparent);
        border: 1px solid color-mix(in srgb, var(--c, var(--iqp-c-default)) 35%, transparent);
        white-space: nowrap;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
      }
      .iqp-lines-chip.is-flash {
        /* Brief flash when a user tries to add a duplicate, signaling
           "this one already exists" without throwing an error toast. */
        transform: scale(1.08);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--iqp-c-default)) 40%, transparent);
      }
      .iqp-lines-chip-x {
        background: transparent;
        border: none;
        padding: 0 2px;
        margin: 0;
        font-size: 13px;
        line-height: 1;
        color: inherit;
        opacity: 0.55;
        cursor: pointer;
        font-family: inherit;
        border-radius: 2px;
      }
      .iqp-lines-chip-x:hover { opacity: 1; background: rgba(0,0,0,0.08); }
      [data-theme="dark"] .iqp-lines-chip-x:hover { background: rgba(255,255,255,0.12); }
      .iqp-lines-add {
        display: flex; gap: 6px;
      }
      .iqp-lines-add-input {
        flex: 1;
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        padding: 5px 8px;
        border: 1px solid var(--border);
        border-radius: 5px;
        background: var(--bg);
        color: var(--text);
      }
      .iqp-lines-add-input::placeholder {
        color: var(--muted);
        font-style: italic;
      }
      .iqp-card-desc {
        font-size: var(--text-xs);
        line-height: 1.4;
      }

      .iqp-card-expanded {
        margin-top: 4px;
        padding-top: 10px;
        border-top: 1px dashed var(--border);
        display: flex; flex-direction: column; gap: 12px;
      }
      .iqp-detail-block {
        display: flex; flex-direction: column; gap: 6px;
      }
      .iqp-detail-row {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 10px;
        font-size: var(--text-sm);
        align-items: baseline;
      }
      .iqp-detail-label {
        font-family: var(--font-mono);
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
      }
      .iqp-detail-link {
        color: var(--accent);
        text-decoration: none;
        word-break: break-all;
      }
      .iqp-detail-link:hover { text-decoration: underline; }
      .iqp-detail-lines {
        display: flex; flex-wrap: wrap; gap: 4px;
      }

      .iqp-detail-edit {
        display: flex; flex-direction: column; gap: 8px;
        padding: 10px 12px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .iqp-field {
        display: flex; flex-direction: column; gap: 3px;
      }
      .iqp-field-label {
        font-family: var(--font-mono);
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
      }
      .iqp-field input {
        padding: 6px 9px;
        border: 1px solid var(--border);
        border-radius: 5px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
      }
      .iqp-field input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--ring);
      }

      .iqp-quirks-section {
        display: flex; flex-direction: column; gap: 8px;
      }
      .iqp-quirks-head {
        display: flex; justify-content: space-between; align-items: center;
      }
      .iqp-section-label {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        font-weight: 700;
      }
      .iqp-add-quirk-btn {
        font-size: 11px;
        padding: 4px 9px;
      }
      .iqp-quirks-list {
        display: flex; flex-direction: column; gap: 6px;
      }
      .iqp-quirks-empty {
        font-size: var(--text-xs);
        font-style: italic;
        padding: 6px 0;
      }
      .iqp-quirk-item {
        position: relative;
        padding: 8px 32px 8px 10px;
        background: var(--input-bg);
        border-left: 3px solid color-mix(in srgb, var(--accent) 50%, var(--border));
        border-radius: 4px;
        font-size: var(--text-sm);
        line-height: 1.5;
      }
      .iqp-quirk-item.is-editing {
        padding: 8px 10px;
        border-left-width: 3px;
      }
      .iqp-quirk-text {
        color: var(--text);
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      .iqp-quirk-meta {
        font-size: 10px;
        margin-top: 3px;
        line-height: 1.3;
      }
      .iqp-quirk-date {
        font-family: var(--font-mono);
      }
      .iqp-quirk-actions {
        position: absolute;
        top: 6px;
        right: 6px;
        display: flex;
        gap: 2px;
        opacity: 0;
        transition: opacity 0.15s;
      }
      .iqp-quirk-item:hover .iqp-quirk-actions { opacity: 1; }
      .iqp-quirk-btn {
        background: transparent;
        border: 0;
        color: var(--muted);
        cursor: pointer;
        padding: 2px 5px;
        font-size: 12px;
        line-height: 1;
        border-radius: 3px;
      }
      .iqp-quirk-btn:hover {
        background: color-mix(in srgb, var(--accent) 15%, transparent);
        color: var(--accent);
      }
      .iqp-quirk-btn-del:hover {
        background: color-mix(in srgb, var(--danger) 12%, transparent);
        color: var(--danger);
      }
      .iqp-quirk-add textarea,
      .iqp-quirk-item.is-editing textarea {
        width: 100%;
        padding: 7px 9px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 5px;
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        line-height: 1.5;
        resize: vertical;
        box-sizing: border-box;
      }
      .iqp-quirk-add { display: flex; flex-direction: column; gap: 6px; }
      .iqp-quirk-add-actions,
      .iqp-quirk-edit-actions {
        display: flex; gap: 6px; justify-content: flex-end;
      }

      .iqp-card-admin-actions {
        display: flex; gap: 6px; justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px dashed var(--border);
      }

      /* ---- Commission (v2.44) ---- */
      .iqp-comm-mini {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 600;
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
        border-radius: 999px;
        padding: 1px 8px;
        white-space: nowrap;
      }
      .iqp-comm-mini.is-varies { color: var(--muted); background: var(--input-bg); border-color: var(--border); }
      .iqp-comm-block { margin-top: 10px; }
      .iqp-comm-pills { display: flex; gap: 8px; flex-wrap: wrap; }
      .iqp-comm-pill {
        display: inline-flex; align-items: baseline; gap: 6px;
        font-family: var(--font-mono);
        font-size: 13px; font-weight: 700;
        color: var(--text);
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 4px 10px;
      }
      .iqp-comm-pill-k {
        font-size: 9.5px; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.06em; color: var(--muted);
      }
      .iqp-comm-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 8px;
        font-size: 12px;
      }
      .iqp-comm-table th {
        text-align: left;
        font-family: var(--font-mono);
        font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--muted); font-weight: 600;
        padding: 3px 8px; border-bottom: 1px solid var(--border);
      }
      .iqp-comm-table th:nth-child(2), .iqp-comm-table th:nth-child(3),
      .iqp-comm-table td:nth-child(2), .iqp-comm-table td:nth-child(3) {
        text-align: right; width: 68px; font-family: var(--font-mono);
      }
      .iqp-comm-table td { padding: 4px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
      .iqp-comm-notes { margin-top: 8px; font-size: 12px; line-height: 1.4; }

      .iqp-comm-edit { margin-top: 4px; }
      .iqp-comm-headline-edit { display: flex; gap: 12px; flex-wrap: wrap; }
      .iqp-comm-headline-edit label {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 12px; color: var(--muted);
      }
      .iqp-comm-headline-edit input { width: 84px; }
      .iqp-comm-billing-hint { font-size: 11px; margin: 8px 0 4px; }
      .iqp-comm-billing { display: flex; flex-direction: column; gap: 6px; }
      .iqp-comm-billing-row { display: flex; gap: 6px; align-items: center; }
      .iqp-comm-billing-row .iqp-comm-b-label { flex: 1 1 auto; min-width: 0; }
      .iqp-comm-billing-row .iqp-comm-b-new,
      .iqp-comm-billing-row .iqp-comm-b-renewal { width: 72px; flex: 0 0 auto; }
      .iqp-comm-b-x {
        flex: 0 0 auto;
        width: 26px; height: 26px;
        border: 1px solid var(--border); border-radius: 6px;
        background: var(--panel); color: var(--muted);
        cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
      }
      .iqp-comm-b-x:hover { border-color: var(--danger); color: var(--danger); }
      .iqp-comm-addrow { margin-top: 6px; align-self: flex-start; }
      .iqp-comm-notes-edit { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

      /* ---- Commission Table tab (v2.44) ---- */
      .ct-hint { font-size: 11px; white-space: nowrap; }
      .ct-wrap { margin-top: 12px; }
      .ct-summary { font-size: 12px; margin-bottom: 10px; }
      .ct-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
      }
      .ct-table thead th {
        text-align: left;
        font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--muted); font-weight: 600;
        padding: 9px 12px;
        background: var(--input-bg);
        border-bottom: 1px solid var(--border);
        position: sticky; top: 0; z-index: 1;
      }
      .ct-table th.ct-rate, .ct-table td.ct-rate { text-align: right; width: 84px; }
      .ct-table tbody td {
        padding: 10px 12px;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
        vertical-align: top;
      }
      .ct-table tbody tr:last-child td { border-bottom: none; }
      .ct-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
      .ct-name { white-space: nowrap; }
      .ct-name-text { font-weight: 600; }
      .ct-lines { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
      .ct-rate { font-family: var(--font-mono); font-weight: 700; }
      .ct-varies { color: var(--muted); font-style: italic; font-weight: 400; font-family: var(--font-sans); }
      .ct-breakdown { min-width: 240px; }
      .ct-billing { border-collapse: collapse; font-size: 12px; width: 100%; }
      .ct-billing td { padding: 2px 0; vertical-align: top; }
      .ct-billing td:first-child { padding-right: 12px; color: var(--text); }
      .ct-billing td:nth-child(2), .ct-billing td:nth-child(3) {
        text-align: right; width: 56px; font-family: var(--font-mono); color: var(--muted);
      }
      .ct-notes { font-size: 11.5px; line-height: 1.4; margin-top: 6px; }
      .ct-edit {
        margin-left: 8px;
        font-size: 11px;
        padding: 1px 7px;
        border: 1px solid var(--border); border-radius: 999px;
        background: transparent; color: var(--muted);
        cursor: pointer;
      }
      .ct-edit:hover { border-color: var(--accent); color: var(--accent); }
      .ct-empty { padding: 24px; text-align: center; }

      /* ============ Agentic Enablement (v2.51.0) ============
         Per-producer My Day digest: commitments read out of pipeline notes,
         triage suggestions with one-click accept, stale + quoted lists, and
         the agent narrative when configured. Prefixed `ag-`. */
      .ag-toolbar {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 12px; padding: 10px 14px;
        background: var(--input-bg); border: 1px solid var(--border);
        border-radius: var(--radius);
        flex-wrap: wrap;
      }
      .ag-title { font-size: 16px; font-weight: 700; }
      .ag-viewas {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 12.5px; color: var(--muted);
      }
      .ag-viewas select {
        min-width: 12rem; max-width: 18rem;
        padding: 5px 10px; border-radius: 8px;
        border: 1px solid var(--border); background: var(--panel);
        color: var(--text); font-size: 13px;
      }
      .ag-viewas-banner {
        margin: 0 0 12px; padding: 10px 14px;
        border-radius: var(--radius);
        border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
        background: color-mix(in srgb, var(--accent) 10%, var(--panel));
        font-size: 13px; line-height: 1.45;
      }
      .ag-viewas-banner strong { font-weight: 700; }
      /* v2.89.0 — post-sales team-lane gate panel (renewals digest gated) */
      .ag-team-gate {
        max-width: 640px;
        margin: 24px auto;
        padding: 20px 24px;
        border-radius: var(--radius);
        border: 1px solid rgba(168,85,247,0.32);
        background: color-mix(in srgb, rgba(168,85,247,0.08) 100%, var(--panel));
        font-size: 14px; line-height: 1.55;
      }
      .ag-team-gate-badge {
        display: inline-block;
        margin-bottom: 10px;
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 11px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.6px;
        color: #9333ea;
        background: rgba(168,85,247,0.12);
        border: 1px solid rgba(168,85,247,0.32);
      }
      .ag-team-gate p { margin: 0 0 10px; }
      .ag-team-gate p:last-child { margin-bottom: 0; }
      .ag-agentnote { margin-bottom: 10px; font-size: 12px; }
      .ag-agent-ok { color: var(--text); font-size: 12px; opacity: .8; }
      .ag-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
      .ag-stat {
        min-width: 110px; padding: 10px 14px; text-align: center;
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .ag-stat-num { font-size: 26px; font-weight: 700; }
      .ag-stat-label { font-size: 12px; opacity: .75; margin-top: 2px; }
      .ag-stat-bad .ag-stat-num { color: var(--lb-bad-text, #e5534b); }
      .ag-stat-warn .ag-stat-num { color: var(--lb-warn-text, #d29922); }
      .ag-stat-good .ag-stat-num { color: var(--lb-ok-text, #3fb950); }
      .recap-kicker {
        font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
        text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
      }
      .recap-lede {
        margin: 0 0 14px; font-size: 13px; color: var(--muted);
        line-height: 1.45; max-width: 52em;
      }
      .metrics-view {
        padding: 4px 0 48px;
        --metrics-on-fill: #ffffff;
        /* Okabe–Ito-style: blue / orange / magenta / slate — not red vs green, not green vs green. */
        --metrics-cat-a: #56B4E9;
        --metrics-cat-b: #E69F00;
        --metrics-cat-c: #CC79A7;
        --metrics-cat-d: #9CA3AF;
      }
      .metrics-section { margin: 22px 0 8px; }
      .metrics-section h3 {
        margin: 0 0 10px; font-size: var(--text-sm); font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
      }
      .metrics-partial {
        font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.45;
        max-width: none;
      }
      .metrics-lede { max-width: 62em; }
      .metrics-strip {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px; margin: 0 0 18px;
      }
      @media (max-width: 900px) { .metrics-strip { grid-template-columns: repeat(2, 1fr); } }
      .metrics-strip-card {
        padding: 16px 18px; border-radius: 12px;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--panel) 88%, var(--bg));
      }
      .metrics-strip-label {
        font-size: 11px; font-family: var(--font-mono); text-transform: uppercase;
        letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px;
      }
      .metrics-strip-num {
        font-size: 28px; font-weight: 750; font-family: var(--font-mono); line-height: 1.15;
        color: var(--text);
      }
      .metrics-strip-sub { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
      .metrics-chapters {
        position: sticky; top: 0; z-index: 6;
        display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
        padding: 10px 0 14px; margin: 0 0 16px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
      }
      .metrics-chapters .ag-subtab { font-size: 13px; }
      .metrics-lanes {
        display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
        margin: 0 0 14px;
      }
      .metrics-lanes-label {
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.08em; color: var(--muted); margin-right: 4px;
      }
      .metrics-chapter-panel { display: none; }
      .metrics-chapter-panel.is-active { display: block; }
      .metrics-board {
        display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start;
      }
      .metrics-panel {
        border: 1px solid var(--border); border-radius: 14px;
        padding: 22px 24px 26px;
        background: color-mix(in srgb, var(--panel) 90%, var(--bg));
        min-width: 0; overflow: visible;
      }
      .metrics-panel.is-wide { grid-column: 1 / -1; }
      .metrics-panel.is-elo {
        border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
        background: color-mix(in srgb, var(--accent) 7%, var(--panel));
      }
      .metrics-panel h3 {
        margin: 0 0 8px; font-size: 16px; font-weight: 750;
        letter-spacing: 0.01em; color: var(--text);
      }
      .metrics-panel-kicker {
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.08em; color: var(--accent); margin: 0 0 6px;
      }
      .metrics-viz-row {
        display: grid; grid-template-columns: minmax(300px, 380px) minmax(16rem, 1fr);
        gap: 40px; align-items: center;
      }
      @media (max-width: 900px) {
        .metrics-viz-row { grid-template-columns: 1fr; justify-items: center; }
      }
      .metrics-legend { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
      .metrics-legend-row {
        display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start;
        font-size: 14px; line-height: 1.35; color: var(--text);
      }
      .metrics-swatch {
        width: 22px; height: 22px; border-radius: 5px; margin-top: 0; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        font-family: var(--font-mono); font-size: 11px; font-weight: 700;
        color: #0b1220; line-height: 1;
      }
      .metrics-donut {
        overflow: visible;
        width: min(360px, 100%);
        height: auto;
        max-width: 100%;
      }
      .metrics-legend-val {
        font-family: var(--font-mono); font-size: 13px; color: var(--text);
        white-space: nowrap; text-align: right;
      }
      .metrics-ring { display: block; margin: 0 auto; height: auto; }
      .metrics-ring-item .metrics-ring { width: min(200px, 100%); }
      .metrics-rings {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 28px 24px; justify-items: center; text-align: center;
      }
      .metrics-ring-item { width: 100%; max-width: 240px; min-width: 0; }
      .metrics-ring-label { font-size: 14px; color: var(--text); margin-top: 8px; font-weight: 650; line-height: 1.35; }
      .metrics-ring-caption { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
      .metrics-funnel { display: flex; flex-direction: column; gap: 14px; }
      .metrics-funnel-step { min-width: 0; }
      .metrics-funnel-meta {
        display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
        font-size: 14px; margin-bottom: 6px; color: var(--text);
      }
      .metrics-funnel-bar {
        min-height: 32px; border-radius: 8px;
        background: var(--accent);
        display: flex; align-items: center; padding: 6px 12px;
        color: var(--metrics-on-fill, #ffffff); font-size: 13px; font-weight: 650;
        font-family: var(--font-mono); box-sizing: border-box;
        white-space: normal; line-height: 1.3;
      }
      .metrics-stack { margin: 8px 0 16px; }
      .metrics-stack-row {
        display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr minmax(11rem, auto);
        gap: 12px; align-items: center; margin: 10px 0; font-size: 14px; color: var(--text);
      }
      @media (max-width: 720px) {
        .metrics-stack-row { grid-template-columns: 1fr; gap: 6px; }
      }
      .metrics-stack-row > div:first-child { white-space: normal; overflow: visible; line-height: 1.35; }
      .metrics-stack-track {
        display: flex; height: 22px; border-radius: 8px; overflow: hidden;
        background: color-mix(in srgb, var(--muted) 18%, transparent);
      }
      .metrics-stack-hit { background: var(--accent); height: 100%; }
      .metrics-stack-miss { background: color-mix(in srgb, var(--muted) 45%, transparent); height: 100%; }
      .metrics-chart { margin-top: 8px; }
      .metrics-chart-axis {
        font-size: 12px; font-weight: 650; color: var(--muted);
        letter-spacing: 0.04em; margin-bottom: 12px; line-height: 1.4;
      }
      .metrics-cols {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
        gap: 16px 12px; align-items: end;
      }
      .metrics-col-wrap {
        display: flex; flex-direction: column; align-items: center;
        min-width: 0; gap: 8px;
      }
      .metrics-col-val {
        font-family: var(--font-mono); font-size: 13px; font-weight: 650;
        color: var(--text); text-align: center; line-height: 1.3;
        white-space: normal; overflow: visible;
      }
      .metrics-col-track {
        width: 100%; max-width: 72px; height: 180px;
        display: flex; align-items: flex-end;
        background: color-mix(in srgb, var(--muted) 16%, transparent);
        border-radius: 8px 8px 0 0;
      }
      .metrics-col-fill {
        width: 100%; background: var(--accent); border-radius: 8px 8px 0 0;
        min-height: 0;
      }
      .metrics-col-tick {
        font-size: 13px; color: var(--text); text-align: center;
        line-height: 1.35; white-space: normal; overflow: visible;
      }
      .metrics-agent-grid {
        display: grid; grid-template-columns: 1fr; gap: 24px;
      }
      .metrics-agent-card {
        border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px;
        background: color-mix(in srgb, var(--panel) 70%, var(--bg));
      }
      .metrics-agent-card .metrics-rings {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      @media (max-width: 800px) {
        .metrics-agent-card .metrics-rings { grid-template-columns: 1fr; }
      }
      .metrics-agent-card {
        border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px;
        background: color-mix(in srgb, var(--panel) 70%, var(--bg));
      }
      .metrics-agent-name { font-weight: 750; margin-bottom: 16px; font-size: 16px; color: var(--text); }
      .metrics-agent-meta { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.45; }
      .metrics-elo-row {
        display: grid; grid-template-columns: 2.4rem minmax(8rem, 16rem) 1fr minmax(9rem, auto);
        gap: 12px; align-items: center; margin: 10px 0; font-size: 14px; color: var(--text);
      }
      @media (max-width: 720px) {
        .metrics-elo-row { grid-template-columns: 2.4rem 1fr auto; }
        .metrics-elo-row .metrics-elo-track { grid-column: 1 / -1; }
      }
      .metrics-elo-name { white-space: normal; overflow: visible; line-height: 1.35; }
      .metrics-elo-rank {
        font-family: var(--font-mono); font-weight: 750; color: var(--muted); text-align: right;
      }
      .metrics-elo-rank.is-1 { color: var(--lb-warn-text, #f5b942); }
      .metrics-elo-track {
        height: 18px; border-radius: 9px; overflow: hidden;
        background: color-mix(in srgb, var(--muted) 16%, transparent);
      }
      .metrics-elo-fill { height: 100%; background: var(--accent); border-radius: 9px; }
      .metrics-table-wrap { overflow-x: auto; margin-top: 8px; }
      .metrics-panel .recap-table th, .metrics-panel .recap-table td {
        white-space: normal; overflow: visible;
      }
      .metrics-panel .bar-row {
        grid-template-columns: minmax(8rem, 16rem) 1fr minmax(7rem, auto);
        gap: 12px; margin: 8px 0; font-size: 14px;
      }
      .metrics-panel .bar-row > div:first-child {
        overflow: visible; white-space: normal; line-height: 1.35;
      }
      .metrics-panel .loss-reason-label span:last-child {
        overflow: visible; white-space: normal;
      }
      .metrics-channel-lab {
        font-size: 12px; color: var(--muted); margin: 8px 0 4px;
      }
      .metrics-park {
        padding: 14px 16px; border-radius: 10px; margin-bottom: 16px;
        border: 1px dashed color-mix(in srgb, var(--warn, #f59e0b) 45%, var(--border));
        background: color-mix(in srgb, var(--warn, #f59e0b) 10%, var(--panel));
        font-size: 13.5px; line-height: 1.5; color: var(--text);
      }
      [data-theme="light"] .bar-track,
      [data-theme="harper"] .bar-track,
      [data-theme="mono"] .bar-track { background: rgba(15, 23, 42, 0.10); }
      [data-theme="light"] .metrics-view,
      [data-theme="harper"] .metrics-view,
      [data-theme="mono"] .metrics-view {
        --metrics-on-fill: #ffffff;
        --metrics-cat-a: #0072B2;
        --metrics-cat-b: #B45309;
        --metrics-cat-c: #9D174D;
        --metrics-cat-d: #475569;
      }
      [data-theme="light"] .metrics-swatch,
      [data-theme="harper"] .metrics-swatch,
      [data-theme="mono"] .metrics-swatch { color: #ffffff; }
      @media (prefers-color-scheme: light) {
        html:not([data-theme]) .bar-track { background: rgba(15, 23, 42, 0.10); }
        html:not([data-theme]) .metrics-view {
          --metrics-on-fill: #ffffff;
          --metrics-cat-a: #0072B2;
          --metrics-cat-b: #B45309;
          --metrics-cat-c: #9D174D;
          --metrics-cat-d: #475569;
        }
        html:not([data-theme]) .metrics-swatch { color: #ffffff; }
      }
      .recap-prod-break {
        font-size: 12.5px; color: var(--muted); margin: -4px 0 12px;
      }
      .recap-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }
      .recap-table th, .recap-table td {
        padding: 8px 10px;
        text-align: left;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
      }
      .recap-table th {
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        font-weight: 600;
      }
      .recap-table .num { text-align: right; font-variant-numeric: tabular-nums; }
      .recap-table tr:hover td { background: var(--input-bg); }
      .recap-table-team td { font-weight: 700; border-bottom: none; }
      .recap-lane {
        display: inline-block; font-size: 10px; font-weight: 600;
        letter-spacing: 0.04em; text-transform: uppercase;
        padding: 1px 6px; border-radius: 999px; margin-left: 6px;
        border: 1px solid var(--border); color: var(--muted);
        vertical-align: 1px;
      }
      .recap-cal {
        margin: 0 0 16px; padding: 12px 14px;
        background: var(--panel); border: 1px solid var(--border);
        border-radius: 12px;
      }
      .recap-cal-head {
        display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
      }
      .recap-cal-title { font-weight: 700; font-size: 13.5px; flex: 1; }
      .recap-cal-nav {
        background: var(--input-bg); border: 1px solid var(--border);
        color: var(--text); border-radius: 8px; padding: 2px 10px;
        cursor: pointer; font-size: 13px;
      }
      .recap-cal-grid {
        display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
      }
      .recap-cal-dow {
        text-align: center; font-size: 10px; font-weight: 600;
        letter-spacing: 0.04em; text-transform: uppercase;
        color: var(--muted); padding: 4px 0;
      }
      .recap-cal-day {
        text-align: center; font-size: 12.5px; padding: 7px 0;
        border-radius: 8px; border: 1px solid transparent;
        color: var(--text); cursor: pointer; background: transparent;
      }
      .recap-cal-day:hover { background: var(--input-bg); }
      .recap-cal-day.is-empty { cursor: default; visibility: hidden; }
      .recap-cal-day.is-future { opacity: .35; cursor: default; }
      .recap-cal-day.has-log { font-weight: 700; }
      .recap-cal-day.has-log::after {
        content: ""; display: block; width: 4px; height: 4px;
        border-radius: 50%; background: var(--text); margin: 3px auto 0;
        opacity: .55;
      }
      .recap-cal-legend {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        margin-top: 10px; font-size: 11.5px; color: var(--muted);
      }
      .recap-cal-legend-swatch {
        display: inline-block; width: 6px; height: 6px; border-radius: 50%;
        background: var(--text); opacity: .7; vertical-align: 1px;
      }
      .recap-cal-day.is-today { border-color: var(--border); }
      .recap-cal-day.is-on { background: var(--input-bg); border-color: var(--text); }
      .recap-cal-day.is-in-week { background: var(--input-bg); }
      .recap-cal-day:disabled { cursor: default; }
      .recap-cal-nav:disabled { opacity: .35; cursor: default; }
      .recap-subtabs { margin: 0 0 14px; }
      .recap-coach-lede {
        margin: 0 0 14px; font-size: 13px; color: var(--muted);
        line-height: 1.45; max-width: 52em;
      }
      .recap-coach-focus {
        font-size: 13.5px; line-height: 1.45; margin: 0 0 14px;
        padding: 10px 12px; border-radius: 8px;
        background: var(--input-bg); border: 1px solid var(--border);
      }
      .recap-coach-sales {
        font-size: 14px; line-height: 1.55; margin: 0 0 14px;
        padding: 12px 14px; border-radius: 8px;
        background: var(--input-bg); border: 1px solid var(--border);
        white-space: pre-wrap;
      }
      .recap-coach-sales b { display: block; margin-bottom: 6px; font-size: 12px;
        text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
      .recap-coach-bucket { margin: 14px 0 4px; }
      .recap-coach-bucket .ag-card-title {
        font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
        color: var(--muted); margin-bottom: 8px;
      }
      .recap-coach-quote {
        display: block; font-size: 12.5px; color: var(--muted);
        margin-top: 4px; font-style: italic;
      }
      .recap-coach-kind {
        font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
        text-transform: uppercase; color: var(--muted); margin-left: 6px;
      }
      /* Expectation Value badge (v2.155.0) — E% chip on pipeline rows.
         Green above 50%, red below, grey at exactly 50 / unscored. */
      .pl-e-badge {
        display: inline-flex; align-items: center; gap: 3px;
        font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
        padding: 1px 7px; border-radius: 999px; margin-left: 6px;
        border: 1px solid transparent; white-space: nowrap;
        font-family: var(--font-mono); vertical-align: middle;
      }
      .pl-e-green { color: var(--lb-ok-text, #3fb950);
        background: rgba(63, 185, 80, 0.12);
        border-color: rgba(63, 185, 80, 0.35); }
      .pl-e-red { color: var(--lb-bad-text, #e5534b);
        background: rgba(229, 83, 75, 0.12);
        border-color: rgba(229, 83, 75, 0.35); }
      .pl-e-neutral { color: var(--muted);
        background: var(--input-bg); border-color: var(--border); }
      .pl-e-trend { font-size: 9px; }
      /* E bubble (v2.155.3) — small circle on the pipeline name cell,
         toggled by the "E values" switch. Same tone palette as the chip. */
      .pl-e-bubble {
        display: inline-flex; align-items: center; justify-content: center;
        width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
        font-size: 9px; font-weight: 800; letter-spacing: -0.02em;
        font-family: var(--font-mono); border: 1.5px solid transparent;
        margin-right: 6px; vertical-align: middle; cursor: default;
      }
      /* Harper Elo ladder + hot/cold movers (Player Stats tab). */
      .elo-panel {
        margin: 0 0 16px; padding: 14px 16px; border-radius: 10px;
        background: var(--input-bg); border: 1px solid var(--border);
      }
      .elo-panel h3 { margin: 0 0 4px; font-size: 14px; }
      .elo-sub { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
      .elo-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
      .elo-table th { text-align: left; font-size: 10.5px; font-weight: 600;
        letter-spacing: 0.04em; text-transform: uppercase;
        color: var(--muted); padding: 4px 10px 4px 0; }
      .elo-table td { padding: 5px 10px 5px 0;
        border-top: 1px solid var(--border); }
      .elo-rating { font-family: var(--font-mono); font-weight: 700;
        font-size: 14px; }
      .elo-ideal td { color: var(--muted); }
      .elo-prov {
        font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
        text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
        border: 1px solid var(--border); color: var(--muted); margin-left: 6px;
      }
      .elo-deltas { font-family: var(--font-mono); font-size: 11px;
        white-space: nowrap; }
      .elo-cols { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
      .elo-acc { margin-top: 14px; }
      .elo-acc h4 { margin: 0 0 6px; font-size: 12px; }
      .ev-diag {
        margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px;
        border: 1px solid var(--border); font-size: 12px; line-height: 1.45;
        color: var(--muted);
      }
      .ev-diag div + div { margin-top: 6px; }
      .elo-acc-recent .elo-mover .m-e { font-size: 11px; }
      .pl-e-delta { font-family: var(--font-mono); font-size: 10px;
        font-weight: 800; margin-left: 2px; }
      .elo-col { flex: 1; min-width: 260px; }
      .elo-col h4 { margin: 0 0 6px; font-size: 12px; }
      .elo-mover { display: flex; align-items: center; gap: 8px;
        font-size: 12px; padding: 3px 0; cursor: pointer; }
      .elo-mover .m-e { font-family: var(--font-mono); font-weight: 700; }
      .elo-mover .m-d { font-family: var(--font-mono); font-size: 11px; }
      .elo-mover .m-name { flex: 1; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; }

      /* v2.159.15 — Elo / E board. Apple-like: one number that matters,
         lots of air, cards not tables. Heat is amber, cold is ice; hit
         is the Player Stats bright green, miss is the bright red. Not
         Harper --accent, so Harper theme does not melt the week-green. */
      .ev-board { margin: 0 0 22px; }
      .ev-board .elo-sub { max-width: 46rem; line-height: 1.45; margin-bottom: 16px; }
      .ev-hero {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px; margin-bottom: 18px;
      }
      @media (max-width: 640px) {
        .ev-hero { grid-template-columns: 1fr; }
      }
      .ev-stat {
        text-align: center; padding: 18px 12px 16px;
        border-radius: 18px; border: 1px solid var(--border);
        background: color-mix(in srgb, var(--panel) 88%, var(--bg));
      }
      .ev-stat-n {
        font-size: 32px; font-weight: 720; letter-spacing: -0.04em;
        font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--text);
      }
      .ev-stat-l {
        margin-top: 6px; font-size: 11px; font-weight: 650;
        letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
      }
      .ev-stat.is-heat .ev-stat-n { color: #FF9F0A; }
      .ev-stat.is-cold .ev-stat-n { color: #64D2FF; }
      .ev-ladder { display: flex; flex-direction: column; gap: 10px; }
      .ev-player {
        display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto auto;
        gap: 4px 14px; align-items: center;
        padding: 14px 16px; border-radius: 18px;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--panel) 88%, var(--bg));
      }
      .ev-player.is-1 {
        border-color: color-mix(in srgb, #FFD60A 50%, var(--border));
        background: color-mix(in srgb, #FFD60A 8%, var(--panel));
      }
      .ev-rank {
        width: 28px; height: 28px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 13px; font-weight: 750; background: var(--input-bg);
        color: var(--muted);
      }
      .ev-rank.is-1 { background: #FFD60A; color: #1c1400; }
      .ev-rank.is-2 { background: #C7C7CC; color: #1c1c1e; }
      .ev-rank.is-3 { background: #C48A3A; color: #fff8ef; }
      .ev-player-name { font-size: 15px; font-weight: 650; color: var(--text); }
      .ev-rating {
        font-size: 28px; font-weight: 720; letter-spacing: -0.04em;
        font-variant-numeric: tabular-nums; line-height: 1; color: var(--text);
      }
      .ev-rating-l {
        display: block; font-size: 10px; font-weight: 650; letter-spacing: 0.08em;
        text-transform: uppercase; color: var(--muted); text-align: right; margin-top: 2px;
      }
      .ev-z { text-align: right; }
      .ev-overlap {
        display: block; font-size: 10px; font-weight: 650; color: var(--muted);
        letter-spacing: 0.02em; margin-top: 2px;
      }
      .ev-cap {
        grid-column: 2 / -1; display: flex; align-items: center; gap: 10px;
      }
      .ev-cap-track {
        flex: 1; height: 7px; border-radius: 99px; overflow: hidden;
        background: color-mix(in srgb, var(--muted) 18%, transparent);
      }
      .ev-cap-fill { height: 100%; border-radius: 99px; background: #FFD60A; }
      .ev-player:not(.is-1) .ev-cap-fill { background: #64D2FF; }
      .ev-cap-lab { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
      .ev-meta {
        grid-column: 2 / -1; font-size: 12.5px; color: var(--muted);
        display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
      }
      .ev-chip {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 2.4rem; padding: 2px 7px; border-radius: 999px;
        font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
        background: color-mix(in srgb, var(--muted) 12%, transparent);
      }
      .ev-pair {
        display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px;
      }
      @media (max-width: 720px) { .ev-pair { grid-template-columns: 1fr; } }
      .ev-col {
        border-radius: 20px; padding: 16px 16px 12px; border: 1px solid var(--border);
        min-width: 0;
      }
      .ev-col h4 {
        margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
      }
      .ev-col.is-heat {
        background: linear-gradient(180deg, color-mix(in srgb, #FF9F0A 14%, var(--panel)), var(--panel));
        border-color: color-mix(in srgb, #FF9F0A 32%, var(--border));
      }
      .ev-col.is-heat h4 { color: #FF9F0A; }
      .ev-col.is-cold {
        background: linear-gradient(180deg, color-mix(in srgb, #64D2FF 16%, var(--panel)), var(--panel));
        border-color: color-mix(in srgb, #64D2FF 32%, var(--border));
      }
      .ev-col.is-cold h4 { color: #64D2FF; }
      .ev-account {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 12px; padding: 10px 0;
        border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
        cursor: pointer;
      }
      .ev-account:first-of-type { border-top: 0; padding-top: 0; }
      .ev-account-name {
        font-size: 14px; font-weight: 600; color: var(--text);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .ev-account-delta {
        font-size: 18px; font-weight: 720; letter-spacing: -0.03em;
        font-variant-numeric: tabular-nums; line-height: 1.1;
      }
      .ev-e-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
      .ev-e-n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; width: 2.6rem; }
      .ev-e-track {
        flex: 1; height: 8px; border-radius: 99px; overflow: hidden;
        background: color-mix(in srgb, var(--muted) 16%, transparent);
      }
      .ev-e-fill { height: 100%; border-radius: 99px; }
      .ev-col.is-heat .ev-e-fill { background: #FF9F0A; }
      .ev-col.is-cold .ev-e-fill { background: #64D2FF; }
      .ev-score {
        margin-top: 18px; padding: 18px 16px 14px; border-radius: 20px;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--panel) 88%, var(--bg));
      }
      .ev-score h4 { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
      .ev-snaps {
        display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
      }
      @media (max-width: 720px) { .ev-snaps { grid-template-columns: 1fr; } }
      .ev-snap { text-align: center; padding: 8px 8px 12px; }
      .ev-snap-kicker {
        font-size: 11px; font-weight: 650; letter-spacing: 0.08em;
        text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
      }
      .ev-snap-meta { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
      .ev-cal {
        position: relative; height: 10px; border-radius: 99px; margin: 10px 8px 4px;
        background: linear-gradient(90deg,
          color-mix(in srgb, var(--muted) 22%, transparent),
          color-mix(in srgb, var(--text) 18%, transparent));
      }
      .ev-cal-mark {
        position: absolute; top: -4px; width: 10px; height: 18px; margin-left: -5px;
        border-radius: 3px; background: var(--text); border: 2px solid var(--panel);
      }
      .ev-cal-mark.is-actual { background: #22E584; }
      .ev-cal-lab {
        display: flex; justify-content: space-between; font-size: 11px; color: var(--muted);
        margin: 0 8px 10px;
      }
      .ev-brier {
        height: 5px; border-radius: 99px; overflow: hidden; margin: 8px 8px 0;
        background: color-mix(in srgb, var(--muted) 16%, transparent);
      }
      .ev-brier i { display: block; height: 100%; background: #22E584; }
      .ev-recent { margin-top: 8px; }
      .ev-settle {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px 12px; align-items: center;
        padding: 10px 4px; border-top: 1px solid var(--border); cursor: pointer;
      }
      .ev-settle-name { font-size: 13.5px; font-weight: 600; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; }
      .ev-path { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
      .ev-pill {
        font-size: 10.5px; font-weight: 750; letter-spacing: 0.04em;
        padding: 3px 8px; border-radius: 999px;
      }
      .ev-pill.is-won { background: color-mix(in srgb, #22E584 18%, transparent); color: #16C75A; }
      .ev-pill.is-lost { background: color-mix(in srgb, #FF3B30 18%, transparent); color: #FF3B30; }
      .ev-marks { letter-spacing: 0.15em; }
      .ev-foot { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
      .ev-ring { display: block; margin: 0 auto; }

      /* Player Stats — RPG stat sheet on the Admin Recap (v2.153.0). */
      .ps-levels { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
      .ps-level {
        font-size: 12px; font-weight: 700; padding: 3px 10px;
        border-radius: 999px; border: 1px solid var(--border);
        background: var(--input-bg);
      }
      .ps-level small { font-weight: 600; color: var(--muted); margin-right: 4px; }
      .ps-good { color: var(--lb-ok-text, #3fb950); }
      .ps-warn { color: var(--lb-warn-text, #d29922); }
      .ps-bad { color: var(--lb-bad-text, #e5534b); }
      .ps-bar-track {
        width: 120px; height: 6px; border-radius: 3px;
        background: var(--input-bg); display: inline-block;
        vertical-align: middle;
      }
      .ps-bar-fill { height: 6px; border-radius: 3px; background: currentColor; }
      .ps-delta { font-size: 11.5px; font-weight: 700; margin-left: 6px; white-space: nowrap; }
      .ps-up { color: var(--lb-ok-text, #3fb950); }
      .ps-down { color: var(--lb-bad-text, #e5534b); }
      .ps-flat { color: var(--muted); }
      .ps-mode {
        font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
        text-transform: uppercase; color: var(--muted);
      }
      .ps-flag {
        font-size: 12.5px; padding: 6px 10px; border-radius: 8px;
        margin: 4px 0; background: var(--input-bg);
        border: 1px solid var(--border);
      }
      .ps-flag b { color: var(--lb-bad-text, #e5534b); }
      .ps-raw { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
      .ps-card-flex {
        display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
      }
      .ps-card-table { flex: 1; min-width: 320px; }
      /* Harris 2026-08-20: low-sat cyan/crimson was hard to read.
         Baseline = light gray fill. This week = bright green. Today =
         bright red dashed. Dedicated hexes, not Harper --accent, so the
         week line does not melt into the Harper chrome. Halo keeps
         overlaps visible. */
      .ps-radar-wrap {
        flex: 0 0 auto; text-align: center; max-width: 100%;
        --ps-radar-base: #CBD5E1;
        --ps-radar-week: #22E584;
        --ps-radar-day: #FF3B30;
        --ps-radar-halo: #0b1220;
      }
      [data-theme="light"] .ps-radar-wrap,
      [data-theme="harper"] .ps-radar-wrap,
      [data-theme="mono"] .ps-radar-wrap {
        --ps-radar-base: #94A3B8;
        --ps-radar-week: #16C75A;
        --ps-radar-day: #E11D2A;
        --ps-radar-halo: #ffffff;
      }
      @media (prefers-color-scheme: light) {
        html:not([data-theme]) .ps-radar-wrap {
          --ps-radar-base: #94A3B8;
          --ps-radar-week: #16C75A;
          --ps-radar-day: #E11D2A;
          --ps-radar-halo: #ffffff;
        }
      }
      .ps-radar {
        display: block; margin: 0 auto;
        width: min(400px, 100%); height: auto;
      }
      .ps-radar-legend {
        display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
        font-size: 12.5px; color: var(--muted); margin-top: 8px;
      }
      .ps-radar-legend span { display: inline-flex; align-items: center; gap: 6px; }
      .ps-swatch {
        display: inline-block; width: 22px; height: 12px; border-radius: 2px;
        box-sizing: border-box;
      }
      .ps-swatch-base {
        background: color-mix(in srgb, var(--ps-radar-base) 55%, transparent);
        border: 2.5px solid var(--ps-radar-base);
      }
      .ps-swatch-week {
        height: 0; width: 24px; border-radius: 0;
        background: transparent; border-top: 4px solid var(--ps-radar-week);
      }
      .ps-swatch-day {
        height: 0; width: 24px; border-radius: 0;
        background: transparent; border-top: 4px dashed var(--ps-radar-day);
      }
      .ps-attr-code {
        font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
        color: var(--muted); margin-right: 4px;
      }
      .ps-growth {
        margin-top: 14px; padding: 12px 14px; border-radius: 8px;
        background: var(--input-bg); border: 1px solid var(--border);
      }
      .ps-growth-title {
        font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
        text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
      }
      .ps-growth-item { margin-bottom: 10px; }
      .ps-growth-item:last-child { margin-bottom: 0; }
      .ps-growth-head {
        font-size: 13px; display: flex; gap: 6px; align-items: baseline;
        flex-wrap: wrap;
      }
      .ps-growth-ev { font-size: 11.5px; color: var(--muted); margin: 2px 0 2px 2px; }
      .ps-sw-kicker {
        font-size: 10px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .05em; color: var(--lb-ok-text, #3fb950);
        border: 1px solid currentColor; border-radius: 999px;
        padding: 1px 7px; margin-right: 4px; white-space: nowrap;
      }
      .ps-sw-kicker-focus { color: var(--lb-warn-text, #d29922); }
      .ps-sw-focus {
        border-left: 3px solid var(--lb-warn-text, #d29922);
        padding-left: 9px; margin: 8px 0;
      }
      .ps-sw-bread { opacity: .92; }
      .ps-growth-move { font-size: 12.5px; margin: 3px 0 0 2px; line-height: 1.4; }
      /* Full-width lede — the recap-coach-lede 52em cap left a chunky
         narrow block next to empty screen (Harris, v2.153.3). */
      .ps-lede {
        margin: 0 0 12px; font-size: 12.5px; color: var(--muted);
        line-height: 1.5; max-width: none;
      }
      /* Hover definitions — every stat explains itself (v2.154.0).
         Pure CSS so it works inside frozen/baseline views too. */
      .ps-tip { position: relative; cursor: help; border-bottom: 1px dotted var(--muted); }
      .ps-tipbox {
        display: none; position: absolute; left: 0; top: calc(100% + 6px);
        z-index: 60; width: 340px; max-width: 78vw; padding: 10px 12px;
        /* Fully opaque: solid --bg underlay + --panel painted on top, so
           the card stays readable even where --panel is translucent
           (Harris, v2.154.1). */
        background: var(--bg);
        background-image: linear-gradient(var(--panel, var(--bg)), var(--panel, var(--bg)));
        border: 1px solid var(--border);
        border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.5);
        font-size: 11.5px; line-height: 1.45; color: var(--text);
        font-weight: 400; white-space: normal; text-align: left;
      }
      .ps-tip:hover .ps-tipbox, .ps-tip:focus-within .ps-tipbox { display: block; }
      .ps-tipbox b { display: block; margin-bottom: 3px; }
      .ps-tipbox .ps-tip-how { color: var(--muted); margin: 4px 0; }
      .ps-tipbox .ps-tip-ideal { margin-top: 4px; }
      .ps-tipbox .ps-tip-ideal span { display: block; }
      /* Gains & losses — diverging bars vs baseline (v2.154.0). */
      .ps-gains { margin-top: 12px; }
      .ps-gains-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
      .ps-gains-grid { display: grid; grid-template-columns: minmax(150px, max-content) 1fr 1fr; gap: 3px 12px; align-items: center; }
      .ps-gains-head { font-size: 10.5px; color: var(--muted); font-weight: 600; }
      .ps-gains-attr { font-size: 12px; white-space: nowrap; }
      .ps-gain-track { position: relative; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--border) 45%, transparent); overflow: hidden; }
      .ps-gain-track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
      .ps-gain-fill { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
      .ps-gain-fill.ps-up { background: var(--lb-ok-text, #3fb950); left: 50%; }
      .ps-gain-fill.ps-down { background: var(--lb-err-text, #f85149); right: 50%; }
      .ps-gain-cell { display: flex; align-items: center; gap: 6px; }
      .ps-gain-cell .ps-gain-track { flex: 1; }
      .ps-gain-cell .ps-delta { min-width: 38px; text-align: right; }
      .ps-gain-carried { font-size: 10.5px; color: var(--muted); font-style: italic; }
      .ag-card {
        background: var(--panel); border: 1px solid var(--border);
        border-radius: 12px; padding: 18px 22px; margin-bottom: 18px;
      }
      .ag-card-title { font-weight: 700; font-size: 14.5px; margin-bottom: 12px; }
      .ag-book { margin-bottom: 10px; }
      .ag-book-row { cursor: pointer; }
      .ag-book-meta { font-size: 12px; white-space: nowrap; }
      /* Follow-up draft buckets — sub-headers inside the drafts card. */
      .ag-draft-group-lbl {
        font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
        color: var(--muted); text-transform: uppercase;
        margin: 16px 0 4px; padding: 4px 4px 2px;
      }
      .ag-draft-group-lbl:first-of-type { margin-top: 4px; }
      .ag-draft-chip {
        display: inline-block; font-size: 10.5px; font-weight: 600;
        padding: 1px 7px; border-radius: 999px; margin-left: 6px;
        /* Theme vars, not a hardcoded light fill: this used to be
           var(--panel-2, #f1f3f7) — but --panel-2 is defined nowhere, so
           every theme got the near-white fallback. In dark theme that
           meant a white bubble with 68%-white --muted text: the premium
           $ chips were unreadable (Harris, 2026-07-23). */
        background: var(--input-bg); color: var(--text);
        border: 1px solid var(--border); vertical-align: 1px;
        white-space: nowrap;
      }
      .ag-draft-chip.ag-chip-high { background: #eafaf0; color: #1c7c3c; border-color: #bfe8cd; }
      .ag-draft-chip.ag-chip-overdue { background: #fdeceb; color: #b3261e; border-color: #f3c1bd; }
      .ag-draft-chip.ag-chip-soon { background: #fff6e5; color: #9a6b00; border-color: #f0dcae; }
      .ag-draft-chip.ag-chip-prem-save { background: #eafaf0; color: #1c7c3c; border-color: #bfe8cd; }
      .ag-draft-chip.ag-chip-prem-up { background: #fdeceb; color: #b3261e; border-color: #f3c1bd; }
      .ag-draft-chip.ag-chip-rework { background: #fff6e5; color: #c2410c; border-color: #f0dcae; }
      .ag-narrative { border-left: 3px solid #7c6cf0; padding: 20px 24px; }
      .ag-narrative-text {
        font-size: 13.5px; line-height: 1.7; white-space: pre-wrap;
        padding: 2px 0 4px; color: var(--text);
      }
      /* v2.72.2 (Harris UI review) — rows no longer flex-wrap freely: the
         text column flexes and wraps INTERNALLY while the action buttons
         stay pinned to the right rail on every row, so button placement
         is consistent down the whole card. Roomier padding throughout. */
      .ag-row {
        display: flex; align-items: flex-start; gap: 14px;
        padding: 12px 8px; border-top: 1px solid var(--border);
        font-size: 14px; line-height: 1.5; cursor: pointer;
      }
      .ag-row:hover { background: var(--input-bg); }
      .ag-kind {
        flex: 0 0 auto; min-width: 92px;
        font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
        text-transform: uppercase; opacity: 1; color: var(--muted);
        padding-top: 2px;
      }
      .ag-order {
        flex: 0 0 auto; min-width: 22px; height: 22px; line-height: 22px;
        text-align: center; font-size: 12px; font-weight: 700;
        background: var(--input-bg); border: 1px solid var(--border);
        border-radius: 50%;
      }
      .ag-tel { flex: 0 0 auto; font-size: 12px; white-space: nowrap; text-decoration: none; }
      .ag-tel:hover { text-decoration: underline; }
      .ag-nophone { flex: 0 0 auto; font-size: 11px; }
      .ag-comms-msg {
        display: block; margin: 0; padding: 0;
        background: transparent; border: 0;
        font-style: italic; color: var(--text);
        white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55;
      }
      /* v2.70.0 — the agent's grounded "most likely next step" for a draft */
      .ag-next-step { font-weight: 700; color: var(--text); }
      /* v2.102.0 (Trace + Garrett declutter) — sub-tabs inside Agentic
         Enablement, one block per account, and bubble tags that replace
         the old section groupings. */
      .ag-subtabs {
        display: inline-flex; gap: 4px; padding: 3px;
        background: var(--input-bg); border: 1px solid var(--border);
        border-radius: 999px;
      }
      .ag-subtab {
        border: 1px solid transparent; background: transparent;
        color: var(--muted); font-size: 12.5px; font-weight: 600;
        padding: 5px 14px; border-radius: 999px; cursor: pointer;
        white-space: nowrap;
      }
      .ag-subtab:hover { color: var(--text); }
      .ag-subtab.is-active {
        background: var(--panel); color: var(--text);
        border-color: var(--border);
      }
      /* v2.265.0 — account cards sat on the same --panel as the wrapper,
         so Educational Concept / Lisa Sampson read as one stacked sheet.
         The list is a recessed tray; each account is a raised tile with
         a real gutter between them. */
      .ag-card.ag-acct-list {
        background: var(--bg);
        padding: 16px 16px 20px;
      }
      .ag-acct {
        border: 1px solid var(--border); border-radius: 12px;
        margin-bottom: 36px; overflow: hidden;
        background: var(--panel);
        box-shadow: 0 2px 12px color-mix(in srgb, #000 12%, transparent);
      }
      .ag-acct-list .ag-acct:last-child { margin-bottom: 4px; }
      [data-theme="light"] .ag-acct { background: var(--input-bg); }
      /* v2.266.0 — Dark: --panel is a 6% white wash, so the tray, card,
         and gutter were the same navy. Solid raised cards + brighter
         section tints so accounts separate without a light-theme sheet. */
      [data-theme="dark"] .ag-card.ag-acct-list {
        background: #070c16;
        border-color: rgba(255, 255, 255, 0.14);
      }
      [data-theme="dark"] .ag-acct,
      [data-theme="dark"] .ps-ag-card {
        background: #152036;
        border-color: rgba(255, 255, 255, 0.22);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
      }
      [data-theme="dark"] .ag-acct-head {
        background: rgba(255, 255, 255, 0.07);
        border-bottom-color: rgba(255, 255, 255, 0.16);
      }
      [data-theme="dark"] .ag-acct .ag-acct-row {
        background: rgba(255, 255, 255, 0.05);
      }
      [data-theme="dark"] .ag-acct .ag-acct-row.is-plan {
        border-left-color: #67b8e3;
        background: rgba(103, 184, 227, 0.16);
      }
      [data-theme="dark"] .ag-acct .ag-acct-row.is-plan .ag-kind { color: #8ecdf0; }
      [data-theme="dark"] .ag-acct .ag-acct-row.is-last {
        border-left-color: #9ca3af;
        background: rgba(156, 163, 175, 0.14);
      }
      [data-theme="dark"] .ag-acct .ag-acct-row.is-last .ag-kind { color: #c4cad3; }
      [data-theme="dark"] .ag-acct .ag-acct-row.is-next {
        border-left-color: #3fb950;
        background: rgba(63, 185, 80, 0.16);
      }
      [data-theme="dark"] .ag-acct .ag-acct-row.is-next .ag-kind { color: #7ee787; }
      [data-theme="dark"] .ag-acct .ag-acct-row.is-draft {
        border-left-color: #9b8cff;
        background: rgba(124, 108, 240, 0.18);
      }
      [data-theme="dark"] .ag-acct .ag-acct-row.is-draft .ag-kind { color: #c4bbff; }
      [data-theme="dark"] .ag-acct .ag-acct-row.is-commit {
        border-left-color: #e6b422;
        background: rgba(230, 180, 34, 0.16);
      }
      [data-theme="dark"] .ag-acct .ag-acct-row.is-commit .ag-kind { color: #f0c14a; }
      [data-theme="dark"] .ag-acct .ag-acct-row.ag-slabreach-row {
        border-left-color: #fb7185;
        background: rgba(251, 113, 133, 0.16);
      }
      [data-theme="dark"] .ps-ag-card-head {
        border-bottom-color: rgba(255, 255, 255, 0.16);
      }
      [data-theme="dark"] .ps-ag-row {
        background: rgba(255, 255, 255, 0.05);
      }
      [data-theme="dark"] .ps-ag-row.is-happened {
        border-left-color: #9ca3af;
        background: rgba(156, 163, 175, 0.14);
      }
      [data-theme="dark"] .ps-ag-row.is-happened .ps-ag-label { color: #c4cad3; }
      [data-theme="dark"] .ps-ag-row.is-next {
        border-left-color: #3fb950;
        background: rgba(63, 185, 80, 0.16);
      }
      [data-theme="dark"] .ps-ag-row.is-next .ps-ag-label { color: #7ee787; }
      [data-theme="dark"] .ps-ag-row.is-why {
        border-left-color: #e6b422;
        background: rgba(230, 180, 34, 0.16);
      }
      [data-theme="dark"] .ps-ag-row.is-why .ps-ag-label { color: #f0c14a; }
      [data-theme="dark"] .ps-ag-row.ag-slabreach-row {
        border-left-color: #fb7185;
        background: rgba(251, 113, 133, 0.16);
      }
      [data-theme="dark"] .ps-ag-draftline {
        border-left-color: #9b8cff;
        background: rgba(124, 108, 240, 0.18);
      }
      [data-theme="dark"] .ps-ag-draftline .ps-ag-label { color: #c4bbff; }
      .ag-acct .ag-row { border-top: 0; }
      .ag-acct .ag-acct-row {
        margin: 0 12px 10px 14px;
        padding: 10px 12px;
        border-top: 0;
        border-radius: 8px;
        border-left: 3px solid var(--border);
        background: color-mix(in srgb, var(--input-bg) 70%, var(--panel));
        cursor: default;
      }
      .ag-acct .ag-acct-row:last-child { margin-bottom: 14px; }
      .ag-acct .ag-acct-row[data-ag-open] { cursor: pointer; }
      .ag-acct .ag-acct-row.is-plan {
        border-left-color: #1a73e8;
        background: color-mix(in srgb, #1a73e8 10%, var(--panel));
      }
      .ag-acct .ag-acct-row.is-plan .ag-kind { color: #1a73e8; }
      .ag-acct .ag-acct-row.is-last {
        border-left-color: #6b7280;
        background: color-mix(in srgb, #6b7280 8%, var(--panel));
      }
      .ag-acct .ag-acct-row.is-last .ag-kind { color: #5b6470; }
      .ag-acct .ag-acct-row.is-next {
        border-left-color: #1a8f5e;
        background: color-mix(in srgb, #1a8f5e 10%, var(--panel));
      }
      .ag-acct .ag-acct-row.is-next .ag-kind { color: #1a8f5e; }
      .ag-acct .ag-acct-row.is-draft {
        border-left-color: #7c6cf0;
        background: color-mix(in srgb, #7c6cf0 10%, var(--panel));
      }
      .ag-acct .ag-acct-row.is-draft .ag-kind { color: #7c6cf0; }
      .ag-acct .ag-acct-row.is-commit {
        border-left-color: #9a6b00;
        background: color-mix(in srgb, #e69f00 10%, var(--panel));
      }
      .ag-acct .ag-acct-row.is-commit .ag-kind { color: #9a6b00; }
      .ag-acct .ag-acct-row.ag-slabreach-row {
        border-left-color: #b3261e;
        background: color-mix(in srgb, #b3261e 10%, var(--panel));
      }
      [data-theme="dark"] .ag-acct .ag-acct-row.is-last .ag-kind,
      [data-theme="dark"] .ps-ag-row.is-happened .ps-ag-label {
        color: #c4cad3;
      }
      .ag-acct-head {
        background: var(--input-bg); align-items: center;
        padding: 14px 16px; border-bottom: 1px solid var(--border);
      }
      .ag-acct-head .ag-company { flex: 0 1 auto; font-weight: 700; }
      /* v2.162.7 — Renewals AE reuses the PSS stage stepper so the
         current Pipeline bucket is obvious on every account card. */
      .ag-acct .ps-ag-steps { margin: 12px 16px 8px; }
      .ag-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
      .ag-tag {
        display: inline-block; font-size: 10.5px; font-weight: 600;
        padding: 2px 9px; border-radius: 999px; white-space: nowrap;
        background: var(--panel); color: var(--text);
        border: 1px solid var(--border);
      }
      .ag-tag-slabreach { background: #b3261e; color: #fff; border-color: #b3261e; font-weight: 700; }
      .ag-slabreach-row .ag-kind, .ag-slabreach-row .ps-ag-label { color: #b3261e; font-weight: 700; }
      .ps-ag-card.is-slabreach { border-left: 3px solid #b3261e; }
      .ag-tag-waitover { background: #fdeceb; color: #b3261e; border-color: #f3c1bd; font-weight: 700; }
      .ag-tag-waiting { background: #e8f1fd; color: #1b64c0; border-color: #bcd7f5; }
      .ag-tag-high { background: #eafaf0; color: #1c7c3c; border-color: #bfe8cd; }
      .ag-tag-overdue { background: #fdeceb; color: #b3261e; border-color: #f3c1bd; }
      .ag-tag-d0_5 { background: #fdeceb; color: #b3261e; border-color: #f3c1bd; }
      .ag-tag-d6_15, .ag-tag-d16_30, .ag-tag-d31_45 { background: #fff6e5; color: #9a6b00; border-color: #f0dcae; }
      .ag-flash { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .2s; }
      /* v2.103.0 — bubble-tag filter bar + per-policy sub-heads inside a
         merged account block. */
      .ag-tagfilter {
        display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
        margin: 0 0 12px; padding: 8px; border-radius: 8px;
        background: var(--input-bg); border: 1px dashed var(--border);
      }
      .ag-tagchip { cursor: pointer; opacity: .82; }
      .ag-tagchip:hover { opacity: 1; }
      .ag-tagchip.is-active {
        opacity: 1; outline: 2px solid var(--accent); outline-offset: 0;
        font-weight: 700;
      }
      .ag-tagchip-n { opacity: .65; font-weight: 400; margin-left: 2px; }
      .ag-tagchip-clear { background: var(--panel); color: var(--muted); }
      /* v2.152.0 — LIGHT theme AE controls (Harris: "make sure the SLA
         Breach button and tabs in the Agentic Enablement of Light theme
         are red. Right now all the sort icons are REALLY difficult to
         discern"). Chips rendered at .82 opacity on the 5% panel tint
         were nearly invisible on the slate paper; uncolored ones get the
         same white surface the cards use, and the SLA Breach tab/sort/
         filter controls read red even at zero breaches. Other themes
         are untouched. */
      [data-theme="light"] .ag-tagchip { opacity: 1; }
      [data-theme="light"] .ag-tagchip[data-ps-ag-sort],
      [data-theme="light"] .ag-tagchip[data-ag-tagfilter="untouched"],
      [data-theme="light"] .ag-tagchip.ag-tagchip-clear {
        background: var(--input-bg); border-color: #93a5b8;
      }
      [data-theme="light"] .ag-subtab[data-ag-tab="slabreach"],
      [data-theme="light"] .ag-subtab[data-ps-ag-tab="slabreach"],
      [data-theme="light"] .ag-tagchip[data-ag-tagfilter="slabreach"],
      [data-theme="light"] .ag-tagchip[data-ps-ag-sort="slabreach"] {
        color: #8f1d16; background: #fdeceb; border-color: #d05248;
        font-weight: 700;
      }
      /* live breaches (.ag-tag-slabreach) escalate to solid red — this
         later, equal-specificity rule wins over the pale-red idle state */
      [data-theme="light"] .ag-subtab.ag-tag-slabreach,
      [data-theme="light"] .ag-tagchip.ag-tag-slabreach {
        background: #b3261e; color: #fff; border-color: #b3261e;
      }
      .ag-acct .ag-acct-subhead {
        padding-top: 8px; padding-bottom: 4px;
        background: color-mix(in srgb, var(--input-bg) 55%, var(--panel));
        font-size: 12px;
      }
      .ag-sched-row .ag-company { flex: 0 1 220px; }
      /* v2.273.0 — VIP star / pin on Agentic Enablement. */
      .ag-btn.ag-star {
        background: #fff8e8; color: #8a5a00; border-color: #f0d49a;
        font-weight: 700;
      }
      .ag-btn.ag-star.is-on {
        background: #f5c542; color: #3d2a00; border-color: #d4a017;
      }
      [data-theme="dark"] .ag-btn.ag-star {
        background: rgba(245, 197, 66, 0.16); color: #fcd34d; border-color: rgba(252, 211, 77, 0.35);
      }
      [data-theme="dark"] .ag-btn.ag-star.is-on {
        background: #f5c542; color: #1a1200; border-color: #f5c542;
      }
      .ag-tag-vip, .ag-tagchip.ag-tag-vip {
        background: #fff4cc; color: #7a5200; border-color: #f0d49a;
      }
      [data-theme="dark"] .ag-tag-vip,
      [data-theme="dark"] .ag-tagchip.ag-tag-vip {
        background: rgba(245, 197, 66, 0.18); color: #fcd34d; border-color: rgba(252, 211, 77, 0.35);
      }
      .ag-acct.is-vip { box-shadow: inset 3px 0 0 #f5c542; }
      .ag-acct.is-vip.is-auto-on { box-shadow: inset 3px 0 0 #f5c542, inset 6px 0 0 #34c759; }
      .pm-agentic-controls {
        display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
      }
      .pm-agentic-hint { margin: 8px 0 0; font-size: var(--text-xs); }
      /* v2.104.0 — follow-up flags: parked chip on the block + parked card. */
      .ag-btn.ag-parked { background: #fff6e5; color: #9a6b00; border-color: #f0dcae; }
      [data-theme="dark"] .ag-btn.ag-parked { background: rgba(217, 119, 6, 0.2); color: #fcd34d; border-color: rgba(252, 211, 77, 0.35); }
      /* v2.152.15 — Unpark must be readable in every theme (same class of
         bug as the stale-tab Refresh button). Own fill, not a chip. */
      .ag-btn.ag-unpark {
        background: #1a8f5e; color: #ffffff; border-color: #157a50;
        font-weight: 700;
      }
      [data-theme="dark"] .ag-btn.ag-unpark {
        background: #67b8e3; color: #0b1220; border-color: #4aa3d4;
      }
      [data-theme="light"] .ag-btn.ag-unpark {
        background: #0284c7; color: #ffffff; border-color: #0369a1;
      }
      [data-theme="harper"] .ag-btn.ag-unpark {
        background: #1a8f5e; color: #ffffff; border-color: #157a50;
      }
      [data-theme="mono"] .ag-btn.ag-unpark {
        background: #111111; color: #ffffff; border-color: #111111;
      }
      /* v2.161.0 — Agentic Auto iOS switch + inbound-disabled cards. */
      .ag-auto-switch {
        display: inline-flex; align-items: center; gap: 7px;
        margin-right: 8px; cursor: pointer; user-select: none;
      }
      .ag-auto-switch-label {
        font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
        text-transform: uppercase; color: var(--muted);
      }
      .ag-auto-switch input {
        appearance: none; -webkit-appearance: none;
        width: 42px; height: 26px; margin: 0; padding: 0;
        border: 0; border-radius: 999px; cursor: pointer;
        background: #d1d5db; position: relative; flex: 0 0 42px;
        transition: background .18s ease;
      }
      .ag-auto-switch input::after {
        content: ""; position: absolute; top: 2px; left: 2px;
        width: 22px; height: 22px; border-radius: 50%;
        background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
        transition: transform .18s ease;
      }
      .ag-auto-switch input:checked { background: #34c759; }
      .ag-auto-switch input:checked::after { transform: translateX(16px); }
      .ag-auto-switch input:disabled { opacity: .45; cursor: not-allowed; }
      .ag-auto-switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .ag-acct.is-auto-on { box-shadow: inset 3px 0 0 #34c759; }
      .ag-acct.is-auto-off { box-shadow: inset 3px 0 0 #b3261e; background: #fdeceb; }
      [data-theme="dark"] .ag-acct.is-auto-off { background: rgba(179, 38, 30, 0.16); }
      .ag-auto-flag {
        color: #b3261e; font-weight: 700; font-size: 13px;
      }
      .ag-auto-card.is-disabled {
        border-color: #d05248; background: #fdeceb;
      }
      [data-theme="dark"] .ag-auto-card.is-disabled {
        background: rgba(179, 38, 30, 0.16); border-color: #d05248;
      }
      .ag-auto-card.is-disabled .ag-company,
      .ag-auto-card.is-disabled .ag-auto-flag { color: #b3261e; }
      .ag-auto-proof-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
      .ag-auto-proof {
        margin: 0; padding: 8px 10px; max-width: 42rem;
        border-left: 3px solid #b3261e;
        background: rgba(255,255,255,.55);
        color: var(--text); font-weight: 500; font-size: 13px;
        white-space: pre-wrap; line-height: 1.45;
      }
      [data-theme="dark"] .ag-auto-proof { background: rgba(0,0,0,.22); }
      .ag-subtab[data-ag-tab="auto"] { font-weight: 700; }
      /* v2.154.7 — Generate Agentic Follow Up: solid per theme so it
         reads on Harper/Light the same way Unpark does. */
      .ag-btn.ag-generate {
        background: #1a73e8; color: #ffffff; border-color: #1765cc;
        font-weight: 700;
      }
      [data-theme="dark"] .ag-btn.ag-generate {
        background: #67b8e3; color: #0b1220; border-color: #4aa3d4;
      }
      [data-theme="light"] .ag-btn.ag-generate {
        background: #0284c7; color: #ffffff; border-color: #0369a1;
      }
      [data-theme="harper"] .ag-btn.ag-generate {
        background: #1a73e8; color: #ffffff; border-color: #1765cc;
      }
      [data-theme="mono"] .ag-btn.ag-generate {
        background: #111111; color: #ffffff; border-color: #111111;
      }
      .ag-parked-card .ag-sched-row { opacity: .85; }
      .ag-parked-card .ag-sched-row:hover { opacity: 1; }
      .ag-todo-check { width: 16px; height: 16px; cursor: pointer; }
      .todo-acct {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 11px; font-weight: 600; padding: 1px 8px;
        border-radius: 999px; cursor: pointer;
        background: var(--input-bg); border: 1px solid var(--border);
        color: var(--text);
      }
      .todo-acct:hover { border-color: var(--accent); color: var(--accent); }
      /* Duo review modal (v2.62.0, expanded v2.63.0) — near-fullscreen
         70/30 email + text review, unique to Agentic Enablement.
         Left pane mimics a Gmail compose window; right pane mimics a
         phone Messages thread with the real Quo history. Email gets the
         wider column (Harris, 2026-07-21) — it needs the screen real
         estate for the thread panel + compose body. */
      .ag-duo-card {
        width: min(96vw, 100rem);
        height: min(92vh, 72rem);
        max-height: 92vh;
        display: flex; flex-direction: column;
      }
      .ag-duo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
      .ag-duo-head h2 { margin: 0; }
      .ag-duo-sub { margin: 2px 0 10px; font-size: 13px; }
      .ag-duo-x {
        flex: 0 0 auto; border: 0; background: transparent; color: var(--muted);
        font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 8px;
      }
      .ag-duo-x:hover { background: var(--input-bg); color: var(--text); }
      .ag-duo-grid {
        display: grid; grid-template-columns: 7fr 3fr; gap: 14px;
        align-items: stretch; flex: 1 1 auto; min-height: 0;
      }
      @media (max-width: 860px) {
        .ag-duo-grid { grid-template-columns: 1fr; overflow-y: auto; }
        .ag-duo-pane { min-height: 380px; }
      }
      .ag-duo-pane {
        display: flex; flex-direction: column;
        border: 1px solid var(--border); border-radius: 12px;
        min-width: 0; min-height: 0; overflow: hidden;
      }
      .ag-duo-pane.is-sent { opacity: 0.78; }
      .ag-duo-sentflag { font-size: 12px; font-weight: 600; color: var(--ok, #2e7d32); }
      .ag-duo-meta { font-size: 11.5px; }
      .ag-duo-meta.is-over { color: var(--danger, #c0392b); font-weight: 600; }
      .ag-duo-note { font-size: 11.5px; min-height: 14px; padding: 4px 12px 8px; }
      .ag-duo-error { flex: 1 1 auto; color: var(--danger, #c0392b); font-size: 12.5px; align-self: center; }
      .ag-duo-footer { flex: 0 0 auto; }
      /* ---------- Refine with AI (v2.144.0 — single-draft recook) ----------
         v2.145.0 (Harris): visually its OWN AI section — purple accent strip
         + tinted panel so it can't be mistaken for the compose fields —
         plus a scope toggle (email / text / both), a progress bar while the
         agent runs, and an overwrite animation as the new copy lands.
         v2.146.1 (Harris): the inline panel ate critical compose space —
         it's now a compact POPOVER anchored above the footer button. Same
         look inside; closing it resets the feedback + scope. */
      .ag-duo-refine {
        position: absolute; right: 14px; bottom: 58px; z-index: 40;
        width: min(620px, calc(100% - 28px));
        padding: 12px 14px;
        display: flex; flex-direction: column; gap: 7px;
        border: 1px solid #7c6cf066; border-top: 2px solid #7c6cf0;
        border-radius: 14px;
        /* Solid base (--bg, opaque in every theme) under the purple tint —
           --panel is 6%-alpha white and reads see-through when floating. */
        background: linear-gradient(180deg, rgba(124, 108, 240, .12), rgba(124, 108, 240, .03)), var(--bg);
        box-shadow: 0 14px 38px rgba(0, 0, 0, .30);
        animation: ag-duo-refine-pop .14s ease-out;
      }
      /* No global [hidden] rule in this app — display:flex above would
         override the attribute and leave the popup floating permanently. */
      .ag-duo-refine[hidden] { display: none !important; }
      @keyframes ag-duo-refine-pop {
        from { opacity: 0; transform: translateY(8px) scale(.98); }
        to { opacity: 1; transform: none; }
      }
      .ag-duo-refine-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
      .ag-duo-refine-title {
        font-weight: 700; font-size: 12.5px; color: var(--lb-violet-text, #7c6cf0); white-space: nowrap;
        flex: 1 1 auto;
      }
      .ag-duo-refine-x {
        border: 0; background: transparent; color: var(--muted); cursor: pointer;
        font-size: 17px; line-height: 1; padding: 2px 7px; border-radius: 8px;
        flex: 0 0 auto;
      }
      .ag-duo-refine-x:hover { background: #7c6cf01a; color: var(--text); }
      .ag-duo-refine-sub { font-size: 11.5px; }
      .ag-duo-refine-scope {
        display: inline-flex; border: 1px solid #7c6cf066; border-radius: 999px;
        overflow: hidden; flex: 0 0 auto;
      }
      .ag-duo-scope-btn {
        border: 0; background: transparent; color: var(--muted); cursor: pointer;
        font-size: 11.5px; padding: 4px 11px; white-space: nowrap;
      }
      .ag-duo-scope-btn + .ag-duo-scope-btn { border-left: 1px solid #7c6cf033; }
      .ag-duo-scope-btn.is-active { background: #7c6cf0; color: #fff; font-weight: 600; }
      .ag-duo-scope-btn:not(.is-active):hover { background: #7c6cf01a; color: var(--text); }
      .ag-duo-refine-chips { display: flex; flex-wrap: wrap; gap: 6px; }
      .ag-duo-refine-chip { font-size: 11.5px; padding: 3px 10px; border-color: #7c6cf055; }
      .ag-duo-refine-chip:hover { background: #7c6cf01a; }
      .ag-duo-refine-bar { display: flex; gap: 8px; align-items: center; }
      .ag-duo-refine-bar input {
        flex: 1 1 auto; min-width: 0; font-size: 12.5px;
        padding: 6px 10px; border-radius: 8px;
        border: 1px solid #7c6cf055; background: var(--input-bg); color: var(--text);
      }
      .ag-duo-refine-bar input:focus { outline: none; border-color: #7c6cf0; }
      .ag-duo-refine-go { border-color: #7c6cf0 !important; }
      .ag-duo-refine-note { font-size: 11.5px; min-height: 14px; }
      .ag-duo-refine #agDuoRefineProgress .ag-progress { margin: 0; padding: 6px 10px; }
      #agDuoRefineToggle { border-color: #7c6cf066; color: var(--lb-violet-text, #7c6cf0); font-weight: 600; }
      #agDuoRefineToggle:hover { background: #7c6cf01a; }
      #agDuoRefineToggle.is-open { background: #7c6cf0; border-color: #7c6cf0; color: #fff; }
      /* Shimmer over the pane(s) being rewritten while the agent runs. */
      .ag-duo-pane.is-recooking { position: relative; }
      .ag-duo-pane.is-recooking::after {
        content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
        background: linear-gradient(100deg, transparent 30%, rgba(124, 108, 240, .14) 50%, transparent 70%);
        background-size: 200% 100%;
        animation: ag-duo-shimmer 1.3s linear infinite;
      }
      @keyframes ag-duo-shimmer {
        0% { background-position: 160% 0; }
        100% { background-position: -160% 0; }
      }
      .ag-duo-card.is-email-only #agDuoRefineToggle,
      .ag-duo-card.is-email-only .ag-duo-refine { display: none !important; }
      .ag-duo-tool {
        border: 0; background: transparent; color: var(--muted); cursor: pointer;
        font-size: 15px; padding: 4px 8px; border-radius: 8px;
      }
      .ag-duo-tool:hover { background: var(--input-bg); color: var(--text); }
      .ag-duo-tool-text { font-size: 12px; }
      /* ---------- Email pane: Gmail-style compose ---------- */
      .ag-duo-mail { background: var(--panel); }
      .ag-duo-mail-titlebar {
        display: flex; align-items: center; justify-content: space-between;
        background: #1f2430; color: #fff; font-size: 13px; font-weight: 600;
        padding: 9px 14px;
      }
      .ag-duo-mail-fields { padding: 0 14px; flex: 0 0 auto; }
      .ag-duo-mail-row {
        display: flex; align-items: center; gap: 8px;
        border-bottom: 1px solid var(--border); padding: 7px 0;
      }
      .ag-duo-mail-label { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); min-width: 34px; }
      .ag-duo-mail-row input, .ag-duo-mail-row select {
        flex: 1 1 auto; min-width: 0; font-size: 13.5px;
        border: 0; background: transparent; color: var(--text); outline: none; padding: 2px 0;
      }
      .ag-duo-mail-from { flex: 0 1 auto !important; cursor: pointer; }
      .ag-duo-mail-subject { font-weight: 600; }
      .ag-duo-ccbcc { flex: 0 0 auto; display: flex; gap: 8px; }
      .ag-duo-cclink {
        border: 0; background: transparent; color: var(--muted); cursor: pointer;
        font-size: 12.5px; padding: 2px 4px; border-radius: 6px;
      }
      .ag-duo-cclink:hover { color: var(--text); text-decoration: underline; }
      .ag-duo-autocc {
        flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
        font-size: 11.5px; color: var(--muted); cursor: pointer; user-select: none;
      }
      .ag-duo-autocc.is-on { color: var(--text); }
      /* Duo email body = same v2 rich preview as Message Templates (always on). */
      .ag-duo-mail-preview {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-top: 1px solid var(--border);
      }
      /* Mirror #edPreview fill rules so duo matches Message Templates. */
      #agDuoEmailPreview {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto !important;
        overflow-x: hidden;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: #ffffff;
        width: 100% !important;
        max-width: none !important;
      }
      #agDuoEmailPreview > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box;
      }
      #agDuoEmailPreview > div > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
      }
      #agDuoEmailPreview > div > div > div {
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
      }
      #agDuoEmailPreview > div > div > div:nth-of-type(2) {
        flex: 1;
      }
      .ag-duo-mail-body-store { display: none !important; }
      .ed-compose-preview-pane.is-rich-expanded #agDuoEmailPreview {
        font-size: 17px;
      }
      .ag-duo-expand {
        flex: 0 0 auto; border: 0; background: rgba(255,255,255,0.12);
        color: inherit; cursor: pointer; font-size: 12px; font-weight: 650;
        padding: 4px 10px; border-radius: 8px; white-space: nowrap;
      }
      .ag-duo-sms-head .ag-duo-expand {
        background: var(--input-bg); color: var(--text); border: 1px solid var(--border);
      }
      .ag-duo-sms-head .ag-duo-expand:hover { background: var(--panel); }
      /* Kacy / email-only: full-width Gmail compose (no SMS duo). */
      .ag-duo-card.is-email-only .ag-duo-grid { grid-template-columns: 1fr; }
      .ag-duo-card.is-email-only #agDuoTextPane { display: none !important; }
      .ag-duo-card.is-email-only #agDuoSendBoth,
      .ag-duo-card.is-email-only #agDuoWaive { display: none !important; }
      .ag-duo-card.is-email-only .lb-thread-body {
        max-height: min(480px, 58vh);
        z-index: 80;
      }
      /* Thread dropdown must escape the mail pane clip. */
      .ag-duo-mail.lb-thread-overflow,
      .ag-duo-pane.lb-thread-overflow {
        overflow: visible;
      }
      .ag-duo-mail.lb-thread-overflow .ag-duo-mail-fields {
        overflow: visible;
        position: relative;
        z-index: 70;
      }
      /* Text Expand: focus the SMS half (email Expand uses rich overlay instead). */
      .ag-duo-card.is-text-expanded .ag-duo-grid { grid-template-columns: 1fr; }
      .ag-duo-card.is-text-expanded #agDuoEmailPane { display: none; }
      .ag-duo-card.is-text-expanded .ag-duo-sms-bar textarea {
        font-size: 17px; line-height: 1.55; max-height: none; min-height: 220px;
      }
      .ag-duo-card.is-text-expanded .ag-duo-sms-composer { flex: 1 1 auto; display: flex; flex-direction: column; }
      .ag-duo-card.is-text-expanded .ag-duo-sms-bar { flex: 1 1 auto; align-items: stretch; }
      .ag-duo-card.is-text-expanded .ag-duo-sms-bar textarea { height: 100%; }
      .ag-duo-attach { padding: 0 14px; }
      .ag-duo-attach-list { display: flex; flex-wrap: wrap; gap: 6px; }
      .ag-duo-attach-list:not(:empty) { padding-bottom: 6px; }
      .ag-duo-attach-error { color: var(--danger, #c0392b); font-size: 12px; padding-bottom: 6px; }
      .ag-duo-mail-toolbar {
        display: flex; align-items: center; gap: 6px;
        padding: 8px 14px; border-top: 1px solid var(--border);
      }
      .ag-duo-mail-spacer { flex: 1 1 auto; }
      .ag-duo-gsend {
        border: 0; cursor: pointer; background: #1a73e8; color: #fff;
        font-size: 13.5px; font-weight: 600; padding: 8px 22px; border-radius: 18px;
      }
      .ag-duo-gsend:hover { background: #1765cc; }
      .ag-duo-gsend:disabled { background: var(--border); color: var(--muted); cursor: default; }
      .ag-duo-attach-hint { font-size: 11px; }
      /* ---------- Text pane: Messages-style thread ---------- */
      .ag-duo-sms { background: color-mix(in srgb, var(--input-bg) 55%, var(--panel)); }
      .ag-duo-sms-head {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 14px; border-bottom: 1px solid var(--border);
        background: var(--panel);
      }
      .ag-duo-sms-avatar {
        flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
        background: linear-gradient(180deg, #9aa4b2, #737e8c); color: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
      }
      .ag-duo-sms-headmain { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
      .ag-duo-sms-name { font-size: 13.5px; font-weight: 700; }
      .ag-duo-sms-number { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      /* v2.66.1 — the To number is editable: type any number to text it,
         no account lookup required. Styled like plain header text until
         focused, so the messages look stays intact. */
      input.ag-duo-sms-toinput {
        border: 1px solid transparent; background: transparent;
        padding: 0 4px; margin-left: -4px; border-radius: 6px;
        font: inherit; font-size: 11.5px; color: inherit;
        width: 100%; max-width: 240px; min-width: 0;
      }
      input.ag-duo-sms-toinput:hover { border-color: var(--border, #d0d4dc); }
      input.ag-duo-sms-toinput:focus {
        outline: none; border-color: var(--accent, #4a7cf7);
        background: var(--panel, #fff); color: var(--text, #1c2733);
      }
      input.ag-duo-sms-toinput::placeholder { color: inherit; opacity: 0.5; }
      .ag-duo-sms-thread {
        flex: 1 1 auto; min-height: 0; overflow-y: auto;
        display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
      }
      .ag-duo-sms-sys { align-self: center; font-size: 11.5px; text-align: center; padding: 2px 0; }
      .ag-duo-sms-sys.is-missed { color: var(--danger, #c0392b); }
      .ag-duo-bubble {
        max-width: 78%; padding: 7px 12px; border-radius: 16px;
        font-size: 13px; line-height: 1.45;
        white-space: pre-wrap; overflow-wrap: anywhere;
      }
      .ag-duo-bubble.in {
        align-self: flex-start; background: var(--panel);
        border: 1px solid var(--border); border-bottom-left-radius: 5px;
      }
      .ag-duo-bubble.out {
        align-self: flex-end; background: #1a8cff; color: #fff;
        border-bottom-right-radius: 5px;
      }
      .ag-duo-bubble-meta { font-size: 10.5px; color: var(--muted); padding: 0 6px; }
      .ag-duo-bubble-meta.in { align-self: flex-start; }
      .ag-duo-bubble-meta.out { align-self: flex-end; }
      .ag-duo-sms-composer { flex: 0 0 auto; padding: 8px 12px 4px; border-top: 1px solid var(--border); background: var(--panel); }
      .ag-duo-sms-bar { display: flex; align-items: flex-end; gap: 8px; }
      .ag-duo-sms-bar textarea {
        flex: 1 1 auto; min-width: 0; resize: none;
        font-size: 15px; line-height: 1.5; font-family: var(--font-sans);
        padding: 10px 14px; border-radius: 18px;
        border: 1px solid var(--border); background: var(--input-bg); color: var(--text);
        outline: none; max-height: 200px; min-height: 52px;
      }
      .ag-duo-sms-send {
        flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
        border: 0; cursor: pointer; background: #1a8cff; color: #fff;
        font-size: 17px; font-weight: 700; line-height: 1;
        display: inline-flex; align-items: center; justify-content: center;
      }
      .ag-duo-sms-send:hover { background: #0f7ae5; }
      .ag-duo-sms-send:disabled { background: var(--border); color: var(--muted); cursor: default; }
      .ag-duo-sms-under { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 0; }

      /* Gmail thread panel (v2.74.0) — shared by the duo review modal and
         the policy composer. Reply in thread vs new email.
         v2.74.4 (Harris): the panel is a one-line selection bar; the thread
         list opens as a dropdown OVER the email body instead of pushing it
         down, so the compose content keeps its screen real estate. */
      .lb-thread-panel {
        position: relative; margin: 6px 0 4px; border: 1px solid var(--border);
        border-radius: 8px; background: var(--input-bg); font-size: 12.5px;
        /* v2.75.9 — Gmail-blue accent so the thread picker reads as a
           feature ("reply in thread?") instead of another header divider. */
        border-left: 3px solid #1a73e8;
        background:
          linear-gradient(rgba(26, 115, 232, 0.06), rgba(26, 115, 232, 0.06)),
          var(--input-bg);
      }
      .lb-thread-head .lb-thread-head-mode { color: var(--lb-blue-text, #4a90e8); }
      .lb-thread-head {
        display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0;
        padding: 6px 10px; background: none; border: 0; cursor: pointer;
        font: inherit; font-weight: 600; color: var(--text); text-align: left;
      }
      .lb-thread-head:hover { background: var(--panel); border-radius: 8px; }
      .lb-thread-head .lb-thread-caret { margin-left: auto; color: var(--muted); font-size: 11px; flex: 0 0 auto; }
      .lb-thread-head-mode { flex: 0 0 auto; }
      .lb-thread-head-sub {
        flex: 0 1 auto; min-width: 0; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
      }
      .lb-thread-body {
        display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0;
        z-index: 60; padding: 8px; flex-direction: column; gap: 4px;
        /* --panel is translucent in every theme — layer it over the solid
           --bg so the compose body can't bleed through the dropdown. */
        background: linear-gradient(var(--panel), var(--panel)), var(--bg);
        border: 1px solid var(--border);
        border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
        max-height: min(320px, 48vh); overflow-y: auto;
        /* v2.97.2 — never scroll sideways: rows fit the width (border-box
           above) and long subjects already ellipsize. */
        overflow-x: hidden;
      }
      .lb-thread-panel.is-open .lb-thread-body { display: flex; }
      .lb-thread-panel.is-open .lb-thread-caret { transform: rotate(180deg); }
      /* .ed-headers clips overflow for its rounded corners — let the open
         dropdown escape it (class toggled in JS alongside is-open). */
      .ed-headers.lb-thread-overflow { overflow: visible; }
      .lb-thread-preview {
        margin: 6px 0 2px; border: 1px solid var(--border); border-radius: 10px;
        background: var(--panel); overflow-y: auto;
        font-size: 12.5px;
      }
      /* v2.81.8 — collapsed strip by default (one line); the message
         history only takes space when expanded. */
      .lb-thread-preview.is-open { max-height: min(240px, 30vh); }
      .lb-thread-preview[hidden] { display: none !important; }
      .lb-thread-preview-head {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 5px 10px; font-weight: 650; position: sticky; top: 0;
        background: linear-gradient(var(--panel), var(--panel)), var(--bg);
      }
      .lb-thread-preview.is-open .lb-thread-preview-head {
        border-bottom: 1px solid var(--border); padding: 8px 12px;
      }
      .lb-thread-preview-toggle {
        display: flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0;
        border: 0; background: none; font: inherit; font-weight: 650;
        color: var(--text); cursor: pointer; text-align: left; padding: 0;
      }
      .lb-thread-preview-toggle .lb-thread-caret { flex: 0 0 auto; font-size: 10px; color: var(--muted); }
      .lb-thread-preview-title { flex: 0 0 auto; }
      .lb-thread-preview-lastline {
        flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; font-weight: 450;
      }
      .lb-thread-preview-head button {
        border: 0; background: transparent; color: var(--muted); cursor: pointer;
        font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px;
      }
      .lb-thread-preview-head button:hover { color: var(--text); background: var(--input-bg); }
      .lb-thread-preview-msg {
        padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      }
      .lb-thread-preview-msg:last-child { border-bottom: 0; }
      .lb-thread-preview-msg.is-out { background: color-mix(in srgb, #1a73e8 6%, transparent); }
      .lb-thread-preview-meta {
        display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted);
        font-size: 11px; margin-bottom: 4px;
      }
      .lb-thread-preview-from { font-weight: 650; color: var(--text); }
      .lb-thread-preview-snippet { color: var(--text); line-height: 1.4; white-space: pre-wrap; }
      .lb-thread-opt-actions { flex: 0 0 auto; display: flex; gap: 4px; }
      /* v2.95.1 (Harris) — make View obviously clickable: blue text + a
         subtle blue glow, stronger on hover. */
      .lb-thread-view-btn {
        border: 1px solid color-mix(in srgb, #1a73e8 55%, var(--border));
        background: color-mix(in srgb, #1a73e8 8%, var(--panel));
        color: #1a73e8;
        border-radius: 6px; font: inherit; font-size: 11px; font-weight: 700;
        padding: 3px 9px; cursor: pointer;
        box-shadow: 0 0 6px color-mix(in srgb, #1a73e8 28%, transparent);
        transition: box-shadow 0.15s ease, background 0.15s ease;
        text-decoration: none; display: inline-flex; align-items: center;
      }
      .lb-thread-view-btn:hover {
        border-color: #1a73e8;
        background: color-mix(in srgb, #1a73e8 16%, var(--panel));
        box-shadow: 0 0 10px color-mix(in srgb, #1a73e8 45%, transparent);
      }
      .lb-thread-empty-note {
        padding: 8px 10px; color: var(--muted); font-size: 12px; line-height: 1.35;
      }
      .lb-thread-opt {
        display: flex; align-items: baseline; gap: 8px; width: 100%;
        /* v2.97.2 (Harris) — rows are divs (content-box by default), so
           width:100% PLUS the 16px padding + 2px border overflowed the
           dropdown by exactly 18px — a permanent left-right scrollbar
           hiding the View buttons. border-box makes 100% mean 100%. */
        box-sizing: border-box;
        padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
        background: var(--panel); cursor: pointer; font: inherit; color: var(--text);
        text-align: left;
      }
      .lb-thread-opt:hover { border-color: var(--muted); }
      .lb-thread-opt.is-selected {
        border-color: #1a73e8; box-shadow: 0 0 0 1px #1a73e8 inset;
      }
      .lb-thread-opt-radio { flex: 0 0 auto; font-size: 11px; }
      .lb-thread-opt-main {
        flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px;
        border: 0; background: transparent; color: inherit; font: inherit;
        text-align: left; cursor: pointer; padding: 0;
      }
      .lb-thread-opt-subject {
        font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .lb-thread-opt-snippet {
        color: var(--muted); font-size: 11.5px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .lb-thread-opt-meta { flex: 0 0 auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
      .lb-thread-note { color: var(--muted); font-size: 11.5px; padding: 2px 8px 6px; }
      .lb-thread-reconnect { display: flex; align-items: center; gap: 8px; padding: 2px 8px 8px; }
      .lb-thread-badge {
        display: inline-block; margin-left: 6px; padding: 0 6px;
        border-radius: 8px; background: #1a73e8; color: #fff;
        font-size: 10px; font-weight: 700; vertical-align: 1px;
      }
      /* v2.95.1 — thread lives only in the shared renewals@ mailbox. */
      .lb-thread-badge-rnw {
        background: color-mix(in srgb, #0f9d58 82%, #000);
      }
      /* Text composer for Message Templates (v2.64.0) — a tall phone-like
         window built from the same messages-thread pieces as the duo panel.
         v2.78.10 — larger message body by default; Expand grows the text box. */
      .tpl-sms-card {
        width: min(96vw, 48rem);
        height: min(92vh, 66rem);
        max-height: 92vh;
        display: flex; flex-direction: column;
      }
      .tpl-sms-pane { flex: 1 1 auto; min-height: 0; }
      .tpl-sms-card.is-body-expanded .ag-duo-sms-bar textarea {
        font-size: 18px; line-height: 1.55; max-height: none; min-height: 280px;
      }
      .tpl-sms-card.is-body-expanded .ag-duo-sms-composer {
        flex: 1 1 auto; display: flex; flex-direction: column;
      }
      .tpl-sms-card.is-body-expanded .ag-duo-sms-bar {
        flex: 1 1 auto; align-items: stretch;
      }
      .tpl-sms-card.is-body-expanded .ag-duo-sms-bar textarea { height: 100%; }
      .tpl-sms-card.is-body-expanded .ag-duo-sms-thread { flex: 0 1 30%; max-height: 35%; }
      /* Columns: company is a stable-width scan column, the text column
         takes the remaining room and wraps inside itself, and the action
         buttons live on a fixed right rail (margin-left: auto) so they
         line up top-to-bottom instead of sliding left with short text. */
      .ag-company {
        font-weight: 600; flex: 0 1 260px; min-width: 150px;
        overflow-wrap: anywhere;
      }
      .ag-text { flex: 1 1 0; min-width: 160px; overflow-wrap: anywhere; }
      .ag-due { flex: 0 0 auto; font-size: 12px; opacity: .8; }
      .ag-overdue { color: var(--lb-bad-text, #e5534b); font-weight: 700; opacity: 1; }
      /* v2.72.4 — meta bubbles (premium green / renewal yellow / overdue
         red / staleness) live on their own line directly under the
         business name, always in the same order. Nothing shares that
         line, so the bubbles can't collide with text or buttons. */
      .ag-meta {
        display: flex; flex-wrap: wrap; gap: 4px;
        margin-top: 4px; align-items: center;
      }
      .ag-meta .ag-draft-chip { margin-left: 0; }
      .ag-actions {
        flex: 0 0 auto; display: flex; gap: 8px; align-items: center;
        margin-left: auto; justify-content: flex-end;
      }
      .ag-btn {
        padding: 5px 12px; font-size: 12px; border-radius: var(--radius);
        border: 1px solid var(--border); background: var(--input-bg);
        color: var(--text); cursor: pointer; white-space: nowrap;
      }
      /* Narrow screens: let the row wrap, with the button rail dropping
         to its own right-aligned line instead of squeezing the text. */
      @media (max-width: 800px) {
        .ag-row { flex-wrap: wrap; }
        .ag-company { flex: 1 1 40%; }
        .ag-text { flex: 1 1 100%; order: 5; }
        .ag-actions { flex: 1 1 100%; order: 6; margin-top: 2px; }
      }
      /* Refresh progress strip (v2.72.3) — the digest/recap rebuild runs
         30s–2min on the agent side with no percentage to report, so this
         is a shimmer bar + live elapsed clock + phase label. */
      .ag-progress {
        display: flex; align-items: center; gap: 12px;
        margin: 0 0 12px; padding: 9px 14px; font-size: 12.5px;
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .ag-progress-label { flex: 0 1 auto; }
      .ag-progress-bar {
        flex: 1 1 120px; height: 6px; border-radius: 999px;
        background: var(--input-bg); overflow: hidden; position: relative;
        min-width: 80px;
      }
      .ag-progress-fill {
        position: absolute; top: 0; bottom: 0; width: 40%;
        border-radius: 999px;
        background: linear-gradient(90deg, #7c6cf0, #9d8df5);
        animation: ag-progress-slide 1.4s ease-in-out infinite;
      }
      @keyframes ag-progress-slide {
        0% { left: -40%; }
        100% { left: 100%; }
      }
      .ag-progress-time {
        flex: 0 0 auto; font-variant-numeric: tabular-nums;
        font-weight: 600; color: var(--muted);
      }
      .ag-btn:hover { filter: brightness(1.12); }
      .ag-btn:disabled { opacity: .55; cursor: default; }
      /* v2.72.5 (Harris) — THE refresh button. Producers see three
         "refresh" affordances (browser reload, the app's top-right
         refresh, and this one that actually rebuilds the digest) — make
         the real one unmissable: bright filled blue, white text. */
      .ag-btn.ag-refresh {
        background: #1a73e8; border-color: #1a73e8; color: #fff;
        font-weight: 700; padding: 7px 16px;
        box-shadow: 0 1px 4px rgba(26, 115, 232, .35);
      }
      .ag-btn.ag-refresh:hover { background: #1765cc; border-color: #1765cc; filter: none; }
      .ag-btn.ag-refresh:disabled { background: #7fa9e8; border-color: #7fa9e8; color: #fff; }
      .ag-accept { border-color: #2ea04366; }
      .ag-dismiss { opacity: .8; }
      /* v2.74.3 — Gmail thread test bench card (admins, dev flag only) */
      .ag-thread-test { border-style: dashed; }
      .ag-thread-test code {
        background: var(--input-bg); padding: 0 4px; border-radius: 4px;
        font-size: 11.5px;
      }
      /* v2.71.0 — one-click "actioned" on every My Day row */
      .ag-done { border-color: #2ea04399; color: var(--lb-ok-text, #2ea043); white-space: nowrap; }
      .ag-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
      @media (max-width: 980px) { .ag-twocol { grid-template-columns: 1fr; } }
      .ag-empty { padding: 10px 4px; font-size: 13px; }

      /* ============ Funnel Velocity (v2.45) ============
         Stage-to-stage durations for both pipelines. Window tabs + pipeline
         tabs on top, a row of per-leg stat cards, then a per-account table.
         Prefixed `vel-` so it stands alone. */
      .vel-toolbar {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 12px; padding: 10px 14px;
        background: var(--input-bg); border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .vel-toolbar input[type="search"] {
        min-width: 220px; padding: 7px 10px;
        border: 1px solid var(--border); border-radius: var(--radius);
        background: var(--panel); color: var(--text); font-size: 13px;
      }
      .vel-windowtabs, .vel-pipetabs { display: flex; gap: 6px; flex-wrap: wrap; }
      .vel-pipetabs { margin-bottom: 14px; }
      .vel-wtab, .vel-ptab {
        font-size: 12px; padding: 5px 12px;
        border: 1px solid var(--border); border-radius: 999px;
        background: transparent; color: var(--muted); cursor: pointer;
        white-space: nowrap;
      }
      .vel-wtab:hover, .vel-ptab:hover { border-color: var(--accent); color: var(--accent); }
      .vel-wtab.active, .vel-ptab.active {
        background: var(--accent); border-color: var(--accent);
        color: #fff; font-weight: 600;
      }
      .vel-cards {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px; margin-bottom: 12px;
      }
      .vel-card {
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 14px 16px;
      }
      .vel-card-leg {
        font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--muted); font-weight: 600; margin-bottom: 8px;
      }
      .vel-card-avg { font-size: 24px; font-weight: 700; font-family: var(--font-mono); line-height: 1.1; }
      .vel-card-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
      .vel-hint { font-size: 11.5px; line-height: 1.4; margin-bottom: 14px; }
      .vel-tablewrap { overflow-x: auto; }
      .vel-table {
        width: 100%; border-collapse: collapse; font-size: 13px;
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius); overflow: hidden;
      }
      .vel-table thead th {
        text-align: left; font-size: 10px; text-transform: uppercase;
        letter-spacing: 0.06em; color: var(--muted); font-weight: 600;
        padding: 9px 12px; background: var(--input-bg);
        border-bottom: 1px solid var(--border); white-space: nowrap;
      }
      .vel-table th.vel-rate, .vel-table td.vel-rate { text-align: right; width: 108px; }
      .vel-table tbody td {
        padding: 9px 12px;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
      }
      .vel-table tbody tr:last-child td { border-bottom: none; }
      .vel-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
      .vel-name { font-weight: 600; }
      .vel-rate { font-family: var(--font-mono); }
      .vel-status-pill {
        font-size: 11px; padding: 1px 8px; border-radius: 999px;
        background: var(--input-bg); border: 1px solid var(--border); color: var(--muted);
      }
      .vel-empty, .vel-loading { padding: 24px; text-align: center; }

      .iqp-empty {
        padding: 40px 20px;
        text-align: center;
        font-size: var(--text-sm);
      }

      /* ============ Loss Runs directory (v26.65) ============
         Searchable carrier loss-run-request contact directory. Visual
         language matches Underwriters / IQ Portals — same toolbar,
         same card style — so the team's three reference directories
         all feel like one tool. Class names are prefixed `lrv-` so
         they don't collide with anything else.
      */
      .lrv-toolbar {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 14px;
        padding: 10px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        position: sticky;
        top: 0;
        z-index: 4;
      }
      .lrv-toolbar input[type="search"] {
        flex: 0 1 360px;
        padding: 6px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font-size: var(--text-sm);
      }
      .lrv-toolbar-spacer { flex: 1 1 auto; }
      .lrv-count {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        white-space: nowrap;
      }
      .lrv-list-wrap {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 10px;
      }
      .lrv-card {
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px 12px;
        display: flex; flex-direction: column; gap: 6px;
        transition: border-color 0.15s;
        min-width: 0;
      }
      .lrv-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
      .lrv-card-head {
        display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
      }
      .lrv-card-name {
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--text);
        line-height: 1.25;
        word-break: break-word;
      }
      .lrv-card-actions {
        display: flex; gap: 4px;
        opacity: 0;
        transition: opacity 0.12s;
      }
      .lrv-card:hover .lrv-card-actions { opacity: 1; }
      .lrv-card-actions button {
        background: transparent;
        border: 1px solid transparent;
        color: var(--muted);
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 4px;
        cursor: pointer;
      }
      .lrv-card-actions button:hover {
        border-color: var(--border);
        color: var(--text);
      }
      .lrv-card-actions .lrv-del-btn:hover {
        color: var(--danger);
        border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
      }
      .lrv-addr {
        font-size: var(--text-xs);
        color: var(--muted);
        line-height: 1.4;
      }
      .lrv-fields {
        display: flex; flex-direction: column; gap: 3px;
        margin-top: 2px;
      }
      .lrv-field-row {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 8px;
        font-size: var(--text-xs);
        line-height: 1.4;
        align-items: baseline;
      }
      .lrv-field-label {
        font-family: var(--font-mono);
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 0.05em;
        color: var(--muted);
        padding-top: 2px;
      }
      .lrv-field-values {
        display: flex; flex-direction: column; gap: 1px;
        min-width: 0;
      }
      .lrv-field-values a {
        color: var(--accent);
        text-decoration: none;
        word-break: break-all;
      }
      .lrv-field-values a:hover { text-decoration: underline; }
      .lrv-notes {
        font-size: var(--text-xs);
        color: var(--muted);
        line-height: 1.4;
        margin-top: 4px;
        padding-top: 6px;
        border-top: 1px dashed var(--border);
        white-space: pre-wrap;
      }
      .lrv-empty {
        padding: 40px 20px;
        text-align: center;
        color: var(--muted);
        font-size: var(--text-sm);
      }
      .lrv-source-note {
        margin-bottom: 10px;
        font-size: var(--text-xs);
        color: var(--muted);
        font-style: italic;
      }

      /* v26.66 — pagination controls */
      .lrv-pager {
        display: flex; align-items: center; justify-content: center;
        gap: 8px;
        margin-top: 16px;
        padding-top: 12px;
        border-top: 1px dashed var(--border);
      }
      .lrv-pager:empty {
        margin: 0;
        padding: 0;
        border: none;
      }
      .lrv-page-btn[disabled] {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
      }
      .lrv-page-indicator {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        padding: 0 6px;
      }

      /* Add/Edit carrier modal — minimal form, big enough to type a
         carrier with multiple emails and a paragraph of notes. */
      .lrv-modal-form { display: flex; flex-direction: column; gap: 10px; }
      .lrv-modal-form label {
        display: flex; flex-direction: column; gap: 4px;
        font-size: var(--text-xs);
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .lrv-modal-form input,
      .lrv-modal-form textarea {
        padding: 7px 9px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--input-bg);
        color: var(--text);
        font-family: inherit;
        font-size: var(--text-sm);
        text-transform: none;
        letter-spacing: normal;
      }
      .lrv-modal-form textarea { resize: vertical; min-height: 70px; }
      .lrv-modal-form .lrv-hint {
        font-size: 10px;
        color: var(--muted);
        text-transform: none;
        letter-spacing: normal;
        font-style: italic;
        margin-top: -2px;
      }

      /* ============ Post-Sales Pipeline (v26.60) ============
         A second pipeline for tracking upsell/service-fix/remarket work
         alongside the renewals book. Stage-based (not days-based) —
         the columns are workflow categories, not time windows. Layout
         mirrors the IQ Portals / Underwriters list-view feel so the
         visual language stays consistent across the team's tools.
      */
      .ps-toolbar {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 14px;
        padding: 10px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        flex-wrap: wrap;
      }
      .ps-toolbar h2 {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--text);
        flex: 1;
      }
      .ps-toolbar-spacer { flex: 1; }
      .ps-toolbar input[type="search"] {
        flex: 1 1 280px;
        min-width: 200px;
        padding: 7px 11px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
      }

      .ps-stage-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
      }
      .ps-stage-chip {
        padding: 6px 12px;
        border-radius: 16px;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--muted);
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.12s, color 0.12s, border-color 0.12s;
        font-family: var(--font-base);
      }
      .ps-stage-chip:hover {
        color: var(--text);
        border-color: var(--text);
      }
      .ps-stage-chip.is-active {
        background: var(--accent);
        color: var(--bg);
        border-color: var(--accent);
        font-weight: 600;
      }
      [data-theme="harper"] .ps-stage-chip.is-active {
        background: #1a8f5e;
        border-color: #1a8f5e;
        color: #FFFFFF;
      }
      .ps-stage-chip .ps-chip-count {
        margin-left: 5px;
        opacity: 0.65;
        font-variant-numeric: tabular-nums;
      }
      .ps-stage-chip.is-active .ps-chip-count { opacity: 0.9; }

      /* Per-stage pill colors (matches the chip's pill on each row) */
      .ps-pill {
        display: inline-block;
        padding: 2px 9px;
        border-radius: 10px;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.45;
        white-space: nowrap;
      }
      .ps-pill-upsell      { background: rgba(46, 196, 124, 0.18); color: #0e7a4a; }
      .ps-pill-endorsement { background: rgba(138, 92, 215, 0.22); color: var(--lb-violet-text, #9a6cd9); }   /* v26.70 — purple slot for the new Endorsement stage */
      .ps-pill-service_fix { background: rgba(56, 132, 255, 0.18); color: #1e4ec5; }
      .ps-pill-remarket    { background: rgba(247, 175, 88, 0.22); color: #92580f; }
      .ps-pill-other       { background: rgba(120, 120, 130, 0.18); color: var(--muted); }
      [data-theme="harper"] .ps-pill-upsell      { background: rgba(26, 143, 94, 0.18);  color: #0e7a4a; }
      [data-theme="harper"] .ps-pill-endorsement { background: rgba(108, 60, 180, 0.16); color: #6b3fb5; }
      [data-theme="harper"] .ps-pill-service_fix { background: rgba(34, 89, 158, 0.18);  color: #22599e; }
      [data-theme="harper"] .ps-pill-remarket    { background: rgba(229, 90, 74, 0.18);  color: #b54235; }

      /* Outcome pill for closed post-sales rows.
         v26.68 — bigger, bolder, with a glyph prefix so the result is
         visible at a glance even on dimmed closed rows. Earlier the
         pill used a single set of dark text colors that read poorly on
         dark themes, and `is-closed` rows further faded it to 0.7
         opacity. Now: theme-aware colors via CSS variables, a leading
         icon ("✓" / "✕" / "●"), and an opacity override so the pill
         stays full-strength even while the rest of the row is dimmed. */
      .ps-outcome-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 11px;
        border-radius: 10px;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.4;
        margin-left: 8px;
        letter-spacing: 0.01em;
        white-space: nowrap;
        border: 1px solid transparent;
      }
      .ps-outcome-pill::before {
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
      }
      .ps-outcome-won::before      { content: "✓"; }
      .ps-outcome-pending::before  { content: "●"; }   /* v26.69 */
      .ps-outcome-closed::before   { content: "✕"; }   /* v26.69 — repurposed: now "didn't sell" */
      .ps-outcome-lost::before     { content: "✕"; }
      .ps-outcome-ghosted::before  { content: "◌"; }   /* v2.91.0 — went dark */
      .ps-outcome-other::before    { content: "●"; }   /* v2.91.0 */
      .ps-outcome-resolved::before { content: "●"; }   /* legacy */
      .ps-outcome-won {
        background: rgba(46, 196, 124, 0.20);
        color: var(--lb-ok-text, #14a05e);
        border-color: rgba(46, 196, 124, 0.45);
      }
      .ps-outcome-pending {
        background: rgba(245, 168, 35, 0.20);
        color: var(--lb-warn-text, #e0a020);
        border-color: rgba(245, 168, 35, 0.50);
      }
      .ps-outcome-closed {
        background: rgba(220, 73, 73, 0.20);
        color: var(--lb-bad-text, #d65555);
        border-color: rgba(220, 73, 73, 0.45);
      }
      /* Legacy pills (pre-v26.69 data). Same colors as their migrated
         equivalents so any account that somehow didn't migrate still
         renders sensibly. */
      .ps-outcome-lost {
        background: rgba(220, 73, 73, 0.20);
        color: var(--lb-bad-text, #d65555);
        border-color: rgba(220, 73, 73, 0.45);
      }
      .ps-outcome-resolved {
        background: rgba(56, 132, 255, 0.18);
        color: var(--lb-blue-text, #5a8fff);
        border-color: rgba(56, 132, 255, 0.45);
      }
      /* v2.91.0 outcomes — Ghosted (went dark, slate) and Other (neutral). */
      .ps-outcome-ghosted {
        background: rgba(120, 130, 150, 0.20);
        color: var(--lb-slate-text, #93a0b5);
        border-color: rgba(120, 130, 150, 0.45);
      }
      .ps-outcome-other {
        background: rgba(245, 168, 35, 0.16);
        color: var(--lb-warn-text, #e0a020);
        border-color: rgba(245, 168, 35, 0.45);
      }
      /* Harper / light themes — darker text for better contrast on
         light backgrounds. */
      [data-theme="harper"] .ps-outcome-won,
      [data-theme="light"]  .ps-outcome-won      { color: #0e7a4a; border-color: rgba(46, 196, 124, 0.55); }
      [data-theme="harper"] .ps-outcome-pending,
      [data-theme="light"]  .ps-outcome-pending  { color: #92400e; border-color: rgba(245, 168, 35, 0.65); }
      [data-theme="harper"] .ps-outcome-closed,
      [data-theme="light"]  .ps-outcome-closed   { color: #b13838; border-color: rgba(220, 73, 73, 0.55); }
      [data-theme="harper"] .ps-outcome-lost,
      [data-theme="light"]  .ps-outcome-lost     { color: #b13838; border-color: rgba(220, 73, 73, 0.55); }
      [data-theme="harper"] .ps-outcome-resolved,
      [data-theme="light"]  .ps-outcome-resolved { color: #1e4ec5; border-color: rgba(56, 132, 255, 0.55); }
      [data-theme="harper"] .ps-outcome-ghosted,
      [data-theme="light"]  .ps-outcome-ghosted  { color: #5b6b82; border-color: rgba(91, 107, 130, 0.5); }
      [data-theme="harper"] .ps-outcome-other,
      [data-theme="light"]  .ps-outcome-other    { color: #a06f00; border-color: rgba(245, 168, 35, 0.6); }

      .ps-list {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
      }
      .ps-row {
        display: grid;
        grid-template-columns: minmax(180px, 1.4fr) 110px 1fr 1.6fr 140px 220px;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        align-items: center;
        font-size: var(--text-sm);
      }
      .ps-row:last-child { border-bottom: none; }
      /* v26.68 — was `opacity: 0.7` on the whole row, which dimmed the
         outcome pill too (CSS opacity composes multiplicatively, so a
         child can't `opacity: 1` itself back to full strength inside a
         dimmed parent). Now we dim only the non-headline cells, so the
         company name + outcome pill stay vivid as the row's headline. */
      .ps-row.is-closed .ps-cell-assignees,
      .ps-row.is-closed .ps-cell-assignees-avatar,
      .ps-row.is-closed .ps-cell-notes,
      .ps-row.is-closed .ps-cell-updated { opacity: 0.65; }
      .ps-row-header {
        background: var(--input-bg);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        font-weight: 600;
        padding: 8px 16px;
      }
      .ps-cell-company {
        font-weight: 600;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .ps-cell-assignees {
        color: var(--muted);
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* Post-sales assignees cell using the same avatar/popover pattern
         as the renewals list (v26.61). Inherits .pl-assignees-cell base
         styling; this just ensures the cell is comfortably clickable
         when it's empty and has a reasonable min-width inside the
         post-sales grid. */
      .ps-cell-assignees-avatar {
        min-height: 28px;
        min-width: 100px;
        display: flex;
        align-items: center;
        padding-left: 6px;
      }
      .ps-cell-notes {
        color: var(--muted);
        font-size: 12.5px;
        overflow: hidden;
        min-width: 0;
      }
      .ps-cell-notes-main {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /* v26.71 — close note display on closed rows. Italic with
         quote glyphs so it reads as a captured statement; clipped to
         one line with ellipsis since the cell width is fixed. The
         full text is in the cell's `title` so hovering reveals it. */
      .ps-cell-close-note {
        margin-top: 3px;
        font-size: 11.5px;
        font-style: italic;
        color: var(--muted);
        opacity: 0.82;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .ps-cell-close-note-glyph {
        font-style: normal;
        opacity: 0.55;
        margin: 0 1px;
      }
      .ps-cell-updated {
        font-size: 11.5px;
        color: var(--muted);
        font-family: var(--font-mono);
      }
      .ps-cell-actions {
        display: flex;
        gap: 6px;
        justify-content: flex-end;
        flex-wrap: wrap;
      }
      .ps-cell-actions button {
        padding: 4px 10px;
        font-size: 11.5px;
      }
      .ps-empty {
        padding: 40px 16px;
        text-align: center;
        color: var(--muted);
        font-size: var(--text-sm);
      }

      /* Inline add-form */
      .ps-add-form {
        margin-bottom: 14px;
        padding: 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        display: grid;
        grid-template-columns: 1fr 160px 200px;
        gap: 10px;
        align-items: end;
      }
      .ps-add-form label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .ps-add-form input,
      .ps-add-form select,
      .ps-add-form textarea {
        font-family: var(--font-base);
        font-size: var(--text-sm);
        padding: 7px 11px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
      }
      .ps-add-form textarea {
        grid-column: 1 / -1;
        min-height: 60px;
        resize: vertical;
      }
      .ps-add-form-actions {
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
      }

      /* Edit-in-place styling for a row */
      .ps-row.is-editing {
        background: var(--input-bg);
        display: block;
        padding: 16px;
      }
      .ps-edit-grid {
        display: grid;
        grid-template-columns: 1fr 160px;
        gap: 10px;
        margin-bottom: 10px;
      }
      .ps-edit-grid input,
      .ps-edit-grid select,
      .ps-edit-notes textarea {
        font-family: var(--font-base);
        font-size: var(--text-sm);
        padding: 7px 11px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        width: 100%;
      }
      .ps-edit-notes {
        margin-bottom: 10px;
      }
      .ps-edit-notes textarea {
        min-height: 70px;
        resize: vertical;
      }
      .ps-edit-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
      }

      /* v26.73 — assignee filter dropdown. Sits on the LEFT side of
         the toolbar (right after the title, before the spacer) so the
         user sees the active filter scope before they scan further.
         The chip lights up with an accent border when a filter is
         active, so even with the menu closed it's obvious whose
         accounts you're looking at. */
      .ps-filter-wrap {
        position: relative;
        display: inline-block;
        margin-left: 6px;
      }
      .ps-assignee-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .ps-assignee-filter-btn.is-active {
        border-color: var(--accent, #5a8fff);
        background: color-mix(in srgb, var(--accent, #5a8fff) 14%, transparent);
        color: var(--text);
        font-weight: 600;
      }
      .ps-assignee-filter-label {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .ps-assignee-filter-caret {
        font-size: 10px;
        opacity: 0.7;
      }
      .ps-assignee-filter-menu {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        z-index: 50;
        min-width: 240px;
        max-height: 360px;
        overflow-y: auto;
        padding: 4px 0;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
        display: flex;
        flex-direction: column;
      }
      .ps-assignee-filter-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: transparent;
        border: 0;
        padding: 7px 14px;
        text-align: left;
        font: inherit;
        font-size: 13px;
        color: var(--text);
        cursor: pointer;
      }
      .ps-assignee-filter-item:hover,
      .ps-assignee-filter-item:focus-visible {
        background: var(--input-bg);
        outline: none;
      }
      .ps-assignee-filter-item.is-active {
        background: color-mix(in srgb, var(--accent, #5a8fff) 16%, transparent);
        font-weight: 600;
      }
      .ps-assignee-filter-item.is-empty .ps-assignee-filter-item-name,
      .ps-assignee-filter-item.is-empty .ps-assignee-filter-item-count {
        opacity: 0.42;
      }
      .ps-assignee-filter-item-name {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .ps-assignee-filter-item-count {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        flex: 0 0 auto;
      }

      /* v26.75 — search input in the post-sales toolbar. Sits between
         the assignee filter and the spacer so the two filters read as
         a single "narrow the view" cluster. Flexes a bit so it fills
         available space without getting absurdly wide on big monitors. */
      .ps-search-wrap {
        display: inline-flex;
        align-items: center;
        margin-left: 6px;
        flex: 1 1 220px;
        max-width: 360px;
        min-width: 140px;
      }
      .ps-search-input {
        width: 100%;
        padding: 6px 11px;
        font: inherit;
        font-size: 13px;
        color: var(--text);
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 6px;
        outline: none;
      }
      .ps-search-input:focus {
        border-color: var(--accent, #5a8fff);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #5a8fff) 22%, transparent);
      }
      .ps-search-input::placeholder {
        color: var(--muted);
        opacity: 0.75;
      }

      /* v26.72 — download dropdown menu. The wrap is the positioning
         anchor for the absolute-positioned menu so it sits flush under
         the button regardless of toolbar layout. */
      .ps-download-wrap {
        position: relative;
        display: inline-block;
      }
      .ps-download-menu {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        z-index: 50;
        min-width: 200px;
        padding: 6px 0;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
        display: flex;
        flex-direction: column;
      }
      .ps-download-menu-section {
        padding: 4px 14px 2px;
        font-family: var(--font-mono);
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
      }
      .ps-download-menu-item {
        background: transparent;
        border: 0;
        padding: 7px 14px;
        text-align: left;
        font: inherit;
        font-size: 13px;
        color: var(--text);
        cursor: pointer;
      }
      .ps-download-menu-item:hover,
      .ps-download-menu-item:focus-visible {
        background: var(--input-bg);
        outline: none;
      }
      .ps-download-menu-divider {
        height: 1px;
        background: var(--border);
        margin: 4px 0;
      }

      /* ============ Inline Close form (v26.67) ============
         Replaces the two stacked prompt() dialogs from earlier builds.
         When the user clicks Close on a row, the row morphs into a
         full-width card with three big outcome buttons (Won / Lost /
         Resolved), an optional close-note textarea, and Cancel /
         Close-as-X actions.

         Each outcome button reuses the same color tokens as the
         post-close outcome pills (.ps-outcome-won/-lost/-resolved),
         so picking an outcome visually previews the pill that's about
         to be applied to the closed account. */
      .ps-row.is-closing {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 0;
      }
      .ps-close-card {
        padding: 18px 20px 16px;
        background: var(--input-bg);
        display: flex; flex-direction: column;
        gap: 14px;
      }
      .ps-close-head {
        display: flex; align-items: baseline; gap: 10px;
      }
      .ps-close-head-label {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
      }
      .ps-close-head-name {
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--text);
      }
      .ps-close-outcomes {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }
      .ps-close-outcome {
        display: flex; flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 12px 14px;
        border: 2px solid transparent;
        border-radius: 10px;
        cursor: pointer;
        font: inherit;
        text-align: left;
        transition: transform 0.06s, box-shadow 0.12s, opacity 0.12s;
        opacity: 0.62;
      }
      .ps-close-outcome:hover { opacity: 0.92; }
      .ps-close-outcome.is-selected {
        opacity: 1;
        border-color: currentColor;
        box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
      }
      .ps-close-outcome:active { transform: translateY(1px); }
      .ps-close-outcome-label {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.01em;
      }
      .ps-close-outcome-desc {
        font-size: 11.5px;
        font-weight: 400;
        opacity: 0.78;
      }

      .ps-close-note-label {
        display: flex; flex-direction: column;
        gap: 6px;
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
      }
      .ps-close-note-hint {
        text-transform: none;
        letter-spacing: normal;
        font-style: italic;
        opacity: 0.85;
      }
      .ps-close-note-label textarea {
        font-family: inherit;
        font-size: var(--text-sm);
        text-transform: none;
        letter-spacing: normal;
        color: var(--text);
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 9px 11px;
        min-height: 64px;
        resize: vertical;
      }
      .ps-close-actions {
        display: flex; justify-content: flex-end;
        gap: 8px;
      }
      .ps-close-submit {
        font-weight: 600;
      }

      @media (max-width: 720px) {
        .ps-close-outcomes {
          grid-template-columns: 1fr;
        }
      }

      /* v2.129.0 — result capture inside the Won branch: New sale /
         Save / Sale + save. Same button anatomy as outcomes, neutral
         palette (the outcome buttons own the color story). */
      .ps-close-results { margin: 12px 0 10px; }
      .ps-close-result-btn { background: var(--input-bg); border-color: var(--border); }
      .ps-close-result-btn.is-selected {
        opacity: 1; border-color: var(--accent);
        box-shadow: 0 2px 10px rgba(15, 37, 64, 0.14);
      }
      .ps-close-save-fields { margin-bottom: 10px; }

      @media (max-width: 900px) {
        .ps-row, .ps-row-header {
          grid-template-columns: 1fr 100px;
          gap: 8px;
        }
        .ps-row > div:nth-child(n+3) {
          grid-column: 1 / -1;
        }
        .ps-add-form {
          grid-template-columns: 1fr;
        }
      }

      /* ============ Post-Sales v2 (v2.88.0 rebuild) ============
         Staged workflow with the Renewals dual modality: Kanban + a
         stage-bucketed list. Reuses .pv-toggle (segmented control),
         .kanban/.kanban-col/.pcard (board), and the close-outcome
         buttons above; everything ps-scoped below is new. */

      /* Compact variant of the pipeline view toggle for the ps toolbar. */
      .ps-view-toggle .pv-toggle-btn {
        padding: 7px 16px;
        min-height: 34px;
        font-size: 13px;
        gap: 7px;
      }
      .ps-view-toggle .pv-toggle-btn svg { width: 15px; height: 15px; }

      /* Kanban: the four working stages + the terminal Outcome pipe
         (v2.91.0). Columns stay wide so the card can hold the ask,
         why-PSS, and facts without collapsing (Harris 2026-08-20).
         The base .kanban grid scrolls horizontally when the viewport
         is narrower. */
      .ps-kanban {
        grid-template-columns: repeat(5, minmax(400px, 1fr));
        gap: 22px;
      }
      @media (max-width: 760px) {
        .ps-kanban { grid-template-columns: 1fr; }
      }
      .ps-kanban-col { min-height: 280px; padding: 0 16px 16px; }
      .ps-kanban-col .kanban-col-head {
        padding: 16px 18px 12px;
        margin: 0 -16px;
      }
      .ps-kanban .ps-pcard {
        padding: 16px 18px;
        gap: 10px;
      }
      .ps-kanban .ps-pcard .acct-name {
        -webkit-line-clamp: 3;
        font-size: 1.12rem;
      }
      /* The Outcome pipe reads as "done" — dashed edge, calmer cards. */
      .ps-kanban-col-outcome { border-style: dashed; }
      .ps-kanban-col-outcome .kanban-col-head .label { color: var(--muted); }
      .ps-pcard-closed { opacity: 0.88; }
      .ps-pcard-closed:hover { opacity: 1; }
      .ps-col-empty {
        padding: 26px 10px;
        text-align: center;
        color: var(--muted);
        font-size: var(--text-sm);
        font-style: italic;
      }
      .ps-pcard .ps-card-tags {
        display: flex; flex-wrap: wrap; gap: 5px;
        align-items: center;
      }
      /* v2.128.0 — the notes ARE the ticket (Harris: "the most important
         part ... shows the problem space and what needs to be actioned").
         Promoted from a 2-line muted afterthought to the card's body:
         readable size, full text color, up to 5 lines, its own panel. */
      .ps-pcard .ps-card-notes {
        overflow: hidden; text-overflow: ellipsis;
        display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--text);
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px 12px;
        white-space: pre-line;
      }
      .ps-card-facts {
        display: grid;
        grid-template-columns: 4.4rem minmax(0, 1fr);
        gap: 3px 8px;
        align-items: baseline;
      }
      .ps-card-facts .k {
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 650;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .ps-card-facts .v {
        font-size: 12.5px;
        color: var(--text);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .ps-card-why,
      .ps-card-comment {
        font-size: 12.5px;
        line-height: 1.4;
        color: var(--text);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .ps-card-why-lab,
      .ps-card-comment-lab {
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 650;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        margin-right: 6px;
      }
      /* Thin Apple switch + "Working" label. Reuses .lb-switch; sized
         down so it sits in the card foot / list cell without looking
         like a status chip. */
      /* Revenue At Stake chip — the existing book revenue on this
         account (the money PSS defends/steals from new business). */
      .ps-ras-chip {
        display: inline-flex; align-items: baseline; gap: 4px;
        font-family: var(--font-mono);
        font-size: 12px; font-weight: 700;
        color: var(--warning, var(--lb-warn-text, #d97706));
        white-space: nowrap;
      }
      .ps-ras-chip .ps-ras-label {
        font-size: 9px; font-weight: 600; letter-spacing: 0.05em;
        text-transform: uppercase; opacity: 0.75;
      }
      .ps-ras-chip.is-empty { color: var(--muted); font-weight: 500; }
      .ps-loc-pill {
        display: inline-flex; align-items: center;
        font-size: 10.5px; font-weight: 600;
        padding: 1px 7px; border-radius: 999px;
        border: 1px solid var(--border);
        color: var(--muted);
        white-space: nowrap;
      }
      .ps-pcard, .ps-row[data-ps-id] { cursor: pointer; }
      .ps-pcard .pcard-actions, .ps-cell-actions { cursor: default; }
      .ps-working-toggle.lb-switch {
        gap: 6px;
        padding: 0;
        font-size: 11px;
        font-weight: 650;
        color: var(--muted);
      }
      .ps-working-toggle .lb-switch-track {
        width: 32px;
        height: 18px;
      }
      .ps-working-toggle .lb-switch-knob {
        width: 14px;
        height: 14px;
        top: 1px;
        left: 1px;
      }
      .ps-working-toggle.is-active .lb-switch-knob { transform: translateX(14px); }
      .ps-working-toggle:disabled { opacity: 0.45; cursor: default; }
      .ps-card-foot {
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px;
      }
      .ps-card-updated {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        flex-shrink: 0;
      }

      /* Expected-revenue figure — the headline number on cards + rows. */
      .ps-rev {
        font-family: var(--font-mono);
        font-weight: 700;
        font-size: 13px;
        color: var(--lb-ok-text, #14a05e);
        white-space: nowrap;
      }
      [data-theme="harper"] .ps-rev, [data-theme="light"] .ps-rev { color: #0e7a4a; }
      .ps-rev-empty { color: var(--muted); font-weight: 400; }

      /* v2.105.0 — PSS Revenue (existing at-stake + additional sale).
         The small PSS tag marks full-attribution figures apart from
         plain expected revenue. */
      .ps-rev-pss { display: inline-flex; align-items: center; gap: 4px; }
      .ps-rev-pss-tag {
        font-family: var(--font-mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.06em;
        padding: 1px 4px;
        border-radius: 4px;
        background: rgba(20, 160, 94, 0.14);
        border: 1px solid rgba(20, 160, 94, 0.4);
        color: inherit;
      }

      /* Revenue At Stake lookup row in the account form. */
      .ps-ras-wrap { display: flex; flex-direction: column; gap: 6px; }
      .ps-ras-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
      .ps-ras-status { font-size: 12px; color: var(--muted); }
      .ps-ras-candidates { display: flex; flex-wrap: wrap; gap: 6px; }
      /* v2.107.0 — "note required" marker on the Notes field when the
         Fixed Account/Other category is selected. */
      .ps-notes-req { color: #c05621; font-weight: 600; }
      [data-theme="dark"] .ps-notes-req { color: #f0a05a; }

      /* Category pills — the revenue-rank taxonomy. Rank number leads so
         producers internalize the ordering (1 rewrite … 4 additional
         insured). */
      .ps-cat-rank {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        opacity: 0.75;
        margin-right: 4px;
      }
      .ps-cat-rewrite             { background: rgba(46, 196, 124, 0.20);  color: #0e7a4a; }
      .ps-cat-additional_coverage { background: rgba(56, 132, 255, 0.18);  color: #1e4ec5; }
      .ps-cat-endorsement         { background: rgba(138, 92, 215, 0.22);  color: var(--lb-violet-text, #9a6cd9); }
      .ps-cat-additional_insured  { background: rgba(247, 175, 88, 0.22);  color: #92580f; }
      .ps-cat-fixed_other         { background: rgba(120, 130, 145, 0.20); color: #4a5568; }
      [data-theme="dark"] .ps-cat-rewrite             { color: #3ecf8e; }
      [data-theme="dark"] .ps-cat-additional_coverage { color: #7aa5ff; }
      [data-theme="dark"] .ps-cat-endorsement         { color: #b18ae6; }
      [data-theme="dark"] .ps-cat-additional_insured  { color: #f0b56b; }
      [data-theme="dark"] .ps-cat-fixed_other         { color: #a8b3c2; }

      /* Origin tag ("why post-sales"), AI sub-flags, producer, loss pill. */
      .ps-origin-tag {
        font-size: 11px;
        color: var(--muted);
        border: 1px dashed var(--border);
        border-radius: 999px;
        padding: 2px 8px;
        white-space: nowrap;
      }
      .ps-ai-flag {
        font-size: 10.5px;
        color: var(--muted);
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 1px 7px;
        white-space: nowrap;
        margin-left: 3px;
      }
      /* v2.89.0 — market-approach branch (incumbent UW vs remarket). */
      .ps-path-pill {
        font-size: 10.5px;
        font-weight: 700;
        border-radius: 999px;
        padding: 2px 8px;
        white-space: nowrap;
      }
      .ps-path-pill.is-incumbent {
        color: #0e7490;
        background: rgba(34, 197, 220, 0.14);
        border: 1px solid rgba(34, 197, 220, 0.38);
      }
      .ps-path-pill.is-remarket {
        color: #c2570b;
        background: rgba(249, 145, 60, 0.14);
        border: 1px solid rgba(249, 145, 60, 0.38);
      }
      [data-theme="dark"] .ps-path-pill.is-incumbent { color: #67e0f0; }
      [data-theme="dark"] .ps-path-pill.is-remarket  { color: #f7a45e; }
      /* v2.89.0 — auto-intake badge (Upsell send by a PSS-lane producer). */
      .ps-auto-tag {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #9333ea;
        background: rgba(168, 85, 247, 0.12);
        border: 1px solid rgba(168, 85, 247, 0.32);
        border-radius: 999px;
        padding: 1px 7px;
        white-space: nowrap;
        margin-left: 6px;
      }
      [data-theme="dark"] .ps-auto-tag { color: #c99af5; }
      /* v2.136.0 — Workbench age chip (days the source service ticket
         has been sitting in the BB Workbench). Muted by default, amber
         at 30+, red at 60+ — the same escalation instinct as the
         Workbench itself. */
      .ps-wb-age {
        font-size: 10.5px;
        font-weight: 700;
        color: var(--muted);
        background: color-mix(in srgb, var(--muted) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
        border-radius: 999px;
        padding: 1px 7px;
        white-space: nowrap;
      }
      .ps-wb-age.is-aging {
        color: #b45309;
        background: rgba(217, 119, 6, 0.10);
        border-color: rgba(217, 119, 6, 0.35);
      }
      .ps-wb-age.is-old {
        color: #c0392b;
        background: rgba(192, 57, 43, 0.10);
        border-color: rgba(192, 57, 43, 0.35);
      }
      [data-theme="dark"] .ps-wb-age.is-aging { color: #f0b45e; }
      [data-theme="dark"] .ps-wb-age.is-old { color: #f08a7d; }
      /* v2.138.0 — the Workbench age as a real badge ("make the days on
         the workbench more obvious"): one consistent pill on card faces
         and its own In-WB column in the pipeline list. Same escalation
         palette as .ps-wb-age, but bigger and always badge-shaped. */
      .ps-wb-badge {
        display: inline-flex; align-items: baseline; gap: 4px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        color: var(--muted);
        background: color-mix(in srgb, var(--muted) 8%, transparent);
        border: 1px solid color-mix(in srgb, var(--muted) 32%, transparent);
        border-radius: 999px;
        padding: 2px 9px;
        white-space: nowrap;
        line-height: 1.5;
      }
      .ps-wb-badge-label {
        font-family: var(--font-sans);
        font-weight: 500;
        font-size: 10px;
        opacity: 0.8;
      }
      .ps-wb-badge.is-aging {
        color: #b45309;
        background: rgba(217, 119, 6, 0.10);
        border-color: rgba(217, 119, 6, 0.4);
      }
      .ps-wb-badge.is-old {
        color: #c0392b;
        background: rgba(192, 57, 43, 0.10);
        border-color: rgba(192, 57, 43, 0.4);
      }
      [data-theme="dark"] .ps-wb-badge.is-aging { color: #f0b45e; }
      [data-theme="dark"] .ps-wb-badge.is-old { color: #f08a7d; }
      /* v2.138.0 — pipeline lens row: sort + threshold filter chips in
         the shared ag-tag chip language, one slim line under the
         toolbar. */
      .ps-lens-row {
        display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
        margin: 0 0 12px;
        padding: 8px 12px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .ps-lens-label {
        font-size: 11px; font-weight: 650; color: var(--muted);
        text-transform: uppercase; letter-spacing: 0.05em;
        margin-right: 2px;
      }
      .ps-lens-sep {
        width: 1px; height: 18px; background: var(--border);
        margin: 0 8px;
      }
      .ps-lens-count {
        margin-left: auto;
        font-family: var(--font-mono);
        font-size: 11px; color: var(--muted);
      }
      .ps-lens-clear { margin-left: 6px; }
      /* v2.136.1 — the quiet meta line that replaced the pill pile on
         card faces, list rows, and the account-card hero ("Way too
         cluttered"). Plain text with dot separators; the category keeps
         its taxonomy color as TEXT, and Workbench age only takes color
         once it actually ages (30d amber, 60d red). */
      .ps-meta-line {
        display: inline-flex; flex-wrap: wrap; align-items: baseline;
        gap: 3px 6px;
        font-size: 11px;
        color: var(--muted);
        min-width: 0;
        line-height: 1.5;
      }
      .ps-meta-dot { opacity: 0.5; }
      .ps-meta-loc { font-weight: 650; color: var(--text); }
      .ps-meta-cat { font-weight: 600; }
      .ps-meta-wb, .ps-meta-auto { font-weight: 500; white-space: nowrap; }
      .ps-meta-wb.is-aging { color: #b45309; font-weight: 700; }
      .ps-meta-wb.is-old { color: #c0392b; font-weight: 700; }
      [data-theme="dark"] .ps-meta-wb.is-aging { color: #f0b45e; }
      [data-theme="dark"] .ps-meta-wb.is-old { color: #f08a7d; }
      .ps-meta-auto { color: #9333ea; }
      [data-theme="dark"] .ps-meta-auto { color: #c99af5; }
      /* Category taxonomy colors, text-only (same palette the old
         pills used, minus the background bubble). */
      .ps-catc-rewrite             { color: #0e7a4a; }
      .ps-catc-additional_coverage { color: #1e4ec5; }
      .ps-catc-endorsement         { color: #6b3fb5; }
      .ps-catc-additional_insured  { color: #92580f; }
      .ps-catc-fixed_other         { color: var(--muted); }
      [data-theme="dark"] .ps-catc-rewrite             { color: #3ecf8e; }
      [data-theme="dark"] .ps-catc-additional_coverage { color: #7aa5ff; }
      [data-theme="dark"] .ps-catc-endorsement         { color: #b18ae6; }
      [data-theme="dark"] .ps-catc-additional_insured  { color: #f0b56b; }
      [data-theme="dark"] .ps-catc-fixed_other         { color: var(--muted); }
      .ps-path-hint { display: block; margin-top: 4px; }
      .ps-producer {
        font-size: 12px;
        font-weight: 600;
        color: var(--text);
      }
      .ps-loss-pill {
        display: inline-block;
        padding: 2px 9px;
        border-radius: 10px;
        font-size: 11.5px;
        font-weight: 600;
        white-space: nowrap;
        background: rgba(220, 73, 73, 0.16);
        color: var(--lb-bad-text, #d65555);
        border: 1px solid rgba(220, 73, 73, 0.4);
      }
      [data-theme="harper"] .ps-loss-pill, [data-theme="light"] .ps-loss-pill { color: #b13838; }

      /* New-pipeline stage pills (legacy tab keeps the old ps-pill-* set).
         v2.91.0 — one hue per working stage, walking cool → warm → green
         as the account moves toward the Outcome pipe. */
      .ps-pill-info_request { background: rgba(56, 132, 255, 0.18);  color: #1e4ec5; }
      .ps-pill-submission   { background: rgba(138, 92, 215, 0.22);  color: var(--lb-violet-text, #9a6cd9); }
      .ps-pill-quoted       { background: rgba(245, 168, 35, 0.2);   color: #a06f00; }
      .ps-pill-pitched      { background: rgba(46, 196, 124, 0.18);  color: #0e7a4a; }

      /* Card / row action chips. */
      .ps-chip-advance:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
      .ps-chip-outcome:hover { color: var(--lb-ok-text, #14a05e) !important; border-color: rgba(46, 196, 124, 0.55) !important; }
      .ps-chip-outcome.is-final { font-weight: 650; }
      .ps-chip-delete:hover { color: var(--danger, var(--lb-rose-text, #fb7185)) !important; border-color: var(--danger, #fb7185) !important; }

      /* Bucketed list (pipeline list mode) — group headers per stage,
         same visual language as the renewals grouped list. */
      .ps-list-groups { display: flex; flex-direction: column; gap: 18px; }
      .ps-group-head {
        display: flex; align-items: baseline; gap: 12px;
        padding: 2px 4px 6px;
      }
      .ps-group-title {
        font-family: var(--font-display);
        font-weight: 650;
        font-size: 1.05rem;
        letter-spacing: -0.01em;
        color: var(--text);
      }
      .ps-group-info_request .ps-group-title { color: var(--lb-blue-text, #5a8fff); }
      .ps-group-submission   .ps-group-title { color: var(--lb-violet-text, #9a6cd9); }
      .ps-group-quoted       .ps-group-title { color: var(--lb-warn-text, #f5a823); }
      .ps-group-pitched      .ps-group-title { color: var(--lb-ok-text, #2ec47c); }
      .ps-group-outcome      .ps-group-title { color: var(--muted); }
      [data-theme="harper"] .ps-group-info_request .ps-group-title { color: #22599e; }
      [data-theme="harper"] .ps-group-submission   .ps-group-title { color: #6b3fb5; }
      [data-theme="harper"] .ps-group-quoted       .ps-group-title { color: #a06f00; }
      [data-theme="harper"] .ps-group-pitched      .ps-group-title { color: #1a8f5e; }
      .ps-group-meta {
        font-family: var(--font-mono);
        font-size: 11.5px;
        color: var(--muted);
      }
      /* v2.91.0 — empty stage buckets still render (the whole workflow
         stays visible), with a quiet placeholder instead of rows. */
      .ps-group-empty {
        padding: 12px 16px;
        border: 1px dashed var(--border);
        border-radius: var(--radius-lg);
        color: var(--muted);
        font-size: var(--text-sm);
        font-style: italic;
      }

      /* Row grids per mode (base .ps-row supplies padding/borders).
         v2.128.0 — pipeline list reworked notes-first. v2.135.0 — the
         Actions column is gone (stage moves live in the hover card /
         account card). v2.138.0 — Category folded into a meta line
         under the company name; a dedicated In-WB badge column landed:
         Company · At stake · In WB · The ask (widest) · Assignees ·
         Working · Updated. */
      .ps-row--pipeline {
        grid-template-columns: minmax(170px, 1.1fr) 104px 96px minmax(260px, 2.6fr) 92px 92px 72px;
      }
      .ps-row--pipeline .ps-cell-company-name {
        font-weight: 600;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .ps-row--pipeline .ps-cell-company .ps-meta-line {
        font-size: 10.5px;
        display: block; margin-top: 2px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .ps-row--pipeline .ps-cell-notes {
        color: var(--text);
        font-size: 12.5px;
      }
      .ps-row--pipeline .ps-cell-notes-main {
        white-space: normal;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .ps-row--closed {
        grid-template-columns: minmax(180px, 1.4fr) 150px 140px 150px minmax(160px, 1.6fr) 90px 170px;
      }
      .ps-row--legacy {
        grid-template-columns: minmax(180px, 1.4fr) 110px minmax(120px, 1fr) minmax(180px, 1.8fr) 100px;
      }
      @media (max-width: 1100px) {
        .ps-row--pipeline, .ps-row--closed {
          grid-template-columns: 1fr 120px;
        }
        .ps-row--pipeline > div:nth-child(n+3),
        .ps-row--closed > div:nth-child(n+3) {
          grid-column: 1 / -1;
        }
      }

      /* v2.160.5 — pipeline list uses the Renewals .pl-table so Issue
         and Notes read the same way (ellipsis, click-to-edit). */
      .ps-pl-wrap { max-height: calc(100vh - 220px); }
      /* Pin Company so Working can stick immediately to its right —
         Assigned (92) + Company (240) = 332. */
      .ps-pl-wrap .pl-table .pl-col-primary {
        min-width: 220px;
        max-width: 240px;
        width: 240px;
      }
      .ps-pl-wrap .pl-table tbody td.ps-pl-col-issue {
        min-width: 220px;
        max-width: 420px;
      }
      .ps-pl-wrap .pl-table tbody td.pl-col-notes {
        min-width: 360px;
        max-width: 620px;
      }
      .ps-pl-wrap .pl-table tbody td.pl-col-primary {
        white-space: normal;
      }
      .ps-pl-wrap .pl-primary-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
      }
      .ps-pl-wrap .ps-pl-name-row {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        width: 100%;
      }
      .ps-pl-wrap td.ps-pl-col-issue .pl-note-text {
        color: var(--text);
        font-weight: 500;
      }
      .ps-pl-wrap td.ps-pl-col-issue > span,
      .ps-pl-wrap td.pl-col-notes > span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .ps-pl-wrap .ps-pl-col-working {
        position: sticky;
        left: 332px;
        z-index: 2;
        width: 108px;
        min-width: 108px;
        max-width: 108px;
        text-align: center;
        background: var(--panel);
        box-shadow: 1px 0 0 var(--border);
      }
      .ps-pl-wrap .pl-table thead th.ps-pl-col-working {
        z-index: 6;
        background: var(--input-bg);
      }
      .ps-pl-wrap .pl-table tbody tr:hover .ps-pl-col-working {
        background: var(--input-bg);
      }
      .ps-pl-wrap .ps-pl-col-working .ps-working-toggle {
        justify-content: center;
      }
      .ps-pl-wrap .pl-primary-cell .ps-meta-line {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
      }
      .ps-pl-group-info_request .pl-group-header-inner { border-left-color: var(--lb-blue-text, #5a8fff); }
      .ps-pl-group-submission .pl-group-header-inner { border-left-color: var(--lb-violet-text, #9a6cd9); }
      .ps-pl-group-quoted .pl-group-header-inner { border-left-color: var(--lb-warn-text, #f5a823); }
      .ps-pl-group-pitched .pl-group-header-inner { border-left-color: var(--lb-ok-text, #2ec47c); }
      .ps-pl-group-outcome .pl-group-header-inner { border-left-color: var(--muted); }
      tr.ps-pl-row { cursor: pointer; }
      tr.ps-pl-row:hover td { background: var(--input-bg); }

      /* v2.128.0 — PSS account card modal. v2.137.0 — the shell IS the
         renewals policy modal (.policy-detail.pm-shell): pm-hero,
         pm-tabs, pm-dash columns, pm-foot. Only the PSS-specific
         inner-panel bits keep bespoke classes below. */
      .ps-acct-close {
        position: absolute; top: 14px; right: 14px;
        width: 26px; height: 26px;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid var(--border); border-radius: 6px;
        background: var(--panel); color: var(--muted);
        font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
      }
      .ps-acct-close:hover { color: var(--danger); border-color: var(--danger); }
      /* v2.137.0 — editable "ask" textarea in the Workspace mid column
         (same slot the renewals details form occupies). */
      .ps-acct-notes-box {
        width: 100%; min-height: 180px; resize: vertical;
        font-size: 13.5px; line-height: 1.6;
        border-radius: 12px; padding: 10px 12px;
        border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
        background: var(--panel); color: var(--text);
      }
      .ps-acct-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 13px; }
      .ps-acct-kv dt { color: var(--muted); white-space: nowrap; }
      .ps-acct-kv dd { margin: 0; min-width: 0; }
      .ps-acct-why-box {
        width: 100%; min-height: 64px; resize: vertical;
        font-size: 13px; line-height: 1.5; margin-top: 8px;
      }
      .ps-acct-cmt { border-top: 1px solid var(--border); padding: 8px 0 2px; }
      .ps-acct-cmt:first-child { border-top: 0; padding-top: 0; }
      .ps-acct-cmt-head {
        display: flex; justify-content: space-between; gap: 8px;
        font-size: 11px; color: var(--muted); margin-bottom: 2px;
      }
      .ps-acct-cmt-text { font-size: 12.5px; white-space: pre-wrap; }
      .ps-acct-cmt-form { display: flex; gap: 8px; margin-top: 10px; }
      .ps-acct-cmt-form textarea {
        flex: 1; min-height: 40px; resize: vertical;
        font-size: 12.5px;
      }
      .ps-acct-activity { font-size: 11.5px; color: var(--muted); }
      .ps-acct-activity li { margin-bottom: 3px; }
      .ps-acct-actions-row { display: flex; gap: 6px; flex-wrap: wrap; }
      /* v2.136.2 — the stage mover reuses the renewals bucket-section
         classes (.pm-bucket-current / .pm-bucket-move-row /
         .pm-bucket-btn) verbatim; the bespoke grid is gone. */
      /* The shared assignee popover sits at z 9000; the modal at 10000.
         When assigning from inside the account card, lift it above. */
      body.ps-acct-modal-open .pl-assignee-popover,
      body:has(#policyModal.is-open) .pl-assignee-popover { z-index: 10500; }
      /* v2.136.2 — the PSS hover uses the shared renewals shell as-is
         ("It should match that of the renewals pipeline" — Harris).
         The v2.129.0 oversize overrides are gone. */

      /* Legacy tab banner. */
      .ps-legacy-note {
        margin-bottom: 12px;
        padding: 10px 14px;
        border: 1px dashed var(--border);
        border-radius: var(--radius);
        background: var(--input-bg);
        color: var(--muted);
        font-size: 12.5px;
        font-style: italic;
      }

      /* Panel — hosts the create / edit / close forms above the board or
         list (works identically in both modalities, unlike the old
         row-morphing edit which only existed in the list). */
      .ps-panel { margin-bottom: 14px; }
      .ps-panel-card {
        padding: 18px 20px 16px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        display: flex; flex-direction: column;
        gap: 14px;
      }
      .ps-panel-head { display: flex; align-items: baseline; gap: 10px; }
      .ps-panel-title {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
      }
      .ps-panel-sub {
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--text);
      }
      .ps-form-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        align-items: end;
      }
      .ps-form-grid--money { grid-template-columns: repeat(4, 1fr); }
      .ps-f {
        display: flex; flex-direction: column;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        min-width: 0;
      }
      .ps-f-wide { grid-column: 1 / -1; }
      .ps-f-hint {
        text-transform: none;
        letter-spacing: normal;
        font-weight: 400;
        font-style: italic;
        opacity: 0.8;
      }
      .ps-f-label { display: block; }
      .ps-f input, .ps-f select, .ps-f textarea {
        font-family: var(--font-base);
        font-size: var(--text-sm);
        text-transform: none;
        letter-spacing: normal;
        font-weight: 400;
        padding: 7px 11px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        width: 100%;
      }
      .ps-f textarea { min-height: 64px; resize: vertical; }
      .ps-flag-row { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 2px; }
      .ps-flag-check {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 12px;
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
        color: var(--text);
        cursor: pointer;
      }
      .ps-rev-preview-wrap { justify-content: flex-end; gap: 6px; }
      .ps-rev-preview { font-size: 16px; }
      .ps-panel-actions {
        display: flex; justify-content: flex-end; gap: 8px;
      }
      .ps-panel-submit { font-weight: 600; }
      /* Two outcomes now (Won / Lost) — override the 3-col grid from the
         v26.67 close form. */
      .ps-panel-card .ps-close-outcomes { grid-template-columns: repeat(2, 1fr); }
      @media (max-width: 900px) {
        .ps-form-grid { grid-template-columns: 1fr 1fr; }
        .ps-panel-card .ps-close-outcomes { grid-template-columns: 1fr; }
      }

      /* v2.130.0 — PSS My Day. (v2.134.2: the bespoke ps-ag-toolbar is
         gone — the view reuses the renewals .ag-toolbar wholesale so the
         two lanes look identical.) */
      .ps-ag-narrative {
        border: 1px solid var(--border); border-left: 3px solid var(--accent);
        border-radius: 12px; background: var(--panel);
        padding: 16px 18px; margin-bottom: 18px;
        font-size: 13.5px; line-height: 1.7; white-space: pre-wrap;
      }
      .ps-ag-narrative-label {
        font-size: 10.5px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.07em; color: var(--muted); margin-bottom: 8px;
      }
      .ps-ag-card {
        border: 1px solid var(--border); border-radius: 12px;
        background: var(--panel); padding: 16px 18px; margin-bottom: 36px;
        box-shadow: 0 2px 12px color-mix(in srgb, #000 12%, transparent);
      }
      /* v2.151.2 — PSS My Day on the LIGHT theme reads as one bright
         sheet like the renewals My Day (Harris: "match that theme
         coloring"). Light's --panel is a 5% dark tint over the dim
         slate paper (--bg #dfe7ef), so every digest card rendered
         muddy gray; the renewals lane sits on white --input-bg
         surfaces. Dark/Harper/Mono are untouched. */
      [data-theme="light"] .ps-ag-narrative,
      [data-theme="light"] .ps-ag-card {
        background: var(--input-bg);
      }
      [data-theme="light"] .ps-ag-draft {
        /* inset draft block stays visible on the now-white card */
        background: var(--panel);
      }
      .ps-ag-card-head {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        margin-bottom: 12px; padding-bottom: 10px;
        border-bottom: 1px solid var(--border);
      }
      .ps-ag-company {
        font: inherit; font-size: 14.5px; font-weight: 700;
        background: none; border: 0; padding: 0; cursor: pointer;
        color: var(--text);
      }
      .ps-ag-company:hover { text-decoration: underline; }
      .ps-ag-stale {
        font-size: 10.5px; font-weight: 700; color: #b3423a;
        border: 1px solid #b3423a55; border-radius: 999px; padding: 1px 8px;
      }
      .ps-ag-kind {
        font-size: 10.5px; font-weight: 650; color: var(--muted);
        border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
        margin-left: auto;
      }
      .ps-ag-kind.is-outreach { color: #1e7b46; border-color: #1e7b4655; }
      .ps-ag-kind.is-internal { color: #7a5bc0; border-color: #7a5bc055; }
      .ps-ag-row {
        display: grid; grid-template-columns: 110px 1fr; gap: 12px;
        font-size: 13px; line-height: 1.55; margin: 0 0 10px;
        padding: 10px 12px; border-radius: 8px;
        border-left: 3px solid var(--border);
        background: color-mix(in srgb, var(--input-bg) 70%, var(--panel));
      }
      .ps-ag-row:last-of-type { margin-bottom: 0; }
      .ps-ag-row.is-happened {
        border-left-color: #6b7280;
        background: color-mix(in srgb, #6b7280 8%, var(--panel));
      }
      .ps-ag-row.is-happened .ps-ag-label { color: #5b6470; font-weight: 700; }
      .ps-ag-row.is-next {
        border-left-color: #1a8f5e;
        background: color-mix(in srgb, #1a8f5e 10%, var(--panel));
      }
      .ps-ag-row.is-next .ps-ag-label { color: #1a8f5e; font-weight: 700; }
      .ps-ag-row.is-why {
        border-left-color: #9a6b00;
        background: color-mix(in srgb, #e69f00 10%, var(--panel));
      }
      .ps-ag-row.is-why .ps-ag-label { color: #9a6b00; font-weight: 700; }
      .ps-ag-row.ag-slabreach-row {
        border-left-color: #b3261e;
        background: color-mix(in srgb, #b3261e 10%, var(--panel));
      }
      .ps-ag-label {
        font-size: 10.5px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.06em; color: var(--muted); padding-top: 2px;
      }
      .ps-ag-next { font-weight: 700; }
      .ps-ag-draft {
        border: 1px dashed var(--border); border-radius: 8px;
        background: var(--input-bg); padding: 10px 12px; margin-top: 8px;
      }
      .ps-ag-draft-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
      .ps-ag-draft-subject { font-weight: 650; font-size: 12.5px; }
      .ps-ag-src {
        font-size: 10px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.05em; color: var(--muted);
        border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
      }
      .ps-ag-src.is-ai { color: #1e7b46; border-color: #1e7b4655; }
      .ps-ag-draft-body {
        margin: 0; white-space: pre-wrap; font-family: inherit;
        font-size: 12.5px; line-height: 1.5; max-height: 220px; overflow-y: auto;
      }
      .ps-ag-text {
        margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
        font-size: 12.5px;
      }
      .ps-ag-text-label {
        font-size: 10px; font-weight: 700; text-transform: uppercase;
        color: var(--muted); margin-right: 8px;
      }
      .ps-ag-draft-actions {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        margin-top: 10px;
      }
      /* v2.134.0 — stage progress stepper (Harris: "a UI interface
         they're already familiar with from the Service Workbench").
         v2.135.0 orb semantics (Harris): green = completed, blue =
         current but not actioned yet, yellow = pending (outreach went
         out, awaiting response — set automatically by sends), red =
         blocked (gone quiet). Outcome stays neutral while open. */
      .ps-ag-steps {
        display: flex; align-items: flex-start; margin: 2px 0 12px;
      }
      .ps-ag-step {
        display: flex; flex-direction: column; align-items: center;
        flex: 1 1 0; min-width: 0; position: relative;
      }
      .ps-ag-step-dot {
        width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
        border: 2px solid var(--border); background: var(--panel);
        z-index: 1; display: flex; align-items: center; justify-content: center;
        font-size: 9px; font-weight: 700; color: #fff; line-height: 1;
      }
      .ps-ag-step.is-done .ps-ag-step-dot { background: #2e7d32; border-color: #2e7d32; }
      .ps-ag-step.is-current .ps-ag-step-dot { background: #1a73e8; border-color: #1a73e8; box-shadow: 0 0 0 3px #1a73e833; }
      .ps-ag-step.is-pending .ps-ag-step-dot { background: #e0a100; border-color: #e0a100; box-shadow: 0 0 0 3px #e0a10033; }
      .ps-ag-step.is-blocked .ps-ag-step-dot { background: #c0392b; border-color: #c0392b; box-shadow: 0 0 0 3px #c0392b33; }
      .ps-ag-step.is-won .ps-ag-step-dot { background: #2e7d32; border-color: #2e7d32; }
      .ps-ag-step.is-lost .ps-ag-step-dot { background: #c0392b; border-color: #c0392b; }
      .ps-ag-step-label {
        font-size: 10px; color: var(--muted); margin-top: 4px;
        text-align: center; line-height: 1.2; max-width: 100%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .ps-ag-step.is-current .ps-ag-step-label,
      .ps-ag-step.is-pending .ps-ag-step-label,
      .ps-ag-step.is-blocked .ps-ag-step-label { color: var(--text); font-weight: 700; }
      .ps-ag-step::before, .ps-ag-step::after {
        content: ""; position: absolute; top: 7px; height: 2px;
        background: var(--border); width: calc(50% - 10px);
      }
      .ps-ag-step::before { left: 0; }
      .ps-ag-step::after { right: 0; }
      .ps-ag-step:first-child::before, .ps-ag-step:last-child::after { display: none; }
      .ps-ag-step.is-done::before, .ps-ag-step.is-done::after { background: #2e7d32; }
      .ps-ag-step.is-current::before, .ps-ag-step.is-pending::before,
      .ps-ag-step.is-blocked::before,
      .ps-ag-step.is-won::before, .ps-ag-step.is-lost::before { background: #2e7d32; }
      /* v2.134.0 — draft footer: one clean action bar, buttons pinned
         right so every card's actions line up. */
      .ps-ag-draftline {
        display: flex; align-items: center; gap: 10px;
        margin-top: 12px; padding: 10px 12px;
        border-top: 0;
        border-left: 3px solid #7c6cf0;
        border-radius: 8px;
        background: color-mix(in srgb, #7c6cf0 10%, var(--panel));
        font-size: 12.5px;
      }
      .ps-ag-draftline .ps-ag-label {
        color: #7c6cf0; font-weight: 700; padding-top: 0; flex: 0 0 auto;
      }
      .ps-ag-draftline .ps-ag-draft-subject {
        flex: 1 1 auto; min-width: 0; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
      }
      .ps-ag-draftline .ps-ag-draft-actions {
        margin: 0 0 0 auto; flex: 0 0 auto; flex-wrap: nowrap;
      }
      /* .ps-ag-kind already carries margin-left:auto — contacts ride
         the right edge just after it. */
      .ps-ag-contacts { font-size: 11.5px; flex: 0 0 auto; }

      /* v2.129.0 — Revenue Board. */
      .ps-rb-table {
        border: 1px solid var(--border); border-radius: var(--radius);
        overflow: hidden; margin-bottom: 18px; background: var(--panel);
      }
      .ps-rb-row {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
        gap: 10px; align-items: center;
        padding: 10px 16px;
        border-top: 1px solid var(--border);
      }
      .ps-rb-row:first-child { border-top: 0; }
      .ps-rb-head {
        font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--muted); background: var(--input-bg);
      }
      .ps-rb-person { display: flex; flex-direction: column; min-width: 0; }
      .ps-rb-name { font-weight: 650; font-size: 13.5px; }
      .ps-rb-sub, .ps-rb-split { font-size: 11px; color: var(--muted); }
      .ps-rb-cell { display: flex; flex-direction: column; }
      .ps-rb-total { font-weight: 650; font-size: 13.5px; font-variant-numeric: tabular-nums; }
      .ps-rb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
      @media (max-width: 1000px) { .ps-rb-grid { grid-template-columns: 1fr; } }
      .ps-rb-section {
        border: 1px solid var(--border); border-radius: var(--radius);
        padding: 14px 16px; background: var(--panel);
      }
      .ps-rb-section-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
      .ps-rb-reason {
        display: grid; grid-template-columns: 170px 1fr auto;
        gap: 10px; align-items: center; margin-bottom: 8px;
        font-size: 12.5px;
      }
      .ps-rb-reason-label { color: var(--muted); }
      .ps-rb-reason-bar-wrap { background: var(--input-bg); border-radius: 4px; height: 10px; overflow: hidden; }
      .ps-rb-reason-bar { height: 100%; background: #d99b28; border-radius: 4px; min-width: 2px; }
      .ps-rb-reason-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
      .ps-rb-win {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        padding: 7px 0; border-top: 1px solid var(--border);
        font-size: 12.5px;
      }
      .ps-rb-win:first-of-type { border-top: 0; }
      .ps-rb-win-name { font-weight: 650; }
      .ps-rb-win-amt { margin-left: auto; font-variant-numeric: tabular-nums; }

      /* Analytics tab. */
      .ps-ana-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        margin-bottom: 18px;
      }
      .ps-ana-card {
        padding: 14px 16px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        display: flex; flex-direction: column; gap: 3px;
      }
      .ps-ana-card.is-won     { border-color: rgba(46, 196, 124, 0.45); }
      .ps-ana-card.is-lost    { border-color: rgba(220, 73, 73, 0.4); }
      .ps-ana-card.is-ghosted { border-color: rgba(120, 130, 150, 0.45); }
      .ps-ana-card.is-pss     { border-color: rgba(20, 160, 94, 0.55); }
      .ps-ana-card-label {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
      }
      .ps-ana-card-value {
        font-family: var(--font-display);
        font-size: 1.7rem;
        font-weight: 700;
        color: var(--text);
        line-height: 1.15;
      }
      .ps-ana-card-sub {
        font-family: var(--font-mono);
        font-size: 11.5px;
        color: var(--muted);
      }
      .ps-ana-blocks {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 14px;
      }
      .ps-ana-block {
        padding: 14px 16px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .ps-ana-block-title {
        font-size: 12px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .ps-ana-bar-row {
        display: grid;
        grid-template-columns: minmax(120px, 0.9fr) 1fr 70px;
        align-items: center;
        gap: 10px;
        padding: 3px 0;
      }
      .ps-ana-bar-label {
        font-size: 12px;
        color: var(--muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .ps-ana-bar-track {
        height: 8px;
        background: var(--input-bg);
        border-radius: 999px;
        overflow: hidden;
      }
      .ps-ana-bar-fill {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--accent);
        opacity: 0.75;
      }
      [data-theme="harper"] .ps-ana-bar-fill { background: #1a8f5e; }
      .ps-ana-bar-value {
        font-family: var(--font-mono);
        font-size: 11.5px;
        color: var(--text);
        text-align: right;
        white-space: nowrap;
      }

      /* ============ Submissions module ============ */
      /* One source of truth for submission status colors + small-element
         radius, shared by the list status pills, the pie-manager action
         chips, and the date chips so every surface stays uniform. */
      :root {
        --sub-awaiting: #fbbf24;
        --sub-received: #34d399;
        --sub-bound:    #22c55e;
        --sub-pitched:  var(--accent);
        --sub-decline:  #fb7185;
        --sub-blocked:  #ef4444;
        --sub-chip-radius: 8px;
        /* Little Bro × Harper submissions brand (coral + creme + ink) */
        --sub-brand: #ff6d63;
        --sub-brand-d: #f0564b;
        --sub-brand-soft: rgba(255, 109, 99, 0.14);
        --sub-brand-ink: #1d3a47;
        --sub-brand-creme: #fcf6f0;
        --sub-control-radius: 10px;
        --sub-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23ff6d63' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }
      /* Sidebar — Submission Builder sits under Dashboard */
      .sub-nav-divider {
        height: 1px;
        margin: 2px 12px 4px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sub-brand) 35%, var(--border)), transparent);
      }
      .sidebar-nav .nav-item-sub-tool {
        font-weight: 700;
        letter-spacing: -0.01em;
        border-color: color-mix(in srgb, var(--sub-brand) 40%, var(--border));
      }
      .sidebar-nav .nav-item-sub-tool:hover {
        border-color: var(--sub-brand);
        background: color-mix(in srgb, var(--sub-brand) 9%, transparent);
      }
      .sidebar-nav .nav-item-sub-tool.active {
        border-left-color: var(--sub-brand);
        background: color-mix(in srgb, var(--sub-brand) 14%, transparent);
        color: var(--text);
      }
      [data-theme="harper"] .sidebar-nav .nav-item-sub-tool.active {
        color: var(--sub-brand-ink);
      }
      /* Shared submissions inputs — Little Bro themed, not generic OS chrome */
      .sub-filter-bar select,
      .sub-list-toolbar input[type="search"],
      .sub-list-toolbar select,
      .sub-new-form input,
      .sub-new-form select,
      .sub-new-form textarea,
      .sub-edit-form input,
      .sub-edit-form select,
      .sub-edit-form textarea,
      .sub-edit-dates input,
      .sub-quote-form input,
      .sub-quote-form select,
      .sub-date-form input {
        font-family: inherit;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        line-height: 1.35;
        padding: 9px 12px;
        border: 1px solid color-mix(in srgb, var(--sub-brand) 16%, var(--border));
        border-radius: var(--sub-control-radius);
        background: color-mix(in srgb, var(--panel) 72%, var(--input-bg));
        color: var(--text);
        width: 100%;
        box-sizing: border-box;
        transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
        outline: none;
        box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
      }
      .sub-filter-bar select,
      .sub-list-toolbar select,
      .sub-new-form select,
      .sub-edit-form select,
      .sub-quote-form select {
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        padding-right: 38px;
        background-image: var(--sub-chevron);
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px;
        background-color: color-mix(in srgb, var(--panel) 72%, var(--input-bg));
      }
      .sub-filter-bar select option,
      .sub-list-toolbar select option,
      .sub-new-form select option,
      .sub-edit-form select option,
      .sub-quote-form select option {
        font-size: 13px;
        color: var(--text);
        background: var(--input-bg);
      }
      .sub-quote-form select optgroup {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .sub-filter-bar select:focus,
      .sub-list-toolbar input[type="search"]:focus,
      .sub-list-toolbar select:focus,
      .sub-new-form input:focus,
      .sub-new-form select:focus,
      .sub-new-form textarea:focus,
      .sub-edit-form input:focus,
      .sub-edit-form select:focus,
      .sub-edit-form textarea:focus,
      .sub-edit-dates input:focus,
      .sub-quote-form input:focus,
      .sub-quote-form select:focus,
      .sub-date-form input:focus {
        border-color: color-mix(in srgb, var(--sub-brand) 62%, var(--border));
        box-shadow: 0 0 0 3px var(--sub-brand-soft), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
        background: color-mix(in srgb, var(--sub-brand-creme) 28%, var(--input-bg));
      }
      [data-theme="dark"] .sub-filter-bar select:focus,
      [data-theme="dark"] .sub-list-toolbar input[type="search"]:focus,
      [data-theme="dark"] .sub-list-toolbar select:focus,
      [data-theme="dark"] .sub-new-form input:focus,
      [data-theme="dark"] .sub-new-form select:focus,
      [data-theme="dark"] .sub-new-form textarea:focus,
      [data-theme="dark"] .sub-edit-form input:focus,
      [data-theme="dark"] .sub-edit-form select:focus,
      [data-theme="dark"] .sub-edit-form textarea:focus,
      [data-theme="dark"] .sub-edit-dates input:focus,
      [data-theme="dark"] .sub-quote-form input:focus,
      [data-theme="dark"] .sub-quote-form select:focus,
      [data-theme="dark"] .sub-date-form input:focus {
        background: color-mix(in srgb, var(--sub-brand) 6%, var(--input-bg));
      }
      .sub-new-form label,
      .sub-edit-form label,
      .sub-quote-form label,
      .sub-date-form label {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
      }
      .sub-new-form textarea,
      .sub-edit-form textarea {
        resize: vertical;
        min-height: 4rem;
        max-height: 10rem;
      }
      .sub-modal-lead {
        font-size: var(--text-xs);
        margin: 4px 0 14px;
        line-height: 1.45;
      }
      .sub-date-modal-card {
        width: min(100%, 440px);
      }
      .sub-date-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .sub-list-toolbar {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 0;
      }
      .sub-list-toolbar input[type="search"] {
        flex: 1;
        min-width: min(100%, 220px);
      }
      .sub-list-toolbar select {
        min-width: 9.5rem;
        width: auto;
      }
      .sub-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 14px;
        padding: 12px 16px 10px;
        background: color-mix(in srgb, var(--sub-brand-creme) 32%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--sub-brand) 18%, var(--border));
        border-left: 3px solid var(--sub-brand);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
      }
      .sub-toolbar-row {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }
      .sub-toolbar-title {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }
      .sub-toolbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
      }
      .sub-toolbar-scopes {
        justify-content: flex-end;
        gap: 16px;
        padding-top: 2px;
        border-top: 1px solid color-mix(in srgb, var(--sub-brand) 12%, var(--border));
      }
      .sub-toolbar-scopes.is-mgmt {
        justify-content: space-between;
      }
      .sub-toolbar-scopes.is-list:not(.is-mgmt) {
        display: none;
      }
      .sub-toolbar h2 {
        margin: 0;
        font-size: var(--text-base);
        font-weight: 700;
      }
      .sub-toolbar-spacer { flex: 1; }
      .sub-toolbar #subNewBtn {
        background: linear-gradient(180deg, var(--sub-brand), var(--sub-brand-d));
        border-color: var(--sub-brand-d);
        color: #fff;
        font-weight: 650;
        box-shadow: 0 2px 10px color-mix(in srgb, var(--sub-brand) 32%, transparent);
      }
      .sub-toolbar #subNewBtn:hover {
        filter: brightness(1.04);
        border-color: var(--sub-brand);
      }
      .sub-backfill {
        margin: 0 0 12px;
        padding: 14px 16px;
        background: color-mix(in srgb, var(--sub-brand) 6%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--sub-brand) 24%, var(--border));
        border-radius: var(--radius-lg);
      }
      .sub-bf-head {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 6px;
      }
      .sub-bf-copy {
        margin: 0 0 12px;
        font-size: 13px;
        color: var(--muted);
        max-width: 72ch;
      }
      .sub-bf-range-line {
        margin: 0 0 4px;
        font-size: 15px;
      }
      /* v2.295.0 — "last ran" freshness marker (highlighted per Harris) */
      .sub-bf-lastrun {
        display: inline-block;
        margin: 0 0 8px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 999px;
        background: color-mix(in srgb, var(--sub-brand) 12%, transparent);
        color: var(--sub-brand);
        border: 1px solid color-mix(in srgb, var(--sub-brand) 30%, transparent);
      }
      .sub-bf-place {
        margin: 0 0 12px;
        font-size: 12px;
      }
      .sub-bf-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 10px 14px;
      }
      .sub-bf-controls label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 11px;
        font-weight: 650;
        color: var(--muted);
        max-width: 16rem;
      }
      .sub-bf-controls input[type="number"] {
        width: 7.5rem;
        padding: 6px 8px;
      }
      .sub-bf-hint {
        font-weight: 500;
        line-height: 1.35;
        opacity: 0.85;
      }
      .sub-bf-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }
      .sub-backfill #subBfApply {
        background: linear-gradient(180deg, var(--sub-brand), var(--sub-brand-d));
        border-color: var(--sub-brand-d);
        color: #fff;
        font-weight: 650;
      }
      .sub-backfill #subBfApply:disabled,
      .sub-backfill #subBfPreview:disabled,
      .sub-backfill #subBfNext:disabled,
      .sub-backfill #subBfReset:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .sub-bf-status { margin: 10px 0 0; font-size: 12px; }
      .sub-bf-progress {
        margin-top: 14px;
        padding: 12px 14px;
        border-radius: 10px;
        background: color-mix(in srgb, var(--sub-brand) 10%, var(--bg));
        border: 1px solid color-mix(in srgb, var(--sub-brand) 28%, var(--border));
      }
      .sub-bf-progress-track {
        height: 8px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--sub-brand) 16%, var(--border));
        overflow: hidden;
      }
      .sub-bf-progress-track i {
        display: block;
        height: 100%;
        width: 8%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--sub-brand), var(--sub-brand-d));
        transition: width 0.35s ease;
      }
      .sub-bf-progress-label {
        margin: 10px 0 4px;
        font-size: 13px;
        font-weight: 650;
      }
      .sub-bf-progress-meta {
        margin: 0;
        font-size: 12px;
      }
      .sub-bf-summary { margin-top: 12px; font-size: 13px; }
      .sub-bf-summary p { margin: 0 0 8px; }
      .sub-bf-kicker { font-size: 14px; }
      .sub-bf-wrote { color: var(--text); }
      .sub-bf-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 14px;
      }
      .sub-bf-stat {
        padding: 10px 12px;
        border-radius: 10px;
        background: color-mix(in srgb, var(--sub-brand) 8%, var(--bg));
        border: 1px solid color-mix(in srgb, var(--sub-brand) 22%, var(--border));
      }
      .sub-bf-stat b {
        display: block;
        font-size: 22px;
        line-height: 1.15;
        font-weight: 750;
      }
      .sub-bf-stat span {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
      }
      /* v2.299.0 — post-write review dialog: line-by-line moves with why
         and % confidence, so the person running the backfill can review
         at a glance. */
      .sub-bfr-overlay {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }
      .sub-bfr-panel {
        width: min(640px, 94vw);
        max-height: 86vh;
        display: flex;
        flex-direction: column;
        background: var(--modal-surface, var(--panel));
        border: 1px solid color-mix(in srgb, var(--sub-brand) 30%, var(--border));
        border-radius: 16px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
        padding: 18px 20px;
      }
      .sub-bfr-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
      }
      .sub-bfr-head h3 { margin: 0; font-size: 17px; }
      .sub-bfr-close {
        border: 0;
        background: none;
        color: var(--muted);
        font-size: 15px;
        cursor: pointer;
        padding: 4px 6px;
        border-radius: 8px;
      }
      .sub-bfr-close:hover { background: color-mix(in srgb, var(--muted) 14%, transparent); }
      .sub-bfr-kicker { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
      .sub-bfr-body { flex: 1; min-height: 0; overflow: auto; }
      .sub-bfr-section { margin: 0 0 14px; }
      .sub-bfr-section h4 {
        margin: 0 0 6px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--muted);
      }
      .sub-bfr-section h4 em {
        font-style: normal;
        margin-left: 6px;
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 11px;
        background: color-mix(in srgb, var(--sub-brand) 14%, transparent);
        color: var(--sub-brand);
      }
      .sub-bfr-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 10px;
        align-items: center;
        padding: 8px 0;
        border-top: 1px solid var(--border);
        font-size: 13px;
      }
      .sub-bfr-main {
        display: flex;
        gap: 8px;
        align-items: baseline;
        flex-wrap: wrap;
        min-width: 0;
      }
      .sub-bfr-what { color: var(--muted); font-size: 12px; }
      .sub-bfr-why {
        grid-column: 1 / -1;
        font-size: 12px;
        color: var(--muted);
        padding-left: 2px;
      }
      .sub-bfr-conf {
        justify-self: end;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
      }
      .sub-bfr-conf.is-high { background: rgba(52, 211, 153, 0.16); color: #34d399; }
      .sub-bfr-conf.is-mid { background: rgba(251, 191, 36, 0.16); color: #d97706; }
      .sub-bfr-conf.is-low { background: rgba(248, 113, 113, 0.16); color: #ef4444; }
      .sub-bfr-conf.is-det {
        background: color-mix(in srgb, var(--sub-brand) 12%, transparent);
        color: var(--sub-brand);
      }
      .sub-bfr-foot {
        display: flex;
        justify-content: flex-end;
        margin-top: 12px;
      }
      .sub-bfr-foot .sub-btn-primary {
        border: 0;
        border-radius: 999px;
        padding: 8px 18px;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        background: var(--sub-brand);
        cursor: pointer;
        box-shadow: 0 2px 10px color-mix(in srgb, var(--sub-brand) 35%, transparent);
      }
      .sub-bfr-foot .sub-btn-primary:hover { background: var(--sub-brand-d); }
      .sub-bf-section { margin: 0 0 12px; }
      .sub-bf-section h4 {
        margin: 0 0 6px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--muted);
      }
      .sub-bf-counts,
      .sub-bf-mailboxes,
      .sub-bf-moves,
      .sub-bf-review-groups,
      .sub-bf-review-samples {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        margin: 0 0 10px;
        padding: 0;
        list-style: none;
      }
      .sub-bf-moves,
      .sub-bf-review-groups,
      .sub-bf-review-samples {
        display: block;
        padding-left: 1.1rem;
        list-style: disc;
      }
      .sub-bf-moves li,
      .sub-bf-review-samples li { font-size: 12px; }
      .sub-bf-counts li { font-weight: 650; }
      .sub-bf-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .sub-bf-cols h4 {
        margin: 0 0 6px;
        font-size: 12px;
      }
      .sub-bf-cols ul {
        margin: 0;
        padding-left: 1.1rem;
        font-size: 12px;
      }
      @media (max-width: 720px) {
        .sub-bf-cols { grid-template-columns: 1fr; }
        .sub-bf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      .sub-filter-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 12px;
        padding: 12px 16px;
        background: color-mix(in srgb, var(--sub-brand) 5%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--sub-brand) 22%, var(--border));
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
      }
      .sub-filter-bar label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
      }
      .sub-filter-bar select {
        min-width: 8.5rem;
        max-width: 13rem;
        width: auto;
      }
      .sub-filter-bar .sub-filter-count {
        font-size: var(--text-xs);
        color: var(--muted);
        margin-left: auto;
      }
      .sub-filter-bar .sub-filter-clear {
        font-size: var(--text-xs);
        padding: 5px 10px;
      }
      .sub-filter-bar.is-active {
        border-color: color-mix(in srgb, var(--sub-brand) 48%, var(--border));
        background: color-mix(in srgb, var(--sub-brand) 8%, var(--panel));
      }
      /* Submission modals — coral accent, warm card surfaces */
      .sub-modal-card {
        border-top: 3px solid var(--sub-brand);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
      }
      .sub-new-modal-card,
      .sub-edit-modal-card,
      .sub-quote-modal-card,
      .sub-date-modal-card {
        background: color-mix(in srgb, var(--sub-brand-creme) 18%, var(--panel));
      }
      [data-theme="dark"] .sub-new-modal-card,
      [data-theme="dark"] .sub-edit-modal-card,
      [data-theme="dark"] .sub-quote-modal-card,
      [data-theme="dark"] .sub-date-modal-card {
        background: var(--panel);
      }
      .sub-mga-name.is-filterable {
        cursor: pointer;
        text-decoration: underline dotted;
        text-underline-offset: 3px;
      }
      .sub-mga-name.is-filterable:hover { color: var(--accent); }
      .sub-pie-legend-row.is-filterable { cursor: pointer; }
      .sub-pie-legend-row.is-filterable:hover .sub-pie-legend-name { color: var(--accent); }
      .sub-metrics {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 14px;
      }
      @media (max-width: 900px) {
        .sub-metrics { grid-template-columns: repeat(2, 1fr); }
      }
      .sub-metric {
        padding: 12px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .sub-metric-label {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
      }
      .sub-metric-num {
        font-size: 22px;
        font-weight: 700;
        margin-top: 4px;
      }
      .sub-mga-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }
      .sub-mga-grid.is-mga-focus {
        grid-template-columns: 1fr;
      }
      .sub-mga-focus-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-height: auto;
      }
      .sub-mga-focus-map {
        width: 100%;
      }
      .sub-mga-focus-map .sub-coverage-map-wrap {
        max-width: 100%;
      }
      .sub-mga-focus-map .sub-coverage-map {
        width: 100%;
        max-height: min(56vh, 580px);
        min-height: 340px;
      }
      .sub-mga-focus-lower {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
      }
      @media (max-width: 1100px) {
        .sub-mga-focus-layout {
          min-height: auto;
        }
        .sub-mga-focus-lower {
          grid-template-columns: 1fr;
        }
      }
      .sub-mga-focus-pie {
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px 18px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: auto;
        gap: 12px;
      }
      .sub-mga-focus-visual {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        flex: 1;
      }
      .sub-coverage-map-wrap {
        width: 100%;
        max-width: 640px;
      }
      .sub-mga-focus-map .sub-coverage-map-wrap {
        max-width: 100%;
      }
      .sub-coverage-map-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
        flex-wrap: wrap;
      }
      .sub-coverage-map-head h4 {
        margin: 0;
        font-size: var(--text-sm);
        font-weight: 700;
      }
      .sub-coverage-map-legend {
        font-size: var(--text-xs);
        color: var(--muted);
      }
      .sub-coverage-map {
        width: 100%;
        height: auto;
        display: block;
        border-radius: var(--radius);
        background: color-mix(in srgb, var(--muted) 6%, var(--bg));
        border: 1px solid var(--border);
      }
      .sub-map-state-outline {
        fill: color-mix(in srgb, var(--muted) 16%, var(--bg));
        stroke: #0d0d0d;
        stroke-width: 1.35;
        vector-effect: non-scaling-stroke;
        pointer-events: none;
      }
      [data-theme="dark"] .sub-map-state-outline,
      [data-theme="harper"] .sub-map-state-outline {
        fill: color-mix(in srgb, var(--muted) 22%, var(--bg));
        stroke: rgba(235, 235, 235, 0.92);
        stroke-width: 1.4;
      }
      .sub-map-state-bg {
        fill: color-mix(in srgb, var(--muted) 18%, transparent);
        stroke: color-mix(in srgb, var(--border) 80%, transparent);
        stroke-width: 0.8;
      }
      .sub-map-state-fill {
        stroke: rgba(255,255,255,0.35);
        stroke-width: 1.2;
        cursor: default;
        transition: opacity 0.12s;
      }
      .sub-map-state-fill.is-region {
        stroke-dasharray: 3 2;
        opacity: 0.72;
      }
      .sub-map-state-fill.is-excluded {
        fill: rgba(239, 68, 68, 0.22) !important;
        stroke: rgba(239, 68, 68, 0.45);
        opacity: 0.85;
      }
      .sub-map-state-fill.is-neutral {
        fill: color-mix(in srgb, var(--muted) 14%, transparent);
        stroke: color-mix(in srgb, var(--border) 70%, transparent);
      }
      .sub-map-pin {
        stroke: rgba(255,255,255,0.9);
        stroke-width: 1.5;
        cursor: pointer;
        transition: filter 0.12s;
        vector-effect: non-scaling-stroke;
      }
      .sub-map-pin:hover {
        filter: brightness(1.15);
      }
      .sub-map-pin.is-overflow {
        fill: #64748b;
        stroke: #fff;
        cursor: help;
      }
      .sub-map-pin-group {
        cursor: help;
      }
      .sub-map-pin-label {
        fill: #fff;
        font-size: 8px;
        font-weight: 700;
        text-anchor: middle;
        dominant-baseline: central;
        pointer-events: none;
        user-select: none;
      }
      .sub-map-pin-ring {
        fill: none;
        stroke: rgba(255,255,255,0.5);
        stroke-width: 1;
        pointer-events: none;
      }
      .sub-coverage-regions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
      }
      .sub-coverage-regions .uw-tag-region {
        font-size: 10px;
      }
      .sub-mga-focus-head {
        width: 100%;
        margin-bottom: 12px;
        text-align: center;
      }
      /* Map drill-down nav — back button + breadcrumb when an MGA or
         underwriter filter is active on the submissions dashboard. */
      .sub-map-nav {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px 14px;
        margin-bottom: 12px;
        padding: 10px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .sub-map-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text);
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 999px;
        cursor: pointer;
        transition: border-color 0.12s, color 0.12s, background 0.12s;
      }
      .sub-map-back-btn:hover {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
        background: color-mix(in srgb, var(--accent) 8%, var(--panel));
      }
      [data-theme="harper"] .sub-map-back-btn:hover {
        color: #1a8f5e;
        border-color: color-mix(in srgb, #1a8f5e 45%, var(--border));
        background: color-mix(in srgb, #1a8f5e 8%, var(--panel));
      }
      .sub-map-crumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        font-size: var(--text-sm);
      }
      .sub-map-crumb-sep {
        color: var(--muted);
        opacity: 0.65;
        user-select: none;
      }
      .sub-map-crumb-seg {
        padding: 0;
        border: none;
        background: none;
        font: inherit;
        color: var(--muted);
        cursor: pointer;
        text-decoration: underline;
        text-decoration-color: transparent;
        transition: color 0.12s, text-decoration-color 0.12s;
      }
      .sub-map-crumb-seg:hover:not(.is-current) {
        color: var(--accent);
        text-decoration-color: currentColor;
      }
      .sub-map-crumb-seg.is-current {
        color: var(--text);
        font-weight: 600;
        cursor: default;
        text-decoration: none;
      }
      .sub-mga-focus-head .sub-mga-name {
        font-size: 20px;
      }
      .sub-mga-focus-analytics {
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 14px 16px;
        overflow-y: auto;
        max-height: none;
        min-height: auto;
      }
      .sub-mga-focus-analytics .analytics-hero {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 12px;
      }
      .sub-mga-focus-analytics .analytics-hero-card {
        padding: 10px 12px;
      }
      .sub-mga-focus-analytics .analytics-hero-num {
        font-size: 22px;
      }
      .sub-mga-focus-analytics .analytics-row {
        flex-direction: column;
        gap: 10px;
      }
      .sub-mga-focus-analytics .analytics-card {
        padding: 12px 14px;
      }
      .sub-mga-focus-analytics .analytics-card h3 {
        font-size: var(--text-sm);
        margin-bottom: 8px;
      }
      .sub-mga-focus-analytics .analytics-banner {
        font-size: var(--text-xs);
        margin-bottom: 10px;
      }
      .sub-mga-focus-analytics .analytics-month-table {
        font-size: var(--text-xs);
      }
      .sub-mga-focus-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 14px;
      }
      @media (max-width: 1100px) {
        .sub-mga-grid { grid-template-columns: 1fr; }
        .sub-mga-focus-pie,
        .sub-mga-focus-analytics {
          min-height: auto;
        }
        .sub-mga-focus-analytics {
          max-height: none;
        }
      }
      .sub-mga-card {
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 360px;
      }
      .sub-mga-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
      }
      .sub-mga-name {
        font-size: 16px;
        font-weight: 700;
      }
      .sub-mga-count {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--muted);
      }
      .sub-mga-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .sub-mga-stat {
        padding: 10px 12px;
        background: var(--bg);
        border-radius: 8px;
        border: 1px dashed var(--border);
      }
      .sub-mga-stat-lbl {
        font-size: 11px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .sub-mga-stat-val {
        font-size: 20px;
        font-weight: 700;
        margin-top: 2px;
      }
      .sub-pie-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        flex: 1;
        min-height: 200px;
      }
      .sub-pie-wrap.is-large {
        flex-direction: column;
        gap: 20px;
        width: 100%;
        min-height: 0;
        flex: 1;
      }
      .sub-pie-wrap.is-compact {
        flex-direction: row;
        gap: 14px;
        width: 100%;
        min-height: 0;
        align-items: flex-start;
        justify-content: center;
      }
      .sub-pie-svg {
        width: 160px;
        height: 160px;
        flex-shrink: 0;
      }
      .sub-pie-svg.is-large {
        width: min(100%, 440px);
        height: min(100%, 440px);
        max-width: 440px;
        max-height: 440px;
      }
      .sub-pie-svg.is-compact {
        width: 200px;
        height: 200px;
        flex-shrink: 0;
      }
      .sub-pie-slice {
        cursor: pointer;
        transition: opacity 0.12s, filter 0.12s;
        stroke: var(--bg);
        stroke-width: 1.5;
      }
      .sub-pie-slice:hover,
      .sub-pie-slice.is-hovered {
        opacity: 1;
        filter: brightness(1.12);
      }
      .sub-pie-slice.is-dim {
        opacity: 0.35;
      }
      .sub-pie-legend {
        flex: 1;
        min-width: 0;
        font-size: 11px;
      }
      .sub-pie-legend.is-large {
        width: 100%;
        max-width: 520px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 18px;
        font-size: 12px;
      }
      .sub-pie-legend.is-compact {
        flex: 1;
        min-width: 0;
        max-height: 220px;
        overflow-y: auto;
        font-size: 11px;
      }
      @media (max-width: 700px) {
        .sub-pie-legend.is-large { grid-template-columns: 1fr; }
      }
      .sub-pie-legend-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 3px 0;
        cursor: pointer;
      }
      .sub-pie-legend-row:hover { opacity: 0.85; }
      .sub-pie-swatch {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        flex-shrink: 0;
      }
      .sub-pie-legend-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .sub-pie-legend-count {
        font-family: var(--font-mono);
        color: var(--muted);
      }
      .sub-hover-tip {
        position: fixed;
        z-index: 200;
        max-width: 320px;
        padding: 10px 12px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        pointer-events: none;
        font-size: 12px;
      }
      .sub-hover-tip-hint {
        margin-top: 8px;
        padding-top: 6px;
        border-top: 1px dashed var(--border);
        font-size: 10px;
        color: var(--accent);
        font-family: var(--font-mono);
      }
      .sub-hover-tip.is-map-tip {
        max-width: 300px;
        padding: 0;
        overflow: hidden;
        border-radius: 10px;
      }
      .sub-map-tip-hero {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px 10px;
        background: color-mix(in srgb, var(--accent) 7%, var(--bg));
        border-bottom: 1px solid var(--border);
      }
      .sub-map-tip-swatch {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        flex-shrink: 0;
        border: 2.5px solid rgba(255, 255, 255, 0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
      }
      .sub-map-tip-uw {
        font-weight: 700;
        font-size: 13px;
        line-height: 1.25;
      }
      .sub-map-tip-mga {
        font-size: 11px;
        margin-top: 2px;
      }
      .sub-map-tip-state {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px 10px;
      }
      .sub-map-tip-state-badge {
        font-size: 17px;
        font-weight: 800;
        font-family: var(--font-mono);
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: color-mix(in srgb, var(--muted) 14%, var(--bg));
        border: 1px solid var(--border);
        letter-spacing: 0.02em;
        flex-shrink: 0;
      }
      .sub-map-tip-state-badge.is-served {
        background: color-mix(in srgb, #34d399 18%, var(--bg));
        border-color: color-mix(in srgb, var(--lb-ok-text, #34d399) 35%, var(--border));
        color: color-mix(in srgb, var(--lb-ok-text, #34d399) 80%, var(--text));
      }
      .sub-map-tip-state-badge.is-region {
        background: color-mix(in srgb, #fbbf24 16%, var(--bg));
        border-color: color-mix(in srgb, var(--lb-warn-text, #fbbf24) 35%, var(--border));
        color: color-mix(in srgb, var(--lb-warn-text, #fbbf24) 85%, var(--text));
      }
      .sub-map-tip-state-badge.is-excluded {
        background: color-mix(in srgb, #ef4444 14%, var(--bg));
        border-color: color-mix(in srgb, #ef4444 35%, var(--border));
        color: color-mix(in srgb, #ef4444 85%, var(--text));
      }
      .sub-map-tip-state-name {
        font-weight: 600;
        font-size: 13px;
      }
      .sub-map-tip-state-status {
        font-size: 11px;
        color: var(--muted);
        margin-top: 2px;
      }
      .sub-map-tip-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0 14px 10px;
      }
      .sub-map-tip-stat {
        font-size: 10px;
        font-family: var(--font-mono);
        padding: 3px 8px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--border) 40%, transparent);
        color: var(--muted);
        white-space: nowrap;
      }
      .sub-map-tip-extra {
        padding: 0 14px 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .sub-map-tip-extra-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
      }
      .sub-map-tip-extra-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
        border: 1px solid rgba(255, 255, 255, 0.6);
      }
      .sub-map-tip-accounts {
        padding: 0 14px 8px;
        max-height: 120px;
        overflow-y: auto;
      }
      .sub-map-tip-hint {
        margin: 0;
        padding: 8px 14px 10px;
        border-top: 1px dashed var(--border);
        font-size: 10px;
        color: var(--accent);
        font-family: var(--font-mono);
        background: color-mix(in srgb, var(--muted) 4%, var(--bg));
      }
      .sub-map-state-fill {
        cursor: pointer;
      }
      .sub-map-state-fill.is-hovered {
        filter: brightness(1.12);
        stroke-width: 2;
      }
      .sub-pie-manage-card {
        width: min(100%, 680px);
        max-height: min(88vh, 720px);
        display: flex;
        flex-direction: column;
      }
      .sub-pie-manage-body {
        flex: 1;
        overflow-y: auto;
        margin: 10px 0 12px;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .sub-manage-card {
        border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
        border-radius: var(--radius);
        background: color-mix(in srgb, var(--panel) 92%, var(--bg));
        overflow: hidden;
      }
      .sub-manage-card-main {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 10px 12px;
        align-items: start;
        padding: 10px 12px;
      }
      .sub-edit-btn {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--input-bg);
        color: var(--muted);
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: border-color 0.12s, color 0.12s, background 0.12s;
      }
      .sub-edit-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 8%, var(--input-bg));
      }
      .sub-manage-card-title {
        font-weight: 600;
        font-size: 13px;
        line-height: 1.3;
      }
      .sub-manage-card-meta {
        font-size: 11px;
        color: var(--muted);
        margin-top: 3px;
      }
      .sub-manage-card-dates {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
        margin-top: 6px;
      }
      .sub-date-chip {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: 10px;
        padding: 2px 7px;
        border-radius: var(--sub-chip-radius);
        background: color-mix(in srgb, var(--border) 35%, transparent);
        border: 1px solid transparent;
        color: var(--muted);
        white-space: nowrap;
      }
      .sub-date-chip.has-val {
        color: var(--text);
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
      }
      .sub-manage-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding: 8px 12px 10px;
        border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
        background: color-mix(in srgb, var(--bg) 40%, transparent);
      }
      .sub-manage-card-actions .chip,
      .sub-row-actions .chip {
        font-size: 10px;
        padding: 4px 9px;
      }
      .sub-manage-card-actions .chip.is-decline,
      .sub-row-actions .chip.is-decline {
        border-color: color-mix(in srgb, var(--sub-decline) 45%, var(--border));
        color: var(--sub-decline);
      }
      .sub-manage-card-actions .chip.is-blocked,
      .sub-row-actions .chip.is-blocked {
        border-color: color-mix(in srgb, var(--sub-blocked) 50%, var(--border));
        color: var(--sub-blocked);
      }
      .sub-manage-card-actions .chip.is-dead,
      .sub-row-actions .chip.is-dead {
        border-color: color-mix(in srgb, var(--muted) 55%, var(--border));
        color: var(--muted);
      }
      .sub-quote-badge {
        display: inline-block;
        margin-left: 5px;
        padding: 0 6px;
        border-radius: 999px;
        font-family: var(--font-mono);
        font-size: 10px;
        line-height: 16px;
        background: color-mix(in srgb, var(--accent) 16%, transparent);
        color: var(--accent);
        vertical-align: middle;
      }
      .sub-type-tag {
        display: inline-block;
        margin-left: 5px;
        padding: 0 6px;
        border-radius: 4px;
        font-family: var(--font-mono);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.04em;
        line-height: 15px;
        vertical-align: middle;
        border: 1px solid var(--border);
        color: var(--muted);
      }
      .sub-type-tag.is-remarket {
        background: color-mix(in srgb, #a78bfa 16%, transparent);
        border-color: color-mix(in srgb, #a78bfa 45%, var(--border));
        color: #a78bfa;
      }
      .sub-type-tag.is-new_business {
        background: color-mix(in srgb, #34d399 14%, transparent);
        border-color: color-mix(in srgb, var(--lb-ok-text, #34d399) 42%, var(--border));
        color: var(--lb-ok-text, #34d399);
      }
      .sub-pie-manage-group {
        margin-bottom: 4px;
      }
      .sub-pie-manage-group-lbl {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        margin-bottom: 4px;
      }
      .sub-hover-tip-head {
        font-weight: 700;
        margin-bottom: 6px;
        padding-bottom: 6px;
        border-bottom: 1px dashed var(--border);
      }
      .sub-hover-tip-row {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 3px 0;
      }
      .sub-hover-tip-status {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--muted);
        white-space: nowrap;
      }
      #subListWrap {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        background: color-mix(in srgb, var(--panel) 92%, var(--bg));
      }
      .sub-list-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
      }
      .sub-list-table tbody tr:last-child td {
        border-bottom: none;
      }
      .sub-list-table th {
        text-align: left;
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
      }
      .sub-list-table td {
        padding: 10px 12px;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
        vertical-align: middle;
      }
      .sub-list-table tr:hover td {
        background: color-mix(in srgb, var(--accent) 6%, transparent);
      }
      .sub-status-pill {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        background: var(--input-bg);
        border: 1px solid var(--border);
      }
      .sub-decline-why {
        display: inline-block;
        margin-left: 5px;
        padding: 0 6px;
        border-radius: 999px;
        font-size: 10px;
        line-height: 16px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: color-mix(in srgb, var(--danger, #d9534f) 14%, transparent);
        color: var(--danger, #d9534f);
        cursor: help;
        vertical-align: middle;
      }
      .sub-status-pill.is-open {
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
        color: var(--accent);
      }
      .sub-status-pill.is-quoted {
        background: color-mix(in srgb, var(--sub-bound) 20%, var(--input-bg));
        border-color: color-mix(in srgb, var(--sub-bound) 55%, var(--border));
        color: color-mix(in srgb, var(--sub-bound) 75%, var(--text));
      }
      .sub-status-pill.is-blocked {
        border-color: color-mix(in srgb, var(--sub-blocked) 50%, var(--border));
        color: var(--sub-blocked);
      }
      .sub-list-table .sub-edit-btn {
        width: 28px;
        height: 28px;
        font-size: 13px;
      }
      .sub-list-table .sub-edit-col {
        width: 36px;
        padding-right: 4px;
      }
      .sub-edit-modal-card {
        width: min(100%, 520px);
        max-height: min(92vh, 700px);
        overflow-y: auto;
      }
      .sub-edit-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 10px;
      }
      .sub-edit-form label.span-2 { grid-column: 1 / -1; }
      .sub-edit-dates {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: color-mix(in srgb, var(--panel) 60%, var(--bg));
      }
      .sub-edit-dates legend {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        padding: 0 4px;
      }
      .sub-edit-dates label {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
      }
      .sub-edit-dates input[type="date"] {
        font-size: 13px;
      }
      @media (max-width: 520px) {
        .sub-edit-form,
        .sub-edit-dates { grid-template-columns: 1fr; }
      }
      .sub-status-pill.is-closed {
        color: var(--muted);
      }
      .sub-status-pill.is-dead {
        border-color: color-mix(in srgb, var(--muted) 50%, var(--border));
        color: var(--muted);
        opacity: 0.85;
      }
      .sub-row-actions {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
      }
      /* Follow-up status chip (list "Follow-up" column) */
      .sub-followup-chip {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: 10px;
        padding: 2px 8px;
        border-radius: var(--sub-chip-radius);
        white-space: nowrap;
        border: 1px solid transparent;
      }
      .sub-followup-chip.is-due {
        color: var(--sub-blocked);
        background: color-mix(in srgb, var(--sub-blocked) 14%, transparent);
        border-color: color-mix(in srgb, var(--sub-blocked) 45%, var(--border));
        font-weight: 600;
      }
      .sub-followup-chip.is-done {
        color: var(--sub-received);
        background: color-mix(in srgb, var(--sub-received) 12%, transparent);
        border-color: color-mix(in srgb, var(--sub-received) 35%, var(--border));
      }
      .sub-followup-chip.is-scheduled {
        color: var(--muted);
        background: color-mix(in srgb, var(--border) 30%, transparent);
      }
      /* "Log follow-up" action chip — accent normally, red when overdue. */
      .sub-manage-card-actions .chip.is-followup,
      .sub-row-actions .chip.is-followup {
        border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
        color: var(--accent);
      }
      .sub-manage-card-actions .chip.is-followup.is-due,
      .sub-row-actions .chip.is-followup.is-due {
        border-color: color-mix(in srgb, var(--sub-blocked) 50%, var(--border));
        color: var(--sub-blocked);
        background: color-mix(in srgb, var(--sub-blocked) 8%, var(--input-bg));
      }
      .sub-list-table tr.sub-row-due td {
        background: color-mix(in srgb, var(--sub-blocked) 5%, transparent);
      }
      .sub-list-table tr.sub-row-due:hover td {
        background: color-mix(in srgb, var(--sub-blocked) 9%, transparent);
      }
      .sub-new-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 12px;
      }
      @media (max-width: 700px) {
        .sub-new-form { grid-template-columns: 1fr; }
      }
      .sub-new-form label {
        min-width: 0;
      }
      .sub-new-form label.span-2,
      .sub-new-form .pm-combo-field.span-2 { grid-column: 1 / -1; }
      .sub-new-form .pm-combo-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
      }
      .sub-new-modal-card {
        width: min(100%, 560px);
        max-height: min(92vh, 680px);
        overflow-y: auto;
      }
      #plAddModal .sub-new-modal-card {
        width: min(100%, 680px);
        max-height: min(94vh, 860px);
      }
      .sub-coverage-field {
        grid-column: 1 / -1;
        margin: 0;
        padding: 0;
        border: 0;
        min-width: 0;
      }
      .sub-coverage-field legend {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 0;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text);
      }
      .sub-coverage-count {
        font-weight: 500;
        font-size: 11px;
        color: var(--muted);
        font-family: var(--font-mono);
      }
      .sub-coverage-hint {
        font-size: 11px;
        margin: 0 0 8px;
        line-height: 1.35;
      }
      .sub-coverage-pick {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        margin: 0;
        padding: 6px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--sub-control-radius);
        max-height: min(220px, 42vh);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
      @media (max-width: 520px) {
        .sub-coverage-pick {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      .sub-coverage-option {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        margin: 0;
        padding: 5px 7px;
        border-radius: 5px;
        border: 1px solid var(--border);
        background: var(--input-bg);
        font-size: 11px;
        line-height: 1.25;
        cursor: pointer;
        user-select: none;
        min-width: 0;
        transition: border-color 0.1s, background 0.1s;
      }
      .sub-coverage-option:hover {
        border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
      }
      .sub-coverage-option.is-checked {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, var(--input-bg));
      }
      .sub-coverage-option input {
        flex: 0 0 auto;
        width: 13px;
        height: 13px;
        margin: 1px 0 0;
        accent-color: var(--accent);
      }
      .sub-coverage-option-text {
        flex: 1;
        min-width: 0;
        word-wrap: break-word;
        overflow-wrap: anywhere;
      }
      .sub-cov-lines {
        font-size: 12px;
        line-height: 1.35;
        max-width: 220px;
      }
      /* Quote received modal — layout only; controls use shared .sub-* rules above */
      .sub-quote-modal-card {
        width: min(100%, 500px);
        max-height: min(92vh, 720px);
        overflow-y: auto;
      }
      .sub-quote-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 10px;
      }
      .sub-quote-form label.span-2 { grid-column: 1 / -1; }
      .sub-quote-form label.is-required span:first-child::after {
        content: " *";
        color: var(--danger, var(--lb-rose-text, #fb7185));
        font-weight: 700;
      }
      .sub-quote-form-actions,
      .sub-form-actions {
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
      }
      .sub-quote-list-panel {
        padding: 10px 12px;
        background: color-mix(in srgb, var(--panel) 70%, var(--bg));
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 14px;
      }
      .sub-quote-list-head {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        margin-bottom: 6px;
      }
      .sub-quote-list-row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 0;
        font-size: var(--text-xs);
        border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      }
      .sub-quote-list-row:first-of-type { border-top: none; padding-top: 0; }
      .sub-quote-list-prem {
        font-family: var(--font-mono);
        color: var(--accent);
        white-space: nowrap;
        font-weight: 600;
      }
      @media (max-width: 520px) {
        .sub-quote-form { grid-template-columns: 1fr; }
      }
      .sub-draft-badge {
        font-size: 10px;
        font-family: var(--font-mono);
        color: var(--muted);
        padding: 2px 8px;
        border: 1px dashed var(--border);
        border-radius: 999px;
      }
      .sub-scope-toggle {
        display: inline-flex;
        gap: 3px;
        background: color-mix(in srgb, var(--sub-brand-creme) 40%, var(--bg));
        border: 1px solid color-mix(in srgb, var(--sub-brand) 20%, var(--border));
        border-radius: 999px;
        padding: 3px;
      }
      .sub-scope-toggle button {
        border: none;
        background: transparent;
        padding: 6px 14px;
        font: inherit;
        font-size: 11px;
        font-weight: 650;
        color: var(--muted);
        border-radius: 999px;
        cursor: pointer;
        transition: background 0.12s, color 0.12s;
      }
      .sub-scope-toggle button.is-active[data-sub-scope="open"],
      #subBfScope button.is-active {
        background: var(--sub-brand);
        color: #fff;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--sub-brand) 35%, transparent);
      }
      .sub-scope-toggle button.is-active[data-sub-scope="all"] {
        background: color-mix(in srgb, var(--sub-brand-ink) 88%, #000);
        color: #fff;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--sub-brand-ink) 25%, transparent);
      }
      .sub-dept-badge {
        display: inline-flex;
        align-items: center;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.02em;
        padding: 4px 10px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--sub-brand) 14%, var(--bg));
        border: 1px solid color-mix(in srgb, var(--sub-brand) 28%, var(--border));
        color: var(--sub-brand-ink, var(--text));
        white-space: nowrap;
      }
      .sub-dept-tabs {
        display: flex;
        align-items: stretch;
        gap: 2px;
        min-width: 0;
        flex: 1;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
      }
      .sub-dept-tabs button {
        flex: 0 0 auto;
        border: none;
        background: transparent;
        padding: 7px 11px 8px;
        font: inherit;
        font-size: 12px;
        font-weight: 650;
        color: var(--muted);
        white-space: nowrap;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        box-shadow: none;
      }
      .sub-dept-tabs button:hover {
        color: var(--text);
      }
      .sub-dept-tabs button.is-active {
        color: var(--text);
        border-bottom-color: var(--sub-brand);
      }
      .sub-dept-tabs button.is-empty {
        opacity: 0.55;
      }
      .sub-dept-tabs button.is-empty.is-active {
        opacity: 1;
      }
      .sub-dept-n {
        margin-left: 6px;
        font-size: 11px;
        font-weight: 650;
        font-variant-numeric: tabular-nums;
        opacity: 0.62;
      }
      .sub-dept-tabs button.is-active .sub-dept-n {
        opacity: 0.8;
      }
      .sub-toolbar-scopes .sub-scope-toggle {
        flex-shrink: 0;
      }
      .sub-scope-banner {
        font-size: 12px;
        padding: 8px 12px;
        border-radius: 6px;
        margin-bottom: 12px;
        border: 1px solid var(--border);
      }
      .sub-scope-banner.is-open {
        background: color-mix(in srgb, var(--accent) 8%, transparent);
        border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
      }
      .sub-scope-banner.is-all {
        background: color-mix(in srgb, #a78bfa 10%, transparent);
        border-color: color-mix(in srgb, #a78bfa 35%, var(--border));
      }
      .sub-insights-panel { margin-bottom: 16px; }
      .sub-insights-panel .analytics-hero { margin-bottom: 10px; }
      .sub-mga-card.sub-scope-all-card {
        border-color: color-mix(in srgb, #a78bfa 25%, var(--border));
      }
      .sub-status-pill.is-awaiting {
        border-color: color-mix(in srgb, var(--sub-awaiting) 50%, var(--border));
        color: var(--sub-awaiting);
      }
      .sub-status-pill.is-received {
        border-color: color-mix(in srgb, var(--sub-received) 50%, var(--border));
        color: var(--sub-received);
      }
      .sub-status-pill.is-pitched {
        border-color: color-mix(in srgb, var(--sub-pitched) 50%, var(--border));
        color: var(--sub-pitched);
      }
      .sub-hover-tip-group {
        margin-top: 6px;
        padding-top: 4px;
        border-top: 1px dashed var(--border);
      }
      .sub-hover-tip-group:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
      }
      .sub-hover-tip-group-lbl {
        font-family: var(--font-mono);
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        margin-bottom: 3px;
      }
      .uw-sub-details-btn,
      .uw-build-sub-btn {
        font-size: 11px;
        padding: 4px 10px;
        flex-shrink: 0;
      }
      .uw-build-sub-btn {
        border-color: rgba(91, 155, 213, 0.45);
        color: var(--text);
      }
      [data-theme="harper"] .uw-build-sub-btn {
        border-color: rgba(26, 143, 94, 0.45);
      }
      .uw-card-head-right {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        flex-shrink: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .sub-uw-details-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 12px 0;
      }
      @media (max-width: 600px) {
        .sub-uw-details-grid { grid-template-columns: 1fr; }
      }
      .sub-uw-stat {
        padding: 10px 12px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 6px;
      }
      .sub-uw-stat-lbl {
        font-size: 10px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .sub-uw-stat-val {
        font-size: 18px;
        font-weight: 700;
        margin-top: 2px;
      }
      .sub-uw-breakdown {
        margin-top: 12px;
      }
      .sub-uw-breakdown h4 {
        margin: 0 0 8px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
      }
      .sub-uw-breakdown-row {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        font-size: 13px;
      }

      /* ============ The Graveyard ============ */
      /* Win-back outreach workspace for lost renewals. Sober palette —
         this is a sales tool, not a memorial. Repitch-ready cohort gets
         the visual emphasis (green/amber accents) since that's where
         the campaign action lives.

         === Theme-aware palette ===
         All Graveyard colors are CSS custom properties so they re-resolve
         per theme. Cards and chart bars take their color from a single
         --c variable set inline (e.g. `style="--c: var(--gy-c-repitch)"`),
         and CSS rules below use color-mix() to derive the fill/border
         tints from that --c value. No raw hex from JS — every color
         path goes through the theme. */
      :root {
        /* Dark theme palette: vivid, high-contrast on dark surfaces. */
        --gy-c-business_closed:  #6b7280;
        --gy-c-bor_change:       #a78bfa;
        --gy-c-switched_carrier: #7dd3fc;
        --gy-c-lost_on_price:    #fbbf24;
        --gy-c-unhappy_with_service: #fb923c;
        --gy-c-unresponsive:     #94a3b8;
        --gy-c-no_market:        #fb7185;
        --gy-c-other:            #a3a3a3;

        --gy-c-fresh:        #fb7185;
        --gy-c-adjusting:    #fbbf24;
        --gy-c-approaching:  #7dd3fc;
        --gy-c-repitch:      #34d399;
        --gy-c-long_lost:    #94a3b8;
        --gy-c-future:       #a3a3a3;
      }
      [data-theme="light"] {
        /* Light theme: darker, more saturated values for contrast on
           white/cream surfaces. The dark-theme #7dd3fc washes out
           against a white background. */
        --gy-c-business_closed:  #475569;
        --gy-c-bor_change:       #6d28d9;
        --gy-c-switched_carrier: #075985;
        --gy-c-lost_on_price:    #b45309;
        --gy-c-unhappy_with_service: #c2410c;
        --gy-c-unresponsive:     #64748b;
        --gy-c-no_market:        #be123c;
        --gy-c-other:            #525252;

        --gy-c-fresh:        #be123c;
        --gy-c-adjusting:    #b45309;
        --gy-c-approaching:  #075985;
        --gy-c-repitch:      #047857;
        --gy-c-long_lost:    #64748b;
        --gy-c-future:       #737373;
      }
      [data-theme="harper"] {
        /* Harper theme: cream background, navy text. Cool palette mapped
           to darker, more conservative values that read against cream
           without looking like marker highlights. Repitch (the call-to-
           action category) uses Harper's signature deep green. */
        --gy-c-business_closed:  #475569;
        --gy-c-bor_change:       #5b21b6;
        --gy-c-switched_carrier: #075985;
        --gy-c-lost_on_price:    #92400e;
        --gy-c-unhappy_with_service: #9a3412;
        --gy-c-unresponsive:     #64748b;
        --gy-c-no_market:        #9a3412;
        --gy-c-other:            #525252;

        --gy-c-fresh:        #9a3412;
        --gy-c-adjusting:    #92400e;
        --gy-c-approaching:  #075985;
        --gy-c-repitch:      #065f46;
        --gy-c-long_lost:    #64748b;
        --gy-c-future:       #737373;
      }

      .gy-header {
        margin-bottom: 18px;
      }
      .gy-title-row {
        display: flex; align-items: baseline; gap: 12px;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
      }
      .gy-title-row h2 {
        margin: 0;
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text);
      }
      .gy-subtitle {
        color: var(--muted);
        font-size: var(--text-sm);
      }
      .gy-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
      }
      .gy-stat-card {
        padding: 14px 16px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .gy-stat-num {
        font-family: var(--font-display);
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 1.1;
        color: var(--text);
      }
      .gy-stat-lbl {
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        margin-top: 4px;
      }
      .gy-stat-highlight {
        background: color-mix(in srgb, var(--gy-c-repitch) 8%, var(--input-bg));
        border-color: color-mix(in srgb, var(--gy-c-repitch) 30%, var(--border));
      }
      .gy-stat-highlight .gy-stat-num {
        color: var(--gy-c-repitch);
      }

      .gy-charts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 18px;
      }
      @media (max-width: 900px) {
        .gy-charts { grid-template-columns: 1fr; }
      }
      .gy-chart-block {
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px;
      }
      .gy-chart-head {
        display: flex; align-items: baseline; justify-content: space-between;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px dashed var(--border);
      }
      .gy-chart-title {
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        font-weight: 700;
      }
      .gy-chart-hint {
        font-size: 10px;
        color: var(--muted);
        font-style: italic;
      }
      .gy-chart-row {
        display: grid;
        grid-template-columns: 200px 1fr 90px;
        align-items: center;
        gap: 10px;
        padding: 5px 0;
        cursor: pointer;
        border-radius: 4px;
        transition: background 0.12s;
      }
      .gy-chart-row:hover { background: var(--bg); padding-left: 4px; padding-right: 4px; }
      .gy-chart-row.is-active {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        padding-left: 4px;
        padding-right: 4px;
      }
      .gy-chart-row.gy-row-highlight {
        background: color-mix(in srgb, var(--gy-c-repitch) 8%, transparent);
      }
      .gy-chart-row.gy-row-highlight.is-active {
        background: color-mix(in srgb, var(--gy-c-repitch) 18%, transparent);
      }
      .gy-chart-row-label {
        display: flex; align-items: center; gap: 8px;
        font-size: var(--text-sm);
        color: var(--text);
      }
      .gy-chart-icon { font-size: 14px; }
      .gy-chart-row-bar {
        height: 10px;
        background: var(--bg);
        border-radius: 3px;
        overflow: hidden;
      }
      .gy-chart-bar-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.2s ease-out;
        /* --c is set inline per row (e.g. style="--c: var(--gy-c-repitch)").
           That variable cascades from the theme block at the top of this
           section, so the bar always uses the per-theme palette. */
        background: var(--c, var(--accent));
      }
      .gy-chart-row-count {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        text-align: right;
      }
      .gy-chart-row-count strong { color: var(--text); font-size: 12px; }

      .gy-toolbar {
        display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
        margin-bottom: 14px;
        padding: 10px 14px;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .gy-toolbar input[type="search"] {
        flex: 1 1 260px;
        min-width: 200px;
        padding: 7px 11px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
      }
      /* Graveyard filter toggles — pill + iOS-style switch (not raw checkboxes). */
      .gy-toolbar-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 6px 10px 6px 12px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--bg);
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
        user-select: none;
        transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
      }
      .gy-toolbar-toggle:hover {
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
        color: var(--text);
      }
      .gy-toolbar-toggle:has(input:checked) {
        color: var(--text);
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
        background: color-mix(in srgb, var(--accent) 10%, var(--bg));
      }
      .gy-toolbar-toggle .gy-switch {
        position: relative;
        width: 36px;
        height: 20px;
        flex: none;
      }
      .gy-toolbar-toggle .gy-switch input {
        position: absolute;
        inset: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        cursor: pointer;
        z-index: 1;
      }
      .gy-toolbar-toggle .gy-switch-track {
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--muted) 35%, var(--border));
        border-radius: 999px;
        transition: background 0.18s ease;
        pointer-events: none;
      }
      .gy-toolbar-toggle .gy-switch-track::before {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
        transition: transform 0.18s ease;
      }
      .gy-toolbar-toggle .gy-switch input:checked + .gy-switch-track {
        background: var(--accent);
      }
      .gy-toolbar-toggle .gy-switch input:checked + .gy-switch-track::before {
        transform: translateX(16px);
      }
      .gy-toolbar-toggle .gy-switch input:focus-visible + .gy-switch-track {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
      }
      .gy-toolbar-spacer { flex: 1 1 auto; }
      .gy-filter-chips {
        display: inline-flex; gap: 6px; flex-wrap: wrap;
      }
      .gy-active-filter {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 3px 8px;
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--accent);
        border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
        border-radius: 4px;
        font-size: 11px;
        font-family: var(--font-mono);
      }
      .gy-clear-filter {
        background: none;
        border: 0;
        color: inherit;
        cursor: pointer;
        padding: 0 2px;
        font-size: 12px;
        line-height: 1;
        opacity: 0.7;
      }
      .gy-clear-filter:hover { opacity: 1; }

      .gy-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 12px;
      }
      .gy-card {
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px;
        display: flex; flex-direction: column; gap: 8px;
      }
      .gy-card.gy-card-repitch {
        /* The most important visual cue in the view: card whose customer's
           new-carrier renewal is happening NOW. Theme-aware accent so the
           green reads on dark, light, AND harper. */
        border-color: color-mix(in srgb, var(--gy-c-repitch) 45%, transparent);
        background: color-mix(in srgb, var(--gy-c-repitch) 6%, var(--input-bg));
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--gy-c-repitch) 20%, transparent);
      }
      .gy-card.gy-card-dnc {
        opacity: 0.55;
        border-style: dashed;
      }
      .gy-card-head {
        display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
      }
      .gy-card-name {
        flex: 1 1 auto;
        font-size: var(--text-sm);
        display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
      }
      .gy-card-name strong { font-size: var(--text-base); }
      .gy-card-flame {
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 2px 6px;
        border-radius: 3px;
        background: color-mix(in srgb, var(--gy-c-repitch) 20%, transparent);
        color: var(--gy-c-repitch);
        border: 1px solid color-mix(in srgb, var(--gy-c-repitch) 45%, transparent);
      }
      .gy-card-elapsed {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        white-space: nowrap;
        flex-shrink: 0;
      }
      .gy-card-meta {
        display: flex; flex-wrap: wrap; gap: 5px;
      }
      .gy-pill {
        display: inline-flex; align-items: center; gap: 4px;
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 600;
        padding: 2px 7px;
        border-radius: 3px;
        border: 1px solid;
        /* --c is set inline per pill from the theme palette. */
        color: var(--c, var(--text));
        background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent);
        border-color: color-mix(in srgb, var(--c, var(--accent)) 35%, transparent);
      }
      .gy-pill-prem {
        /* Premium uses the lost-on-price color so the visual cue is
           consistent (amber/orange = money). */
        color: var(--gy-c-lost_on_price);
        background: color-mix(in srgb, var(--gy-c-lost_on_price) 14%, transparent);
        border-color: color-mix(in srgb, var(--gy-c-lost_on_price) 35%, transparent);
      }
      .gy-card-line {
        font-size: 11px;
      }
      .gy-card-notes {
        font-size: var(--text-xs);
        color: var(--text);
        background: var(--bg);
        padding: 6px 9px;
        border-radius: 4px;
        font-style: italic;
        line-height: 1.4;
      }
      .gy-card-tag {
        font-family: var(--font-mono);
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 3px;
        background: var(--bg);
        color: var(--muted);
        border: 1px solid var(--border);
      }
      .gy-card-tag-dnc {
        background: rgba(239, 68, 68, 0.10);
        color: var(--danger);
        border-color: rgba(239, 68, 68, 0.30);
      }
      .gy-card-actions {
        display: flex; gap: 6px; flex-wrap: wrap;
        padding-top: 4px;
      }
      .gy-card-actions .chip { font-size: 11px; padding: 4px 9px; }
      .gy-action-dnc-mark { border-color: rgba(239, 68, 68, 0.30); color: var(--danger); }
      .gy-action-dnc-mark:hover { background: rgba(239, 68, 68, 0.08); }
      .gy-empty {
        padding: 40px 20px;
        text-align: center;
        font-size: var(--text-sm);
        grid-column: 1 / -1;
      }

      /* ============ Win-back drafter modal ============ */
      /* Dedicated overlay for the Graveyard win-back flow. Doesn't
         touch the general email-drafter UI. Email + text rendered
         side-by-side (or stacked on mobile), editable, with Copy and
         "Mark as Contacted" actions. */
      .gy-wb-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 9998;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 20px;
        overflow-y: auto;
        animation: gyWBFade 0.18s ease;
      }
      [data-theme="light"] .gy-wb-overlay { background: rgba(15, 23, 42, 0.45); }
      [data-theme="harper"] .gy-wb-overlay { background: rgba(10, 31, 61, 0.40); }
      @keyframes gyWBFade { from { opacity: 0; } to { opacity: 1; } }
      .gy-wb-modal {
        background: var(--bg);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
        width: 100%;
        max-width: 760px;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 80px);
      }
      .gy-wb-head {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--border);
      }
      .gy-wb-head-text { flex: 1 1 auto; }
      .gy-wb-head h3 {
        margin: 0 0 6px 0;
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text);
      }
      .gy-wb-subtitle {
        display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
        font-size: var(--text-sm);
        color: var(--muted);
      }
      .gy-wb-subtitle strong {
        color: var(--text);
        font-weight: 650;
      }
      .gy-wb-meta {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
      }
      .gy-wb-close {
        background: transparent;
        border: 0;
        color: var(--muted);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        padding: 2px 6px;
        align-self: flex-start;
        flex-shrink: 0;
      }
      .gy-wb-close:hover { color: var(--text); }

      .gy-wb-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 14px 18px;
        display: flex; flex-direction: column; gap: 16px;
      }
      .gy-wb-section {
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px;
      }
      .gy-wb-section-head {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 8px;
        padding-bottom: 6px;
        border-bottom: 1px dashed var(--border);
      }
      .gy-wb-section-head h4 {
        margin: 0;
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        font-weight: 700;
      }
      .gy-wb-field {
        display: flex; flex-direction: column; gap: 4px;
        margin-bottom: 8px;
      }
      .gy-wb-field:last-child { margin-bottom: 0; }
      .gy-wb-field-label {
        font-family: var(--font-mono);
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
      }
      .gy-wb-field input[type="text"],
      .gy-wb-field textarea {
        width: 100%;
        padding: 8px 10px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 5px;
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        line-height: 1.5;
        box-sizing: border-box;
      }
      .gy-wb-field textarea {
        resize: vertical;
        min-height: 80px;
        font-family: var(--font-sans);
      }
      .gy-wb-field input:focus,
      .gy-wb-field textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--ring);
      }
      .gy-wb-note {
        font-size: var(--text-xs);
        line-height: 1.5;
        padding: 8px 12px;
        background: var(--input-bg);
        border-left: 3px solid var(--accent);
        border-radius: 3px;
      }
      .gy-wb-foot {
        display: flex; align-items: center; gap: 8px;
        padding: 12px 18px;
        border-top: 1px solid var(--border);
      }
      .gy-wb-foot-spacer { flex: 1 1 auto; }

      /* === Touched-today indicator === */
      /* Subtle accent border + shadow on cards/rows that have been actioned today.
         Resets at midnight automatically because the data field is recomputed on each fetch. */
      .pcard.touched-today {
        border-color: rgba(125, 211, 252, 0.55);
        box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.25), 0 0 14px rgba(125, 211, 252, 0.18);
      }
      .pcard.touched-today.overdue {
        border-color: rgba(125, 211, 252, 0.55);
        box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.25), 0 0 14px rgba(125, 211, 252, 0.18);
      }
      .touch-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--accent);
        flex-shrink: 0;
        box-shadow: 0 0 6px var(--accent), 0 0 12px var(--accent);
        animation: touchPulse 2.4s ease-in-out infinite;
      }
      @keyframes touchPulse {
        0%, 100% { opacity: 0.95; transform: scale(1); }
        50%      { opacity: 0.45; transform: scale(0.85); }
      }
      [data-theme="light"] .pcard.touched-today {
        border-color: rgba(2, 132, 199, 0.55);
        box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.18), 0 0 14px rgba(2, 132, 199, 0.12);
      }

      /* Stage badges on kanban cards — small inline tag next to the
         company name showing the policy's stage when it ISN'T "working".
         Helps the team spot policies that are in Grid view (with upcoming
         renewals) but haven't been formally moved into "Working Renewals"
         view in Airtable yet — those slip past in a busy column. */
      .pcard-stage-badge {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 1px 5px;
        margin-left: 6px;
        border-radius: 3px;
        vertical-align: 1px;
        white-space: nowrap;
      }
      .pcard-stage-badge.stage-archived-active {
        background: rgba(251, 191, 36, 0.20);
        color: var(--lb-warn-text, #fbbf24);
        border: 1px solid rgba(251, 191, 36, 0.35);
      }
      .pcard-stage-badge.stage-archived {
        background: rgba(148, 163, 184, 0.15);
        color: var(--muted);
        border: 1px solid var(--border);
      }
      .pcard-stage-badge.stage-won {
        background: rgba(52, 211, 153, 0.16);
        color: var(--lb-ok-text, #34d399);
        border: 1px solid rgba(52, 211, 153, 0.35);
      }
      [data-theme="harper"] .pcard-stage-badge.stage-archived-active,
      [data-theme="light"] .pcard-stage-badge.stage-archived-active {
        background: rgba(217, 119, 6, 0.10); color: #92400e; border-color: rgba(217, 119, 6, 0.30);
      }
      [data-theme="harper"] .pcard-stage-badge.stage-won,
      [data-theme="light"] .pcard-stage-badge.stage-won {
        background: rgba(5, 150, 105, 0.10); color: #065f46; border-color: rgba(5, 150, 105, 0.30);
      }

      /* Date-provenance indicator on kanban cards. Compact orange flag
         next to the company name when ANY of the effective/expiration/
         renewal dates were inferred rather than directly from Airtable.
         Hover reveals which fields were inferred and the source method. */
      .pcard-date-warn {
        display: inline-block;
        margin-left: 6px;
        font-size: 11px;
        line-height: 1;
        padding: 2px 5px;
        border-radius: 3px;
        background: rgba(251, 191, 36, 0.18);
        color: var(--lb-warn-text, #fbbf24);
        border: 1px solid rgba(251, 191, 36, 0.35);
        vertical-align: 1px;
        cursor: help;
      }
      [data-theme="harper"] .pcard-date-warn,
      [data-theme="light"] .pcard-date-warn {
        background: rgba(217, 119, 6, 0.10); color: #92400e; border-color: rgba(217, 119, 6, 0.30);
      }

      /* Subtle dashed border on cards that aren't in formal "Working"
         view — visually distinct from the solid border of working
         policies. Lets the eye scan and immediately register "these
         aren't in the active queue yet". */
      .pcard.pcard-not-working {
        border-style: dashed;
        opacity: 0.92;
      }
      .pcard.pcard-not-working.overdue,
      .pcard.pcard-not-working.touched-today {
        border-style: solid; /* overdue + touched-today get solid borders so their accent shows */
        opacity: 1;
      }
      .touched-row {
        position: relative;
      }
      .touched-row td:first-child {
        box-shadow: inset 3px 0 0 var(--accent);
      }
      .touched-badge {
        display: inline-flex; align-items: center; gap: 6px;
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 3px 8px;
        border-radius: 999px;
        background: rgba(125, 211, 252, 0.15);
        color: var(--accent);
        border: 1px solid rgba(125, 211, 252, 0.3);
      }


      /* ---- Classic (Pro off): flatten Pro search glow + Apple switches ---- */
      body:not(.layout-v2) .pipeline-search-wrap,
      body:not(.layout-v2) .sub-list-toolbar .pipeline-search-wrap {
        border-radius: var(--radius);
        border-width: 1px;
        border-color: var(--border);
        box-shadow: none !important;
        padding: 8px 12px;
      }
      body:not(.layout-v2) .pipeline-search-wrap:focus-within,
      body:not(.layout-v2) .sub-list-toolbar .pipeline-search-wrap:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--ring) !important;
      }
      body:not(.layout-v2) .pipeline-search-label {
        font-weight: 650;
        border-right: none;
        padding-right: 6px;
      }
      body:not(.layout-v2) .uw-toolbar input[type="search"],
      body:not(.layout-v2) .iqp-toolbar input[type="search"],
      body:not(.layout-v2) .vel-toolbar input[type="search"],
      body:not(.layout-v2) .lrv-toolbar input[type="search"],
      body:not(.layout-v2) input#pcalSearch,
      body:not(.layout-v2) input#tplvSearch,
      body:not(.layout-v2) input#tplvBizSearch,
      body:not(.layout-v2) input#edTplSearch,
      body:not(.layout-v2) input#tplPickerBizSearch,
      body:not(.layout-v2) .gy-toolbar input[type="search"]#gySearch {
        border-radius: var(--radius);
        border: 1px solid var(--border);
        box-shadow: none !important;
      }
      body:not(.layout-v2) .uw-toolbar input[type="search"]:focus,
      body:not(.layout-v2) .iqp-toolbar input[type="search"]:focus,
      body:not(.layout-v2) .vel-toolbar input[type="search"]:focus,
      body:not(.layout-v2) .lrv-toolbar input[type="search"]:focus,
      body:not(.layout-v2) input#pcalSearch:focus,
      body:not(.layout-v2) input#tplvSearch:focus,
      body:not(.layout-v2) input#tplvBizSearch:focus,
      body:not(.layout-v2) input#edTplSearch:focus,
      body:not(.layout-v2) input#tplPickerBizSearch:focus,
      body:not(.layout-v2) .gy-toolbar input[type="search"]#gySearch:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--ring) !important;
      }
      body:not(.layout-v2) .lb-switch {
        border: 1px solid var(--border);
        padding: 6px 12px;
        border-radius: var(--radius);
        background: var(--input-bg) !important;
        gap: 0;
      }
      body:not(.layout-v2) .lb-switch-track { display: none; }
      body:not(.layout-v2) .lb-switch.is-active {
        border-color: var(--accent);
        color: var(--accent);
        box-shadow: 0 0 0 2px var(--ring) !important;
      }
      body:not(.layout-v2) .lb-switch.is-active .lb-switch-label { color: inherit; }

      /* === SLA breach dropdown (hover off the glowing SLA orb) === */
      .has-sla-dropdown {
        position: relative;
        cursor: pointer;
      }
      .sla-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 200;
        min-width: 22rem;
        max-width: 32rem;
        max-height: 60vh;
        overflow-y: auto;
        margin-top: 10px;
        background: rgba(15, 23, 42, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 59, 48, 0.45);
        border-radius: 12px;
        box-shadow:
          0 12px 32px rgba(0, 0, 0, 0.55),
          0 0 0 1px rgba(255, 255, 255, 0.04),
          0 0 20px rgba(255, 59, 48, 0.2);
        color: #f1f5f9;
        padding: 8px;
        display: none;
      }
      .sla-dropdown .sla-drop-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 10px 10px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(255, 59, 48, 0.28);
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #ff8a80;
      }
      .sla-dropdown .sla-drop-head .sla-drop-n {
        color: #fff;
        letter-spacing: 0;
        font-size: 12px;
      }
      [data-theme="light"] .sla-dropdown {
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-color: rgba(255, 59, 48, 0.4);
        color: #0f172a;
      }
      [data-theme="light"] .sla-dropdown .sla-drop-head {
        color: #c81e1e;
        border-bottom-color: rgba(255, 59, 48, 0.22);
      }
      [data-theme="light"] .sla-dropdown .sla-drop-head .sla-drop-n { color: #0f172a; }
      /* Bridge the small gap so moving onto the dropdown doesn't dismiss it */
      .has-sla-dropdown::after {
        content: "";
        position: absolute;
        top: 100%; left: 0; right: 0;
        height: 8px;
      }
      .has-sla-dropdown:hover .sla-dropdown,
      .has-sla-dropdown.is-open .sla-dropdown {
        display: block;
      }
      .sla-dropdown ul {
        list-style: none; padding: 0; margin: 0;
      }
      .sla-dropdown li {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        align-items: center;
        padding: 8px 10px;
        border-radius: 6px;
        cursor: pointer;
        font-size: var(--text-sm);
      }
      .sla-dropdown li:hover {
        background: rgba(255, 255, 255, 0.06);
      }
      [data-theme="light"] .sla-dropdown li:hover {
        background: rgba(15, 23, 42, 0.05);
      }
      .sla-dropdown li .sla-id {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
      }
      .sla-dropdown li .sla-acct {
        font-weight: 600;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .sla-dropdown li .sla-days {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--danger);
      }
      .sla-dropdown .sla-empty {
        padding: 10px;
        color: var(--muted);
        font-size: var(--text-sm);
        font-style: italic;
      }

      /* ============ My To-Do ============ */
      .todo-add {
        padding: 14px 16px;
        margin-bottom: 14px;
      }
      .todo-add-grid {
        display: grid;
        /* v2.102.0 — + account attribution column */
        grid-template-columns: 1.5fr 1.2fr 1.2fr 11rem auto auto;
        gap: 8px;
        align-items: center;
      }
      @media (max-width: 900px) {
        .todo-add-grid { grid-template-columns: 1fr 1fr; }
        .todo-add-grid > input[type="text"]:first-child { grid-column: 1 / -1; }
      }
      .todo-add-grid input[type="datetime-local"] { min-width: 12rem; }
      .link-btn {
        background: transparent;
        border: none;
        color: var(--accent);
        cursor: pointer;
        font: inherit;
        padding: 0;
        text-decoration: underline;
      }
      .link-btn:hover { opacity: 0.85; }

      .todo-toolbar {
        display: flex; align-items: center; gap: 8px;
        margin-bottom: 10px;
      }
      .todo-filter.is-active {
        background: rgba(125, 211, 252, 0.18);
        color: var(--accent);
        border-color: rgba(125, 211, 252, 0.5);
        font-weight: 600;
      }
      [data-theme="light"] .todo-filter.is-active {
        background: rgba(2, 132, 199, 0.12);
        color: #0369a1;
        border-color: rgba(2, 132, 199, 0.4);
      }
      [data-theme="harper"] .todo-filter.is-active {
        background: rgba(26, 143, 94, 0.14);
        color: #065f46;
        border-color: rgba(26, 143, 94, 0.45);
      }

      .todo-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .todo-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding: 12px 14px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        align-items: start;
      }
      .todo-item.is-done {
        opacity: 0.55;
      }
      .todo-item.is-done .todo-title {
        text-decoration: line-through;
      }
      .todo-item.is-overdue {
        border-color: rgba(251, 113, 133, 0.45);
        background: rgba(251, 113, 133, 0.06);
      }
      [data-theme="light"] .todo-item.is-overdue {
        background: rgba(225, 29, 72, 0.05);
      }
      .todo-check {
        width: 18px; height: 18px;
        margin-top: 2px;
        cursor: pointer;
      }
      .todo-body { min-width: 0; }
      .todo-title {
        font-weight: 600;
        font-size: var(--text-sm);
        line-height: 1.35;
        word-break: break-word;
      }
      .todo-notes {
        font-size: var(--text-xs);
        color: var(--muted);
        margin-top: 4px;
        white-space: pre-wrap;
        word-break: break-word;
      }
      .todo-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        margin-top: 6px;
        align-items: baseline;
      }
      .todo-remind {
        display: inline-flex; align-items: center; gap: 4px;
        font-family: var(--font-mono);
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(125, 211, 252, 0.14);
        color: var(--accent);
        border: 1px solid rgba(125, 211, 252, 0.3);
      }
      [data-theme="light"] .todo-remind {
        background: rgba(2, 132, 199, 0.10);
        border-color: rgba(2, 132, 199, 0.30);
      }
      [data-theme="harper"] .todo-remind {
        background: rgba(26, 143, 94, 0.10);
        border-color: rgba(26, 143, 94, 0.30);
        color: #065f46;
      }
      .todo-remind.is-overdue {
        background: rgba(251, 113, 133, 0.14);
        color: var(--danger);
        border-color: rgba(251, 113, 133, 0.4);
      }
      [data-theme="harper"] .todo-remind.is-overdue {
        background: rgba(194, 65, 12, 0.10);
        color: #9a3412;
        border-color: rgba(194, 65, 12, 0.35);
      }
      .todo-actions {
        display: flex; gap: 4px;
        flex-shrink: 0;
      }
      .todo-actions .chip { padding: 4px 8px; font-size: 11px; }

      /* ============ Reminder toast stack ============ */
      .reminder-toast-stack {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 360px;
      }
      .reminder-toast {
        background: rgba(15, 23, 42, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(125, 211, 252, 0.35);
        border-radius: var(--radius);
        padding: 12px 14px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
        color: #f1f5f9;
        animation: toastIn 0.25s ease;
      }
      [data-theme="light"] .reminder-toast {
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-color: rgba(2, 132, 199, 0.35);
        color: #0f172a;
      }
      /* Harper theme: the reminder toast previously had NO background
         override, so it stayed dark navy while the harper chip rule below
         painted the button text dark (#0a1f3d) — dark-on-dark, the buttons
         were invisible. Give it the same cream surface the assignment
         toast uses so the dark chip text + title read clearly. */
      [data-theme="harper"] .reminder-toast {
        background: rgba(255, 252, 245, 0.98);
        border-color: rgba(26, 143, 94, 0.45);
        color: #0a1f3d;
        box-shadow: 0 12px 32px rgba(10, 31, 61, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.04);
      }
      /* Mono: --accent is ink-black. On the default dark-glass toast that
         made the "Reminder" head + close affordance disappear. Paper
         surface + dark ink matches Light/Harper notification doctrine. */
      [data-theme="mono"] .reminder-toast {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-color: rgba(12, 12, 12, 0.28);
        color: #0c0c0c;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
      }
      /* The small uppercase "⏰ Reminder" label is var(--accent) by default,
         which is too low-contrast on the light/harper cream surfaces.
         Darken it so it clears WCAG AA like the assignment-toast head. */
      [data-theme="light"] .reminder-toast-head,
      [data-theme="harper"] .reminder-toast-head { color: #0c4a6e; }
      [data-theme="mono"] .reminder-toast-head { color: #111111; }
      @keyframes toastIn {
        from { opacity: 0; transform: translateX(20px); }
        to   { opacity: 1; transform: translateX(0); }
      }
      .reminder-toast-head {
        display: flex; align-items: center; justify-content: space-between;
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--accent);
        margin-bottom: 6px;
      }
      .reminder-toast-close {
        background: transparent; border: none; color: var(--muted);
        font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
      }
      .reminder-toast-close:hover { color: var(--text); }
      .reminder-toast-title {
        font-weight: 650;
        font-size: var(--text-sm);
        margin-bottom: 4px;
        word-break: break-word;
      }
      .reminder-toast-notes {
        font-size: var(--text-xs);
        color: var(--muted);
        white-space: pre-wrap;
        margin-bottom: 8px;
        word-break: break-word;
      }
      .reminder-toast-actions {
        display: flex; gap: 6px;
      }

      /* Buttons inside toast notifications need their own contrast story.
         The toast background is dark glass in dark/harper themes (so the
         default `.chip { background: rgba(0,0,0,0.2) }` blends straight
         in) and bright white in light theme (where it's hard to see the
         border). Override per theme so the buttons read clearly in all
         three. Same story applies to the assignment toast — both share
         these rules below. */
      .reminder-toast .chip,
      .assignment-toast .chip {
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.34);
        color: #f8fafc;
        font-weight: 600;
        padding: 6px 12px;
      }
      .reminder-toast .chip:hover,
      .assignment-toast .chip:hover {
        background: rgba(125, 211, 252, 0.28);
        border-color: rgba(125, 211, 252, 0.7);
        color: #f0f9ff;
      }
      [data-theme="light"] .reminder-toast .chip,
      [data-theme="light"] .assignment-toast .chip {
        background: rgba(15, 23, 42, 0.06);
        border-color: rgba(15, 23, 42, 0.30);
        color: #0f172a;
      }
      [data-theme="light"] .reminder-toast .chip:hover,
      [data-theme="light"] .assignment-toast .chip:hover {
        background: rgba(2, 132, 199, 0.10);
        border-color: rgba(2, 132, 199, 0.55);
        color: #0c4a6e;
      }
      [data-theme="harper"] .reminder-toast .chip,
      [data-theme="harper"] .assignment-toast .chip {
        /* Harper toasts use a light cream bg (rgba(255, 252, 245, 0.98)),
           so the chip text MUST be dark to read — the dark-theme default
           of #f1f5f9 produces ~1.07 contrast (invisible). Mirroring the
           toast's body text color (#0a1f3d navy) here gives ~13.0
           contrast against the chip surface. */
        background: rgba(10, 31, 61, 0.06);
        border-color: rgba(10, 31, 61, 0.30);
        color: #0a1f3d;
      }
      [data-theme="harper"] .reminder-toast .chip:hover,
      [data-theme="harper"] .assignment-toast .chip:hover {
        /* On hover, lean into Harper's green accent — but keep the text
           dark enough to remain legible against a soft green tint. */
        background: rgba(26, 143, 94, 0.14);
        border-color: rgba(26, 143, 94, 0.55);
        color: #064e3b;
      }
      [data-theme="mono"] .reminder-toast .chip,
      [data-theme="mono"] .assignment-toast .chip {
        background: rgba(12, 12, 12, 0.06);
        border-color: rgba(12, 12, 12, 0.32);
        color: #0c0c0c;
      }
      [data-theme="mono"] .reminder-toast .chip:hover,
      [data-theme="mono"] .assignment-toast .chip:hover {
        background: rgba(12, 12, 12, 0.12);
        border-color: rgba(12, 12, 12, 0.5);
        color: #000000;
      }
      /* Light theme also needs the assignment toast's bright white bg to
         read its button labels — handled by the `[data-theme="light"]`
         overrides above. */

      /* ============ Haque Tuah Easter egg (Pro settings · ?) ============ */
      .haque-egg-row {
        margin-top: 18px;
        display: flex;
        justify-content: flex-start;
      }
      .haque-egg-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--input-bg);
        color: var(--muted);
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
      }
      .haque-egg-btn:hover {
        color: var(--text);
        border-color: color-mix(in srgb, #fbbf24 45%, var(--border));
      }
      .haque-egg-btn.is-on {
        color: #0c0c0c;
        background: linear-gradient(180deg, #fde68a 0%, #fbbf24 55%, #f59e0b 100%);
        border-color: #f59e0b;
        box-shadow:
          0 0 0 2px rgba(251, 191, 36, 0.35),
          0 0 18px 4px rgba(251, 191, 36, 0.45);
      }
      .lb-achievement-host {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 10050;
        pointer-events: none;
        max-width: 360px;
      }
      .lb-achievement-toast {
        position: relative;
        overflow: hidden;
        pointer-events: auto;
        padding: 16px 18px 18px;
        border-radius: 14px;
        background: linear-gradient(165deg, rgba(28, 22, 8, 0.96) 0%, rgba(12, 12, 12, 0.97) 100%);
        border: 1.5px solid rgba(251, 191, 36, 0.7);
        color: #fff8e7;
        box-shadow:
          0 0 0 1px rgba(251, 191, 36, 0.25),
          0 0 28px 6px rgba(251, 191, 36, 0.45),
          0 16px 40px rgba(0, 0, 0, 0.45);
        animation: lbAchievementIn 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
      }
      [data-theme="light"] .lb-achievement-toast,
      [data-theme="harper"] .lb-achievement-toast,
      [data-theme="mono"] .lb-achievement-toast {
        background: linear-gradient(165deg, #fffbeb 0%, #ffffff 100%);
        color: #422006;
        box-shadow:
          0 0 0 1px rgba(245, 158, 11, 0.28),
          0 0 24px 4px rgba(251, 191, 36, 0.4),
          0 14px 32px rgba(0, 0, 0, 0.12);
      }
      .lb-achievement-kicker {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #fbbf24;
        margin-bottom: 6px;
      }
      [data-theme="light"] .lb-achievement-kicker,
      [data-theme="harper"] .lb-achievement-kicker,
      [data-theme="mono"] .lb-achievement-kicker { color: #b45309; }
      .lb-achievement-title {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 750;
        line-height: 1.25;
        margin-bottom: 4px;
      }
      .lb-achievement-body {
        font-size: var(--text-sm);
        color: rgba(255, 248, 231, 0.82);
      }
      [data-theme="light"] .lb-achievement-body,
      [data-theme="harper"] .lb-achievement-body,
      [data-theme="mono"] .lb-achievement-body { color: rgba(66, 32, 6, 0.78); }
      .lb-achievement-confetti {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
      }
      .lb-achievement-confetti i {
        position: absolute;
        top: -8px;
        width: 7px;
        height: 10px;
        border-radius: 2px;
        opacity: 0.95;
        animation: lbConfettiFall linear forwards;
      }
      @keyframes lbAchievementIn {
        from { transform: translateX(28px) scale(0.92); opacity: 0; }
        to { transform: translateX(0) scale(1); opacity: 1; }
      }
      @keyframes lbConfettiFall {
        0% { transform: translate3d(0, -10px, 0) rotate(0deg); opacity: 1; }
        100% { transform: translate3d(var(--dx, 0), 120px, 0) rotate(var(--spin, 280deg)); opacity: 0; }
      }
      @media (prefers-reduced-motion: reduce) {
        .lb-achievement-toast { animation: none; }
        .lb-achievement-confetti i { animation: none; opacity: 0; }
      }

      /* ============ Assignment notification toast ============ */
      /* Visually distinct from reminder toasts: warmer accent, bolder
         border, chunkier "Acknowledge" button. These are the only toasts
         that *persist across sessions* — the server keeps them around
         until the assignee POSTs an /ack. */
      .assignment-toast {
        background: rgba(15, 23, 42, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1.5px solid rgba(251, 146, 60, 0.50);
        border-radius: var(--radius);
        padding: 14px 16px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(251, 146, 60, 0.18);
        color: #f1f5f9;
        animation: toastIn 0.25s ease;
        max-width: 360px;
      }
      [data-theme="light"] .assignment-toast {
        background: rgba(255, 255, 255, 0.98);
        border-color: rgba(234, 88, 12, 0.50);
        color: #0f172a;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(234, 88, 12, 0.18);
      }
      [data-theme="harper"] .assignment-toast {
        background: rgba(255, 252, 245, 0.98);
        border-color: rgba(234, 88, 12, 0.55);
        color: #0a1f3d;
        box-shadow: 0 12px 32px rgba(10, 31, 61, 0.14), 0 0 0 1px rgba(234, 88, 12, 0.22);
      }
      [data-theme="mono"] .assignment-toast {
        background: rgba(255, 255, 255, 0.98);
        border-color: rgba(12, 12, 12, 0.4);
        color: #0c0c0c;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
      }
      .assignment-toast-head {
        display: flex; align-items: center; justify-content: space-between;
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #fb923c;
        font-weight: 700;
        margin-bottom: 6px;
      }
      [data-theme="light"] .assignment-toast-head,
      [data-theme="harper"] .assignment-toast-head {
        /* Bump from #ea580c → #9a3412 to clear WCAG AA against the light
           toast bg. The label is small (uppercase + tracked + bold), so
           the extra darkness helps it land cleanly above 4.5:1. */
        color: #9a3412;
      }
      [data-theme="mono"] .assignment-toast-head { color: #111111; }
      .assignment-toast-counter {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--muted);
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: none;
      }
      .assignment-toast-account {
        font-family: var(--font-display);
        font-weight: 650;
        font-size: 1rem;
        margin-bottom: 4px;
        word-break: break-word;
      }
      [data-theme="harper"] .assignment-toast-account { font-family: var(--font-harper); }
      .assignment-toast-action {
        font-size: var(--text-sm);
        line-height: 1.4;
        margin-bottom: 8px;
        word-break: break-word;
      }
      .assignment-toast-meta {
        font-size: 11px;
        font-family: var(--font-mono);
        color: var(--muted);
        margin-bottom: 12px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .assignment-toast-meta .pill-urg {
        padding: 1px 6px;
        border-radius: 3px;
        background: rgba(251, 113, 133, 0.18);
        color: #fb7185;
        font-weight: 600;
      }
      /* Per-theme urgency pill text — the dark-theme pink (#fb7185) on a
         light-pink bg blends to ~2.2 contrast in Light/Harper, well below
         WCAG AA. Darken the text on light backgrounds so the urgency
         level (P0/P1/P2/P3) reads clearly. */
      [data-theme="light"] .assignment-toast-meta .pill-urg,
      [data-theme="harper"] .assignment-toast-meta .pill-urg {
        background: rgba(225, 29, 72, 0.12);
        color: #9f1239;
      }
      [data-theme="mono"] .assignment-toast-meta .pill-urg {
        background: rgba(12, 12, 12, 0.1);
        color: #111111;
      }
      .assignment-toast-actions {
        display: flex; gap: 6px;
        align-items: center;
      }
      .assignment-toast-actions .chip {
        font-size: 11px;
        padding: 5px 9px;
      }
      .assignment-toast-actions .ack-btn {
        flex: 1;
        padding: 8px 12px;
        font-size: var(--text-sm);
        font-weight: 600;
        background: #ea580c;
        color: #ffffff;
        border: 1px solid #ea580c;
        border-radius: var(--radius);
        cursor: pointer;
        font-family: inherit;
      }
      .assignment-toast-actions .ack-btn:hover {
        background: #c2410c;
        border-color: #c2410c;
      }
      .assignment-toast-actions .ack-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      /* ============ Submission Builder (Submissions nav) ============ */
      /* Fill the account once on the left; a live, Harper-branded
         submission email renders on the right and copies into Gmail
         with its formatting intact. All accents use the Harper brand
         palette (navy #0f2540 + green #1a8f5e) in EVERY theme, so the
         tool reads as Harper rather than inheriting the theme accent. */
      /* Harper "Ember" brand palette (from harperinsure.com): coral/salmon
         accent, deep ember-blue ink, warm creme. No green, no generic navy. */
      #submissionEmailView {
        --sb-coral: var(--sub-brand, #ff6d63);
        --sb-coral-d: var(--sub-brand-d, #f0564b);
        --sb-coral-soft: var(--sub-brand-soft, rgba(255, 109, 99, 0.15));
        --sb-ink: var(--sub-brand-ink, #1d3a47);
        --sb-creme: var(--sub-brand-creme, #fcf6f0);
      }
      /* Theme-aware card (matches every other view's hero) with a Harper-green
         accent — NOT a hardcoded navy/blue gradient, which read as off-brand. */
      .sb-hero {
        position: relative; overflow: hidden;
        background: var(--panel);
        border: 1px solid var(--border);
        border-left: 4px solid var(--sb-coral);
        border-radius: 16px;
        padding: 18px 22px;
        color: var(--text);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
      }
      .sb-hero::after {
        content: ""; position: absolute; right: -60px; top: -70px;
        width: 220px; height: 220px; border-radius: 50%;
        background: var(--sb-coral); opacity: 0.12; filter: blur(26px);
        z-index: 0; pointer-events: none;
      }
      .sb-hero > * { position: relative; z-index: 1; }
      .sb-hero h2 { margin: 0 0 4px; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--text); }
      .sb-hero p { margin: 0; font-size: var(--text-sm); color: var(--muted); max-width: 64ch; }
      .sb-hero-badge {
        display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
        background: var(--sb-coral-soft); border: 1px solid var(--sb-coral);
        color: var(--sb-coral); font-weight: 700; font-size: 11px; letter-spacing: 0.06em;
        text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
      }
      .sb-layout {
        display: grid;
        grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
        gap: 22px;
        align-items: start;
      }
      /* Stack to one column on anything narrower than a roomy desktop so the
         email preview never gets crushed next to the form. */
      @media (max-width: 1220px) { .sb-layout { grid-template-columns: 1fr; } }
      .sb-form, .sb-preview-wrap { min-width: 0; }  /* prevent grid blow-out */
      /* IMPORTANT: a global `form { display:grid; grid-template-columns:repeat(12,1fr) }`
         rule lives higher up in this stylesheet. Without resetting it here, the
         builder's <form> inherits that 12-col grid and its sections flow sideways
         into crushed columns. Force normal block flow so our own layout wins. */
      .sb-form {
        display: block;
        background: color-mix(in srgb, var(--sb-creme) 35%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--sb-coral) 16%, var(--border));
        border-radius: 16px;
        padding: 20px 22px;
        box-shadow: var(--shadow-sm);
      }
      [data-theme="dark"] .sb-form {
        background: color-mix(in srgb, var(--sb-coral) 4%, var(--panel));
      }
      .sb-form-section + .sb-form-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
      .sb-form-section-title {
        font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
        color: var(--sb-coral); margin: 0 0 10px;
      }
      .sb-field { margin-bottom: 13px; }
      .sb-field:last-child { margin-bottom: 0; }
      /* Selected underwriter's contact strip — quick email/phone with copy. */
      .sb-uw-contact {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 12px;
        margin-top: 6px;
        font-size: 12px;
      }
      .sb-uw-contact[hidden] { display: none !important; }
      .sb-uw-contact-item { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
      .sb-uw-contact-item a { color: var(--accent); text-decoration: none; }
      .sb-uw-contact-item a:hover { text-decoration: underline; }
      .sb-uw-copy {
        cursor: pointer;
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--muted);
        border-radius: 6px;
        font-size: 11px;
        line-height: 1;
        padding: 3px 6px;
      }
      .sb-uw-copy:hover { color: var(--text); border-color: var(--accent); }
      .sb-uw-custom {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 8px;
        padding: 10px 12px;
        border: 1px dashed var(--border);
        border-radius: 10px;
        background: color-mix(in srgb, var(--panel) 70%, transparent);
      }
      .sb-uw-custom[hidden] { display: none !important; }
      .sb-uw-custom input {
        width: 100%;
        font: inherit;
        font-size: 13px;
        padding: 7px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg);
        color: var(--text);
      }
      .sb-uw-custom-hint {
        font-size: 11px;
        color: var(--muted);
        margin: 0;
        line-height: 1.4;
      }
      .sb-email-mga-err {
        font-size: 12px;
        font-weight: 600;
        color: var(--danger);
        margin: 6px 0 0;
        line-height: 1.4;
      }
      .sb-wc-mono-banner {
        margin-top: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 12.5px;
        line-height: 1.45;
        font-weight: 600;
        background: color-mix(in srgb, #ca8a04 16%, var(--panel));
        color: var(--text);
        border: 1px solid color-mix(in srgb, #ca8a04 45%, var(--border));
      }
      .sb-wc-mono-banner[hidden] { display: none !important; }
      .sb-wc-mono-banner.is-block {
        background: color-mix(in srgb, var(--danger) 12%, var(--panel));
        border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
      }
      .sb-wc-mono-banner.is-ok {
        background: color-mix(in srgb, #16a34a 12%, var(--panel));
        border-color: color-mix(in srgb, #16a34a 35%, var(--border));
      }
      .sb-field.sb-notes-required textarea {
        border-color: color-mix(in srgb, #ca8a04 70%, var(--border));
        box-shadow: 0 0 0 3px color-mix(in srgb, #ca8a04 22%, transparent);
      }
      /* Override the global uppercase/letter-spaced `label` styling so the
         builder's field labels read as normal sentence case. */
      .sb-field label {
        display: block; font-size: 12px; font-weight: 600; color: var(--muted);
        margin-bottom: 4px; text-transform: none; letter-spacing: 0;
      }
      .sb-field input[type="text"],
      .sb-field input[type="date"],
      .sb-field input[type="email"],
      .sb-field select,
      .sb-field textarea {
        width: 100%; box-sizing: border-box;
        background: color-mix(in srgb, var(--sb-creme) 40%, var(--input-bg));
        color: var(--text);
        border: 1px solid color-mix(in srgb, var(--sb-coral) 18%, var(--border));
        border-radius: var(--sub-control-radius, 10px);
        padding: 9px 12px; font-size: var(--text-sm); font-family: inherit;
        box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
        transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
      }
      .sb-field select {
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        padding-right: 38px;
        background-image: var(--sub-chevron);
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px;
        background-color: color-mix(in srgb, var(--sb-creme) 40%, var(--input-bg));
      }
      [data-theme="dark"] .sb-field input[type="text"],
      [data-theme="dark"] .sb-field input[type="date"],
      [data-theme="dark"] .sb-field input[type="email"],
      [data-theme="dark"] .sb-field select,
      [data-theme="dark"] .sb-field textarea {
        background: color-mix(in srgb, var(--sb-coral) 5%, var(--input-bg));
      }
      [data-theme="dark"] .sb-field select {
        background-color: color-mix(in srgb, var(--sb-coral) 5%, var(--input-bg));
      }
      .sb-field textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
      .sb-field input:focus, .sb-field select:focus, .sb-field textarea:focus {
        outline: none;
        border-color: color-mix(in srgb, var(--sb-coral) 65%, var(--border));
        box-shadow: 0 0 0 3px var(--sb-coral-soft), inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
        background: color-mix(in srgb, var(--sb-creme) 55%, var(--input-bg));
      }
      [data-theme="dark"] .sb-field input:focus,
      [data-theme="dark"] .sb-field select:focus,
      [data-theme="dark"] .sb-field textarea:focus {
        background: color-mix(in srgb, var(--sb-coral) 8%, var(--input-bg));
      }
      .sb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      @media (max-width: 480px) { .sb-row2 { grid-template-columns: 1fr; } }

      /* Business search (auto-populate) */
      .sb-bizsearch { position: relative; }
      .sb-biz-results {
        position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin-top: 4px;
        background: #121a28;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48);
        max-height: 280px; overflow-y: auto; padding: 4px;
      }
      @media (prefers-color-scheme: light) {
        :root:not([data-theme="dark"]) .sb-biz-results {
          background: #ffffff;
          border-color: rgba(2, 6, 23, 0.14);
          box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
        }
      }
      [data-theme="light"] .sb-biz-results {
        background: #ffffff;
        border-color: rgba(2, 6, 23, 0.14);
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
      }
      [data-theme="harper"] .sb-biz-results {
        background: #fffdf9;
        border-color: rgba(10, 31, 61, 0.16);
        box-shadow: 0 12px 32px rgba(10, 31, 61, 0.14);
      }
      [data-theme="dark"] .sb-biz-results {
        background: #121a28;
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48);
      }
      .sb-biz-item {
        display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
        border: 0; background: transparent; cursor: pointer; border-radius: 7px;
        padding: 7px 9px; font-family: inherit;
      }
      .sb-biz-item:hover { background: rgba(255, 109, 99, 0.14); }
      [data-theme="light"] .sb-biz-item:hover,
      [data-theme="harper"] .sb-biz-item:hover {
        background: rgba(255, 109, 99, 0.12);
      }
      .sb-biz-name { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; }
      .sb-biz-meta { font-size: 11px; color: var(--muted); }
      .sb-biz-empty { padding: 9px 10px; font-size: 12px; color: var(--muted); }
      /* Address verify (v2.152.4) — in-flow so modal overflow doesn't clip. */
      .addr-verify-field { position: relative; }
      .addr-verify-status {
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        text-transform: none;
        letter-spacing: normal;
        margin-top: 4px;
        line-height: 1.35;
      }
      .addr-verify-status.is-ok { color: var(--ok, #2f7d5b); }
      .addr-verify-status.is-warn { color: var(--muted); }
      .addr-verify-suggest {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: 6px;
      }
      .addr-verify-suggest button {
        font-family: inherit;
        font-size: 12px;
        font-weight: 650;
        text-align: left;
        text-transform: none;
        letter-spacing: normal;
        line-height: 1.35;
        padding: 7px 9px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--input-bg, var(--panel));
        color: var(--text);
        cursor: pointer;
      }
      .addr-verify-suggest button:hover {
        border-color: var(--accent, #ff6d63);
        background: color-mix(in srgb, var(--accent, #ff6d63) 10%, var(--input-bg, var(--panel)));
      }
      .addr-verify-suggest .addr-verify-kicker {
        display: block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 2px;
      }
      .sb-biz-tag {
        font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
        color: var(--sb-coral); background: var(--sb-coral-soft); border-radius: 999px; padding: 1px 7px;
      }
      .sb-biz-tag-new { color: #2f7d5b; background: rgba(47,125,91,.14); }
      /* Message Templates — business search + active context banner */
      #templatesView {
        min-width: 0;
        max-width: 100%;
      }
      .tplv-bizsearch {
        flex: 1 1 200px;
        min-width: 0;
        max-width: 100%;
      }
      .tplv-bizsearch input[type="text"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .tpl-picker-biz { margin: 10px 0 8px; }
      .tplv-biz-context,
      .tpl-picker-context {
        font-size: var(--text-xs);
        color: var(--muted);
        padding: 6px 10px;
        margin: 0 0 8px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--sb-coral) 8%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--sb-coral) 22%, var(--border));
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
      }
      .tplv-biz-context strong,
      .tpl-picker-context strong { color: var(--text); font-weight: 650; }
      .tplv-biz-clear { font-size: var(--text-xs); padding: 2px 8px; }
      /* Quote pitch payment fields — premium, finance plan, payment links */
      .tplv-quote-fields {
        margin: 0 0 12px;
        padding: 14px 16px 16px;
        border-radius: 12px;
        border: 1px solid color-mix(in srgb, var(--sb-coral) 20%, var(--border));
        background: color-mix(in srgb, var(--sb-creme) 40%, var(--panel));
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
      }
      .tplv-quote-fields-head {
        margin: 0 0 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid color-mix(in srgb, var(--sb-coral) 14%, var(--border));
      }
      .tplv-quote-fields-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        margin: 0 0 3px;
        letter-spacing: -0.01em;
      }
      .tplv-quote-fields-hint {
        font-size: 12px;
        color: var(--muted);
        margin: 0;
        line-height: 1.4;
      }
      .tplv-quote-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        gap: 14px 20px;
        min-width: 0;
        align-items: start;
      }
      .tplv-qf-section {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .tplv-qf-section-coverage {
        grid-column: 1 / -1;
      }
      /* Multi-coverage chip picker — a pitch can carry several lines. */
      .tplv-qf-cov-pick {
        display: flex; flex-wrap: wrap; gap: 5px;
        margin: 2px 0 4px;
      }
      .tplv-qf-cov-chip {
        font-size: 11px; font-weight: 600;
        padding: 3px 10px; border-radius: 999px;
        border: 1px solid var(--border); background: var(--panel, #fff);
        color: var(--muted); cursor: pointer; line-height: 1.5;
      }
      .tplv-qf-cov-chip:hover { border-color: var(--accent, #4a7cf7); color: var(--text); }
      .tplv-qf-cov-chip.is-on {
        background: var(--accent, #4a7cf7); border-color: var(--accent, #4a7cf7);
        color: #fff;
      }
      .tplv-qf-cov-summary { font-size: 11.5px; min-height: 1.2em; }
      .tplv-qf-section-links {
        grid-column: 1 / -1;
        padding-top: 4px;
        border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
      }
      .tplv-qf-section-label {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--sb-coral);
        margin: 0;
      }
      .tplv-qf-row {
        display: grid;
        gap: 10px;
        min-width: 0;
      }
      .tplv-qf-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .tplv-qf-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .tplv-qf-row-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .tplv-qf-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        text-transform: none;
        letter-spacing: 0;
      }
      .tplv-qf-input-wrap {
        display: flex;
        align-items: stretch;
        min-width: 0;
        border-radius: 8px;
        border: 1px solid color-mix(in srgb, var(--sb-coral) 18%, var(--border));
        background: var(--input-bg);
        overflow: hidden;
        transition: border-color 0.12s, box-shadow 0.12s;
      }
      .tplv-qf-input-wrap:focus-within {
        border-color: color-mix(in srgb, var(--sb-coral) 65%, var(--border));
        box-shadow: 0 0 0 3px var(--sb-coral-soft);
      }
      .tplv-qf-prefix {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: 0 0 0 10px;
        font-size: var(--text-sm);
        font-weight: 650;
        color: var(--muted);
        user-select: none;
      }
      .tplv-qf-field input {
        font-size: var(--text-sm);
        padding: 8px 10px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--text);
        font-family: inherit;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        outline: none;
      }
      .tplv-qf-input-wrap input { padding-left: 6px; }
      .tplv-qf-field > input,
      .tplv-qf-field > select {
        border: 1px solid color-mix(in srgb, var(--sb-coral) 18%, var(--border));
        border-radius: 8px;
        background: var(--input-bg);
        padding: 8px 10px;
        transition: border-color 0.12s, box-shadow 0.12s;
      }
      .tplv-qf-field > input:focus,
      .tplv-qf-field > select:focus {
        outline: none;
        border-color: color-mix(in srgb, var(--sb-coral) 65%, var(--border));
        box-shadow: 0 0 0 3px var(--sb-coral-soft);
      }
      .tplv-qf-field > select {
        font-size: var(--text-sm);
        font-family: inherit;
        color: var(--text);
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        padding-right: 32px;
        background-image: var(--sub-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"));
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 14px;
      }
      /* Narrow compose sidebar: stack everything so fields stay readable */
      .ed-quote-fields {
        margin: 0 10px 10px;
        flex-shrink: 0;
        padding: 12px;
      }
      .ed-quote-fields .tplv-quote-body,
      .ed-quote-fields .tplv-qf-row-2,
      .ed-quote-fields .tplv-qf-row-3,
      .ed-quote-fields .tplv-qf-row-links {
        grid-template-columns: 1fr;
      }
      @media (max-width: 720px) {
        .tplv-quote-body,
        .tplv-qf-row-2,
        .tplv-qf-row-3,
        .tplv-qf-row-links {
          grid-template-columns: 1fr;
        }
      }

      .sb-seg {
        display: inline-flex;
        background: color-mix(in srgb, var(--sb-creme) 45%, var(--input-bg));
        border: 1px solid color-mix(in srgb, var(--sb-coral) 18%, var(--border));
        border-radius: 999px; padding: 3px; gap: 3px;
      }
      .sb-seg button {
        border: 0; background: transparent; color: var(--muted); cursor: pointer;
        font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 999px;
        transition: all .12s ease;
      }
      .sb-seg button.is-active { background: var(--sb-coral); color: #fff; }

      /* Toggle chips (coverages + attachments) */
      .sb-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-start; }
      .sb-chip {
        display: inline-flex; align-items: center; justify-content: center; gap: 0;
        border: 1px solid var(--border); background: var(--input-bg); color: var(--text);
        border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 600;
        cursor: pointer; user-select: none; text-align: center; line-height: 1.2;
        transition: background .12s ease, border-color .12s ease, color .12s ease;
      }
      .sb-chip:hover { border-color: var(--sb-coral); }
      .sb-chip.is-on {
        background: var(--sb-coral-soft); border-color: var(--sb-coral); color: var(--text);
      }
      /* The check collapses to zero width when the chip is off, so an unselected
         chip's label stays centered instead of being pushed right by an invisible
         checkmark + gap. It expands (with a little right margin) when selected. */
      .sb-chip .sb-chip-check {
        display: inline-block; width: 0; opacity: 0; overflow: hidden;
        font-weight: 800; color: var(--sb-coral); transition: width .12s, opacity .12s, margin .12s;
      }
      .sb-chip.is-on .sb-chip-check { width: 0.78em; opacity: 1; margin-right: 5px; }
      .sb-cov-limits { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
      /* Per-coverage detail card */
      .sb-cov-card {
        border: 1px solid var(--border); border-radius: 11px;
        background: color-mix(in srgb, var(--panel) 60%, transparent);
        padding: 10px 12px;
      }
      .sb-cov-card-head {
        font-size: 12px; font-weight: 800; color: var(--text);
        margin: 0 0 8px; display: flex; align-items: center; gap: 6px;
      }
      .sb-cov-empty { font-size: 12px; color: var(--muted); padding: 2px 0 4px; }
      /* Addable limit lines */
      .sb-lim-list { display: flex; flex-direction: column; gap: 6px; }
      .sb-lim-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) 26px; gap: 8px; align-items: center; }
      .sb-lim-label { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .sb-cov-card input, .sb-cov-card select {
        width: 100%; box-sizing: border-box;
        background: color-mix(in srgb, var(--sb-creme) 35%, var(--input-bg));
        color: var(--text);
        border: 1px solid color-mix(in srgb, var(--sb-coral) 16%, var(--border));
        border-radius: var(--sub-control-radius, 10px);
        padding: 7px 10px; font-size: 12px; font-family: inherit;
      }
      .sb-cov-card select {
        appearance: none; -webkit-appearance: none; cursor: pointer;
        padding-right: 34px;
        background-image: var(--sub-chevron);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 14px;
      }
      .sb-cov-card input:focus, .sb-cov-card select:focus {
        outline: none;
        border-color: color-mix(in srgb, var(--sb-coral) 60%, var(--border));
        box-shadow: 0 0 0 2px var(--sb-coral-soft);
      }
      .sb-lim-x {
        border: 1px solid var(--border); background: transparent; color: var(--muted);
        border-radius: 7px; width: 26px; height: 28px; cursor: pointer; font-size: 16px; line-height: 1; padding: 0;
      }
      .sb-lim-x:hover { border-color: var(--danger); color: var(--danger); }
      /* Additional-insured cards (business name + address + insurable interest) */
      .sb-ai-list { display: flex; flex-direction: column; gap: 9px; }
      .sb-ai-card {
        border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px;
        background: var(--input-bg); display: flex; flex-direction: column; gap: 8px;
      }
      .sb-ai-card-head { display: flex; align-items: center; gap: 8px; }
      .sb-ai-card-head input { flex: 1; min-width: 0; }
      .sb-ai-card label {
        display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
        text-transform: uppercase; color: var(--muted); margin: 0 0 3px;
      }
      .sb-ai-card input, .sb-ai-card select {
        width: 100%; box-sizing: border-box;
        background: color-mix(in srgb, var(--sb-creme) 30%, var(--panel));
        color: var(--text);
        border: 1px solid color-mix(in srgb, var(--sb-coral) 16%, var(--border));
        border-radius: var(--sub-control-radius, 10px);
        padding: 8px 11px; font-size: 12px; font-family: inherit;
      }
      .sb-ai-card select {
        appearance: none; -webkit-appearance: none; cursor: pointer;
        padding-right: 34px;
        background-image: var(--sub-chevron);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 14px;
      }
      .sb-ai-card input:focus, .sb-ai-card select:focus {
        outline: none;
        border-color: color-mix(in srgb, var(--sb-coral) 60%, var(--border));
        box-shadow: 0 0 0 2px var(--sb-coral-soft);
      }
      .sb-add-sel {
        appearance: none; -webkit-appearance: none; cursor: pointer;
        padding-right: 34px;
        background-image: var(--sub-chevron);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 14px;
        border: 1px solid color-mix(in srgb, var(--sb-coral) 22%, var(--border));
        border-radius: var(--sub-control-radius, 10px);
        background-color: color-mix(in srgb, var(--sb-coral-soft) 50%, var(--input-bg));
        color: var(--text);
        padding: 8px 34px 8px 11px;
        font-size: 12px;
        font-family: inherit;
      }
      .sb-add-row { margin-top: 8px; }
      .sb-add-sel { max-width: 260px; }
      .sb-btn-soft {
        border: 1px dashed var(--sb-coral); background: var(--sb-coral-soft); color: var(--sb-coral);
        border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
      }
      .sb-btn-soft:hover { background: color-mix(in srgb, var(--sb-coral) 22%, transparent); }
      /* Property locations */
      .sb-loc { border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; background: var(--input-bg); }
      .sb-loc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
      .sb-loc-head .sb-loc-label { flex: 1; min-width: 0; }
      .sb-loc-head .addr-verify-suggest,
      .sb-loc-head .addr-verify-status { flex: 1 0 100%; }
      .sb-loc-x { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 7px; padding: 5px 9px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
      .sb-loc-x:hover { border-color: var(--danger); color: var(--danger); }
      .sb-loc-line { padding: 4px 0; }
      .sb-loc-line + .sb-loc-line { border-top: 1px dashed var(--border); }
      .sb-mini-chip {
        display: inline-flex; align-items: center; gap: 5px;
        border: 1px solid var(--border); background: var(--panel); color: var(--text);
        border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 700; cursor: pointer; user-select: none;
      }
      .sb-mini-chip:hover { border-color: var(--sb-coral); }
      .sb-mini-chip.is-on { background: var(--sb-coral-soft); border-color: var(--sb-coral); }
      .sb-mini-chip .sb-chip-check { color: var(--sb-coral); opacity: 0; font-weight: 800; }
      .sb-mini-chip.is-on .sb-chip-check { opacity: 1; }
      .sb-loc-fields { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; margin-top: 6px; }
      @media (max-width: 560px) { .sb-loc-fields { grid-template-columns: 1fr 1fr; } }

      /* Right pane = Gmail-style compose window (builder form feeds it) */
      .sb-preview-wrap { position: sticky; top: 12px; }
      .sb-compose {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 8px 28px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
      }
      [data-theme="dark"] .sb-compose {
        box-shadow: 0 10px 32px rgba(0,0,0,0.35);
      }
      .sb-compose-titlebar {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 10px 14px;
        background: color-mix(in srgb, var(--sb-ink) 92%, #000);
        color: #fff;
      }
      .sb-compose-titlebar-left {
        display: flex; align-items: center; gap: 10px; min-width: 0;
      }
      .sb-compose-gmail-mark {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; border-radius: 8px;
        background: #fff; color: #ea4335; flex-shrink: 0;
      }
      .sb-compose-gmail-mark svg { display: block; }
      .sb-compose-title {
        font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .sb-compose-title-sub {
        font-size: 11px; opacity: 0.72; font-weight: 500;
      }
      .sb-compose-titlebar-actions {
        display: flex; align-items: center; gap: 4px; flex-shrink: 0;
      }
      .sb-compose-icon-btn {
        border: none; background: transparent; color: rgba(255,255,255,0.85);
        width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        font-family: inherit; font-size: 12px; font-weight: 700;
      }
      .sb-compose-icon-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
      .sb-compose-fields {
        display: flex; flex-direction: column;
        border-bottom: 1px solid var(--border);
        background: var(--panel);
      }
      .sb-compose-row {
        display: grid;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        padding: 8px 14px;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
        min-height: 40px;
      }
      .sb-compose-row:last-child { border-bottom: none; }
      .sb-compose-label {
        font-size: 12px; font-weight: 600; color: var(--muted);
      }
      .sb-compose-value {
        font-size: 13px; font-weight: 600; color: var(--text);
        min-width: 0; word-break: break-word;
      }
      .sb-compose-value.is-missing { color: var(--danger); }
      .sb-compose-value.is-muted { color: var(--muted); font-weight: 500; }
      .sb-from-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
      .sb-from-chip {
        border: 1px solid var(--border); background: var(--input-bg); color: var(--text);
        border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
        font-family: inherit;
      }
      .sb-from-chip.is-active { background: var(--sb-coral-soft); border-color: var(--sb-coral); color: var(--sb-coral); }
      .sb-from-chip:disabled { opacity: 0.45; cursor: not-allowed; }
      .sb-auto-cc {
        display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted);
        margin-left: 2px; user-select: none;
      }
      .sb-auto-cc input { accent-color: var(--sb-coral); }
      .sb-compose-files {
        padding: 0 14px;
        border-bottom: 1px solid var(--border);
        background: color-mix(in srgb, var(--input-bg) 55%, var(--panel));
      }
      .sb-compose-files:not(.has-files) { display: none; }
      .sb-file-list {
        display: flex; flex-wrap: wrap; gap: 6px;
        padding: 8px 0;
      }
      .sb-file-list:empty { display: none; }
      .sb-file-chip {
        display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
        padding: 5px 8px 5px 6px; border: 1px solid var(--border); border-radius: 8px;
        background: var(--panel); font-size: 12px; color: var(--text);
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      }
      .sb-file-chip-icon {
        width: 18px; height: 18px; color: #5f6368; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
      }
      .sb-file-chip-icon svg { width: 16px; height: 16px; }
      .sb-file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
      .sb-file-chip-size { color: var(--muted); flex-shrink: 0; font-size: 11px; }
      .sb-file-chip-remove {
        border: none; background: transparent; color: var(--muted); cursor: pointer;
        padding: 0 2px; font-size: 14px; line-height: 1;
      }
      .sb-file-chip-remove:hover { color: var(--danger); }
      .sb-file-hint { display: none; }
      .sb-file-error {
        font-size: 11px; color: var(--danger); line-height: 1.3;
        padding: 0 14px 8px;
      }
      .sb-file-error[hidden] { display: none !important; }
      .sb-compose-body {
        background: color-mix(in srgb, var(--sb-creme) 40%, var(--panel));
        padding: 12px;
        max-height: 52vh;
        overflow: auto;
      }
      .sb-compose-body .sb-paper {
        margin: 0;
        max-height: none;
        box-shadow: none;
        border-radius: 8px;
        padding: 12px;
      }
      .sb-compose-footer {
        display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
        padding: 10px 12px;
        border-top: 1px solid var(--border);
        background: var(--panel);
      }
      .sb-btn {
        border: 1px solid var(--border); background: var(--panel); color: var(--text);
        border-radius: 999px; padding: 8px 16px; font-size: var(--text-sm); font-weight: 700;
        cursor: pointer; font-family: inherit; transition: all .12s ease; white-space: nowrap;
      }
      .sb-btn:hover { border-color: var(--sb-coral); }
      .sb-btn:disabled { cursor: not-allowed; opacity: 0.55; }
      .sb-btn-primary {
        background: #1a73e8; border-color: #1a73e8; color: #fff;
        padding-left: 22px; padding-right: 22px;
      }
      .sb-btn-primary:hover:not(:disabled) { background: #1765cc; border-color: #1765cc; }
      .sb-btn-primary:disabled {
        background: color-mix(in srgb, #1a73e8 45%, var(--muted));
        border-color: transparent; color: #fff; opacity: 0.75;
      }
      .sb-btn.is-copied { background: var(--sb-coral); border-color: var(--sb-coral); color: #fff; }
      .sb-btn-paperclip {
        height: 40px; padding: 0 14px 0 10px; border-radius: 999px; gap: 6px;
        display: inline-flex; align-items: center; justify-content: center;
        color: #5f6368; border: 1px solid var(--border); background: var(--panel);
        font-size: 13px; font-weight: 700;
      }
      .sb-btn-paperclip:hover {
        background: color-mix(in srgb, #1a73e8 10%, var(--panel));
        border-color: color-mix(in srgb, #1a73e8 35%, var(--border));
        color: #1a73e8;
      }
      .sb-btn-paperclip svg { width: 20px; height: 20px; display: block; flex-shrink: 0; }
      .sb-btn-paperclip-label { line-height: 1; }
      .sb-btn-ghost {
        border: none; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600;
        padding: 6px 8px; cursor: pointer; font-family: inherit; border-radius: 8px;
      }
      .sb-btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--input-bg); }
      .sb-btn-ghost:disabled { cursor: not-allowed; opacity: 0.45; color: var(--muted); }
      /* v2.97.3 (Harris) — the rich-HTML Copy for the Harper-style v2
         submission email was a bare gray ghost word ("Copy") lost at the
         footer's edge. Now a coral-tinted pill with a copy icon, sized
         like Send/Attach, so the grab-the-formatted-email path is
         unmissable. .sb-btn.is-copied (2 classes) still out-ranks this
         for the solid-coral "✓ Copied" flash. */
      .sb-btn-copy {
        display: inline-flex; align-items: center; gap: 7px;
        height: 40px; padding: 0 16px 0 13px;
        background: color-mix(in srgb, var(--sb-coral) 12%, var(--panel));
        border-color: color-mix(in srgb, var(--sb-coral) 45%, var(--border));
        color: var(--sb-coral);
      }
      .sb-btn-copy:hover:not(:disabled) {
        background: color-mix(in srgb, var(--sb-coral) 22%, var(--panel));
        border-color: var(--sb-coral);
      }
      .sb-btn-copy:disabled {
        background: var(--panel);
        border-color: var(--border);
        color: var(--muted);
        opacity: 0.55;
      }
      .sb-btn-copy svg { width: 17px; height: 17px; display: block; flex-shrink: 0; }
      .sb-btn-copy-label { line-height: 1; white-space: nowrap; }
      .sb-compose-spacer { flex: 1; min-width: 8px; }
      .sb-send-hint {
        font-size: 11px; color: var(--muted); margin: 8px 2px 0; line-height: 1.35;
      }
      .sb-send-hint.is-warn { color: var(--danger); }
      /* legacy ids kept for JS; hide old subject bar if present */
      .sb-subject-bar { display: none !important; }
      .sb-paper {
        background: color-mix(in srgb, var(--sb-creme) 55%, #eef1f4);
        border: 1px solid color-mix(in srgb, var(--sb-coral) 12%, var(--border));
        border-radius: 14px;
        padding: 18px;
        box-shadow: var(--shadow-sm);
        max-height: 72vh; overflow: auto;
      }
      .sb-paper > div { margin: 0 auto; }

      /* Direct Hub bubbles (Messages) carry their own ★ pin — hover
         reveal in the top-right of the circle (v2.82.1). */
      .lv2-hub-bubbles .lv2-bubble.has-pin { position: relative; }
      .lv2-bubble-pin {
        position: absolute;
        top: 10px;
        right: 14px;
        width: 27px;
        height: 27px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--lv2-border);
        background: var(--lv2-surface-hi);
        color: var(--lv2-sub);
        font-size: 13px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
        opacity: 0;
        transform: scale(0.7);
        transition: opacity 0.12s ease, transform 0.12s ease, color 0.12s ease;
      }
      .lv2-bubble:hover .lv2-bubble-pin,
      .lv2-bubble-pin.is-pinned,
      .lv2-bubble-pin:focus-visible {
        opacity: 1;
        transform: scale(1);
      }
      .lv2-bubble-pin:hover { color: var(--lv2-coral); border-color: var(--lv2-coral); }
      .lv2-bubble-pin.is-pinned { color: var(--lv2-coral); }

      /* ================================================================
         Messages — Quo texting inbox (v2.82.0). iMessage look: two-pane
         chat, gray incoming / blue outgoing bubbles, day separators,
         centered call rows, pill compose bar. Colors ride the theme vars
         except the signature iMessage blue.
         ================================================================ */
      .msgs-wrap {
        display: flex;
        height: calc(100vh - 168px);
        min-height: 440px;
        border: 1px solid var(--border);
        border-radius: 16px;
        overflow: hidden;
        background: var(--modal-surface);
        box-shadow: var(--shadow-sm);
      }
      .msgs-list {
        width: 340px;
        min-width: 260px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--border);
        background: color-mix(in srgb, var(--panel) 60%, transparent);
      }
      .msgs-list-head { padding: 12px 12px 8px; }
      .msgs-list-title {
        font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
        margin: 0 0 8px 2px; color: var(--section-title);
        display: flex; align-items: baseline; gap: 8px;
      }
      .msgs-list-sub { font-size: 11px; font-weight: 500; color: var(--muted); }
      .msgs-search {
        width: 100%; box-sizing: border-box;
        padding: 7px 12px; border-radius: 999px;
        border: 1px solid var(--border); background: var(--input-bg);
        color: var(--text); font: inherit; font-size: 13px;
      }
      .msgs-search:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
      .msgs-pills {
        display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto;
        scrollbar-width: none; flex-shrink: 0;
      }
      .msgs-pills::-webkit-scrollbar { display: none; }
      .msgs-pill {
        border: 1px solid var(--border); background: transparent;
        color: var(--muted); font: inherit; font-size: 12px; font-weight: 650;
        padding: 4px 11px; border-radius: 999px; cursor: pointer;
        white-space: nowrap; flex-shrink: 0;
      }
      .msgs-pill:hover { color: var(--text); border-color: var(--accent); }
      .msgs-pill.is-on {
        background: #0a84ff; border-color: #0a84ff; color: #fff;
      }
      .msgs-items { flex: 1; overflow-y: auto; padding: 0 6px 10px; }
      .msgs-empty {
        padding: 28px 18px; text-align: center; color: var(--muted);
        font-size: 13px; line-height: 1.5;
      }
      .msgs-item {
        display: flex; align-items: center; gap: 10px;
        width: 100%; text-align: left; border: none; background: transparent;
        padding: 10px 10px; border-radius: 12px; cursor: pointer;
        color: var(--text); font: inherit;
      }
      .msgs-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
      .msgs-item.is-open { background: #0a84ff; color: #fff; }
      .msgs-item.is-open .msgs-item-prev,
      .msgs-item.is-open .msgs-item-time,
      .msgs-item.is-open .msgs-item-chip { color: rgba(255, 255, 255, 0.85); }
      .msgs-item.is-open .msgs-item-chip { border-color: rgba(255, 255, 255, 0.45); }
      .msgs-dot {
        width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
        background: #0a84ff;
      }
      .msgs-item.is-open .msgs-dot { background: #fff; }
      .msgs-dot.is-read { background: transparent; }
      .msgs-ava {
        width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 15px; font-weight: 700; color: #fff;
        background: linear-gradient(180deg, #9ba3af, #6b7280);
      }
      .msgs-item-main { flex: 1; min-width: 0; }
      .msgs-item-top { display: flex; align-items: baseline; gap: 8px; }
      .msgs-item-name {
        flex: 1; min-width: 0; font-size: 14px; font-weight: 700;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .msgs-item-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
      .msgs-item-prev {
        font-size: 12.5px; color: var(--muted); margin-top: 1px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .msgs-item-prev.is-call { font-style: italic; }
      .msgs-item-chip {
        display: inline-block; margin-top: 3px;
        font-size: 10px; font-weight: 700; color: var(--muted);
        border: 1px solid var(--border); border-radius: 999px;
        padding: 1px 7px; letter-spacing: 0.02em;
      }
      /* Thread pane */
      .msgs-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; }
      .msgs-thread-head {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 14px; border-bottom: 1px solid var(--border);
        background: color-mix(in srgb, var(--panel) 60%, transparent);
        flex-shrink: 0; flex-wrap: wrap;
      }
      .msgs-head-main { flex: 1; min-width: 160px; }
      .msgs-head-name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
      .msgs-head-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
      .msgs-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
      .msgs-assign-btn {
        border: 1px solid #0a84ff; background: transparent; color: var(--lb-blue-text, #0a84ff);
        font: inherit; font-size: 12px; font-weight: 700;
        padding: 5px 12px; border-radius: 999px; cursor: pointer;
      }
      .msgs-assign-btn:hover { background: rgba(10, 132, 255, 0.12); }
      /* v2.83.0 — Call (green, iMessage-style), rename pencil, attachment note */
      .msgs-call-btn { border-color: var(--lb-ok-text, #30d158); color: var(--lb-ok-text, #30d158); }
      .msgs-call-btn:hover { background: rgba(48, 209, 88, 0.12); }
      .msgs-rename-btn {
        border: none; background: transparent; color: var(--muted);
        font: inherit; font-size: 12px; cursor: pointer; padding: 0 4px;
        opacity: 0.55; vertical-align: 1px;
      }
      .msgs-rename-btn:hover { opacity: 1; color: var(--lb-blue-text, #0a84ff); }
      /* v2.83.1 — inline rename editor (replaces the browser prompt) */
      .msgs-name-input {
        border: 1px solid #0a84ff; background: var(--input-bg);
        color: var(--text); font: inherit; font-size: 14px; font-weight: 700;
        padding: 3px 10px; border-radius: 8px; width: 230px;
      }
      .msgs-name-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18); }
      .msgs-name-save, .msgs-name-cancel {
        border: 1px solid var(--border); background: var(--input-bg);
        color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
        width: 26px; height: 26px; border-radius: 50%; padding: 0;
        margin-left: 4px; vertical-align: 1px;
      }
      .msgs-name-save { border-color: var(--lb-ok-text, #30d158); color: var(--lb-ok-text, #30d158); }
      .msgs-name-save:hover { background: rgba(48, 209, 88, 0.12); }
      .msgs-name-cancel:hover { background: rgba(251, 113, 133, 0.12); }
      .msgs-attach-note { font-style: italic; opacity: 0.75; font-size: 12.5px; }
      /* v2.83.0 — compose (new text) */
      .msgs-compose-btn {
        margin-left: auto; border: none; cursor: pointer;
        width: 30px; height: 30px; border-radius: 9px;
        background: rgba(10, 132, 255, 0.14); color: var(--lb-blue-text, #0a84ff);
        font: inherit; font-size: 15px; line-height: 1;
        /* v2.93.3 — flex-center the ✎ glyph (it sat off-center on the
           button's default text baseline). */
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0;
      }
      .msgs-compose-btn:hover { background: rgba(10, 132, 255, 0.24); }
      .msgs-compose-to {
        display: flex; align-items: center; gap: 6px;
        font-size: 13px; color: var(--muted); margin: 2px 0;
      }
      .msgs-to-input {
        border: 1px solid var(--border); background: var(--input-bg);
        color: var(--text); font: inherit; font-size: 13px;
        padding: 4px 10px; border-radius: 999px; width: 190px;
      }
      .msgs-to-input:focus { outline: none; border-color: #0a84ff; }
      .msgs-assign-select {
        border: 1px solid var(--border); background: var(--input-bg);
        color: var(--text); font: inherit; font-size: 12px; font-weight: 600;
        padding: 5px 8px; border-radius: 999px; cursor: pointer; max-width: 170px;
      }
      .msgs-open-policy {
        border: 1px solid var(--border); background: transparent; color: var(--muted);
        font: inherit; font-size: 12px; font-weight: 650;
        padding: 5px 12px; border-radius: 999px; cursor: pointer;
      }
      .msgs-open-policy:hover { color: var(--text); border-color: var(--accent); }
      .msgs-scroll { flex: 1; overflow-y: auto; padding: 14px 16px 8px; }
      .msgs-day {
        text-align: center; font-size: 11px; font-weight: 650; color: var(--muted);
        margin: 14px 0 6px;
      }
      .msgs-row { display: flex; margin: 2px 0; }
      .msgs-row.out { justify-content: flex-end; }
      .msgs-meta {
        font-size: 10.5px; color: var(--muted); margin: 8px 6px 2px;
      }
      .msgs-row-meta { display: flex; }
      .msgs-row-meta.out { justify-content: flex-end; }
      .msg-bubble {
        max-width: 68%;
        padding: 8px 13px;
        border-radius: 18px;
        font-size: 14px;
        line-height: 1.35;
        white-space: pre-wrap;
        word-break: break-word;
      }
      .msg-bubble.in {
        background: color-mix(in srgb, var(--text) 10%, var(--modal-surface));
        color: var(--text);
        border-bottom-left-radius: 5px;
      }
      .msg-bubble.out {
        background: #0a84ff;
        color: #fff;
        border-bottom-right-radius: 5px;
      }
      .msg-bubble.is-failed { opacity: 0.55; outline: 1px dashed var(--danger); }
      .msgs-callrow {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        font-size: 12px; color: var(--muted); margin: 10px 0;
      }
      .msgs-callrow .msgs-call-missed { color: var(--danger); font-weight: 650; }
      /* Compose */
      .msgs-compose {
        display: flex; align-items: flex-end; gap: 8px;
        padding: 10px 14px 12px; border-top: 1px solid var(--border);
        flex-shrink: 0;
      }
      .msgs-input {
        flex: 1; resize: none; box-sizing: border-box;
        min-height: 36px; max-height: 120px;
        padding: 8px 14px; border-radius: 18px;
        border: 1px solid var(--border); background: var(--input-bg);
        color: var(--text); font: inherit; font-size: 14px; line-height: 1.35;
      }
      .msgs-input:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
      .msgs-send {
        width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
        border: none; background: #0a84ff; color: #fff;
        font-size: 17px; font-weight: 800; line-height: 1;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
      }
      .msgs-send:hover:not(:disabled) { background: #0074e0; }
      .msgs-send:disabled { background: color-mix(in srgb, var(--muted) 40%, transparent); cursor: not-allowed; }
      .msgs-send-note {
        font-size: 11px; color: var(--muted); text-align: center;
        padding: 6px 14px 10px; border-top: 1px solid var(--border);
      }
      .msgs-testmode {
        background: color-mix(in srgb, #fbbf24 18%, var(--modal-surface));
        color: var(--text); font-size: 11.5px; font-weight: 600;
        padding: 6px 14px; text-align: center;
        border-top: 1px solid color-mix(in srgb, #fbbf24 45%, var(--border));
      }
      .msgs-thread-empty {
        flex: 1; display: flex; align-items: center; justify-content: center;
        color: var(--muted); font-size: 14px; text-align: center; padding: 24px;
      }
      @media (max-width: 900px) {
        .msgs-wrap { flex-direction: column; height: auto; }
        .msgs-list { width: 100%; max-height: 42vh; border-right: none; border-bottom: 1px solid var(--border); }
        .msgs-thread { min-height: 50vh; }
      }

      /* v2.313.0 — pre-boot flash guard. Set from the <head> script in the
         shell when the URL deep-links to a non-Tickets tab (?tab=pipeline
         from the Next Submissions shell, etc.): the Tickets board is the
         default-visible markup, so without this it flashes empty for the
         whole boot. renderWithTab removes the class on its first pass. */
      html.lb-preboot-nontickets .panel.hero .filters,
      html.lb-preboot-nontickets .panel.hero > .row,
      html.lb-preboot-nontickets #tableWrap {
        display: none !important;
      }