:root {
    /* Theme-independent tokens */
    --radius: 8px;
    --radius-lg: 12px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  /* ===== DARK THEME (default) ===== */
  :root,
  [data-theme="dark"] {
    /* Surfaces */
    --bg: #0c0e12;
    --bg-elev: #14171e;
    --bg-elev-2: #1a1e26;
    --bg-elev-3: #232832;
    --border: #2a2f3a;
    --border-strong: #353b48;

    /* Text */
    --text: #e8eaf0;
    --text-dim: #9aa0ad;
    --text-faint: #6b7280;

    /* Brand & accents — amber/gold is the primary */
    --accent: #e0b341;             /* amber primary fills (CTAs, brand) — same in both modes */
    --accent-hover: #f0c356;
    --accent-ink: #e0b341;         /* accent used as TEXT / borders */
    --on-accent: #1a1300;          /* text/icon sitting ON an amber fill */
    --accent-soft: rgba(224, 179, 65, 0.12);
    --accent-strong: rgba(224, 179, 65, 0.22);

    /* Brand green — drawn from the logo leaf */
    --brand-green: #5fa87f;
    --brand-green-soft: rgba(95, 168, 127, 0.16);

    /* Card lift — dark mode relies on borders, no shadow needed */
    --shadow-card: none;
    --shadow-card-hover: none;

    /* Semantic */
    --info: #60a5fa;
    --info-soft: rgba(96, 165, 250, 0.14);
    --success: #34d399;
    --success-soft: rgba(52, 211, 153, 0.14);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.14);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.14);

    /* Semantic-as-text tints (legible variants for coloured labels) */
    --info-text: #93c5fd;
    --success-text: #6ee7b7;
    --warning-text: #fbbf24;
    --danger-text: #fca5a5;
    --role-manager-text: #c4b5fd;
    --role-manager-bg: rgba(196, 181, 253, 0.15);
    --role-rep-text: #93c5fd;
    --role-rep-bg: rgba(96, 165, 250, 0.15);
    --violet-text: #c0a0ff;
    --indigo-text: #93b0ff;

    /* Stage / source palette — saturated, semantic, matching the original app feel */
    --stage-discovery: #a78bfa;       /* vivid violet — early stage */
    --stage-discovery-bg: rgba(167, 139, 250, 0.16);
    --stage-email: #818cf8;           /* indigo — email sent, in motion */
    --stage-email-bg: rgba(129, 140, 248, 0.16);
    --stage-chaser: #fbbf24;          /* amber — needs attention */
    --stage-chaser-bg: rgba(251, 191, 36, 0.16);
    --stage-callback: #22d3ee;        /* cyan — scheduled */
    --stage-callback-bg: rgba(34, 211, 238, 0.16);
    --stage-epvs: #fb923c;            /* orange — closing */
    --stage-epvs-bg: rgba(251, 146, 60, 0.16);
    --stage-won: #4ade80;             /* punchy mint — winning */
    --stage-won-bg: rgba(74, 222, 128, 0.16);
    --stage-lost: #fb7185;            /* punchy rose — lost */
    --stage-lost-bg: rgba(251, 113, 133, 0.16);

    --source-bg: #60a5fa;             /* British Gas — blue */
    --source-bg-bg: rgba(96, 165, 250, 0.16);
    --source-fresh: #c084fc;          /* Fresh — vivid purple */
    --source-fresh-bg: rgba(192, 132, 252, 0.16);
    --source-referrals: #f472b6;      /* Referrals — punchy pink */
    --source-referrals-bg: rgba(244, 114, 182, 0.16);
  }

  /* ===== LIGHT THEME ===== */
  [data-theme="light"] {
    /* Surfaces — soft warm grey-white. The PAGE is slightly darker than the
       CARDS so panels lift off the background instead of blending into it.
       Cools off the yellow cast of the old palette to ease eye strain. */
    --bg: #ecebe6;          /* page — soft warm grey, recedes behind cards */
    --bg-elev: #f7f6f2;     /* cards/panels — lighter than the page, sits forward */
    --bg-elev-2: #fdfcfa;   /* inputs / nested surfaces — nearly white, calm */
    --bg-elev-3: #e8e6df;   /* pressed / active rows — gentle step down */
    --border: #e0ddd4;      /* soft, low-contrast hairline */
    --border-strong: #cdc9bd;

    /* Text — warm dark slate, NOT pure black; dimmed tiers softened so the
       page doesn't shout. */
    --text: #2b3038;        /* primary — dark slate, easy on the eyes */
    --text-dim: #6a7079;
    --text-faint: #9aa0a8;

    /* Brand & accents — amber FILL stays identical; accent-as-text deepened for AA */
    --accent: #e0b341;             /* fills unchanged so brand gold reads true */
    --accent-hover: #cda233;
    --accent-ink: #9c7209;         /* deep gold — legible as text/borders on light */
    --on-accent: #2b2200;          /* warm near-black on amber fill */
    --accent-soft: rgba(224, 179, 65, 0.14);
    --accent-strong: rgba(224, 179, 65, 0.22);

    /* Brand green — from the logo leaf, balanced for light */
    --brand-green: #3f8d6c;
    --brand-green-soft: rgba(63, 141, 108, 0.12);

    /* Card lift — soft shadow so panels float above the page */
    --shadow-card: 0 1px 2px rgba(43, 48, 56, 0.04), 0 2px 8px rgba(43, 48, 56, 0.05);
    --shadow-card-hover: 0 2px 4px rgba(43, 48, 56, 0.06), 0 6px 16px rgba(43, 48, 56, 0.08);

    /* Semantic — slightly desaturated so they read calm, not neon */
    --info: #3066c4;
    --info-soft: rgba(48, 102, 196, 0.10);
    --success: #2f8a52;
    --success-soft: rgba(47, 138, 82, 0.10);
    --warning: #b06a1a;
    --warning-soft: rgba(176, 106, 26, 0.10);
    --danger: #d04545;
    --danger-soft: rgba(208, 69, 69, 0.10);

    /* Semantic-as-text tints — readable but not harsh on the soft background */
    --info-text: #3066c4;
    --success-text: #2f8a52;
    --warning-text: #b06a1a;
    --danger-text: #d04545;
    --role-manager-text: #7a52c4;
    --role-manager-bg: rgba(122, 82, 196, 0.10);
    --role-rep-text: #3066c4;
    --role-rep-bg: rgba(48, 102, 196, 0.10);
    --violet-text: #7a52c4;
    --indigo-text: #5258c4;

    /* Stage / source palette — muted hues; soft 10% tints */
    --stage-discovery: #7a52c4;
    --stage-discovery-bg: rgba(122, 82, 196, 0.10);
    --stage-email: #5258c4;
    --stage-email-bg: rgba(82, 88, 196, 0.10);
    --stage-chaser: #b06a1a;
    --stage-chaser-bg: rgba(176, 106, 26, 0.10);
    --stage-callback: #1f7d92;
    --stage-callback-bg: rgba(31, 125, 146, 0.10);
    --stage-epvs: #c0561f;
    --stage-epvs-bg: rgba(192, 86, 31, 0.10);
    --stage-won: #2f8a52;
    --stage-won-bg: rgba(47, 138, 82, 0.10);
    --stage-lost: #c0445c;
    --stage-lost-bg: rgba(192, 68, 92, 0.10);

    --source-bg: #3066c4;
    --source-bg-bg: rgba(48, 102, 196, 0.10);
    --source-fresh: #9148c4;
    --source-fresh-bg: rgba(145, 72, 196, 0.10);
    --source-referrals: #c43f86;
    --source-referrals-bg: rgba(196, 63, 134, 0.10);
  }

  /* ===== LIGHT THEME refinements — soft card lift so panels float ===== */
  [data-theme="light"] .stat-card,
  [data-theme="light"] .install-stat-card,
  [data-theme="light"] .reminder-card,
  [data-theme="light"] .comms-card,
  [data-theme="light"] .auth-card,
  [data-theme="light"] .form-section,
  [data-theme="light"] .install-pay-card,
  [data-theme="light"] .ytd-card,
  [data-theme="light"] .install-table-wrap,
  [data-theme="light"] .reminders-section {
    box-shadow: var(--shadow-card);
  }
  [data-theme="light"] .stat-card:hover,
  [data-theme="light"] .install-stat-card:hover,
  [data-theme="light"] .reminder-card:hover,
  [data-theme="light"] .lead-card:hover,
  [data-theme="light"] .install-pay-card:hover {
    box-shadow: var(--shadow-card-hover);
  }
  /* Lead cards lift too, but they already animate on hover — give a resting lift */
  [data-theme="light"] .lead-card { box-shadow: var(--shadow-card); }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  main { min-height: 100vh; display: flex; flex-direction: column; }

  /* Auth screens (login, register, gates) */
  .auth-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
  }
  .auth-card h1 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
  }
  .auth-card .subtitle {
    margin: 0 0 24px;
    color: var(--text-dim);
    font-size: 14px;
  }
  .auth-card .brand {
    color: var(--text-faint);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }

  .field { margin-bottom: 16px; }
  .field label {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 6px;
  }
  .field input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.15s;
  }
  .field input:focus {
    outline: none;
    border-color: var(--accent);
  }

  .btn {
    display: inline-block;
    width: 100%;
    padding: 11px 16px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    color: var(--on-accent);            /* near-black on amber for AAA contrast */
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    letter-spacing: 0.01em;
  }
  .btn:hover:not(:disabled) { background: var(--accent-hover); }
  .btn:active:not(:disabled) { transform: translateY(1px); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn.secondary {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-weight: 500;
  }
  .btn.secondary:hover:not(:disabled) {
    background: var(--bg-elev-2);
    border-color: var(--text-faint);
  }
  .btn.ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    font-weight: 500;
  }
  .btn.ghost:hover:not(:disabled) {
    color: var(--text);
    background: var(--bg-elev-2);
  }
  .btn.danger {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--danger);
    font-weight: 500;
  }
  .btn.danger:hover:not(:disabled) {
    background: var(--danger-soft);
    border-color: var(--danger);
  }
  .btn.sm { padding: 6px 12px; font-size: 13px; }

  .auth-footer {
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-dim);
    text-align: center;
  }
  .auth-footer a { color: var(--accent); text-decoration: none; cursor: pointer; }
  .auth-footer a:hover { text-decoration: underline; }

  .alert {
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 16px;
  }
  .alert.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger-text);
  }
  .alert.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--success-text);
  }
  .alert.info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--info-text);
  }

  /* Loading screen */
  .loading-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 14px;
  }

  /* Authenticated placeholder (Phase 4 lands here) */
  /* App shell — modelled on the existing app's brand layout */
  .app-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 32px 64px;
  }

  .app-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    padding-bottom: 0;
  }
  .brand-block { display: flex; flex-direction: column; gap: 4px; }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .brand-mark {
    color: var(--accent);
    font-size: 22px;
    line-height: 1;
  }
  .brand-tagline {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--text-faint);
    text-transform: uppercase;
    margin-left: 32px;
    font-weight: 500;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .sync-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-dim);
  }
  .sync-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-soft);
  }
  .sync-pill .lead-count {
    color: var(--text);
    font-weight: 500;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
  }
  .user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text);
  }
  .user-chip .name { color: var(--text-dim); }

  .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .badge.role-admin   { background: var(--accent-soft); color: var(--accent); }
  .badge.role-manager { background: var(--role-manager-bg); color: var(--role-manager-text); }
  .badge.role-rep     { background: var(--role-rep-bg); color: var(--role-rep-text); }

  /* Tabs */
  .tabs {
    display: flex;
    gap: 4px;
    margin: 32px 0 24px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;            /* Firefox */
  }
  .tabs::-webkit-scrollbar { display: none; }   /* Chrome/Safari/Edge */
  .tab {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 18px;
    cursor: pointer;
    position: relative;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s;
    white-space: nowrap;
  }
  .tab:hover { color: var(--text); }
  .tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
  .tab .tab-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    background: var(--bg-elev-2);
    color: var(--text-dim);
  }
  .tab.active .tab-badge {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .placeholder {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 32px;
    text-align: center;
    color: var(--text-dim);
  }
  .placeholder h2 { color: var(--text); margin: 0 0 8px; font-size: 18px; }
  .placeholder p { margin: 4px 0; }
  .placeholder .meta {
    margin-top: 20px;
    font-size: 12px;
    color: var(--text-faint);
    font-family: var(--font-mono);
  }

  /* Header link button (Settings, Sign out) */
  .header-link {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
  }
  .header-link:hover { color: var(--text); background: var(--bg-elev); }
  .header-link.danger { color: var(--danger); }
  .header-link.danger:hover { background: var(--danger-soft); }

  .theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
  }
  .theme-toggle:hover { background: var(--bg-elev); border-color: var(--border-strong); }
  .theme-toggle:active { transform: scale(0.94); }

  .theme-seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .theme-seg-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 7px;
    transition: background 0.15s, color 0.15s;
  }
  .theme-seg-btn:hover { color: var(--text); }
  .theme-seg-btn.active {
    background: var(--accent);
    color: var(--on-accent);
  }

  /* Gate screen icon */
  .gate-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
  }
  .gate-icon.pending { background: rgba(245, 158, 11, 0.15); color: var(--warning-text); }
  .gate-icon.disabled { background: rgba(239, 68, 68, 0.15); color: var(--danger-text); }
  .gate-icon.subscription { background: rgba(59, 130, 246, 0.15); color: var(--info-text); }

  .gate-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
  }
  .gate-actions .btn { flex: 1; }

  /* Onboarding / Settings form */
  .form-shell {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 0;
  }
  .form-shell h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
  }
  .form-shell .lede {
    margin: 0 0 28px;
    color: var(--text-dim);
  }
  .form-section {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 16px;
  }
  .form-section h3 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
  }
  .form-section .help {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-faint);
  }
  .form-row {
    display: flex;
    gap: 12px;
  }
  .form-row > .field { flex: 1; }
  .field select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
  }
  .field select:focus { outline: none; border-color: var(--accent); }
  .input-prefix {
    position: relative;
  }
  .input-prefix .prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    font-size: 14px;
    pointer-events: none;
  }
  .input-prefix input {
    padding-left: 26px;
  }
  .checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
  }
  .checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
  }
  .checkbox-row .desc {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 2px;
  }
  .form-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
  }
  .form-footer .btn { width: auto; min-width: 140px; }

  /* Toolbar — top of each tab content area, holds primary CTA + count + filter */
  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* Segmented sort toggle (Pipeline) */
  .seg-toggle {
    display: inline-flex;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px;
    gap: 2px;
  }
  .seg-toggle button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
  }
  .seg-toggle button:hover { color: var(--text); }
  .seg-toggle button.active {
    background: var(--accent-soft);
    color: var(--accent);
  }

  /* Stat card row — used on Pipeline and Installations tabs */
  .stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
  }
  .stat-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
  }
  .stat-card .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    font-weight: 600;
  }
  .stat-card .value {
    font-size: 24px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--text);
    font-family: var(--font-mono);
  }
  .stat-card.success .value { color: var(--success); }
  .stat-card.warning .value { color: var(--warning); }
  .stat-card.danger  .value { color: var(--danger); }
  .stat-card.info    .value { color: var(--info); }
  .stat-card.accent  .value { color: var(--accent); }

  /* Empty state inside cards/tabs */
  .empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-dim);
  }
  .empty-state .icon { font-size: 32px; margin-bottom: 12px; opacity: 0.7; }
  .empty-state h3 { margin: 0 0 6px; color: var(--text); font-size: 16px; font-weight: 600; }
  .empty-state p { margin: 0; font-size: 13px; }

  /* Section header */
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 12px;
  }
  .section-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
  }
  .section-header .accent { color: var(--accent); }
  /* =========================================================================
   * PIPELINE TAB
   * ========================================================================= */

  /* Reminders section */
  .reminders-section {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-lg);
    padding: 16px 20px 12px;
    margin-bottom: 24px;
  }
  .reminders-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--warning);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
  }
  .reminder-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
  }
  .reminder-card:first-of-type { border-top: none; padding-top: 4px; }
  .reminder-info { flex: 1; min-width: 0; }
  .reminder-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .reminder-name {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
  }
  .reminder-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .reminder-status.overdue { background: var(--danger-soft); color: var(--danger); }
  .reminder-status.today   { background: var(--warning-soft); color: var(--warning); }

  /* Card-level reminder badge (Pipeline lead cards) */
  .reminder-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .reminder-badge.overdue   { background: var(--danger-soft);  color: var(--danger); }
  .reminder-badge.today     { background: var(--warning-soft); color: var(--warning); }
  .reminder-badge.scheduled { background: var(--accent-soft);  color: var(--accent); }
  .reminder-heat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--text-dim);
    font-family: var(--font-mono);
  }
  .reminder-note {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .reminder-meta {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 6px;
  }
  .reminder-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 14px;
  }
  .icon-btn:hover { background: var(--bg-elev-3); color: var(--text); }
  .icon-btn.success { color: var(--success); }
  .icon-btn.success:hover { background: var(--success-soft); border-color: var(--success); }

  /* Search bar */
  .search-bar {
    position: relative;
    flex: 1;
    max-width: 480px;
  }
  .search-bar input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
  }
  .search-bar input:focus { outline: none; border-color: var(--accent); }
  .search-bar .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    font-size: 14px;
    pointer-events: none;
  }

  /* Stage stat cards — different colour per stage */
  .stage-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
  }
  .stage-stat {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
  }
  .stage-stat:hover { border-color: var(--text-faint); }
  .stage-stat.active {
    background: var(--bg-elev-2);
    border-color: var(--accent);
  }
  .stage-stat .stage-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-faint);
    margin-bottom: 6px;
  }
  .stage-stat .stage-count {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-mono);
  }

  /* Lead grid */
  .lead-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
  }
  .lead-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lead-card:hover {
    border-color: var(--text-faint);
    transform: translateY(-1px);
  }
  .lead-card.no-hope { opacity: 0.5; }
  .lead-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
  }
  .lead-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
  }
  .lead-meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .lead-contact {
    font-size: 12px;
    color: var(--text-faint);
    line-height: 1.5;
  }
  .lead-contact div { word-break: break-all; }

  /* Source pills */
  .source-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .source-pill.british_gas { background: var(--source-bg-bg); color: var(--source-bg); }
  .source-pill.fresh       { background: var(--source-fresh-bg); color: var(--source-fresh); }
  .source-pill.referrals   { background: var(--source-referrals-bg); color: var(--source-referrals); }

  /* Stage pills */
  .stage-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .stage-pill.discovery_completed  { background: var(--stage-discovery-bg); color: var(--stage-discovery); }
  .stage-pill.post_discovery_email { background: var(--stage-email-bg); color: var(--stage-email); }
  .stage-pill.chaser               { background: var(--stage-chaser-bg); color: var(--stage-chaser); }
  .stage-pill.callback_scheduled   { background: var(--stage-callback-bg); color: var(--stage-callback); }
  .stage-pill.epvs_attempted       { background: var(--stage-epvs-bg); color: var(--stage-epvs); }
  .stage-pill.closed_won           { background: var(--stage-won-bg); color: var(--stage-won); }
  .stage-pill.closed_lost          { background: var(--stage-lost-bg); color: var(--stage-lost); }

  .heat-display {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-dim);
    font-family: var(--font-mono);
  }
  .heat-display .flame { color: var(--accent); }

  .lead-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-faint);
  }
  .lead-card-footer .last { display: inline-flex; align-items: center; gap: 4px; }

  /* Modal & detail panel */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .modal {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .modal-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
  .modal-close {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
  }
  .modal-close:hover { color: var(--text); background: var(--bg-elev-2); }
  .modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
  }
  .modal-footer .btn { width: auto; min-width: 110px; }

  /* PDF proposal upload drop zone */
  .pdf-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    color: var(--text-faint);
    font-size: 13px;
    transition: border-color .15s, background .15s;
  }
  .pdf-drop-zone:hover { border-color: var(--accent); background: rgba(224,179,65,.05); }
  .pdf-drop-zone--done { border-color: var(--accent); background: rgba(224,179,65,.07); }

  /* Detail panel — slides from right */
  .detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 560px;
    background: var(--bg-elev);
    border-left: 1px solid var(--border);
    z-index: 90;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0,0,0,0.4);
    animation: slide-in 0.18s ease-out;
  }
  @keyframes slide-in {
    from { transform: translateX(20px); opacity: 0.5; }
    to   { transform: translateX(0); opacity: 1; }
  }
  .detail-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 89;
  }
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
  }
  .detail-header h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
  .detail-header .contact-line { font-size: 13px; color: var(--text-dim); }
  .detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
  }
  .detail-section { margin-bottom: 24px; }
  .detail-section h3 {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
  }
  .detail-section .field { margin-bottom: 12px; }

  /* Notes preview chip — click to open popup */
  .notes-preview {
    position: relative;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 36px 10px 12px;
    min-height: 44px;
    max-height: 72px;
    overflow: hidden;
    cursor: pointer;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    transition: border-color 0.15s;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  }
  .notes-preview:hover { border-color: var(--accent); }
  .notes-preview.empty { color: var(--text-faint); font-style: italic; -webkit-mask-image: none; mask-image: none; }
  .notes-preview-icon {
    position: absolute;
    top: 10px; right: 10px;
    color: var(--text-faint);
    font-size: 14px;
    pointer-events: none;
  }

  /* Notes popup modal */
  .notes-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .notes-modal {
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    width: 100%; max-width: 540px;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.55);
    overflow: hidden;
  }
  .notes-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
  }
  .notes-modal-header h4 {
    margin: 0;
    font-size: 14px; font-weight: 600;
    color: var(--text);
  }
  .notes-modal-close {
    background: none; border: none;
    color: var(--text-faint); font-size: 20px;
    cursor: pointer; line-height: 1; padding: 0;
  }
  .notes-modal-close:hover { color: var(--text); }
  .notes-modal-body { padding: 16px 20px; }
  .notes-modal-body textarea {
    width: 100%; min-height: 220px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit; font-size: 14px;
    line-height: 1.6;
    padding: 12px;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s;
  }
  .notes-modal-body textarea:focus { outline: none; border-color: var(--accent); }
  .notes-history {
    padding: 0 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
  }
  .notes-history-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 2px;
  }
  .notes-history-entry {
    background: var(--bg-elev-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
  }
  .notes-history-entry .nhe-meta {
    font-size: 11px;
    color: var(--text-faint);
    margin-bottom: 4px;
  }
  .notes-history-entry .nhe-text {
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
  }
  .notes-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 8px;
  }

  /* Heat rating buttons (1–5) */
  .heat-rating {
    display: flex;
    gap: 6px;
  }
  .heat-btn {
    flex: 1;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-mono);
    transition: all 0.15s;
  }
  .heat-btn:hover { color: var(--text); }
  .heat-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }

  .eq-chip {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
  }
  .eq-chip:hover { color: var(--text); }
  .eq-chip.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }

  textarea.field-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 70px;
  }
  textarea.field-input:focus { outline: none; border-color: var(--accent); }

  /* Touchpoint logging */
  .touchpoint-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .touchpoint-btn {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: all 0.15s;
  }
  .touchpoint-btn:hover { color: var(--text); border-color: var(--text-faint); }

  /* Touchpoint history */
  .touchpoint-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .touchpoint-entry {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
  }
  .touchpoint-entry .type {
    font-weight: 600;
    color: var(--text);
    font-size: 12px;
    text-transform: capitalize;
  }
  .touchpoint-entry .when {
    font-size: 11px;
    color: var(--text-faint);
    font-family: var(--font-mono);
  }
  .touchpoint-entry .note {
    color: var(--text-dim);
    margin-top: 2px;
    word-break: break-word;
  }

  .detail-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
  }
  .detail-footer .left, .detail-footer .right { display: flex; gap: 8px; }

  /* Loading inline */
  .inline-loading {
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
    padding: 32px;
  }

  /* Filter dropdown */
  select.filter-select {
    padding: 8px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
  }
  select.filter-select:focus { outline: none; border-color: var(--accent); }

  /* =========================================================================
   * COMMS TAB
   * ========================================================================= */

  .comms-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    margin-top: 4px;
    min-height: 600px;
  }
  @media (max-width: 900px) {
    .comms-layout { grid-template-columns: 1fr; }
  }

  .comms-rail {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    max-height: 800px;
    overflow-y: auto;
  }
  .comms-rail-header {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    text-transform: uppercase;
    padding: 6px 8px 10px;
  }
  .comms-rail-search {
    margin-bottom: 8px;
  }
  .comms-rail-search input {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
  }
  .comms-rail-search input:focus { outline: none; border-color: var(--accent); }

  .comms-rail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
  }
  .comms-rail-item:hover { background: var(--bg-elev-2); }
  .comms-rail-item.active {
    background: var(--bg-elev-2);
    border-color: var(--accent);
  }
  .comms-rail-item .name {
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
  }
  .comms-rail-item .stage-pill {
    font-size: 9px;
    padding: 1px 6px;
    align-self: flex-start;
  }

  .comms-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .comms-empty {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 64px 32px;
    text-align: center;
    color: var(--text-dim);
  }
  .comms-empty .icon { font-size: 36px; margin-bottom: 12px; opacity: 0.6; }

  .comms-lead-header {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
  }
  .comms-lead-header h2 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
  }
  .comms-lead-header .contact {
    font-size: 13px;
    color: var(--text-dim);
  }
  .comms-lead-header .pills {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  /* Solar proposal panel on comms page */
  .comms-solar-panel {
    background: var(--bg-elev);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
  }
  .comms-solar-panel-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--accent);
    margin-bottom: 10px;
  }
  .comms-solar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 16px;
  }
  .comms-solar-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .comms-solar-item .label {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .comms-solar-item .value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }
  .comms-solar-item .value.accent { color: var(--accent); }

  .comms-actions {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
  }
  .comms-actions h3 {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
  }
  .comms-actions .help {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-faint);
  }
  .comms-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
  }
  .comms-action-btn {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .comms-action-btn:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--bg-elev-3);
  }
  .comms-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .comms-action-btn .label { font-weight: 600; color: var(--text); }
  .comms-action-btn .desc { font-size: 11px; color: var(--text-faint); }
  .comms-action-btn.primary {
    background: var(--accent-soft);
    border-color: var(--accent);
  }
  .comms-action-btn.primary .label { color: var(--accent); }

  .comms-custom {
    margin-top: 12px;
    display: flex;
    gap: 8px;
  }
  .comms-custom input {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
  }
  .comms-custom input:focus { outline: none; border-color: var(--accent); }

  .comms-result {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 1100px) {
    .comms-result { grid-template-columns: 1fr; }
  }

  /* Why this draft works — insights from winning-email few-shot */
  .comms-insights {
    margin-top: 16px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .comms-insights-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; cursor: pointer;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--border);
    user-select: none;
  }
  .comms-insights-header:hover { background: var(--accent-strong); }
  .comms-insights-header h5 {
    margin: 0; color: var(--accent); font-size: 0.88rem;
    font-weight: 700; letter-spacing: 0.02em;
  }
  .comms-insights-toggle { color: var(--text-dim); font-size: 0.78rem; }
  .comms-insights-intro {
    margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-dim);
    padding: 12px 14px; background: var(--bg-elev-2);
    border-radius: var(--radius); border-left: 2px solid var(--accent);
  }
  .comms-insights-caption {
    margin: -4px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--text-faint);
  }
  .comms-insights-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
  .comms-insights-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
  }
  .comms-insights-stat {
    background: var(--bg-elev-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px 14px;
  }
  .comms-insights-stat .label {
    font-size: 0.7rem; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
  }
  .comms-insights-stat .value {
    font-size: 1.1rem; font-weight: 700; color: var(--text);
  }
  .comms-insights-section h6 {
    margin: 0 0 8px; font-size: 0.75rem; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  }
  .comms-insights-openers {
    display: flex; flex-direction: column; gap: 6px;
  }
  .comms-insights-opener {
    font-size: 0.85rem; color: var(--text); font-style: italic;
    padding: 6px 12px; background: var(--bg-elev-2); border-radius: var(--radius);
    border-left: 2px solid var(--accent);
  }
  button.comms-insights-opener.is-clickable {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; text-align: left; font-family: inherit; cursor: pointer;
    border-top: none; border-right: none; border-bottom: none;
    transition: background 0.15s, border-color 0.15s;
  }
  button.comms-insights-opener.is-clickable:hover {
    background: var(--bg-elev-3); border-left-color: var(--accent);
  }
  .comms-insights-opener .opener-cue {
    font-style: normal; font-size: 0.72rem; font-weight: 600;
    color: var(--accent); white-space: nowrap; opacity: 0.85;
  }
  .winning-email-modal { max-width: 640px; }
  .winning-email-subject {
    font-size: 0.9rem; color: var(--text); font-weight: 600;
    padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
  }
  .winning-email-subject .wem-label {
    display: block; font-size: 0.68rem; font-weight: 700; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
  }
  .winning-email-body {
    font-size: 0.9rem; line-height: 1.6; color: var(--text);
    white-space: pre-wrap; word-wrap: break-word;
    max-height: 55vh; overflow-y: auto;
  }
  .comms-insights-markers {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .comms-insights-marker {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 14px;
    background: var(--bg-elev-2); border: 1px solid var(--border);
    font-size: 0.78rem; color: var(--text);
  }
  .comms-insights-marker .pct { color: var(--accent); font-weight: 700; }
  .comms-insights-empty {
    padding: 14px 20px; font-size: 0.83rem; color: var(--text-faint); font-style: italic;
  }
  .comms-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
  }
  .comms-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .comms-card-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .comms-card.whatsapp .comms-card-header h4 { color: var(--success); }
  .comms-subject {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .comms-body {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1;
    min-height: 200px;
    padding: 8px;
    background: var(--bg-elev-2);
    border-radius: 6px;
    border: 1px solid var(--border);
    font-family: var(--font);
  }
  .comms-body[contenteditable="true"]:focus {
    outline: none;
    border-color: var(--accent);
  }

  .comms-generating {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 32px;
    text-align: center;
    color: var(--text-dim);
  }
  .comms-generating .spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Copy button */
  .copy-btn {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    transition: all 0.15s;
  }
  .copy-btn:hover { color: var(--text); border-color: var(--text-faint); }
  .copy-btn.copied { color: var(--success); border-color: var(--success); }

  /* =========================================================================
   * Call Analysis tab
   * ========================================================================= */
  .call-wrap { max-width: 920px; margin: 0 auto; }
  .call-intro {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 18px;
  }
  .call-intro h2 { margin: 0 0 6px; color: var(--text); font-size: 18px; }
  .call-intro p { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.55; }
  .call-form {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
  }
  .call-form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
  }
  .call-textarea {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.6;
    padding: 12px 14px;
  }
  .call-textarea:focus { outline: none; border-color: var(--accent); }
  .call-form-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
  }
  .call-lead-pick { flex: 1; min-width: 220px; }
  .call-lead-pick select {
    width: 100%;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    padding: 9px 12px;
  }
  .call-lead-pick select:focus { outline: none; border-color: var(--accent); }
  .call-lead-input {
    width: 100%;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    padding: 9px 12px;
    box-sizing: border-box;
  }
  .call-lead-input:focus { outline: none; border-color: var(--accent); }
  .call-lead-results {
    margin-top: 6px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .call-lead-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
  .call-lead-result:last-child { border-bottom: none; }
  .call-lead-result:hover { background: var(--bg-elev-3); }
  .call-lead-result .cl-name { color: var(--text); font-size: 13px; font-weight: 500; flex: 1; min-width: 0; }
  .call-lead-noresult { padding: 10px 12px; font-size: 12px; color: var(--text-faint); }
  .call-lead-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 9px 12px;
  }
  .call-lead-selected .cls-name { color: var(--accent); font-size: 13px; font-weight: 600; flex: 1; min-width: 0; }
  .call-lead-clear {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-faint);
    font-family: var(--font);
    font-size: 11.5px;
    padding: 4px 9px;
    cursor: pointer;
    white-space: nowrap;
  }
  .call-lead-clear:hover { color: var(--text); border-color: var(--text-faint); }
  .call-char {
    font-size: 11.5px;
    color: var(--text-faint);
    margin-top: 6px;
  }
  .call-error {
    margin-top: 14px;
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    color: var(--danger);
    padding: 10px 14px;
    font-size: 13px;
  }
  .call-analysing {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 32px;
    text-align: center;
    color: var(--text-dim);
    margin-top: 18px;
  }

  /* Results */
  .call-results { margin-top: 20px; }
  .call-score-hero {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  .call-score-ring {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    position: relative;
  }
  .call-score-ring svg { transform: rotate(-90deg); }
  .call-score-ring .ring-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--accent);
  }
  .call-hero-text { flex: 1; min-width: 240px; }
  .call-hero-text h3 { margin: 0 0 6px; color: var(--text); font-size: 16px; }
  .call-hero-text p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.55; }

  .call-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
  }
  @media (max-width: 640px) { .call-summary-grid { grid-template-columns: 1fr; } }
  .call-summary-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
  }
  .call-summary-card.win { border-left: 3px solid var(--success); }
  .call-summary-card.fix { border-left: 3px solid var(--accent); }
  .call-summary-card h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .call-summary-card.win h4 { color: var(--success); }
  .call-summary-card.fix h4 { color: var(--accent); }
  .call-summary-card p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.55; }

  .call-areas { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
  .call-area {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .call-area-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
  }
  .call-area-head:hover { background: var(--bg-elev-2); }
  .call-area-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); }
  .call-area-bar {
    flex: 0 0 120px;
    height: 7px;
    background: var(--bg-elev-3);
    border-radius: 4px;
    overflow: hidden;
  }
  .call-area-bar > span { display: block; height: 100%; border-radius: 4px; transition: width 0.4s ease; }
  .call-area-score {
    flex: 0 0 42px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .call-area-chevron { flex: 0 0 14px; color: var(--text-faint); font-size: 11px; transition: transform 0.2s; }
  .call-area.expanded .call-area-chevron { transform: rotate(90deg); }
  .call-area-body {
    padding: 0 18px 16px 18px;
    border-top: 1px solid var(--border);
    margin-top: -1px;
  }
  .call-area-body .blk { margin-top: 12px; }
  .call-area-body .blk-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
  }
  .call-area-body .blk.well .blk-label { color: var(--success); }
  .call-area-body .blk.improve .blk-label { color: var(--accent); }
  .call-area-body .blk p { margin: 0; font-size: 13px; color: var(--text); line-height: 1.55; }
  .call-evidence {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--bg-elev-2);
    border-left: 2px solid var(--text-faint);
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--text-dim);
    font-style: italic;
  }
  .call-missed {
    margin-top: 20px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
  }
  .call-missed h3 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
  .call-missed .sub { margin: 0 0 14px; font-size: 12.5px; color: var(--text-dim); }
  .call-missed-item {
    border-top: 1px solid var(--border);
    padding: 12px 0;
  }
  .call-missed-item:first-of-type { border-top: none; padding-top: 4px; }
  .call-missed-item .obj { font-size: 13px; font-weight: 600; color: var(--danger); margin-bottom: 6px; }
  .call-missed-item .row { font-size: 12.5px; color: var(--text); line-height: 1.5; margin-bottom: 4px; }
  .call-missed-item .row b { color: var(--text-dim); font-weight: 600; }

/* =========================================================================
   * Phase 4b chunk 2 — streaming preview, cost footer, saved-drafts viewer
   * ========================================================================= */
  .comms-timeline {
    margin-top: 18px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-dim);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 360px;
    overflow-y: auto;
    position: relative;
  }
  .comms-timeline .label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 10px;
  }
  .comms-timeline .label .dot {
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 1.2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
  }
  .comms-timeline .stream-text {
    color: var(--text);
  }
  .comms-timeline .marker {
    color: var(--accent);
    font-weight: 600;
  }

  .comms-cost-footer {
    margin-top: 18px;
    padding: 10px 14px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-faint);
  }
  .comms-cost-footer .group {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }
  .comms-cost-footer .stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .comms-cost-footer .stat .k {
    color: var(--text-faint);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .comms-cost-footer .stat .v {
    color: var(--text);
    font-family: var(--font-mono);
    font-weight: 600;
  }
  .comms-cost-footer .stat.cost .v { color: var(--accent); }
  .comms-cost-footer button.linkish {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
  }
  .comms-cost-footer button.linkish:hover {
    color: var(--text);
    border-color: var(--text-faint);
  }

  .comms-history {
    margin-top: 18px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .comms-history-header {
    padding: 12px 16px;
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .comms-history-header h4 {
    margin: 0;
    font-size: 13px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .comms-history-list {
    max-height: 380px;
    overflow-y: auto;
  }
  .comms-history-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
  }
  .comms-history-item:last-child { border-bottom: none; }
  .comms-history-item:hover { background: var(--bg-elev-2); }
  .comms-history-item .meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-faint);
    margin-bottom: 6px;
  }
  .comms-history-item .meta .type-pill {
    background: var(--accent-soft);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  .comms-history-item .preview {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.45;
    max-height: 3em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .comms-history-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-faint);
    font-size: 12.5px;
  }

  /* =========================================================================
   * INSTALLATIONS TAB (Phase 4c chunk 1)
   * ========================================================================= */
  .install-pay-banner {
    background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.04));
    border: 1px solid var(--success);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
  }
  .install-pay-banner .left .label,
  .install-pay-banner .right .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--success);
    margin-bottom: 6px;
    opacity: 0.85;
  }
  .install-pay-banner .right { text-align: right; }
  .install-pay-banner h2 {
    margin: 0 0 4px;
    font-size: 28px;
    color: var(--success);
    font-weight: 600;
  }
  .install-pay-banner h2 .days {
    font-size: 14px;
    color: var(--text-dim);
    font-weight: 400;
    margin-left: 8px;
  }
  .install-pay-banner .covers {
    font-size: 12px;
    color: var(--text-faint);
  }
  .install-pay-banner .amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--success);
    line-height: 1;
  }
  .install-pay-banner .amount-meta {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 4px;
  }

  .install-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
  }
  .install-stat-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
  }
  .install-stat-card .k {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin-bottom: 6px;
  }
  .install-stat-card .v {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
  }
  .install-stat-card .meta {
    font-size: 10.5px;
    color: var(--text-faint);
    margin-top: 4px;
  }
  .install-stat-card.success .v { color: var(--success); }
  .install-stat-card.warning .v { color: var(--warning); }
  .install-stat-card.danger  .v { color: var(--danger); }

  .install-pay-breakdown {
    margin-bottom: 18px;
  }
  .install-pay-breakdown .heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin-bottom: 8px;
  }
  .install-pay-breakdown .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }
  .install-pay-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
  }
  .install-pay-card.current {
    border-color: var(--success);
    background: rgba(34,197,94,0.05);
  }
  .install-pay-card .month {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 2px;
  }
  .install-pay-card.current .month {
    color: var(--success);
    font-weight: 600;
  }
  .install-pay-card .pay-date {
    font-size: 10.5px;
    color: var(--text-faint);
    margin-bottom: 8px;
  }
  .install-pay-card .total {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 6px;
  }
  .install-pay-card .install-count {
    font-size: 10.5px;
    color: var(--text-faint);
    margin-bottom: 8px;
  }
  .install-pay-card .progress {
    height: 4px;
    background: var(--bg-elev-3);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
  }
  .install-pay-card .progress .bar {
    height: 100%;
    background: var(--success);
    transition: width 0.3s;
  }
  .install-pay-card .paid-meta {
    font-size: 10.5px;
    color: var(--text-faint);
  }

  .install-pay-card.active-filter {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    box-shadow: 0 0 0 1px var(--accent);
  }
  .install-pay-card.active-filter .month {
    color: var(--accent) !important;
    font-weight: 600;
  }
  .install-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  .install-table thead th.sortable:hover { color: var(--text-dim); }
  .install-table thead th.sort-active { color: var(--accent); }
  .install-table thead th .sort-arrow { margin-left: 4px; opacity: 0.5; font-size: 9px; }
  .install-table thead th.sort-active .sort-arrow { opacity: 1; color: var(--accent); }
  .install-table tr.expanded-row td { padding: 0; border-bottom: 1px solid var(--border); }
  .install-expand-panel {
    background: var(--bg-elev-2);
    border-top: 1px solid var(--accent-soft);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px 20px;
    font-size: 12px;
  }
  .install-expand-panel .ep-field { display: flex; flex-direction: column; gap: 2px; }
  .install-expand-panel .ep-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
  .install-expand-panel .ep-val { color: var(--text); font-weight: 500; }
  .install-expand-panel .ep-val.mono { font-family: var(--font-mono); }
  .install-table tbody tr.data-row { cursor: pointer; }
  .install-table tbody tr.data-row.row-expanded { background: var(--bg-elev-2); }
  .install-table tbody tr.data-row.row-expanded td { border-bottom: none; }

  .install-rep-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev-2);
  }
  .install-rep-bar .left { display: inline-flex; align-items: center; gap: 10px; }
  .install-rep-bar .right { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .install-rep-bar .lbl { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
  .install-rep-bar select.filter-select { min-width: 220px; }
  .install-rep-bar .hint { font-size: 12px; color: var(--text-faint); }
  .install-rep-bar .badge-readonly {
    font-size: 12px;
    color: var(--accent);
    background: rgba(224,179,65,0.12);
    border: 1px solid rgba(224,179,65,0.35);
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
  }
  .install-rep-bar .btn.ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 6px 12px;
    font-size: 12.5px;
  }
  .install-table .row-static {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
  }
  .install-table .row-static.status-complete,
  .install-table .row-static.commission-paid { color: var(--success); }
  .install-table .row-static.status-booked,
  .install-table .row-static.commission-pending { color: var(--text-dim); }

  .install-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .install-toolbar .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-dim);
    cursor: pointer;
  }
  .install-toolbar select.filter-select,
  .install-toolbar input.search-input {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: var(--radius);
    font: inherit;
    font-size: 12.5px;
  }
  .install-toolbar input.search-input { min-width: 220px; }
  .install-toolbar input.search-input:focus,
  .install-toolbar select.filter-select:focus {
    outline: none;
    border-color: var(--accent);
  }
  .install-toolbar .spacer { flex: 1; }

  .install-table-wrap {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 18px;
  }
  .install-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
  }
  .install-table thead th {
    background: var(--bg-elev-2);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10.5px;
    font-weight: 500;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
  .install-table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }
  .install-table tbody tr:last-child td { border-bottom: none; }
  .install-table tbody tr:hover { background: var(--bg-elev-2); }
  .install-table tbody tr.cancelled td {
    opacity: 0.55;
  }
  .install-table .customer-cell .name {
    color: var(--text);
    font-weight: 500;
  }
  .install-table .customer-cell .email {
    font-size: 10.5px;
    color: var(--text-faint);
    margin-top: 2px;
  }
  .install-table .pay-period-pill {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 500;
  }
  .install-table .money { font-family: var(--font-mono); }
  .install-table .commission { color: var(--success); font-family: var(--font-mono); font-weight: 600; }
  .install-table .commission.zero { color: var(--text-faint); font-weight: 400; }
  .install-table select.row-select {
    background: var(--bg-elev-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
  }
  .install-table select.row-select:focus { outline: none; border-color: var(--accent); }
  .install-table select.status-booked  { color: var(--info); border-color: var(--info); }
  .install-table select.status-complete{ color: var(--success); border-color: var(--success); }
  .install-table select.commission-paid    { color: var(--success); border-color: var(--success); }
  .install-table select.commission-pending { color: var(--warning); border-color: var(--warning); }
  .install-table .actions-cell {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
  }
  .install-table .actions-cell button {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
  }
  .install-table .actions-cell button:hover { color: var(--text); border-color: var(--text-faint); }
  .install-table .actions-cell button.danger { color: var(--danger); }
  .install-table .actions-cell button.danger:hover { border-color: var(--danger); }
  .install-table .empty-row td {
    text-align: center;
    color: var(--text-faint);
    padding: 32px 12px;
    font-size: 12.5px;
  }

  /* Graduate-to-install modal extras */
  .graduate-modal-summary {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--text-dim);
  }
  .graduate-modal-summary strong { color: var(--text); }

  /* =========================================================================
   * YTD SUMMARY + HISTORICAL COMMISSION TRACKER (Phase 4c chunk 2)
   * ========================================================================= */
  .ytd-section,
  .commission-tracker-section {
    margin-top: 28px;
  }
  .ytd-section .section-title,
  .commission-tracker-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 14px;
  }
  .ytd-section .section-title .ico,
  .commission-tracker-section .section-title .ico { font-size: 18px; }

  .ytd-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
  }
  .ytd-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
  }
  .ytd-card .k {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin-bottom: 6px;
  }
  .ytd-card .v {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
  }
  .ytd-card .meta {
    font-size: 10.5px;
    color: var(--text-faint);
    margin-top: 6px;
  }
  .ytd-card.commission .v { color: var(--accent); }
  .ytd-card.sales      .v { color: var(--text); }
  .ytd-card.earnings   .v { color: var(--success); }
  .ytd-card.best       .v {
    color: var(--accent);
    font-family: var(--font);
    font-size: 26px;
  }

  /* Monthly summary table (and pay-run table — shares styles) */
  .ytd-monthly-table,
  .pay-run-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .ytd-monthly-table thead th,
  .pay-run-table thead th {
    background: var(--bg-elev-2);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10.5px;
    font-weight: 500;
    text-align: right;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
  .ytd-monthly-table thead th:first-child,
  .pay-run-table thead th:first-child {
    text-align: left;
  }
  .ytd-monthly-table tbody td,
  .pay-run-table tbody td {
    padding: 11px 12px;
    text-align: right;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    color: var(--text);
  }
  .ytd-monthly-table tbody td:first-child,
  .pay-run-table tbody td:first-child {
    text-align: left;
    font-family: var(--font);
    color: var(--text);
  }
  .ytd-monthly-table tbody tr:last-child td,
  .pay-run-table tbody tr:last-child td { border-bottom: none; }
  .ytd-monthly-table tbody tr.current td:first-child {
    color: var(--success);
    font-weight: 600;
  }
  .ytd-monthly-table tbody tr.total td {
    border-top: 1px solid var(--border-strong);
    font-weight: 700;
    color: var(--accent);
  }
  .ytd-monthly-table .commission-col { color: var(--accent); }
  .ytd-monthly-table .total-col      { color: var(--success); }
  .ytd-monthly-table .pill-current {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 3px;
    background: rgba(34,197,94,0.15);
    color: var(--success);
    font-size: 10px;
    font-weight: 500;
    text-transform: lowercase;
    vertical-align: middle;
  }

  /* Bar chart */
  .commission-chart {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 22px 16px;
    margin-bottom: 14px;
  }
  .commission-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 12px;
    height: 220px;
    padding-top: 22px;
  }
  .commission-chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 60px;
    max-width: 220px;
    height: 100%;
  }
  .commission-chart-bar .value {
    font-size: 11.5px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    margin-bottom: 4px;
  }
  .commission-chart-bar .bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s;
  }
  .commission-chart-bar .bar.paid    { background: var(--success); }
  .commission-chart-bar .bar.pending { background: rgba(80, 110, 200, 0.55); }
  .commission-chart-bar .bar.future  { background: rgba(80, 110, 200, 0.25); }
  .commission-chart-bar .month-label {
    font-size: 11.5px;
    color: var(--text-dim);
    margin-top: 2px;
  }
  .commission-chart-legend {
    display: flex;
    gap: 18px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-faint);
  }
  .commission-chart-legend .item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .commission-chart-legend .swatch {
    width: 10px; height: 10px;
    border-radius: 2px;
  }
  .commission-chart-legend .swatch.paid    { background: var(--success); }
  .commission-chart-legend .swatch.pending { background: rgba(80, 110, 200, 0.55); }
  .commission-chart-legend .swatch.future  { background: rgba(80, 110, 200, 0.25); }

  /* Pay run table status pill */
  .pay-run-table .status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 500;
    font-family: var(--font);
  }
  .pay-run-table .status-pill.paid {
    background: rgba(34,197,94,0.15);
    color: var(--success);
  }
  .pay-run-table .status-pill.pending {
    background: rgba(168, 130, 250, 0.18);
    color: var(--violet-text);
  }
  .pay-run-table .status-pill.future {
    background: rgba(80, 110, 200, 0.18);
    color: var(--indigo-text);
  }
  .pay-run-table tbody tr.total td {
    border-top: 1px solid var(--border-strong);
    font-weight: 700;
    color: var(--accent);
  }

  /* =========================================================
   * TRAINING MODULE STYLES
   * ========================================================= */
  .training-page { padding: 24px; max-width: 1200px; margin: 0 auto; }
  .training-hero { margin-bottom: 28px; }
  .training-hero h2 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
  .training-hero p { color: var(--text-dim); margin: 0; font-size: 0.9rem; }

  /* Section nav pills */
  .training-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
  .training-nav-btn {
    padding: 8px 18px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--bg-elev); color: var(--text-dim); font-size: 0.85rem;
    cursor: pointer; transition: all 0.15s; font-weight: 500;
  }
  .training-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
  .training-nav-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
  .training-nav-btn.locked { opacity: 0.45; cursor: not-allowed; }

  /* Module cards grid */
  .training-modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  .training-module-card {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 20px; cursor: pointer; transition: all 0.15s; position: relative; overflow: hidden;
  }
  .training-module-card:hover:not(.locked-card) { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(224,179,65,0.1); }
  .training-module-card.locked-card { opacity: 0.55; cursor: not-allowed; }
  .training-module-card.completed-card { border-color: var(--success); }
  .training-module-card.active-card { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

  .training-module-num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-faint); text-transform: uppercase; margin-bottom: 8px; }
  .training-module-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
  .training-module-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; }
  .training-module-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .training-module-status {
    display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem;
    font-weight: 600; padding: 3px 10px; border-radius: 12px;
  }
  .training-module-status.status-complete { background: var(--success-soft); color: var(--success); }
  .training-module-status.status-in-progress { background: var(--warning-soft); color: var(--warning); }
  .training-module-status.status-locked { background: var(--bg-elev-2); color: var(--text-faint); }
  .training-module-status.status-available { background: var(--accent-soft); color: var(--accent-strong); }
  .training-module-score { font-size: 0.78rem; color: var(--text-faint); }
  .training-lock-icon { position: absolute; top: 16px; right: 16px; font-size: 1.1rem; opacity: 0.4; }

  /* Module detail / lesson view */
  .training-lesson-shell { max-width: 760px; margin: 0 auto; }
  .training-lesson-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 0.85rem; cursor: pointer; margin-bottom: 20px; padding: 6px 0; }
  .training-lesson-back:hover { color: var(--accent); }
  .training-lesson-header { margin-bottom: 24px; }
  .training-lesson-header h3 { font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 0 0 6px; }
  .training-lesson-header p { color: var(--text-dim); font-size: 0.88rem; margin: 0; }
  .training-lesson-content {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 28px; margin-bottom: 24px; line-height: 1.75; color: var(--text);
  }
  .training-lesson-content h4 { color: var(--accent); font-size: 1rem; margin: 20px 0 8px; }
  .training-lesson-content p { margin: 0 0 14px; font-size: 0.92rem; }
  .training-lesson-content ul, .training-lesson-content ol { padding-left: 20px; margin: 0 0 14px; }
  .training-lesson-content li { font-size: 0.92rem; margin-bottom: 6px; }
  .training-lesson-content strong { color: var(--accent); }

  /* Quiz styles */
  .training-quiz-section { margin-top: 8px; }
  .training-quiz-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
  .training-quiz-header h4 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0; }
  .training-quiz-progress { font-size: 0.8rem; color: var(--text-faint); }
  .training-quiz-q {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 22px; margin-bottom: 16px;
  }
  .training-quiz-q-text { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 16px; }
  .training-quiz-options { display: flex; flex-direction: column; gap: 10px; }
  .training-quiz-option {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
    transition: all 0.12s; font-size: 0.88rem; color: var(--text-dim);
  }
  .training-quiz-option:hover { border-color: var(--accent); color: var(--text); }
  .training-quiz-option.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
  .training-quiz-option.correct { border-color: var(--success); background: var(--success-soft); color: var(--success); }
  .training-quiz-option.wrong { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
  .training-quiz-option input[type=radio] { margin-top: 2px; accent-color: var(--accent); }
  .training-quiz-result {
    background: var(--bg-elev); border-radius: var(--radius-lg); padding: 28px; text-align: center;
  }
  .training-quiz-result .score-big { font-size: 3rem; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
  .training-quiz-result .score-label { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 20px; }
  .training-quiz-result.passed .score-big { color: var(--success); }
  .training-quiz-result.failed .score-big { color: var(--danger); }

  /* Searchable library (FAQs / Objections) */
  .training-search-bar {
    width: 100%; padding: 10px 14px; background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text); font-size: 0.9rem; margin-bottom: 20px;
    box-sizing: border-box;
  }
  .training-search-bar:focus { outline: none; border-color: var(--accent); }
  .training-library-item {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
    margin-bottom: 10px; overflow: hidden;
  }
  .training-library-q {
    padding: 14px 18px; font-size: 0.9rem; font-weight: 600; color: var(--text);
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  }
  .training-library-q:hover { color: var(--accent); }
  .training-library-a {
    padding: 0 18px 14px; font-size: 0.87rem; color: var(--text-dim); line-height: 1.65;
    display: none;
  }
  .training-library-a.open { display: block; }
  .training-library-chevron { transition: transform 0.15s; font-size: 0.75rem; color: var(--text-faint); }
  .training-library-chevron.open { transform: rotate(180deg); }

  /* Role Play */
  .roleplay-shell { max-width: 700px; margin: 0 auto; }
  .roleplay-scenario-card {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 20px; margin-bottom: 14px; cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; justify-content: space-between;
  }
  .roleplay-scenario-card:hover { border-color: var(--accent); }
  .roleplay-scenario-title { font-weight: 700; color: var(--text); font-size: 0.95rem; margin-bottom: 4px; }
  .roleplay-scenario-desc { color: var(--text-dim); font-size: 0.83rem; }
  .roleplay-scenario-badge { font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); white-space: nowrap; }
  .roleplay-chat-shell { display: flex; flex-direction: column; height: 520px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
  .roleplay-chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
  .roleplay-msg { max-width: 80%; }
  .roleplay-msg.customer { align-self: flex-start; }
  .roleplay-msg.rep { align-self: flex-end; }
  .roleplay-msg-bubble {
    padding: 10px 14px; border-radius: 16px; font-size: 0.88rem; line-height: 1.55;
  }
  .roleplay-msg.customer .roleplay-msg-bubble { background: var(--bg-elev-2); color: var(--text); border-bottom-left-radius: 4px; }
  .roleplay-msg.rep .roleplay-msg-bubble { background: var(--accent); color: var(--on-accent); font-weight: 500; border-bottom-right-radius: 4px; }
  .roleplay-msg-label { font-size: 0.72rem; color: var(--text-faint); margin-bottom: 4px; padding: 0 4px; }
  .roleplay-msg.rep .roleplay-msg-label { text-align: right; }
  .roleplay-chat-input-row { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--bg-elev-2); }
  .roleplay-chat-input { flex: 1; background: var(--bg-elev-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: var(--text); font-size: 0.88rem; resize: none; }
  .roleplay-chat-input:focus { outline: none; border-color: var(--accent); }
  .roleplay-locked-banner {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 40px 24px; text-align: center;
  }
  .roleplay-locked-banner .lock-icon { font-size: 2.5rem; margin-bottom: 12px; }
  .roleplay-locked-banner h4 { color: var(--text); font-size: 1.1rem; margin: 0 0 8px; }
  .roleplay-locked-banner p { color: var(--text-dim); font-size: 0.87rem; margin: 0; }

  /* Infinity Brain chat */
  .brain-shell { max-width: 800px; margin: 0 auto; }
  .brain-chat-outer { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .brain-chat-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
  .brain-chat-header .brain-icon { font-size: 1.4rem; }
  .brain-chat-header h4 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); }
  .brain-chat-header p { margin: 0; font-size: 0.78rem; color: var(--text-dim); }
  .brain-chat-messages { height: 420px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
  .brain-msg { max-width: 85%; }
  .brain-msg.user { align-self: flex-end; }
  .brain-msg.assistant { align-self: flex-start; }
  .brain-msg-bubble { padding: 11px 15px; border-radius: 16px; font-size: 0.88rem; line-height: 1.6; }
  .brain-msg.user .brain-msg-bubble { background: var(--accent); color: var(--on-accent); font-weight: 500; border-bottom-right-radius: 4px; }
  .brain-msg.assistant .brain-msg-bubble { background: var(--bg-elev-2); color: var(--text); border-bottom-left-radius: 4px; }
  .brain-chat-input-row { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--bg-elev-2); }
  .brain-chat-input { flex: 1; background: var(--bg-elev-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: var(--text); font-size: 0.88rem; }
  .brain-chat-input:focus { outline: none; border-color: var(--accent); }

  /* Spec Sheets — two-pane searchable + inline PDF */
  .spec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
  .spec-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
  .spec-list-col { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; position: sticky; top: 12px; }
  .spec-search {
    width: 100%; box-sizing: border-box; background: var(--bg-elev-3); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px 12px; color: var(--text); font-size: 0.88rem; margin-bottom: 12px;
  }
  .spec-search:focus { outline: none; border-color: var(--accent); }
  .spec-list-scroll { max-height: 60vh; overflow-y: auto; }
  .spec-list-group { margin-bottom: 14px; }
  .spec-list-cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 700; margin: 0 0 6px 4px; }
  .spec-list-item {
    width: 100%; text-align: left; background: transparent; border: 1px solid transparent;
    border-radius: var(--radius); padding: 9px 10px; color: var(--text-dim); cursor: pointer;
    font-size: 0.85rem; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 2px; transition: background 0.12s, color 0.12s;
  }
  .spec-list-item:hover { background: var(--bg-elev-3); color: var(--text); }
  .spec-list-item.active { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
  .spec-list-item-title { line-height: 1.3; }
  .spec-list-pdf { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }
  .spec-empty { text-align: center; padding: 32px 16px; }

  .spec-detail-col { min-width: 0; }
  .spec-detail-empty {
    border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 60px 24px;
    text-align: center; background: var(--bg-elev);
  }
  .spec-detail { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
  .spec-back-btn { display: none; background: transparent; border: none; color: var(--accent); font-size: 0.85rem; cursor: pointer; padding: 0 0 12px; }
  .spec-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
  .spec-detail-cat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-ink); font-weight: 700; margin-bottom: 4px; }
  .spec-detail-title { font-size: 1.25rem; color: var(--text); margin: 0; line-height: 1.25; }
  .spec-detail-admin { display: flex; gap: 8px; flex-shrink: 0; }
  .spec-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
  .spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
  .spec-row:nth-child(even) { background: var(--bg-elev-3); }
  .spec-row:last-child { border-bottom: none; }
  .spec-key { color: var(--text-dim); font-weight: 600; }
  .spec-val { color: var(--text); text-align: right; }

  .spec-pdf-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .spec-pdf-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg-elev-3); border-bottom: 1px solid var(--border); }
  .spec-pdf-open { font-size: 0.78rem; color: var(--accent); text-decoration: none; }
  .spec-pdf-frame { width: 100%; height: 640px; border: none; display: block; background: #fff; }

  /* Spec Sheets — admin form */
  .spec-form { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; max-width: 640px; }
  .spec-field-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 700; margin-bottom: 6px; }
  .spec-field-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
  .spec-field-k, .spec-field-v { flex: 1; box-sizing: border-box; background: var(--bg-elev-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 11px; color: var(--text); font-size: 0.85rem; }
  .spec-field-k:focus, .spec-field-v:focus { outline: none; border-color: var(--accent); }
  .spec-field-remove { background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-faint); cursor: pointer; padding: 0 10px; height: 36px; flex-shrink: 0; }
  .spec-field-remove:hover { border-color: var(--danger, #e05a5a); color: var(--danger, #e05a5a); }
  .spec-upload-area {
    border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 26px;
    text-align: center; cursor: pointer; transition: border-color 0.15s; color: var(--text-dim); font-size: 0.85rem;
  }
  .spec-upload-area:hover { border-color: var(--accent); }
  .spec-bulk-textarea {
    width: 100%; box-sizing: border-box; min-height: 280px; resize: vertical;
    background: var(--bg-elev-3); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px; color: var(--text); font-size: 0.82rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5;
  }
  .spec-bulk-textarea:focus { outline: none; border-color: var(--accent); }

  @media (max-width: 760px) {
    .spec-layout { grid-template-columns: 1fr; }
    .spec-list-col { position: static; }
    .spec-layout.has-selection .spec-list-col { display: none; }
    .spec-back-btn { display: block; }
    .spec-pdf-frame { height: 460px; }
  }

  /* Admin Training Panel */
  .training-admin-panel { margin-top: 24px; }
  .training-admin-section { margin-bottom: 28px; }
  .training-admin-section h4 { font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
  .training-rep-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 8px; gap: 12px; flex-wrap: wrap;
  }
  .training-rep-name { font-weight: 600; color: var(--text); font-size: 0.9rem; min-width: 140px; }
  .training-rep-progress { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
  .training-rep-stat { font-size: 0.8rem; color: var(--text-dim); }
  .training-rep-stat strong { color: var(--text); }
  .training-rep-actions { display: flex; gap: 8px; }
  .roleplay-unlock-pill {
    font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 10px;
  }
  .roleplay-unlock-pill.unlocked { background: var(--success-soft); color: var(--success); }
  .roleplay-unlock-pill.locked { background: var(--bg-elev-2); color: var(--text-faint); }

  /* Flagged Brain Questions */
  .brain-flagged-item {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 16px; margin-bottom: 10px;
  }
  .brain-flagged-q { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
  .brain-flagged-meta { font-size: 0.78rem; color: var(--text-faint); margin-bottom: 10px; }
  .brain-flagged-answer-input { width: 100%; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px; color: var(--text); font-size: 0.87rem; box-sizing: border-box; resize: vertical; min-height: 60px; }
  .brain-flagged-answer-input:focus { outline: none; border-color: var(--accent); }