*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  /* ═══════════════════════════════════════════════════════════════════════════
     DESIGN SYSTEM v1 — Premium B2B
     Brand: warm orange primary, cool indigo accent, vibrant status palette.
     Type: Inter (400/500/600/700) with tabular nums for figures.
     Motion: cubic-bezier(0.16, 1, 0.3, 1) — soft elastic, 180–280ms duration.
     ═══════════════════════════════════════════════════════════════════════════ */
  :root {
    /* Surfaces */
    --bg:           #fafaf8;
    --bg-2:         #f3f2ee;
    --surface:      #ffffff;
    --surface-2:    #fdfdfb;
    --surface-3:    #f7f6f2;
    --border:       rgba(15, 13, 10, 0.07);
    --border-md:    rgba(15, 13, 10, 0.13);
    --border-strong:rgba(15, 13, 10, 0.22);

    /* Text */
    --text:   #16140f;
    --text-2: #5b574e;
    --text-3: #8c887e;

    /* Brand — warm orange primary */
    --accent:        #d9532b;
    --accent-2:      #f26b3c;
    --accent-hover:  #b73f1a;
    --accent-light:  #fff1ea;
    --accent-soft:   #ffe0d0;
    --accent-border: #f4c2a4;
    --accent-glow:   rgba(217, 83, 43, 0.30);

    /* Cool secondary — electric indigo for emphasis */
    --indigo:        #5b50e8;
    --indigo-soft:   #eeecff;
    --indigo-border: #c9c4f7;
    --indigo-glow:   rgba(91, 80, 232, 0.28);

    /* Semantic palette — vibrant, color-coded everywhere */
    --success:       #10b981;
    --success-soft:  #d6f7e8;
    --success-text:  #035c3e;
    --warning:       #f59e0b;
    --warning-soft:  #fef3c7;
    --warning-text:  #7c4a02;
    --danger:        #ef4444;
    --danger-soft:   #fee2e2;
    --danger-text:   #8a1a1a;
    --info:          #0ea5e9;
    --info-soft:     #dbf0fb;
    --info-text:     #084d6e;

    /* Radii */
    --radius-sm: 6px;
    --radius:    9px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    /* Layered shadows for real depth */
    --shadow-sm: 0 1px 2px rgba(15, 13, 10, 0.05);
    --shadow:    0 1px 3px rgba(15, 13, 10, 0.06), 0 4px 12px rgba(15, 13, 10, 0.04);
    --shadow-md: 0 2px 6px rgba(15, 13, 10, 0.08), 0 12px 28px rgba(15, 13, 10, 0.07);
    --shadow-lg: 0 4px 12px rgba(15, 13, 10, 0.10), 0 24px 48px rgba(15, 13, 10, 0.10);
    --shadow-glow:    0 0 0 3px var(--accent-glow);
    --shadow-glow-2:  0 0 0 3px var(--indigo-glow);

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 140ms;
    --dur:      220ms;
    --dur-slow: 380ms;
  }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    font-feature-settings: 'cv11', 'ss01', 'ss03';   /* Inter stylistic alternates */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  /* Tabular numbers everywhere figures show up — keeps columns aligned. */
  .metric-val, .partner-stat-val, .gost-stat-num, .lb-val, .lb-rank,
  .billing-table td, .billing-table th, .badge, td input[type="number"] {
    font-variant-numeric: tabular-nums;
  }
  .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
  .sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 1.25rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
  .logo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-2);
    padding: 0 8px 8px;
  }
  .logo span {
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
  }
  .nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px 9px 14px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    width: 100%;
    text-align: left;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    /* No overflow:hidden — it clipped the follow-up badge into a blob
       on the right edge. Was originally there for the old left-rail
       animation (now removed). */
  }
  /* Active state shown via background tint + accent text color + bold —
     no left rail (the previous orange "sliver" looked off-brand against
     the rest of the sidebar). */
  @media (hover: hover) {
    .nav-btn:hover { background: var(--surface-3); color: var(--text); }
  }
  .nav-btn.active {
    background: var(--accent-light);
    color: var(--accent-hover);
    font-weight: 600;
  }
  /* Sidebar nav icon — Lucide-style SVG, monochrome, tints to brand on active. */
  .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-2);
    transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .nav-icon svg { width: 100%; height: 100%; display: block; }
  .nav-btn:hover .nav-icon { color: var(--text); }
  .nav-btn.active .nav-icon { color: var(--accent); transform: scale(1.05); }
  /* Legacy step-num — kept for any callers that still render it. */
  .step-num {
    font-size: 10px;
    background: var(--surface-3);
    border-radius: 100px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--text-2);
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .nav-btn.active .step-num {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 4px var(--accent-glow);
  }
  /* Mobile nav icons — same SVG sprite. Slightly larger for touch targets. */
  .mobile-nav-icon svg { width: 20px; height: 20px; display: block; color: currentColor; }
  .mobile-nav-btn { color: var(--text-2); }
  .mobile-nav-btn .mobile-nav-icon { color: var(--text-2); transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
  .mobile-nav-btn.active .mobile-nav-icon { color: var(--accent); transform: scale(1.12); }
  .divider { height: 1px; background: var(--border); }
  /* No overflow-y on .main — it established a scroll context that
     broke position:sticky inside (Calculator + Pricing output cards).
     The page scrolls at body level instead. */
  .main { padding: 2rem; max-width: 1100px; }
  .page { display: none; }
  .page.active { display: block; }
  /* Page header gets a per-page color accent — a soft glow behind the title
     and a thin gradient bar beneath it. Each page sets --page-tint via the
     #page-* selectors below. */
  .page-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.75rem;
    padding-bottom: 1.1rem;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
  }
  .page-header::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--page-tint, var(--accent)), transparent 70%);
    border-radius: 2px;
    opacity: 0.85;
  }
  .page-header::after {
    content: '';
    position: absolute;
    left: 0; top: -1.25rem;
    width: 280px; height: 60px;
    background: radial-gradient(ellipse at left top, var(--page-tint, var(--accent)), transparent 65%);
    opacity: 0.07;
    pointer-events: none;
    z-index: -1;
  }
  /* Page-tint palette — each section keyed by its semantic color. */
  #page-leadgen     { --page-tint: var(--accent); }
  #page-clients     { --page-tint: var(--indigo); }
  #page-calculator  { --page-tint: var(--success); }
  #page-proposal    { --page-tint: #8b5cf6; }
  #page-proposalbuilder { --page-tint: #ec4899; }
  #page-billing     { --page-tint: #059669; }
  #page-planner     { --page-tint: var(--warning); }
  #page-tracker     { --page-tint: var(--info); }
  #page-admin       { --page-tint: var(--danger); }
  #page-leaderboard { --page-tint: #f59e0b; }
  #page-activity    { --page-tint: var(--text-2); }
  #page-settings    { --page-tint: var(--text-2); }
  .page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .page-sub { font-size: 13px; color: var(--text-2); margin-top: 5px; max-width: 560px; }
  .metrics { display: flex; gap: 2.25rem; margin-bottom: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
  .metric { background: none; border: none; padding: 0; }
  .metric-lbl { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.10em; font-weight: 600; }
  .metric-val { font-size: 18px; font-weight: 700; color: var(--text); margin-top: 4px; letter-spacing: -0.01em; }
  .metric-sub { display: none; }
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .card:hover { box-shadow: var(--shadow); }
  .card-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.01em; }
  .card-sub { font-size: 12px; color: var(--text-2); margin-bottom: 1rem; }
  /* ── BUTTONS ────────────────────────────────────────────────────────────────
     Alive on hover (lift + shadow), responsive on press (scale + shadow drops),
     glow ring on focus. Primary = brand-orange gradient with halo on hover. */
  .btn {
    position: relative;
    padding: 9px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border-md);
    background: var(--surface);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition:
      transform var(--dur-fast) var(--ease),
      box-shadow var(--dur) var(--ease),
      background-color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease);
    white-space: nowrap;
    font-family: inherit;
    letter-spacing: 0;
    will-change: transform, box-shadow;
  }
  @media (hover: hover) {
    .btn:hover {
      background: var(--surface-2);
      border-color: var(--border-strong);
      box-shadow: var(--shadow);
      transform: translateY(-1px);
    }
  }
  .btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: var(--shadow-sm);
    transition-duration: 80ms;
  }
  .btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow), var(--shadow-glow);
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 60%, var(--accent-hover) 100%);
    background-size: 140% 140%;
    background-position: 0% 50%;
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(217, 83, 43, 0.20), 0 4px 14px rgba(217, 83, 43, 0.18);
    transition:
      transform var(--dur-fast) var(--ease),
      box-shadow var(--dur) var(--ease),
      background-position var(--dur-slow) var(--ease);
  }
  @media (hover: hover) {
    .btn-primary:hover {
      background-position: 100% 50%;
      box-shadow: 0 2px 6px rgba(217, 83, 43, 0.30), 0 12px 32px rgba(217, 83, 43, 0.25);
      transform: translateY(-1px);
      border-color: transparent;
    }
  }
  .btn-primary:active {
    box-shadow: 0 1px 2px rgba(217, 83, 43, 0.22);
  }
  .btn-primary:focus-visible {
    box-shadow: 0 2px 6px rgba(217, 83, 43, 0.30), 0 12px 32px rgba(217, 83, 43, 0.25), 0 0 0 3px var(--accent-glow);
  }
  /* Secondary (cool indigo) for dual-emphasis areas. Apply via .btn.btn-accent */
  .btn-accent {
    background: linear-gradient(135deg, #7269ff 0%, var(--indigo) 60%, #4338ca 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px var(--indigo-glow), 0 4px 14px rgba(91, 80, 232, 0.18);
  }
  @media (hover: hover) {
    .btn-accent:hover {
      box-shadow: 0 2px 6px var(--indigo-glow), 0 12px 32px rgba(91, 80, 232, 0.25);
      transform: translateY(-1px);
    }
  }
  .btn-sm { padding: 6px 11px; font-size: 12px; border-radius: var(--radius-sm); }
  .btn:disabled,
  .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--surface);
    color: var(--text-3);
  }
  label { font-size: 11px; color: var(--text-2); display: block; margin-bottom: 5px; font-weight: 500; letter-spacing: 0.01em; }
  input, select, textarea {
    width: 100%;
    padding: 9px 11px;
    font-size: 13px;
    border: 1px solid var(--border-md);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
    background: var(--surface);
  }
  input.readonly { background: var(--bg-2); color: var(--text-2); border-style: dashed; cursor: default; }
  .field { margin-bottom: 14px; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .span2 { grid-column: span 2; }
  .row { display: flex; align-items: center; gap: 10px; }
  .row.between { justify-content: space-between; }
  /* Status badges — vibrant, color-coded by pipeline stage. Each step in the
     funnel uses a different hue, gradually warming from cool grey (Lead) to
     deep emerald (Paid). Subtle inset highlight for premium feel. */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.04);
  }
  .b-lead          { background: linear-gradient(180deg, #f5f3ed, #ece9e0); color: #4a4842; }
  .b-walk-sched    { background: linear-gradient(180deg, #fef3c7, #fde68a); color: #713f12; }
  .b-walk-done     { background: linear-gradient(180deg, #fed7aa, #fdba74); color: #7a2e00; }
  .b-quote-ready   { background: linear-gradient(180deg, #dbeafe, #bfdbfe); color: #1e3a8a; }
  .b-prop-sent     { background: linear-gradient(180deg, #ddd6fe, #c4b5fd); color: #4c1d95; }
  .b-dep-req       { background: linear-gradient(180deg, #fed7aa, #fdba74); color: #7a2e00; }
  .b-dep-paid      { background: linear-gradient(180deg, #fef08a, #fde047); color: #713f12; }
  .b-inv-sent      { background: linear-gradient(180deg, #bbf7d0, #86efac); color: #14532d; }
  .b-paid          { background: linear-gradient(180deg, #6ee7b7, #34d399); color: #064e3b; }
  .b-notinv        { background: linear-gradient(180deg, #f5f3ed, #ece9e0); color: #4a4842; }
  .client-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    margin-bottom: 10px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition:
      transform var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease),
      border-color var(--dur-fast) var(--ease);
  }
  @media (hover: hover) {
    .client-card:hover {
      border-color: var(--accent-border);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
  }
  .c-name { font-size: 16px; font-weight: 600; }
  .c-contact { font-size: 12px; color: var(--text-2); margin-top: 3px; }
  .c-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .c-meta-box { background: var(--bg); border-radius: var(--radius); padding: 8px 12px; }
  .c-meta-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-2); }
  .c-meta-val { font-size: 13px; font-weight: 500; margin-top: 3px; }
  .c-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
  .c-next { display: flex; align-items: center; gap: 6px; margin-top: 10px; background: var(--accent-light); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 7px 12px; font-size: 12px; color: #7a2c0a; font-weight: 500; }
  .c-next-arrow { font-size: 14px; }
  .c-progress { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
  .c-progress-bar { flex: 1; height: 3px; background: var(--border); border-radius: 100px; overflow: hidden; }
  .c-progress-fill { height: 100%; background: var(--accent); border-radius: 100px; transition: width 0.3s; }
  .c-progress-label { font-size: 10px; color: var(--text-3); white-space: nowrap; }
  .mobile-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
    z-index: 90;
  }
  [data-theme="dark"] .mobile-nav { background: rgba(22, 21, 27, 0.85); }
  .mobile-nav-inner { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 4px 6px; }
  .mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-2);
    font-size: 9px;
    font-weight: 600;
    gap: 3px;
    min-width: 60px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  .mobile-nav-btn:active { background: var(--surface-3); }
  .mobile-nav-btn.active { color: var(--accent); }
  .mobile-nav-icon { font-size: 18px; line-height: 1; transition: transform var(--dur-fast) var(--ease); }
  .mobile-nav-btn.active .mobile-nav-icon { transform: scale(1.12); }
  @media (max-width: 768px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .mobile-nav { display: block; }
    .main { padding: 1rem 1rem 5rem; }
    .panel { width: 100%; }
    .grid2, .grid3, .scenario-detail { grid-template-columns: 1fr; }
    .span2 { grid-column: span 1; }
    .metrics { flex-wrap: wrap; gap: 1.5rem; }
    .pipe-grid { grid-template-columns: repeat(2, 1fr); }
    #pricing-engine-grid { grid-template-columns: 1fr; }
  }
  .pipe-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .pipe-col { background: var(--bg); border-radius: var(--radius); padding: 10px; min-height: 120px; }
  .pipe-col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .pipe-col-title { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.07em; }
  .pipe-count { font-size: 11px; background: var(--surface); border-radius: 100px; padding: 1px 7px; color: var(--text-2); border: 1px solid var(--border); }
  .pipe-item { background: var(--surface); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px; cursor: pointer; border: 1px solid var(--border); font-size: 12px; }
  .pipe-item:hover { border-color: var(--accent); }
  .pipe-item-name { font-weight: 500; }
  .pipe-item-val { color: var(--text-2); margin-top: 2px; }
  .view-toggle { display: flex; border: 1px solid var(--border-md); border-radius: var(--radius); overflow: hidden; }
  .view-btn { padding: 6px 12px; font-size: 12px; font-weight: 500; background: transparent; border: none; cursor: pointer; color: var(--text-2); font-family: inherit; }
  .view-btn.active { background: var(--bg); color: var(--text); }
  .search-wrap { position: relative; flex: 1; max-width: 280px; }
  .search-wrap input { padding-left: 32px; }
  .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 14px; pointer-events: none; }
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 100; display: none; }
  .panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 480px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border-left: 1px solid rgba(15, 13, 10, 0.08);
    overflow-y: auto; z-index: 101; display: none;
  }
  [data-theme="dark"] .panel {
    background: rgba(22, 21, 27, 0.72);
    border-left-color: rgba(255,255,255,0.08);
  }
  .panel-head {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    z-index: 1;
  }
  [data-theme="dark"] .panel-head { background: rgba(22, 21, 27, 0.62); }
  .panel-name { font-size: 16px; font-weight: 600; }
  .panel-label { font-size: 11px; color: var(--text-2); }
  .panel-body { padding: 1.25rem; }
  .guide { background: var(--accent-light); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 1rem; font-size: 12px; color: #7a2c0a; line-height: 1.6; }
  .scenario { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 8px; }
  .scenario-top { display: flex; justify-content: space-between; align-items: center; }
  .scenario-lbl { font-size: 13px; font-weight: 500; }
  .scenario-val { font-size: 22px; font-weight: 600; color: var(--accent); }
  .scenario-detail { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
  .s-lbl { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
  .s-val { font-size: 12px; font-weight: 500; margin-top: 2px; }
  .prop-doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .prop-head { background: var(--bg); padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--border); }
  .prop-brand { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
  .prop-client-name { font-size: 26px; font-weight: 700; color: var(--text); margin-top: 8px; }
  .prop-client-contact { font-size: 13px; color: var(--text-2); margin-top: 3px; }
  .prop-body { padding: 1.5rem 1.75rem; }
  .prop-section { margin-bottom: 1.5rem; }
  .prop-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
  .prop-drag { font-size: 32px; font-weight: 700; color: var(--text); }
  .prop-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .prop-table th { text-align: left; padding: 8px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-2); border-bottom: 1px solid var(--border); }
  .prop-table td { padding: 10px 10px; border-bottom: 1px solid var(--border); }
  .prop-table td.accent { font-weight: 600; color: var(--accent); }
  .sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 1.5rem; }
  .sig-box { border: 1px dashed var(--border-md); border-radius: var(--radius); padding: 14px; }
  .sig-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); }
  .sig-line { border-bottom: 1px solid var(--border-md); margin-top: 36px; }
  .billing-wrap { overflow-x: auto; }
  .billing-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .billing-table th { text-align: left; padding: 10px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg); }
  .billing-table td { padding: 8px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .billing-table tr:hover td { background: var(--surface-3); }
  .billing-table input, .billing-table select { padding: 5px 8px; font-size: 12px; }
  .toggle-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
  .toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
  .toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
  .t-track { position: absolute; inset: 0; background: var(--border-md); border-radius: 100px; cursor: pointer; transition: background 0.2s; }
  .toggle input:checked + .t-track { background: var(--accent); }
  .t-thumb { position: absolute; height: 16px; width: 16px; left: 2px; bottom: 2px; background: white; border-radius: 50%; transition: transform 0.2s; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
  .toggle input:checked ~ .t-thumb { transform: translateX(16px); }
  .wl-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-top: 4px; }
  .wl-title { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
  .wl-desc { font-size: 11px; color: var(--text-2); margin-bottom: 10px; line-height: 1.5; }
  .saved-bar { font-size: 11px; color: var(--text-3); text-align: center; padding: 8px 4px; display: flex; align-items: center; justify-content: center; gap: 5px; }
  .saved-dot { width: 6px; height: 6px; background: #52a22b; border-radius: 50%; display: inline-block; }
  .hint { font-size: 11px; color: var(--text-2); margin-top: 6px; }
  .empty { text-align: center; padding: 2.5rem; color: var(--text-2); font-size: 13px; }
  .empty-state { text-align:center; padding: 3.5rem 2rem; }
  .empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
  .empty-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
  .empty-sub { font-size: 13px; color: var(--text-2); max-width: 280px; margin: 0 auto; line-height: 1.6; }
  .stale-card { border-color: #f4b89a !important; }

  /* Print styles for proposal export */
  @media print {
    body { background: white !important; font-size: 12px; }
    .app { display: block !important; }
    .sidebar, .page-header, #prop-warning, .mobile-nav { display: none !important; }
    .page { display: block !important; }
    #page-clients, #page-calculator, #page-leadgen, #page-billing { display: none !important; }
    #page-proposal { display: block !important; }
    .prop-doc { box-shadow: none !important; border: none !important; }
    .prop-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .prop-head img { display: block !important; }
    @page { margin: 0.75in; size: letter portrait; }
  }

  /* ── DESIGN PASS: Hierarchy & Rhythm ───────────────────────────────────── */

  /* Stronger page titles */
  .page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
  .page-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; font-weight: 400; }

  /* Metric block — make numbers dominant */
  .metric-lbl { font-size: 10px; letter-spacing: 0.09em; font-weight: 600; text-transform: uppercase; color: var(--text-3); }
  .metric-val { font-size: 28px; font-weight: 700; color: var(--text); margin-top: 2px; letter-spacing: -0.5px; line-height: 1; }

  /* Sidebar brand identity */
  .sidebar { background: var(--surface); border-right: 1px solid var(--border); }
  .logo { color: var(--text-2); padding: 2px 4px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
  .logo span { color: var(--accent); }
  .nav-btn { color: var(--text-2); }
  .nav-btn:hover { background: var(--bg); color: var(--text); }
  .nav-btn.active { background: var(--accent-light); border-color: var(--accent-border); color: #7a2c0a; }
  .step-num { background: var(--bg); color: var(--text-2); }
  .nav-btn.active .step-num { background: var(--accent-border); color: #7a2c0a; }
  .divider { background: var(--border); }

  /* Client cards — more rhythm */
  .client-card { padding: 1.25rem 1.4rem; border-radius: 10px; border-color: var(--border); transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s; }
  .client-card:hover { border-color: var(--accent-border); box-shadow: 0 4px 16px rgba(217,90,43,0.1), 0 1px 4px rgba(0,0,0,0.06); transform: translateY(-1px); }
  .c-name { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
  .c-contact { font-size: 12px; color: var(--text-3); margin-top: 2px; }
  .c-meta-box { border: 1px solid var(--border); }
  .c-meta-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.09em; }
  .c-next { background: #fff8f4; border-color: #f4c4a8; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }

  /* Progress bar thicker + more visible */
  .c-progress { margin-top: 10px; }
  .c-progress-bar { height: 4px; background: var(--surface-3); }
  .c-progress-fill { background: linear-gradient(90deg, var(--accent), #e8693a); }
  .c-progress-label { font-size: 10px; color: var(--text-3); font-weight: 600; }

  /* Panel improvements */
  .panel {
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur) var(--ease);
    border-left: 1px solid var(--border);
  }
  .panel-head {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 1.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .panel-head .btn { border-color: var(--border-md); background: var(--surface); color: var(--text-2); }
  .panel-head .btn:hover { background: var(--surface-2); color: var(--text); }
  .panel-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
  .panel-name { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; margin-top: 2px; }
  .panel-body { padding: 1.5rem; }

  /* Guide boxes */
  .guide { border-radius: 8px; padding: 12px 16px; font-size: 12px; line-height: 1.65; }

  /* Buttons — sharper */
  .btn { padding: 8px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
  .btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 6px; }
  .btn-primary { box-shadow: 0 1px 3px rgba(217,90,43,0.25); }
  .btn-primary:hover { box-shadow: 0 2px 8px rgba(217,90,43,0.35); }

  /* Scenario cards */
  .scenario { border-radius: 10px; border: 1px solid var(--border); }
  .scenario-top { margin-bottom: 4px; }
  .scenario-lbl { font-size: 13px; font-weight: 600; color: var(--text-2); }
  .scenario-val { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
  .s-lbl { font-size: 9px; letter-spacing: 0.1em; font-weight: 700; }

  /* ── PROPOSAL — premium document feel ─────────────────────────────────── */
  .prop-doc { border: none; box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.07); border-radius: 14px; overflow: hidden; }
  .prop-head { background: var(--bg); border-bottom: 1px solid var(--border); padding: 2rem 2.25rem; }
  .prop-head img { height: 36px; width: auto; display: block; margin-bottom: 20px; }
  .prop-brand { display: none; }
  .prop-client-name { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; margin-top: 0; }
  .prop-client-contact { font-size: 13px; color: var(--text-2); margin-top: 4px; }
  .prop-body { padding: 2rem 2.25rem; }
  .prop-section { margin-bottom: 2rem; }
  .prop-section-title { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; color: var(--text-3); margin-bottom: 12px; border-bottom: none; padding-bottom: 0; padding-top: 0; }
  .prop-drag { font-size: 40px; font-weight: 800; letter-spacing: -1px; color: #c0392b; line-height: 1; }
  .prop-table { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
  .prop-table th { background: var(--bg); padding: 9px 14px; font-size: 9px; letter-spacing: 0.12em; font-weight: 700; }
  .prop-table td { padding: 11px 14px; }
  .prop-table tr:last-child td { border-bottom: none; }
  .prop-table td.accent { font-weight: 700; color: #2d6a2d; }
  .sig-grid { margin-top: 2rem; gap: 20px; }
  .sig-box { border: 1.5px dashed #ddd; border-radius: 10px; padding: 18px 20px; }
  .sig-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
  .sig-line { margin-top: 40px; border-bottom: 1.5px solid #ddd; }

  /* Tables — billing */
  .billing-table th { font-size: 10px; letter-spacing: 0.09em; font-weight: 700; padding: 11px 10px; }
  .billing-table td { padding: 9px 8px; }

  /* Search input */
  .search-wrap input { border-radius: 7px; padding-left: 34px; font-size: 13px; }

  /* View toggle */
  .view-toggle { border-radius: 7px; }

  /* Badges — tighter */
  .badge { font-size: 10px; padding: 3px 9px; font-weight: 700; letter-spacing: 0.02em; border-radius: 100px; }

  /* Pipeline */
  .pipe-col { border-radius: 10px; }
  .pipe-item { border-radius: 7px; }

  /* Saved confirmation */
  .saved-bar { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
  .saved-dot { width: 7px; height: 7px; }

  /* Signature moment: panel open transition via CSS */
  @keyframes slideIn { from { transform: translateX(32px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  .panel[style*="block"] { animation: slideIn 0.22s cubic-bezier(0.16,1,0.3,1); }


  /* ── GOST Planner Styles ── */
  .gost-level-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block; }
  .gost-add-panel { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06); position:sticky;top:2rem;align-self:start; }
  .gost-add-header { padding:12px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-2); }
  .gost-add-section { padding:14px 16px;border-bottom:1px solid var(--border); }
  .gost-add-section:last-child { border-bottom:none; }
  .gost-add-label { display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;margin-bottom:8px;letter-spacing:.2px;text-transform:uppercase; }
  .gost-add-section select, .gost-add-section input[type="text"] { width:100%;border:1px solid var(--border-md);border-radius:var(--radius);padding:7px 10px;font-size:13px;color:var(--text);background:var(--bg);outline:none;margin-bottom:8px;font-family:inherit; }
  .gost-add-section select:focus, .gost-add-section input[type="text"]:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(217,90,43,.1); }
  .gost-add-btn { width:100%;padding:8px;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .15s; }
  .gost-add-btn:hover { opacity:.88; }
  .gost-add-btn.goal   { background:#5b4cf5;color:#fff; }
  .gost-add-btn.obj    { background:#0284c7;color:#fff; }
  .gost-add-btn.strat  { background:#d97706;color:#fff; }
  .gost-add-btn.tactic { background:#059669;color:#fff; }
  .gost-tree { display:flex;flex-direction:column;gap:14px; }
  .gost-goal-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden; }
  .gost-goal-header { display:flex;align-items:center;gap:8px;padding:12px 16px;background:#ede9fe;border-bottom:1px solid #ddd6fe; }
  .gost-obj-header { display:flex;align-items:center;gap:8px;padding:9px 12px;background:#e0f2fe;border-bottom:1px solid #bae6fd; }
  .gost-strat-header { display:flex;align-items:center;gap:8px;padding:7px 10px;background:#fef3c7;border-bottom:1px solid #fde68a; }
  .gost-tactic-row { display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:5px;background:#d1fae5;border:1px solid #a7f3d0;margin-bottom:4px; }
  .gost-level-badge { font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:2px 6px;border-radius:20px;flex-shrink:0; }
  .gost-badge-goal   { background:#5b4cf5;color:#fff; }
  .gost-badge-obj    { background:#0284c7;color:#fff; }
  .gost-badge-strat  { background:#d97706;color:#fff; }
  .gost-badge-tactic { background:#059669;color:#fff; }
  .gost-item-text { font-size:13px;font-weight:500;flex:1; }
  .gost-del-btn { background:none;border:none;cursor:pointer;color:var(--text-3);padding:2px 4px;font-size:15px;border-radius:4px; }
  .gost-del-btn:hover { color:#ef4444;background:#fee2e2; }
  .gost-progress-bar { height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:2px;width:100%; }
  .gost-progress-fill { height:100%;background:#059669;border-radius:2px;transition:width .3s; }
  .gost-empty-state { text-align:center;padding:3rem;color:var(--text-2);font-size:13px; }
  .gost-stats { display:flex;gap:12px;margin-bottom:1.5rem;flex-wrap:wrap; }
  .gost-stat { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 16px; }
  .gost-stat-num { font-size:20px;font-weight:700;line-height:1;margin-bottom:2px; }
  .gost-stat-lbl { font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.4px;font-weight:600; }
  .gost-layout { display:grid;grid-template-columns:280px 1fr;gap:18px;max-width:1100px; }
  /* Gantt */
  .gantt-wrapper { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden; }
  .gantt-scroll { overflow-x:auto; }
  .gantt-grid { min-width:max-content; }
  .gantt-header-row { display:flex;border-bottom:2px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:5; }
  /* Top-left corner: sticks to BOTH axes — left edge of horizontal scroll
     AND top edge of vertical scroll. Highest z-index so it overlays both
     sticky strips at their intersection. */
  .gantt-label-col { width:220px;flex-shrink:0;border-right:2px solid var(--border);position:sticky;left:0;z-index:6;background:var(--surface); }
  .gantt-month-hdr { display:flex; }
  .gantt-month-grp { display:flex;flex-direction:column;border-right:1px solid var(--border); }
  .gantt-month-grp:last-child { border-right:none; }
  .gantt-month-title { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-2);padding:6px 0;text-align:center;border-bottom:1px solid var(--border);background:var(--bg); }
  .gantt-date-row { display:flex; }
  .gantt-date-cell { width:46px;flex-shrink:0;padding:4px 2px;text-align:center;font-size:9px;font-weight:500;color:var(--text-3);border-right:1px solid var(--border); }
  .gantt-date-cell:last-child { border-right:none; }
  .gantt-row { display:flex;border-bottom:1px solid var(--border);min-height:40px; }
  .gantt-row:last-child { border-bottom:none; }
  .gantt-row:nth-child(even) { background:#fafaf9; }
  /* Body label column — sticky-left so the GOST item name stays visible
     while the user scrolls horizontally through Jan–Dec. Each row level
     sets its own background below so date cells don't bleed through as
     they slide underneath.
     Long names wrap (no ellipsis) and the row grows to fit. The box
     cells use min-height so they stretch to match the row's height. */
  .gantt-row-label { width:220px;flex-shrink:0;padding:8px 12px;display:flex;align-items:center;border-right:2px solid var(--border);position:sticky;left:0;z-index:4;background:var(--surface);box-shadow:4px 0 6px -4px rgba(0,0,0,0.08); }
  .gantt-row-name { font-size:12px;font-weight:500;color:var(--text);line-height:1.35;word-break:break-word; }
  .gantt-row-meta { font-size:10px;color:var(--text-2);margin-top:2px;line-height:1.3;word-break:break-word; }
  .gantt-cells { display:flex; }
  .gantt-month-cells { display:flex;border-right:1px solid var(--border); }
  .gantt-month-cells:last-child { border-right:none; }
  .gantt-box { width:64px;flex-shrink:0;min-height:38px;display:flex;align-items:center;justify-content:center;border-right:1px solid #eee;cursor:pointer;transition:background .12s; }
  .gantt-box:last-child { border-right:none; }
  .gantt-box:hover { background:#fff8f5; }
  .gantt-box.done { background:#d1fae5; }
  .gantt-box::after { content:'';width:16px;height:16px;border-radius:3px;border:1.5px solid #d0d0cc;display:block;transition:border-color .12s; }
  .gantt-box.done::after { background:#059669;border-color:#059669; }
  .gantt-box:hover:not(.done)::after { border-color:var(--accent); }
  .gantt-box-inert { width:64px;flex-shrink:0;min-height:38px;border-right:1px solid rgba(0,0,0,0.05); }
  .gantt-box-inert:last-child { border-right:none; }
  .gantt-date-cell { width:64px; }
  .gantt-row-goal  { background:#ede9fe; border-left:3px solid #5b4cf5; }
  .gantt-row-obj   { background:#e0f2fe; border-left:3px solid #0284c7; }
  .gantt-row-strat { background:#fef3c7; border-left:3px solid #d97706; }
  .gantt-row-tactic{ background:#f0fdf4; border-left:3px solid #059669; }
  /* Sticky label cells need explicit opaque backgrounds matching their
     row level — otherwise date cells bleed through during scroll. */
  .gantt-row-goal   .gantt-row-label { background:#ede9fe; }
  .gantt-row-obj    .gantt-row-label { background:#e0f2fe; }
  .gantt-row-strat  .gantt-row-label { background:#fef3c7; }
  .gantt-row-tactic .gantt-row-label { background:#f0fdf4; }
  .gantt-row:nth-child(even) .gantt-row-label { background:#fafaf9; }
  /* Level-specific bg wins over even-row bg when both apply (source order). */
  .gantt-row:nth-child(even).gantt-row-goal   .gantt-row-label { background:#ede9fe; }
  .gantt-row:nth-child(even).gantt-row-obj    .gantt-row-label { background:#e0f2fe; }
  .gantt-row:nth-child(even).gantt-row-strat  .gantt-row-label { background:#fef3c7; }
  .gantt-row:nth-child(even).gantt-row-tactic .gantt-row-label { background:#f0fdf4; }
  .gantt-year-ctrl { display:flex;align-items:center;gap:10px;margin-bottom:1.5rem; }
  .gantt-year-ctrl label { font-size:13px;color:var(--text-2);font-weight:500; }
  .gantt-year-ctrl select { border:1px solid var(--border-md);border-radius:var(--radius);padding:6px 10px;font-family:inherit;font-size:13px;background:var(--surface);cursor:pointer;outline:none; }
  .gantt-year-lbl { font-size:20px;font-weight:700;color:var(--text);margin-right:auto; }
  /* Weekly objectives panel */
  .weekly-obj-panel { margin-top:1.5rem; }
  .weekly-obj-title { font-size:14px;font-weight:700;color:var(--text);margin-bottom:1rem;letter-spacing:-0.2px; }
  .weekly-obj-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px; }
  .weekly-obj-week { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px; transition: border-color 200ms, box-shadow 200ms; }
  .weekly-obj-week.is-current-week { border-color: var(--brand, #6366f1); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15); }
  .weekly-obj-week-hdr { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-2);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border); }
  .weekly-obj-item { display:flex;align-items:flex-start;gap:6px;margin-bottom:6px; }
  .weekly-obj-dot { width:6px;height:6px;border-radius:50%;background:#0284c7;flex-shrink:0;margin-top:4px; }
  .weekly-obj-text { font-size:11px;color:var(--text);line-height:1.4; }
  .weekly-obj-goal-tag { font-size:9px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.3px; }
  @media(max-width:768px) { .gost-layout { grid-template-columns:1fr; } }


  /* ═══ LEAD FINDER ═══ */
/* ═══ LEAD FINDER STYLES ═══ */
.lf-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border: 1px solid var(--border-md);
  background: var(--surface); font-size: 11px;
  cursor: pointer; border-radius: 100px;
  color: var(--text-2); font-family: inherit;
  font-weight: 500;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
  white-space: nowrap;
}
@media (hover: hover) {
  .lf-chip:hover {
    border-color: var(--border-strong);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
}
.lf-chip:active { transform: translateY(0) scale(0.96); }
.lf-chip-on {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-hover);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--accent), inset 0 1px 0 rgba(255,255,255,0.4);
}

.lf-lead-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem;
  margin-bottom: 8px; cursor: pointer;
  transition: all 0.15s;
}
.lf-lead-card:hover {
  border-color: var(--accent-border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.lf-prox-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 100px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.02em;
}

.lf-role-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 3px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em;
}

.lf-section {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 8px;
  overflow: hidden;
}
.lf-section-header {
  padding: 10px 14px; display: flex;
  justify-content: space-between; align-items: center;
  cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--text); user-select: none;
  background: var(--surface);
}
.lf-section-header:hover { background: var(--bg); }
.lf-section-body { padding: 10px 12px 12px; background: var(--bg); }
.lf-caret {
  font-size: 12px; color: var(--text-3);
  transition: transform 0.15s;
}

/* ── LOGIN SCREEN ──────────────────────────────────────────────────────────── */
#login-screen {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(1200px 700px at 70% 20%, rgba(242, 107, 60, 0.18), transparent 60%),
    radial-gradient(900px 600px at 20% 80%, rgba(91, 80, 232, 0.18), transparent 60%),
    linear-gradient(135deg, #0c0a08 0%, #1c1410 50%, #0c0a08 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Slow-drifting orbs in the background — premium ambience without distracting. */
#login-screen::before,
#login-screen::after {
  content: '';
  position: absolute;
  width: 540px; height: 540px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.45;
  pointer-events: none;
}
#login-screen::before { background: var(--accent); top: -160px; right: -120px; animation: orb-drift 16s ease-in-out infinite; }
#login-screen::after  { background: var(--indigo); bottom: -180px; left: -140px; animation: orb-drift 20s ease-in-out infinite reverse; }
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.08); }
}
.login-box {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  width: 380px;
  max-width: 92vw;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.45),
    0 4px 16px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.login-logo { text-align: center; margin-bottom: 1.75rem; }
.login-logo-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}
.login-logo-text span {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.login-title { font-size: 24px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 0.35rem; letter-spacing: -0.02em; }
.login-sub { font-size: 13px; color: var(--text-3); text-align: center; margin-bottom: 1.75rem; }
.login-field { margin-bottom: 1rem; }
.login-field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); display: block; margin-bottom: 6px; }
.login-field input {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  border: 1.5px solid var(--border-md);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.login-field input:hover { border-color: var(--border-strong); }
.login-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-glow); }
.login-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 60%, var(--accent-hover) 100%);
  background-size: 140% 140%;
  background-position: 0% 50%;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 0.5rem;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(217, 83, 43, 0.30);
  transition:
    background-position var(--dur-slow) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .login-btn:hover {
    background-position: 100% 50%;
    box-shadow: 0 8px 28px rgba(217, 83, 43, 0.40);
    transform: translateY(-1px);
  }
}
.login-btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 8px rgba(217, 83, 43, 0.25); }
.login-btn.is-loading { pointer-events: none; opacity: 0.78; }
.login-btn.is-loading::after {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  margin-left: 8px;
  vertical-align: -2px;
  animation: spin 700ms linear infinite;
}
.login-error { font-size: 12px; color: var(--danger-text); text-align: center; margin-top: 0.85rem; min-height: 18px; }

/* ── App entry animations ───────────────────────────────────────────────────── */
@keyframes login-fade-up {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes app-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes login-logo-shimmer {
  0%, 100% { letter-spacing: 0.18em; }
  50%      { letter-spacing: 0.24em; }
}
.login-box { animation: login-fade-up 380ms cubic-bezier(0.16, 1, 0.3, 1); }
.login-logo-text { animation: login-logo-shimmer 3.2s ease-in-out infinite; }
.app.is-entering { animation: app-fade-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) {
  .login-box, .login-logo-text, .app.is-entering { animation: none !important; }
}

/* ── SIDEBAR PARTNER INFO ───────────────────────────────────────────────────── */
.partner-info { background: var(--bg); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.partner-name { font-size: 12px; font-weight: 600; color: var(--text); }
.partner-role { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; }
.logout-btn { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--border-md); background: transparent; font-size: 12px; font-weight: 500; color: var(--text-2); cursor: pointer; width: 100%; text-align: left; font-family: inherit; transition: all 0.15s; margin-top: 4px; }
.logout-btn:hover { background: var(--bg); color: #c0392b; border-color: #f4b89a; }

/* ── ADMIN PAGE ─────────────────────────────────────────────────────────────── */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 1.5rem; }
.partner-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.25rem; }
.partner-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
.partner-card-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; margin-bottom: 10px; }
.partner-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.partner-stat { background: var(--bg); border-radius: 6px; padding: 7px 10px; }
.partner-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 600; }
.partner-stat-val { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 2px; }
.admin-form { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.5rem; }
.admin-form-title { font-size: 14px; font-weight: 600; margin-bottom: 1rem; }
.partner-inactive { opacity: 0.5; }
.badge-role-admin { background: #e0e7ff; color: #3730a3; }
.badge-role-partner { background: #f1efe8; color: #5f5e5a; }

/* ── DEMO MODE ──────────────────────────────────────────────────────────────
   When the signed-in account is flagged isDemo:true, body.is-demo is set in
   real time by subscribeOwnConfig(). The 5,934 Lead Finder leads (the
   proprietary sales database) are blurred + non-selectable so demo prospects
   can see the workflow without harvesting real lead data. The rest of the
   workspace (clients, calculator, pricing, payment tracker, GOST) is fully
   populated with demo data and shown clearly to demonstrate the tool. */
body.is-demo .lf-sensitive {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* webkit-touch-callout blocks long-press-to-copy on iOS */
  -webkit-touch-callout: none;
  transition: filter 0.18s ease;
}
/* Small, unobtrusive demo indicator pinned to the bottom-right corner. */
body.is-demo::after {
  content: "🔍 Demo";
  position: fixed;
  right: 12px; bottom: 12px;
  z-index: 9000;
  padding: 5px 11px;
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  color: #78350f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid #fbbf24;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  pointer-events: none;
}

/* ── VIEW-AS BANNER ─────────────────────────────────────────────────────────── */
#viewas-banner {
  display: none; position: sticky; top: 0; z-index: 50;
  background: #fff3cd; border-bottom: 2px solid #f0a500;
  padding: 10px 2rem; display: none; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: #7a4800; margin: -2rem -2rem 1.5rem;
}
#viewas-banner .vab-left { display: flex; align-items: center; gap: 10px; }
#viewas-banner .vab-stats { font-size: 11px; font-weight: 400; color: #9a6000; }
.vab-exit { padding: 6px 14px; background: #7a4800; color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.vab-exit:hover { background: #5a3400; }

/* ── AI DEAL BRIEF ──────────────────────────────────────────────────────────
   Inline brief that renders inside the lead drawer after the AI button click.
   Loading state has an animated progress bar; success state has section cards. */
.lf-ai-brief-btn {
  background: linear-gradient(135deg, #4c1d95, #7c3aed);
  color: #fff;
  border-color: #6d28d9;
  font-weight: 600;
}
.lf-ai-brief-btn:hover { background: linear-gradient(135deg, #5b21b6, #8b5cf6); }

.lf-ai-brief {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #faf5ff 0%, #f5f3ff 100%);
  border: 1px solid #ddd6fe;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.06);
}
.lf-ai-brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.lf-ai-brief-title {
  font-size: 14px;
  font-weight: 700;
  color: #5b21b6;
  letter-spacing: -0.01em;
}
.lf-ai-brief-status {
  font-size: 11px;
  color: #6d28d9;
  font-weight: 500;
}
.lf-ai-brief-sources {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--text-3);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ddd6fe;
}
.lf-ai-brief-sources .src-ok { color: #047857; }
.lf-ai-brief-sources .src-warn { color: #b45309; }
.lf-ai-brief-sources .src-time { color: var(--text-3); margin-left: auto; }

.lf-ai-brief-section {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ede9fe;
  border-radius: 8px;
}
.lf-ai-brief-section:last-child { margin-bottom: 0; }
.lf-ai-brief-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6d28d9;
  font-weight: 700;
  margin-bottom: 6px;
}
.lf-ai-brief-section div, .lf-ai-brief-section ul {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.lf-ai-brief-section ul { margin: 0; padding-left: 18px; }
.lf-ai-brief-section li { margin-bottom: 4px; }

.lf-ai-brief-callopen {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #fbbf24;
}
.lf-ai-brief-callopen .lf-ai-brief-section-label { color: #92400e; }
.lf-ai-brief-callopen-text {
  font-size: 14px !important;
  font-weight: 500;
  color: #78350f !important;
  font-style: italic;
}

.lf-ai-brief-objection {
  margin-bottom: 8px;
  padding: 8px 10px;
  background: #faf5ff;
  border-left: 3px solid #a78bfa;
  border-radius: 4px;
}
.lf-ai-brief-objection:last-child { margin-bottom: 0; }
.lf-ai-brief-obj-q {
  font-size: 12px;
  color: var(--text);
  font-style: italic;
  margin-bottom: 4px;
}
.lf-ai-brief-obj-a {
  font-size: 12px;
  color: var(--text-2);
}

/* Fit score badge — all theme variables so it flips with dark mode. */
.lf-ai-brief-score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: 10px;
  margin-bottom: 14px;
}
.lf-ai-brief-score-num { font-size: 32px; font-weight: 800; line-height: 1; flex-shrink: 0; }
.lf-ai-brief-score-verdict { font-size: 14px; font-weight: 700; color: var(--text); }
.lf-ai-brief-score-reasons {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
}

/* Revex Opportunity box — indigo-tinted highlight. */
.lf-ai-brief-opp {
  background: linear-gradient(135deg, var(--indigo-soft), var(--surface));
  border-color: var(--indigo-border) !important;
}
.lf-ai-brief-opp-row { display: flex; gap: 8px; font-size: 13px; margin-bottom: 6px; align-items: baseline; }
.lf-ai-brief-opp-row:last-child { margin-bottom: 0; }
.lf-ai-brief-opp-row .k { font-weight: 700; color: var(--text-2); min-width: 92px; flex-shrink: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.lf-ai-brief-opp-row .v { color: var(--text); }

/* Equipment chips. */
.lf-ai-brief-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-ai-brief-chip {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--indigo-soft);
  color: var(--indigo);
  border: 1px solid var(--indigo-border);
  border-radius: 100px;
  font-weight: 600;
}

/* EPA Facility Match — labeled blocks + bulleted programs. */
.lf-ai-brief-epa-facility { font-size: 13px; font-weight: 700; color: var(--text); }
.lf-ai-brief-epa-sub {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); font-weight: 700; margin-top: 8px; margin-bottom: 3px;
}
.lf-ai-brief-epa-progs { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); }
.lf-ai-brief-epa-progs li { margin-bottom: 2px; }

/* Role intelligence two-column. */
.lf-ai-brief-role-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lf-ai-brief-role-cols .col-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); font-weight: 700; margin-bottom: 5px;
}
.lf-ai-brief-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  background: var(--surface-3);
  color: var(--text-2);
  border-radius: 6px;
  margin: 0 4px 4px 0;
}
@media (max-width: 520px) {
  .lf-ai-brief-role-cols { grid-template-columns: 1fr; }
}

/* Loading state */
.lf-ai-brief-loading-bar {
  height: 4px;
  background: #ede9fe;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 14px;
}
.lf-ai-brief-loading-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #c4b5fd, #8b5cf6);
  background-size: 200% 100%;
  animation: lf-ai-shimmer 1.6s ease-in-out infinite;
  width: 100%;
}
@keyframes lf-ai-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.lf-ai-brief-loading-steps {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.8;
  padding-left: 4px;
}
.lf-ai-brief-loading-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ddd6fe;
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}

/* Error state */
.lf-ai-brief-error {
  background: #fef2f2;
  border-color: #fecaca;
}
.lf-ai-brief-error .lf-ai-brief-title { color: #991b1b; }
.lf-ai-brief-error-body {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 8px;
}
.lf-ai-brief-error-title {
  font-size: 13px;
  font-weight: 600;
  color: #991b1b;
  margin-bottom: 4px;
}
.lf-ai-brief-error-detail {
  font-size: 12px;
  color: var(--text-2);
  font-family: ui-monospace, monospace;
  word-break: break-word;
}

/* Dark-mode overrides for the AI Deal Brief. The light design above stays as
   intended in light mode; here we flip the hardcoded light backgrounds and
   accent text to dark-appropriate values so sections aren't white-on-white.
   Body text inside sections already uses var(--text)/var(--text-2), which
   flip automatically — only the hardcoded colors need overriding. */
[data-theme="dark"] .lf-ai-brief {
  background: linear-gradient(180deg, #1a1726 0%, #161320 100%);
  border-color: var(--indigo-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .lf-ai-brief-title,
[data-theme="dark"] .lf-ai-brief-status,
[data-theme="dark"] .lf-ai-brief-section-label { color: #c4b5fd; }
[data-theme="dark"] .lf-ai-brief-sources,
[data-theme="dark"] .lf-ai-brief-loading-note { border-color: var(--indigo-border); }
[data-theme="dark"] .lf-ai-brief-sources .src-ok { color: #6ee7b7; }
[data-theme="dark"] .lf-ai-brief-sources .src-warn { color: #fcd34d; }
[data-theme="dark"] .lf-ai-brief-section {
  background: var(--surface-2);
  border-color: var(--border-md);
}
[data-theme="dark"] .lf-ai-brief-callopen {
  background: linear-gradient(135deg, #2e2410, #3a2e15);
  border-color: #7c5a14;
}
[data-theme="dark"] .lf-ai-brief-callopen .lf-ai-brief-section-label { color: #fcd34d; }
[data-theme="dark"] .lf-ai-brief-callopen-text { color: #fde68a !important; }
[data-theme="dark"] .lf-ai-brief-objection {
  background: var(--surface-2);
  border-left-color: var(--indigo);
}
[data-theme="dark"] .lf-ai-brief-loading-bar { background: var(--surface-3); }
[data-theme="dark"] .lf-ai-brief-error { background: #2a1717; border-color: #6a2020; }
[data-theme="dark"] .lf-ai-brief-error .lf-ai-brief-title,
[data-theme="dark"] .lf-ai-brief-error-title { color: #fca5a5; }
[data-theme="dark"] .lf-ai-brief-error-body {
  background: var(--surface-2);
  border-color: #6a2020;
}

/* Proximity context box (lead drawer). Light mode: pastel chip with dark
   label (--pc/--pbg passed inline per tier). Dark mode: themed dark surface
   with a brightened label + left border (--pcd), since the original dark
   label colors are unreadable on a dark surface. */
.lf-prox-box {
  background: var(--pbg);
  border: 1px solid var(--pc);
  border-left: 3px solid var(--pc);
}
.lf-prox-box-label { color: var(--pc); }
.lf-prox-box-tip { color: #1a1a1a; }
[data-theme="dark"] .lf-prox-box {
  background: var(--surface-2);
  border: 1px solid var(--border-md);
  border-left: 3px solid var(--pcd);
}
[data-theme="dark"] .lf-prox-box-label { color: var(--pcd); }
[data-theme="dark"] .lf-prox-box-tip { color: var(--text); }

/* ── ACTION NOTIFICATIONS — in-site replacement for browser alert/confirm ────
   Slides up from the bottom-center, premium card with optional action button.
   Auto-dismisses after a few seconds. Multiple stack vertically. */
.notify-host {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  align-items: center;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.notify {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-width: 320px;
  max-width: 560px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transform: translateY(28px) scale(0.96);
  opacity: 0;
  transition:
    transform 360ms var(--ease),
    opacity 240ms var(--ease),
    box-shadow var(--dur) var(--ease);
  will-change: transform, opacity;
}
.notify.is-shown { transform: translateY(0) scale(1); opacity: 1; }
.notify.is-leaving { transform: translateY(28px) scale(0.96); opacity: 0; }
.notify-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
}
.notify-icon svg { width: 16px; height: 16px; display: block; }
.notify-success .notify-icon { background: var(--success-soft); color: var(--success); }
.notify-info    .notify-icon { background: var(--info-soft);    color: var(--info); }
.notify-warning .notify-icon { background: var(--warning-soft); color: var(--warning-text); }
.notify-danger  .notify-icon { background: var(--danger-soft);  color: var(--danger); }
.notify-msg { flex: 1; min-width: 0; line-height: 1.45; }
.notify-action {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border: none;
  color: #fff;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  box-shadow: 0 1px 4px var(--accent-glow);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.notify-action:hover { transform: translateY(-1px); box-shadow: 0 4px 14px var(--accent-glow); }
.notify-action:active { transform: translateY(0) scale(0.97); }
.notify-close {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.notify-close:hover { background: var(--surface-3); color: var(--text); }
/* Subtle progress bar showing time remaining before auto-dismiss. */
.notify-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transform-origin: left center;
  transform: scaleX(1);
}
.notify { position: relative; overflow: hidden; }
.notify-success .notify-progress { background: linear-gradient(90deg, #34d399, var(--success)); }
.notify-warning .notify-progress { background: linear-gradient(90deg, #fbbf24, var(--warning)); }
.notify-danger  .notify-progress { background: linear-gradient(90deg, #fb7185, var(--danger)); }
.notify-info    .notify-progress { background: linear-gradient(90deg, #38bdf8, var(--info)); }
@media (prefers-reduced-motion: reduce) {
  .notify { transition: opacity 200ms; }
  .notify-progress { display: none; }
}

/* ── CONFIRM MODAL — destructive-action confirmation that replaces window.confirm()
   Centered card with backdrop blur. Default-focus is on Cancel for safety; Esc
   cancels, Enter confirms only for non-destructive prompts. */
.confirm-bg {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15, 13, 10, 0.45);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.confirm-bg.is-shown { opacity: 1; }
.confirm-bg.is-leaving { opacity: 0; }
.confirm-box {
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-xl);
  padding: 1.6rem 1.6rem 1.25rem;
  width: 440px; max-width: 100%;
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 280ms var(--ease), opacity 220ms var(--ease);
}
.confirm-bg.is-shown .confirm-box { transform: translateY(0) scale(1); opacity: 1; }
.confirm-bg.is-leaving .confirm-box { transform: translateY(8px) scale(0.98); opacity: 0; }
.confirm-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  margin-bottom: 14px;
}
.confirm-icon svg { width: 22px; height: 22px; }
.confirm-default .confirm-icon { background: var(--info-soft); color: var(--info); }
.confirm-danger  .confirm-icon { background: var(--danger-soft); color: var(--danger); }
.confirm-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.confirm-body {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}
.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.btn-danger {
  background: linear-gradient(135deg, #f87171 0%, var(--danger) 60%, #b91c1c 100%);
  background-size: 140% 140%;
  background-position: 0% 50%;
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.20), 0 4px 14px rgba(239, 68, 68, 0.18);
}
@media (hover: hover) {
  .btn-danger:hover {
    background-position: 100% 50%;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.30), 0 12px 32px rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
    border-color: transparent;
  }
}
.btn-danger:focus-visible {
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.30), 0 12px 32px rgba(239, 68, 68, 0.25), 0 0 0 3px rgba(239, 68, 68, 0.30);
}
@media (prefers-reduced-motion: reduce) {
  .confirm-bg, .confirm-box { transition: opacity 200ms; transform: none; }
}

/* ── DANGER ZONE — admin-page reset/wipe controls ─────────────────────── */
.danger-zone {
  margin-top: 32px;
  padding: 18px 20px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-lg);
  background: rgba(239, 68, 68, 0.04);
}
.danger-zone-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--danger);
  margin-bottom: 12px;
}
.danger-zone-body {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.danger-zone-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
}
.danger-zone-sub {
  font-size: 13px;
  color: var(--text-2);
  max-width: 640px;
  line-height: 1.5;
}

/* ── SEGMENTED TOGGLE — used by Downtime Calculator job-type picker. */
.seg-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
}
.seg-toggle-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  text-align: center;
}
.seg-toggle-btn:hover { color: var(--text); }
.seg-toggle-btn.is-active {
  background: var(--surface);
  color: var(--accent-hover);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
}
.seg-toggle-btn:active { transform: scale(0.98); }

/* ── PRICING SCENARIOS — capture-rate slider with labeled zones ──────────────
   Three zones (Conservative 1-14, Standard 15-24, Premium 25-50). The slider
   color tints with the active zone, the percent display and zone-name chip
   pulse on each change. */
.capture-display {
  text-align: right;
  flex-shrink: 0;
}
.capture-pct {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}
.capture-pct.is-pulse {
  animation: capture-pulse 240ms var(--ease);
}
@keyframes capture-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}
.capture-zone-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-3);
  margin-top: 4px;
  transition: color var(--dur) var(--ease);
}
.capture-slider-wrap { position: relative; padding-top: 8px; }
.capture-zones {
  display: grid;
  grid-template-columns: 14fr 10fr 26fr; /* matches 1-14 / 15-24 / 25-50 widths on a 1-50 scale */
  gap: 0;
  margin-bottom: 8px;
}
.capture-zone {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text-3);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor: default;
  border-right: 1px solid var(--border);
}
.capture-zone:last-child { border-right: none; }
.capture-zone-name { font-weight: 700; }
.capture-zone-range { font-size: 9px; opacity: 0.75; margin-top: 2px; letter-spacing: 0.04em; }
.capture-zone.is-active {
  background: var(--accent-light);
  color: var(--accent-hover);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.capture-zone-conservative.is-active { background: #dbeafe; color: #1e3a8a; box-shadow: inset 0 -2px 0 var(--info); }
.capture-zone-premium.is-active      { background: #fce7f3; color: #831843; box-shadow: inset 0 -2px 0 #db2777; }
/* The range input itself — custom styled track + thumb. */
.capture-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 100px;
  background: linear-gradient(to right,
    var(--info) 0%,    var(--info) 28%,
    var(--accent) 28%, var(--accent) 48%,
    #db2777 48%,       #db2777 100%);
  outline: none;
  margin: 4px 0 6px;
  cursor: pointer;
  transition: filter var(--dur) var(--ease);
}
.capture-slider:hover { filter: saturate(1.2); }
.capture-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px var(--accent-glow), 0 0 0 4px rgba(217, 83, 43, 0.10);
  cursor: grab;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.capture-slider:hover::-webkit-slider-thumb { transform: scale(1.10); }
.capture-slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.18); box-shadow: 0 4px 16px var(--accent-glow), 0 0 0 6px rgba(217, 83, 43, 0.14); }
.capture-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px var(--accent-glow);
  cursor: grab;
}
.capture-slider.zone-conservative::-webkit-slider-thumb { border-color: var(--info); box-shadow: 0 2px 8px rgba(14, 165, 233, 0.36), 0 0 0 4px rgba(14, 165, 233, 0.10); }
.capture-slider.zone-standard::-webkit-slider-thumb     { border-color: var(--accent); box-shadow: 0 2px 8px var(--accent-glow), 0 0 0 4px rgba(217, 83, 43, 0.10); }
.capture-slider.zone-premium::-webkit-slider-thumb      { border-color: #db2777; box-shadow: 0 2px 8px rgba(219, 39, 119, 0.36), 0 0 0 4px rgba(219, 39, 119, 0.10); }
.capture-ticks {
  position: relative;
  height: 12px;
  width: 100%;
  pointer-events: none;
}
.capture-ticks span {
  position: absolute;
  top: 0;
  width: 1px;
  background: var(--border-md);
}
.capture-ticks span.tick-major { height: 8px; width: 1.5px; background: var(--text-3); }
.capture-ticks span.tick-minor { height: 4px; }

/* ── PRICING SCENARIOS — saved scenario chips ────────────────────────────────
   Click to recall. Star indicates the committed quote. */
.scenario-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur-fast) var(--ease);
  text-align: left;
  font-family: inherit;
}
@media (hover: hover) {
  .scenario-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
  }
}
.scenario-chip:active { transform: translateY(0) scale(0.98); }
.scenario-chip-name { font-size: 12px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 4px; }
.scenario-chip-rate { font-size: 10px; color: var(--text-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.scenario-chip-price { font-size: 16px; font-weight: 700; color: var(--accent); margin-top: 4px; font-variant-numeric: tabular-nums; }
.scenario-chip-meta { font-size: 10px; color: var(--text-3); margin-top: 2px; }
.scenario-chip.is-committed {
  border-color: var(--success);
  background: linear-gradient(180deg, var(--success-soft), var(--surface));
  box-shadow: 0 0 0 1px var(--success), var(--shadow-sm);
}
.scenario-chip.is-committed .scenario-chip-name::before {
  content: '★';
  color: var(--success);
  font-size: 13px;
}
.scenario-chip-delete {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
  box-shadow: var(--shadow-sm);
}
.scenario-chip-delete:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); transform: scale(1.10); }
.scenario-chip-delete:active { transform: scale(0.94); }

/* ── PAYMENT TRACKER — client-centric ledger ────────────────────────────────
   Each client with a committed quote gets one row. Click to expand and reveal
   the per-payment ledger + Add Payment form. Status pill is auto-derived from
   total collected vs. deposit-required vs. quoted. */
.pt-clients { display: flex; flex-direction: column; gap: 10px; }
.pt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease);
}
.pt-card:hover { box-shadow: var(--shadow); }
.pt-card.is-open { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.pt-card-summary {
  display: grid;
  /* Partner view: business + status + 4 stats (Quoted, Collected,
     Outstanding, Your payout) + chevron = 7 columns. */
  grid-template-columns: 2fr repeat(5, 1fr) 36px;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.pt-card-summary:hover { background: var(--surface-2); }
/* Admin view adds a Revex cut column = 8 columns total. */
.pt-card.admin-view .pt-card-summary { grid-template-columns: 2fr repeat(6, 1fr) 36px; }
.pt-col-business { display: flex; flex-direction: column; min-width: 0; }
.pt-col-business .name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-col-business .meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.pt-col-stat { display: flex; flex-direction: column; align-items: flex-start; }
.pt-col-stat .lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-3); font-weight: 700; }
.pt-col-stat .val { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pt-col-stat .val.is-accent { color: var(--accent); }
.pt-col-stat .val.is-success { color: var(--success); }
.pt-col-stat .val.is-warning { color: var(--warning-text); }
.pt-col-status { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pt-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid transparent;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
}
.pt-status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.pt-status-NotInvoiced  { background: linear-gradient(180deg, #f5f3ed, #ece9e0); color: #4a4842; border-color: #d6d2c8; }
.pt-status-DepositPending { background: linear-gradient(180deg, #fed7aa, #fdba74); color: #7a2e00; border-color: #ea580c; }
.pt-status-DepositPaid    { background: linear-gradient(180deg, #fef08a, #fde047); color: #713f12; border-color: #ca8a04; }
.pt-status-FinalPending   { background: linear-gradient(180deg, #ddd6fe, #c4b5fd); color: #4c1d95; border-color: #8b5cf6; }
.pt-status-Paid           { background: linear-gradient(180deg, #6ee7b7, #34d399); color: #064e3b; border-color: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15); }
.pt-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--text-3);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.pt-card.is-open .pt-chevron { transform: rotate(180deg); color: var(--accent); }
.pt-card-summary:hover .pt-chevron { background: var(--surface-3); color: var(--text); }
/* Progress bar showing collected/quoted ratio. */
.pt-progress {
  height: 4px;
  background: var(--surface-3);
  border-radius: 100px;
  overflow: hidden;
  margin: 0 18px 8px;
}
.pt-progress-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width 480ms var(--ease);
}
.pt-card.is-paid .pt-progress-fill { background: linear-gradient(90deg, #34d399, var(--success)); }

/* Expanded ledger area */
.pt-ledger {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: none;
}
.pt-card.is-open .pt-ledger { display: block; animation: pt-ledger-in 240ms var(--ease); }
@keyframes pt-ledger-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pt-ledger-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-2); font-weight: 700; margin-bottom: 8px; }
.pt-pay-row {
  display: grid;
  grid-template-columns: 110px 110px 110px 1fr 28px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  margin-bottom: 6px;
}
.pt-pay-row .pay-amt { font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }
.pt-pay-row .pay-type { font-weight: 600; color: var(--text); }
.pt-pay-row .pay-method { color: var(--text-2); font-size: 11px; }
.pt-pay-row .pay-notes { color: var(--text-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-pay-delete {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-3);
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 14px;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pt-pay-delete:hover { background: var(--danger-soft); color: var(--danger); }
.pt-pay-empty { padding: 16px; text-align: center; color: var(--text-3); font-size: 12px; font-style: italic; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); margin-bottom: 8px; }

.pt-add-form {
  display: grid;
  grid-template-columns: 110px 110px 110px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: linear-gradient(135deg, var(--accent-light), var(--surface));
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  margin-top: 8px;
}
.pt-add-form input, .pt-add-form select { padding: 6px 8px; font-size: 12px; }
.pt-add-form .btn { padding: 7px 14px; font-size: 12px; }
.pt-add-form label { display: none; }
.pt-add-row-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--accent-light);
  color: var(--accent-hover);
  border: 1px dashed var(--accent-border);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pt-add-row-toggle:hover { background: var(--accent-soft); transform: translateY(-1px); }

/* Archive + Delete row at the bottom of every expanded ledger. */
.pt-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.pt-card-actions .btn { padding: 6px 12px; font-size: 12px; }

/* "btn-danger-ghost" — danger intent without the loud red gradient.
   Just a red border + text on hover. Suits the destructive-but-confirmable
   Delete client action. */
.btn-danger-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger);
  font-weight: 600;
}
@media (hover: hover) {
  .btn-danger-ghost:hover {
    background: var(--danger-soft, rgba(239,68,68,0.10));
    border-color: var(--danger);
  }
}

.pt-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

@media (max-width: 880px) {
  .pt-card-summary { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .pt-card.admin-view .pt-card-summary { grid-template-columns: 1fr; }
  .pt-pay-row, .pt-add-form { grid-template-columns: 1fr 1fr; }
  .pt-chevron { justify-self: end; position: absolute; right: 12px; top: 12px; }
  .pt-card-summary { position: relative; }
}

/* Locked Committed Quote summary inside Proposal Builder — visually marks
   that the contract price isn't editable here; it's set in Pricing Scenarios. */
.pb-quote-lock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--accent-light), var(--surface));
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  margin-top: 6px;
}
.pb-quote-lock-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pb-quote-lock-row .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-2); font-weight: 600; }
.pb-quote-lock-row .val { font-size: 18px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ── PROPOSAL STATUS BAR — sits between header and the form/preview layout. */
.pb-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.pb-status-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pb-status-meta { font-size: 12px; color: var(--text-2); }
.pb-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pb-status-pill::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.pb-status-Draft    { background: linear-gradient(180deg, #f5f3ed, #ece9e0); color: #4a4842; border-color: #d6d2c8; }
.pb-status-Sent     { background: linear-gradient(180deg, #ddd6fe, #c4b5fd); color: #4c1d95; border-color: #a78bfa; }
.pb-status-Accepted { background: linear-gradient(180deg, #6ee7b7, #34d399); color: #064e3b; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
.pb-status-Rejected { background: linear-gradient(180deg, #fca5a5, #ef4444); color: #fff;     border-color: #b91c1c; }
.pb-status-Expired  { background: linear-gradient(180deg, #fed7aa, #fb923c); color: #7a2e00; border-color: #ea580c; }
.pb-status-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pb-status-actions .btn { font-size: 12px; padding: 6px 12px; }
.btn-success {
  background: linear-gradient(135deg, #34d399 0%, var(--success) 60%, #047857 100%);
  background-size: 140% 140%;
  background-position: 0% 50%;
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.20), 0 4px 14px rgba(16, 185, 129, 0.18);
}
@media (hover: hover) {
  .btn-success:hover {
    background-position: 100% 50%;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.30), 0 12px 32px rgba(16, 185, 129, 0.25);
    transform: translateY(-1px);
  }
}

/* Match the preview's status with a corner badge that overlays the preview. */
.pb-preview-status {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  pointer-events: none;
}
.pb-preview-status.is-Accepted { background: #064e3b; color: #d1fae5; border-color: #047857; }
.pb-preview-status.is-Rejected { background: #b91c1c; color: #fee2e2; border-color: #991b1b; }
.pb-preview-status.is-Expired  { background: #7a2e00; color: #fed7aa; border-color: #ea580c; }
.pb-preview-status.is-Sent     { background: #4c1d95; color: #ede9fe; border-color: #6d28d9; }
.pb-preview-status.is-Draft    { display: none; }

/* ── PROPOSAL BUILDER ────────────────────────────────────────────────────────
   Two-column layout: editable form on the left, glowing branded preview on
   the right. Preview pulses a soft accent glow continuously to feel alive. */
.pb-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 980px) { .pb-layout { grid-template-columns: 1fr; } }
.pb-form { display: flex; flex-direction: column; gap: 1rem; }
.pb-form .card { margin-bottom: 0; }
.pb-form textarea { min-height: 60px; resize: vertical; line-height: 1.5; }

/* The preview pane — a "sheet of paper" with breathing accent glow. */
.pb-preview-wrap {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  display: flex;
  justify-content: center;
}
.pb-preview-glow {
  position: absolute;
  inset: -22px;
  border-radius: 28px;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--accent-glow), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, var(--indigo-glow), transparent 70%);
  filter: blur(28px);
  opacity: 0.7;
  pointer-events: none;
  animation: pb-glow-pulse 5.5s ease-in-out infinite;
  z-index: 0;
}
@keyframes pb-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.04); }
}
.pb-preview {
  position: relative;
  z-index: 1;
  background: #ffffff;
  color: #16140f;
  border-radius: var(--radius-lg);
  padding: 2.25rem 2.25rem;
  width: 100%;
  max-width: 560px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.05),
    0 6px 20px rgba(0,0,0,0.08),
    0 24px 60px rgba(0,0,0,0.10);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  border: 1px solid rgba(15, 13, 10, 0.06);
  /* Slight tilt on hover for character — disabled if reduced motion. */
  transform: perspective(1200px) rotateX(0.4deg);
  transition: transform 480ms var(--ease), box-shadow 480ms var(--ease);
}
@media (hover: hover) {
  .pb-preview-wrap:hover .pb-preview {
    transform: perspective(1200px) rotateX(0deg) translateY(-2px);
    box-shadow:
      0 1px 2px rgba(0,0,0,0.06),
      0 8px 28px rgba(0,0,0,0.10),
      0 32px 80px rgba(0,0,0,0.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pb-preview-glow { animation: none; opacity: 0.5; }
  .pb-preview { transform: none; transition: none; }
}
[data-theme="dark"] .pb-preview {
  background: #fdfdfb;          /* keep proposal preview light even in dark mode — it's customer-facing */
  color: #16140f;
}

/* Inner preview structure */
.pb-prev-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 18px; border-bottom: 2px solid #f2efe9; margin-bottom: 18px; }
.pb-prev-logo { display: flex; flex-direction: column; }
.pb-prev-wordmark { font-size: 22px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; color: #16140f; }
.pb-prev-wordmark .x { color: var(--accent); }
.pb-prev-tagline { font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #8c887e; margin-top: 4px; }
.pb-prev-meta { text-align: right; font-size: 10px; color: #8c887e; line-height: 1.6; }
.pb-prev-meta strong { color: #16140f; }

.pb-prev-section { margin-bottom: 18px; }
.pb-prev-section-title { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.pb-prev-section-body { font-size: 12.5px; color: #16140f; white-space: pre-wrap; }
.pb-prev-h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #16140f; margin-bottom: 4px; line-height: 1.2; }
.pb-prev-sub { font-size: 11px; color: #5b574e; }
.pb-prev-investment {
  background: linear-gradient(135deg, #fff5ef, #fff);
  border: 1px solid #f4c2a4;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0 18px;
}
.pb-prev-investment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pb-prev-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.10em; color: #8c887e; font-weight: 700; }
.pb-prev-stat-val { font-size: 18px; font-weight: 800; color: #16140f; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pb-prev-stat-val.is-accent { color: var(--accent); }
.pb-prev-acceptance { margin-top: 24px; padding-top: 16px; border-top: 1px solid #f2efe9; }
.pb-prev-sig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.pb-prev-sig-line { border-bottom: 1px solid #d6d2c8; height: 28px; }
.pb-prev-sig-cap  { font-size: 9px; color: #8c887e; text-transform: uppercase; letter-spacing: 0.10em; margin-top: 4px; }
.pb-prev-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid #f2efe9; font-size: 9px; color: #8c887e; text-align: center; letter-spacing: 0.06em; }
.pb-prev-detail-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.pb-prev-detail-row { display: grid; grid-template-columns: 160px 1fr; gap: 14px; align-items: baseline; padding: 4px 0; border-bottom: 1px dotted #ece9e0; }
.pb-prev-detail-row:last-child { border-bottom: none; }
.pb-prev-detail-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em; color: #8c887e; font-weight: 700; }
.pb-prev-detail-val { font-size: 12px; color: #16140f; white-space: pre-wrap; }
.pb-prev-incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pb-prev-bullets { margin: 6px 0 0 16px; padding: 0; }
.pb-prev-bullets li { font-size: 12px; color: #16140f; margin-bottom: 3px; line-height: 1.5; }

/* Ship-it dropdown menu */
.pb-ship-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: var(--shadow-md);
  min-width: 220px;
  z-index: 50;
  animation: pb-menu-in 200ms var(--ease);
}
@keyframes pb-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pb-ship-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease);
}
.pb-ship-menu button:hover { background: var(--surface-3); }
.pb-ship-menu .nav-icon { color: var(--accent); margin-right: 6px; }

/* ── ADMIN STATS ROW ─────────────────────────────────────────────────────────── */
.admin-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 1.5rem; }
.admin-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; }
.admin-stat-card .asc-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); font-weight: 600; }
.admin-stat-card .asc-val { font-size: 26px; font-weight: 800; color: var(--text); margin-top: 3px; letter-spacing: -0.5px; }
.admin-stat-card .asc-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.partner-card-actions { display: flex; gap: 5px; margin-top: 10px; }
.partner-card-actions .btn { flex: 1; font-size: 11px; padding: 5px 6px; }
.partner-pipeline-bar { height: 4px; background: var(--border); border-radius: 100px; margin: 8px 0 4px; overflow: hidden; }
.partner-pipeline-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #e8693a); border-radius: 100px; transition: width 0.4s; }
.partner-status-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.psr-badge { font-size: 10px; padding: 2px 7px; border-radius: 100px; font-weight: 600; white-space: nowrap; }


  /* ── DARK MODE ────────────────────────────────────────────────────────── */
  /* ── DARK MODE ──────────────────────────────────────────────────────────────
     Deeper backgrounds, slightly oversaturated accents to compensate for the
     dimmer baseline. Same design system, calibrated for night use. */
  [data-theme="dark"] {
    --bg:        #0c0b0e;
    --bg-2:      #131217;
    --surface:   #16151b;
    --surface-2: #1c1b21;
    --surface-3: #221f28;
    --border:        rgba(255,255,255,0.07);
    --border-md:     rgba(255,255,255,0.13);
    --border-strong: rgba(255,255,255,0.22);
    --text:   #efece6;
    --text-2: #a8a39a;
    --text-3: #6d6862;
    --accent:        #ff6f3c;
    --accent-2:      #ff8a5b;
    --accent-hover:  #e25a25;
    --accent-light:  #2a1611;
    --accent-soft:   #3b1e16;
    --accent-border: #6a3018;
    --accent-glow:   rgba(255, 111, 60, 0.36);
    --indigo:        #7c70ff;
    --indigo-soft:   #1e1c33;
    --indigo-border: #3a3460;
    --indigo-glow:   rgba(124, 112, 255, 0.36);
    /* Semantic palette — dark variants. Without these, every box that uses
       a --*-soft background or --*-text color stayed light in dark mode
       (notifications, scenario chips, pricing banners, etc.). Soft = dark
       tinted surface; text = light enough to read on it. */
    --success-soft:  #15271f;
    --success-text:  #6ee7b7;
    --warning-soft:  #2a2210;
    --warning-text:  #fcd34d;
    --danger-soft:   #2a1717;
    --danger-text:   #fca5a5;
    --info-soft:     #112733;
    --info-text:     #7dd3fc;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow:    0 1px 3px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.50), 0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.55), 0 24px 48px rgba(0, 0, 0, 0.55);
    --shadow-glow:   0 0 0 3px var(--accent-glow);
    --shadow-glow-2: 0 0 0 3px var(--indigo-glow);
  }
  [data-theme="dark"] body { background: var(--bg); }
  [data-theme="dark"] .sidebar,
  [data-theme="dark"] .panel,
  [data-theme="dark"] .mobile-nav,
  [data-theme="dark"] .panel-head { background: var(--surface); }
  [data-theme="dark"] .billing-table th { background: var(--bg); }
  [data-theme="dark"] .billing-table tr:hover td { background: var(--surface-2); }
  [data-theme="dark"] .login-box {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
  }
  [data-theme="dark"] .login-field input { background: var(--surface-2); }
  /* Status badges read fine on dark — they're already designed with their
     own backgrounds — but soften the inset highlight that's tuned for white. */
  [data-theme="dark"] .badge { box-shadow: inset 0 -1px 0 rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.08); }
  /* Dark mode: REVEX wordmark switches to flat white (gradient washes out
     against the deep background). Same treatment in sidebar + login screen.
     The sidebar logo is an inlined PNG image — inverted to white via filter. */
  [data-theme="dark"] .logo span,
  [data-theme="dark"] .login-logo-text span {
    background: none;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
  }
  /* Sidebar logo in dark mode: invert + 180° hue-rotate keeps the orange
     accent (the "X" + "Partner" wordmarks) while flipping the dark text
     to white. Standard "dark-mode any image" trick. */
  [data-theme="dark"] .sidebar img {
    filter: invert(1) hue-rotate(180deg);
  }

  /* Dark-mode GOST: pastel headers were unreadable (light text on light pastel).
     Replace with darker tints of the same hue + lighten text on tactic text. */
  [data-theme="dark"] .gost-goal-header  { background:#2a2440;border-bottom-color:#3a3360;color:var(--text); }
  [data-theme="dark"] .gost-obj-header   { background:#1a2e3f;border-bottom-color:#234a66;color:var(--text); }
  [data-theme="dark"] .gost-strat-header { background:#3a2e15;border-bottom-color:#5a4622;color:var(--text); }
  [data-theme="dark"] .gost-tactic-row   { background:#1d2e25;border-color:#2e4a3a;color:var(--text); }
  [data-theme="dark"] .gost-tactic-row .gost-item-text { color:#a7e3c0 !important; }
  [data-theme="dark"] .gost-empty-state  { color:var(--text-2); }
  [data-theme="dark"] .gost-del-btn:hover { color:#f87171;background:#3a1818; }

  /* Dark-mode Gantt: row backgrounds were light pastels. Replace with
     darker tints + readable text colors. The sticky label cells inherit
     the same backgrounds so they stay opaque during horizontal scroll. */
  [data-theme="dark"] .gantt-row:nth-child(even)        { background:#1a1a1f; }
  [data-theme="dark"] .gantt-row:nth-child(even) .gantt-row-label { background:#1a1a1f; }
  [data-theme="dark"] .gantt-row-goal                  { background:#2a2440; }
  [data-theme="dark"] .gantt-row-obj                   { background:#1a2e3f; }
  [data-theme="dark"] .gantt-row-strat                 { background:#3a2e15; }
  [data-theme="dark"] .gantt-row-tactic                { background:#1d2e25; }
  [data-theme="dark"] .gantt-row-goal   .gantt-row-label { background:#2a2440; }
  [data-theme="dark"] .gantt-row-obj    .gantt-row-label { background:#1a2e3f; }
  [data-theme="dark"] .gantt-row-strat  .gantt-row-label { background:#3a2e15; }
  [data-theme="dark"] .gantt-row-tactic .gantt-row-label { background:#1d2e25; }
  [data-theme="dark"] .gantt-row .gantt-row-name        { color:var(--text); }
  [data-theme="dark"] .gantt-row-goal   .gantt-row-name { color:#c4b5fd !important; }
  [data-theme="dark"] .gantt-row-obj    .gantt-row-name { color:#7dd3fc !important; }
  [data-theme="dark"] .gantt-row-strat  .gantt-row-name { color:#fcd34d !important; }
  [data-theme="dark"] .gantt-row-tactic .gantt-row-name { color:#a7e3c0 !important; }
  [data-theme="dark"] .gantt-box                        { border-right-color:rgba(255,255,255,0.05); }
  [data-theme="dark"] .gantt-box:hover                  { background:rgba(255,255,255,0.04); }
  [data-theme="dark"] .gantt-box.done                   { background:rgba(5,150,105,0.25); }
  [data-theme="dark"] .gantt-box::after                 { border-color:#3a3a40; }
  [data-theme="dark"] .gantt-month-title                { background:var(--bg);color:var(--text-2); }
  [data-theme="dark"] .gantt-date-cell                  { color:var(--text-3); }
  [data-theme="dark"] .gantt-header-row                 { background:var(--surface); }
  [data-theme="dark"] .gantt-label-col                  { background:var(--surface); }

  /* Dark-mode Payment Tracker cards. */
  [data-theme="dark"] .pt-card                          { background:var(--surface);border-color:var(--border); }
  [data-theme="dark"] .pt-card-summary:hover            { background:var(--surface-2); }
  [data-theme="dark"] .pt-status-NotInvoiced            { background:linear-gradient(180deg, #2a2824, #1f1d1a);color:#bcb8ad;border-color:#3a3530; }
  [data-theme="dark"] .pt-status-DepositPending         { background:linear-gradient(180deg, #422010, #2e1808);color:#fed7aa;border-color:#7a3500; }
  [data-theme="dark"] .pt-status-DepositPaid            { background:linear-gradient(180deg, #3a2e15, #2a2010);color:#fde68a;border-color:#7a5a1a; }
  [data-theme="dark"] .pt-status-FinalPending           { background:linear-gradient(180deg, #2a1f48, #1f173a);color:#ddd6fe;border-color:#4c1d95; }
  [data-theme="dark"] .pt-status-Paid                   { background:linear-gradient(180deg, #0f3528, #0a2a1f);color:#6ee7b7;border-color:#10b981; }

  /* Dark-mode Next-step badge on client cards. */
  [data-theme="dark"] .c-next                           { background:#3a2818;border-color:#5a3826;color:#f4c4a8; }
  .dark-toggle { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);cursor:pointer;padding:4px 12px;margin-bottom:4px; }
  .dark-toggle:hover { color:var(--text-2); }

  /* ── LEADERBOARD ──────────────────────────────────────────────────────── */
  .lb-table { width:100%;border-collapse:collapse;font-size:13px; }
  .lb-table th { text-align:left;padding:10px 12px;font-size:10px;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-2);border-bottom:2px solid var(--border-md);background:var(--bg); }
  .lb-table td { padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle; }
  .lb-table tr:hover td { background:var(--accent-light); }
  .lb-rank { font-size:18px;font-weight:700;color:var(--accent);width:40px;text-align:center; }
  .lb-name { font-weight:600;font-size:14px; }
  .lb-val { font-weight:600;font-size:15px;color:var(--text); }
  .lb-sub { font-size:11px;color:var(--text-3); }
  .lb-you { background:var(--accent-light) !important; }
  .lb-medal { font-size:20px; }

  /* ── LOADING SPINNER ──────────────────────────────────────────────────── */
  .loading-overlay { display:flex;align-items:center;justify-content:center;padding:3rem;gap:12px;color:var(--text-2);font-size:13px; }
  .spinner { width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* ── FOLLOW-UP BADGE ──────────────────────────────────────────────────── */
  /* Follow-up badge removed entirely. The "Due today" panel at the
     top of the Lead Generator page is the source of truth for what
     needs follow-up — a sidebar count was redundant. */

  /* ── ACTIVITY FEED ────────────────────────────────────────────────────── */
  .activity-feed { max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);margin-top:12px; }
  .af-item { padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px;display:flex;align-items:center;gap:8px; }
  .af-item:last-child { border-bottom:none; }
  .af-time { color:var(--text-3);font-size:10px;white-space:nowrap; }
  .af-text { flex:1; }
  .af-icon { font-size:14px; }

  /* ── Dark-toggle as a real button (was a div) ──────────────────────────── */
  button.dark-toggle { background:none; border:none; width:100%; text-align:left; font:inherit; }
  button.dark-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius); }

  /* ── Save toast (bottom-right) ─────────────────────────────────────────── */
  .save-toast {
    position: fixed; right: 16px; bottom: 16px; z-index: 1000;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 14px; font-size: 12px; font-weight: 600;
    box-shadow: 0 6px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
    transform: translateY(0); opacity: 1;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
    pointer-events: none;
  }
  .save-toast.is-hidden { transform: translateY(8px); opacity: 0; }
  .save-toast.is-saving { color: var(--text-2); }
  .save-toast.is-saved  { color: #2f7a13; border-color: #c8e0a8; background: #f3faec; }
  .save-toast.is-error  { color: #b03a16; border-color: #f4c8b6; background: #fff3ee; }
  [data-theme="dark"] .save-toast.is-saved { color:#9fd97a; background:#1f2b18; border-color:#3b5a2a; }
  [data-theme="dark"] .save-toast.is-error { color:#f4a484; background:#2a1c17; border-color:#5a3b2c; }
  .save-toast .st-spinner {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: st-spin 700ms linear infinite;
  }
  .save-toast .st-check { font-weight: 700; }
  .save-toast .st-dot {
    width: 8px; height: 8px; border-radius: 50%; background: currentColor;
    box-shadow: 0 0 0 0 currentColor; animation: st-pulse 1.4s ease-out infinite;
  }
  @keyframes st-spin { to { transform: rotate(360deg); } }
  @keyframes st-pulse { 0% { box-shadow: 0 0 0 0 rgba(176,58,22,0.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(176,58,22,0); } }
  @media (prefers-reduced-motion: reduce) {
    .save-toast { transition: none; }
    .save-toast .st-spinner, .save-toast .st-dot { animation: none; }
  }

  /* ── Empty-state polish ────────────────────────────────────────────────── */
  .empty-state .empty-icon { font-size: 36px; margin-bottom: 10px; opacity: 0.85; }
  .empty-state .empty-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
  .empty-state .empty-sub { font-size: 12px; color: var(--text-3); }

  /* ── Settings page ─────────────────────────────────────────────────────── */
  .settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 16px;
  }
  .settings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .settings-h {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-2);
  }
  .settings-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
  }
  .settings-row .settings-lbl {
    font-weight: 600;
    color: var(--text-2);
    font-size: 12px;
  }
  .settings-row input[type="text"],
  .settings-row input[type="number"],
  .settings-row select,
  .settings-card > input[type="password"] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text);
    font: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }
  .settings-row input:focus,
  .settings-row select:focus,
  .settings-card > input[type="password"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(217, 90, 43, 0.15);
  }
  .settings-row input[disabled] { color: var(--text-3); cursor: not-allowed; }
  .settings-row-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  .settings-row-checkbox input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer;
  }
  @media (max-width: 640px) {
    .settings-grid { grid-template-columns: 1fr; }
  }

  /* ════════════════════════════════════════════════════════════════════════
     PHASE 5 — UI POLISH ROUND 1
     ════════════════════════════════════════════════════════════════════════ */

  /* Page entry transition: fade + soft up-translate. No blur — caused
     occasional rendering hiccups on some hardware where children inherited
     the filter. Stagger removed to keep things stable; we can re-add it
     after we're sure the page is rock solid. */
  @keyframes page-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .page.active { animation: page-enter 220ms var(--ease) both; }

  /* Status badges: inset shadow for depth + smooth color transitions + pop on render. */
  .badge {
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
    transition: background 200ms ease, color 200ms ease;
    display: inline-flex; align-items: center; gap: 4px;
    font-variant-numeric: tabular-nums;
  }
  @keyframes badge-pop {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  .client-card .badge { animation: badge-pop 280ms cubic-bezier(0.16, 1, 0.3, 1); }

  /* Real-time "claimed by another partner" pulse — runs once on the new DOM
     node when applyClientsFilter detects a remote claim change. */
  @keyframes claim-ring {
    0%   { box-shadow: 0 0 0 0 rgba(217, 90, 43, 0.45); }
    100% { box-shadow: 0 0 0 8px rgba(217, 90, 43, 0); }
  }
  .client-card.just-claimed { animation: page-enter 180ms cubic-bezier(0.16, 1, 0.3, 1), claim-ring 700ms ease-out; }

  /* Client card hover/press — refines the existing hover with a real lift. */
  .client-card { transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, border-color 200ms ease; }
  @media (hover: hover) {
    .client-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04); border-color: var(--accent-border); }
  }
  .client-card:active { transform: translateY(0); transition-duration: 80ms; }

  /* Buttons: hover lift, press snap, primary glow. */
  .btn { transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease; }
  @media (hover: hover) {
    .btn:not(:disabled):hover { transform: translateY(-1px); }
    .btn-primary:not(:disabled):hover { box-shadow: 0 4px 14px rgba(217, 90, 43, 0.25); }
  }
  .btn:not(:disabled):active { transform: scale(0.97); transition-duration: 80ms; }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Loading spinner modifier for async actions. Usage: btn.classList.add('btn-loading') */
  .btn-loading { position: relative; pointer-events: none; padding-right: 32px !important; }
  .btn-loading::after {
    content: ''; position: absolute; right: 10px; top: 50%; margin-top: -7px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: btn-spin 700ms linear infinite;
  }
  @keyframes btn-spin { to { transform: rotate(360deg); } }

  /* Focus rings — global :focus-visible policy. Inputs get a soft glow. */
  button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius);
  }
  input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(217, 90, 43, 0.15);
  }
  .input-error { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important; }

  /* Tabular numbers — metric values, leaderboard cells, admin stats. */
  .metric-val, .partner-stat-val, .lb-val, .asc-val, .gost-stat-num,
  .c-meta-val { font-variant-numeric: tabular-nums; }

  /* Side panel: refine the slide-in curve and add a header divider shadow
     that grows when content scrolls beneath it. */
  .panel { transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1) !important; }
  .panel-head { transition: box-shadow 200ms ease; }
  .panel.is-scrolled .panel-head { box-shadow: 0 1px 12px rgba(0,0,0,0.06); }
  .panel { scroll-behavior: smooth; }

  /* Empty-state polish (icon size already set above; add subtle entry animation) */
  .empty-state { animation: page-enter 220ms cubic-bezier(0.16, 1, 0.3, 1); }

  /* Mobile: full-screen panel; larger touch targets; disable hover effects on touch. */
  @media (max-width: 640px) {
    .panel { width: 100vw !important; left: 0 !important; right: 0 !important; }
    .nav-btn, .mobile-nav-btn, .btn { min-height: 44px; }
  }

  /* Reduced motion — respect the OS-level preference. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ════════════════════════════════════════════════════════════════════════
     PHASE 6 — Skeletons, kanban DnD, sidebar collapse, mobile indicator
     ════════════════════════════════════════════════════════════════════════ */

  /* Skeleton shimmer — shape-matching placeholders for cold-start loads.
     Two-tone gradient sweep + subtle base tint pulse for that "loading is
     alive" feel. */
  .skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--bg-2), var(--surface-3), var(--bg-2));
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-tint 2.4s var(--ease) infinite;
  }
  .skeleton::after {
    content: ''; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    animation: skeleton-sweep 1.6s var(--ease-out) infinite;
  }
  [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1d1d22, #25252b, #1d1d22); background-size: 200% 100%; }
  [data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
  @keyframes skeleton-sweep { to { transform: translateX(100%); } }
  @keyframes skeleton-tint  { 0%,100% { background-position: 0% 0%; } 50% { background-position: 100% 0%; } }
  .skeleton-row { display: flex; gap: 10px; align-items: center; }
  .skeleton-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    margin-bottom: 10px;
  }
  .skeleton-line { height: 12px; margin: 6px 0; }
  .skeleton-line.lg { height: 16px; width: 50%; }
  .skeleton-line.md { height: 12px; width: 35%; }
  .skeleton-line.sm { height: 10px; width: 70%; }
  .skeleton-pill { height: 18px; width: 90px; border-radius: 100px; display: inline-block; vertical-align: middle; }

  /* Kanban drag-and-drop. */
  .pipe-item { transition: transform 140ms ease, box-shadow 200ms ease, opacity 160ms ease; cursor: grab; }
  .pipe-item:active { cursor: grabbing; }
  .pipe-item.is-dragging { opacity: 0.4; transform: scale(0.97); }
  .pipe-col { transition: background 180ms ease, border-color 180ms ease; border: 1px dashed transparent; border-radius: var(--radius); }
  .pipe-col.is-dropping { background: rgba(217, 90, 43, 0.06); border-color: var(--accent); }

  /* Sidebar collapsed/expanded — large screens only. */
  .sidebar-collapse-btn {
    position: absolute; top: 10px; right: -12px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--border);
    cursor: pointer; font-size: 12px; line-height: 1; color: var(--text-2);
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 200ms ease, color 160ms ease;
    z-index: 10;
  }
  .sidebar { position: relative; transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1), padding 220ms ease; }
  @media (min-width: 1024px) {
    .sidebar-collapse-btn { display: inline-flex; }
    .sidebar.is-collapsed { width: 64px; padding: 1.25rem 0.5rem; }
    .sidebar.is-collapsed .nav-btn { justify-content: center; padding: 8px 0; }
    .sidebar.is-collapsed .nav-btn > *:not(.step-num),
    .sidebar.is-collapsed .partner-info,
    .sidebar.is-collapsed .login-logo-text,
    .sidebar.is-collapsed #dark-mode-label,
    .sidebar.is-collapsed .logout-btn span,
    .sidebar.is-collapsed #sidebar-partner-info { display: none; }
    .sidebar.is-collapsed .logout-btn,
    .sidebar.is-collapsed .dark-toggle { justify-content: center; padding: 6px 0; }
    .sidebar.is-collapsed .sidebar-collapse-btn { transform: rotate(180deg); }
  }

  /* Mobile bottom-nav: orange dot indicator beneath the active button. */
  .mobile-nav { position: fixed; }
  .mobile-nav-inner { position: relative; }
  .mobile-nav-indicator {
    position: absolute; bottom: 2px; left: 0;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); opacity: 0;
    transform: translateX(0);
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
    pointer-events: none;
  }

  /* Active nav-btn left-border accent (sidebar). */
  .nav-btn { position: relative; transition: background 160ms ease, color 160ms ease; }
  .nav-btn::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 3px; border-radius: 2px; background: var(--accent);
    transform: scaleY(0); transform-origin: center;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-btn.active::before { transform: scaleY(1); }

  /* Side panel read-only mode — engaged when the user opens a client they
     can't edit (unclaimed → must claim first; or another partner's claim).
     The claim section stays interactive so the user can claim. */
  .panel.is-readonly .panel-body input,
  .panel.is-readonly .panel-body select,
  .panel.is-readonly .panel-body textarea {
    pointer-events: none;
    background: var(--bg) !important;
    color: var(--text-2) !important;
    cursor: not-allowed;
  }
  .panel.is-readonly .panel-body button:not([data-readonly-keep]) {
    opacity: 0.45;
    pointer-events: none;
  }
  .panel.is-readonly #panel-claim-section,
  .panel.is-readonly #panel-claim-section * {
    pointer-events: auto;
    opacity: 1 !important;
  }