/* atomic*HR app stylesheet — extracted from index.html (frontend modularization).
   Token-driven; sectioned. Served at /static/css/app.css with ?v= cache-busting. */
  :root {
    /* App tokens ALIASED to the atomic-HR design system (token CSS lives under static/css/tokens).
       Var NAMES are kept so all component CSS resolves unchanged; VALUES are DS-driven and
       dark-mode aware. The dup-named shadow and action vars are intentionally omitted here so the
       effects and colors token files provide them (identical values, with theme support).
       NOTE: never write a bare star-slash or curly braces in this comment — a stray comment-close
       here previously ate the --purple declaration below and blanked every filled button. */
    --purple: var(--hr-purple);
    --purple-light: var(--hr-purple-100);
    --purple-dark: var(--hr-purple-700);
    --purple-300: var(--hr-purple-300);
    --accent-2: var(--hr-purple-300);
    --black: var(--atomic-black);
    --gray-900: var(--ink-900);
    --gray-800: var(--ink-800);
    --gray-700: var(--ink-700);
    --gray-600: var(--ink-600);
    --gray-500: var(--ink-500);
    --gray-400: var(--ink-400);
    --gray-300: var(--line-300);
    --gray-200: var(--paper-200);
    --gray-100: var(--paper-100);
    --gray-50:  var(--paper-50);
    --line: var(--border-subtle);
    --bg: var(--bg-page);
    --card: var(--bg-surface);
    --card-2: var(--bg-surface-2);
    --yellow: var(--energy-yellow);
    --dot-green:  var(--orbit-green);
    --dot-pink:   var(--orbit-pink);
    --dot-orange: var(--orbit-orange);
    --dot-cyan:   var(--orbit-blue);
    --dot-purple: var(--hr-purple);
    --mkt-accent: var(--orbit-orange);
    --mkt-accent-2: var(--orbit-blue);
    --mkt-soft: var(--warning-bg);
    --green: var(--success);
    --green-soft: var(--success-bg);
    --amber: var(--warning);
    --amber-soft: var(--warning-bg);
    --red: var(--danger);
    --blue: var(--info);
    --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg);
    --r-xl: var(--radius-xl); --r-pill: var(--radius-pill);
    --ease: var(--ease-out);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* SYSTEMIC: every button in the app is fully custom-styled (class/id/inline) — none rely on
     native form-control chrome. WebKit suppresses a CSS background-color on buttons in their BASE
     state unless native appearance is removed, which made filled buttons (.new-list-btn,
     .btn-confirm, etc.) render white-on-white and only show their color on :hover. Reset all
     buttons once here so a background always paints in every state, on every screen. */
  button { -webkit-appearance: none; appearance: none; }
  /* View transition: subtle fade when switching main tabs */
  main[id^="view"] { animation: viewIn .2s var(--ease); }
  @keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
  /* ── A11y baseline (C42 / WCAG AA) ────────────────────────────────────────
     1. Visible focus on EVERY interactive element. We use :focus-visible so
        mouse users don't see rings; only keyboard / a11y-tech users do.
     2. Honor prefers-reduced-motion — disable transitions/animations site-wide
        for users who need it (vestibular disorders, motion sickness).
     3. .visually-hidden = screen-reader-only text (used to add semantic labels
        to icon-only buttons / color-only signals without changing visuals).
     4. .skip-link = keyboard skip-to-main-content target. */
  :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 4px;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001s !important;
      scroll-behavior: auto !important;
    }
  }
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: absolute; top: -100px; left: 16px; padding: 10px 14px; background: var(--black);
    color: var(--white); font-weight: 700; border-radius: 6px; z-index: 9999; text-decoration: none;
    transition: top .15s;
  }
  .skip-link:focus { top: 16px; }
  body { font-family: var(--font-sans); background: var(--bg); color: var(--black); min-height: 100vh; -webkit-font-smoothing: antialiased; letter-spacing: 0; }
  .page-title, .save-modal-title, .logo-text, .result-name, .modal-title,
  .new-list-form-title, .swipe-title, .camp-modal-title, .od-section-title,
  .cf-section, .market-title, .sl-card-name, .side-section-label,
  .stage .s-nm, .search-card-title, h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
  }
  /* inline SVG icons (ic() helper) — inherit text color + size, align with text */
  .ico { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.14em; display: inline-block; }
  /* heart toggle — outline by default, filled when the button has .saved (or .heart-fill) */
  .heart { width: 1em; height: 1em; vertical-align: -0.14em; display: inline-block; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; fill: none; }
  .save-card-btn.saved .heart, .heart.heart-fill { fill: currentColor; }

  /* ── Header ── */
  header {
    background: color-mix(in srgb, var(--card) 82%, transparent);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 0 22px; height: 64px; display: flex; align-items: center;
    justify-content: space-between; position: sticky; top: 0; z-index: 100;
  }
  .logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
  .logo-mark {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .logo-mark svg { width: 38px; height: 38px; }
  .logo-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .logo-text { font-size: 19px; font-weight: 800; color: var(--black); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
  .logo-hr { color: var(--purple); }
  .logo-tagline { display: block; font-size: 10.5px; color: var(--gray-500); font-weight: 500; letter-spacing: .01em; line-height: 1.2; white-space: nowrap; }

  .tab-nav {
    display: flex; gap: 2px; background: var(--gray-100);
    padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--line);
  }
  .tab {
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 8px 15px; border: none; background: none; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--gray-800);
    border-radius: var(--r-pill); transition: all .16s var(--ease);
  }
  .tab svg { width: 15px; height: 15px; opacity: .85; }
  .tab:hover { color: var(--black); }
  .tab.active { background: var(--card); color: var(--purple); box-shadow: var(--shadow-sm); }

  .header-right { display: flex; align-items: center; gap: 12px; }
  .status-pill {
    display: flex; align-items: center; gap: 7px;
    background: var(--gray-100); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 6px 13px;
    font-size: 12px; font-weight: 600; color: var(--gray-800);
  }
  .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
  }
  .dot.building { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); animation: pulse 1.1s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

  .icon-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--card); cursor: pointer; display: flex; align-items: center;
    justify-content: center; color: var(--gray-800); transition: all .16s var(--ease);
  }
  .icon-btn svg { width: 17px; height: 17px; }
  .icon-btn:hover { color: var(--black); border-color: var(--gray-300); box-shadow: var(--shadow-sm); }

  .user-chip {
    display: flex; align-items: center; gap: 8px;
    background: var(--gray-100); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 4px 8px 4px 5px;
    font-size: 13px; font-weight: 600; color: var(--gray-800);
  }
  .user-chip .avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--white); font-size: 12px; font-weight: 700;
    background: var(--purple);
  }
  .logout-btn {
    background: none; border: none; cursor: pointer; color: var(--gray-500);
    display: flex; align-items: center; padding: 2px; border-radius: 6px;
    transition: color .15s;
  }
  .logout-btn svg { width: 15px; height: 15px; }
  .logout-btn:hover { color: var(--red); }

  /* ── LinkedIn sender presence (header) ── */
  .sender-presence {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 6px 12px;
    font-size: 12.5px; font-weight: 600; color: var(--gray-800);
    transition: border-color .15s, box-shadow .15s;
  }
  .sender-presence:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
  .sender-presence .sp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .sp-dot.up   { background: var(--green, #2fa25b); }
  .sp-dot.down { background: var(--amber, #d3922b); }
  .sender-presence.some-down { border-color: var(--amber, #d3922b); }
  .sender-presence-pop {
    position: absolute; top: 58px; right: 16px; z-index: 300; width: 320px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,.16)); padding: 10px 0;
  }
  .sender-presence-pop .spp-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--gray-500); padding: 2px 16px 8px;
  }
  .spp-row {
    display: flex; align-items: center; gap: 9px; padding: 8px 16px; font-size: 13px;
  }
  .spp-row + .spp-row { border-top: 1px solid var(--gray-100); }
  .spp-row .sp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .spp-row .spp-name { font-weight: 600; color: var(--gray-800); flex: 1; min-width: 0; }
  .spp-row .spp-meta { color: var(--gray-500); font-size: 12px; white-space: nowrap; }
  .spp-foot { padding: 8px 16px 2px; font-size: 11.5px; color: var(--gray-500); }

  /* ── Main layout ── */
  main { max-width: 920px; margin: 0 auto; padding: 40px 20px 80px; }
  main#viewInsights { max-width: 1120px; }
  @keyframes insTabSlide { from { opacity:.5; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
  .ins-pane-enter { animation: insTabSlide .2s ease both; }

  .page-title { font-size: 32px; font-weight: 800; color: var(--black); margin-bottom: 6px; letter-spacing: -0.02em; }
  .page-sub { font-size: 14px; color: var(--gray-500); margin-bottom: 26px; line-height: 1.6; font-weight: 500; }

  /* ── Role-workspace shell (sidebar + stage rail) — re-parents the old 6 tabs ── */
  body { padding-left: 236px; }
  header { display: none; }                        /* empty after logo/tabs/settings moved to sidebar */
  header .tab-nav { display: none !important; }   /* old tab bar replaced by sidebar + rail (kept in DOM for showTab) */
  header .logo { display: none; }                 /* logo now lives in the sidebar */
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; width: 236px; z-index: 120;
    background: var(--card); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; overflow-y: auto;
  }
  .side { transition: width .2s var(--ease); }
  .side-head { position: relative; display: flex; align-items: center; }
  .side .logo { padding: 16px 16px 12px; flex: 1; min-width: 0; }
  /* collapse toggle — fixed so the sidebar's overflow can't clip it; sits on the border */
  .side-toggle {
    position: fixed; top: 24px; left: 223px; z-index: 140;
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--card); color: var(--gray-600); cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
    transition: left .2s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
  }
  body.side-collapsed .side-toggle { left: 51px; }
  .side-toggle:hover { color: var(--purple); border-color: var(--purple); background: var(--card); }
  .side-toggle svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
  .side-chip {
    margin: 4px 12px 8px; padding: 11px 12px; border: 1.5px solid var(--purple);
    border-radius: 14px; background: color-mix(in srgb, var(--purple) 7%, transparent);
    cursor: pointer; text-align: left; width: auto; font-family: inherit;
  }
  .side-chip .tt {
    display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .4px; color: var(--purple); background: var(--card);
    border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-bottom: 5px;
  }
  .side-chip b { display: block; font-size: 14px; color: var(--black); }
  .side-chip small { color: var(--gray-500); font-size: 12px; }
  .side-group { padding: 6px 8px; }
  .side-label {
    font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--gray-500); padding: 8px 10px 4px;
  }
  .side-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
    cursor: pointer; color: var(--gray-800); font-weight: 600; font-size: 13.5px;
    border: none; background: none; width: 100%; text-align: left; font-family: inherit;
  }
  .side-item svg { width: 17px; height: 17px; flex: 0 0 17px; }
  .side-item { position: relative; transition: background .14s, color .14s; }
  .side-item:hover { background: var(--gray-100); color: var(--black); }
  .side-item.active { background: color-mix(in srgb, var(--purple) 10%, transparent); color: var(--purple); font-weight: 700; }
  .side-item.active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--purple); }
  .side-badge { margin-left: auto; background: var(--purple); color: var(--white); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
  /* Sidebar list items */
  .side-list-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 18px; border-radius: 8px;
    cursor: pointer; color: var(--gray-600); font-size: 12.5px; font-weight: 500;
    border: none; background: none; width: 100%; text-align: left; font-family: inherit;
    transition: background .12s, color .12s; white-space: nowrap; overflow: hidden;
  }
  .side-list-item:hover { background: var(--gray-100); color: var(--black); }
  .side-list-item.active { background: color-mix(in srgb, var(--purple) 10%, transparent); color: var(--purple); font-weight: 700; }
  .side-list-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
  .side-list-dot.active { background: var(--success); }
  .side-list-dot.idle { background: var(--gray-300); }
  .side-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .side-list-ct { font-size: 10px; color: var(--gray-400); margin-left: auto; flex: 0 0 auto; }

  /* Unified list detail view */
  .ld-header {
    display: flex; align-items: center; gap: 16px; padding: 0 0 14px;
    border-bottom: 1px solid var(--line); margin-bottom: 0;
  }
  .ld-header .page-title { font-size: 18px; }
  .ld-role-badge {
    font-size: 11px; background: color-mix(in srgb, var(--purple) 10%, transparent);
    color: var(--purple); padding: 3px 10px; border-radius: 8px; font-weight: 700;
    max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: default;
  }
  .ld-status-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  }
  .ld-status-dot.active { background: var(--success); }
  .ld-status-dot.idle { background: var(--gray-300); }
  .ld-tabs {
    display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 16px;
    position: sticky; top: 70px; z-index: 30; background: var(--bg);
  }
  .ld-tab {
    padding: 10px 18px; font-size: 13px; color: var(--gray-500); cursor: pointer;
    border: none; background: none; font-family: inherit; font-weight: 600;
    border-bottom: 2.5px solid transparent; transition: color .12s;
  }
  .ld-tab:hover { color: var(--gray-800); }
  .ld-tab.active { color: var(--purple); border-bottom-color: var(--purple); }
  .ld-tab-ct { font-size: 11px; color: var(--gray-400); margin-left: 3px; }
  .ld-tab.active .ld-tab-ct { color: var(--purple); }

  .ld-outreach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  .ld-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  }
  .ld-card h3 { font-size: 13px; font-weight: 700; color: var(--gray-800); margin: 0 0 10px; }
  .ld-stat-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
  .ld-stat-label { color: var(--gray-500); }
  .ld-stat-val { font-weight: 600; color: var(--gray-800); }
  .ld-seq-step {
    display: flex; align-items: center; gap: 8px; padding: 7px 0;
    border-bottom: 1px solid var(--line); font-size: 12.5px;
  }
  .ld-seq-step:last-child { border-bottom: none; }
  .ld-step-num {
    width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex: 0 0 22px;
    background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple);
  }
  .ld-ch-pill { font-size: 10px; padding: 1px 7px; border-radius: 8px; font-weight: 600; }
  .ld-ch-email { background: var(--info-bg); color: var(--info); }
  .ld-ch-linkedin { background: var(--purple-light); color: var(--purple-dark); }
  .ld-ch-other { background: var(--gray-100); color: var(--gray-600); }
  .ld-step-day { font-size: 10px; color: var(--gray-400); margin-left: auto; }
  .ld-window-bar {
    background: var(--gray-50); border-radius: 8px; padding: 10px 12px;
    font-size: 11.5px; color: var(--gray-500); margin-top: 12px; line-height: 1.5;
  }
  .ld-analytics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
  .ld-metric {
    background: var(--gray-50); border-radius: 10px; padding: 14px; text-align: center;
  }
  .ld-metric-num { font-size: 22px; font-weight: 700; color: var(--gray-900); }
  .ld-metric-label { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
  .ld-empty {
    text-align: center; padding: 48px 24px; color: var(--gray-500);
  }
  .ld-empty-icon { font-size: 32px; margin-bottom: 8px; }

  .ld-pattern-card {
    border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px 14px;
    margin-bottom: 10px; background: var(--white); transition: border-color .15s;
  }
  .ld-pattern-card:hover { border-color: var(--brand-300); }
  .ld-pattern-active { border-color: var(--brand-500); background: var(--brand-50, var(--purple-light)); }
  .ld-pattern-field { font-size:12px; color:var(--gray-600); margin:4px 0; line-height:1.45; }
  .ld-pattern-field strong { color:var(--gray-700); font-size:11.5px; }
  .ld-pattern-field[contenteditable=true] { outline:none; border-bottom:1px dashed var(--brand-300); }
  .ld-pattern-actions { display:flex; gap:6px; align-items:center; }
  .ld-pattern-actions button { font-size:11px; padding:2px 8px; }

  .ld-cand-header {
    display: flex; align-items: center; gap: 8px; padding: 6px 0;
    font-size: 11px; font-weight: 700; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .3px;
    border-bottom: 1.5px solid var(--line);
  }
  .ld-cand-row {
    display: flex; align-items: center; gap: 8px; padding: 10px 0;
    border-bottom: 1px solid var(--line); font-size: 12.5px;
  }
  .ld-cand-row:hover { background: var(--gray-50); }
  .ld-cand-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
    background: color-mix(in srgb, var(--purple) 12%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--purple);
  }
  /* Truncate instead of wrapping to one-word-per-line when the name column gets narrow
     (the fixed Contact/Stage/Fit/Actions columns squeeze it at smaller widths). */
  .ld-cand-name { font-weight: 600; color: var(--gray-900); font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ld-cand-sub { font-size: 11px; color: var(--gray-400);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ld-stage-pill {
    font-size: 10.5px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
    display: inline-block;
  }
  .ld-stage-pill.stage-new { background: var(--purple-light); color: var(--purple-dark); }
  .ld-stage-pill.stage-outreach { background: var(--amber-soft); color: var(--warning); }
  .ld-stage-pill.stage-replied { background: var(--info-bg); color: var(--info); }
  .ld-stage-pill.stage-interested { background: var(--green-soft); color: var(--success); }
  .ld-stage-pill.stage-process { background: var(--purple-light); color: var(--purple-dark); }
  .ld-stage-pill.stage-hired { background: var(--green-soft); color: var(--success); }

  .side-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 6px; }
  /* account chip in the sidebar foot (moved out of the now-removed header) */
  .side-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
  .side-user .avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 11px; font-weight: 700; background: var(--purple); }
  .side-user #sideUserName { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-logout { background: none; border: none; cursor: pointer; color: var(--gray-500); display: flex; padding: 4px; border-radius: 6px; transition: color .15s; }
  .side-logout svg { width: 16px; height: 16px; }
  .side-logout:hover { color: var(--red); }

  .railbar {
    position: sticky; top: 0; z-index: 90; background: var(--card);
    border-bottom: 1px solid var(--line); padding: 0 22px;
  }
  .rail { display: flex; gap: 0; max-width: 920px; margin: 0 auto; }
  .stage {
    flex: 0 0 auto; min-width: 148px; border: none; background: none; cursor: pointer;
    text-align: left; padding: 10px 16px 11px; border-bottom: 3px solid transparent;
    font-family: inherit; position: relative;
  }
  .stage .s-num { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--gray-500); }
  .stage .s-nm { display: block; font-size: 15px; font-weight: 700; color: var(--gray-800); line-height: 1.25; }
  .stage .s-ct { display: block; font-size: 11.5px; color: var(--gray-500); }
  .stage:hover { background: var(--gray-100); }
  /* each phase carries its own electron color (the workflow as a colorful journey) */
  .stage { --sc: var(--purple); }
  .stage[data-stage="market"]   { --sc: var(--dot-orange); }
  .stage[data-stage="source"]   { --sc: var(--dot-green); }
  .stage[data-stage="outreach"] { --sc: var(--dot-pink); }
  .stage[data-stage="measure"]  { --sc: var(--dot-cyan); }
  .stage .s-num::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sc); margin-right: 6px; vertical-align: 1px; }
  .stage { transition: background .14s; }
  .stage.active { border-bottom-color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, transparent); }
  .stage.active .s-num, .stage.active .s-nm { color: var(--sc); }
  .stage.active .s-nm { font-weight: 800; }
  .stage:not(:last-child)::after { content: "›"; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 19px; font-weight: 700; }
  .source-subs { display: flex; gap: 6px; max-width: 920px; margin: 0 auto; padding: 0 0 8px; }
  .sub-pill {
    font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--card);
    border-radius: 999px; padding: 4px 12px; cursor: pointer; color: var(--gray-800); font-family: inherit;
  }
  .sub-pill.active { background: var(--black); color: var(--white); border-color: var(--black); }

  /* ── collapsed sidebar (desktop only) ── */
  @media (min-width: 861px) {
    body.side-collapsed { padding-left: 64px; }
    body.side-collapsed .side { width: 64px; }
    body.side-collapsed .logo-words,
    body.side-collapsed .side-label,
    body.side-collapsed .side-item-label,
    body.side-collapsed .side-chip { display: none; }
    body.side-collapsed .side .logo { justify-content: center; padding: 16px 0 12px; gap: 0; }
    body.side-collapsed .side-item { justify-content: center; padding: 9px 0; }
    body.side-collapsed .side-toggle svg { transform: rotate(180deg); }
    body.side-collapsed .side-badge { position: absolute; top: 3px; right: 9px; margin: 0; transform: scale(.72); }
    body.side-collapsed .side-item { position: relative; }
    body.side-collapsed .side-user { justify-content: center; padding: 8px 0; }
    body.side-collapsed .side-logout { display: none; }
  }

  @media (max-width: 860px) {
    body, body.side-collapsed { padding-left: 0; }
    .side-toggle { display: none; }
    .side { position: static; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid var(--line); }
    .side .logo { padding: 10px 14px; }
    .side-chip { display: none; }
    .side-group { padding: 4px; }
    .side-foot { margin: 0 0 0 auto; }
    .railbar { top: 0; }
    .rail { overflow-x: auto; }
  }

  /* ── Search box ── */
  .search-card {
    background: var(--card); border: 1px solid var(--gray-200); border-radius: var(--r-xl);
    padding: 24px; box-shadow: 0 8px 28px -10px rgba(17,17,17,.14), 0 2px 6px -2px rgba(17,17,17,.07); margin-bottom: 22px;
  }
  /* Market (Step 1) re-skins the shared search card from brand-purple to the
     orange "Market" electron, so the aggregate-stats tool is unmistakably NOT
     the candidate search. Overriding the accent vars cascades to button,
     focus rings, chips and the sparkle icon — no per-element overrides needed. */
  #viewSearch.market-mode {
    --purple: var(--mkt-accent);          /* var(--orbit-orange) orange */
    --purple-dark: #d3922b;               /* darker orange (hover/pressed) */
    --purple-light: var(--mkt-soft);      /* var(--amber-soft) soft orange surface */
    --accent-2: var(--yellow);            /* warm orange→gold gradient partner */
  }
  #viewSearch.market-mode .page-title { color: var(--mkt-accent); }
  /* When the candidate index is empty, the search form can only return zero
     results — dim and lock it so the "Build index" banner is the single CTA. */
  .search-card.index-gated { opacity: .5; filter: grayscale(.35); pointer-events: none; user-select: none; position: relative; }
  /* Textarea label + AI affordance */
  .qa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; flex-wrap: wrap; }
  .qa-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--black); }
  .qa-label svg { width: 16px; height: 16px; color: var(--purple); flex: none; }
  .qa-sub { font-size: 12px; color: var(--gray-700); font-weight: 500; }
  .qa-wrap { position: relative; }
  .qa-count { position: absolute; right: 12px; bottom: 11px; font-size: 11px; color: var(--gray-600); font-variant-numeric: tabular-nums; pointer-events: none; background: var(--card-2); padding: 0 4px; border-radius: 4px; }
  textarea {
    width: 100%; border: 1.5px solid var(--gray-300); border-radius: var(--r-md);
    padding: 14px 16px 26px; font-size: 15px; font-family: inherit;
    resize: vertical; min-height: 140px; line-height: 1.6; color: var(--black);
    outline: none; transition: border-color .15s, box-shadow .15s; background: var(--card-2);
  }
  textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 16%, transparent); }
  textarea::placeholder { color: var(--gray-400); }

  .filters {
    display: flex; gap: 14px 18px; margin-top: 16px; flex-wrap: wrap; align-items: flex-end;
    background: var(--card-2); border: 1px solid var(--gray-200); border-radius: var(--r-md); padding: 15px 16px;
  }
  .fg { display: flex; flex-direction: column; gap: 5px; }
  .fg label { font-size: 11px; color: var(--gray-700); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
  .fg input, .fg select {
    border: 1.5px solid var(--gray-300); border-radius: 8px; padding: 8px 11px; height: 38px;
    font-size: 13px; font-family: inherit; outline: none; background: var(--white); color: var(--black);
    transition: border-color .15s, box-shadow .15s; cursor: pointer;
  }
  .fg select {
    -webkit-appearance: none; appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 13px;
  }
  .fg input { width: 130px; }
  /* Unset filters read lighter than active ones, so the applied constraints stand out */
  .fg input:placeholder-shown { border-color: var(--gray-200); background: var(--card-2); color: var(--gray-500); }
  .fg input:not(:placeholder-shown) { border-color: var(--gray-400); font-weight: 600; }
  .fg.is-set select { border-color: var(--gray-400); font-weight: 600; }
  .fg input:focus, .fg select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 13%, transparent); }

  .search-btn {
    margin-left: auto; padding: 11px 28px; color: var(--white);
    background: var(--action);
    border: none; border-radius: var(--r-pill); font-size: 14px; font-weight: 700;
    font-family: var(--font-display);
    cursor: pointer; transition: background 120ms var(--ease), box-shadow 120ms var(--ease), transform 120ms var(--ease);
    white-space: nowrap; letter-spacing: -.01em; box-shadow: var(--shadow-sm);
  }
  .search-btn:hover { background: var(--action-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .search-btn:disabled { background: var(--gray-400); cursor: not-allowed; transform: none; box-shadow: none; }

  .category-row {
    display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap;
  }
  .category-label { font-size: 11px; font-weight: 600; color: var(--gray-700); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
  .category-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .cat-pill {
    font-size: 12.5px; font-weight: 600; padding: 5px 13px; border-radius: 20px;
    border: 1.5px solid var(--gray-300); background: var(--white); color: var(--gray-600);
    cursor: pointer; transition: all .15s; user-select: none;
  }
  .cat-pill:hover { border-color: var(--purple); color: var(--purple); background: color-mix(in srgb, var(--purple) 8%, var(--white)); }
  .cat-pill.active { border-color: var(--purple); background: var(--purple); color: var(--white); font-weight: 700; box-shadow: 0 1px 3px color-mix(in srgb, var(--purple) 32%, transparent); }
  .cat-pill.active:hover { background: var(--purple-dark, var(--purple)); color: var(--white); }

  .examples { margin-top: 12px; font-size: 12px; color: var(--gray-500); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .examples-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-700); }
  .examples-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--gray-200); }
  .ex-plus { font-weight: 700; opacity: .65; margin-right: 1px; }
  .filters-hint { margin: 14px 0 6px; font-size: 12px; color: var(--gray-700); display: flex; align-items: center; gap: 6px; }
  .filters-hint::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dot-purple, var(--purple)); }
  .example-chip {
    display: inline-flex; align-items: center;
    padding: 4px 11px; border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--purple) 18%, var(--white));
    background: color-mix(in srgb, var(--purple) 6%, var(--white));
    color: var(--purple-dark, var(--purple)); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background .12s, border-color .12s;
    white-space: nowrap;
  }
  .example-chip:hover { background: color-mix(in srgb, var(--purple) 13%, var(--white)); border-color: var(--purple); }
  /* Learn-from-your-saves panel */
  .saved-signals { margin: 6px 0 2px; padding: 11px 13px; border: 1px solid var(--gray-200, var(--gray-200));
    border-radius: 12px; background: linear-gradient(180deg, var(--purple-light), var(--white)); }
  .ss-head { font-size: 12.5px; color: var(--gray-700, var(--gray-700)); margin-bottom: 8px; }
  .ss-sub { color: var(--gray-400, var(--gray-400)); font-weight: 400; }
  .ss-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .ss-lbl { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gray-400, var(--gray-400)); margin-right: 2px; min-width: 64px; }
  .ss-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--purple-300); background: var(--white); color: var(--hr-purple); font: inherit; font-size: 12px;
    font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
  .ss-chip:hover { background: var(--purple-light); border-color: var(--hr-purple); }
  .ss-chip-on { background: var(--hr-purple); color: var(--white); border-color: var(--hr-purple); }
  .ss-chip-on:hover { background: var(--purple-dark); color: var(--white); }
  .ss-picker { font: inherit; font-size: 12px; font-weight: 600; color: var(--purple-dark); border: 1px solid var(--purple-300); border-radius: 8px; padding: 2px 6px; background: var(--white); }
  .cc-missing-warn { margin-top: 10px; padding: 9px 13px; border: 1px solid var(--amber-soft); background: var(--amber-soft); color: var(--warning); border-radius: 9px; font-size: 12.5px; line-height: 1.45; }
  .cc-noemail-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--amber-soft); color: var(--warning); white-space: nowrap; }

  /* ── Results ── */
  #results { display: flex; flex-direction: column; gap: 12px; }

  .summary-bar {
    font-size: 13px; color: var(--gray-500); margin-bottom: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  }
  .summary-bar b { color: var(--black); }
  .sb-counts { display: flex; flex-direction: column; gap: 1px; }
  .sb-main { font-size: 14px; color: var(--gray-800); font-weight: 600; }
  .sb-main b { font-weight: 800; }
  .sb-sub { font-size: 11.5px; color: var(--gray-400); }
  .sb-sub b { color: var(--gray-600); font-weight: 700; }

  .swipe-mode-btn {
    font-size: 12px; color: var(--purple-dark); background: var(--purple-light);
    border: 1px solid transparent; border-radius: var(--r-pill); padding: 5px 14px;
    cursor: pointer; font-weight: 600; transition: all .15s; white-space: nowrap;
  }
  .swipe-mode-btn:hover { background: var(--purple); color: var(--white); }

  .result-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 18px 20px; box-shadow: var(--shadow-sm);
    display: grid; grid-template-columns: 1fr 92px; gap: 16px; align-items: start;
    transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
  }
  .result-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--gray-300); }

  /* Compact LinkedIn preview row (pre-scrape) — flex, not the grid card */
  .li-prev-card { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--card,var(--white));
    border:1px solid var(--line,var(--gray-200)); border-radius:10px; margin-bottom:6px; transition:border-color .15s, box-shadow .15s; }
  .li-prev-card:hover { border-color:var(--gray-300,var(--gray-300)); box-shadow:var(--shadow-sm); }
  .li-prev-card input[type=checkbox] { width:17px; height:17px; accent-color:var(--purple); flex-shrink:0; cursor:pointer; }
  .li-prev-score { flex-shrink:0; width:40px; height:40px; border-radius:9px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; font-weight:700; line-height:1; }
  .li-prev-score b { font-size:15px; }
  .li-prev-score span { font-size:8px; font-weight:600; letter-spacing:.4px; opacity:.7; margin-top:1px; }
  .li-prev-main { flex:1; min-width:0; }
  .li-prev-main .nm { font-size:14px; font-weight:700; color:var(--black,var(--gray-900)); line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .li-prev-main .hl { font-size:12px; color:var(--gray-500,var(--ink-500)); line-height:1.35;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .li-prev-main .wy { font-size:11px; color:var(--gray-400,var(--gray-400)); line-height:1.3; margin-top:1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .li-prev-actions { flex-shrink:0; display:flex; align-items:center; gap:4px; }
  .li-prev-actions a { font-size:12px; color:var(--purple); text-decoration:none; white-space:nowrap; padding:4px 6px; }
  .li-prev-actions a:hover { text-decoration:underline; }
  .li-prev-skip { background:none; border:none; color:var(--gray-300,var(--gray-300)); cursor:pointer; font-size:15px;
    line-height:1; padding:4px 6px; border-radius:6px; }
  .li-prev-skip:hover { color:var(--red,var(--danger)); background:var(--gray-50,var(--gray-50)); }

  .result-name { font-size: 18px; font-weight: 800; color: var(--black); margin-bottom: 7px; letter-spacing: -.02em; line-height: 1.2; }
  .result-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
  .badge {
    font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill);
    background: var(--gray-100); color: var(--gray-800);
  }
  .badge.fresh { background: var(--green-soft); color: var(--success); }
  .badge.stale { background: var(--energy-yellow-100); color: var(--warning); }
  .badge.old { background: var(--danger-bg); color: var(--danger); }
  /* metadata pills vs. the colored stability/fit badge — separate rows for fast parsing */
  .stab-row { margin: 0 0 10px; }

  .result-why { font-size: 14px; color: var(--gray-800); line-height: 1.6; margin-bottom: 10px; padding-top: 11px; border-top: 1px solid var(--gray-100); }
  .result-gaps {
    font-size: 13px; color: var(--warning); background: var(--warning-bg);
    border-left: 3px solid var(--yellow); padding: 6px 10px;
    border-radius: 0 6px 6px 0; margin-bottom: 10px;
  }
  .result-footer { display: flex; align-items: center; gap: 12px; }
  .tt-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--purple); text-decoration: none; font-weight: 600;
  }
  .tt-link:hover { color: var(--purple-dark); text-decoration: underline; }

  .score-col { display: flex; flex-direction: column; align-items: center; gap: 7px; }
  /* Progress ring — the fill (conic) encodes the match %, so the number means something at a glance */
  .score-ring {
    --ring: var(--purple); width: 58px; height: 58px; border-radius: 50%; position: relative;
    display: grid; place-items: center;
    background: conic-gradient(var(--ring) calc(var(--p, 0) * 1%), var(--gray-200) 0);
  }
  .score-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--card); }
  .score-ring.high { --ring: var(--green); }
  .score-ring.med  { --ring: var(--amber); }
  .score-ring.low  { --ring: var(--gray-400); }
  .score-num { position: relative; font-size: 18px; font-weight: 800; color: var(--ring); line-height: 1; font-variant-numeric: tabular-nums; }
  .score-pct { font-size: 9px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .4px; }

  .save-card-btn {
    width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--gray-300);
    background: var(--white); cursor: pointer; display: flex; align-items: center;
    justify-content: center; font-size: 16px; transition: all .15s;
  }
  .save-card-btn:hover { border-color: var(--purple); background: var(--purple-light); }
  .save-card-btn.saved { border-color: var(--purple); background: var(--purple-light); color: var(--purple); }

  /* Skeleton loaders — content-shaped placeholders that don't reflow when real
     data arrives. The shimmer is automatically suppressed for users with
     prefers-reduced-motion via the A11y baseline rule. */
  @keyframes sk-shimmer { 0% { background-position: -480px 0; } 100% { background-position: 480px 0; } }
  .sk { background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%); background-size: 960px 100%; animation: sk-shimmer 1.4s infinite linear; border-radius: 6px; }
  .sk-line { height: 12px; margin: 6px 0; }
  .sk-line.short { width: 50%; } .sk-line.mid { width: 75%; } .sk-line.long { width: 100%; }
  .sk-block { background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
  .sk-tile  { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; }
  .sk-tile-head { height: 90px; border-radius: 0; }
  .sk-tile-body { padding: 14px 16px; }
  .sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  /* Responsive: adapt grids and dense layouts for narrower viewports */
  @media (max-width: 860px) {
    .camp-kpis { grid-template-columns: repeat(2, 1fr); }
    .camp-funnel { flex-wrap: wrap; gap: 6px; }
    .camp-funnel .fstep { min-width: 60px; padding: 5px 10px; }
    .ctrow { grid-template-columns: 2fr 1fr 2fr 60px; }
    .ctrow-channels, .ctrow-owner { display: none; }
    .camp-card-header { flex-direction: column; gap: 8px; }
    .inbox-row { flex-direction: column; gap: 8px; }
    /* Perf grid → single column on tablets */
    .perfgrid { grid-template-columns: 1fr; }
    .perf-panel.wide { grid-column: auto; }
    /* Accountability KPIs → 2-col */
    .acct-kpis { grid-template-columns: repeat(2, 1fr); }
    /* Accountability table — ensure scroll hint */
    .accountability-panel { position: relative; }
    .accountability-table { -webkit-overflow-scrolling: touch; }
  }
  @media (max-width: 520px) {
    .camp-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
    .camp-kpi .ck-val { font-size: 20px; }
    .camp-funnel .fstep { min-width: 50px; }
    .camp-funnel .fv { font-size: 14px; }
    .camp-filterbar { flex-direction: column; align-items: stretch; }
    #campSearch { max-width: 100%; }
    .sl-grid { grid-template-columns: 1fr 1fr; }
    /* Accountability KPIs → single column on mobile */
    .acct-kpis { grid-template-columns: 1fr; }
    /* Big funnel → shorter on small screens */
    .funnelbig { height: 120px; gap: 8px; }
  }
  .loading { text-align: center; padding: 48px 0; color: var(--gray-500); font-size: 14px; }
  .spinner {
    width: 30px; height: 30px; border: 3px solid var(--gray-300);
    border-top-color: var(--purple); border-radius: 50%;
    animation: spin .75s linear infinite; margin: 0 auto 14px;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .ico.spin { animation: spin .75s linear infinite; }

  .empty { text-align: center; padding: 56px 0; }
  .empty-icon { font-size: 36px; margin-bottom: 12px; }
  .empty p { font-size: 15px; color: var(--gray-800); margin-bottom: 6px; font-weight: 500; }
  .empty small { font-size: 13px; color: var(--gray-500); }

  .error-box {
    background: var(--danger-bg); border: 1px solid var(--danger-bg); color: var(--red);
    padding: 14px 16px; border-radius: 10px; font-size: 14px;
  }
  .error-box a { color: var(--purple); cursor: pointer; font-weight: 600; text-decoration: underline; }
  /* Load-failure state with a cause line + Retry (replaces bare "Couldn't load…") */
  .load-error { background: var(--danger-bg); border: 1px solid var(--danger-bg); border-radius: 10px; padding: 16px 18px; display: flex; align-items: flex-start; gap: 12px; }
  .load-error svg { width: 18px; height: 18px; color: var(--red); flex: none; margin-top: 1px; }
  .load-error .le-body { flex: 1; min-width: 0; }
  .load-error .le-title { font-size: 13.5px; font-weight: 700; color: var(--red); }
  .load-error .le-cause { font-size: 12.5px; color: var(--gray-700); margin-top: 2px; line-height: 1.5; word-break: break-word; }
  .load-error .le-retry { margin-top: 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--red); background: var(--white); border: 1.5px solid var(--danger-bg); border-radius: var(--r-pill); padding: 6px 14px; cursor: pointer; transition: background .15s, border-color .15s; }
  .load-error .le-retry:hover { background: var(--paper-50); border-color: var(--red); }

  /* ── Index status banner ── */
  .index-banner {
    display: none; border-radius: 16px; padding: 18px 20px;
    margin-bottom: 20px; align-items: center; gap: 14px;
  }
  .index-banner.empty { display: flex; background: var(--energy-yellow-100); border: 1px solid var(--energy-yellow); color: #713f12; }
  .index-banner.building { display: flex; background: var(--paper-100); border: 1px solid #93c5fd; color: var(--info); }
  .index-banner.ready { display: none; }
  .banner-icon { font-size: 22px; flex-shrink: 0; }
  .banner-body { flex: 1; }
  .banner-body strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
  .banner-body span { font-size: 13px; opacity: .85; }
  .banner-btn {
    padding: 9px 18px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700;
    border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0;
    background: var(--atomic-black); color: var(--white);
    box-shadow: var(--shadow-sm); transition: transform .16s var(--ease), box-shadow .16s var(--ease);
  }
  .banner-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .banner-btn:disabled { background: var(--hr-purple-300); cursor: not-allowed; transform: none; box-shadow: none; }
  .progress-bar-wrap { height: 4px; background: var(--line-300); border-radius: 2px; margin-top: 8px; overflow: hidden; }
  .progress-bar { height: 100%; background: var(--purple); width: 30%; border-radius: 2px; animation: slide 1.5s ease-in-out infinite; }
  @keyframes slide { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} }

  /* ── Settings modal ── */
  .modal-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 200; align-items: center; justify-content: center;
  }
  .modal-backdrop.open { display: flex; }
  .modal {
    background: var(--card); border-radius: 16px;
    width: 480px; max-width: 96vw; box-shadow: 0 24px 64px rgba(0,0,0,.22);
    max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
  }
  .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 0; flex-shrink: 0;
  }
  .modal-title { font-size: 16px; font-weight: 700; }
  .modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--gray-500); line-height: 1; padding: 4px 6px; border-radius: 6px; }
  .modal-close:hover { background: var(--gray-100); color: var(--black); }

  /* Settings tabs */
  .settings-tabs {
    display: flex; gap: 2px; padding: 16px 24px 0; flex-shrink: 0;
    border-bottom: 1px solid var(--gray-100); margin-top: 16px;
  }
  .settings-tab {
    padding: 8px 16px; font-size: 13px; font-weight: 600; border: none;
    background: none; cursor: pointer; color: var(--gray-500); border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .settings-tab:hover { color: var(--black); background: var(--gray-100); }
  .settings-tab.active { color: var(--purple); border-bottom-color: var(--purple); background: none; }
  .settings-body { flex: 1; overflow-y: auto; padding: 24px; }

  /* Settings section cards */
  .settings-card {
    background: var(--gray-100); border-radius: 16px; padding: 16px;
    margin-bottom: 12px;
  }
  .settings-card-title {
    font-size: 12px; font-weight: 700; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px;
  }
  .status-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .status-dot-green { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
  .status-dot-red   { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
  .status-dot-gray  { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-300); flex-shrink: 0; }
  .index-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
  .btn-action {
    font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px;
    border: 1.5px solid var(--gray-300); background: var(--card); color: var(--gray-800);
    cursor: pointer; white-space: nowrap;
  }
  .btn-action:hover { border-color: var(--purple); color: var(--purple); }
  .btn-action.primary { background: var(--purple); color: var(--white); border-color: var(--purple); }
  .btn-action.primary:hover { background: var(--purple-dark); border-color: var(--purple-dark); }
  .btn-action.subtle { opacity: .7; }
  .btn-action.subtle:hover { opacity: 1; }
  .user-row-card {
    background: var(--card); border-radius: 10px; padding: 10px 12px;
    margin-bottom: 8px; border: 1px solid var(--gray-100);
  }

  .field-label { font-size: 12px; font-weight: 600; color: var(--gray-700); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; display: block; }
  .field-input {
    width: 100%; border: 1.5px solid var(--gray-300); border-radius: 8px;
    padding: 10px 13px; font-size: 14px; font-family: inherit; outline: none;
    transition: border-color .15s; color: var(--black);
  }
  .field-input:focus { border-color: var(--purple); }
  .field-hint { font-size: 12px; color: var(--gray-700); margin-top: 8px; line-height: 1.5; }

  .save-btn {
    margin-top: 20px; width: 100%; padding: 11px; background: var(--purple); color: var(--white);
    border: none; border-radius: 8px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background .15s;
  }
  .save-btn:hover { background: var(--purple-dark); }

  .key-status { font-size: 12px; margin-top: 10px; text-align: center; }
  .key-status.set { color: var(--green); }
  .key-status.unset { color: var(--red); }

  .divider { height: 1px; background: var(--gray-300); margin: 22px 0; }
  .refresh-row { display: flex; align-items: center; justify-content: space-between; }
  .refresh-row span { font-size: 13px; color: var(--gray-500); }
  .refresh-mini {
    font-size: 12px; color: var(--purple); background: none; border: 1px solid var(--purple);
    border-radius: 6px; padding: 5px 12px; cursor: pointer; font-weight: 600;
    transition: background .1s, color .1s;
  }
  .refresh-mini:hover { background: var(--purple); color: var(--white); }

  /* ── Shortlists tab ── */
  .sl-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 12px; }
  .new-list-btn {
    padding: 9px 20px; background: var(--purple); color: var(--white);
    border: none; border-radius: 8px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background .15s; white-space: nowrap; flex-shrink: 0;
  }
  .new-list-btn:hover { background: var(--purple-dark); }

  .new-list-form {
    background: var(--card); border: 1px solid var(--gray-300); border-radius: 16px;
    padding: 20px; margin-bottom: 16px;
  }
  .new-list-form-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
  .new-list-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .new-list-row input {
    flex: 1; min-width: 180px; border: 1.5px solid var(--gray-300); border-radius: 8px;
    padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; color: var(--black);
  }
  .new-list-row input:focus { border-color: var(--purple); }
  .new-list-actions { display: flex; gap: 8px; }
  .btn-primary {
    flex: 1; padding: 10px; background: var(--purple); color: var(--white);
    border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
    -webkit-appearance: none; appearance: none; transition: background .15s;
  }
  .btn-primary:hover { background: var(--purple-dark); }
  .btn-secondary {
    flex: 1; padding: 10px; background: var(--gray-100); color: var(--gray-800);
    border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
    -webkit-appearance: none; appearance: none; transition: background .15s;
  }
  .btn-secondary:hover { background: var(--gray-300); }

  .sl-card {
    background: var(--card); border: 1px solid var(--gray-300); border-radius: 16px;
    margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow: hidden;
  }
  .sl-card-header {
    padding: 16px 20px; display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: background .1s;
  }
  .sl-card-header:hover { background: var(--gray-100); }
  .sl-card-info { flex: 1; min-width: 0; }
  .sl-card-name { font-size: 15px; font-weight: 700; }
  .sl-card-meta { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
  .sl-card-count {
    font-size: 12px; font-weight: 700; color: var(--purple);
    background: var(--purple-light); padding: 4px 11px; border-radius: 20px; flex-shrink: 0;
  }
  .sl-delete-btn {
    font-size: 12px; color: var(--gray-500); background: none; border: 1px solid var(--gray-300);
    border-radius: 6px; padding: 4px 10px; cursor: pointer; flex-shrink: 0;
    transition: all .1s;
  }
  .sl-delete-btn:hover { color: var(--red); border-color: var(--red); }
  .sl-chevron { font-size: 11px; color: var(--gray-500); transition: transform .2s; flex-shrink: 0; }
  .sl-chevron.open { transform: rotate(180deg); }
  .sl-card-body { display: none; border-top: 1px solid var(--gray-300); }
  .sl-card-body.open { display: block; }

  .sl-cand-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; border-bottom: 1px solid var(--gray-100);
  }
  .sl-cand-row:last-child { border-bottom: none; }
  .sl-cand-info { flex: 1; min-width: 0; }
  .sl-cand-name { font-size: 14px; font-weight: 600; }
  .sl-cand-meta { font-size: 12px; color: var(--gray-500); margin-top: 1px; }
  .sl-score {
    font-size: 12px; font-weight: 700; color: var(--purple);
    background: var(--purple-light); padding: 3px 9px; border-radius: 20px; flex-shrink: 0;
  }
  .sl-view-link { font-size: 12px; color: var(--purple); text-decoration: none; font-weight: 600; flex-shrink: 0; }
  .sl-view-link:hover { text-decoration: underline; }
  .sl-remove {
    width: 28px; height: 28px; border-radius: 6px; font-size: 16px; line-height: 1;
    color: var(--gray-500); background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .sl-remove:hover { color: var(--red); background: var(--danger-bg); }
  .sl-empty-body { padding: 20px; text-align: center; color: var(--gray-500); font-size: 13px; }

  /* ── Save to list modal ── */
  .save-modal {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 300;
    align-items: center; justify-content: center;
  }
  .save-modal.open { display: flex; }
  .save-modal-inner {
    background: var(--card); border-radius: 14px; padding: 24px;
    width: 360px; max-width: 94vw; box-shadow: 0 20px 60px rgba(0,0,0,.2);
  }
  .save-modal-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
  .save-modal-cand { font-size: 13px; color: var(--gray-500); margin-bottom: 16px; }
  .save-modal select, .save-modal input[type="text"] {
    width: 100%; border: 1.5px solid var(--gray-300); border-radius: 8px;
    padding: 9px 12px; font-size: 14px; font-family: inherit; outline: none;
    background: var(--white); color: var(--black); margin-bottom: 10px;
    transition: border-color .15s;
  }
  .save-modal select:focus, .save-modal input[type="text"]:focus { border-color: var(--purple); }
  .new-list-inline { display: none; }
  .new-list-inline.show { display: block; }
  .save-modal-btns { display: flex; gap: 8px; margin-top: 4px; }
  .save-modal-btns button {
    flex: 1; padding: 10px; border-radius: 8px; border: none;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s;
  }
  .btn-cancel2 { background: var(--gray-100); color: var(--gray-800); }
  .btn-cancel2:hover { background: var(--gray-300); }
  .btn-confirm { background: var(--purple); color: var(--white); }
  .btn-confirm:hover { background: var(--purple-dark); }

  /* ── Swipe overlay ── */
  .swipe-overlay {
    display: none; position: fixed; inset: 0;
    background: var(--bg); z-index: 400;
    flex-direction: column; align-items: center;
    padding: 20px 16px 24px;
  }
  .swipe-overlay.open { display: flex; }
  .swipe-top {
    width: 100%; max-width: 580px; display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 14px;
  }
  .swipe-title-wrap .swipe-title { font-size: 16px; font-weight: 700; }
  .swipe-title-wrap .swipe-counter { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
  .swipe-exit-btn {
    padding: 7px 16px; border-radius: 8px; border: 1px solid var(--gray-300);
    background: var(--card); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gray-800);
  }
  .swipe-exit-btn:hover { background: var(--gray-100); }

  .swipe-list-row {
    width: 100%; max-width: 580px; display: flex; gap: 8px;
    align-items: center; margin-bottom: 14px;
  }
  .swipe-list-label { font-size: 12px; color: var(--gray-500); white-space: nowrap; font-weight: 600; }
  .swipe-list-row select {
    flex: 1; border: 1.5px solid var(--gray-300); border-radius: 8px;
    padding: 8px 10px; font-size: 13px; font-family: inherit;
    outline: none; background: var(--white); color: var(--black);
    transition: border-color .15s;
  }
  .swipe-list-row select:focus { border-color: var(--purple); }
  .swipe-new-btn {
    font-size: 12px; color: var(--purple); background: none; border: 1px solid var(--purple);
    border-radius: 6px; padding: 6px 12px; cursor: pointer; font-weight: 600; white-space: nowrap;
  }
  .swipe-new-btn:hover { background: var(--purple); color: var(--white); }

  .swipe-card {
    width: 100%; max-width: 580px; background: var(--card);
    border: 1px solid var(--gray-300); border-radius: 16px; padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08); overflow-y: auto;
    max-height: calc(100vh - 260px);
  }
  .swipe-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
  .swipe-card-name { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
  .swipe-why { font-size: 14px; color: var(--gray-800); line-height: 1.6; margin-bottom: 12px; }
  .swipe-gaps {
    font-size: 13px; color: var(--warning); background: var(--warning-bg);
    border-left: 3px solid var(--yellow); padding: 6px 10px;
    border-radius: 0 6px 6px 0; margin-bottom: 12px;
  }

  .swipe-actions {
    width: 100%; max-width: 580px; display: flex; gap: 14px; margin-top: 16px;
  }
  .swipe-btn {
    flex: 1; padding: 14px; border-radius: 16px; border: none;
    font-size: 15px; font-weight: 700; cursor: pointer; transition: all .15s;
  }
  .swipe-skip { background: var(--gray-100); color: var(--gray-800); }
  .swipe-skip:hover { background: var(--gray-300); }
  .swipe-save { background: var(--purple); color: var(--white); }
  .swipe-save:hover { background: var(--purple-dark); }
  .swipe-hint { font-size: 11px; color: var(--gray-500); text-align: center; margin-top: 8px; }

  /* Progress bar */
  .swipe-progress-track {
    width: 100%; max-width: 580px; height: 4px;
    background: var(--gray-200); border-radius: 2px; margin-bottom: 14px; flex-shrink: 0;
  }
  .swipe-progress-fill { height: 100%; border-radius: 2px; background: var(--purple); transition: width .3s ease; }

  /* Card score border */
  .swipe-card.score-high  { border-color: var(--success); box-shadow: 0 4px 20px rgba(34,197,94,.14); }
  .swipe-card.score-med   { border-color: var(--warning); box-shadow: 0 4px 20px rgba(245,158,11,.10); }
  .swipe-card.score-low   { border-color: var(--gray-300); }

  /* Card inner layout */
  .swipe-card-meta { font-size: 13px; color: var(--gray-500); margin: 2px 0 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .swipe-divider   { border: none; border-top: 1px solid var(--gray-200); margin: 12px 0; }

  .swipe-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .swipe-tag  { font-size: 12px; background: var(--gray-100); color: var(--gray-700); border-radius: 20px; padding: 4px 10px; white-space: nowrap; }

  .swipe-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .swipe-skill-pill { font-size: 12px; font-weight: 600; background: var(--purple-light); color: var(--purple); border-radius: 6px; padding: 3px 10px; }
  @keyframes mktPulse { 0%,100% { opacity:.45 } 50% { opacity:.8 } }
  .mkt-skel { background: var(--gray-100); border:1px solid var(--gray-200); border-radius:14px; animation: mktPulse 1.2s ease-in-out infinite; }

  /* Maybe button */
  .swipe-maybe { background: var(--warning-bg); color: var(--warning); border: 1.5px solid var(--warning); }
  .swipe-maybe:hover { background: var(--warning-bg); }

  /* ── Reject / Not a fit ── */
  .reject-btn { background: none; border: 1px solid var(--gray-200); cursor: pointer; font-size: 12px; color: var(--gray-600); padding: 4px 11px; border-radius: 7px; font-weight: 600; transition: all .14s; }
  .reject-btn:hover { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
  .external-confirm-box { background: var(--hr-purple-100); border: 1.5px solid var(--hr-purple-300); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
  .external-confirm-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .external-confirm-count { font-size: 18px; font-weight: 700; color: var(--purple); }
  .external-confirm-cost { font-size: 13px; color: var(--gray-500); }
  .external-filters-detail { font-size: 12px; color: var(--gray-500); }
  .external-filters-detail summary { cursor: pointer; user-select: none; }
  .external-filters-pre { background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; padding: 10px; font-size: 11px; overflow-x: auto; margin-top: 8px; white-space: pre-wrap; }
  .co-find-btn { background: none; border: 1.5px solid var(--purple); color: var(--purple); border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background .15s; }
  .co-find-btn:hover { background: var(--purple-light); }
  .co-find-btn:disabled { opacity: .5; cursor: default; }
  .co-result { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
  .co-item { display: inline-flex; align-items: center; gap: 5px; background: var(--purple-light); border-radius: 6px; padding: 4px 10px; font-weight: 600; color: var(--purple); }
  .co-item a { color: var(--purple); text-decoration: none; }
  .co-item a:hover { text-decoration: underline; }
  .co-copy { background: none; border: none; cursor: pointer; font-size: 13px; padding: 0 2px; opacity: .7; }
  .co-copy:hover { opacity: 1; }
  .co-cached { font-size: 11px; color: var(--gray-400); margin-left: 2px; }
  .reject-form { margin-top: 10px; padding: 10px 12px; background: var(--danger-bg); border-radius: 8px; border: 1px solid var(--danger-bg); }
  .reject-form input { width: 100%; box-sizing: border-box; border: 1px solid var(--danger); border-radius: 6px; padding: 7px 10px; font-size: 13px; margin-bottom: 8px; outline: none; }
  .reject-form input:focus { border-color: var(--danger); }
  .reject-form-btns { display: flex; gap: 8px; }
  .reject-confirm-btn { background: var(--danger); color: var(--white); border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
  .reject-cancel-btn  { background: var(--gray-200); color: var(--gray-700); border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
  .result-card.rejected-card { opacity: .35; pointer-events: none; }

  /* ── Source results refine toolbar / cards (Screened tab) ── */
  .results-toolbar { position: sticky; top: var(--rail-h, 56px); z-index: 30; background: var(--card); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(17,17,17,.05); display: flex; flex-direction: column; gap: 9px; }
  .results-toolbar .rt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .rt-brief { font-size: 12px; color: var(--gray-500); display: flex; align-items: baseline; gap: 6px; }
  .rt-brief-label { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--gray-400); flex: none; }
  .rt-brief-txt { color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
  .rt-brief.open .rt-brief-txt { white-space: normal; max-width: none; }
  .rt-brief-more { background: none; border: none; color: var(--purple); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; flex: none; }
  .rt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .rt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--gray-700); background: var(--gray-100); border-radius: 999px; padding: 3px 5px 3px 10px; }
  .rt-chip button { background: var(--gray-300); color: var(--white); border: none; width: 15px; height: 15px; border-radius: 50%; font-size: 9px; cursor: pointer; display: grid; place-items: center; line-height: 1; }
  .rt-chip button:hover { background: var(--purple); }
  .rt-refine { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--gray-100); padding-top: 9px; }
  .rt-seg { display: inline-flex; background: var(--gray-100); border-radius: 8px; padding: 2px; }
  .rt-seg-btn { font: inherit; font-size: 12px; font-weight: 600; border: none; background: none; color: var(--gray-600); border-radius: 6px; padding: 5px 11px; cursor: pointer; }
  .rt-seg-btn.on { background: var(--card); color: var(--purple); box-shadow: var(--shadow-sm); }
  .rt-stabsort { font: inherit; font-size: 12px; font-weight: 600; color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-300); border-radius: 8px; padding: 5px 9px; cursor: pointer; }
  .rt-stabchips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
  .rt-stabchip { font: inherit; font-size: 11px; font-weight: 600; border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-600); border-radius: 999px; padding: 3px 9px 3px 18px; cursor: pointer; position: relative; }
  .rt-stabchip::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--gray-400); }
  .rt-stabchip.on { border-color: currentColor; }
  .rt-stabchip.stab-strong { color: var(--info); } .rt-stabchip.stab-strong::before { background: var(--dot-cyan); } .rt-stabchip.stab-strong.on { background: var(--info-bg); }
  .rt-stabchip.stab-ok { color: var(--hr-purple-700); } .rt-stabchip.stab-ok::before { background: var(--hr-purple); } .rt-stabchip.stab-ok.on { background: var(--hr-purple-100); }
  .rt-stabchip.stab-warn { color: var(--warning); } .rt-stabchip.stab-warn::before { background: var(--warning); } .rt-stabchip.stab-warn.on { background: var(--warning-bg); }
  .rt-stabchip.stab-unknown { color: var(--gray-500); } .rt-stabchip.stab-unknown::before { background: var(--gray-400); } .rt-stabchip.stab-unknown.on { background: var(--gray-100); }
  /* Stability pill on cards — distinct palette from match-score green */
  .stab-pill { font-size: 12px; font-weight: 600; border-radius: 20px; padding: 4px 10px 4px 20px; position: relative; white-space: nowrap; }
  .stab-pill::before { content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; }
  .stab-pill.stab-strong { background: var(--info-bg); color: var(--info); } .stab-pill.stab-strong::before { background: var(--dot-cyan); }
  .stab-pill.stab-ok { background: var(--hr-purple-100); color: var(--hr-purple-700); } .stab-pill.stab-ok::before { background: var(--hr-purple); }
  .stab-pill.stab-warn { background: var(--warning-bg); color: var(--warning); } .stab-pill.stab-warn::before { background: var(--warning); }
  .stab-pill.stab-unknown { background: var(--gray-100); color: var(--gray-600); } .stab-pill.stab-unknown::before { background: var(--gray-400); }
  /* Recency badge — color by threshold, clickable */
  .badge.rec { border: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; transition: transform .12s, filter .12s; }
  .badge.rec:hover { transform: scale(1.04); filter: brightness(.97); }
  .badge.rec.fresh { background: var(--green-soft); color: var(--success); }
  .badge.rec.warm  { background: var(--energy-yellow-100); color: var(--warning); }
  .badge.rec.cold  { background: var(--gray-100); color: var(--gray-500); }
  /* Requirement tally badge + popover (#1) */
  .req-tally-badge { font-size: 10.5px; font-weight: 700; padding: 4px 9px; background: var(--gray-100); color: var(--gray-700); border: none; border-radius: 10px; cursor: pointer; text-align: center; line-height: 1.3; max-width: 92px; transition: all .14s; }
  .req-tally-badge:hover { background: var(--purple-light); color: var(--purple); }
  .req-pop-backdrop { position: fixed; inset: 0; background: rgba(17,17,17,.4); z-index: 200; display: grid; place-items: center; padding: 20px; }
  .req-pop { background: var(--card); border-radius: var(--r-lg); width: min(440px, 94vw); max-height: 80vh; overflow: auto; box-shadow: var(--shadow-lg); }
  .req-pop-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; background: var(--card); }
  .req-pop-title { font-size: 16px; font-weight: 800; color: var(--black); } .req-pop-sub { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
  .req-pop-x { background: none; border: none; font-size: 16px; color: var(--gray-400); cursor: pointer; }
  .req-pop-body { padding: 10px 18px 18px; }
  .req-why { font-size: 13.5px; line-height: 1.55; color: var(--gray-800); padding: 4px 0 12px; border-bottom: 1px solid var(--gray-100); margin-bottom: 8px; }
  .req-caveat { font-size: 12.5px; line-height: 1.5; color: var(--amber); background: var(--amber-soft); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
  .req-caveat .result-recon { color: var(--gray-600); font-style: italic; margin-top: 4px; }
  .req-signals { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--success-bg); border: 1px solid var(--success); }
  .req-signals-hd { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--success); margin-bottom: 6px; }
  .req-signal-item { font-size: 12.5px; color: var(--success); line-height: 1.55; padding: 1px 0; }
  /* shortlist "why" affordances */
  .sl-why-badge { font-size: 11px; font-weight: 700; color: var(--purple-dark); background: var(--purple-light); border: none; border-radius: 999px; padding: 2px 9px; cursor: pointer; transition: background .14s; }
  .sl-why-badge:hover { background: color-mix(in srgb, var(--purple) 18%, var(--card)); }
  .sl-why-line { font-size: 12px; color: var(--gray-600); line-height: 1.45; margin-top: 3px; max-width: 70ch; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .req-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--gray-100); }
  .req-row:last-child { border-bottom: none; }
  .req-ico { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--white); }
  .req-met .req-ico { background: var(--success); } .req-partial .req-ico { background: var(--warning); } .req-unmet .req-ico { background: var(--ink-400); }
  .req-l { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--gray-800); } .req-l b { font-weight: 700; }
  .req-ev { font-size: 12px; color: var(--gray-500); }
  .result-recon { font-size: 12px; color: var(--warning); margin-top: 5px; font-style: italic; }
  /* "Not a fit" review rows */
  .rej-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--gray-100); }
  .rej-row:last-child { border-bottom: none; }
  .rej-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .rej-l b { font-size: 14px; color: var(--black); font-weight: 700; }
  .rej-meta { font-size: 12px; color: var(--gray-500); }
  .rej-reason { font-size: 12px; color: var(--warning); font-style: italic; }
  .rej-r { display: flex; align-items: center; gap: 10px; flex: none; }

  /* ── Shortlist redesign ── */
  .sl-header-right { display: flex; align-items: center; gap: 14px; flex: none; }
  .sl-archive-toggle { font: inherit; font-size: 13px; font-weight: 600; color: var(--gray-700); background: var(--gray-100); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
  .sl-archive-toggle:hover { background: var(--gray-200); color: var(--black); }
  .sl-archive-toggle.active { background: var(--purple-light); color: var(--purple-dark); border-color: color-mix(in srgb, var(--purple) 40%, var(--white)); }
  .sl-count-top { font-size: 13px; color: var(--gray-500); font-weight: 600; white-space: nowrap; }
  .sl-section { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--gray-400); margin: 20px 2px 9px; display: flex; align-items: center; gap: 8px; }
  .sl-section:first-child { margin-top: 4px; }
  .sl-section.muted { color: var(--gray-300); }
  .sl-section::after { content: ""; flex: 1; height: 1px; background: var(--gray-200); }
  .sl-section-n { font-size: 10.5px; font-weight: 700; color: var(--gray-500); background: var(--gray-100); border-radius: 999px; padding: 1px 7px; }
  /* Pinterest-style — Lists grid + view toggle */
  .sl-viewtoggle { display: inline-flex; border: 1px solid var(--gray-300); border-radius: 8px; overflow: hidden; }
  .sl-viewtoggle button { background: var(--white); border: 0; color: var(--gray-600); font: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer; }
  .sl-viewtoggle button:not(:last-child) { border-right: 1px solid var(--gray-200); }
  .sl-viewtoggle button.active { background: var(--purple); color: var(--white); }
  .sl-viewtoggle button:hover:not(.active) { background: var(--gray-100); }
  .sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
  .sltile { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; cursor: pointer; transition: box-shadow .18s, transform .18s, border-color .14s; position: relative; display: flex; flex-direction: column; }
  .sltile:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); border-color: var(--gray-300); }
  .sltile:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
  .sltile.is-empty { background: var(--paper-50); border-style: dashed; }
  .sltile-head { padding: 22px 16px 18px; text-align: center; }
  .sltile-count { font-size: 36px; font-weight: 900; line-height: 1; color: rgba(0,0,0,.78); font-variant-numeric: tabular-nums; }
  .sltile-countlbl { font-size: 11px; font-weight: 700; color: rgba(0,0,0,.55); text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
  .sltile-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
  .sltile-name { font-size: 15px; font-weight: 800; color: var(--black); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
  .sltile-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .sltile-role { font-size: 11px; font-weight: 700; color: var(--purple-dark); background: var(--purple-light); border-radius: 999px; padding: 2px 8px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sltile-owner { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--gray-600); }
  .sltile-owner svg { width: 11px; height: 11px; }
  .sltile-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--gray-700); font-weight: 600; }
  .sltile-stat { display: inline-flex; align-items: center; gap: 3px; }
  .sltile-stat b { color: var(--black); }
  .sltile-stat.warn { color: var(--amber); }
  .sltile-empty { font-size: 11.5px; color: var(--gray-400); font-style: italic; }
  .sltile-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity .14s; align-items: center; background: rgba(255,255,255,.78); border-radius: 8px; padding: 3px; backdrop-filter: blur(4px); }
  .sltile:hover .sltile-actions, .sltile:focus-within .sltile-actions { opacity: 1; }
  .sltile-iconbtn { background: transparent; border: 0; color: var(--gray-500); cursor: pointer; font-size: 12px; padding: 3px 6px; border-radius: 5px; }
  .sltile-iconbtn:hover { background: var(--gray-100); color: var(--black); }
  .sl-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; margin-bottom: 10px; overflow: hidden; transition: border-color .14s, box-shadow .14s; }
  .sl-card:hover { box-shadow: var(--shadow-sm); }
  .sl-card.roled { border-left: 3px solid var(--purple); }
  .sl-card.empty { background: var(--card-2); border-style: dashed; }
  .sl-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--white); border-radius: 16px 16px 0 0; }
  /* Sticky-per-list-header was buggy: `.sl-card` has overflow:hidden which breaks
     position:sticky, and stacking multiple sticky headers (one per expanded list)
     made the first row of each list visually overlap the head. Dropped the sticky
     — the page-level filter bar already keeps context while scrolling. */
  .sl-card:has(.sl-items) .sl-head { box-shadow: 0 1px 0 var(--gray-100); }
  /* Bulk-action bar — appears the moment candidates are selected. Made
     unmistakable (filled purple surface + shadow) instead of a faint row of
     small buttons that was easy to scroll past / miss entirely. */
  .sl-bulkbar {
    /* Sticky so the ⧉ Merge / bulk actions stay visible while you tick checkboxes down a long
       list (the bar lives at the top of the list container). */
    position: sticky; top: 8px; z-index: 20;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 6px 0 12px; padding: 10px 14px;
    background: var(--purple-light); border: 1px solid color-mix(in srgb, var(--purple) 38%, var(--white));
    border-radius: 16px; box-shadow: var(--shadow-md);
  }
  .sl-bulkbar.hidden { display: none; }
  .sl-bulkbar .sl-bulk-count { font-size: 12.5px; font-weight: 700; color: var(--purple-dark); margin-right: 2px; }
  .sl-bulkbar .sl-bulk-channels { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--gray-700); margin-right: 4px; }
  .sl-bulkbar .sl-bulk-channels .warn { color: var(--amber); }
  .sl-bulkbar .sl-bulk-dot { color: var(--gray-400); margin: 0 1px; }
  .sl-bulkbar .btn-action { font-size: 12px; }
  /* §6 sort control + §3/§7 row meta */
  .sl-items-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 2px; flex-wrap: wrap; }
  .sl-sortsel { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--gray-600); background: var(--white); border: 1px solid var(--gray-300); border-radius: 7px; padding: 4px 8px; cursor: pointer; }
  .sl-rowmeta { font-size: 11px; color: var(--gray-400); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
  /* Per-list reachability breakdown — sits flush under the head as a single
     strip (stats on the left, "Add manually" on the right when expanded). */
  .sl-breakdown { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 2px 14px 8px 40px; font-size: 11.5px; color: var(--gray-700); font-weight: 600; }
  .sl-breakdown-stats { display: flex; gap: 14px; flex-wrap: wrap; }
  .sl-breakdown span { display: inline-flex; align-items: center; gap: 4px; }
  .sl-breakdown .warn { color: var(--amber); }
  .sl-brief-row { display: flex; align-items: flex-start; gap: 8px; padding: 2px 14px 8px 40px; font-size: 11.5px; }
  .sl-brief-tag { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--purple-dark); background: var(--purple-light); border-radius: 999px; padding: 2px 8px; margin-top: 1px; white-space: nowrap; }
  .sl-brief-text { flex: 1; color: var(--gray-700); line-height: 1.45; word-break: break-word; }
  .sl-brief-none { color: var(--gray-400); }
  .sl-brief-edit-btn, .sl-brief-add-btn { flex: none; background: none; border: 1px solid var(--gray-300); color: var(--gray-600); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; padding: 2px 9px; border-radius: 999px; transition: border-color .14s, color .14s; white-space: nowrap; }
  .sl-brief-edit-btn:hover, .sl-brief-add-btn:hover { border-color: var(--purple); color: var(--purple); }
  .sl-brief-edit-zone { flex: 1; }
  .sl-brief-ta { width: 100%; min-height: 72px; font: inherit; font-size: 12.5px; border: 1.5px solid var(--purple); border-radius: 8px; padding: 8px 10px; resize: vertical; outline: none; box-sizing: border-box; }
  .sl-brief-edit-actions { display: flex; gap: 8px; margin-top: 6px; }
  .sl-add-inline { background: none; border: 1px dashed var(--gray-300); color: var(--gray-700); font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; transition: border-color .14s, color .14s, background .14s; }
  .sl-add-inline:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-light); }
  .sl-alsoin { color: var(--purple); font-weight: 600; cursor: default; }
  .sl-expand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; font: inherit; text-align: left; padding: 4px; margin: -4px; border-radius: 8px; }
  .sl-expand:hover { background: var(--gray-100); }
  .sl-caret { color: var(--purple); font-size: 13px; width: 12px; flex: none; }
  .sl-name { font-size: 15px; font-weight: 700; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sl-count { font-size: 11.5px; font-weight: 700; color: var(--purple); background: var(--purple-light); border-radius: 999px; padding: 2px 9px; flex: none; }
  .sl-count.zero { color: var(--gray-400); background: var(--gray-100); }
  .sl-match { font-size: 11px; font-weight: 600; color: var(--gray-500); flex: none; }
  .sl-match:empty { display: none; }
  .sl-match.none { color: var(--warning); }
  .sl-rolechip { font-size: 11px; font-weight: 600; color: var(--purple-dark); background: var(--purple-light); border-radius: 999px; padding: 2px 9px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
  .sl-owner { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--gray-700); background: var(--gray-100); border-radius: 999px; padding: 2px 9px; white-space: nowrap; flex: none; }
  .sl-owner svg { width: 12px; height: 12px; opacity: .7; }
  .sl-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
  .sl-rolesel { font: inherit; font-size: 11px; color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-300); border-radius: 8px; padding: 5px 8px; max-width: 160px; cursor: pointer; }
  .sl-del { background: none; border: none; color: var(--gray-400); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 5px 9px; border-radius: 7px; opacity: 0; transition: opacity .14s, color .14s, background .14s; }
  .sl-card:hover .sl-del, .sl-del:focus, .sl-card:hover .sl-rename, .sl-rename:focus { opacity: 1; }
  .sl-del:hover { color: var(--danger); background: var(--danger-bg); }
  .sl-rename { background: none; border: none; color: var(--gray-400); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 5px 9px; border-radius: 7px; opacity: 0; transition: opacity .14s, color .14s, background .14s; }
  .sl-rename:hover { color: var(--purple); background: var(--purple-light); }
  .sl-expand.renaming { flex: 1; display: flex; align-items: center; gap: 9px; padding: 4px; }
  .sl-name-input { flex: 1; min-width: 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--black); border: 1.5px solid var(--purple); border-radius: 7px; padding: 4px 9px; outline: none; }
  .sl-note-edit { margin-top: 6px; }
  .sl-note-ta { width: 100%; min-height: 52px; font: inherit; font-size: 13px; border: 1.5px solid var(--gray-300); border-radius: 8px; padding: 8px 10px; resize: vertical; outline: none; }
  .sl-note-ta:focus { border-color: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 12%, transparent); }
  .sl-note-actions { display: flex; gap: 8px; margin-top: 6px; }
  .sl-modal-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--gray-500); margin-bottom: 5px; }
  .sl-empty-hint { font-size: 12px; color: var(--gray-400); padding: 0 16px 12px 35px; }
  .sl-items { border-top: 1px solid var(--gray-100); padding: 6px 16px 12px; }
  .sl-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--gray-100); }
  .sl-score { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; background: var(--gray-100); color: var(--gray-600); }
  .sl-score.high { background: var(--green-soft); color: var(--success); }
  .sl-score.low { background: var(--gray-100); color: var(--gray-500); }
  .sl-note-btn { background: none; border: none; color: var(--purple); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 5px; display: inline-flex; align-items: center; gap: 4px; }
  .sl-note-btn:hover { background: var(--purple-light); }
  .sl-note-btn svg { width: 12px; height: 12px; }
  .sl-edit-name-btn { background: none; border: none; color: var(--gray-400); font-size: 11px; cursor: pointer; padding: 0 3px; border-radius: 4px; opacity: 0; transition: opacity .15s; }
  .sl-row:hover .sl-edit-name-btn { opacity: 1; }
  .sl-edit-name-btn:hover { color: var(--purple); background: var(--purple-light); }
  .sl-camp { font-size: 11px; flex-shrink: 0; }
  .sl-edit-btn { flex-shrink: 0; background: none; border: 1px solid transparent; color: var(--gray-400); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 13px; margin-left: 2px; opacity: 0; transition: opacity .14s, color .14s, background .14s, border-color .14s; }
  .sl-row:hover .sl-edit-btn, .sl-edit-btn:focus { opacity: 1; }
  .sl-edit-btn:hover { color: var(--purple); background: var(--purple-light); border-color: var(--purple); }
  .sl-rm { flex-shrink: 0; background: none; border: 1px solid transparent; color: var(--gray-400); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 13px; margin-left: 4px; opacity: .6; transition: opacity .14s, color .14s, background .14s, border-color .14s; }
  .sl-row:hover .sl-rm, .sl-rm:focus { opacity: 1; }
  .sl-rm:hover { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
  /* §1 campaign-status pills */
  .oc-pill { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
  .oc-pill.oc-none { background: var(--gray-100); color: var(--gray-500); }
  .oc-pill.oc-queued { background: var(--energy-yellow-100); color: var(--warning); }
  .oc-pill.oc-active { background: var(--info-bg); color: var(--info); }
  .oc-pill.oc-replied { background: var(--green-soft); color: var(--success); }
  .oc-pill.oc-passed { background: var(--danger-bg); color: var(--danger); }
  /* Pipeline stage pill (PIPELINE_HANDOFF: saved→…→hired) — brand-aligned */
  .st-pill { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
  .st-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
  .st-pill.st-saved      { background: var(--gray-100); color: var(--gray-600); }
  .st-pill.st-tocontact  { background: var(--info-bg); color: var(--info); }
  .st-pill.st-inoutreach { background: var(--purple-light); color: var(--purple-dark); }
  .st-pill.st-replied    { background: var(--amber-soft); color: var(--warning); }
  .st-pill.st-inprocess  { background: var(--info-bg); color: var(--info); }
  .st-pill.st-hired      { background: var(--green-soft); color: var(--success); }
  /* dropped candidate row: dim + keep readable */
  .sl-row.dropped { opacity: .58; }
  .sl-row.dropped:hover { opacity: 1; }
  .drop-pill { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; background: var(--danger-bg); color: var(--danger); align-self: flex-start; }
  /* Pipeline board (List ⇄ Board toggle) */
  .sl-viewtoggle { display: inline-flex; background: var(--gray-100); border-radius: 9px; padding: 3px; }
  .sl-viewtoggle button { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--gray-500); border: none; background: none; padding: 6px 11px; border-radius: 7px; cursor: pointer; }
  .sl-viewtoggle button.on { background: var(--white); color: var(--purple); box-shadow: var(--shadow-sm); }
  .sl-attn-badge { display: none; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--purple); color: var(--white); font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; margin-left: 4px; }
  .sl-viewtoggle button.on .sl-attn-badge { background: var(--purple); color: var(--white); }
  /* Needs attention worklist */
  .attn-wrap { display: flex; flex-direction: column; gap: 14px; }
  .attn-sec { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
  .attn-sec-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 13.5px; font-weight: 800; background: var(--gray-100); border-bottom: 1px solid var(--line); }
  .attn-ic { font-size: 14px; }
  .attn-n { font-size: 11.5px; font-weight: 700; color: var(--gray-600); background: var(--white); border-radius: 999px; padding: 1px 9px; }
  .attn-bulk { margin-left: auto; font-size: 11.5px; padding: 6px 11px; }
  /* urgent sections get a colored left accent */
  .attn-replied { border-left: 3px solid var(--green); } .attn-replied .attn-sec-head { color: var(--success); }
  .attn-followup { border-left: 3px solid var(--amber); } .attn-followup .attn-sec-head { color: var(--warning); }
  .attn-cold { border-left: 3px solid var(--blue); } .attn-cold .attn-sec-head { color: var(--info); }
  .attn-rows { display: flex; flex-direction: column; }
  .attn-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--gray-100); }
  .attn-card:last-child { border-bottom: none; }
  .attn-card:hover { background: var(--purple-light); }
  .attn-main { flex: 1; min-width: 0; }
  .attn-name { font-weight: 650; font-size: 13.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .attn-ctx { font-size: 12px; color: var(--gray-600); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .attn-list { color: var(--gray-400); }
  .attn-acts { display: flex; align-items: center; gap: 7px; flex: none; }
  .attn-acts .btn-action { font-size: 12px; padding: 7px 12px; }
  .sl-board-bar { display: flex; justify-content: space-between; align-items: center; min-height: 22px; margin-bottom: 8px; }
  /* drag & drop */
  .sl-bcard[draggable="true"] { cursor: grab; }
  .sl-bcard.dragging { opacity: .4; cursor: grabbing; }
  .sl-bcol.drop-over { outline: 2px dashed var(--purple); outline-offset: -2px; background: color-mix(in srgb, var(--purple) 8%, var(--gray-100)); }
  .sl-bcol { transition: background .12s ease; }
  /* smart-view chips + stale nudge */
  .sl-scopebar { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 10px; }
  .sl-scopechip { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gray-600); background: var(--gray-100); border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
  .sl-scopechip:hover { background: var(--gray-200); }
  .sl-scopechip.on { background: var(--purple); color: var(--white); }
  .sl-scope-n { font-size: 11px; font-weight: 700; background: rgba(0,0,0,.08); border-radius: 999px; padding: 0 6px; }
  .sl-scopechip.on .sl-scope-n { background: rgba(255,255,255,.25); }
  .sl-nudge { display: flex; align-items: center; gap: 10px; background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--white)); color: #7a4a00; border-radius: 10px; padding: 9px 13px; margin: 0 0 12px; font-size: 12.5px; }
  .sl-nudge-go { margin-left: auto; font: inherit; font-weight: 700; font-size: 12px; color: var(--white); background: var(--amber); border: none; border-radius: 8px; padding: 6px 11px; cursor: pointer; }
  .sl-nudge-x { font: inherit; border: none; background: none; cursor: pointer; color: #a06a1a; font-size: 14px; padding: 2px 4px; }
  .sl-board-droptoggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-600); cursor: pointer; }
  .sl-board { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 10px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
  .sl-jump { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--purple); padding: 6px 12px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
  .sl-jump:hover { background: var(--purple-soft); }
  /* LinkedIn Queue status view */
  .queue-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 4px 0 16px; }
  .queue-stat-card { background: var(--white); border-radius: 16px; padding: 16px; text-align: center; border: 1px solid var(--gray-200); }
  .queue-stat-num { font-size: 28px; font-weight: 800; line-height: 1.2; }
  .queue-stat-label { font-size: 12px; font-weight: 600; color: var(--gray-500); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; }
  .queue-stat-card.queued .queue-stat-num { color: var(--info); }
  .queue-stat-card.claimed .queue-stat-num { color: var(--hr-purple); }
  .queue-stat-card.completed .queue-stat-num { color: var(--success); }
  .queue-stat-card.failed .queue-stat-num { color: var(--danger); }
  .queue-stat-card.today .queue-stat-num { color: var(--info); }
  .queue-stat-card.today { border-color: var(--info); background: var(--green-soft); }
  .queue-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
  .queue-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; border-bottom: 2px solid var(--gray-200); }
  .queue-table td { padding: 10px; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
  .queue-table tr:hover td { background: var(--gray-50); }
  .queue-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
  .queue-badge.queued { background: var(--info-bg); color: var(--info); }
  .queue-badge.claimed { background: var(--hr-purple-100); color: var(--hr-purple); }
  .queue-badge.completed { background: var(--success-bg); color: var(--success); }
  .queue-badge.failed { background: var(--danger-bg); color: var(--danger); }
  .queue-badge.extension_pending { background: var(--warning-bg); color: var(--warning); }
  .queue-type { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
  .queue-type.invite { color: var(--info); }
  .queue-type.message { color: var(--hr-purple); }
  .queue-type.inmail { color: var(--info); }
  .queue-cand { font-weight: 700; font-size: 13px; }
  .queue-cand-sub { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
  .queue-msg-preview { font-size: 11px; color: var(--gray-500); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .queue-time { font-size: 11px; color: var(--gray-500); white-space: nowrap; }
  .queue-error { font-size: 11px; color: var(--danger); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 768px) {
    .queue-stats { grid-template-columns: repeat(3, 1fr); }
  }
  /* Outreach Pipeline (5-col board moved from Saved-lists) */
  .out-board { grid-template-columns: repeat(5, minmax(200px, 1fr)); }
  .out-col .sl-bcol-dot { background: var(--col-c); }
  .out-col .sl-bcol-head { color: var(--col-c); }
  .out-card { padding: 10px 11px; cursor: pointer; }
  .out-card:hover { border-color: var(--gray-300); transform: translateY(-1px); transition: transform .12s, border-color .12s; }
  .out-card .cname { font-weight: 700; font-size: 13.5px; }
  .out-card .crow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
  /* Keep the campaign · role line to ONE line — long role names (e.g. full JD titles)
     were wrapping to 3-4 lines on every card and dominating the board. */
  .out-card .csub { font-size: 11px; color: var(--gray-500); margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .out-card .out-rolename { color: var(--purple-dark); }
  .out-card .out-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
  .out-ch { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 11px; font-weight: 800; }
  .out-ch-em { background: var(--purple-light); color: var(--purple-dark); }
  .out-ch-li { background: var(--info-bg); color: var(--info); }
  .out-ch-sms { background: var(--success-bg); color: var(--success); }
  .out-last { font-size: 10.5px; color: var(--gray-500); font-weight: 600; }
  .out-flag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
  .out-flag.tt { background: var(--success-bg); color: var(--success); }
  .sl-bcol { background: var(--gray-100); border-radius: 16px; display: flex; flex-direction: column; min-height: 90px; }
  .sl-bcol-head { display: flex; align-items: center; gap: 7px; padding: 10px 11px 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .2px; }
  .sl-bcol-ck { width: 14px; height: 14px; cursor: pointer; accent-color: var(--purple); flex: none; opacity: .55; }
  .sl-bcol-ck:hover, .sl-bcol-ck:checked { opacity: 1; }
  .sl-bcol-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .sl-bcol-n { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--gray-400); background: var(--white); border-radius: 999px; padding: 0 8px; }
  .sl-bcol-body { padding: 3px 8px 9px; display: flex; flex-direction: column; gap: 7px; }
  .sl-bcol-empty { font-size: 11px; color: var(--gray-400); text-align: center; padding: 8px 0; }
  .st-col-saved .sl-bcol-head { color: var(--gray-600); }
  .st-col-to_contact .sl-bcol-head { color: var(--info); }
  .st-col-in_outreach .sl-bcol-head { color: var(--purple-dark); }
  .st-col-replied .sl-bcol-head { color: var(--warning); }
  .st-col-in_process .sl-bcol-head { color: var(--info); }
  .st-col-hired .sl-bcol-head { color: var(--success); }
  .sl-bcard { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 1px 2px rgba(16,16,20,.05); }
  .sl-bcard.dropped { opacity: .6; }
  .sl-bcard.dropped:hover { opacity: 1; }
  .sl-bcard-name { font-weight: 700; font-size: 13px; }
  .sl-bcard-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .sl-bcard-sub { font-size: 11px; color: var(--gray-500); }
  .sl-bcard-list { color: var(--purple-dark); font-weight: 600; }
  .sl-bcard-act .btn-action { font-size: 11px; padding: 5px 9px; }
  /* board card selection */
  .sl-bcard { position: relative; }
  .sl-bcard.sel { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
  .sl-bcard-ck { position: absolute; top: 8px; right: 8px; width: 15px; height: 15px; cursor: pointer; opacity: 0; accent-color: var(--purple); }
  .sl-bcard:hover .sl-bcard-ck, .sl-bcard-ck:checked { opacity: 1; }
  .sl-bcard-name { padding-right: 18px; }
  /* channel chip (Teamtailor is a channel) */
  .ch-chip { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 7px; white-space: nowrap; align-self: flex-start; }
  .ch-chip.ch-tt { background: var(--green-soft); color: var(--success); }
  .ch-chip.ch-linkedin { background: var(--info-bg); color: var(--info); }
  .ch-chip.ch-email { background: var(--purple-light); color: var(--purple-dark); }
  .ch-chip.ch-none { background: var(--danger-bg); color: var(--danger); }
  /* board bulk bar */
  .sl-board-bulk { display: flex; align-items: center; gap: 8px; background: var(--black); color: var(--white); border-radius: 10px; padding: 7px 12px; }
  .sl-board-bulk .sl-bb-count { font-size: 12.5px; font-weight: 600; margin-right: 4px; }
  .sl-board-bulk .btn-action { font-size: 11.5px; padding: 6px 11px; background: rgba(255,255,255,.14); color: var(--white); border: 1px solid transparent; }
  .sl-board-bulk .btn-action:hover { background: rgba(255,255,255,.24); }
  .sl-board-bulk .btn-action.primary { background: var(--purple); }
  .sl-board-bar { gap: 12px; }
  .sl-board-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .sl-board-selall { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--gray-600); cursor: pointer; white-space: nowrap; }
  .sl-board-selall input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--purple); }
  /* §2 per-row contact indicators */
  .ct-icons { display: inline-flex; gap: 4px; }
  .ct-dot { font-size: 9.5px; font-weight: 800; line-height: 1; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; cursor: default; }
  .ct-dot.ct-yes { background: var(--green-soft); color: var(--success); }
  .ct-dot.ct-no { background: var(--gray-100); color: var(--gray-400); text-decoration: line-through; }
  .ct-dot.ct-unknown { background: var(--gray-100); color: var(--gray-500); }
  /* §4 pass / show-passed */
  .sl-pass { flex-shrink: 0; background: none; border: 1px solid var(--gray-200); color: var(--gray-500); font: inherit; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 7px; cursor: pointer; transition: all .14s; }
  .sl-pass:hover { color: var(--danger); background: var(--danger-bg); border-color: var(--hr-purple-300); }
  .sl-tt { flex-shrink: 0; background: var(--info-bg); border: 1px solid #7dd3fc; color: var(--info); font: inherit; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: all .14s; }
  .sl-tt:hover { background: var(--info-bg); }
  .sl-row.passed { opacity: .6; }
  .sl-row.passed:hover { opacity: 1; }
  .sl-passtoggle { background: none; border: none; color: var(--purple); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
  .sl-passtoggle:hover { background: var(--purple-light); }
  /* Draft outreach action (#5) */
  .draft-btn { background: none; border: 1px solid var(--purple); cursor: pointer; font: inherit; font-size: 12px; color: var(--purple); padding: 4px 11px; border-radius: 7px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; transition: all .14s; }
  .draft-btn:hover { background: var(--purple-light); }
  .draft-btn svg { width: 13px; height: 13px; }
  /* Undo toast (#5) */
  .undo-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; z-index: 300; display: flex; align-items: center; gap: 14px; background: var(--black, var(--gray-900)); color: var(--white); padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13px; transition: opacity .18s, transform .18s; }
  .undo-toast.in { opacity: 1; transform: translate(-50%, 0); }
  .undo-toast .undo-btn { background: none; border: none; color: var(--hr-purple-300); font: inherit; font-weight: 800; cursor: pointer; }
  /* Toast notifications — replace native alert() with non-blocking toasts */
  .toast-rack { position: fixed; bottom: 20px; right: 20px; z-index: 9500; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; max-width: 380px; }
  .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 13px; line-height: 1.45; box-shadow: 0 8px 28px rgba(0,0,0,.18); transform: translateX(120%); opacity: 0; transition: transform .25s var(--ease), opacity .25s var(--ease); }
  .toast.in { transform: translateX(0); opacity: 1; }
  .toast.out { transform: translateX(120%); opacity: 0; }
  .toast-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
  .toast-body { flex: 1; min-width: 0; }
  .toast-dismiss { background: none; border: none; color: inherit; opacity: .5; cursor: pointer; font-size: 16px; padding: 0 0 0 8px; line-height: 1; }
  .toast-dismiss:hover { opacity: 1; }
  .toast-success { background: var(--ink-800); color: var(--line-300); }
  .toast-error   { background: var(--ink-800); color: var(--line-300); }
  .toast-info    { background: var(--black); color: var(--white); }
  .toast-warn    { background: var(--ink-800); color: var(--energy-yellow-100); }
  /* Confirm modal — styled replacement for native confirm() */
  .confirm-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9600; display: flex; align-items: center; justify-content: center; animation: fadeIn .15s; }
  .confirm-modal { background: var(--white); border-radius: 14px; padding: 24px 28px; min-width: 340px; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: slideUp .2s var(--ease); }
  .confirm-title { font-size: 15px; font-weight: 800; color: var(--black); margin-bottom: 6px; }
  .confirm-body { font-size: 13px; color: var(--gray-600); line-height: 1.5; margin-bottom: 18px; white-space: pre-line; }
  .confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
  .confirm-cancel { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700); cursor: pointer; }
  .confirm-cancel:hover { background: var(--gray-100); }
  .confirm-ok { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; }
  .confirm-ok.danger { background: var(--danger); color: var(--white); }
  .confirm-ok.danger:hover { background: var(--danger); }
  .confirm-ok.primary { background: var(--purple); color: var(--white); }
  .confirm-ok.primary:hover { background: var(--purple-dark); }
  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
  @keyframes slideUp { from { transform: translateY(16px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
  /* Loading skeletons (#6) */
  .result-card.skel, .results-toolbar.skel { pointer-events: none; }
  .sk-line, .sk-pill, .sk-ring { background: var(--gray-200); border-radius: 6px; animation: pulse 1.2s ease-in-out infinite; display: block; }
  .sk-line { height: 13px; margin: 7px 0; }
  .sk-pill { width: 64px; height: 18px; border-radius: 999px; display: inline-block; }
  .sk-ring { width: 58px; height: 58px; border-radius: 50%; }

  /* ── History panel ── */
  .history-toggle-btn { background: none; border: 1px solid var(--gray-300); border-radius: 8px; padding: 7px 14px; font-size: 13px; color: var(--gray-600); cursor: pointer; font-weight: 500; }
  .history-toggle-btn:hover { background: var(--gray-100); }
  .history-toggle-btn.active { background: var(--purple-light); color: var(--purple); border-color: var(--purple); }
  .history-panel { margin: 0 0 16px; background: var(--card); border: 1px solid var(--gray-300); border-radius: 16px; overflow: hidden; }
  .history-header { padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--gray-700); border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; }
  .history-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--gray-100); cursor: pointer; }
  .history-item:last-child { border-bottom: none; }
  .history-item:hover { background: var(--gray-50); }
  .history-item.pinned { background: var(--paper-50); }
  .history-query { flex: 1; font-size: 13px; font-weight: 500; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .history-meta  { font-size: 11px; color: var(--gray-500); white-space: nowrap; }
  .history-pin-btn  { background: none; border: none; cursor: pointer; font-size: 14px; opacity: .5; padding: 2px 4px; }
  .history-pin-btn:hover { opacity: 1; }
  .history-del-btn  { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--gray-400); padding: 2px 6px; border-radius: 4px; }
  .history-del-btn:hover { color: var(--danger); background: var(--danger-bg); }

  /* ── Market tab ── */
  .market-search-row { display: flex; gap: 10px; margin-bottom: 16px; }
  .market-search-row input { flex: 1; border: 1.5px solid var(--gray-300); border-radius: 10px; padding: 12px 14px; font-size: 14px; font-family: inherit; outline: none; }
  .market-search-row input:focus { border-color: var(--purple); }
  .market-btn { background: var(--purple); color: var(--white); border: none; border-radius: 10px; padding: 12px 22px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .market-btn:hover { background: var(--purple-dark); }
  .market-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
  .stat-card { background: var(--card); border: 1px solid var(--gray-300); border-radius: 16px; padding: 18px 20px; }
  .stat-card-title { font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; }
  .stat-main { font-size: 28px; font-weight: 700; color: var(--black); }
  .stat-sub  { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
  .stat-range { font-size: 13px; color: var(--gray-600); margin-top: 6px; }
  .eng-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .eng-bar-label { font-size: 12px; color: var(--gray-700); width: 150px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .eng-bar-track { flex: 1; height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
  .eng-bar-fill  { height: 100%; background: var(--purple); border-radius: 4px; }
  .eng-bar-pct   { font-size: 11px; color: var(--gray-500); width: 32px; text-align: right; }
  .market-link-btn { display: inline-block; margin-top: 16px; padding: 11px 22px; border: 1.5px solid var(--purple); border-radius: 8px; color: var(--white); font-size: 13px; font-weight: 700; cursor: pointer; background: var(--purple); }
  .market-link-btn:hover { filter: brightness(1.08); box-shadow: var(--shadow-md); }
  /* ── Market dashboard view (toggle) ── */
  .mkt-seg { display:inline-flex; gap:2px; background:var(--gray-100); border-radius:8px; padding:3px; }
  .mkt-seg button { border:0; background:transparent; font:inherit; font-size:12.5px; font-weight:600; color:var(--gray-500); padding:5px 13px; border-radius:6px; cursor:pointer; }
  .mkt-seg button.on { background:var(--white); color:var(--black); box-shadow:0 1px 2px rgba(0,0,0,.08); }
  .mkt-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:14px; }
  .mkt-kpi { background:var(--card); border:1px solid var(--gray-200); border-radius:14px; padding:16px 17px; box-shadow:0 1px 2px rgba(17,17,17,.04); }
  .mkt-kpi-head { display:flex; align-items:center; gap:9px; }
  .mkt-kpi-ico { width:28px; height:28px; border-radius:8px; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--mkt-accent) 15%, var(--white)); color:var(--warning); }
  .mkt-kpi-ico svg { width:15px; height:15px; }
  .mkt-kpi .k { font-size:11px; color:var(--gray-500); font-weight:600; }
  .mkt-kpi .n { font-size:26px; font-weight:800; color:var(--black); letter-spacing:-.025em; margin-top:11px; line-height:1; font-variant-numeric:tabular-nums; }
  .mkt-kpi .n small { font-size:13px; color:var(--gray-500); font-weight:600; }
  .mkt-kpi .sub { font-size:11px; color:var(--gray-400); margin-top:7px; }
  .mkt-delta { margin-left:auto; font-size:10.5px; font-weight:700; white-space:nowrap; padding:2px 7px; border-radius:999px; cursor:default; font-variant-numeric:tabular-nums; }
  .mkt-delta.up { color:var(--success); background:var(--success-bg); }
  .mkt-delta.down { color:var(--danger); background:var(--danger-bg); }
  .mkt-delta.flat { color:var(--gray-400); background:var(--gray-100); padding:2px 8px; }
  .mkt-rdelta { display:inline-flex; align-items:center; font-size:9.5px; font-weight:700; margin-right:5px; padding:1px 5px; border-radius:999px; vertical-align:middle; white-space:nowrap; cursor:default; font-variant-numeric:tabular-nums; }
  .mkt-rdelta.up { color:var(--success); background:var(--success-bg); } .mkt-rdelta.down { color:var(--danger); background:var(--danger-bg); } .mkt-rdelta.new { color:#7A5AF0; background:var(--hr-purple-100); }
  .mkt-kpi-head .mkt-rdelta { margin-left:auto; margin-right:0; }
  .mkt-trendnote { font-size:11.5px; color:var(--gray-500); font-weight:600; margin:2px 0 10px; cursor:default; display:inline-flex; align-items:center; gap:8px; background:var(--gray-50,var(--paper-50)); border:1px solid var(--gray-200); border-radius:999px; padding:5px 12px; }
  .mkt-trendsel { font:inherit; font-size:11.5px; font-weight:700; color:var(--gray-700); background:var(--white); border:1px solid var(--gray-300); border-radius:999px; padding:3px 8px; cursor:pointer; outline:none; }
  .mkt-trendbase { color:var(--gray-500); font-weight:600; } .mkt-trendbase b { color:var(--gray-700); }
  .mkt-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
  .mkt-panel { background:var(--card); border:1px solid var(--gray-200); border-radius:14px; padding:17px 18px 18px; min-width:0; box-shadow:0 1px 2px rgba(17,17,17,.04); }
  .mkt-col-5 { grid-column:span 5; } .mkt-col-6 { grid-column:span 6; } .mkt-col-7 { grid-column:span 7; } .mkt-col-12 { grid-column:span 12; }
  .mkt-ph { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:16px; padding-bottom:11px; border-bottom:1px solid var(--gray-100); }
  .mkt-ph h3 { font-size:13px; font-weight:700; color:var(--black); margin:0; letter-spacing:-.01em; }
  .mkt-ph .meta { font-size:11px; color:var(--gray-400); white-space:nowrap; }
  .mkt-empty { font-size:12px; color:var(--gray-400); padding:8px 0; }
  .mkt-bars { display:flex; flex-direction:column; gap:13px; }
  .mkt-bartop { display:flex; justify-content:space-between; font-size:12.5px; color:var(--gray-700); margin-bottom:6px; gap:10px; }
  .mkt-bartop > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mkt-bartop .v { color:var(--black); font-weight:700; font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .mkt-track { height:7px; background:var(--gray-100); border-radius:5px; overflow:hidden; }
  .mkt-fill { height:100%; background:var(--mkt-accent); border-radius:5px; } .mkt-fill.soft { background:var(--gray-300); } .mkt-fill.alt { background:var(--mkt-accent-2); }
  .mkt-colchart { display:flex; align-items:flex-end; gap:18px; height:158px; border-bottom:1px solid var(--gray-200); padding-top:22px; }
  .mkt-colchart .c { flex:1; display:flex; align-items:flex-end; justify-content:center; height:100%; }
  .mkt-colchart .bar { width:100%; max-width:48px; background:var(--mkt-accent); border-radius:7px 7px 0 0; position:relative; }
  .mkt-colchart .bar .tip { position:absolute; top:-19px; left:50%; transform:translateX(-50%); font-size:11.5px; font-weight:700; color:var(--black); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .mkt-colchart .bar .nlab { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:9.5px; color:rgba(17,17,17,.5); font-weight:700; }
  .mkt-colx { display:flex; gap:16px; margin-top:7px; } .mkt-colx .cx { flex:1; text-align:center; font-size:11px; color:var(--gray-500); }
  .mkt-donutwrap { display:flex; align-items:center; gap:16px; }
  .mkt-donut { width:108px; height:108px; border-radius:50%; flex:none; display:grid; place-items:center; }
  .mkt-donut .hole { width:66px; height:66px; border-radius:50%; background:var(--card); display:grid; place-items:center; text-align:center; }
  .mkt-donut .hole b { font-size:18px; color:var(--black); font-weight:800; font-variant-numeric:tabular-nums; } .mkt-donut .hole span { font-size:9px; color:var(--gray-500); display:block; margin-top:1px; }
  .mkt-legend { display:flex; flex-direction:column; gap:8px; font-size:12.5px; min-width:0; } .mkt-legend .li { display:flex; align-items:center; gap:9px; } .mkt-legend .sw { width:9px; height:9px; border-radius:3px; flex:none; } .mkt-legend .pct { margin-left:auto; color:var(--gray-600); font-weight:700; font-variant-numeric:tabular-nums; }
  .mkt-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .mkt-chip2 { font-size:12.5px; padding:7px 12px; border-radius:9px; background:var(--gray-100); color:var(--gray-800); display:inline-flex; gap:8px; align-items:center; }
  .mkt-chip2 b { color:var(--black); font-weight:700; font-variant-numeric:tabular-nums; }
  .mkt-chip2 .mkt-chipbar { width:30px; height:4px; background:var(--gray-200); border-radius:3px; overflow:hidden; } .mkt-chip2 .mkt-chipbar i { display:block; height:100%; background:var(--mkt-accent); }
  .mkt-foot { font-size:11px; color:var(--gray-400); margin-top:10px; }
  .mkt-tbl { width:100%; border-collapse:collapse; font-size:13px; }
  .mkt-tbl th { text-align:left; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-400); font-weight:600; padding:0 0 10px; border-bottom:1px solid var(--gray-200); }
  .mkt-tbl th.r, .mkt-tbl td.r { text-align:right; font-variant-numeric:tabular-nums; }
  .mkt-tbl td { padding:10px 0; border-bottom:1px solid var(--gray-100); color:var(--gray-700); vertical-align:middle; }
  .mkt-tbl tbody tr:last-child td { border-bottom:none; }
  .mkt-tbl tbody tr:hover td { background:var(--gray-50); }
  .mkt-tbl td.lead { color:var(--black); font-weight:500; }
  .mkt-tbl td.mut { color:var(--gray-500); }
  .mkt-summary { margin:16px 0 12px; padding:13px 15px; border-radius:16px; background:color-mix(in srgb, var(--mkt-accent) 9%, var(--white)); border:1px solid color-mix(in srgb, var(--mkt-accent) 26%, var(--white)); font-size:14px; line-height:1.65; color:var(--gray-800); }
  .mkt-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
  .mkt-fl-label { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-400); }
  .mkt-fpill { font:inherit; font-size:12.5px; font-weight:500; color:var(--gray-700); background:var(--card); border:1px solid var(--gray-300); border-radius:999px; padding:6px 12px; cursor:pointer; outline:none; }
  .mkt-fpill:hover { border-color:var(--gray-400); }
  .mkt-fdate { padding:5px 9px; border-radius:8px; color:var(--gray-700); font-variant-numeric:tabular-nums; }
  .mkt-fdash { color:var(--gray-400); font-size:12px; margin:0 -2px; }
  .mkt-fclear { font:inherit; font-size:12px; font-weight:600; color:var(--mkt-accent); background:color-mix(in srgb,var(--mkt-accent) 12%,var(--white)); border:1px solid color-mix(in srgb,var(--mkt-accent) 30%,var(--white)); border-radius:999px; padding:6px 12px; cursor:pointer; }
  .mkt-fcount { font-size:12px; color:var(--gray-500); font-weight:600; }
  .mkt-spark { display:flex; align-items:flex-end; gap:3px; height:20px; margin-top:9px; }
  .mkt-spark i { width:6px; background:color-mix(in srgb,var(--mkt-accent) 45%,var(--white)); border-radius:2px; display:block; }
  .mkt-spark i:last-child { background:var(--mkt-accent); }
  .mkt-insnote { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:color-mix(in srgb,var(--mkt-accent) 7%,var(--white)); border:1px solid color-mix(in srgb,var(--mkt-accent) 22%,var(--white)); border-radius:16px; padding:11px 15px; font-size:12.5px; color:var(--gray-700); }
  @media (max-width:980px) { .mkt-kpis { grid-template-columns:repeat(3,1fr); } .mkt-grid > [class*=mkt-col-] { grid-column:span 12; } }
  .market-breakdown { background: var(--card); border: 1px solid var(--gray-300); border-radius: 16px; overflow: hidden; margin-top: 20px; }
  .market-breakdown-title { padding: 14px 20px 10px; font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .14em; border-bottom: 1px solid var(--gray-100); }
  .market-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .market-table th { padding: 8px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--gray-500); background: var(--gray-100); border-bottom: 1px solid var(--gray-200); }
  .market-table th:not(:first-child) { text-align: right; }
  .market-table td { padding: 10px 16px; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); vertical-align: middle; }
  .market-table td:not(:first-child) { text-align: right; }
  .market-table tbody tr:nth-child(even) td { background: var(--paper-50); }
  .market-table tr:last-child td { border-bottom: none; }
  .market-table tbody tr:hover td { background: var(--hr-purple-100); }
  .market-country-name { font-weight: 600; color: var(--black); }

  /* ── Outreach dashboard (What's working) ── */
  .od-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gray-500); margin: 24px 0 10px; }
  .od-section-hdr { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 10px; }
  .od-section-hdr .od-section-title { margin: 0; }
  .od-section-link { font-size: 12px; font-weight: 600; color: var(--purple); text-decoration: none; padding: 3px 8px; border-radius: 6px; transition: background .12s; }
  .od-section-link:hover { background: var(--purple-soft, var(--purple-light)); }
  .od-section-sub { font-size: 11px; color: var(--gray-400); }
  /* Filter bar */
  .od-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 14px; border-bottom: 1px solid var(--gray-200); margin-bottom: 4px; }
  .od-filter-label { font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; margin-right: 2px; }
  .od-fb-days { display: inline-flex; background: var(--gray-100); border-radius: 8px; padding: 2px; gap: 1px; }
  .od-fb-day { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px; border: none; background: none; color: var(--gray-600); cursor: pointer; transition: all .12s; }
  .od-fb-day.active { background: var(--white); color: var(--purple); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
  .od-fb-day:hover:not(.active) { background: rgba(0,0,0,.04); }
  .od-filter-sep { width: 1px; height: 20px; background: var(--gray-200); margin: 0 2px; }
  .od-filter-select { font-size: 12px; font-weight: 600; color: var(--gray-700); background: var(--card); border: 1px solid var(--gray-300); border-radius: 8px; padding: 5px 10px 5px 10px; cursor: pointer; outline: none; font-family: inherit; }
  .od-filter-select:focus { border-color: var(--purple); }
  .od-filter-select.active { border-color: var(--purple); background: var(--paper-100); color: var(--purple); }
  .od-filter-clear { font-size: 11px; font-weight: 600; color: var(--gray-500); background: none; border: 1px solid var(--gray-200); border-radius: 7px; padding: 4px 10px; cursor: pointer; transition: all .12s; }
  .od-filter-clear:hover { color: var(--red); border-color: var(--red); }
  .od-filter-ctx { font-size: 12px; color: var(--gray-500); background: var(--gray-50, var(--gray-50)); border: 1px solid var(--gray-200); border-radius: 8px; padding: 7px 12px; margin-bottom: 14px; }
  /* KPI strip */
  .od-kpi-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 4px; }
  .od-kpi-card { background: var(--card); border: 1px solid var(--gray-200); border-radius: 16px; padding: 16px 20px; }
  .od-kpi-label { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; }
  .od-kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--gray-900); font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 8px; }
  .od-kpi-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .od-kpi-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
  .od-kpi-delta.up { background: var(--green-soft); color: var(--green); }
  .od-kpi-delta.down { background: var(--danger-bg); color: var(--red); }
  .od-kpi-delta.flat { background: var(--gray-100); color: var(--gray-500); }
  .od-kpi-sub { font-size: 11px; color: var(--gray-400); }
  /* Action cards — clickable */
  .od-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .od-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .od-action { background: var(--card); border: 1px solid var(--gray-300); border-radius: 16px; padding: 16px 18px; border-top: 3px solid var(--gray-300); cursor: pointer; transition: box-shadow .15s, transform .1s; display: flex; flex-direction: column; }
  .od-action:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
  .od-action:active { transform: translateY(0); }
  .od-action.red { border-top-color: var(--red); }
  .od-action.amber { border-top-color: var(--amber); }
  .od-action.green { border-top-color: var(--green); }
  .od-action.blue { border-top-color: var(--blue); }
  .od-action-count { font-size: 34px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; font-variant-numeric: tabular-nums; }
  .od-action-label { font-size: 13px; color: var(--gray-700); font-weight: 600; margin-top: 5px; }
  .od-action-sub { font-size: 11px; color: var(--gray-500); margin-top: 3px; flex: 1; }
  .od-action-link { font-size: 11px; font-weight: 700; color: var(--purple); margin-top: 12px; }
  /* Cards */
  .od-card { background: var(--card); border: 1px solid var(--gray-300); border-radius: 16px; padding: 18px 20px; }
  .od-card h4 { font-size: 13px; font-weight: 700; color: var(--gray-800); margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .od-card-badge { font-size: 11px; font-weight: 600; color: var(--gray-500); background: var(--gray-100); padding: 3px 9px; border-radius: 20px; }
  /* Drop-off reasons */
  .od-dropoff-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
  .od-dropoff-card { flex: 1; min-width: 140px; background: var(--card); border: 1px solid var(--gray-200); border-radius: 16px; padding: 14px 16px; }
  .od-dropoff-count { font-size: 26px; font-weight: 800; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
  .od-dropoff-reason { font-size: 12px; color: var(--gray-600); font-weight: 500; margin-top: 5px; }
  /* Funnel */
  .od-funnel { display: flex; align-items: flex-end; gap: 4px; padding-top: 6px; }
  .od-fstage { flex: 1; text-align: center; }
  .od-fbar { border-radius: 6px 6px 0 0; color: var(--white); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; min-height: 26px; }
  .od-flabel { font-size: 11px; color: var(--gray-500); font-weight: 600; text-transform: uppercase; margin-top: 6px; }
  .od-fconv { font-size: 10px; color: var(--gray-400); margin-top: 2px; }
  .od-vrow { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--gray-100); }
  .od-vrow:last-child { border-bottom: none; }
  .od-vlabel { font-size: 13px; color: var(--gray-700); }
  .od-vsub { font-size: 11px; color: var(--gray-400); margin-top: 1px; }
  .od-vval { font-size: 18px; font-weight: 700; color: var(--gray-800); font-variant-numeric: tabular-nums; }
  /* Channel + steps */
  .od-chrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--gray-100); }
  .od-chrow:last-child { border-bottom: none; }
  .od-chname { flex: 1; font-size: 13px; font-weight: 600; color: var(--gray-800); text-transform: capitalize; }
  .od-chstats { font-size: 11px; color: var(--gray-500); font-weight: 400; }
  .od-chtrack { width: 120px; height: 7px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
  .od-chfill { height: 100%; border-radius: 4px; background: var(--purple); }
  .od-chrate { width: 50px; text-align: right; font-size: 15px; font-weight: 700; color: var(--purple-dark); font-variant-numeric: tabular-nums; }
  .od-steps { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 8px; }
  .od-stepcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
  .od-stepbar { width: 100%; border-radius: 5px 5px 0 0; background: var(--purple); min-height: 3px; }
  .od-stepval { font-size: 12px; font-weight: 600; color: var(--gray-600); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
  .od-steplabel { font-size: 11px; color: var(--gray-500); margin-top: 7px; }
  .od-insight { margin-top: 14px; padding: 11px 14px; background: var(--amber-soft); border-left: 3px solid var(--amber); border-radius: 6px; font-size: 12px; color: var(--gray-700); line-height: 1.5; }
  /* A/B */
  .od-ab { padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
  .od-ab:last-child { border-bottom: none; }
  .od-ab-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .od-ab-title { font-size: 13px; font-weight: 600; color: var(--gray-800); }
  .od-ab-win { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; background: var(--green-soft); color: var(--green); }
  .od-ab-var { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
  .od-ab-letter { width: 14px; font-size: 12px; font-weight: 700; color: var(--gray-500); }
  .od-ab-track { flex: 1; height: 26px; background: var(--gray-100); border-radius: 6px; overflow: hidden; }
  .od-ab-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; font-size: 11px; color: var(--white); white-space: nowrap; }
  .od-ab-rate { width: 50px; text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
  /* Trend badges + avatar */
  .od-trend { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
  .od-trend.up { background: var(--green-soft); color: var(--green); }
  .od-trend.down { background: var(--danger-bg); color: var(--red); }
  .od-trend.flat { background: var(--gray-100); color: var(--gray-500); }
  .od-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--white); background: var(--purple); }

  /* ── What's working redesign (ww-*) ── */
  .ww-wrap { background: var(--paper-100); border-radius: 16px; padding: 2px 0 24px; }
  .ww-card { background: var(--white); border: 1px solid var(--paper-200); border-radius: 16px; padding: 20px 22px; margin-bottom: 14px; }
  .ww-card-title { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
  .ww-card-sub { font-size: 12px; color: var(--ink-400); margin-bottom: 16px; }
  .ww-section-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); margin: 20px 0 10px; }
  .ww-click { cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
  .ww-click:hover { border-color: var(--line-300) !important; box-shadow: 0 3px 14px -6px rgba(22,22,22,.18); }
  /* triage cards */
  .ww-triage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
  .ww-triage-card { background: var(--white); border: 1px solid var(--paper-200); border-radius: 16px; padding: 15px 16px; border-top-width: 3px; }
  .ww-triage-tag { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  .ww-triage-count { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; line-height: 1; }
  .ww-triage-label { font-size: 12.5px; font-weight: 600; color: var(--ink-700); margin-top: 3px; }
  .ww-triage-sub { font-size: 11px; color: var(--ink-400); margin-top: 3px; line-height: 1.4; }
  /* scorecard */
  .ww-kpi5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
  .ww-kpi-card { background: var(--white); border: 1px solid var(--paper-200); border-radius: 16px; padding: 15px 16px; }
  .ww-kpi-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
  .ww-kpi-value { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin-top: 5px; line-height: 1; font-variant-numeric: tabular-nums; }
  .ww-kpi-delta { font-size: 11.5px; font-weight: 700; margin-top: 5px; }
  /* funnel */
  .ww-funnel-wrap { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 4px; }
  .ww-funnel-arrow { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 46px; }
  .ww-stage-card { flex: none; width: 108px; border-radius: 16px; padding: 11px 12px; border: 1px solid var(--paper-200); background: var(--paper-50); cursor: pointer; transition: transform .12s; }
  .ww-stage-card:hover { transform: translateY(-2px); }
  .ww-stage-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  .ww-stage-val { font-size: 22px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
  .ww-stage-pct { font-size: 10px; color: var(--ink-400); margin-top: 2px; }
  .ww-drop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .ww-drop-card { background: var(--paper-50); border: 1px solid var(--paper-200); border-radius: 10px; padding: 10px 11px; cursor: pointer; }
  /* velocity */
  .ww-vel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .ww-vel-card { background: var(--paper-50); border: 1px solid var(--paper-200); border-radius: 16px; padding: 16px 18px; }
  .ww-vel-val { font-size: 32px; font-weight: 800; letter-spacing: -.025em; color: var(--hr-purple); line-height: 1; }
  .ww-vel-lbl { font-size: 13px; font-weight: 700; margin-top: 9px; }
  .ww-vel-sub { font-size: 11px; color: var(--ink-400); margin-top: 3px; line-height: 1.45; }
  /* plays table */
  .ww-plays-hdr { display: grid; grid-template-columns: minmax(0,2fr) minmax(110px,2fr) 56px 70px 64px; gap: 14px; align-items: center; padding: 0 12px 10px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
  .ww-play-row { display: grid; grid-template-columns: minmax(0,2fr) minmax(110px,2fr) 56px 70px 64px; gap: 14px; align-items: center; border: 1px solid var(--paper-200); border-radius: 10px; padding: 10px 12px; margin-bottom: 9px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
  .ww-play-row:hover { border-color: var(--line-300); box-shadow: 0 3px 14px -6px rgba(22,22,22,.18); }
  .ww-play-bar { flex: 1; height: 18px; background: var(--paper-200); border-radius: 5px; overflow: hidden; }
  .ww-play-fill { height: 100%; border-radius: 5px; transition: width .35s ease; }
  .ww-insight-box { margin-top: 14px; background: var(--hr-purple-100); border: 1px solid var(--hr-purple-300); border-radius: 10px; padding: 11px 13px; font-size: 12px; color: var(--hr-purple-700); line-height: 1.5; }
  /* channel bar */
  .ww-ch-row { border: 1px solid var(--paper-200); border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s; }
  .ww-ch-row:hover { border-color: var(--line-300); }
  .ww-ch-bar { height: 8px; background: var(--paper-200); border-radius: 5px; overflow: hidden; margin: 6px 0 5px; }
  .ww-ch-fill { height: 100%; border-radius: 5px; transition: width .35s ease; }
  /* step chart */
  .ww-step-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
  .ww-step-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
  .ww-step-fill { width: 100%; border-radius: 5px 5px 0 0; transition: height .35s ease; }
  /* sources table */
  .ww-src-hdr { display: grid; grid-template-columns: 1.7fr 0.9fr 0.9fr 0.9fr 0.7fr 0.9fr 0.9fr; gap: 10px; align-items: center; padding: 0 12px 10px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
  .ww-src-row { display: grid; grid-template-columns: 1.7fr 0.9fr 0.9fr 0.9fr 0.7fr 0.9fr 0.9fr; gap: 10px; align-items: center; border: 1px solid var(--paper-200); border-radius: 10px; padding: 11px 12px; margin-bottom: 7px; cursor: pointer; transition: border-color .12s; }
  .ww-src-row:hover { border-color: var(--line-300); }
  .ww-src-roi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
  /* heat map */
  .ww-heat-grid { display: grid; grid-template-columns: 34px repeat(7, 1fr); gap: 3px; align-items: center; }
  .ww-heat-cell { height: 15px; border-radius: 3px; }
  /* messages */
  .ww-msg-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--paper-200); border-radius: 9px; padding: 9px 11px; margin-bottom: 6px; cursor: pointer; transition: border-color .12s; }
  .ww-msg-row:hover { border-color: var(--line-300); }
  /* missed */
  .ww-missed-row { display: grid; grid-template-columns: 2fr 1fr 1fr 60px 80px; gap: 12px; align-items: center; border: 1px solid var(--paper-200); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s; }
  .ww-missed-row:hover { border-color: var(--line-300); }
  /* ops bottom row */
  .ww-ops-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; margin-bottom: 14px; }
  .ww-pacing-card { background: var(--black); border-radius: 16px; padding: 20px 22px; color: var(--white); }
  .ww-seq-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--paper-200); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s; }
  .ww-seq-row:hover { border-color: var(--line-300); }
  /* team link */
  .ww-team-card { background: var(--white); border: 1px solid var(--paper-200); border-radius: 16px; padding: 18px 22px; margin-bottom: 14px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
  .ww-team-card:hover { border-color: var(--line-300); box-shadow: 0 3px 14px -6px rgba(22,22,22,.18); }
  /* 2-col grid */
  .ww-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  /* Measure nav tab buttons */
  .ms-tab { background: transparent; color: var(--ink-500); box-shadow: none; transition: background .12s, color .12s; }
  .ms-tab-on { background: var(--white) !important; color: var(--hr-purple) !important; box-shadow: 0 1px 3px rgba(43,15,56,.16) !important; }
  .ms-per-on { background: var(--hr-purple-100) !important; color: var(--hr-purple) !important; }

  /* Pool selector */
  .pool-selector { display: inline-flex; background: var(--gray-100); border-radius: 10px; padding: 3px; gap: 2px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
  .source-subs .pool-selector { margin-bottom: 0; }   /* lives in the rail now — no extra gap */
  .source-subs { flex-wrap: wrap; row-gap: 4px; align-items: flex-start; }
  .source-subs .pool-btn { padding: 8px 11px; }        /* tighter so all sources + Shortlists fit one row */
  .source-subs .pool-group-label { padding: 0 4px 0 6px; }
  /* Shortlists: the destination pill, pushed to the far right of the strip */
  .pool-btn-saved { margin-left: auto; background: var(--gray-100); border-radius: 10px; padding: 11px 14px; }
  .pool-btn-saved.active { background: var(--card); border: 1px solid var(--gray-200); padding: 10px 13px; }
  /* When the railbar gets tight (smaller window / sidebar open), drop the
     decorative group labels and slim the buttons so the strip stays one row.
     Container query: reacts to actual available width, not just the viewport. */
  .railbar { container-type: inline-size; }
  @container (max-width: 1010px) {
    .source-subs .pool-group-label { display: none; }
    .source-subs .pool-btn { padding: 8px 9px; font-size: 12.5px; }
    .pool-btn-saved { padding: 11px 12px; }
    .pool-btn-saved.active { padding: 10px 11px; }
  }
  .pool-divider { width: 1px; align-self: stretch; background: var(--gray-300); margin: 5px 5px; }
  .pool-group-label { font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--gray-400); padding: 0 6px 0 8px; align-self: center; user-select: none; }
  .pool-cost { font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--white); background: var(--amber); border-radius: 999px; padding: 1px 6px; margin-left: 2px; }
  /* LinkedIn connection-degree chips (replaces the old My Network tab) */
  .li-deg-chip { font-size: 12.5px; font-weight: 600; border: 1.5px solid var(--gray-300); background: var(--card); color: var(--gray-700); border-radius: 999px; padding: 5px 13px; cursor: pointer; font-family: inherit; transition: all .14s var(--ease); }
  .li-deg-chip:hover { border-color: var(--purple); color: var(--purple); }
  .li-deg-chip.active { background: var(--purple-light); border-color: transparent; color: var(--purple-dark); font-weight: 700; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--purple) 35%, transparent); }
  /* Re-engage cards — match the standard result-card grid */
  .re-card { transition: box-shadow .14s var(--ease), border-color .14s var(--ease); display: grid !important; grid-template-columns: 1fr auto !important; gap: 16px !important; }
  .re-card-sel { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple), var(--shadow-sm); }
  .re-card .re-main { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
  .re-card .re-side { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; }
  .re-bulk-bar { position: sticky; top: 8px; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1.5px solid var(--purple); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 12px; box-shadow: var(--shadow-md); }
  .re-bulk-count { font-size: 13px; color: var(--gray-700); margin-right: auto; }
  .re-bulk-count b { color: var(--purple-dark); font-size: 15px; }
  /* LinkedIn smart-card editable blocks */
  .li-bl { display: block; font-size: 11px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
  .li-dim { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--gray-400); }
  .li-in { width: 100%; border: 1.5px solid var(--gray-300); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; background: var(--card-2); color: var(--black); transition: border-color .15s, box-shadow .15s; }
  .li-in:focus { border-color: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 14%, transparent); }
  @media (max-width: 560px) { .li-blocks { grid-template-columns: 1fr !important; } .li-blocks > div { grid-column: 1 / -1 !important; } }
  .pool-btn { padding: 8px 16px; border: none; background: none; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--gray-500); cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
  .pool-btn:hover:not(.disabled) { color: var(--black); }
  .pool-btn.active { background: var(--card); color: var(--purple-dark, var(--purple)); font-weight: 700; box-shadow: var(--shadow-sm); position: relative; }
  /* each source gets its own electron color when active (playful spectrum) */
  .pool-btn.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3.5px; border-radius: 3px; background: var(--purple); }
  #pool-screened.active::after   { background: var(--dot-green); }
  #pool-talent.active::after     { background: var(--dot-cyan); }
  #pool-market.active::after     { background: var(--dot-orange); }
  #pool-my_network.active::after { background: var(--dot-pink); }
  #pool-xray.active::after       { background: var(--dot-purple); }
  #pool-external.active::after   { background: var(--yellow); }
  .pool-btn.disabled { opacity: .45; cursor: default; }
  .soon-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; background: var(--purple-light); color: var(--purple); padding: 1px 5px; border-radius: 4px; letter-spacing: .14em; }

  /* Sourcing builder (My Network / Web search) — stepped single card */
  .builder-card { background: var(--card); border: 1px solid var(--gray-300); border-radius: 14px; padding: 4px 22px 20px; margin-bottom: 18px; }
  .bstep { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--gray-100); }
  .bstep:last-of-type { border-bottom: none; }
  .bstep-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--purple); color: var(--white); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .bstep-body { flex: 1; min-width: 0; }
  .bstep-label { display: block; font-size: 13px; font-weight: 600; color: var(--black); margin-bottom: 9px; }
  .bstep-labelrow { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
  .bstep-labelrow .bstep-label { margin-bottom: 0; }
  .bstep-note { font-size: 11px; color: var(--purple); font-weight: 600; }
  .bf-desc { width: 100%; box-sizing: border-box; min-height: 70px; border: 1.5px solid var(--gray-300); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-family: inherit; line-height: 1.5; resize: vertical; outline: none; color: var(--black); background: var(--white); }
  .bf-desc:focus { border-color: var(--purple); }
  .builder-actions { padding-top: 18px; }
  .builder-actions .search-btn { width: 100%; justify-content: center; }
  .builder-modes { display: inline-flex; background: var(--gray-100); border-radius: 9px; padding: 3px; gap: 2px; margin: 14px 0 2px; }
  .bmode { border: none; background: none; border-radius: 7px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--gray-500); cursor: pointer; transition: all .15s; }
  .bmode.on { background: var(--white); color: var(--black); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
  .bf-hint { margin-top: 8px; font-size: 12px; color: var(--gray-500); line-height: 1.4; }
  .bf-fill { margin-top: 10px; }
  .builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .bfield { display: flex; flex-direction: column; gap: 4px; }
  .bfield-wide { grid-column: 1 / -1; }
  .bfield label { font-size: 11px; font-weight: 600; color: var(--gray-800); text-transform: uppercase; letter-spacing: .03em; }
  .bfield input { border: 1.5px solid var(--gray-300); border-radius: 8px; padding: 8px 11px; font-size: 13px; font-family: inherit; outline: none; color: var(--black); background: var(--white); }
  .bfield input:focus { border-color: var(--purple); }
  .bdim { color: var(--gray-400); font-weight: 500; text-transform: none; letter-spacing: 0; }
  .builder-link { align-self: flex-start; background: none; border: none; color: var(--purple); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; }
  .builder-suggest { margin-top: 12px; padding: 12px; background: var(--gray-100); border-radius: 10px; }
  .sugg-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
  .sugg-group:last-child { margin-bottom: 0; }
  .sugg-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gray-500); margin-right: 4px; }
  .sugg-chip { background: var(--white); border: 1px solid var(--gray-300); border-radius: 16px; padding: 3px 10px; font-size: 12px; color: var(--gray-800); cursor: pointer; transition: all .12s; }
  .sugg-chip:hover { border-color: var(--purple); color: var(--purple); }
  .sugg-chip.kw { border-style: dashed; }
  .builder-targets { display: flex; flex-wrap: wrap; gap: 6px; }
  .target-chip { background: var(--white); border: 1.5px solid var(--gray-300); border-radius: 16px; padding: 5px 12px; font-size: 12px; font-weight: 500; color: var(--gray-800); cursor: pointer; transition: all .12s; }
  .target-chip:hover { border-color: var(--purple); }
  .target-chip.on { background: var(--purple); border-color: var(--purple); color: var(--white); }
  .builder-targetnote { margin-top: 14px; font-size: 12px; color: var(--gray-500); }
  .builder-output { margin-top: 16px; }
  .qb-label { font-size: 12px; font-weight: 600; color: var(--gray-800); margin-bottom: 10px; }
  .qb-block { border: 1px solid var(--gray-300); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
  .qb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
  .qb-platform { font-size: 13px; font-weight: 600; color: var(--black); }
  .qb-hint { margin-top: 8px; font-size: 11.5px; color: var(--gray-500); line-height: 1.45; }
  .qb-variant { font-weight: 500; color: var(--purple); font-size: 12px; }

  /* Contact enrichment / verification badges (Phase 2) */
  .vbadge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; }
  .vbadge.ok { background: var(--success-bg); color: var(--success); }
  .vbadge.warn { background: var(--warning-bg); color: var(--warning); }
  .vbadge.bad { background: var(--danger-bg); color: var(--danger); }
  .ctype { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); background: var(--gray-100); padding: 2px 5px; border-radius: 4px; }
  .sig-badge { font-size: 10px; font-weight: 600; color: var(--success); background: var(--success-bg); padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
  .qb-actions { display: flex; gap: 8px; align-items: center; }
  .qb-actions a.btn-action { text-decoration: none; display: inline-flex; align-items: center; }
  .qb-query { width: 100%; border: 1px solid var(--gray-300); border-radius: 8px; padding: 8px 10px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; color: var(--gray-800); background: var(--gray-100); resize: vertical; outline: none; box-sizing: border-box; }

  /* Saved searches chips */
  .saved-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .saved-label { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .14em; flex-shrink: 0; }
  .saved-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; background: var(--card); border: 1px solid var(--gray-300); border-radius: 20px; font-size: 12px; color: var(--gray-800); cursor: pointer; transition: border-color .12s; }
  .saved-chip:hover { border-color: var(--purple); color: var(--purple); }
  .saved-chip-del { font-size: 14px; color: var(--gray-400); line-height: 1; margin-left: 2px; }
  .saved-chip-del:hover { color: var(--red); }

  /* Pool notice */
  .pool-notice { background: var(--energy-yellow-100); border: 1px solid #fde68a; border-radius: 8px; padding: 9px 14px; font-size: 12px; color: var(--warning); margin-bottom: 14px; }

  /* ── Login overlay ── */
  #loginOverlay {
    position: fixed; inset: 0; background: var(--bg); z-index: 2000;
    display: flex; align-items: center; justify-content: center;
  }
  .login-card {
    background: var(--card); border-radius: 16px; padding: 36px 32px;
    width: 380px; max-width: 94vw; box-shadow: 0 20px 60px rgba(0,0,0,.18);
    text-align: center;
  }
  .login-logo { font-size: 28px; font-weight: 800; margin-bottom: 4px; }
  .login-sub { font-size: 13px; color: var(--gray-500); margin-bottom: 28px; }
  .login-error { color: var(--red); font-size: 13px; margin-top: 10px; display: none; }

  /* Maybes review list */
  .maybe-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
  .maybe-row  { display: flex; align-items: center; gap: 10px; background: var(--gray-100); border-radius: 10px; padding: 10px 14px; }
  .maybe-row-name { flex: 1; font-size: 14px; font-weight: 600; }
  .maybe-row-role { font-size: 12px; color: var(--gray-500); }
  .maybe-row-btns { display: flex; gap: 6px; }
  .maybe-row-btn  { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; border: none; cursor: pointer; }
  .maybe-skip-btn { background: var(--gray-300); color: var(--gray-800); }
  .maybe-save-btn { background: var(--purple); color: var(--white); }

  /* ── Campaigns ── */
  /* C17/C19 — per-card status tag + draft-card visual treatment */
  .camp-statustag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
  .camp-card-draft { background: repeating-linear-gradient(135deg, var(--paper-50), var(--paper-50) 8px, var(--paper-100) 8px, var(--paper-100) 9px); }
  .camp-card-draft .camp-funnel .fv { color: var(--gray-400); }
  /* Spec 4.1 C17 — derived-status segmented control + C18 view toggle */
  .camp-statusbar { display: flex; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .camp-filter-more { background: none; border: 1px solid var(--gray-300); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 14px; color: var(--gray-400); line-height: 1; }
  .camp-filter-more:hover { border-color: var(--purple); color: var(--purple); }
  .camp-filter-more.active { border-color: var(--purple); color: var(--purple); background: var(--purple-light); }
  .camp-viewtoggle { display: inline-flex; border: 1px solid var(--gray-300); border-radius: 8px; overflow: hidden; }
  .camp-viewtoggle button { background: var(--white); border: 0; color: var(--gray-600); font: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer; }
  .camp-viewtoggle button:not(:last-child) { border-right: 1px solid var(--gray-200); }
  .camp-viewtoggle button.active { background: var(--purple); color: var(--white); }
  .camp-viewtoggle button:hover:not(.active) { background: var(--gray-100); }
  /* C18 — table-row layout */
  .ctable { background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; }
  .ctrow { display: grid; grid-template-columns: 2.4fr 1.3fr 1.1fr 2.2fr 1fr 60px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--gray-100); cursor: pointer; transition: background .14s; min-height: 56px; }
  .ctrow:last-child { border-bottom: none; }
  .ctrow:not(.ctrow-head):hover { background: var(--gray-50, var(--gray-100)); }
  .ctrow.ctrow-head { background: var(--gray-50, var(--gray-100)); font-size: 10.5px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; cursor: default; padding-top: 8px; padding-bottom: 8px; min-height: 0; }
  .ctrow.is-draft { background: repeating-linear-gradient(135deg, var(--paper-50), var(--paper-50) 8px, var(--paper-100) 8px, var(--paper-100) 9px); }
  .ctrow-title { font-size: 14px; font-weight: 700; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ctrow-sub { font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
  .ctrow-status { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .ctrow-channels { display: flex; gap: 4px; align-items: center; }
  .ctrow-funnel { display: flex; align-items: center; gap: 4px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--gray-700); flex-wrap: wrap; }
  .ctrow-fcell { font-weight: 700; min-width: 22px; text-align: right; }
  .ctrow-farrow { color: var(--gray-300); }
  .ctrow-frate { font-size: 11px; font-weight: 700; color: var(--green); margin: 0 2px; }
  .ctrow-owner { font-size: 12px; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ctrow-actions { display: flex; gap: 4px; justify-content: flex-end; }
  .ctrow-iconbtn { background: transparent; border: 0; color: var(--gray-400); cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px; transition: background .14s, color .14s; }
  .ctrow-iconbtn:hover { background: var(--gray-100); color: var(--gray-800); }
  .camp-statuspill { background: var(--gray-100); border: 1px solid transparent; color: var(--gray-700); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .14s, color .14s, border-color .14s; }
  .camp-statuspill:hover { background: var(--gray-200); }
  .camp-statuspill.active { background: var(--purple); color: var(--white); border-color: var(--purple); }
  .camp-statuspill .cnt { font-size: 11px; font-weight: 700; background: rgba(0,0,0,.08); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
  .camp-statuspill.active .cnt { background: rgba(255,255,255,.22); }
  .camp-filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .camp-filter-input { padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 13px; background: var(--card); color: var(--gray-800); }
  .camp-filter-input:focus { outline: none; border-color: var(--purple); }
  #campSearch { min-width: 220px; flex: 1; max-width: 360px; }
  .camp-filter-count { color: var(--gray-500); font-size: 12px; margin-left: auto; }
  .role-group { margin-bottom: 26px; }
  .role-group-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 2px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--gray-200); }
  .role-group-name { font-weight: 700; font-size: 15px; color: var(--gray-800); }
  .role-group-sub { color: var(--gray-500); font-size: 12px; margin-left: 10px; }
  .camp-card { background: var(--card); border: 1px solid var(--gray-200); border-radius: 16px; padding: 18px 20px; margin-bottom: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
  .camp-card:hover { border-color: var(--purple); box-shadow: 0 2px 10px var(--shadow-md); }
  .camp-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .camp-name { font-size: 16px; font-weight: 700; color: var(--black); }
  .camp-job { font-size: 13px; color: var(--gray-500); margin-top: 2px; }
  .camp-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--gray-500); margin-top: 8px; }
  .camp-health { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
  .camp-health.green { background: var(--success-bg); color: var(--success); }
  .camp-health.amber { background: var(--warning-bg); color: var(--warning); }
  .camp-health.red   { background: var(--danger-bg); color: var(--danger); }
  .camp-health.gray  { background: var(--gray-100); color: var(--gray-500); }
  /* campaigns list redesign: KPI strip + per-campaign funnel + channel chips */
  .camp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 16px; }
  .camp-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 13px 15px; }
  .camp-kpi .ck-lbl { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--gray-500); }
  .camp-kpi .ck-val { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin-top: 2px; font-variant-numeric: tabular-nums; }
  .camp-kpi .ck-sub { font-size: 11.5px; color: var(--gray-500); margin-top: 1px; }
  .camp-mc { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; vertical-align: middle; margin-left: 6px; }
  .camp-mc.mc { background: var(--purple-light); color: var(--purple-dark); }
  .camp-mc.sc { background: var(--gray-100); color: var(--gray-500); }
  .camp-chset { display: inline-flex; gap: 4px; }
  .camp-ch { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
  .camp-ch-li { background: var(--info-bg); color: var(--info); } .camp-ch-em { background: var(--purple-light); color: var(--purple-dark); }
  .camp-ch-sms { background: var(--success-bg); color: var(--success); } .camp-ch-gray { background: var(--gray-100); color: var(--gray-500); }
  .camp-funnel { display: flex; align-items: center; gap: 4px; margin: 12px 0 6px; flex-wrap: wrap; }
  .camp-funnel .fstep { background: var(--gray-100); border-radius: 9px; padding: 7px 13px; text-align: center; min-width: 70px; }
  .camp-funnel .fstep.hl { background: var(--purple-light); }
  .camp-funnel .fv { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .camp-funnel .fstep.hl .fv { color: var(--purple-dark); }
  .camp-funnel .fl { font-size: 10.5px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .2px; }
  .camp-funnel .farrow { color: var(--gray-300); font-size: 15px; }
  .camp-funnel .frate { font-size: 12px; font-weight: 800; color: var(--green); margin: 0 2px; }
  .camp-funnel-empty { font-size: 12px; color: var(--gray-400); margin: 12px 0 6px; }
  /* Campaign progress bar — HeyReach-style sequence completion indicator */
  .camp-progress { margin: 8px 0 4px; display: flex; align-items: center; gap: 10px; }
  .camp-progress-track { flex: 1; height: 5px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
  .camp-progress-fill { height: 100%; border-radius: 999px; background: var(--purple); transition: width .4s var(--ease); }
  .camp-progress-fill.done { background: var(--green, var(--success)); }
  .camp-progress-label { font-size: 11px; font-weight: 700; color: var(--gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* audience reachability bar (multichannel keystone) */
  /* C25 — Send-mode bar in the builder. Mirrors the campaign header button. */
  .seq-sendmode-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--gray-200); border-radius: 16px; padding: 10px 14px; margin-bottom: 10px; }
  .seq-sendmode-label { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; }
  .seq-sendmode-btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700); cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
  .seq-sendmode-btn:hover { background: var(--gray-50, var(--gray-100)); }
  .seq-sendmode-btn.on { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
  .seq-sendmode-hint { font-size: 12px; color: var(--gray-600); }
  /* C23 — Step eligibility readout: the §3.2 routing split for THIS step. */
  .seq-elig { margin-top: 8px; padding: 8px 10px; background: var(--gray-50, var(--gray-100)); border: 1px solid var(--gray-100); border-radius: 8px; }
  .seq-elig .elig-lbl { font-size: 10.5px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; display: block; margin-bottom: 6px; }
  .seq-elig .elig-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .elig-seg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
  .elig-seg.elig-ok { background: var(--success-bg); color: var(--success); }
  .elig-seg.elig-warn { background: var(--warning-bg); color: var(--warning); }
  .elig-seg.elig-skip { background: var(--danger-bg); color: var(--danger); }
  .elig-seg .elig-n { font-weight: 800; font-variant-numeric: tabular-nums; }
  .elig-seg .elig-l { font-weight: 500; }
  /* C26 — Zero-eligible step warning. Hard variant when there's no escape;
     mild variant when the configured fallback channel still has reach. */
  .seq-zero-warn { font-size: 12px; padding: 8px 12px; border-radius: 8px; background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-bg); margin: 0 0 10px; }
  .seq-zero-warn-mild { background: var(--warning-bg); color: var(--warning); border-color: #fde68a; }
  /* C24 — Handoff node terminal in the builder. Two styles: mapped (green/
     confident) vs unmapped (amber/nudge to configure). Clickable → settings. */
  .seq-handoff { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; cursor: pointer; transition: background .14s, border-color .14s, box-shadow .14s; }
  .seq-handoff:hover { box-shadow: var(--shadow-sm); }
  .seq-handoff.is-mapped   { background: var(--success-bg); border: 1px solid var(--success); color: var(--success); }
  .seq-handoff.is-unmapped { background: var(--warning-bg); border: 1px dashed var(--warning); color: var(--warning); }
  .seq-handoff-icon { font-size: 22px; flex: none; }
  .seq-handoff-body { flex: 1; min-width: 0; }
  .seq-handoff-title { font-size: 14px; font-weight: 700; line-height: 1.2; }
  .seq-handoff-sub { font-size: 12px; opacity: .85; margin-top: 4px; line-height: 1.4; }
  .seq-handoff-edit { flex: none; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.6); }
  .reachbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; margin-bottom: 14px; }
  .reachbar .reach-item { display: flex; align-items: center; gap: 9px; }
  .reachbar .reach-sep { width: 1px; height: 32px; background: var(--line); }
  .reach-ch { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: none; }
  .reach-ch.all { background: var(--gray-100); color: var(--gray-600); font-variant-numeric: tabular-nums; }
  .reach-ch.li { background: var(--info-bg); color: var(--info); } .reach-ch.em { background: var(--purple-light); color: var(--purple-dark); } .reach-ch.sms { background: var(--success-bg); color: var(--success); }
  .reach-t { font-size: 12px; color: var(--gray-700); line-height: 1.25; }
  .reach-t b { font-size: 14px; font-variant-numeric: tabular-nums; }
  .reach-cap, .reach-capline { color: var(--gray-500); }
  .reach-bar { width: 88px; height: 5px; background: var(--gray-100); border-radius: 3px; overflow: hidden; margin-top: 3px; }
  .reach-bar i { display: block; height: 100%; }
  .reach-bar.li i { background: var(--info); } .reach-bar.em i { background: var(--purple); } .reach-bar.sms i { background: var(--success); }
  .camp-delete-btn { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--gray-400); padding: 4px 8px; border-radius: 6px; font-weight: 500; flex-shrink: 0; }
  .camp-delete-btn:hover { color: var(--red); background: var(--danger-bg); }

  /* Pipeline */
  .pipeline-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
  .pipeline-back { background: none; border: 1px solid var(--gray-300); border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; color: var(--gray-600); font-weight: 500; flex-shrink: 0; }
  .pipeline-back:hover { border-color: var(--purple); color: var(--purple); }
  .pipeline-title { font-size: 18px; font-weight: 700; flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
  /* C16 — campaign context bar pieces */
  .campctx-bread { font-size: 12.5px; font-weight: 500; color: var(--gray-500); display: inline-flex; align-items: center; gap: 6px; }
  .campctx-up { color: var(--purple); cursor: pointer; font-weight: 600; }
  .campctx-up:hover { text-decoration: underline; }
  .campctx-role { color: var(--gray-700); font-weight: 600; }
  .campctx-sep { color: var(--gray-300); }
  .campctx-name { font-size: 18px; font-weight: 800; color: var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .pipeline-stage-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
  .pipeline-stage-tab { padding: 5px 12px; border-radius: 20px; border: 1.5px solid var(--gray-200); background: none; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--gray-500); transition: all .15s; }
  .pipeline-stage-tab.active { border-color: var(--purple); background: var(--purple-light); color: var(--purple); }
  .pipeline-stage-tab:hover:not(.active) { border-color: var(--gray-400); color: var(--black); }
  /* C27 — Hot variant for Needs attention (when count > 0). Amber + always
     visible regardless of active state. Active overrides to purple. */
  .pipeline-stage-tab-hot:not(.active) { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); }

  /* Pipeline rows */
  .pipeline-row { background: var(--card); border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; transition: border-color .12s; }
  .pipeline-row:hover { border-color: var(--gray-300); }
  .pipeline-row-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pipeline-row-name { font-size: 14px; font-weight: 700; flex: 1; min-width: 80px; cursor: pointer; }
  .pipeline-row-name:hover { color: var(--purple); }
  .pipeline-source-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
  .pipeline-source-badge.screened    { background: var(--info-bg); color: var(--info); }
  .pipeline-source-badge.talent_pool { background: var(--success-bg); color: var(--success); }
  .pipeline-source-badge.external    { background: var(--purple-light); color: var(--purple); }
  .pipeline-source-badge.manual      { background: var(--warning-bg); color: var(--warning); }
  .pipeline-score { font-size: 12px; font-weight: 700; color: var(--gray-400); }
  .pipeline-stage-select { font-size: 12px; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 4px 8px; cursor: pointer; font-family: inherit; font-weight: 600; flex-shrink: 0; max-width: 150px; }
  .pipeline-stage-select.stage-to_contact    { color: var(--gray-500); }
  .pipeline-stage-select.stage-in_outreach   { border-color: #818cf8; color: var(--hr-purple-700); background: var(--hr-purple-100); }
  .pipeline-stage-select.stage-interested    { border-color: var(--success); color: var(--success); background: var(--success-bg); }
  .pipeline-stage-select.stage-not_for_role  { border-color: var(--orbit-orange); color: var(--warning); background: var(--warning-bg); }
  .pipeline-stage-select.stage-not_interested{ border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
  .pipeline-stage-select.stage-referred      { border-color: var(--orbit-blue); color: var(--success); background: var(--green-soft); }
  .pipeline-stage-select.stage-in_process    { border-color: #34d399; color: var(--success); background: var(--paper-100); }
  .pipeline-touches { font-size: 11px; color: var(--gray-400); white-space: nowrap; }
  .pipeline-assign { font-size: 12px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 4px 8px; cursor: pointer; font-family: inherit; color: var(--gray-600); max-width: 120px; }
  .pipeline-action-btn { background: none; border: 1.5px solid var(--gray-200); border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer; transition: all .15s; color: var(--gray-600); white-space: nowrap; }
  .pipeline-action-btn:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-light); }
  .pipeline-action-btn.email-btn:hover { border-color: var(--info); color: var(--info); background: var(--info-bg); }
  .pipeline-expand-btn { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--gray-400); padding: 2px 4px; }
  .pipeline-expand-btn:hover { color: var(--black); }
  /* "..." overflow menu for less-used pipeline row actions */
  .pipe-overflow-wrap { position: relative; display: flex; align-items: center; gap: 2px; }
  .pipe-overflow-btn { background: none; border: 1px solid var(--gray-200); border-radius: 6px; cursor: pointer; font-size: 16px; color: var(--gray-400); padding: 2px 8px; line-height: 1; letter-spacing: 1px; }
  .pipe-overflow-btn:hover { border-color: var(--purple); color: var(--purple); }
  .pipe-overflow-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 50; background: var(--card); border: 1px solid var(--gray-200); border-radius: 10px; padding: 6px; box-shadow: var(--shadow-md); min-width: 160px; }
  .pipe-overflow-menu.open { display: flex; flex-direction: column; gap: 4px; }
  .pipe-overflow-menu .pipeline-action-btn { width: 100%; text-align: left; }

  /* Row detail (expanded) */
  .pipeline-row-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-100); display: none; }
  .pipeline-row-detail.open { display: block; }
  .touch-log-title { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 6px; }
  .touch-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-700); padding: 4px 0; border-bottom: 1px solid var(--gray-100); }
  .touch-item:last-child { border-bottom: none; }
  .touch-channel { font-weight: 600; min-width: 70px; }
  .touch-who { color: var(--gray-500); }
  .touch-when { color: var(--gray-400); margin-left: auto; font-size: 11px; }
  .add-touch-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
  .touch-channel-sel { font-size: 12px; border: 1px solid var(--gray-200); border-radius: 7px; padding: 5px 8px; font-family: inherit; }
  .touch-log-btn { font-size: 12px; background: var(--purple); color: var(--white); border: none; border-radius: 7px; padding: 5px 12px; cursor: pointer; font-weight: 600; }
  .touch-log-btn:hover { background: var(--purple-dark); }
  .note-item { font-size: 12px; color: var(--gray-700); background: var(--gray-50); border-radius: 7px; padding: 8px 10px; margin-bottom: 6px; }
  .note-meta { font-size: 11px; color: var(--gray-400); margin-top: 3px; }
  .note-remind { font-size: 11px; color: var(--purple); font-weight: 600; margin-top: 2px; }
  .add-note-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
  .add-note-input { flex: 1; min-width: 160px; font-size: 12px; border: 1px solid var(--gray-200); border-radius: 7px; padding: 6px 10px; font-family: inherit; outline: none; }
  .add-note-input:focus { border-color: var(--purple); }
  .add-note-date { font-size: 12px; border: 1px solid var(--gray-200); border-radius: 7px; padding: 5px 8px; font-family: inherit; }
  .add-note-btn { font-size: 12px; background: none; border: 1px solid var(--gray-300); border-radius: 7px; padding: 5px 12px; cursor: pointer; font-weight: 600; white-space: nowrap; }
  .add-note-btn:hover { border-color: var(--purple); color: var(--purple); }

  /* Accountability */
  .accountability-panel { margin-top: 24px; border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; }
  .accountability-header { padding: 12px 16px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); font-size: 13px; font-weight: 700; color: var(--gray-700); }
  .accountability-table { width: 100%; border-collapse: collapse; font-size: 12px; overflow-x: auto; display: block; }
  .accountability-table th { padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 600; color: var(--gray-500); background: var(--gray-100); border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
  .accountability-table td { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); white-space: nowrap; }
  .accountability-table tr:last-child td { border-bottom: none; }
  .red-flag { color: var(--red); font-weight: 700; }

  /* New campaign form */
  .new-camp-form { background: var(--card); border: 1px solid var(--gray-200); border-radius: 16px; padding: 20px; margin-bottom: 16px; display: none; }
  .new-camp-form.open { display: block; }
  .new-camp-form-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
  .new-camp-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
  .new-camp-row input { flex: 1; min-width: 140px; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-family: inherit; outline: none; }
  .new-camp-row input:focus { border-color: var(--purple); }
  .new-camp-actions { display: flex; gap: 8px; margin-top: 4px; }

  /* Campaign insights */
  .insights-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 4px; }
  .insights-stat { background: var(--card); border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; text-align: center; }
  .insights-stat-num { font-size: 22px; font-weight: 800; color: var(--black); line-height: 1; }
  .insights-stat-label { font-size: 11px; color: var(--gray-500); margin-top: 3px; font-weight: 500; }
  .insights-stat.highlight { border-color: var(--purple); background: var(--purple-light); }
  .insights-stat.highlight .insights-stat-num { color: var(--purple); }
  .insights-section-title { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .14em; margin: 14px 0 8px; }
  .insights-funnel { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
  .funnel-step { display: flex; flex-direction: column; align-items: center; }
  .funnel-num { font-size: 18px; font-weight: 800; color: var(--black); }
  .funnel-label { font-size: 10px; color: var(--gray-500); white-space: nowrap; }
  .funnel-arrow { font-size: 14px; color: var(--gray-300); padding: 0 2px; margin-top: -8px; }
  .funnel-rate { font-size: 10px; color: var(--purple); font-weight: 700; }
  .insights-reasons { display: flex; flex-direction: column; gap: 5px; }
  .reason-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
  .reason-bar-track { flex: 1; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
  .reason-bar-fill { height: 100%; background: var(--purple); border-radius: 3px; opacity: .6; }
  .reason-label { color: var(--gray-700); min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reason-count { color: var(--gray-400); font-size: 11px; flex-shrink: 0; }

  /* Batch actions */
  .batch-toolbar { display: none; position: sticky; top: 0; z-index: 10; background: var(--purple); color: var(--white); border-radius: 10px; padding: 10px 16px; margin-bottom: 10px; align-items: center; gap: 12px; flex-wrap: wrap; }
  .batch-toolbar.visible { display: flex; }
  .batch-count { font-size: 13px; font-weight: 700; flex: 1; }
  .batch-btn { background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3); color: var(--white); border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
  .batch-btn:hover { background: rgba(255,255,255,.25); }
  .batch-select { background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3); color: var(--white); border-radius: 7px; padding: 5px 8px; font-size: 12px; font-family: inherit; }
  .batch-select option { color: var(--black); background: var(--white); }
  .pipeline-row-check { accent-color: var(--purple); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }

  /* ── Pipeline redesign: sequence stepper, grid rows, status pills ── */
  .seq-stepper { background: var(--card); border: 1px solid var(--gray-200); border-radius: 16px; padding: 14px 18px; margin-bottom: 14px; }
  .seq-stepper-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .seq-stepper-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-400); }
  .seq-stepper-steps { display: flex; align-items: center; overflow-x: auto; padding-bottom: 2px; }
  .seq-step-item { display: flex; align-items: center; flex-shrink: 0; }
  .seq-step-content { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; min-width: 110px; }
  .seq-step-row { display: flex; align-items: center; gap: 6px; }
  .seq-step-icon { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .seq-step-icon.ch-email { background: var(--info-bg); color: var(--info); }
  .seq-step-icon.ch-linkedin, .seq-step-icon.ch-linkedin_request, .seq-step-icon.ch-inmail { background: var(--hr-purple-100); color: var(--hr-purple-700); }
  .seq-step-icon.ch-other { background: var(--gray-100); color: var(--gray-500); }
  .seq-step-name { font-size: 12px; font-weight: 700; color: var(--black); }
  .seq-step-day { font-size: 11px; color: var(--gray-400); padding-left: 26px; }
  .seq-step-arrow { color: var(--gray-300); font-size: 13px; padding: 0 6px; flex-shrink: 0; }

  /* Pipeline grid column header */
  .pr-col-hdr { display: grid; grid-template-columns: 28px 2fr 0.75fr 44px 2fr 1.1fr 1fr 120px 28px; gap: 12px; align-items: center; padding: 2px 14px 8px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-400); }
  /* Grid for candidate rows */
  .pr-grid { display: grid; grid-template-columns: 28px 2fr 0.75fr 44px 2fr 1.1fr 1fr 120px 28px; gap: 12px; align-items: center; }
  .pipeline-row.warm { background: var(--paper-50); }
  .pipeline-row.warm:hover { border-color: var(--energy-yellow-100) !important; }

  /* Progress dots */
  .pr-dots { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .pr-dots-row { display: flex; align-items: center; gap: 3px; }
  .pr-dot { height: 5px; border-radius: 3px; flex: 1; min-width: 14px; max-width: 22px; }
  .pr-dots-text { font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Status pill — clickable, opens stage picker */
  .pr-status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; cursor: pointer; user-select: none; transition: filter .1s; }
  .pr-status-pill:hover { filter: brightness(.95); }
  .pr-stage-wrap { position: relative; }
  .pr-stage-menu { display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 60; background: var(--card); border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: 0 8px 28px -8px rgba(43,15,56,.24); padding: 6px; min-width: 176px; flex-direction: column; gap: 2px; }
  .pr-stage-menu.open { display: flex; }
  .pr-stage-menu button { background: none; border: none; text-align: left; font-size: 12.5px; font-weight: 500; color: var(--gray-700); padding: 7px 10px; border-radius: 7px; cursor: pointer; font-family: inherit; width: 100%; }
  .pr-stage-menu button:hover { background: var(--gray-50); color: var(--purple); }

  /* Owner chip — clickable, opens assign popover */
  .pr-owner-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer; border-radius: 8px; padding: 2px 4px; transition: background .1s; position: relative; }
  .pr-owner-chip:hover { background: var(--gray-100); }
  .pr-owner-avatar { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; color: var(--white); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
  .pr-owner-name { font-size: 12px; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pr-owner-pop { display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 60; background: var(--card); border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: 0 8px 28px -8px rgba(43,15,56,.24); padding: 6px; min-width: 190px; flex-direction: column; gap: 2px; }
  .pr-owner-pop.open { display: flex; }
  .pr-owner-pop button { background: none; border: none; text-align: left; font-size: 12.5px; color: var(--gray-700); padding: 7px 10px; border-radius: 7px; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 8px; width: 100%; }
  .pr-owner-pop button:hover { background: var(--gray-50); }
  /* Fit score */
  .pr-fit { font-size: 13px; font-weight: 700; }

  /* Quick stats cards (replaces inline insights) */
  .pr-stats-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 18px; }
  @media (max-width: 800px) { .pr-stats-grid { grid-template-columns: repeat(3,1fr); } }
  .pr-stat-card { background: var(--card); border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; }
  .pr-stat-num { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
  .pr-stat-lbl { font-size: 11px; color: var(--gray-400); font-weight: 600; margin-top: 2px; }

  /* Decline modal */
  .decline-modal-inner { background: var(--card); border-radius: 14px; padding: 24px; width: 420px; max-width: 94vw; }
  .decline-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
  .decline-sub { font-size: 13px; color: var(--gray-500); margin-bottom: 16px; }
  .decline-reasons { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
  .decline-reason-btn { background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; text-align: left; font-family: inherit; transition: all .15s; }
  .decline-reason-btn:hover { border-color: var(--purple); background: var(--purple-light); }
  .decline-reason-btn.selected { border-color: var(--purple); background: var(--purple-light); color: var(--purple); font-weight: 600; }
  .soft-no-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-700); margin-bottom: 12px; cursor: pointer; }
  .soft-no-toggle input { accent-color: var(--purple); }

  /* ── Templates (Track B.1) ── */
  .tpl-card { background: var(--card); border: 1px solid var(--gray-200); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; cursor: pointer; transition: all .15s; }
  .tpl-card:hover { border-color: var(--purple); box-shadow: 0 2px 10px var(--shadow-md); }
  .tpl-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .tpl-card-name { font-size: 15px; font-weight: 650; color: var(--gray-900); }
  .tpl-fav { cursor: pointer; font-size: 16px; color: var(--gray-300); line-height: 1; user-select: none; }
  .tpl-fav:hover { color: var(--orbit-orange); }
  .tpl-fav.on { color: var(--orbit-orange); }
  .tpl-chan-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--purple-light); color: var(--purple); text-transform: capitalize; }
  .tpl-card-snippet { font-size: 13px; color: var(--gray-500); line-height: 1.45; white-space: pre-wrap; max-height: 3.2em; overflow: hidden; }
  .tpl-tag-badge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); text-transform: lowercase; }
  .tpl-tag-badge.data-driven { background: var(--amber-soft); color: var(--warning); }
  .tpl-tag-badge.playbook { background: var(--purple-light); color: var(--purple-dark); }
  .tpl-tag-badge.cold { background: var(--info-bg); color: var(--info); }
  .tpl-tag-badge.warm { background: var(--hr-purple-100); color: var(--danger); }
  .tpl-tag-badge.follow-up { background: var(--green-soft); color: var(--success); }
  .tpl-tag-badge.connect { background: var(--purple-light); color: var(--purple-dark); }
  .tpl-tag-badge.snippet { background: var(--paper-100); color: var(--ink-500); }
  .tpl-tag-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .tpl-tag-chip { font-size: 12px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--gray-200); background: white; cursor: pointer; color: var(--gray-600); transition: all .15s; }
  .tpl-tag-chip:hover { border-color: var(--gray-400); }
  .tpl-tag-chip.active { background: var(--primary); color: white; border-color: var(--primary); }
  .tpl-example-box { background: var(--gray-50); border: 1px dashed var(--gray-200); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--gray-500); line-height: 1.5; white-space: pre-wrap; max-height: 200px; overflow-y: auto; margin-top: 4px; }
  .tpl-card-meta { font-size: 11px; color: var(--gray-400); margin-top: 8px; }
  /* C33 — quick actions on each template card; only show on hover so the card
     stays uncluttered. */
  .tpl-card-actions { display: flex; gap: 8px; margin-top: 10px; opacity: 0; transition: opacity .15s; }
  .tpl-card:hover .tpl-card-actions, .tpl-card:focus-within .tpl-card-actions { opacity: 1; }
  .tpl-card-actions .btn-action { font-size: 11.5px; padding: 4px 10px; }
  .tpl-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
  @media (max-width: 860px) { .tpl-editor-grid { grid-template-columns: 1fr; } }
  .tpl-editor-col input[type=text], .tpl-editor-col select, .tpl-editor-col textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-family: inherit; margin-bottom: 4px; }
  .tpl-editor-col textarea { resize: vertical; line-height: 1.5; }
  .tpl-label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-600); margin: 12px 0 4px; }
  .tpl-token-palette { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
  .tpl-token-chip { font-size: 11px; font-family: ui-monospace, Menlo, monospace; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 6px; padding: 3px 8px; cursor: pointer; color: var(--gray-700); }
  .tpl-token-chip:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-light); }
  .tpl-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .tpl-delete-btn { margin-left: auto; color: var(--danger); border-color: var(--energy-yellow-100); }
  .tpl-status { font-size: 13px; margin-top: 10px; min-height: 18px; }
  .tpl-status.ok { color: var(--success); }
  .tpl-status.err { color: var(--danger); }
  .tpl-side-card { background: var(--card); border: 1px solid var(--gray-200); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
  .tpl-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 650; color: var(--gray-700); margin-bottom: 10px; }
  .tpl-preview-select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--gray-200); border-radius: 7px; max-width: 55%; }
  .tpl-preview-note { font-size: 11px; color: var(--gray-400); margin-bottom: 8px; }
  .tpl-preview-subject { font-size: 14px; font-weight: 650; color: var(--gray-900); margin-bottom: 6px; white-space: pre-wrap; }
  .tpl-preview-body { font-size: 13.5px; color: var(--gray-700); line-height: 1.55; white-space: pre-wrap; }
  .tpl-muted { color: var(--gray-400); font-size: 12.5px; }
  .tpl-lint-score { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
  .tpl-lint-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
  .tpl-lint-pill.ok { background: var(--green-soft); color: var(--success); }
  .tpl-lint-pill.warn { background: var(--amber-soft); color: var(--warning); }
  .tpl-lint-pill.high { background: var(--danger-bg); color: var(--danger); }
  .tpl-lint-issue { font-size: 12.5px; line-height: 1.45; padding: 5px 0; border-top: 1px solid var(--gray-100); display: flex; gap: 7px; }
  .tpl-lint-issue .dot { flex-shrink: 0; }
  .tpl-ai-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; background: var(--paper-100); border: 1px solid var(--gray-300); border-radius: 10px; }
  .tpl-ai-label { font-size: 12.5px; font-weight: 650; color: var(--purple); }
  .tpl-ai-row select { font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--gray-200); border-radius: 7px; background: var(--white); margin: 0; width: auto; }
  .tpl-gen-btn { margin-left: auto; }
  .tpl-gen-btn:disabled { opacity: .55; cursor: default; }
  .tpl-ai-note { font-size: 11px; color: var(--gray-400); margin: 6px 2px 0; }
  .tpl-variant { border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; margin-top: 10px; background: var(--gray-50); }
  .tpl-variant-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 650; color: var(--gray-700); margin-bottom: 6px; }
  .tpl-variant-subj { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
  .tpl-variant-body { font-size: 12.5px; color: var(--gray-600); white-space: pre-wrap; line-height: 1.5; }
  .tpl-variant-use { font-size: 11px; padding: 3px 10px; border: 1px solid var(--purple); color: var(--purple); background: var(--white); border-radius: 7px; cursor: pointer; }

  /* ── Sequence builder (Track B.4) ── */
  .seq-modal { max-width: 760px; width: 94vw; }
  .seq-scope-note { font-size: 12px; color: var(--orbit-green); background: var(--paper-100); border: 1px solid var(--line-300); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; line-height: 1.45; }
  .seq-step { border: 1px solid var(--gray-200); border-radius: 16px; padding: 14px; margin-bottom: 12px; background: var(--gray-50); }
  .seq-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .seq-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--purple); color: var(--white); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .seq-step-title { font-weight: 650; font-size: 13.5px; color: var(--gray-800); }
  .seq-reach { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
  .seq-reach.ok { background: var(--success-bg); color: var(--success); }
  .seq-reach.mid { background: var(--amber-soft); color: var(--warning); }
  .seq-reach.low { background: var(--danger-bg); color: var(--danger); }
  .seq-li-hint { display: block; font-size: 11px; margin-top: 4px; line-height: 1.4; }
  .seq-li-hint.ok { color: var(--success); }
  .seq-li-hint.manual { color: var(--warning); }
  .seq-window-summary { font-size: 12px; color: var(--gray-600); background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; line-height: 1.5; }
  /* mockup parity: day chip, per-step tags, fallback row */
  .seq-step-head .sc-day { font-size: 10.5px; font-weight: 700; color: var(--gray-600); background: var(--white); border: 1px solid var(--gray-200); border-radius: 20px; padding: 2px 9px; flex: none; }
  .sc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--gray-200); }
  .sc-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
  .sc-tag.play { background: var(--purple-light); color: var(--purple-dark); }
  .sc-tag.auto { background: var(--success-bg); color: var(--success); }
  .sc-tag.manual { background: var(--amber-soft); color: var(--warning); }
  .sc-tag.ab { background: var(--paper-100); color: #4f46e5; }
  .sc-tag.fb { background: var(--amber-soft); color: #a86a00; }
  .seq-fb { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--gray-200); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-700); flex-wrap: wrap; }
  .seq-fb .ch-glyph { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: var(--gray-100); color: var(--gray-700); font-size: 11px; font-weight: 800; }
  .seq-fb b { color: var(--ink); font-weight: 700; }
  .seq-fb-sel { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--gray-200); background: var(--white); }
  .seq-fb-sel:focus { outline: none; border-color: var(--purple); }
  .seq-fb .fb-pct { margin-left: auto; font-size: 11px; color: var(--gray-500); font-weight: 700; }
  /* Sequence start node + connectors (mockup parity) */
  .seq-start { background: var(--ink); color: var(--white); padding: 9px 16px; border-radius: 20px; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 0; }
  .seq-start b { background: rgba(255,255,255,.18); border-radius: 20px; padding: 1px 9px; font-variant-numeric: tabular-nums; }
  .seq-start-tri { font-size: 11px; }
  .seq-start-sub { font-size: 11px; font-weight: 500; opacity: .8; }
  #seqSteps { display: flex; flex-direction: column; align-items: stretch; }
  #seqSteps > .seq-start { align-self: center; }
  #seqSteps > .seq-step { width: 100%; }
  .seq-conn { align-self: center; width: 2px; height: 16px; background: var(--gray-300); }
  .sc-tag.stat { background: var(--gray-100); color: var(--gray-700); }
  .sc-tag.stat b { font-variant-numeric: tabular-nums; }
  /* Performance view (mockup v-perf) */
  .perfgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .perf-panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
  .perf-panel.wide { grid-column: 1 / -1; }
  .perf-panel h3 { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .2px; color: var(--gray-700); }
  /* C35 — multichannel lift card */
  .lift-row { display: grid; grid-template-columns: 1.6fr 80px 1.4fr; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--gray-100); }
  .lift-row:last-child { border-bottom: none; }
  .lift-row.is-me { background: var(--purple-light); border-radius: 8px; padding-left: 10px; padding-right: 10px; border-bottom: 1px dashed transparent; }
  .lift-rowname { font-size: 12.5px; font-weight: 600; color: var(--gray-700); }
  .lift-self { font-size: 10px; font-weight: 700; background: var(--purple); color: var(--white); padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
  .lift-rate { font-size: 16px; font-weight: 800; color: var(--black); text-align: right; font-variant-numeric: tabular-nums; }
  .lift-sub { font-size: 11px; color: var(--gray-500); }
  .perf-panel h3 .muted { font-size: 11px; font-weight: 500; color: var(--gray-500); margin-left: 6px; }
  /* big funnel */
  .funnelbig { display: flex; align-items: flex-end; gap: 14px; height: 180px; padding-top: 16px; }
  .funnelbig .fbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; }
  .funnelbig .bv { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gray-700); }
  .funnelbig .bar { width: 100%; background: var(--gray-200); border-radius: 8px 8px 0 0; min-height: 6px; transition: height .2s ease-out; }
  .funnelbig .fbar.hl .bar { background: var(--purple); }
  .funnelbig .bl { font-size: 10.5px; font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: .3px; }
  .funnelbig .bp { font-size: 11px; font-weight: 800; color: var(--gray-500); font-variant-numeric: tabular-nums; }
  /* channel performance */
  .cpr { display: grid; grid-template-columns: 36px 1fr 80px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
  .cpr:first-child { border-top: none; }
  .cpr-glyph { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
  .cpr-glyph.small { width: 20px; height: 20px; font-size: 10px; vertical-align: middle; }
  .cpr-glyph.cpr-em { background: var(--purple-light); color: var(--purple-dark); }
  .cpr-glyph.cpr-li { background: var(--info-bg); color: var(--info); }
  .cpr-glyph.cpr-sms { background: var(--success-bg); color: var(--success); }
  .cpr-glyph.cpr-gray { background: var(--gray-100); color: var(--gray-600); }
  .cpr-name { font-weight: 700; font-size: 13px; }
  .cpr-sub { font-size: 11px; color: var(--gray-500); margin-bottom: 4px; }
  .cpr-bar { height: 5px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
  .cpr-bar i { display: block; height: 100%; background: var(--purple); }
  .cpr-em .cpr-bar i { background: var(--purple); }
  .cpr-li .cpr-bar i { background: var(--info); }
  .cpr-sms .cpr-bar i { background: var(--success); }
  .cpr-val { text-align: right; }
  .cpr-val b { font-size: 16px; font-variant-numeric: tabular-nums; }
  .cpr-x { font-size: 10.5px; color: var(--gray-500); font-weight: 600; }
  /* step performance table */
  .steptab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .steptab th { text-align: left; font-size: 10.5px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
  .steptab th.tc, .steptab td.tc { text-align: center; }
  .steptab td { padding: 9px 8px; border-bottom: 1px solid var(--gray-100); }
  .steptab tr:last-child td { border-bottom: none; }
  .steptab .sname { font-weight: 600; }
  /* plays */
  .wkrow { display: grid; grid-template-columns: 1fr 80px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
  .wkrow:first-child { border-top: none; }
  .wkmain { min-width: 0; }
  .wk-n { font-weight: 700; font-size: 13px; }
  .wk-meta { font-size: 11px; color: var(--gray-500); margin: 1px 0 4px; }
  .wk-badge { font-size: 9.5px; font-weight: 800; background: var(--purple); color: var(--white); padding: 1px 7px; border-radius: 20px; vertical-align: middle; margin-left: 4px; }
  .wk-bar { height: 5px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
  .wk-bar i { display: block; height: 100%; background: var(--purple); }
  .wk-val { text-align: right; }
  .wk-val b { font-size: 16px; font-variant-numeric: tabular-nums; }
  .wk-x { font-size: 10.5px; color: var(--gray-500); font-weight: 600; }
  @media (max-width: 1100px) { .perfgrid { grid-template-columns: 1fr; } .perf-panel.wide { grid-column: auto; } }
  /* C15 — Global Accounts & sending view */
  .acct-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
  .acct-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
  .acct-kpi-lbl { font-size: 10.5px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
  .acct-kpi-val { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--black); }
  .acct-kpi-sub { font-size: 11.5px; color: var(--gray-600); margin-top: 4px; }
  .acct-panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
  .acct-panel h3 { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .2px; color: var(--gray-700); }
  .acct-mb { padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
  .acct-mb:last-child { border-bottom: none; }
  .acct-mb-head { display: grid; grid-template-columns: 1.6fr auto auto; gap: 10px; align-items: center; margin-bottom: 6px; }
  .acct-mb-addr { font-size: 13.5px; font-weight: 700; color: var(--black); }
  .acct-mb-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
  .acct-mb-pill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
  .acct-mb-cap { font-size: 12px; color: var(--gray-700); font-variant-numeric: tabular-nums; text-align: right; }
  .acct-mb-cap b { color: var(--black); font-weight: 800; }
  .acct-mb-bar { display: flex; height: 12px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
  .acct-mb-bar.warn { box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .4); }
  .acct-mb-bar.full { box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .5); }
  .acct-seg { display: block; height: 100%; }
  .acct-mb-legend { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--gray-600); }
  .acct-mb-leg { display: inline-flex; align-items: center; gap: 5px; }
  .acct-mb-leg-dot { width: 10px; height: 10px; border-radius: 999px; }
  .acct-mb-leg b { color: var(--black); font-weight: 800; }
  .acct-cont { width: 100%; border-collapse: collapse; font-size: 13px; }
  .acct-cont thead th { font-size: 10.5px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--gray-200); }
  .acct-cont thead th.tc { text-align: right; }
  .acct-cont td { padding: 9px 8px; border-bottom: 1px solid var(--gray-100); }
  .acct-cont td.tc { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
  .acct-cont td.tc.queued { color: var(--danger); }
  .acct-cont-row { cursor: pointer; transition: background .14s; }
  .acct-cont-row:hover { background: var(--gray-50, var(--gray-100)); }
  .acct-pri { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--gray-100); color: var(--gray-700); }
  .acct-pri.high { background: var(--danger-bg); color: var(--danger); }
  .acct-pri.low { background: var(--paper-100); color: var(--gray-700); }
  .acct-policy { font-size: 11.5px; color: var(--gray-500); padding: 10px 14px; background: var(--card); border-radius: 10px; border: 1px dashed var(--gray-200); }
  .acct-policy code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--gray-100); padding: 1px 5px; border-radius: 4px; }
  @media (max-width: 1100px) { .acct-kpis { grid-template-columns: repeat(2, 1fr); } }
  /* Senders view (mockup v-senders) */
  .senders-banner { padding: 11px 14px; border-radius: 10px; font-size: 12.5px; margin-bottom: 14px; }
  .senders-banner.sender-all { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); }
  .senders-banner.sender-assigned { background: var(--purple-light); color: var(--purple-dark); border: 1px solid color-mix(in srgb, var(--purple) 22%, var(--white)); }
  /* C28 — sticky-binding + shared-pool surfacing */
  .sender-bindpill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--hr-purple-100); color: var(--purple-dark); margin-left: 6px; vertical-align: middle; }
  .sender-sharedpill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--info-bg); color: var(--info); margin-left: 4px; vertical-align: middle; }
  .sender-herepill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--success-bg); color: var(--success); margin-left: 4px; vertical-align: middle; }
  .senders-list { display: flex; flex-direction: column; gap: 10px; }
  .sender-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
  .sender-card.assigned { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple-soft); }
  .sender-row { display: grid; grid-template-columns: auto 1fr 160px auto; gap: 14px; align-items: center; }
  .sender-dot { width: 10px; height: 10px; border-radius: 50%; }
  .sender-dot.dot-connected { background: var(--green); }
  .sender-dot.dot-disconnected, .sender-dot.dot-error { background: var(--gray-300); }
  .sender-dot.dot-throttled, .sender-dot.dot-warmup { background: var(--amber); }
  .sender-addr { font-weight: 700; font-size: 13px; }
  .sender-sub { font-size: 11px; color: var(--gray-500); margin-top: 1px; }
  .sender-caps { font-size: 11.5px; color: var(--gray-600); }
  .sender-cap-val { text-align: right; font-variant-numeric: tabular-nums; }
  .sender-cap-val b { font-weight: 800; font-size: 13px; color: var(--gray-700); }
  .sender-cap-x { color: var(--gray-400); }
  .sender-cap-bar { margin-top: 4px; height: 5px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
  .sender-cap-bar i { display: block; height: 100%; background: var(--purple); }
  .sender-cap-bar.warn i { background: var(--amber); }
  .sender-cap-bar.full i { background: var(--red); }
  .sender-actions .btn-action { font-size: 11.5px; padding: 6px 11px; }
  /* Tasks view (mockup v-tasks) */
  .task-group { background: var(--card); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 14px; overflow: hidden; }
  .task-group-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: var(--gray-100); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13px; color: var(--gray-700); }
  .task-group-n { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--gray-500); background: var(--white); border-radius: 20px; padding: 1px 9px; }
  .task-card { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); }
  .task-card:last-child { border-bottom: none; }
  .task-card:hover { background: var(--purple-light); }
  .task-head { display: flex; align-items: center; gap: 12px; }
  .task-ch { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none; }
  .task-ch-em { background: var(--purple-light); color: var(--purple-dark); }
  .task-ch-li { background: var(--info-bg); color: var(--info); }
  .task-ch-sms { background: var(--success-bg); color: var(--success); }
  .task-ch-gray { background: var(--gray-100); color: var(--gray-600); }
  .task-body-main { flex: 1; min-width: 0; }
  .task-name { font-weight: 650; font-size: 13.5px; }
  .task-title { font-weight: 500; color: var(--gray-500); }
  .task-sub { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
  .task-actions { display: flex; gap: 6px; align-items: center; }
  .task-actions .btn-action { font-size: 11.5px; padding: 6px 11px; }
  .task-status-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: var(--gray-100); color: var(--gray-500); text-transform: capitalize; }
  .task-msgbody { font-size: 12.5px; color: var(--gray-700); white-space: pre-wrap; max-height: 140px; overflow: auto; background: var(--gray-100); border-radius: 8px; padding: 9px 11px; margin-top: 8px; line-height: 1.45; }
  .seq-step-tools { margin-left: auto; display: flex; gap: 4px; }
  .seq-step-tools button { font-size: 12px; border: 1px solid var(--gray-200); background: var(--white); border-radius: 6px; padding: 2px 8px; cursor: pointer; color: var(--gray-600); }
  .seq-step-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 10px; }
  .seq-field label { display: block; font-size: 11px; font-weight: 600; color: var(--gray-500); margin-bottom: 3px; }
  .seq-field select, .seq-field input { width: 100%; box-sizing: border-box; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--gray-200); border-radius: 7px; background: var(--white); }
  .seq-delay-row { display: flex; gap: 6px; }
  .seq-builder-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
  .seq-subhead { font-size: 13px; font-weight: 700; color: var(--gray-700); margin-bottom: 8px; }
  .seq-sim-event { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-left: 3px solid var(--purple); background: var(--gray-50); border-radius: 0 8px 8px 0; margin-bottom: 6px; font-size: 13px; }
  .seq-sim-event.branch { border-left-color: var(--energy-yellow-600); color: #8a6010; background: var(--paper-50); font-style: italic; }
  .seq-sim-when { font-weight: 700; color: var(--purple); min-width: 78px; }
  .seq-sim-event.branch .seq-sim-when { color: var(--warning); }
  .seq-err-box { background: var(--danger-bg); border: 1px solid var(--energy-yellow-100); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
  .seq-err-box li { font-size: 12.5px; color: var(--danger); margin-left: 14px; }
  .seq-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
  .seq-row .nm { font-weight: 600; flex: 1; }
  .seq-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
  .seq-badge.active { background: var(--info-bg); color: #2563c0; }
  .seq-badge.done { background: var(--gray-200); color: var(--ink-500); }
  .seq-badge.stopped_replied { background: var(--green-soft); color: var(--success); }
  .seq-badge.paused { background: var(--amber-soft); color: var(--warning); }
  /* §3.2 ladder + #105 — surface the new sequence states. */
  .seq-badge.enrichment_queued { background: var(--warning-bg); color: var(--warning); }
  .seq-badge.unreachable { background: var(--warning); color: #7c2d12; }
  .seq-badge.stopped { background: var(--paper-100); color: var(--gray-700); }
  /* C31 — Tasks type filter + per-type cards */
  /* Trello-style — global Tasks board */
  .tasks-viewtoggle { display: inline-flex; border: 1px solid var(--gray-300); border-radius: 8px; overflow: hidden; }
  .tasks-viewtoggle button { background: var(--white); border: 0; color: var(--gray-600); font: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer; }
  .tasks-viewtoggle button:not(:last-child) { border-right: 1px solid var(--gray-200); }
  .tasks-viewtoggle button.active { background: var(--purple); color: var(--white); }
  .tasks-viewtoggle button:hover:not(.active) { background: var(--gray-100); }
  .task-board { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 14px; padding: 0 24px 24px; align-items: start; }
  .task-board-col { background: var(--gray-50, var(--paper-100)); border-radius: 16px; padding: 10px; min-height: 200px; }
  .task-board-colhead { display: flex; align-items: center; gap: 8px; padding: 4px 8px 10px; }
  .task-board-coldot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
  .task-board-colname { font-size: 12px; font-weight: 700; color: var(--gray-700); text-transform: uppercase; letter-spacing: .3px; flex: 1; }
  .task-board-coln { font-size: 11px; font-weight: 800; color: var(--gray-500); background: var(--white); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
  .task-board-collist { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 280px); overflow-y: auto; padding: 2px; }
  .task-board-empty { font-size: 12px; color: var(--gray-400); padding: 16px 8px; text-align: center; font-style: italic; }
  /* drag & drop — drag a card onto a column to perform that action */
  .task-board-card[draggable="true"] { cursor: grab; }
  .task-board-card.dragging { opacity: .4; cursor: grabbing; }
  .task-board-col.drop-over { outline: 2px dashed var(--purple); outline-offset: -3px; background: color-mix(in srgb, var(--purple) 8%, var(--gray-50, var(--paper-100))); }
  .task-board-col.drop-over .task-board-collist { pointer-events: none; }
  .task-board-card { background: var(--white); border-radius: 8px; padding: 10px 12px; box-shadow: 0 1px 0 rgba(0,0,0,.06); border-left: 3px solid var(--gray-300); transition: box-shadow .14s, transform .14s; cursor: default; }
  .task-board-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
  .task-board-card.task-type-handoff { border-left-color: var(--success); }
  .task-board-card.task-type-unreachable_triage, .task-board-card.task-type-send_failed, .task-board-card.task-type-missing_tokens { border-left-color: var(--warning); }
  .task-board-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
  .task-board-card-ch { font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--gray-100); color: var(--gray-700); }
  .task-board-card-name { font-size: 13px; font-weight: 700; color: var(--black); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .task-board-card-title { font-size: 12px; color: var(--gray-700); margin: 3px 0; line-height: 1.3; }
  .task-board-card-meta { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
  .task-board-card-actions { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
  .task-board-card-actions .btn-action { font-size: 11px; padding: 3px 8px; }
  @media (max-width: 1280px) { .task-board { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 700px)  { .task-board { grid-template-columns: 1fr; } }
  .tasks-typebar { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 24px 10px; }
  .tasks-typepill { background: var(--gray-100); border: 1px solid transparent; color: var(--gray-700); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .14s, color .14s; }
  .tasks-typepill:hover { background: var(--gray-200); }
  .tasks-typepill.on { background: var(--purple); color: var(--white); }
  .tasks-typepill .cnt { font-size: 11px; font-weight: 700; background: rgba(0,0,0,.08); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
  .tasks-typepill.on .cnt { background: rgba(255,255,255,.22); }
  .task-typepill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
  .task-snoozed { font-size: 11px; color: var(--gray-500); margin-left: 6px; }
  .task-card.task-type-unreachable_triage, .task-card.task-type-send_failed, .task-card.task-type-missing_tokens {
    border-left: 3px solid var(--warning);
  }
  /* C38 — handoff is a HOT signal (someone replied positive). Green to distinguish
     from the amber dead-end pile. */
  .task-card.task-type-handoff { border-left: 3px solid var(--success); }
  .seq-row button { font-size: 11.5px; border: 1px solid var(--gray-300); background: var(--white); border-radius: 7px; padding: 4px 10px; cursor: pointer; }
  .seq-q { border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
  .seq-q-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
  .seq-q-subj { font-weight: 650; font-size: 13px; margin: 6px 0 3px; }
  .seq-q-body { font-size: 12px; color: var(--gray-600); white-space: pre-wrap; max-height: 5em; overflow: auto; line-height: 1.45; }
  .ab-card { border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
  .ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
  .ab-variant { border: 1px solid var(--gray-200); border-radius: 8px; padding: 10px; }
  .ab-variant.win { border-color: var(--success); background: var(--paper-100); }
  .ab-rate { font-size: 22px; font-weight: 800; color: var(--purple); }
  .ab-sub { font-size: 11.5px; color: var(--gray-500); }
  .seq-supp-add { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
  .seq-supp-add input { flex: 1; min-width: 180px; padding: 7px 10px; border: 1px solid var(--gray-200); border-radius: 7px; font-size: 13px; }
  .seq-supp-add select { padding: 7px 8px; border: 1px solid var(--gray-200); border-radius: 7px; font-size: 13px; }
  /* C34 — Per-campaign Overview tab */
  .ov-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
  .ov-meta-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--gray-100); color: var(--gray-700); }
  .ov-meta-chip.ov-good { background: var(--success-bg); color: var(--success); }
  .ov-meta-chip.ov-muted { background: transparent; color: var(--gray-400); border: 1px dashed var(--gray-300); }
  .ov-funnel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; padding: 16px 20px; margin-bottom: 14px; }
  .ov-fstep { background: var(--gray-100); border-radius: 10px; padding: 12px 18px; text-align: center; min-width: 100px; flex: 1; }
  .ov-fstep.hl { background: var(--purple-light); }
  .ov-fv { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: var(--black); }
  .ov-fstep.hl .ov-fv { color: var(--purple-dark); }
  .ov-fl { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; margin-top: 4px; }
  .ov-frate { font-size: 11px; font-weight: 700; color: var(--green); margin-top: 4px; }
  .ov-farrow { color: var(--gray-300); font-size: 18px; }
  .ov-empty { background: var(--white); border: 1px dashed var(--gray-300); border-radius: 16px; padding: 24px; text-align: center; color: var(--gray-500); margin-bottom: 14px; }
  .ov-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
  .ov-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px; padding: 14px 16px; }
  .ov-card-title { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 12px; }
  .ov-bignum { font-size: 30px; font-weight: 800; line-height: 1; color: var(--black); font-variant-numeric: tabular-nums; }
  .ov-bigunit { font-size: 16px; font-weight: 600; color: var(--gray-400); margin-left: 6px; }
  .ov-cap-bar { height: 6px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
  .ov-cap-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
  .ov-reach-row { display: grid; grid-template-columns: 80px 1fr 120px; gap: 8px; align-items: center; margin-bottom: 8px; }
  .ov-reach-row:last-child { margin-bottom: 0; }
  .ov-reach-lbl { font-size: 12px; font-weight: 600; color: var(--gray-700); }
  .ov-reach-bar { height: 6px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
  .ov-reach-fill { height: 100%; background: var(--purple); border-radius: 999px; }
  .ov-reach-val { font-size: 11px; font-weight: 600; color: var(--gray-600); text-align: right; font-variant-numeric: tabular-nums; }
  .ov-ss-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--gray-100); }
  .ov-ss-row:last-child { border-bottom: none; }
  .ov-ss-n { font-size: 13px; font-weight: 700; color: var(--black); font-variant-numeric: tabular-nums; }
  .ov-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .camp-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--gray-200); margin: 4px 0 16px; }
  .camp-subtab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--gray-500); cursor: pointer; font-family: inherit; margin-bottom: -1px; }
  .camp-subtab:hover { color: var(--gray-800); }
  .camp-subtab.active { color: var(--purple); border-bottom-color: var(--purple); }
  .seq-builder-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
  .seq-role-ctx { font-size: 12.5px; border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.5; }
  .seq-role-ctx.ok { background: var(--purple-light); border: 1px solid var(--gray-300); color: var(--gray-700); }
  .seq-role-ctx.warn { background: var(--amber-soft); border: 1px solid var(--energy-yellow-100); color: #8a5a0a; }
  .seq-role-ctx b { color: var(--gray-900); }
  .seq-pattern-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--gray-200); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
  .seq-pattern-label { font-size: 11px; font-weight: 700; color: var(--gray-500); white-space: nowrap; }
  .seq-pattern-bar select { font-family: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700); max-width: 420px; cursor: pointer; }
  .seq-pattern-hint { font-size: 11.5px; color: var(--gray-500); }
  .seq-role-ctx a { color: var(--purple); cursor: pointer; font-weight: 600; }
  .seq-msg { margin: 8px 0; }
  .seq-msg-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
  .seq-msg-tools select, .seq-msg-tools button { font-size: 12px; padding: 4px 8px; border: 1px solid var(--gray-200); border-radius: 7px; background: var(--white); cursor: pointer; }
  .seq-ab-toggle { font-size: 12px; color: var(--gray-600); display: flex; align-items: center; gap: 5px; cursor: pointer; margin-left: auto; }
  .seq-ab-toggle input { accent-color: var(--purple); }
  .seq-msg-subj { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1.5px solid var(--gray-200); border-radius: 8px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
  .seq-msg-body { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1.5px solid var(--gray-200); border-radius: 8px; font-size: 13px; font-family: inherit; line-height: 1.5; resize: vertical; }
  .seq-msg-body:focus, .seq-msg-subj:focus { outline: none; border-color: var(--purple); }
  .seq-lint { font-size: 12px; color: var(--gray-600); margin-top: 5px; line-height: 1.4; }
  .seq-char-count { font-size: 11px; color: var(--gray-500); text-align: right; margin-top: 3px; }
  .seq-char-count.over { color: var(--red, var(--danger)); font-weight: 600; }
  .seq-ab-b { margin-top: 8px; padding: 10px; border: 1px dashed var(--hr-purple-300); border-radius: 8px; background: var(--paper-50); }
  .seq-ab-b-head { font-size: 12px; font-weight: 650; color: var(--purple); margin-bottom: 6px; }
  .seq-ab-b input[type=number] { border: 1px solid var(--gray-200); border-radius: 6px; padding: 2px 6px; font-size: 12px; }

  /* ── Campaign form (create + edit, unified) ── */
  .cf-modal { width: 560px; max-width: 94vw; max-height: 88vh; overflow-y: auto; }
  .cf-section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--purple); margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--gray-100); }
  .cf-section:first-of-type { margin-top: 6px; }
  .cf-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--gray-400); }
  .cf-label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-600); margin: 8px 0 3px; }
  .cf-req { color: var(--danger); }
  .cf-tok { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 400; color: var(--purple); background: var(--purple-light); padding: 1px 5px; border-radius: 4px; }
  .cf-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1.5px solid var(--gray-200); border-radius: 8px; font-size: 13px; font-family: inherit; }
  .cf-input:focus { outline: none; border-color: var(--purple); }
  textarea.cf-input { resize: vertical; line-height: 1.5; }
  .cf-row { display: flex; gap: 10px; }
  @media (max-width: 520px) { .cf-row { flex-direction: column; gap: 0; } }
  .cf-jd { background: var(--paper-100); border: 1px solid var(--gray-300); border-radius: 10px; padding: 12px; margin: 6px 0 4px; }
  .cf-advanced-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--gray-400); padding: 10px 0 2px; }
  .cf-advanced-toggle:hover { color: var(--purple); }
  .cf-advanced-toggle.open .cf-adv-arrow { transform: rotate(90deg); }

  /* ── Inbox (Track D) ── */
  .inbox-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; margin-left:6px; border-radius:var(--r-pill); background:var(--purple); color:var(--white); font-size:10px; font-weight:700; line-height:1; }
  .inbox-mailboxes { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
  .inbox-mb-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 10px; border:1px solid var(--gray-300); border-radius:var(--r-pill); background:var(--card); color:var(--gray-700); }
  .inbox-mb-chip .dot { width:7px; height:7px; border-radius:50%; background:var(--gray-400); }
  .inbox-mb-chip .dot-on { background:var(--green); }
  .inbox-mb-empty { font-size:12px; color:var(--gray-500,var(--ink-500)); }
  .inbox-toggle { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--gray-600,var(--gray-700)); cursor:pointer; }
  .inbox-row { display:flex; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:8px; cursor:pointer; background:var(--card); transition:box-shadow .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease); }
  .inbox-row:hover { border-color:var(--gray-300); box-shadow:var(--shadow-md); transform:translateY(-1px); }
  .inbox-row-unread { border-left:3px solid var(--purple); background:var(--purple-light); }
  /* Gmail-style: focused (keyboard nav) row gets a stronger highlight. */
  .inbox-row-focus { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple-light); }
  /* Two-pane list: flatten the card rows so they read as a list, and mark the active row. */
  #inboxContainer .inbox-row { border:none; border-bottom:1px solid var(--line); border-radius:0; margin:0; box-shadow:none; }
  #inboxContainer .inbox-row:hover { transform:none; box-shadow:none; background:var(--purple-light); }
  #inboxContainer .inbox-row.ib-active { background:var(--paper-50); border-left:3px solid var(--purple); }
  .inbox-rowbtn { width:26px; height:26px; border-radius:7px; border:1px solid var(--gray-200); background:var(--white); color:var(--gray-500); font-size:12px; cursor:pointer; }
  .inbox-rowbtn:hover { color:var(--ink); border-color:var(--gray-300); }
  .inbox-cheatsheet { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 2500; display: flex; align-items: center; justify-content: center; }
  .inbox-cheatsheet-inner { background: var(--white); border-radius: 14px; padding: 24px 28px; min-width: 320px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
  .inbox-cheatsheet-title { font-size: 14px; font-weight: 800; color: var(--gray-700); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 14px; }
  .inbox-cheatsheet-row { font-size: 13px; color: var(--gray-700); padding: 5px 0; display: flex; align-items: center; gap: 10px; }
  .inbox-cheatsheet-row kbd { font: inherit; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--gray-100); border: 1px solid var(--gray-200); border-bottom-width: 2px; min-width: 16px; text-align: center; }
  .inbox-row-main { flex:1; min-width:0; }
  .inbox-row-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
  .inbox-from { font-weight:600; color:var(--gray-900,var(--gray-900)); }
  .inbox-subject { font-size:13px; font-weight:500; color:var(--gray-800,var(--ink-800)); }
  .inbox-snippet { font-size:12.5px; color:var(--gray-500,var(--ink-500)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inbox-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:5px; font-size:11.5px; color:var(--gray-500,var(--ink-500)); }
  .inbox-meta-item { white-space:nowrap; }
  .muted { color:var(--gray-400,var(--gray-400)); }
  .intent-chip { font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; }
  .intent-interested { background:var(--success-bg); color:var(--success); }
  .intent-notnow { background:var(--energy-yellow-100); color:#a16207; }
  .intent-objection { background:var(--warning-bg); color:var(--warning); }
  .intent-unsub { background:var(--danger-bg); color:var(--danger); }
  .intent-ooo { background:var(--info-bg); color:#1d4ed8; }
  .intent-wrong { background:var(--purple-light); color:var(--hr-purple); }
  .intent-unknown { background:var(--paper-100); color:var(--gray-700); }
  .sla-badge { font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:999px; }
  .sla-ok { background:var(--paper-100); color:var(--gray-700); }
  .sla-over { background:var(--danger-bg); color:var(--danger); }
  .reply-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
  .reply-subject-lg { font-size:16px; font-weight:700; color:var(--gray-900,var(--gray-900)); }
  .reply-close { background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--gray-400,var(--gray-400)); }
  .reply-cand { font-size:13px; padding:8px 10px; background:var(--gray-50); border-radius:var(--r-sm); margin-bottom:8px; }
  .reply-ooo { font-size:12.5px; padding:7px 10px; background:var(--info-bg); color:var(--blue); border-radius:var(--r-sm); margin-bottom:8px; }
  .reply-body { font-size:13px; color:var(--gray-700); white-space:pre-wrap; line-height:1.5; max-height:200px; overflow:auto; padding:10px; border:1px solid var(--gray-200); border-radius:var(--r-sm); margin-bottom:12px; }
  .reply-section { margin-bottom:12px; }
  .reply-section-title { font-size:12px; font-weight:600; color:var(--gray-600,var(--gray-700)); margin-bottom:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .reply-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .reply-row select { padding:6px 8px; border:1px solid var(--gray-300,var(--gray-300)); border-radius:8px; font-size:13px; }
  .reply-actions { display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--gray-200,var(--gray-200)); padding-top:12px; }
  #linkedinFilters a:hover { text-decoration:underline; }

/* delegation: focus indicator moved off inline onfocus/onblur (list_detail brief) */
#ldSettingsBrief:focus { border-color: var(--purple); }

/* delegation: simple row hover moved off inline onmouseover/onmouseout */
[data-hover-bg]:hover { background:var(--paper-50); }

#slNewBrief:focus { border-color: var(--purple); }