/* styles.css - all inline <style> blocks extracted from index.html in document order.
   Mechanical move; CSS byte-preserved. @import rules hoisted to top per CSS spec. */
/* Font @imports removed 2026-08-05 (wave 2.1): Cormorant Garamond and Fraunces are
   now served by the single consolidated <link> in index.html. An @import at the head
   of a render-blocking stylesheet serialises an extra round trip behind it. */
    /* Phosphor icons are self-hosted: index.html links /icons/phosphor/phosphor.css
       and phosphor-bold.css directly. The unpkg @imports that used to sit here were
       dead twice over — the CSP style-src allowlist ('self', fonts.googleapis.com,
       cdn.jsdelivr.net) never included unpkg.com, and @import at the head of a
       render-blocking stylesheet serialises behind it for nothing. Removed 2026-08-04. */

/* ── Launch-critical auth lock (top of boot, unconditional) ──
   The app shell (#app, rr-header, rr-sidebar, trial banner, and ALL sim-views
   including the retired pro/cold-email view) must NEVER paint for a visitor
   without a confirmed Firebase session. #app is force-hidden until
   body.rr-authed is set, added ONLY when firebase.auth() confirms a real user.
   The id-specificity + !important beat any .active added by a param, hash,
   timer, or legacy boot path, so no race can flash the shell to a signed-out
   visitor. (The cookie banner lives outside #app, so it still shows.) */
body:not(.rr-authed) #app{display:none!important}
/* ============================================================
   RESET & ROOT
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-nav {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--rr-accent);
  color: white;
  padding: 8px 16px;
  z-index: 9999;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  transition: top 0.2s;
}
.skip-nav:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

:root {
  /* ── Typography ── */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Material, warm off-white ── */
  --bg:       #FFFFFF;
  --surface:  #FFFFFF;
  --surface2: #FAFAFA;
  --surface3: #E0DBD4;
  --border:   #D8D3CC;
  --border2:  #C6BEB3;

  /* ── Text, warm dark ── */
  --text:  #1A1614;
  --text2: #3D3530;
  --text3: #7A6F68;

  /* ── Accent, deep teal ── */
  --accent:       var(--rr-accent);
  --accent-hover: #0A5E62;
  --accent-dim:   rgba(37,99,235,0.10);

  /* ── Semantic ── */
  --success: #006B3C;
  --danger:  #B0001E;
  --warn:    #8A4E00;

  /* ── Radius & spacing (unchanged between modes) ── */
  --r:    8px;
  --r-sm: 6px;
  --r-lg: 12px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --sp-16:64px; --sp-20:80px;

  /* ── Shadows, warm-tinted ── */
  --shadow:        0 4px 24px rgba(80,60,40,0.08);
  --shadow-xs:     0 1px 2px rgba(80,60,40,0.08);
  --shadow-sm:     0 1px 3px rgba(80,60,40,0.07), 0 4px 12px rgba(80,60,40,0.06);
  --shadow-md:     0 2px 6px rgba(80,60,40,0.08), 0 8px 28px rgba(80,60,40,0.07);
  --shadow-lg:     0 4px 12px rgba(80,60,40,0.08), 0 20px 60px rgba(80,60,40,0.09);
  --shadow-accent: 0 8px 32px rgba(37,99,235,0.18);
  --mockup-shadow: 0 40px 80px rgba(80,60,40,0.12), 0 0 0 1px rgba(80,60,40,0.07);

  /* ── Chrome ── */
  --nav-bg: rgba(248,246,243,0.96);

  /* ── Easing ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Canvas / grid ── */
  --grid-line:            rgba(20,30,40,0.18);
  --grid-node:            rgba(20,30,40,0.32);
  --grid-line-thickness:  0.8px;
  --grid-density:         1;
  --glow-intensity:       0;

  /* ── Pricing section aliases ── */
  --r-text:    var(--text);
  --r-muted:   var(--text2);
  --r-surface: var(--surface2);
  --r-border:  var(--border);
  --r-card:    var(--surface);

  /* ── Persona cards ── */
  --pcard-bg:     #ffffff;
  --pcard-border: rgba(0,0,0,0.08);
  --pcard-text:   #1a1714;
  --pcard-sub:    rgba(0,0,0,0.5);

  /* ──────────────────────────────────────────────────────────────────────────
     CANONICAL BRAND TOKENS (--rr-*). Single source of truth for the design
     system: wedgwood accent, Plus Jakarta Sans body, Fraunces display, 16px
     cards, frosted surfaces. Phase 1 is additive only: these are defined here
     and not yet consumed by any surface. Migration phases will repoint surfaces
     (--vi-*, --fce-*, cl-*, sc-* and the off-palette blues) onto these.
     ────────────────────────────────────────────────────────────────────────── */
  /* Accent: wedgwood, tuned to read on the warm off-white backgrounds */
  --rr-accent:        #2448FF;
  --rr-accent-hover:  #1f3dd9; /* slightly darker, for hover */
  --rr-accent-strong: #1a34b8; /* deeper, for accent text on light */
  --rr-accent-tint:   #edf0ff; /* pale wedgwood fill */
  --rr-accent-tint-2: #dde3ff; /* stronger tint */
  --rr-accent-border: #c2cdff; /* wedgwood-tinted border */
  /* Radius */
  --rr-radius:      16px;
  --rr-radius-sm:   10px;
  --rr-radius-pill: 999px;
  /* Surfaces */
  --rr-surface:       #ffffff;
  --rr-surface-frost: rgba(255,255,255,0.92);
  /* Borders */
  --rr-border:        rgba(17,17,20,0.08);
  --rr-border-strong: rgba(17,17,20,0.14);
  /* Ink */
  --rr-ink:        #15161A;
  --rr-ink-muted:  #52647a;
  --rr-ink-subtle: #8a97a4;
  /* Card shadow: the CV Builder layered value, brand-ring aligned to wedgwood */
  --rr-shadow-card: inset 0 1.5px 0 rgba(255,255,255,0.95), inset 0 -1.5px 0 rgba(255,255,255,0.5), 0 0 0 1px rgba(36,72,255,0.06), 0 12px 28px -8px rgba(17,17,20,0.10), 0 4px 12px rgba(17,17,20,0.04);
  /* Fonts */
  --rr-font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --rr-font-display: "Fraunces", Georgia, serif;
}

/* ──────────────────────────────────────────────────────────────────────────
   GITHUB PRIMER DARK THEME (opt-in via body.theme-gh)
   Foundation only: overrides the global token set so any rule already
   consuming var(--bg / --surface / --text / --border / --accent / etc.)
   picks up Primer values automatically. Components with hardcoded colours
   stay as-is and will be addressed in follow-up PRs.
   Landing (.lpv3-root) and persona cards (--pcard-*) are intentionally
   NOT overridden so the landing page remains identical with or without
   the class.
   ────────────────────────────────────────────────────────────────────────── */
body.theme-gh {
  /* Material */
  --bg:       #0d1117;   /* Primer canvas.default */
  --surface:  #161b22;   /* Primer canvas.subtle */
  --surface2: #161b22;   /* Primer has no strong tier; match --surface */
  --surface3: #010409;   /* Primer canvas.inset (deepest) */
  --border:   #30363d;   /* Primer border.default */
  --border2:  #21262d;   /* Primer border.muted */

  /* Text */
  --text:  #e6edf3;      /* Primer fg.default */
  --text2: #7d8590;      /* Primer fg.muted */
  --text3: #6e7681;      /* Primer fg.subtle */

  /* Accent */
  --accent:       #1f6feb;                       /* Primer accent.emphasis */
  --accent-hover: #2f81f7;                       /* Primer accent.fg */
  --accent-dim:   rgba(56, 139, 253, 0.15);      /* Primer accent.subtle */

  /* Semantic */
  --success: #3fb950;    /* Primer success.fg */
  --danger:  #f85149;    /* Primer danger.fg */
  --warn:    #d29922;    /* Primer attention.fg */

  /* Chrome */
  --nav-bg: rgba(13, 17, 23, 0.96);

  /* Shadows: light tokens use a warm-brown tint that looks wrong on dark.
     Primer leans on borders + near-black ambient shadow, so these are
     darker (canvas.inset #010409 base) and the hairline uses border.default. */
  --shadow:        0 4px 24px rgba(1, 4, 9, 0.5);
  --shadow-xs:     0 1px 2px rgba(1, 4, 9, 0.4);
  --shadow-sm:     0 1px 3px rgba(1, 4, 9, 0.4), 0 4px 12px rgba(1, 4, 9, 0.3);
  --shadow-md:     0 2px 6px rgba(1, 4, 9, 0.4), 0 8px 28px rgba(1, 4, 9, 0.3);
  --shadow-lg:     0 4px 12px rgba(1, 4, 9, 0.4), 0 20px 60px rgba(1, 4, 9, 0.5);
  --shadow-accent: 0 8px 32px rgba(31, 111, 235, 0.25);
  --mockup-shadow: 0 40px 80px rgba(1, 4, 9, 0.6), 0 0 0 1px rgba(48, 54, 61, 0.7);
}
body.theme-gh { background: var(--bg); color: var(--text); }

/* ──────────────────────────────────────────────────────────────────────────
   GITHUB DARK THEME: component overrides for hardcoded colours
   Dark-only patches for components that hardcode light hex/rgb and so do not
   pick up the token flip. Every rule is scoped under body.theme-gh, so light
   mode renders pixel-identical without the class.
   ────────────────────────────────────────────────────────────────────────── */
/* Cookie banner is a dark bar by design (#1A1614). On the dark canvas it
   blends in with no visible edge; a top border separates it. */
body.theme-gh #cookieConsent { border-top: 1px solid var(--border); }

/* Apps board stage-chip dark-theme overrides removed 2026-07: the kanban
   board (.ap-col-count/.ap-col-hd--*) they targeted is gone with the
   records-table CRM rebuild. */

/* ── Typography scale ── */
.h-display { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.overline   { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
.caption    { font-family: var(--font-body); font-size: 11px; color: var(--text3); line-height: 1.5; }
.body-lg    { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--text2); }

/* ── Theme transition ── */
html { transition: background-color 0.28s ease; }
body,
.r-nav, .r-card, .r-hero-input-wrap, .r-hero-result, .r-proof-bar,
.r-footer, .app-nav, .land-nav, .panel, .card, .panel-head,
.form-input, .run-btn, .app-tab, .persona-card, .size-btn {
  transition: background-color 0.28s ease, border-color 0.28s ease,
              color 0.28s ease, box-shadow 0.28s ease;
}

/* ============================================================
   ONBOARDING OVERLAY
   ============================================================ */
#ob-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
#ob-overlay.ob-visible { opacity: 1; pointer-events: all; }
body.tour-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}
.ob-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  width: 480px; max-width: calc(100vw - 32px);
  padding: 36px 40px 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.ob-progress-track {
  height: 3px; background: var(--border); border-radius: 2px;
  margin-bottom: 28px; overflow: hidden;
}
.ob-progress-fill {
  height: 100%; background: var(--accent); border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.ob-step-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text3);
  font-family: 'JetBrains Mono', monospace; margin-bottom: 6px;
}
.ob-question {
  font-size: 20px; font-weight: 700; color: var(--text);
  font-family: var(--font-display); line-height: 1.3; margin-bottom: 6px;
}
.ob-subtitle { font-size: 12px; color: var(--text3); margin-bottom: 24px; line-height: 1.5; }
.ob-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.ob-option {
  padding: 11px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text); font-size: 13px; cursor: pointer; text-align: left;
  transition: border-color 0.15s, background 0.15s;
  font-family: var(--font-body);
}
.ob-option:hover { border-color: var(--accent); background: var(--surface3); }
.ob-option.ob-selected { border-color: var(--accent); background: var(--accent-dim); font-weight: 600; }
.ob-text-input, .ob-textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text);
  font-size: 13px; font-family: var(--font-body);
  outline: none; transition: border-color 0.15s; margin-bottom: 28px;
}
.ob-text-input:focus, .ob-textarea:focus { border-color: var(--accent); }
.ob-textarea { resize: vertical; min-height: 80px; }
.ob-multi::before {
  content: ''; display: inline-block;
  width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px solid var(--border2); margin-right: 8px;
  vertical-align: middle; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.ob-multi.ob-selected::before {
  background: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px 8px; background-repeat: no-repeat; background-position: center;
}
.ob-other-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; margin-top: 6px; margin-bottom: 2px;
  border-radius: 8px; border: 1px solid var(--accent);
  background: var(--surface2); color: var(--text);
  font-size: 12px; font-family: var(--font-body);
  outline: none; transition: border-color 0.15s;
}
.ob-other-input:focus { border-color: var(--accent); }
.ob-ai-fix-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: -18px; margin-bottom: 28px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--accent-dim); border: 1px solid var(--accent);
  color: var(--accent); font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: var(--font-body);
  transition: background 0.15s, opacity 0.15s;
}
.ob-ai-fix-btn:hover { background: var(--accent); color: #fff; }
.ob-ai-fix-btn:disabled { opacity: 0.5; cursor: default; }
.ob-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ob-footer-left { display: flex; gap: 8px; align-items: center; }
.ob-btn-next {
  padding: 10px 24px; border-radius: 10px; background: var(--accent);
  color: #fff; border: none; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--font-body); transition: opacity 0.15s;
}
.ob-btn-next:hover { opacity: 0.88; }
.ob-btn-next:disabled { opacity: 0.4; cursor: default; }
.ob-btn-back {
  padding: 10px 16px; border-radius: 10px; background: transparent;
  color: var(--text2); border: 1px solid var(--border2);
  font-size: 13px; cursor: pointer; font-family: var(--font-body);
  transition: border-color 0.15s;
}
.ob-btn-back:hover { color: var(--text); }
.ob-skip-link {
  font-size: 11px; color: var(--text3); background: none; border: none;
  cursor: pointer; padding: 0; font-family: var(--font-body);
  text-decoration: underline;
}
.ob-skip-link:hover { color: var(--text2); }
.ob-later-link {
  font-size: 11px; color: var(--text3); background: none; border: none;
  cursor: pointer; padding: 0; font-family: var(--font-body);
  text-decoration: underline; position: absolute; top: 18px; right: 20px;
}
@keyframes ob-slide-in  { from { opacity:0; transform:translateX(32px); } to { opacity:1; transform:translateX(0); } }
@keyframes ob-slide-out { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(-32px); } }
.ob-slide-in  { animation: ob-slide-in  0.26s cubic-bezier(0.4,0,0.2,1) forwards; }
.ob-slide-out { animation: ob-slide-out 0.22s cubic-bezier(0.4,0,0.2,1) forwards; }
.ob-complete { text-align: center; padding: 12px 0 8px; }
.ob-complete-icon { font-size: 40px; margin-bottom: 14px; }
.ob-complete-title {
  font-size: 22px; font-weight: 800; font-family: var(--font-display);
  color: var(--text); margin-bottom: 8px;
}
.ob-complete-sub { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 24px; }
/* ── Profile badge ── */
.profile-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 100px;
  border: 1px solid var(--border2); background: var(--surface2);
  font-size: 10px; font-weight: 700; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  font-family: 'JetBrains Mono', monospace; white-space: nowrap; color: var(--text2);
}
.profile-badge:hover { border-color: var(--accent); color: var(--text); }
.profile-badge.ob-active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.profile-badge .pb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text3); flex-shrink: 0; }
.profile-badge.ob-active .pb-dot { background: var(--accent); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  transition: background 0.25s, color 0.25s;
  scrollbar-width: thin;
  scrollbar-color: rgba(20,24,32,.28) transparent;
}
html, body { direction: rtl; }
body > * { direction: ltr; }
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: rgba(20,24,32,.22); border-radius: 4px; }
body::-webkit-scrollbar-thumb:hover { background: rgba(20,24,32,.4); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* ============================================================
   PAGES
============================================================ */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }
/* Force inactive pages hidden regardless of ID-specificity overrides (e.g. #app { display: flex }). */
.page:not(.active) { display: none !important; }

/* ============================================================
   NOISE OVERLAY
============================================================ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.5;
}
}

/* ============================================================
   LANDING PAGE
============================================================ */
#landing {
  background: #F0EDE8;
}

/* Nav */
.land-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 0.25s, border-color 0.25s;
}

.land-logo {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.land-logo span { color: var(--accent); }

.land-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.land-nav-links a {
  color: var(--text2);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
.land-nav-links a:hover { color: var(--text); }

.land-nav-cta {
  display: flex;
  gap: 10px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }

.btn-primary {
  background: var(--accent);
  color: #ffffff;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(0,120,212,0.35); }

.btn-secondary {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
}
.btn-secondary:hover { border-color: var(--accent); }

.btn-lg {
  padding: 16px 32px;
  font-size: 14px;
}

.btn-full { width: 100%; justify-content: center; }

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Hero */
.land-hero {
  padding: 120px 48px 80px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-dim);
  border: 1px solid rgba(0,120,212,0.2);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.hero-eyebrow .blink {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 2s infinite;
}

@keyframes blink {
  0%,100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.land-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 800px;
  margin-bottom: 24px;
}

.land-hero h1 em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
  letter-spacing: 0px;
}

.land-hero p.lead {
  font-size: 15px;
  color: var(--text2);
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 40px;
  font-family: var(--font-body);
  font-weight: 400;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 64px;
}

.hero-note {
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 0.5px;
}

/* ── HERO SPLIT ── */
.hero-split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 52px;
  align-items: center;
  margin-top: 8px;
}
.hero-sub {
  font-size: 15px;
  color: var(--text2);
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 28px;
  font-family: var(--font-body);
}
.hero-input-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.2s;
}
.hero-input-box:focus-within { border-color: var(--accent); }
#heroDemoInput {
  width: 100%;
  min-height: 130px;
  background: transparent;
  border: none;
  padding: 16px 18px;
  font-size: 13px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  resize: none;
  outline: none;
  line-height: 1.7;
  display: block;
  box-sizing: border-box;
}
.hero-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}
.hero-input-note {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-body);
}

/* ── LIVE RESULT PANEL ── */
.hero-live-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-height: 220px;
  position: relative;
  overflow: hidden;
}
.hero-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 32px;
  text-align: center;
}
.hero-panel-empty-label {
  font-size: 13px;
  color: var(--text3);
  font-family: var(--font-body);
  margin-bottom: 6px;
}
.hero-panel-empty-sub {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-body);
}
.hero-panel-result { padding: 22px; }

.hero-score-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.hero-ring-wrap {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
}
.hero-ring-wrap svg { display: block; }
.hero-score-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hero-verdict-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.hero-verdict-badge.send      { background:rgba(62,255,160,0.1);  color:var(--success); border:1px solid rgba(62,255,160,0.3); }
.hero-verdict-badge.rewrite   { background:rgba(255,179,71,0.1);  color:var(--warn);    border:1px solid rgba(255,179,71,0.3); }
.hero-verdict-badge.dont-send { background:rgba(255,79,110,0.1); color:var(--danger);  border:1px solid rgba(255,79,110,0.3); }
.rr-fallback-badge { font-size: 10px; padding: 2px 8px; border-radius: 100px; background: var(--surface2); border: 1px solid var(--border2); color: var(--text3); font-family: var(--font-body); font-weight: 600; white-space: nowrap; }
.ic-bubble-fallback { font-size: 11px; color: var(--text3); font-style: italic; margin-left: 4px; }
.hero-reply-rate {
  font-size: 12px;
  color: var(--text2);
  font-family: var(--font-body);
}
.hero-reply-rate strong { color: var(--text); font-weight: 700; }
.hero-issue-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: 8px;
  padding: 10px 13px;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hero-issue-card.vis { opacity: 1; transform: translateY(0); }
.hero-issue-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.hero-issue-fix { font-size: 11px; color: var(--success); line-height: 1.5; }
.hero-panel-cta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text3);
  font-family: var(--font-body);
}
.hero-panel-cta a {
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}

/* ── STAT TICKER ── */
.stat-ticker {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 20px 48px;
}
.stat-ticker-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
}
.stat-ticker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px;
  flex: 1;
}
.stat-ticker-item + .stat-ticker-item { border-left: 1px solid var(--border); }
.stat-ticker-val {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.stat-ticker-lbl {
  font-size: 11px;
  font-family: var(--font-body);
  color: var(--text3);
  margin-top: 3px;
  text-align: center;
}

/* ── EDITORIAL STEPS (how it works) ── */
.land-steps {
  padding: 80px 48px;
  max-width: 1100px;
  margin: 0 auto;
}
.step-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 28px;
  align-items: start;
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.step-row:last-of-type { border-bottom: none; }
.step-num {
  font-family: var(--font-body);
  font-size: clamp(64px, 7vw, 96px);
  font-weight: 800;
  color: var(--border);
  line-height: 1;
  letter-spacing: -4px;
  padding-top: 6px;
  user-select: none;
}
.step-content h3 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: 0;
}
.step-content p {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 20px;
}
.step-visual {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  max-width: 560px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.7;
}
.step-tag-row { display: flex; flex-wrap: wrap; gap: 6px; max-width: 560px; }
.step-tag {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
}
.step-tag.hi { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* ── BEFORE / AFTER ── */
.compare-section {
  padding: 80px 48px;
  border-top: 1px solid var(--border);
  max-width: 1100px;
  margin: 0 auto;
}
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 40px 0 48px;
}
.compare-col {
  border-radius: var(--r-lg);
  padding: 28px;
}
.compare-col.before {
  background: rgba(255,79,110,0.04);
  border: 1px solid rgba(255,79,110,0.15);
}
.compare-col.after {
  background: rgba(62,255,160,0.04);
  border: 1px solid rgba(62,255,160,0.18);
}
.compare-head {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.compare-col.before .compare-head { color: rgba(255,79,110,0.7); }
.compare-col.after  .compare-head { color: var(--success); }
.compare-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.65;
}
.compare-col.before .compare-item { color: var(--text2); }
.compare-col.after  .compare-item { color: var(--text); }
.compare-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}
.compare-col.before .compare-dot { background: rgba(255,79,110,0.4); }
.compare-col.after  .compare-dot { background: var(--success); }

.feat3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feat3-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color 0.2s;
}
.feat3-card:hover { border-color: var(--border2); }
.feat3-num {
  font-family: var(--font-body);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin-bottom: 10px;
  line-height: 1;
}
.feat3-num.v2 { color: var(--accent); }
.feat3-num.v3 { color: var(--success); }
.feat3-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.feat3-desc { font-size: 13px; color: var(--text2); line-height: 1.7; }

/* ── TESTIMONIALS ── */
.testimonials-section {
  padding: 80px 48px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1060px;
  margin: 40px auto 0;
  text-align: left;
}
.testi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.testi-card:hover {
  border-color: var(--border2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.testi-card::before {
  content: '\201C';
  position: absolute;
  top: 12px; left: 18px;
  font-size: 44px;
  line-height: 1;
  color: var(--border2);
  font-family: var(--font-display);
}
.testi-quote {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.8;
  margin-bottom: 18px;
  padding-top: 22px;
}
.testi-author { display: flex; align-items: center; gap: 10px; }
.testi-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 800;
  color: var(--accent);
  flex-shrink: 0;
}
.testi-name { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--text); }
.testi-role { font-size: 11px; color: var(--text3); margin-top: 1px; }

/* ── FINAL CTA ── */
.final-cta-section {
  padding: 100px 48px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.final-cta-section h2 {
  font-family: var(--font-body);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
  color: var(--text);
}
.final-cta-sub {
  font-size: 15px;
  color: var(--text2);
  margin-bottom: 32px;
  font-family: var(--font-body);
}
.final-cta-input-wrap {
  max-width: 480px;
  margin: 0 auto 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.2s;
}
.final-cta-input-wrap:focus-within { border-color: var(--accent); }
#finalCtaInput {
  width: 100%;
  min-height: 80px;
  background: transparent;
  border: none;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  resize: none;
  outline: none;
  line-height: 1.7;
  display: block;
  box-sizing: border-box;
}
.final-cta-btn-row {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60%  { transform: translateX(-5px); }
  40%,80%  { transform: translateX(5px); }
}
.input-shake { animation: shake 0.4s ease; }

/* Hero mockup */
.hero-mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
}

.mockup-bar {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mockup-dot { width: 10px; height: 10px; border-radius: 50%; }

.mockup-content {
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.mock-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
}

.mock-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mock-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.mock-name { font-family: var(--font-body); font-size: 12px; font-weight: 700; }
.mock-role { font-size: 9px; color: var(--text3); }

.mock-score-row { display: flex; gap: 8px; margin-bottom: 10px; }
.mock-score {
  flex: 1;
  background: var(--surface3);
  border-radius: 6px;
  padding: 6px;
  text-align: center;
}
.mock-score .v { font-family: var(--font-body); font-size: 16px; font-weight: 800; }
.mock-score .l { font-size: 8px; color: var(--text3); text-transform: uppercase; }

.mock-bar-row { margin-bottom: 6px; }
.mock-bar-label { font-size: 9px; color: var(--text3); margin-bottom: 3px; }
.mock-bar-track { height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
.mock-bar-fill { height: 100%; border-radius: 2px; }

/* Smooth transitions for theme switch */
.panel, .feature-card, .pricing-card, .auth-card, .pop-card,
.persona-result, .ab-result-panel, .ab-panel, .thinking-card,
.stat-box, .mock-card, .land-nav, .app-nav, .hero-mockup {
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}


/* ============================================================
   SECTION TYPOGRAPHY
============================================================ */
.land-features, .land-pricing {
  padding: 80px 48px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.section-label {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  text-align: center;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}

.section-title {
  font-family: var(--font-body);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 48px;
  line-height: 1.15;
  text-align: center;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color 0.2s;
}
.feature-card:hover { border-color: var(--border2); }

.feature-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}

.feature-card h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}
.feature-card p { font-size: 12px; color: var(--text2); line-height: 1.7; }

/* Pricing */
.land-pricing {
  padding: 80px 48px;
  max-width: 1100px;
  margin: 0 auto;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.pricing-card:hover { transform: translateY(-2px); }

.pricing-card.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(0,120,212,0.05) 0%, var(--surface) 100%);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.pricing-plan {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.pricing-price {
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.pricing-period { font-size: 12px; color: var(--text3); margin-bottom: 20px; }

.pricing-features {
  list-style: none;
  margin-bottom: 24px;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text2);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.pricing-features li:last-child { border: none; }
.pricing-features li .check { color: var(--success); flex-shrink: 0; }
.pricing-features li .cross { color: var(--text3); flex-shrink: 0; }

/* Footer */
.land-footer {
  border-top: 1px solid var(--border);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.land-footer .logo { font-family: var(--font-body); font-size: 18px; font-weight: 800; }
.land-footer .logo span { color: var(--accent); }
.land-footer p { font-size: 11px; color: var(--text3); }

/* ============================================================
   AUTH PAGE
============================================================ */
#auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px;
  background: var(--bg);
}

/* Grid background */
#auth::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.auth-container {
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
}

.auth-logo {
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 8px;
}
.auth-logo span { color: var(--accent); }
.auth-tagline { text-align: center; font-size: 12px; color: var(--text3); margin-bottom: 36px; }

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px;
}

.auth-tabs {
  display: flex;
  gap: 0;
  background: var(--surface2);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 28px;
}

.auth-tab {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text3);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  border: none;
  background: transparent;
}
.auth-tab.active { background: var(--surface3); color: var(--text); }

.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text3); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-size: 10px;
  color: var(--text3);
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.btn-google {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  width: 100%;
  justify-content: center;
  padding: 11px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-google:hover { border-color: var(--border2); background: var(--surface3); }

.auth-note {
  font-size: 11px;
  color: var(--text3);
  text-align: center;
  margin-top: 20px;
  line-height: 1.6;
}
.auth-note a { color: var(--accent); cursor: pointer; text-decoration: none; }

/* ============================================================
   APP / SIMULATOR
============================================================ */
#app {
  background: var(--bg);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* App Nav */
.app-nav {
  display: flex;
  align-items: center;
  padding: 0 32px;
  height: 58px;
  border-bottom: 1px solid var(--border);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 32px;
  /* needed for absolute-positioned drawer */
  isolation: isolate;
}

.app-logo {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.app-logo span { color: var(--accent); }

.app-nav-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
}

.app-tab {
  padding: 6px 16px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-tab:hover { color: var(--text); background: var(--surface2); }
.app-tab.active { color: var(--accent); background: var(--accent-dim); }
.app-tab .tab-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.app-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.user-chip {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text2);
}

.user-avatar {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--accent-dim);
  border: 1px solid rgba(0,120,212,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 700;
}

/* App body */
.app-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 56px);
}

/* Simulator panels */
.sim-view { display: none; min-height: calc(100vh - 56px); width: 100%; }
.sim-view.active { display: flex; flex-direction: column; flex: 1; min-height: calc(100vh - 56px); width: 100%; }

/* Job Hunter view */
#jobhunterView {
  display: none;
  flex: 1;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}
#jobhunterView.active {
  display: flex;
  flex-direction: column;
}
/* When Job Hunter is active, app-body goes full-width */
.app-body.jh-active {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* ============================================================
   MAIN SIMULATE VIEW
============================================================ */
.sim-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

.sim-left { display: flex; flex-direction: column; gap: 16px; }

/* Panel */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.panel-head-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}

.panel-head h3 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.panel-head .ph-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Email textarea */
.email-ta {
  width: 100%;
  min-height: 180px;
  height: auto;
  overflow: hidden;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.8;
  padding: 18px;
  resize: none;
  display: block;
}
.email-ta::placeholder { color: var(--text3); }

/* ── EMAIL TYPE SELECTOR ── */
.email-type-bar { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface2); }
.email-type-label { font-size:9px; font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text3); padding-top:5px; flex-shrink:0; white-space:nowrap; }
.email-type-chips { display:flex; flex-wrap:wrap; gap:5px; }
.etype-chip { font-size:11px; font-family:var(--font-body); font-weight:600; padding:4px 10px; border-radius:100px; border:1px solid var(--border2); background:var(--surface); color:var(--text2); cursor:pointer; transition:all 0.15s; white-space:nowrap; line-height:1.4; }
.etype-chip:hover { border-color:var(--accent); color:var(--text); background:var(--surface3); }
.etype-chip.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); font-weight:700; }

/* Subject line dedicated input */
.subject-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.subject-input-label {
  font-size: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
  padding: 0 14px;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  height: 44px;
  display: flex;
  align-items: center;
  background: var(--surface2);
  flex-shrink: 0;
}

.subject-input-field {
  flex: 1;
  height: 44px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 0 16px;
  transition: background 0.15s;
}
.subject-input-field::placeholder { color: var(--text3); font-weight: 400; }
.subject-input-field:focus { background: var(--surface2); }

.subject-body-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* Industry context */
.context-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.ctx-select {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 9px 12px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  outline: none;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a5a78'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.ctx-select:focus { border-color: var(--accent); }

.ctx-label {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
  padding: 0 1px;
}

/* Persona grid, compact chip grid, self-scrolling */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 5px;
  padding: 6px 14px 10px;
  overflow-y: auto;
  max-height: 480px;
  flex-shrink: 0;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  will-change: auto;
  transform: translateZ(0);
}
.persona-grid::-webkit-scrollbar { width: 4px; }
.persona-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.persona-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.persona-grid::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
@media (max-width: 600px) {
  .persona-grid { grid-template-columns: 1fr; max-height: none; }
}

.persona-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 9px 10px 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.persona-card:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.persona-card.selected {
  border: 2px solid var(--accent) !important;
  background: var(--accent-dim);
}
/* Animated checkmark badge */
.p-checkmark {
  position: absolute;
  top: -7px; right: -7px;
  width: 16px; height: 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0);
  transition: opacity 0.12s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
  z-index: 2;
  border: 1.5px solid var(--surface);
}
.persona-card.selected .p-checkmark { opacity: 1; transform: scale(1); }
/* Circle avatar */
.p-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 10px; font-weight: 800;
  letter-spacing: 0.3px; flex-shrink: 0;
  transition: filter 0.15s;
}
.persona-card:hover .p-avatar { filter: brightness(1.12); }
/* Difficulty stars */
.p-diff { font-size: 8px; font-family: var(--font-body); line-height: 1; letter-spacing: 0.2px; }
.p-diff.hard  { color: var(--danger); }
.p-diff.med   { color: var(--warn); }
.p-diff.easy  { color: var(--success); }
/* Reply rate benchmark */
.p-reply { font-size: 8px; color: var(--text3); font-family: var(--font-body); line-height: 1; }
.p-title { font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1.2; }
.p-sub { font-size: 9px; color: var(--text3); line-height: 1.3; }

/* ── PERSONA CHIPS: compact 44px rows in main grid ── */
.persona-chip {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; height: auto; padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative; overflow: visible;
  box-sizing: border-box;
}
.persona-chip:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.persona-chip.selected {
  border: 2px solid var(--accent) !important;
  background: var(--accent-dim);
  transform: scale(1.02);
}
.persona-chip.selected .p-checkmark { opacity: 1; transform: scale(1); }
.persona-chip.suggested {
  border-color: rgba(37,99,235,0.45);
  background: rgba(37,99,235,0.04);
}
.persona-chip.suggested::before {
  content: '★';
  position: absolute; top: 4px; right: 6px;
  font-size: 7px; color: var(--accent); line-height: 1;
}
.persona-chip.selected.suggested::before { display: none; }
.persona-chip.suggested-ai {
  animation: suggested-ai-pulse 1.4s ease-in-out 4;
  border: 2px solid var(--accent) !important;
}
.pc-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 9px; font-weight: 800;
  transition: filter 0.15s;
}
.persona-chip:hover .pc-avatar { filter: brightness(1.1); }
.pc-text {
  flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
}
.pc-label {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; display: block;
}
.pc-sub {
  font-family: var(--font-body); font-size: 9px; color: var(--text3);
  line-height: 1.2; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; display: block;
}
.pc-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.pc-dot.hard { background: var(--danger); }
.pc-dot.med  { background: var(--warn); }
.pc-dot.easy { background: var(--success); }

/* Sim size */
.size-section {
  padding: 14px;
  border-top: 1px solid var(--border);
}
.size-label {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.size-btns { display: flex; gap: 6px; }
.size-btn {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 4px;
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.size-btn:hover { border-color: var(--accent); color: var(--text); }
.size-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.run-btn {
  width: calc(100% - 28px);
  margin: 14px;
  padding: 15px;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}
.run-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(0,120,212,0.3); }
.run-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ============================================================
   RESULTS
============================================================ */
.results-area { margin-top: 20px; }

/* ── VERDICT CARD (top of results, answers "should I send this?") ── */
.verdict-card {
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: 20px;
  animation: fadeUp 0.3s ease forwards;
  position: relative;
  overflow: hidden;
}
.verdict-card.send {
  background: rgba(62,255,160,0.06);
  border: 1.5px solid rgba(62,255,160,0.35);
}
.verdict-card.rewrite {
  background: rgba(255,179,71,0.06);
  border: 1.5px solid rgba(255,179,71,0.35);
}
.verdict-card.nosend {
  background: rgba(255,79,110,0.06);
  border: 1.5px solid rgba(255,79,110,0.35);
}
.verdict-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.verdict-card.send::before { background: var(--success); }
.verdict-card.rewrite::before { background: var(--warn); }
.verdict-card.nosend::before { background: var(--danger); }

.verdict-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.verdict-label {
  display: flex;
  align-items: center;
  gap: 12px;
}
.verdict-icon {
  font-size: 28px;
  line-height: 1;
}
.verdict-decision {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
}
.verdict-card.send .verdict-decision { color: var(--success); }
.verdict-card.rewrite .verdict-decision { color: var(--warn); }
.verdict-card.nosend .verdict-decision { color: var(--danger); }

.verdict-score-row {
  display: flex;
  gap: 20px;
  align-items: center;
}
.verdict-score {
  text-align: center;
}
.verdict-score .vs-num {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  display: block;
}
.verdict-score .vs-lbl {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}
.verdict-score .vs-bench {
  font-size: 9px;
  color: var(--text3);
  margin-top: 2px;
}
.verdict-divider {
  width: 1px;
  height: 40px;
  background: var(--border2);
}
.verdict-summary {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 16px;
  font-family: var(--font-body);
}
.verdict-summary strong { color: var(--text); }

.verdict-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.vact-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.vact-primary {
  background: var(--accent);
  color: #ffffff;
}
.vact-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,120,212,0.3); }
.vact-secondary {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text2);
}
.vact-secondary:hover { border-color: var(--accent); color: var(--text); }
.vact-upgrade {
  background: var(--accent-dim);
  border: 1px solid rgba(37,99,235,0.3);
  color: var(--accent);
}
.vact-upgrade:hover { background: rgba(37,99,235,0.2); }

/* ── BENCHMARK BAND under stat boxes ── */
.bench-band {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  justify-content: center;
}
.bench-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.bench-text {
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 0.3px;
}

/* ── STAT BOX with benchmark ── */
.stat-box-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── REWRITE as primary panel (not buried) ── */
.rewrite-primary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  overflow: visible;
  animation: fadeUp 0.4s ease forwards;
  opacity: 0;
}
.rewrite-primary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,120,212,0.04);
}
.rewrite-primary-head h3 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
}
.rewrite-primary-head p {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}
.rewrite-primary-body {
  padding: 20px 22px;
}
.rewrite-ver-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.rver-tab {
  padding: 5px 12px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  transition: all 0.2s;
}
.rver-tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.rewrite-output {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--text2);
  white-space: pre-wrap;
  min-height: 80px;
  position: relative;
}
.rewrite-output.loading { color: var(--text3); font-style: italic; }
.rewrite-copy-btn {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 10px;
  color: var(--text3);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
  font-weight: 600;
}
.rewrite-copy-btn:hover { color: var(--text); border-color: var(--accent); }

/* ── API KEY MODAL ── */
.api-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.api-modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  padding: 36px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
.api-modal h2 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
}
.api-modal p {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 20px;
}
.api-modal a { color: var(--accent); text-decoration: none; }
.api-modal a:hover { text-decoration: underline; }
.api-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.api-input-row input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}
.api-input-row input:focus { border-color: var(--accent); }
.api-note {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.6;
  margin-top: 12px;
}
.api-note strong { color: var(--text2); }

/* ── UPGRADE NUDGE CARD ── */
.upgrade-nudge {
  background: var(--accent-dim);
  border: 1px solid rgba(37,99,235,0.25);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  animation: fadeUp 0.4s ease forwards;
}
.upgrade-nudge-icon { font-size: 28px; flex-shrink: 0; }
.upgrade-nudge-copy { flex: 1; }
.upgrade-nudge-copy strong {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 3px;
}
.upgrade-nudge-copy span { font-size: 12px; color: var(--text3); }

/* ── AB NUDGE STRIP (post-results) ── */
.ab-nudge-strip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ab-nudge-strip span {
  font-size: 12px;
  color: var(--text3);
}
.ab-nudge-strip strong { color: var(--text2); }

/* ── COPY IMPROVEMENTS ── */
.stat-lbl-with-bench { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 3px; 
}
.bench-ref {
  font-size: 9px;
  color: var(--text3);
  font-style: normal;
}
.bench-good { color: var(--success); }
.bench-avg { color: var(--warn); }
.bench-bad { color: var(--danger); }

/* Thinking */
.thinking-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
}
.thinking-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulseAnim 1.4s infinite;
}
@keyframes pulseAnim {
  0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,0.4); }
  50% { opacity: 0.6; transform: scale(0.85); box-shadow: 0 0 0 6px rgba(37,99,235,0); }
}
.thinking-label { font-size: 12px; color: var(--text2); }
.prog-track {
  height: 2px;
  background: var(--surface3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  border-radius: 2px;
  transition: width 0.4s ease;
}
.prog-counter { font-size: 9px; color: var(--text3); text-align: right; }

/* Population card */
.pop-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 16px;
  animation: fadeUp 0.4s ease forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.pop-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.pop-card-head h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
}
.pop-size-tag {
  background: var(--accent-dim);
  border: 1px solid rgba(0,120,212,0.2);
  color: var(--accent);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 100px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  text-align: center;
}
.stat-big {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
.stat-lbl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }

.dist-section h4 {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.bar-lbl { font-size: 11px; color: var(--text2); width: 130px; flex-shrink: 0; }
.bar-track { flex: 1; height: 5px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; transition: width 1.2s cubic-bezier(0.16,1,0.3,1); }
.bar-pct { font-size: 11px; color: var(--text); width: 36px; text-align: right; }

.verdict-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
  font-size: 12px;
  line-height: 1.8;
  color: #b8b8d0;
  margin-top: 18px;
}
.verdict-box strong { color: var(--accent); font-family: var(--font-body); }

/* Persona result */
.persona-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  overflow: hidden;
  animation: fadeUp 0.4s ease forwards;
  opacity: 0;
}

.pr-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.pr-icon { font-size: 10px; }
.pr-meta { flex: 1; }
.pr-meta h3 { font-family: var(--font-body); font-size: 14px; font-weight: 700; }
.pr-meta p { font-size: 10px; color: var(--text3); margin-top: 2px; }
.pr-ctx { font-size: 9px; color: var(--accent); background: var(--accent-dim); border: 1px solid rgba(37,99,235,0.2); border-radius: 4px; padding: 2px 8px; margin-top: 4px; display: inline-block; }

.score-cluster { display: flex; gap: 14px; }
.sc-item { text-align: center; }
.sc-val {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.sc-lbl { font-size: 8px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }
.c-hi { color: var(--success); }
.c-mid { color: var(--accent); }
.c-lo { color: var(--danger); }

.pr-body {
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pr-col h4 {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.pr-text { font-size: 12px; color: #b8b8d0; line-height: 1.8; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tag {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid;
}
.tag.pro { border-color: rgba(62,255,160,0.3); color: var(--success); background: rgba(62,255,160,0.05); }
.tag.con { border-color: rgba(255,79,110,0.3); color: var(--danger); background: rgba(255,79,110,0.05); }

/* Rewrite box */
.rewrite-box {
  margin-top: 16px;
  background: var(--surface2);
  border: 1px solid rgba(0,120,212,0.15);
  border-radius: var(--r);
  overflow: hidden;
}
.rewrite-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.rewrite-box-head span {
  font-size: 10px;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rewrite-btn {
  background: var(--accent-dim);
  border: 1px solid rgba(0,120,212,0.2);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}
.rewrite-btn:hover { background: rgba(0,120,212,0.2); }
.rewrite-content {
  padding: 14px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text2);
  white-space: pre-wrap;
  min-height: 40px;
}
.rewrite-loading { color: var(--text3); font-style: italic; }

/* ============================================================
   TOOL LAYOUT: single column, rep-first
============================================================ */
.tool-layout {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 80px;
}

/* Input card */
.tool-input-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.tool-input-card:focus-within { border-color: var(--border2); }

.tool-ta {
  width: 100%;
  min-height: 180px;
  max-height: 400px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.8;
  padding: 20px;
  resize: vertical;
  display: block;
}
.tool-ta::placeholder { color: var(--text3); }

.tool-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}

/* Role selector */
.role-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.role-label {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.role-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
}
.role-chip:hover { border-color: var(--border2); color: var(--text); }
.role-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.tool-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Run button, primary action, always visible */
.tool-run-btn {
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.tool-run-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,120,212,0.3); }

/* ── VERDICT STRIP: big, fast, unambiguous ── */
.verdict-strip {
  border-radius: var(--r-lg);
  padding: 24px 24px 24px 28px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  animation: fadeUp 0.25s ease forwards;
}
.verdict-strip.send { background: rgba(62,255,160,0.07); border: 2px solid rgba(62,255,160,0.4); border-left: 3px solid var(--success); }
.verdict-strip.rewrite { background: rgba(255,179,71,0.07); border: 2px solid rgba(255,179,71,0.4); border-left: 3px solid var(--warn); }
.verdict-strip.dont-send { background: rgba(255,79,110,0.07); border: 2px solid rgba(255,79,110,0.4); border-left: 3px solid var(--danger); }

.vs-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.vs-body { flex: 1; }
.vs-decision {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
}
.verdict-strip.send .vs-decision { color: var(--success); }
.verdict-strip.rewrite .vs-decision { color: var(--warn); }
.verdict-strip.dont-send .vs-decision { color: var(--danger); }
.vs-reason {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  font-family: var(--font-body);
}
.vs-reason strong { color: var(--text); }

/* ── FIXES LIST: the core value, no noise ── */
.kill-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 12px;
  animation: fadeUp 0.3s ease forwards;
  opacity: 0;
}
.kill-list-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kill-list-head h3 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.kill-list-head span { font-size: 11px; color: var(--text3); }

.kill-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.kill-item:last-child { border: none; }

.kill-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}
.kill-item.critical .kill-num { background: rgba(255,79,110,0.15); color: var(--danger); }
.kill-item.important .kill-num { background: rgba(255,179,71,0.15); color: var(--warn); }
.kill-item.minor .kill-num { background: var(--surface3); color: var(--text3); }

.kill-text { flex: 1; }
.kill-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--text);
}
.kill-item.critical .kill-title { color: var(--danger); }
.kill-item.important .kill-title { color: var(--warn); }
.kill-desc {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.65;
}
.kill-fix {
  font-size: 11px;
  color: var(--success);
  margin-top: 5px;
  line-height: 1.5;
  font-family: var(--font-body);
  font-weight: 500;
}

/* ── REWRITE PANEL: before/after, centre stage ── */
.rewrite-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: visible;
  margin-bottom: 12px;
  animation: fadeUp 0.35s ease forwards;
  opacity: 0;
}
.rp-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rp-head h3 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
}
.rp-head-right { display: flex; align-items: center; gap: 8px; }

/* Rewrite variant tabs, dynamic grid */
.rp-tabs {
  display: grid;
  border-bottom: 1px solid var(--border);
}

/* Why box */
.rw-why-box {
  margin-top: 14px;
  padding: 11px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rw-why-label {
  font-size: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
}
.rw-why-text {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
}
.rw-stats {
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
}

/* Subject row inside variant */
.rw-subject-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.rw-subject-label {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-body);
  font-weight: 700;
  flex-shrink: 0;
}
.rw-subject-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.rp-tab {
  flex: 1;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  text-align: left;
}
.rp-tab:first-child { border-right: 1px solid var(--border); }
.rp-tab.active { color: var(--text); border-bottom-color: var(--accent); background: rgba(0,120,212,0.03); }

.rp-content {
  display: none;
  padding: 18px 20px;
}
.rp-content.active { display: block; }

.rp-email-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.85;
  color: var(--text2);
  white-space: pre-wrap;
}
.rp-email-text.loading {
  color: var(--text3);
  font-style: italic;
  font-family: var(--font-body);
}

/* Changed lines highlight */
.rp-changed {
  background: rgba(0,120,212,0.1);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
  margin-left: -10px;
  border-radius: 0 4px 4px 0;
  display: block;
}

.rp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  gap: 8px;
}
.rp-footer-left { font-size: 11px; color: var(--text3); }
.rp-footer-left strong { color: var(--accent); }

.rp-copy-btn {
  background: var(--accent-dim);
  border: 1px solid rgba(0,120,212,0.25);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.rp-copy-btn:hover { background: rgba(0,120,212,0.18); }

.rp-ab-btn {
  background: var(--surface3);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.rp-ab-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── UPGRADE GATE ── */
.upgrade-gate {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  padding: 28px;
  text-align: center;
  margin-top: 16px;
}
.upgrade-gate h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}
.upgrade-gate p { font-size: 13px; color: var(--text2); line-height: 1.7; margin-bottom: 20px; }
.upgrade-features {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.uf-item { font-size: 12px; color: var(--text2); }
.uf-item strong { font-family: var(--font-body); font-weight: 800; color: var(--text); display: block; font-size: 18px; }

/* ── LOADING CARD with spinner + elapsed timer ── */
.loading-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 12px;
}
.lc-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.lc-spinner {
  width: 36px; height: 36px;
  flex-shrink: 0;
  position: relative;
}
.lc-ring {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid var(--border2);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
  position: absolute;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ThinkingStream ───────────────────────────────────── */
#thinkingStreamEl {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  min-height: 80px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#thinkingStreamEl.ts-hiding {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.ts-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ts-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: ts-pulse 1.4s ease-in-out infinite;
}
.ts-label {
  font-size: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.ts-lines { display: flex; flex-direction: column; gap: 0; }
.ts-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text3);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ts-line.ts-visible { opacity: 1; transform: translateY(0); }
.ts-line.ts-current { color: var(--text2); }
.ts-chevron { color: var(--accent); flex-shrink: 0; }
.ts-cursor {
  display: inline-block;
  width: 6px;
  height: 11px;
  background: var(--accent);
  margin-left: 10px;
  margin-top: 14px;
  border-radius: 1px;
  animation: ts-blink 1s step-end infinite;
}
@keyframes ts-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.8)} }
@keyframes ts-blink { 0%,100%{opacity:1} 50%{opacity:0} }

.lc-body { flex: 1; }
.lc-stage {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  transition: opacity 0.3s;
}
.lc-timer {
  font-size: 11px;
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
}

/* Keep old thinking-card as alias for error states */
.thinking-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 20px; }
.thinking-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulseAnim 1.4s infinite; }
@keyframes pulseAnim {
  0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(37,99,235,0.4); }
  50% { opacity:0.6; transform:scale(0.85); box-shadow:0 0 0 6px rgba(37,99,235,0); }
}
.thinking-label { font-size: 13px; color: var(--text2); font-family: var(--font-body); font-weight: 600; }
.prog-track { height: 3px; background: var(--surface3); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.prog-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent)); border-radius: 2px; transition: width 0.5s ease; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SUBJECT ANALYSER PANEL
============================================================ */
.subject-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; animation:fadeUp 0.25s ease forwards; }
.subject-panel-head { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--border); }
.subject-panel-head h3 { font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.subject-score-badge { display:flex; align-items:center; gap:8px; }
.subject-score-val { font-family:var(--font-body); font-size:22px; font-weight:800; line-height:1; }
.subject-score-lbl { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; }
.subject-preview { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.subject-preview-label { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; white-space:nowrap; padding-top:3px; flex-shrink:0; }
.subject-preview-text { font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--text); line-height:1.4; flex:1; min-width:200px; }
.subject-preview-meta { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-left:auto; }
.subj-pill { font-size:10px; padding:3px 8px; border-radius:4px; border:1px solid; white-space:nowrap; font-family:var(--font-body); font-weight:600; }
.subj-pill-ok   { border-color:rgba(62,255,160,0.3);  color:var(--success); background:rgba(62,255,160,0.06);  }
.subj-pill-warn { border-color:rgba(255,179,71,0.3);  color:var(--warn);    background:rgba(255,179,71,0.06);  }
.subj-pill-bad  { border-color:rgba(255,79,110,0.3);  color:var(--danger);  background:rgba(255,79,110,0.06);  }
.subject-metrics { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--border); }
.subj-metric { padding:12px 10px; border-right:1px solid var(--border); text-align:center; }
.subj-metric:last-child { border-right:none; }
.subj-metric-val { font-family:var(--font-body); font-size:18px; font-weight:800; line-height:1; margin-bottom:3px; }
.subj-metric-lbl { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; }
.subj-metric-bench { font-size:9px; color:var(--text3); margin-top:2px; }
.subject-checks { padding:4px 0; }
.subject-check-row { display:flex; align-items:flex-start; gap:10px; padding:9px 18px; border-bottom:1px solid var(--border); transition:background 0.1s; }
.subject-check-row:last-child { border:none; }
.subject-check-row:hover { background:var(--surface2); }
.sc-icon { font-size:13px; flex-shrink:0; margin-top:1px; width:16px; text-align:center; }
.sc-body { flex:1; }
.sc-title { font-family:var(--font-body); font-size:12px; font-weight:700; margin-bottom:2px; color:var(--text); }
.sc-desc  { font-size:11px; color:var(--text2); line-height:1.55; }
.sc-fix   { font-size:11px; color:var(--success); margin-top:3px; }
.open-rate-bar-wrap { padding:14px 18px; border-top:1px solid var(--border); }
.open-rate-bar-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:10px; color:var(--text3); }
.open-rate-bar-label strong { font-family:var(--font-body); font-size:13px; font-weight:800; color:var(--text); }
.open-rate-bar-track { height:6px; background:var(--surface3); border-radius:3px; overflow:hidden; position:relative; }
.open-rate-bar-fill { height:100%; border-radius:3px; transition:width 0.6s cubic-bezier(0.16,1,0.3,1); }
.open-rate-benchmarks { display:flex; justify-content:space-between; margin-top:5px; font-size:9px; color:var(--text3); }
.alignment-section { padding:13px 18px; border-top:1px solid var(--border); }
.alignment-label { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.alignment-row { display:flex; align-items:flex-start; gap:10px; margin-bottom:5px; }
.alignment-tag { font-size:10px; padding:3px 8px; border-radius:4px; border:1px solid; font-family:var(--font-body); font-weight:600; flex-shrink:0; margin-top:1px; }
.alignment-text { font-size:11px; color:var(--text2); line-height:1.55; }

.ab-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.ab-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.ab-panel-head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ab-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  width: 26px; height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-label-a { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(0,120,212,0.3); }
.ab-label-b { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(37,99,235,0.3); }

.ab-panel h4 { font-family: var(--font-body); font-size: 12px; font-weight: 700; }

/* AB email draft wrapper, matches Analyse panel look */
.ab-draft-panel {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 4px;
}
.ab-draft-subject-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.ab-draft-subject-label {
  font-size: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
  padding: 0 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ab-draft-subject-input {
  flex: 1;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 0 14px 0 0;
  outline: none;
}
.ab-draft-subject-input::placeholder { color: var(--text3); font-weight: 400; }

.ab-ta {
  width: 100%;
  min-height: 160px;
  height: auto;
  overflow: hidden;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.8;
  padding: 16px;
  resize: none;
  display: block;
}
.ab-ta::placeholder { color: var(--text3); }

/* AB controls */
.ab-controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ab-persona-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}
.ab-persona-row::-webkit-scrollbar { width: 4px; }
.ab-persona-row::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.ab-persona-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.ab-persona-row::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

.ab-persona-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ab-persona-chip:hover { border-color: var(--border2); }
.ab-persona-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* AB Results */
.ab-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ab-result-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.ab-rhead {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ab-winner-badge {
  background: var(--accent-dim);
  border: 1px solid rgba(0,120,212,0.25);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ab-score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
.ab-score-cell {
  background: var(--surface);
  padding: 16px;
  text-align: center;
}
.ab-score-val {
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 800;
}
.ab-score-lbl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }

.ab-insights { padding: 16px 18px; }
.ab-insights h4 { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.ab-insights p { font-size: 12px; color: #b8b8d0; line-height: 1.8; }

/* ============================================================
   EMPTY STATE
============================================================ */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text3);
}
.empty-icon { font-size: 48px; opacity: 0.3; margin-bottom: 16px; }
.empty-state h3 { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--text2); margin-bottom: 8px; }
.empty-state p { font-size: 12px; line-height: 1.7; }

/* ============================================================
   UTILS
============================================================ */
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; }
.flex { display: flex; }
.gap8 { gap: 8px; }
.items-center { align-items: center; }

/* ============================================================
   UPGRADED COMPONENT STYLES
============================================================ */

/* Usage chip */
.usage-chip {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 10px;
  color: var(--text2);
  cursor: default;
}
.usage-chip.low { border-color: rgba(255,179,71,0.4); color: var(--warn); }
.usage-chip.out { border-color: rgba(255,79,110,0.4); color: var(--danger); }

/* API key banner */
.api-banner {
  background: rgba(37,99,235,0.08);
  border-bottom: 1px solid rgba(37,99,235,0.2);
  padding: 10px 32px;
}
.api-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}
.api-banner-icon { font-size: 14px; }
.api-banner-text { font-size: 12px; color: var(--text2); flex: 1; }
.api-key-input {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 6px 12px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  outline: none;
  width: 220px;
}
.api-key-input:focus { border-color: var(--accent); }
.api-banner-link { font-size: 11px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.api-banner-link:hover { text-decoration: underline; }

/* Smart defaults bar */
.smart-default-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.qsel-btn {
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 10px;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.15s;
}
.qsel-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Email footer */
.email-ta-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
}
.eta-hint { font-size: 10px; color: var(--text3); }
.load-example-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 10px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  padding: 0;
  transition: opacity 0.2s;
}
.load-example-btn:hover { opacity: 0.7; }

/* Run hint */
.run-hint {
  text-align: center;
  font-size: 11px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text3);
  padding: 6px 14px 12px;
  transition: opacity 0.2s, color 0.2s;
}

/* ============================================================
   VERDICT CARD: the headline result
============================================================ */
.verdict-card {
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 16px;
  animation: fadeUp 0.3s ease forwards;
  position: relative;
  overflow: hidden;
}
.verdict-card.send {
  background: linear-gradient(135deg, rgba(62,255,160,0.06) 0%, var(--surface) 60%);
  border: 2px solid rgba(62,255,160,0.35);
}
.verdict-card.rewrite {
  background: linear-gradient(135deg, rgba(255,179,71,0.06) 0%, var(--surface) 60%);
  border: 2px solid rgba(255,179,71,0.35);
}
.verdict-card.dont-send {
  background: linear-gradient(135deg, rgba(255,79,110,0.06) 0%, var(--surface) 60%);
  border: 2px solid rgba(255,79,110,0.35);
}
.verdict-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
.verdict-badge {
  flex-shrink: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.verdict-card.send .verdict-badge { background: rgba(62,255,160,0.12); color: var(--success); border: 1px solid rgba(62,255,160,0.3); }
.verdict-card.rewrite .verdict-badge { background: rgba(255,179,71,0.12); color: var(--warn); border: 1px solid rgba(255,179,71,0.3); }
.verdict-card.dont-send .verdict-badge { background: rgba(255,79,110,0.12); color: var(--danger); border: 1px solid rgba(255,79,110,0.3); }

.verdict-summary { flex: 1; }
.verdict-summary h2 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.3;
}
.verdict-summary p { font-size: 13px; color: var(--text2); line-height: 1.7; }

.verdict-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.vm-item { text-align: center; }
.vm-val {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 800;
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.vm-lbl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }
.vm-bench { font-size: 9px; color: var(--text3); margin-top: 3px; }
.vm-bench .good { color: var(--success); }
.vm-bench .avg { color: var(--warn); }
.vm-bench .poor { color: var(--danger); }

/* Benchmark bar */
.bench-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface2);
  border-radius: 8px;
  margin-top: 12px;
  font-size: 11px;
}
.bench-row .bench-icon { font-size: 14px; }
.bench-row .bench-text { color: var(--text2); flex: 1; }
.bench-row .bench-text strong { color: var(--text); font-family: var(--font-body); }

/* Priority fixes list */
.fixes-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
  animation: fadeUp 0.35s ease forwards;
  opacity: 0;
}
.fixes-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.fixes-head h3 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
}
.fix-list { padding: 4px 0; }
.fix-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.fix-item:last-child { border: none; }
.fix-item:hover { background: var(--surface2); }
.fix-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface3);
  color: var(--text3);
  font-size: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.fix-item.critical .fix-num { background: rgba(255,79,110,0.15); color: var(--danger); }
.fix-item.important .fix-num { background: rgba(255,179,71,0.15); color: var(--warn); }
.fix-content { flex: 1; }
.fix-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
}
.fix-desc { font-size: 11px; color: var(--text2); line-height: 1.6; }
.fix-severity {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}
.fix-item.critical .fix-severity { background: rgba(255,79,110,0.1); color: var(--danger); }
.fix-item.important .fix-severity { background: rgba(255,179,71,0.1); color: var(--warn); }
.fix-item.minor .fix-severity { background: var(--surface3); color: var(--text3); }

/* Rewrite CTA: primary now */
.rewrite-cta-card {
  background: var(--surface);
  border: 1px solid rgba(0,120,212,0.2);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 16px;
  animation: fadeUp 0.4s ease forwards;
  opacity: 0;
}

.rcta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.rcta-head h3 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
}
.rcta-head p { font-size: 11px; color: var(--text3); margin-top: 2px; }
.rcta-persona-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.rcta-persona-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.rcta-persona-chip:hover { border-color: var(--accent); color: var(--accent); }
.rcta-persona-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.rewrite-output {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  min-height: 60px;
  position: relative;
}
.rewrite-output-body {
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--text2);
  white-space: pre-wrap;
}
.rewrite-output-body.placeholder { color: var(--text3); font-style: italic; }
.rewrite-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.rewrite-copy-btn {
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.15s;
}
.rewrite-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.rewrite-ab-btn {
  background: var(--accent-dim);
  border: 1px solid rgba(37,99,235,0.25);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.15s;
}
.rewrite-ab-btn:hover { background: rgba(37,99,235,0.2); }

/* Persona deep-dive (collapsible) */
.persona-accordion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
  animation: fadeUp 0.45s ease forwards;
  opacity: 0;
}
.pa-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.pa-head:hover { background: var(--surface2); }
.pa-icon { font-size: 20px; }
.pa-meta { flex: 1; }
.pa-meta h4 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
}
.pa-meta p { font-size: 10px; color: var(--text3); margin-top: 1px; }
.pa-scores { display: flex; gap: 14px; }
.pa-score { text-align: center; }
.pa-score .v {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 800;
}
.pa-score .l { font-size: 8px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }
.pa-chevron { color: var(--text3); font-size: 11px; transition: transform 0.2s; }
.pa-head.open .pa-chevron { transform: rotate(180deg); }

.pa-body {
  border-top: 1px solid var(--border);
  display: none;
  padding: 18px 20px;
  display: none;
}
.pa-body.open { display: block; }
.pa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pa-col h5 {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 7px;
}
.pa-impression { font-size: 12px; color: var(--text2); line-height: 1.75; margin-bottom: 12px; }
.pa-objection { font-size: 12px; color: var(--danger); line-height: 1.75; }

/* Upgrade gate */
.upgrade-gate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  text-align: center;
  margin-top: 8px;
}
.upgrade-gate h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}
.upgrade-gate p { font-size: 12px; color: var(--text2); margin-bottom: 20px; line-height: 1.7; }
.upgrade-features {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.uf-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 11px;
  color: var(--text2);
}
.uf-item strong { color: var(--accent); font-family: var(--font-body); }

/* AB intro bar */
.ab-intro-bar {
  background: var(--accent-dim);
  border: 1px solid rgba(37,99,235,0.15);
  border-radius: var(--r);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--text2);
}

/* Light mode overrides for new components */

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ============================================================
   SEQUENCE SIMULATOR
============================================================ */
.seq-layout { display:grid; grid-template-columns:1fr 280px; gap:20px; align-items:start; }
.seq-left  { display:flex; flex-direction:column; }
.seq-right { display:flex; flex-direction:column; }

.seq-step {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.seq-step:last-child { border-bottom: none; }

.seq-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.seq-step-head:hover { background: var(--surface2); }

.seq-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface3);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
  color: var(--text2);
}
.seq-step-num.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

.seq-step-meta { flex: 1; }
.seq-step-title { font-family: var(--font-body); font-size: 12px; font-weight: 700; }
.seq-step-sub   { font-size: 10px; color: var(--text3); margin-top: 2px; }

.seq-step-badge {
  font-size: 10px; padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid var(--border2);
  color: var(--text3);
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
}
.seq-step-badge.has-content { border-color:rgba(0,120,212,0.3); color:var(--accent); background:var(--accent-dim); }

.seq-step-body { display: none; padding: 0 16px 14px; }
.seq-step-body.open { display: block; }

.seq-step-type-row {
  display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}

.seq-remove-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text3); font-size: 14px; padding: 2px 4px;
  border-radius: 4px; transition: color 0.15s;
  flex-shrink: 0;
}
.seq-remove-btn:hover { color: var(--danger); }

/* Sequence results waterfall */
.seq-results { margin-top: 0; }

.seq-funnel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.seq-funnel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.seq-funnel-head h3 { font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }

.seq-step-result {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.seq-step-result:last-child { border-bottom: none; }
.seq-step-result:hover { background: var(--surface2); }

.seq-result-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}

.seq-result-body { flex: 1; }
.seq-result-title { font-family: var(--font-body); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.seq-result-sub   { font-size: 10px; color: var(--text3); }
.seq-result-bar-wrap { margin-top: 6px; }
.seq-result-bar-track { height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
.seq-result-bar-fill  { height: 100%; border-radius: 2px; transition: width 0.7s cubic-bezier(0.16,1,0.3,1); }

.seq-result-stats {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  flex-shrink: 0;
}
.seq-result-stat-val {
  font-family: var(--font-body); font-size: 18px; font-weight: 800; line-height: 1;
}
.seq-result-stat-lbl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }

.seq-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--border);
}
.seq-summary-cell {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.seq-summary-cell:last-child { border-right: none; }
.seq-summary-val { font-family: var(--font-body); font-size: 22px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.seq-summary-lbl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }
.seq-summary-sub { font-size: 9px; color: var(--text3); margin-top: 2px; }

/* ============================================================
   TEMPLATE LIBRARY
============================================================ */
.tpl-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}
.tpl-save-panel { overflow: hidden; position: sticky; top: 70px; }
.tpl-library { display: flex; flex-direction: column; }

.tpl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 12px;
  transition: border-color 0.2s, transform 0.15s;
  animation: fadeUp 0.25s ease forwards;
}
.tpl-card:hover { border-color: var(--border2); transform: translateY(-1px); }

.tpl-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.tpl-card-name { font-family: var(--font-body); font-size: 13px; font-weight: 700; flex: 1; }
.tpl-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tpl-action-btn {
  font-size: 11px; padding: 4px 10px;
  border-radius: 6px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text2);
  cursor: pointer; font-family: var(--font-body);
  font-weight: 600; transition: all 0.15s; white-space: nowrap;
}
.tpl-action-btn:hover { border-color: var(--accent); color: var(--text); }
.tpl-action-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.tpl-action-btn.primary { background: var(--accent-dim); border-color: rgba(0,120,212,0.3); color: var(--accent); }
.tpl-action-btn.copy-btn { background: var(--surface2); }
.tpl-action-btn.copy-btn.copied { border-color: var(--success); color: var(--success); }

/* Expandable email body */
.tpl-body-wrap { display: none; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--surface2); }
.tpl-body-wrap.open { display: block; }
.tpl-body-text {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text2); line-height: 1.8; white-space: pre-wrap;
  word-break: break-word;
}
.tpl-subject-line {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--accent); margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Quick personalise bar */
.tpl-personalise-bar {
  padding: 10px 16px; border-top: 1px solid var(--border);
  display: none; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--surface2);
}
.tpl-personalise-bar.open { display: flex; }
.tpl-personalise-input {
  flex: 1; min-width: 140px; height: 30px;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 6px; color: var(--text); font-size: 11px;
  padding: 0 10px; font-family: 'JetBrains Mono', monospace;
  outline: none;
}
.tpl-personalise-input:focus { border-color: var(--accent); }

/* AI tips strip */
.tpl-tips-strip {
  padding: 8px 16px; border-top: 1px solid var(--border);
  display: none; font-size: 10px; color: var(--text3); line-height: 1.6;
}
.tpl-tips-strip.open { display: block; }
.tpl-tips-strip strong { color: var(--accent); }

.tpl-card-meta {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.tpl-meta-tag {
  font-size: 10px; padding: 2px 8px;
  border-radius: 100px; border: 1px solid var(--border2);
  color: var(--text3); background: var(--surface2);
  font-family: var(--font-body); font-weight: 600;
}

.tpl-card-scores {
  display: grid; grid-template-columns: repeat(3,1fr);
  border-bottom: 1px solid var(--border);
}
.tpl-score-cell { padding: 10px 12px; border-right: 1px solid var(--border); text-align: center; }
.tpl-score-cell:last-child { border-right: none; }
.tpl-score-val { font-family: var(--font-body); font-size: 16px; font-weight: 800; line-height:1; }
.tpl-score-lbl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }

.tpl-card-preview {
  padding: 10px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text3);
  line-height: 1.6;
  max-height: 60px;
  overflow: hidden;
  position: relative;
}
.tpl-card-preview::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 24px;
  background: linear-gradient(transparent, var(--surface));
}

.tpl-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text3);
  font-family: var(--font-body);
}
.tpl-empty-icon { font-size: 32px; margin-bottom: 12px; }
.tpl-empty-title { font-size: 14px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }
.tpl-empty-sub { font-size: 12px; line-height: 1.6; }

/* ============================================================
   ONBOARDING TOOLTIP SYSTEM
   ============================================================ */
.ob-overlay {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
  transition: opacity 0.3s;
}
.ob-overlay.active { pointer-events: auto; }

/* Dark backdrop with spotlight hole punched out via box-shadow */
.ob-spotlight {
  position: fixed;
  border-radius: 10px;
  z-index: 9001;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  outline: 2px solid rgba(0,120,212,0.6);
  outline-offset: 2px;
}

/* Tooltip bubble */
.ob-tooltip {
  position: fixed;
  z-index: 9002;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 18px 20px;
  width: 300px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  font-family: var(--font-body);
}
.ob-tooltip-step {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--accent); margin-bottom: 6px;
}
.ob-tooltip-title {
  font-size: 15px; font-weight: 800; color: var(--text);
  margin-bottom: 6px; line-height: 1.3;
}
.ob-tooltip-body {
  font-size: 12px; color: var(--text2); line-height: 1.7;
  margin-bottom: 16px;
}
.ob-tooltip-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ob-btn-skip {
  background: none; border: none; color: var(--text3);
  font-size: 11px; cursor: pointer; font-family: var(--font-body);
  padding: 0; transition: color 0.15s;
}
.ob-btn-skip:hover { color: var(--text2); }
.ob-btn-next {
  background: var(--accent); color: #ffffff;
  border: none; border-radius: 8px; padding: 8px 18px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: var(--font-body); transition: opacity 0.15s;
  white-space: nowrap;
}
.ob-btn-next:hover { opacity: 0.85; }
.ob-dots {
  display: flex; gap: 5px; align-items: center;
}
.ob-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border2); transition: background 0.2s;
}
.ob-dot.active { background: var(--accent); width: 14px; border-radius: 3px; }

/* Arrow pointer on tooltip */
.ob-tooltip::before {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  background: var(--surface);
  border: 1px solid var(--border2);
  transform: rotate(45deg);
}
.ob-tooltip.arrow-top::before    { top: -6px; left: 24px; border-right: none; border-bottom: none; }
.ob-tooltip.arrow-bottom::before { bottom: -6px; left: 24px; border-left: none; border-top: none; }
.ob-tooltip.arrow-left::before   { left: -6px; top: 20px; border-right: none; border-top: none; }
.ob-tooltip.arrow-right::before  { right: -6px; top: 20px; border-left: none; border-bottom: none; }


/* ============================================================
   SCORE TOOLTIPS
   ============================================================ */
.score-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}
.score-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface3);
  border: 1px solid var(--border2);
  font-size: 9px;
  color: var(--text3);
  font-weight: 700;
  margin-left: 5px;
  flex-shrink: 0;
  font-family: var(--font-body);
  transition: background 0.15s, border-color 0.15s;
}
.score-tip:hover .score-tip-icon {
  background: var(--accent-dim);
  border-color: rgba(37,99,235,0.4);
  color: var(--accent);
}
.score-tip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text2);
  line-height: 1.6;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  transform: translateX(-50%) translateY(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  white-space: normal;
  text-align: left;
}
.score-tip-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border2);
}
.score-tip-bubble::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--surface);
  z-index: 1;
}
.score-tip:hover .score-tip-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.score-tip-bubble strong {
  display: block;
  color: var(--text);
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 3px;
}
.score-tip-range {
  display: flex;
  gap: 6px;
  margin-top: 7px;
  font-size: 10px;
}
.score-tip-range span {
  flex: 1;
  text-align: center;
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 600;
}
.score-tip-range .tip-lo  { background: rgba(255,79,110,0.12); color: var(--danger); }
.score-tip-range .tip-mid { background: rgba(0,120,212,0.12); color: var(--accent); }
.score-tip-range .tip-hi  { background: rgba(62,255,160,0.1); color: var(--success); }


/* dim bars get tooltip wrapper */
.dim-bar-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.dim-bar-label-wrap {
  width: 100px; flex-shrink: 0;
  display: flex; align-items: center;
}
.dim-bar-label-text {
  font-size: 10px; color: var(--text3);
  font-family: var(--font-body);
}

/* AI rewrite loading state */
.rw-ai-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  color: var(--text3); font-size: 12px;
  font-family: var(--font-body);
}
.rw-ai-spinner { width:14px; height:14px; border:2px solid var(--border2); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================
   API KEY MODE INDICATOR BAR
============================================================ */
.api-mode-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 32px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-family: var(--font-body);
}
.api-mode-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.api-mode-text { color: var(--text2); flex: 1; }
.api-mode-action {
  font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 6px;
  border: 1px solid var(--border2);
  background: transparent; color: var(--accent);
  cursor: pointer; transition: all 0.15s;
  font-family: var(--font-body);
}
.api-mode-action:hover { border-color: var(--accent); background: var(--accent-dim); }

/* ============================================================
   CONTEXT INPUT BOX
============================================================ */
.context-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 0;
  transition: border-color 0.2s;
}
.context-box:focus-within { border-color: var(--accent); }
.context-box-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.context-box-head:hover { background: var(--surface3); }
.context-box-label {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text3); flex: 1;
}
.context-box-hint { font-size: 10px; color: var(--text3); }
.context-box-body { display: none; }
.context-box-body.open { display: block; }
.context-ta {
  width: 100%; min-height: 64px;
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--font-body);
  font-size: 12px; line-height: 1.6; padding: 10px 14px;
  resize: none; overflow: hidden;
}
.context-ta::placeholder { color: var(--text3); }

/* ============================================================
   AUTO-DETECT EMAIL TYPE SUGGESTION
============================================================ */
.type-detect-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: var(--accent-dim);
  border-bottom: 1px solid rgba(37,99,235,0.15);
  font-size: 11px;
  font-family: var(--font-body);
  animation: fadeUp 0.2s ease forwards;
}
.type-detect-text { flex: 1; color: var(--text2); }
.type-detect-text strong { color: var(--text); }
.type-detect-btn {
  font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 5px;
  border: 1px solid var(--accent);
  background: var(--accent-dim); color: var(--accent);
  cursor: pointer; white-space: nowrap;
}
.type-detect-btn:hover { background: var(--accent); color: #fff; }

/* ============================================================
   SCORE EXPLANATION PANEL
============================================================ */
.score-explain {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
  animation: fadeUp 0.2s ease forwards;
}
.score-explain-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid var(--border);
}
.score-explain-head h3 {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
}
.score-explain-rows { padding: 8px 0; }
.score-explain-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.score-explain-row:last-child { border: none; }
.score-explain-row:hover { background: var(--surface2); }
.se-dim-name {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  width: 110px; flex-shrink: 0; color: var(--text2);
  padding-top: 1px;
}
.se-bar-wrap { flex: 1; }
.se-bar-track { height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; margin-bottom: 5px; }
.se-bar-fill  { height: 100%; border-radius: 3px; transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
.se-reason { font-size: 11px; color: var(--text2); line-height: 1.5; }
.se-fix    { font-size: 11px; color: var(--success); margin-top: 3px; }
.se-score  {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 800; width: 30px;
  text-align: right; flex-shrink: 0;
}

/* ============================================================
   SEND TIME CARD
============================================================ */
.send-time-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.send-time-grid {
  display: grid; grid-template-columns: repeat(7,1fr);
  border-bottom: 1px solid var(--border);
}
.stg-day {
  padding: 10px 4px; text-align: center;
  border-right: 1px solid var(--border);
}
.stg-day:last-child { border-right: none; }
.stg-day-name { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; font-family: var(--font-body); font-weight: 700; }
.stg-day-bar { height: 40px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 4px; }
.stg-day-fill { width: 14px; border-radius: 3px 3px 0 0; transition: height 0.5s cubic-bezier(0.16,1,0.3,1); }
.stg-day-val  { font-size: 9px; color: var(--text3); font-family: var(--font-body); }
.stg-day.best .stg-day-name { color: var(--accent); }
.stg-day.best .stg-day-val  { color: var(--accent); font-weight: 700; }

.send-time-hours {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  flex-wrap: wrap;
}
.sth-slot {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 6px;
  border: 1px solid var(--border2);
  font-size: 11px; font-family: var(--font-body);
  font-weight: 600; color: var(--text2);
}
.sth-slot.best { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.sth-slot.good { border-color: rgba(0,120,212,0.2); color: var(--text2); }
.sth-slot.poor { color: var(--text3); }

/* ============================================================
   SIMULATION HISTORY
============================================================ */
.history-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 6px;
  border: 1px solid var(--border2); background: var(--surface2);
  color: var(--text3); font-size: 10px;
  font-family: var(--font-body); font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.history-btn:hover { border-color: var(--accent); color: var(--text); }

.history-drawer {
  position: fixed; top: 0; right: -380px;
  width: 360px; height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 500; transition: right 0.3s cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.25);
}
.history-drawer.open { right: 0; }
.history-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.history-drawer-head h3 {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
}
.history-close {
  background: none; border: none; cursor: pointer;
  color: var(--text3); font-size: 18px; padding: 2px 6px;
  border-radius: 4px; transition: color 0.15s;
}
.history-close:hover { color: var(--text); }
.history-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.history-item {
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.1s;
}
.history-item:hover { background: var(--surface2); }
.history-item:last-child { border: none; }
.hi-title { font-family: var(--font-body); font-size: 12px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hi-meta  { font-size: 10px; color: var(--text3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Settings Panel ── */
.settings-panel {
  position: fixed; top: 0; right: -400px;
  width: 380px; height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 600; transition: right 0.3s cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.3);
}
.settings-panel.open { right: 0; }
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.settings-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.settings-section { margin-bottom: 20px; }
.settings-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-family: var(--font-body); }
.settings-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.settings-usage-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.settings-usage-item { padding: 8px 0; }
.settings-usage-num { font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 4px; }
.settings-usage-lbl { font-size: 10px; color: var(--text3); font-weight: 500; }
.settings-pref-row { display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 480px) { .settings-panel { width: 100%; right: -100%; } }

/* Prompt 25: light-mode contrast fixes for the Settings panel (was 10 WCAG AA failures). */
#settingsPanel { color: #1A1614; }
#settingsPanel h1,
#settingsPanel h2,
#settingsPanel h3,
#settingsPanel .settings-title { color: #1A1614 !important; }
#settingsPanel .settings-label,
#settingsPanel .settings-usage-lbl,
#settingsPanel [class*="muted"],
#settingsPanel [class*="subtle"] { color: rgba(26, 22, 20, 0.65) !important; }
#settingsPanel .settings-usage-num { color: #1A1614 !important; }

/* ── Paywall CTA Button ── */
.pw-cta-btn {
  width: 100%;
  padding: 16px 20px;
  background: #2448FF;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.3s;
  box-shadow:
    0 4px 24px rgba(36,72,255,0.4),
    0 0 0 1px rgba(36,72,255,0.15) inset;
  animation: pwBtnPulse 2.5s ease-in-out infinite;
}
.pw-cta-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: pwShimmer 2.5s ease-in-out infinite;
}
.pw-cta-btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent, rgba(255,255,255,0.08));
  pointer-events: none;
}
@keyframes pwShimmer {
  0% { left: -100%; }
  60% { left: 100%; }
  100% { left: 100%; }
}
@keyframes pwBtnPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(36,72,255,0.4), 0 0 0 1px rgba(36,72,255,0.15) inset; }
  50% { box-shadow: 0 4px 32px rgba(36,72,255,0.55), 0 0 60px rgba(36,72,255,0.1), 0 0 0 1px rgba(36,72,255,0.15) inset; }
}
.pw-cta-btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 8px 40px rgba(36,72,255,0.5),
    0 0 80px rgba(36,72,255,0.15),
    0 0 0 1px rgba(36,72,255,0.2) inset;
  animation: none;
}
.pw-cta-btn:active {
  transform: translateY(0) scale(0.98);
}
.hi-score { font-family: var(--font-body); font-weight: 700; }
.hi-empty { text-align: center; padding: 40px 20px; color: var(--text3); font-size: 12px; }

/* ============================================================
   RESPONSIVE: MOBILE FIRST
============================================================ */
/* ════════════════════════════════════════════════════════
   MOBILE NAV: LANDING PAGE HAMBURGER
════════════════════════════════════════════════════════ */
.r-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 8px;
  flex-shrink: 0; margin-left: auto;
  transition: background 0.15s;
}
.r-nav-toggle:hover { background: rgba(255,255,255,0.07); }
.r-nav-toggle span {
  display: block; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
  transform-origin: center;
}
.r-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.r-nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.r-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.r-nav-mobile-menu {
  display: none;
  flex-direction: column;
  background: rgba(8,8,8,0.98);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 8px 20px 20px;
  gap: 0;
  /* slide-down animation */
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), padding 0.3s;
}
.r-nav-mobile-menu.open {
  display: flex;
  max-height: 400px;
  padding: 8px 20px 20px;
}
.r-nav-mobile-menu a {
  display: block;
  padding: 14px 4px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: color 0.15s;
}
.r-nav-mobile-menu a:hover { color: #fff; }
.r-nav-mobile-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 8px 0; }
.r-nav-mobile-actions {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 12px;
}
.r-mobile-full-btn { width: 100% !important; justify-content: center !important; padding: 13px 20px !important; font-size: 15px !important; }

/* ════════════════════════════════════════════════════════
   MOBILE NAV: APP HAMBURGER / DRAWER
════════════════════════════════════════════════════════ */
.app-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 36px; height: 36px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.app-nav-toggle:hover { border-color: var(--accent); }
.app-nav-toggle span {
  display: block; width: 16px; height: 1.5px;
  background: var(--text2); border-radius: 2px;
  transition: transform 0.22s, opacity 0.18s;
  transform-origin: center;
}
.app-nav-toggle.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.app-nav-toggle.open span:nth-child(2) { opacity: 0; }
.app-nav-toggle.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.app-nav-drawer {
  display: none;
  position: absolute;
  top: 100%;
  right: 12px;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  padding: 6px;
  z-index: 200;
  flex-direction: column;
  gap: 2px;
}
.app-nav-drawer.open { display: flex; }
.app-drawer-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: none; border: none; border-radius: 8px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--text2); cursor: pointer; text-align: left;
  transition: background 0.12s, color 0.12s;
  width: 100%;
}
.app-drawer-item:hover { background: var(--surface2); color: var(--text); }
.app-drawer-divider { height: 1px; background: var(--border); margin: 4px 6px; }

@media (max-width: 768px) {
  /* ── APP NAV ── */
  .app-body { padding: 10px 16px; }
  .app-nav { padding: 0 12px; height: 52px; gap: 0; position: relative; }
  .app-logo { font-size: 15px; }
  .app-nav-tabs { overflow-x: auto; gap: 0; flex: 1; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .app-nav-tabs::-webkit-scrollbar { display: none; }
  .app-tab { white-space: nowrap; font-size: 11px; padding: 6px 10px; flex-shrink: 0; min-width: 82px; }
  .app-nav-right { gap: 6px; flex-shrink: 0; }
  .app-nav-right .btn-ghost { display: none; }
  .app-nav-right .history-btn { font-size: 10px; padding: 4px 8px; }
  #creditChip { font-size: 9px; padding: 3px 8px; }
  /* Show app nav hamburger, hide desktop-only items */
  .app-nav-toggle { display: flex; }
  .app-nav-desktop { display: none !important; }
  /* Hide user chip text, show just the avatar */
  #userDisplayName { display: none; }
  .user-chip { padding: 4px 8px; gap: 0; }

  /* ── LANDING NAV ── */
  .land-nav { padding: 14px 18px; }
  .land-nav-links { display: none; }
  .land-nav-cta .btn-ghost { display: none; }
  /* Show landing hamburger, hide desktop actions */
  .r-nav-toggle { display: flex; }
  .r-nav-actions { display: none !important; }

  /* ── LANDING HERO ── */
  .land-hero { padding: 40px 20px 32px; }
  .land-hero h1 { font-size: clamp(28px, 8vw, 44px); }
  .land-hero p.lead { font-size: 14px; }
  .hero-split { grid-template-columns: 1fr; gap: 24px; }
  .hero-live-panel { min-height: 200px; }

  /* ── STAT TICKER ── */
  .stat-ticker { padding: 16px 20px; }
  .stat-ticker-inner { gap: 0; flex-wrap: wrap; }
  .stat-ticker-item { flex: 1 1 calc(50% - 1px); padding: 10px 8px; }
  .stat-ticker-item + .stat-ticker-item { border-left: none; border-top: 1px solid var(--border); }

  /* ── HOW IT WORKS / EDITORIAL STEPS ── */
  #how-it-works { padding: 48px 20px; }
  .step-row { grid-template-columns: 60px 1fr; gap: 12px; padding: 32px 0; }
  .step-num { font-size: clamp(44px, 10vw, 72px); }

  /* ── FEATURES / COMPARE ── */
  #features { padding: 48px 20px; }
  #features > div > div:first-of-type { grid-template-columns: 1fr; }
  #features > div > div:last-of-type { grid-template-columns: 1fr; }

  /* ── TESTIMONIALS ── */
  #features + section { padding: 48px 20px; }
  #features + section > div > div { grid-template-columns: 1fr; }

  /* ── LANDING FEATURES (legacy) ── */
  .land-features, .land-pricing { padding: 48px 20px; }
  .features-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-card { padding: 18px; }

  /* ── LANDING PRICING ── */
  .pricing-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .pricing-card { padding: 22px; }

  /* ── MAIN APP LAYOUT ── */
  .sim-layout { grid-template-columns: 1fr; }
  .sim-layout > div > .panel { position: static !important; }

  /* ── EMAIL TYPE CHIPS ── */
  .etype-chip { font-size: 10px; padding: 4px 8px; }
  .email-type-bar { padding: 8px 10px; gap: 5px; flex-wrap: wrap; }
  .email-type-chips { gap: 5px; }

  /* ── PERSONA GRID ── */
  .persona-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; max-height: 340px !important; }
  .persona-chip { height: 40px !important; padding: 0 8px !important; gap: 6px !important; }
  .pc-avatar { width: 22px !important; height: 22px !important; font-size: 8px !important; }
  .pc-label { font-size: 10px !important; }
  .pc-dot { width: 6px !important; height: 6px !important; }

  /* ── CONTEXT BOX ── */
  .context-box-hint { display: none; }

  /* ── RESULTS: POPULATION STATS ── */
  .pop-card-head { flex-wrap: wrap; gap: 8px; }
  .pop-card-head h3 { font-size: 12px; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .stat-big { font-size: 22px; }

  /* ── RESULTS: PERSONA CARDS ── */
  .pr-head { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .score-cluster { width: 100%; justify-content: flex-start; margin-top: 4px; gap: 12px; }
  .sc-val { font-size: 18px; }
  .persona-result { margin-bottom: 12px; }

  /* ── WHAT NEXT STRIP ── */
  /* 3-col grid → single column on mobile */
  .what-next-grid { grid-template-columns: 1fr !important; }

  /* ── SUBJECT ANALYSER ── */
  .subject-metrics { grid-template-columns: repeat(2, 1fr); }
  .subject-panel-head { flex-wrap: wrap; gap: 8px; }

  /* ── REWRITE PANEL ── */
  .rp-tabs { overflow-x: auto; grid-template-columns: none !important; display: flex; -webkit-overflow-scrolling: touch; }
  .rp-tab { white-space: nowrap; flex-shrink: 0; }
  .rp-footer { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .rp-footer-left { width: 100%; font-size: 10px; }
  .rp-copy-btn, .rp-ab-btn { font-size: 11px; padding: 7px 12px; }

  /* ── A/B TEST ── */
  .ab-layout { grid-template-columns: 1fr; gap: 12px; }
  .ab-results { grid-template-columns: 1fr; }
  .ab-score-grid { grid-template-columns: repeat(3, 1fr); }
  .ab-controls { padding: 12px; }
  .ab-persona-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }

  /* ── TEMPLATES ── */
  .tpl-layout { grid-template-columns: 1fr; }
  .tpl-save-panel { position: static !important; }
  .tpl-card-actions { flex-wrap: wrap; gap: 5px; }
  .tpl-action-btn { font-size: 10px; padding: 3px 8px; }
  .tpl-card-scores { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── HISTORY DRAWER ── */
  .history-drawer { width: 100%; right: -100%; }

  /* ── SCORE EXPLAIN ── */
  .se-dim-name { width: 70px; font-size: 10px; }

  /* ── SEQUENCE ── */
  .seq-layout { grid-template-columns: 1fr; }
  .seq-right > .panel { position: static !important; }

  /* ── MODALS ── */
  #planPaywall > div,
  #shortcutModal > div { padding: 24px 18px !important; margin: 12px; border-radius: 14px !important; }
}

@media (max-width: 480px) {
  /* ── EXTRA SMALL ── */
  .app-body { padding: 8px 10px; }
  .persona-grid { grid-template-columns: 1fr 1fr !important; gap: 5px; max-height: 300px !important; }
  .persona-tab-row { gap: 3px !important; padding: 3px 10px 2px !important; }
  .persona-tab { font-size: 8px !important; padding: 3px 7px !important; }
  .tpl-card-scores { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .subject-metrics { grid-template-columns: 1fr 1fr; }
  .land-hero h1 { font-size: 26px; }
  .land-hero p.lead { font-size: 13px; }
  .hero-cta .btn-lg { font-size: 13px; padding: 12px 20px; }
  /* Profile chip: avatar only */
  .user-chip { display: none !important; }
  #creditChip { display: none !important; }

  /* Nav: just logo + CTA on tiny screens */
  .app-nav-right .history-btn { display: none; }

  /* Score tooltip bubbles: wider on small screens */
  .score-tip-bubble { width: 180px; font-size: 10px; }

  /* Pricing modal: full screen feel */
  #planPaywall > div { border-radius: 12px !important; }
  #planPaywall .pricing-plans-grid { grid-template-columns: 1fr !important; }

  /* Shortcut modal: hide on tiny screens */
  #shortcutModal > div { max-height: 80vh; overflow-y: auto; }

  /* What next strip: single column */
  .what-next-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   SCROLL-TRIGGERED ENTRANCE ANIMATIONS
   Progressive enhancement: .js-ready on <body> enables hiding;
   without JS, all content is fully visible.
============================================================ */

/* Base hidden states, only active when JS has run */
body.js-ready [data-anm="fade-up"] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.58s cubic-bezier(0.4,0,0.2,1), transform 0.58s cubic-bezier(0.4,0,0.2,1);
}
body.js-ready [data-anm="slide-left"] {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.52s cubic-bezier(0.4,0,0.2,1), transform 0.52s cubic-bezier(0.4,0,0.2,1);
}
body.js-ready [data-anm="slide-right"] {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.52s cubic-bezier(0.4,0,0.2,1), transform 0.52s cubic-bezier(0.4,0,0.2,1);
}
body.js-ready [data-anm="scale-up"] {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
/* Visible state */
body.js-ready [data-anm].anm-done {
  opacity: 1 !important;
  transform: none !important;
}

/* Validation pulse, draws attention to a section that needs action */
@keyframes pulseBorder {
  0%   { box-shadow: 0 0 0 0 rgba(0,120,212,0.55); }
  50%  { box-shadow: 0 0 0 4px rgba(0,120,212,0.25); }
  100% { box-shadow: 0 0 0 0 rgba(0,120,212,0); }
}
.pulse-border {
  animation: pulseBorder 0.6s ease-out 3;
  border-color: var(--accent) !important;
  border-radius: 8px;
}

/* Core card glow pulse, fires once after scale-up completes */
@keyframes coreGlowPulse {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 16px 48px rgba(0,120,212,0.18); }
  50%  { box-shadow: 0 0 0 3px var(--accent), 0 20px 60px rgba(0,120,212,0.32); }
  100% { box-shadow: 0 0 0 2px var(--accent), 0 16px 48px rgba(0,120,212,0.18); }
}
.pricing-card.featured.glow-pulse {
  animation: coreGlowPulse 0.7s ease-out forwards;
}

/* ── SETTINGS PANEL (collapsible chip rows) ── */
.email-settings-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid rgba(37,99,235,0.4);
  background: var(--surface2);
  cursor: pointer;
  user-select: none;
  min-height: 36px;
  transition: background 0.15s;
}
.email-settings-summary:hover { background: var(--surface3); }
.ess-text {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-body);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ess-text strong { color: var(--text2); font-weight: 600; }
.ess-toggle {
  font-size: 10px;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.email-settings-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.email-settings-panel.open { max-height: 700px; }

/* ── PERSONA TOOLTIP (JS-rendered at body level to escape overflow:hidden) ── */
#_personaTipGlobal {
  position: fixed;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 0;
  font-size: 11px;
  color: var(--text2);
  font-family: var(--font-body);
  line-height: 1.5;
  width: 248px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  pointer-events: none;
  white-space: normal;
  text-align: left;
  display: none;
  overflow: hidden;
}
#_personaTipGlobal::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border2);
}
/* Rich tooltip inner elements */
.ptip-header {
  padding: 10px 12px 9px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 9px;
}
.ptip-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; font-family: var(--font-body);
}
.ptip-meta { display: flex; flex-direction: column; gap: 1px; }
.ptip-title { font-size: 11px; font-weight: 700; color: var(--text); }
.ptip-rate  { font-size: 9px; color: var(--text3); }
.ptip-body  { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.ptip-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text3); margin-bottom: 3px; }
.ptip-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ptip-list li { font-size: 10px; color: var(--text2); line-height: 1.4; padding-left: 10px; position: relative; }
.ptip-list li::before { content: '·'; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }
.ptip-instructions { font-size: 10px; color: var(--text3); line-height: 1.45; font-style: italic; }

/* ── PERSONA SEARCH ── */
.persona-search-wrap {
  padding: 8px 14px 4px;
  flex-shrink: 0;
  position: relative;
}
.persona-search-wrap svg {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.4;
}
#personaSearch {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 7px 10px 7px 28px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 11px;
  outline: none;
  transition: border-color 0.15s;
}
#personaSearch:focus { border-color: var(--accent); }
#personaSearch::placeholder { color: var(--text3); }
.persona-card.suggested { border-color: rgba(37,99,235,0.5); background: rgba(37,99,235,0.05); }
.persona-card.suggested::before {
  content: '★';
  position: absolute;
  top: 5px; right: 8px;
  font-size: 8px;
  color: var(--accent);
  line-height: 1;
}
.persona-card.selected.suggested::before { display: none; }

/* ── PERSONA PANEL PULSE ── */
@keyframes panel-border-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
  50%       { box-shadow: 0 0 0 3px rgba(37,99,235,0.35); }
}
.persona-panel-pulse { animation: panel-border-pulse 1.8s ease-in-out 3; }

/* ── PERSONA TABS ── */
.persona-tab-row {
  display: flex; gap: 4px; padding: 4px 14px 2px; flex-shrink: 0; flex-wrap: wrap;
}
.persona-tab {
  padding: 3px 9px; border-radius: 100px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
  font-family: var(--font-body);
  border: 1px solid var(--border2);
  background: transparent; color: var(--text3);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.persona-tab:hover { border-color: var(--accent); color: var(--accent); }
.persona-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── RECENTLY USED ── */
.recent-personas-row {
  padding: 4px 14px 0; flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; color: var(--text3); font-family: var(--font-body);
}
.recent-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.recent-chip {
  padding: 2px 8px; border-radius: 100px;
  background: var(--surface2); border: 1px solid var(--border);
  font-size: 9px; font-family: var(--font-body); font-weight: 600;
  color: var(--text2); cursor: pointer; transition: all 0.15s;
  white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis;
}
.recent-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* ── PERSONA COUNT + SUGGEST ── */
.persona-count-row {
  padding: 4px 14px 2px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.persona-count-label {
  font-size: 9px; color: var(--text3); font-family: var(--font-body);
}
.persona-count-clear {
  font-size: 9px; color: var(--accent); background: none; border: none;
  cursor: pointer; font-family: var(--font-body); padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
  display: none;
}
.suggest-persona-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 9px; font-size: 9px; font-weight: 600;
  font-family: var(--font-body);
  background: transparent; border: 1px solid var(--border2);
  border-radius: 6px; color: var(--text3);
  cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
}
.suggest-persona-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.suggest-persona-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── AI SUGGESTED PULSE ── */
@keyframes suggested-ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
  50%       { box-shadow: 0 0 0 4px rgba(37,99,235,0.3); }
}
.persona-card.suggested-ai {
  animation: suggested-ai-pulse 1.4s ease-in-out 4;
  border: 2px solid var(--accent) !important;
  background: rgba(37,99,235,0.07);
}

/* ── GUIDED EMPTY STATE ── */
.guided-empty { padding: 32px 20px; text-align: center; font-family: var(--font-body); }
.guided-empty-steps { display: flex; gap: 0; margin: 20px auto 0; justify-content: center; max-width: 340px; }
.ge-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.ge-step:not(:last-child)::after {
  content: ''; position: absolute; top: 15px; left: 60%;
  width: 80%; height: 1px; background: var(--border2);
}
.ge-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--text3);
  margin-bottom: 8px; font-family: var(--font-body);
}
.ge-label { font-size: 10px; color: var(--text3); line-height: 1.4; text-align: center; padding: 0 4px; }

/* ── A/B SPLIT LAYOUT ── */
.ab-settings-row {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: 16px; padding: 16px 20px 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.ab-settings-col { flex: 1; min-width: 280px; display: flex; flex-direction: column; }
.ab-settings-col .size-label { height: 20px; margin-bottom: 10px !important; }
/* Persona chips inside AB settings, match etype-chip style */
#abPersonaRow {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 180px; overflow-y: auto;
}
#abPersonaRow .persona-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 100px;
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--text2); font-size: 11px; font-family: var(--font-body);
  font-weight: 600; white-space: nowrap; line-height: 1.4;
  height: auto; min-height: 0; width: auto;
  transition: all 0.15s;
}
#abPersonaRow .persona-chip:hover { border-color: var(--accent); color: var(--text); background: var(--surface3); }
#abPersonaRow .persona-chip.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); font-weight: 700; }
#abPersonaRow .pc-avatar { display: none; }
#abPersonaRow .p-checkmark { display: none; }
/* Context column, scoped to AB settings only */
.ab-settings-col .context-box {
  display: flex; flex-direction: column;
  border: none; background: transparent; border-radius: 0; padding: 0;
}
.ab-settings-col .context-box:focus-within { border: none; }
.ab-settings-col .context-box-head {
  padding: 0 0 8px 0;
  border-bottom: none;
  cursor: default;
}
.ab-settings-col .context-box-head:hover { background: transparent; }
.ab-settings-col .context-box-body { display: flex; flex-direction: column; }
.ab-settings-col .context-box-body.open { display: flex; }
.ab-settings-col .context-ta {
  border: 1px solid var(--border2); border-radius: var(--r);
  padding: 8px 10px; background: var(--surface2);
}
.ab-settings-col .context-ta:first-of-type { min-height: 120px; }
.ab-split {
  display: grid;
  grid-template-columns: 1fr 4px 1fr;
  border-bottom: 1px solid var(--border);
}
.ab-col { padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ab-col-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.ab-col-head span { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--text2); }
.ab-divider {
  background: var(--border); position: relative;
  display: flex; align-items: flex-start; justify-content: center; overflow: visible;
}
.ab-winner-center {
  position: relative; top: auto; transform: none;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; width: 0; overflow: visible;
  align-self: flex-start; margin-top: 56px;
}
.ab-vs-badge {
  white-space: nowrap; padding: 5px 10px; border-radius: 100px;
  font-size: 10px; font-weight: 800; font-family: var(--font-body);
  letter-spacing: 1px; text-transform: uppercase;
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--text3); box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.ab-winner-badge-center {
  white-space: nowrap; padding: 6px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 800; font-family: var(--font-body);
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 12px rgba(37,99,235,0.35);
  animation: popIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes popIn { from { opacity:0; transform:scale(0.6); } to { opacity:1; transform:scale(1); } }
.ab-run-row {
  padding: 16px 20px; display: flex; justify-content: center;
  border-top: 1px solid var(--border);
}
.ab-result-inline { animation: slideUp 0.3s ease forwards; }
@keyframes slideUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.ab-prefill-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 0;
  background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.22);
  border-radius: 8px; cursor: pointer; transition: background 0.15s;
}
.ab-prefill-bar:hover { background: rgba(37,99,235,0.14); }
.ab-prefill-text { font-size: 11px; font-family: var(--font-body); color: var(--accent); font-weight: 600; flex: 1; }
@media (max-width: 768px) {
  .ab-split { grid-template-columns: 1fr; }
  .ab-divider { width: 100%; height: 4px; flex-direction: row; }
  .ab-winner-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
}

/* ── A/B EMPTY STATE ── */
.ab-empty-state { padding: 48px 24px; text-align: center; font-family: var(--font-body); }
.ab-empty-state .ae-icon { font-size: 32px; margin-bottom: 12px; }
.ab-empty-state .ae-title { font-size: 15px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }
.ab-empty-state .ae-sub { font-size: 12px; color: var(--text3); line-height: 1.6; }

/* ── MOBILE STICKY RUN CTA ── */
.mobile-run-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 10px 16px; z-index: 900; box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
}
@media (max-width: 640px) {
  .mobile-run-cta { display: block; }
  .mobile-run-cta.hidden { display: none !important; }
}
@media (max-width: 380px) {
  .abw-step-label { display: none; }
}

/* ============================================================
   MOBILE ENHANCEMENTS: full responsive pass (390px / 375px)
============================================================ */

/* 5C: Prevent horizontal scroll */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  .sim-layout, .sim-left, .sim-right, .panel {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}

/* 5A: Prevent iOS Safari zoom on input focus (requires ≥ 16px) */
@media (max-width: 768px) {
  input, textarea, select { font-size: 16px !important; }
  /* Carve-outs: display-only tiny inputs that don't receive primary text entry */
  #personaSearch { font-size: 14px !important; }
  #contextFixFacts, #contextFixTone { font-size: 16px !important; }
}

/* 5B: Touch targets: 44px minimum */
@media (max-width: 768px) {
  button, .btn, [role="button"] { min-height: 44px; }
  /* Exception: small chip/pill buttons */
  .etype-chip, .industry-chip, .chip,
  .app-tab, .rp-tab, .tpl-action-btn { min-height: 32px; }
}

/* 1A: Hero headline clamp + stack textarea / result panel */
@media (max-width: 768px) {
  .land-hero h1 { font-size: clamp(32px, 8vw, 52px) !important; }
  .hero-split { flex-direction: column !important; }
  .hero-email-input { width: 100% !important; min-height: 140px; }
  .hero-live-panel { width: 100% !important; margin-top: 16px; }
}

/* 1B: Stats bar: 3-column grid at ≤ 600px */
@media (max-width: 600px) {
  .stat-ticker-inner {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
  }
  .stat-ticker-item {
    border-left: none !important;
    border-top: none !important;
    border-right: 1px solid var(--border);
    flex: unset !important;
  }
  .stat-ticker-item:nth-child(3n)   { border-right: none !important; }
  .stat-ticker-item:nth-child(n+4)  { border-top: 1px solid var(--border) !important; }
}

/* 1C: Landing nav: compact Launch App button */
@media (max-width: 768px) {
  .land-nav-cta .btn-primary,
  .land-nav-cta .btn-lg,
  .land-nav-cta a.btn { padding: 8px 14px !important; font-size: 13px !important; }
}

/* 2A: Sim layout: explicit row ordering */
@media (max-width: 768px) {
  .sim-layout { grid-template-rows: auto auto !important; }
  .sim-left  { order: 1; }
  .sim-right { order: 2; }
}

/* 2B: Persona card: tighter padding + font at 480px */
@media (max-width: 480px) {
  .persona-card { padding: 8px 6px !important; }
  .persona-card .pc-title, .persona-card h4 { font-size: 11px !important; }
  .persona-card .pc-sub,  .persona-card p  { font-size: 9px !important; }
}

/* 2C: Industry chips: wrap on mobile */
@media (max-width: 768px) {
  .industry-chips, #industryChips { flex-wrap: wrap !important; gap: 5px !important; }
  .industry-chip { font-size: 10px !important; padding: 4px 8px !important; min-height: 32px !important; }
}

/* 2E: Pad page bottom so fixed CTA bar doesn't cover content */
@media (max-width: 640px) {
  .sim-layout { padding-bottom: 70px !important; }
}

/* 2F: App tabs: smaller at 480px */
@media (max-width: 480px) {
  .app-tab { font-size: 9px !important; padding: 3px 7px !important; gap: 3px !important; }
}

/* 3A: Swarm canvas: hidden by default, no reserved space */
#swarmSection { display: none; }
#swarmSection[style*="block"] { display: block !important; }
/* 3A: Swarm canvas: reduced height on mobile */
@media (max-width: 768px) {
  #swarmCanvas  { height: 160px !important; }
  #swarmStats   { gap: 4px !important; padding: 8px 10px !important; }
  #swarmStats > div { font-size: 10px !important; padding: 3px 8px !important; }
}

/* 3B: Stat cards: tighter values at 480px */
@media (max-width: 480px) {
  .stat-big  { font-size: 20px !important; }
  .stat-lbl  { font-size: 9px !important; }
}

/* 3C: Verdict card: compact on mobile */
@media (max-width: 480px) {
  .verdict-card { padding: 14px !important; }
  .verdict-decision, .vs-decision { font-size: 18px !important; }
}

/* 4A: Rewrite panel: full width comfortable reading */
@media (max-width: 768px) {
  .rewrite-panel { margin: 0 !important; border-radius: 10px !important; }
  .rp-email-text, .rp-body { font-size: 12px !important; line-height: 1.7 !important; padding: 14px !important; }
}

/* 5D: Subject analyser: compact on mobile */
@media (max-width: 768px) {
  #subjectAnalyserPanel { padding: 14px !important; }
  .subject-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Rewrite text box, auto-expand, no scroll */
/* NOTE: no !important on height, JS sets explicit px height via scrollHeight */
#rpRewriteText {
  overflow: hidden;
  min-height: 120px;
  height: auto;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}
/* Right column must not be clamped to the left column's height */
#rewriteSideBySide { align-items: flex-start; }
#rewriteSideBySide > div { overflow: visible; height: auto; max-height: none; }
#rewriteSideBySide > div:last-child { align-self: flex-start; }
/* Thinking wrap, shrink to content, align top */
#rpThinkingWrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 0;
  margin-top: 0;
  width: 100%;
}

/* Rewrite panel: stack Original above AI Rewrite on small screens */
@media (max-width: 640px) {
  #rewriteSideBySide {
    grid-template-columns: 1fr !important;
  }
  #rewriteSideBySide > div:first-child {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    max-height: 200px !important;
    overflow-y: auto !important;
  }
}

/* ============================================================
   TYPOGRAPHY: readable sizes; Inter for UI text
============================================================ */

/* Nav tabs: bump to 12px */
.app-tab { font-size: 12px; }

/* Section / panel headings */
.kill-list-head h3,
.rp-head h3,
.pop-card-head h3 { font-size: 15px; font-weight: 700; }

/* Issue titles, 14px bold */
.kill-title {
  font-size: 14px;
  line-height: 1.5;
}

/* Issue descriptions, 14px comfortable reading */
.kill-desc {
  font-size: 14px;
  line-height: 1.7;
  font-family: var(--font-body);
}

/* Fix suggestions, 13px, accent colour already applied */
.kill-fix {
  font-size: 13px;
  line-height: 1.6;
}

/* Verdict decision text */
.vs-decision { font-size: 22px; }

/* Verdict reason / explanation */
.vs-reason {
  font-size: 14px;
  line-height: 1.6;
}

/* Verdict summary paragraph */
.verdict-summary,
.verdict-summary p { font-size: 14px; }

/* Persona card title, 12px */
.p-title { font-size: 12px; }

/* Chip buttons, 12px */
.etype-chip { font-size: 12px; }
.industry-chip { font-size: 12px; font-family: var(--font-body); }

/* All buttons inherit body font */
button, .btn { font-family: var(--font-body); }

/* Subject analyser display numbers */
.subject-stat-val { font-family: var(--font-display); font-size: 22px; }
.subject-stat-label { font-size: 11px; }

/* ── HEADING LETTER-SPACING & LINE-HEIGHT ─────────────────── */
/* Open up remaining tight tracking on text headings           */

/* Hero headline */
.land-hero h1 { letter-spacing: 0; line-height: 1.13; }

/* Section titles (Features, Pricing, CTA) */
.section-title        { letter-spacing: 0; }
.final-cta-section h2 { letter-spacing: 0; }

/* Logo wordmark */
.land-logo { letter-spacing: 0; }

/* How-it-works step titles */
.step-content h3 { letter-spacing: 0.01em; }

/* App-level panel headings */
.kill-list-head h3,
.rp-head h3,
.pop-card-head h3,
.panel-head h3 { letter-spacing: 0.01em; line-height: 1.3; }

/* Mobile: keep tabs from getting too large at 768px override */
@media (max-width: 768px) {
  .app-tab { font-size: 10px; }
}
@media (max-width: 480px) {
  .app-tab { font-size: 9px !important; }
  .kill-title { font-size: 13px; }
  .kill-desc  { font-size: 13px; }
}

/* ============================================================
   UI ENHANCEMENT PASS: Motion, Depth, Tooltips, Reveals
============================================================ */

/* ── Button interactions ── */
.btn { transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s, border-color 0.15s, color 0.15s; }
.btn:active:not(:disabled) { transform: scale(0.97) translateY(1px) !important; box-shadow: none !important; }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-accent); }
.btn-ghost:hover:not(:disabled) { transform: translateY(-1px); }

.run-btn {
  transition: transform 0.15s var(--ease-spring), box-shadow 0.15s var(--ease), background 0.2s, opacity 0.2s;
}
.run-btn:active:not(:disabled) { transform: scale(0.96) translateY(2px) !important; }

/* ── Card depth & hover ── */
.feat3-card {
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s;
}
.feat3-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border2);
}

.testi-card {
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s;
}
.testi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border2);
}

.persona-card {
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s, background 0.18s;
}
.persona-card:hover:not(.selected) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border2);
}
.persona-card.selected {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-sm);
}
.persona-category-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 0 6px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.persona-category-header:first-child { border-top: none; margin-top: 0; }
.persona-category-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text);
  font-family: var(--font-body);
}
.persona-category-sub {
  font-size: 10px;
  color: var(--text3);
  font-family: var(--font-body);
}
.persona-category-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr));
  gap: 6px;
  padding-bottom: 4px;
}

.pricing-card {
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s;
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pricing-card.featured { box-shadow: var(--shadow-md); }
.pricing-card.featured:hover { box-shadow: var(--shadow-lg); }

/* Clickable history items */
.history-item {
  transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease);
}
.history-item:hover { transform: translateX(2px); }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.07s; }
.reveal-d2 { transition-delay: 0.14s; }
.reveal-d3 { transition-delay: 0.21s; }
.reveal-d4 { transition-delay: 0.28s; }
.reveal-d5 { transition-delay: 0.35s; }

/* ── Score countup target ── */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ── CSS tooltip system ── */
[data-tip] {
  position: relative;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1a1a2e;
  color: var(--text2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--border2);
  white-space: normal;
  width: max-content;
  max-width: 200px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 500;
  box-shadow: var(--shadow-md);
}
[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 501;
}
[data-tip]:hover::after,
[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::before { transform: translateX(-50%); }

/* ── Skeleton loader ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface3) 50%,
    var(--surface2) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease infinite;
  border-radius: 6px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Improved nav hover ── */
.land-nav-links a {
  position: relative;
  padding-bottom: 2px;
}
.land-nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.2s var(--ease);
  transform-origin: left;
}
.land-nav-links a:hover::after { transform: scaleX(1); }

/* ── Persona chip hover ── */
.rcta-persona-chip {
  transition: transform 0.15s var(--ease), border-color 0.15s, background 0.15s, color 0.15s;
}
.rcta-persona-chip:hover:not(.active) { transform: translateY(-1px); border-color: var(--border2); }

/* ── App tab ripple ── */
.app-tab {
  position: relative;
  overflow: hidden;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

/* ── Score ring animation ── */
@keyframes ring-draw {
  from { stroke-dashoffset: 283; }
  to   { stroke-dashoffset: var(--ring-offset, 0); }
}
.score-ring-path {
  animation: ring-draw 1s var(--ease) forwards;
}

/* ── Page load stagger ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.load-anim-1 { animation: fadeSlideUp 0.55s var(--ease) 0.05s both; }
.load-anim-2 { animation: fadeSlideUp 0.55s var(--ease) 0.15s both; }
.load-anim-3 { animation: fadeSlideUp 0.55s var(--ease) 0.25s both; }
.load-anim-4 { animation: fadeSlideUp 0.55s var(--ease) 0.35s both; }

/* ── Improved ThinkingStream ── */
#thinkingStreamEl {
  box-shadow: var(--shadow-sm);
}
.ts-line.ts-current { color: var(--text); }

/* ── Etype chip hover ── */
.etype-chip {
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s var(--ease);
}
.etype-chip:hover:not(.active) { transform: translateY(-1px); }

/* ── Industry chip hover ── */
.industry-chip {
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s var(--ease);
}
.industry-chip:hover:not(.active) { transform: translateY(-1px); }

/* ── Kill card hover ── */
.kill-card {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.kill-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--border2); }

/* ── Fix card hover ── */
.fix-card {
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fix-card:hover { border-color: var(--border2); box-shadow: var(--shadow-xs); }

/* ============================================================
   REDESIGN 2.0: r-* namespace
   Palette: #2563EB teal · #F8F6F3 bg · #FFFFFF surface
============================================================ */

#landing::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  background-repeat: repeat;
}

#landing::before { opacity: 0.025; }

#landing::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.12) 100%);
}

#landing::after {
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.04) 100%);
}

/* ── Nav ── */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--nav-bg, #F0EDE8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.r-nav {
  padding: 0 24px;
  border-bottom: 1px solid rgba(26,23,20,0.1);
}
.r-nav {
  color: #1A1714;
}
.r-nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.r-nav-links {
  display: flex;
  list-style: none;
  gap: 28px;
  flex: 1;
}
.r-nav-links a {
  color: #5A5450;
  text-decoration: none;
  font-size: 14px;
  font-family: var(--font-body);
  transition: color 0.2s;
}
.r-nav-links a:hover { color: #1A1714; }
.r-nav a.r-nav-active { color: var(--accent, #3B82F6); font-weight: 500; }
.r-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.r-logo {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.5px;
  flex-shrink: 0;
}
.r-logo span { color: var(--accent); }

/* ── Buttons ── */
.r-btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s var(--ease-spring), box-shadow 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.r-btn:active { transform: scale(0.97) !important; }
.r-btn-orange {
  background: var(--accent);
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}
.r-btn-orange:hover { background: var(--accent-hover); box-shadow: 0 6px 24px rgba(37,99,235,0.45); transform: translateY(-1px); }
.r-btn-ghost {
  background: transparent;
  color: #4A4440;
  padding: 9px 16px;
  font-size: 14px;
  border: 1px solid rgba(26,23,20,0.2);
}
.r-btn-ghost:hover { color: #1A1714; border-color: rgba(26,23,20,0.4); background: rgba(26,23,20,0.04); }
.r-btn-sm { padding: 7px 14px; font-size: 12px; }
.r-btn-lg { padding: 14px 36px; font-size: 15px; font-weight: 700; }

/* ── Hero ── */
.r-hero {
  position: relative;
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  padding: 80px 48px 60px;
  z-index: 2;
}
.r-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 64px;
  align-items: center;
}
.r-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.r-hero-product {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.r-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 28px;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  animation: fadeSlideUp 0.6s var(--ease) 0.1s both;
}
.r-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: rPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes rPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}
.r-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.22em;
  justify-content: flex-start;
}
.r-h1 em { font-style: normal; color: var(--accent); }
.word-reveal {
  display: inline-block;
  clip-path: inset(0 102% 0 0);
  animation: wordReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) calc(0.35s + var(--wd) * 0.12s) forwards;
}
@keyframes wordReveal {
  to { clip-path: inset(0 0% 0 0); }
}
.r-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--text2);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 0 32px;
  animation: fadeSlideUp 0.6s var(--ease) 0.65s both;
}
.r-hero-demo {
  display: contents;
}
@media (max-width: 900px) {
  .r-hero { padding: 60px 24px 48px; }
  .r-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .r-hero-text { align-items: center; text-align: center; }
  .r-h1 { justify-content: center; }
  .r-hero-sub { max-width: 560px; margin: 0 auto 28px; }
  .r-hero-hint { justify-content: center; }
  .r-hero-product { max-width: 560px; margin: 0 auto; width: 100%; }
}
.r-hero-input-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.r-hero-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.r-textarea {
  width: 100%;
  min-height: 130px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  padding: 16px;
  resize: vertical;
}
.r-textarea::placeholder { color: var(--text3); }
.r-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  gap: 12px;
  background: rgba(255,255,255,0.02);
}
.r-input-note { font-size: 11px; color: var(--text3); font-family: var(--font-body); }
.r-hero-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.r-panel-empty { text-align: center; padding: 32px 24px; }
.r-panel-empty-icon { margin: 0 auto 12px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--border2); }
.r-panel-empty-label { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 4px; font-family: var(--font-body); }
.r-panel-empty-sub { font-size: 11px; color: var(--text3); font-family: var(--font-body); }
.r-panel-result { width: 100%; overflow-y: auto; padding: 20px; align-self: stretch; }
.r-hero-hint {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text3);
  font-family: var(--font-body);
  animation: fadeSlideUp 0.5s var(--ease) 1.05s both;
}
.r-hint-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text3); font-size: 12px; font-family: var(--font-body);
  text-decoration: underline; text-decoration-color: var(--border2);
  transition: color 0.15s; padding: 0;
}
.r-hint-btn:hover { color: var(--accent); }
.r-hint-sep { color: var(--border2); }

/* ── Proof Bar ── */
.r-proof-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #F0EDE8;
  padding: 20px 24px;
  position: relative;
  z-index: 2;
}
.r-proof-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.r-proof-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 24px;
  font-family: var(--font-body);
}
.r-proof-num { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: 42px; letter-spacing: -1px; line-height: 1; color: var(--accent); }
.r-proof-lbl { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; color: #6A6460; }
.r-proof-div { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }

/* ── Sections ── */
.r-section { padding: 96px 24px; position: relative; z-index: 2; border-top: 1px solid var(--border); overflow: visible; }
.r-section-dark { background: #F0EDE8; }
.r-container { max-width: 1080px; margin: 0 auto; }
.r-container-narrow { max-width: 700px; margin: 0 auto; }
.r-section-label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent); margin-bottom: 16px;
}
.r-section-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--text); margin-bottom: 16px;
}
.r-section-title em { font-style: normal; color: var(--accent); }

/* ── PLAYFAIR DISPLAY: SITE-WIDE HEADING FONT ── */
.r-section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  letter-spacing: -1.5px;
}
.wr-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 900 !important;
  line-height: 1.06 !important;
  letter-spacing: -1.5px !important;
}
.r-cta-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  letter-spacing: -2px;
}
.rr-killer-line {
  font-family: 'Fraunces', Georgia, serif;
}
.rr-stat-num,
.ph-stat-num,
.feat-stat,
.strip-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
}
.score-display,
.score-num,
.ph-score-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
}
.r-section-sub {
  font-size: 15px; color: var(--text2); line-height: 1.7;
  font-family: var(--font-body);
  margin-bottom: 48px; max-width: 560px;
}

/* ── Data / Research section ── */
.rr-stats-row {
  display: flex; gap: 40px; margin: 48px 0 40px;
  flex-wrap: wrap; justify-content: center;
}
.rr-stat { text-align: center; min-width: 140px; }
.rr-stat-num {
  font-size: 42px; font-weight: 800; color: var(--accent);
  font-family: var(--font-display); line-height: 1;
}
.rr-stat-label { font-size: 11px; color: var(--text3); margin-top: 6px; line-height: 1.4; }
.rr-sources-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text3);
  text-align: center; margin-bottom: 14px;
}
.rr-sources-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-bottom: 48px;
}
.rr-source-pill {
  font-size: 11px; color: var(--text2); background: var(--surface2);
  border: 1px solid var(--border); border-radius: 100px;
  padding: 5px 12px; white-space: nowrap;
}
.rr-findings-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px; margin-top: 20px;
}
.rr-finding {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px; text-align: center;
}
.rr-finding-stat {
  font-size: 36px; font-weight: 800; color: var(--accent);
  font-family: var(--font-display); margin-bottom: 8px;
}
.rr-finding-text { font-size: 12px; color: var(--text2); line-height: 1.5; }
@media (max-width: 600px) {
  .rr-stats-row { gap: 24px; }
  .rr-stat-num { font-size: 32px; }
  .rr-finding-stat { font-size: 28px; }
  .rr-source-pill { font-size: 10px; }
}

/* ── Killer line ── */
/* ── GLOBAL EMAIL ASSISTANT SECTION ── */
.gea-section {
  background: transparent;
  padding: 80px 56px;
  font-family: 'DM Sans', var(--font-body), sans-serif;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.gea-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3B82F6;
  margin-bottom: 18px;
}
.gea-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  color: #1A1714;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.gea-headline em { font-style: italic; color: #3B82F6; }
.gea-sub {
  font-size: 15px;
  color: #6B6560;
  line-height: 1.7;
  max-width: 380px;
  margin-bottom: 36px;
}
.gea-stat-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 32px; }
.gea-stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 56px;
  font-weight: 600;
  color: #1A1714;
  line-height: 1;
}
.gea-stat-num sup { font-size: 30px; vertical-align: super; color: #3B82F6; }
.gea-stat-label { font-size: 13px; color: #6B6560; font-weight: 400; line-height: 1.4; }
.gea-body {
  font-size: 14px;
  color: #7A7570;
  line-height: 1.75;
  max-width: 380px;
  border-left: 2.5px solid #3B82F6;
  padding-left: 18px;
}
.gea-scene {
  position: relative;
  height: 400px;
  flex-shrink: 0;
}
.gea-float {
  position: absolute;
  will-change: transform;
}
@keyframes geaDrift1 {
  0%   { transform: translateY(0px)   rotate(-6deg); }
  25%  { transform: translateY(-12px) rotate(-4.5deg); }
  50%  { transform: translateY(-20px) rotate(-3deg); }
  75%  { transform: translateY(-10px) rotate(-4.5deg); }
  100% { transform: translateY(0px)   rotate(-6deg); }
}
@keyframes geaDrift2 {
  0%   { transform: translateY(0px)   rotate(8deg); }
  30%  { transform: translateY(-10px) rotate(9deg); }
  60%  { transform: translateY(-18px) rotate(10.5deg); }
  100% { transform: translateY(0px)   rotate(8deg); }
}
@keyframes geaDrift3 {
  0%   { transform: translateY(0px)  rotate(-2deg); }
  40%  { transform: translateY(12px) rotate(0.5deg); }
  70%  { transform: translateY(18px) rotate(1.5deg); }
  100% { transform: translateY(0px)  rotate(-2deg); }
}
@keyframes geaDrift4 {
  0%   { transform: translateY(0px)   rotate(13deg); }
  35%  { transform: translateY(-14px) rotate(11.5deg); }
  65%  { transform: translateY(-22px) rotate(10deg); }
  100% { transform: translateY(0px)   rotate(13deg); }
}
@keyframes geaDrift5 {
  0%   { transform: translateY(0px)  rotate(-8deg); }
  45%  { transform: translateY(-14px) rotate(-6deg); }
  100% { transform: translateY(0px)  rotate(-8deg); }
}
@keyframes geaDrift6 {
  0%   { transform: translateY(0px)  rotate(3deg); }
  50%  { transform: translateY(16px) rotate(5.5deg); }
  100% { transform: translateY(0px)  rotate(3deg); }
}
@keyframes geaDrift7 {
  0%   { transform: translateY(0px)  rotate(-17deg); }
  40%  { transform: translateY(12px) rotate(-15deg); }
  75%  { transform: translateY(18px) rotate(-13deg); }
  100% { transform: translateY(0px)  rotate(-17deg); }
}
.gea-envelope { top: 38%;   left: 22%;  animation: geaDrift1 8s cubic-bezier(0.37,0,0.63,1) infinite; animation-delay: -1s;   filter: drop-shadow(0 12px 32px rgba(0,0,0,0.12)); }
.gea-cn       { top: 4%;    left: 8%;   animation: geaDrift2 7s cubic-bezier(0.37,0,0.63,1) infinite; animation-delay: -3s;   filter: drop-shadow(0 6px 18px rgba(0,0,0,0.09)); }
.gea-ar       { top: 6%;    right: 5%;  animation: geaDrift3 9s cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation-delay: -5s;  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.09)); }
.gea-ja       { top: 28%;   right: 4%;  animation: geaDrift4 8s cubic-bezier(0.37,0,0.63,1) infinite; animation-delay: -2.5s; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.09)); }
.gea-hi       { bottom: 12%; left: 4%;  animation: geaDrift5 10s cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation-delay: -6s;  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.09)); }
.gea-fr       { top: 55%;   right: 8%;  animation: geaDrift2 9s cubic-bezier(0.37,0,0.63,1) infinite; animation-delay: -4s;   filter: drop-shadow(0 6px 18px rgba(0,0,0,0.09)); }
.gea-es       { top: 18%;   left: 52%;  animation: geaDrift6 10s cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation-delay: -2s;  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.09)); }
.gea-de       { bottom: 22%; right: 6%; animation: geaDrift3 8s cubic-bezier(0.37,0,0.63,1) infinite; animation-delay: -7s;   filter: drop-shadow(0 6px 18px rgba(0,0,0,0.09)); }
.gea-ko       { top: 44%;   left: 4%;  animation: geaDrift1 9.5s cubic-bezier(0.37,0,0.63,1) infinite; animation-delay: -1.5s; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.09)); }
.gea-pt       { bottom: 6%;  right: 28%; animation: geaDrift5 8.5s cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation-delay: -3.5s; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.09)); }
.gea-ru       { top: 12%;   left: 38%;  animation: geaDrift7 7.5s cubic-bezier(0.37,0,0.63,1) infinite; animation-delay: -8s;  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.09)); }
.gea-crescent { top: 72%;   left: 44%;  animation: geaDrift4 12s cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation-delay: -4s;  opacity: 0.7; }
.gea-yin      { top: 8%;    left: 68%;  animation: geaDrift6 14s cubic-bezier(0.37,0,0.63,1) infinite; animation-delay: -6s;  opacity: 0.55; }
.gea-torii    { bottom: 4%;  left: 30%;  animation: geaDrift2 13s cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation-delay: -9s;  opacity: 0.6; }
.gea-arrow    { top: 74%;   left: 56%;  animation: geaDrift6 11s cubic-bezier(0.37,0,0.63,1) infinite; animation-delay: -3.5s; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.07)); }
.gea-globe    { top: 62%;   left: 14%;  animation: geaDrift3 13s cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation-delay: -7s;  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.06)); opacity: 0.45; }
@media(max-width:720px) {
  .gea-section { grid-template-columns: 1fr; padding: 44px 28px; }
  .gea-scene { height: 300px; }
  .gea-headline { font-size: 36px; }
}
/* ── WHY REPLYRATE v3 ── */
.wr3-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
@media(max-width:900px){ .wr3-wrap { grid-template-columns: 1fr; gap: 48px; } }

.wr3-tag { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.wr3-tag-line { width: 44px; height: 2px; background: #3B82F6; flex-shrink: 0; }
.wr3-tag-text { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #3B82F6; font-family: -apple-system, system-ui, sans-serif; }

.wr3-big { font-family: 'Fraunces', Georgia, serif; font-size: clamp(72px, 9vw, 110px); font-weight: 900; line-height: 0.92; letter-spacing: -4px; margin-bottom: 16px; }
.wr3-b1 { display: block; color: #1A1714; }
.wr3-b2 { display: block; color: #3B82F6; font-style: italic; }

.wr3-sub { font-family: 'Fraunces', Georgia, serif; font-size: clamp(24px, 3vw, 36px); font-weight: 400; font-style: italic; color: #9A9490; line-height: 1.2; }

.wr3-right { display: flex; flex-direction: column; gap: 20px; }

.wr3-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #F0EDE8; border-radius: 12px; overflow: hidden; }

.wr3-stat { padding: 16px 14px; border-right: 1px solid #F0EDE8; }
.wr3-stat:last-child { border-right: none; }
.wr3-stat-n { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 900; color: #3B82F6; letter-spacing: -0.5px; line-height: 1; }
.wr3-stat-l { font-size: 10px; margin-top: 4px; color: #7A7470; font-family: -apple-system, system-ui, sans-serif; }

.wr3-cmp { display: grid; grid-template-columns: 1fr 28px 1fr; border: 1px solid #F0EDE8; border-radius: 12px; overflow: hidden; }

.wr3-chd { font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 14px 14px 0; margin-bottom: 10px; font-family: -apple-system, system-ui, sans-serif; }
.wr3-chd-bad { color: #EF4444; }
.wr3-chd-good { color: #3B82F6; }

.wr3-bad { background: #FDF5F5; }
.wr3-good { background: #F5FBF5; }

.wr3-item { font-size: 12px; line-height: 1.5; padding: 6px 14px; border-top: 1px solid #F0E8E8; font-family: -apple-system, system-ui, sans-serif; color: #9A8A8A; }
.wr3-good .wr3-item { border-color: #E0F0E0; color: #5A7A5A; }

.wr3-vs { display: flex; align-items: center; justify-content: center; background: #F0EDE8; }
.wr3-vs-txt { font-size: 9px; font-weight: 800; letter-spacing: 1px; writing-mode: vertical-lr; color: #D4CFC8; font-family: -apple-system, system-ui, sans-serif; }

@media(max-width:500px){
  .wr3-big { letter-spacing: -2px; }
  .wr3-cmp { grid-template-columns: 1fr 20px 1fr; }
  .wr3-item { font-size: 11px; padding: 5px 10px; }
  .wr3-chd { padding: 10px 10px 0; }
}

@media (max-width: 600px) {
  .r-section-inner { padding: 48px 20px; }
}

/* ── EMAIL FEATURES INBOX ── */
.feat-wrap {
  background: #F0EDE8;
  padding: 72px 64px;
}
.feat-inbox { background: #fff; }
@media(max-width:720px){ .feat-wrap { padding: 48px 28px; } }
@media(max-width:600px) {
  .feat-wrap { padding: 48px 20px; }
  .feat-preview { display: none; }
  .feat-body { padding: 12px 0; }
  .feat-stat { font-size: 20px; }
}

.feat-label {
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #9A9490;
  margin-bottom: 20px;
  font-family: -apple-system, system-ui, sans-serif;
}

.feat-inbox {
  background: #fff; border: 1.5px solid #D8D3CC;
  border-radius: 18px; overflow: hidden;
  max-width: 900px; margin: 0 auto;
}

.feat-inbox-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: #F5F2ED;
  border-bottom: 1px solid #F0EDE8;
}

.feat-dots { display: flex; gap: 5px; }
.feat-dots span { width: 9px; height: 9px; border-radius: 50%; background: #D4CFC8; }
.feat-dots span:nth-child(1) { background: #3B82F6; }
.feat-dots span:nth-child(2) { background: #FFC04A; }

.feat-inbox-title {
  font-size: 11px; font-weight: 600; color: #7A7470;
  font-family: -apple-system, system-ui, sans-serif;
}

.feat-row {
  display: flex; align-items: center;
  border-bottom: 1px solid #F5F2ED;
  cursor: pointer; transition: background 0.15s; position: relative;
}
.feat-row:last-of-type { border-bottom: none; }
.feat-row:hover { background: #FAFAF8; }
.feat-row.feat-active { background: #FFF8F5; }

.feat-accent {
  width: 3px; align-self: stretch; min-height: 72px;
  background: #F0EDE8; flex-shrink: 0;
}
.feat-row.feat-active .feat-accent { background: #3B82F6; }

.feat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #F0EDE8; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; margin: 0 14px;
  font-size: 11px; font-weight: 800; color: #7A7470;
  font-family: -apple-system, system-ui, sans-serif;
}
.feat-row.feat-active .feat-avatar { background: rgba(59,130,246,0.12); color: #3B82F6; }

.feat-body { flex: 1; padding: 16px 0; min-width: 0; }

.feat-top {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 8px; margin-bottom: 4px;
}

.feat-sender {
  font-size: 13px; font-weight: 700; color: #1A1714;
  font-family: -apple-system, system-ui, sans-serif;
}

.feat-time {
  font-size: 11px; color: #9A9490; flex-shrink: 0;
  font-family: -apple-system, system-ui, sans-serif;
}

.feat-subject {
  font-size: 12px; font-weight: 600; color: #3A3430; margin-bottom: 3px;
  font-family: -apple-system, system-ui, sans-serif;
}

.feat-preview {
  font-size: 12px; color: #7A7470; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 380px; font-family: -apple-system, system-ui, sans-serif;
}
.feat-preview b { color: #1A1714; font-weight: 700; }

.feat-meta {
  padding: 0 18px 0 12px;
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px; flex-shrink: 0;
}

.feat-stat {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px; font-weight: 900;
  color: #1A1714; letter-spacing: -0.5px; line-height: 1;
}

.feat-badge {
  font-size: 9px; font-weight: 700;
  padding: 3px 8px; border-radius: 100px;
  font-family: -apple-system, system-ui, sans-serif;
}
.feat-badge-new { background: rgba(59,130,246,.12); color: #2563EB; }
.feat-badge-done { background: rgba(34,197,94,.1); color: #166534; }
.feat-badge-pro { background: rgba(26,23,20,.07); color: #4A4440; }

.feat-detail {
  display: none; background: #FFF8F5;
  border-top: 1px solid rgba(59,130,246,0.15);
  padding: 14px 20px 14px 67px;
  font-size: 12px; color: #5A5450; line-height: 1.6;
  font-family: -apple-system, system-ui, sans-serif;
}
.feat-detail.feat-open { display: block; }
.feat-hl { color: #3B82F6; font-weight: 700; }

.rr-killer-line {
  text-align: center; font-size: 22px; font-weight: 700;
  color: var(--text2); padding: 48px 24px;
  font-family: var(--font-display); line-height: 1.5;
  max-width: 600px; margin: 0 auto;
}
.rr-killer-line span { color: var(--accent); }

/* ── Proof blocks (What this is built on) ── */
.rr-proof-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; margin-top: 48px;
}
.rr-proof-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px;
}
.rr-proof-icon { font-size: 28px; margin-bottom: 14px; }
.rr-proof-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin-bottom: 14px; font-family: var(--font-display);
}
.rr-proof-list { list-style: none; padding: 0; margin: 0 0 16px; }
.rr-proof-list li {
  font-size: 12px; color: var(--text2); padding: 4px 0 4px 14px;
  position: relative; line-height: 1.5;
}
.rr-proof-list li::before {
  content: '→'; position: absolute; left: 0;
  color: var(--accent); font-size: 10px;
}
.rr-proof-tag {
  font-size: 11px; color: var(--accent); font-weight: 600;
  font-style: italic; border-top: 1px solid var(--border);
  padding-top: 12px; margin-top: 4px;
}

/* ── Data strip ── */
.rr-data-strip {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0; padding: 40px 24px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin: 40px 0 0;
}
.rr-data-point {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 32px; text-align: center;
}
.rr-data-num {
  font-size: 32px; font-weight: 800; color: var(--accent);
  font-family: var(--font-display); line-height: 1;
}
.rr-data-label { font-size: 11px; color: var(--text3); margin-top: 6px; max-width: 140px; line-height: 1.4; }
.rr-data-divider { width: 1px; height: 40px; background: var(--border); flex-shrink: 0; }
.rr-data-source { text-align: center; font-size: 10px; color: var(--text3); margin-top: 12px; font-style: italic; }
@media (max-width: 700px) {
  .rr-data-divider { display: none; }
  .rr-data-point { padding: 12px 20px; }
}


/* ── BRAIN SCAN SECTION ── */
.bs-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; margin-top: 48px; align-items: start;
}
.bs-input-col { display: flex; flex-direction: column; gap: 12px; }
.bs-textarea {
  width: 100%; min-height: 200px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; color: var(--text); font-family: var(--font-mono);
  font-size: 12px; line-height: 1.7; resize: vertical; outline: none;
  box-sizing: border-box; transition: border-color 0.2s;
}
.bs-textarea:focus { border-color: var(--accent); }
.bs-scan-btn {
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--r-lg); padding: 14px 24px; font-size: 14px;
  font-weight: 700; cursor: pointer; font-family: var(--font-body);
  transition: opacity 0.2s, transform 0.1s;
}
.bs-scan-btn:hover { opacity: 0.88; }
.bs-scan-btn:active { transform: scale(0.98); }
.bs-scan-btn:disabled { opacity: 0.5; cursor: default; }
.bs-disclaimer { font-size: 10px; color: var(--text3); line-height: 1.5; font-style: italic; }
.bs-output-col { position: relative; }
.bs-brain-wrap {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px;
}
.bs-brain-svg { width: 100%; height: auto; }
.bs-region { transition: fill 0.6s ease, stroke 0.6s ease; }
.bs-region:hover { stroke-width: 2.5; }
.bs-region-label {
  font-size: 9px; fill: var(--text3); font-family: var(--font-body);
  pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px;
}
.bs-region-tooltip {
  position: absolute; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px; max-width: 220px;
  z-index: 10; box-shadow: var(--shadow-lg); pointer-events: none;
}
.bs-tooltip-title { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.bs-tooltip-body { font-size: 11px; color: var(--text2); line-height: 1.5; }
.bs-tooltip-score { margin-top: 8px; font-size: 10px; color: var(--text3); }
.bs-empty { text-align: center; padding: 40px 20px; color: var(--text3); }
.bs-empty-icon { font-size: 40px; margin-bottom: 12px; }
.bs-empty-text { font-size: 13px; line-height: 1.6; }
.bs-results {
  margin-top: 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.bs-results-head { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.bs-results-label { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--text3); font-family: var(--font-mono); }
.bs-results-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.bs-result-item { display: flex; flex-direction: column; gap: 4px; }
.bs-result-header { display: flex; justify-content: space-between; align-items: center; }
.bs-result-name { font-size: 11px; font-weight: 700; color: var(--text); }
.bs-result-level { font-size: 10px; color: var(--accent); font-weight: 600; }
.bs-result-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.bs-result-bar { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; transition: width 1s cubic-bezier(0.4,0,0.2,1); }
.bs-result-text { font-size: 11px; color: var(--text2); line-height: 1.4; }
.bs-overall { padding: 14px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text2); line-height: 1.5; font-style: italic; }
@media (max-width: 768px) { .bs-layout { grid-template-columns: 1fr; } }

/* ── GLOBAL TAB ── */
.global-wrap {
  padding: 24px;
  max-width: 1100px;
  font-family: "PingFang SC", "Microsoft YaHei", var(--font-body), sans-serif;
}
.global-header { margin-bottom: 20px; }
.global-title {
  font-size: 20px; font-weight: 800;
  color: var(--text); font-family: var(--font-display);
}
.global-sub {
  font-size: 12px; color: var(--text3); margin-top: 4px;
}
.global-cards {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; margin-bottom: 24px;
}
@media(max-width:900px) {
  .global-cards { grid-template-columns: repeat(3,1fr); }
}
@media(max-width:600px) {
  .global-cards { grid-template-columns: repeat(2,1fr); }
}
.global-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px 8px; text-align: center;
  cursor: pointer; transition: all 0.2s;
}
.global-card:hover {
  border-color: #C41E3A; background: rgba(196,30,58,0.06);
  transform: translateY(-1px);
}
.global-card-icon { font-size: 22px; margin-bottom: 6px; }
.global-card-label {
  font-size: 11px; font-weight: 700; color: var(--text);
  line-height: 1.4;
}
.global-card-label span {
  font-size: 10px; color: var(--text3); font-weight: 400;
}
.global-layout {
  display: grid; grid-template-columns: 380px 1fr;
  gap: 24px; align-items: start;
}
@media(max-width:900px) {
  .global-layout { grid-template-columns: 1fr; }
}
.global-field { margin-bottom: 16px; }
.global-label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--text2); margin-bottom: 6px; letter-spacing: 0.3px;
}
.global-hint {
  font-size: 10px; color: var(--text3); font-weight: 400;
  margin-left: 8px;
}
.global-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.global-seg-btn {
  flex: 1; min-width: 70px; padding: 8px 6px; text-align: center;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer; font-size: 11px;
  font-weight: 700; color: var(--text2); transition: all 0.2s;
  font-family: "PingFang SC","Microsoft YaHei",sans-serif; line-height: 1.3;
}
.global-seg-btn small { font-size: 9px; font-weight: 400; color: var(--text3); }
.global-seg-btn.active {
  background: #C41E3A; border-color: #C41E3A; color: #fff;
}
.global-seg-btn.active small { color: rgba(255,255,255,0.75); }
.global-select, .global-input {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 9px 12px; color: var(--text);
  font-size: 12px; outline: none; box-sizing: border-box;
  transition: border-color 0.2s;
}
.global-select:focus, .global-input:focus { border-color: #C41E3A; }
.global-tone-row {
  display: flex; align-items: center; gap: 10px;
}
.global-tone-label {
  font-size: 10px; color: var(--text3); text-align: center;
  line-height: 1.3; min-width: 32px;
}
.global-slider { flex: 1; accent-color: #C41E3A; }
.global-textarea {
  width: 100%; min-height: 160px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px; color: var(--text); font-size: 12px; line-height: 1.7;
  resize: vertical; outline: none; box-sizing: border-box;
  font-family: "PingFang SC","Microsoft YaHei",var(--font-mono),sans-serif;
  transition: border-color 0.2s;
}
.global-textarea:focus { border-color: #C41E3A; }
.global-chars {
  font-size: 10px; color: var(--text3); text-align: right; margin-top: 4px;
}
.global-generate-btn {
  width: 100%; padding: 14px; background: #C41E3A; color: #fff;
  border: none; border-radius: var(--r-lg); font-size: 14px;
  font-weight: 700; cursor: pointer; transition: opacity 0.2s;
  font-family: "PingFang SC","Microsoft YaHei",var(--font-body),sans-serif;
}
.global-generate-btn:hover { opacity: 0.88; }
.global-generate-btn:disabled { opacity: 0.4; cursor: default; }
.global-disclaimer {
  font-size: 10px; color: var(--text3); margin-top: 10px; line-height: 1.7;
}
.global-empty {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 40px 24px; text-align: center;
}
.global-empty-icon { font-size: 40px; margin-bottom: 12px; }
.global-empty-title {
  font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.global-empty-sub { font-size: 12px; color: var(--text3); margin-bottom: 20px; }
.global-tips {
  text-align: left; display: flex; flex-direction: column; gap: 8px;
  background: var(--surface2); border-radius: var(--r); padding: 14px;
}
.global-tip { font-size: 11px; color: var(--text2); line-height: 1.5; }
.global-email-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 14px;
}
.global-email-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.global-email-badge { font-size: 11px; font-weight: 700; color: #C41E3A; }
.global-copy-btn {
  font-size: 11px; background: var(--surface3); border: 1px solid var(--border2);
  border-radius: 6px; padding: 4px 12px; cursor: pointer; color: var(--text2);
  font-family: "PingFang SC","Microsoft YaHei",var(--font-body),sans-serif;
}
.global-copy-btn:hover { border-color: #C41E3A; color: #C41E3A; }
.global-email-body {
  padding: 18px; font-size: 13px; color: var(--text);
  line-height: 1.8; white-space: pre-wrap; font-family: var(--font-mono);
}
.global-why-card {
  background: rgba(196,30,58,0.05); border: 1px solid rgba(196,30,58,0.2);
  border-radius: var(--r-lg); padding: 16px; margin-bottom: 14px;
}
.global-why-title {
  font-size: 12px; font-weight: 700; color: #C41E3A; margin-bottom: 10px;
}
.global-why-body { font-size: 12px; color: var(--text2); line-height: 1.7; }
.global-improvement {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px; margin-bottom: 14px;
  font-size: 12px; color: var(--text2); line-height: 1.6;
}
.global-regen-btn {
  width: 100%; padding: 10px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  font-size: 12px; cursor: pointer; color: var(--text2);
  font-family: "PingFang SC","Microsoft YaHei",var(--font-body),sans-serif;
}
.global-regen-btn:hover { border-color: #C41E3A; color: #C41E3A; }
.global-loading {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.global-loading-dots { display: flex; gap: 6px; margin-bottom: 16px; }
.global-loading-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: #C41E3A;
  animation: globalDot 1.4s infinite ease-in-out;
}
.global-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.global-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes globalDot {
  0%,80%,100%{transform:scale(0.6);opacity:0.4}
  40%{transform:scale(1);opacity:1}
}
.global-loading-text {
  font-size: 13px; color: var(--text3);
  font-family: "PingFang SC","Microsoft YaHei",sans-serif;
}

/* ── GLOBAL COUNTRY SELECTOR ── */
.glo-screen { padding: 24px; overflow: visible; }
.glo-header { margin-bottom: 24px; }
.glo-title {
  font-size: 22px; font-weight: 800;
  color: var(--text); font-family: var(--font-display);
}
.glo-sub {
  font-size: 12px; color: var(--text3); margin-top: 6px; line-height: 1.6;
}
.glo-back-btn {
  background: none; border: 1px solid var(--border);
  border-radius: var(--r); padding: 6px 14px;
  font-size: 12px; color: var(--text2); cursor: pointer;
  margin-bottom: 16px; transition: 0.2s;
}
.glo-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.glo-region-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text3);
  margin: 20px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.glo-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.glo-country-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 8px; text-align: center;
  cursor: pointer; transition: all 0.18s;
}
.glo-country-card:hover {
  border-color: var(--accent);
  background: rgba(59,130,246,0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}
.glo-country-flag { font-size: 32px; margin-bottom: 6px; line-height: 1; }
.glo-country-name {
  font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.3;
}
.glo-country-local {
  font-size: 10px; color: var(--text3); margin-top: 2px; line-height: 1.3;
}
.glo-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; margin-top: 8px;
}
.glo-lang-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 16px; cursor: pointer;
  transition: all 0.18s;
}
.glo-lang-card:hover {
  border-color: var(--accent);
  background: rgba(59,130,246,0.06);
}
.glo-lang-name { font-size: 14px; font-weight: 700; color: var(--text); }
.glo-lang-local { font-size: 18px; color: var(--text2); margin-top: 4px; }
.glo-variant-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.glo-vtab {
  flex: 1; padding: 10px 8px; text-align: center;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer; font-size: 11px;
  font-weight: 700; color: var(--text2); transition: 0.2s;
}
.glo-vtab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.glo-vtab-label-local { font-size: 10px; color: var(--text3); margin-top: 2px; font-weight: 400; }
.glo-vtab.active .glo-vtab-label-local { color: rgba(255,255,255,0.7); }
.glo-variant-body { margin-bottom: 12px; }
.glo-warnings {
  background: rgba(255,193,7,0.08); border: 1px solid rgba(255,193,7,0.3);
  border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 14px;
}
.glo-warn-title { font-size: 11px; font-weight: 700; color: #b8860b; margin-bottom: 10px; }
.glo-warn-item {
  font-size: 12px; color: var(--text2); padding: 6px 0;
  border-bottom: 1px solid var(--border); line-height: 1.5;
}
.glo-warn-item:last-child { border-bottom: none; }
.glo-corrections {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 14px;
}
.glo-corr-title {
  font-size: 11px; font-weight: 700; color: var(--text2);
  padding: 10px 14px; background: var(--surface2); border-bottom: 1px solid var(--border);
}
.glo-corr-item {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 12px; line-height: 1.5;
}
.glo-corr-item:last-child { border-bottom: none; }
.glo-corr-from { color: var(--text3); text-decoration: line-through; font-style: italic; }
.glo-corr-to { color: var(--accent); font-weight: 600; }
.glo-corr-reason { color: var(--text2); margin-top: 3px; }
.glo-email-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.glo-context-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 12px;
  font-size: 12px; color: var(--text2); font-weight: 600;
}

/* ── GLOBAL TAB: NEW COUNTRY SELECTOR ── */
.glo-search-row {
  margin-bottom: 14px;
}
.glo-search-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 14px; outline: none;
  transition: border-color 0.2s;
}
.glo-search-input:focus { border-color: var(--accent); }
.glo-region-tabs {
  display: flex; gap: 8px; margin-bottom: 18px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.glo-region-tabs::-webkit-scrollbar { display: none; }
.glo-rtab {
  flex-shrink: 0; padding: 6px 14px;
  border-radius: 100px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text2);
  font-size: 11px; font-weight: 700; cursor: pointer; transition: 0.2s;
  white-space: nowrap;
}
.glo-rtab.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.glo-rtab:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
.glo-country-grid-new {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.glo-ccard {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; overflow: hidden; cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.25s ease, border-color 0.2s;
}
.glo-ccard:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(59,130,246,0.18);
}
.glo-flag-wrap {
  width: 100%; aspect-ratio: 16/10; overflow: hidden;
  background: var(--surface2);
}
.glo-flag-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.glo-ccard-info {
  padding: 8px 10px 10px;
}
.glo-ccard-name {
  font-size: 12px; font-weight: 800; color: var(--text); line-height: 1.3;
}
.glo-ccard-local {
  font-size: 10px; color: var(--text3); margin-top: 2px;
}
.glo-ccard-langs {
  font-size: 9px; color: var(--accent); font-weight: 700;
  margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
/* Language screen */
.glo-lang-screen-inner { display: flex; flex-direction: column; align-items: center; }
.glo-lang-country-hero {
  text-align: center; margin-bottom: 24px;
}
.glo-lang-flag-hero {
  width: 120px; height: 75px; object-fit: cover;
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto;
}
.glo-lang-hero-name {
  font-size: 20px; font-weight: 800; color: var(--text);
}
.glo-lang-hero-sub {
  font-size: 12px; color: var(--text3); margin-top: 4px;
}
.glo-lang-grid-new {
  width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px;
}
.glo-lcard {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px; cursor: pointer;
  transition: all 0.2s;
}
.glo-lcard:hover { border-color: var(--accent); background: rgba(59,130,246,0.05); }
.glo-lcard-left {}
.glo-lcard-native { font-size: 17px; font-weight: 700; color: var(--text); }
.glo-lcard-eng { font-size: 12px; color: var(--text3); margin-top: 2px; }
.glo-lcard-arrow { font-size: 18px; color: var(--text3); }
/* Context pill */
.glo-context-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 100px; padding: 5px 14px 5px 6px;
}
.glo-context-flag {
  width: 28px; height: 18px; object-fit: cover;
  border-radius: 4px; flex-shrink: 0;
}
.glo-context-text {
  font-size: 12px; font-weight: 700; color: var(--text2);
}

/* ── GLO REDESIGN v2 ── */
.glo-top-bar { padding: 20px 24px 0; }

.glo-flag-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 14px 24px; overflow: visible;
  scrollbar-width: none; flex-wrap: nowrap;
  border-bottom: 1px solid var(--border);
}
.glo-flag-bar::-webkit-scrollbar { display: none; }
.glo-flag-btn {
  font-size: 22px; background: none; border: 1px solid transparent;
  border-radius: 8px; padding: 4px 6px; cursor: pointer;
  transition: all 0.15s; flex-shrink: 0;
}
.glo-flag-btn:hover { border-color: var(--accent); background: rgba(59,130,246,0.08); transform: scale(1.15); }
.glo-flag-btn.active { border-color: var(--accent); background: rgba(59,130,246,0.12); }
.glo-flag-group-label {
  font-size: 9px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; margin: 0 2px;
}
.glo-flag-divider { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; margin: 0 6px; }
.glo-lang-group { position: relative; display: inline-flex; align-items: center; }
.glo-group-trigger { display: flex !important; align-items: center; gap: 2px; }
.glo-group-caret { font-size: 9px; color: #9A9590; line-height: 1; pointer-events: none; }
.glo-lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #E4E0D8;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 9999;
  min-width: 150px;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.glo-lang-dropdown.open { display: flex; }
.glo-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #1A1714;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
  font-family: inherit;
}
.glo-lang-option:hover { background: #F5F3EF; }

.glo-main-layout {
  display: grid; grid-template-columns: 400px 1fr;
  gap: 0; min-height: 0; overflow: hidden;
}
.glo-input-col {
  padding: 16px 20px; overflow-y: auto;
  border-right: 1px solid var(--border);
}
.glo-output-col { padding: 16px 20px; overflow-y: auto; }

@media(max-width: 900px) {
  .glo-main-layout { grid-template-columns: 1fr; }
  .glo-input-col { border-right: none; border-bottom: 1px solid var(--border); }
}

.glo-lang-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.25);
  border-radius: 100px; padding: 5px 12px; margin-bottom: 10px;
  font-size: 12px; font-weight: 600; color: var(--accent);
}
.glo-lang-override-btn {
  background: none; border: none; color: var(--text3);
  font-size: 11px; cursor: pointer; margin-left: auto; padding: 0;
}
.glo-lang-override-btn:hover { color: var(--accent); }

.glo-smart-input { direction: ltr; }
.glo-smart-input.rtl { direction: rtl; text-align: right; }

.glo-context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.glo-context-grid .global-field { margin-bottom: 0; }

.glo-uk-us-toggle { display: flex; gap: 6px; }
.glo-toggle-btn {
  flex: 1; padding: 7px 8px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r);
  font-size: 11px; font-weight: 700; cursor: pointer; color: var(--text2);
  transition: all 0.15s;
}
.glo-toggle-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.global-disclaimer { font-size: 10px; color: var(--text3); text-align: center; margin-top: 8px; }

.glo-empty-state { text-align: center; padding: 40px 20px; }
.glo-empty-icon { font-size: 48px; margin-bottom: 14px; }
.glo-empty-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.glo-empty-sub { font-size: 12px; color: var(--text3); margin-bottom: 20px; }
.glo-feature-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.glo-pill {
  font-size: 11px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 12px; color: var(--text2);
}

.glo-email-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 12px;
}
.glo-email-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--surface2); border-bottom: 1px solid var(--border);
}
.glo-email-subject { font-size: 11px; font-weight: 700; color: var(--text3); }
.glo-email-meta { font-size: 10px; color: var(--text3); margin-top: 2px; }
.glo-email-body {
  padding: 16px; font-size: 13px; color: var(--text);
  line-height: 1.75; white-space: pre-wrap; font-family: var(--font-mono);
}
.glo-copy-btn {
  font-size: 11px; background: var(--surface3); border: 1px solid var(--border2);
  border-radius: 6px; padding: 4px 12px; cursor: pointer; color: var(--text2);
  white-space: nowrap;
}
.glo-copy-btn:hover { border-color: var(--accent); color: var(--accent); }

.glo-confidence {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px; margin-bottom: 12px;
}
.glo-conf-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.glo-conf-title { font-size: 11px; font-weight: 700; color: var(--text2); }
.glo-conf-score { font-size: 20px; font-weight: 800; color: var(--accent); }
.glo-conf-bar-wrap {
  background: var(--bg,#F0EDE8); border-radius: 100px;
  height: 6px; margin-bottom: 10px; overflow: hidden;
}
.glo-conf-bar {
  height: 100%; background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  border-radius: 100px; transition: width 0.6s ease; width: 0;
}
.glo-conf-dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.glo-conf-dim { font-size: 10px; color: var(--text3); text-align: center; }
.glo-conf-dim-val { font-size: 12px; font-weight: 700; color: var(--text); }

.glo-section-title { font-size: 11px; font-weight: 700; color: var(--text2); margin-bottom: 8px; }

.glo-warnings {
  background: rgba(234,179,8,0.06); border: 1px solid rgba(234,179,8,0.25);
  border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 12px;
}
.glo-warn-item {
  font-size: 12px; color: var(--text2); padding: 6px 0;
  border-bottom: 1px solid rgba(234,179,8,0.15); line-height: 1.5;
}
.glo-warn-item:last-child { border-bottom: none; padding-bottom: 0; }
.glo-warn-high { color: #ef4444; font-weight: 700; font-size: 10px; margin-right: 4px; }
.glo-warn-med { color: #f59e0b; font-weight: 700; font-size: 10px; margin-right: 4px; }
.glo-warn-low { color: #22c55e; font-weight: 700; font-size: 10px; margin-right: 4px; }

.glo-transforms {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 12px;
}
.glo-transform-item { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
.glo-transform-item:last-child { border-bottom: none; }
.glo-transform-from { color: var(--text3); text-decoration: line-through; font-style: italic; font-size: 13px; }
.glo-transform-to { color: var(--accent); font-weight: 600; font-size: 13px; }
.glo-transform-reason { color: var(--text2); margin-top: 4px; line-height: 1.5; }
.glo-transform-cat {
  font-size: 9px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 6px; color: var(--text3); margin-left: 6px; vertical-align: middle;
}

.glo-edu {
  background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.2);
  border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 12px;
}
.glo-edu-item { margin-bottom: 10px; }
.glo-edu-item:last-child { margin-bottom: 0; }
.glo-edu-title { font-size: 11px; font-weight: 700; color: #6366f1; margin-bottom: 3px; }
.glo-edu-content { font-size: 12px; color: var(--text2); line-height: 1.5; }

.glo-followups {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 12px;
}
.glo-followup-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px;
  cursor: pointer; transition: 0.15s;
}
.glo-followup-card:last-child { margin-bottom: 0; }
.glo-followup-card:hover { border-color: var(--accent); }
.glo-followup-q { font-size: 12px; font-weight: 600; color: var(--text); }
.glo-followup-why { font-size: 11px; color: var(--text3); margin-top: 3px; }


/* ── Phosphor Icons sizing ── */
/* Phosphor star icons in difficulty ratings */
.diff-stars .ph-fill, .diff-stars .ph { font-size: 11px; }
.r-testi-stars .ph-fill { font-size: 14px; color: #f59e0b; }

.glo-empty-icon .ph-bold { font-size: 48px; }
.bs-app-empty-icon .ph-bold { font-size: 48px; }
.rr-proof-icon .ph-bold { font-size: 28px; }
.r-persona-icon .ph-bold { font-size: 20px; }
.ae-icon .ph-bold { font-size: 22px; }
.app-tab .ph-bold { font-size: 13px; }
.glo-section-title .ph-bold { font-size: 13px; }
.glo-pill .ph-bold { font-size: 12px; }
.global-generate-btn .ph-bold { font-size: 15px; }

/* ── Brain Scan App Tab ── */
.bs-app-wrap { display:flex; flex-direction:column; height:100%; }
.bs-app-header { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.bs-app-header h3 { margin:0; font-size:13px; font-weight:700; }
.bs-app-subtitle { font-size:10px; color:var(--text3); }
.bs-app-layout { display:grid; grid-template-columns:1fr 1fr; flex:1; min-height:0; }
.bs-app-left { padding:14px 16px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; border-right:1px solid var(--border); }
.bs-app-right { padding:14px 16px; display:flex; flex-direction:column; align-items:center; overflow-y:auto; }
.bs-app-textarea { width:100%; min-height:150px; background:var(--surface2); border:1px solid var(--border2); border-radius:8px; padding:10px 12px; color:var(--text); font-family:var(--font-body); font-size:12px; line-height:1.6; resize:vertical; box-sizing:border-box; outline:none; transition:border-color 0.15s; }
.bs-app-textarea:focus { border-color:var(--accent); }
.bs-app-scan-btn { background:var(--accent); color:#000; border:none; border-radius:8px; padding:10px 16px; font-family:var(--font-body); font-size:12px; font-weight:700; cursor:pointer; transition:opacity 0.15s; width:100%; }
.bs-app-scan-btn:hover { opacity:0.85; }
.bs-app-scan-btn:disabled { opacity:0.5; cursor:not-allowed; }
.bs-app-disclaimer { font-size:10px; color:var(--text3); line-height:1.4; margin:0; font-style:italic; }
.bs-app-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; text-align:center; flex:1; }
.bs-app-empty-icon { font-size:28px; opacity:0.45; }
.bs-app-empty-text { font-size:11px; color:var(--text3); line-height:1.5; }
.bs-app-results-head { font-size:9px; font-weight:700; letter-spacing:0.1em; color:var(--text3); padding-bottom:6px; border-bottom:1px solid var(--border); }
.bs-app-results-list { display:flex; flex-direction:column; gap:8px; padding:8px 0; }
.bs-app-overall { font-size:11px; color:var(--text2); line-height:1.6; padding:10px 12px; background:var(--surface2); border-radius:6px; border:1px solid var(--border); font-style:italic; }
.bs-app-brain-wrap { position:relative; width:100%; }
@media (max-width: 768px) { .bs-app-layout { grid-template-columns:1fr; } }

/* ── Steps ── */
.r-steps { display: flex; flex-direction: column; gap: 0; max-width: 600px; margin-top: 48px; }
.r-step { display: flex; gap: 28px; align-items: flex-start; }
.r-step-num {
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  color: var(--accent); background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.2); border-radius: 8px;
  padding: 6px 10px; flex-shrink: 0; margin-top: 2px; letter-spacing: 0.05em;
}
.r-step-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); margin-bottom: 8px; }
.r-step-desc { font-size: 14px; color: var(--text2); line-height: 1.8; font-family: var(--font-body); max-width: 460px; }
.r-step-connector { width: 1px; height: 32px; background: var(--border); margin-left: 23px; }

/* ── Persona Grid ── */
.r-persona-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px;
}
@media (max-width: 720px) { .r-persona-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .r-persona-grid { grid-template-columns: 1fr; } }
.r-persona-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 24px 20px;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s var(--ease);
}
.r-persona-card:hover { border-color: rgba(37,99,235,0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.3); transform: translateY(-3px); }
.r-persona-icon { font-size: 28px; margin-bottom: 12px; line-height: 1; }
.r-persona-role { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--text); margin-bottom: 8px; }
.r-persona-tag {
  display: inline-block; font-size: 10px; font-weight: 700; border-radius: 4px;
  padding: 2px 8px; margin-bottom: 10px; font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.r-tag-danger  { background: rgba(255,59,92,0.1);   color: var(--danger);  border: 1px solid rgba(255,59,92,0.2); }
.r-tag-warning { background: rgba(255,179,71,0.1);  color: var(--warn);    border: 1px solid rgba(255,179,71,0.2); }
.r-tag-purple  { background: rgba(37,99,235,0.1); color: var(--accent); border: 1px solid rgba(37,99,235,0.2); }
.r-tag-success { background: rgba(0,211,127,0.1);   color: var(--success); border: 1px solid rgba(0,211,127,0.2); }
.r-persona-desc { font-size: 12px; color: var(--text3); line-height: 1.7; font-family: var(--font-body); }
.r-persona-card-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: rgba(37,99,235,0.04); border-color: rgba(37,99,235,0.15);
}
.r-persona-more-num { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--accent); line-height: 1; }
.r-persona-more-label { font-size: 13px; color: var(--text2); margin-top: 6px; font-family: var(--font-body); }

/* ── Testimonials ── */
.r-testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 720px) { .r-testi-grid { grid-template-columns: 1fr; } }
.r-testi-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.r-testi-card:hover { border-color: var(--border2); box-shadow: var(--shadow-md); }
.r-testi-stars { color: #f59e0b; font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; }
.r-testi-quote {
  font-size: 14px; color: var(--text2); line-height: 1.8; margin-bottom: 20px;
  font-style: normal; border: none; padding: 0; font-family: var(--font-body);
}
.r-testi-quote em { font-style: italic; color: var(--text); }
.r-testi-name { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--text); }
.r-testi-role { font-size: 11px; color: var(--text3); margin-top: 3px; font-family: var(--font-body); }

/* ── Pricing ── */
.r-price-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 20px;
  padding: 48px 40px; text-align: center; margin-top: 48px; position: relative; overflow: hidden;
}
.r-price-card::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.r-price-badge {
  display: inline-block; background: rgba(0,211,127,0.08); border: 1px solid rgba(0,211,127,0.25);
  border-radius: 100px; padding: 6px 18px; font-size: 12px; font-weight: 700; color: var(--success);
  font-family: var(--font-body); margin-bottom: 24px;
}
.r-price-amount { font-family: var(--font-display); font-weight: 800; font-size: 72px; color: var(--text); line-height: 1; margin-bottom: 12px; letter-spacing: -0.04em; }
.r-price-amount span { font-size: 22px; color: var(--text3); font-weight: 600; }
.r-price-sub { font-size: 14px; color: var(--text2); max-width: 360px; margin: 0 auto 32px; line-height: 1.7; font-family: var(--font-body); }
.r-price-features {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 40px; max-width: 480px; margin: 0 auto 36px; text-align: left;
}
.r-price-features li { font-size: 14px; color: var(--text2); display: flex; align-items: center; gap: 10px; font-family: var(--font-body); }
.r-check { color: var(--success); font-weight: 700; }
.r-price-note { font-size: 12px; color: var(--text3); margin-top: 14px; font-family: var(--font-body); }

/* ── New Pricing ── */
.pricing-headline{font-family:'Fraunces',Georgia,serif;font-size:44px;font-weight:600;color:var(--r-text);line-height:1.1;margin-bottom:10px}
.pricing-headline em{font-style:italic;color:#3B82F6}
.pricing-sub{font-size:15px;color:var(--r-muted);margin-bottom:16px;line-height:1.6}
.pricing-logic-bar{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap}
.pricing-logic-pill{font-size:12px;color:var(--r-muted);background:var(--r-surface);padding:5px 12px;border-radius:100px;display:flex;align-items:center;gap:6px}
.pricing-logic-dot{width:5px;height:5px;border-radius:50%;background:#3B82F6;flex-shrink:0}
.pricing-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px;align-items:start}
.pricing-plan{background:var(--r-card,#fff);border:0.5px solid var(--r-border);border-radius:16px;padding:24px;position:relative;display:flex;flex-direction:column}

/* Billing toggle */
.bill-toggle{display:flex;align-items:center;gap:4px;background:var(--r-surface);border:1px solid var(--r-border);border-radius:100px;padding:4px;margin-bottom:36px;width:fit-content;margin-left:auto;margin-right:auto}
.bill-opt{font-size:13px;font-weight:500;color:var(--r-muted);background:none;border:none;border-radius:100px;padding:8px 18px;cursor:pointer;font-family:var(--font-body);transition:all 0.2s;display:flex;align-items:center;gap:6px;white-space:nowrap}
.bill-opt:hover{color:var(--r-text)}
.bill-active{background:#3B82F6;color:#fff !important}
.bill-save{font-size:11px;font-weight:700;opacity:0.85}
.bill-active .bill-save{opacity:1}
.bill-annual-hint{font-size:12px;font-weight:600;color:#3B82F6;text-align:center;margin-top:-24px;margin-bottom:28px;letter-spacing:0.01em}

/* Tagline under plan name */
.pp-tagline{font-size:13px;color:var(--r-muted);margin-bottom:12px;line-height:1.4}

/* Billing note */
.pp-billing-note{font-size:12px;color:var(--r-muted);margin-bottom:14px}

/* Tier selector */
.pp-tiers{display:flex;gap:4px;margin-bottom:10px;background:var(--r-surface);border:1px solid var(--r-border);border-radius:100px;padding:3px;width:fit-content}
.pp-tier{font-size:12px;font-weight:600;color:var(--r-muted);background:none;border:none;border-radius:100px;padding:5px 14px;cursor:pointer;font-family:var(--font-body);transition:all 0.2s}
.pp-tier:hover{color:var(--r-text)}
.pp-tier-active{background:#3B82F6;color:#fff !important}
.pp-featured{border:2px solid #3B82F6}
.pp-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#3B82F6;color:#fff;font-size:11px;font-weight:500;padding:3px 14px;border-radius:100px;white-space:nowrap}
.pp-name{font-size:11px;font-weight:500;color:var(--r-muted);text-transform:uppercase;letter-spacing:.1em;padding-bottom:10px}
.pp-price{font-size:36px;font-weight:500;color:var(--r-text);line-height:1;display:flex;align-items:flex-start;gap:2px;padding-bottom:4px}
.pp-price sup{font-size:16px;margin-top:6px}
.pp-per{font-size:13px;font-weight:400;color:var(--r-muted);align-self:flex-end;margin-bottom:3px;margin-left:2px}
.pp-custom{font-size:26px;font-weight:500;color:var(--r-text);padding-bottom:4px}
.pp-hook{font-size:13px;color:var(--r-muted);line-height:1.5;padding:10px 0}
.pp-cta{border-radius:9px;padding:11px 14px;font-size:13px;font-weight:500;cursor:pointer;text-align:center;border:0.5px solid var(--r-border);display:block;width:100%;white-space:nowrap;text-decoration:none;box-sizing:border-box}
.pp-primary{background:#3B82F6;color:#fff !important;border-color:#3B82F6}
.pp-outline{background:transparent;color:var(--r-text)}
.pp-ghost{background:var(--r-surface);color:var(--r-muted);border-color:transparent}
.pp-features{padding-top:20px}
.pp-divider{border:none;border-top:0.5px solid var(--r-border);margin-bottom:12px}
.pp-section-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--r-muted);margin-bottom:8px;margin-top:12px;display:block}
.pp-feat{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.pp-chk{width:16px;height:16px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.pp-yes{background:rgba(59,130,246,0.1)}
.pp-once{background:rgba(59,130,246,0.08)}
.pp-no{background:var(--r-surface);opacity:.45}
.pp-chk svg{width:8px;height:8px}
.pp-feat-text{font-size:13px;color:var(--r-text);line-height:1.4;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.pp-muted{color:var(--r-muted) !important}
.pp-limit{font-size:11px;color:#3B82F6;font-weight:500}
.pp-once-label{font-size:11px;color:#1E40AF;font-weight:500}
.pp-tag{display:inline-flex;align-items:center;font-size:10px;background:rgba(59,130,246,0.1);color:#c94e1f;padding:1px 7px;border-radius:100px;line-height:1.6}
.pp-tag-dim{background:var(--r-surface);color:var(--r-muted)}
.pricing-usage{background:var(--r-surface);border-radius:14px;padding:24px 28px;display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.pu-title{font-size:14px;font-weight:500;color:var(--r-text);margin-bottom:4px}
.pu-sub{font-size:13px;color:var(--r-muted)}
.pu-items{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.pu-item{font-size:13px;color:var(--r-muted);display:flex;align-items:center;gap:7px}
.pu-dot{width:4px;height:4px;border-radius:50%;background:#3B82F6;flex-shrink:0}
@media(max-width:860px){.pricing-plans{grid-template-columns:1fr}}
@media(max-width:520px){.pricing-plans{grid-template-columns:1fr}.bill-toggle{flex-wrap:wrap;justify-content:center}}

/* ── FAQ ── */
.r-faq { margin-top: 48px; display: flex; flex-direction: column; }
.r-faq-item { border-top: 1px solid var(--border); }
.r-faq-item:last-child { border-bottom: 1px solid var(--border); }
.r-faq-q {
  padding: 20px 0; font-family: var(--font-body);
  font-size: 15px; font-weight: 600; color: var(--text);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  transition: color 0.15s;
}
.r-faq-q::-webkit-details-marker { display: none; }
.r-faq-q:hover { color: var(--accent); }
.r-faq-q::after {
  content: '+'; font-size: 22px; font-weight: 300; color: var(--text3);
  flex-shrink: 0; transition: transform 0.25s var(--ease), color 0.15s; line-height: 1;
}
.r-faq-item[open] .r-faq-q::after { transform: rotate(45deg); color: var(--accent); }
.r-faq-item[open] .r-faq-q { color: var(--accent); }
.r-faq-a {
  padding: 0 24px 20px 0; font-size: 14px; color: var(--text2); line-height: 1.8;
  font-family: var(--font-body); max-width: 600px;
}
.r-faq-a strong { color: var(--text); }
.r-faq-a em { color: var(--accent); font-style: italic; }

/* ── Final CTA ── */
.r-final-cta { background: #1A1614; position: relative; overflow: hidden; padding: 100px 0; }
.r-final-cta::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(59,130,246,0.1) 1px, transparent 1px); background-size:28px 28px; pointer-events:none; }
.r-final-cta::after { content:''; position:absolute; width:500px; height:300px; background:rgba(59,130,246,0.07); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); filter:blur(80px); pointer-events:none; }
.rfc-inner { max-width:1080px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; z-index:1; }
.rfc-eyebrow { font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#3B82F6; margin-bottom:16px; }
.rfc-headline { font-family:'Fraunces',Georgia,serif; font-weight:800; font-size:clamp(30px,3.5vw,48px); line-height:1.1; letter-spacing:-0.03em; color:#F0EDE8; margin-bottom:20px; }
.rfc-headline em { font-style:italic; color:#3B82F6; }
.rfc-sub { font-family:var(--font-body); font-size:15px; color:rgba(240,237,232,0.6); line-height:1.7; margin-bottom:40px; max-width:420px; }
.rfc-stats { display:flex; gap:32px; }
.rfc-stat-val { font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:28px; color:#F0EDE8; line-height:1; }
.rfc-stat-lbl { font-family:var(--font-body); font-size:11px; color:rgba(240,237,232,0.45); margin-top:4px; }
.rfc-card { background:#231F1C; border:1px solid rgba(59,130,246,0.2); border-radius:16px; padding:24px; box-shadow:0 24px 64px rgba(0,0,0,0.5); }
.rfc-card-chrome { display:flex; gap:6px; margin-bottom:16px; }
.rfc-dot { width:10px; height:10px; border-radius:50%; }
.rfc-dot-r { background:#FF5F57; }
.rfc-dot-y { background:#FEBC2E; }
.rfc-dot-g { background:#28C840; }
.rfc-label { font-family:var(--font-mono); font-size:10px; color:rgba(240,237,232,0.35); text-align:right; margin-bottom:6px; }
.rfc-textarea { width:100%; background:#15120F; border:1px solid rgba(59,130,246,0.15); border-radius:8px; padding:14px; font-family:var(--font-mono); font-size:13px; color:#C8C3BC; resize:vertical; min-height:140px; outline:none; box-sizing:border-box; line-height:1.6; transition:border-color 0.2s; }
.rfc-textarea:focus { border-color:rgba(59,130,246,0.45); }
.rfc-textarea::placeholder { color:rgba(200,195,188,0.35); }
.rfc-btn {
  display:block; width:100%; margin-top:14px; padding:15px 20px;
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%);
  color:#fff; font-family:var(--font-body); font-size:16px; font-weight:700;
  border:none; border-radius:10px; cursor:pointer;
  transition: transform 0.2s, box-shadow 0.3s;
  box-shadow: 0 4px 20px rgba(59,130,246,0.35), 0 0 0 0 rgba(59,130,246,0);
  position: relative; overflow: hidden; letter-spacing: 0.3px;
}
.rfc-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: rfcShimmer 3s ease-in-out infinite;
}
@keyframes rfcShimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}
.rfc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(59,130,246,0.5), 0 0 60px rgba(59,130,246,0.15);
}
.rfc-btn:active { transform:scale(0.97) translateY(0); }
.rfc-trust { display:flex; justify-content:center; gap:20px; margin-top:14px; flex-wrap:wrap; }
.rfc-trust-item { font-family:var(--font-body); font-size:11px; color:rgba(240,237,232,0.35); display:flex; align-items:center; gap:5px; }
.rfc-trust-item i { font-size:13px; color:rgba(59,130,246,0.6); }
@media (max-width:768px) {
  .rfc-inner { grid-template-columns:1fr; gap:40px; }
  .rfc-sub { max-width:none; }
  .r-final-cta { padding:64px 0; }
}

/* ── Final CTA: light-mode overrides ── */
.r-final-cta { background: #F8F6F3; }
.r-final-cta::before { background-image: radial-gradient(circle, rgba(59,130,246,0.08) 1px, transparent 1px); }
.r-final-cta::after { background: rgba(59,130,246,0.045); }
.rfc-headline { color: #1A1714; }
.rfc-headline em { color: #3B82F6; }
.rfc-sub { color: rgba(26,23,20,0.55); }
.rfc-stat-val { color: #1A1714; }
.rfc-stat-lbl { color: rgba(26,23,20,0.45); }
.rfc-card { background: #231F1C; border: 1px solid rgba(59,130,246,0.18); box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05); }

/* ── Footer ── */
.r-footer { border-top: 1px solid var(--border); background: #F0EDE8; padding: 40px 24px; position: relative; z-index: 1; }
.r-footer-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.r-footer-logo { font-size: 16px; }
.r-footer-copy { font-size: 12px; color: var(--text3); font-family: var(--font-body); }
.r-footer-links { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text3); font-family: var(--font-body); }
.r-footer-link {
  background: none; border: none; cursor: pointer;
  color: var(--text3); font-size: 12px; font-family: var(--font-body);
  text-decoration: underline; text-decoration-color: var(--border2);
  transition: color 0.15s; padding: 0;
}
.r-footer-link:hover { color: var(--text); }

/* ── PHOSPHOR HERO ── */
.ph-hero {
  background: #F0EDE8;
  border-radius: 0;
  overflow: hidden;
  font-family: -apple-system, system-ui, sans-serif;
  position: relative;
}

.ph-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 80px 72px 64px;
}
@media (max-width: 960px) {
  .ph-grid { grid-template-columns: 1fr; gap: 40px; padding: 80px 40px 52px; }
  .ph-card { max-width: 100%; width: 100%; }
  .ph-email-source { text-align: center; margin-top: 12px; margin-bottom: 0; padding: 0 20px; }
}
@media (max-width: 600px) {
  .ph-grid { padding: 72px 20px 40px; gap: 32px; }
  .ph-h1 { font-size: 48px; letter-spacing: -1.5px; }
  .ph-cta-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ph-btn-dark, .ph-btn-outline { width: 100%; justify-content: center; padding: 14px 20px; }
  .ph-card-email { font-size: 13px; line-height: 1.65; }
  .ph-card-body { padding: 14px; }
  .ph-card-score { padding: 14px; }
  .ph-score-num { font-size: 42px; }
  .ph-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .ph-stat { border-right: none; border-bottom: 1px solid rgba(26,23,20,0.08); padding: 16px; }
  .ph-stat:nth-child(odd) { border-right: 1px solid rgba(26,23,20,0.08); }
  .ph-stat:last-child { border-bottom: none; }
  .ph-stat:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .ph-stat-num { font-size: 36px; }
}

.ph-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #4A4440;
  background: rgba(26,23,20,0.07);
  border: 1px solid rgba(26,23,20,0.1);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 24px;
}
.ph-tag-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  animation: phPulse 2s ease-in-out infinite;
}
@keyframes phPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.ph-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(52px, 5.8vw, 82px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -2.5px;
  color: #1A1714;
  margin-bottom: 4px;
}
.ph-h1 em {
  font-style: italic;
  color: #3B82F6;
}

.ph-desc {
  font-size: 15px;
  line-height: 1.72;
  color: #5A5450;
  max-width: 400px;
  margin: 20px 0 32px;
}

.ph-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.ph-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1A1714;
  color: #F0EDE8;
  border: none;
  border-radius: 100px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}
.ph-btn-dark:hover { background: #3B82F6; }

.ph-btn-outline {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #1A1714;
  border: 1.5px solid rgba(26,23,20,0.2);
  border-radius: 100px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s;
  font-family: inherit;
}
.ph-btn-outline:hover { border-color: #1A1714; }

.ph-proof {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #7A7470;
}
.ph-proof-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Email demo card */
.ph-card {
  background: #fff;
  border: 1.5px solid #D8D3CC;
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  justify-self: center;
}
.ph-card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: #F5F2ED;
  border-bottom: 1px solid #F0EDE8;
}
.ph-card-dots {
  display: flex;
  gap: 5px;
}
.ph-card-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D4CFC8;
}
.ph-card-dots span:nth-child(1) { background: #3B82F6; }
.ph-card-dots span:nth-child(2) { background: #FFC04A; }
.ph-card-title { font-size: 11px; font-weight: 600; color: #7A7470; }

.ph-card-body {
  padding: 18px;
  border-bottom: 1px solid #F0EDE8;
}
.ph-card-subject {
  font-size: 11px;
  font-weight: 700;
  color: #1A1714;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #F0EDE8;
}
.ph-card-email {
  font-size: 12px;
  line-height: 1.72;
  color: #4A4440;
  font-family: ui-monospace, Menlo, monospace;
}

.ph-card-score {
  padding: 18px;
  background: #F5F2ED;
}
.ph-score-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #7A7470;
  margin-bottom: 8px;
}
.ph-score-val {
  display: flex;
  align-items: baseline;
  gap: 1px;
  margin-bottom: 10px;
}
.ph-score-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 52px;
  font-weight: 900;
  color: #3B82F6;
  line-height: 1;
}
.ph-score-pct {
  font-size: 22px;
  font-weight: 700;
  color: #3B82F6;
  font-family: 'Fraunces', Georgia, serif;
}
.ph-bar-wrap {
  height: 5px;
  background: var(--bg,#F0EDE8);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ph-bar-fill {
  height: 100%;
  background: #3B82F6;
  border-radius: 3px;
  width: 0%;
  transition: width 2.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.ph-verdict-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #5A5450;
}
.ph-verdict-badge {
  background: rgba(59,130,246,0.12);
  color: #2563EB;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}

/* Stats strip */
.ph-stats {
  position: relative;
  z-index: 1;
  display: flex;
  border-top: 1px solid rgba(26,23,20,0.08);
}
.ph-stat {
  flex: 1;
  padding: 28px 28px 24px;
  border-right: 1px solid rgba(26,23,20,0.08);
  text-align: center;
}
.ph-stat:last-child { border-right: none; }
.ph-stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1.5px;
  color: #1A1714;
}
.ph-stat-lbl {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #7A7470;
  margin-top: 3px;
}
@media (max-width: 480px) {
  .ph-stat { padding: 16px 12px; }
  .ph-stat-num { font-size: 32px; letter-spacing: -1px; }
  .ph-stat-lbl { font-size: 10px; }
}

.ph-email-source {
  font-size: 10px;
  color: #9A9490;
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.3px;
}

/* ── PH HERO DARK MODE ── */

/* ── HERO POP EFFECTS ── */

/* Background depth, radial glow behind card area */
.ph-hero::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  right: 8%;
  top: 50%;
  transform: translateY(-55%);
  background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Secondary glow, teal accent top-left for depth */
.ph-hero::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  left: -5%;
  top: -10%;
  background: radial-gradient(circle, rgba(59,130,246,0.04) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* Card, glow + lift + float animation */
.ph-card {
  box-shadow:
    0 0 0 1px rgba(26,23,20,0.06),
    0 12px 40px rgba(80,60,40,0.12),
    0 0 60px rgba(59,130,246,0.06);
  animation: phCardFloat 6s ease-in-out infinite;
}

@keyframes phCardFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* Score section, bigger presence */
.ph-score-num {
  text-shadow: 0 0 40px rgba(59,130,246,0.3);
}

/* CTA button, glow in dark mode */

/* Headline, subtle depth */

/* Stats strip transition, gradient separator */
.ph-hero .ns {
  border-top: 1px solid rgba(59,130,246,0.1);
}

/* Tag pill, subtle glow */

/* Proof dot, pulse glow */

/* Bar fill, glow on the progress bar */
.ph-bar-fill {
  box-shadow: 0 0 12px rgba(59,130,246,0.4);
}

/* Verdict badge, pop */

/* ── Stats animation section ── */
.ns{background:#1A1714;border-radius:20px;overflow:hidden;font-family:'DM Sans',sans-serif}
.ns-header{padding:36px 44px 28px;border-bottom:1px solid #2E2A24;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ns-eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#3B82F6;white-space:nowrap}
.ns-tagline{font-size:13px;color:#3A3530;line-height:1.55;text-align:right;max-width:280px}
.ns-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.ns-card{padding:40px 20px 44px;border-right:1px solid #2E2A24;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}
.ns-card:last-child{border-right:none}
.ns-vis{height:76px;width:100%;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:18px}
.ns-num{font-family:'Fraunces',Georgia,serif;font-size:58px;font-weight:600;color:#fff;line-height:1;letter-spacing:-.02em;margin-bottom:10px;position:relative;z-index:1}
.ns-num .ac{color:#3B82F6}
.ns-lbl{font-size:11px;color:#5C5751;font-weight:400;letter-spacing:.07em;text-transform:uppercase;text-align:center;line-height:1.5}
.dg{display:flex;flex-wrap:wrap;gap:3.5px;width:88px;justify-content:flex-start}
.dg-dot{width:5px;height:5px;border-radius:50%;background:#2A2520;transition:background .2s,transform .2s}
.dg-dot.on{background:#3B82F6;transform:scale(1.25)}
.dg-dot.on {background:#3B82F6 !important;opacity:0.8}
.dg-dot:not(.on) {background:rgba(0,0,0,0.07) !important}
.arc-track{fill:none;stroke:#2A2520;stroke-width:7}
.arc-fill{fill:none;stroke:#3B82F6;stroke-width:7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 2s cubic-bezier(.22,1,.36,1)}
.pdot{position:absolute;border-radius:50%;transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.pdot.show{transform:scale(1)}
.pr{position:absolute;top:50%;left:50%;border-radius:50%;border:1.5px solid rgba(59,130,246,0);transform:translate(-50%,-50%);animation:prout 2.2s ease-out infinite}
.pr:nth-child(2){animation-delay:.75s}
.pr:nth-child(3){animation-delay:1.5s}
@keyframes prout{0%{width:10px;height:10px;border-color:rgba(59,130,246,.7);opacity:1}100%{width:110px;height:110px;border-color:rgba(59,130,246,0);opacity:0}}
.pr-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#3B82F6}
.ns.ns-light {background:#F0EDE8}
.ns.ns-light .ns-header {border-bottom-color:rgba(0,0,0,0.08)}
.ns.ns-light .ns-tagline {color:#9A9490}
.ns.ns-light .ns-card {border-right-color:rgba(0,0,0,0.08)}
.ns.ns-light .ns-num {color:#1A1714}
.ns.ns-light .ns-lbl {color:#9A9490}
.ns.ns-light .dg-dot:not(.on) {background:rgba(0,0,0,0.08)}
.ns.ns-light .dg-dot.on {background:var(--accent,#3B82F6) !important;opacity:0.85}
.ns.ns-light .arc-track {stroke:rgba(0,0,0,0.1)}
@media(max-width:600px){
  .ns-header{flex-direction:column;align-items:flex-start;gap:8px;padding:24px 20px 18px;}
  .ns-tagline{text-align:left;max-width:100%;}
  .ns-grid{grid-template-columns:1fr 1fr;}
  .ns-card{border-right:none;border-bottom:1px solid #2E2A24;padding:24px 16px 28px;}
  .ns-card:nth-child(odd){border-right:1px solid #2E2A24;}
  .ns-card:nth-last-child(-n+2){border-bottom:none;}
  .ns.ns-light .ns-card {border-bottom-color:rgba(0,0,0,0.08);}
  .ns.ns-light .ns-card:nth-child(odd) {border-right-color:rgba(0,0,0,0.08);}
  .ns-num{font-size:40px;}
  .ns-vis{height:56px;margin-bottom:12px;}
  .dg{width:72px;}
}
/* ── Simulated Audience section ── */
.aud-wrap{font-family:'DM Sans',sans-serif;background:var(--bg);border-radius:0;overflow:hidden}
.aud-header{padding:52px 48px 40px}
.aud-eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#3B82F6;margin-bottom:14px}
.aud-headline{font-family:'Fraunces',Georgia,serif;font-size:44px;font-weight:600;color:#1A1714;line-height:1.08;letter-spacing:-.02em;margin-bottom:14px}
.aud-headline em{font-style:italic;color:#3B82F6}
.aud-sub{font-size:15px;color:#6B6560;line-height:1.65;max-width:520px}
.aud-stage{background:var(--bg);padding:36px 0 28px;position:relative;overflow:hidden}
.aud-stage {background:var(--bg,#F0EDE8)}
.radar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.radar-ring{position:absolute;border-radius:50%;border:1px solid rgba(59,130,246,0.18);transform:translate(-50%,-50%);top:50%;left:50%;animation:radarpulse 3.6s ease-out infinite}
.radar-ring:nth-child(2){animation-delay:1.2s}
.radar-ring:nth-child(3){animation-delay:2.4s}
@keyframes radarpulse{0%{width:0;height:0;opacity:.7}100%{width:700px;height:700px;opacity:0}}
.ticker-row{overflow:hidden;margin-bottom:14px;position:relative;z-index:1}
.ticker-track{display:flex;gap:14px;width:max-content}
.ticker-track.go-left{animation:scrollLeft linear infinite}
.ticker-track.go-right{animation:scrollRight linear infinite}
@keyframes scrollLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scrollRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.pcard {background:#F0EDE8 !important;border-color:rgba(0,0,0,0.15) !important}
.pcard .pcard-name,
.pcard h4 {color:#1a1714}
.pcard .pcard-role,
.pcard p {color:rgba(0,0,0,0.55)}
.pcard{display:flex;align-items:center;gap:12px;background:var(--pcard-bg,#242018);border:1.5px solid var(--pcard-border,#2E2A24);border-radius:12px;padding:12px 16px;width:210px;flex-shrink:0;transition:border-color .3s,background .3s;position:relative}
.pcard.pinged{border-color:#3B82F6;background:#2A2118}
.pcard-ping{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#3B82F6;color:#fff;font-size:10.5px;font-weight:500;padding:5px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:10}
.pcard.pinged .pcard-ping{opacity:1}
.pcard-ping::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#3B82F6}
.pcard-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:#fff;letter-spacing:.04em}
.pcard-name{font-size:12.5px;font-weight:500;color:var(--pcard-text,#C8C3BC);line-height:1.3}
.pcard-role{font-size:11px;color:var(--pcard-sub,#5C5751);margin-bottom:5px;line-height:1.3}
.pcard-tag{display:inline-block;font-size:10px;padding:2px 8px;border-radius:20px;font-weight:500}
.cat-legend{display:flex;align-items:center;gap:20px;justify-content:center;margin-top:22px;padding:0 28px;position:relative;z-index:1}
.cat-legend span{font-size:11.5px;color:#5C5751}
.cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cat-dot.a{background:#3B82F6}
.cat-dot.b{background:#3B82F6}
.cat-dot.c{background:#8B5CF6}
:root{--aud-divider:rgba(0,0,0,0.08)}
.aud-stats{display:flex;border-top:1px solid var(--aud-divider,rgba(255,255,255,0.08));margin-top:24px}
.aud-stat{flex:1;padding:20px 0;text-align:center;border-right:1px solid var(--aud-divider,rgba(255,255,255,0.08))}
.aud-stat:last-child{border-right:none}
.aud-stat-num{font-family:'Fraunces',Georgia,serif;font-size:32px;font-weight:600;color:#3B82F6;line-height:1;margin-bottom:4px}
.aud-stat-label{font-size:11px;color:#5C5751;font-weight:400;letter-spacing:.05em}

.hiw{font-family:'DM Sans',sans-serif;background:#ECEAE4;padding:52px 56px 56px;margin-bottom:0;}
.hiw-top{margin-bottom:40px}
.hiw-ey{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#3B82F6;margin-bottom:12px}
.hiw-h{font-family:'Fraunces',Georgia,serif;font-size:38px;font-weight:700;color:#1A1714;line-height:1.08;letter-spacing:-.02em}
.hiw-h em{font-style:italic;color:#3B82F6}
.hiw-body{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start}
.step-list{display:flex;flex-direction:column;gap:0}
.step-item{display:flex;gap:14px;padding-bottom:28px;position:relative;cursor:pointer;transition:opacity 0.2s ease}
.step-item:last-child{padding-bottom:0}
.step-item:not(.hiw-active){opacity:0.45}
.step-item:hover:not(.hiw-active){opacity:0.72}
.step-item.hiw-active .step-num{background:var(--accent,#3B82F6) !important;color:#fff !important}
.step-left{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.step-dot{width:32px;height:32px;border-radius:50%;border:2px solid #D4CFC8;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:#B0ABA4;font-family:'DM Mono',monospace;transition:all .4s ease;flex-shrink:0;background:#ECEAE4;position:relative;z-index:1}
.step-item.hiw-active .step-dot{border-color:#3B82F6;color:#3B82F6;background:rgba(59,130,246,0.08)}
.step-item.hiw-done .step-dot{border-color:#3B82F6;background:#3B82F6;color:#fff}
.step-line{width:2px;flex:1;background:#D4CFC8;margin:4px 0;min-height:24px;position:relative;overflow:hidden}
.step-line::after{content:'';position:absolute;top:0;left:0;width:100%;height:0%;background:#3B82F6;transition:height .6s ease}
.step-item.hiw-done .step-line::after{height:100%}
.step-text{padding-top:6px}
.step-title{font-size:13.5px;font-weight:500;color:#6B6560;line-height:1.3;margin-bottom:4px;transition:color .4s}
.step-item.hiw-active .step-title,.step-item.hiw-done .step-title{color:#1A1714}
.step-desc{font-size:11.5px;color:#9A9590;line-height:1.5}
.prod-card{background:#fff;border-radius:14px;border:1px solid #E4E0D8;overflow:visible;box-shadow:0 2px 24px rgba(0,0,0,0.06)}
.card-chrome{background:#F5F3EF;border-bottom:1px solid #E4E0D8;padding:10px 16px;display:flex;align-items:center;gap:10px}
.hiw-tl-dots{display:flex;gap:6px}
.hiw-tl{width:11px;height:11px;border-radius:50%}
.hiw-tl.r{background:#FF5F57}.hiw-tl.y{background:#FFBD2E}.hiw-tl.g{background:#28CA41}
.chrome-label{font-size:11.5px;color:#9A9590}
.card-email{padding:18px 20px 14px;border-bottom:1px solid #F0EDE8}
.hiw-email-subj{font-size:11px;color:#9A9590;font-family:'DM Mono',monospace;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #F0EDE8}
.hiw-email-subj strong{color:#1A1714}
.hiw-email-body{font-size:11.5px;font-family:'DM Mono',monospace;color:#3A3530;line-height:1.75;min-height:96px}
.hiw-em-cur{display:inline-block;width:2px;height:12px;background:#3B82F6;vertical-align:text-bottom;animation:hiwblink .7s step-end infinite}
@keyframes hiwblink{0%,100%{opacity:1}50%{opacity:0}}
.hiw-persona-strip{padding:0 20px;border-bottom:1px solid #F0EDE8;display:flex;gap:8px;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1),padding .5s}
.hiw-persona-strip.open{max-height:80px;padding:14px 20px}
.hiw-p-pill{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1.5px solid #E4E0D8;transition:all .3s;flex:1;cursor:pointer}
.hiw-p-pill:not(.sel):hover{opacity:0.75;transform:translateY(-1px)}
.hiw-p-pill.sel{border-color:#3B82F6;background:rgba(59,130,246,0.08)}
.hiw-p-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:500;color:#fff;flex-shrink:0}
.hiw-p-info{flex:1;min-width:0}
.hiw-p-name{font-size:11px;font-weight:500;color:#6B6560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hiw-p-pill.sel .hiw-p-name{color:#1A1714}
.hiw-p-tag{font-size:9.5px;color:#B0ABA4}
.hiw-p-pill.sel .hiw-p-tag{color:#3B82F6}
.hiw-p-check{width:13px;height:13px;border-radius:50%;border:1.5px solid #D4CFC8;flex-shrink:0;transition:all .3s}
.hiw-p-pill.sel .hiw-p-check{background:#3B82F6;border-color:#3B82F6}
.hiw-score-section{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.22,1,.36,1),padding .6s}
.hiw-score-section.open{max-height:200px;padding:16px 20px 18px}
.hiw-score-meta{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9A9590;font-weight:500;margin-bottom:6px}
.hiw-score-meta span{color:#3B82F6}
.hiw-score-big{font-family:'Fraunces',Georgia,serif;font-size:48px;font-weight:700;color:#3B82F6;line-height:1;letter-spacing:-.02em;margin-bottom:10px}
.hiw-bar-track{height:4px;background:#F0EDE8;border-radius:2px;overflow:hidden;margin-bottom:10px}
.hiw-bar-fill{height:100%;background:#3B82F6;border-radius:2px;width:0%;transition:width 1.6s cubic-bezier(.22,1,.36,1)}
.hiw-score-tags{display:flex;gap:6px;flex-wrap:wrap}
.hiw-s-tag{font-size:10px;padding:3px 9px;border-radius:6px;background:#F5F3EF;color:#6B6560}
.hiw-s-tag.hi{background:rgba(59,130,246,0.08);color:#3B82F6}
@media(max-width:720px){
  .hiw{padding:36px 20px 40px;}
  .hiw-h{font-size:28px;}
  .hiw-body{grid-template-columns:1fr;gap:28px;}
  .hiw-persona-strip.open{max-height:none;flex-direction:column;gap:8px;padding:12px 16px;}
  .hiw-p-pill{flex:none;width:100%;}
  .hiw-score-section.open{max-height:none;}
  .hiw-score-big{font-size:38px;}
  .card-email{padding:14px 16px 12px;}
  .hiw-email-body{font-size:11px;min-height:80px;}
}

/* ═══════════════════════════════════════════════════════════
   SITE-WIDE POP ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── 0. Section breathing room, nothing touches ── */

/* Visual separators between all landing sections */
.hiw,
.feat-wrap,
.r-final-cta {
  border-top: 1px solid var(--border);
}

/* Alternating subtle background tones in dark mode for depth */

/* Light mode alternating tones */
.hiw { background: #ECEAE4; }
.feat-wrap { background: #F0EDE8; }

/* Audience header spacing, parent r-section has inline padding:0 */
.aud-header { padding-top: 72px; }
.aud-wrap { padding-bottom: 56px; }

/* Ensure stats strip in hero has bottom space before HIW */
.ph-hero .ns { margin-bottom: 16px; }

@media (max-width: 768px) {
  .aud-header { padding-top: 52px; }
  .aud-wrap { padding-bottom: 40px; }
}

/* ── 1. Scroll-reveal fade-in-up ── */
.pop-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.pop-reveal.pop-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 2. Nav, glass depth on scroll ── */
header {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
header.nav-scrolled {
  box-shadow: 0 1px 24px rgba(0,0,0,0.06);
}

/* ── 3. How It Works, depth + glow ── */
.hiw {
  position: relative;
  overflow: hidden;
}
.hiw::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  right: 10%;
  top: 40%;
  background: radial-gradient(circle, rgba(59,130,246,0.04) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.prod-card {
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.prod-card:hover {
  transform: translateY(-4px);
}
.step-item.hiw-active .step-dot {
  box-shadow: 0 0 16px rgba(59,130,246,0.35);
}
.step-item.hiw-done .step-dot {
  box-shadow: 0 0 12px rgba(59,130,246,0.25);
}
.hiw-bar-fill {
  box-shadow: 0 0 10px rgba(59,130,246,0.35);
}

/* ── 4. Features inbox, depth + hover ── */
.feat-wrap {
  position: relative;
  overflow: hidden;
}
.feat-wrap::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  left: -10%;
  top: 20%;
  background: radial-gradient(circle, rgba(59,130,246,0.03) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.feat-row {
  transition: background 0.2s ease, transform 0.15s ease;
}
.feat-row:hover {
  transform: translateX(3px);
}
.feat-row:hover {
  background: rgba(59,130,246,0.02);
}
.feat-stat {
  transition: text-shadow 0.2s ease;
}
.feat-row:hover .feat-stat {
  text-shadow: 0 0 12px rgba(59,130,246,0.3);
}

/* ── 5. Simulated Audience, radar glow ── */
.aud-stat-num {
  text-shadow: 0 0 24px rgba(59,130,246,0.2);
}
.ticker-pill {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ticker-pill:hover {
  transform: scale(1.05);
  z-index: 2;
}

/* ── 6. Global Email Assistant, vibrant scene ── */
.gea-section {
  position: relative;
  overflow: hidden;
}
.gea-section::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  right: 15%;
  top: 30%;
  background: radial-gradient(circle, rgba(59,130,246,0.03) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

/* ── 7. Pricing, card hover + featured glow ── */
.pricing-plan {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.pricing-plan:hover {
  transform: translateY(-4px);
}
.pricing-plan:hover {
  box-shadow: 0 12px 40px rgba(80,60,40,0.1);
}
.pp-featured:hover {
  transform: translateY(-6px) !important;
}
.pp-featured:hover {
  box-shadow: 0 0 40px rgba(59,130,246,0.1), 0 0 0 2px #3B82F6, 0 16px 48px rgba(80,60,40,0.1);
}
.pp-primary {
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.pp-primary:hover {
  background: #1D4ED8;
  box-shadow: 0 0 24px rgba(59,130,246,0.35);
  transform: translateY(-1px);
}
.pp-badge {
  box-shadow: 0 0 16px rgba(59,130,246,0.3);
}

/* ── 8. Stats strip, card hover ── */
.ns-card {
  transition: background 0.3s ease;
  position: relative;
}
.ns-num .ac {
  text-shadow: 0 0 20px rgba(59,130,246,0.3);
}

/* ── 9. Section dividers, gradient borders ── */
.r-section,
.hiw,
.feat-wrap,
.r-final-cta {
  border-image: linear-gradient(
    to right,
    transparent 0%,
    var(--border) 20%,
    rgba(59,130,246,0.15) 50%,
    var(--border) 80%,
    transparent 100%
  ) 1;
}

/* ── 11. Footer, subtle accent line ── */
.r-footer {
  border-image: linear-gradient(
    to right,
    transparent 0%,
    var(--border) 20%,
    rgba(59,130,246,0.2) 50%,
    var(--border) 80%,
    transparent 100%
  ) 1;
}

/* ── 12. Accent dot pulse ── */
@keyframes accentPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.pricing-logic-dot, .pu-dot {
  animation: accentPulse 3s ease-in-out infinite;
}

/* ── 13. Audience stat hover ── */
.aud-stat {
  transition: transform 0.2s ease;
}
.aud-stat:hover {
  transform: translateY(-2px);
}

/* ============================================================
   NEW MARKETING SECTIONS
============================================================ */

/* ── Nav Dropdown ── */
.r-nav-has-dropdown { position: relative; }
.r-nav-dropdown-trigger { display: flex; align-items: center; }
.r-nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  list-style: none;
  padding: 8px;
  padding-top: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  z-index: 200;
}
/* Transparent bridge fills the gap between trigger and dropdown */
.r-nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}
.r-nav-has-dropdown:hover .r-nav-dropdown,
.r-nav-has-dropdown:focus-within .r-nav-dropdown,
.r-nav-dropdown:hover {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.r-nav-dropdown li a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text2);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.r-nav-dropdown li a:hover {
  background: var(--surface2);
  color: var(--text);
}

/* ── What Gets Scored ── */
.wgs-section { border-top: 1px solid var(--border); }
.wgs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.wgs-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color 0.2s, transform 0.2s;
}
.wgs-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.wgs-icon {
  width: 40px; height: 40px;
  background: var(--accent-dim);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: 14px;
}
.wgs-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.wgs-desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text3);
  line-height: 1.6;
}
@media(max-width: 720px) {
  .wgs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 480px) {
  .wgs-grid { grid-template-columns: 1fr; }
}

/* ── Persona Quick-links ── */
.pql-section { border-top: 1px solid var(--border); }
.pql-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pql-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.pql-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
  transform: translateY(-3px);
}
.pql-icon {
  width: 44px; height: 44px;
  background: var(--accent-dim);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: 14px;
}
.pql-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.pql-desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text3);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 14px;
}
.pql-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 5px;
}
@media(max-width: 900px) {
  .pql-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 480px) {
  .pql-grid { grid-template-columns: 1fr; }
}

/* ── Enhanced Footer ── */
.r-footer-inner-wide {
  flex-direction: column;
  gap: 40px;
  max-width: 1080px;
}
.r-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.r-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.r-footer-col-head {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 12px;
}
.r-footer-link-block {
  display: block;
  margin-bottom: 8px;
  color: var(--text3);
  font-size: 13px;
}
.r-footer-link-block:hover {
  color: var(--text);
}
@media(max-width: 640px) {
  .r-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .r-footer-inner-wide { gap: 28px; }
}
@media(max-width: 380px) {
  .r-footer-cols { grid-template-columns: 1fr; }
}

/* ── r-container-wide helper for new marketing sections ── */
.r-container-wide {
  max-width: 1000px;
  margin: 0 auto;
}

/* MOBILE RESPONSIVENESS: Task 2 */
html{overflow-x:hidden}
body{overflow-x:hidden;-webkit-text-size-adjust:100%}
a,button,[role="button"]{-webkit-tap-highlight-color:transparent}
.r-nav-mobile-menu a,.bill-opt,.pp-tier,.pp-cta,.r-btn,.ph-btn-dark,.ph-btn-outline{min-height:44px}
@media(max-width:480px){
  .ph-h1{font-size:2.5rem!important;line-height:1.15}
  .ph-grid{padding:64px 16px 36px;gap:28px}
  .ph-cta-row{flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .ph-btn-dark,.ph-btn-outline{width:100%;justify-content:center;padding:14px 20px}
  .ph-card{max-width:100%;width:100%}
  .r-h1{font-size:clamp(2rem,9vw,2.5rem)!important}
  .hiw{padding:32px 16px 36px}
  .hiw-h{font-size:24px}
  .hiw-body{grid-template-columns:1fr;gap:20px}
  .wgs-grid{grid-template-columns:1fr;gap:12px}
  .wgs-card{padding:18px}
  .pricing-plans{gap:12px}
  .pricing-plan{padding:20px 16px}
  .bill-toggle{flex-wrap:wrap;justify-content:center}
  .pricing-headline{font-size:32px}
  .pricing-usage{flex-direction:column;gap:16px;padding:18px}
  .pu-items{flex-direction:column;gap:10px}
  .r-footer-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .r-footer-links{flex-wrap:wrap;gap:6px}
  .r-footer-cols{grid-template-columns:1fr}
  .r-footer-inner-wide{gap:20px}
  .r-section{padding:64px 16px}
  .gea-section{padding:40px 16px}
}
@media(max-width:640px){
  .rr-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;justify-items:center}
  .rr-stat{min-width:unset;width:100%}
  .rr-stat-num{font-size:28px}
  .pql-grid{grid-template-columns:1fr 1fr;gap:12px}
  .pql-card{padding:18px 14px}
}
@media(max-width:720px){
  .gea-section{grid-template-columns:1fr;padding:48px 20px;gap:32px}
}
@media(max-width:768px){
  .r-nav-links{display:none!important}
  .r-nav-toggle{display:flex!important}
  .r-nav-actions{display:none!important}
  .r-nav-has-dropdown .r-nav-dropdown{display:none!important}
}
@media(max-width:380px){
  .pql-grid{grid-template-columns:1fr}
}
@media(max-width:360px){
  .ph-h1{font-size:2rem!important}
  .pricing-plan{padding:16px 12px}
  .wgs-card{padding:14px}
  .pql-card{padding:14px 12px}
  .r-section{padding:48px 14px!important}
}


/* ═══════════════════════════════════════════════════════════════════
   LPV2 MARKETING STYLES (ReplyRate Landing v2 integrated 2026-05-04)
   All selectors scoped under .lpv2-root; dashboard styles unaffected.
   CSS variables under .lpv2-root only, no global :root collision.
   ═══════════════════════════════════════════════════════════════════ */
  .lpv2-root {
    --bg-paper: #efeae0;
    --bg-deeper: #e6dfcf;
    --ink: #1a1a1a;
    --ink-muted: #5A554A;
    --line: #c9c1ad;
    --blue: #1B3A8C;
    --blue-bright: #1e40af;
    --accent: #2A6FCB;
    --green: #2f7d32;
    --pink: #c43e7a;
    --gold: #c98b1a;

    --chrome-face: #d8d4cc;
    --chrome-face-2: #d7d3cb;
    --chrome-edge: #888;
    --chrome-edge-dark: #777;
  }
  .lpv2-root *, .lpv2-root *::before, .lpv2-root *::after { box-sizing: border-box; }
  
  .lpv2-root {
    font-family: 'Inter', Tahoma, Geneva, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* fix/how-it-works-contrast: isolate lpv2 marketing block from
       global [data-theme] color cascade. Without this, dark-mode
       body color (cream) inherits into elements like .step-h that
       have no own color rule, producing cream-on-white invisible
       text on inactive How It Works step cards (and likely other
       sections with white/cream backgrounds + no explicit color). */
    color: var(--ink);
  }
  .lpv2-root a { color: inherit; }
  .lpv2-root button { font-family: inherit; }
  .lpv2-root ::selection { background: #1B3A8C; color: #fff; }

  /* ========= shared chrome bits ========= */
  .lpv2-root .bevel-out {
    border: 2px solid var(--chrome-edge-dark);
    box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 var(--chrome-edge-dark);
    background: #dcdcdc;
  }
  .lpv2-root .bevel-out-soft {
    border: 2px solid #b9b1a0;
    box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #b9b1a0;
    background: var(--bg-deeper);
  }
  .lpv2-root .bevel-in {
    border: 2px solid #888;
    box-shadow: inset 2px 2px 0 rgba(0,0,0,0.12), inset -2px -2px 0 #fff;
    background: #fff;
  }

  .lpv2-root .titlebar {
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 0 8px;
    color: white;
    background: linear-gradient(180deg, #2A6FCB 0%, #1F5BB0 50%, #1A4690 100%);
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .lpv2-root .titlebar.violet {
    background: linear-gradient(180deg, #6c3eb8 0%, #54309a 50%, #3a206c 100%);
  }
  .lpv2-root .titlebar.green {
    background: linear-gradient(180deg, #3aa05a 0%, #2c8147 50%, #1d5b2e 100%);
  }
  .lpv2-root .titlebar.gold {
    background: linear-gradient(180deg, #d4a334 0%, #b1851f 50%, #8a661a 100%);
  }
  .lpv2-root .titlebar .tb-buttons { display: flex; gap: 4px; }
  .lpv2-root .titlebar .tb-buttons button {
    display: grid; place-items: center; height: 20px; width: 20px;
    background: #dcdcdc;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #333;
    font-size: 12px; line-height: 1; color: black;
    border: 1px solid #2a2a2a;
    cursor: pointer;
  }
  .lpv2-root .window {
    border: 2px solid var(--chrome-edge-dark);
    background: var(--chrome-face-2);
    box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #666, 8px 10px 0 rgba(0,0,0,0.10);
  }
  .lpv2-root .pixel { font-family: 'Pixelify Sans', monospace; font-weight: 700; letter-spacing: -0.01em; }
  .lpv2-root .mono { font-family: 'Courier Prime', 'Courier New', Courier, monospace; }

  /* ========= page-level container ========= */
  .lpv2-root .page { min-width: 1280px; }

  /* ========= HERO ========= */
  .lpv2-root .hero-shell {
    position: relative;
    width: 100%;
    /* min-height so the chrome extension panel completes inside the hero
       region. Was a fixed height: 760px which clipped the panel's footer
       caption due to overflow: hidden below. */
    min-height: 820px;
    overflow: hidden;
    font-family: 'MS Sans Serif', Tahoma, Geneva, Arial, sans-serif;
    color: black;
    background: var(--hero-bg, linear-gradient(180deg, #5B86C5 0%, #87B7DC 35%, #B5D4E5 55%, #7FB845 70%, #5C9134 100%));
    transition: background 0.4s ease;
  }
  .lpv2-root .hero-veil {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(239,234,224,0.92) 0%, rgba(239,234,224,0.92) 55%, rgba(239,234,224,0.0) 75%);
    pointer-events: none;
  }
  .lpv2-root .navbar {
    position: relative; z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 40px 0;
  }
  .lpv2-root .logo-row { display: flex; align-items: center; gap: 12px; }
  .lpv2-root .logo-mark {
    display: grid; place-items: center;
    height: 36px; width: 28px;
    border: 2px solid black; background: white;
    font-size: 20px; font-weight: 900; color: var(--blue-bright);
    box-shadow: 2px 2px 0 #888;
  }
  .lpv2-root .brand { font-size: 24px; font-weight: 700; }

  .lpv2-root .toggle {
    justify-self: center;
    display: flex;
    border: 2px solid #777;
    background: #d8d8d8;
    box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #777;
  }
  .lpv2-root .toggle .label {
    border-right: 2px solid #777;
    padding: 8px 16px;
    font-size: 13px; font-weight: 700; color: #1d4ed8;
  }
  .lpv2-root .toggle button {
    border: 0;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    padding: 8px 22px;
    font-size: 13px; font-weight: 700;
    background: #d8d8d8;
    cursor: pointer;
  }
  .lpv2-root .toggle button.active {
    border-left-color: #111;
    border-right-color: #111;
    background: #1e40af;
    color: white;
    box-shadow: inset 2px 2px 0 #4775ff, inset -2px -2px 0 #001b70;
  }
  .lpv2-root .nav-right { display: flex; gap: 8px; }
  .lpv2-root .nav-pill {
    border: 2px solid #777; background: #dcdcdc;
    padding: 7px 14px; font-size: 12px; font-weight: 700;
    box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #777;
    cursor: pointer; text-decoration: none; color: black;
  }
  .lpv2-root .nav-pill.primary {
    background: #1e40af; color: white;
    box-shadow: inset 2px 2px 0 #4775ff, inset -2px -2px 0 #001b70;
    border-color: #111;
  }

  .lpv2-root .hero-grid {
    position: relative; z-index: 10;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 64px;
    padding: 84px 48px 80px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
  }
  .lpv2-root .hero-copy { max-width: 690px; }
  .lpv2-root .hero-h1 {
    font-family: 'Pixelify Sans', monospace;
    font-weight: 700;
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1.0;
    margin: 0; color: var(--ink);
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .lpv2-root .hero-h1-italic {
    font-family: 'Pixelify Sans', monospace;
    font-style: italic; font-weight: 700;
    font-size: clamp(34px, 4.1vw, 52px);
    line-height: 1.0;
    margin: 10px 0 0; color: var(--blue);
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .lpv2-root .rule { height: 2px; width: 88%; background: #999; margin: 28px 0 0; }
  .lpv2-root .lede {
    font-family: 'Courier Prime', 'Courier New', Courier, monospace;
    font-weight: 400; font-size: 16px; line-height: 1.65;
    margin: 24px 0 0; max-width: 620px; color: var(--ink);
  }
  .lpv2-root .cta-row { margin: 28px 0 0; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
  .lpv2-root .btn-95 {
    display: flex; align-items: center; gap: 10px;
    border: 2px solid #777; background: #dcdcdc;
    padding: 10px 22px;
    font-family: Tahoma, sans-serif; font-size: 14px; font-weight: 700;
    box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #777;
    cursor: pointer;
    text-decoration: none; color: black;
  }
  .lpv2-root .btn-95.primary {
    background: #1e40af; color: white;
    box-shadow: inset 2px 2px 0 #4775ff, inset -2px -2px 0 #001b70;
    border-color: #111;
  }
  .lpv2-root .btn-95:active {
    box-shadow: inset -2px -2px 0 #fff, inset 2px 2px 0 #777;
  }
  .lpv2-root .small-note { font-family: 'Courier Prime', monospace; font-weight: 400; font-size: 14px; margin: 14px 0 0; color: var(--ink-muted); }

  /* Chrome extension waitlist strip - thin, futuristic, full-width */
  .lpv2-root .waitlist-strip {
    margin: 32px auto 32px;
    max-width: 1100px;
    padding: 0 28px;
    position: relative;
    z-index: 10;
  }
  .lpv2-root .waitlist-strip-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 20px 10px 24px;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow:
      0 1px 0 rgba(30, 64, 175, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
    font-family: 'Courier Prime', monospace;
  }
  .lpv2-root .waitlist-strip-lead { display: flex; align-items: center; gap: 20px; }
  .lpv2-root .waitlist-strip-action { margin: 0; }
  .lpv2-root .waitlist-strip-inner::after {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
  }
  .lpv2-root .waitlist-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: #1e40af;
    padding: 0 12px 0 6px;
    border-right: 1px solid var(--line);
    height: 28px;
  }
  .lpv2-root .waitlist-tag .pulse {
    width: 7px; height: 7px;
    background: #16a34a;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
    animation: ws-pulse 1.8s ease-out infinite;
  }
  @keyframes ws-pulse {
    0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
  }
  .lpv2-root .waitlist-copy {
    display: flex; align-items: baseline; gap: 14px;
    min-width: 0;
  }
  .lpv2-root .waitlist-copy strong {
    font-family: 'Pixelify Sans', monospace;
    font-weight: 700; font-size: 16px;
    color: var(--ink); letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .lpv2-root .waitlist-strip-form {
    display: flex; align-items: stretch; gap: 0;
  }
  .lpv2-root .waitlist-strip-form input {
    width: 240px;
    padding: 7px 12px;
    font-family: 'Courier Prime', monospace; font-size: 13px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid #888;
    border-right: none;
    box-shadow: inset 1px 1px 0 #d6d3cc;
    outline: none;
    transition: box-shadow .15s, border-color .15s;
  }
  .lpv2-root .waitlist-strip-form input::placeholder { color: var(--ink-muted); }
  .lpv2-root .waitlist-strip-form input:focus {
    border-color: #1e40af;
    box-shadow: inset 1px 1px 0 #b8c4e8;
  }
  .lpv2-root .waitlist-strip-form button {
    padding: 7px 16px;
    font-family: 'Courier Prime', monospace; font-weight: 700; font-size: 12px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #ffffff;
    background: #1e40af;
    border: 1px solid #142d6f;
    box-shadow: inset -2px -2px 0 #142d6f, inset 2px 2px 0 #4a6cc7;
    cursor: pointer;
  }
  .lpv2-root .waitlist-strip-form button:hover { filter: brightness(1.05); }
  .lpv2-root .waitlist-strip-form button:active { box-shadow: inset 2px 2px 0 #142d6f, inset -2px -2px 0 #4a6cc7; }
  .lpv2-root .waitlist-strip-success {
    display: none;
    color: #166534; font-size: 13px; font-weight: 700;
    letter-spacing: 0.04em;
  }
  .lpv2-root .waitlist-strip.is-success .waitlist-strip-form { display: none; }
  .lpv2-root .waitlist-strip.is-success .waitlist-strip-success { display: inline-flex; align-items: center; gap: 8px; }
  @media (max-width: 760px) {
    .lpv2-root .waitlist-strip-inner {
      flex-direction: column;
      align-items: stretch;
      gap: 12px; padding: 12px 14px;
    }
    .lpv2-root .waitlist-strip-lead { flex-direction: column; align-items: flex-start; gap: 8px; }
    .lpv2-root .waitlist-tag { border-right: none; padding-right: 0; align-self: flex-start; }
    .lpv2-root .waitlist-copy { flex-direction: column; align-items: flex-start; gap: 2px; }
    .lpv2-root .waitlist-strip-action { margin: 0; }
    .lpv2-root .waitlist-strip-form input { width: 100%; flex: 1; }
  }

  .lpv2-root .feat-grid {
    margin: 28px 0 0;
    display: grid;
    max-width: 680px;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px; row-gap: 18px;
  }
  .lpv2-root .feat-link {
    display: flex; align-items: center; gap: 10px;
    font-family: Tahoma, sans-serif; font-size: 14px; font-weight: 400;
    color: #1e40af; text-decoration: underline;
  }
  .lpv2-root .feat-icon {
    display: grid; place-items: center;
    height: 32px; width: 32px;
    flex-shrink: 0;
    text-decoration: none;
  }
  .lpv2-root .feat-icon svg {
    width: 32px; height: 32px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    shape-rendering: crispEdges;
    display: block;
  }

  /* ========= app preview window ========= */
  .lpv2-root .app-window {
    justify-self: end;
    width: 460px;
  }
  .lpv2-root .app-body { padding: 20px; font-family: Tahoma, sans-serif; }
  .lpv2-root .stat-grid {
    margin: 22px 0 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .lpv2-root .stat {
    border: 2px solid #888; background: #d8d4cc;
    padding: 12px; box-shadow: inset 1px 1px 0 #fff;
  }
  .lpv2-root .stat .k { font-size: 12px; color: var(--ink-muted); }
  .lpv2-root .stat .v { margin: 6px 0 0; font-size: 26px; font-weight: 700; color: #1e40af; }

  .lpv2-root .nba { margin: 12px 0 0; border: 2px solid #888; background: #dedad2; }
  .lpv2-root .nba-row {
    display: flex; width: 100%; align-items: center; gap: 12px;
    padding: 12px; text-align: left; background: transparent;
    border: 0; border-bottom: 2px solid #999;
    cursor: pointer; font-family: Tahoma, sans-serif;
  }
  .lpv2-root .nba-row:last-child { border-bottom: 0; }
  .lpv2-root .nba-row .ico { font-size: 18px; }
  .lpv2-root .nba-row .body { flex: 1; }
  .lpv2-root .nba-row .body .t { display: block; font-weight: 700; font-size: 13px; }
  .lpv2-root .nba-row .body .s { font-size: 12px; color: var(--ink-muted); }
  .lpv2-root .nba-row .arrow { font-size: 22px; color: #1e40af; }

  /* ========= HERO TAGLINE (under the H1 italic) ========= */
  .lpv2-root .hero-tagline {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 18px 0 0;
  }
  .lpv2-root .tagline-bullet {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px;
    flex-shrink: 0;
  }
  .lpv2-root .tagline-bullet svg {
    width: 20px; height: 20px;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
  }
  .lpv2-root .tagline-text {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-weight: 700;
    font-size: clamp(14px, 1.3vw, 17px);
    color: var(--blue);
    letter-spacing: 0.01em;
  }

  /* ========= TRUSTED BAR (sticks under hero) ========= */
  .lpv2-root .trusted-bar {
    position: relative; z-index: 20;
    display: flex; align-items: center; gap: 48px;
    flex-wrap: wrap; justify-content: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    padding: 28px 48px;
  }
  .lpv2-root .trusted-eyebrow {
    font-family: 'Courier Prime', monospace;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--blue);
    opacity: 0.85;
  }
  .lpv2-root .trusted-logos {
    display: flex; align-items: center; gap: 56px;
    flex-wrap: wrap; justify-content: center;
  }
  .lpv2-root .trusted-logos .logo {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; width: 130px;
    opacity: 0.82;
    transition: opacity 0.2s ease;
  }
  .lpv2-root .trusted-logos .logo img {
    max-height: 100%; max-width: 100%;
    object-fit: contain;
    display: block;
  }
  .lpv2-root .trusted-logos .logo:hover { opacity: 1; }
  /* Per-logo scale to compensate for baked-in transparent padding around each mark */
  .lpv2-root .logo-google img { transform: scale(1.0); }
  .lpv2-root .logo-amazon img { transform: scale(1.0); }
  .lpv2-root .logo-microsoft img { transform: scale(1.05); }
  .lpv2-root .logo-airbnb img { transform: scale(1.0); }
  .lpv2-root .logo-meta img { transform: scale(1.55); } /* Meta image has ~30% padding on all sides */
  .lpv2-root .logo-stripe img { transform: scale(1.0); }
  .lpv2-root .logo-shopify img { transform: scale(1.0); }

  @media (max-width: 760px) {
    .lpv2-root .trusted-bar { gap: 24px; padding: 22px 24px; }
    .lpv2-root .trusted-logos { gap: 28px; }
    .lpv2-root .trusted-logos .logo { height: 32px; width: 100px; }
  }

  /* ========= SECTION SCAFFOLDING ========= */
  .lpv2-root section.s {
    padding: 96px 48px;
    max-width: 1280px;
    margin: 0 auto;
  }
  .lpv2-root .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Courier Prime', monospace;
    font-size: 13px; font-weight: 700;
    color: var(--blue);
    text-transform: uppercase; letter-spacing: 0.12em;
  }
  .lpv2-root .eyebrow .dot {
    width: 10px; height: 10px; background: var(--blue); display: inline-block;
  }
  .lpv2-root .h2 {
    font-family: 'Pixelify Sans', monospace;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 18px 0 0;
    color: var(--ink);
    text-wrap: balance;
  }
  .lpv2-root .h2 em { font-style: italic; color: var(--blue); }
  .lpv2-root .lede-2 {
    margin: 18px 0 0;
    font-size: 18px; line-height: 1.55;
    color: var(--ink-muted);
    max-width: 640px;
  }

  /* ========= HOW IT WORKS ========= */
  .lpv2-root .how-shell {
    margin: 56px 0 0;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 28px;
    align-items: stretch;
  }
  .lpv2-root .how-stage {
    position: relative;
    background: #fff;
    border: 2px solid var(--chrome-edge-dark);
    box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #666, 8px 10px 0 rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    min-height: 620px;
  }
  .lpv2-root .how-stage .stage-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 12px;
    height: 30px;
    background: linear-gradient(180deg, #2A6FCB 0%, #1F5BB0 50%, #1A4690 100%);
    color: #fff;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
  }
  .lpv2-root .how-stage .stage-hd .right {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Courier Prime', monospace;
    font-weight: 400;
    font-size: 11px;
    opacity: 0.92;
  }
  .lpv2-root .how-stage .stage-hd .dot-row { display: flex; gap: 4px; }
  .lpv2-root .how-stage .stage-hd .dot-row i {
    width: 8px; height: 8px; background: rgba(255,255,255,0.4); display: inline-block;
  }
  .lpv2-root .how-stage .stage-hd .dot-row i.on { background: #fff; }

  .lpv2-root .stage-body {
    flex: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #faf7ee;
  }
  .lpv2-root .stage-band {
    border-bottom: 1.5px solid var(--line);
    background: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .lpv2-root .stage-band .step-num {
    font-family: 'Pixelify Sans', monospace;
    font-size: 14px;
    color: #fff;
    background: var(--blue);
    padding: 2px 10px;
    border: 2px solid var(--blue);
    box-shadow: inset 1px 1px 0 #4775ff, inset -1px -1px 0 #001b70;
    letter-spacing: 0.06em;
  }
  .lpv2-root .stage-band .step-title {
    font-family: 'Pixelify Sans', monospace;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.005em;
  }
  .lpv2-root .stage-band .step-title em { color: var(--blue); font-style: italic; }

  .lpv2-root .stage-canvas { padding: 22px 20px; position: relative; }
  .lpv2-root .stage-foot {
    border-top: 1.5px dashed var(--line);
    background: var(--bg-deeper);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    color: var(--ink-muted);
  }
  .lpv2-root .stage-foot .legend { display: flex; gap: 14px; }
  .lpv2-root .stage-foot .legend .swatch {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .lpv2-root .stage-foot .legend .swatch::before {
    content: ""; width: 10px; height: 10px; display: inline-block;
    border: 1.5px solid var(--ink);
  }
  .lpv2-root .stage-foot .legend .swatch.cv::before { background: #fff3a8; border-color: #c98b1a; }
  .lpv2-root .stage-foot .legend .swatch.jd::before { background: #d6e4ff; border-color: #1B3A8C; }
  .lpv2-root .stage-foot .legend .swatch.notes::before { background: #f4d6ec; border-color: #c43e7a; }
  .lpv2-root .stage-foot .legend .swatch.ai::before { background: #d9f0d9; border-color: #2f7d32; }

  /* Step rail (right column) */
  .lpv2-root .how-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lpv2-root .how-step {
    position: relative;
    text-align: left;
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.06);
    padding: 18px 20px 18px 64px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: box-shadow .12s ease, transform .12s ease, background .12s ease;
    display: block;
  }
  .lpv2-root .how-step:hover {
    box-shadow: 6px 6px 0 rgba(0,0,0,0.08);
    transform: translate(-1px, -1px);
  }
  .lpv2-root .how-step.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    box-shadow: 4px 4px 0 rgba(27,58,140,0.25);
  }
  .lpv2-root .how-step .step-tag {
    position: absolute;
    left: 14px; top: 18px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    font-family: 'Pixelify Sans', monospace;
    font-size: 18px;
    color: var(--blue);
    background: var(--bg-paper);
    border: 1.5px solid var(--blue);
    line-height: 1;
  }
  .lpv2-root .how-step.active .step-tag {
    background: #fff;
    color: var(--blue);
    border-color: #fff;
  }
  .lpv2-root .how-step .step-h {
    font-family: 'Pixelify Sans', monospace;
    font-size: 20px;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.005em;
  }
  .lpv2-root .how-step .step-p {
    margin: 8px 0 0;
    font-family: 'Courier Prime', monospace;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-muted);
  }
  .lpv2-root .how-step.active .step-p { color: #cfdcf7; }
  .lpv2-root .how-step .step-meta {
    margin: 12px 0 0;
    display: flex; align-items: center; gap: 8px;
    font-family: 'Courier Prime', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--blue);
  }
  .lpv2-root .how-step.active .step-meta { color: #aac4ee; }
  .lpv2-root .how-step .step-meta::after {
    content: "→";
    font-family: 'Pixelify Sans', monospace;
    font-size: 16px;
    transform: translateY(-1px);
  }

  .lpv2-root .how-rail .rail-foot {
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 14px 18px;
    display: flex; align-items: center; gap: 12px;
    font-family: 'Courier Prime', monospace;
    font-size: 13px;
    color: var(--ink);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.06);
  }
  .lpv2-root .how-rail .rail-foot .loop-ico {
    width: 28px; height: 28px;
    background: var(--blue);
    color: #fff;
    display: grid; place-items: center;
    font-family: 'Pixelify Sans', monospace;
    font-size: 16px;
    flex-shrink: 0;
  }

  /* ===== Stage canvases (one per step) ===== */
  .lpv2-root .canvas-pane { display: none; }
  .lpv2-root .canvas-pane.active { display: block; }

  /* Step 1 - input docs */
  .lpv2-root .doc-card {
    background: #fff;
    border: 1.5px solid var(--line);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.06);
    padding: 14px 16px;
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    line-height: 1.55;
    position: relative;
  }
  .lpv2-root .doc-card + .doc-card { margin-top: 14px; }
  .lpv2-root .doc-card .doc-tab {
    position: absolute;
    top: -1px; left: 16px;
    background: var(--blue);
    color: #fff;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    transform: translateY(-100%);
  }
  .lpv2-root .doc-card.cv .doc-tab { background: #c98b1a; }
  .lpv2-root .doc-card .doc-meta {
    display: flex; justify-content: space-between;
    color: var(--ink-muted);
    font-size: 11px;
    margin-bottom: 8px;
  }
  .lpv2-root .doc-card .doc-h {
    font-family: 'Pixelify Sans', monospace;
    font-size: 16px;
    color: var(--ink);
    line-height: 1.15;
  }
  .lpv2-root .doc-card .doc-h span { color: var(--ink-muted); font-size: 13px; }
  .lpv2-root .doc-card .doc-body {
    margin-top: 8px;
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.6;
  }
  .lpv2-root .doc-card .doc-status {
    margin-top: 12px;
    border-top: 1px dashed var(--line);
    padding-top: 8px;
    display: flex; justify-content: space-between; align-items: center;
    color: var(--green);
    font-weight: 700;
    font-size: 11px;
  }
  .lpv2-root .doc-card .doc-status .check {
    display: inline-grid; place-items: center;
    width: 14px; height: 14px;
    background: var(--green); color: #fff;
    font-size: 10px;
    margin-right: 6px;
    transform: translateY(-1px);
  }
  .lpv2-root .privacy-strip {
    margin-top: 14px;
    background: var(--bg-deeper);
    border: 1.5px solid var(--line);
    border-left: 4px solid var(--blue);
    padding: 10px 12px;
    font-family: 'Courier Prime', monospace;
    font-size: 11.5px;
    color: var(--ink);
    display: flex; align-items: center; gap: 10px;
  }
  .lpv2-root .privacy-strip .ico {
    width: 22px; height: 22px;
    background: var(--blue); color: #fff;
    display: grid; place-items: center;
    font-size: 13px;
  }

  /* Step 2 - scoring */
  .lpv2-root .score-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  }
  .lpv2-root .score-overall {
    background: var(--blue); color: #fff;
    padding: 18px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.18);
  }
  .lpv2-root .score-overall .lab {
    font-family: 'Courier Prime', monospace;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    opacity: 0.85;
  }
  .lpv2-root .score-overall .num {
    font-family: 'Pixelify Sans', monospace;
    font-size: 72px; line-height: 0.9;
    margin-top: 8px;
  }
  .lpv2-root .score-overall .num small { font-size: 18px; opacity: 0.7; }
  .lpv2-root .score-overall .meter {
    margin-top: 12px;
    height: 8px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.4);
  }
  .lpv2-root .score-overall .meter span {
    display: block; height: 100%;
    background: repeating-linear-gradient(45deg, #fff 0 5px, #aac4ee 5px 10px);
  }
  .lpv2-root .score-overall .verdict {
    margin-top: 12px;
    font-family: 'Courier Prime', monospace;
    font-size: 12px; line-height: 1.5;
    border-top: 1px solid rgba(255,255,255,0.25);
    padding-top: 10px;
  }
  .lpv2-root .score-list {
    background: #fff;
    border: 1.5px solid var(--line);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.06);
    padding: 12px 14px;
    font-family: 'Courier Prime', monospace;
    font-size: 12.5px;
  }
  .lpv2-root .score-list .row {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--line);
  }
  .lpv2-root .score-list .row:last-child { border-bottom: 0; }
  .lpv2-root .score-list .row .lab { display: flex; align-items: center; gap: 6px; }
  .lpv2-root .score-list .row .lab .arrow { font-size: 11px; }
  .lpv2-root .score-list .row .lab .arrow.up { color: var(--green); }
  .lpv2-root .score-list .row .lab .arrow.flat { color: var(--gold); }
  .lpv2-root .score-list .row .lab .arrow.down { color: #b03030; }
  .lpv2-root .score-list .row .v {
    font-family: 'Pixelify Sans', monospace;
    font-size: 16px;
    color: var(--blue);
  }
  .lpv2-root .score-list .row .v small { color: var(--ink-muted); font-size: 11px; }
  .lpv2-root .score-tip {
    grid-column: 1 / -1;
    margin-top: 4px;
    border: 1.5px dashed var(--blue);
    background: #f3f6ff;
    padding: 10px 12px;
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    color: var(--ink);
  }
  .lpv2-root .score-tip b { color: var(--blue); font-family: 'Pixelify Sans', monospace; font-weight: 700; }

  /* Deterministic / LLM marker on dimension rows */
  .lpv2-root .score-list .row .lab .calc {
    display: inline-grid; place-items: center;
    height: 16px; min-width: 16px; padding: 0 4px;
    font-family: 'Courier Prime', monospace;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.06em;
    border: 1px solid;
    line-height: 1;
    margin-right: 2px;
    cursor: help;
  }
  .lpv2-root .score-list .row .lab .calc.det {
    background: #e8f0ff; border-color: var(--blue); color: var(--blue);
  }
  .lpv2-root .score-list .row .lab .calc.llm {
    background: #f4f0ff; border-color: #6c3eb8; color: #6c3eb8;
  }

  /* Math terminal */
  .lpv2-root .math-toggle {
    grid-column: 1 / -1;
    margin-top: 6px;
    background: transparent;
    border: 1.5px dashed var(--blue);
    color: var(--blue);
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    padding: 8px 12px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    letter-spacing: 0.04em;
  }
  .lpv2-root .math-toggle:hover { background: #f3f6ff; }
  .lpv2-root .math-toggle .arr { font-family: 'Pixelify Sans', monospace; font-size: 14px; }
  .lpv2-root .math-term {
    grid-column: 1 / -1;
    margin-top: 8px;
    border: 2px solid #2a2a2a;
    background: #0e1530;
    color: #aac4ee;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.18);
    overflow: hidden;
    display: none;
  }
  .lpv2-root .math-term.open { display: block; }
  .lpv2-root .math-term .mt-hd {
    background: linear-gradient(180deg, #1a2a5e 0%, #0e1a40 100%);
    color: #fff;
    padding: 4px 10px;
    font-family: Tahoma, sans-serif;
    font-size: 11px; font-weight: 700;
    border-bottom: 1px solid #000;
    display: flex; align-items: center; justify-content: space-between;
  }
  .lpv2-root .math-term .mt-body { padding: 12px 14px; }
  .lpv2-root .math-term .mt-body .prompt { color: #66ff8a; }
  .lpv2-root .math-term .mt-body .formula {
    color: #ffd96b;
    margin: 8px 0;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border-left: 2px solid #ffd96b;
  }
  .lpv2-root .math-term .mt-body .calc-line { color: #d6e0ff; padding-left: 10px; }
  .lpv2-root .math-term .mt-body .calc-line .pct { color: #66ff8a; }
  .lpv2-root .math-term .mt-body .total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(170,196,238,0.3);
    color: #fff;
    font-weight: 700;
  }
  .lpv2-root .math-term .mt-body .total b { color: #ffd96b; }

  .lpv2-root .det-marker {
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.06);
  }
  .lpv2-root .det-marker .mk-tag {
    flex-shrink: 0;
    font-family: 'Pixelify Sans', monospace;
    font-size: 11px;
    background: var(--blue);
    color: #fff;
    padding: 2px 8px;
    letter-spacing: 0.06em;
  }
  .lpv2-root .det-marker b { font-family: 'Pixelify Sans', monospace; font-weight: 700; }

  /* Step 3 - rewrite preview */
  .lpv2-root .rewrite-card {
    background: #fff;
    border: 1.5px solid var(--line);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.06);
    padding: 0;
  }
  .lpv2-root .rewrite-card .rw-hd {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg-deeper);
    border-bottom: 1.5px solid var(--line);
    padding: 8px 12px;
    font-family: 'Courier Prime', monospace;
    font-size: 11px;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .lpv2-root .rewrite-card .rw-hd b { color: var(--ink); }
  .lpv2-root .rewrite-card .rw-body {
    padding: 14px 16px;
    font-family: 'Courier Prime', monospace;
    font-size: 13px; line-height: 1.6;
  }
  .lpv2-root .rw-bullet {
    display: grid; grid-template-columns: 14px 1fr; gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
  }
  .lpv2-root .rw-bullet:last-child { border-bottom: 0; }
  .lpv2-root .rw-bullet .b { color: var(--blue); font-weight: 700; }
  .lpv2-root .rw-bullet .tags {
    margin-top: 6px;
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  .lpv2-root .rw-bullet .tag {
    display: inline-flex; align-items: center;
    font-family: 'Courier Prime', monospace;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border: 1.5px solid;
    line-height: 1;
    height: 18px;
  }
  .lpv2-root .tag.cv { background: #fff3a8; border-color: #c98b1a; color: #6b4f0f; }
  .lpv2-root .tag.jd { background: #d6e4ff; border-color: #1B3A8C; color: #1B3A8C; }
  .lpv2-root .tag.notes { background: #f4d6ec; border-color: #c43e7a; color: #8b1f55; }
  .lpv2-root .tag.ai { background: #d9f0d9; border-color: #2f7d32; color: #1d5b2e; }
  .lpv2-root .rw-foot {
    border-top: 1.5px solid var(--line);
    padding: 10px 16px;
    display: flex; align-items: center; gap: 8px;
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    color: var(--green);
    background: #fbfdf9;
  }
  .lpv2-root .rw-foot .check {
    display: inline-grid; place-items: center;
    width: 16px; height: 16px;
    background: var(--green); color: #fff;
    font-size: 10px;
  }

  /* Step 4 - letter sentence-tagged */
  .lpv2-root .letter-card {
    background: #fff;
    border: 1.5px solid var(--line);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.06);
    padding: 16px 18px;
    font-family: 'Courier Prime', monospace;
    font-size: 13px; line-height: 1.65;
  }
  .lpv2-root .letter-card .lt-hd {
    display: flex; justify-content: space-between;
    color: var(--ink-muted);
    font-size: 11px;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 8px; margin-bottom: 10px;
  }
  .lpv2-root .letter-card .lt-hd b { color: var(--ink); font-family: 'Pixelify Sans', monospace; font-weight: 700; font-size: 14px; }
  .lpv2-root .lt-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
    padding: 6px 8px;
    border: 1px solid transparent;
  }
  .lpv2-root .lt-line .lt-text { flex: 1; }
  .lpv2-root .lt-line .lt-tag {
    flex-shrink: 0;
    font-family: 'Courier Prime', monospace;
    font-size: 10px; font-weight: 700;
    padding: 2px 6px;
    line-height: 1;
    height: 18px;
    display: inline-grid; place-items: center;
    border: 1.5px solid;
  }
  .lpv2-root .lt-line.from-cv { background: #fffbe5; border-color: #c98b1a; }
  .lpv2-root .lt-line.from-cv .lt-tag { background: #fff3a8; border-color: #c98b1a; color: #6b4f0f; }
  .lpv2-root .lt-line.from-jd { background: #f0f5ff; border-color: #1B3A8C; }
  .lpv2-root .lt-line.from-jd .lt-tag { background: #d6e4ff; border-color: #1B3A8C; color: #1B3A8C; }
  .lpv2-root .lt-line.from-notes { background: #fbf2f8; border-color: #c43e7a; }
  .lpv2-root .lt-line.from-notes .lt-tag { background: #f4d6ec; border-color: #c43e7a; color: #8b1f55; }
  .lpv2-root .lt-line.from-ai { background: #f4faf3; border-color: #2f7d32; }
  .lpv2-root .lt-line.from-ai .lt-tag { background: #d9f0d9; border-color: #2f7d32; color: #1d5b2e; }

  /* responsive */
  @media (max-width: 1100px) {
    .lpv2-root .how-shell { grid-template-columns: 1fr; }
    .lpv2-root .how-stage { min-height: 0; }
  }

  /* ========= RUBRIC (Win98 multi-window layout) ========= */
  .lpv2-root .rubric-shell {
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: 1.1fr 1.05fr;
    gap: 26px;
    align-items: start;
  }
  .lpv2-root .rubric-shell .col-left, .lpv2-root .rubric-shell .col-right { display: flex; flex-direction: column; gap: 18px; }
  .lpv2-root .rubric-shell .copy-block { padding: 0 4px 6px; }
  .lpv2-root .rubric-shell .copy-block .h2 { margin-top: 14px; font-size: 52px; }
  .lpv2-root .rubric-shell .copy-block .grade-vibes {
    margin-top: 26px;
    font-family: 'Pixelify Sans', monospace;
    font-size: 28px;
    color: var(--ink);
    line-height: 1;
  }
  .lpv2-root .rubric-shell .copy-block .lede-3 {
    margin-top: 14px;
    font-family: 'Courier Prime', monospace;
    font-size: 14px; line-height: 1.6;
    color: var(--ink-muted);
    max-width: 460px;
  }

  .lpv2-root .win98 {
    background: #f7f3ec;
    border: 1px solid #1a2a5e;
    box-shadow:
      inset 0 0 0 2px #f7f3ec,
      inset 0 0 0 3px #b8b09e,
      4px 4px 0 rgba(15, 25, 60, 0.10);
    padding: 3px;
  }
  .lpv2-root .win98 > .w-hd {
    margin: 0;
  }
  .lpv2-root .win98 .w-hd {
    background: #1a2a5e;
    color: #fff;
    padding: 5px 6px 5px 10px;
    font-family: 'Courier Prime', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid #1a2a5e;
  }
  .lpv2-root .win98 .w-hd .w-btns { display: flex; gap: 3px; }
  .lpv2-root .win98.hd-gray .w-hd {
    background: #e8e2d2;
    color: #1a2a5e;
    border-bottom: 1px solid #b8b09e;
  }
  .lpv2-root .win98.hd-gray .w-hd .w-btns i {
    border-color: #6b6555;
    color: #1a2a5e;
    background: #d4cdb8;
  }
  .lpv2-root .win98 .w-hd .w-btns i {
    width: 16px; height: 14px;
    background: #d4d0c8;
    border: 1px solid #1a2a5e;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
    display: grid; place-items: center;
    color: #000; font-size: 8px; font-weight: 700;
    font-style: normal;
    line-height: 1;
  }
  .lpv2-root .win98 .w-body { padding: 14px 16px; }

  /* Rubric: five dimensions */
  .lpv2-root .rubric-card {
    /* shadow now via .win98 */
  }
  .lpv2-root .rubric-list { padding: 0; }
  .lpv2-root .rubric-row {
    display: grid;
    grid-template-columns: 1fr 90px 240px;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px dashed var(--line);
  }
  .lpv2-root .rubric-row:last-child { border-bottom: 0; }
  .lpv2-root .rubric-row .name {
    font-family: 'Pixelify Sans', monospace;
    font-size: 19px;
  }
  .lpv2-root .rubric-row .name span {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-muted);
    margin-top: 4px;
    line-height: 1.45;
  }
  .lpv2-root .rubric-row {
    display: grid;
    grid-template-columns: 44px 1fr 56px 150px;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px dashed #d8d2c2;
  }
  .lpv2-root .rubric-row:last-child { border-bottom: 1px dashed #d8d2c2; }
  .lpv2-root .rubric-row .ico {
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    background: #f7f3ec;
    display: grid; place-items: center;
    color: var(--blue);
  }
  .lpv2-root .rubric-row .ico svg { width: 26px; height: 26px; image-rendering: pixelated; shape-rendering: crispEdges; }
  .lpv2-root .rubric-row .ico svg { display: block; }
  .lpv2-root .rubric-row .name {
    font-family: 'Pixelify Sans', monospace;
    font-size: 22px;
    line-height: 1;
  }
  .lpv2-root .rubric-row .name span {
    display: block;
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    font-weight: 400;
    color: var(--ink-muted);
    margin-top: 6px;
    line-height: 1.4;
  }
  .lpv2-root .rubric-row .score {
    font-family: 'Pixelify Sans', monospace;
    font-size: 22px;
    color: var(--ink);
    text-align: right;
    line-height: 1;
  }
  .lpv2-root .rubric-row .score small {
    font-size: 11px; color: var(--ink-muted); font-weight: 400;
  }
  .lpv2-root .bar {
    height: 11px;
    background: #e8e2d2;
    border: 1px solid #1a2a5e;
    position: relative;
    padding: 0;
  }
  .lpv2-root .bar > span {
    display: block;
    height: 100%;
    background: #1a2a5e;
  }

  /* SCORE SUMMARY card (Win98) */
  .lpv2-root .score-summary { }
  .lpv2-root .score-summary .ss-label {
    font-family: 'Courier Prime', monospace;
    font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: #aac4ee;
  }
  .lpv2-root .score-summary .ss-num {
    font-family: 'Pixelify Sans', monospace;
    font-size: 120px; line-height: 0.85;
    color: #fff;
    margin-top: 6px;
    letter-spacing: -0.02em;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }
  .lpv2-root .score-summary .ss-num small { font-size: 26px; opacity: 0.85; font-weight: 400; letter-spacing: 0; }
  .lpv2-root .score-summary .ss-verdict {
    margin-top: 22px;
    font-family: 'Courier Prime', monospace;
    font-size: 13px; line-height: 1.55;
    color: #fff;
  }
  .lpv2-root .score-summary .w-body {
    background: #1a2a5e;
    padding: 18px 22px 22px;
  }
  .lpv2-root .score-summary.win98 { border-color: #000; }

  /* TOP FIXES */
  .lpv2-root .fix-row {
    display: block;
    padding: 12px 0;
    border-bottom: 1px dashed #d8d2c2;
  }
  .lpv2-root .fix-row .fix-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
  }
  .lpv2-root .fix-row:last-child { border-bottom: 0; }
  .lpv2-root .fix-row:first-child { padding-top: 4px; }
  .lpv2-root .fix-row .pri {
    font-family: 'Courier Prime', monospace;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 2px 0;
    border: 1px solid;
    line-height: 1;
    height: 18px;
    width: 56px;
    display: grid; place-items: center;
    text-transform: uppercase;
  }
  .lpv2-root .fix-row .pri.high { background: transparent; border-color: #b03030; color: #7a1f1f; }
  .lpv2-root .fix-row .pri.medium { background: transparent; border-color: #c98b1a; color: #6b4f0f; }
  .lpv2-root .fix-row .pri.low { background: transparent; border-color: #2f7d32; color: #1d5b2e; }
  .lpv2-root .fix-row .fix-h {
    font-family: 'Pixelify Sans', monospace;
    font-size: 15px;
    line-height: 1.15;
    color: var(--ink);
  }
  .lpv2-root .fix-row .fix-p {
    margin-top: 3px;
    font-family: 'Courier Prime', monospace;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink-muted);
  }

  /* WHY A RUBRIC */
  .lpv2-root .why-rubric .w-body {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    padding: 16px;
    align-items: start;
  }
  .lpv2-root .why-rubric .bulb {
    width: 44px; height: 44px;
    background: transparent;
    border: 0;
    display: grid; place-items: center;
    line-height: 1;
    flex-shrink: 0;
  }
  .lpv2-root .why-rubric .body-txt {
    font-family: 'Courier Prime', monospace;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
  }
  .lpv2-root .why-rubric .quote {
    display: inline;
    background: #cfdcf7;
    color: var(--ink);
    padding: 1px 4px;
    font-family: 'Courier Prime', monospace;
    font-size: 12.5px;
    border: 0;
  }
  .lpv2-root .why-rubric .into-line {
    margin-top: 8px;
    color: var(--ink-muted);
    font-size: 12px;
  }

  /* CONSISTENT STANDARD strip */
  .lpv2-root .standard-bar {
    margin-top: 22px;
  }
  .lpv2-root .standard-bar .w-body {
    display: flex; align-items: center; gap: 28px;
    flex-wrap: wrap;
    padding: 16px 22px;
  }
  .lpv2-root .standard-bar .anchor {
    display: flex; align-items: center; gap: 12px;
    padding-right: 22px;
    border-right: 1.5px dashed var(--line);
  }
  .lpv2-root .standard-bar .anchor .shield {
    width: 36px; height: 36px;
    background: #1a2a5e;
    border: 1px solid #1a2a5e;
    display: grid; place-items: center;
    color: #fff;
  }
  .lpv2-root .standard-bar .anchor .txt {
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink);
  }
  .lpv2-root .standard-bar .anchor .txt b {
    display: block;
    font-family: 'Pixelify Sans', monospace;
    font-size: 14px;
    margin-bottom: 2px;
  }
  .lpv2-root .standard-bar .anchor .txt span { display: block; }
  .lpv2-root .standard-bar .dim { white-space: nowrap; }
  .lpv2-root .standard-bar .dims {
    display: flex; align-items: center;
    gap: 22px; flex-wrap: wrap;
  }
  .lpv2-root .standard-bar .dim {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Pixelify Sans', monospace;
    font-size: 14px;
    color: var(--ink);
  }
  .lpv2-root .standard-bar .dim .di svg { width: 18px; height: 18px; image-rendering: pixelated; shape-rendering: crispEdges; }
  .lpv2-root .standard-bar .dim .di {
    width: 28px; height: 28px;
    border: 1px solid var(--line);
    background: #f7f3ec;
    display: grid; place-items: center;
    color: var(--blue);
  }

  .lpv2-root .privacy-foot {
    margin-top: 14px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    color: var(--ink-muted);
  }
  .lpv2-root .privacy-foot .lock {
    width: 16px; height: 16px;
    display: grid; place-items: center;
    color: var(--gold);
    font-size: 14px;
  }

  /* ========= FEATURE SHOWCASE ========= */
  .lpv2-root .features {
    margin: 56px 0 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(240px, auto);
    gap: 18px;
  }
  .lpv2-root .feature {
    background: #fff;
    border: 1px solid var(--line);
    padding: 22px;
    position: relative;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.06);
    overflow: hidden;
  }
  .lpv2-root .feature .badge {
    display: inline-block;
    border: 1.5px solid var(--ink);
    background: #fff;
    padding: 1px 8px;
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    font-weight: 700;
  }
  .lpv2-root .feature h3 {
    font-family: 'Pixelify Sans', monospace;
    font-weight: 700;
    font-size: 26px;
    margin: 14px 0 0;
    line-height: 1.1;
  }
  .lpv2-root .feature p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-muted);
  }
  .lpv2-root .f-cv { grid-column: span 3; }
  .lpv2-root .f-cl { grid-column: span 3; }
  .lpv2-root .f-vi { grid-column: span 2; }
  .lpv2-root .f-fc { grid-column: span 2; }
  .lpv2-root .f-sp { grid-column: span 2; }
  .lpv2-root .f-cal { grid-column: span 3; }
  .lpv2-root .f-tr { grid-column: span 3; }

  /* feature inner mockups */
  .lpv2-root .mock-cv {
    margin: 18px 0 0;
    border: 1.5px solid var(--line);
    background: #faf7ee;
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
  }
  .lpv2-root .mock-cv .col { display: grid; gap: 6px; }
  .lpv2-root .mock-cv .ln { height: 8px; background: #d9d2c2; }
  .lpv2-root .mock-cv .ln.s { width: 60%; }
  .lpv2-root .mock-cv .ln.m { width: 80%; }
  .lpv2-root .mock-cv .hi { background: #fff3a8; height: 8px; position: relative; }
  .lpv2-root .mock-cv .hi::after {
    content: "+ quantify"; position: absolute; right: -82px; top: -3px;
    background: var(--blue); color: white; padding: 1px 6px; font-size: 10px;
  }

  .lpv2-root .mock-letter {
    margin: 18px 0 0;
    border: 1.5px solid var(--line);
    background: #fff;
    padding: 14px;
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink);
    position: relative;
  }
  .lpv2-root .mock-letter .tag {
    position: absolute; right: -10px; top: 14px;
    background: var(--green); color: white;
    padding: 2px 8px; font-size: 11px; font-weight: 700;
    transform: rotate(3deg);
  }

  .lpv2-root .mock-voice {
    margin: 18px 0 0;
    height: 110px;
    background: linear-gradient(180deg, #1B3A8C 0%, #102559 100%);
    color: white;
    padding: 14px;
    display: grid; grid-template-rows: auto 1fr;
    gap: 8px;
  }
  .lpv2-root .mock-voice .row { display: flex; align-items: center; gap: 8px; font-family: 'Courier Prime', monospace; font-size: 11px; }
  .lpv2-root .mock-voice .rec { width: 8px; height: 8px; border-radius: 999px; background: #ff5252; box-shadow: 0 0 0 0 rgba(255,82,82,0.6); animation: pulse 1.4s infinite; }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255,82,82,0.7); }
    70% { box-shadow: 0 0 0 8px rgba(255,82,82,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,82,82,0); }
  }
  .lpv2-root .mock-voice .wave {
    align-self: end;
    display: flex; align-items: end; gap: 3px; height: 50px;
  }
  .lpv2-root .mock-voice .wave i {
    width: 4px; background: #87B7DC; display: inline-block;
    animation: bar 1.2s infinite ease-in-out;
  }
  @keyframes bar {
    0%, 100% { height: 14%; }
    50% { height: 100%; }
  }

  .lpv2-root .mock-contacts {
    margin: 18px 0 0;
    border: 1.5px solid var(--line); background: #faf7ee;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    overflow: hidden;
  }
  .lpv2-root .mock-contacts .mc-row {
    display: grid; grid-template-columns: 28px 1fr auto;
    gap: 10px; align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
  }
  .lpv2-root .mock-contacts .mc-row:last-child { border-bottom: 0; }
  .lpv2-root .mock-contacts .av {
    width: 24px; height: 24px;
    background: var(--blue); color: white;
    display: grid; place-items: center;
    font-weight: 700; font-size: 11px;
  }
  .lpv2-root .mock-contacts .name { font-weight: 600; }
  .lpv2-root .mock-contacts .name span { display: block; color: var(--ink-muted); font-weight: 400; font-size: 11px; }
  .lpv2-root .mock-contacts .verify { font-family: 'Courier Prime', monospace; color: var(--green); font-size: 11px; }

  .lpv2-root .mock-sponsor {
    margin: 18px 0 0;
    border: 1.5px solid var(--line);
    padding: 12px;
    font-family: 'Courier Prime', monospace;
    font-size: 12px;
    background: #faf7ee;
  }
  .lpv2-root .mock-sponsor .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
  .lpv2-root .mock-sponsor .row:last-child { border-bottom: 0; }
  .lpv2-root .mock-sponsor .ok { color: var(--green); font-weight: 700; }
  .lpv2-root .mock-sponsor .no { color: #b03030; font-weight: 700; }
  .lpv2-root .mock-sponsor .un { color: var(--gold); font-weight: 700; }

  .lpv2-root .mock-cal {
    margin: 18px 0 0;
    border: 1.5px solid var(--line);
    background: #faf7ee;
    padding: 12px;
  }
  .lpv2-root .mock-cal .head {
    display: flex; justify-content: space-between;
    font-family: 'Courier Prime', monospace; font-size: 12px;
    color: var(--ink-muted);
    margin-bottom: 8px;
  }
  .lpv2-root .mock-cal .grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  }
  .lpv2-root .mock-cal .d {
    aspect-ratio: 1.4 / 1; background: #fff; border: 1px solid var(--line);
    font-family: 'Courier Prime', monospace; font-size: 11px;
    padding: 4px; position: relative;
  }
  .lpv2-root .mock-cal .d.has::after {
    content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 4px;
    background: var(--blue);
  }
  .lpv2-root .mock-cal .d.has2::after { background: var(--pink); }
  .lpv2-root .mock-cal .d.has3::after { background: var(--green); }

  .lpv2-root .mock-tracker {
    margin: 18px 0 0;
    border: 1.5px solid var(--line);
    max-height: 240px;
    overflow-y: auto;
    background: #faf7ee;
    overflow: hidden;
  }
  .lpv2-root .mock-tracker .col-head {
    display: grid; grid-template-columns: repeat(4, 1fr);
    font-family: 'Courier Prime', monospace; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-muted);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 1;
  }
  .lpv2-root .mock-tracker .col-head > div {
    padding: 8px 10px; border-right: 1px dashed var(--line);
  }
  .lpv2-root .mock-tracker .col-head > div:last-child { border-right: 0; }
  .lpv2-root .mock-tracker .row {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--line);
  }
  .lpv2-root .mock-tracker .row:last-child { border-bottom: 0; }
  .lpv2-root .mock-tracker .row > div {
    padding: 8px 10px; font-size: 12px; border-right: 1px dashed var(--line);
    display: flex; align-items: center; gap: 6px;
  }
  .lpv2-root .mock-tracker .row > div:last-child { border-right: 0; }
  .lpv2-root .mock-tracker .chip {
    display: inline-block; padding: 1px 6px; font-size: 10px;
    border: 1px solid var(--ink); background: #fff;
    font-family: 'Courier Prime', monospace;
  }
  .lpv2-root .mock-tracker .chip.r { background: var(--green); color: white; border-color: var(--green); }
  .lpv2-root .mock-tracker .chip.y { background: #f0c200; }
  .lpv2-root .mock-tracker .chip.b { background: var(--blue); color: white; border-color: var(--blue); }

  /* ========= COMPARISON ========= */
  .lpv2-root .compare {
    margin: 56px 0 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  }
  .lpv2-root .compare .col h3 {
    font-family: 'Pixelify Sans', monospace;
    font-weight: 700; font-size: 24px;
    margin: 0 0 10px;
  }
  .lpv2-root .compare .col.before h3 { color: #b03030; }
  .lpv2-root .compare .col.after h3 { color: var(--green); }
  .lpv2-root .compare .col .doc {
    background: #fff; border: 1px solid var(--line);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.06);
    padding: 24px;
    font-family: 'Courier Prime', monospace;
    font-size: 14px;
    line-height: 1.65;
    min-height: 320px;
  }
  .lpv2-root .compare .col.before .doc { border-left: 6px solid #b03030; }
  .lpv2-root .compare .col.after .doc { border-left: 6px solid var(--green); }
  .lpv2-root .compare .col .doc .strike { background: #ffd9d9; padding: 0 2px; }
  .lpv2-root .compare .col .doc .add { background: #d9f0d9; padding: 0 2px; }
  .lpv2-root .compare .col .score-line {
    margin: 14px 0 0;
    display: flex; gap: 10px; align-items: baseline;
    font-family: 'Pixelify Sans', monospace;
  }
  .lpv2-root .compare .col .score-line .n { font-size: 36px; }
  .lpv2-root .compare .col.before .score-line .n { color: #b03030; }
  .lpv2-root .compare .col.after .score-line .n { color: var(--green); }
  .lpv2-root .compare .col .score-line .lab {
    font-family: 'Inter', sans-serif; font-size: 13px; color: var(--ink-muted);
  }

  /* ========= FINAL CTA ========= */
  .lpv2-root .final {
    margin: 0;
    background: var(--ink);
    color: #efeae0;
    padding: 96px 48px;
  }
  .lpv2-root .final-inner {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
  }
  .lpv2-root .final h2 {
    font-family: 'Pixelify Sans', monospace;
    font-weight: 700; font-size: 64px;
    line-height: 1.0; margin: 0;
    letter-spacing: -0.01em;
  }
  .lpv2-root .final h2 em { color: #87B7DC; font-style: italic; display: block; margin-top: 8px; }
  .lpv2-root .final p {
    margin: 22px 0 0;
    font-family: 'Courier Prime', monospace;
    font-size: 16px; line-height: 1.6;
    color: #cfcabc;
    max-width: 520px;
  }
  .lpv2-root .final-cta { margin: 28px 0 0; display: flex; gap: 16px; flex-wrap: wrap; }
  .lpv2-root .final-cta .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px;
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px;
    cursor: pointer; text-decoration: none;
    border: 2px solid #efeae0;
    background: transparent; color: #efeae0;
  }
  .lpv2-root .final-cta .btn.primary { background: #efeae0; color: var(--ink); }
  .lpv2-root .final-cta .btn.primary:hover { background: #fff; }

  .lpv2-root .final-side {
    background: #efeae0; color: var(--ink);
    padding: 28px;
    font-family: 'Courier Prime', monospace;
    box-shadow: 8px 8px 0 rgba(255,255,255,0.06);
  }
  .lpv2-root .final-side .label {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink-muted);
  }
  .lpv2-root .final-side .quote {
    margin: 16px 0 0;
    font-family: 'Pixelify Sans', monospace;
    font-size: 22px; line-height: 1.25;
    color: var(--ink);
  }
  .lpv2-root .final-side .who {
    margin: 22px 0 0; font-size: 13px; color: var(--ink-muted);
    border-top: 1px solid var(--line); padding-top: 14px;
  }

  /* ========= FOOTER ========= */
  .lpv2-root footer.foot {
    background: #efeae0;
    border-top: 2px solid #888;
    padding: 56px 48px 0;
  }
  .lpv2-root .foot-inner {
    max-width: 1280px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 32px;
    padding-bottom: 48px;
  }
  .lpv2-root .foot h4 {
    font-family: 'Courier Prime', monospace;
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink-muted); margin: 0 0 14px;
  }
  .lpv2-root .foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
  .lpv2-root .foot a { color: var(--ink); text-decoration: none; font-size: 14px; }
  .lpv2-root .foot a:hover { color: var(--blue); text-decoration: underline; }
  .lpv2-root .foot .brand-block .logo-row { margin-bottom: 14px; }
  .lpv2-root .foot .brand-block p {
    font-size: 13px; line-height: 1.55; color: var(--ink-muted); margin: 0; max-width: 320px;
  }
  .lpv2-root .foot-bar {
    border-top: 1px dashed var(--line);
    padding: 18px 0;
    max-width: 1280px; margin: 0 auto;
    display: flex; justify-content: space-between;
    font-family: 'Courier Prime', monospace;
    font-size: 12px; color: var(--ink-muted);
  }

  /* ========= utility ========= */
  .lpv2-root .toggle button { transition: background 0.15s ease, color 0.15s ease; }

  @media (max-width: 1300px) {
    .lpv2-root .page { min-width: 0; }
  }

    /* ── Embedded chrome extension demo (scoped) ── */
  .lpv2-root #rr-demo-root {
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #5A554A;
    --color-text-tertiary: #8a8576;
    --color-text-info: #1B3A8C;
    --color-background-primary: #ffffff;
    --color-background-secondary: #f1ede3;
    --color-background-info: #e6eefb;
    --color-border-tertiary: #d9d2c0;
    --color-border-secondary: #b8b09e;
    --font-mono: 'Courier Prime', monospace;
    font-family: 'Inter', sans-serif;
    color: var(--color-text-primary);
  }
  .lpv2-root #rr-demo-root .rr-demo-tab { background: none; border: none; padding: 8px 4px; font-size: 11px; color: var(--color-text-tertiary); cursor: pointer; border-bottom: 1.5px solid transparent; font-family: inherit; }
  .lpv2-root #rr-demo-root .rr-demo-tab:hover { color: var(--color-text-secondary); }
  .lpv2-root #rr-demo-root .rr-demo-tab.active { color: #1B3A8C; border-bottom-color: #1B3A8C; font-weight: 600; }
  .lpv2-root #rr-demo-root .rr-demo-card { border: 0.5px solid var(--color-border-tertiary); border-radius: 8px; padding: 10px; }
  .lpv2-root #rr-demo-root .rr-demo-card:hover { border-color: var(--color-border-secondary); }
  .lpv2-root #rr-demo-root .rr-demo-unlock-btn { width: 100%; padding: 8px; background: #1B3A8C; color: white; border: none; border-radius: 6px; font-size: 11px; font-weight: 500; cursor: pointer; font-family: inherit; }
  .lpv2-root #rr-demo-root .rr-demo-unlock-btn:hover { opacity: 0.9; }
  .lpv2-root #rr-demo-root .rr-demo-unlock-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .lpv2-root #rr-demo-root .rr-demo-copy-btn { background: none; border: none; color: var(--color-text-tertiary); font-size: 10px; cursor: pointer; padding: 0; font-family: inherit; }
  .lpv2-root #rr-demo-root .rr-demo-copy-btn:hover { color: var(--color-text-secondary); }
  .lpv2-root #rr-demo-root .rr-demo-job { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border: 0.5px solid var(--color-border-tertiary); border-radius: 6px; font-size: 12px; cursor: pointer; background: var(--color-background-primary); }
  .lpv2-root #rr-demo-root .rr-demo-job:hover { border-color: var(--color-border-secondary); }
  .lpv2-root #rr-demo-root .rr-demo-job-option { padding: 8px 10px; font-size: 12px; cursor: pointer; border-radius: 4px; }
  .lpv2-root #rr-demo-root .rr-demo-job-option:hover { background: var(--color-background-secondary); }
  .lpv2-root #rr-demo-root .rr-demo-spinner { display: inline-block; width: 11px; height: 11px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rr-spin 0.8s linear infinite; vertical-align: -1px; margin-right: 4px; }
  @keyframes rr-spin { to { transform: rotate(360deg); } }
  .lpv2-root #rr-demo-root .rr-demo-stat { background: var(--color-background-secondary); border-radius: 8px; padding: 10px 12px; }
  .lpv2-root #rr-demo-root .rr-demo-stat-label { font-size: 10px; color: var(--color-text-secondary); margin-bottom: 4px; }
  .lpv2-root #rr-demo-root .rr-demo-stat-value { font-size: 18px; font-weight: 600; color: var(--color-text-primary); }
  .lpv2-root #rr-demo-root .rr-demo-stage-pill { background: var(--color-background-secondary); border: none; border-radius: 999px; padding: 4px 10px; font-size: 10px; cursor: pointer; font-family: inherit; color: var(--color-text-secondary); }
  .lpv2-root #rr-demo-root .rr-demo-stage-pill.active { background: #1B3A8C; color: white; }
  .lpv2-root #rr-demo-root .rr-demo-job-row { padding: 10px; border: 0.5px solid var(--color-border-tertiary); border-radius: 8px; cursor: pointer; }
  .lpv2-root #rr-demo-root .rr-demo-job-row:hover { border-color: var(--color-border-secondary); }
  .lpv2-root #rr-demo-root .rr-demo-tone-btn { padding: 6px 12px; font-size: 11px; border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-primary); border-radius: 999px; cursor: pointer; font-family: inherit; color: var(--color-text-secondary); }
  .lpv2-root #rr-demo-root .rr-demo-tone-btn.active { background: #1B3A8C; color: white; border-color: #1B3A8C; }
  .lpv2-root #rr-demo-root .rr-demo-bar-track { height: 6px; background: var(--color-background-secondary); border-radius: 3px; overflow: hidden; }
  .lpv2-root #rr-demo-root .rr-demo-bar-fill { height: 100%; background: #1B3A8C; border-radius: 3px; transition: width 0.4s; }


    /* ── Plan B: Pricing + FAQ in retro Win98 style ── */
    .lpv2-root .lpv2-price-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin: 32px 0 0;
    }
    .lpv2-root .lpv2-tier { display: flex; flex-direction: column; }
    .lpv2-root .lpv2-tier .w-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 0;
      padding: 16px 18px 18px;
    }
    .lpv2-root .lpv2-tier-price {
      font-family: 'Pixelify Sans', monospace;
      font-size: 36px;
      line-height: 1;
      color: var(--blue);
      margin-bottom: 4px;
    }
    .lpv2-root .lpv2-tier-meta {
      font-family: 'Courier Prime', monospace;
      font-size: 11px;
      color: var(--ink-muted);
      margin-bottom: 14px;
    }
    .lpv2-root .lpv2-tier-bullets {
      list-style: none;
      padding: 0;
      margin: 0 0 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }
    .lpv2-root .lpv2-tier-bullets li {
      font-family: 'Courier Prime', monospace;
      font-size: 13px;
      line-height: 1.45;
      color: var(--ink);
      padding-left: 18px;
      position: relative;
    }
    .lpv2-root .lpv2-tier-bullets li::before {
      content: '✓';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--green);
      font-weight: 700;
    }
    .lpv2-root .lpv2-tier-cta {
      align-self: stretch;
      justify-content: center;
      text-align: center;
    }
    .lpv2-root .lpv2-tier-featured .w-hd {
      background: linear-gradient(180deg, #d4a334 0%, #b1851f 50%, #8a661a 100%);
    }
    .lpv2-root .lpv2-rec-badge {
      display: inline-block;
      margin-left: 6px;
      font-size: 9px;
      font-weight: 700;
      padding: 1px 6px;
      background: rgba(0, 0, 0, 0.18);
      letter-spacing: 0.06em;
      color: #fff;
      text-transform: uppercase;
    }
    .lpv2-root .lpv2-pricing-smallprint {
      font-family: 'Courier Prime', monospace;
      font-size: 11px;
      color: var(--ink-muted);
      text-align: center;
      margin: 18px 0 0;
    }
    .lpv2-root .lpv2-faq { padding-top: 64px; }
    .lpv2-root .lpv2-faq-window { margin-top: 32px; }
    .lpv2-root .lpv2-faq-body { padding: 4px 16px; }
    .lpv2-root .lpv2-faq-item {
      border-bottom: 1px dashed #d8d2c2;
    }
    .lpv2-root .lpv2-faq-item:last-child { border-bottom: 0; }
    .lpv2-root .lpv2-faq-q {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 4px;
      font-family: 'Pixelify Sans', monospace;
      font-size: 17px;
      color: var(--ink);
    }
    .lpv2-root .lpv2-faq-q::-webkit-details-marker { display: none; }
    .lpv2-root .lpv2-faq-toggle {
      width: 14px;
      height: 14px;
      background: #f7f3ec;
      border: 1px solid #1a2a5e;
      display: inline-grid;
      place-items: center;
      font-family: 'Courier Prime', monospace;
      font-size: 10px;
      font-weight: 700;
      color: #1a2a5e;
      flex-shrink: 0;
      line-height: 1;
    }
    .lpv2-root .lpv2-faq-item .lpv2-faq-toggle::before { content: '+'; }
    .lpv2-root .lpv2-faq-item[open] .lpv2-faq-toggle::before { content: '\2212'; }
    .lpv2-root .lpv2-faq-a {
      padding: 0 4px 14px 28px;
    }
    .lpv2-root .lpv2-faq-a p {
      font-family: 'Courier Prime', monospace;
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink-muted);
      margin: 0 0 0.6rem 0;
    }
    @media (max-width: 880px) {
      .lpv2-root .lpv2-price-grid { grid-template-columns: 1fr; }
    }

    /* ── fix/dark-sections (2026-05-05): paint .lpv2-root cream so
       sections without explicit backgrounds (How It Works, Features,
       Before/After, FAQ) show paper through. Flip Final CTA from
       intentionally-dark to cream and recolour its text/CTAs. ── */
    .lpv2-root { background: #efeae0; }

    .lpv2-root .final {
      background: var(--bg-paper);
      color: var(--ink);
    }
    .lpv2-root .final h2 em { color: var(--blue); }
    .lpv2-root .final p { color: var(--ink-muted); }
    .lpv2-root .final-cta .btn {
      border-color: var(--ink);
      color: var(--ink);
    }
    .lpv2-root .final-cta .btn.primary {
      background: var(--ink);
      color: #efeae0;
    }

    /* ── fix/mobile-overflow (2026-05-05): body has overflow-x:hidden,
       so fixed-width children inside .lpv2-root were getting clipped.
       Allow headlines to wrap, collapse multi-column grids to 1 col,
       and trim 48px horizontal paddings to 16px on small viewports. ── */
    .lpv2-root { max-width: 100%; overflow-x: clip; }

    @media (max-width: 760px) {
      .lpv2-root .navbar { padding: 16px 16px 0; gap: 12px; flex-wrap: wrap; }
      .lpv2-root .hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 48px 16px 56px;
      }
      .lpv2-root .hero-copy { max-width: 100%; }
      .lpv2-root .hero-h1,
      .lpv2-root .hero-h1-italic {
        white-space: normal;
        font-size: clamp(24px, 8vw, 44px);
        overflow-wrap: anywhere;
      }
      .lpv2-root .rule { width: 100%; }
      .lpv2-root .app-window {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
      }
      .lpv2-root .feat-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        max-width: 100%;
        column-gap: 16px;
      }
      .lpv2-root section.s { padding: 56px 16px; }
      .lpv2-root .compare { grid-template-columns: minmax(0, 1fr); }
      .lpv2-root .final { padding: 56px 16px; }
      .lpv2-root .final-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
      }
      .lpv2-root .final h2 { font-size: clamp(36px, 10vw, 56px); }
      .lpv2-root footer.foot { padding: 40px 16px 0; }
      .lpv2-root .foot-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
        padding-bottom: 32px;
      }
      .lpv2-root .foot-bar {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        padding: 18px 16px;
      }
      .lpv2-root .waitlist-strip { padding: 0 16px; }
      .lpv2-root .waitlist-strip-form input { width: 100%; }
    }

    @media (max-width: 480px) {
      .lpv2-root .foot-inner { grid-template-columns: minmax(0, 1fr); }
      .lpv2-root .cta-row { gap: 12px; }
      .lpv2-root .cta-row .btn-95 { width: 100%; justify-content: center; }
      .lpv2-root .brand { font-size: 18px; }
    }

    /* ── fix/mobile-overflow phase 2 (2026-05-05): rubric/features/
       how-stage internals + hero tagline wrap. Phase 1 fixed the
       hero shell; phase 2 fixes the Win98 rubric panels, the 6-col
       features bento, the step-2 score grid, and the headline
       clamps that were still firing fixed font sizes. ── */

    @media (max-width: 760px) {
      /* Hero tagline: was inline-flex with no flex-wrap (single line) */
      .lpv2-root .hero-tagline {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
      }

      /* Rubric shell: was 1.1fr 1.05fr at every viewport */
      .lpv2-root .rubric-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
      }
      .lpv2-root .rubric-shell .col-left,
      .lpv2-root .rubric-shell .col-right {
        min-width: 0;
      }
      .lpv2-root .rubric-shell .copy-block .h2 {
        font-size: clamp(32px, 9vw, 52px);
      }

      /* Rubric row: was 44px 1fr 56px 150px (overflowed below ~400px) */
      .lpv2-root .rubric-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 14px 16px;
      }
      .lpv2-root .rubric-row .score { text-align: left; }

      /* Features bento: was repeat(6, 1fr) with 2- and 3-col spans */
      .lpv2-root .features {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
      }
      .lpv2-root .f-cv,
      .lpv2-root .f-cl,
      .lpv2-root .f-vi,
      .lpv2-root .f-fc,
      .lpv2-root .f-sp,
      .lpv2-root .f-cal,
      .lpv2-root .f-tr {
        grid-column: auto;
      }

      /* How It Works step-2 score grid: was 1fr 1fr inside narrow stage */
      .lpv2-root .score-grid { grid-template-columns: minmax(0, 1fr); }
      .lpv2-root .how-rail .rail-foot { flex-wrap: wrap; }

      /* Before/After doc cards: trim 24px padding */
      .lpv2-root .compare .col .doc { padding: 18px; }
    }

    @media (max-width: 480px) {
      /* Score-summary 78/100 was a hard 120px Pixelify */
      .lpv2-root .score-summary .ss-num {
        font-size: clamp(72px, 22vw, 120px);
      }
      /* How-It-Works step-2 score number was hard 72px */
      .lpv2-root .score-overall .num {
        font-size: clamp(48px, 16vw, 72px);
      }
    }

    /* ── fix/mobile-overflow phase 3 (2026-05-05): kill the hero
       gradient on mobile. Desktop keeps the Bliss-style sky/grass
       aesthetic + cream veil; mobile gets a flat cream hero so the
       right-side gradient leak (where the 90deg veil fades to
       transparent at 75%+) and the bottom-of-shell green band stop
       bleeding through. Also drop min-height:820px which is
       irrelevant once the layout stacks. ── */
    @media (max-width: 760px) {
      .lpv2-root .hero-shell {
        background: var(--bg-paper);
        min-height: 0;
      }
      .lpv2-root .hero-veil { display: none; }
    }

    /* ── fix/mobile-overflow phase 6 (2026-05-05): three scoped
       fixes for the chrome demo + feat-grid.

       The global a11y rule at line 5324
         @media (max-width: 768px) { button { min-height: 44px } }
       was inflating Win9x titlebar buttons (CSS height:20px) and
       the rr-demo-tab strip to 40-44px tall on mobile. Override
       min-height:0 on those specific buttons. Also: make the tab
       strip horizontally scrollable so 'Insights' isn't clipped,
       and keep .feat-grid at 2 cols across all mobile widths. ── */
    @media (max-width: 760px) {
      /* Win9x titlebar buttons - defeat the 44px min-height a11y rule */
      .lpv2-root .titlebar .tb-buttons button { min-height: 0; }

      /* Chrome demo tab strip - horizontal scroll, no clipped tabs */
      .lpv2-root .rr-demo-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .lpv2-root .rr-demo-tabs::-webkit-scrollbar { display: none; }
      .lpv2-root #rr-demo-root .rr-demo-tab {
        min-height: 0;
        flex-shrink: 0;
        white-space: nowrap;
      }
    }

/* ═══════ /LPV2 MARKETING STYLES ═══════ */


/* Apollo-inspired ReplyRate landing. Scoped so the existing application remains intact. */
#landing.apx-page{background:#cfcdca;color:#0d0d0d;font-family:Arial,Helvetica,sans-serif;min-height:100vh;padding:0 16px 16px;overflow:visible}
#landing.apx-page *{box-sizing:border-box}
#landing.apx-page a{color:inherit}
.apx-nav{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;max-width:1440px;margin:0 auto;background:#cfcdca}
.apx-nav-left,.apx-nav-right,.apx-nav-links{display:flex;align-items:center}
.apx-nav-left{gap:42px}.apx-nav-links{gap:34px}.apx-nav-right{gap:12px}
.apx-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:24px;letter-spacing:-1.2px;font-weight:500}
.apx-brand-mark{width:26px;height:26px;position:relative;display:inline-block}
.apx-brand-mark i,.apx-brand-mark b{position:absolute;left:12px;top:0;width:3px;height:26px;background:#d9ff00;border-radius:999px;transform-origin:center}
.apx-brand-mark i:nth-child(2){transform:rotate(45deg)}.apx-brand-mark i:nth-child(3){transform:rotate(90deg)}.apx-brand-mark i:nth-child(4){transform:rotate(135deg)}
.apx-nav-links a,.apx-login{font-size:14px;text-decoration:none;color:#0c0c0c;white-space:nowrap}
.apx-nav-btn{height:44px;padding:0 18px;border:1px solid #171717;background:transparent;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}
.apx-nav-btn.primary{background:#e5ff00;border-color:#e5ff00;padding:0 22px}
.apx-mobile-toggle{display:none;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer}
.apx-canvas{background:#fff;border-radius:8px;overflow:clip;max-width:1440px;margin:0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.035)}
.apx-hero{text-align:center;padding:68px 32px 0}
.apx-hero h1{font-family:'Fraunces','Tiempos Headline','Cormorant Garamond','Times New Roman',serif;font-size:clamp(48px,6.1vw,88px);font-weight:550;line-height:1;letter-spacing:-.01em;max-width:980px;margin:0 auto 28px;text-wrap:balance}
.apx-hero-copy{font-size:17px;line-height:1.45;max-width:650px;margin:0 auto 24px;color:#292929}
.apx-hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0 auto 18px}
.apx-hero-actions button{height:52px;padding:0 24px;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;border:1px solid #171717;background:transparent;font-family:inherit;color:#0c0c0c}
.apx-hero-actions button.primary{background:#e5ff00;border-color:#e5ff00}
.apx-hero-actions button:hover{background:#f3f1ec}
.apx-hero-actions button.primary:hover{background:#d6ee00}
.apx-signup{width:min(510px,100%);margin:0 auto}
.apx-email-row{display:grid;grid-template-columns:1fr 150px;gap:14px}
.apx-email-row input{height:52px;border:1px solid #5b5b5b;border-radius:8px;padding:0 16px;font:16px Arial;background:#fff}
.apx-email-row button{border:0;border-radius:8px;background:#e5ff00;font-size:15px;font-weight:700;cursor:pointer}
.apx-or{height:36px;display:flex;align-items:center;gap:14px;color:#777;font-size:14px}
.apx-or:before,.apx-or:after{content:"";height:1px;background:#d8d8d8;flex:1}
.apx-sso{display:grid;grid-template-columns:1fr;gap:14px;max-width:520px;margin:0 auto}
.apx-sso button{height:48px;background:#fff;border:1px solid #171717;border-radius:8px;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.apx-gmark{font-weight:800;font-size:20px;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0);-webkit-background-clip:text;color:transparent}
.apx-msmark{display:grid;grid-template-columns:repeat(2,7px);gap:2px}.apx-msmark i{width:7px;height:7px;display:block}.apx-msmark i:nth-child(1){background:#f35325}.apx-msmark i:nth-child(2){background:#81bc06}.apx-msmark i:nth-child(3){background:#05a6f0}.apx-msmark i:nth-child(4){background:#ffba08}
.apx-terms{font-size:11px;color:#747474;margin-top:16px}.apx-terms a{text-decoration:underline}
.apx-demo{margin:72px auto 0;width:calc(100% - 88px);min-height:603px;border-radius:12px 12px 0 0;position:relative;overflow:hidden;background:linear-gradient(180deg,#f7e7c5 0%,#f4d798 44%,#d69b37 100%)}
.apx-demo:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.55),transparent 38%),linear-gradient(180deg,transparent 60%,rgba(117,67,0,.18));pointer-events:none}
.apx-demo-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-48%);width:min(770px,72%);height:430px}
.apx-ghost{position:absolute;inset:0;border:2px solid rgba(255,255,255,.5);border-radius:20px;background:rgba(255,255,255,.10);box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 0 22px rgba(255,255,255,.04),0 40px 100px rgba(86,50,3,.18);transform:scale(.94)}
.apx-assistant{position:absolute;inset:0;background:rgba(255,252,245,.78);border:2px solid rgba(255,255,255,.92);border-radius:20px;box-shadow:0 24px 80px rgba(86,50,3,.18);backdrop-filter:blur(18px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:52px}
.apx-assistant-logo{width:48px;height:48px;margin-bottom:22px;position:relative}.apx-assistant-logo span{position:absolute;left:22px;top:4px;width:4px;height:40px;background:#34312c;border-radius:99px;transform-origin:center}.apx-assistant-logo span:nth-child(2){transform:rotate(45deg)}.apx-assistant-logo span:nth-child(3){transform:rotate(90deg)}.apx-assistant-logo span:nth-child(4){transform:rotate(135deg)}
.apx-assistant-title{font-size:30px;letter-spacing:-.6px;margin-bottom:30px;color:#3b352e}
.apx-prompt{width:100%;height:100px;border:1px solid rgba(0,0,0,.14);border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.06);display:flex;align-items:center;padding:0 22px;gap:16px;text-align:left;font-size:24px;line-height:1.23;color:#3d3a36}
.apx-prompt-text{flex:1}.apx-send{width:44px;height:44px;border-radius:8px;background:#33312d;color:#fff;display:grid;place-items:center;font-size:28px;flex:0 0 auto}
.apx-flow{position:absolute;inset:34px;display:none;grid-template-columns:1fr 1fr;gap:18px;align-content:center}
.apx-flow.active{display:grid;animation:apxFade .5s ease both}.apx-flow-card{background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.09);border-radius:14px;padding:20px;text-align:left;box-shadow:0 18px 40px rgba(69,42,0,.09)}
.apx-flow-card.wide{grid-column:1/-1}.apx-flow-kicker{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:#777;margin-bottom:8px}.apx-flow-card h4{font-size:21px;margin:0 0 8px;letter-spacing:-.4px}.apx-flow-card p{font-size:14px;color:#5e5a55;line-height:1.5}.apx-progress{height:8px;background:#eee6d8;border-radius:99px;margin-top:16px;overflow:hidden}.apx-progress i{display:block;height:100%;width:82%;background:#e5ff00;border-radius:inherit;animation:apxGrow 2.3s ease both}.apx-decision{background:#e5ff00!important}.apx-badge{display:inline-flex;padding:5px 9px;border-radius:99px;background:#111;color:#fff;font-size:11px;margin-bottom:12px}
@keyframes apxFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes apxGrow{from{width:0}}
.apx-demo-caption{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:13px;color:#4d3b1e;letter-spacing:.2px}
.apx-platform h2,.apx-close h2{font-family:'Fraunces','Tiempos Headline','Cormorant Garamond',serif;font-weight:550;letter-spacing:-.01em;letter-spacing:-.045em}
.apx-platform{padding:88px 52px 104px;background:#faf9f6}.apx-platform-head{text-align:center;max-width:1040px;margin:0 auto 42px}.apx-platform h2{font-family:'Fraunces','Tiempos Headline','Cormorant Garamond',serif;font-weight:550;letter-spacing:-.01em;font-size:66px;line-height:.95;margin-bottom:18px}.apx-platform-head p{font-size:17px;color:#464646;line-height:1.55;max-width:920px;margin:0 auto}.apx-platform-switcher{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 auto 42px;max-width:1320px}.apx-platform-button{height:58px;border:1px solid #ddd8d0;background:#f7f5f1;border-radius:6px;padding:0 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.25s ease;font-family:inherit}.apx-platform-button.active{background:#c8d8f4;border-color:#c8d8f4}.apx-product-slider{max-width:1320px;margin:0 auto;overflow:hidden;padding-top:6px}.apx-product-track{display:flex;width:300%;transition:transform .65s cubic-bezier(.22,.61,.36,1)}.apx-product-slide{width:33.333333%;flex:0 0 33.333333%;display:grid;grid-template-columns:minmax(395px,.9fr) minmax(540px,1.1fr);align-items:center;gap:72px;min-height:610px}.apx-product-copy{padding:12px 0;display:flex;flex-direction:column;justify-content:center;max-width:540px}.apx-flow-kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6c7484;margin-bottom:28px}.apx-product-copy h3{font-family:'Fraunces','Tiempos Headline','Cormorant Garamond',serif;font-weight:550;letter-spacing:-.04em;font-size:60px;line-height:1.05;margin-bottom:22px}.apx-product-copy p{font-size:17px;color:#4f4f4f;line-height:1.55;max-width:470px;margin-bottom:36px}.apx-product-copy ul{list-style:none;display:grid;gap:16px;margin-top:auto;margin-bottom:34px}.apx-product-copy li{font-size:15px;display:flex;gap:12px;align-items:flex-start;color:#4f4f4f;line-height:1.45}.apx-product-copy li:before{content:'◷';color:#5e6a7c;font-size:15px;line-height:1.2}.apx-product-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.apx-inline-primary{border:0;background:#111;color:#fff;border-radius:8px;height:48px;padding:0 20px;font-weight:700;cursor:pointer}.apx-inline-link{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border:1px solid #111;border-radius:8px;font-weight:600;text-decoration:none;font-size:14px;color:#111}.apx-product-visual{position:relative;height:520px;min-height:520px;border-radius:10px;display:flex;align-items:stretch;justify-content:stretch;overflow:hidden;padding:0;box-shadow:none}.apx-product-visual img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center center;border-radius:0;box-shadow:none;transform:scale(1.12);transform-origin:center center}.apx-product-visual--cv{background:#e8e1fb}.apx-product-visual--contacts{background:#e8e1fb}.apx-product-visual--interview{background:#e8e1fb}.apx-product-slide:nth-child(1) .apx-product-visual img{object-position:52% 48%;transform:scale(1.21)}.apx-product-slide:nth-child(2) .apx-product-visual img{object-position:52% 49%;transform:scale(1.24)}.apx-product-slide:nth-child(3) .apx-product-visual img{object-position:52% 48%;transform:scale(1.22)}.apx-visual-shell{width:100%;max-width:740px;min-height:500px;background:#f8f8f6;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.14);padding:18px 18px 22px;display:flex;flex-direction:column}.apx-window-header{display:flex;gap:8px;margin-bottom:18px}.apx-window-header span{width:10px;height:10px;border-radius:50%;background:#dad5cc}.apx-cv-layout{display:grid;grid-template-columns:190px 1fr;gap:18px;flex:1}.apx-sidebar-card{background:#fff;border:1px solid #e5e0d6;border-radius:14px;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.apx-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#eee 0%,#d3d3d3 100%)}.apx-sidebar-card strong,.apx-contact-card strong{font-size:16px}.apx-sidebar-card span,.apx-contact-card span{font-size:12px;color:#666}.apx-readiness-ring{margin-top:auto;width:118px;height:118px;border-radius:50%;border:10px solid #dbe5ff;border-top-color:#3467ff;display:flex;flex-direction:column;align-items:center;justify-content:center}.apx-readiness-ring em{font-style:normal;font-weight:700;font-size:24px}.apx-readiness-ring small{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:.05em;text-align:center;padding:0 12px}.apx-main-card-stack{display:grid;gap:14px;grid-auto-rows:min-content}.apx-main-card{background:#fff;border:1px solid #ece7df;border-radius:14px;padding:20px}.apx-main-card label,.apx-question-card label,.apx-answer-card label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#777;margin-bottom:10px}.apx-main-card strong,.apx-question-card strong,.apx-answer-card strong,.apx-coach-card strong{display:block;font-size:24px;line-height:1.15;margin-bottom:10px}.apx-main-card p,.apx-question-card p,.apx-answer-card p,.apx-coach-card p{font-size:14px;line-height:1.55;color:#565656;margin:0}.apx-main-card--good{background:#f4f9f3}.apx-main-card--warn{background:#fff8f0}.apx-mini-row{display:flex;gap:10px;flex-wrap:wrap}.apx-mini-pill{padding:8px 12px;border-radius:999px;background:#f1efe9;border:1px solid #e4dfd6;font-size:12px;color:#444}.apx-visual-shell--split{gap:12px}.apx-split-grid{display:grid;grid-template-columns:260px 1fr;gap:16px;flex:1}.apx-contact-list{display:grid;gap:12px}.apx-contact-card{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #ece7df;border-radius:14px;padding:16px}.apx-contact-dot{width:34px;height:34px;border-radius:50%;background:#101010;flex:0 0 auto}.apx-email-composer{background:#fff;border:1px solid #ece7df;border-radius:16px;padding:18px;display:flex;flex-direction:column}.apx-email-line{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #efebe4}.apx-email-line small{width:56px;text-transform:uppercase;letter-spacing:.1em;color:#777;font-size:11px}.apx-email-line span{font-size:14px;color:#222}.apx-email-body{padding:14px 0;display:grid;gap:10px;flex:1}.apx-email-body p{font-size:14px;line-height:1.55;color:#444;margin:0}.apx-email-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px}.apx-send-button{background:#e5ff00;border-radius:999px;padding:10px 16px;font-size:12px;font-weight:700}.apx-interview-mock{display:grid;gap:14px}.apx-question-card,.apx-answer-card,.apx-coach-card{background:#fff;border:1px solid #ece7df;border-radius:16px;padding:22px}.apx-question-card{border-left:4px solid #3467ff}.apx-answer-card{border-left:4px solid #a95fff}.apx-coach-card{background:#fff9ec}.apx-coach-card strong{font-size:20px}.apx-faq{padding:96px 64px}@media (max-width:1100px){.apx-platform-switcher{grid-template-columns:1fr}.apx-product-slide{grid-template-columns:1fr;gap:34px;min-height:auto}.apx-product-copy{padding:42px 28px}.apx-product-copy h3{font-size:42px}.apx-product-visual{height:420px;min-height:420px}.apx-cv-layout,.apx-split-grid{grid-template-columns:1fr}.apx-visual-shell{min-height:auto}}@media (max-width:720px){.apx-platform{padding:72px 18px}.apx-platform h2{font-size:46px}.apx-platform-head p{font-size:15px}.apx-platform-button{font-size:11px;padding:14px 12px}.apx-product-copy h3{font-size:34px}.apx-visual-shell{padding:14px}.apx-main-card strong,.apx-question-card strong,.apx-answer-card strong{font-size:20px}}

/* Final Apollo-inspired product tabs pass */
.apx-platform{
  padding:92px 44px 116px;
  background:#fff;
}
.apx-platform-head{
  max-width:980px;
  margin:0 auto 52px;
}
.apx-platform-head h2{
  font-size:64px;
  line-height:.96;
  letter-spacing:-.045em;
  margin-bottom:18px;
}
.apx-platform-head p{
  max-width:830px;
  font-size:16px;
  line-height:1.55;
  color:#3f3f3f;
}
.apx-platform-switcher{
  max-width:1340px;
  gap:14px;
  margin:0 auto 72px;
}
.apx-platform-button{
  height:50px;
  border:0;
  border-radius:4px;
  background:#f5f3ef;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  color:#111;
}
.apx-platform-button.active{
  background:#c9d9f6;
  border-color:#c9d9f6;
}
.apx-product-slider{
  max-width:1340px;
  padding:0;
}
.apx-product-track{
  align-items:stretch;
}
.apx-product-slide{
  grid-template-columns:minmax(430px,.92fr) minmax(610px,1.08fr);
  gap:68px;
  min-height:690px;
  align-items:stretch;
}
.apx-product-copy{
  max-width:none;
  padding:6px 0 8px;
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  align-content:start;
}
.apx-product-copy h3{
  max-width:560px;
  font-size:60px;
  line-height:.97;
  letter-spacing:-.045em;
  margin:66px 0 22px;
}
.apx-product-copy > p{
  max-width:500px;
  font-size:16px;
  line-height:1.55;
  margin:0 0 24px;
  color:#444;
}
.apx-product-actions{
  gap:12px;
  margin:0;
}
.apx-inline-primary,
.apx-inline-link{
  height:46px;
  border-radius:7px;
  padding:0 18px;
  font-size:14px;
}
.apx-product-copy ul{
  align-self:end;
  margin:0 0 8px;
  gap:13px;
  max-width:520px;
}
.apx-product-copy li{
  font-size:15px;
  color:#4a4a4a;
  line-height:1.4;
}
.apx-product-copy li:before{
  content:'◷';
  color:#4b5563;
  font-size:14px;
}
.apx-product-visual{
  height:auto;
  min-height:0;
  border-radius:10px;
  background:transparent !important;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.apx-product-visual img,
.apx-product-slide:nth-child(1) .apx-product-visual img,
.apx-product-slide:nth-child(2) .apx-product-visual img,
.apx-product-slide:nth-child(3) .apx-product-visual img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  max-height:none;
  object-fit:contain;
  object-position:center;
  transform:none;
  border-radius:10px;
  box-shadow:none;
}
@media (max-width:1100px){
  .apx-platform{padding:76px 24px 88px}
  .apx-platform-switcher{margin-bottom:42px}
  .apx-product-slide{grid-template-columns:1fr;gap:34px;min-height:auto}
  .apx-product-copy{padding:0}
  .apx-product-copy h3{margin-top:0;font-size:46px}
  .apx-product-copy ul{margin-top:34px}
  .apx-product-visual{order:-1}
}
@media (max-width:720px){
  .apx-platform{padding:62px 16px 74px}
  .apx-platform-head h2{font-size:44px}
  .apx-platform-switcher{grid-template-columns:1fr;gap:8px;margin-bottom:34px}
  .apx-platform-button{height:46px}
  .apx-product-copy h3{font-size:38px}
  .apx-product-actions{flex-direction:column;align-items:stretch}
  .apx-inline-primary,.apx-inline-link{width:100%}
}

.apx-brand-logo{display:inline-flex;align-items:center;gap:8px;line-height:1}.apx-brand-svg{display:block;flex:0 0 auto}.apx-brand-word{font-family:'Fraunces','Tiempos Headline','Cormorant Garamond',serif;font-weight:550;font-size:25px;letter-spacing:-.02em;color:#111}


/* Interview feature: keep the marketing copy and product result from competing */
.apx-interview-card{
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr)!important;
  align-items:stretch!important;
  background:#0b0b0b!important;
  position:relative!important;
  overflow:hidden!important;
}
.apx-interview-card:after{display:none!important;}
.apx-interview-copy{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  max-width:none!important;
  padding:64px 52px!important;
  min-height:560px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  color:#fff!important;
  background:linear-gradient(145deg,#070707 0%,#151515 100%)!important;
  z-index:2!important;
}
.apx-interview-eyebrow{
  display:block;
  margin-bottom:18px;
  font-size:11px;
  line-height:1;
  letter-spacing:.15em;
  font-weight:800;
  color:#dfff00;
}
.apx-interview-copy h3{
  max-width:420px!important;
  font-size:clamp(43px,4.2vw,62px)!important;
  line-height:.98!important;
  margin:0 0 22px!important;
}
.apx-interview-copy p{
  max-width:430px!important;
  font-size:16px!important;
  line-height:1.6!important;
  margin-bottom:28px!important;
}
.apx-interview-copy button{
  align-self:flex-start!important;
  min-width:205px!important;
  height:50px!important;
  padding:0 22px!important;
  cursor:pointer!important;
}
.apx-interview-media{
  min-height:560px;
  background-size:cover!important;
  background-position:center!important;
  position:relative;
}
.apx-interview-media:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 18%);
  pointer-events:none;
}
@media(max-width:980px){
  .apx-interview-card{grid-template-columns:minmax(290px,.82fr) minmax(0,1.18fr)!important;}
  .apx-interview-copy{padding:48px 34px!important;min-height:500px!important;}
  .apx-interview-copy h3{font-size:46px!important;}
  .apx-interview-media{min-height:500px;background-position:56% center!important;}
}
@media(max-width:720px){
  .apx-interview-card{grid-template-columns:1fr!important;}
  .apx-interview-copy{min-height:auto!important;padding:42px 28px 38px!important;}
  .apx-interview-copy h3{max-width:520px!important;font-size:43px!important;}
  .apx-interview-media{min-height:360px;background-position:center!important;}
  .apx-interview-media:after{background:linear-gradient(180deg,rgba(0,0,0,.14),transparent 20%)!important;}
}

/* Exact user-approved interview section image. No overlays or duplicate copy. */
.apx-interview-static-image{display:block;width:100%;height:auto;border-radius:12px;object-fit:contain;background:#111}
@media(max-width:720px){.apx-interview{padding:40px 16px!important}.apx-interview-static-image{border-radius:10px}}


/* Hero chat-demo video (replaces the embedded live animation, previously .apx-full-animation
   + .apx-demo-loader + .apx-demo-poster mobile fallback). Apollo-style: the video fills the
   panel width; the panel height follows the video's 16:9 aspect, reserved via aspect-ratio so
   there's no layout shift while it loads, with the poster painting instantly. */
.apx-demo{
  width:calc(100% - 88px)!important;
  min-height:0!important;
  background:#F4C53A!important;
  border-radius:12px 12px 0 0!important;
  overflow:hidden!important;
  position:relative!important;
}
.apx-demo:before{display:none!important}
.apx-demo-video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1280 / 720;   /* reserve space -> no CLS; poster fills until the video loads */
  object-fit:cover;
  border:0;
  background:#F4C53A;
  border-radius:inherit;
}
@media(max-width:980px){
  .apx-demo{width:calc(100% - 22px)!important}
}
@media(max-width:620px){
  .apx-demo{width:calc(100% - 14px)!important;border-radius:10px 10px 0 0!important}
}

/* FAQ and footer repair: the earlier product-section rebuild removed these rules. */
.apx-faq{
  padding:104px 64px 112px;
  background:#f7f5f0;
  border-top:1px solid #dedad2;
}
.apx-faq h2{
  margin:0 auto 48px;
  max-width:960px;
  text-align:center;
  font-family:'Fraunces','Tiempos Headline','Cormorant Garamond',serif;
  font-weight:550;
  font-size:clamp(44px,5vw,64px);
  line-height:.98;
  letter-spacing:-.045em;
}
.apx-faq-list{
  max-width:960px;
  margin:0 auto;
  border-top:1px solid #aaa59d;
}
.apx-faq-item{
  border-bottom:1px solid #aaa59d;
}
.apx-faq-q{
  appearance:none;
  width:100%;
  min-height:78px;
  border:0;
  padding:22px 0;
  background:transparent;
  color:#111;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  text-align:left;
  font:600 19px/1.3 Arial,Helvetica,sans-serif;
  cursor:pointer;
}
.apx-faq-q span{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border:1px solid #aaa59d;
  border-radius:50%;
  font-size:22px;
  font-weight:400;
  line-height:1;
  transition:transform .22s ease,background .22s ease,color .22s ease;
}
.apx-faq-a{
  display:none;
  max-width:780px;
  padding:0 58px 24px 0;
  color:#56534e;
  font:400 16px/1.65 Arial,Helvetica,sans-serif;
}
.apx-faq-item.open .apx-faq-a{display:block;}
.apx-faq-item.open .apx-faq-q span{
  transform:rotate(45deg);
  background:#111;
  color:#fff;
  border-color:#111;
}
.apx-footer{
  background:#111;
  color:#fff;
  padding:74px 64px 26px;
}
.apx-footer-grid{
  width:min(1320px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(290px,1.7fr) repeat(4,minmax(120px,1fr));
  gap:48px;
  align-items:start;
}
.apx-footer-grid>div:first-child{padding-right:32px;}
.apx-footer-brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-bottom:18px;
  font-family:'Fraunces','Tiempos Headline','Cormorant Garamond',serif;
  font-size:34px;
  line-height:1;
  letter-spacing:-.025em;
}
.apx-footer-brand:before{display:none;}
.apx-footer p{
  max-width:420px;
  margin:0 0 16px;
  color:#c9c9c7;
  font:400 14px/1.65 Arial,Helvetica,sans-serif;
}
.apx-footer-bio{
  display:block;
  max-width:430px;
  color:#969694;
  font:400 13px/1.65 Arial,Helvetica,sans-serif;
}
.apx-footer h4{
  margin:4px 0 18px;
  color:#fff;
  font:700 12px/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.apx-footer a{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 0 12px;
  color:#bcbcb9;
  text-decoration:none;
  font:400 14px/1.35 Arial,Helvetica,sans-serif;
  transition:color .18s ease;
}
.apx-footer a:hover{color:#fff;}
.apx-footer-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px;}
.apx-footer-mark{width:30px;height:30px;flex:0 0 auto;display:inline-flex;}
.apx-footer-mark svg,.apx-footer-mark img{width:100%;height:100%;display:block;}
.apx-footer-word{font-family:'Fraunces','Tiempos Headline','Cormorant Garamond',serif;font-weight:550;font-size:26px;letter-spacing:-.02em;line-height:1;color:#f4f4f2;}
.apx-footer-bottom{
  width:min(1320px,100%);
  margin:56px auto 0;
  padding-top:22px;
  border-top:1px solid #343434;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#838381;
  font:400 12px/1.4 Arial,Helvetica,sans-serif;
}
@media(max-width:980px){
  .apx-faq{padding:82px 28px 88px;}
  .apx-footer{padding:62px 28px 24px;}
  .apx-footer-grid{grid-template-columns:1.5fr repeat(2,1fr);gap:42px 34px;}
  .apx-footer-grid>div:first-child{grid-row:span 2;padding-right:18px;}
}
@media(max-width:680px){
  .apx-faq{padding:68px 20px 72px;}
  .apx-faq h2{text-align:left;margin-bottom:30px;}
  .apx-faq-q{font-size:17px;min-height:68px;}
  .apx-faq-a{padding-right:0;font-size:15px;}
  .apx-footer{padding:54px 22px 22px;}
  .apx-footer-grid{grid-template-columns:1fr 1fr;gap:36px 24px;}
  .apx-footer-grid>div:first-child{grid-column:1/-1;grid-row:auto;padding-right:0;}
  .apx-footer-bottom{margin-top:42px;flex-direction:column;gap:6px;}
}

.apx-comparison-showcase{
  padding:104px 52px 112px;
  background:#f7f4ee;
  border-top:1px solid rgba(17,17,17,.06);
}
.apx-comparison-frame{
  max-width:1440px;
  margin:0 auto;
}
.apx-comparison-frame img{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:0 26px 80px rgba(35,31,24,.10);
}
@media (max-width:900px){
  .apx-comparison-showcase{padding:80px 24px 88px;}
}

.apx-footer-brand.apx-brand-logo{font-size:0;line-height:0;gap:0;margin-bottom:20px;font-family:inherit;letter-spacing:normal}
.apx-footer-brand.apx-brand-logo:before{display:none}
.apx-footer-brand.apx-brand-logo img{display:block;width:auto;height:34px;max-width:146px;object-fit:contain}



/* Mobile polish pass */
html{scroll-behavior:smooth}
@media (max-width:980px){
  #landing.apx-page{padding:0 10px 10px}
  .apx-canvas{border-radius:10px}
  .apx-nav{height:auto;min-height:74px;padding:14px 2px;flex-wrap:wrap;align-items:center;row-gap:12px;position:relative}
  .apx-nav-left{flex:1;min-width:0;gap:14px;justify-content:space-between}
  .apx-nav-links,
  .apx-nav-right{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:12px;padding:6px 0 0}
  .apx-nav-links a{font-size:15px;padding:4px 0}
  .apx-nav-right{gap:10px}
  .apx-nav-right .apx-login{font-size:15px}
  .apx-nav-right .apx-nav-btn{width:100%;max-width:220px;justify-content:center}
  .apx-mobile-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px}
  .apx-nav.menu-open .apx-nav-links,
  .apx-nav.menu-open .apx-nav-right{display:flex}
  .apx-brand-svg{width:24px;height:24px}
  .apx-brand-word{font-size:22px}

  .apx-hero{padding:44px 18px 0}
  .apx-hero h1{font-size:clamp(42px,10vw,64px);max-width:720px;margin-bottom:20px}
  .apx-hero-copy{font-size:16px;line-height:1.5;margin-bottom:20px}
  .apx-signup{max-width:100%}
  .apx-email-row{grid-template-columns:1fr}
  .apx-email-row input,.apx-email-row button{height:50px}
  .apx-sso{gap:10px}
  .apx-demo{margin-top:52px;width:calc(100% - 24px)!important;border-radius:12px 12px 0 0!important}


  .apx-platform-head{margin-bottom:36px}
  .apx-platform-head h2{font-size:48px}
  .apx-product-slide{gap:28px}
  .apx-product-copy h3{font-size:44px}
  .apx-product-copy>p{font-size:16px}
  .apx-product-visual img{border-radius:12px}

  .apx-comparison-showcase{padding:72px 18px 80px}

  .apx-faq{padding:72px 24px 80px}
  .apx-faq h2{font-size:44px;line-height:1}
  .apx-footer{padding:56px 24px 24px}
  .apx-footer-grid{grid-template-columns:1fr 1fr;gap:30px 22px}
  .apx-footer-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:680px){
  #landing.apx-page{padding:0 8px 8px}
  .apx-canvas{border-radius:8px}
  .apx-nav{padding:12px 0}
  .apx-brand-word{font-size:21px}
  .apx-nav-links,.apx-nav-right{padding-top:2px}

  .apx-hero{padding:36px 14px 0}
  .apx-hero h1{font-size:clamp(36px,11vw,52px);letter-spacing:-.035em}
  .apx-hero-copy{font-size:15px}
  .apx-demo{width:calc(100% - 16px)!important;margin-top:40px;border-radius:10px 10px 0 0!important}


  .apx-platform{padding:56px 14px 68px}
  .apx-platform-head h2{font-size:38px}
  .apx-platform-head p{font-size:15px}
  .apx-platform-switcher{gap:8px;margin-bottom:28px}
  .apx-platform-button{height:48px;font-size:10px;letter-spacing:.12em;padding:0 12px}
  .apx-product-slide{gap:22px}
  .apx-product-copy{grid-template-rows:auto auto auto auto auto}
  .apx-product-copy h3{font-size:34px;line-height:1;margin-bottom:16px}
  .apx-product-copy>p{font-size:15px;margin-bottom:20px}
  .apx-product-copy ul{gap:12px;margin-bottom:0}
  .apx-product-copy li{font-size:14px;gap:10px}
  .apx-product-actions{gap:10px}
  .apx-inline-primary,.apx-inline-link{height:44px;font-size:14px}
  .apx-product-visual img{border-radius:10px}

  .apx-interview{padding:32px 14px!important}
  .apx-interview-static-image{border-radius:10px}

  .apx-comparison-showcase{padding:56px 12px 64px}

  .apx-faq{padding:60px 16px 66px}
  .apx-faq h2{font-size:36px;margin-bottom:26px}
  .apx-faq-q{font-size:17px;min-height:62px;padding:18px 0}
  .apx-faq-a{font-size:15px;line-height:1.6}

  .apx-footer{padding:50px 16px 20px}
  .apx-footer-grid{grid-template-columns:1fr;gap:26px}
  .apx-footer-grid>div:first-child{grid-column:auto}
  .apx-footer p,.apx-footer-bio,.apx-footer a{font-size:14px}
  .apx-footer-bottom{margin-top:30px;padding-top:16px;flex-direction:column;align-items:flex-start;gap:6px}
  .apx-footer-word{font-size:23px}
}


.apx-platform-button{position:relative;overflow:hidden;cursor:pointer;transition:background .2s}
.apx-tab-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(17,17,17,.08);pointer-events:none;display:block}
.apx-platform-button.active{background:#e5ff00;border-color:#e5ff00;color:#111}
@media(max-width:1100px){.apx-tab-fill{display:none}}

    .apx-comparison-showcase{padding:96px 24px 104px;background:#ffffff}
    .apx-cmp-frame{max-width:1180px;margin:0 auto}
    .apx-cmp-head{max-width:760px;margin:0 auto 44px;text-align:center}
    .apx-cmp-head h2{font-family:'Fraunces','Fraunces','Cormorant Garamond',serif;font-weight:500;letter-spacing:-.02em;font-size:48px;line-height:1.02;margin:0 0 14px;color:#1c1a17}
    .apx-cmp-head p{font-size:17px;line-height:1.55;color:#5a564f;margin:0}
    .apx-cmp-card{background:#ffffff;border:1px solid #e7e2d8;border-radius:28px;padding:14px 40px 26px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 48px -28px rgba(0,0,0,.18)}
    .apx-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
    .apx-cmp-scroll::-webkit-scrollbar{height:7px}
    .apx-cmp-scroll::-webkit-scrollbar-thumb{background:#d8d2c6;border-radius:999px}
    .apx-cmp-grid{min-width:680px}
    .apx-cmp-row{display:grid;grid-template-columns:1.7fr 1.25fr 1fr 1fr;align-items:center}
    .apx-cmp-body .apx-cmp-row + .apx-cmp-row{border-top:1px solid #eee9df}
    .apx-cmp-cell{padding:16px 14px;font-size:15px;line-height:1.35;color:#2a2722;display:flex;align-items:center;gap:11px}
    .apx-cmp-feature i{font-size:19px;color:#a49d90;flex:0 0 auto}
    .apx-cmp-feature span{font-weight:600;color:#2a2722}
    .apx-cmp-rr .apx-cmp-check{width:22px;height:22px;border-radius:999px;background:#111;color:#e5ff00;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 auto}
    .apx-cmp-rr span{font-weight:600;color:#111}
    .apx-cmp-cell.apx-cmp-rr{background:#fbfbe3;box-shadow:inset 1px 0 0 #ece9c2,inset -1px 0 0 #ece9c2}
    .apx-cmp-mid{justify-content:center;text-align:center}
    .apx-cmp-muted{color:#a49d90;font-weight:400}
    .apx-cmp-x{width:22px;height:22px;border-radius:999px;background:#efe9df;color:#a39c90;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:0 0 auto}
    /* header row */
    .apx-cmp-headrow{border-bottom:1px solid #e6e0d2}
    .apx-cmp-headrow .apx-cmp-cell{flex-direction:column;justify-content:flex-end;gap:12px;padding:26px 14px 22px;text-align:center}
    .apx-cmp-hlabel{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#111}
    .apx-cmp-hcap{font-size:13px;color:#a49d90;margin-top:-6px}
    .apx-cmp-rlogo{width:52px;height:52px;border-radius:13px;background:#3B82F6;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(59,130,246,.28)}
    .apx-cmp-rlogo b{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:#fff;font-size:26px;line-height:1}
    .apx-cmp-lockup{display:inline-flex;align-items:center;gap:9px}
    .apx-cmp-lockup svg,.apx-cmp-lockup img{flex:0 0 auto;display:block}
    .apx-cmp-word{font-family:'Fraunces','Tiempos Headline','Cormorant Garamond',serif;font-weight:550;font-size:25px;letter-spacing:-.02em;line-height:1;color:#1a1614}
    .apx-cmp-dots{display:flex;gap:7px;height:52px;align-items:center;justify-content:center}
    .apx-cmp-dots i{width:14px;height:14px;border-radius:999px;display:block}
    .apx-cmp-doc{height:52px;display:flex;align-items:center;justify-content:center}
    .apx-cmp-doc i{font-size:34px;color:#b7b0a2}
    .apx-cmp-hcol{align-items:center}
    @media(max-width:820px){
      .apx-comparison-showcase{padding:64px 16px 72px}
      .apx-cmp-head h2{font-size:34px}
      .apx-cmp-card{padding:8px 14px 16px;border-radius:22px}
      .apx-cmp-cell{font-size:13px;padding:13px 10px;gap:8px}
      .apx-cmp-hlabel{font-size:16px}
      .apx-cmp-grid{min-width:600px}
      .apx-cmp-row>.apx-cmp-cell:first-child{position:sticky;left:0;background:#fff;z-index:2;box-shadow:1px 0 0 #eee9df}
      .apx-cmp-feature i{font-size:16px}
    }
    @media(max-width:640px){
      .apx-cmp-card{padding:8px 12px 16px}
      .apx-cmp-scroll{overflow-x:visible}
      .apx-cmp-grid{min-width:0}
      .apx-cmp-row.apx-cmp-headrow{display:none}
      .apx-cmp-body{display:flex;flex-direction:column;gap:10px}
      .apx-cmp-row{display:flex;flex-direction:column;gap:2px;background:#faf9f5;border:1px solid #eee9df;border-radius:14px;padding:14px}
      .apx-cmp-body .apx-cmp-row + .apx-cmp-row{border-top:1px solid #eee9df}
      .apx-cmp-row>.apx-cmp-cell:first-child{position:static;background:none;box-shadow:none;padding:0 0 6px}
      .apx-cmp-row .apx-cmp-cell{padding:6px 0;justify-content:space-between;text-align:right}
      .apx-cmp-cell.apx-cmp-rr{background:#fbfbe3;box-shadow:none;border-radius:10px;padding:8px 10px;margin:2px 0}
      .apx-cmp-row .apx-cmp-cell:not(:first-child)::before{content:"";font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#a49d90}
      .apx-cmp-rr::before{content:"ReplyRate"}
      .apx-cmp-row .apx-cmp-cell:nth-child(3)::before{content:"AI tools"}
      .apx-cmp-row .apx-cmp-cell:nth-child(4)::before{content:"Traditional"}
    }

.apx-ready{padding:26px 24px 96px;background:#fff}
.apx-ready-card{max-width:1280px;margin:0 auto;border-radius:26px;overflow:hidden;background:#191a1a;display:grid;grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr);min-height:440px}
.apx-ready-copy{padding:64px 56px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.apx-ready-copy h2{font-family:'Fraunces','Tiempos Headline','Cormorant Garamond',serif;font-weight:550;letter-spacing:-.03em;font-size:46px;line-height:1.06;color:#f4f3f0;margin:0 0 20px;max-width:360px}
.apx-ready-copy p{font-size:15px;line-height:1.65;color:#b9b7b2;margin:0 0 34px;max-width:340px}
.apx-ready-btn{height:48px;padding:0 24px;border:0;border-radius:8px;background:#e5ff00;color:#111;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.apx-ready-btn:hover{filter:brightness(.96)}
.apx-ready-media{background:url('/assets/interview-banner.png') center/cover no-repeat;min-height:100%}
@media(max-width:900px){
  .apx-ready{padding:20px 16px 72px}
  .apx-ready-card{grid-template-columns:1fr;min-height:0}
  .apx-ready-media{order:-1;min-height:260px}
  .apx-ready-copy{padding:38px 28px 42px}
  .apx-ready-copy h2{font-size:34px}
  .apx-ready-copy p{margin-bottom:26px;max-width:none}
  .apx-ready-btn{width:100%;max-width:320px}
}

  /* JOB JOURNAL: CSS */
  #jobhunterView{--jh-bg:var(--bg);--jh-bg2:var(--surface);--jh-bg3:var(--surface2);--jh-border:var(--border);--jh-border2:var(--border2);--jh-text:var(--text);--jh-muted:var(--text2);--jh-dim:var(--text3);--jh-accent:var(--accent);--jh-red:#dc2626;--jh-green:#22c55e;--jh-amber:#f59e0b;--jh-purple:#a855f7;--jh-linkedin:#0A66C2;background:var(--bg);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;padding:0;min-height:calc(100vh - 58px)}
  #jobhunterView .jh-app{background:var(--jh-bg);max-width:100%;margin:0 auto;padding:24px}
  #jobhunterView .jh-steps-bar{display:flex;align-items:center;gap:8px;margin-bottom:32px}
  #jobhunterView .jh-sp{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600;border:1px solid var(--jh-border);color:var(--jh-dim);transition:all 0.3s;cursor:pointer}
  #jobhunterView .jh-sp.active{border-color:var(--jh-accent);color:var(--jh-accent);background:rgba(36,72,255,0.06)}
  #jobhunterView .jh-sp.done{border-color:var(--jh-green);color:var(--jh-green);background:rgba(34,197,94,0.04)}
  #jobhunterView .jh-sp-n{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border:1px solid currentColor}
  #jobhunterView .jh-sp.done .jh-sp-n{background:var(--jh-green);color:var(--jh-bg);border-color:var(--jh-green)}
  #jobhunterView .jh-sc{width:24px;height:1px;background:var(--jh-border)}
  #jobhunterView .jh-panel{display:none;animation:jhFadeIn 0.3s ease}
  #jobhunterView .jh-panel.active{display:block}
  @keyframes jhFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  #jobhunterView .jh-btn{padding:14px 24px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;border:none;transition:all 0.2s}
  #jobhunterView .jh-btn-primary{background:var(--jh-accent);color:#fff}
  #jobhunterView .jh-btn-primary:hover{opacity:0.9}
  #jobhunterView .jh-btn-primary:disabled{opacity:0.3;cursor:not-allowed}
  #jobhunterView .jh-btn-outline{background:none;border:1px solid var(--jh-border);color:var(--jh-muted)}
  #jobhunterView .jh-btn-outline:hover{color:#fff;border-color:var(--jh-border2)}
  #jobhunterView .jh-btn-send{background:var(--jh-green);color:var(--jh-bg);padding:14px 28px;border-radius:8px;font-size:14px;font-weight:700;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
  #jobhunterView .jh-btn-copy{background:none;border:1px solid var(--jh-border);color:#fff;padding:14px 28px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
  #jobhunterView .jh-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;gap:16px}
  #jobhunterView .jh-spinner{width:32px;height:32px;border:2px solid var(--jh-border);border-top-color:var(--jh-accent);border-radius:50%;animation:jhSpin 0.8s linear infinite}
  @keyframes jhSpin{to{transform:rotate(360deg)}}
  #jobhunterView .jh-load-text{font-size:13px;color:var(--jh-muted);text-align:center}
  #jobhunterView .jh-mode-header h2{font-family:'Fraunces',serif;font-size:36px;font-weight:800;color:#fff;letter-spacing:-1.5px;margin-bottom:6px}
  #jobhunterView .jh-mode-header h2 em{font-style:italic;color:var(--jh-accent)}
  #jobhunterView .jh-mode-header>p{font-size:14px;color:var(--jh-muted);margin-bottom:28px}
  #jobhunterView .jh-mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px}
  #jobhunterView .jh-mc{background:var(--jh-bg2);border:2px solid var(--jh-border);border-radius:14px;padding:28px;cursor:pointer;transition:all 0.25s;position:relative}
  #jobhunterView .jh-mc:hover{border-color:var(--jh-border2);background:var(--jh-bg3)}
  #jobhunterView .jh-mc.sel{border-color:var(--jh-accent);background:rgba(36,72,255,0.03)}
  #jobhunterView .jh-mc.sel::before{content:'';position:absolute;top:14px;right:14px;width:10px;height:10px;border-radius:50%;background:var(--jh-accent);box-shadow:0 0 8px var(--jh-accent)}
  #jobhunterView .jh-mc-icon{font-size:28px;margin-bottom:12px}
  #jobhunterView .jh-mc h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:4px}
  #jobhunterView .jh-mc p{font-size:13px;color:var(--jh-muted);line-height:1.5}
  #jobhunterView .jh-fs{display:none;animation:jhFadeIn 0.25s ease}
  #jobhunterView .jh-fs.active{display:block}
  #jobhunterView .jh-fg{margin-bottom:16px}
  #jobhunterView .jh-fl{font-size:12px;font-weight:600;color:var(--jh-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
  #jobhunterView .jh-fi{width:100%;background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:10px;padding:14px 16px;font-size:14px;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;outline:none;transition:border 0.2s;resize:none}
  #jobhunterView .jh-fi:focus{border-color:var(--jh-accent)}
  #jobhunterView .jh-fi::placeholder{color:var(--jh-dim)}
  #jobhunterView .jh-fr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #jobhunterView .jh-aw{position:relative}
  #jobhunterView .jh-al{position:absolute;top:100%;left:0;right:0;background:#141a2e;border:1px solid var(--jh-border2);border-radius:10px;margin-top:4px;max-height:220px;overflow-y:auto;z-index:50;display:none}
  #jobhunterView .jh-al.show{display:block}
  #jobhunterView .jh-ai{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background 0.15s;border-bottom:1px solid var(--jh-border)}
  #jobhunterView .jh-ai:last-child{border-bottom:none}
  #jobhunterView .jh-ai:hover{background:var(--jh-bg3)}
  #jobhunterView .jh-ai-logo{width:28px;height:28px;border-radius:6px;background:var(--jh-bg3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--jh-accent);border:1px solid var(--jh-border)}
  #jobhunterView .jh-ai-info{flex:1}
  #jobhunterView .jh-ai-name{font-size:13px;font-weight:600;color:#fff}
  #jobhunterView .jh-ai-detail{font-size:11px;color:var(--jh-dim)}
  #jobhunterView .jh-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  #jobhunterView .jh-tag{padding:5px 12px;border-radius:100px;font-size:11px;font-weight:600;border:1px solid var(--jh-border);color:var(--jh-muted);cursor:pointer;transition:all 0.2s;background:none}
  #jobhunterView .jh-tag:hover{border-color:var(--jh-border2);color:#fff}
  #jobhunterView .jh-tag.sel{border-color:var(--jh-accent);color:var(--jh-accent);background:rgba(36,72,255,0.06)}
  #jobhunterView .jh-ct-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:8px}
  #jobhunterView .jh-ct-top h3{font-size:18px;font-weight:700;color:#fff}
  #jobhunterView .jh-ct-meta{display:flex;gap:8px;flex-wrap:wrap}
  #jobhunterView .jh-ct-badge{font-size:11px;color:var(--jh-muted);background:var(--jh-bg2);padding:4px 12px;border-radius:100px;border:1px solid var(--jh-border)}
  #jobhunterView .jh-ct-note{font-size:12px;color:var(--jh-dim);margin-bottom:20px;line-height:1.5}
  #jobhunterView .jh-ct-header{display:grid;grid-template-columns:48px 1fr 140px 100px 90px 36px;gap:14px;padding:0 18px 8px;font-size:10px;font-weight:700;color:var(--jh-dim);text-transform:uppercase;letter-spacing:1.5px}
  #jobhunterView .jh-ch-r{text-align:center}
  #jobhunterView .jh-ct-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
  #jobhunterView .jh-cr{display:grid;grid-template-columns:48px 1fr 140px 100px 90px 36px;align-items:center;gap:14px;background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:12px;padding:14px 18px;cursor:pointer;transition:all 0.2s}
  #jobhunterView .jh-cr:hover{border-color:rgba(36,72,255,0.15);background:var(--jh-bg3)}
  #jobhunterView .jh-cr.sel{border-color:var(--jh-accent);background:rgba(36,72,255,0.04)}
  #jobhunterView .jh-cr-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
  #jobhunterView .jh-cr-name{font-size:14px;font-weight:700;color:#fff;margin-bottom:1px}
  #jobhunterView .jh-cr-role{font-size:12px;color:var(--jh-muted)}
  #jobhunterView .jh-cr-match{display:inline-flex;font-size:10px;font-weight:600;color:var(--jh-green);background:rgba(34,197,94,0.04);border:1px solid rgba(34,197,94,0.08);padding:2px 8px;border-radius:100px;margin-top:4px}
  #jobhunterView .jh-cr-score{display:flex;flex-direction:column;align-items:center;gap:3px}
  #jobhunterView .jh-sb-wrap{width:100%;height:6px;background:rgba(255,255,255,0.04);border-radius:3px;overflow:hidden}
  #jobhunterView .jh-sb-fill{height:100%;border-radius:3px;transition:width 0.5s ease}
  #jobhunterView .jh-sb-label{font-size:10px;font-weight:700;letter-spacing:0.5px}
  #jobhunterView .jh-sh .jh-sb-fill{background:var(--jh-green)}
  #jobhunterView .jh-sh .jh-sb-label{color:var(--jh-green)}
  #jobhunterView .jh-sm .jh-sb-fill{background:var(--jh-amber)}
  #jobhunterView .jh-sm .jh-sb-label{color:var(--jh-amber)}
  #jobhunterView .jh-sl .jh-sb-fill{background:var(--jh-red)}
  #jobhunterView .jh-sl .jh-sb-label{color:var(--jh-red)}
  #jobhunterView .jh-cr-loc{font-size:12px;color:var(--jh-dim);text-align:center}
  #jobhunterView .jh-cr-li{width:32px;height:32px;border-radius:8px;background:rgba(10,102,194,0.08);border:1px solid rgba(10,102,194,0.15);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;text-decoration:none}
  #jobhunterView .jh-cr-li:hover{background:rgba(10,102,194,0.15);border-color:rgba(10,102,194,0.3)}
  #jobhunterView .jh-cr-li svg{width:16px;height:16px;fill:var(--jh-linkedin)}
  #jobhunterView .jh-cg{background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:14px;overflow:hidden;margin-bottom:16px}
  #jobhunterView .jh-cg-head{padding:16px 20px;border-bottom:1px solid var(--jh-border);display:flex;align-items:center;gap:12px}
  #jobhunterView .jh-cg-logo{width:36px;height:36px;border-radius:8px;background:var(--jh-bg3);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--jh-accent);border:1px solid var(--jh-border)}
  #jobhunterView .jh-cg-info h4{font-size:15px;font-weight:700;color:#fff}
  #jobhunterView .jh-cg-info p{font-size:11px;color:var(--jh-dim)}
  #jobhunterView .jh-cg-reason{margin-left:auto;font-size:11px;color:var(--jh-green);font-weight:600;padding:4px 10px;border-radius:100px;background:rgba(34,197,94,0.04);border:1px solid rgba(34,197,94,0.08)}
  #jobhunterView .jh-cg-contacts{padding:8px 12px}
  #jobhunterView .jh-cg-contacts .jh-cr{border:none;border-bottom:1px solid var(--jh-border);border-radius:0;padding:10px 8px}
  #jobhunterView .jh-cg-contacts .jh-cr:last-child{border-bottom:none}
  #jobhunterView .jh-pb{display:flex;align-items:center;gap:14px;background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:12px;padding:14px 20px;margin-bottom:24px}
  #jobhunterView .jh-pb-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0}
  #jobhunterView .jh-pb-info{flex:1}
  #jobhunterView .jh-pb-name{font-size:15px;font-weight:700;color:#fff}
  #jobhunterView .jh-pb-role{font-size:12px;color:var(--jh-muted)}
  #jobhunterView .jh-pb-right{text-align:right}
  #jobhunterView .jh-pb-label{font-size:10px;color:var(--jh-dim);text-transform:uppercase;letter-spacing:1px}
  #jobhunterView .jh-pb-persona{font-size:12px;font-weight:600;color:var(--jh-accent)}
  #jobhunterView .jh-cmc-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
  #jobhunterView .jh-cmc{background:var(--jh-bg2);border:2px solid var(--jh-border);border-radius:12px;padding:20px;cursor:pointer;transition:all 0.2s}
  #jobhunterView .jh-cmc:hover{border-color:var(--jh-border2)}
  #jobhunterView .jh-cmc.active{border-color:var(--jh-accent);background:rgba(36,72,255,0.03)}
  #jobhunterView .jh-cmc h4{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}
  #jobhunterView .jh-cmc p{font-size:12px;color:var(--jh-muted)}
  #jobhunterView .jh-qs{background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:14px;padding:28px;margin-bottom:20px}
  #jobhunterView .jh-qs h3{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}
  #jobhunterView .jh-qs .jh-q-sub{font-size:12px;color:var(--jh-muted);margin-bottom:20px}
  #jobhunterView .jh-q-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  #jobhunterView .jh-qc{padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600;border:1px solid var(--jh-border);color:var(--jh-muted);cursor:pointer;transition:all 0.2s;background:none}
  #jobhunterView .jh-qc:hover{border-color:var(--jh-border2);color:#fff}
  #jobhunterView .jh-qc.sel{border-color:var(--jh-accent);color:var(--jh-accent);background:rgba(36,72,255,0.06)}
  #jobhunterView .jh-q-hint{font-size:11px;color:var(--jh-dim);margin-top:6px;font-style:italic}
  #jobhunterView .jh-q-ai-btn{background:rgba(36,72,255,0.06);border:1px solid rgba(36,72,255,0.15);color:var(--jh-accent);padding:4px 12px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;display:flex;align-items:center;gap:4px}
  #jobhunterView .jh-q-ai-btn:hover{background:rgba(36,72,255,0.12)}
  #jobhunterView .jh-q-ai-sug{background:rgba(34,197,94,0.03);border:1px solid rgba(34,197,94,0.1);border-radius:8px;padding:12px 14px;margin-top:8px;display:none}
  #jobhunterView .jh-q-ai-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  #jobhunterView .jh-q-ai-tag{font-size:10px;font-weight:700;color:var(--jh-green);text-transform:uppercase;letter-spacing:1px}
  #jobhunterView .jh-q-ai-use{background:var(--jh-green);color:var(--jh-bg);border:none;padding:4px 10px;border-radius:5px;font-size:10px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;margin-left:auto}
  #jobhunterView .jh-q-ai-x{background:none;border:none;color:var(--jh-dim);cursor:pointer;font-size:14px;padding:0 4px}
  #jobhunterView .jh-q-ai-text{font-size:13px;color:rgba(34,197,94,0.7);line-height:1.6}
  #jobhunterView .jh-sp-section h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}
  #jobhunterView .jh-sp-sub{font-size:12px;color:var(--jh-muted);margin-bottom:12px}
  #jobhunterView .jh-so{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:10px;cursor:pointer;transition:all 0.2s;margin-bottom:6px}
  #jobhunterView .jh-so:hover{border-color:var(--jh-border2);background:var(--jh-bg3)}
  #jobhunterView .jh-so.sel{border-color:var(--jh-accent);background:rgba(36,72,255,0.04)}
  #jobhunterView .jh-so-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--jh-border);flex-shrink:0;display:flex;align-items:center;justify-content:center}
  #jobhunterView .jh-so.sel .jh-so-radio{border-color:var(--jh-accent)}
  #jobhunterView .jh-so.sel .jh-so-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--jh-accent)}
  #jobhunterView .jh-so-text{font-size:14px;color:#fff;flex:1}
  #jobhunterView .jh-so-tag{font-size:10px;font-weight:600;padding:3px 8px;border-radius:100px}
  #jobhunterView .jh-so-best{background:rgba(34,197,94,0.06);color:var(--jh-green);border:1px solid rgba(34,197,94,0.1)}
  #jobhunterView .jh-so-alt{background:var(--jh-bg3);color:var(--jh-dim);border:1px solid var(--jh-border)}
  #jobhunterView .jh-ep{background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:14px;overflow:hidden;margin-bottom:20px}
  #jobhunterView .jh-ep-head{padding:14px 20px;border-bottom:1px solid var(--jh-border);display:flex;align-items:center;justify-content:space-between}
  #jobhunterView .jh-ep-label{font-size:12px;color:var(--jh-muted);font-weight:600}
  #jobhunterView .jh-ep-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px;background:rgba(36,72,255,0.06);color:var(--jh-accent);border:1px solid rgba(36,72,255,0.1)}
  #jobhunterView .jh-ep-subj{padding:12px 20px;font-size:13px;color:var(--jh-muted);border-bottom:1px solid var(--jh-border)}
  #jobhunterView .jh-ep-subj strong{color:#fff}
  #jobhunterView .jh-ep-body{padding:20px}
  #jobhunterView .jh-ep-edit{background:none;border:1px solid var(--jh-border);border-radius:8px;padding:12px 16px;min-height:160px;font-size:14px;color:#fff;outline:none;line-height:1.8;font-family:'Plus Jakarta Sans',sans-serif;width:100%}
  #jobhunterView .jh-ep-edit:focus{border-color:var(--jh-accent)}
  #jobhunterView .jh-ep-foot{padding:12px 20px;border-top:1px solid var(--jh-border);display:flex;align-items:center;gap:12px}
  #jobhunterView .jh-ep-wc{font-family:'JetBrains Mono',monospace;font-size:12px}
  #jobhunterView .jh-ep-wc.good{color:var(--jh-green)}
  #jobhunterView .jh-ep-wc.warn{color:var(--jh-amber)}
  #jobhunterView .jh-ep-wc.bad{color:var(--jh-red)}
  #jobhunterView .jh-score-hero{display:flex;align-items:center;gap:32px;background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:16px;padding:32px;margin-bottom:24px}
  #jobhunterView .jh-score-circle{position:relative;width:140px;height:140px;flex-shrink:0}
  #jobhunterView .jh-score-circle svg{width:100%;height:100%;transform:rotate(-90deg)}
  #jobhunterView .jh-score-circle .jh-trk{fill:none;stroke:rgba(255,255,255,0.04);stroke-width:8}
  #jobhunterView .jh-score-circle .jh-fil{fill:none;stroke-width:8;stroke-linecap:round}
  #jobhunterView .jh-score-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  #jobhunterView .jh-score-pct{font-family:'Fraunces',serif;font-size:42px;font-weight:800;line-height:1}
  #jobhunterView .jh-score-pct-s{font-size:18px;font-weight:400;color:var(--jh-muted)}
  #jobhunterView .jh-score-sub{font-size:11px;color:var(--jh-dim);margin-top:2px}
  #jobhunterView .jh-score-det{flex:1}
  #jobhunterView .jh-nat-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:100px;font-size:12px;font-weight:700;margin-bottom:8px}
  #jobhunterView .jh-nat-t{background:rgba(220,38,38,0.06);color:var(--jh-red);border:1px solid rgba(220,38,38,0.12)}
  #jobhunterView .jh-score-hook{display:inline-flex;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;background:rgba(220,38,38,0.06);color:var(--jh-red);border:1px solid rgba(220,38,38,0.1);margin-bottom:8px;margin-left:8px}
  #jobhunterView .jh-score-hl{font-size:18px;font-weight:700;color:#fff;margin-bottom:4px}
  #jobhunterView .jh-score-ctx{font-size:13px;color:var(--jh-muted);line-height:1.5}
  #jobhunterView .jh-dims{background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:14px;padding:24px;margin-bottom:24px}
  #jobhunterView .jh-dims-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:16px}
  #jobhunterView .jh-dims-title span{font-size:11px;color:var(--jh-dim);font-weight:400}
  #jobhunterView .jh-dg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #jobhunterView .jh-dr{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,0.01);border:1px solid var(--jh-border);border-radius:10px}
  #jobhunterView .jh-ds-num{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;min-width:28px;text-align:center}
  #jobhunterView .jh-ds-num.h{color:var(--jh-green)}
  #jobhunterView .jh-ds-num.m{color:var(--jh-amber)}
  #jobhunterView .jh-ds-num.l{color:var(--jh-red)}
  #jobhunterView .jh-ds-info{flex:1}
  #jobhunterView .jh-ds-name{font-size:13px;font-weight:600;color:#fff}
  #jobhunterView .jh-ds-desc{font-size:11px;color:var(--jh-dim)}
  #jobhunterView .jh-ds-bar{width:100%;height:4px;background:rgba(255,255,255,0.04);border-radius:2px;margin-top:4px}
  #jobhunterView .jh-ds-fill{height:100%;border-radius:2px}
  #jobhunterView .jh-ds-fill.h{background:var(--jh-green)}
  #jobhunterView .jh-ds-fill.m{background:var(--jh-amber)}
  #jobhunterView .jh-ds-fill.l{background:var(--jh-red)}
  #jobhunterView .jh-persp{background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:14px;padding:20px 24px;margin-bottom:24px}
  #jobhunterView .jh-persp-l{font-size:10px;font-weight:700;color:var(--jh-accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
  #jobhunterView .jh-persp-t{font-size:15px;color:rgba(255,255,255,0.6);font-style:italic;line-height:1.6}
  #jobhunterView .jh-flags-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:12px}
  #jobhunterView .jh-flag{background:var(--jh-bg2);border:1px solid var(--jh-border);border-left:3px solid var(--jh-red);border-radius:10px;padding:16px;margin-bottom:10px}
  #jobhunterView .jh-flag-o{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(220,38,38,0.5);font-style:italic;padding:8px 12px;background:rgba(220,38,38,0.03);border-radius:6px;margin-bottom:10px}
  #jobhunterView .jh-flag-w{font-size:12px;color:var(--jh-accent);line-height:1.5;margin-bottom:6px}
  #jobhunterView .jh-flag-f{font-size:12px;color:var(--jh-green);line-height:1.5}
  #jobhunterView .jh-rw{background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:14px;overflow:hidden;margin-bottom:24px}
  #jobhunterView .jh-rw-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--jh-border)}
  #jobhunterView .jh-rw-badge{display:flex;align-items:center;gap:8px}
  #jobhunterView .jh-rw-dot{width:8px;height:8px;border-radius:50%;background:var(--jh-green);box-shadow:0 0 6px var(--jh-green)}
  #jobhunterView .jh-rw-label{font-size:14px;font-weight:700;color:var(--jh-green)}
  #jobhunterView .jh-rw-meta{font-size:11px;color:var(--jh-dim)}
  #jobhunterView .jh-rw-body{display:grid;grid-template-columns:1fr 1fr}
  #jobhunterView .jh-rw-col{padding:20px}
  #jobhunterView .jh-rw-col:first-child{border-right:1px solid var(--jh-border)}
  #jobhunterView .jh-rw-col-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
  #jobhunterView .jh-rw-col-l.before{color:var(--jh-red)}
  #jobhunterView .jh-rw-col-l.after{color:var(--jh-green)}
  #jobhunterView .jh-rw-email{font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.9}
  #jobhunterView .jh-rw-email.before{color:rgba(255,255,255,0.3)}
  #jobhunterView .jh-rw-email.after{color:rgba(255,255,255,0.6)}
  #jobhunterView .jh-hl-b{background:rgba(220,38,38,0.06);color:rgba(220,38,38,0.5);padding:1px 4px;border-radius:3px;text-decoration:line-through;text-decoration-color:rgba(220,38,38,0.3)}
  #jobhunterView .jh-hl-g{background:rgba(34,197,94,0.05);color:rgba(34,197,94,0.7);padding:1px 4px;border-radius:3px}
  #jobhunterView .jh-rw-stats{display:flex;border-top:1px solid var(--jh-border)}
  #jobhunterView .jh-rw-stat{flex:1;padding:12px 20px;font-size:12px;color:var(--jh-muted);display:flex;align-items:center;gap:8px}
  #jobhunterView .jh-rw-stat:first-child{border-right:1px solid var(--jh-border)}
  #jobhunterView .jh-rw-stat strong{font-family:'JetBrains Mono',monospace;font-weight:700;color:#fff;font-size:18px}
  #jobhunterView .jh-change{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px}
  #jobhunterView .jh-chg-g{background:rgba(34,197,94,0.06);color:var(--jh-green)}
  #jobhunterView .jh-fu{background:rgba(168,85,247,0.04);border:1px solid rgba(168,85,247,0.1);border-radius:12px;padding:16px 20px;margin-top:24px;display:flex;align-items:center;justify-content:space-between}
  #jobhunterView .jh-fu p{font-size:13px;color:rgba(168,85,247,0.7)}
  #jobhunterView .jh-fu button{background:rgba(168,85,247,0.1);border:1px solid rgba(168,85,247,0.2);color:rgba(168,85,247,0.8);padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
  @media(max-width:800px){#jobhunterView .jh-mode-cards,#jobhunterView .jh-fr,#jobhunterView .jh-cmc-cards,#jobhunterView .jh-dg,#jobhunterView .jh-rw-body{grid-template-columns:1fr}#jobhunterView .jh-cr{grid-template-columns:40px 1fr 90px 36px}#jobhunterView .jh-ct-header,#jobhunterView .jh-cr-loc,#jobhunterView .jh-cr-score{display:none}#jobhunterView .jh-rw-col:first-child{border-right:none;border-bottom:1px solid var(--jh-border)}#jobhunterView .jh-score-hero{flex-direction:column;text-align:center}#jobhunterView .jh-app{padding:20px}#jobhunterView .jh-mode-header h2{font-size:26px}}
  /* ── JOB HUNTER SUB-NAV & PANELS ── */
  #jobhunterView .jh-subnav{display:flex;align-items:center;border-bottom:1px solid var(--jh-border);margin-bottom:20px;padding:0 4px;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
  #jobhunterView .jh-subnav::-webkit-scrollbar{display:none}
  #jobhunterView .jh-subnav-tabs{display:flex;gap:2px;flex:1;overflow-x:auto}
  #jobhunterView .jh-subnav-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--jh-muted);font-size:13px;font-weight:600;padding:10px 14px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap;transition:all 0.2s}
  #jobhunterView .jh-subnav-tab:hover{color:var(--jh-text)}
  #jobhunterView .jh-subnav-tab.active{color:var(--jh-accent);border-bottom-color:var(--jh-accent)}
  #jobhunterView .jh-lang-toggle{background:none;border:1px solid var(--jh-border);color:var(--jh-muted);font-size:11px;padding:4px 10px;border-radius:6px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap;flex-shrink:0}
  #jobhunterView .jh-subtab-content{display:none}
  #jobhunterView .jh-subtab-content.active{display:block}
  #jobhunterView .jh-card{background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:16px;padding:24px;margin-bottom:16px}
  #jobhunterView .jh-card h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:12px}
  #jobhunterView .jh-card p{font-size:13px;color:var(--jh-muted);line-height:1.7;margin-bottom:12px}
  #jobhunterView .jh-input{width:100%;background:var(--jh-bg);border:1px solid var(--jh-border);border-radius:10px;padding:12px 16px;color:var(--jh-text);font-size:14px;font-family:'Plus Jakarta Sans',sans-serif;outline:none;transition:border-color 0.2s;box-sizing:border-box}
  #jobhunterView .jh-input:focus{border-color:var(--jh-accent)}
  #jobhunterView .jh-input::placeholder{color:var(--jh-dim)}
  #jobhunterView .jh-ta{min-height:120px;resize:vertical}
  #jobhunterView .jh-label{font-size:12px;font-weight:600;color:var(--jh-muted);margin-bottom:6px;display:block}
  #jobhunterView .jh-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600}
  #jobhunterView .jh-badge-green{background:rgba(34,197,94,0.06);border:1px solid rgba(34,197,94,0.15);color:var(--jh-green)}
  #jobhunterView .jh-badge-amber{background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.15);color:var(--jh-amber)}
  #jobhunterView .jh-badge-red{background:rgba(220,38,38,0.06);border:1px solid rgba(220,38,38,0.15);color:var(--jh-red)}
  #jobhunterView .jh-progress{width:100%;height:8px;background:var(--jh-bg3);border-radius:4px;overflow:hidden;margin:8px 0}
  #jobhunterView .jh-progress-fill{height:100%;background:var(--jh-accent);border-radius:4px;transition:width 0.5s}
  #jobhunterView .jh-kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  #jobhunterView .jh-kanban-col{background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:12px;padding:12px;min-height:120px}
  #jobhunterView .jh-kanban-head{font-size:12px;font-weight:700;color:var(--jh-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--jh-border)}
  #jobhunterView .jh-app-card{background:var(--jh-bg3);border:1px solid var(--jh-border);border-radius:10px;padding:12px;margin-bottom:8px;cursor:pointer;transition:border-color 0.2s}
  #jobhunterView .jh-app-card:hover{border-color:var(--jh-accent)}
  #jobhunterView .jh-app-card h4{font-size:13px;font-weight:700;color:#fff;margin-bottom:2px}
  #jobhunterView .jh-app-card p{font-size:11px;color:var(--jh-dim);margin:0}
  #jobhunterView .jh-culture-tip{background:rgba(36,72,255,0.04);border:1px solid rgba(36,72,255,0.1);border-radius:12px;padding:16px;margin-bottom:12px}
  #jobhunterView .jh-culture-tip strong{color:#fff}
  .jh-two-col{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
  #jobhunterView .jh-sector-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
  #jobhunterView .jh-sector-btn{background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:8px;color:var(--jh-muted);font-size:12px;font-weight:600;padding:6px 14px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all 0.2s}
  #jobhunterView .jh-sector-btn:hover{border-color:var(--jh-accent);color:var(--jh-accent)}
  #jobhunterView .jh-milestone{background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:10px;padding:14px;margin-bottom:10px;transition:all 0.3s}
  #jobhunterView .jh-milestone h4{font-size:13px;font-weight:700;color:#fff;margin-bottom:4px}
  #jobhunterView .jh-milestone p{font-size:12px;color:var(--jh-muted);margin:0}
  #jobhunterView .jh-practice-q{background:rgba(36,72,255,0.04);border:1px solid rgba(36,72,255,0.15);border-radius:12px;padding:16px;margin-bottom:10px}
  #jobhunterView .jh-practice-q h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:6px}
  #jobhunterView .jh-practice-q p{font-size:12px;color:var(--jh-muted);margin-bottom:8px}
  #jobhunterView .jh-toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  #jobhunterView .jh-toggle-label{font-size:13px;color:var(--jh-muted)}
  #jobhunterView .jh-info-box{background:rgba(245,158,11,0.04);border:1px solid rgba(245,158,11,0.12);border-radius:10px;padding:14px;margin-bottom:10px}
  #jobhunterView .jh-info-box p{font-size:12px;color:var(--jh-amber);margin:0;line-height:1.6}
  /* Five-dimension rubric card (Quantification / AI-Tell / JD-Match / Clarity / UK-Compliance) */
  #jobhunterView .jh-dim-row{display:flex;align-items:flex-start;gap:14px;padding:10px 0;border-top:1px solid var(--jh-border)}
  #jobhunterView .jh-dim-row:first-child{border-top:none;padding-top:0}
  #jobhunterView .jh-dim-circle{position:relative;width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
  #jobhunterView .jh-dim-circle svg{position:absolute;inset:0}
  #jobhunterView .jh-dim-circle-bg{fill:none;stroke:rgba(255,255,255,0.07);stroke-width:3}
  #jobhunterView .jh-dim-circle-fg{fill:none;stroke-width:3;stroke-linecap:round;transition:stroke-dasharray 0.4s ease}
  #jobhunterView .jh-dim-circle-red .jh-dim-circle-fg{stroke:#f85149}
  #jobhunterView .jh-dim-circle-amber .jh-dim-circle-fg{stroke:#d29922}
  #jobhunterView .jh-dim-circle-green .jh-dim-circle-fg{stroke:#3fb950}
  #jobhunterView .jh-dim-circle-muted .jh-dim-circle-fg{stroke:var(--jh-dim)}
  #jobhunterView .jh-dim-circle .jh-dim-score{position:relative;font-size:13px;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;color:var(--jh-text);line-height:1}
  #jobhunterView .jh-dim-circle-red .jh-dim-score{color:#f85149}
  #jobhunterView .jh-dim-circle-amber .jh-dim-score{color:#d29922}
  #jobhunterView .jh-dim-circle-green .jh-dim-score{color:#3fb950}
  #jobhunterView .jh-dim-circle-muted .jh-dim-score{color:var(--jh-dim)}
  #jobhunterView .jh-dim-main{flex:1;min-width:0}
  #jobhunterView .jh-dim-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
  #jobhunterView .jh-dim-name{font-size:13px;font-weight:700;color:var(--jh-text);font-family:'Plus Jakarta Sans',sans-serif}
  #jobhunterView .jh-dim-help{font-size:11px;color:var(--jh-dim);margin-top:2px;line-height:1.4}
  #jobhunterView .jh-dim-expand{background:none;border:1px solid var(--jh-border);border-radius:99px;padding:2px 10px;color:var(--jh-muted);font-size:11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:'Plus Jakarta Sans',sans-serif;line-height:1.4}
  #jobhunterView .jh-dim-expand:hover{background:var(--jh-bg3);color:var(--jh-text)}
  #jobhunterView .jh-dim-count{font-weight:600}
  #jobhunterView .jh-dim-caret{font-size:10px}
  #jobhunterView .jh-dim-findings{flex-direction:column;gap:4px;margin-top:8px;padding:8px 10px;background:var(--jh-bg3);border-radius:6px}
  #jobhunterView .jh-dim-finding{display:flex;gap:8px;font-size:11px;line-height:1.5;align-items:flex-start}
  #jobhunterView .jh-dim-finding-icon{flex-shrink:0;font-size:11px;line-height:1.5}
  #jobhunterView .jh-dim-finding-msg{color:var(--jh-muted);word-break:break-word}
  #jobhunterView .jh-dim-finding-fail .jh-dim-finding-icon{color:#f85149}
  #jobhunterView .jh-dim-finding-warn .jh-dim-finding-icon{color:#d29922}
  #jobhunterView .jh-dim-finding-pass .jh-dim-finding-icon{color:#3fb950}
  #jobhunterView .jh-dim-additional-header{margin-top:14px;padding-top:12px;border-top:1px solid var(--jh-border)}
  #jobhunterView .jh-dim-additional-title{font-size:11px;font-weight:700;color:var(--jh-muted);text-transform:uppercase;letter-spacing:0.04em}
  #jobhunterView .jh-dim-additional-help{font-size:11px;color:var(--jh-dim);margin-top:2px;line-height:1.4}
  #jobhunterView .jh-dim-additional-row{display:flex;gap:8px;align-items:flex-start;padding:6px 0;font-size:12px}
  #jobhunterView .jh-dim-additional-icon{flex-shrink:0;line-height:1.5}
  #jobhunterView .jh-dim-additional-msg{color:var(--jh-muted);line-height:1.5}
  #jobhunterView .jh-dim-additional-pass .jh-dim-additional-icon{color:#3fb950}
  #jobhunterView .jh-dim-additional-warn .jh-dim-additional-icon{color:#d29922}
  #jobhunterView .jh-dim-additional-muted .jh-dim-additional-icon{color:var(--jh-dim)}
  #jobhunterView .jh-kw-header{font-size:10px;font-weight:700;color:var(--jh-muted);text-transform:uppercase;letter-spacing:0.04em;margin-top:10px;margin-bottom:4px;font-family:'Plus Jakarta Sans',sans-serif}
  #jobhunterView .jh-kw-header:first-child{margin-top:0}
  #jobhunterView .jh-kw-pills{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
  #jobhunterView .jh-kw-pill{font-size:11px;padding:3px 9px;border-radius:99px;line-height:1.3;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap}
  #jobhunterView .jh-kw-matched{background:rgba(63,185,80,0.12);color:#3fb950;border:1px solid rgba(63,185,80,0.28)}
  #jobhunterView .jh-kw-missing{background:rgba(210,153,34,0.12);color:#d29922;border:1px solid rgba(210,153,34,0.28);cursor:copy}
  #jobhunterView .jh-kw-missing:hover{background:rgba(210,153,34,0.22)}
  /* Feature 4: per-sentence source tagging */
  #jobhunterView .jh-output-display{white-space:pre-wrap;word-wrap:break-word}
  #jobhunterView .jh-display-heading{font-weight:700;text-transform:uppercase;letter-spacing:0.04em;font-size:12px;color:var(--jh-muted);margin:14px 0 6px;border-bottom:1px solid var(--jh-border);padding-bottom:4px}
  #jobhunterView .jh-display-line{margin:2px 0}
  #jobhunterView .jh-display-bullet{padding-left:4px}
  #jobhunterView .jh-sent{display:inline;padding:1px 6px;border-radius:3px;transition:background 0.15s}
  #jobhunterView .jh-sent:hover{cursor:help}
  #jobhunterView .jh-sent-green{border-left:3px solid #3fb950;padding-left:8px;background:rgba(63,185,80,0.04)}
  #jobhunterView .jh-sent-amber{border-left:3px solid #d29922;padding-left:8px;background:rgba(210,153,34,0.04)}
  #jobhunterView .jh-sent-red{border-left:3px solid #f85149;padding-left:8px;background:rgba(248,81,73,0.06);text-decoration:line-through;text-decoration-color:rgba(248,81,73,0.4)}
  /* Source attribution microtag inside each sentence span. Scannable
     visible-by-default version of the existing hover-only tooltip. Tag
     value derived heuristically from classification.note (cv/jd/bg/ai/?
     /checkmark). Hidden below 600px viewport so narrow phones do not
     gain reflow noise; tooltip-on-tap still works. */
  #jobhunterView .jh-sent-tag{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;font-family:'JetBrains Mono',ui-monospace,monospace;padding:1px 4px;margin-left:6px;border-radius:2px;opacity:0.6;vertical-align:1px;letter-spacing:0.04em}
  #jobhunterView .jh-sent-green .jh-sent-tag{color:#3fb950;background:rgba(63,185,80,0.08)}
  #jobhunterView .jh-sent-amber .jh-sent-tag{color:#d29922;background:rgba(210,153,34,0.08)}
  #jobhunterView .jh-sent-red .jh-sent-tag{color:#f85149;background:rgba(248,81,73,0.08)}
  @media (max-width:600px){#jobhunterView .jh-sent-tag{display:none}}
  #jobhunterView .jh-sent-tooltip{position:absolute;background:#0d1117;border:1px solid #30363d;border-radius:6px;padding:8px 10px;font-size:11px;max-width:320px;z-index:9999;color:#eef0ef;box-shadow:0 8px 24px rgba(0,0,0,0.4);font-family:'Plus Jakarta Sans',sans-serif;line-height:1.5}
  #jobhunterView .jh-tt-head{font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:4px}
  #jobhunterView .jh-tt-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
  #jobhunterView .jh-tt-green{background:#3fb950}
  #jobhunterView .jh-tt-amber{background:#d29922}
  #jobhunterView .jh-tt-red{background:#f85149}
  #jobhunterView .jh-tt-note{color:#9ea7b3;margin-bottom:4px}
  #jobhunterView .jh-tt-ev{color:#c9d1d9;font-style:italic;border-top:1px solid #30363d;padding-top:4px;margin-top:4px}
  .jh-sent-tooltip{position:absolute;background:#0d1117;border:1px solid #30363d;border-radius:6px;padding:8px 10px;font-size:11px;max-width:320px;z-index:9999;color:#eef0ef;box-shadow:0 8px 24px rgba(0,0,0,0.4);font-family:'Plus Jakarta Sans',sans-serif;line-height:1.5}
  .jh-sent-tooltip .jh-tt-head{font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:4px}
  .jh-sent-tooltip .jh-tt-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
  .jh-sent-tooltip .jh-tt-green{background:#3fb950}
  .jh-sent-tooltip .jh-tt-amber{background:#d29922}
  .jh-sent-tooltip .jh-tt-red{background:#f85149}
  .jh-sent-tooltip .jh-tt-note{color:#9ea7b3;margin-bottom:4px}
  .jh-sent-tooltip .jh-tt-ev{color:#c9d1d9;font-style:italic;border-top:1px solid #30363d;padding-top:4px;margin-top:4px}
  /* Count bar above output */
  #jobhunterView .jh-count-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-family:'Plus Jakarta Sans',sans-serif}
  #jobhunterView .jh-count-chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent}
  #jobhunterView .jh-count-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
  #jobhunterView .jh-count-green{background:rgba(63,185,80,0.12);color:#3fb950;border-color:rgba(63,185,80,0.28)}
  #jobhunterView .jh-count-green .jh-count-dot{background:#3fb950}
  #jobhunterView .jh-count-amber{background:rgba(210,153,34,0.12);color:#d29922;border-color:rgba(210,153,34,0.28)}
  #jobhunterView .jh-count-amber .jh-count-dot{background:#d29922}
  #jobhunterView .jh-count-red{background:rgba(248,81,73,0.12);color:#f85149;border-color:rgba(248,81,73,0.28);cursor:pointer}
  #jobhunterView .jh-count-red:hover{background:rgba(248,81,73,0.22)}
  #jobhunterView .jh-count-red .jh-count-dot{background:#f85149}
  /* Legend */
  #jobhunterView .jh-legend{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-family:'Plus Jakarta Sans',sans-serif;padding:10px 12px;background:var(--jh-bg2);border:1px solid var(--jh-border);border-radius:8px;position:relative}
  #jobhunterView .jh-legend-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--jh-muted)}
  #jobhunterView .jh-legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
  #jobhunterView .jh-legend-green .jh-legend-dot{background:#3fb950}
  #jobhunterView .jh-legend-amber .jh-legend-dot{background:#d29922}
  #jobhunterView .jh-legend-red .jh-legend-dot{background:#f85149}
  #jobhunterView .jh-legend-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--jh-muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;border-radius:4px}
  #jobhunterView .jh-legend-close:hover{background:var(--jh-bg3);color:var(--jh-text)}
  /* Red-gate modal */
  .jh-red-gate-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;font-family:'Plus Jakarta Sans',sans-serif}
  .jh-red-gate-modal .jh-rg-card{background:#1a1614;border:1px solid rgba(248,81,73,0.3);border-radius:12px;padding:24px;max-width:440px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(0,0,0,0.5)}
  .jh-red-gate-modal .jh-rg-title{font-size:16px;font-weight:700;color:#f85149;margin-bottom:10px}
  .jh-red-gate-modal .jh-rg-body{font-size:13px;color:#c9d1d9;line-height:1.6;margin-bottom:18px}
  .jh-red-gate-modal .jh-rg-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .jh-red-gate-modal .jh-rg-btn{padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);color:#eef0ef;font-size:12px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
  .jh-red-gate-modal .jh-rg-btn:hover{background:rgba(255,255,255,0.10)}
  .jh-red-gate-modal .jh-rg-edit{background:rgba(255,255,255,0.05)}
  .jh-red-gate-modal .jh-rg-exclude{background:#2448FF;border-color:#2448FF;color:#fff}
  .jh-red-gate-modal .jh-rg-exclude:hover{background:#1f3dd9}
  .jh-red-gate-modal .jh-rg-accept{background:rgba(248,81,73,0.15);border-color:rgba(248,81,73,0.4);color:#f85149}
  .jh-red-gate-modal .jh-rg-accept:hover{background:rgba(248,81,73,0.25)}
  @media(max-width:768px){
    #jobhunterView .jh-app{padding:16px 12px}
    #jobhunterView .jh-kanban{grid-template-columns:1fr 1fr}
    #jobhunterView .jh-subnav-tabs{gap:0}
    #jobhunterView .jh-subnav-tab{padding:8px 8px;font-size:10px}
    .jh-two-col{grid-template-columns:1fr}
    #jobhunterView .jh-card{padding:16px}
    #jobhunterView [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
    #jobhunterView .jh-steps-bar{flex-wrap:wrap;gap:4px}
    #jobhunterView .jh-sc{display:none}
  }
  @media(max-width:480px){
    #jobhunterView .jh-app{padding:12px 8px}
    #jobhunterView .jh-kanban{grid-template-columns:1fr}
    #jobhunterView .jh-subnav-tab{padding:6px 6px;font-size:9px}
    #jobhunterView .jh-lang-toggle{display:none}
    #jobhunterView h2{font-size:18px!important}
    #jobhunterView .jh-card h3{font-size:15px!important}
    #jobhunterView .jh-culture-tip{padding:10px}
    #jobhunterView .jh-btn{padding:10px 16px;font-size:13px}
  }

  /* ── JOB JOURNAL (jj*) ── */
  .jj-root{display:flex;flex-direction:row;flex:1;height:0;min-height:0;width:100%;background:var(--bg);font-family:'Plus Jakarta Sans',sans-serif;color:var(--text);overflow:hidden}
  .jj-sidebar{width:240px;flex-shrink:0;background:var(--surface2);border-right:1px solid rgba(17,17,20,0.10);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transition:width 0.25s}
  .jj-sidebar-profile{padding:20px 16px 12px;display:flex;align-items:center;gap:10px}
  .jj-avatar{width:36px;height:36px;border-radius:50%;background:rgba(36,72,255,0.18);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
  .jj-profile-name{font-size:13px;font-weight:700;color:var(--text)}
  .jj-profile-sub{font-size:11px;color:var(--text3)}
  .jj-apps-widget{margin:10px 10px 4px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;flex-shrink:0}
  .jj-aw-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-bottom:10px}
  .jj-aw-stat{text-align:center}
  .jj-aw-num{font-size:20px;font-weight:700;font-family:'DM Mono','JetBrains Mono',monospace;color:var(--text);line-height:1}
  .jj-aw-green{color:var(--success)!important}
  .jj-aw-purple{color:#a371f7!important}
  .jj-aw-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
  .jj-aw-pipeline{display:flex;gap:3px;align-items:flex-end;height:32px;margin-bottom:6px}
  .jj-aw-stage{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;height:100%;justify-content:flex-end}
  .jj-aw-bar{width:100%;border-radius:2px 2px 0 0;min-height:3px;transition:height 0.4s ease}
  .jj-aw-stage span{font-size:9px;color:var(--text3);font-family:'DM Mono',monospace}
  .jj-aw-rate{font-size:10px;color:var(--text3);text-align:center;border-top:1px solid var(--border);padding-top:6px}
  .jj-visa-label{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
  .jj-visa-days{font-size:22px;font-weight:800;color:var(--text);line-height:1}
  .jj-visa-sub{font-size:10px;color:var(--text3);margin-top:2px}
  .jj-visa-bar-track{height:4px;background:var(--surface3);border-radius:2px;margin-top:8px;overflow:hidden}
  .jj-visa-bar-fill{height:100%;background:#3B82F6;border-radius:2px;transition:width 0.5s}
  .jj-nav-group{padding:6px 0}
  .jj-nav-group-label{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;padding:4px 16px 2px}
  .jj-nav-item{display:flex;align-items:center;gap:9px;padding:7px 16px;font-size:13px;color:var(--text2);cursor:pointer;border-radius:0;transition:all 0.15s;border-left:2px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .jj-nav-item:hover{background:var(--surface2);color:var(--text)}
  .jj-nav-item.active{background:rgba(36,72,255,0.08);color:var(--accent);border-left-color:var(--accent)}
  .jj-nav-icon{font-size:15px;flex-shrink:0;width:18px;text-align:center}
  .jj-lang-toggle-wrap{margin-top:auto;padding:12px 16px;border-top:1px solid var(--border)}
  .jj-lang-btn{background:none;border:1px solid var(--border2);color:var(--text3);font-size:11px;padding:5px 12px;border-radius:6px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;width:100%}
  .jj-main {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
  .jj-page{display:none;padding:36px 44px;animation:jjFadeIn 0.2s ease}
  .jj-page.active{display:block}
  #jjPage_calendar{padding:0}
  #jjPage_calendar.active{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
  @keyframes jjFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .jj-page-head{padding:24px 28px 0;display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}
  .jj-page-title{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-0.5px}
  .jj-page-sub{font-size:13px;color:var(--text3);margin-top:2px}
  .jj-page-body{padding:20px 28px;flex:1;min-width:0;max-width:1600px;margin:0;overflow-x:hidden}
  /* Dashboard */
  .jj-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
  .jj-stat-card{background:var(--surface);border:1px solid rgba(17,17,20,0.10);border-radius:16px;padding:16px}
  .jj-stat-num{font-size:28px;font-weight:800;color:var(--text);line-height:1}
  .jj-stat-label{font-size:11px;color:var(--text3);margin-top:4px}
  .jj-stat-delta{font-size:10px;font-weight:600;margin-top:6px}
  .jj-delta-up{color:#22c55e}
  .jj-delta-dn{color:#dc2626}
  .jj-dash-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
  .jj-panel{background:var(--surface);border:1px solid rgba(17,17,20,0.10);border-radius:16px;padding:18px}
  .jj-panel-title{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
  .jj-panel-action{font-size:11px;color:var(--accent);cursor:pointer;font-weight:600;text-transform:none;letter-spacing:0}
  .jj-app-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
  .jj-app-row:last-child{border-bottom:none}
  .jj-app-co{font-size:13px;font-weight:600;color:var(--text);flex:1}
  .jj-app-role{font-size:11px;color:var(--text3)}
  .jj-status-pill{font-size:10px;font-weight:700;padding:3px 8px;border-radius:100px}
  .jj-sp-saved{background:var(--surface2);color:var(--text3)}
  .jj-sp-applied{background:rgba(59,130,246,0.1);color:var(--accent)}
  .jj-sp-screening{background:rgba(245,158,11,0.1);color:#f59e0b}
  .jj-sp-interview{background:rgba(168,85,247,0.1);color:#a855f7}
  .jj-sp-offer{background:rgba(34,197,94,0.1);color:#22c55e}
  .jj-sp-rejected{background:rgba(220,38,38,0.08);color:#dc2626}
  .jj-focus-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
  .jj-focus-item:last-child{border-bottom:none}
  .jj-focus-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
  .jj-focus-text{font-size:13px;color:var(--text2)}
  .jj-focus-time{font-size:10px;color:var(--text3);margin-top:2px}
  .jj-deadline-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
  .jj-deadline-row:last-child{border-bottom:none}
  .jj-deadline-date{font-size:11px;font-weight:700;color:#f59e0b;min-width:44px}
  .jj-deadline-co{font-size:13px;color:var(--text);flex:1}
  .jj-deadline-role{font-size:11px;color:var(--text3)}
  /* Calendar */
  .jj-cal-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .jj-cal-month{font-size:18px;font-weight:700;color:var(--text);flex:1}
  .jj-cal-btn{background:none;border:1px solid var(--border2);color:var(--text3);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif}
  .jj-cal-btn:hover{color:var(--text);border-color:var(--text3)}
  .jj-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--surface2);border-radius:12px;overflow:hidden}
  .jj-cal-dow{background:var(--bg);font-size:10px;font-weight:700;color:var(--text3);text-align:center;padding:8px 0;text-transform:uppercase;letter-spacing:1px}
  .jj-cal-cell{background:var(--surface2);min-height:80px;padding:6px 8px;cursor:pointer;transition:background 0.15s;position:relative}
  .jj-cal-cell:hover{background:#111827}
  .jj-cal-cell.today{background:rgba(59,130,246,0.07)}
  .jj-cal-cell.other-month .jj-cal-day{color:rgba(255,255,255,0.2)}
  .jj-cal-day{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:4px}
  .jj-cal-today-dot{width:20px;height:20px;border-radius:50%;background:#2448FF;color:var(--text);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
  .jj-cal-event{font-size:10px;padding:2px 5px;border-radius:4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  .jj-cal-ev-app{background:rgba(59,130,246,0.15);color:#93c5fd}
  .jj-cal-ev-interview{background:rgba(168,85,247,0.15);color:#c4b5fd}
  .jj-cal-ev-deadline{background:rgba(245,158,11,0.15);color:#fcd34d}
  /* Kanban */
  .jj-kanban{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;min-height:400px;align-items:start}
  .jj-kanban-col{background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.05);border-radius:12px;padding:10px}
  .jj-kanban-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between}
  .jj-kanban-head-saved{color:var(--text3)}
  .jj-kanban-head-applied{color:var(--accent)}
  .jj-kanban-head-screening{color:#f59e0b}
  .jj-kanban-head-interview{color:#a855f7}
  .jj-kanban-head-offer{color:#22c55e}
  .jj-kanban-head-rejected{color:#dc2626}
  .jj-kanban-count{font-size:10px;font-weight:600;background:rgba(255,255,255,0.05);padding:1px 6px;border-radius:100px}
  .jj-kcard{background:var(--surface2);border:1px solid rgba(255,255,255,0.07);border-radius:9px;padding:10px;margin-bottom:7px;cursor:pointer;transition:all 0.15s}
  .jj-kcard:hover{border-color:rgba(36,72,255,0.3);background:rgba(36,72,255,0.04)}
  .jj-kcard-co{font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px}
  .jj-kcard-role{font-size:11px;color:rgba(255,255,255,0.45)}
  .jj-kcard-date{font-size:10px;color:var(--text3);margin-top:5px}
  .jj-kcard-sponsor{font-size:9px;font-weight:700;padding:1px 6px;border-radius:100px;margin-top:4px;display:inline-block}
  .jj-kcard-sponsor-yes{background:rgba(34,197,94,0.1);color:#22c55e}
  .jj-kcard-sponsor-no{background:rgba(220,38,38,0.1);color:#dc2626}
  .jj-kcard-sponsor-unk{background:rgba(255,255,255,0.05);color:var(--text3)}
  .jj-add-btn{width:100%;padding:6px;background:none;border:1px dashed rgba(255,255,255,0.1);border-radius:8px;color:var(--text3);font-size:11px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;margin-top:4px;transition:all 0.15s}
  .jj-add-btn:hover{border-color:rgba(36,72,255,0.4);color:var(--accent)}
  /* Filter bar */
  .jj-filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
  .jj-filter-chip{padding:5px 12px;border-radius:100px;font-size:11px;font-weight:600;border:1px solid var(--border2);color:var(--text3);cursor:pointer;transition:all 0.15s;background:none}
  .jj-filter-chip:hover{color:var(--text);border-color:var(--text3)}
  .jj-filter-chip.active{background:rgba(36,72,255,0.1);color:var(--accent);border-color:rgba(36,72,255,0.3)}
  .jj-search-input{flex:1;min-width:180px;background:var(--surface2);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:7px 12px;font-size:12px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;outline:none}
  .jj-search-input:focus{border-color:rgba(36,72,255,0.5)}
  .jj-search-input::placeholder{color:var(--text3)}
  /* Tool wrapper pages */
  .jj-tool-wrap{padding:0;min-width:0;overflow-x:hidden}
  /* Detail panel */
  .jj-detail{position:fixed;top:58px;right:0;bottom:0;width:400px;background:var(--surface2);border-left:1px solid rgba(255,255,255,0.08);z-index:200;transform:translateX(100%);transition:transform 0.25s;display:flex;flex-direction:column;overflow:hidden}
  .jj-detail.open{transform:translateX(0)}
  .jj-detail-head{padding:20px 20px 16px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px}
  .jj-detail-co{font-size:18px;font-weight:800;color:var(--text);flex:1}
  .jj-detail-close{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;padding:0 4px;line-height:1}
  .jj-detail-role{font-size:13px;color:var(--text3);margin-top:2px}
  .jj-detail-body{padding:16px 20px;flex:1;overflow-y:auto}
  .jj-detail-field{margin-bottom:14px}
  .jj-detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-bottom:4px}
  .jj-detail-value{font-size:13px;color:var(--text)}
  .jj-detail-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px}
  .jj-detail-del{background:rgba(220,38,38,0.08);border:1px solid rgba(220,38,38,0.2);color:#dc2626;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
  .jj-status-select{background:var(--surface2);border:1px solid var(--border2);color:var(--text);padding:7px 12px;border-radius:8px;font-size:12px;font-family:'Plus Jakarta Sans',sans-serif;outline:none;flex:1}
  /* Modal */
  .jj-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:300;align-items:center;justify-content:center}
  .jj-overlay.open{display:flex}
  .jj-modal{background:var(--surface2);border:1px solid var(--border2);border-radius:16px;width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 80px);overflow-y:auto;padding:24px}
  .jj-modal-title{font-size:17px;font-weight:800;color:var(--text);margin-bottom:20px}
  .jj-form-field{margin-bottom:14px}
  .jj-form-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;display:block}
  .jj-form-input{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:9px;padding:10px 14px;font-size:13px;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;outline:none;transition:border-color 0.2s;box-sizing:border-box}
  .jj-form-input:focus{border-color:rgba(36,72,255,0.5)}
  .jj-form-input::placeholder{color:rgba(255,255,255,0.2)}
  .jj-modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
  .jj-btn-primary{background:#2448FF;color:var(--text);border:none;padding:9px 20px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
  .jj-btn-primary:hover{background:#1f3dd9}
  .jj-btn-cancel{background:none;border:1px solid rgba(255,255,255,0.12);color:var(--text3);padding:9px 16px;border-radius:9px;font-size:13px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
  /* Mobile bottom nav */
  .jj-mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surface2);border-top:1px solid var(--border);z-index:100;padding:8px 0}
  .jj-mob-nav-inner{display:flex;justify-content:space-around}
  .jj-mob-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 8px;cursor:pointer;color:var(--text3);transition:color 0.15s}
  .jj-mob-nav-item.active{color:var(--accent)}
  .jj-mob-nav-icon{font-size:18px}
  .jj-mob-nav-label{font-size:9px;font-weight:600}
  /* Prompt 25: mobile nav labels use var(--text3) which goes near-white in dark mode
     but nearly-invisible on light bg. Pin a readable grey for light mode. */
  .jj-mob-nav-item,
  .jj-mob-btn { color: rgba(26, 22, 20, 0.72) !important; }
  .jj-mob-nav-item.active,
  .jj-mob-btn.active { color: #6D28D9 !important; }

  /* CALENDAR REDESIGN */
  /* Header */
  /* dz-oneshot: week-grid rebuild. #jjPage_calendar no longer routes through
     --ap-*/--text/--surface aliasing at all -- the ported .cw-* component
     reads real --dzc-* dz-core tokens directly (remap block immediately
     below), not the old indirection chain. The .jj-page-title rule that
     used to style this page's now-removed outer heading is gone with it;
     the #jjPage_cv rule below is unrelated and stays. */
  #jjPage_cv .jj-page-title{ font-family:var(--ap-display); letter-spacing:-0.02em; }
  /* ═══ Calendar week-grid component, ported from calendar-week-grid_4.html ═══
     dz-core token remap: every chrome token (surface/text/line/accent/focus/
     shadow/fab) below maps onto a real --dzc-* value from dz-core -- no
     literal survives for those. The one deliberate exception is the 8
     --cw-type-* event colours: dz-core only defines 4 accent hues (blue,
     amber, red, green), and this app already treats per-event-type colour
     as its own small categorical palette outside dz-core chrome (the old
     calendar legend used 8 literal hexes for the same reason -- there is no
     dz equivalent to map onto). Those 8 keep the reference file's own
     values, which were already accessibility-checked there ("deepened so
     white text clears AA on the fill").
     LIGHT is the only theme -- ReplyRate has no dark mode (confirmed: no
     [data-theme] anywhere in the codebase), so the reference's entire
     [data-theme="dark"] block is dropped, not just left unused. */
  #jjPage_calendar {
    --cw-bg-page:        var(--dzc-bg);
    --cw-bg-grid:        var(--dzc-card);
    --cw-bg-rail:        var(--dzc-bg);
    --cw-surface-input:  var(--dzc-card);

    --cw-text-primary:   var(--dzc-ink);
    --cw-text-strong:    var(--dzc-ink);
    --cw-text-secondary: var(--dzc-text-mid);
    --cw-text-button:    var(--dzc-text-mid);
    --cw-on-accent:      #ffffff;

    --cw-accent-section: var(--dzc-blue);
    --cw-accent-today:   var(--dzc-blue);
    --cw-today-pill:     var(--dzc-blue);
    --cw-selected-pill:  var(--dzc-tile-bg);

    --cw-line:           var(--dzc-border);
    --cw-rail-border:    var(--dzc-border);
    --cw-btn-border:     var(--dzc-border);
    --cw-key-border:     var(--dzc-border);

    --cw-now:            var(--dzc-red-tx);
    --cw-hover-row:      var(--dzc-skel);
    --cw-hover-cell:     color-mix(in srgb, var(--dzc-blue) 5%, transparent);
    --cw-ghost:          var(--dzc-blue);
    --cw-ghost-alpha:    0.16;
    --cw-focus-ring:     var(--dzc-blue);
    --cw-shadow-panel:   0 1px 3px rgba(14, 17, 32, 0.06), 0 8px 24px rgba(14, 17, 32, 0.07);

    --cw-fab-a:          var(--dzc-green-tx);
    --cw-fab-b:          var(--dzc-blue);
    --cw-fab-fg:         #ffffff;

    --cw-cal-1:          var(--dzc-blue);

    /* event-type colours -- see comment above; own categorical palette */
    --cw-type-interview:  #3d5ce0;
    --cw-type-screening:  #0d7a66;
    --cw-type-assessment: #b45309;
    --cw-type-followup:   #5b6bbf;
    --cw-type-deadline:   #dc2626;
    --cw-type-offer:      #15803d;
    --cw-type-networking: #8b30d9;
    --cw-type-reminder:   #64748b;

    --cw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cw-tracking: 0.2px;

    --cw-rail-w:   256px;
    --cw-gutter-w: 86px;
    --cw-hour-h:   48px;

    --cw-r-event: 5px;
    --cw-r-btn:   6px;
    --cw-r-pill:  6px;
    --cw-r-check: 4px;

    --cw-t-fast:  0.1s;
    --cw-t-std:   0.2s;
    --cw-ease:    ease;

    color-scheme: light;
  }
  @media screen and (min-height: 500px)  { #jjPage_calendar { --cw-hour-h: 55px; } }
  @media screen and (min-height: 1000px) { #jjPage_calendar { --cw-hour-h: 60px; } }
  @media screen and (min-height: 1200px) { #jjPage_calendar { --cw-hour-h: 85px; } }

  .cw-page-mount { flex: 60 0 0%; min-height: 0; display: flex; overflow: hidden; }

  .cw, .cw *, .cw *::before, .cw *::after { box-sizing: border-box; }

  .cw {
    display: flex;
    height: 100%;
    width: 100%;
    min-height: 0;
    background: var(--cw-bg-page);
    color: var(--cw-text-primary);
    font-family: var(--cw-font);
    letter-spacing: var(--cw-tracking);
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
  }
  .cw :focus-visible {
    outline: 2px solid var(--cw-focus-ring);
    outline-offset: 1px;
    border-radius: 3px;
  }

  .cw-rail {
    flex: 0 0 var(--cw-rail-w);
    width: var(--cw-rail-w);
    background: var(--cw-bg-rail);
    border-right: 1px solid var(--cw-rail-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .cw-rail__scroll { flex: 1 1 auto; overflow-y: auto; padding: 10px 11px 16px; }

  .cw-mini__head { display: flex; align-items: center; gap: 4px; height: 33px; padding: 0 2px; }
  .cw-mini__label { font-size: 12px; font-weight: 400; color: var(--cw-text-primary); }
  .cw-mini__spacer { flex: 1 1 auto; }
  .cw-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    background: none; border: 0; border-radius: 4px;
    color: var(--cw-text-secondary); cursor: pointer;
    transition: background var(--cw-t-std) var(--cw-ease), color var(--cw-t-std) var(--cw-ease);
  }
  .cw-iconbtn:hover { background: var(--cw-hover-row); color: var(--cw-text-strong); }
  .cw-iconbtn svg { width: 14px; height: 14px; }

  .cw-mini__weekdays, .cw-mini__days { display: grid; grid-template-columns: repeat(7, 1fr); }
  .cw-mini__weekdays span { height: 22px; display: grid; place-items: center; font-size: 10px; font-weight: 300; color: var(--cw-text-primary); }
  .cw-mini__day {
    height: 30px; display: grid; place-items: center;
    background: none; border: 0; padding: 0;
    font-family: inherit; letter-spacing: inherit;
    font-size: 10px; font-weight: 300;
    color: var(--cw-text-primary); cursor: pointer;
  }
  .cw-mini__day > span {
    width: 26px; height: 26px; display: grid; place-items: center;
    border: 1px solid transparent; border-radius: var(--cw-r-pill);
    transition: all var(--cw-t-std) var(--cw-ease);
  }
  .cw-mini__day:hover > span { background: var(--cw-selected-pill); color: var(--cw-text-strong); }
  .cw-mini__day--today:hover > span { color: #ffffff; }
  .cw-mini__day--muted { color: var(--cw-text-secondary); }
  .cw-mini__day--selected > span { background: var(--cw-selected-pill); color: var(--cw-text-strong); }
  .cw-mini__day--today > span { background: var(--cw-today-pill); border-color: var(--cw-accent-today); color: #ffffff; }

  .cw-section { margin-top: 22px; margin-bottom: 6px; font-size: 12px; font-weight: 500; line-height: 16.8px; color: var(--cw-accent-section); }
  .cw-callist { display: flex; flex-direction: column; }
  .cw-calrow {
    display: flex; align-items: center; gap: 10px;
    height: 28px; padding: 2px 6px; margin: 0 -6px;
    background: none; border: 0; border-radius: 4px;
    font-family: inherit; letter-spacing: inherit;
    font-size: 12px; font-weight: 300; color: var(--cw-text-primary);
    text-align: left; cursor: pointer;
  }
  .cw-calrow:hover { background: var(--cw-hover-row); }
  .cw-check {
    flex: 0 0 16px; width: 16px; height: 16px;
    border: 1px solid var(--cw-swatch, var(--cw-cal-1));
    border-radius: var(--cw-r-check);
    display: grid; place-items: center;
    transition: border var(--cw-t-std) ease-in-out, background var(--cw-t-std) ease-in-out;
  }
  .cw-calrow[aria-pressed="true"] .cw-check { background: var(--cw-swatch, var(--cw-cal-1)); }
  .cw-check svg { width: 10px; height: 10px; opacity: 0; color: var(--cw-on-accent); }
  .cw-calrow[aria-pressed="true"] .cw-check svg { opacity: 1; }
  .cw-calrow__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .cw-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

  .cw-toolbar { flex: 0 0 65px; height: 65px; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
  .cw-toolbar__title { display: flex; flex-direction: column; justify-content: center; }
  .cw-toolbar__title b { font-size: 16px; font-weight: 400; line-height: 22.4px; color: var(--cw-text-primary); }
  .cw-toolbar__title span { font-size: 12px; font-weight: 300; line-height: 16px; color: var(--cw-text-secondary); }
  .cw-toolbar__spacer { flex: 1 1 auto; }
  .cw-btn {
    height: 34px; min-width: 34px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: transparent;
    border: 1px solid var(--cw-btn-border);
    border-radius: var(--cw-r-btn);
    font-family: inherit; letter-spacing: inherit;
    font-size: 12px; font-weight: 500;
    color: var(--cw-text-button); cursor: pointer;
    transition: border-color var(--cw-t-std) var(--cw-ease), color var(--cw-t-std) var(--cw-ease);
  }
  .cw-btn:hover { border-color: var(--cw-text-strong); color: var(--cw-text-strong); }
  .cw-btn--ghost { border-color: transparent; }
  .cw-btn svg { width: 14px; height: 14px; }
  .cw-select {
    height: 34px; padding: 0 10px;
    background: transparent;
    border: 1px solid var(--cw-btn-border);
    border-radius: var(--cw-r-btn);
    font-family: inherit; letter-spacing: inherit;
    font-size: 12px; font-weight: 500;
    color: var(--cw-text-button); cursor: pointer;
  }

  .cw-headblock { flex: 0 0 auto; scrollbar-gutter: stable; }
  .cw-headgrid, .cw-alldaygrid, .cw-bodygrid {
    display: grid;
    grid-template-columns: var(--cw-gutter-w) repeat(var(--cw-days, 7), minmax(0, 1fr));
  }

  .cw-gutterhead { display: grid; place-items: center; padding-bottom: 8px; }
  .cw-tzpill {
    min-width: 66px; height: 34px; padding: 0 10px;
    background: transparent;
    border: 1px solid var(--cw-btn-border);
    border-radius: var(--cw-r-btn);
    font-family: inherit; letter-spacing: inherit;
    font-size: 12px; font-weight: 500; color: var(--cw-text-button);
  }
  .cw-dayhead { display: flex; flex-direction: column; align-items: center; padding-top: 12px; padding-bottom: 6px; }
  .cw-dayhead__dow { font-size: 10px; font-weight: 400; line-height: 15px; text-transform: uppercase; color: var(--cw-text-primary); }
  .cw-dayhead--today .cw-dayhead__dow { color: var(--cw-accent-today); }
  .cw-dayhead__num {
    min-width: 38px; height: 29px; margin-top: 2px;
    display: grid; place-items: center;
    border-radius: var(--cw-r-pill);
    font-size: 18px; font-weight: 300;
    color: var(--cw-text-primary);
    transition: all var(--cw-t-fast) var(--cw-ease);
  }
  .cw-dayhead--today .cw-dayhead__num { background: var(--cw-today-pill); color: #ffffff; }

  .cw-alldaygrid { min-height: 32px; }
  .cw-allday-cell { border-left: 1px solid var(--cw-line); padding: 2px 1px; display: flex; flex-direction: column; gap: 2px; }
  .cw-allday {
    height: 22px; padding: 2px 5px 2px 8px;
    border-radius: var(--cw-r-event);
    background: var(--cw-ev-color, var(--cw-cal-1));
    color: #ffffff;
    font-size: 12px; font-weight: 400; line-height: 18px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border: 0; text-align: left; cursor: pointer;
    font-family: inherit; letter-spacing: inherit;
  }

  .cw-scroll {
    flex: 1 1 auto; min-height: 0;
    background: var(--cw-bg-grid);
    overflow-y: auto; overflow-x: hidden;
    scrollbar-gutter: stable;
    border-top: 1px solid var(--cw-line);
  }

  .cw-gutter { position: relative; }
  .cw-gutter__hour { height: var(--cw-hour-h); position: relative; }
  .cw-gutter__hour > span {
    position: absolute; top: 0; right: 8px;
    transform: translateY(-50%);
    font-size: 10px; font-weight: 300;
    color: var(--cw-text-primary);
    white-space: nowrap;
  }

  .cw-col {
    position: relative;
    background-color: var(--cw-bg-grid);
    height: calc(var(--cw-hour-h) * 24);
    border-left: 1px solid var(--cw-line);
    background-image: repeating-linear-gradient(to bottom, var(--cw-line) 0 1px, transparent 1px var(--cw-hour-h));
    touch-action: none;
  }
  /* Single-cell hover highlight, JS-positioned (see attachGestures) --
     replaces a plain .cw-col:hover full-column tint. That rule was later
     changed to .cw-col:hover:not(:has(.cw-event:hover)) so hovering an event
     wouldn't also wash the column behind it, but coupling one element's
     hover style to a nested element's :hover via :has() is a known class of
     browser style-invalidation staleness -- the tint could persist on a
     column the cursor had already left. This element is shown/hidden
     explicitly by JS instead, with no :hover dependency at all. */
  .cw-cell-hover { position: absolute; left: 0; right: 0; background-color: var(--cw-hover-cell); pointer-events: none; display: none; }

  .cw-events { position: absolute; inset: 0 10px 0 0; }

  .cw-event {
    position: absolute;
    padding: 2px 5px;
    border: 1px solid var(--cw-ev-color, var(--cw-cal-1));
    border-radius: var(--cw-r-event);
    background: var(--cw-ev-color, var(--cw-cal-1));
    color: #ffffff;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    font-family: inherit; letter-spacing: inherit;
    transition: filter var(--cw-t-fast) var(--cw-ease), box-shadow var(--cw-t-fast) var(--cw-ease);
  }
  .cw-event:hover, .cw-event:focus-visible { filter: brightness(1.12); }
  .cw-event--selected { z-index: 3; box-shadow: 0 0 0 2px var(--cw-bg-grid), 0 0 0 4px var(--cw-focus-ring); }
  .cw-event__bar { position: absolute; left: 5px; top: 0; bottom: -5px; width: 4px; border-radius: 2px 0 0 2px; background: currentColor; opacity: 0.55; }
  .cw-event__body { padding-left: 9px; }
  .cw-event__title {
    margin-top: 2px;
    font-size: 12px; font-weight: 400; line-height: 15px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: break-word;
  }
  .cw-event__time { font-size: 12px; font-weight: 300; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.92; }

  .cw-event--short { padding: 0 5px 2px; }
  .cw-event--short .cw-event__bar { display: none; }
  .cw-event--short .cw-event__body { padding-left: 3px; display: flex; gap: 6px; align-items: baseline; }
  .cw-event--short .cw-event__title { margin-top: 2px; font-size: 10px; line-height: 14px; -webkit-line-clamp: 1; word-break: break-all; }
  .cw-event--short .cw-event__time { font-size: 10px; line-height: 14px; }

  .cw-event--contfrom { border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: dashed; }
  .cw-event--contto { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: dashed; }

  .cw-nowline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--cw-now); z-index: 4; pointer-events: none; }
  .cw-nowline::before { content: ""; position: absolute; left: -3px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--cw-now); }

  .cw-ghost {
    position: absolute; left: 0; right: 0;
    background: var(--cw-ghost); opacity: var(--cw-ghost-alpha);
    color: var(--cw-text-strong);
    font-size: 12px; font-weight: 300;
    padding: 3px; z-index: 10; pointer-events: none;
    border-width: 0 0 1px 1px; border-style: solid; border-color: var(--cw-line);
  }

  .cw-fabs { position: absolute; right: 48px; bottom: 40px; display: flex; gap: 24px; z-index: 5; }
  .cw-fab { width: 48px; height: 48px; border-radius: 100%; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--cw-fab-fg); transition: transform var(--cw-t-std) ease-in-out; }
  .cw-fab:hover { transform: translateY(-5px); }
  .cw-fab svg { width: 20px; height: 20px; }
  .cw-fab--a { background: var(--cw-fab-a); }
  .cw-fab--b { background: var(--cw-fab-b); }

  .cw.is-composing .cw-rail { display: none; }

  .cw-composer {
    flex: 0 0 360px; width: 360px;
    display: flex; flex-direction: column;
    background: var(--cw-bg-page);
    border-left: 1px solid var(--cw-rail-border);
    box-shadow: var(--cw-shadow-panel);
  }
  .cw-composer__head { flex: 0 0 auto; height: 65px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--cw-line); }
  .cw-composer__head h2 { margin: 0; flex: 1 1 auto; font-size: 16px; font-weight: 500; color: var(--cw-text-strong); }
  .cw-composer__body { flex: 1 1 auto; overflow-y: auto; padding: 16px; }
  .cw-composer__foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--cw-line); }
  .cw-composer__foot .cw-btn { flex: 0 0 auto; }
  .cw-composer__spacer { flex: 1 1 auto; }

  .cw-field { margin-bottom: 14px; }
  .cw-field__label { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; color: var(--cw-text-secondary); }
  .cw-field__hint { text-transform: none; letter-spacing: var(--cw-tracking); font-weight: 300; margin-left: 6px; opacity: 0.75; }
  .cw-input, .cw-textarea {
    width: 100%; height: 34px; padding: 0 10px;
    background: var(--cw-surface-input);
    border: 1px solid var(--cw-btn-border);
    border-radius: 7px;
    font-family: inherit; letter-spacing: inherit;
    font-size: 12px; font-weight: 300;
    color: var(--cw-text-primary);
  }
  .cw-textarea { height: 62px; padding: 8px 10px; resize: vertical; line-height: 16px; }
  .cw-input::placeholder, .cw-textarea::placeholder { color: var(--cw-text-secondary); }
  .cw-input:focus, .cw-textarea:focus { border-color: var(--cw-accent-section); outline: none; }
  .cw-row { display: flex; gap: 8px; }
  .cw-row > * { flex: 1 1 0; min-width: 0; }

  .cw-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .cw-typechip {
    display: flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 9px;
    background: transparent;
    border: 1px solid var(--cw-btn-border);
    border-radius: var(--cw-r-btn);
    font-family: inherit; letter-spacing: inherit;
    font-size: 12px; font-weight: 400;
    color: var(--cw-text-primary);
    cursor: pointer; text-align: left;
    transition: border-color var(--cw-t-fast) var(--cw-ease), background var(--cw-t-fast) var(--cw-ease);
  }
  .cw-typechip svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--cw-type-color); }
  .cw-typechip:hover { border-color: var(--cw-text-secondary); }
  .cw-typechip[aria-pressed="true"] {
    border-color: var(--cw-type-color);
    background: color-mix(in srgb, var(--cw-type-color) 16%, transparent);
    color: var(--cw-text-strong);
  }

  .cw-checkline {
    display: flex; align-items: flex-start; gap: 9px;
    width: 100%; padding: 5px 0;
    background: none; border: 0;
    font-family: inherit; letter-spacing: inherit;
    font-size: 12px; font-weight: 300; line-height: 16px;
    color: var(--cw-text-primary); text-align: left; cursor: pointer;
  }
  .cw-checkline .cw-check { flex: 0 0 14px; width: 14px; height: 14px; border-color: var(--cw-text-secondary); }
  .cw-checkline[aria-pressed="true"] .cw-check { background: var(--cw-accent-section); border-color: var(--cw-accent-section); }
  .cw-checkline[aria-pressed="true"] .cw-check svg { color: #ffffff; opacity: 1; }
  .cw-checkline[aria-pressed="true"] .cw-checkline__label { color: var(--cw-text-secondary); text-decoration: line-through; }

  .cw-prep { border: 1px solid var(--cw-line); border-radius: 8px; padding: 8px 10px; }
  .cw-prep__empty { font-size: 12px; font-weight: 300; color: var(--cw-text-secondary); }

  .cw-pipeline { margin-top: 4px; padding: 10px; border: 1px solid var(--cw-line); border-radius: 8px; background: color-mix(in srgb, var(--cw-accent-section) 8%, transparent); }
  .cw-pipeline[hidden] { display: none; }

  @media (max-width: 900px) {
    .cw-composer { position: absolute; inset: 0; z-index: 20; flex-basis: auto; width: 100%; border-left: 0; }
  }

  @media (max-width: 1200px) { #jjPage_calendar .cw-rail { display: none; } }
  @media (max-width: 720px)  { #jjPage_calendar { --cw-gutter-w: 52px; } }

  @media (prefers-reduced-motion: reduce) {
    .cw, .cw * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  }

  .jj-followup-suggest{background:#F7F8FA;border:1px solid rgba(36,72,255,0.3);border-left:3px solid #2448FF;border-radius:8px;padding:12px 16px;font-size:13px;color:#86867E;display:flex;align-items:center;gap:10px;margin:16px 28px;animation:jjFadeIn 0.2s ease;flex-wrap:wrap}
  .jj-followup-suggest strong{color:#1A1614}
  .jj-followup-suggest button{background:var(--rr-accent);border:none;color:#fff;font-size:12px;padding:5px 12px;border-radius:6px;cursor:pointer;font-family:inherit;white-space:nowrap}
  .jj-followup-suggest button:last-child{background:none;color:#A4A49C;padding:5px 8px}

  /* ── Pinboard ── */
  .pb-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--surface2);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;gap:10px}
  .pb-header-left{display:flex;align-items:center;gap:10px;color:var(--text)}
  .pb-title{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-0.4px;margin:0}
  .pb-subtitle{font-size:12px;color:var(--text3);margin:0}
  .pb-header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .pb-colour-row{display:flex;align-items:center;gap:6px}
  .pb-colour-label{font-size:11px;color:var(--text3);font-weight:600;white-space:nowrap}
  .pb-colour-btn{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform 0.15s,border-color 0.15s;flex-shrink:0;min-height:0!important}
  .pb-colour-btn:hover{transform:scale(1.2)}
  .pb-colour-btn.selected{border-color:var(--text);transform:scale(1.15)}
  .pb-add-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s;white-space:nowrap;min-height:0!important}
  .pb-add-btn:hover{background:#1f3dd9}
  .pb-board{position:relative;flex:1;min-height:0;overflow:hidden;background-color:#C8924A;background-image:radial-gradient(ellipse at 30% 20%,rgba(255,210,140,0.18) 0%,transparent 55%);border:14px solid #6B3F1A;border-radius:4px;outline:3px solid #8B5A2B;outline-offset:-2px;box-shadow:inset 0 2px 8px rgba(0,0,0,0.35),inset 0 -2px 6px rgba(0,0,0,0.2),inset 2px 0 6px rgba(0,0,0,0.2),inset -2px 0 6px rgba(0,0,0,0.2);margin:0 28px 28px}
  .jj-root .pb-board {background-color:#2D2417;background-image:radial-gradient(ellipse at 30% 20%,rgba(255,200,100,0.07) 0%,transparent 55%),radial-gradient(ellipse at 70% 80%,rgba(100,60,20,0.1) 0%,transparent 45%);border-color:#3D2008;outline-color:#5C3010;box-shadow:inset 0 2px 10px rgba(0,0,0,0.6),inset 0 -2px 8px rgba(0,0,0,0.4),inset 2px 0 8px rgba(0,0,0,0.4),inset -2px 0 8px rgba(0,0,0,0.4),0 4px 20px rgba(0,0,0,0.6)}
  .pb-board::before{content:'';position:absolute;inset:-12px;border-radius:4px;pointer-events:none;background:radial-gradient(circle 4px at 8px 8px,#4A2A0A 60%,transparent 61%),radial-gradient(circle 4px at calc(100% - 8px) 8px,#4A2A0A 60%,transparent 61%),radial-gradient(circle 4px at 8px calc(100% - 8px),#4A2A0A 60%,transparent 61%),radial-gradient(circle 4px at calc(100% - 8px) calc(100% - 8px),#4A2A0A 60%,transparent 61%);z-index:50}
  .pb-board::after{content:'';position:absolute;inset:-14px;border-radius:6px;pointer-events:none;background:repeating-linear-gradient(92deg,transparent 0px,transparent 8px,rgba(0,0,0,0.04) 8px,rgba(0,0,0,0.04) 9px);z-index:49}
  .pb-empty-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:rgba(212,169,106,0.6);pointer-events:none}
  .pb-empty-hint p{font-size:16px;font-weight:600;margin:0 0 4px;color:rgba(212,169,106,0.7)}
  .pb-empty-sub{font-size:13px!important;color:rgba(212,169,106,0.45)!important;font-weight:400!important}
  .pb-empty-btn{pointer-events:all;margin-top:16px;background:rgba(212,169,106,0.15);border:1px solid rgba(212,169,106,0.3);color:rgba(212,169,106,0.8);border-radius:8px;padding:8px 16px;font-size:13px;cursor:pointer;transition:all 0.15s;min-height:0!important}
  .pb-empty-btn:hover{background:rgba(212,169,106,0.25);color:rgba(212,169,106,1)}
  .pb-note{position:absolute;width:180px;min-height:155px;border-radius:4px;display:flex;flex-direction:column;cursor:grab;user-select:none;box-shadow:2px 4px 12px rgba(0,0,0,0.38);z-index:10;border:2px solid transparent;transform:rotate(var(--pb-rot,0deg));transition:box-shadow 0.15s,transform 0.15s}
  .pb-note:hover{z-index:40;box-shadow:4px 8px 20px rgba(0,0,0,0.5);filter:brightness(1.02)}
  .pb-note.pb-drag,.pb-note.pb-dragging{cursor:grabbing;box-shadow:6px 12px 28px rgba(0,0,0,0.6);z-index:100;transition:none}
  .pb-note[data-colour="yellow"]{background-color:#FFF9C4;border-color:#E8D84A}
  .pb-note[data-colour="blue"]{background-color:#BBDEFB;border-color:#64B5F6}
  .pb-note[data-colour="green"]{background-color:#C8E6C9;border-color:#81C784}
  .pb-note[data-colour="pink"]{background-color:#F8BBD0;border-color:#F48FB1}
  .pb-note[data-colour="purple"]{background-color:#E1BEE7;border-color:#CE93D8}
  .pb-note[data-colour="peach"]{background-color:#FFE0B2;border-color:#FFAB40}
  .pb-pin{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:24px;height:24px;pointer-events:none;z-index:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4))}
  .pb-note-toolbar{position:absolute;top:4px;right:4px;display:flex;gap:4px;opacity:0;transition:opacity 0.15s;z-index:3}
  .pb-note:hover .pb-note-toolbar{opacity:1}
  .pb-tool-btn{width:22px;height:22px;border:none;border-radius:4px;background:rgba(0,0,0,0.12);color:rgba(0,0,0,0.6);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.1s;min-height:0!important;padding:0}
  .pb-tool-btn:hover{background:rgba(0,0,0,0.22);color:rgba(0,0,0,0.9)}
  .pb-note-text{flex:1;border:none;background:transparent;resize:none;font-family:'Caveat',cursive;font-size:17px;line-height:1.45;color:rgba(0,0,0,0.75);padding:28px 10px 10px;outline:none;width:100%;min-height:120px;cursor:text}
  .pb-note-text::placeholder{color:rgba(0,0,0,0.3)}
  .pb-resize-handle{position:absolute;bottom:2px;right:2px;width:14px;height:14px;cursor:nwse-resize;opacity:0.35;transition:opacity 0.15s}
  .pb-note:hover .pb-resize-handle{opacity:0.7}
  .pb-dragging{transform:rotate(var(--pb-rot,0deg)) scale(1.03)!important;box-shadow:6px 8px 20px rgba(0,0,0,0.5)!important;z-index:100!important}
  @keyframes pbPop{from{transform:rotate(var(--pb-rot,0deg)) scale(0.6);opacity:0}to{transform:rotate(var(--pb-rot,0deg)) scale(1);opacity:1}}
  @keyframes pbDelete{to{transform:rotate(var(--pb-rot,0deg)) scale(0.8);opacity:0}}
  .pb-note-entering{animation:pbPop 0.25s cubic-bezier(0.34,1.56,0.64,1) forwards}
  .pb-note-deleting{animation:pbDelete 0.2s ease forwards}
  /* Pinboard teaser on dashboard */
  .pb-dash-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px;margin-top:14px;cursor:pointer;transition:border-color 0.15s}
  .pb-dash-card:hover{border-color:var(--accent)}
  .pb-dash-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
  .pb-dash-action{font-size:12px;color:var(--accent);font-weight:600;cursor:pointer}
  .pb-dash-previews{display:flex;gap:8px;flex-wrap:wrap}
  .pb-dash-note{width:70px;height:64px;border-radius:3px;font-family:'Caveat',cursive;font-size:11px;color:rgba(0,0,0,0.65);padding:6px 7px;line-height:1.3;overflow:hidden;box-shadow:1px 2px 5px rgba(0,0,0,0.2);flex-shrink:0}

  /* ── PINBOARD (in calendar) ── */
  .pb-section{flex:40 0 0%;min-height:0;border-top:1px solid rgba(255,255,255,0.07);display:flex;flex-direction:column;overflow:hidden}
  .pb-section .pb-expand-arrow{transition:transform 0.3s}
  .pb-section.pb-expanded .pb-expand-arrow{transform:rotate(180deg)}
  .pb-section-hd{cursor:pointer}
  .pb-section-hd{display:flex;align-items:center;gap:10px;padding:12px 28px;flex-shrink:0;flex-wrap:wrap}
  .pb-section-icon{font-size:16px}
  .pb-section-title{font-size:13px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
  .pb-colour-btns{display:flex;gap:5px;align-items:center}
  .pb-sw{width:18px;height:18px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:transform 0.12s}
  .pb-sw:hover,.pb-sw.on{transform:scale(1.25);border-color:var(--text)}
  .pb-add-sm{padding:4px 12px;font-size:12px;cursor:pointer;border:1px solid var(--border);border-radius:6px;background:none;color:var(--text3);font-family:inherit;transition:all 0.12s;margin-left:auto}
  .pb-add-sm:hover{color:var(--text);border-color:var(--border2)}
  .pb-board-cal{position:relative;min-height:0;flex:1;background:#2D2417;overflow:hidden}
  /* Pass 3b (C4): retire the calendar pinboard's dark cork -> warm cream board; empty
     hint + note text go ink. Caveat kept for the note text. (The full-screen OPEN
     PINBOARD board overlay is a separate surface, left for the pinboard pass.) */
  #jjPage_calendar .pb-board-cal{ background:var(--ap-bg-2); border-radius:var(--ap-radius); }
  #jjPage_calendar .pb-empty{ color:var(--ap-ink-3); }
  #jjPage_calendar .pb-note-cal-ta{ color:var(--ap-ink-2); }
  .pb-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:rgba(255,255,255,0.28);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px}
  .pb-empty p{font-size:12px;margin:0}
  .pb-note-cal{position:absolute;width:180px;min-height:155px;border-radius:4px;display:flex;flex-direction:column;cursor:grab;user-select:none;box-shadow:2px 4px 12px rgba(0,0,0,0.38);z-index:10}
  .pb-note-cal:hover{z-index:40;box-shadow:4px 8px 20px rgba(0,0,0,0.5)}
  .pb-note-cal.pb-drag{cursor:grabbing;box-shadow:6px 12px 28px rgba(0,0,0,0.6);z-index:100;transition:none}
  .pb-note-cal-pin{text-align:center;font-size:17px;margin-top:-9px;pointer-events:none;line-height:1;flex-shrink:0;filter:drop-shadow(0 2px 2px rgba(0,0,0,0.35))}
  .pb-note-cal-tb{display:flex;justify-content:flex-end;gap:3px;padding:2px 5px 0;opacity:0;transition:opacity 0.12s;flex-shrink:0}
  .pb-note-cal:hover .pb-note-cal-tb{opacity:1}
  .pb-cal-btn{width:18px;height:18px;border-radius:50%;border:none;background:rgba(0,0,0,0.12);color:rgba(0,0,0,0.5);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .pb-cal-btn:hover{background:rgba(0,0,0,0.22)}
  .pb-cal-del:hover{background:rgba(180,0,0,0.2)!important;color:#900!important}
  .pb-note-cal-ta{flex:1;background:none;border:none;outline:none;resize:none;font-family:'Caveat',cursive,sans-serif;font-size:17px;line-height:1.45;color:rgba(0,0,0,0.72);padding:3px 11px 11px;min-height:95px;cursor:text;width:100%;box-sizing:border-box}
  .pb-note-cal-ta::placeholder{color:rgba(0,0,0,0.3)}

  /* Applications kanban board (action bar, urgency strip, stats row, pill
     filters, board/columns/cards, badges, card-move/actions) removed 2026-07
     with the records-table CRM rebuild -- see #jjPage_apps.tl-theme .apx-*
     above. The delete-confirmation modal directly below is unrelated and
     still used by the kept detail modal, left untouched. */

  /* Custom delete confirmation modal */
  .ap-delete-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px}
  .ap-delete-modal{background:#1c2128;border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:28px 28px 22px;width:100%;max-width:320px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.6);animation:apDeleteIn .18s ease}
  @keyframes apDeleteIn{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1)}}
  .ap-delete-modal {background:#fff;border-color:rgba(0,0,0,0.1)}
  .ap-delete-icon{font-size:32px;margin-bottom:12px;line-height:1}
  .ap-delete-title{font-size:16px;font-weight:700;color:#e6edf3;margin-bottom:6px}
  .ap-delete-title {color:#1A1614}
  .ap-delete-sub{font-size:13px;color:#8b949e;margin-bottom:22px;line-height:1.4}
  .ap-delete-sub {color:#6B6259}
  .ap-delete-btns{display:flex;gap:10px}
  .ap-delete-cancel{flex:1;padding:10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#8b949e;font-size:14px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .12s}
  .ap-delete-cancel {background:#f0f0f0;border-color:rgba(0,0,0,0.1);color:#6B6259}
  .ap-delete-cancel:hover{color:#e6edf3;background:rgba(255,255,255,0.1)}
  .ap-delete-cancel:hover {color:#1A1614;background:#e5e5e5}
  .ap-delete-confirm{flex:1;padding:10px;background:#f85149;border:none;border-radius:8px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:background .12s}
  .ap-delete-confirm:hover{background:#da3630}

  /* Prompt 43 Phase 2: application detail modal */
  .ap-modal{position:fixed;inset:0;z-index:3100;display:flex;align-items:center;justify-content:center;padding:20px}
  .ap-modal[hidden]{display:none}
  .ap-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .ap-modal-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,0.5);overflow:hidden;animation:apDeleteIn .18s ease}
  .ap-modal-card {background:#fff;border-color:rgba(0,0,0,0.1)}
  .ap-modal-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:none;background:var(--surface2);color:var(--text3);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;z-index:2}
  .ap-modal-close:hover{background:var(--border);color:var(--text)}
  .ap-modal-hd{display:flex;align-items:center;gap:12px;padding:18px 54px 14px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap}
  .ap-modal-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.3;flex:1;min-width:0}
  .ap-modal-title-sep{color:var(--text3);font-weight:400}
  .ap-modal-stage-chip{font-size:10px;font-weight:800;padding:4px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:0.08em}
  .ap-modal-stage-chip.stage-saved{background:rgba(120,120,140,0.12);color:#7878a0}
  .ap-modal-stage-chip.stage-applied{background:rgba(36, 72, 255,0.10);color:var(--rr-accent)}
  .ap-modal-stage-chip.stage-screening{background:rgba(234,179,8,0.10);color:#a07800}
  .ap-modal-stage-chip.stage-interview{background:rgba(168,85,247,0.10);color:#a855f7}
  .ap-modal-stage-chip.stage-offer{background:rgba(34,197,94,0.10);color:#16a34a}
  .ap-modal-stage-chip.stage-rejected{background:rgba(220,38,38,0.10);color:#dc2626}
  .ap-modal-body{padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;flex:1}
  .ap-field{display:flex;flex-direction:column;gap:4px;min-width:0}
  .ap-field>label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px}
  .ap-field>input,.ap-field>select,.ap-field>textarea{padding:9px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:13px;font-family:'Plus Jakarta Sans',sans-serif;outline:none;transition:border 0.15s;width:100%;resize:vertical}
  .ap-field>input:focus,.ap-field>select:focus,.ap-field>textarea:focus{border-color:var(--rr-accent)}
  .ap-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:520px){.ap-field-row{grid-template-columns:1fr}}
  .ap-priority-pills{display:flex;gap:6px}
  .ap-priority-pills button{flex:1;padding:9px 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text3);font-size:12px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all 0.15s}
  .ap-priority-pills button:hover{color:var(--text)}
  .ap-priority-pills button.active[data-priority="low"]{background:rgba(150,150,150,0.15);border-color:rgba(150,150,150,0.4);color:var(--text)}
  .ap-priority-pills button.active[data-priority="medium"]{background:rgba(36, 72, 255,0.12);border-color:rgba(36, 72, 255,0.4);color:var(--rr-accent)}
  .ap-priority-pills button.active[data-priority="high"]{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.45);color:#ef4444}
  .ap-tags-input{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);min-height:36px;margin-bottom:4px}
  .ap-tags-input:empty{display:none}
  .ap-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:100px;background:rgba(124,93,255,0.12);color:#a78bfa;font-size:11px;font-weight:600}
  .ap-tag-x{cursor:pointer;font-size:13px;line-height:1;opacity:0.6;transition:opacity 0.12s}
  .ap-tag-x:hover{opacity:1}
  .ap-linked-docs{display:flex;flex-wrap:wrap;gap:8px}
  .ap-link-doc-btn{padding:8px 12px;border-radius:8px;border:1px dashed var(--border);background:transparent;color:var(--text3);font-size:12px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;display:inline-flex;align-items:center;gap:6px;transition:all 0.15s}
  .ap-link-doc-btn:hover{border-color:var(--rr-accent);color:var(--text);border-style:solid}
  .ap-modal-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border-top:1px solid var(--border);flex-wrap:wrap}
  .ap-modal-actions-right{display:flex;gap:8px;margin-left:auto}
  .ap-btn-ghost{padding:9px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text3);font-size:13px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all 0.15s}
  .ap-btn-ghost:hover{color:var(--text);border-color:var(--border2)}
  .ap-btn-primary{padding:9px 16px;border-radius:8px;border:none;background:var(--rr-accent);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:filter 0.15s}
  .ap-btn-primary:hover{filter:brightness(1.08)}
  .ap-btn-danger-ghost{padding:9px 14px;border-radius:8px;border:1px solid transparent;background:transparent;color:#ef4444;font-size:13px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;display:inline-flex;align-items:center;gap:6px;transition:all 0.15s}
  .ap-btn-danger-ghost:hover{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.25)}
  .ap-detail-score-row{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
  .ap-detail-score-result{font-size:12px;color:var(--text3);font-family:'Plus Jakarta Sans',sans-serif}
  .cv-result-when,.cl-result-when{font-size:11px;color:var(--text3);margin-left:8px;font-family:'Plus Jakarta Sans',sans-serif}
  .ic-hero-score-when{font-size:11px;color:var(--text3);margin-top:2px;font-family:'Plus Jakarta Sans',sans-serif}

  /* Quick-add overlay */
  .ap-qa-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center;padding:20px}
  .ap-qa-overlay.open{display:flex}
  .ap-qa-modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:480px;box-shadow:var(--shadow-lg);overflow:hidden}
  .ap-qa-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
  .ap-qa-title{font-size:15px;font-weight:700;color:var(--text)}
  .ap-qa-close{width:28px;height:28px;border-radius:50%;border:none;background:var(--surface2);color:var(--text3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s}
  .ap-qa-close:hover{background:var(--border)}
  .ap-qa-body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
  .ap-qa-row{display:flex;flex-direction:column;gap:4px}
  .ap-qa-half{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ap-qa-half>div{display:flex;flex-direction:column;gap:4px}
  .ap-qa-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px}
  .ap-qa-input{padding:9px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:13px;font-family:'Plus Jakarta Sans',sans-serif;outline:none;transition:border 0.15s;width:100%}
  .ap-qa-input:focus{border-color:var(--rr-accent)}
  .ap-qa-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border)}
  .ap-qa-cancel{padding:8px 16px;border-radius:7px;border:1px solid var(--border);background:none;color:var(--text3);font-size:13px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all 0.15s}
  .ap-qa-cancel:hover{border-color:var(--border2);color:var(--text)}
  .ap-qa-submit{padding:8px 18px;border-radius:7px;border:none;background:var(--rr-accent);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:opacity 0.15s}
  .ap-qa-submit:hover{opacity:0.88}
  .ap-qa-textarea{resize:none;min-height:70px;line-height:1.5}
  .ap-qa-divider{height:1px;background:var(--border);margin:4px 0}
  .ap-qa-divider {background:rgba(0,0,0,.08)}

  /* Job URL import */
  .ap-import-section{display:flex;flex-direction:column;gap:7px}
  .ap-import-label-row{display:flex;align-items:center;gap:7px}
  .ap-beta-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:4px;background:rgba(210,153,34,.15);color:#d29922;border:1px solid rgba(210,153,34,.3)}
  .ap-import-disclaimer{font-size:11px;color:var(--text3);margin:0;line-height:1.4}
  .ap-import-disclaimer {color:#9A9490}
  .ap-import-row{display:flex;gap:7px;align-items:stretch}
  .ap-import-input{flex:1;min-width:0;font-size:13px!important}
  .ap-import-btn{padding:0 16px;background:var(--rr-accent);border:none;color:#fff;font-size:13px;font-weight:600;border-radius:8px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap;transition:background .12s,opacity .12s;flex-shrink:0;min-width:80px;display:flex;align-items:center;justify-content:center}
  .ap-import-btn:hover{background:#1f3dd9}
  .ap-import-btn:disabled{opacity:.55;cursor:not-allowed}

  .ap-import-status{padding:8px 11px;border-radius:7px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:7px}
  .ap-import-loading{background:rgba(36,72,255,.10);border:1px solid rgba(36,72,255,.25);color:#2448FF}
  .ap-import-success{background:rgba(63,185,80,.10);border:1px solid rgba(63,185,80,.25);color:#3fb950}
  .ap-import-partial{background:rgba(210,153,34,.10);border:1px solid rgba(210,153,34,.25);color:#d29922}
  .ap-import-error{background:rgba(248,81,73,.10);border:1px solid rgba(248,81,73,.25);color:#f85149}

  @keyframes apSpin{to{transform:rotate(360deg)}}
  .ap-spinner{width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:apSpin .7s linear infinite;flex-shrink:0}

  .ap-qa-input.ap-imported{border-color:rgba(63,185,80,.4)!important;background:rgba(63,185,80,.06)!important}

  .ap-import-duplicate{background:rgba(210,153,34,.10);border:1px solid rgba(210,153,34,.25);border-radius:7px;padding:8px 11px;font-size:12px;color:#d29922;display:flex;align-items:center;gap:8px}
  .ap-import-duplicate button{margin-left:auto;background:none;border:1px solid rgba(210,153,34,.4);color:#d29922;font-size:11px;padding:3px 9px;border-radius:5px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap}
  .ap-import-duplicate button:hover{background:rgba(210,153,34,.15)}

  /* Paste fallback section */
  @keyframes apPasteIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
  .ap-paste-section{display:flex;flex-direction:column;gap:7px;margin-top:4px;animation:apPasteIn .18s ease}
  .ap-paste-textarea{resize:vertical;min-height:110px;font-size:13px;line-height:1.5}
  .ap-paste-btn{align-self:flex-end;padding:8px 16px;background:var(--rr-accent);border:none;color:#fff;font-size:13px;font-weight:600;border-radius:7px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:background .12s}
  .ap-paste-btn:hover{background:#1f3dd9}
  .ap-paste-btn:disabled{opacity:.55;cursor:not-allowed}

  /* Light-mode overrides */
  .ap-stat {background:#fff;border-color:#e5e7eb}
  .ap-col {background:#f3f4f6;border-color:#e5e7eb}
  .ap-card {background:#fff;border-color:#e5e7eb}
  .ap-urgency {background:#fff;border-color:#e5e7eb}
  .ap-urgency-item {background:#f9fafb;border-color:#e5e7eb}
  .ap-urgency-arrow {background:#fff;border-color:#e5e7eb}
  .ap-search-input {background:#fff;border-color:#d1d5db}
  .ap-qa-modal {background:#fff;border-color:#e5e7eb}
  .ap-qa-input {background:#f9fafb;border-color:#d1d5db}
  .ap-col-hd--screening {color:#92400e}

  /* ── CALENDAR SUGGESTION BAR ── */
  .ap-cal-suggest{display:flex;align-items:center;gap:10px;padding:12px 20px;background:rgba(36, 72, 255,.10);border:1px solid rgba(36, 72, 255,.28);border-radius:9px;margin:10px 28px 0;flex-wrap:wrap;animation:apCalSuggestIn .22s ease;flex-shrink:0}
  @keyframes apCalSuggestIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
  .ap-cal-suggest {background:rgba(36, 72, 255,.06)}
  .ap-cal-suggest-icon{font-size:18px;flex-shrink:0}
  .ap-cal-suggest-msg{font-size:13px;color:var(--text);flex:1;font-weight:500;min-width:160px}
  .ap-cal-suggest-yes{background:var(--rr-accent);border:none;color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:6px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:background .12s;white-space:nowrap}
  .ap-cal-suggest-yes:hover{background:#1f3dd9}
  .ap-cal-suggest-no{background:none;border:1px solid var(--border);color:var(--text3);font-size:12px;padding:6px 12px;border-radius:6px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap}
  .ap-cal-suggest-no:hover{border-color:var(--border2);color:var(--text2)}

  /* Upcoming-strip and card-event-line styles removed 2026-07: both
     surfaces (#apUpcomingStrip, the kanban card's next-event chip) were
     removed with the board. Next-action-with-a-linked-event now renders
     as a table cell, #jjPage_apps.tl-theme .apx-next-cell (styles.css
     ~15250). */


  /* ── Responsive: tablet (768px) ── */
  @media(max-width:768px){
    .ap-stats-row{grid-template-columns:repeat(3,1fr)}
    .ap-stat--streak{grid-column:span 3}
    .ap-board{padding:12px 16px}
    .ap-action-bar{margin-left:16px;margin-right:16px;padding:14px 16px;gap:10px}
    .ap-urgency{margin-left:16px;margin-right:16px}
    .ap-cal-suggest{margin-left:16px;margin-right:16px;padding:10px 14px}
    .ap-upcoming-strip{margin-left:16px;margin-right:16px;padding:10px 14px}
    .ap-stats-row{padding:12px 16px 0}
    .ap-controls{padding:12px 16px 0}
    .ap-ab-icon{font-size:22px}
    .ap-ab-title{font-size:13px}
    .ap-ab-sub{font-size:11px}
    .ap-ab-cta{padding:8px 14px;font-size:12px}
  }

  /* ── Responsive: tablet (768px) ── */
  @media(max-width:768px){
    .jj-root{flex-direction:column;height:calc(100vh - 56px);max-height:calc(100vh - 56px);overflow:hidden}
    .jj-sidebar{display:none}
    .jj-main{height:calc(100vh - 56px - 52px);overflow-y:auto}
    .jj-detail{position:fixed;right:0;top:56px;bottom:52px;width:100%!important;min-width:0!important;z-index:200;transform:translateX(100%);transition:transform 0.25s ease}
    .jj-detail.open{transform:translateX(0);width:100%!important}
    .jj-page{padding:20px 16px 72px}
    .jj-mob-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:52px;z-index:150}
    .jj-mob-nav-inner{display:flex;justify-content:space-around;width:100%;align-items:center;height:100%}
    .jj-stat-row{grid-template-columns:1fr 1fr}
    .jj-dash-grid{grid-template-columns:1fr}
    .jj-card-wide{grid-column:1}
    .jj-kanban{gap:8px;padding-bottom:20px;-webkit-overflow-scrolling:touch}
    .jj-kanban-col{min-width:200px;max-width:200px}
    .jj-kanban::after{content:'';min-width:1px}
    .jj-page-header,.jj-page-head{flex-direction:column;align-items:flex-start;gap:10px}
    .jj-hd-actions{width:100%}
    .jj-search-input{min-width:0;flex:1}
    .jj-settings-grid{grid-template-columns:1fr}
    .jj-primary-btn,.jj-ghost-btn,.jj-btn-primary,.jj-btn-cancel,.jj-col-add-btn,.jj-nav-item,.jj-mob-nav-item{min-height:44px}
    .jj-form-input,.jj-select-sm,.jj-input{min-height:44px;font-size:16px}
    .pb-note{width:150px;min-height:120px}
    .pb-note-text{font-size:14px;min-height:80px}
    .pb-note-cal{width:140px;min-height:110px}
    .pb-note-cal-ta{font-size:14px;min-height:70px}
    #jjPage_pinboard{padding:0!important}
    .pb-header{padding:10px 14px}
    .pb-board-cal{min-height:220px;max-height:40vh}
    .pb-section-hd{padding:10px 16px}
  }
  /* ── Responsive: phone (600px) ── */
  @media(max-width:600px){
    .jj-overlay{align-items:flex-end;padding:0}
    .jj-modal{border-radius:16px 16px 0 0;max-height:92vh;max-width:100%;width:100%}
    .jj-cal-cell{min-height:60px;padding:4px}
    .jj-cal-dn{font-size:11px;width:18px;height:18px}
    .jj-cal-ev{font-size:9px;padding:1px 3px}
    .jj-cal-weekdays span{font-size:9px;padding:6px 2px}
    .jj-cal-month-label{font-size:13px}
    .jj-title,.jj-page-title{font-size:20px}
    .jj-field-row{grid-template-columns:1fr}
    .jj-page-body{padding:14px 16px}
    .jj-page-head{padding:16px 16px 0}
  }
  /* ── Responsive: small phone (380px) ── */
  @media(max-width:380px){
    .jj-stat-row{gap:8px}
    .jj-stat-num,.jj-stat-n{font-size:22px}
    .jj-kanban-col{min-width:180px;max-width:180px}
    .jj-page{padding:14px 10px 72px}
    .jj-greeting{font-size:20px}
  }
  /* ── Kanban scroll hint ── */
  .jj-kanban[data-scroll-hint="true"]::before{content:'\2190 scroll to see all columns \2192';display:block;width:100%;text-align:center;font-size:11px;color:var(--text3);margin-bottom:8px;animation:jjFadeOut 3s forwards 2s}
  @keyframes jjFadeOut{to{opacity:0}}

  /* ═══════════════════════════════════
     FIND CONTACTS: Full Redesign
     ═══════════════════════════════════ */
  #jjPage_find{padding:0}
  #jjPage_find.active{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}

  /* ===== Find Contacts entry screen (redesign phase 1). Brand palette scoped here, reused from the brief, no new colours. ===== */
  .fce{--fce-wedg:var(--rr-accent);--fce-wedg-d:var(--rr-accent-strong);--fce-wedg-t:var(--rr-accent-tint);--fce-ink:var(--rr-ink);--fce-ink-2:var(--rr-ink-muted);--fce-ink-3:var(--rr-ink-subtle);--fce-bg:#FBFAF7;--fce-surface:var(--rr-surface);--fce-surface-2:#F5F3EE;--fce-line:rgba(27,42,59,.11);--fce-line-2:rgba(27,42,59,.07);--fce-amber:#946218;--fce-amber-t:#F6EEDC;--fce-green:#3C6A43;--fce-green-t:#E8F0E6;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--fce-bg);color:var(--fce-ink);font-family:var(--rr-font-body)}
  .fce *{box-sizing:border-box}
  .fce-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 32px;border-bottom:1px solid var(--fce-line-2);flex-wrap:wrap}
  .fce-topbar-title{font-family:var(--rr-font-display);font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--fce-ink);margin:0}
  .fce-seg{display:inline-flex;background:var(--fce-surface-2);border:1px solid var(--fce-line);border-radius:999px;padding:3px}
  .fce-seg-btn{border:none;background:none;font:600 13px/1 var(--rr-font-body);color:var(--fce-ink-2);padding:8px 16px;border-radius:999px;cursor:pointer}
  .fce-seg-btn.active{background:var(--fce-surface);color:var(--fce-wedg-d);box-shadow:0 1px 2px rgba(27,42,59,.08)}
  .fce-main{padding:28px 32px 56px;max-width:1600px;width:100%;margin:0}
  .fce-hero-h{font-family:var(--rr-font-display);font-size:30px;font-weight:600;letter-spacing:-.015em;color:var(--fce-ink);margin:0 0 8px}
  .fce-hero-s{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;font-weight:400;line-height:1.4;color:rgba(26,22,20,0.68);margin:4px 0 0;max-width:640px}
  .fce-sec-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fce-ink-3);margin:32px 0 14px}
  .fce-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .fce-card{display:flex;flex-direction:column;background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:16px;padding:18px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
  .fce-card:hover{border-color:var(--fce-wedg);box-shadow:0 10px 24px -16px rgba(27,42,59,.4);transform:translateY(-1px)}
  .fce-card:focus-visible{outline:2px solid var(--fce-wedg);outline-offset:2px}
  .fce-card-top{display:flex;align-items:flex-start;gap:13px}
  .fce-av-co{width:46px;height:46px;flex:none;border-radius:12px;background:var(--fce-wedg-t);color:var(--fce-wedg-d);display:grid;place-items:center;font-weight:800;font-size:17px;font-family:var(--rr-font-display)}
  .fce-card-id{min-width:0;flex:1}
  .fce-card-role{font-size:15px;font-weight:700;color:var(--fce-ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fce-card-co{font-size:13px;color:var(--fce-ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fce-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;flex:none}
  .fce-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .fce-pill-grey{background:rgba(147,160,172,.16);color:var(--fce-ink-2)}
  .fce-pill-flight{background:var(--fce-wedg-t);color:var(--fce-wedg-d)}
  .fce-pill-win{background:var(--fce-green-t);color:var(--fce-green)}
  .fce-pill-amber{background:var(--fce-amber-t);color:var(--fce-amber)}
  .fce-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid var(--fce-line-2)}
  .fce-meta{font-size:12.5px;color:var(--fce-ink-2);font-weight:500}
  .fce-meta-amber{color:var(--fce-amber);font-weight:700}
  .fce-find{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--rr-font-body);color:var(--fce-wedg-d)}
  .fce-card--lift{border-color:var(--fce-wedg);box-shadow:0 0 0 2px var(--fce-wedg),0 12px 28px -18px rgba(36,72,255,.7)}
  .fce-card--lift .fce-meta{color:var(--fce-wedg-d);font-weight:800}
  .fce-fallback{margin-top:30px;background:var(--fce-surface-2);border:1px solid var(--fce-line);border-radius:16px;padding:18px 20px}
  .fce-fallback-h{font-size:14px;font-weight:700;color:var(--fce-ink);margin:0 0 4px}
  .fce-fallback-note{font-size:12.5px;color:var(--fce-ink-3);margin:0 0 12px;line-height:1.5}
  .fce-fb-row{display:flex;gap:10px;flex-wrap:wrap}
  .fce-fb-inp{flex:1;min-width:200px;background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:10px;padding:11px 14px;font:500 14px var(--rr-font-body);color:var(--fce-ink);outline:none}
  .fce-fb-inp:focus{border-color:var(--fce-wedg)}
  .fce-fb-dom-inp{flex:0.8;min-width:180px}
  .fce-fb-btn{background:var(--fce-wedg);color:#fff;border:none;border-radius:10px;padding:11px 18px;font:700 14px var(--rr-font-body);cursor:pointer;white-space:nowrap}
  .fce-fb-btn:hover{background:var(--fce-wedg-d)}
  .fce-fb-dom-note{margin:10px 0 0}
  .fce-jd{margin-top:16px;background:var(--fce-surface-2);border:1px solid var(--fce-line);border-radius:16px;padding:18px 20px}
  .fce-jd-h{font-size:14px;font-weight:700;color:var(--fce-ink);margin:0 0 4px}
  .fce-jd-note{font-size:12.5px;color:var(--fce-ink-3);margin:0 0 12px;line-height:1.5}
  .fce-jd-ta{display:block;width:100%;box-sizing:border-box;min-height:120px;resize:vertical;background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:10px;padding:12px 14px;font:500 13.5px/1.6 var(--rr-font-body);color:var(--fce-ink);outline:none}
  .fce-jd-ta:focus{border-color:var(--fce-wedg)}
  .fce-jd-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
  .fce-jd-btn{background:var(--fce-wedg);color:#fff;border:none;border-radius:10px;padding:11px 18px;font:700 14px var(--rr-font-body);cursor:pointer;white-space:nowrap}
  .fce-jd-btn:hover{background:var(--fce-wedg-d)}
  .fce-jd-btn:disabled{opacity:.6;cursor:default}
  .fce-jd-msg{font-size:12.5px;color:var(--fce-amber);font-weight:600;line-height:1.5}
  .fce-empty .fce-jd{text-align:left;margin-top:16px}
  .fce-empty{margin:24px 0 0;text-align:left}
  .fce-empty-ico{width:60px;height:60px;border-radius:16px;background:var(--fce-wedg-t);color:var(--fce-wedg-d);display:grid;place-items:center;margin:0 0 18px;font-size:26px}
  .fce-empty .fce-hero-s{margin:4px 0 0}
  .fce-empty .fce-fallback{text-align:left;margin-top:24px}
  .fce-empty-nudges{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap;margin-top:18px}
  .fce-nudge-btn{background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:10px;padding:10px 16px;font:600 13px var(--rr-font-body);color:var(--fce-ink);cursor:pointer}
  .fce-nudge-btn:hover{border-color:var(--fce-wedg)}
  @media(max-width:720px){.fce-grid{grid-template-columns:1fr}.fce-main{padding:20px 16px 48px}.fce-topbar{padding:16px}}

  /* Find Contacts results view, elevated craft pass. Reuses the --fce-* tokens from .fce, not redefined. */
  .fcr-back{display:inline-flex;align-items:center;gap:6px;background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:10px;padding:8px 14px;font:600 13px var(--rr-font-body);color:var(--fce-ink-2);cursor:pointer;transition:border-color .18s,color .18s,box-shadow .18s}
  .fcr-back:hover{border-color:var(--fce-wedg);color:var(--fce-wedg-d);box-shadow:0 6px 16px -12px rgba(27,42,59,.5)}
  .fcr-topbar-spacer{width:80px}
  .fcr-body{flex:1;min-height:0;overflow-y:auto}
  .fcr-wrap{max-width:1040px;width:100%;margin:0 auto;padding:30px 32px 64px}
  .fcr-in{animation:fcrRise .5s cubic-bezier(.2,.8,.25,1) both}
  .fcr-why{margin-bottom:22px;background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(27,42,59,.04)}
  .fcr-why summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 20px}
  .fcr-why summary::-webkit-details-marker{display:none}
  .fcr-why-ico{width:32px;height:32px;flex:none;border-radius:10px;background:var(--fce-wedg-t);color:var(--fce-wedg-d);display:grid;place-items:center;font-size:16px}
  .fcr-why-sum{flex:1;font-size:14px;font-weight:700;color:var(--fce-ink)}
  .fcr-why-chev{color:var(--fce-ink-3);transition:transform .2s;font-size:14px;display:grid;place-items:center}
  .fcr-why[open] .fcr-why-chev{transform:rotate(180deg)}
  .fcr-why-body{padding:0 20px 18px 64px}
  .fcr-why-target{margin-bottom:12px}
  .fcr-why-target-label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fce-ink-3);margin-bottom:3px}
  .fcr-why-target-val{font-family:var(--rr-font-display);font-size:16px;font-weight:600;color:var(--fce-ink)}
  .fcr-why-co-dom{font-family:var(--rr-font-body);font-size:12px;font-weight:600;color:var(--fce-ink-3);margin-left:6px}
  .fcr-co-banner{margin-bottom:16px;background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:18px;padding:16px 20px;box-shadow:0 1px 2px rgba(27,42,59,.04)}
  .fcr-co-loc{margin-top:6px;font-size:12.5px;color:var(--fce-ink-2);display:flex;align-items:center;gap:5px}
  .fcr-co-unresolved{font-family:var(--rr-font-display);font-size:15px;font-weight:600;color:var(--fce-ink-2)}
  .fcr-wrong-co{margin-top:10px}
  .fcr-wrong-co-toggle{background:none;border:none;padding:0;font:600 12.5px var(--rr-font-body);color:var(--fce-wedg-d);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .fcr-wrong-co-input{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
  .fcr-wrong-co-field{flex:1;min-width:160px;padding:9px 12px;border:1px solid var(--fce-line);border-radius:9px;font:500 13px var(--rr-font-body);color:var(--fce-ink);background:var(--fce-surface)}
  .fcr-wrong-co-go{background:var(--fce-wedg-t);color:var(--fce-wedg-d);border:1px solid var(--fce-wedg);border-radius:9px;padding:9px 14px;font:600 13px var(--rr-font-body);cursor:pointer;white-space:nowrap}
  .fcr-wrong-co-go:hover{background:var(--fce-wedg)}
  .fcr-named-section{margin-bottom:16px;background:rgba(210,153,34,.06);border:1px solid rgba(210,153,34,.25);border-radius:18px;padding:16px 20px}
  .fcr-named-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
  .fcr-named-badge{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#C47C16;background:rgba(210,153,34,.14);border:1px solid rgba(210,153,34,.3);border-radius:6px;padding:2px 7px}
  .fcr-named-title{font-family:var(--rr-font-display);font-size:15px;font-weight:600;color:var(--fce-ink)}
  .fcr-named-sub{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--fce-ink-2)}
  .fcr-named-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(210,153,34,.18)}
  .fcr-named-row:first-of-type{border-top:none}
  .fcr-named-name{font-size:13.5px;font-weight:600;color:var(--fce-ink)}
  .fcr-named-ctx{font-size:12px;color:var(--fce-ink-2);margin-top:2px}
  .fcr-named-li{flex:none;font:600 12.5px var(--rr-font-body);color:#C47C16;text-decoration:none;white-space:nowrap}
  .fcr-named-li:hover{text-decoration:underline}
  .fcr-why-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
  .fcr-why-list li{position:relative;padding-left:22px;font-size:13px;line-height:1.5;color:var(--fce-ink-2)}
  .fcr-why-list li::before{content:"";position:absolute;left:3px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--fce-wedg);opacity:.8}
  .fcr-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);gap:24px;align-items:start}
  .fcr-list{display:flex;flex-direction:column;gap:12px}
  .fcr-list-hd{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fce-ink-3);margin-bottom:2px}
  .fcr-row{display:flex;align-items:flex-start;gap:14px;background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:16px;padding:18px 18px;cursor:pointer;box-shadow:0 1px 2px rgba(27,42,59,.04);transition:transform .18s cubic-bezier(.2,.8,.25,1),box-shadow .18s,border-color .18s,background .18s;animation:fcrRise .45s cubic-bezier(.2,.8,.25,1) both}
  #fcrRows .fcr-row:nth-child(2){animation-delay:.05s}
  #fcrRows .fcr-row:nth-child(3){animation-delay:.1s}
  #fcrRows .fcr-row:nth-child(4){animation-delay:.15s}
  #fcrRows .fcr-row:nth-child(5){animation-delay:.2s}
  #fcrRows .fcr-row:nth-child(n+6){animation-delay:.24s}
  .fcr-row:hover{transform:translateY(-2px);border-color:var(--fce-wedg-t);box-shadow:0 14px 30px -20px rgba(27,42,59,.55)}
  .fcr-row.active{border-color:var(--fce-wedg);background:linear-gradient(0deg,var(--fce-wedg-t),var(--fce-wedg-t)),var(--fce-surface);box-shadow:0 0 0 1px var(--fce-wedg),0 16px 32px -22px rgba(36,72,255,.7)}
  .fcr-row:focus-visible{outline:2px solid var(--fce-wedg);outline-offset:2px}
  .fcr-av{width:46px;height:46px;flex:none;border-radius:50%;background:var(--fce-wedg-t);color:var(--fce-wedg-d);display:grid;place-items:center;font-weight:800;font-size:16px;font-family:var(--rr-font-display);box-shadow:0 0 0 4px var(--fce-surface),0 0 0 5px var(--fce-line-2)}
  .fcr-row.active .fcr-av{box-shadow:0 0 0 4px var(--fce-surface),0 0 0 5px var(--fce-wedg)}
  .fcr-row-id{min-width:0;flex:1}
  .fcr-row-name{font-size:15px;font-weight:700;color:var(--fce-ink);line-height:1.3}
  .fcr-row-title{font-size:12.5px;color:var(--fce-ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fcr-row-loc{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--fce-ink-3);margin-top:5px}
  .fcr-row-loc i{font-size:12px}
  .fcr-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px}
  .fcr-top{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--fce-wedg);color:#fff;white-space:nowrap}
  .fcr-loc-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--fce-wedg-t);color:var(--fce-wedg-d);white-space:nowrap}
  .fcr-loc-tag i{font-size:11px}
  .fcr-tier{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:999px;white-space:nowrap;flex:none}
  .fcr-conf-verified{background:var(--fce-green-t);color:var(--fce-green)}
  .fcr-conf-likely{background:var(--fce-amber-t);color:var(--fce-amber)}
  .fcr-tier-top{background:var(--fce-wedg-t);color:var(--fce-wedg-d)}
  .fcr-tier-strong{background:var(--fce-amber-t);color:var(--fce-amber)}
  .fcr-tier-good{background:var(--fce-green-t);color:var(--fce-green)}
  .fcr-broadened-notice{display:flex;align-items:flex-start;gap:8px;background:var(--fce-amber-t);color:var(--fce-amber);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:13px;font-weight:600;line-height:1.5}
  .fcr-broadened-notice i{flex:none;font-size:15px;margin-top:1px}
  .fcr-detail{position:sticky;top:16px;background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:var(--rr-radius);padding:30px;min-height:340px;max-height:calc(100vh - 28px);overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(27,42,59,.05),0 30px 64px -38px rgba(27,42,59,.46);animation:fcrRise .5s cubic-bezier(.2,.8,.25,1) both}
  .fcr-d-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:4px}
  .fcr-d-av{width:62px;height:62px;flex:none;border-radius:50%;background:var(--fce-wedg-t);color:var(--fce-wedg-d);display:grid;place-items:center;font-weight:800;font-size:22px;font-family:var(--rr-font-display);box-shadow:0 0 0 4px var(--fce-surface),0 0 0 5px var(--fce-wedg-t)}
  .fcr-d-id{flex:1;min-width:0}
  .fcr-d-name{font-family:var(--rr-font-display);font-size:22px;font-weight:600;color:var(--fce-ink);line-height:1.15}
  .fcr-d-title{font-size:14px;color:var(--fce-ink-2);margin-top:4px}
  .fcr-d-co{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--fce-ink-3);margin-top:6px}
  .fcr-d-co i{font-size:13px}
  .fcr-d-conf{margin-top:4px}
  .fcr-d-sec{margin-top:20px;padding-top:18px;border-top:1px solid var(--fce-line-2)}
  .fcr-d-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fce-ink-3);margin-bottom:8px}
  .fcr-d-text{font-size:13.5px;line-height:1.55;color:var(--fce-ink-2);margin:0}
  .fcr-d-why{font-size:14.5px;line-height:1.55;color:var(--fce-ink);margin:0;font-weight:500}
  .fcr-reach{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  .fcr-conf-note{font-size:12px;color:var(--fce-ink-3);margin-top:9px;line-height:1.45}
  .fcr-name-lock{color:var(--fce-ink-3);font-weight:600;letter-spacing:1.5px}
  .fcr-d-namehint{font-size:12px;color:var(--fce-ink-3);margin-top:5px}
  .fcr-reach-li{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--fce-wedg-d);text-decoration:none}
  .fcr-reach-li:hover{text-decoration:underline}
  .fcr-reach-none{font-size:13px;color:var(--fce-ink-3)}
  .fcr-reach-tail{margin-top:0}
  .fcr-reveal-btn{display:inline-flex;align-items:center;gap:8px;background:var(--fce-wedg);color:#fff;border:none;border-radius:11px;padding:12px 20px;font:700 14px var(--rr-font-body);cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;box-shadow:0 12px 24px -14px rgba(36,72,255,.85)}
  .fcr-reveal-btn:hover{background:var(--fce-wedg-d);transform:translateY(-1px);box-shadow:0 14px 28px -14px rgba(36,72,255,.9)}
  .fcr-reach-loading{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fce-ink-2)}
  .fcr-spin-sm{display:inline-block;width:15px;height:15px;border:2px solid var(--fce-line);border-top-color:var(--fce-wedg);border-radius:50%;animation:fcrSpin .8s linear infinite}
  .fcr-email-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .fcr-email-val{font-size:14px;font-weight:700;color:var(--fce-ink);word-break:break-all}
  .fcr-copy{background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:9px;padding:6px 13px;font:700 12px var(--rr-font-body);color:var(--fce-wedg-d);cursor:pointer;transition:border-color .15s}
  .fcr-copy:hover{border-color:var(--fce-wedg)}
  .fcr-d-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
  .fcr-act-main{background:var(--fce-wedg);color:#fff;border:none;border-radius:11px;padding:12px 20px;font:700 14px var(--rr-font-body);cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;box-shadow:0 12px 26px -16px rgba(36,72,255,.85)}
  .fcr-act-main:hover{background:var(--fce-wedg-d);transform:translateY(-1px)}
  .fcr-act-sec{display:inline-flex;align-items:center;background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:11px;padding:12px 20px;font:700 14px var(--rr-font-body);color:var(--fce-ink);text-decoration:none;cursor:pointer;transition:border-color .18s}
  .fcr-act-sec:hover{border-color:var(--fce-wedg)}
  .fcr-state{max-width:440px;margin:8vh auto;text-align:center;padding:0 24px;animation:fcrRise .5s cubic-bezier(.2,.8,.25,1) both}
  .fcr-state-ico{width:64px;height:64px;border-radius:20px;background:var(--fce-wedg-t);color:var(--fce-wedg-d);display:grid;place-items:center;margin:0 auto 18px;font-size:28px}
  .fcr-state h3{font-family:var(--rr-font-display);font-size:21px;font-weight:600;color:var(--fce-ink);margin:0 0 8px}
  .fcr-state p{font-size:14px;line-height:1.6;color:var(--fce-ink-2);margin:0 0 20px}
  .fcr-spin{display:inline-block;width:28px;height:28px;border:3px solid var(--fce-line);border-top-color:var(--fce-wedg);border-radius:50%;animation:fcrSpin .8s linear infinite;margin-bottom:16px}
  @keyframes fcrSpin{to{transform:rotate(360deg)}}
  @keyframes fcrRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media(max-width:720px){.fcr-wrap{padding:22px 16px 48px}.fcr-cols{grid-template-columns:1fr}.fcr-detail{position:static;min-height:0}.fcr-topbar-spacer{display:none}.fcr-why-body{padding-left:20px}}

  /* Find Contacts draft composer, elevated. Reuses the --fce-* tokens. */
  .fcc-overlay{position:fixed;inset:0;z-index:1000;background:rgba(20,24,32,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);align-items:center;justify-content:center;padding:24px;animation:fcrFade .2s ease both}
  .fcc-modal{background:var(--fce-bg);color:var(--fce-ink);border-radius:16px;width:100%;max-width:880px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 100px -28px rgba(20,24,32,.62),0 2px 6px rgba(20,24,32,.18);font-family:var(--rr-font-body);animation:fccIn .32s cubic-bezier(.2,.8,.25,1) both}
  .fcc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid var(--fce-line-2)}
  .fcc-recip{font-size:14px;color:var(--fce-ink-2)}
  .fcc-recip::before{content:"Draft intro";display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fce-wedg-d);margin-bottom:5px}
  .fcc-recip b{font-family:var(--rr-font-display);font-weight:600;font-size:17px;color:var(--fce-ink)}
  .fcc-close{background:var(--fce-surface);border:1px solid var(--fce-line);width:32px;height:32px;border-radius:9px;font-size:20px;line-height:1;color:var(--fce-ink-3);cursor:pointer;display:grid;place-items:center;flex:none;transition:border-color .15s,color .15s}
  .fcc-close:hover{border-color:var(--fce-wedg);color:var(--fce-ink)}
  .fcc-body{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:0;overflow:hidden}
  .fcc-rail{padding:22px 22px;border-right:1px solid var(--fce-line-2);overflow-y:auto;background:var(--fce-surface-2)}
  .fcc-ctl{margin-bottom:22px}
  .fcc-ctl:last-child{margin-bottom:0}
  .fcc-ctl-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fce-ink-3);margin-bottom:9px}
  .fcc-seg{display:inline-flex;flex-wrap:wrap;gap:6px}
  .fcc-seg-btn{border:1px solid var(--fce-line);background:var(--fce-surface);border-radius:999px;padding:7px 13px;font:600 12.5px var(--rr-font-body);color:var(--fce-ink-2);cursor:pointer;transition:transform .15s,border-color .15s,background .15s,color .15s,box-shadow .15s}
  .fcc-seg-btn:hover{border-color:var(--fce-wedg-t);color:var(--fce-ink)}
  .fcc-seg-btn.active{background:var(--fce-wedg-t);border-color:var(--fce-wedg);color:var(--fce-wedg-d);box-shadow:0 6px 14px -10px rgba(36,72,255,.7)}
  .fcc-facts{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
  .fcc-fact{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--fce-ink-2);cursor:pointer;line-height:1.45;background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:10px;padding:9px 11px;transition:border-color .15s}
  .fcc-fact:hover{border-color:var(--fce-wedg-t)}
  .fcc-fact input{margin-top:1px;flex:none;accent-color:var(--fce-wedg)}
  .fcc-note{font-size:11px;color:var(--fce-ink-3);line-height:1.45}
  .fcc-msg{display:flex;flex-direction:column;padding:22px 24px;min-height:0;overflow-y:auto}
  .fcc-subject{border:1px solid var(--fce-line);border-radius:12px;padding:12px 14px;font:600 14.5px var(--rr-font-body);color:var(--fce-ink);margin-bottom:12px;outline:none;background:var(--fce-surface);transition:border-color .15s}
  .fcc-subject:focus{border-color:var(--fce-wedg)}
  .fcc-bodywrap{position:relative;flex:1;min-height:240px}
  .fcc-bodyhl,.fcc-bodyta{position:absolute;inset:0;width:100%;height:100%;margin:0;box-sizing:border-box;border:1px solid var(--fce-line);border-radius:14px;padding:16px 17px;font:400 14.5px/1.7 var(--rr-font-body);letter-spacing:0;white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word}
  .fcc-bodyhl{color:transparent;pointer-events:none;overflow:hidden;background:var(--fce-surface);border-color:transparent}
  .fcc-bodyta{color:var(--fce-ink);background:transparent;resize:none;outline:none;overflow-y:auto;transition:border-color .15s}
  .fcc-bodyta:focus{border-color:var(--fce-wedg)}
  .fcc-gr{color:transparent;background:var(--fce-green-t);border-radius:3px;box-shadow:inset 0 -2px 0 rgba(60,106,67,.38)}
  .fcc-voice{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fce-green);font-weight:600;margin-top:12px}
  .fcc-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
  .fcc-acts .fcr-act-main{margin-left:auto}
  .fcc-btn{background:var(--fce-surface);border:1px solid var(--fce-line);border-radius:11px;padding:11px 16px;font:700 13px var(--rr-font-body);color:var(--fce-ink-2);cursor:pointer;transition:border-color .15s,color .15s}
  .fcc-btn:hover{border-color:var(--fce-wedg);color:var(--fce-ink)}
  .fcc-loading,.fcc-err{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--fce-ink-2);min-height:240px}
  @keyframes fcrFade{from{opacity:0}to{opacity:1}}
  @keyframes fccIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
  @media(max-width:680px){.fcc-body{grid-template-columns:1fr}.fcc-rail{border-right:none;border-bottom:1px solid var(--fce-line-2)}.fcc-acts .fcr-act-main{margin-left:0}}

  /* Header */
  .fc-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 28px 0;flex-shrink:0;flex-wrap:wrap}
  .fc-title{font-size:20px;font-weight:700;font-family:'Instrument Serif',Georgia,serif;color:var(--jj-txt,#e6edf3);margin:0 0 4px}
  .fc-title {color:#1A1614}
  .fc-subtitle{font-size:13px;color:var(--jj-txt2,#8b949e);margin:0}
  .fc-subtitle {color:#6B6259}
  .fc-header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
  .fc-sample-btn{background:none;border:1px solid var(--jj-bdr,rgba(255,255,255,.08));color:var(--jj-txt2,#8b949e);font-size:12px;padding:6px 14px;border-radius:7px;cursor:pointer;font-family:inherit;transition:all .12s}
  .fc-sample-btn {border-color:rgba(0,0,0,.1);color:#6B6259}
  .fc-sample-btn:hover{color:var(--jj-txt,#e6edf3);border-color:var(--jj-bdr2,rgba(255,255,255,.15))}
  .fc-usage{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--jj-txt3,#484f58)}
  .fc-usage-dot{width:6px;height:6px;border-radius:50%;background:#3fb950;animation:fcPulse 2s infinite}
  @keyframes fcPulse{0%,100%{opacity:1}50%{opacity:.4}}

  /* 5-step flow strip */
  .fc-flow-strip{display:flex;align-items:center;gap:6px;padding:14px 28px 4px;flex-shrink:0;flex-wrap:wrap}
  .fc-flow-step{display:flex;align-items:center;gap:6px;opacity:0.4;transition:opacity .2s}
  .fc-flow-step.fc-flow-active{opacity:1}
  .fc-flow-step.fc-flow-done{opacity:0.7}
  .fc-flow-num{width:22px;height:22px;border-radius:50%;background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.1));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--jj-txt2,#8b949e)}
  .fc-flow-num {background:#fff;border-color:rgba(0,0,0,.1);color:#6B6259}
  .fc-flow-step.fc-flow-active .fc-flow-num{background:#2563EB;border-color:#2563EB;color:#fff}
  .fc-flow-step.fc-flow-done .fc-flow-num{background:rgba(37,99,235,0.12);border-color:rgba(37,99,235,0.3);color:#388bfd}
  .fc-flow-label{font-size:12px;font-weight:600;color:var(--jj-txt2,#8b949e)}
  .fc-flow-label {color:#6B6259}
  .fc-flow-step.fc-flow-active .fc-flow-label{color:#2563EB}
  .fc-flow-arrow{font-size:12px;color:var(--jj-txt3,#484f58);opacity:.5}

  /* Search panel */
  .fc-search-panel{margin:16px 28px 0;padding:18px 20px;background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.07));border-radius:12px;flex-shrink:0}
  .fc-search-panel {background:#fff;border-color:rgba(0,0,0,.09)}
  .fc-mode-tabs{display:flex;gap:6px;margin-bottom:14px}
  .fc-mode-tab{padding:6px 14px;font-size:12px;font-weight:600;border-radius:7px;border:1px solid var(--jj-bdr,rgba(255,255,255,.07));background:none;color:var(--jj-txt2,#8b949e);cursor:pointer;font-family:inherit;transition:all .12s}
  .fc-mode-tab {border-color:rgba(0,0,0,.09);color:#6B6259}
  .fc-mode-tab.active{background:#2563EB;border-color:#2563EB;color:#fff}
  .fc-mode-tab:not(.active):hover{border-color:var(--jj-bdr2,rgba(255,255,255,.15));color:var(--jj-txt,#e6edf3)}
  .fc-mode-tab:not(.active):hover {color:#1A1614;border-color:rgba(0,0,0,.2)}

  .fc-search-fields{display:grid;grid-template-columns:2fr 1.5fr 1fr 1fr;gap:10px;margin-bottom:12px}
  .fc-field-wide{grid-column:span 1}
  .fc-field{display:flex;flex-direction:column;gap:5px}
  .fc-field label{font-size:10px;font-weight:700;color:var(--jj-txt2,#8b949e);text-transform:uppercase;letter-spacing:.07em}
  .fc-field label {color:#9A9490}
  .fc-input{background:var(--jj-bg,#0d1117);border:1px solid var(--jj-bdr,rgba(255,255,255,.07));border-radius:8px;color:var(--jj-txt,#e6edf3);font-size:13px;padding:9px 12px;font-family:inherit;transition:border-color .12s;width:100%;box-sizing:border-box}
  .fc-input {background:#F8F6F2;color:#1A1614;border-color:rgba(0,0,0,.1)}
  .fc-input:focus{outline:none;border-color:#2563EB}
  .fc-input::placeholder{color:var(--jj-txt3,#484f58)}
  .fc-select{cursor:pointer;appearance:none;-webkit-appearance:none}

  .fc-samples{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .fc-samples-label{font-size:11px;color:var(--jj-txt3,#484f58);flex-shrink:0}
  .fc-sample-chip{font-size:11px;padding:4px 11px;border-radius:99px;background:var(--jj-surf2,rgba(255,255,255,.04));border:1px solid var(--jj-bdr,rgba(255,255,255,.07));color:var(--jj-txt2,#8b949e);cursor:pointer;font-family:inherit;transition:all .12s}
  .fc-sample-chip {background:#f0ede8;border-color:rgba(0,0,0,.09);color:#6B6259}
  .fc-sample-chip:hover{border-color:#2563EB;color:#388bfd;background:rgba(37,99,235,.08)}

  .fc-advanced-toggle{font-size:12px;color:#388bfd;cursor:pointer;margin-bottom:10px;display:inline-flex;align-items:center;gap:5px;user-select:none}
  .fc-adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}

  .fc-search-actions{display:flex;gap:8px}
  .fc-search-btn{flex:1;padding:11px 20px;background:#2448FF;border:none;color:#fff;font-size:14px;font-weight:700;border-radius:9px;cursor:pointer;font-family:inherit;transition:background .12s;display:flex;align-items:center;justify-content:center;gap:8px}
  .fc-search-btn:hover{background:#1f3dd9}
  .fc-search-btn:disabled{background:#484f58;cursor:not-allowed}
  .fc-clear-btn{padding:11px 18px;background:none;border:1px solid var(--jj-bdr,rgba(255,255,255,.07));color:var(--jj-txt2,#8b949e);font-size:13px;border-radius:9px;cursor:pointer;font-family:inherit}
  .fc-clear-btn {border-color:rgba(0,0,0,.1);color:#6B6259}

  /* Results workspace */
  .fc-workspace{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:14px}
  .fc-results-hd{display:flex;align-items:center;justify-content:space-between;padding:0 28px 10px;gap:12px;flex-shrink:0;flex-wrap:wrap}
  .fc-results-count{font-size:14px;font-weight:700;color:var(--jj-txt,#e6edf3)}
  .fc-results-count {color:#1A1614}
  .fc-search-chips{display:flex;gap:6px;flex-wrap:wrap}
  .fc-chip{font-size:11px;padding:3px 10px;border-radius:99px;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25);color:#388bfd;display:flex;align-items:center;gap:5px}
  .fc-chip-x{cursor:pointer;opacity:.7}
  .fc-chip-x:hover{opacity:1}
  .fc-results-right{display:flex;align-items:center;gap:8px}
  .fc-sort-sel{background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.07));border-radius:7px;color:var(--jj-txt2,#8b949e);font-size:12px;padding:6px 10px;font-family:inherit;cursor:pointer}
  .fc-sort-sel {background:#fff;border-color:rgba(0,0,0,.1);color:#6B6259}
  .fc-save-search-btn{font-size:12px;padding:6px 12px;background:none;border:1px solid var(--jj-bdr,rgba(255,255,255,.07));color:var(--jj-txt2,#8b949e);border-radius:7px;cursor:pointer;font-family:inherit}
  .fc-save-search-btn {border-color:rgba(0,0,0,.1);color:#6B6259}

  /* Three panels */
  .fc-panels{display:flex;flex:1;min-height:500px;padding:0 28px 20px;gap:12px}
  .fc-filter-rail{width:180px;flex-shrink:0;background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.07));border-radius:10px;padding:14px;scrollbar-width:thin}
  .fc-filter-rail {background:#fff;border-color:rgba(0,0,0,.08)}
  .fc-rail-section{margin-bottom:18px}
  .fc-rail-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--jj-txt3,#484f58);margin-bottom:10px}
  .fc-rail-filter-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--jj-txt2,#8b949e);transition:background .1s}
  .fc-rail-filter-item {color:#6B6259}
  .fc-rail-filter-item:hover{background:var(--jj-surf2,rgba(255,255,255,.04))}
  .fc-rail-filter-item:hover {background:#f0ede8}
  .fc-rail-filter-ct{font-size:10px;font-family:'DM Mono',monospace;background:var(--jj-surf2,rgba(255,255,255,.06));padding:1px 6px;border-radius:99px;color:var(--jj-txt3,#484f58)}
  .fc-no-saved{font-size:11px;color:var(--jj-txt3,#484f58)}

  .fc-results-main{flex:1;min-width:0}

  /* Loading skeletons */
  .fc-loading{padding:10px 0}
  .fc-loading-status{font-size:13px;color:var(--jj-txt2,#8b949e);margin-bottom:16px}
  .fc-skeleton{height:72px;background:var(--jj-surface,#1c2128);border-radius:9px;margin-bottom:8px;animation:fcSkel 1.4s ease-in-out infinite}
  .fc-skeleton {background:#e8e5e0}
  @keyframes fcSkel{0%,100%{opacity:.6}50%{opacity:1}}

  /* Result rows */
  .fc-result-row{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.07));border-radius:10px;margin-bottom:7px;cursor:pointer;transition:all .12s;position:relative}
  .fc-result-row {background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 1px 3px rgba(0,0,0,.06)}
  .fc-result-row:hover{border-color:var(--jj-bdr2,rgba(255,255,255,.15));transform:translateY(-1px)}
  .fc-result-row:hover {border-color:rgba(0,0,0,.15)}
  .fc-result-row.fc-selected{border-color:#2563EB!important;background:rgba(37,99,235,.06)!important}
  .fc-row-check{width:16px;height:16px;margin-top:2px;accent-color:#2563EB;cursor:pointer;flex-shrink:0}
  .fc-row-avatar{width:36px;height:36px;border-radius:50%;background:var(--jj-surf2,#21262d);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--jj-txt2,#8b949e);flex-shrink:0}
  .fc-row-avatar {background:#e8e5e0}
  .fc-row-main{flex:1;min-width:0}
  .fc-row-name{font-size:14px;font-weight:700;color:var(--jj-txt,#e6edf3);margin-bottom:1px}
  .fc-row-name {color:#1A1614}
  /* T2 mobile tuning: at narrow widths, the .fc-result-row's horizontal
     layout (avatar + main + actions) overflows. Stack avatar above content
     so the main column gets full row width. The corrected selectors used
     here are .fc-result-row (parent) and .fc-row-main (child); the
     Phase 1 plan referenced .fc-result-meta which does not exist. */
  @media (max-width: 480px) {
    .fc-result-row{flex-direction:column;align-items:flex-start;gap:6px}
    .fc-row-main{width:100%}
  }
  .fc-row-title{font-size:12px;color:var(--jj-txt2,#8b949e);margin-bottom:5px}
  .fc-row-title {color:#6B6259}
  .fc-row-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .fc-row-company{font-size:11px;color:var(--jj-txt2,#8b949e)}
  .fc-row-company {color:#6B6259}
  .fc-row-sep{font-size:11px;color:var(--jj-txt3,#484f58)}
  .fc-row-location{font-size:11px;color:var(--jj-txt3,#484f58)}
  .fc-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
  .fc-match-score{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--jj-txt,#e6edf3)}
  .fc-match-score {color:#1A1614}
  .fc-score-bar{width:40px;height:4px;background:var(--jj-bdr2,rgba(255,255,255,.12));border-radius:99px;overflow:hidden}
  .fc-score-bar {background:rgba(0,0,0,.1)}
  .fc-score-fill{height:100%;border-radius:99px;background:#3fb950}
  .fc-why-pill{font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;background:rgba(37,99,235,.12);color:#388bfd;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;cursor:help}
  .fc-availability{display:flex;gap:4px}
  .fc-avail-tag{font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px}
  .fc-avail-email{background:rgba(63,185,80,.12);color:#3fb950}
  .fc-avail-li{background:rgba(56,139,253,.12);color:#388bfd}
  .fc-avail-none{background:rgba(139,148,158,.1);color:#8b949e}

  .fc-row-actions{display:none;align-items:center;gap:6px;margin-top:8px}
  .fc-result-row:hover .fc-row-actions{display:flex}
  .fc-row-act{font-size:11px;font-weight:600;padding:4px 10px;border-radius:5px;border:none;cursor:pointer;font-family:inherit;transition:all .12s}
  .fc-row-act-primary{background:#2448FF;color:#fff}
  .fc-row-act-primary:hover{background:#1f3dd9}
  .fc-row-act-secondary{background:var(--jj-surf2,rgba(255,255,255,.06));color:var(--jj-txt2,#8b949e);border:1px solid var(--jj-bdr,rgba(255,255,255,.07))}
  .fc-row-act-secondary {background:#f0f0f0;color:#6B6259;border-color:rgba(0,0,0,.08)}
  .fc-row-act-secondary:hover{color:var(--jj-txt,#e6edf3)}
  .fc-row-act-secondary:hover {color:#1A1614}

  /* Detail drawer */
  .fc-detail-drawer{width:280px;flex-shrink:0;background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.07));border-radius:10px;align-self:flex-start;position:sticky;top:12px;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:thin}
  .fc-detail-drawer {background:#fff;border-color:rgba(0,0,0,.08)}
  .fc-detail-inner{padding:16px}
  .fc-detail-placeholder{text-align:center;padding:40px 20px;color:var(--jj-txt3,#484f58);font-size:13px}
  .fc-detail-section{margin-bottom:16px}
  .fc-detail-section-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--jj-txt3,#484f58);margin-bottom:8px}
  .fc-detail-avatar{width:44px;height:44px;border-radius:50%;background:var(--jj-surf2,#21262d);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--jj-txt2,#8b949e);margin-bottom:10px}
  .fc-detail-avatar {background:#e8e5e0}
  .fc-detail-name{font-size:16px;font-weight:700;color:var(--jj-txt,#e6edf3);margin-bottom:2px}
  .fc-detail-name {color:#1A1614}
  .fc-detail-role{font-size:12px;color:var(--jj-txt2,#8b949e);margin-bottom:2px}
  .fc-detail-role {color:#6B6259}
  .fc-detail-company{font-size:12px;color:var(--jj-txt2,#8b949e);margin-bottom:6px}
  .fc-detail-location{font-size:11px;color:var(--jj-txt3,#484f58)}
  .fc-why-card{background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.18);border-radius:8px;padding:11px 12px;font-size:12px;color:var(--jj-txt,#e6edf3);line-height:1.55}
  .fc-why-card {background:rgba(37,99,235,.04);color:#1A1614}
  .fc-guidance-row{margin-bottom:9px}
  .fc-guidance-label{font-size:10px;font-weight:700;color:var(--jj-txt3,#484f58);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
  .fc-guidance-val{font-size:12px;color:var(--jj-txt2,#8b949e);line-height:1.5}
  .fc-guidance-val {color:#6B6259}
  .fc-channel-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--jj-bdr,rgba(255,255,255,.05))}
  .fc-channel-row:last-child{border-bottom:none}
  .fc-channel-left{display:flex;align-items:center;gap:7px}
  .fc-channel-icon{font-size:13px}
  .fc-channel-val{font-size:12px;color:var(--jj-txt,#e6edf3)}
  .fc-channel-val {color:#1A1614}
  .fc-channel-conf{font-size:10px;color:var(--jj-txt3,#484f58)}
  .fc-channel-copy{font-size:10px;background:var(--jj-surf2,rgba(255,255,255,.06));border:none;border-radius:4px;color:var(--jj-txt2,#8b949e);padding:3px 7px;cursor:pointer;font-family:inherit}
  .fc-channel-copy:hover{color:var(--jj-txt,#e6edf3)}
  .fc-detail-actions{display:flex;flex-direction:column;gap:7px;margin-top:4px}
  .fc-detail-act-pri{width:100%;padding:10px;background:#2448FF;border:none;color:#fff;font-size:13px;font-weight:700;border-radius:8px;cursor:pointer;font-family:inherit;transition:background .12s}
  .fc-detail-act-pri:hover{background:#1f3dd9}
  .fc-detail-act-sec{width:100%;padding:9px;background:none;border:1px solid var(--jj-bdr,rgba(255,255,255,.08));color:var(--jj-txt2,#8b949e);font-size:12px;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .12s}
  .fc-detail-act-sec {border-color:rgba(0,0,0,.1);color:#6B6259}
  .fc-detail-act-sec:hover{color:var(--jj-txt,#e6edf3);border-color:var(--jj-bdr2,rgba(255,255,255,.14))}

  /* Batch bar */
  .fc-batch-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:11px 28px;background:var(--jj-surface,#1c2128);border-top:1px solid var(--jj-bdr,rgba(255,255,255,.08));animation:fcSlideUp .18s ease;flex-wrap:wrap}
  @keyframes fcSlideUp{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
  .fc-batch-bar {background:#fff;border-top-color:rgba(0,0,0,.08)}
  .fc-batch-count{font-size:13px;font-weight:700;color:var(--jj-txt,#e6edf3);flex-shrink:0}
  .fc-batch-count {color:#1A1614}
  .fc-batch-btn{padding:7px 14px;font-size:12px;font-weight:600;border-radius:7px;border:1px solid var(--jj-bdr,rgba(255,255,255,.08));background:none;color:var(--jj-txt2,#8b949e);cursor:pointer;font-family:inherit;transition:all .12s}
  .fc-batch-btn {border-color:rgba(0,0,0,.1);color:#6B6259}
  .fc-batch-btn:hover{color:var(--jj-txt,#e6edf3);border-color:var(--jj-bdr2,rgba(255,255,255,.15))}
  .fc-batch-clear{background:none;border:none;color:var(--jj-txt3,#484f58);font-size:12px;cursor:pointer;font-family:inherit;margin-left:auto}

  /* Empty state */
  .fc-empty{text-align:center;padding:48px 20px}
  .fc-empty-ico{font-size:36px;margin-bottom:12px;opacity:.5}
  .fc-empty-title{font-size:16px;font-weight:700;color:var(--jj-txt,#e6edf3);margin-bottom:8px}
  .fc-empty-title {color:#1A1614}
  .fc-empty-tips{font-size:13px;color:var(--jj-txt2,#8b949e);margin-bottom:16px;line-height:1.6}
  .fc-empty-tips {color:#6B6259}
  .fc-empty-broaden{background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25);color:#388bfd;font-size:13px;padding:8px 18px;border-radius:8px;cursor:pointer;font-family:inherit}

  /* Welcome state */
  .fc-welcome{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;overflow-y:auto}
  .fc-welcome-inner{text-align:center;max-width:520px}
  .fc-welcome-ico{font-size:48px;margin-bottom:16px}
  .fc-welcome-title{font-size:22px;font-weight:700;font-family:'Instrument Serif',Georgia,serif;color:var(--jj-txt,#e6edf3);margin-bottom:10px}
  .fc-welcome-title {color:#1A1614}
  .fc-welcome-sub{font-size:14px;color:var(--jj-txt2,#8b949e);margin-bottom:24px;line-height:1.6}
  .fc-welcome-sub {color:#6B6259}
  .fc-welcome-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
  .fc-welcome-chip{font-size:12px;padding:8px 16px;border-radius:99px;background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.08));color:var(--jj-txt2,#8b949e);cursor:pointer;font-family:inherit;transition:all .12s}
  .fc-welcome-chip {background:#fff;border-color:rgba(0,0,0,.09);color:#6B6259}
  .fc-welcome-chip:hover{border-color:#2563EB;color:#388bfd;background:rgba(37,99,235,.07)}
  .fc-welcome-tip{font-size:12px;color:var(--jj-txt3,#484f58)}

  /* ══ FIND CONTACTS: INTAKE + WELCOME ══ */
  .fc-intake{display:flex;flex-direction:column;gap:10px;padding:14px 18px;background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.2);border-radius:10px;margin-bottom:6px}
  .fc-intake {background:rgba(37,99,235,.04);border-color:rgba(37,99,235,.15)}
  .fc-intake-hd{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--jj-txt,#e6edf3)}
  .fc-intake-hd {color:#1A1614}
  .fc-intake-hd-txt{font-size:13px;font-weight:700}
  .fc-intake-hint{font-size:11px;font-weight:400;color:var(--jj-txt3,#484f58);margin-left:auto}
  .fc-intake-hint {color:#9A9490}
  .fc-intake-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  @media(max-width:580px){.fc-intake-fields{grid-template-columns:1fr}}
  .fc-intake-input{font-size:13px!important}
  .fc-intake-rec{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(63,185,80,.08);border:1px solid rgba(63,185,80,.22);border-radius:8px;animation:fcIntakeIn .18s ease}
  @keyframes fcIntakeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
  .fc-intake-rec-icon{font-size:18px;flex-shrink:0}
  .fc-intake-rec-body{flex:1;min-width:0}
  .fc-intake-rec-title{font-size:13px;font-weight:700;color:var(--jj-txt,#e6edf3);margin-bottom:2px}
  .fc-intake-rec-title {color:#1A1614}
  .fc-intake-rec-sub{font-size:11px;color:var(--jj-txt2,#8b949e);line-height:1.4}
  .fc-intake-rec-sub {color:#6B6259}
  .fc-intake-go{padding:8px 16px;background:#2448FF;border:none;color:#fff;font-size:13px;font-weight:700;border-radius:7px;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;transition:background .12s}
  .fc-intake-go:hover{background:#1f3dd9}
  .fc-intake-sep{height:1px;background:var(--jj-bdr,rgba(255,255,255,.07));margin:4px 0 8px}
  .fc-intake-sep {background:rgba(0,0,0,.07)}

  .fc-wi-icon{font-size:40px;margin-bottom:14px}
  .fc-wi-title{font-size:20px;font-weight:700;margin-bottom:10px;font-family:'Instrument Serif',Georgia,serif;color:var(--jj-txt,#e6edf3)}
  .fc-wi-title {color:#1A1614}
  .fc-wi-sub{font-size:14px;color:var(--jj-txt2,#8b949e);line-height:1.6;margin-bottom:24px}
  .fc-wi-sub {color:#6B6259}
  .fc-wi-steps{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:24px;flex-wrap:wrap}
  .fc-wis{display:flex;align-items:flex-start;gap:8px;max-width:140px;text-align:left}
  .fc-wis-n{width:24px;height:24px;border-radius:50%;background:#2563EB;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .fc-wis-t{font-size:12px;color:var(--jj-txt2,#8b949e);line-height:1.4}
  .fc-wis-t {color:#6B6259}
  .fc-wis-t strong{color:var(--jj-txt,#e6edf3)}
  .fc-wis-t strong {color:#1A1614}
  .fc-wis-arr{font-size:16px;color:var(--jj-txt3,#484f58)}
  .fc-wi-tries{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
  .fc-try-btn{font-size:11px;padding:5px 13px;border-radius:99px;background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.07));color:var(--jj-txt2,#8b949e);cursor:pointer;font-family:inherit;transition:all .12s}
  .fc-try-btn {background:#f5f5f5;border-color:rgba(0,0,0,.08);color:#6B6259}
  .fc-try-btn:hover{border-color:#2563EB;color:#388bfd}

  /* Responsive */
  @media (max-width: 900px) {
    .fc-filter-rail{display:none}
    .fc-detail-drawer{width:100%;position:fixed;inset:auto 0 0 0;border-radius:16px 16px 0 0;max-height:85vh;z-index:200}
    .fc-search-fields{grid-template-columns:1fr 1fr}
    .fc-adv-grid{grid-template-columns:1fr 1fr}
    .fc-header{padding:16px 16px 0}
    .fc-search-panel{margin:12px 16px 0}
    .fc-workspace{margin-top:10px}
    .fc-panels{padding:0 16px 16px}
    .fc-results-hd{padding:0 16px 10px}
  }
  @media (max-width: 600px) {
    .fc-search-fields{grid-template-columns:1fr}
  }

  /* FIND CONTACTS: Final Design */
  #jjPage_find{padding:0;flex-direction:column;overflow-y:auto}
  #jjPage_find.active{display:flex}
  .fcn-page{max-width:900px;margin:0 auto;padding:28px 24px 60px;width:100%;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
  .fcn-hd{text-align:center}
  .fcn-h1{font-size:24px;font-weight:700;color:var(--jj-txt,#e6edf3);margin-bottom:6px;font-family:'Plus Jakarta Sans','Instrument Serif',sans-serif;line-height:1.2}
  .fcn-h1 {color:#111318}
  .fcn-h1s{font-size:14px;color:var(--jj-txt2,#8b949e)}
  .fcn-h1s {color:#5a5d6b}
  .fcn-h1s strong{font-weight:700;color:var(--jj-txt,#e6edf3)}
  .fcn-h1s strong {color:#111318}
  .fcn-search-wrap{display:flex;gap:0;background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.1));border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.12)}
  .fcn-search-wrap {background:#fff;border-color:#d1d5db;box-shadow:0 2px 8px rgba(0,0,0,.07)}
  .fcn-search-bar{display:flex;align-items:center;gap:10px;flex:1;padding:0 16px}
  .fcn-search-ico{font-size:16px;color:var(--jj-txt3,#484f58);flex-shrink:0}
  .fcn-search-ico {color:#9ca3af}
  .fcn-search-inp{flex:1;border:none;outline:none;background:none;font-size:14px;font-weight:500;color:var(--jj-txt,#e6edf3);font-family:inherit;padding:15px 0;min-width:0}
  .fcn-search-inp {color:#111318}
  .fcn-search-inp::placeholder{color:var(--jj-txt3,#484f58);font-weight:400}
  .fcn-search-inp::placeholder {color:#9ca3af}
  .fcn-get-btn{background:#1a56db;color:#fff;border:none;padding:0 24px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .12s;min-height:52px}
  .fcn-get-btn:hover{background:#1e40af}
  .fcn-get-btn:disabled{opacity:.65;cursor:not-allowed}
  .fcn-hints{display:flex;align-items:center;justify-content:center;gap:14px;font-size:12px;color:var(--jj-txt3,#484f58)}
  .fcn-hints {color:#9ca3af}
  .fcn-hint-dot{width:3px;height:3px;border-radius:50%;background:var(--jj-bdr,rgba(255,255,255,.15))}
  .fcn-blocked-notice{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.2);border-radius:10px;font-size:13px;color:var(--jj-txt,#e6edf3)}
  .fcn-blocked-notice {background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
  .fcn-blocked-ico{font-size:16px;flex-shrink:0;margin-top:1px}
  .fcn-blocked-close{background:none;border:none;cursor:pointer;color:var(--jj-txt3,#484f58);font-size:18px;margin-left:auto;padding:0;flex-shrink:0}
  .fcn-jd-paste{display:flex;flex-direction:column;gap:8px}
  .fcn-jd-label{font-size:13px;font-weight:600;color:var(--jj-txt,#e6edf3)}
  .fcn-jd-label {color:#111318}
  .fcn-jd-ta{border:1px solid var(--jj-bdr,rgba(255,255,255,.1));border-radius:10px;padding:12px 14px;font-family:inherit;font-size:13px;color:var(--jj-txt,#e6edf3);background:var(--jj-surface,#1c2128);resize:vertical;outline:none;transition:border .12s}
  .fcn-jd-ta {background:#fff;border-color:#d1d5db;color:#111318}
  .fcn-jd-ta:focus{border-color:#1a56db}
  .fcn-jd-ta::placeholder{color:var(--jj-txt3,#484f58)}
  .fcn-jd-ta::placeholder {color:#9ca3af}
  .fcn-jd-btn{align-self:flex-end;background:#1a56db;color:#fff;border:none;padding:10px 20px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .12s}
  .fcn-jd-btn:hover{background:#1e40af}
  .fcn-success-banner{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:rgba(26,160,96,.1);border:1px solid rgba(26,160,96,.25);border-radius:12px;animation:jjIn .3s ease}
  .fcn-success-banner {background:#f0fdf4;border-color:#bbf7d0}
  .fcn-success-l{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--jj-txt,#e6edf3);flex-wrap:wrap}
  .fcn-success-l {color:#111318}
  .fcn-success-ico{width:22px;height:22px;border-radius:50%;background:#16a34a;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .fcn-hcr-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;background:rgba(26,160,96,.15);border:1px solid rgba(26,160,96,.25);color:#16a34a}
  .fcn-gen-time{font-size:12px;color:var(--jj-txt3,#484f58);white-space:nowrap}
  .fcn-gen-time {color:#9ca3af}
  .fcn-output-cols{display:grid;grid-template-columns:min(360px,38%) minmax(0,1fr);gap:24px;align-items:start;animation:jjIn .3s ease;min-width:0}
  @media(max-width:680px){.fcn-output-cols{grid-template-columns:1fr}}
  .fcn-ccard{background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.08));border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 2px 10px rgba(0,0,0,.12);position:sticky;top:16px;min-width:0;overflow:hidden}
  .fcn-ccard {background:#fff;border-color:#e5e7eb;box-shadow:0 2px 10px rgba(0,0,0,.06)}
  .fcn-c-top{display:flex;gap:13px;align-items:center}
  .fcn-c-av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#1a56db,#7c3aed);color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}
  .fcn-c-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;position:absolute;inset:0}
  .fcn-c-meta{flex:1;min-width:0}
  .fcn-c-name{font-size:16px;font-weight:700;color:var(--jj-txt,#e6edf3);margin-bottom:2px}
  .fcn-c-name {color:#111318}
  .fcn-c-role{font-size:12px;color:var(--jj-txt2,#8b949e);margin-bottom:5px}
  .fcn-c-role {color:#6b7280}
  .fcn-c-co{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--jj-txt,#e6edf3)}
  .fcn-c-co {color:#111318}
  .fcn-c-co-dot{width:18px;height:18px;border-radius:4px;background:#1a56db;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .fcn-best-badge{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#16a34a;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.25);border-radius:9px;padding:8px 12px}
  .fcn-best-badge {background:#f0fdf4;border-color:#bbf7d0}
  .fcn-why-section{display:flex;flex-direction:column;gap:4px}
  .fcn-why-title{font-size:13px;font-weight:700;color:var(--jj-txt,#e6edf3);margin-bottom:6px}
  .fcn-why-title {color:#111318}
  .fcn-why-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
  .fcn-why-list li{font-size:12px;color:var(--jj-txt2,#8b949e);padding-left:16px;position:relative;line-height:1.4}
  .fcn-why-list li {color:#6b7280}
  .fcn-why-list li::before{content:'\2022';position:absolute;left:0;color:var(--jj-txt3,#484f58)}
  .fcn-locked-section{border:1px solid var(--jj-bdr,rgba(255,255,255,.08));border-radius:12px;overflow:hidden}
  .fcn-locked-section {border-color:#e5e7eb}
  .fcn-locked-rows{padding:12px 14px;display:flex;flex-direction:column;gap:8px;filter:blur(4px);user-select:none;pointer-events:none;background:var(--jj-bg,#0d1117)}
  .fcn-locked-rows {background:#f9fafb}
  .fcn-locked-row{display:flex;align-items:center;gap:8px}
  .fcn-locked-av{width:30px;height:30px;border-radius:50%;background:var(--jj-bdr,rgba(255,255,255,.1));flex-shrink:0}
  .fcn-locked-av {background:#e5e7eb}
  .fcn-locked-line{height:10px;border-radius:5px;background:var(--jj-bdr,rgba(255,255,255,.1))}
  .fcn-locked-line {background:#e5e7eb}
  .fcn-lock-ico{text-align:center;font-size:20px;opacity:.5;padding:4px 0 2px}
  .fcn-unlock-btn{width:100%;padding:14px 18px;background:#1a56db;border:none;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .12s;display:flex;align-items:center;justify-content:center;gap:8px}
  .fcn-unlock-btn:hover{background:#1e40af}
  .fcn-unlock-sub{text-align:center;font-size:11px;color:var(--jj-txt3,#484f58);padding:8px 12px;background:var(--jj-bg,#0d1117);border-top:1px solid var(--jj-bdr,rgba(255,255,255,.06))}
  .fcn-unlock-sub {background:#f9fafb;color:#9ca3af;border-top-color:#e5e7eb}
  .fcn-verified-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--jj-txt2,#8b949e)}
  .fcn-verified-row {color:#6b7280}
  .fcn-verified-row strong{color:var(--jj-txt,#e6edf3);font-weight:600}
  .fcn-verified-row strong {color:#111318}
  .fcn-verified-check{width:16px;height:16px;border-radius:3px;background:#1a56db;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .fcn-ecard{background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.08));border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.12);min-width:0}
  .fcn-ecard {background:#fff;border-color:#e5e7eb;box-shadow:0 2px 10px rgba(0,0,0,.06)}
  .fcn-email-top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--jj-bdr,rgba(255,255,255,.07))}
  .fcn-email-top {border-bottom-color:#e5e7eb}
  .fcn-email-hd{font-size:14px;font-weight:700;color:var(--jj-txt,#e6edf3)}
  .fcn-email-hd {color:#111318}
  .fcn-regen-btn{font-size:12px;font-weight:600;padding:5px 12px;border:1px solid var(--jj-bdr,rgba(255,255,255,.12));border-radius:7px;background:none;cursor:pointer;color:var(--jj-txt2,#8b949e);font-family:inherit;transition:all .12s}
  .fcn-regen-btn {border-color:#e5e7eb;color:#6b7280}
  .fcn-regen-btn:hover{border-color:#1a56db;color:#1a56db}
  .fcn-why-reply{padding:11px 18px;border-bottom:1px solid var(--jj-bdr,rgba(255,255,255,.07));display:flex;flex-direction:column;gap:7px}
  .fcn-why-reply {border-bottom-color:#e5e7eb}
  .fcn-wr-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--jj-txt3,#484f58)}
  .fcn-wr-label {color:#9ca3af}
  .fcn-wr-tags{display:flex;gap:6px;flex-wrap:wrap}
  .fcn-wr-tag{font-size:11px;font-weight:600;padding:4px 11px;border-radius:99px;background:rgba(37,99,235,.1);color:#1a56db;border:1px solid rgba(37,99,235,.2)}
  .fcn-wr-tag {background:#eff6ff;border-color:#bfdbfe}
  .fcn-wr-green{background:rgba(22,163,74,.1);color:#16a34a;border-color:rgba(22,163,74,.2)}
  .fcn-wr-green {background:#f0fdf4;border-color:#bbf7d0}
  .fcn-subj-row{display:flex;align-items:baseline;gap:9px;padding:10px 18px 7px;border-bottom:1px solid var(--jj-bdr,rgba(255,255,255,.06));font-size:12px;color:var(--jj-txt2,#8b949e);flex-wrap:wrap}
  .fcn-subj-row {border-bottom-color:#e5e7eb;color:#9ca3af}
  .fcn-subj-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--jj-txt3,#484f58);flex-shrink:0}
  .fcn-subj-label {color:#9ca3af}
  .fcn-subj-val{font-size:13px;font-weight:700;color:var(--jj-txt,#e6edf3)}
  .fcn-subj-val {color:#111318}
  .fcn-email-body{background:none;border:none;outline:none;resize:none;font-size:13px;line-height:1.8;color:var(--jj-txt,#e6edf3);font-family:inherit;padding:12px 18px;min-height:140px;flex:1;width:100%;box-sizing:border-box}
  .fcn-email-body {color:#111318}
  .fcn-email-tags{display:flex;gap:6px;padding:0 18px 8px;flex-wrap:wrap}
  .fcn-etag{font-size:10px;font-weight:600;padding:3px 10px;border-radius:99px;background:rgba(37,99,235,.1);color:#1a56db;border:1px solid rgba(37,99,235,.2)}
  .fcn-etag {background:#eff6ff;border-color:#bfdbfe}
  .fcn-etag-g{background:rgba(22,163,74,.1);color:#16a34a;border-color:rgba(22,163,74,.2)}
  .fcn-etag-g {background:#f0fdf4;border-color:#bbf7d0}
  .fcn-improve-row{display:flex;gap:6px;padding:0 18px 10px;flex-wrap:wrap}
  .fcn-improve-btn{font-size:11px;font-weight:600;padding:5px 12px;border:1px solid var(--jj-bdr,rgba(255,255,255,.12));border-radius:99px;background:none;cursor:pointer;color:var(--jj-txt2,#8b949e);font-family:inherit;transition:all .12s}
  .fcn-improve-btn {border-color:#e5e7eb;color:#6b7280}
  .fcn-improve-btn:hover{border-color:#1a56db;color:#1a56db;background:rgba(26,86,219,.05)}
  .fcn-email-acts{display:flex;gap:8px;padding:10px 18px;border-top:1px solid var(--jj-bdr,rgba(255,255,255,.07));flex-wrap:wrap}
  .fcn-email-acts {border-top-color:#e5e7eb}
  .fcn-act-s{font-size:12px;font-weight:600;padding:9px 14px;border:1px solid var(--jj-bdr,rgba(255,255,255,.12));border-radius:9px;background:none;cursor:pointer;color:var(--jj-txt2,#8b949e);font-family:inherit;transition:all .12s}
  .fcn-act-s {border-color:#e5e7eb;color:#6b7280}
  .fcn-act-s:hover{border-color:#1a56db;color:#1a56db}
  .fcn-act-main{font-size:13px;font-weight:700;padding:10px 20px;border:none;border-radius:9px;background:#1a56db;color:#fff;cursor:pointer;font-family:inherit;margin-left:auto;display:flex;align-items:center;gap:7px;transition:background .12s}
  .fcn-act-main:hover{background:#1e40af}
  .fcn-urgency{text-align:right;font-size:11px;color:var(--jj-txt3,#484f58);padding:0 18px 12px}
  .fcn-urgency {color:#9ca3af}
  .fcn-urgency strong{color:var(--jj-txt2,#8b949e);font-weight:600}
  .fcn-urgency strong {color:#6b7280}
  .fcn-others-wrap{background:var(--jj-surface,#1c2128);border:1px solid var(--jj-bdr,rgba(255,255,255,.08));border-radius:16px;overflow:hidden;position:relative;animation:jjIn .3s ease;box-shadow:0 2px 10px rgba(0,0,0,.12)}
  .fcn-others-wrap {background:#fff;border-color:#e5e7eb;box-shadow:0 2px 10px rgba(0,0,0,.06)}
  .fcn-others-blur{position:absolute;inset:0;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:rgba(255,255,255,.55);z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:opacity .35s}
  .fcn-others-blur {background:rgba(255,255,255,.7)}
  .fcn-others-blur.gone{opacity:0;pointer-events:none}
  .fcn-others-blur-ico{font-size:24px;opacity:.4}
  .fcn-others-blur-txt{font-size:13px;font-weight:700;color:var(--jj-txt,#e6edf3)}
  .fcn-others-blur-txt {color:#111318}
  .fcn-others-blur-sub{font-size:11px;color:var(--jj-txt3,#484f58)}
  .fcn-others-blur-sub {color:#9ca3af}
  .fcn-others-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px}
  .fcn-others-title{font-size:14px;font-weight:700;color:var(--jj-txt,#e6edf3)}
  .fcn-others-title {color:#111318}
  .fcn-others-count{font-size:12px;color:var(--jj-txt3,#484f58)}
  .fcn-others-count {color:#9ca3af}
  .fcn-others-list{display:flex;flex-direction:column;padding:0 18px 14px}
  .fcn-other-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--jj-bdr,rgba(255,255,255,.06))}
  .fcn-other-row {border-bottom-color:#e5e7eb}
  .fcn-other-row:last-child{border-bottom:none;padding-bottom:0}
  .fcn-o-av{width:36px;height:36px;border-radius:50%;background:var(--jj-bdr,rgba(255,255,255,.1));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--jj-txt2,#8b949e);overflow:hidden;flex-shrink:0}
  .fcn-o-av {background:#f3f4f6;color:#6b7280}
  .fcn-o-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .fcn-o-name{font-size:13px;font-weight:600;color:var(--jj-txt,#e6edf3);margin-bottom:1px}
  .fcn-o-name {color:#111318}
  .fcn-o-sub{font-size:11px;color:var(--jj-txt2,#8b949e)}
  .fcn-o-sub {color:#6b7280}
  .fcn-o-score{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
  .fcn-score-s{background:rgba(22,163,74,.1);color:#16a34a}
  .fcn-score-g{background:rgba(37,99,235,.1);color:#1a56db}
  .fcn-o-vm{font-size:12px;font-weight:600;color:#1a56db;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;flex-shrink:0}
  .fcn-start-over{text-align:center}
  .fcn-start-over button{background:none;border:none;color:var(--jj-txt3,#484f58);font-size:13px;cursor:pointer;font-family:inherit;padding:6px 0;transition:color .12s}
  .fcn-start-over button {color:#9ca3af}
  .fcn-start-over button:hover{color:var(--jj-txt2,#8b949e)}
  .fcn-wc-hint{font-size:11px;color:var(--jj-txt3,#484f58);padding:0 18px 6px}
  .fcn-wc-hint {color:#9ca3af}
  .fcn-email-reveal-unlocked{background:rgba(37,99,235,.08);border:1.5px solid rgba(37,99,235,.2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:7px;animation:jjIn .3s ease}
  .fcn-er-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1a56db;display:flex;align-items:center;gap:6px}
  .fcn-apollo-tag{font-size:9px;background:#1a56db;color:#fff;padding:1px 6px;border-radius:3px;font-weight:700}
  .fcn-er-val{font-size:14px;font-weight:700;color:#1a56db;font-family:'DM Mono','JetBrains Mono',monospace;word-break:break-all}
  .fcn-er-copy{align-self:flex-start;font-size:11px;font-weight:700;border:1.5px solid #1a56db;border-radius:6px;color:#1a56db;background:var(--jj-surface,#1c2128);padding:4px 12px;cursor:pointer;font-family:inherit;transition:all .12s}
  .fcn-er-copy {background:#fff}
  .fcn-er-copy:hover{background:#1a56db;color:#fff}
  .fcn-li-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border:1px solid var(--jj-bdr,rgba(255,255,255,.12));border-radius:9px;font-size:13px;font-weight:600;color:var(--jj-txt,#e6edf3);text-decoration:none;transition:all .12s;animation:jjIn .3s ease}
  .fcn-li-btn {border-color:#e5e7eb;color:#111318}
  .fcn-li-btn:hover{border-color:#0077B5;color:#0077B5}
  .fcn-li-ico2{width:18px;height:18px;border-radius:3px;background:#0077B5;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  @media(max-width:600px){.fcn-page{padding:16px 14px 40px}.fcn-h1{font-size:20px}.fcn-get-btn{padding:0 16px;font-size:13px}}
  
              /* Redesign shell (Slice 1A): top chrome bar. Visual only - the stepper does
                 not navigate yet (deferred), Save draft reuses jhClAutoSave, the kebab is a
                 placeholder. Scoped to #clStudio, brand tokens reused, no spine touched. */
              #clStudio .cl-shell-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 20px;border:1px solid var(--st-line,#d9d8d3);background:var(--st-paper,#fffefb);border-radius:14px;margin-bottom:18px}
              #clStudio .cl-shell-steps{grid-column:2;justify-self:center;display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
              #clStudio .cl-shell-step{display:flex;align-items:center;gap:9px}
              #clStudio .cl-shell-num{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font:700 12px/1 var(--tl-bodyf,inherit);background:#e7e6e1;color:var(--st-faint,#96999f)}
              #clStudio .cl-shell-step.is-active .cl-shell-num{background:var(--st-blue,#2448FF);color:#fff}
              #clStudio .cl-shell-step-tx{display:flex;flex-direction:column;line-height:1.15}
              #clStudio .cl-shell-step-t{font:600 12.5px/1.2 var(--tl-bodyf,inherit);color:var(--st-faint,#96999f)}
              #clStudio .cl-shell-step.is-active .cl-shell-step-t{color:var(--st-ink,#111216)}
              #clStudio .cl-shell-step.is-pending .cl-shell-num{background:#fff;color:var(--st-blue,#2448FF);box-shadow:inset 0 0 0 1.5px var(--st-blue,#2448FF)}
              #clStudio .cl-shell-step.is-pending .cl-shell-step-t{color:var(--st-blue,#2448FF)}
              #clStudio .cl-shell-step-s{font:400 11px/1.2 var(--tl-bodyf,inherit);color:var(--st-faint,#96999f)}
              #clStudio .cl-shell-conn{width:22px;height:1px;background:var(--st-line,#d9d8d3);flex:0 0 auto}
              #clStudio .cl-shell-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
              #clStudio .cl-shell-badge{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--tl-bodyf,inherit);color:var(--st-green,#177449);white-space:nowrap}
              #clStudio .cl-shell-badge svg{width:14px;height:14px}
              #clStudio .cl-shell-save{font:600 12.5px/1 var(--tl-bodyf,inherit);color:var(--st-ink,#111216);background:#fff;border:1px solid var(--st-line,#d9d8d3);border-radius:9px;padding:7px 13px;cursor:pointer;white-space:nowrap}
              #clStudio .cl-shell-save:hover{background:#f4f3ee}
              #clStudio .cl-shell-kebab{width:32px;height:32px;border-radius:8px;border:1px solid var(--st-line,#d9d8d3);background:#fff;color:var(--st-muted,#666970);cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
              @media (max-width:720px){#clStudio .cl-shell-step-s{display:none}#clStudio .cl-shell-conn{width:12px}#clStudio .cl-shell-top{grid-template-columns:1fr;gap:10px}#clStudio .cl-shell-steps{grid-column:1;justify-self:center}#clStudio .cl-shell-right{grid-column:1;justify-self:center}}
            
              /* Slice 1B: left-column header + 01-04 cards. Re-homes existing inputs (ids and
                 handlers unchanged) into always-open cards; the accordion is retired. Scoped to
                 #clStudio, brand tokens reused. clWsGap + the generate CTA are carried over
                 untouched for Slice 1C to relocate into the plan rail. */
              #clStudio .cl-rcard{background:var(--st-paper,#fffefb);border:1px solid var(--st-line,#d9d8d3);border-radius:16px;padding:18px;margin-top:14px}
              #clStudio .cl-rcard-head{display:flex;align-items:flex-start;gap:13px;width:100%}
              #clStudio .cl-rcard-badge{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--st-blue,#2448FF);color:#fff;display:grid;place-items:center;font:700 13px/1 var(--tl-bodyf,inherit)}
              #clStudio .cl-rcard-htext{flex:1 1 auto;min-width:0}
              #clStudio .cl-rcard-title{font:600 16px/1.2 var(--tl-display,inherit);letter-spacing:-0.01em;color:var(--st-ink,#111216);margin:2px 0;display:block}
              #clStudio .cl-rcard-sub{font:400 12.5px/1.4 var(--tl-bodyf,inherit);color:var(--st-muted,#666970);margin:0;display:block}
              #clStudio .cl-rcard-body{margin-top:14px;display:flex;flex-direction:column;gap:10px}
              #clStudio .cl-rcard-why{margin-top:4px;padding-top:12px;border-top:1px solid var(--st-line-soft,#e8e6e0);display:flex;flex-direction:column;gap:10px}
              #clStudio .cl-rcard-opt{margin-top:2px;border-top:1px solid var(--st-line-soft,#e8e6e0);padding-top:10px}
              #clStudio .cl-rcard-opt>summary{cursor:pointer;font:600 12.5px/1.3 var(--tl-bodyf,inherit);color:var(--st-muted,#666970);list-style:none}
              #clStudio .cl-rcard-opt>summary::-webkit-details-marker{display:none}
              #clStudio .cl-rcard-opt[open]>summary{margin-bottom:10px}
              #clStudio .cl-rcard-hl>summary{display:flex;align-items:flex-start;gap:13px;cursor:pointer;list-style:none}
              #clStudio .cl-rcard-hl>summary::-webkit-details-marker{display:none}
              #clStudio .cl-rcard-count{flex:0 0 auto;font:700 12px/1 var(--tl-bodyf,inherit);color:var(--st-green,#177449);background:rgba(23,116,73,.1);border-radius:999px;padding:5px 10px;align-self:center}
              #clStudio .cl-rcard-chev{flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--st-faint,#96999f);border-bottom:2px solid var(--st-faint,#96999f);transform:rotate(45deg);align-self:center;transition:transform .15s}
              #clStudio .cl-rcard-hl[open] .cl-rcard-chev{transform:rotate(-135deg)}
              #clStudio summary.cl-rcard-head{cursor:pointer;list-style:none}
              #clStudio summary.cl-rcard-head::-webkit-details-marker{display:none}
              #clStudio details.cl-rcard[open]>summary.cl-rcard-head .cl-rcard-chev{transform:rotate(-135deg)}
              #clStudio .cl-hl-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto}
              #clStudio .cl-hl-list li{margin:0;padding:0;list-style:none}
              #clStudio .cl-hl-bar{display:flex;justify-content:flex-end;margin:12px 0 0}
              #clStudio .cl-hl-allbtn{font:600 11.5px/1 var(--tl-bodyf,inherit);color:var(--st-blue,#2448FF);background:none;border:0;padding:4px 2px;cursor:pointer}
              #clStudio .cl-hl-item{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;font:400 12.5px/1.4 var(--tl-bodyf,inherit);color:var(--st-ink,#111216);padding:8px 10px;border:1px solid var(--st-line-soft,#e8e6e0);border-radius:9px;background:var(--st-paper,#fffefb);cursor:pointer}
              #clStudio .cl-hl-item.is-on{border-color:var(--st-green,#177449);background:rgba(23,116,73,.06)}
              #clStudio .cl-hl-mark{flex:0 0 auto;width:15px;height:15px;margin-top:1px;border:1.5px solid var(--st-line,#d9d8d3);border-radius:5px;background:#fff;position:relative}
              #clStudio .cl-hl-item.is-on .cl-hl-mark{border-color:var(--st-green,#177449);background:var(--st-green,#177449)}
              #clStudio .cl-hl-item.is-on .cl-hl-mark::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
              #clStudio .cl-hl-text{flex:1 1 auto}
              #clStudio .cl-mi-block{margin-top:14px;padding-top:14px;border-top:1px solid var(--st-line-soft,#e8e6e0);display:flex;flex-direction:column;gap:8px}
              #clStudio .cl-mi-help{font:400 11.5px/1.4 var(--tl-bodyf,inherit);color:var(--st-faint,#96999f);margin:0}
              #clStudio .cl-mi-row{display:flex;gap:8px;align-items:center}
              #clStudio .cl-mi-row .cl-v2-input{flex:1 1 auto;min-width:0}
              #clStudio .cl-mi-add{flex:0 0 auto;font:600 12px/1 var(--tl-bodyf,inherit);color:var(--st-blue,#2448FF);background:#fff;border:1px solid var(--st-line,#d9d8d3);border-radius:9px;padding:8px 13px;cursor:pointer}
              #clStudio .cl-mi-add:hover{border-color:var(--st-blue,#2448FF)}
              #clStudio .cl-mi-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
              #clStudio .cl-mi-list:empty{display:none}
              #clStudio .cl-mi-chip{display:inline-flex;align-items:center;gap:6px;font:500 12px/1.3 var(--tl-bodyf,inherit);color:var(--st-ink,#111216);background:var(--st-canvas,#f3f1ec);border:1px solid var(--st-line,#d9d8d3);border-radius:999px;padding:5px 6px 5px 11px;max-width:100%}
              #clStudio .cl-mi-chip-tx{white-space:normal;overflow-wrap:anywhere}
              #clStudio .cl-mi-x{flex:0 0 auto;width:17px;height:17px;border-radius:50%;border:0;background:rgba(17,18,22,.08);color:var(--st-muted,#666970);cursor:pointer;font:600 12px/1 var(--tl-bodyf,inherit);display:grid;place-items:center;padding:0}
              #clStudio .cl-mi-x:hover{background:rgba(17,18,22,.16)}
              #clStudio .cl-rcard-note{font:400 11.5px/1.4 var(--tl-bodyf,inherit);color:var(--st-faint,#96999f);margin:10px 0 0}
              #clStudio .cl-pref-ro{display:flex;flex-direction:column;gap:7px;margin-top:4px;padding-top:12px;border-top:1px solid var(--st-line-soft,#e8e6e0)}
              #clStudio .cl-pref-ro-row{display:flex;align-items:center;justify-content:space-between;font:400 12.5px/1.3 var(--tl-bodyf,inherit);color:var(--st-muted,#666970)}
              #clStudio .cl-pref-ro-row b{font-weight:600;color:var(--st-ink,#111216)}
              #clStudio .cl-lfoot{display:flex;align-items:center;gap:7px;font:400 11.5px/1.4 var(--tl-bodyf,inherit);color:var(--st-faint,#96999f);margin-top:16px;padding:0 2px}
              #clStudio .cl-lfoot svg{width:13px;height:13px;flex:0 0 auto}
            
          /* Slice 1C: Setup plan rail. Replaces the placeholder; re-presents existing analysis
             and HOSTS the relocated clGapCheckBtn, clWsGapBody and clbGenerateAnchor (moved by id,
             not duplicated). Scoped #clStudio, brand tokens. */
          #clStudio .cl-rail{display:flex;flex-direction:column;gap:14px;padding:4px 2px}
          #clStudio .cl-rail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
          #clStudio .cl-rail-head h2{font:600 20px/1.2 var(--tl-display,inherit);letter-spacing:-0.02em;color:var(--st-ink,#111216);margin:0}
          #clStudio .cl-rail-sub{font:400 12.5px/1.45 var(--tl-bodyf,inherit);color:var(--st-muted,#666970);margin:3px 0 0}
          #clStudio .cl-rail-ready{flex:0 0 auto;display:inline-flex;align-items:center;font:600 11.5px/1 var(--tl-bodyf,inherit);border-radius:999px;padding:6px 11px;white-space:nowrap}
          #clStudio .cl-rail-ready.is-ready{color:var(--st-green,#177449);background:rgba(23,116,73,.1)}
          #clStudio .cl-rail-ready.not-ready{color:var(--st-faint,#96999f);background:#eceae4}
          #clStudio .cl-rail-card{background:var(--st-paper,#fffefb);border:1px solid var(--st-line,#d9d8d3);border-radius:14px;padding:15px 16px}
          #clStudio .cl-rail-card-h{display:flex;align-items:center;gap:8px;font:600 13.5px/1.2 var(--tl-bodyf,inherit);color:var(--st-ink,#111216);margin-bottom:10px}
          #clStudio .cl-rail-num{font:700 11px/1 var(--tl-bodyf,inherit);color:var(--st-muted,#666970);background:#eceae4;border-radius:999px;padding:3px 8px}
          #clStudio .cl-rail-strong{font:700 10.5px/1 var(--tl-bodyf,inherit);color:var(--st-green,#177449);background:rgba(23,116,73,.1);border-radius:999px;padding:4px 9px}
          #clStudio .cl-rail-chips{display:flex;flex-wrap:wrap;gap:6px}
          #clStudio .cl-rail-chip{font:500 12px/1.2 var(--tl-bodyf,inherit);color:var(--st-ink,#111216);background:var(--st-canvas,#f3f1ec);border:1px solid var(--st-line,#d9d8d3);border-radius:8px;padding:5px 9px}
          #clStudio .cl-rail-empty{font:400 12px/1.45 var(--tl-bodyf,inherit);color:var(--st-faint,#96999f);margin:0}
          #clStudio .cl-rail-xy{font:600 13px/1.3 var(--tl-bodyf,inherit);color:var(--st-ink,#111216);margin-bottom:8px}
          #clStudio .cl-rail-card .cl-gap-check-btn{margin-bottom:10px}
          #clStudio .cl-rail-pref{font:500 13px/1.3 var(--tl-bodyf,inherit);color:var(--st-ink,#111216)}
          #clStudio .cl-rail-prefrow{display:flex;align-items:center;justify-content:space-between;font:400 12px/1.3 var(--tl-bodyf,inherit);color:var(--st-muted,#666970);margin-top:7px}
          #clStudio .cl-rail-prefrow b{font-weight:600;color:var(--st-ink,#111216)}
          #clStudio .cl-rail-foot{background:rgba(23,116,73,.06);border:1px solid rgba(23,116,73,.2);border-radius:14px;padding:15px 16px;display:flex;flex-direction:column;gap:10px}
          #clStudio .cl-opening-body{margin-top:6px;display:flex;flex-direction:column;gap:6px}
          #clStudio .cl-op-line{margin:0;font:400 13px/1.5 var(--st-serif,Georgia,serif);color:var(--st-ink,#111216)}
          #clStudio .cl-op-line .jh-sent{cursor:default}
          #clStudio .cl-opening-note{font:400 11px/1.45 var(--tl-bodyf,inherit);color:var(--st-faint,#96999f);margin:10px 0 0}
          #clStudio .cl-angle-inset{display:flex;gap:9px;align-items:flex-start;background:var(--st-canvas,#f3f1ec);border:1px solid var(--st-line,#d9d8d3);border-radius:12px;padding:12px 13px;margin-top:6px}
          #clStudio .cl-angle-spark{flex:0 0 auto;color:var(--st-blue,#2448FF)}
          #clStudio .cl-angle-spark svg{width:16px;height:16px;display:block}
          #clStudio .cl-angle-inset .cl-opening-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px;margin-top:0}
          #clStudio .cl-angle-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
          #clStudio .cl-angle-btn{font:600 12px/1 var(--tl-bodyf,inherit);border-radius:9px;padding:8px 13px;cursor:pointer;border:1px solid var(--st-line,#d9d8d3)}
          #clStudio .cl-angle-use{background:var(--st-blue,#2448FF);border-color:var(--st-blue,#2448FF);color:#fff}
          #clStudio .cl-angle-use:hover{background:#1a3ce0}
          #clStudio .cl-angle-try{background:#fff;color:var(--st-ink,#111216)}
          #clStudio .cl-angle-try:hover{border-color:var(--st-blue,#2448FF)}
          #clStudio .cl-angle-link{background:none;border:0;color:var(--st-blue,#2448FF);font:600 12px/1 var(--tl-bodyf,inherit);cursor:pointer;padding:8px 4px}
          #clStudio .cl-angle-suggest{margin-top:8px;width:100%;background:#fff;border:1px solid var(--st-line,#d9d8d3);border-radius:10px;padding:9px 12px;font:600 12.5px/1 var(--tl-bodyf,inherit);color:var(--st-blue,#2448FF);cursor:pointer}
          #clStudio .cl-angle-suggest:hover{border-color:var(--st-blue,#2448FF)}
          #clStudio .cl-angle-editwrap{display:flex;flex-direction:column;gap:8px;margin-top:8px}
          #clStudio .cl-angle-edit{width:100%;box-sizing:border-box;border:1px solid var(--st-line,#d9d8d3);border-radius:10px;padding:9px 11px;font:400 13px/1.5 var(--tl-bodyf,inherit);color:var(--st-ink,#111216);resize:vertical}
          #clStudio .cl-angle-row{display:flex;align-items:center;gap:8px}
          #clStudio .cl-rail-needs{font:500 13px/1.5 var(--tl-bodyf,inherit);color:var(--st-ink,#111216);margin:0 0 2px}
          #clStudio .cl-rail-needs.is-empty{font-weight:400;color:var(--st-faint,#96999f)}
          #clStudio .cl-rail-ic{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(36,72,255,.08);color:var(--st-blue,#2448FF)}
          #clStudio .cl-rail-ic svg{width:15px;height:15px}
          #clStudio .cl-rail-ic-green{background:rgba(23,116,73,.12);color:var(--st-green,#177449)}
          #clStudio .cl-rail-ready.is-ready::before{content:"\2713";margin-right:5px;font-weight:700}
          #clStudio .cl-rail-card-h .cl-rail-num,#clStudio .cl-rail-card-h .cl-rail-strong{margin-left:auto}
          #clStudio summary.cl-rail-card-h{cursor:pointer;list-style:none}
          #clStudio summary.cl-rail-card-h::-webkit-details-marker{display:none}
          #clStudio details.cl-rail-card[open]>summary.cl-rail-card-h .cl-rcard-chev{transform:rotate(-135deg)}
          #clStudio #clRailReqCount::after{content:" identified"}
          #clStudio #clRailReqChips{display:flex;flex-wrap:wrap;gap:6px}
          #clStudio .cl-rail-chip{display:flex;align-items:center;gap:7px}
          #clStudio .cl-rail-chip::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--st-blue,#2448FF)}
          #clStudio .cl-rail-foot-head{display:flex;align-items:flex-start;gap:10px}
          #clStudio .cl-rail-foot-h{font:700 13.5px/1.2 var(--tl-bodyf,inherit);color:var(--st-green,#177449)}
          #clStudio .cl-rail-foot-msg{font:400 12px/1.4 var(--tl-bodyf,inherit);color:var(--st-muted,#666970);margin-top:2px}
        
/* Cover Letter result in CV Builder format (Phase 1 structural re-home). Mirrors
   the #atsCvRoot structural rules, prefix-swapped to #atsClRoot. The root is nested
   inside #jjPage_cover so the #jjPage_cover .cl-letter .jh-sent-* source-tag CSS still
   matches; the honesty spine is untouched JS keyed off element ids. */
#atsClRoot{
  --blue:var(--rr-accent); --blue-600:var(--rr-accent-hover); --blue-700:var(--rr-accent-strong);
  --blue-tint:var(--rr-accent-tint); --blue-tint-2:var(--rr-accent-tint-2); --blue-line:var(--rr-accent-border);
  --green:#16A36B; --green-tint:#E6F6EE; --green-line:#CDEBDB;
  --amber:#E8920C; --amber-tint:#FCF3E4; --amber-line:#F2DEBB;
  --red:#E5544B; --red-tint:#FCEDEC; --red-line:#F4CFCC;
  --ink:#15181D; --ink-2:#3A4049; --muted:#6B7480; --muted-2:#8C95A1;
  --line:#E9EBEF; --line-soft:#EFF1F4; --workspace:#ECEEF1; --card:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(20,24,32,.04),0 1px 3px rgba(20,24,32,.05);
  --shadow-lg:0 4px 12px rgba(20,24,32,.06),0 18px 50px rgba(20,24,32,.12);
  --radius:var(--rr-radius); --header-h:66px; --sidebar-w:330px;
  position:relative; display:flex; flex-direction:column; overflow:visible; background:var(--workspace);
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif; color:var(--ink);
  -webkit-font-smoothing:antialiased; text-align:left; min-height:80vh; border-radius:16px;
}
#atsClRoot *{box-sizing:border-box}
#atsClRoot svg{display:block}
#atsClRoot .ico{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
#atsClRoot button{font-family:inherit}
#atsClRoot .header{position:relative;flex:none;min-height:var(--header-h);z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 22px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);border-bottom:1px solid var(--line)}
#atsClRoot .h-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#atsClRoot .h-center{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:7px 16px;border-radius:14px;background:var(--green-tint);border:1px solid var(--green-line)}
#atsClRoot .h-center .t{font-size:13.5px;font-weight:700;color:#0E7A4E;line-height:1.15}
#atsClRoot .h-center .s{font-size:11.5px;color:#3E9E72;font-weight:600}
#atsClRoot .h-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#atsClRoot .shell{position:relative;flex:1;min-height:0;display:flex;overflow:hidden}
#atsClRoot .sidebar{width:var(--sidebar-w);flex:none;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;background:transparent}
#atsClRoot .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:17px;display:flex;flex-direction:column;gap:11px}
#atsClRoot .card-lbl{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--muted-2);text-transform:uppercase}
#atsClRoot .workspace{flex:1;min-width:0;min-height:0;overflow-y:auto;position:relative;background:var(--workspace)}
#atsClRoot .page-wrap{display:block;padding:24px 28px 60px}
#atsClRoot .page{display:block!important;width:794px;max-width:100%;margin-left:auto;margin-right:auto;height:auto;min-height:auto;border-radius:12px;position:relative;background:#fff;box-shadow:0 6px 28px rgba(20,22,30,.10),0 1px 3px rgba(20,22,30,.07);border:1px solid var(--line)}
#atsClRoot .doc{padding:48px 56px;outline:none}
#atsClRoot .overlay{position:absolute;inset:0;z-index:54;background:rgba(20,24,32,.1);opacity:0;pointer-events:none;transition:.26s}
#atsClRoot .overlay.show{opacity:1;pointer-events:auto}
#atsClRoot .drawer-tab{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:11px;padding:18px 11px;cursor:pointer;background:#fff;border:1px solid var(--line);border-right:none;border-radius:13px 0 0 13px;box-shadow:-4px 4px 20px rgba(20,24,32,.08);transition:.18s}
#atsClRoot .drawer-tab .tgt{width:30px;height:30px;border-radius:9px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;position:relative}
#atsClRoot .drawer-tab .tgt .ico{width:17px;height:17px}
#atsClRoot .drawer-tab .tgt .cnt{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
#atsClRoot .drawer-tab .vtext{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-2)}
#atsClRoot .drawer-tab .chev{color:var(--muted-2)}
#atsClRoot .drawer-tab .chev .ico{width:15px;height:15px}
#atsClRoot .drawer-panel{position:absolute;right:0;top:0;bottom:0;width:356px;max-width:92%;z-index:55;background:#fff;border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(20,24,32,.12);transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.8,.25,1);display:flex;flex-direction:column}
#atsClRoot .drawer-panel.open{transform:none}
#atsClRoot .dp-head{display:flex;align-items:center;gap:11px;padding:18px;border-bottom:1px solid var(--line)}
#atsClRoot .dp-head .tgt{width:32px;height:32px;border-radius:9px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center}
#atsClRoot .dp-head .t{font-size:15px;font-weight:700;letter-spacing:-.01em}
#atsClRoot .dp-head .s{font-size:12px;color:var(--muted);font-weight:500;margin-top:1px}
#atsClRoot .dp-close{margin-left:auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--muted)}
#atsClRoot .dp-body{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
@media(max-width:980px){#atsClRoot .shell{flex-direction:column}#atsClRoot .sidebar{width:auto}#atsClRoot .page{width:100%}}
/* Cover review faithful to the CV Builder result (layout only): the letter fills
   the main column as the hero, the review uses the full content pane like the CV
   result, and the side panels read as clean insight cards. The honesty layer
   (classification, red gate, placeholder guard, sponsor/salary/route caveats,
   unsourced count) is untouched; this is presentation only. */
/* Full content pane: drop the page and review-screen max-width when the review
   is shown, mirroring #jjPage_cv .jj-page-body:has(#cvScreenResult.on). */
#jjPage_cover .jj-page-body:has(.cl-screen-review.on){max-width:none;margin:0;padding:0}
#jjPage_cover .cl-screen-review.on{max-width:none;margin:0;padding:0}
/* Verdict card: present the honest caveats as clean full-width rows instead of
   cramped wrapping pills. Ids and the JS that fills them are untouched. */
#atsClRoot .cl-ws-vchips{flex-direction:column;align-items:stretch;gap:8px;margin-left:0}
#atsClRoot .cl-ws-chip{width:100%;justify-content:flex-start;white-space:normal;font-size:12.5px;line-height:1.4;padding:9px 11px;border-radius:8px}
#atsClRoot .cl-ws-salwrap{width:100%;box-sizing:border-box}
#atsClRoot .cl-ws-vnote{margin-top:4px}
/* Working / attention: clean uppercase section labels, comfortable spacing. */
#atsClRoot .cl-workatt{gap:14px}
#atsClRoot .cl-workatt-h{font:600 11px/1.1 var(--tl-bodyf);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
/* Requirements: let the label wrap so the requirement is fully readable. */
#atsClRoot .cl-req-label{white-space:normal;overflow:visible;text-overflow:clip}
/* Review layout fixes (CSS only, cover review scoped). */
/* Empty box: in the review (focus) state the setup pane's children are both
   hidden, so the pane renders as an empty rounded box above the back button.
   Hide it only in the review state; compose still shows it. */
#clStudio.cl-st-focus .cl-st-setup{display:none}
/* Letter measure: keep the letter prose at its readable 66ch measure (the base
   #clStudio #jhClDisplay cap) inside the now full-bleed frame, so widening the
   frame widens the document, not the line length. .doc padding is kept for
   breathing room. Specificity beats the #clStudio #jhClDisplay base cap.
   A4 sheet: the page is now a fixed 794px A4 width centred in the workspace,
   so the prose fills the page within the .doc margins rather than a 66ch
   strip pinned left. max-width:none here beats the base #clStudio cap too. */
#atsClRoot .doc #jhClDisplay{max-width:none}
/* Minor: clear separation between "What is working" and "What needs attention". */
#atsClRoot .cl-workatt-sec + .cl-workatt-sec{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
/* CV-faithful left panel (slice 1): show the recruiter-score ring in the review and scale it to the CV gauge size; surface the source breakdown as compact rows. Ring values come from clStSync, counts from jhClRefreshReview (both reused, untouched). */
#clStudio.cl-st-focus #atsClRoot .cl-st-ring-viz{display:block}
#clStudio.cl-st-focus #atsClRoot #clStRingNum{display:grid}
#clStudio #atsClRoot .cl-st-ring-viz,#clStudio #atsClRoot .cl-st-ring-svg{width:84px;height:84px}
#clStudio #atsClRoot .cl-st-ring-track{stroke-width:7}
#clStudio #atsClRoot .cl-st-ring-arc{stroke-width:7}
#clStudio #atsClRoot .cl-st-ring-num{font-size:26px}
#clStudio #atsClRoot .cl-legend2{gap:10px}
#clStudio #atsClRoot .cl-legend2 .cl-lc{display:none}
/* CV-faithful checks/keywords (slice 2): working/attention restyled to the CV ATS-compliance .chk checklist look (status icon + label, bordered rows); unmet requirements restyled to the CV missing-keyword .kw chip look. CSS only; jhClRenderWorkAtt and clReqRender stay untouched, only their existing class hooks are restyled. */
#clStudio.cl-st-focus #atsClRoot .cl-workatt-list{gap:0}
#clStudio.cl-st-focus #atsClRoot .cl-workatt-item{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid var(--st-line);font:600 12.5px/1.45 var(--tl-bodyf);color:var(--st-ink)}
#clStudio.cl-st-focus #atsClRoot .cl-workatt-good .cl-workatt-item,#clStudio.cl-st-focus #atsClRoot .cl-workatt-warn .cl-workatt-item{padding-left:0}
#clStudio.cl-st-focus #atsClRoot .cl-workatt-item:last-child{border-bottom:none;padding-bottom:0}
#clStudio.cl-st-focus #atsClRoot .cl-workatt-good .cl-workatt-item::before{position:static;flex:0 0 auto;width:15px;height:15px;margin:1px 0 0}
#clStudio.cl-st-focus #atsClRoot .cl-workatt-warn .cl-workatt-item::before{position:static;flex:0 0 auto;width:15px;height:15px;margin:1px 0 0;content:"";color:transparent;font-size:0;background-color:var(--st-amber);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3 22 20 2 20Z M11 9h2v6h-2z M11 17h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3 22 20 2 20Z M11 9h2v6h-2z M11 17h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat}
#clStudio #atsClRoot .cl-req-list{flex-direction:row;flex-wrap:wrap;gap:8px}
#clStudio #atsClRoot .cl-req-row{width:auto;padding:5px 10px;border-radius:8px;border:1px solid var(--st-line);background:#faf8f3;gap:6px}
#clStudio #atsClRoot .cl-req-row:hover{transform:translateY(-1px)}
#clStudio #atsClRoot .cl-req-label{flex:0 0 auto;min-width:0;white-space:nowrap;overflow:visible;text-overflow:clip;font-size:12.5px}
#clStudio #atsClRoot .cl-req-cat{display:none}
#clStudio #atsClRoot .cl-req-met{background:rgba(23,116,73,.10);border-color:rgba(23,116,73,.24)}
#clStudio #atsClRoot .cl-req-met .cl-req-label{color:var(--st-green)}
#clStudio #atsClRoot .cl-req-warn,#clStudio #atsClRoot .cl-req-miss{background:rgba(160,111,24,.10);border-color:rgba(160,111,24,.26)}
#clStudio #atsClRoot .cl-req-warn .cl-req-label,#clStudio #atsClRoot .cl-req-miss .cl-req-label{color:#B26100}
#clStudio #atsClRoot .cl-req-row.is-active{box-shadow:inset 0 0 0 1.5px rgba(36,72,255,.45)}
/* CV-faithful editor chrome (slice 3): a CV-styled toolbar bar above the letter holding the relocated undo/redo (jhClUndo/jhClRedo unchanged) and a word-band length chip; Source Map drawer cards given the CV Job-Match-Map look. CSS + markup move + one isolated helper; no formatting is wired to the letter. */
#atsClRoot .cl-cvtoolbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:11px 16px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#atsClRoot .cl-cvtbar{display:flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px;box-shadow:0 1px 2px rgba(20,24,32,.06)}
#atsClRoot .cl-cvtbar .cl-tbtn-icon{width:33px;height:33px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);background:transparent;border:none;padding:0;transition:background .13s,color .13s}
#atsClRoot .cl-cvtbar .cl-tbtn-icon:hover:not(:disabled){background:#f2f4f7;color:var(--ink)}
#atsClRoot .cl-cvtbar .cl-tbtn-icon:disabled{opacity:.4;cursor:default}
#atsClRoot .cl-cvtbar .cl-tbtn-icon svg{width:16px;height:16px}
#atsClRoot .cl-wordband{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;box-shadow:0 1px 2px rgba(20,24,32,.06);font-size:12px;font-weight:600;color:var(--ink-2)}
#atsClRoot .cl-wordband svg{width:15px;height:15px;color:var(--muted)}
#atsClRoot .cl-wb-track{width:90px;height:6px;border-radius:6px;background:#eef0f3;overflow:hidden}
#atsClRoot .cl-wb-bar{height:100%;border-radius:6px;background:#16a36b;width:0;transition:width .25s,background .25s}
#atsClRoot .cl-wordband.cl-wb-warn .cl-wb-bar{background:#a66a06}
#atsClRoot .cl-wordband.cl-wb-over .cl-wb-bar{background:#b23b33}
#atsClRoot .cl-wordband.cl-wb-warn{border-color:#e7c48a;color:#a66a06}
#atsClRoot .cl-wordband.cl-wb-over{border-color:#e7a59f;color:#b23b33}
#atsClRoot .cl-wb-count{color:var(--muted);font-weight:600}
#atsClRoot .cl-wb-label{font-weight:700}
#atsClRoot .cl-wordband.cl-wb-empty{display:none}
#atsClRoot #clSourcePanel #clReqDetail,#atsClRoot #clSourcePanel #jhClQuality{border:1px solid var(--line);border-radius:11px;background:#fcfcfd;padding:12px 13px}

          /* Cover Letter compose: soft-editorial v2 (SETUP view only; review/result screen untouched).
             Interview-Prep numbered step rows; 01 always open, 02/03 collapse (the row IS the trigger). */
          #clStudio{--tl-bg:#FBFBF9;--tl-ink:#101010;--tl-body:#3B3B36;--tl-grey:#86867E;--tl-mute:#A4A49C;--tl-hair:#E2E2DC;--tl-blue:#2448FF;--tl-blue-d:#1f3dd9;--tl-card:#FFFFFF;--tl-tint:#F3F6FF;--tl-tint-border:#2448FF;--tl-radius:10px;--tl-radius-sm:8px;--tl-display:"Space Grotesk","Albert Sans",system-ui,sans-serif;--tl-bodyf:"Plus Jakarta Sans",system-ui,sans-serif;padding:0}
          #jjPage_cover:has(#clScreenCompose.cl-screen.on){background:#FBFBF9}
          #jjMain:has(#jjPage_cover.jj-page.active #clScreenCompose.cl-screen.on) .cl-actionbar{display:none !important}
          #clStudio .cl-v2-wrap{max-width:920px;margin:0 auto;padding:8px 16px 80px}
          #clStudio .cl-v2-setuphd{padding:16px 0 6px}
          #clStudio .cl-v2-eyebrow{font:500 12px/1 var(--tl-display);letter-spacing:.08em;text-transform:uppercase;color:var(--tl-mute)}

          /* Step row: badge+label head (col 1) | content body (col 2). Interview metrics. */
          #clStudio .cl-v2-step{display:grid;grid-template-columns:minmax(190px,230px) minmax(0,1fr);column-gap:20px;align-items:start;border-top:1px solid var(--tl-hair);padding:22px 0}
          #clStudio .cl-v2-step-head{grid-column:1;display:flex;gap:16px;align-items:flex-start;width:100%;background:none;border:0;padding:0;text-align:left;cursor:pointer;font-family:inherit}
          #clStudio .cl-v2-step-head-static{cursor:default}
          #clStudio .cl-v2-badge{flex:0 0 30px;width:30px;height:30px;border-radius:999px;background:var(--tl-blue);color:#fff;font:500 13px/1 var(--tl-display);display:inline-flex;align-items:center;justify-content:center}
          #clStudio .cl-v2-step-text{display:flex;flex-direction:column;gap:5px;min-width:0}
          #clStudio .cl-v2-step-title{font:500 18px/1.2 var(--tl-display);letter-spacing:-0.02em;color:var(--tl-ink);display:flex;align-items:center;gap:9px}
          #clStudio .cl-v2-step-help{font:400 12.5px/1.45 var(--tl-bodyf);color:var(--tl-grey)}
          #clStudio .cl-v2-step-state{font:400 12.5px/1.35 var(--tl-bodyf);color:var(--tl-mute)}
          /* Evidence-fit surface (Slice C1): part of the setup column, uses the cl-v2 / tl tokens. */
          #clStudio .cl-gap-body{display:flex;flex-direction:column;gap:6px}
          #clStudio .cl-gap-empty{font:400 12.5px/1.5 var(--tl-bodyf);color:var(--tl-grey);margin:0}
          #clStudio .cl-gap-intro{font:500 12px/1.35 var(--tl-display);letter-spacing:-0.01em;color:var(--tl-ink);margin:8px 0 2px}
          #clStudio .cl-gap-intro:first-child{margin-top:0}
          #clStudio .cl-gap-caveat{font:400 11.5px/1.5 var(--tl-bodyf);color:var(--tl-grey);margin:4px 0 0}
          #clStudio .cl-gap-stale{font:500 12px/1.45 var(--tl-bodyf);color:var(--tl-blue);background:var(--tl-tint);border-left:2px solid var(--tl-blue);border-radius:0 6px 6px 0;padding:7px 10px;margin:0 0 10px}
          #clStudio .cl-gap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
          #clStudio .cl-gap-row{display:flex;align-items:flex-start;gap:8px;font:400 13px/1.4 var(--tl-bodyf);color:var(--tl-ink)}
          #clStudio .cl-gap-glyph{flex:0 0 auto;font-size:12px;line-height:1.5;margin-top:1px}
          #clStudio .cl-gap-met .cl-gap-glyph{color:#177449}
          #clStudio .cl-gap-miss .cl-gap-glyph{color:var(--tl-grey)}
          #clStudio .cl-gap-skill{min-width:0}
          #clStudio .cl-gap-reqmain{display:flex;flex-direction:column;gap:2px;min-width:0}
          #clStudio .cl-gap-ev{font:400 11.5px/1.45 var(--tl-bodyf);color:var(--tl-grey)}
          #clStudio .cl-gap-cols{display:grid;grid-template-columns:1fr;gap:14px}
          #clStudio .cl-gap-colh{font:700 10.5px/1.1 var(--tl-bodyf);letter-spacing:.06em;text-transform:uppercase;margin:0 0 7px}
          #clStudio .cl-gap-col-strong .cl-gap-colh{color:#177449}
          #clStudio .cl-gap-col-miss .cl-gap-colh{color:var(--st-amber,#a06f18)}
          #clStudio .cl-gap-colempty{font:400 11.5px/1.4 var(--tl-bodyf);color:var(--tl-grey);margin:0}
          #clStudio .cl-gap-met .cl-gap-glyph{flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:#177449;color:#fff;display:grid;place-items:center;font-size:10px;line-height:1;margin-top:1px}
          #clStudio .cl-gap-miss .cl-gap-glyph{flex:0 0 auto;width:15px;height:15px;margin-top:1px;background-color:var(--st-amber,#a06f18);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3 22 20 2 20Z M11 9h2v6h-2z M11 17h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3 22 20 2 20Z M11 9h2v6h-2z M11 17h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat}
          @media (max-width:560px){#clStudio .cl-gap-cols{grid-template-columns:1fr}}
          #clStudio #clWsGap .cl-v2-step-head-static{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
          #clStudio .cl-gap-check-btn{flex:0 0 auto;font:500 12px var(--tl-bodyf);padding:5px 11px;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-sm);background:var(--tl-card);color:var(--tl-ink);cursor:pointer;transition:border-color .14s,background .14s}
          #clStudio .cl-gap-check-btn:hover{border-color:var(--tl-blue);color:var(--tl-blue)}
          #clStudio .cl-v2-step-nudge{font:400 12.5px/1.35 var(--tl-bodyf);color:var(--tl-blue)}
          #clStudio .cl-v2-step.cl-v2-filled .cl-v2-step-nudge{color:var(--tl-mute)}
          #clStudio .cl-v2-step.cl-v2-filled .cl-v2-step-nudge::before{content:"\2713 ";color:var(--tl-blue);font-weight:600}
          #clStudio .cl-v2-step-caret{flex:0 0 auto;width:8px;height:8px;border-right:1.5px solid var(--tl-grey);border-bottom:1.5px solid var(--tl-grey);transform:rotate(45deg);transition:transform .2s ease}
          #clStudio .cl-v2-step.is-open .cl-v2-step-caret{transform:rotate(225deg)}
          #clStudio .cl-v2-step-body{grid-column:2;min-width:0}
          #clStudio .cl-v2-step-collapsible .cl-v2-step-body{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .2s ease}
          #clStudio .cl-v2-step-collapsible.is-open .cl-v2-step-body{max-height:1600px;opacity:1;transition:max-height .45s ease,opacity .3s ease}
          @media (prefers-reduced-motion: reduce){#clStudio .cl-v2-step-body{transition:none}#clStudio .cl-v2-step-caret{transition:none}}
          @media (max-width:760px){
            #clStudio .cl-v2-step{grid-template-columns:minmax(0,1fr);row-gap:12px}
            #clStudio .cl-v2-step-body{grid-column:1}
          }

          /* Fields (inside step bodies) */
          #clStudio .cl-v2-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
          @media (max-width:560px){#clStudio .cl-v2-row2{grid-template-columns:1fr}}
          #clStudio .cl-v2-field{margin:0 0 14px}
          #clStudio .cl-v2-row2 .cl-v2-field{margin:0}
          #clStudio .cl-v2-step-body>.cl-v2-field:last-child,#clStudio .cl-v2-step-body>*:last-child{margin-bottom:0}
          #clStudio .cl-v2-field>label{display:block;font:500 12.5px/1 var(--tl-display);letter-spacing:.01em;color:var(--tl-ink);margin:0 0 7px}
          #clStudio .cl-v2-opt{font:400 12px/1 var(--tl-bodyf);color:var(--tl-mute);text-transform:none;letter-spacing:0}
          #clStudio .cl-v2-input{width:100%;box-sizing:border-box;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-sm);background:#fff;padding:11px 13px;font:400 14px/1.4 var(--tl-bodyf);color:var(--tl-ink);outline:none;transition:border-color .15s}
          #clStudio .cl-v2-input::placeholder{color:var(--tl-mute)}
          #clStudio .cl-v2-input:focus{border-color:var(--tl-blue)}
          #clStudio .cl-v2-input-sm{margin-top:10px;font-size:13px;padding:9px 12px}
          #clStudio .cl-v2-ta{width:100%;box-sizing:border-box;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-sm);background:#fff;padding:12px 14px;font:400 13.5px/1.55 var(--tl-bodyf);color:var(--tl-ink);outline:none;resize:vertical;transition:border-color .15s}
          #clStudio .cl-v2-ta::placeholder{color:var(--tl-mute)}
          #clStudio .cl-v2-ta:focus{border-color:var(--tl-blue)}
          #clStudio .cl-v2-jd{min-height:120px}
          #clStudio .cl-v2-count{text-align:right;font:400 12px/1 var(--tl-bodyf);color:var(--tl-mute);margin-top:6px}
          #clStudio .cl-v2-flabel{font:500 12.5px/1 var(--tl-display);color:var(--tl-ink);margin:16px 0 9px}
          #clStudio .cl-v2-step-body>.cl-v2-flabel:first-child,#clStudio .cl-v2-step-body .cl-v2-pull+.cl-v2-flabel{margin-top:0}
          #clStudio .cl-v2-caption{font:400 12px/1.4 var(--tl-bodyf);color:var(--tl-grey);margin-top:9px}
          #clStudio .cl-v2-note{font:400 12px/1.4 var(--tl-bodyf);color:var(--tl-blue);margin-top:9px}
          #clStudio .cl-v2-help{font:400 12.5px/1.45 var(--tl-bodyf);color:var(--tl-grey);margin:0 0 9px}

          /* Chips: v2 grammar, overriding the handler's inline colours */
          #jjPage_cover #clStudio .cl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:0}
          #jjPage_cover #clStudio .cl-chip{background:var(--tl-card) !important;border:1px solid var(--tl-hair) !important;color:var(--tl-body) !important;border-radius:999px;padding:7px 13px;font:500 12.5px/1 var(--tl-bodyf);cursor:pointer;transition:border-color .14s,background .14s}
          #jjPage_cover #clStudio .cl-chip:hover{border-color:var(--tl-mute) !important}
          #jjPage_cover #clStudio .cl-chip[style*="--jh-accent"],#jjPage_cover #clStudio .cl-chip.sel{background:var(--tl-tint) !important;border-color:var(--tl-tint-border) !important;color:var(--tl-blue) !important}
          #jjPage_cover #clStudio .cl-chip[style*="--jh-accent"]::after,#jjPage_cover #clStudio .cl-chip.sel::after{content:"\2713";margin-left:6px;font-weight:600}

          #clStudio .cl-v2-pull{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#fff;border:1px dashed var(--tl-hair);border-radius:var(--tl-radius-sm);padding:12px 14px;cursor:pointer;text-align:left;margin-bottom:4px;transition:border-color .14s}
          #clStudio .cl-v2-pull:hover{border-color:var(--tl-blue)}
          #clStudio .cl-v2-pull-ico{color:var(--tl-blue);font-size:18px}
          #clStudio .cl-v2-pull-t{font:500 13px/1.2 var(--tl-display);color:var(--tl-ink)}
          #clStudio .cl-v2-pull-s{font:400 12px/1.2 var(--tl-bodyf);color:var(--tl-grey)}
          #clStudio .cl-v2-proof{margin-top:14px;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-sm);background:#fff;padding:13px 14px}
          #clStudio .cl-v2-voicetog{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-sm);padding:10px 13px;cursor:pointer;font:400 13px/1.2 var(--tl-bodyf);color:var(--tl-ink);margin-top:12px}
          #clStudio .cl-v2-voicetog strong{font-weight:600}
          #clStudio .cl-v2-voicebody{margin-top:10px}
          #clStudio .cl-v2-voicerow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
          #clStudio .cl-v2-voiceprev{font:400 12px/1.4 var(--tl-bodyf);color:var(--tl-grey)}
          #clStudio .cl-v2-ghost{background:none;border:0;padding:0;font:500 12px/1 var(--tl-display);color:var(--tl-blue);cursor:pointer}

          /* Generate (in-flow hero, full width of the wrap) + ticks */
          #clStudio .cl-v2-generate{width:100%;margin-top:24px;border:0;border-radius:var(--tl-radius);background:var(--tl-blue);color:#fff;font:500 16px/1 var(--tl-display);letter-spacing:-0.01em;padding:16px;cursor:pointer;transition:background .15s}
          #clStudio .cl-v2-generate:hover{background:var(--tl-blue-d)}
          #clStudio .cl-v2-ticks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
          #clStudio .cl-v2-ticks li{position:relative;padding-left:20px;font:400 12.5px/1.4 var(--tl-bodyf);color:var(--tl-grey)}
          #clStudio .cl-v2-ticks li::before{content:"\2713";position:absolute;left:0;color:var(--tl-blue);font-weight:600}
          /* ---- Cover Letter Studio (#clStudio) Slice 1: split-screen layout. Scoped
               under #clStudio with cl-st-* classes + local --tl-* tokens (rescoped here
               from #clScreenCompose). NO .tl-theme on #jjPage_cover. Visual system is
               Slice 2; this is structure only. ---- */
          /* Full-bleed: the builder spans from the sidebar edge to the window edge for
             both views. Relax the three centring layers (the page horizontal padding,
             the page-body max-width/centring, and the studio max-width/centring/gutters),
             scoped to #jjPage_cover so other pages are untouched. The letter keeps its
             66ch measure (above) so the frame widens, not the prose line. */
          #jjPage_cover.jj-page{padding-left:0;padding-right:0}
          #jjPage_cover #jjWrap_cover{max-width:none;margin:0}
          #clStudio{max-width:none;margin:0;padding:8px 0 56px}
          #clStudio .cl-st-hero{margin:6px 0 26px;max-width:760px}
          #clStudio .cl-st-eyebrow{font:600 11px/1 var(--tl-bodyf);letter-spacing:.12em;text-transform:uppercase;color:var(--tl-mute);margin-bottom:12px}
          #clStudio .cl-st-h1{margin:0;font:500 46px/0.98 var(--tl-display);letter-spacing:-0.04em;color:var(--tl-ink)}
          #clStudio .cl-st-hero-copy{margin:16px 0 0;font:400 15px/1.55 var(--tl-bodyf);color:var(--tl-grey);max-width:640px}
          #clStudio .cl-st-workspace{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:26px;align-items:start}
          #clStudio .cl-st-setup{background:rgba(255,255,255,.6);border:1px solid var(--tl-hair);border-radius:16px;padding:6px 18px 14px;align-self:start}
          #clStudio .cl-st-preview{min-width:0;position:sticky;top:14px}
          #clStudio .cl-st-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px}
          #clStudio .cl-st-tb-left{display:flex;align-items:center;gap:9px}
          #clStudio .cl-st-livedot{width:7px;height:7px;border-radius:50%;background:#177449;box-shadow:0 0 0 4px rgba(23,116,73,.08)}
          #clStudio .cl-st-tb-label{font:600 11px/1 var(--tl-bodyf);letter-spacing:.08em;text-transform:uppercase;color:var(--tl-mute)}
          #clStudio .cl-st-paper{background:#fffefb;border:1px solid #dedbd3;border-radius:3px;box-shadow:0 18px 50px rgba(17,18,22,.08),0 2px 8px rgba(17,18,22,.04);min-height:620px;padding:48px 56px;position:relative;overflow:hidden}
          #clStudio .cl-st-paper::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tl-blue)}
          #clStudio .cl-st-empty{display:flex;align-items:center;justify-content:center;text-align:center}
          #clStudio .cl-st-empty-inner{max-width:380px;margin:60px auto}
          #clStudio .cl-st-empty-eyebrow{font:600 11px/1 var(--tl-bodyf);letter-spacing:.1em;text-transform:uppercase;color:var(--tl-mute);margin-bottom:12px}
          #clStudio .cl-st-empty-h{margin:0 0 10px;font:500 26px/1.1 var(--tl-display);letter-spacing:-0.02em;color:var(--tl-ink)}
          #clStudio .cl-st-empty-p{margin:0 0 22px;font:400 14px/1.6 var(--tl-bodyf);color:var(--tl-grey)}
          #clStudio .cl-st-empty-cta{border:0;border-radius:12px;background:var(--tl-blue);color:#fff;font:500 15px/1 var(--tl-display);padding:14px 22px;cursor:pointer;transition:background .15s}
          #clStudio .cl-st-empty-cta:hover{background:var(--tl-blue-d)}
          /* Cover-letter preview empty-state redesign (cl-pv-*). Additive only.
             Copies the Interview Prep declarations but scoped to #clStudio so the
             var(--tl-*) refs resolve against the studio tokens. Body font uses
             --tl-bodyf (the studio body token; --tl-body-font is not defined here). */
          #clStudio .cl-pv{padding:22px 24px 24px;overflow-y:auto;max-height:100%}
          #clStudio .cl-pv-banner{display:flex;align-items:center;gap:14px;background:var(--tl-tint);border:1px solid var(--tl-hair);border-radius:14px;padding:13px 16px}
          #clStudio .cl-pv-billy{flex:0 0 auto;height:52px;width:calc(52px * 218 / 164);background-image:url('billy-eat-164-v6.webp');background-size:800% 100%;background-position-x:0%;background-repeat:no-repeat;image-rendering:pixelated}
          #clStudio .cl-pv-banner:hover .cl-pv-billy{animation:tlBillyEat 1.4s steps(8,jump-none) forwards}
          @media (prefers-reduced-motion: reduce){#clStudio .cl-pv-banner:hover .cl-pv-billy{animation:none}}
          #clStudio .cl-pv-banner-t{margin:0 0 2px;font:500 15.5px/1.2 var(--tl-display);letter-spacing:-.01em;color:var(--tl-blue)}
          #clStudio .cl-pv-banner-p{margin:0;font:400 12.5px/1.45 var(--tl-bodyf);color:var(--tl-grey)}
          #clStudio .cl-pv-hero{padding:28px 4px 4px}
          #clStudio .cl-pv-hero-h{margin:0 0 9px;font-family:var(--tl-display);font-weight:500;letter-spacing:-.03em;font-size:40px;line-height:.98;color:var(--tl-ink);max-width:13ch;overflow-wrap:break-word}
          #clStudio .cl-pv-accent{color:var(--tl-blue)}
          #clStudio .cl-pv-sub{margin:0;max-width:42ch;font:400 13.5px/1.55 var(--tl-bodyf);color:var(--tl-grey)}
          #clStudio .cl-pv-gen{margin-top:18px;width:100%;border:1px solid var(--tl-blue);border-radius:var(--tl-radius);background:var(--tl-blue);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
          #clStudio .cl-pv-gen:hover{background:var(--tl-blue-d);border-color:var(--tl-blue-d)}
          #clStudio .cl-pv-gen:active{transform:scale(.99)}
          #clStudio .cl-pv-gen-main{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
          #clStudio .cl-pv-gen-lab{font-family:var(--tl-display);font-weight:500;font-size:18px;line-height:1.15;letter-spacing:-.01em;color:#fff}
          #clStudio .cl-pv-gen-sub{font-family:var(--tl-bodyf);font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.72)}
          #clStudio .cl-pv-gen-chev{color:#fff;flex:0 0 auto;display:inline-flex;align-items:center}
          #clStudio .cl-pv-proof{margin-top:24px;padding:15px 16px 17px;background:var(--tl-bg);border:1px solid var(--tl-hair);border-radius:13px}
          #clStudio .cl-pv-proof-label{font:700 10.5px/1 var(--tl-bodyf);letter-spacing:.12em;text-transform:uppercase;color:var(--tl-mute);margin-bottom:11px}
          #clStudio .cl-pv-line{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px}
          #clStudio .cl-pv-line:last-child{margin-bottom:0}
          #clStudio .cl-pv-sent{font:400 13.5px/1.5 var(--tl-bodyf);color:var(--tl-ink);flex:1}
          #clStudio .cl-pv-tag{flex:0 0 auto;margin-top:1px;font:600 10.5px/1 var(--tl-bodyf);padding:5px 8px;border-radius:999px;white-space:nowrap;border:1px solid currentColor;background:transparent}
          #clStudio .cl-pv-tag-src{color:var(--st-green)}
          #clStudio .cl-pv-tag-own{color:var(--st-amber)}
          #clStudio .cl-pv-how{margin-top:24px;padding-top:22px;border-top:1px solid var(--tl-hair)}
          #clStudio .cl-pv-how-label{font:700 11px/1 var(--tl-bodyf);letter-spacing:.12em;text-transform:uppercase;color:var(--tl-mute);margin-bottom:16px}
          #clStudio .cl-pv-step{display:flex;gap:13px;margin-bottom:15px;align-items:flex-start}
          #clStudio .cl-pv-step:last-of-type{margin-bottom:0}
          #clStudio .cl-pv-step-txt b{display:block;font:700 13.5px/1.3 var(--tl-bodyf);color:var(--tl-ink);margin-bottom:1px}
          #clStudio .cl-pv-step-txt span{font:400 12.5px/1.5 var(--tl-bodyf);color:var(--tl-grey)}
          #clStudio .cl-pv-closer{margin-top:20px;padding-top:16px;border-top:1px solid var(--tl-hair);font:700 14px/1.45 var(--tl-display);letter-spacing:-.01em;color:var(--tl-blue);text-align:center}
          #clStudio .cl-v2-wrap{max-width:none;padding:8px 0 16px}
          @media (max-width:980px){#clStudio .cl-st-workspace{grid-template-columns:1fr}#clStudio .cl-st-preview{position:static}}
          @media (max-width:560px){#clStudio .cl-st-h1{font-size:34px}}
          /* ---- Slice 2 reskin: reference visual system, scoped #clStudio (additive). ---- */
          #clStudio{--st-canvas:#f3f1ec;--st-paper:#fffefb;--st-ink:#111216;--st-muted:#666970;--st-faint:#96999f;--st-line:#d9d8d3;--st-line-soft:#e8e6e0;--st-blue:#2448FF;--st-green:#177449;--st-amber:#a06f18;--st-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
          #jjPage_cover:has(#clStudio){background:var(--st-canvas)}
          #clStudio .cl-st-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:end;max-width:none}
          #clStudio .cl-st-hero-main{min-width:0}
          #clStudio .cl-st-h1 em{font-family:var(--st-serif);font-style:italic;font-weight:500;color:var(--st-blue);letter-spacing:-0.03em}
          #clStudio .cl-st-hero-side{border-top:1px solid var(--st-ink);padding-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
          #clStudio .cl-st-k{font:600 10px/1 var(--tl-bodyf);letter-spacing:.1em;text-transform:uppercase;color:var(--st-faint)}
          #clStudio .cl-st-v{font:600 14px/1.3 var(--tl-bodyf);color:var(--st-ink);margin-top:4px}
          #clStudio .cl-st-tb-actions{display:flex;align-items:center;gap:8px}
          #clStudio .cl-st-tool{height:32px;border:1px solid var(--st-line);background:rgba(255,255,255,.65);border-radius:9px;padding:0 11px;font:600 11.5px/1 var(--tl-bodyf);color:var(--st-muted);cursor:pointer;transition:.14s}
          #clStudio .cl-st-tool:hover{color:var(--st-ink)}
          #clStudio .cl-st-tool.on{color:var(--st-blue);border-color:#cbd3ff;background:#eef1ff}
          #clStudio .cl-st-livedot{transition:background .2s,box-shadow .2s}
          #clStudio .cl-st-livedot.is-stale{background:var(--st-amber);box-shadow:0 0 0 4px rgba(160,111,24,.1)}
          #clStudio #jhClDisplay{font-family:var(--st-serif);font-size:16.5px;line-height:1.75;color:#1b1c20}
          #clStudio #jhClDisplay:not(.cl-st-evidence) .jh-sent-green,#clStudio #jhClDisplay:not(.cl-st-evidence) .jh-sent-amber,#clStudio #jhClDisplay:not(.cl-st-evidence) .jh-sent-red{border-left-color:transparent !important;background:transparent !important;text-decoration:none !important}
          #clStudio .cl-st-believe{display:flex;align-items:center;gap:10px;margin-top:14px;font:600 11.5px/1 var(--tl-bodyf);color:var(--st-green)}
          #clStudio .cl-st-believe-dot{width:7px;height:7px;border-radius:50%;background:var(--st-green)}
          #clStudio .cl-st-believe.is-warn{color:var(--st-amber)}
          #clStudio .cl-st-believe.is-warn .cl-st-believe-dot{background:var(--st-amber)}
          #clStudio .cl-st-believe-sep{width:1px;height:12px;background:var(--st-line)}
          #clStudio .cl-st-believe-backed{color:var(--st-muted)}
          #clStudio .cl-st-download{margin-top:14px;width:100%;border:0;border-radius:13px;background:var(--st-blue);color:#fff;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:0 10px 24px rgba(36,72,255,.2)}
          #clStudio .cl-st-dl-main{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
          #clStudio .cl-st-dl-main strong{font:500 14px/1 var(--tl-display)}
          #clStudio .cl-st-dl-sub{font:400 11px/1 var(--tl-bodyf);color:#d2d9ff}
          @media(max-width:980px){#clStudio .cl-st-hero{grid-template-columns:1fr;gap:24px}#clStudio .cl-st-hero-side{max-width:420px}}
          /* ---- setup-pane layout fix (scoped #clStudio): widen the left pane and
               stack every step single-column so description sits ABOVE full-width fields
               (the moved cl-v2 two-column grid squeezed inputs into a ~120px sub-column). ---- */
          #clStudio .cl-st-workspace{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}
          #clStudio .cl-v2-step{grid-template-columns:1fr;row-gap:13px}
          #clStudio .cl-v2-step-head{grid-column:1}
          #clStudio .cl-v2-step-body{grid-column:1}
          #clStudio .cl-v2-input,#clStudio .cl-v2-ta{width:100%}
          #clStudio .cl-chip{white-space:nowrap}
          @media (max-width:980px){#clStudio .cl-st-workspace{grid-template-columns:1fr}}
          /* ---- review focus: collapse setup to a thin rail; letter fills the space (scoped #clStudio). ---- */
          #clStudio .cl-st-rail{display:none}
          #clStudio.cl-st-focus .cl-st-workspace{grid-template-columns:212px minmax(0,1fr)}
          #clStudio.cl-st-focus .cl-v2-wrap{display:none}
          #clStudio.cl-st-focus .cl-st-rail{display:block}
          #clStudio .cl-st-rail-k{font:600 10px/1 var(--tl-bodyf);letter-spacing:.1em;text-transform:uppercase;color:var(--st-faint);margin-bottom:8px}
          #clStudio .cl-st-rail-role{font:500 16px/1.25 var(--tl-display);letter-spacing:-0.01em;color:var(--st-ink)}
          #clStudio .cl-st-rail-co{font:400 13px/1.4 var(--tl-bodyf);color:var(--st-muted);margin-top:3px}
          #clStudio .cl-st-rail-edit{margin-top:14px;width:100%;border:1px solid var(--st-line);background:#fff;border-radius:10px;padding:9px 12px;font:600 12.5px/1 var(--tl-bodyf);color:var(--st-blue);cursor:pointer;transition:.14s}
          #clStudio .cl-st-rail-edit:hover{border-color:var(--st-blue)}
          #clStudio #jhClDisplay{max-width:66ch}
          /* Review focus pass: present the clean workspace - hide compose furniture, single column, wider studio, score shown once. */
          #clStudio.cl-st-focus{max-width:none}
          #clStudio.cl-st-focus .cl-st-hero,#clStudio.cl-st-focus .cl-st-toolbar{display:none}
          #clStudio.cl-st-focus .cl-st-workspace{grid-template-columns:1fr}
          #clStudio.cl-st-focus .cl-st-rail{display:none}
          #clStudio.cl-st-focus #clStRingNum{display:none}
          #clStudio.cl-st-focus .cl-st-ring-viz{display:none}
          @media (max-width:980px){#clStudio.cl-st-focus .cl-st-workspace{grid-template-columns:1fr}}
          /* ---- review letter-width pass: give the centre letter a comfortable column across sizes (CSS only, review-focus scoped). ---- */
          #jjPage_cover.jj-page:has(#clStudio.cl-st-focus){padding-left:0;padding-right:0}
          @media (min-width:1401px){#clStudio.cl-st-focus .cl-review-body{grid-template-columns:260px minmax(0,1fr) 280px}}
          @media (min-width:761px) and (max-width:1400px){
            #clStudio.cl-st-focus .cl-review-body{grid-template-columns:minmax(0,1fr) 280px;grid-template-areas:"left left" "sheet side"}
            #clStudio.cl-st-focus .cl-ws-left{grid-area:left}
            #clStudio.cl-st-focus .cl-glass.cl-sheet{grid-area:sheet}
            #clStudio.cl-st-focus .cl-side{grid-area:side}
          }
          /* Review surface restyle: harmonise the letter sheet and the classification/quality cards to the calm paper system (review-focus only). No status colour touched. */
          #clStudio.cl-st-focus .cl-sheet,
          #clStudio.cl-st-focus .cl-classify{
            background:var(--st-paper);
            border:1px solid var(--st-line);
            box-shadow:0 1px 2px rgba(17,18,22,.04);
            border-radius:14px;
          }
          /* Centre action bar: surfaces the existing jhClVersion rewrite directives as the mock's bottom bar (review focus only). No new AI logic. */
          #clStudio.cl-st-focus .cl-action-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--st-line)}
          #clStudio.cl-st-focus .cl-action-btn{font:600 12.5px/1 var(--tl-bodyf);padding:9px 14px;border-radius:99px;cursor:pointer;background:var(--st-paper);border:1px solid var(--st-line);color:var(--st-ink);transition:border-color .14s ease,background .14s ease,color .14s ease}
          #clStudio.cl-st-focus .cl-action-btn:hover{border-color:var(--st-blue);color:var(--st-blue)}
          #clStudio.cl-st-focus .cl-action-rewrite{margin-left:auto;background:var(--st-blue);border-color:var(--st-blue);color:#fff}
          #clStudio.cl-st-focus .cl-action-rewrite:hover{background:#1a3ce0;border-color:#1a3ce0;color:#fff}
          /* Sheet footer: quiet "Based on" descriptor + live word count (review focus only). */
          #clStudio.cl-st-focus .cl-sheet-footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--st-line);font:400 11.5px/1.4 var(--tl-bodyf)}
          #clStudio.cl-st-focus .cl-sheet-based{color:var(--st-muted)}
          #clStudio.cl-st-focus .cl-sheet-words{margin-left:auto;color:var(--st-faint)}
          #clStudio.cl-st-focus .cl-sheet-based:empty,#clStudio.cl-st-focus .cl-sheet-words:empty{display:none}
          #clStudio.cl-st-focus .cl-sheet-footer:not(:has(span:not(:empty))){display:none}
          /* What is working / What needs attention: read-only re-group of the existing quality findings (review focus only). */
          #clStudio.cl-st-focus .cl-workatt{display:flex;flex-direction:column;gap:16px}
          #clStudio.cl-st-focus .cl-workatt-h{font:600 11px/1.2 var(--tl-bodyf);letter-spacing:.05em;text-transform:uppercase;color:var(--st-faint);margin-bottom:9px}
          #clStudio.cl-st-focus .cl-workatt-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
          #clStudio.cl-st-focus .cl-workatt-item{position:relative;font:400 12.5px/1.45 var(--tl-bodyf);color:var(--st-ink)}
          #clStudio.cl-st-focus .cl-workatt-good .cl-workatt-item{padding-left:20px}
          #clStudio.cl-st-focus .cl-workatt-good .cl-workatt-item::before{content:"";position:absolute;left:0;top:1px;width:13px;height:13px;background-color:var(--st-green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat}
          #clStudio.cl-st-focus .cl-workatt-warn{counter-reset:wa}
          #clStudio.cl-st-focus .cl-workatt-warn .cl-workatt-item{padding-left:22px;counter-increment:wa}
          #clStudio.cl-st-focus .cl-workatt-warn .cl-workatt-item::before{content:counter(wa);position:absolute;left:0;top:0;font:700 11.5px/1.45 var(--tl-bodyf);color:var(--st-amber)}
          /* ---- believability ring (swaps the #clStBelieve line; mirrors .score-ring, scoped #clStudio). ---- */
          #clStudio .cl-st-believe{display:none !important}
          #clStudio .cl-st-ring{display:flex;align-items:center;gap:14px;margin-top:14px}
          #clStudio .cl-st-ring-viz{position:relative;width:64px;height:64px;flex:0 0 auto}
          #clStudio .cl-st-ring-svg{width:64px;height:64px;transform:rotate(-90deg)}
          #clStudio .cl-st-ring-track{fill:none;stroke:#e6e4dd;stroke-width:5}
          #clStudio .cl-st-ring-arc{fill:none;stroke:var(--st-green);stroke-width:5;stroke-linecap:round;stroke-dasharray:169.646;stroke-dashoffset:169.646;transition:stroke-dashoffset .5s ease}
          #clStudio .cl-st-ring.is-warn .cl-st-ring-arc{stroke:var(--st-amber)}
          #clStudio .cl-st-ring-num{position:absolute;inset:0;display:grid;place-items:center;font:500 20px/1 var(--tl-display);letter-spacing:-0.02em;color:var(--st-ink)}
          #clStudio .cl-st-ring.is-warn .cl-st-ring-num{color:var(--st-amber)}
          #clStudio .cl-st-ring-meta{min-width:0}
          #clStudio .cl-st-ring-verdict{font:600 12.5px/1.2 var(--tl-bodyf);color:var(--st-green)}
          #clStudio .cl-st-ring.is-warn .cl-st-ring-verdict{color:var(--st-amber)}
          #clStudio .cl-st-ring-sub{font:400 11.5px/1.35 var(--tl-bodyf);color:var(--st-muted);margin-top:3px}
          @media (prefers-reduced-motion:reduce){#clStudio .cl-st-ring-arc{transition:none}}
          /* ---- studio hero trigger for the New cover letter popup ---- */
          #clStudio .cl-st-new-btn{margin-top:18px;border:0;border-radius:11px;background:var(--st-blue);color:#fff;font:500 13.5px/1 var(--tl-display);letter-spacing:-0.01em;padding:12px 18px;cursor:pointer;transition:background .15s}
          #clStudio .cl-st-new-btn:hover{background:#1f3dd9}
          /* ---- New cover letter popup (scoped #clNewOverlay, cl-new-* ; mirrors rr-paywall-overlay). ---- */
          #clNewOverlay{--cn-blue:#2448FF;--cn-ink:#111216;--cn-muted:#666970;--cn-faint:#96999f;--cn-line:#e6e4dd;--cn-card:#fff;--cn-disp:"Space Grotesk","Albert Sans",system-ui,sans-serif;--cn-body:"Plus Jakarta Sans",system-ui,sans-serif;position:fixed;inset:0;background:rgba(17,18,22,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;z-index:10000;padding:40px 20px;overflow-y:auto}
          #clNewOverlay.open{display:flex}
          #clNewOverlay .cl-new-modal{width:100%;max-width:620px;background:var(--cn-card);border-radius:16px;box-shadow:0 24px 70px rgba(17,18,22,.28);font-family:var(--cn-body);color:var(--cn-ink);overflow:hidden}
          #clNewOverlay .cl-new-head{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 26px 16px;border-bottom:1px solid var(--cn-line)}
          #clNewOverlay .cl-new-eyebrow{font:600 10.5px/1 var(--cn-body);letter-spacing:.12em;text-transform:uppercase;color:var(--cn-faint);margin-bottom:7px}
          #clNewOverlay .cl-new-h{margin:0;font:500 22px/1.1 var(--cn-disp);letter-spacing:-0.02em;color:var(--cn-ink)}
          #clNewOverlay .cl-new-x{border:0;background:none;font-size:24px;line-height:1;color:var(--cn-faint);cursor:pointer;padding:0 4px}
          #clNewOverlay .cl-new-x:hover{color:var(--cn-ink)}
          #clNewOverlay .cl-new-body{padding:4px 26px 8px}
          #clNewOverlay .cl-new-step{display:grid;grid-template-columns:188px minmax(0,1fr);gap:22px;padding:20px 0;border-top:1px solid var(--cn-line)}
          #clNewOverlay .cl-new-step:first-child{border-top:0}
          #clNewOverlay .cl-new-step-head{display:flex;gap:12px;align-items:flex-start}
          #clNewOverlay .cl-new-badge{flex:0 0 26px;width:26px;height:26px;border-radius:999px;background:var(--cn-blue);color:#fff;font:600 11px/1 var(--cn-disp);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
          #clNewOverlay .cl-new-step-copy strong{display:block;font:500 14.5px/1.2 var(--cn-disp);letter-spacing:-0.01em;color:var(--cn-ink)}
          #clNewOverlay .cl-new-step-copy p{margin:4px 0 0;font:400 12.5px/1.45 var(--cn-body);color:var(--cn-muted)}
          #clNewOverlay .cl-new-seg{display:inline-flex;gap:4px;background:#f3f1ec;border-radius:9px;padding:3px;margin-bottom:12px}
          #clNewOverlay .cl-new-seg-btn{border:0;background:none;border-radius:7px;padding:6px 12px;font:600 12px/1 var(--cn-body);color:var(--cn-muted);cursor:pointer}
          #clNewOverlay .cl-new-seg-btn.is-on{background:#fff;color:var(--cn-ink);box-shadow:0 1px 3px rgba(17,18,22,.08)}
          #clNewOverlay .cl-new-seg-btn[disabled]{cursor:not-allowed;opacity:.6}
          #clNewOverlay .cl-new-soon{font:600 9px/1 var(--cn-body);letter-spacing:.06em;text-transform:uppercase;color:var(--cn-faint);margin-left:5px}
          #clNewOverlay .cl-new-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
          #clNewOverlay .cl-new-field{margin-top:11px}
          #clNewOverlay .cl-new-field:first-child,#clNewOverlay .cl-new-row2 .cl-new-field{margin-top:0}
          #clNewOverlay label{display:block;font:600 10px/1 var(--cn-body);letter-spacing:.07em;text-transform:uppercase;color:var(--cn-faint);margin-bottom:6px}
          #clNewOverlay .cl-new-input,#clNewOverlay .cl-new-ta{width:100%;box-sizing:border-box;border:1px solid #deded9;border-radius:10px;background:#fff;padding:10px 12px;font:400 13.5px/1.5 var(--cn-body);color:var(--cn-ink);outline:none;transition:border-color .15s}
          #clNewOverlay .cl-new-input:focus,#clNewOverlay .cl-new-ta:focus{border-color:var(--cn-blue);box-shadow:0 0 0 3px rgba(36,72,255,.1)}
          #clNewOverlay .cl-new-ta{resize:vertical;min-height:84px}
          #clNewOverlay .cl-new-cvcard{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--cn-line);border-radius:11px;padding:11px 12px}
          #clNewOverlay .cl-new-cv-ico{width:32px;height:32px;border-radius:8px;background:#f4f4f2;display:grid;place-items:center;color:var(--cn-muted);flex:0 0 auto}
          #clNewOverlay .cl-new-cv-info{min-width:0;flex:1}
          #clNewOverlay .cl-new-cv-info strong{display:block;font:500 12.5px/1.2 var(--cn-disp);color:var(--cn-ink)}
          #clNewOverlay .cl-new-cv-info span{display:block;font:400 11.5px/1.3 var(--cn-body);color:var(--cn-muted);margin-top:2px}
          #clNewOverlay .cl-new-cv-edit{border:1px solid var(--cn-line);background:#fff;border-radius:8px;padding:6px 11px;font:600 11.5px/1 var(--cn-body);color:var(--cn-blue);cursor:pointer}
          #clNewOverlay .cl-new-hint{margin:0 0 9px;font:400 12.5px/1.45 var(--cn-body);color:var(--cn-muted)}
          #clNewOverlay .cl-new-pills{display:flex;flex-wrap:wrap;gap:8px}
          #clNewOverlay .cl-new-pill{border:1px solid var(--cn-line);background:#fff;border-radius:999px;padding:8px 15px;font:500 12.5px/1 var(--cn-body);color:var(--cn-muted);cursor:pointer;transition:.14s;white-space:nowrap}
          #clNewOverlay .cl-new-pill.is-on{border-color:var(--cn-blue);background:#eef1ff;color:var(--cn-blue)}
          #clNewOverlay .cl-new-foot{padding:16px 26px 22px;border-top:1px solid var(--cn-line)}
          #clNewOverlay .cl-new-generate{width:100%;border:0;border-radius:12px;background:var(--cn-blue);color:#fff;font:500 15px/1 var(--cn-disp);letter-spacing:-0.01em;padding:14px;cursor:pointer;transition:background .15s}
          #clNewOverlay .cl-new-generate:hover{background:#1f3dd9}
          @media (max-width:560px){#clNewOverlay .cl-new-step{grid-template-columns:1fr;gap:12px}#clNewOverlay .cl-new-row2{grid-template-columns:1fr}}
          @media (prefers-reduced-motion:reduce){#clNewOverlay,#clNewOverlay *{transition:none}}
          /* Mobile pass (phone-width only, additive): raise the most-pressed builder controls
             to a comfortable tap size and collapse the requirement chips one-up. Scoped under
             #jjPage_cover #clStudio to win over the base specificity; all inside media queries
             so the desktop layout is untouched. CSS only, no markup change, spine untouched. */
          @media (max-width:480px){
            #jjPage_cover #clStudio .cl-gap-check-btn{min-height:44px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center}
            #jjPage_cover #clStudio .cl-angle-btn{min-height:44px;padding:12px 16px;display:inline-flex;align-items:center;justify-content:center}
            #jjPage_cover #clStudio .cl-angle-link{min-height:44px;padding:12px 10px;display:inline-flex;align-items:center}
            #jjPage_cover #clStudio .cl-angle-suggest{min-height:46px;padding:13px 14px}
            #jjPage_cover #clStudio .cl-chip{min-height:40px;padding:10px 14px;display:inline-flex;align-items:center}
            #jjPage_cover #clStudio .cl-mi-add{min-height:44px;padding:12px 16px;display:inline-flex;align-items:center;justify-content:center}
            #jjPage_cover #clStudio .cl-mi-x{width:40px;height:40px;font-size:15px}
            #jjPage_cover #clStudio .cl-hl-item{min-height:44px;padding:11px 12px}
            #jjPage_cover #clStudio .cl-st-tool{min-height:40px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center}
            #jjPage_cover #clStudio .cl-shell-save{min-height:40px;padding:10px 14px;display:inline-flex;align-items:center}
            #jjPage_cover #clStudio .cl-shell-kebab{width:40px;height:40px}
            #jjPage_cover #clStudio .cl-st-paper{padding:24px 18px}
          }
          @media (max-width:560px){
            #jjPage_cover #clStudio #clRailReqChips{grid-template-columns:1fr}
          }
          
          /* ── AI Job Search (replaces Sponsor Check), all scoped to #jjPage_sponsor, ajs- prefix ── */
          #jjPage_sponsor{
            --ajs-cream:#F0ECE1; --ajs-panel:#FFFFFF; --ajs-panel-warm:#E7E1D2;
            --ajs-ink:#17171A; --ajs-dim:#6B6860; --ajs-line:rgba(23,23,26,0.12);
            --ajs-accent:#DEEB4C; --ajs-accent-ink:#17171A; --ajs-navy:#332D52;
            --ajs-lavender:#D8CFFF; --ajs-green:#0E9F6E; --ajs-green-soft:#E3F9F0;
            --ajs-amber:#B45309; --ajs-amber-soft:#FDF1DF;
            --ajs-font-serif:'Iowan Old Style','Sitka Text',Georgia,'Times New Roman',serif;
            --ajs-mono:'SF Mono','IBM Plex Mono',ui-monospace,'Courier New',monospace;
            --ajs-shadow:0 4px 16px rgba(23,23,26,0.06), 0 1px 3px rgba(23,23,26,0.05);
          }
          #jjPage_sponsor .ajs-hidden{ display:none !important; }
          #jjPage_sponsor .ajs-head-controls{ display:flex; align-items:center; gap:12px; }
          #jjPage_sponsor .ajs-sponsors-only-toggle{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ajs-dim); cursor:pointer; user-select:none; }
          #jjPage_sponsor .ajs-sponsors-only-toggle input{ accent-color:var(--ajs-green); width:15px; height:15px; cursor:pointer; }
          #jjPage_sponsor .ajs-sponsors-only-toggle:has(input:checked){ color:var(--ajs-green); }
          #jjPage_sponsor .ajs-job-card.ajs-sponsor-filtered{ display:none !important; }
          #jjPage_sponsor .ajs-cancel-btn{ background:transparent; border:1px solid var(--ajs-line); color:var(--ajs-dim); font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:999px; cursor:pointer; margin-left:8px; }
          #jjPage_sponsor .ajs-thinking-row .ajs-cancel-btn{ margin-left:auto; }
          #jjPage_sponsor .ajs-cancel-btn:hover{ color:var(--ajs-accent-ink); border-color:var(--ajs-accent-ink); }
          #jjPage_sponsor .ajs-assumption-note{ font-size:12px; color:var(--ajs-dim); margin:0 0 10px; font-style:italic; }
          #jjPage_sponsor .ajs-cv-alt-roles{ margin-bottom:14px; }
          #jjPage_sponsor .ajs-lang-toggle{ position:relative; display:flex; background:var(--ajs-panel); border:1px solid var(--ajs-line); border-radius:999px; padding:3px; width:100px; }
          #jjPage_sponsor .ajs-lang-toggle button{ position:relative; z-index:2; flex:1; border:none; background:transparent; color:var(--ajs-dim); font-size:11.5px; font-weight:600; padding:6px 0; border-radius:999px; transition:color .3s; cursor:pointer; }
          #jjPage_sponsor .ajs-lang-toggle button.active{ color:var(--ajs-accent-ink); }
          #jjPage_sponsor .ajs-lang-slider{ position:absolute; top:3px; left:3px; width:calc(50% - 3px); height:calc(100% - 6px); background:var(--ajs-accent); border-radius:999px; transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:1; }

          #jjPage_sponsor .ajs-root{ display:flex; flex-direction:column; height:calc(100vh - 190px); min-height:460px; max-width:820px; margin:0 auto; width:100%; }
          #jjPage_sponsor .ajs-chat-area{ flex:1; overflow-y:auto; display:flex; flex-direction:column; }

          #jjPage_sponsor .ajs-empty-state{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 8px; text-align:center; }
          #jjPage_sponsor .ajs-empty-state h2{ font-size:clamp(24px,3vw,32px); font-weight:500; letter-spacing:-0.01em; font-family:var(--ajs-font-serif); color:var(--ajs-ink); }
          #jjPage_sponsor .ajs-empty-state > p{ font-size:14.5px; color:var(--ajs-dim); margin:10px 0 20px; max-width:460px; line-height:1.55; }

          #jjPage_sponsor .ajs-profile-note{ font-size:12.5px; color:var(--ajs-dim); margin-bottom:14px; max-width:600px; }
          #jjPage_sponsor .ajs-profile-note button{ border:none; background:transparent; color:var(--ajs-navy); font-weight:600; cursor:pointer; text-decoration:underline; padding:0; font-size:12.5px; }

          #jjPage_sponsor .ajs-about-you{ width:100%; max-width:600px; margin-bottom:14px; text-align:left; }
          #jjPage_sponsor .ajs-about-you summary{ font-size:12.5px; font-weight:600; color:var(--ajs-dim); cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; }
          #jjPage_sponsor .ajs-about-you summary::-webkit-details-marker{ display:none; }
          #jjPage_sponsor .ajs-about-you summary svg{ width:12px; height:12px; transition:transform .2s; }
          #jjPage_sponsor .ajs-about-you[open] summary svg{ transform:rotate(90deg); }
          #jjPage_sponsor .ajs-about-you textarea{ width:100%; margin-top:8px; min-height:56px; resize:vertical; border:1px solid var(--ajs-line); border-radius:10px; padding:10px 12px; font-size:13px; color:var(--ajs-ink); background:var(--ajs-panel); }
          #jjPage_sponsor .ajs-about-you textarea:focus{ outline:none; border-color:var(--ajs-navy); }
          #jjPage_sponsor .ajs-about-you textarea::placeholder{ color:var(--ajs-dim); }

          #jjPage_sponsor .ajs-composer-wrap{ width:100%; max-width:600px; }
          #jjPage_sponsor .ajs-attachment-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
          #jjPage_sponsor .ajs-attachment-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; background:var(--ajs-panel-warm); border:1px solid var(--ajs-line); padding:5px 8px 5px 10px; border-radius:999px; }
          #jjPage_sponsor .ajs-attachment-chip button{ border:none; background:transparent; color:var(--ajs-dim); font-size:13px; line-height:1; padding:0; cursor:pointer; }
          #jjPage_sponsor .ajs-composer-box{ background:var(--ajs-panel); border:1px solid var(--ajs-line); border-radius:16px; padding:8px 10px 8px 8px; box-shadow:var(--ajs-shadow); }
          #jjPage_sponsor .ajs-composer-row{ display:flex; align-items:flex-end; gap:6px; }
          #jjPage_sponsor .ajs-attach-icon-btn{ width:34px; height:34px; border-radius:50%; border:1px solid var(--ajs-line); background:var(--ajs-panel-warm); color:var(--ajs-dim); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; transition:background .2s, color .2s; cursor:pointer; }
          #jjPage_sponsor .ajs-attach-icon-btn:hover{ background:var(--ajs-lavender); color:var(--ajs-navy); }
          #jjPage_sponsor .ajs-composer-box textarea{ flex:1; border:none; resize:none; background:transparent; font-size:14.5px; color:var(--ajs-ink); max-height:140px; min-height:24px; line-height:1.5; padding:8px 6px; }
          #jjPage_sponsor .ajs-composer-box textarea:focus{ outline:none; }
          #jjPage_sponsor .ajs-composer-box textarea::placeholder{ color:var(--ajs-dim); }
          #jjPage_sponsor .ajs-send-btn{ width:36px; height:36px; border-radius:50%; border:none; background:var(--ajs-accent); color:var(--ajs-accent-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity .2s, transform .15s; cursor:pointer; }
          #jjPage_sponsor .ajs-send-btn:hover{ transform:scale(1.05); }
          #jjPage_sponsor .ajs-send-btn:disabled{ opacity:0.45; transform:none; cursor:default; }
          #jjPage_sponsor .ajs-send-btn svg{ width:16px; height:16px; }

          #jjPage_sponsor .ajs-chip-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; max-width:600px; }
          #jjPage_sponsor .ajs-prompt-chip{ font-size:12.5px; font-weight:600; color:var(--ajs-ink); background:var(--ajs-panel); border:1px solid var(--ajs-line); padding:8px 14px; border-radius:999px; transition:all .2s; cursor:pointer; }
          #jjPage_sponsor .ajs-prompt-chip:hover{ background:var(--ajs-panel-warm); border-color:rgba(20,20,35,0.22); }

          #jjPage_sponsor .ajs-thread{ padding:14px 6px 10px; width:100%; }
          #jjPage_sponsor .ajs-msg-row{ display:flex; margin-bottom:16px; animation:ajsSlideIn .3s ease; }
          @keyframes ajsSlideIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
          #jjPage_sponsor .ajs-msg-row.ajs-user{ justify-content:flex-end; }
          #jjPage_sponsor .ajs-user-bubble{ background:var(--ajs-panel-warm); border-radius:16px 16px 4px 16px; padding:11px 15px; max-width:72%; font-size:14.5px; line-height:1.5; color:var(--ajs-ink); }

          #jjPage_sponsor .ajs-assistant-block{ max-width:100%; opacity:0; animation:ajsCardIn .4s ease forwards; color:var(--ajs-ink); }
          @keyframes ajsCardIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
          #jjPage_sponsor .ajs-found-label{ font-size:10.5px; color:var(--ajs-dim); font-weight:600; margin-bottom:12px; font-family:var(--ajs-mono); letter-spacing:0.08em; text-transform:uppercase; }

          #jjPage_sponsor .ajs-job-card{ background:var(--ajs-panel); border:1px solid var(--ajs-line); border-radius:14px; padding:14px 16px; margin-bottom:10px; box-shadow:var(--ajs-shadow); opacity:0; animation:ajsRowIn .35s ease forwards; }
          @keyframes ajsRowIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
          #jjPage_sponsor .ajs-job-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
          #jjPage_sponsor .ajs-job-top-left{ display:flex; gap:10px; align-items:flex-start; }
          #jjPage_sponsor .ajs-job-avatar{ width:34px; height:34px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; }
          #jjPage_sponsor .ajs-job-title{ font-size:14.5px; font-weight:700; }
          #jjPage_sponsor .ajs-job-meta{ font-size:12.5px; color:var(--ajs-dim); margin-top:2px; }
          #jjPage_sponsor .ajs-job-source{ font-family:var(--ajs-mono); font-size:10px; color:var(--ajs-dim); text-decoration:none; background:var(--ajs-panel-warm); border:1px solid var(--ajs-line); padding:3px 8px; border-radius:999px; white-space:nowrap; }
          #jjPage_sponsor .ajs-job-source:hover{ color:var(--ajs-ink); border-color:rgba(20,20,35,0.28); }
          #jjPage_sponsor .ajs-sponsor-note{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; margin-top:8px; padding:4px 9px; border-radius:999px; }
          #jjPage_sponsor .ajs-sponsor-note.ajs-likely{ background:var(--ajs-green-soft); color:var(--ajs-green); }
          #jjPage_sponsor .ajs-sponsor-note.ajs-unclear{ background:var(--ajs-amber-soft); color:var(--ajs-amber); }
          #jjPage_sponsor .ajs-job-actions{ display:flex; gap:8px; margin-top:10px; }
          #jjPage_sponsor .ajs-job-btn{ font-size:11.5px; font-weight:700; border:1px solid var(--ajs-line); background:var(--ajs-panel-warm); color:var(--ajs-ink); padding:7px 11px; border-radius:8px; transition:background .2s; cursor:pointer; }
          #jjPage_sponsor .ajs-job-btn:hover{ background:#fff; }
          #jjPage_sponsor .ajs-job-btn.done{ background:var(--ajs-green-soft); color:var(--ajs-green); border-color:transparent; cursor:default; }

          /* Leads: a lower-confidence tier alongside job cards, a real company
             with a real URL but no specific-posting or careers-page URL solid
             enough to count as a full listing. Amber-dashed to read as
             distinct from a confirmed .ajs-job-card at a glance. */
          #jjPage_sponsor .ajs-leads-label{ font-size:10.5px; color:var(--ajs-amber); font-weight:600; margin:16px 0 12px; font-family:var(--ajs-mono); letter-spacing:0.08em; text-transform:uppercase; }
          #jjPage_sponsor .ajs-lead-card{ background:var(--ajs-amber-soft); border:1px dashed var(--ajs-amber); border-radius:14px; padding:14px 16px; margin-bottom:10px; box-shadow:var(--ajs-shadow); opacity:0; animation:ajsRowIn .35s ease forwards; }
          #jjPage_sponsor .ajs-lead-badge{ display:inline-block; font-size:10px; font-weight:700; color:var(--ajs-amber); background:var(--ajs-panel); border:1px solid var(--ajs-amber); padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; }
          #jjPage_sponsor .ajs-remote-badge{ display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; margin-top:6px; }
          #jjPage_sponsor .ajs-remote-badge.ajs-remote-true{ color:var(--ajs-green); background:var(--ajs-green-soft); border:1px solid var(--ajs-green); }
          #jjPage_sponsor .ajs-remote-badge.ajs-remote-caution{ color:var(--ajs-amber); background:var(--ajs-amber-soft); border:1px solid var(--ajs-amber); }
          #jjPage_sponsor .ajs-job-why{ font-size:12.5px; color:var(--ajs-dim); margin-top:6px; line-height:1.5; }
          #jjPage_sponsor .ajs-lead-reason{ font-size:12.5px; color:var(--ajs-dim); margin-top:6px; line-height:1.5; }

          #jjPage_sponsor .ajs-analysis-text{ font-size:14px; line-height:1.65; margin:14px 0; }
          #jjPage_sponsor .ajs-tips-block{ margin:14px 0; }
          #jjPage_sponsor .ajs-tips-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:var(--ajs-dim); margin-bottom:8px; }
          #jjPage_sponsor .ajs-tips-block li{ font-size:13.5px; line-height:1.6; padding-left:16px; position:relative; margin-bottom:6px; list-style:none; }
          #jjPage_sponsor .ajs-tips-block li::before{ content:'\2022'; position:absolute; left:0; color:var(--ajs-navy); }
          #jjPage_sponsor .ajs-tips-block li strong{ font-weight:700; }

          #jjPage_sponsor .ajs-followup-q{ font-size:13.5px; margin:12px 0 10px; }
          #jjPage_sponsor .ajs-followup-chips{ display:flex; flex-direction:column; gap:8px; }
          #jjPage_sponsor .ajs-followup-chip{ width:100%; text-align:left; font-size:12.5px; font-weight:600; color:var(--ajs-navy); background:var(--ajs-lavender); border:1px solid transparent; padding:10px 14px; border-radius:10px; transition:background .2s; cursor:pointer; }
          #jjPage_sponsor .ajs-followup-chip:hover{ background:#CBC0FF; }

          #jjPage_sponsor .ajs-thinking-row{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ajs-dim); padding:6px 0; }
          #jjPage_sponsor .ajs-think-dot{ width:6px; height:6px; border-radius:50%; background:var(--ajs-dim); animation:ajsPulse 1.2s ease-in-out infinite; }
          #jjPage_sponsor .ajs-think-dot:nth-child(2){ animation-delay:.2s; }
          #jjPage_sponsor .ajs-think-dot:nth-child(3){ animation-delay:.4s; }
          @keyframes ajsPulse{ 0%,100%{ opacity:0.3;} 50%{ opacity:1;} }

          #jjPage_sponsor .ajs-error-text{ font-size:13.5px; color:#B02A2A; }

          /* Skeleton result cards + progress line (WS9b): shown the instant a
             search is submitted so the wait for the single job-search call
             reads as "working" instead of dead air. */
          #jjPage_sponsor .ajs-skeleton-card{ background:var(--ajs-panel); border:1px solid var(--ajs-line); border-radius:14px; padding:14px 16px; margin-bottom:10px; box-shadow:var(--ajs-shadow); opacity:0; animation:ajsRowIn .35s ease forwards; }
          #jjPage_sponsor .ajs-skel-line{ height:11px; border-radius:5px; background:linear-gradient(90deg,var(--ajs-line) 25%,var(--ajs-lavender) 50%,var(--ajs-line) 75%); background-size:200% 100%; animation:ajsShimmer 1.4s ease-in-out infinite; }
          #jjPage_sponsor .ajs-skel-avatar{ width:32px; height:32px; border-radius:9px; flex-shrink:0; background:linear-gradient(90deg,var(--ajs-line) 25%,var(--ajs-lavender) 50%,var(--ajs-line) 75%); background-size:200% 100%; animation:ajsShimmer 1.4s ease-in-out infinite; }
          #jjPage_sponsor .ajs-skel-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
          #jjPage_sponsor .ajs-skel-col{ flex:1; display:flex; flex-direction:column; gap:7px; }
          #jjPage_sponsor .ajs-skel-title{ width:60%; }
          #jjPage_sponsor .ajs-skel-meta{ width:40%; }
          #jjPage_sponsor .ajs-skel-note{ width:85%; }
          @keyframes ajsShimmer{ 0%{ background-position:200% 0;} 100%{ background-position:-200% 0;} }
          #jjPage_sponsor .ajs-progress-line{ font-size:12.5px; color:var(--ajs-dim); padding:2px 0 10px; transition:opacity .2s ease; }

          #jjPage_sponsor .ajs-composer-dock{ padding:12px 6px 6px; width:100%; }
          #jjPage_sponsor .ajs-foot-note{ text-align:center; font-size:11px; color:var(--ajs-dim); padding:2px 12px 4px; }

          @media (max-width:640px){
            #jjPage_sponsor .ajs-root{ height:calc(100vh - 168px); }
            #jjPage_sponsor .ajs-user-bubble{ max-width:85%; }
            #jjPage_sponsor .ajs-job-source{ display:inline-block; margin-top:6px; }
          }
          @media (prefers-reduced-motion: reduce){
            #jjPage_sponsor *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
          }
        
/* ============================================================
   Touch-Less editorial design system (.tl-theme). Scoped token set; does NOT
   touch any --rr-* token. Applied by adding .tl-theme to a restyled container
   (Phase 1: the Interview Prep #icSetup scope). Warm white, no cards or shadows,
   structure from 1px rules and hairline dividers, Space Grotesk display type,
   typographic status colour. UK English, no em dashes.
   ============================================================ */
.tl-theme {
  --tl-bg: #FBFBF9; --tl-ink: #101010; --tl-body: #3B3B36; --tl-grey: #86867E;
  --tl-mute: #A4A49C; --tl-hair: #E2E2DC; --tl-rule: #111111; --tl-blue: #2448FF; --tl-red: #C9594A;
  /* soft-editorial v2: card surfaces + selection grammar (bordered chip/card,
     hairline + white unselected, blue border + tint fill + check selected). */
  --tl-radius: 10px; --tl-radius-sm: 8px; --tl-card: #FFFFFF;
  --tl-tint: #F3F6FF; --tl-tint-border: #2448FF; --tl-success-bg: #EFF4FD;
  --tl-display: "Space Grotesk", "Albert Sans", system-ui, sans-serif;
  --tl-body-font: "Plus Jakarta Sans", system-ui, sans-serif;
  background: var(--tl-bg);
  color: var(--tl-body);
  font-family: var(--tl-body-font);
  font-size: 13.5px;
  line-height: 1.5;
}
/* No ambient brand blobs on the editorial surface. */
.tl-theme.rr-vi__scope::before { display: none !important; }
.tl-theme .rr-vi__grid { display: block; max-width: 1600px; }

/* Uppercase Space Grotesk micro-label used for section headers. */
.tl-theme .tl-eyebrow {
  font-family: var(--tl-display); font-weight: 500; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tl-mute);
  margin: 0 0 12px;
}
.tl-theme .tl-rule { border: 0; border-top: 1px solid var(--tl-rule); margin: 0; }

/* --- Hero --- */
.tl-theme .tl-hero { position: relative; padding: 8px 0 18px; }
.tl-theme .tl-hero-h {
  font-family: var(--ap-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: 32px; line-height: 1.1; color: #1A1614; margin: 0; max-width: none;
}
.tl-theme .tl-hero-h .tl-accent { color: var(--tl-blue); }
.tl-theme .tl-hero-arrow {
  position: absolute; top: 6px; right: 0; font-size: 28px; line-height: 1;
  color: var(--tl-ink); font-family: var(--tl-display);
}
.tl-theme .tl-hero-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px;
  margin-top: 18px; font-size: 13px; color: var(--tl-body);
}
.tl-theme .tl-hero-meta .tl-date { margin-left: auto; color: var(--tl-grey); }

/* Streak strip (.tl-streak*) removed - Interview Prep's only surface for it,
   see index.html's removal comment. @keyframes tlBillyEat retained below,
   still used by the cover-letter studio preview banner (#clStudio .cl-pv-billy). */
@keyframes tlBillyEat { from { background-position-x: 0%; } to { background-position-x: 100%; } }

/* --- Setup list: flat hairline rows --- */
.tl-theme .rr-vi__steps { display: block; }
.tl-theme .rr-vi__row-split { display: block; }
.tl-theme .rr-vi__step {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 20px 0; border-top: 1px solid var(--tl-hair);
}
.tl-theme .rr-vi__steps > .rr-vi__step:first-child,
.tl-theme .rr-vi__row-split > .rr-vi__step:first-child { border-top: 1px solid var(--tl-hair); }
.tl-theme .rr-vi__step-head { gap: 14px; margin-bottom: 12px; }
.tl-theme .rr-vi__step-badge {
  width: 30px; height: 30px; border-radius: 999px; background: var(--tl-blue); color: #fff;
  font-family: var(--tl-display); font-weight: 500; font-size: 14px; margin-top: 2px;
}
.tl-theme .rr-vi__step-title {
  font-family: var(--tl-display); font-weight: 500; letter-spacing: -0.03em;
  font-size: 21px; line-height: 1.15; color: var(--tl-ink);
}
.tl-theme .rr-vi__step-title-optional { color: var(--tl-mute); font-family: var(--tl-body-font); letter-spacing: 0; }
.tl-theme .rr-vi__step-help { font-size: 13px; color: var(--tl-grey); }

/* Inputs flatten to hairline fields, no rounded cards. */
.tl-theme .rr-vi__cv-empty { background: transparent; border: 1px solid var(--tl-hair); border-radius: 0; }
.tl-theme .ic-textarea, .tl-theme .rr-vi__cv-textarea, .tl-theme .rr-vi__jd, .tl-theme .rr-vi__focus, .tl-theme .rr-vi__cq {
  background: #fff; border: 1px solid var(--tl-hair); border-radius: 0;
  font-family: var(--tl-body-font); color: var(--tl-ink);
}
/* Optional custom-questions field (sits under the JD in the JD card). */
.rr-vi__cq-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tl-hair, rgba(23,23,26,0.12)); display: block; }
.rr-vi__cq-label { display: block; font-family: var(--tl-display, inherit); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tl-ink, #17171A); margin-bottom: 4px; }
.rr-vi__cq-opt { color: var(--tl-mute, #6B6860); text-transform: none; letter-spacing: 0; font-weight: 400; }
.rr-vi__cq-help { font-size: 12px; line-height: 1.5; color: var(--tl-mute, #6B6860); margin: 0 0 8px; }
.rr-vi__cq { width: 100%; min-height: 96px; max-height: 220px; resize: vertical; padding: 10px 12px; font-size: 13px; line-height: 1.55; }
.rr-vi__cq:focus { outline: none; border-color: var(--tl-blue, #2448FF); }
.tl-theme .rr-vi__cv-empty-title { color: var(--tl-ink); }
.tl-theme .rr-vi__cv-empty-sub, .tl-theme .rr-vi__jd-count { color: var(--tl-mute); }
.tl-theme .rr-vi__cv-empty-icon { background: transparent; color: var(--tl-blue); }
.tl-theme .rr-vi__cv-upload-btn {
  font-family: var(--tl-display); font-weight: 500; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--tl-blue); background: transparent;
  border: 1px solid var(--tl-blue); border-radius: 999px;
}

/* Mode + voice + question + difficulty: underline-selection treatment. */
.tl-theme .rr-vi__mode-grid { display: block; }
.tl-theme .rr-vi__mode {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  padding: 10px 0; display: flex; align-items: baseline; gap: 10px;
}
.tl-theme .rr-vi__mode-radio { display: none; }
.tl-theme .rr-vi__mode-name { color: var(--tl-grey); font-weight: 500; }
.tl-theme .rr-vi__mode-name > span { display: inline-block; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.tl-theme .rr-vi__mode.is-selected .rr-vi__mode-name, .tl-theme .rr-vi__mode.active .rr-vi__mode-name { color: var(--tl-ink); }
.tl-theme .rr-vi__mode.is-selected .rr-vi__mode-name > span, .tl-theme .rr-vi__mode.active .rr-vi__mode-name > span { border-bottom-color: var(--tl-blue); }
.tl-theme .rr-vi__mode-icon { color: var(--tl-grey); }
.tl-theme .rr-vi__mode.is-selected .rr-vi__mode-icon, .tl-theme .rr-vi__mode.active .rr-vi__mode-icon { color: var(--tl-blue); }
.tl-theme .rr-vi__mode-desc { color: var(--tl-grey); }

.tl-theme .rr-vi__chips { gap: 18px; }
.tl-theme .rr-vi__chip {
  background: transparent; border: 0; box-shadow: none; border-radius: 0; color: var(--tl-grey);
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.tl-theme .rr-vi__chip.is-selected, .tl-theme .rr-vi__chip.active { color: var(--tl-ink); border-bottom-color: var(--tl-blue); }
.tl-theme .rr-vi__chip-n { font-family: var(--tl-display); font-weight: 500; color: inherit; }
.tl-theme .rr-vi__chip-meta { color: var(--tl-mute); }

/* --- Agenda + session info: two quiet columns --- */
.tl-theme .tl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 20px 0; }
@media (max-width: 640px) { .tl-theme .tl-cols { grid-template-columns: 1fr; gap: 18px; } }
.tl-theme .tl-col-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--tl-hair); font-size: 13px; }
.tl-theme .tl-col-row:first-of-type { border-top: 0; }
.tl-theme .tl-col-k { color: var(--tl-grey); }
.tl-theme .tl-col-v { color: var(--tl-ink); font-variant-numeric: tabular-nums; }

/* Old detached #icStartCard dock CSS removed: folded into the new screen 2
   footer CTA, an in-flow element with its own new styling (no fixed
   positioning, no grid-alignment measurement, no separate visibility gate). */

/* ============================================================
   PHASE 2: editorial language applied to the app shell + Dashboard, Applications,
   Sponsor Check, Find Contacts, Settings. CSS + .tl-theme class only; no markup
   behaviour, handler, or id changes. CV Builder (#jjPage_cv) and Cover Letter
   (#jjPage_cover) deliberately never receive .tl-theme, so they (and the
   per-sentence source classification UI + red download gate inside them) are
   untouched. UK English, no em dashes.
   ============================================================ */

/* --- Shell: sidebar --- */
.tl-theme.jj-sidebar { background: var(--tl-bg); border-right: 1px solid var(--tl-hair); }
.tl-theme .jj-sidebar-section-label {
  font-family: var(--tl-display); font-weight: 500; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tl-mute);
}
.tl-theme .jj-sidebar-item { color: var(--tl-body); border-radius: 0; font-family: var(--tl-body-font); }
.tl-theme .jj-sidebar-item:hover { background: transparent; color: var(--tl-ink); }
.tl-theme .jj-sidebar-item.active { background: transparent; color: var(--tl-blue); font-weight: 500; box-shadow: inset 2px 0 0 var(--tl-blue); }
.tl-theme .jj-sidebar-item .jj-sb-ico, .tl-theme .jj-sidebar-item.active .jj-sb-ico { color: inherit; }

/* --- Shared page chrome --- */
.tl-theme .jj-page-head { background: transparent; border: 0; box-shadow: none; padding-bottom: 14px; border-bottom: 1px solid var(--tl-rule); margin-bottom: 22px; }
.tl-theme .jj-page-title, .tl-theme .jj-greeting, .tl-theme .fce-topbar-title {
  font-family: var(--tl-display); font-weight: 500; letter-spacing: -0.03em; color: var(--tl-ink);
}
.tl-theme .jj-greeting em { font-style: normal; color: var(--tl-blue); }
.tl-theme .jj-page-sub, .tl-theme .jj-greeting-sub { color: var(--tl-grey); }
.tl-theme .jj-page-body { background: transparent; }

/* --- Shared flat surfaces: no shadows, no rounded cards, hairline structure --- */
.tl-theme .jh-card, .tl-theme .sc-card, .tl-theme .st-card, .tl-theme .jj-panel,
.tl-theme .db-card, .tl-theme .db-stat {
  background: var(--tl-bg); border: 1px solid var(--tl-hair); border-radius: 0; box-shadow: none;
}
.tl-theme .sc-card-title, .tl-theme .st-card-title, .tl-theme .sc-callout-title {
  font-family: var(--tl-display); font-weight: 500; letter-spacing: -0.02em; color: var(--tl-ink);
}
.tl-theme .sc-card-sub, .tl-theme .st-card-sub, .tl-theme .sc-callout-body, .tl-theme .jh-label, .tl-theme .jj-form-label { color: var(--tl-grey); }
.tl-theme .jh-input, .tl-theme .jj-form-input, .tl-theme .st-input {
  background: #fff; border: 1px solid var(--tl-hair); border-radius: 0; color: var(--tl-ink); font-family: var(--tl-body-font);
}

/* --- Shared pills / buttons --- */
.tl-theme .jh-btn {
  font-family: var(--tl-display); font-weight: 500; letter-spacing: 0.01em; border-radius: 999px;
  border: 1px solid var(--tl-hair); background: transparent; color: var(--tl-ink); box-shadow: none;
}
.tl-theme .jh-btn:hover { border-color: var(--tl-ink); }
.tl-theme .jh-btn-primary, .tl-theme .jh-btn.jh-btn-primary {
  background: var(--tl-blue); border-color: var(--tl-blue); color: #fff;
}
.tl-theme .jh-btn-primary:hover { background: #1f3dd9; border-color: #1f3dd9; }

/* --- Typographic status helpers (uppercase Space Grotesk, colour by state) --- */
.tl-theme .tl-status { font-family: var(--tl-display); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.tl-theme .tl-status--blue { color: var(--tl-blue); }
.tl-theme .tl-status--ink { color: var(--tl-ink); }
.tl-theme .tl-status--grey { color: var(--tl-grey); }
.tl-theme .tl-status--red { color: var(--tl-red); }

/* --- Dashboard: bare stat numbers over hairlines --- */
.tl-theme .db-stat-row { gap: 0; }
.tl-theme .db-stat { padding: 16px 18px; border-left: 0; border-right: 0; border-bottom: 0; }
.tl-theme .db-stat-num { font-family: var(--tl-display); font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--tl-ink); }
.tl-theme .db-stat-replies .db-stat-num { color: var(--tl-blue); }
.tl-theme .db-stat-label { font-family: var(--tl-display); font-weight: 500; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tl-mute); }
.tl-theme .db-stat-sub, .tl-theme .db-stat-period { color: var(--tl-grey); }
.tl-theme .db-stat-icon, .tl-theme .db-stat-spark { display: none; }
.tl-theme .db-card-title { font-family: var(--tl-display); font-weight: 500; letter-spacing: -0.02em; color: var(--tl-ink); }

/* Recent applications: typographic stage status (strip the pill badge, colour by
   stage). Selectors are .tl-theme .jj-sp-* (specificity 0,2,0) so they win over
   the base .jj-sp-* (0,1,0) without !important; the .tl-status helper supplies
   the uppercase Space Grotesk treatment. Mapping: interview/offer = blue,
   screening (replied) = ink, applied/saved (pending) = grey, rejected = red. */
.tl-theme .jj-status-pill { background: transparent; border: 0; padding: 0; border-radius: 0; box-shadow: none; }
.tl-theme .jj-sp-interview, .tl-theme .jj-sp-offer { color: var(--tl-blue); }
.tl-theme .jj-sp-screening, .tl-theme .jj-sp-replied { color: var(--tl-ink); }
.tl-theme .jj-sp-applied, .tl-theme .jj-sp-saved { color: var(--tl-grey); }
.tl-theme .jj-sp-rejected, .tl-theme .jj-sp-ghosted, .tl-theme .jj-sp-withdrawn { color: var(--tl-red); }

/* ============================================================
   tl-fix-canvas: finish the editorial canvas, trial banner, and sidebar chrome
   that the first merge left on top of old chrome. UK English, no em dashes.
   ============================================================ */

/* Canvas, Interview Prep SETUP view only. The page paints a lavender gradient +
   ambient ::before/::after blobs, and #jjPage_interview .rr-vi__scope was forced
   transparent (specificity 1,1,0) so it showed through. Scope the flat override to
   the setup screen via :has (icShowScreen toggles #icSetup inline display) so the
   live + report screens keep their existing backdrop. #jjPage_interview is not
   itself .tl-theme, so it uses the literal warm-white token value. */
/* v2-live extended the flat canvas to the LIVE screen; v2-report completes
   the set, so all three interview screens now sit on the flat warm canvas
   (icShowScreen sets display:flex on the visible screen). */
#jjPage_interview:has(#icSetup[style*="flex"]),
#jjPage_interview:has(#icLive[style*="flex"]),
#jjPage_interview:has(#icReport[style*="flex"]) { background: #FBFBF9; }
#jjPage_interview:has(#icSetup[style*="flex"])::before,
#jjPage_interview:has(#icSetup[style*="flex"])::after,
#jjPage_interview:has(#icLive[style*="flex"])::before,
#jjPage_interview:has(#icLive[style*="flex"])::after,
#jjPage_interview:has(#icReport[style*="flex"])::before,
#jjPage_interview:has(#icReport[style*="flex"])::after { display: none; }
#jjPage_interview .rr-vi__scope.tl-theme { background: var(--tl-bg); }

/* Canvas, Sponsor Check themed page (shipped with a lavender ambient gradient). */
#jjPage_sponsor.tl-theme { background: var(--tl-bg); }
#jjPage_sponsor.tl-theme::before, #jjPage_sponsor.tl-theme::after { display: none; }

/* Sidebar chrome inside themed #jjSidebar: flatten profile, mute icons + AI badge,
   flatten the upsell promo to a hairline with a blue text link. No behaviour change. */
.tl-theme .jj-sidebar-profile { background: transparent; border: 0; box-shadow: none; }
.tl-theme .jj-avatar { background: transparent; border: 1px solid var(--tl-hair); color: var(--tl-ink); }
.tl-theme .jj-profile-name { color: var(--tl-ink); font-family: var(--tl-body-font); }
.tl-theme .jj-profile-sub { color: var(--tl-grey); }
.tl-theme .jj-sb-ico { display: none; }
.tl-theme .jj-sb-badge { background: transparent; border: 0; padding: 0; color: var(--tl-mute); font-family: var(--tl-display); font-weight: 500; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.tl-theme .jj-sb-upsell { background: transparent; border: 1px solid var(--tl-hair); border-radius: 0; box-shadow: none; }
.tl-theme .jj-sb-upsell-ico { display: none; }
.tl-theme .jj-sb-upsell-title { color: var(--tl-ink); font-family: var(--tl-display); font-weight: 500; }
.tl-theme .jj-sb-upsell-sub { color: var(--tl-grey); font-family: var(--tl-body-font); }
.tl-theme .jj-sb-upsell-btn { margin-top: 6px; padding: 0; background: transparent; border: 0; border-radius: 0; color: var(--tl-blue); font-family: var(--tl-display); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; }
.tl-theme .jj-sb-upsell-btn:hover { color: #1f3dd9; background: transparent; }

/* Trial banner: global shell chrome, sits OUTSIDE any .tl-theme container, so it
   uses literal token values (the --tl-* vars are scoped to .tl-theme). Id-scoped
   so it wins over the base .rr-trial-banner without depending on source order.
   Editorial: warm white, hairline bottom rule, grey text, blue Upgrade link. */
#rrTrialBanner { background: #FBFBF9; border-bottom: 1px solid #E2E2DC; color: #86867E; font: 500 12px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; }
#rrTrialBanner.urgent { background: #FBFBF9; border-bottom-color: #E2E2DC; }
#rrTrialBanner .rr-trial-banner-cta { background: transparent; color: #2448FF; border: 0; padding: 0; font: 500 12px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
#rrTrialBanner .rr-trial-banner-cta:hover { background: transparent; color: #1f3dd9; }
#rrTrialBanner .rr-trial-banner-close { color: #A4A49C; }

/* ============================================================
   tl-setup-rows: compact collapsible summary rows for the Interview Prep setup
   list. Built at runtime by the injector in the JD/streak script (no markup
   edits). UK English, no em dashes.
   ============================================================ */
.tl-theme .tl-setup-hd { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 0 10px; border-bottom: 1px solid var(--tl-rule); }
.tl-theme .tl-setup-count { font-family: var(--tl-display); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tl-mute); }
.tl-theme .rr-vi__step.tl-row { display: grid; grid-template-columns: 30px 110px minmax(0,1fr) auto; gap: 14px; align-items: start; background: transparent; border: 0; border-top: 1px solid var(--tl-hair); border-radius: 0; box-shadow: none; padding: 16px 0; }
.tl-theme .rr-vi__step.tl-row .rr-vi__step-head, .tl-theme .rr-vi__step.tl-row .rr-vi__step-body { display: contents; }
.tl-theme .rr-vi__step.tl-row .rr-vi__step-badge { grid-column: 1; grid-row: 1; }
.tl-theme .rr-vi__step.tl-row .rr-vi__step-title { grid-column: 2; grid-row: 1; margin: 0; font: 500 21px/1.05 var(--tl-display); letter-spacing: -0.03em; color: var(--tl-ink); }
.tl-theme .rr-vi__step.tl-row .rr-vi__step-title-optional { display: block; font: 400 11px/1.2 var(--tl-body-font); color: var(--tl-mute); letter-spacing: 0; margin-left: 0; }
.tl-theme .rr-vi__step.tl-row .rr-vi__step-help { display: none; }
.tl-theme .rr-vi__step.tl-row .tl-cell-content { grid-column: 3; grid-row: 1; min-width: 0; }
.tl-theme .rr-vi__step.tl-row .tl-cell-action { grid-column: 4; grid-row: 1; text-align: right; }
.tl-theme .tl-action { font: 500 12px/1.3 var(--tl-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tl-blue); background: none; border: 0; padding: 0; cursor: pointer; }
.tl-theme .tl-action:hover { color: #1f3dd9; }
.tl-theme .tl-summary-val { font-size: 13.5px; color: var(--tl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-theme .tl-summary-sub { font-size: 12px; color: var(--tl-grey); margin-top: 2px; }
.tl-theme .rr-vi__step.tl-collapsed .tl-expanded-wrap { display: none; }
.tl-theme .rr-vi__step.tl-expanded .tl-summary { display: none; }
.tl-theme .rr-vi__step.tl-expanded .tl-cell-action .tl-action { display: none; }
/* Mode: inline underline choices, no light-blue selected box */
.tl-theme .rr-vi__step.tl-row .rr-vi__mode-grid { display: flex; flex-wrap: wrap; gap: 22px; align-items: baseline; }
.tl-theme .rr-vi__mode { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; display: inline-flex; flex-direction: column; gap: 3px; }
.tl-theme .rr-vi__mode-radio, .tl-theme .rr-vi__mode-icon { display: none; }
.tl-theme .rr-vi__mode-name { color: var(--tl-grey); font: 500 14px/1.2 var(--tl-body-font); border-bottom: 2px solid transparent; padding-bottom: 2px; }
.tl-theme .rr-vi__mode.is-selected .rr-vi__mode-name, .tl-theme .rr-vi__mode.active .rr-vi__mode-name { color: var(--tl-ink); border-bottom-color: var(--tl-blue); }
.tl-theme .rr-vi__mode-desc { color: var(--tl-grey); font-size: 12px; margin: 0; }
.tl-theme .rr-vi__mode:not(.is-selected):not(.active) .rr-vi__mode-desc { display: none; }
/* Voice: linearise the carousel into an inline text row of names */
.tl-theme .rr-vi__step.tl-row .rr-vi__voice-wrap { margin: 0; }
.tl-theme .tl-voice-sub { font-size: 12px; color: var(--tl-grey); margin-top: 8px; }
/* Session: stacked controls when expanded */
.tl-theme .tl-session-block { margin-bottom: 14px; }
.tl-theme .tl-session-block:last-child { margin-bottom: 0; }
.tl-theme .tl-session-lbl { font: 500 12px/1 var(--tl-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tl-mute); margin-bottom: 8px; }

/* ============================================================
   tl-setup-polish: a Done action to re-collapse an expanded row, and an
   editorial restyle of the expanded (editing) state of the CV, JD, Mode and
   Session rows so the legacy chrome stops clashing. Additive; appended to the
   tl-theme block. UK English, no em dashes.
   ============================================================ */

/* Done action: shown only while a row is expanded AND has content. The
   Replace/Edit action is already hidden when expanded (rule above); an empty
   expanded row (no CV/JD yet) carries no .tl-filled, so it shows no action and
   stays open until content exists, then collapses on the next refresh. */
.tl-theme .tl-action-done { display: none; }
.tl-theme .rr-vi__step.tl-expanded.tl-filled .tl-cell-action .tl-action-done { display: inline-block; }

/* Vertical rhythm + width inside the expanded wrap. */
.tl-theme .rr-vi__step.tl-row .tl-expanded-wrap { max-width: 100%; }

/* --- Expanded CV: one tidy row (icon + title + outlined UPLOAD FILE pill),
   small grey format hint, ink confirmation line with its check, capped textarea. */
.tl-theme .rr-vi__step.tl-row .rr-vi__cv-empty {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  background: transparent; border: 0; border-radius: 0; padding: 0; text-align: left;
}
.tl-theme .rr-vi__step.tl-row .rr-vi__cv-empty-icon {
  order: 1; width: 22px; height: 22px; margin: 0; background: transparent; color: var(--tl-blue);
}
.tl-theme .rr-vi__step.tl-row .rr-vi__cv-empty-icon svg { width: 16px; height: 16px; }
.tl-theme .rr-vi__step.tl-row .rr-vi__cv-empty-title {
  order: 2; margin: 0; font: 500 13px/1.3 var(--tl-body-font); color: var(--tl-ink);
}
.tl-theme .rr-vi__step.tl-row .rr-vi__cv-upload-btn {
  order: 3; margin: 0 0 0 auto; padding: 5px 14px; font-size: 11px;
}
.tl-theme .rr-vi__step.tl-row .rr-vi__cv-empty-sub {
  order: 4; flex: 1 0 100%; margin: 0; font-size: 11px; color: var(--tl-mute);
}
.tl-theme .rr-vi__step.tl-row .rr-vi__cv-upload-status {
  order: 5; flex: 1 0 100%; margin: 0; min-height: 0; font-size: 12px; color: var(--tl-ink);
}
.tl-theme .rr-vi__step.tl-row .rr-vi__cv-upload-status[data-state="ok"] { color: var(--tl-ink); }
.tl-theme .rr-vi__step.tl-row .rr-vi__cv-upload-status[data-state="err"] { color: var(--tl-red); }
.tl-theme .rr-vi__step.tl-row .rr-vi__cv-textarea {
  order: 6; flex: 1 0 100%; margin: 6px 0 0; max-height: 180px; min-height: 88px; padding: 10px 12px;
}

/* --- Expanded JD: hairline textarea, capped height, muted 12px counter. */
.tl-theme .rr-vi__step.tl-row .rr-vi__jd-wrap { margin: 0; }
.tl-theme .rr-vi__step.tl-row .rr-vi__jd {
  max-height: 180px; min-height: 96px; padding: 12px 14px 28px; font-size: 13px;
}
.tl-theme .rr-vi__step.tl-row .rr-vi__jd-count { color: var(--tl-mute); font-size: 12px; }

/* --- Mode: keep the legacy microphone/coach glyphs hidden inside the row. */
.tl-theme .rr-vi__step.tl-row .rr-vi__mode-icon { display: none !important; }

/* --- Expanded Session: question + difficulty pills become the underline
   treatment (plain text, grey unselected, ink with a 2px blue underline when
   selected) with no boxes, lavender fills or borders. The legacy
   .ic-bound-pill.active / .ic-diff-pill.active backgrounds (specificity 0,2,0)
   tie with and source-order-beat the themed .rr-vi__chip rules, so these row
   scoped selectors (0,3,0 / 0,4,0) plus !important on the surface settle it. */
.tl-theme .rr-vi__step.tl-row #icBoundPills,
.tl-theme .rr-vi__step.tl-row .tl-session-block .rr-vi__chips { gap: 18px; }
.tl-theme .rr-vi__step.tl-row .ic-bound-pill,
.tl-theme .rr-vi__step.tl-row .ic-diff-pill {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 4px 0 !important; gap: 4px;
  color: var(--tl-grey); border-bottom: 2px solid transparent !important;
  font: 400 14px/1.2 var(--tl-body-font);
}
.tl-theme .rr-vi__step.tl-row .ic-bound-pill.is-selected,
.tl-theme .rr-vi__step.tl-row .ic-bound-pill.active,
.tl-theme .rr-vi__step.tl-row .ic-diff-pill.is-selected,
.tl-theme .rr-vi__step.tl-row .ic-diff-pill.active {
  color: var(--tl-ink); border-bottom-color: var(--tl-blue) !important;
}
.tl-theme .rr-vi__step.tl-row .ic-bound-pill-n {
  font: 400 14px/1.2 var(--tl-body-font); color: inherit;
}
.tl-theme .rr-vi__step.tl-row .ic-bound-pill.is-selected .ic-bound-pill-n,
.tl-theme .rr-vi__step.tl-row .ic-bound-pill.active .ic-bound-pill-n { color: var(--tl-ink); }
.tl-theme .rr-vi__step.tl-row #icSetupFocus {
  width: 100%; padding: 9px 12px; font: 400 13px/1.4 var(--tl-body-font);
  border-radius: 0; background: #fff;
}
.tl-theme .rr-vi__step.tl-row #icSetupFocus:focus {
  outline: none; border-color: var(--tl-blue); background: #fff;
}

/* ============================================================
   tl-soft-setup: soft-editorial v2 for the Interview Prep setup section.
   Card surfaces + the v2 selection grammar (hairline + white when unselected;
   blue border + --tl-tint fill + check when selected). Built at runtime by the
   v2 injector (which moves the real interactive nodes into this scaffold). This
   grammar is the app-wide target system; Dashboard/Sponsor/Contacts/Settings/
   sidebar migrate in later passes. The old .tl-row / underline rules above stay
   for surfaces still on the prior look. UK English, no em dashes.
   ============================================================ */

/* SETUP header: Space Grotesk label, blue counter, no heavy rule. */
.tl-theme .tl2-setup-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 0 0; border-bottom: 0; margin-bottom: 0; }
.tl-theme .tl2-setup-title { font: 500 13px/1 var(--tl-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tl-ink); }
.tl-theme .tl2-setup-count { color: var(--tl-blue); }

/* Row scaffold: 30px blue number | label block | wide content. Hairline dividers. */
.tl-theme .rr-vi__step.tl2-row {
  display: grid; grid-template-columns: 30px minmax(150px, 180px) minmax(0, 1fr);
  gap: 16px 20px; align-items: start;
  background: transparent; border: 0; border-top: 1px solid var(--tl-hair);
  border-radius: 0; box-shadow: none; padding: 24px 0;
}
.tl-theme .rr-vi__step.tl2-row > .rr-vi__step-head { display: contents; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__step-badge {
  grid-column: 1; grid-row: 1; width: 30px; height: 30px; margin: 0;
  background: var(--tl-blue); color: #fff; border-radius: 999px;
  font: 500 13px/1 var(--tl-display); display: inline-flex; align-items: center; justify-content: center;
}
.tl-theme .rr-vi__step.tl2-row .rr-vi__step-body { grid-column: 2; grid-row: 1; }
.tl-theme .rr-vi__step.tl2-row .tl2-content { grid-column: 3; grid-row: 1; min-width: 0; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__step-title { margin: 0; font: 500 20px/1.15 var(--tl-display); letter-spacing: -0.02em; color: var(--tl-ink); }
.tl-theme .rr-vi__step.tl2-row .rr-vi__step-help { margin: 7px 0 0; font: 400 12.5px/1.45 var(--tl-body-font); color: var(--tl-grey); display: block; }
@media (max-width: 760px) {
  .tl-theme .rr-vi__step.tl2-row { grid-template-columns: 30px minmax(0, 1fr); }
  .tl-theme .rr-vi__step.tl2-row .tl2-content { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
}

/* Cards: white, hairline, rounded, no shadow. */
.tl-theme .tl2-card { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); box-shadow: none; padding: 16px; }
.tl-theme .tl2-card-head { display: flex; align-items: center; gap: 12px; }
.tl-theme .tl2-tile { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--tl-radius-sm); background: var(--tl-tint); color: var(--tl-blue); display: inline-flex; align-items: center; justify-content: center; }
.tl-theme .tl2-tile svg { width: 20px; height: 20px; }
.tl-theme .tl2-headmeta { min-width: 0; flex: 1 1 auto; }
.tl-theme .tl2-name { font: 500 14px/1.3 var(--tl-body-font); color: var(--tl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-theme .tl2-sub { font: 400 12px/1.35 var(--tl-body-font); color: var(--tl-grey); margin-top: 2px; }
.tl-theme .tl2-headact { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Blue-tint success pill (NOT green). */
.tl-theme .tl2-ok { display: none; align-items: center; gap: 5px; background: var(--tl-success-bg); color: var(--tl-blue); font: 500 11px/1 var(--tl-display); letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.tl-theme .tl2-ok svg { width: 12px; height: 12px; }
.tl-theme .rr-vi__step.tl2-row.tl2-has .tl2-ok { display: inline-flex; }

/* Filled blue Upload button + quiet Clear. */
.tl-theme .tl2-card .tl2-btn-primary {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  background: var(--tl-blue); color: #fff; border: 1px solid var(--tl-blue);
  border-radius: var(--tl-radius-sm); padding: 8px 14px;
  font: 500 12px/1 var(--tl-display); letter-spacing: 0.02em; text-transform: none; cursor: pointer;
}
.tl-theme .tl2-card .tl2-btn-primary:hover:not(:disabled) { background: #1f3dd9; border-color: #1f3dd9; }
.tl-theme .tl2-card .tl2-btn-primary svg { width: 13px; height: 13px; }
.tl-theme .tl2-clear { background: none; border: 0; padding: 2px 4px; color: var(--tl-grey); font: 400 12px/1 var(--tl-body-font); cursor: pointer; }
.tl-theme .tl2-clear:hover { color: var(--tl-ink); text-decoration: underline; }
.tl-theme .rr-vi__step.tl2-row:not(.tl2-has) .tl2-clear { display: none; }

/* CV inner panel: read-only preview by default, textarea on edit. */
.tl-theme .tl2-cv-panel { margin-top: 14px; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); background: #FCFCFB; padding: 12px 14px; }
.tl-theme .tl2-cv-preview { font: 400 12.5px/1.6 var(--tl-body-font); color: var(--tl-body); white-space: pre-wrap; max-height: 9.6em; overflow: hidden; cursor: text; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.tl-theme .tl2-cv-card #icCv { display: none; width: 100%; min-height: 150px; max-height: 220px; border: 0; background: transparent; padding: 0; resize: vertical; font: 400 12.5px/1.6 var(--tl-body-font); color: var(--tl-ink); }
.tl-theme .tl2-cv-card #icCv:focus { outline: none; box-shadow: none; }
.tl-theme .rr-vi__step.tl2-row.tl2-editing .tl2-cv-card .tl2-cv-preview { display: none; }
.tl-theme .rr-vi__step.tl2-row.tl2-editing .tl2-cv-card #icCv { display: block; }
.tl-theme .tl2-editbar { display: none; margin-top: 10px; align-items: center; justify-content: flex-end; gap: 16px; }
.tl-theme .rr-vi__step.tl2-row.tl2-has .tl2-cv-card .tl2-editbar { display: flex; }
.tl-theme .tl2-editlink, .tl-theme .tl2-done { background: none; border: 0; padding: 0; cursor: pointer; font: 500 12px/1 var(--tl-display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--tl-blue); }
.tl-theme .tl2-editlink:hover, .tl-theme .tl2-done:hover { color: #1f3dd9; }
.tl-theme .tl2-done { display: none; }
.tl-theme .rr-vi__step.tl2-row.tl2-editing .tl2-editlink { display: none; }
.tl-theme .rr-vi__step.tl2-row.tl2-editing .tl2-done,
.tl-theme .rr-vi__step.tl2-row.tl2-jd-expanded .tl2-done { display: inline-flex; }
.tl-theme .tl2-cvstatus { margin: 8px 0 0; font: 400 12px/1.4 var(--tl-body-font); color: var(--tl-ink); }
.tl-theme .tl2-cvstatus:empty, .tl-theme .tl2-cvstatus[data-state="ok"] { display: none; }
.tl-theme .tl2-cvstatus[data-state="err"] { display: block; color: var(--tl-red); }

/* JD card: collapsed summary, pencil expands to the textarea. */
.tl-theme .tl2-jd-count { font: 400 12px/1.3 var(--tl-body-font); color: var(--tl-grey); white-space: nowrap; }
.tl-theme .tl2-icon-btn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--tl-hair); background: #fff; color: var(--tl-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tl-theme .tl2-icon-btn:hover { border-color: var(--tl-blue); color: var(--tl-blue); }
.tl-theme .tl2-icon-btn svg { width: 15px; height: 15px; }
.tl-theme .tl2-jd-body { display: none; margin-top: 12px; }
.tl-theme .rr-vi__step.tl2-row.tl2-jd-expanded .tl2-jd-body { display: block; }
.tl-theme .rr-vi__step.tl2-row.tl2-jd-expanded .tl2-jd-count,
.tl-theme .rr-vi__step.tl2-row.tl2-jd-expanded .tl2-icon-btn { display: none; }
.tl-theme .tl2-jd-card .rr-vi__jd-wrap { position: relative; margin: 0; }
.tl-theme .tl2-jd-card #icJd { width: 100%; min-height: 130px; max-height: 220px; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); background: #fff; color: var(--tl-ink); padding: 12px 14px 26px; resize: vertical; font: 400 13px/1.55 var(--tl-body-font); }
.tl-theme .tl2-jd-card #icJd:focus { outline: none; border-color: var(--tl-blue); box-shadow: none; }
.tl-theme .tl2-jd-card #icJdCounter { position: absolute; right: 12px; bottom: 10px; font: 400 12px/1 var(--tl-body-font); color: var(--tl-mute); }
.tl-theme .tl2-jd-card .tl2-editbar { display: none; }
.tl-theme .rr-vi__step.tl2-row.tl2-has.tl2-jd-expanded .tl2-jd-card .tl2-editbar { display: flex; }

/* Mode: two selectable cards (icon + name + desc), v2 selection grammar. */
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .tl-theme .rr-vi__step.tl2-row .rr-vi__mode-grid { grid-template-columns: 1fr; } }
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; cursor: pointer;
  background: var(--tl-card) !important; border: 1px solid var(--tl-hair) !important; box-shadow: none !important;
  border-radius: var(--tl-radius) !important; padding: 14px 40px 14px 14px !important;
}
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode.is-selected, .tl-theme .rr-vi__step.tl2-row .rr-vi__mode.active { border-color: var(--tl-tint-border) !important; background: var(--tl-tint) !important; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode-name { display: flex; align-items: center; gap: 9px; color: var(--tl-ink); font: 500 14px/1.2 var(--tl-body-font); border: 0; padding: 0; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode-name > span { border: 0; padding: 0; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode.is-selected .rr-vi__mode-name, .tl-theme .rr-vi__step.tl2-row .rr-vi__mode.active .rr-vi__mode-name { color: var(--tl-blue); }
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode-icon { display: inline-flex !important; width: 18px; height: 18px; color: inherit; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode-icon svg { width: 18px; height: 18px; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode-desc { display: block !important; margin: 0; padding: 0; color: var(--tl-grey); font: 400 12px/1.4 var(--tl-body-font); }
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode-radio { display: block !important; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border: 1.5px solid var(--tl-hair); border-radius: 999px; background: transparent; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode.is-selected .rr-vi__mode-radio, .tl-theme .rr-vi__step.tl2-row .rr-vi__mode.active .rr-vi__mode-radio { display: none !important; }
.tl-theme .tl2-mcheck { display: none; position: absolute; top: 11px; right: 11px; width: 20px; height: 20px; border-radius: 999px; background: var(--tl-blue); color: #fff; align-items: center; justify-content: center; }
.tl-theme .tl2-mcheck svg { width: 13px; height: 13px; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__mode.is-selected .tl2-mcheck, .tl-theme .rr-vi__step.tl2-row .rr-vi__mode.active .tl2-mcheck { display: inline-flex; }

/* Voice: wrapping chip row (waveform + name), v2 selection grammar + mini check. */
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice-wrap { margin: 0; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice-scroll { display: flex; flex-wrap: wrap; gap: 10px; overflow: visible; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice {
  position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--tl-card) !important; border: 1px solid var(--tl-hair) !important; box-shadow: none !important;
  border-radius: 999px !important; padding: 8px 14px 8px 11px !important; min-width: 0 !important; flex: 0 0 auto !important; transform: none !important;
}
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice.is-selected, .tl-theme .rr-vi__step.tl2-row .rr-vi__voice.active { border-color: var(--tl-tint-border) !important; background: var(--tl-tint) !important; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice-avatar,
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice-personality,
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice-play { display: none !important; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice-meta { display: inline-flex; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice-name { color: var(--tl-ink); font: 500 13px/1 var(--tl-body-font); border: 0 !important; padding: 0; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice.is-selected .rr-vi__voice-name, .tl-theme .rr-vi__step.tl2-row .rr-vi__voice.active .rr-vi__voice-name { color: var(--tl-blue); }
.tl-theme .tl2-wave { display: inline-flex; width: 16px; height: 16px; color: var(--tl-mute); }
.tl-theme .tl2-wave svg { width: 16px; height: 16px; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice.is-selected .tl2-wave, .tl-theme .rr-vi__step.tl2-row .rr-vi__voice.active .tl2-wave { color: var(--tl-blue); }
/* voice-preview-speed: visible playing state. The hidden play span keeps
   carrying data-state (set by icPreviewVoice on both the static and live
   paths); :has() lifts it onto the chip: blue selected-style border, label
   and waveform glyph in blue for the clip's duration. No animation; reverts
   automatically when the state returns to idle. */
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice:has(.rr-vi__voice-play[data-state="playing"]) { border-color: var(--tl-tint-border) !important; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice:has(.rr-vi__voice-play[data-state="playing"]) .rr-vi__voice-name { color: var(--tl-blue); }
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice:has(.rr-vi__voice-play[data-state="playing"]) .tl2-wave { color: var(--tl-blue); }
.tl-theme .tl2-vcheck { display: none; width: 15px; height: 15px; border-radius: 999px; background: var(--tl-blue); color: #fff; align-items: center; justify-content: center; }
.tl-theme .tl2-vcheck svg { width: 10px; height: 10px; }
.tl-theme .rr-vi__step.tl2-row .rr-vi__voice.is-selected .tl2-vcheck, .tl-theme .rr-vi__step.tl2-row .rr-vi__voice.active .tl2-vcheck { display: inline-flex; }
.tl-theme .tl2-voice-sub { margin-top: 10px; font: 400 12px/1.4 var(--tl-body-font); color: var(--tl-grey); }

/* Session: one card, three hairline-split zones + full-width focus row. */
.tl-theme .tl2-session-card { padding: 0; }
.tl-theme .tl2-zones { display: grid; grid-template-columns: 1fr auto 1fr; }
.tl-theme .tl2-zone { padding: 16px; min-width: 0; }
.tl-theme .tl2-zone + .tl2-zone { border-left: 1px solid var(--tl-hair); }
.tl-theme .tl2-zone-dur { padding-left: 22px; padding-right: 22px; }
.tl-theme .tl2-zlbl { font: 500 11px/1 var(--tl-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tl-mute); margin-bottom: 12px; }
.tl-theme .tl2-dur { display: inline-flex; align-items: center; gap: 8px; color: var(--tl-ink); font: 500 15px/1 var(--tl-display); white-space: nowrap; }
.tl-theme .tl2-dur svg { width: 17px; height: 17px; color: var(--tl-blue); }
.tl-theme .tl2-focus { padding: 16px; border-top: 1px solid var(--tl-hair); }
.tl-theme .tl2-opt { color: var(--tl-mute); font-weight: 400; text-transform: none; letter-spacing: 0; }
.tl-theme .tl2-focus-field { display: flex; align-items: center; gap: 10px; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); background: #fff; padding: 0 12px; }
.tl-theme .tl2-focus-field svg { width: 17px; height: 17px; color: var(--tl-mute); flex: 0 0 auto; }
.tl-theme .tl2-focus-field #icSetupFocus { flex: 1 1 auto; border: 0 !important; background: transparent !important; border-radius: 0 !important; padding: 10px 0 !important; font: 400 13px/1.4 var(--tl-body-font); color: var(--tl-ink); }
.tl-theme .tl2-focus-field #icSetupFocus:focus { outline: none; box-shadow: none; }
@media (max-width: 620px) {
  .tl-theme .tl2-zones { grid-template-columns: 1fr; }
  .tl-theme .tl2-zone + .tl2-zone { border-left: 0; border-top: 1px solid var(--tl-hair); }
}

/* Session question + difficulty chips: boxed (v2 grammar), not underline. */
.tl-theme .rr-vi__step.tl2-row #icBoundPills { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-theme .rr-vi__step.tl2-row .ic-bound-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px;
  background: var(--tl-card) !important; border: 1px solid var(--tl-hair) !important; box-shadow: none !important;
  border-radius: var(--tl-radius-sm) !important; padding: 9px 0 !important; color: var(--tl-ink);
}
.tl-theme .rr-vi__step.tl2-row .ic-bound-pill.is-selected, .tl-theme .rr-vi__step.tl2-row .ic-bound-pill.active { border-color: var(--tl-tint-border) !important; background: var(--tl-tint) !important; }
.tl-theme .rr-vi__step.tl2-row .ic-bound-pill-n { font: 500 15px/1 var(--tl-display); color: inherit; }
.tl-theme .rr-vi__step.tl2-row .ic-bound-pill.is-selected .ic-bound-pill-n, .tl-theme .rr-vi__step.tl2-row .ic-bound-pill.active .ic-bound-pill-n { color: var(--tl-blue); }
.tl-theme .rr-vi__step.tl2-row .ic-bound-pill-sub { display: none; }
.tl-theme .rr-vi__step.tl2-row .tl2-zone .rr-vi__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-theme .rr-vi__step.tl2-row .ic-diff-pill {
  background: var(--tl-card) !important; border: 1px solid var(--tl-hair) !important; box-shadow: none !important;
  border-radius: var(--tl-radius-sm) !important; padding: 8px 12px !important; color: var(--tl-grey);
  font: 400 13px/1 var(--tl-body-font);
}
.tl-theme .rr-vi__step.tl2-row .ic-diff-pill.is-selected, .tl-theme .rr-vi__step.tl2-row .ic-diff-pill.active { border-color: var(--tl-tint-border) !important; background: var(--tl-tint) !important; color: var(--tl-blue); }

/* ============================================================
   v2-dashboard: Phase A of the soft-editorial v2 migration (Dashboard only).
   The base dashboard rules are id-scoped (#jjPage_dashboard .x, 1,1,0) AND
   sit later in source than this block, so plain id-carrying overrides lose
   equal-specificity ties on source order (the Phase D tie audit confirmed 68
   such ties). Every selector here is therefore #jjPage_dashboard.tl-theme
   (1,2,0), winning regardless of order without !important. White cards on
   the warm canvas, hairline borders, --tl-radius, no shadows or gradients;
   success/positive = blue tint convention, no green, purple or amber.
   UK English, no em dashes.
   ============================================================ */

/* ═══ Pass 2 (Apollo cream): re-theme the Dashboard by aliasing its local --tl-*
   tokens to the --ap-* cream layer. Scoped to #jjPage_dashboard.tl-theme, so nothing
   leaks to other pages. --tl-red left intact (semantic red); --tl-blue -> --ap-accent
   keeps positive-delta / streak / active-dot / insight-arc semantics (same #2448FF).
   --tl-display -> Plus Jakarta here (labels/eyebrows); Fraunces applied to display
   type only, just below. Page background goes cream; cards stay white. ═══ */
#jjPage_dashboard.tl-theme{
  --tl-card:var(--ap-card); --tl-hair:var(--ap-hair);
  --tl-ink:var(--ap-ink); --tl-grey:var(--ap-ink-2); --tl-mute:var(--ap-ink-3);
  --tl-blue:var(--ap-accent);
  --tl-radius:var(--ap-radius-lg); --tl-radius-sm:var(--ap-radius);
  --tl-success-bg:var(--ap-accent-tint);
  --tl-display:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--ap-bg);
}

/* Header rhythm (themed in Phase 2; spacing only, no restructure). */
#jjPage_dashboard.tl-theme .jj-page-head { margin-bottom: 24px; }

/* Surfaces. */
#jjPage_dashboard.tl-theme .db-stat, #jjPage_dashboard.tl-theme .db-card {
  background: var(--tl-card); border: 1px solid var(--tl-hair);
  border-radius: var(--tl-radius); box-shadow: none;
}
#jjPage_dashboard.tl-theme .db-stat { padding: 16px; overflow: visible; }

/* Stat tiles: metric cards. Icons and sparklines stay hidden (the Phase 2
   display:none at 0,2,0 lost to the 1,1,0 base; re-asserted here at 1,1,x). */
#jjPage_dashboard.tl-theme .db-stat-icon, #jjPage_dashboard.tl-theme .db-stat-spark { display: none; }
#jjPage_dashboard.tl-theme .db-stat-label { font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.07em; text-transform: uppercase; color: var(--tl-mute); }
#jjPage_dashboard.tl-theme .db-stat-period { color: var(--tl-mute); text-transform: none; letter-spacing: 0; }
#jjPage_dashboard.tl-theme .db-stat-num { font: 500 38px/1 var(--tl-display); letter-spacing: -0.03em; color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-stat-replies .db-stat-num { color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db-stat-unit { font: 400 12px/1 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db-stat-sub { font: 400 11.5px/1.35 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db-stat-delta { font: 500 12px/1 var(--tl-body-font); color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db-stat-delta.is-neg { color: var(--tl-red); }
#jjPage_dashboard.tl-theme .db-stat-delta.is-flat { color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db-stat-band { font: 500 12px/1 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-stat-band.is-low { color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db-stat-band.is-medium { color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-stat-band.is-high { color: var(--tl-red); }
#jjPage_dashboard.tl-theme .db-stat-bar-wrap { background: var(--tl-hair); }
#jjPage_dashboard.tl-theme .db-stat-bar-fill { background: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db-streak-letter { color: var(--tl-mute); }
#jjPage_dashboard.tl-theme .db-streak-dot { border-color: var(--tl-hair); }
#jjPage_dashboard.tl-theme .db-streak-day.is-active .db-streak-dot { background: var(--tl-blue); border-color: var(--tl-blue); }

/* Card chrome: typographic titles, quiet uppercase blue links. */
#jjPage_dashboard.tl-theme .db-card-title { font: 500 16px/1.3 var(--ap-display); letter-spacing: -0.02em; color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-card-ico { display: none; }
#jjPage_dashboard.tl-theme .db-card-link { font: 500 11px/1 var(--tl-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db-card-link:hover { color: #1f3dd9; }
#jjPage_dashboard.tl-theme .db-card-filter { font: 400 12px/1 var(--tl-body-font); color: var(--tl-grey); }

/* Today's plan. */
#jjPage_dashboard.tl-theme .db-plan-item { border-bottom-color: var(--tl-hair); }
#jjPage_dashboard.tl-theme .db-plan-check { border-color: var(--tl-hair); }
#jjPage_dashboard.tl-theme .db-plan-item.is-done .db-plan-check { background: var(--tl-blue); border-color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db-plan-text { font: 400 13px/1.4 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-plan-item.is-done .db-plan-text { color: var(--tl-mute); }
#jjPage_dashboard.tl-theme .db-plan-progress { color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db-plan-progress-count { color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-plan-bar { background: var(--tl-hair); }
#jjPage_dashboard.tl-theme .db-plan-bar-fill { background: var(--tl-blue); }

/* Pipeline: plain hairline boxes, no per-stage tints. */
#jjPage_dashboard.tl-theme .db-pipe,
#jjPage_dashboard.tl-theme .db-pipe-apps, #jjPage_dashboard.tl-theme .db-pipe-replies,
#jjPage_dashboard.tl-theme .db-pipe-interviews, #jjPage_dashboard.tl-theme .db-pipe-offers {
  background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm);
}
#jjPage_dashboard.tl-theme .db-pipe-label { font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.07em; text-transform: uppercase; color: var(--tl-mute); }
#jjPage_dashboard.tl-theme .db-pipe-num { font: 500 26px/1 var(--tl-display); letter-spacing: -0.02em; color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-pipe-pct { color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db-pipeline-insight {
  background: var(--tl-success-bg); border-color: var(--tl-success-bg);
  border-radius: var(--tl-radius-sm); color: var(--tl-blue);
}

/* Visa countdown. */
#jjPage_dashboard.tl-theme .db-visa-sub { color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db-visa-days-num { font: 500 34px/1 var(--tl-display); letter-spacing: -0.03em; color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-visa-days-unit { color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db-visa-bar { background: var(--tl-hair); }
#jjPage_dashboard.tl-theme .db-visa-bar-fill { background: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db-visa-date { color: var(--tl-grey); }

/* Insight: blue arc on a hairline track (CSS stroke beats the JS-set
   presentation attributes), primary blue CTA. */
#jjPage_dashboard.tl-theme .db-insight-donut { color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-insight-donut circle { stroke: var(--tl-hair); }
#jjPage_dashboard.tl-theme #dbInsightArc { stroke: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db-insight-title { font: 500 14px/1.3 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-insight-body-txt { font: 400 12.5px/1.5 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db-insight-btn {
  background: var(--rr-accent); border: 0; border-radius: 8px;
  color: #fff; font: 600 12px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: 0;
}
#jjPage_dashboard.tl-theme .db-insight-btn:hover { background: var(--rr-accent-hover); }

/* Recent applications: hairline-divided rows, no row boxes. Status word keeps
   the merged tl-status colour mapping untouched. */
#jjPage_dashboard.tl-theme .db-recent-list > *:not(.db-empty) { border-bottom-color: var(--tl-hair); }
#jjPage_dashboard.tl-theme .jj-app-row { border-bottom-color: var(--tl-hair); }
#jjPage_dashboard.tl-theme .jj-app-co { font: 500 13.5px/1.3 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .jj-app-role { font: 400 12px/1.35 var(--tl-body-font); color: var(--tl-grey); }

/* Deadlines. */
#jjPage_dashboard.tl-theme .jj-deadline-row { border-bottom-color: var(--tl-hair); }
#jjPage_dashboard.tl-theme .jj-deadline-date { font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .jj-deadline-co { font: 500 13.5px/1.3 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .jj-deadline-role { font: 400 12px/1.35 var(--tl-body-font); color: var(--tl-grey); }

/* Weekly progress. */
#jjPage_dashboard.tl-theme .db-weekly-label, #jjPage_dashboard.tl-theme .db-weekly-streaklabel { color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db-weekly-count, #jjPage_dashboard.tl-theme .db-weekly-streakval { color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-weekly-count [contenteditable] { color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-weekly-count [contenteditable]:focus { color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db-weekly-streakfire { color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db-weekly-bar { background: var(--tl-hair); }
#jjPage_dashboard.tl-theme .db-weekly-bar-fill { background: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db-weekly-msg { font: 400 12.5px/1.45 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db-weekly-letter { color: var(--tl-mute); }
#jjPage_dashboard.tl-theme .db-weekly-dot { border-color: var(--tl-hair); }
#jjPage_dashboard.tl-theme .db-weekly-day.is-active .db-weekly-dot { background: var(--tl-blue); border-color: var(--tl-blue); }

/* Empty states: quiet grey text. */
#jjPage_dashboard.tl-theme .db-empty { font: 400 12.5px/1.45 var(--tl-body-font); color: var(--tl-grey); text-align: center; padding: 18px 0; }
#jjPage_dashboard.tl-theme .db-pinboard-empty-ico { color: var(--tl-mute); }

/* Fraunces (--ap-display) for display type only, placed AFTER the numeral/title
   rules so it overrides their `font:` shorthand family. Greeting, card titles, and
   KPI/metric numerals go serif; labels/eyebrows/links stay Plus Jakarta. */
#jjPage_dashboard.tl-theme .jj-greeting,
#jjPage_dashboard.tl-theme .db-card-title,
#jjPage_dashboard.tl-theme .db-stat-num,
#jjPage_dashboard.tl-theme .db-pipe-num,
#jjPage_dashboard.tl-theme .db-visa-days-num { font-family: var(--ap-display); letter-spacing: -0.02em; }

/* C4: dashboard "Pinned notes" previews become soft cream note-cards (retire the
   sticky-colour skeuomorphism); Caveat kept for the note TEXT only, a warm handwritten
   touch that reads well on cream. The full-screen cork board (OPEN PINBOARD overlay) is
   a separate surface, left for its own pass. */
#jjPage_dashboard.tl-theme .pb-dash-card { background: var(--ap-card); border: 1px solid var(--ap-hair); border-radius: var(--ap-radius-lg); }
#jjPage_dashboard.tl-theme .pb-dash-card:hover { border-color: var(--ap-accent-border, #c2cdff); }
#jjPage_dashboard.tl-theme .pb-dash-title { color: var(--ap-ink); font-family: var(--ap-display); font-weight: 500; }
#jjPage_dashboard.tl-theme .pb-dash-action { color: var(--ap-accent); }
#jjPage_dashboard.tl-theme .pb-dash-note { background: var(--ap-bg-2) !important; border: 1px solid var(--ap-hair); box-shadow: var(--ap-shadow-sm); color: var(--ap-ink-2); }

/* ═══════════════════════════════════════════════════════════════════
   Dashboard v2: single-hero hierarchy, adaptive momentum, action-forward
   empty states. Replaces the old 5-tile stat row + duplicate pipeline/weekly
   grids. State is driven by #dbRoot[data-state="empty"|"active"].
   ═══════════════════════════════════════════════════════════════════ */
#jjPage_dashboard.tl-theme .db-grid.db2 { display: flex; flex-direction: column; gap: 20px; }
#jjPage_dashboard.tl-theme .db2[data-state="empty"]  .db2-active-only { display: none !important; }
#jjPage_dashboard.tl-theme .db2[data-state="active"] .db2-empty-only  { display: none !important; }

/* Headline (replaces "Good morning, Name 👋") */
#jjPage_dashboard.tl-theme .db2-headline { font: 500 30px/1.15 var(--ap-display); letter-spacing: -0.02em; color: var(--tl-ink); margin: 0; }
#jjPage_dashboard.tl-theme .db2-subline  { font: 400 14px/1.5 var(--tl-body-font); color: var(--tl-grey); margin: 6px 0 0; }

/* Shared card chrome for the v2 cards */
#jjPage_dashboard.tl-theme .db2-card { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); padding: 18px 18px 20px; display: flex; flex-direction: column; }
#jjPage_dashboard.tl-theme .db2 .db-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* ── HERO · empty-state "start here" ── */
#jjPage_dashboard.tl-theme .db2-start { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); padding: 28px 28px 26px; }
#jjPage_dashboard.tl-theme .db2-start-eyebrow { font: 500 11px/1 var(--tl-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tl-blue); margin-bottom: 10px; }
#jjPage_dashboard.tl-theme .db2-start-title { font: 500 24px/1.2 var(--ap-display); letter-spacing: -0.02em; color: var(--tl-ink); margin: 0; }
#jjPage_dashboard.tl-theme .db2-start-sub { font: 400 13.5px/1.5 var(--tl-body-font); color: var(--tl-grey); margin: 8px 0 20px; }
#jjPage_dashboard.tl-theme .db2-start-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
#jjPage_dashboard.tl-theme .db2-step { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 16px; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); background: transparent; cursor: pointer; transition: border-color .15s, background .15s; }
#jjPage_dashboard.tl-theme .db2-step:hover { border-color: var(--tl-blue); background: var(--tl-success-bg); }
#jjPage_dashboard.tl-theme .db2-step-n { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font: 600 12px/1 var(--tl-display); background: var(--tl-blue); color: #fff; margin-bottom: 8px; }
#jjPage_dashboard.tl-theme .db2-step-t { font: 500 14px/1.3 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db2-step-s { font: 400 12px/1.35 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db2-start-cta { align-self: flex-start; background: var(--rr-accent); color: #fff; border: 0; border-radius: 9px; padding: 11px 18px; font: 600 13px/1 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
#jjPage_dashboard.tl-theme .db2-start-cta:hover { background: var(--rr-accent-hover); }

/* ── HERO · active-state momentum ── */
#jjPage_dashboard.tl-theme .db2-momentum { display: grid; grid-template-columns: minmax(170px, 230px) 1fr; grid-template-areas: "metric trend" "funnel funnel"; gap: 22px 28px; background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); padding: 24px 26px; }
#jjPage_dashboard.tl-theme .db2-mo-metric { grid-area: metric; align-self: center; }
#jjPage_dashboard.tl-theme .db2-mo-label { font: 500 11px/1 var(--tl-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tl-mute); margin-bottom: 10px; }
#jjPage_dashboard.tl-theme .db2-mo-figure { display: flex; align-items: baseline; gap: 10px; }
#jjPage_dashboard.tl-theme .db2-mo-num { font: 500 54px/0.95 var(--ap-display); letter-spacing: -0.03em; color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db2-mo-delta { font: 500 13px/1 var(--tl-body-font); color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db2-mo-delta.is-neg { color: var(--tl-red); }
#jjPage_dashboard.tl-theme .db2-mo-delta.is-flat { color: var(--tl-mute); }
#jjPage_dashboard.tl-theme .db2-mo-sub { font: 400 13px/1.4 var(--tl-body-font); color: var(--tl-grey); margin-top: 8px; }
#jjPage_dashboard.tl-theme .db2-mo-trend { grid-area: trend; display: flex; flex-direction: column; }
#jjPage_dashboard.tl-theme .db2-mo-trend-cap { font: 500 11px/1 var(--tl-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tl-mute); margin-bottom: 10px; align-self: flex-end; }
#jjPage_dashboard.tl-theme .db2-trend-svg { width: 100%; height: 90px; color: var(--tl-blue); display: block; }
/* Funnel, tapering bars with stage-to-stage conversion %. */
#jjPage_dashboard.tl-theme .db2-funnel { grid-area: funnel; display: flex; flex-direction: column; gap: 9px; padding-top: 18px; border-top: 1px solid var(--tl-hair); }
#jjPage_dashboard.tl-theme .db2-fn-row { display: grid; grid-template-columns: 78px 1fr auto minmax(96px, auto); align-items: center; gap: 12px; }
#jjPage_dashboard.tl-theme .db2-fn-name { font: 500 11px/1 var(--tl-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tl-mute); }
#jjPage_dashboard.tl-theme .db2-fn-track { height: 10px; border-radius: 99px; background: var(--tl-hair); overflow: hidden; }
#jjPage_dashboard.tl-theme .db2-fn-bar { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--tl-blue); transition: width .5s ease; }
#jjPage_dashboard.tl-theme .db2-fn-val { font: 500 16px/1 var(--ap-display); letter-spacing: -0.01em; color: var(--tl-ink); min-width: 1.5ch; text-align: right; font-variant-numeric: tabular-nums; }
#jjPage_dashboard.tl-theme .db2-fn-conv { font: 400 11.5px/1 var(--tl-body-font); color: var(--tl-grey); text-align: right; font-variant-numeric: tabular-nums; }

/* [hidden] fix, several db2 elements set display:flex, which (as author CSS)
   overrides the UA `[hidden]{display:none}` and left gated cards (Sources
   donut, visa reply-rate nudge) visible with stale content. Restore it. */
#jjPage_dashboard.tl-theme [hidden] { display: none !important; }

/* ── At a glance, small-multiples row ── */
#jjPage_dashboard.tl-theme .db2-glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#jjPage_dashboard.tl-theme .db2-tile { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); padding: 14px 16px 16px; display: flex; flex-direction: column; min-width: 0; }
#jjPage_dashboard.tl-theme .db2-tile-eyebrow { font: 500 11px/1 var(--tl-display); letter-spacing: 0.07em; text-transform: uppercase; color: var(--tl-mute); }
#jjPage_dashboard.tl-theme .db2-tile-value { font: 500 28px/1 var(--ap-display); letter-spacing: -0.02em; color: var(--tl-ink); margin-top: 9px; }
#jjPage_dashboard.tl-theme .db2-tile-sub { font: 400 12px/1.3 var(--tl-body-font); color: var(--tl-grey); margin-top: 4px; }
#jjPage_dashboard.tl-theme .db2-tile-chart { margin-top: auto; padding-top: 12px; }
/* Sponsor mix, 3-segment stacked bar */
#jjPage_dashboard.tl-theme .db2-sponsor-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--tl-hair); }
#jjPage_dashboard.tl-theme .db2-sponsor-seg { height: 100%; transition: width .5s ease; }
#jjPage_dashboard.tl-theme .db2-sponsor-seg.is-lic { background: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db2-sponsor-seg.is-caution { background: #b45309; }
#jjPage_dashboard.tl-theme .db2-sponsor-seg.is-non { background: #C9594A; }
#jjPage_dashboard.tl-theme .db2-sponsor-seg.is-unk { background: #C9C2B4; }
/* Most active day, 7 micro bars */
#jjPage_dashboard.tl-theme .db2-dow { display: flex; align-items: flex-end; gap: 5px; height: 34px; }
#jjPage_dashboard.tl-theme .db2-dow-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
#jjPage_dashboard.tl-theme .db2-dow-bar { width: 100%; min-height: 2px; border-radius: 3px; background: var(--tl-hair); transition: height .4s ease; }
#jjPage_dashboard.tl-theme .db2-dow-col.is-top .db2-dow-bar { background: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db2-dow-lbl { font: 500 9px/1 var(--tl-display); color: var(--tl-mute); }
/* Awaiting reply, aging bar */
#jjPage_dashboard.tl-theme .db2-age-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--tl-hair); }
#jjPage_dashboard.tl-theme .db2-age-seg { height: 100%; transition: width .5s ease; }
#jjPage_dashboard.tl-theme .db2-age-seg.is-fresh { background: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db2-age-seg.is-mid { background: #8AA0FF; }
#jjPage_dashboard.tl-theme .db2-age-seg.is-stale { background: #C9594A; }

/* ── Support row ── */
#jjPage_dashboard.tl-theme .db2-support { display: grid; gap: 16px; }
#jjPage_dashboard.tl-theme .db2[data-state="empty"]  .db2-support { grid-template-columns: repeat(2, 1fr); }
#jjPage_dashboard.tl-theme .db2[data-state="active"] .db2-support { grid-template-columns: repeat(3, 1fr); }
#jjPage_dashboard.tl-theme .db2-plan-count { font: 500 12px/1 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db2 .db-plan-list { margin-bottom: 14px; }
#jjPage_dashboard.tl-theme .db2 .db-plan-bar { margin-top: auto; }

/* ── Next best actions card (replaces Today's plan; dashboard-scoped) ── */
#jjPage_dashboard.tl-theme .rr-nba-subtitle { font: 400 12px/1.35 var(--tl-body-font); color: var(--tl-grey); margin-top: 3px; }
#jjPage_dashboard.tl-theme .rr-next-actions-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
#jjPage_dashboard.tl-theme .rr-action-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--tl-hair); }
#jjPage_dashboard.tl-theme .rr-action-row:last-child { border-bottom: 0; padding-bottom: 0; }
#jjPage_dashboard.tl-theme .rr-action-main { flex: 1 1 190px; min-width: 0; }
#jjPage_dashboard.tl-theme .rr-action-titlerow { display: flex; align-items: center; gap: 8px; }
#jjPage_dashboard.tl-theme .rr-action-priority { flex: 0 0 auto; font: 600 9.5px/1 var(--tl-display); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; }
#jjPage_dashboard.tl-theme .rr-action-priority.is-high { background: var(--ap-accent-tint, #edf0ff); color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .rr-action-priority.is-medium { background: var(--tl-hair); color: var(--tl-mute); }
#jjPage_dashboard.tl-theme .rr-action-title { font: 500 13.5px/1.25 var(--tl-body-font); color: var(--tl-ink); min-width: 0; }
#jjPage_dashboard.tl-theme .rr-action-description { font: 400 12px/1.4 var(--tl-body-font); color: var(--tl-grey); margin-top: 5px; }
#jjPage_dashboard.tl-theme .rr-action-meta { font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--tl-mute); margin-top: 5px; }
#jjPage_dashboard.tl-theme .rr-action-button { flex: 0 0 auto; background: var(--rr-accent, #2448FF); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font: 600 12px/1 'Plus Jakarta Sans', sans-serif; cursor: pointer; white-space: nowrap; }
#jjPage_dashboard.tl-theme .rr-action-button:hover { background: var(--rr-accent-hover, #1f3dd9); }
#jjPage_dashboard.tl-theme .rr-action-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 0 2px; margin-top: 4px; }
#jjPage_dashboard.tl-theme .rr-action-empty-title { font: 500 14px/1.3 var(--ap-display); color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .rr-action-empty-sub { font: 400 12.5px/1.45 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .rr-action-empty .rr-action-button { margin-top: 8px; }
/* Mobile: CTA drops below the text, no horizontal overflow. */
@media (max-width: 560px) {
  #jjPage_dashboard.tl-theme .rr-action-row { flex-direction: column; align-items: stretch; }
  #jjPage_dashboard.tl-theme .rr-action-main { flex: 0 0 auto; width: 100%; }
  #jjPage_dashboard.tl-theme .rr-action-button { align-self: flex-start; margin-top: 10px; }
}

/* This week card (goal + streak) */
#jjPage_dashboard.tl-theme .db2-week-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
#jjPage_dashboard.tl-theme .db2-week-label { font: 400 13px/1 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db2-week-count { font: 500 15px/1 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db2-week-count [contenteditable]:focus { color: var(--tl-blue); outline: none; }
#jjPage_dashboard.tl-theme .db2-week-streak { margin-top: 14px; font: 400 13px/1.4 var(--tl-body-font); color: var(--tl-grey); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#jjPage_dashboard.tl-theme .db2-week-streakfire { color: var(--tl-blue); display: inline-flex; }
#jjPage_dashboard.tl-theme .db2-week-msg { color: var(--tl-mute); }

/* Visa card */
#jjPage_dashboard.tl-theme .db2-visa-set { font: 400 13px/1.5 var(--tl-body-font); color: var(--tl-grey); margin: 0 0 14px; }
#jjPage_dashboard.tl-theme .db2-visa-setbtn { align-self: flex-start; background: transparent; border: 1px solid var(--tl-hair); border-radius: 8px; padding: 9px 14px; font: 600 12.5px/1 'Plus Jakarta Sans', sans-serif; color: var(--tl-blue); cursor: pointer; }
#jjPage_dashboard.tl-theme .db2-visa-setbtn:hover { border-color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .db2-visa-figure { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
#jjPage_dashboard.tl-theme .db2-visa-num { font: 500 40px/0.95 var(--ap-display); letter-spacing: -0.03em; color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db2-visa-unit { font: 400 13px/1 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .db2-visa-foot { font: 400 12px/1.4 var(--tl-body-font); color: var(--tl-grey); margin-top: 8px; }
#jjPage_dashboard.tl-theme .db2-visa-nudge { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tl-hair); display: flex; flex-direction: column; gap: 8px; }
#jjPage_dashboard.tl-theme .db2-visa-nudge-txt { font: 400 12.5px/1.45 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db2-visa-nudge-btn { align-self: flex-start; background: transparent; border: 0; padding: 0; font: 600 12px/1 'Plus Jakarta Sans', sans-serif; color: var(--tl-blue); cursor: pointer; }
#jjPage_dashboard.tl-theme .db2-visa-nudge-btn:hover { text-decoration: underline; }

/* Secondary row */
#jjPage_dashboard.tl-theme .db2-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* When the (conditional) Sources card is shown, secondary becomes 3-up. */
#jjPage_dashboard.tl-theme .db2-secondary.has-sources { grid-template-columns: 1fr 1.2fr 1fr; }

/* Sources donut card */
#jjPage_dashboard.tl-theme .db2-src-body { display: flex; align-items: center; gap: 14px; }
#jjPage_dashboard.tl-theme .db2-src-donut { flex: 0 0 auto; }
#jjPage_dashboard.tl-theme .db2-src-donut svg { width: 80px; height: 80px; display: block; }
#jjPage_dashboard.tl-theme .db2-src-track { stroke: var(--tl-hair); }
#jjPage_dashboard.tl-theme .db2-src-seg { stroke-linecap: butt; transition: stroke-dasharray .5s ease; }
#jjPage_dashboard.tl-theme .db2-src-total { fill: var(--tl-ink); font: 600 9px var(--ap-display); }
#jjPage_dashboard.tl-theme .db2-src-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; }
#jjPage_dashboard.tl-theme .db2-src-item { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--tl-body-font); }
#jjPage_dashboard.tl-theme .db2-src-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
#jjPage_dashboard.tl-theme .db2-src-name { flex: 1 1 auto; color: var(--tl-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#jjPage_dashboard.tl-theme .db2-src-count { color: var(--tl-ink); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

@media (max-width: 960px) {
  #jjPage_dashboard.tl-theme .db2-momentum { grid-template-columns: 1fr; grid-template-areas: "metric" "trend" "funnel"; }
  #jjPage_dashboard.tl-theme .db2[data-state="active"] .db2-support,
  #jjPage_dashboard.tl-theme .db2[data-state="empty"]  .db2-support { grid-template-columns: 1fr; }
  #jjPage_dashboard.tl-theme .db2-secondary,
  #jjPage_dashboard.tl-theme .db2-secondary.has-sources { grid-template-columns: 1fr; }
  #jjPage_dashboard.tl-theme .db2-glance { grid-template-columns: 1fr; }
  #jjPage_dashboard.tl-theme .db2-start-steps { grid-template-columns: 1fr; }
  #jjPage_dashboard.tl-theme .db2-headline { font-size: 24px; }
}

/* Evidence Library (read-only, tl-theme tokens only). */
#jjPage_evidence .ev-group-label { margin: 26px 0 12px; }
#jjPage_evidence .ev-group-label:first-child { margin-top: 6px; }
#jjPage_evidence .ev-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); padding: 14px 16px; margin-bottom: 8px; }
#jjPage_evidence .ev-item-main { min-width: 0; }
#jjPage_evidence .ev-item-text { font: 500 14.5px/1.45 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_evidence .ev-item-ctx { font: 400 12.5px/1.4 var(--tl-body-font); color: var(--tl-grey); margin-top: 3px; }
#jjPage_evidence .jj-status-pill { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; white-space: nowrap; }
#jjPage_evidence .ev-pill-verified { color: #177449; background: #eef6f1; border: 1px solid #cfe6da; }
#jjPage_evidence .ev-pill-prov { color: var(--tl-grey); background: transparent; border: 1px solid var(--tl-hair); font-weight: 600; }
#jjPage_evidence .ev-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
#jjPage_evidence .ev-btn { font: 500 12px var(--tl-body-font); padding: 4px 10px; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); background: var(--tl-card); color: var(--tl-ink); cursor: pointer; line-height: 1.2; transition: border-color 0.14s, color 0.14s, background 0.14s; }
#jjPage_evidence .ev-btn:hover { border-color: var(--tl-mute); }
#jjPage_evidence .ev-btn-remove { color: var(--tl-grey); }
#jjPage_evidence .ev-btn-remove:hover { color: #b4231a; border-color: #e4b7b2; background: #fbf2f1; }
#jjPage_evidence .ev-btn-confirm { color: var(--tl-ink); border-color: var(--tl-mute); }
#jjPage_evidence .ev-btn-confirm:hover { color: #177449; border-color: #cfe6da; background: #eef6f1; }
#jjPage_evidence .ev-add-bar { margin: 4px 0 18px; }
#jjPage_evidence .ev-add-toggle { font: 500 13px var(--tl-body-font); padding: 8px 14px; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); background: var(--tl-card); color: var(--tl-ink); cursor: pointer; transition: border-color 0.14s, background 0.14s; }
#jjPage_evidence .ev-add-toggle:hover { border-color: var(--tl-mute); background: #fbfbf9; }
#jjPage_evidence .ev-form { border: 1px solid var(--tl-hair); border-radius: 12px; padding: 14px 16px; background: rgba(17,18,22,.015); }
#jjPage_evidence .ev-form-t { font: 600 12.5px var(--tl-body-font); color: var(--tl-ink); margin-bottom: 11px; }
#jjPage_evidence .ev-form-input { width: 100%; box-sizing: border-box; border: 1px solid var(--tl-hair); border-radius: 9px; background: #fff; padding: 9px 11px; font: 400 13px/1.4 var(--tl-body-font); color: var(--tl-ink); outline: none; }
#jjPage_evidence .ev-form-input:focus { border-color: var(--tl-blue); }
#jjPage_evidence textarea.ev-form-input { resize: vertical; margin-bottom: 9px; }
#jjPage_evidence .ev-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 11px; }
#jjPage_evidence .ev-form-acts { display: flex; gap: 8px; }
#jjPage_evidence .ev-form-add { border: 0; border-radius: 10px; background: var(--tl-blue); color: #fff; font: 500 13px var(--tl-display); padding: 9px 16px; cursor: pointer; transition: background 0.14s; }
#jjPage_evidence .ev-form-add:hover { background: var(--tl-blue-d, #1f3dd9); }
#jjPage_evidence .ev-form-cancel { border: 1px solid var(--tl-hair); background: transparent; border-radius: 8px; padding: 9px 14px; font: 600 12px var(--tl-body-font); color: var(--tl-grey); cursor: pointer; transition: border-color 0.14s, color 0.14s; }
#jjPage_evidence .ev-form-cancel:hover { border-color: var(--tl-mute); color: var(--tl-ink); }
@media (max-width: 560px) { #jjPage_evidence .ev-form-grid { grid-template-columns: 1fr; } }
#jjPage_dashboard.tl-theme .db-pinboard-empty-title { color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .db-pinboard-empty-sub { font-size: 12.5px; color: var(--tl-grey); }

/* First-action empty block inside Recent applications (dashboard scope only). */
#jjPage_dashboard.tl-theme .rr-empty-ico { background: var(--tl-tint); color: var(--tl-blue); border-radius: var(--tl-radius); }
#jjPage_dashboard.tl-theme .rr-empty-first-action h3 { font: 500 18px/1.3 var(--tl-display); letter-spacing: -0.02em; color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .rr-empty-sub { font-size: 12.5px; color: var(--tl-grey); }
#jjPage_dashboard.tl-theme .rr-empty-action { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); box-shadow: none; }
#jjPage_dashboard.tl-theme .rr-empty-action:hover { border-color: var(--tl-blue); background: var(--tl-card); }
#jjPage_dashboard.tl-theme .rr-empty-action span { color: var(--tl-blue); }
#jjPage_dashboard.tl-theme .rr-empty-action strong { color: var(--tl-ink); }
#jjPage_dashboard.tl-theme .rr-empty-action small { color: var(--tl-grey); }

/* ============================================================
   v2-applications: Phase B of the soft-editorial v2 migration (Applications
   kanban page only). The ap-* base rules are class-scoped (0,1,0), some with
   !important on the card action buttons; every override here carries
   #jjPage_apps (1,1,x) per the recorded cascade lesson, with !important only
   where the base declared it. White cards, hairline borders, --tl-radius,
   no shadows; columns are quiet zones; success/positive = blue tint
   convention, no green, purple or amber. Drag-and-drop classes
   (ap-col-dragover, ap-card-dragging, ap-card-touch-picked) are restyled
   only; the handlers are untouched. UK English, no em dashes.
   ============================================================ */

/* ═══ Pass 3a (Apollo cream): Applications. Alias the page-scoped --tl-* -> --ap-*
   on #jjPage_apps (jj-page tl-theme; the block is #jjPage_apps 1,1,0). Scoped, no leak.
   --tl-red un-aliased (semantic); --tl-blue -> --ap-accent keeps interactive + the
   monochrome stage semantics. Card borderCol (inline --accent/--danger, not --tl-*) is
   untouched; categorical stage-chip colours pinned byte-identical below. ═══ */
#jjPage_apps{
  --tl-card:var(--ap-card); --tl-hair:var(--ap-hair);
  --tl-ink:var(--ap-ink); --tl-grey:var(--ap-ink-2); --tl-mute:var(--ap-ink-3);
  --tl-blue:var(--ap-accent); --tl-tint:var(--ap-accent-tint);
  --tl-radius:var(--ap-radius-lg); --tl-radius-sm:var(--ap-radius);
  --tl-display:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--ap-bg);
}

/* ============================================================
   APPLICATIONS: records-table CRM (2026-07). Replaces the kanban
   board entirely. Scoped via --apx-* tokens on #jjPage_apps.tl-theme
   (id+class, same precedent as the sidebar redesign), which is why
   the white background below reliably beats the Apollo cream alias
   immediately above -- no !important arms race needed, just wins by
   specificity, though !important is kept on background/color as a
   defensive belt given how many themes this file layers.
   ============================================================ */
#jjPage_apps.tl-theme{
  /* --apx-white keeps its name (used in exactly one place below, the page's
     own background) but now means the warm page bg, not literal white --
     every OTHER previous "white surface" usage (search/select/dock/menu/
     sheet/drag-ghost/pagination) has been repointed to the new --apx-panel,
     since those are two visually distinct fills in this system. */
  --apx-white:#EFEEE9;
  --apx-panel:#F4F3EE;
  --apx-ink:#1B1D1A;
  --apx-body:#3B3A35;
  --apx-id:#55544E;
  --apx-secondary:#6E6D66;
  --apx-muted:#8A897F;
  --apx-border:#D9D8D1;
  --apx-hairline:#E2E1DA;
  --apx-accent:#1B1D1A;
  /* Ink is the accent now -- no blue left on this page. A couple of specific
     CTAs (add button, initials logo tiles) use their own slightly different
     near-black (#20241F) rather than this general page ink, matching the
     same two-ink-shades convention already established by the add-app
     modal's own buttons (#20261F) -- kept as its own pair of tokens so it
     isn't duplicated as a literal hex in three separate rules. */
  --apx-cta-ink:#20241F;
  --apx-cta-text:#F1F0EA;
  --apx-display:'JetBrains Mono',ui-monospace,'Courier New',monospace;
  --apx-mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;

  --apx-saved-ink:#77745F;     --apx-saved-bg:#F4F1E7;     --apx-saved-border:#DCD7C6;     --apx-saved-dot:#8B8778;
  --apx-applied-ink:#3E6489;   --apx-applied-bg:#EFF2F5;   --apx-applied-border:#CDD7DF;   --apx-applied-dot:#4A76A3;
  --apx-interview-ink:#544D97; --apx-interview-bg:#F0EEF7; --apx-interview-border:#D5D0E7; --apx-interview-dot:#6A5FC9;
  --apx-offer-ink:#48663F;     --apx-offer-bg:#EEF3EA;     --apx-offer-border:#CFDCC7;     --apx-offer-dot:#5E8760;
  --apx-rejected-ink:#A24A3B;  --apx-rejected-bg:#F7EEEA;  --apx-rejected-border:#E3CFC5;   --apx-rejected-dot:#BE5442;

  background:var(--apx-white) !important;
  color:var(--apx-ink) !important;
}

#jjPage_apps.tl-theme > .apx-head,
#jjPage_apps.tl-theme > .apx-stats,
#jjPage_apps.tl-theme > .apx-controls,
#jjPage_apps.tl-theme > .apx-tabs,
#jjPage_apps.tl-theme > .apx-pipeline-scroll,
#jjPage_apps.tl-theme > .apx-table-wrap,
#jjPage_apps.tl-theme > .apx-cards,
#jjPage_apps.tl-theme > .apx-empty,
#jjPage_apps.tl-theme > .apx-footer{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}

/* Head: eyebrow, title row, sub row */
#jjPage_apps.tl-theme .apx-eyebrow{
  font:500 12px/1.3 var(--apx-mono); color:var(--apx-secondary); letter-spacing:0.04em; margin-bottom:10px;
}
#jjPage_apps.tl-theme .apx-title-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
#jjPage_apps.tl-theme .apx-title{
  font:800 38px/1.05 var(--apx-display); color:var(--apx-ink); letter-spacing:0.02em; text-transform:uppercase; margin:0;
}
#jjPage_apps.tl-theme .apx-add-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--apx-cta-ink); color:var(--apx-cta-text); border:0; border-radius:4px;
  padding:11px 18px; font:600 13px/1 var(--apx-mono); letter-spacing:0.08em; cursor:pointer; transition:background .15s ease; flex-shrink:0;
}
#jjPage_apps.tl-theme .apx-add-btn:hover{ background:#2B302A; }
#jjPage_apps.tl-theme .apx-add-btn i{ font-size:16px; }
#jjPage_apps.tl-theme .apx-sub-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:14px; padding-bottom:20px; border-bottom:1px solid var(--apx-border); flex-wrap:wrap; }
#jjPage_apps.tl-theme .apx-sub-left{ font:600 12px/1.3 var(--apx-mono); letter-spacing:0.1em; color:var(--apx-secondary); text-transform:uppercase; }
#jjPage_apps.tl-theme .apx-sub-right{ font:400 11px/1.3 var(--apx-mono); color:var(--apx-muted); letter-spacing:0.03em; text-transform:uppercase; }

/* Stats strip: one bordered box, 5 equal cells with internal dividers */
#jjPage_apps.tl-theme .apx-stats{
  display:flex; background:var(--apx-panel); border:1px solid var(--apx-border); border-radius:4px; margin-top:24px; overflow:hidden;
}
#jjPage_apps.tl-theme .apx-stat{
  flex:1 1 0; padding:18px 20px; border-right:1px solid var(--apx-border);
}
#jjPage_apps.tl-theme .apx-stat:last-child{ border-right:0; }
#jjPage_apps.tl-theme .apx-stat-label{ font:500 11px/1.3 var(--apx-mono); color:var(--apx-secondary); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:8px; }
#jjPage_apps.tl-theme .apx-stat-num{ font:500 30px/1.1 var(--apx-mono); color:var(--apx-ink); letter-spacing:-0.01em; }

/* Controls: search + stage dropdown */
#jjPage_apps.tl-theme .apx-controls{ display:flex; gap:12px; margin-top:24px; }
#jjPage_apps.tl-theme .apx-search-wrap{ position:relative; flex:1 1 50%; max-width:50%; }
#jjPage_apps.tl-theme .apx-search-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--apx-muted); font-size:16px; pointer-events:none; }
#jjPage_apps.tl-theme .apx-search-input{
  width:100%; box-sizing:border-box; padding:11px 14px 11px 40px; border:1px solid var(--apx-border); border-radius:4px;
  font:400 13.5px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--apx-ink); background:var(--apx-panel); transition:border-color .15s ease;
}
#jjPage_apps.tl-theme .apx-search-input::placeholder{ color:var(--apx-muted); }
#jjPage_apps.tl-theme .apx-search-input:focus{ outline:none; border-color:var(--apx-accent); }
#jjPage_apps.tl-theme .apx-stage-select{
  border:1px solid var(--apx-border); border-radius:4px; padding:11px 36px 11px 14px; font:500 13px/1.3 var(--apx-mono);
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--apx-body); background:var(--apx-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236E6D66'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance:none; -webkit-appearance:none; cursor:pointer; min-width:190px;
}
#jjPage_apps.tl-theme .apx-stage-select:focus{ outline:none; border-color:var(--apx-accent); }

/* Tabs */
#jjPage_apps.tl-theme .apx-tabs{ display:flex; gap:18px; margin-top:24px; border-bottom:1px solid var(--apx-border); }
#jjPage_apps.tl-theme .apx-tab{
  background:none; border:0; border-bottom:2px solid transparent; padding:0 0 12px; cursor:pointer;
  font:600 12.5px/1 var(--apx-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--apx-secondary); transition:color .15s ease;
}
#jjPage_apps.tl-theme .apx-tab:hover{ color:var(--apx-ink); }
#jjPage_apps.tl-theme .apx-tab.active{ color:var(--apx-accent); border-bottom-color:var(--apx-accent); }

/* Pipeline overview strip: one responsive SVG (see apxRenderPipelineStrip in
   index.html for the geometry/markup). Renders on every tab; never reflows
   anything else when counts change since the SVG's own viewBox is fixed and
   width:100% scaling doesn't touch surrounding layout. */
#jjPage_apps.tl-theme .apx-pipeline-scroll{ margin-top:20px; overflow-x:auto; }
/* position:relative so the drop-target overlays (siblings of the SVG, see
   apxRenderPipelineStrip) can be absolutely positioned against the exact
   same box the SVG itself fills. */
#jjPage_apps.tl-theme .apx-pipeline-strip{ position:relative; }
#jjPage_apps.tl-theme .apx-pipeline-strip svg{ display:block; width:100%; height:auto; }
/* transform-box/transform-origin here (not just on .apx-pipe-count, which
   already needed it) so the hover-scale and ready-wave keyframes below scale
   each <g> card from its own centre rather than the SVG viewport origin. */
#jjPage_apps.tl-theme .apx-pipe-card{ cursor:pointer; outline:none; transform-box:fill-box; transform-origin:center; transition:transform .12s ease; }
#jjPage_apps.tl-theme .apx-pipe-shape{ stroke-width:1; transition:filter .12s ease, stroke .15s ease, stroke-width .15s ease, opacity .15s ease; }
/* Plain (non-drag) hover for click-to-filter -- driven by the overlay's
   mouseenter/mouseleave now, not a real CSS :hover on the SVG <g> itself,
   since the overlay sits on top intercepting the pointer. */
#jjPage_apps.tl-theme .apx-pipe-card--filter-hover .apx-pipe-shape{ filter:brightness(0.97); }
#jjPage_apps.tl-theme .apx-pipe-card--active .apx-pipe-shape{ stroke:var(--apx-ink); stroke-width:1.5; }
#jjPage_apps.tl-theme .apx-pipe-label{ font:600 11px var(--apx-mono); letter-spacing:0.1em; text-transform:uppercase; }
#jjPage_apps.tl-theme .apx-pipe-count{ font:500 26px var(--apx-mono); fill:var(--apx-ink); transform-box:fill-box; transform-origin:center; }
#jjPage_apps.tl-theme .apx-pipe-sub{ font:500 9.5px var(--apx-mono); letter-spacing:0.14em; text-transform:uppercase; fill:var(--apx-muted); }
#jjPage_apps.tl-theme .apx-pipe-icon path,
#jjPage_apps.tl-theme .apx-pipe-icon circle{ stroke:#44433E; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* Drop-target overlays: transparent, absolutely positioned per-card hit
   regions (plain HTML, not SVG -- drag events on SVG elements are
   unreliable cross-browser, per design review). Percentage left/width
   (baked in at render time from the same 1180-wide viewBox coordinates the
   SVG paths use) track the SVG's own responsive width with no JS resize
   listener needed. */
#jjPage_apps.tl-theme .apx-pipe-overlay{
  position:absolute; top:0; height:100%; background:transparent; cursor:pointer;
  outline:none; -webkit-tap-highlight-color:transparent;
}
#jjPage_apps.tl-theme .apx-pipe-overlay:focus-visible{ outline:2px solid var(--apx-ink); outline-offset:-2px; }
/* The "+1" hint (see apxPipelinePlusOneHint) is appended as a child of the
   overlay it's hinting on, positioned against that same absolute box. */
#jjPage_apps.tl-theme .apx-pipe-plusone{
  position:absolute; top:8px; right:10px; font:700 13px var(--apx-mono); color:var(--apx-ink);
  pointer-events:none; animation:apxPipePlusOne 550ms ease-out;
}
@keyframes apxPipePlusOne{ 0%{ transform:translateY(0); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateY(-16px); opacity:0; } }

/* Receptive mode (a row drag is in progress): every card's stroke lifts and
   plays a one-shot staggered "ready" wave, valid cards breathe gently, the
   card matching the dragged row's current stage dims and can't accept a
   drop, and whichever card the pointer is actually over deepens with a
   stage-coloured glow, a slight scale, an icon hop, and a "+1" hint. */
#jjPage_apps.tl-theme .apx-pipeline-strip--drag-active .apx-pipe-shape{ stroke-width:1.5; }
#jjPage_apps.tl-theme .apx-pipe-card--reject .apx-pipe-shape{ opacity:0.45; }

@keyframes apxPipeWave{ 0%{ transform:scale(1); } 40%{ transform:scale(1.035); } 100%{ transform:scale(1); } }
#jjPage_apps.tl-theme .apx-pipe-card--wave{ animation:apxPipeWave 350ms ease; }

@keyframes apxPipeBreathe{ 0%,100%{ stroke-opacity:1; } 50%{ stroke-opacity:.55; } }
#jjPage_apps.tl-theme .apx-pipeline-strip--drag-active .apx-pipe-card:not(.apx-pipe-card--reject) .apx-pipe-shape{
  animation:apxPipeBreathe 1.6s ease-in-out infinite;
}

#jjPage_apps.tl-theme .apx-pipe-card--drag-hover{ transform:scale(1.03); }
/* Reduced motion gets its own plain class (see apxDragSetHoverStage) rather
   than a media-query override here -- these per-stage rules are more
   specific than a single generic override would be, so fighting that
   specificity would be more fragile than just never applying this class
   under reduced motion in the first place. */
#jjPage_apps.tl-theme .apx-pipe-card--saved.apx-pipe-card--drag-hover .apx-pipe-shape{ filter:brightness(0.94) drop-shadow(0 0 8px var(--apx-saved-dot)); stroke:var(--apx-ink); }
#jjPage_apps.tl-theme .apx-pipe-card--applied.apx-pipe-card--drag-hover .apx-pipe-shape{ filter:brightness(0.94) drop-shadow(0 0 8px var(--apx-applied-dot)); stroke:var(--apx-ink); }
#jjPage_apps.tl-theme .apx-pipe-card--interview.apx-pipe-card--drag-hover .apx-pipe-shape{ filter:brightness(0.94) drop-shadow(0 0 8px var(--apx-interview-dot)); stroke:var(--apx-ink); }
#jjPage_apps.tl-theme .apx-pipe-card--offer.apx-pipe-card--drag-hover .apx-pipe-shape{ filter:brightness(0.94) drop-shadow(0 0 8px var(--apx-offer-dot)); stroke:var(--apx-ink); }
#jjPage_apps.tl-theme .apx-pipe-card--rejected.apx-pipe-card--drag-hover .apx-pipe-shape{ filter:brightness(0.94) drop-shadow(0 0 8px var(--apx-rejected-dot)); stroke:var(--apx-ink); }
#jjPage_apps.tl-theme .apx-pipe-card--drag-hover-plain .apx-pipe-shape{ stroke-width:1.5; stroke:var(--apx-ink); }

@keyframes apxPipeIconHop{ 0%{ transform:translateY(0); } 40%{ transform:translateY(-4px); } 100%{ transform:translateY(0); } }
#jjPage_apps.tl-theme .apx-pipe-icon{ transform-box:fill-box; }
#jjPage_apps.tl-theme .apx-pipe-icon.apx-pipe-icon--hop{ animation:apxPipeIconHop 320ms ease; }

/* Drop-point ripple (see apxPipelineRipple): appended as a child of the
   strip host itself, positioned in the strip's own local coordinate space
   (pointer coords minus the strip's own rect), not any one card's. */
@keyframes apxPipeRipple{ 0%{ transform:translate(-50%,-50%) scale(0.2); opacity:.5; } 100%{ transform:translate(-50%,-50%) scale(3.2); opacity:0; } }
#jjPage_apps.tl-theme .apx-pipe-ripple{
  position:absolute; width:24px; height:24px; border-radius:50%;
  background:var(--apx-ink); opacity:.35; pointer-events:none; animation:apxPipeRipple 500ms ease-out;
}

/* Receiving-card count pop -- same spring as the add-modal's stage-select
   selection animation. Baked onto a freshly-rendered <text> (see
   _apxPipelinePopStage in index.html), so it just needs to play once on
   mount, same one-shot pattern as the badge pulse. */
@keyframes apxPipeCountPop{ 0%{ transform:scale(1); } 50%{ transform:scale(1.055); } 100%{ transform:scale(1); } }
#jjPage_apps.tl-theme .apx-pipe-count.apx-pipe-count--pop{ animation:apxPipeCountPop 0.28s cubic-bezier(.2,.9,.3,1.4); }

#jjPage_apps.tl-theme .apx-pipe-card--saved .apx-pipe-shape{ fill:var(--apx-saved-bg); stroke:var(--apx-saved-border); }
#jjPage_apps.tl-theme .apx-pipe-card--saved .apx-pipe-dot{ fill:var(--apx-saved-dot); }
#jjPage_apps.tl-theme .apx-pipe-card--saved .apx-pipe-label{ fill:var(--apx-saved-ink); }
#jjPage_apps.tl-theme .apx-pipe-card--applied .apx-pipe-shape{ fill:var(--apx-applied-bg); stroke:var(--apx-applied-border); }
#jjPage_apps.tl-theme .apx-pipe-card--applied .apx-pipe-dot{ fill:var(--apx-applied-dot); }
#jjPage_apps.tl-theme .apx-pipe-card--applied .apx-pipe-label{ fill:var(--apx-applied-ink); }
#jjPage_apps.tl-theme .apx-pipe-card--interview .apx-pipe-shape{ fill:var(--apx-interview-bg); stroke:var(--apx-interview-border); }
#jjPage_apps.tl-theme .apx-pipe-card--interview .apx-pipe-dot{ fill:var(--apx-interview-dot); }
#jjPage_apps.tl-theme .apx-pipe-card--interview .apx-pipe-label{ fill:var(--apx-interview-ink); }
#jjPage_apps.tl-theme .apx-pipe-card--offer .apx-pipe-shape{ fill:var(--apx-offer-bg); stroke:var(--apx-offer-border); }
#jjPage_apps.tl-theme .apx-pipe-card--offer .apx-pipe-dot{ fill:var(--apx-offer-dot); }
#jjPage_apps.tl-theme .apx-pipe-card--offer .apx-pipe-label{ fill:var(--apx-offer-ink); }
#jjPage_apps.tl-theme .apx-pipe-card--rejected .apx-pipe-shape{ fill:var(--apx-rejected-bg); stroke:var(--apx-rejected-border); }
#jjPage_apps.tl-theme .apx-pipe-card--rejected .apx-pipe-dot{ fill:var(--apx-rejected-dot); }
#jjPage_apps.tl-theme .apx-pipe-card--rejected .apx-pipe-label{ fill:var(--apx-rejected-ink); }

@media (prefers-reduced-motion:reduce){
  #jjPage_apps.tl-theme .apx-pipe-shape{ transition:none; }
  #jjPage_apps.tl-theme .apx-pipe-count.apx-pipe-count--pop{ animation:none; }
  /* The wave/hop/hint/ripple/pickup-squash animations are all gated in JS
     (apxReduceMotion() checks before the class/element is ever added), so
     this is the one animation actually driven by a class that's applied
     unconditionally (.apx-pipeline-strip--drag-active) -- it needs its own
     override here since JS has no other hook to gate it at. */
  #jjPage_apps.tl-theme .apx-pipeline-strip--drag-active .apx-pipe-card:not(.apx-pipe-card--reject) .apx-pipe-shape{ animation:none; }
}

/* Mobile: the chevron seam geometry is the point of the component, so it
   stays at a fixed floor width inside a horizontal scroll container rather
   than restacking or shrinking illegibly. */
@media (max-width:768px){
  #jjPage_apps.tl-theme .apx-pipeline-strip{ min-width:900px; }
}

/* Table */
#jjPage_apps.tl-theme .apx-table-wrap{ margin-top:8px; overflow-x:auto; }
#jjPage_apps.tl-theme .apx-table{ width:100%; border-collapse:collapse; font-family:'Plus Jakarta Sans',sans-serif; }
#jjPage_apps.tl-theme .apx-table thead th{
  text-align:left; font:600 11px/1.3 var(--apx-mono); color:var(--apx-muted); letter-spacing:0.1em; text-transform:uppercase;
  padding:14px 16px; border-bottom:1px solid var(--apx-border); white-space:nowrap;
}
#jjPage_apps.tl-theme .apx-th-id{ cursor:pointer; user-select:none; }
#jjPage_apps.tl-theme .apx-sort-caret{ font-size:11px; vertical-align:middle; }
#jjPage_apps.tl-theme .apx-th-chevron{ width:32px; }
/* touch-action:none is required for the pointer-drag carry loop to reliably
   own the gesture on touch input (otherwise the browser's native
   scroll/pan gesture wins) -- only matters above the 768px breakpoint where
   this table is actually visible at all (below it, .apx-cards takes over
   and mobile stays on the badge/bottom-sheet path untouched by dragging). */
#jjPage_apps.tl-theme .apx-row{ cursor:pointer; transition:background .12s ease; touch-action:none; }
#jjPage_apps.tl-theme .apx-row:hover{ background:#E7E6DE; }
#jjPage_apps.tl-theme .apx-row td{ padding:18px 16px; border-bottom:1px solid var(--apx-hairline); vertical-align:middle; }
#jjPage_apps.tl-theme .apx-td-id{ font:500 13px/1.3 var(--apx-mono); color:var(--apx-id); white-space:nowrap; }
#jjPage_apps.tl-theme .apx-company-cell{ display:flex; align-items:center; gap:12px; }
#jjPage_apps.tl-theme .apx-logo-tile{ width:40px; height:40px; border-radius:8px; flex-shrink:0; object-fit:cover; box-sizing:border-box; }
/* Initials fallback is a flat ink tile now, not a per-company hashed colour
   (see apxCompanyLogoHtml -- it no longer calls avatarColor() at all, so
   there's nothing left to override here besides these two tokens). The
   favicon <img> variant instead gets a hairline border since a real photo
   needs edge definition that a flat ink fill doesn't. */
#jjPage_apps.tl-theme .apx-logo-fallback{ display:flex; align-items:center; justify-content:center; background:var(--apx-cta-ink); color:var(--apx-cta-text); font:600 13px/1 var(--apx-mono); }
#jjPage_apps.tl-theme .apx-logo-img{ border:1px solid var(--apx-border); }
#jjPage_apps.tl-theme .apx-company-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
#jjPage_apps.tl-theme .apx-company-name{ font:600 14px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--apx-ink); }
#jjPage_apps.tl-theme .apx-company-loc{ font:400 12px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--apx-muted); }
/* line-clamp lives on an inner span, not the <td> itself -- display:-webkit-box
   directly on a table cell knocks it out of display:table-cell, which breaks
   border-collapse for that cell and reintroduces a stray default cell border. */
#jjPage_apps.tl-theme .apx-td-role{ max-width:220px; }
#jjPage_apps.tl-theme .apx-role-text{
  font:400 14px/1.4 'Plus Jakarta Sans',sans-serif; color:var(--apx-body);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#jjPage_apps.tl-theme .apx-next-cell{ display:inline-flex; align-items:center; gap:8px; font:500 11px/1.3 var(--apx-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--apx-body); }
#jjPage_apps.tl-theme .apx-next-ico{ font-size:18px; color:var(--apx-muted); flex-shrink:0; }
#jjPage_apps.tl-theme .apx-updated-cell{ display:flex; flex-direction:column; gap:2px; font:500 11.5px/1.3 var(--apx-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--apx-secondary); }
#jjPage_apps.tl-theme .apx-td-chevron{ color:var(--apx-muted); text-align:right; }

/* Stage badges. Real <button>s (they open the stage-change menu), not
   <span>s -- explicit margin/cursor/outline reset since a bare unscoped
   .apx-badge{margin-bottom:12px;...} rule already exists elsewhere in this
   file (an unrelated onboarding-flow card, styles.css ~10780) and a plain
   <button> pulls in UA-stylesheet border/background/font defaults that a
   <span> never had to fight. */
#jjPage_apps.tl-theme .apx-badge{
  display:inline-flex; align-items:center; gap:5px; font:500 11px/1 var(--apx-mono); letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:4px; border:1px solid; white-space:nowrap;
  margin:0; cursor:pointer; -webkit-appearance:none; appearance:none;
}
#jjPage_apps.tl-theme .apx-badge:focus-visible{ outline:2px solid var(--apx-accent); outline-offset:2px; }
/* The dot's own colour is a distinct (usually slightly lighter/muted) shade
   from the badge's ink -- background:currentColor means it needs its own
   `color` set per stage, not just inherit the badge's. */
#jjPage_apps.tl-theme .apx-badge-dot{ width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
#jjPage_apps.tl-theme .apx-badge-saved{ color:var(--apx-saved-ink); background:var(--apx-saved-bg); border-color:var(--apx-saved-border); }
#jjPage_apps.tl-theme .apx-badge-saved .apx-badge-dot{ color:var(--apx-saved-dot); }
#jjPage_apps.tl-theme .apx-badge-applied{ color:var(--apx-applied-ink); background:var(--apx-applied-bg); border-color:var(--apx-applied-border); }
#jjPage_apps.tl-theme .apx-badge-applied .apx-badge-dot{ color:var(--apx-applied-dot); }
#jjPage_apps.tl-theme .apx-badge-interview{ color:var(--apx-interview-ink); background:var(--apx-interview-bg); border-color:var(--apx-interview-border); }
#jjPage_apps.tl-theme .apx-badge-interview .apx-badge-dot{ color:var(--apx-interview-dot); }
#jjPage_apps.tl-theme .apx-badge-offer{ color:var(--apx-offer-ink); background:var(--apx-offer-bg); border-color:var(--apx-offer-border); }
#jjPage_apps.tl-theme .apx-badge-offer .apx-badge-dot{ color:var(--apx-offer-dot); }
#jjPage_apps.tl-theme .apx-badge-rejected{ color:var(--apx-rejected-ink); background:var(--apx-rejected-bg); border-color:var(--apx-rejected-border); }
#jjPage_apps.tl-theme .apx-badge-rejected .apx-badge-dot{ color:var(--apx-rejected-dot); }

/* ── Quick stage changes: pointer-drag row -> pipeline strip, badge click menu, undo toast ── */

/* user-select:none page-wide during a drag -- the pointer-drag carry loop
   moves the mouse/finger well outside the row's own bounds, and text
   selecting the whole page mid-gesture looks broken. Exit animation plays
   when a badge-menu change moves a row out of the current tab (the
   pointer-drag path handles its own equivalent via the slot's own
   height+opacity collapse instead, see apxDragCommitDrop). */
body.apx-drag-active{ user-select:none; }
#jjPage_apps.tl-theme .dza-row.apx-row-exit{
  opacity:0; transform:scaleY(0.7); transform-origin:top;
  transition:opacity 150ms ease, transform 150ms ease;
}

/* The dashed placeholder a dragged row becomes in place (see apxBeginDrag):
   the <tr> itself never leaves the DOM (no reflow of surrounding rows), only
   its cells are swapped for one colspan'd cell sized to the original row's
   exact height. Never shows the ordinary row-hover tint while it's a slot. */
#jjPage_apps.tl-theme .apx-row.apx-row-slot:hover{ background:transparent; }
#jjPage_apps.tl-theme .apx-row-slot-td{ padding:8px 16px; box-sizing:border-box; }
#jjPage_apps.tl-theme .apx-row-slot-box{
  height:100%; border:1.5px dashed #B9B8B0; border-radius:6px; background:rgba(27,29,26,.03);
  box-sizing:border-box; transition:height 220ms ease, opacity 220ms ease;
}

/* The carried token (see apxBuildDragToken): a condensed card that follows
   the pointer with an eased lag + velocity-driven lean (all applied via JS
   as a single transform per frame, see apxDragTick) -- transform/opacity
   only, per the perf requirement, so this never touches layout. */
#jjPage_apps.tl-theme .apx-drag-token{
  position:fixed; top:0; left:0; z-index:500; width:340px; pointer-events:none; will-change:transform;
}
#jjPage_apps.tl-theme .apx-drag-token-inner{
  display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  padding:12px 14px; background:var(--apx-panel); border:1px solid var(--apx-border); border-radius:10px;
  box-shadow:0 14px 30px rgba(27,29,26,.25), 0 2px 6px rgba(27,29,26,.25);
}
#jjPage_apps.tl-theme .apx-drag-token .apx-logo-tile{ width:34px; height:34px; border-radius:7px; font-size:12px; flex-shrink:0; }
#jjPage_apps.tl-theme .apx-drag-token-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
#jjPage_apps.tl-theme .apx-drag-token-co{ font:600 13.5px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--apx-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jjPage_apps.tl-theme .apx-drag-token-role{ font:400 12px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--apx-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jjPage_apps.tl-theme .apx-drag-token-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
#jjPage_apps.tl-theme .apx-drag-token-dot--saved{ background:var(--apx-saved-dot); }
#jjPage_apps.tl-theme .apx-drag-token-dot--applied{ background:var(--apx-applied-dot); }
#jjPage_apps.tl-theme .apx-drag-token-dot--interview{ background:var(--apx-interview-dot); }
#jjPage_apps.tl-theme .apx-drag-token-dot--offer{ background:var(--apx-offer-dot); }
#jjPage_apps.tl-theme .apx-drag-token-dot--rejected{ background:var(--apx-rejected-dot); }

/* Pickup squash-stretch: plays once on mount (a freshly-inserted element
   with an animation class already present plays it automatically, no
   reflow-restart trick needed here since nothing is being re-triggered). */
@keyframes apxDragTokenPickup{ 0%{ transform:scale(0.94); } 55%{ transform:scale(1.05); } 100%{ transform:scale(1); } }
#jjPage_apps.tl-theme .apx-drag-token-inner.apx-drag-token-pickup{ animation:apxDragTokenPickup 220ms cubic-bezier(.2,.9,.3,1.3); }

@media (prefers-reduced-motion:reduce){
  #jjPage_apps.tl-theme .apx-row-slot-box{ transition:none; }
}


/* ALL-tab stage changes never remove the row -- the badge swaps stage in place and
   gets a brief confirmation pulse instead of the animate-out used on the single-stage
   tabs. Baked onto a freshly-rendered element (see apxStageBadgeHtml/_apxPulseAppId),
   so the keyframe just needs to play once on mount -- no class-removal bookkeeping. */
@keyframes apxBadgePulse{ 0%{ transform:scale(1); } 35%{ transform:scale(1.08); } 100%{ transform:scale(1); } }
#jjPage_apps.tl-theme .apx-badge.apx-badge-pulse{ animation:apxBadgePulse 400ms ease; }

/* Desktop stage-change popover: position:fixed, positioned/populated via JS
   (apxOpenStageMenu) on open. Reuses the badge classes for its options so
   they read as the same visual language, just laid out as a menu list. */
#jjPage_apps.tl-theme .apx-stage-menu{
  position:fixed; z-index:400; display:flex; flex-direction:column; gap:4px;
  min-width:180px; padding:6px; background:var(--apx-panel); border:1px solid var(--apx-border); border-radius:10px;
  box-shadow:0 12px 32px -8px rgba(15,23,42,0.22);
}
/* Unconditional display:flex above would otherwise beat the [hidden]
   attribute's own default UA-stylesheet display:none (this selector is
   more specific than a bare [hidden]), leaving the menu visually shown
   regardless of the hidden property JS toggles. */
#jjPage_apps.tl-theme .apx-stage-menu[hidden]{ display:none; }
#jjPage_apps.tl-theme .apx-stage-menu-item{
  display:flex; align-items:center; gap:6px; width:100%; box-sizing:border-box; text-align:left;
  font:500 11.5px/1 var(--apx-mono); letter-spacing:0.06em; text-transform:uppercase;
  padding:9px 12px; border-radius:6px; border:1px solid; cursor:pointer; -webkit-appearance:none; appearance:none;
}
#jjPage_apps.tl-theme .apx-stage-menu-item:hover:not(:disabled){ filter:brightness(0.97); }
#jjPage_apps.tl-theme .apx-stage-menu-item:focus-visible{ outline:2px solid var(--apx-accent); outline-offset:2px; }
#jjPage_apps.tl-theme .apx-stage-menu-item.apx-stage-menu-item--current,
#jjPage_apps.tl-theme .apx-stage-menu-item:disabled{ opacity:0.4; cursor:not-allowed; }

/* Mobile (<768px) bottom-sheet variant of the same menu */
#jjPage_apps.tl-theme .apx-sheet-overlay{
  position:fixed; inset:0; z-index:400; background:rgba(15,23,42,0.4);
  display:flex; align-items:flex-end;
}
/* Same [hidden]-vs-unconditional-display:flex issue as .apx-stage-menu above. */
#jjPage_apps.tl-theme .apx-sheet-overlay[hidden]{ display:none; }
#jjPage_apps.tl-theme .apx-sheet{
  width:100%; box-sizing:border-box; background:var(--apx-panel); border-radius:16px 16px 0 0;
  padding:10px 16px 24px; max-height:70vh; overflow-y:auto;
}
#jjPage_apps.tl-theme .apx-sheet-handle{ width:36px; height:4px; border-radius:99px; background:var(--apx-border); margin:0 auto 14px; }
#jjPage_apps.tl-theme .apx-sheet-title{
  font:600 11px/1.3 var(--apx-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--apx-secondary); margin-bottom:10px;
}
#jjPage_apps.tl-theme .apx-sheet-item{
  display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; text-align:left;
  font:500 13px/1 var(--apx-mono); letter-spacing:0.06em; text-transform:uppercase;
  padding:13px 14px; border-radius:8px; border:1px solid; cursor:pointer; margin-bottom:6px; -webkit-appearance:none; appearance:none;
}
#jjPage_apps.tl-theme .apx-sheet-item:focus-visible{ outline:2px solid var(--apx-accent); outline-offset:2px; }
#jjPage_apps.tl-theme .apx-sheet-item.apx-sheet-item--current,
#jjPage_apps.tl-theme .apx-sheet-item:disabled{ opacity:0.4; cursor:not-allowed; }
#jjPage_apps.tl-theme .apx-sheet-cancel{
  width:100%; box-sizing:border-box; margin-top:8px; padding:13px 14px; border-radius:8px; border:1px solid var(--apx-border);
  background:var(--apx-panel); color:var(--apx-body); font:500 13px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer;
}

/* Undo toast: one instance, bottom-left, dark */
#jjPage_apps.tl-theme .apx-toast{
  position:fixed; left:24px; bottom:24px; z-index:500;
  display:flex; align-items:center; gap:14px;
  background:#0F172A; color:#fff; font:400 13px/1.3 'Plus Jakarta Sans',sans-serif;
  padding:12px 16px; border-radius:8px; box-shadow:0 12px 32px -8px rgba(15,23,42,0.4);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity 180ms ease, transform 180ms ease;
}
#jjPage_apps.tl-theme .apx-toast.apx-toast-visible{ opacity:1; visibility:visible; transform:translateY(0); }
#jjPage_apps.tl-theme .apx-toast-undo{
  background:none; border:0; color:#93C5FD; font:600 13px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:0.02em;
  cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px;
}
#jjPage_apps.tl-theme .apx-toast-undo:hover{ color:#BFDBFE; }
#jjPage_apps.tl-theme .apx-toast-undo:focus-visible{ outline:2px solid #93C5FD; outline-offset:2px; }

/* Drag-to-delete trash bin: bottom-right, exists only during an active row
   drag (apxBinEnterReceptiveMode/apxBinExitReceptiveMode toggle
   --visible). Outer div carries the per-frame proximity transform
   (apxBinProximityTick, scale/lean); the inner wrap carries the CSS
   drop-bounce keyframe (--full) so the two never fight over `transform`. */
#jjPage_apps.tl-theme .apx-trash-bin{
  position:fixed; right:32px; bottom:32px; z-index:400;
  width:112px; height:112px;
  opacity:0; pointer-events:none;
  /* No base opacity transition: apxBinProximityTick sets opacity inline,
     every rAF frame, same as its scale/lean values -- a lingering CSS
     transition here would make opacity lag 200ms behind the proximity
     reaction while scale/lean/tint respond instantly, an inconsistent
     feel. --exiting/--fadeout below declare their own explicit opacity
     transitions for their one-shot moments; entrance's visual interest
     comes entirely from the translateY spring keyframe, not a crossfade. */
  transform-origin:50% 85%; /* pivots near the base, like it's rooted to the floor */
  will-change:transform, opacity;
}
/* Idle-during-drag resting opacity: 70%, not the original 25% (nearly
   invisible against the warm #EFEEE9 page -- the "quiet" job is already
   done by the bin only existing during an active drag at all). Full 100%
   is reached via apxBinProximityTick's per-frame opacity lerp as the token
   approaches from 280px; this class value is just the pre-first-frame/
   reduced-motion resting state. */
#jjPage_apps.tl-theme .apx-trash-bin.apx-trash-bin--visible{ opacity:0.7; }
/* Exit reverses quickly: fades out over the same ~160ms as the inner
   wrap's slide-down (apxBinExitAnim below), same specificity tie as
   --fadeout below it -- source order decides which wins, and both are
   only ever applied one at a time in practice. */
#jjPage_apps.tl-theme .apx-trash-bin.apx-trash-bin--exiting{ opacity:0; transition:opacity 160ms ease-in; }
#jjPage_apps.tl-theme .apx-trash-bin.apx-trash-bin--fadeout{ opacity:0; transition:opacity 260ms ease; }
#jjPage_apps.tl-theme .apx-trash-bin-inner{ position:relative; width:100%; height:100%; }
#jjPage_apps.tl-theme .apx-trash-bin-img{ display:block; width:100%; height:100%; position:relative; z-index:1; -webkit-user-drag:none; user-select:none; }
/* Ground shadow: the photo renders have no baked shadow (correct -- a
   real one would be wrong once the container leans/scales), so it's a
   plain CSS ellipse living inside the inner wrap, painted behind the img
   (DOM order + z-index), moving with both the outer's proximity transform
   and the inner's entrance/bounce keyframes automatically since it's a
   genuine descendant, not something separately positioned/synced in JS. */
#jjPage_apps.tl-theme .apx-trash-bin-shadow{
  position:absolute; left:50%; bottom:3%; width:58%; height:9%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(26,28,30,0.18) 0%, rgba(26,28,30,0.12) 55%, rgba(26,28,30,0) 78%);
  border-radius:50%; z-index:0; pointer-events:none;
}

/* Entrance: a small upward spring on dragstart (translateY 28px -> -4px ->
   0) rather than a pure fade -- motion catches peripheral vision where
   opacity alone didn't. Plays automatically the instant --visible is
   (re-)added, since apxBinExitReceptiveMode always fully removes the class
   first. `both` holds the 0% state before the animation's first paint and
   the 100% state (translateY(0)) for the rest of the drag afterward. */
@keyframes apxBinEnter{
  0%{ transform:translateY(28px); }
  70%{ transform:translateY(-4px); }
  100%{ transform:translateY(0); }
}
#jjPage_apps.tl-theme .apx-trash-bin--visible .apx-trash-bin-inner{ animation:apxBinEnter 280ms cubic-bezier(.34,1.56,.64,1) both; }

/* Exit slide -- the reverse, quicker (~160ms, no spring overshoot). */
@keyframes apxBinExitAnim{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(28px); }
}
#jjPage_apps.tl-theme .apx-trash-bin--exiting .apx-trash-bin-inner{ animation:apxBinExitAnim 160ms ease-in forwards; }

/* The 15% compression dip (scale .92) is also the moment apxBinFullState
   swaps the <img> src from bin-empty to bin-full (APX_BIN_COMPRESSION_PCT,
   kept in sync with this offset) -- the bin being momentarily smaller/
   compressed there masks the slight framing difference between the two
   source photos. */
@keyframes apxBinBounce{
  0%{ transform:scale(1) rotate(0deg); }
  15%{ transform:scale(0.92) rotate(2deg); }
  40%{ transform:scale(1.16) rotate(-4deg); }
  60%{ transform:scale(0.96) rotate(3deg); }
  80%{ transform:scale(1.08) rotate(-1.5deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
#jjPage_apps.tl-theme .apx-trash-bin--full .apx-trash-bin-inner{ animation:apxBinBounce 900ms ease-in-out; }

/* Target-affordance ring: sits behind the bin (earlier in DOM order, no
   z-index needed since it's a sibling painted first), same fixed centre
   as the 112px bin (88px from each edge) at every size so it tightens
   concentrically rather than drifting. A plain dashed border, not SVG --
   simpler for a ring with no other detail, and it must NOT inherit the
   bin's own per-frame scale/lean transform (a sibling, not a child, so it
   reacts only to its own --active toggle). */
#jjPage_apps.tl-theme .apx-trash-bin-ring{
  position:fixed; right:13px; bottom:13px; z-index:399;
  width:150px; height:150px; border-radius:50%;
  border:1.5px dashed #A9A79C;
  opacity:0; pointer-events:none;
  transition:opacity 200ms ease, width 200ms ease, height 200ms ease, right 200ms ease, bottom 200ms ease, border-color 200ms ease;
}
#jjPage_apps.tl-theme .apx-trash-bin-ring.apx-trash-bin-ring--visible{ opacity:1; }
#jjPage_apps.tl-theme .apx-trash-bin-ring.apx-trash-bin-ring--active{
  width:120px; height:120px; right:28px; bottom:28px; /* same 88px-from-edge centre as the 150px resting size */
  border-color:#55544E;
}

/* Never on mobile -- belt-and-suspenders, drag itself can't start below
   768px (row pointerdown isn't even wired on the card list), same
   redundant-safety pattern as the pipeline strip's own mobile override. */
@media (max-width:768px){
  #jjPage_apps.tl-theme .apx-trash-bin,
  #jjPage_apps.tl-theme .apx-trash-bin-ring{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  #jjPage_apps.tl-theme .dza-row.apx-row-exit,
  #jjPage_apps.tl-theme .apx-toast{ transition:none; }
  #jjPage_apps.tl-theme .dza-row.apx-row-exit{ transform:none; }
  #jjPage_apps.tl-theme .apx-toast{ transform:none; }
  #jjPage_apps.tl-theme .apx-badge.apx-badge-pulse{ animation:none; }
  /* Bin appears in place at full opacity with the static ring, no spring:
     the JS-side apxReduceMotion() branches in apxBinExitReceptiveMode/
     apxBinProximityTick already skip the transform/opacity lerp and the
     animated exit entirely; these three rules cover the CSS-side pieces
     (the entrance/exit keyframes and the --visible resting opacity/ring
     transitions) so nothing animates even for the brief pre-first-frame
     window between --visible being added and the first drag tick. */
  #jjPage_apps.tl-theme .apx-trash-bin{ transition:none; }
  #jjPage_apps.tl-theme .apx-trash-bin.apx-trash-bin--visible{ opacity:1; }
  #jjPage_apps.tl-theme .apx-trash-bin--visible .apx-trash-bin-inner,
  #jjPage_apps.tl-theme .apx-trash-bin--exiting .apx-trash-bin-inner,
  #jjPage_apps.tl-theme .apx-trash-bin--full .apx-trash-bin-inner{ animation:none; }
  #jjPage_apps.tl-theme .apx-trash-bin-ring{ transition:none; }
}

/* Empty state (zero apps, or no-match) */
#jjPage_apps.tl-theme .apx-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:64px 24px; gap:12px; }
#jjPage_apps.tl-theme .apx-empty-icon{ font-size:32px; color:var(--apx-muted); }
#jjPage_apps.tl-theme .apx-empty-title{ font:600 17px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--apx-ink); }
#jjPage_apps.tl-theme .apx-empty-sub{ font:400 13.5px/1.5 'Plus Jakarta Sans',sans-serif; color:var(--apx-secondary); max-width:420px; }
#jjPage_apps.tl-theme .apx-empty-cta{
  margin-top:8px; background:var(--apx-cta-ink); color:var(--apx-cta-text); border:0; border-radius:4px; padding:11px 20px;
  font:600 13.5px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer;
}

/* Footer + pagination */
/* .apx-footer collides with the landing page's own <footer class="apx-footer">
   (styles.css ~11118: background:#111;color:#fff, the dark marketing-site
   footer) -- explicit override here, since this scoped rule never declared
   its own background/color, the landing footer's lower-specificity but
   still-declared values were the ones actually painting. */
#jjPage_apps.tl-theme .apx-footer{
  display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding:20px 4px;
  background:var(--apx-white); color:var(--apx-secondary);
}
#jjPage_apps.tl-theme .apx-footer-count{ font:500 12px/1.3 var(--apx-mono); color:var(--apx-secondary); letter-spacing:0.04em; }
#jjPage_apps.tl-theme .apx-pagination{ display:flex; align-items:center; gap:8px; }
#jjPage_apps.tl-theme .apx-page-btn{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--apx-border);
  border-radius:4px; background:var(--apx-panel); color:var(--apx-body); cursor:pointer; transition:background .15s ease;
}
#jjPage_apps.tl-theme .apx-page-btn:hover:not(:disabled){ background:#E7E6DE; }
#jjPage_apps.tl-theme .apx-page-btn:disabled{ opacity:0.4; cursor:not-allowed; }
#jjPage_apps.tl-theme .apx-page-current{
  min-width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--apx-accent);
  border-radius:6px; color:var(--apx-accent); font:600 13px/1 var(--apx-mono); padding:0 8px;
}

/* Mobile cards -- hidden on desktop, shown <768px */
#jjPage_apps.tl-theme .apx-cards{ display:none; flex-direction:column; gap:12px; margin-top:8px; }
#jjPage_apps.tl-theme .apx-card{ border:1px solid var(--apx-border); border-radius:8px; padding:14px; cursor:pointer; }
#jjPage_apps.tl-theme .apx-card-l1{ display:flex; align-items:center; gap:10px; }
#jjPage_apps.tl-theme .apx-card-l1 .apx-logo-tile{ width:32px; height:32px; border-radius:7px; font-size:11px; }
#jjPage_apps.tl-theme .apx-card-text{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
#jjPage_apps.tl-theme .apx-card-co{ font:600 14px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--apx-ink); }
#jjPage_apps.tl-theme .apx-card-loc{ font:400 12px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--apx-muted); }
#jjPage_apps.tl-theme .apx-card-l2{ font:400 13.5px/1.4 'Plus Jakarta Sans',sans-serif; color:var(--apx-body); margin-top:10px; }
#jjPage_apps.tl-theme .apx-card-l3{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; font-size:12.5px; }
#jjPage_apps.tl-theme .apx-card-updated{ font:500 11.5px/1.3 var(--apx-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--apx-muted); }

@media (max-width:768px){
  #jjPage_apps.tl-theme .apx-table-wrap{ display:none !important; }
  #jjPage_apps.tl-theme .apx-cards{ display:flex; }
  #jjPage_apps.tl-theme .apx-stats{ flex-wrap:wrap; border:0; gap:10px; }
  #jjPage_apps.tl-theme .apx-stat{ flex:1 1 calc(33.333% - 7px); border:1px solid var(--apx-border); border-radius:4px; }
  #jjPage_apps.tl-theme .apx-controls{ flex-direction:column; }
  #jjPage_apps.tl-theme .apx-search-wrap{ max-width:100%; flex:1 1 100%; }
  #jjPage_apps.tl-theme .apx-stage-select{ width:100%; }
  #jjPage_apps.tl-theme .apx-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
  #jjPage_apps.tl-theme .apx-tab{ flex-shrink:0; }
  #jjPage_apps.tl-theme .apx-title{ font-size:26px; }
  #jjPage_apps.tl-theme .apx-title-row{ flex-direction:column; align-items:flex-start; gap:12px; }
  #jjPage_apps.tl-theme .apx-add-btn{ width:100%; justify-content:center; }
}

/* Action bar: white card; urgency carried by the title colour, CTA stays the
   system primary. */
#jjPage_apps .ap-action-bar,
#jjPage_apps .ap-action-bar.ap-ab-overdue,
#jjPage_apps .ap-action-bar.ap-ab-followup,
#jjPage_apps .ap-action-bar.ap-ab-fire {
  background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius);
}
#jjPage_apps .ap-ab-icon { color: var(--tl-blue); }
#jjPage_apps .ap-ab-title { font: 500 15px/1.25 var(--tl-display); letter-spacing: -0.01em; color: var(--tl-ink); }
#jjPage_apps .ap-action-bar.ap-ab-overdue .ap-ab-title { color: var(--tl-red); }
#jjPage_apps .ap-ab-sub { color: var(--tl-grey); }
#jjPage_apps .ap-ab-cta,
#jjPage_apps .ap-action-bar.ap-ab-overdue .ap-ab-cta,
#jjPage_apps .ap-action-bar.ap-ab-followup .ap-ab-cta,
#jjPage_apps .ap-action-bar.ap-ab-fire .ap-ab-cta {
  background: var(--tl-blue); border-radius: var(--tl-radius-sm);
  font: 500 12.5px/1 var(--tl-display); letter-spacing: 0.02em;
}
#jjPage_apps .ap-ab-cta:hover { background: #1f3dd9; opacity: 1; }

/* Urgency surface. */
#jjPage_apps .ap-urgency { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); }
#jjPage_apps .ap-urgency-title { font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.06em; color: var(--tl-mute); }
#jjPage_apps .ap-urgency-arrow { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: 999px; color: var(--tl-grey); }
#jjPage_apps .ap-urgency-arrow:hover { border-color: var(--tl-blue); color: var(--tl-blue); }
#jjPage_apps .ap-urgency-item { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); }
#jjPage_apps .ap-urgency-item:hover { border-color: var(--tl-blue); transform: none; }
#jjPage_apps .ap-urgency-item.ap-u-overdue { border-left: 3px solid var(--tl-red); }
#jjPage_apps .ap-urgency-item.ap-u-followup { border-left: 3px solid var(--tl-ink); }
#jjPage_apps .ap-u-co { font: 500 13px/1.3 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_apps .ap-u-role { color: var(--tl-grey); }
#jjPage_apps .ap-u-days { background: transparent; padding: 0; font: 500 10px/1.4 var(--tl-display); letter-spacing: 0.05em; text-transform: uppercase; }
#jjPage_apps .ap-u-days.ap-u-days--overdue { background: transparent; color: var(--tl-red); }
#jjPage_apps .ap-u-days.ap-u-days--followup { background: transparent; color: var(--tl-ink); }
#jjPage_apps .ap-u-btn { border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); color: var(--tl-grey); }
#jjPage_apps .ap-u-btn:hover { border-color: var(--tl-blue); color: var(--tl-blue); }
#jjPage_apps .ap-u-btn--primary { background: var(--tl-blue); border-color: var(--tl-blue); color: #fff; }
#jjPage_apps .ap-u-btn--primary:hover { background: #1f3dd9; border-color: #1f3dd9; opacity: 1; }

/* Upcoming strip (chip colours are calendar content, left alone). */
#jjPage_apps .ap-upcoming-strip { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); }
#jjPage_apps .ap-upcoming-title { font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.06em; color: var(--tl-mute); }
#jjPage_apps .ap-upcoming-cal-link { font: 500 11px/1 var(--tl-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--tl-blue); }
#jjPage_apps .ap-upcoming-cal-link:hover { color: #1f3dd9; text-decoration: none; }

/* Stats row: metric tiles. */
#jjPage_apps .ap-stat { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); box-shadow: none; }
#jjPage_apps .ap-stat:hover { border-color: var(--tl-hair); transform: none; }
#jjPage_apps .ap-stat-num { font: 500 24px/1 var(--tl-display); letter-spacing: -0.02em; color: var(--tl-ink); }
#jjPage_apps .ap-stat--streak .ap-stat-num { color: var(--tl-ink); }
#jjPage_apps .ap-stat-label { font: 500 10.5px/1.3 var(--tl-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tl-mute); }

/* Controls: hairline search, v2 chip grammar on the filter pills. */
#jjPage_apps .ap-search-input { background: #fff; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); color: var(--tl-ink); font-family: var(--tl-body-font); }
#jjPage_apps .ap-search-input:focus { border-color: var(--tl-blue); }
#jjPage_apps .ap-search-icon { color: var(--tl-mute); }
#jjPage_apps .ap-pill { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: 999px; color: var(--tl-grey); font-family: var(--tl-body-font); }
#jjPage_apps .ap-pill:hover { border-color: var(--tl-blue); color: var(--tl-blue); background: var(--tl-card); }
#jjPage_apps .ap-pill.active { border-color: var(--tl-tint-border); background: var(--tl-tint); color: var(--tl-blue); }

/* Board: columns as quiet zones, hairline top rule, no heavy backgrounds. */
#jjPage_apps .ap-col { background: transparent; border: 0; border-top: 1px solid var(--tl-hair); border-radius: 0; }
#jjPage_apps .ap-col-hd,
#jjPage_apps .ap-col-hd--saved, #jjPage_apps .ap-col-hd--applied,
#jjPage_apps .ap-col-hd--screening, #jjPage_apps .ap-col-hd--interview,
#jjPage_apps .ap-col-hd--offer, #jjPage_apps .ap-col-hd--rejected {
  background: transparent; color: var(--tl-mute); border-radius: 0; padding: 10px 8px 6px;
}
#jjPage_apps .ap-col-label { font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.08em; text-transform: uppercase; }
#jjPage_apps .ap-col-count { background: transparent; color: var(--tl-grey); font: 500 11px/1 var(--tl-display); }
#jjPage_apps .ap-col-dragover { background: var(--tl-tint); outline: 2px dashed var(--tl-blue); }
#jjPage_apps .ap-empty { font-size: 12.5px; font-style: normal; color: var(--tl-grey); }

/* Cards: white, hairline, no shadow at rest; 2px blue border is the lifted
   state (padding compensates the extra 1px so layout does not shift). */
#jjPage_apps .ap-card { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius); box-shadow: none; }
#jjPage_apps .ap-card:hover { border-color: var(--tl-blue); transform: none; box-shadow: none; }
#jjPage_apps .ap-card.ap-card-dragging,
#jjPage_apps .ap-card.ap-card-touch-picked { border: 2px solid var(--tl-blue); padding: 12px; box-shadow: none; transform: none; }
#jjPage_apps .ap-card.ap-overdue { border-left: 3px solid var(--tl-red); }
#jjPage_apps .ap-card.ap-followup-due { border-left: 3px solid var(--tl-ink); }
#jjPage_apps .ap-card.ap-card-just-saved { box-shadow: 0 0 0 2px rgba(22, 51, 255, 0.5); }
/* Re-declare the pulse keyframes in blue (was green); the name is referenced
   only by .ap-card-just-saved and the later declaration wins. */
@keyframes ap-just-saved-pulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 51, 255, 0.7); }
  50% { box-shadow: 0 0 0 8px rgba(22, 51, 255, 0); }
  100% { box-shadow: 0 0 0 2px rgba(22, 51, 255, 0.5); }
}
#jjPage_apps .ap-card-co { font: 500 13.5px/1.3 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_apps .ap-card-role { font: 400 12px/1.35 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_apps .ap-card-date { font-size: 10.5px; color: var(--tl-mute); }

/* Badges: typographic micro-labels. Sponsor confirmed keeps a blue tint pill
   (it was a badge); everything else becomes a coloured word. Mapping:
   sponsor = blue, no sponsor = red, unconfirmed = mute; CV score good = blue,
   mid = ink, low = red; overdue = red, follow up = ink. */
#jjPage_apps .ap-badge { background: transparent; border-radius: 0; padding: 0; font: 500 9.5px/1.4 var(--tl-display); letter-spacing: 0.05em; text-transform: uppercase; }
#jjPage_apps .ap-badge--sponsor-yes { background: var(--tl-success-bg); color: var(--tl-blue); padding: 2px 7px; border-radius: 999px; }
#jjPage_apps .ap-badge--sponsor-prov { background: rgba(245,158,11,0.12); color: #b45309; padding: 2px 7px; border-radius: 999px; }
#jjPage_apps .ap-badge--sponsor-brated { background: rgba(245,158,11,0.12); color: #b45309; padding: 2px 7px; border-radius: 999px; }
#jjPage_apps .ap-badge--sponsor-no { background: transparent; color: var(--tl-red); }
#jjPage_apps .ap-badge--sponsor-unk { background: transparent; color: var(--tl-mute); }
#jjPage_apps .ap-badge--overdue { background: transparent; color: var(--tl-red); }
#jjPage_apps .ap-badge--followup { background: transparent; color: var(--tl-ink); }
#jjPage_apps .ap-badge--cv-good { background: transparent; color: var(--tl-blue); }
#jjPage_apps .ap-badge--cv-mid { background: transparent; color: var(--tl-ink); }
#jjPage_apps .ap-badge--cv-low { background: transparent; color: var(--tl-red); }

/* Card controls (base uses !important on the find/delete actions, so these
   carry it too). */
#jjPage_apps .ap-card-move { background: #fff; border: 1px solid var(--tl-hair); border-radius: 6px; color: var(--tl-grey); font-family: var(--tl-body-font); }
#jjPage_apps .ap-card-move:focus { border-color: var(--tl-blue); }
#jjPage_apps .ap-card-act { border: 1px solid var(--tl-hair); border-radius: 6px; background: transparent; color: var(--tl-grey); font-family: var(--tl-body-font); }
#jjPage_apps .ap-card-act:hover { border-color: var(--tl-blue); color: var(--tl-blue); background: transparent; }
#jjPage_apps .ap-card-act-find { background: transparent !important; border: 1px solid var(--tl-hair) !important; color: var(--tl-blue) !important; }
#jjPage_apps .ap-card-act-find:hover { background: var(--tl-tint) !important; border-color: var(--tl-blue) !important; color: var(--tl-blue) !important; }
#jjPage_apps .ap-card-act-delete { background: transparent !important; border: 1px solid var(--tl-hair) !important; color: var(--tl-red) !important; }
#jjPage_apps .ap-card-act-delete:hover { background: transparent !important; border-color: var(--tl-red) !important; color: var(--tl-red) !important; }

/* Quick-add modal: cream editorial style, deliberately softer than the white
   table behind it (markup nests inside #jjPage_apps, so it is page-scoped). */
#jjPage_apps .ap-qa-overlay { background: rgba(20,20,18,0.7); }
#jjPage_apps .ap-qa-modal { background: #F7F4ED; border: none; border-radius: 14px; box-shadow: 0 24px 64px -16px rgba(20,20,18,0.35); max-width: 530px; padding: 30px 34px; max-height: 92vh; overflow-y: auto; box-sizing: border-box; }
#jjPage_apps .ap-qa-header { border: none; padding: 0 0 20px; align-items: flex-start; }
#jjPage_apps .ap-qa-eyebrow { font: 600 11px/1.3 var(--apx-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #1C1E1B; margin-bottom: 6px; }
#jjPage_apps .ap-qa-title { font: 550 33px/1.15 'Fraunces','Tiempos Headline','Cormorant Garamond','Times New Roman',serif; color: #20221F; letter-spacing: -0.01em; }
#jjPage_apps .ap-qa-close { width: 36px; height: 36px; border-radius: 9px; background: #fff; border: 1px solid #E5E0D5; color: #3A3B36; flex-shrink: 0; }
#jjPage_apps .ap-qa-close:hover { background: #fff; border-color: #20261F; color: #20261F; }
#jjPage_apps .ap-qa-close i { font-size: 15px; }
#jjPage_apps .ap-qa-body { padding: 0; gap: 16px; }
#jjPage_apps .ap-qa-label { font: 600 10.5px/1.3 var(--apx-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #3A3B36; }
#jjPage_apps .ap-qa-required { color: #C64B3A; }
#jjPage_apps .ap-qa-optional { color: #9A988F; font-weight: 500; letter-spacing: 0.08em; }
#jjPage_apps .ap-qa-input { background: #FDFCF9; border: 1px solid #E5E0D5; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: #20221F; font-family: 'Plus Jakarta Sans',sans-serif; }
#jjPage_apps .ap-qa-input::placeholder { color: #9A988F; }
#jjPage_apps .ap-qa-input:focus { border-color: #20261F; }
#jjPage_apps .ap-qa-input.ap-qa-input--error { border-color: #C64B3A; }
#jjPage_apps .ap-qa-error { font: 400 11.5px/1.4 'Plus Jakarta Sans',sans-serif; color: #C64B3A; margin-top: 2px; }
#jjPage_apps .ap-qa-divider { background: #E9E4D9; }
#jjPage_apps .ap-qa-footer { border: none; border-top: 1px solid #E9E4D9; padding: 18px 0 0; justify-content: space-between; }
#jjPage_apps .ap-qa-footer-btns { display: flex; align-items: center; gap: 8px; }
#jjPage_apps .ap-qa-privacy { display: flex; align-items: center; gap: 7px; font: 400 12px/1.3 'Plus Jakarta Sans',sans-serif; color: #8B897F; }
#jjPage_apps .ap-qa-cancel { background: #FDFCF9; border: 1px solid #E5E0D5; border-radius: 10px; color: #3A3B36; font-family: 'Plus Jakarta Sans',sans-serif; }
#jjPage_apps .ap-qa-cancel:hover { border-color: #20261F; color: #20261F; }
#jjPage_apps .ap-qa-submit { display: inline-flex; align-items: center; gap: 8px; background: #20261F; border-radius: 10px; font: 600 13px/1 'Plus Jakarta Sans',sans-serif; color: #F5F3EC; }
#jjPage_apps .ap-qa-submit:hover { background: #2B3227; opacity: 1; }

/* Import section inside the quick-add modal. */
#jjPage_apps .ap-beta-tag { background: #EFEBE1; border: 1px solid #E0DACC; border-radius: 5px; color: #6B6A64; font: 600 9.5px/1.3 var(--apx-mono); letter-spacing: 0.06em; }
#jjPage_apps .ap-import-footnote { color: #9A988F; font-size: 11.5px; margin: 0; line-height: 1.4; }
#jjPage_apps .ap-qa-input-icon-wrap { position: relative; }
#jjPage_apps .ap-qa-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9A988F; font-size: 15px; pointer-events: none; }
#jjPage_apps .ap-qa-input-icon-wrap--top .ap-qa-input-icon--top { top: 14px; transform: none; }
#jjPage_apps .ap-qa-input-with-icon { padding-left: 38px; }
/* Link import is now the secondary, demoted path -- white bordered, not filled. */
#jjPage_apps .ap-import-btn { background: #FDFCF9; border: 1px solid #E5E0D5; border-radius: 10px; font: 600 13px/1 'Plus Jakarta Sans',sans-serif; color: #33342F; }
#jjPage_apps .ap-import-btn:hover { border-color: #20261F; }
#jjPage_apps .ap-qa-rule-label { display: flex; align-items: center; gap: 10px; font: 600 10.5px/1.3 var(--apx-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #3A3B36; }
#jjPage_apps .ap-qa-rule-label::after { content: ''; flex: 1; height: 1px; background: #E9E4D9; }
/* Paste-and-extract is now the primary, recommended path -- dark filled. */
#jjPage_apps .ap-qa-extract-btn { align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; background: #20261F; border: none; border-radius: 10px; padding: 8px 16px; color: #F5F3EC; font: 600 13px/1 'Plus Jakarta Sans',sans-serif; cursor: pointer; transition: background .12s; }
#jjPage_apps .ap-qa-extract-btn:hover { background: #2B3227; }
#jjPage_apps .ap-qa-extract-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Recommended-path panel wrapping the paste box. */
#jjPage_apps .ap-paste-panel { display: flex; flex-direction: column; gap: 10px; background: #EFF3E9; border: 1px solid #CDD8C2; border-radius: 12px; padding: 18px; animation: apPasteIn .18s ease; }
#jjPage_apps .ap-paste-panel-head { display: flex; align-items: center; gap: 8px; }
#jjPage_apps .ap-paste-helper { color: #5C6653; font-size: 12.5px; margin: 0; line-height: 1.4; }
#jjPage_apps .ap-fastest-tag { background: #3E5233; border-radius: 5px; color: #F5F3EC; font: 600 9.5px/1.3 var(--apx-mono); letter-spacing: 0.06em; padding: 2px 7px; }

/* Idle "please use me" affordance: dashed marching-ants border (an SVG
   overlay, not a CSS border -- border-style:dashed can't animate its own
   dash offset) plus a slow breathing background. Both driven purely by
   :not(:placeholder-shown), so they start/stop with content exactly as
   typing, pasting, or clearing the field changes it -- no JS bookkeeping
   needed for the idle-vs-filled toggle itself. */
#jjPage_apps .ap-paste-panel .ap-paste-textarea {
  /* textareas are inline-block by default, which leaves a few px of baseline
     descender gap below them inside a block wrapper -- harmless normally,
     but it meant the SVG overlay (sized off the wrapper, not the textarea)
     was a few px taller than the textarea itself. display:block removes the
     gap so the wrapper's box exactly matches the textarea's. */
  display: block;
  border-color: transparent;
  background-color: #EAF0E2;
  animation: apPasteBreathe 3.2s ease-in-out infinite;
}
#jjPage_apps .ap-paste-panel .ap-paste-textarea:not(:placeholder-shown) {
  border-color: #7A8F6E;
  background-color: #FDFCF9;
  animation: none;
}
#jjPage_apps .ap-paste-panel .ap-paste-textarea.ap-paste-flash { animation: apPasteFlash 0.5s ease-out; }
@keyframes apPasteBreathe { 0%, 100% { background-color: #EAF0E2; } 50% { background-color: #E2ECD6; } }
@keyframes apPasteFlash { 0% { background-color: #D6E6C6; } 100% { background-color: #EAF0E2; } }

/* Marching-ants SVG overlay: absolutely positioned over the same
   position:relative wrapper the textarea and its icon already share, so
   width/height:100% alone keeps it tracking the box on any resize or mobile
   wrap -- no resize-driven JS needed. Hidden once the textarea has content
   via the sibling selector (the svg comes after the textarea in markup). */
#jjPage_apps .ap-paste-march-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#jjPage_apps .ap-paste-march-rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: 10px; fill: none; stroke: #7A8F6E; stroke-width: 2px; stroke-dasharray: 8 6; animation: apPasteMarch 1.1s linear infinite; }
@keyframes apPasteMarch { to { stroke-dashoffset: -14; } }
#jjPage_apps .ap-paste-textarea:not(:placeholder-shown) ~ .ap-paste-march-svg { opacity: 0; }
#jjPage_apps .ap-import-loading { background: #EFEBE1; border-color: #E0DACC; color: #3A3B36; }
#jjPage_apps .ap-import-success { background: #EAF0E4; border-color: #D7E4CC; color: #4E6B4E; }
#jjPage_apps .ap-import-partial { background: #EFEBE1; border-color: #E0DACC; color: #3A3B36; }
#jjPage_apps .ap-import-error { background: #F7EAE6; border-color: #F0C4BA; color: #AC4A3B; }
#jjPage_apps .ap-qa-input.ap-imported { border-color: #4E6B4E !important; background: #EAF0E4 !important; }
#jjPage_apps .ap-import-duplicate { background: #EFEBE1; border: 1px solid #E0DACC; color: #3A3B36; }
#jjPage_apps .ap-import-duplicate button { border: 1px solid #E0DACC; color: #20261F; }
#jjPage_apps .ap-import-duplicate button:hover { background: #E5E0D5; }

/* Stage segmented control -- equal joined cells, one shared 1px border strip.
   Colours are data-driven per stage via the --cls modifier classes; any stage
   value missing a modifier (see APX_QA_STAGE_META's fallback) just inherits
   the base cell rule below, so an unknown future stage still renders instead
   of appearing unstyled. */
/* overflow:hidden removed -- it clipped the expanding selection ring below at
   the group's own outer edge (harmless for interior cells, but cut the ring
   short on the first/last cell). Square corners (border-radius:0) don't
   depend on it for anything. */
#jjPage_apps .ap-qa-stage-group { display: flex; border: 1px solid #C9C6BC; border-radius: 0; }
#jjPage_apps .ap-qa-stage-cell { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 15px 8px; border: none; border-right: 1px solid #C9C6BC; background: #ECEEE8; color: #4A5044; font: 600 13px/1 var(--apx-mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; -webkit-appearance: none; appearance: none; position: relative; transition: filter .1s ease, background-color 200ms ease, color 200ms ease, transform 150ms ease; }
#jjPage_apps .ap-qa-stage-cell:last-child { border-right: none; }
#jjPage_apps .ap-qa-stage-cell:hover:not(.ap-qa-stage-cell--checked) { filter: brightness(0.96); transform: translateY(-1px); }
#jjPage_apps .ap-qa-stage-cell:focus-visible { outline: 2px solid #20261F; outline-offset: 2px; position: relative; z-index: 1; }
/* Selection pop + expanding ring, mouse or keyboard alike -- both paths call
   the same apxQaSelectStage(), which adds/removes this class once per actual
   change (see index.html). transform+box-shadow only, no layout impact. */
@keyframes apQaStagePop { 0% { transform: scale(1); } 50% { transform: scale(1.055); } 100% { transform: scale(1); } }
@keyframes apQaStageRing { 0% { box-shadow: 0 0 0 0 rgba(122,143,110,.55); } 100% { box-shadow: 0 0 0 7px rgba(122,143,110,0); } }
#jjPage_apps .ap-qa-stage-cell.ap-qa-stage-cell--pop { animation: apQaStagePop 0.28s cubic-bezier(.2,.9,.3,1.4), apQaStageRing 0.5s ease-out; }
#jjPage_apps .ap-qa-stage-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
#jjPage_apps .ap-qa-stage-cell--saved { color: #77756B; background: #EFEDE6; }
#jjPage_apps .ap-qa-stage-cell--saved .ap-qa-stage-dot { color: #8B897F; }
#jjPage_apps .ap-qa-stage-cell--applied { color: #4A5044; background: #ECEEE8; }
#jjPage_apps .ap-qa-stage-cell--applied .ap-qa-stage-dot { color: #6F7A6B; }
#jjPage_apps .ap-qa-stage-cell--interview { color: #5A55A0; background: #EEECF8; }
#jjPage_apps .ap-qa-stage-cell--interview .ap-qa-stage-dot { color: #6A5FC9; }
#jjPage_apps .ap-qa-stage-cell--offer { color: #4E6B4E; background: #EAF0E4; }
#jjPage_apps .ap-qa-stage-cell--offer .ap-qa-stage-dot { color: #5E8760; }
#jjPage_apps .ap-qa-stage-cell--rejected { color: #AC4A3B; background: #F7EAE6; }
#jjPage_apps .ap-qa-stage-cell--rejected .ap-qa-stage-dot { color: #BE5442; }
#jjPage_apps .ap-qa-stage-cell--checked { background: #272B22; color: #F5F3EC; }
#jjPage_apps .ap-qa-stage-cell--saved.ap-qa-stage-cell--checked .ap-qa-stage-dot { color: #D8D6CB; }
#jjPage_apps .ap-qa-stage-cell--applied.ap-qa-stage-cell--checked .ap-qa-stage-dot { color: #B9E6C6; }
#jjPage_apps .ap-qa-stage-cell--interview.ap-qa-stage-cell--checked .ap-qa-stage-dot { color: #CFC9F2; }
#jjPage_apps .ap-qa-stage-cell--offer.ap-qa-stage-cell--checked .ap-qa-stage-dot { color: #C4DFC6; }
#jjPage_apps .ap-qa-stage-cell--rejected.ap-qa-stage-cell--checked .ap-qa-stage-dot { color: #F0C4BA; }

/* The overlay/modal open via a plain display:none<->flex swap (no transition
   of their own, so already instant either way) -- the one thing that DOES
   animate on open is .ap-paste-panel's existing entrance keyframe, which
   replays every time the modal's display toggles back to flex. Also covers
   this task's new animations: no march, no breathe, no pop, no ring, no
   hover lift, instant colour/background changes; the paste flash is skipped
   entirely in JS (apxPasteFlash) rather than left to fight a "none" here. */
@media (prefers-reduced-motion: reduce) {
  #jjPage_apps .ap-paste-panel { animation: none; }
  #jjPage_apps .ap-paste-panel .ap-paste-textarea { animation: none; }
  #jjPage_apps .ap-paste-march-rect { animation: none; }
  #jjPage_apps .ap-qa-stage-cell { transition: none; }
  #jjPage_apps .ap-qa-stage-cell:hover:not(.ap-qa-stage-cell--checked) { transform: none; }
  #jjPage_apps .ap-qa-stage-cell.ap-qa-stage-cell--pop { animation: none; }
}

/* Delete confirmation modal. */
#jjPage_apps .ap-delete-modal { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: 16px; box-shadow: none; }
#jjPage_apps .ap-delete-icon { color: var(--tl-red); }
#jjPage_apps .ap-delete-title { font: 500 16px/1.25 var(--tl-display); letter-spacing: -0.02em; color: var(--tl-ink); }
#jjPage_apps .ap-delete-sub { color: var(--tl-grey); }
#jjPage_apps .ap-delete-cancel { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); color: var(--tl-grey); }
#jjPage_apps .ap-delete-cancel:hover { background: var(--tl-card); border-color: var(--tl-ink); color: var(--tl-ink); }
#jjPage_apps .ap-delete-confirm { background: var(--tl-red); border-radius: var(--tl-radius-sm); font: 500 13px/1 var(--tl-display); }
#jjPage_apps .ap-delete-confirm:hover { background: #b04a3d; }

/* Detail modal (also page-scoped markup). Stage chip becomes the typographic
   stage word using the merged tl-status mapping: interview/offer = blue,
   screening = ink, applied/saved = grey, rejected = red. */
#jjPage_apps .ap-modal-card { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: 16px; box-shadow: none; }
#jjPage_apps .ap-modal-hd, #jjPage_apps .ap-modal-actions { border-color: var(--tl-hair); }
#jjPage_apps .ap-modal-title { font: 500 16px/1.3 var(--tl-display); letter-spacing: -0.02em; color: var(--tl-ink); }
#jjPage_apps .ap-modal-title-sep { color: var(--tl-mute); }
#jjPage_apps .ap-modal-close { background: transparent; border: 1px solid var(--tl-hair); color: var(--tl-grey); }
#jjPage_apps .ap-modal-close:hover { background: transparent; border-color: var(--tl-ink); color: var(--tl-ink); }
#jjPage_apps .ap-modal-stage-chip,
#jjPage_apps .ap-modal-stage-chip.stage-saved, #jjPage_apps .ap-modal-stage-chip.stage-applied,
#jjPage_apps .ap-modal-stage-chip.stage-screening, #jjPage_apps .ap-modal-stage-chip.stage-interview,
#jjPage_apps .ap-modal-stage-chip.stage-offer, #jjPage_apps .ap-modal-stage-chip.stage-rejected {
  background: transparent; padding: 0; border-radius: 0;
  font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.05em;
}
#jjPage_apps .ap-modal-stage-chip.stage-interview, #jjPage_apps .ap-modal-stage-chip.stage-offer { color: var(--tl-blue); }
#jjPage_apps .ap-modal-stage-chip.stage-screening { color: var(--tl-ink); }
#jjPage_apps .ap-modal-stage-chip.stage-saved, #jjPage_apps .ap-modal-stage-chip.stage-applied { color: var(--tl-grey); }
#jjPage_apps .ap-modal-stage-chip.stage-rejected { color: var(--tl-red); }

/* Pass 3a: Fraunces (--ap-display) for display type only, placed after the numeral/
   title rules so it beats their `font:` shorthand. Page heading, KPI numerals, and
   section/card titles; the 11px uppercase .ap-*-title eyebrows stay Plus Jakarta. */
#jjPage_apps .jj-page-title,
#jjPage_apps .ap-stat-num,
#jjPage_apps .ap-ab-title,
#jjPage_apps .ap-qa-title { font-family: var(--ap-display); letter-spacing: -0.02em; }
/* Protect: categorical stage-chip colours pinned byte-identical to the pre-Pass-3
   monochrome values (the alias would otherwise darken saved/applied grey). */
#jjPage_apps .ap-modal-stage-chip.stage-interview, #jjPage_apps .ap-modal-stage-chip.stage-offer { color: #2448FF; }
#jjPage_apps .ap-modal-stage-chip.stage-screening { color: #101010; }
#jjPage_apps .ap-modal-stage-chip.stage-saved, #jjPage_apps .ap-modal-stage-chip.stage-applied { color: #86867E; }

#jjPage_apps .ap-field > label { font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.06em; color: var(--tl-mute); }
#jjPage_apps .ap-field > input, #jjPage_apps .ap-field > select, #jjPage_apps .ap-field > textarea {
  background: #fff; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); color: var(--tl-ink); font-family: var(--tl-body-font);
}
#jjPage_apps .ap-field > input:focus, #jjPage_apps .ap-field > select:focus, #jjPage_apps .ap-field > textarea:focus { border-color: var(--tl-blue); }
#jjPage_apps .ap-priority-pills button { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); color: var(--tl-grey); font-family: var(--tl-body-font); }
#jjPage_apps .ap-priority-pills button:hover { color: var(--tl-ink); }
#jjPage_apps .ap-priority-pills button.active[data-priority="low"],
#jjPage_apps .ap-priority-pills button.active[data-priority="medium"],
#jjPage_apps .ap-priority-pills button.active[data-priority="high"] {
  background: var(--tl-tint); border-color: var(--tl-tint-border); color: var(--tl-blue);
}
#jjPage_apps .ap-tags-input { background: #fff; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); }
#jjPage_apps .ap-tag { background: var(--tl-tint); color: var(--tl-blue); }
#jjPage_apps .ap-link-doc-btn { border: 1px dashed var(--tl-hair); color: var(--tl-grey); border-radius: var(--tl-radius-sm); font-family: var(--tl-body-font); }
#jjPage_apps .ap-link-doc-btn:hover { border-color: var(--tl-blue); color: var(--tl-blue); border-style: solid; }
/* Attached cover-letter snapshot card in the application detail modal. */
#jjPage_apps .ap-doc-attached{width:100%;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-sm,8px);background:var(--tl-card,#fff);padding:10px 12px;display:flex;flex-direction:column;gap:7px}
#jjPage_apps .ap-doc-att-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#jjPage_apps .ap-doc-att-badge{display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--tl-body-font);color:var(--tl-blue)}
#jjPage_apps .ap-doc-att-meta{font:400 11px/1.3 var(--tl-body-font);color:var(--tl-grey)}
#jjPage_apps .ap-doc-att-preview{font:400 12px/1.5 var(--tl-body-font);color:var(--tl-body)}
#jjPage_apps .ap-doc-att-preview.ap-doc-att-full{white-space:pre-wrap;max-height:240px;overflow:auto;border-top:1px solid var(--tl-hair);padding-top:8px}
#jjPage_apps .ap-doc-att-actions{display:flex;gap:6px}
#jjPage_apps .ap-doc-att-btn{border:1px solid var(--tl-hair);background:transparent;border-radius:7px;padding:5px 10px;font:600 11.5px/1 var(--tl-body-font);color:var(--tl-ink);cursor:pointer;transition:.14s}
#jjPage_apps .ap-doc-att-btn:hover{border-color:var(--tl-blue);color:var(--tl-blue)}
#jjPage_apps .ap-doc-att-remove:hover{border-color:#c0392b;color:#c0392b}
#jjPage_apps .ap-doc-att-cvframe{max-height:320px;overflow:auto;border-top:1px solid var(--tl-hair);margin-top:2px;padding-top:8px;font-size:12px;background:#fff;border-radius:6px}
#jjPage_apps .ap-doc-att-cvframe *{max-width:100%}
#jjPage_apps .ap-ir-score{font:600 12.5px/1.3 var(--tl-body-font);color:var(--tl-blue);margin-bottom:6px}
#jjPage_apps .ap-ir-verdict{font:400 12px/1.5 var(--tl-body-font);color:var(--tl-body);margin-bottom:8px}
#jjPage_apps .ap-ir-h{font:600 11px/1 var(--tl-body-font);letter-spacing:.06em;text-transform:uppercase;color:var(--tl-grey);margin:6px 0 4px}
#jjPage_apps .ap-ir-list{margin:0 0 6px;padding-left:18px;font:400 12px/1.5 var(--tl-body-font);color:var(--tl-body)}
#jjPage_apps .ap-ir-meta{font:400 11px/1.3 var(--tl-body-font);color:var(--tl-grey)}
#jjPage_apps .ap-ir-raw{white-space:pre-wrap;font:400 11px/1.45 ui-monospace,monospace;color:var(--tl-body);margin:0}
/* Application workspace (slice 1): #apDetailModal restyled into a nav-rail + content-panel overlay. */
#apDetailModal .ap-modal-card{max-width:980px;width:94vw;max-height:90vh;display:flex;flex-direction:column;padding:0;overflow:hidden}
#apDetailModal .ap-modal-hd{flex:0 0 auto;padding:16px 22px;border-bottom:1px solid var(--tl-hair);margin:0;display:flex;align-items:center;justify-content:space-between;gap:14px}
#apDetailModal .ap-modal-title{font:500 16px/1.2 var(--tl-display);letter-spacing:-0.01em;color:var(--tl-ink)}
#apDetailModal .ap-modal-title-sep{color:var(--tl-mute)}
#apDetailModal .ws-body{display:flex;min-height:0;flex:1 1 auto}
#apDetailModal .ws-nav{flex:0 0 210px;border-right:1px solid var(--tl-hair);padding:12px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;background:rgba(17,18,22,0.015)}
#apDetailModal .ws-nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 12px;font:500 13px/1.2 var(--tl-body-font);color:var(--tl-grey);cursor:pointer;transition:.13s}
#apDetailModal .ws-nav-item i{font-size:16px}
#apDetailModal .ws-nav-item:hover{background:rgba(17,18,22,0.04);color:var(--tl-ink)}
#apDetailModal .ws-nav-item.is-active{color:var(--tl-blue);background:var(--tl-tint,#eef1ff);box-shadow:inset 2px 0 0 var(--tl-blue)}
#apDetailModal .ws-nav-foot{margin-top:auto}
#apDetailModal .ws-content{flex:1 1 auto;min-width:0;overflow-y:auto;padding:22px 24px}
#apDetailModal .ws-content .ap-modal-body{padding:0}
#apDetailModal .ws-content .ap-modal-actions{padding:16px 0 0;margin-top:16px;border-top:1px solid var(--tl-hair)}
#apDetailModal .ws-hero{background:var(--tl-tint,#eef1ff);border:1px solid var(--tl-hair);border-radius:14px;padding:18px 20px;margin-bottom:22px}
#apDetailModal .ws-hero-k{font:600 10.5px/1 var(--tl-body-font);letter-spacing:.1em;text-transform:uppercase;color:var(--tl-blue);margin-bottom:8px}
#apDetailModal .ws-hero-t{font:500 20px/1.15 var(--tl-display);letter-spacing:-0.02em;color:var(--tl-ink)}
#apDetailModal .ws-hero-s{font:400 13px/1.5 var(--tl-body-font);color:var(--tl-grey);margin:6px 0 14px;max-width:52ch}
#apDetailModal .ws-hero-btn{border:0;border-radius:10px;background:var(--tl-blue);color:#fff;font:500 13px/1 var(--tl-display);padding:11px 16px;cursor:pointer;transition:background .14s}
#apDetailModal .ws-hero-btn:hover{background:#1f3dd9}
#apDetailModal .ws-prog-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
#apDetailModal .ws-prog-label{font:600 12px/1 var(--tl-body-font);color:var(--tl-ink)}
#apDetailModal .ws-prog-count{font:400 12px/1 var(--tl-body-font);color:var(--tl-grey)}
#apDetailModal .ws-prog-track{height:8px;border-radius:999px;background:var(--tl-hair);overflow:hidden;margin-bottom:12px}
#apDetailModal .ws-prog-fill{display:block;height:100%;background:var(--tl-blue);border-radius:999px;transition:width .4s ease}
#apDetailModal .ws-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
#apDetailModal .ws-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--tl-hair);border-radius:999px;padding:6px 12px;font:500 12px/1 var(--tl-body-font);color:var(--tl-mute)}
#apDetailModal .ws-chip i{font-size:14px}
#apDetailModal .ws-chip.is-on{border-color:rgba(23,116,73,.3);color:#177449;background:rgba(23,116,73,.06)}
#apDetailModal .ws-sec-label{font:600 11px/1 var(--tl-body-font);letter-spacing:.07em;text-transform:uppercase;color:var(--tl-grey);margin:0 0 11px}
#apDetailModal .ws-doc-grid{display:flex;flex-direction:column;gap:10px}
#apDetailModal .ws-doc-card{display:flex;align-items:center;gap:12px;border:1px solid var(--tl-hair);border-radius:12px;padding:12px 14px;background:var(--tl-card,#fff)}
#apDetailModal .ws-doc-card.is-present{border-color:rgba(23,116,73,.25)}
#apDetailModal .ws-doc-ico{flex:0 0 36px;width:36px;height:36px;border-radius:9px;background:rgba(17,18,22,.05);display:grid;place-items:center;color:var(--tl-grey);font-size:17px}
#apDetailModal .ws-doc-card.is-present .ws-doc-ico{background:rgba(23,116,73,.1);color:#177449}
#apDetailModal .ws-doc-main{flex:1 1 auto;min-width:0}
#apDetailModal .ws-doc-name{font:500 13.5px/1.2 var(--tl-body-font);color:var(--tl-ink)}
#apDetailModal .ws-doc-meta{display:flex;align-items:center;gap:8px;margin-top:3px}
#apDetailModal .ws-doc-score{font:600 11px/1 var(--tl-body-font);color:#177449;background:rgba(23,116,73,.1);border-radius:999px;padding:3px 7px}
#apDetailModal .ws-doc-when{font:400 11.5px/1.2 var(--tl-body-font);color:var(--tl-grey)}
#apDetailModal .ws-doc-none{font:400 11.5px/1.2 var(--tl-body-font);color:var(--tl-mute)}
#apDetailModal .ws-doc-act{flex:0 0 auto;border:1px solid var(--tl-hair);background:transparent;border-radius:8px;padding:7px 12px;font:600 12px/1 var(--tl-body-font);color:var(--tl-blue);cursor:pointer;transition:.13s}
#apDetailModal .ws-doc-act:hover{border-color:var(--tl-blue);background:var(--tl-tint,#eef1ff)}
#apDetailModal .ws-doc-summary{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#apDetailModal .ws-doc-badge{display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--tl-body-font);color:#177449}
#apDetailModal .ws-doc-body{border:1px solid var(--tl-hair);border-radius:10px;padding:14px 16px;max-height:42vh;overflow:auto;background:#fff}
#apDetailModal .ws-doc-text{white-space:pre-wrap;font:400 13px/1.6 Georgia,serif;color:var(--tl-body)}
#apDetailModal .ws-doc-cvframe *{max-width:100%}
#apDetailModal .ws-doc-foot{margin-top:14px}
#apDetailModal .ws-empty{text-align:center;padding:40px 20px;border:1px dashed var(--tl-hair);border-radius:12px}
#apDetailModal .ws-empty-t{font:500 15px/1.2 var(--tl-display);color:var(--tl-ink);margin-bottom:6px}
#apDetailModal .ws-empty-s{font:400 12.5px/1.5 var(--tl-body-font);color:var(--tl-grey);margin-bottom:16px}
#apDetailModal .ws-stub{text-align:center;padding:56px 20px;color:var(--tl-grey)}
#apDetailModal .ws-stub i{font-size:30px;color:var(--tl-mute)}
#apDetailModal .ws-stub-t{font:500 16px/1.2 var(--tl-display);color:var(--tl-ink);margin:12px 0 5px}
#apDetailModal .ws-stub-s{font:400 12.5px/1.5 var(--tl-body-font);color:var(--tl-grey);max-width:40ch;margin:0 auto}
#apDetailModal .ws-timeline{list-style:none;margin:0;padding:0}
#apDetailModal .ws-tl-row{display:flex;align-items:flex-start;gap:12px;padding:0 0 16px;position:relative}
#apDetailModal .ws-tl-row::before{content:"";position:absolute;left:13px;top:27px;bottom:-2px;width:1px;background:var(--tl-hair)}
#apDetailModal .ws-tl-row:last-child{padding-bottom:0}
#apDetailModal .ws-tl-row:last-child::before{display:none}
#apDetailModal .ws-tl-ico{flex:0 0 27px;width:27px;height:27px;border-radius:999px;background:rgba(17,18,22,.05);display:grid;place-items:center;color:var(--tl-grey);font-size:14px;position:relative;z-index:1}
#apDetailModal .ws-tl-main{display:flex;flex-direction:column;gap:2px;padding-top:4px}
#apDetailModal .ws-tl-label{font:500 13px/1.3 var(--tl-body-font);color:var(--tl-ink)}
#apDetailModal .ws-tl-when{font:400 11.5px/1.2 var(--tl-body-font);color:var(--tl-grey)}
#apDetailModal .ws-ct-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
#apDetailModal .ws-ct-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid var(--tl-hair);border-radius:11px;padding:11px 13px;background:var(--tl-card,#fff)}
#apDetailModal .ws-ct-main{min-width:0;flex:1}
#apDetailModal .ws-ct-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#apDetailModal .ws-ct-name{font:500 13.5px/1.2 var(--tl-body-font);color:var(--tl-ink)}
#apDetailModal .ws-ct-kind{font:600 10px/1 var(--tl-body-font);letter-spacing:.04em;text-transform:uppercase;color:var(--tl-blue);background:var(--tl-tint,#eef1ff);border-radius:999px;padding:3px 8px}
#apDetailModal .ws-ct-role{font:400 12px/1.4 var(--tl-body-font);color:var(--tl-grey);margin-top:3px}
#apDetailModal .ws-ct-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:5px}
#apDetailModal .ws-ct-link{display:inline-flex;align-items:center;gap:4px;font:500 12px/1.2 var(--tl-body-font);color:var(--tl-blue);text-decoration:none}
#apDetailModal .ws-ct-link:hover{text-decoration:underline}
#apDetailModal .ws-ct-when{font:400 11px/1.2 var(--tl-body-font);color:var(--tl-mute);margin-top:5px}
#apDetailModal .ws-ct-acts{flex:0 0 auto;display:flex;gap:6px}
#apDetailModal .ws-ct-btn{border:1px solid var(--tl-hair);background:transparent;border-radius:8px;padding:6px 10px;font:600 11.5px/1 var(--tl-body-font);color:var(--tl-grey);cursor:pointer;transition:.13s}
#apDetailModal .ws-ct-btn:hover{border-color:var(--tl-blue);color:var(--tl-blue)}
#apDetailModal .ws-ct-remove:hover{border-color:#c0392b;color:#c0392b}
#apDetailModal .ws-ct-form{border:1px solid var(--tl-hair);border-radius:12px;padding:14px 16px;background:rgba(17,18,22,.015)}
#apDetailModal .ws-ct-form-t{font:600 12.5px/1 var(--tl-body-font);color:var(--tl-ink);margin-bottom:11px}
#apDetailModal .ws-ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
#apDetailModal .ws-ct-input{width:100%;box-sizing:border-box;border:1px solid var(--tl-hair);border-radius:9px;background:#fff;padding:9px 11px;font:400 13px/1.4 var(--tl-body-font);color:var(--tl-ink);outline:none}
#apDetailModal .ws-ct-input:focus{border-color:var(--tl-blue)}
#apDetailModal .ws-ct-wide{margin-bottom:9px}
#apDetailModal .ws-ct-form-acts{display:flex;align-items:center;gap:8px;margin-top:3px}
@media (max-width:560px){#apDetailModal .ws-ct-grid{grid-template-columns:1fr}}
#apDetailModal .ws-nt-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
#apDetailModal .ws-nt-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid var(--tl-hair);border-radius:11px;padding:11px 13px;background:var(--tl-card,#fff)}
#apDetailModal .ws-nt-main{min-width:0;flex:1}
#apDetailModal .ws-nt-text{font:400 13px/1.55 var(--tl-body-font);color:var(--tl-ink);white-space:pre-wrap;word-break:break-word}
#apDetailModal .ws-nt-when{font:400 11px/1.2 var(--tl-body-font);color:var(--tl-mute);margin-top:5px}
#apDetailModal .ws-nt-acts{flex:0 0 auto;display:flex;gap:6px}
#apDetailModal .ws-nt-ta{resize:vertical;min-height:64px;line-height:1.5;margin-bottom:9px}
#apDetailModal .ws-ci-find{margin:0 0 12px}
#apDetailModal .ws-ci-btn{display:inline-flex;align-items:center;gap:6px;color:var(--tl-blue)}
#apDetailModal .ws-ci-btn:hover{border-color:var(--tl-blue)}
#apDetailModal .ws-ci-wrap{margin:0 0 18px}
#apDetailModal .ws-ci-status{font:400 12.5px/1.5 var(--tl-body-font);color:var(--tl-grey);padding:8px 0}
#apDetailModal .ws-ci-head{font:600 11px/1 var(--tl-body-font);letter-spacing:.06em;text-transform:uppercase;color:var(--tl-grey);margin:4px 0 9px}
#apDetailModal .ws-ci-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
#apDetailModal .ws-ci-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid var(--tl-hair);border-radius:11px;padding:10px 12px;background:var(--tl-card,#fff)}
#apDetailModal .ws-ci-main{min-width:0;flex:1}
#apDetailModal .ws-ci-name{display:flex;align-items:center;gap:8px;font:500 13px/1.2 var(--tl-body-font);color:var(--tl-ink)}
#apDetailModal .ws-ci-conf{font:600 9px/1 var(--tl-body-font);letter-spacing:.04em;text-transform:uppercase;color:#177449;background:rgba(23,116,73,.1);border-radius:999px;padding:3px 7px}
#apDetailModal .ws-ci-title{font:400 12px/1.4 var(--tl-body-font);color:var(--tl-grey);margin-top:3px}
#apDetailModal .ws-ci-links{margin-top:5px}
#apDetailModal .ws-ci-added{flex:0 0 auto;font:600 11.5px/1 var(--tl-body-font);color:#177449;align-self:center}
/* Application-state rail (presentational): context lives in the rail now. */
#apDetailModal .ap-modal-hd{display:none}
#apDetailModal .ws-rail-head{display:flex;flex-direction:column;gap:10px;padding:2px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--tl-hair)}
#apDetailModal .ws-rail-back{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:none;border:0;padding:4px 2px;font:600 11.5px/1 var(--tl-body-font);color:var(--tl-grey);cursor:pointer}
#apDetailModal .ws-rail-back:hover{color:var(--tl-blue)}
#apDetailModal .ws-rail-id{display:flex;align-items:center;gap:10px;min-width:0}
#apDetailModal .ws-rail-badge{flex:0 0 36px;width:36px;height:36px;border-radius:9px;background:var(--tl-ink);color:#fff;display:grid;place-items:center;font:600 14px/1 var(--tl-display);letter-spacing:.01em}
#apDetailModal .ws-rail-idtext{min-width:0;display:flex;flex-direction:column}
#apDetailModal .ws-rail-co{font:500 14px/1.2 var(--tl-display);letter-spacing:-0.01em;color:var(--tl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#apDetailModal .ws-rail-role{font:400 12px/1.3 var(--tl-body-font);color:var(--tl-grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#apDetailModal .ws-rail-status{align-self:flex-start;font:600 10.5px/1 var(--tl-body-font);letter-spacing:.03em;border-radius:999px;padding:5px 10px}
#apDetailModal .ws-rail-prog{margin-top:2px}
#apDetailModal .ws-rail-prog-top{display:flex;justify-content:space-between;margin-bottom:6px}
#apDetailModal .ws-rail-prog-pct{font:600 11px/1 var(--tl-body-font);color:var(--tl-grey)}
#apDetailModal .ws-rail-prog-track{height:5px;border-radius:999px;background:var(--tl-hair);overflow:hidden}
#apDetailModal .ws-rail-prog-fill{display:block;height:100%;background:var(--tl-blue);border-radius:999px;transition:width .4s ease}
#apDetailModal .ws-rail-grp{font:600 10px/1 var(--tl-body-font);letter-spacing:.08em;text-transform:uppercase;color:var(--tl-mute);margin:14px 8px 7px}
#apDetailModal .ws-rail-switch{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:7px 10px;cursor:pointer;transition:.13s}
#apDetailModal .ws-rail-switch:hover{background:rgba(17,18,22,0.04)}
#apDetailModal .ws-rail-sbadge{flex:0 0 26px;width:26px;height:26px;border-radius:7px;background:rgba(17,18,22,.08);color:var(--tl-ink);display:grid;place-items:center;font:600 11px/1 var(--tl-display)}
#apDetailModal .ws-rail-smain{min-width:0;flex:1;display:flex;flex-direction:column}
#apDetailModal .ws-rail-sco{font:500 12.5px/1.2 var(--tl-body-font);color:var(--tl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#apDetailModal .ws-rail-srole{font:400 11px/1.2 var(--tl-body-font);color:var(--tl-grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#apDetailModal .ws-rail-switch i{color:var(--tl-mute);font-size:14px;flex:0 0 auto}
#apDetailModal .ws-rail-tip{margin:14px 6px 6px;border:1px solid var(--tl-hair);border-radius:11px;background:var(--tl-tint,#eef1ff);padding:12px 13px}
#apDetailModal .ws-rail-tip-k{display:inline-flex;align-items:center;gap:5px;font:600 10px/1 var(--tl-body-font);letter-spacing:.08em;text-transform:uppercase;color:var(--tl-blue);margin-bottom:7px}
#apDetailModal .ws-rail-tip-t{font:500 13px/1.25 var(--tl-display);color:var(--tl-ink);margin-bottom:4px}
#apDetailModal .ws-rail-tip-s{font:400 11.5px/1.45 var(--tl-body-font);color:var(--tl-grey);margin-bottom:10px}
#apDetailModal .ws-rail-tip-go{border:0;background:var(--tl-blue);color:#fff;border-radius:8px;padding:7px 12px;font:600 11.5px/1 var(--tl-body-font);cursor:pointer}
#apDetailModal .ws-rail-tip-go:hover{background:#1f3dd9}

@media (max-width:720px){#apDetailModal .ws-body{flex-direction:column}#apDetailModal .ws-nav{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--tl-hair)}#apDetailModal .ws-nav-foot{margin-top:0}}
#jjPage_apps .ap-btn-ghost { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); color: var(--tl-grey); font-family: var(--tl-body-font); }
#jjPage_apps .ap-btn-ghost:hover { color: var(--tl-ink); border-color: var(--tl-ink); }
#jjPage_apps .ap-btn-primary { background: var(--tl-blue); border-radius: var(--tl-radius-sm); font: 500 13px/1 var(--tl-display); }
#jjPage_apps .ap-btn-primary:hover { background: #1f3dd9; filter: none; }
/* Quiet delete action (detail view only, never a row/table affordance):
   the Applications page's own --apx-rejected-ink (#A24A3B), not the
   site-wide --tl-red, so it reads as part of this page's own ink family. */
#jjPage_apps .ap-btn-danger-ghost { color: var(--apx-rejected-ink, #A24A3B); font-family: var(--tl-body-font); }
#jjPage_apps .ap-btn-danger-ghost:hover { background: transparent; border-color: var(--apx-rejected-ink, #A24A3B); }
#jjPage_apps .ap-detail-score-result { color: var(--tl-grey); font-family: var(--tl-body-font); }

/* ============================================================
   v2-sponsor: Phase C of the soft-editorial v2 migration (Sponsor Check page
   only). SPECIFICITY NOTE (extends the cascade lesson): the sc-* base rules
   are id-scoped (#jjPage_sponsor .x, 1,1,0) AND sit later in source than this
   block, so equal-specificity overrides lose ties on source order; every
   selector here is #jjPage_sponsor.tl-theme (1,2,0) which wins regardless of
   order, no !important. White cards, hairline borders, --tl-radius, no
   shadows or gradients; the verdict is the one highlighted moment (blue tint
   positive grammar); no green, purple or amber. UK English, no em dashes.
   ============================================================ */

/* Cards: flat white, hairline, no frosted glass. */
#jjPage_sponsor.tl-theme .sc-card {
  background: var(--tl-card); border: 1px solid var(--tl-hair);
  border-radius: var(--tl-radius); box-shadow: none; padding: 22px;
}
#jjPage_sponsor.tl-theme .sc-card-head h3 { font: 500 16px/1.3 var(--ap-display); letter-spacing: -0.02em; color: var(--tl-ink); }
#jjPage_sponsor.tl-theme .sc-card-sub { font: 400 12.5px/1.55 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_sponsor.tl-theme .sc-card-icon,
#jjPage_sponsor.tl-theme .sc-icon-shield, #jjPage_sponsor.tl-theme .sc-icon-calc,
#jjPage_sponsor.tl-theme .sc-icon-building, #jjPage_sponsor.tl-theme .sc-icon-search,
#jjPage_sponsor.tl-theme .sc-icon-doc {
  flex-basis: 38px; width: 38px; height: 38px; border-radius: var(--tl-radius-sm);
  background: var(--tl-tint); border: 0; color: var(--tl-blue); box-shadow: none;
}

/* Callouts: quiet hairline rows, not tinted glass (the verdict alone earns
   the highlight on this page). Amber warn palette removed. */
#jjPage_sponsor.tl-theme .sc-callout,
#jjPage_sponsor.tl-theme .sc-callout-warn,
#jjPage_sponsor.tl-theme .sc-callout-info,
#jjPage_sponsor.tl-theme .sc-callout-flat {
  background: transparent; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm);
}
#jjPage_sponsor.tl-theme .sc-callout-icon,
#jjPage_sponsor.tl-theme .sc-callout-info .sc-callout-icon,
#jjPage_sponsor.tl-theme .sc-callout-flat .sc-callout-icon { color: var(--tl-mute); }
#jjPage_sponsor.tl-theme .sc-callout-title,
#jjPage_sponsor.tl-theme .sc-callout-title-info { font: 500 12.5px/1.4 var(--tl-display); letter-spacing: -0.01em; color: var(--tl-ink); }
#jjPage_sponsor.tl-theme .sc-callout-body,
#jjPage_sponsor.tl-theme .sc-callout-info .sc-callout-body,
#jjPage_sponsor.tl-theme .sc-callout-flat .sc-callout-body { font: 400 12.5px/1.55 var(--tl-body-font); color: var(--tl-grey); }

/* Check input + CTA: the hero moment. */
#jjPage_sponsor.tl-theme .sc-field-label { font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tl-mute); }
#jjPage_sponsor.tl-theme .sc-input {
  height: 46px; background: #fff; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm);
  color: var(--tl-ink); font: 400 14px/1.3 var(--tl-body-font);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
#jjPage_sponsor.tl-theme .sc-input::placeholder { color: var(--tl-mute); font-weight: 400; }
#jjPage_sponsor.tl-theme .sc-input:focus { border-color: var(--tl-blue); box-shadow: none; }
#jjPage_sponsor.tl-theme .sc-btn-primary {
  height: 46px; background: var(--tl-blue); border-radius: var(--tl-radius-sm);
  font: 500 14px/1 var(--tl-display); letter-spacing: 0.01em; box-shadow: none;
}
#jjPage_sponsor.tl-theme .sc-btn-primary:hover { background: #1f3dd9; transform: none; box-shadow: none; filter: none; }
#jjPage_sponsor.tl-theme .sc-toggle-label { color: var(--tl-grey); font: 400 12.5px/1.45 var(--tl-body-font); }
#jjPage_sponsor.tl-theme .sc-toggle-row input[type="checkbox"] { accent-color: var(--tl-blue); }

/* Recently checked: micro-label over the (inline-styled, legible) chips. */
#jjPage_sponsor.tl-theme #jhSponsorRecent { margin-top: 14px; }
#jjPage_sponsor.tl-theme #jhSponsorRecent > div:first-child { font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tl-mute); margin-bottom: 8px; }
#jjPage_sponsor.tl-theme #jhSponsorRecentList { display: flex; flex-wrap: wrap; gap: 6px; }

/* THE VERDICT. The renderer emits one .jh-card wrapper whose state is carried
   by the badge child: licensed (jh-badge-green) = blue tint card + blue
   border + check; not confirmed / B-rated (jh-badge-amber) = white card, ink
   verdict word; failed salary / non-sponsor (jh-badge-red) = white card, red
   word. :has() keys the card off the badge; logic and thresholds untouched. */
#jjPage_sponsor.tl-theme #jhSponsorResult { margin-top: 16px; }
#jjPage_sponsor.tl-theme #jhSponsorResult .jh-card {
  background: var(--tl-card); border: 1px solid var(--tl-hair);
  border-radius: var(--tl-radius); box-shadow: none; padding: 18px;
}
#jjPage_sponsor.tl-theme #jhSponsorResult .jh-card:has(.jh-badge-green) {
  background: var(--tl-tint); border-color: var(--tl-tint-border);
}
#jjPage_sponsor.tl-theme .sc-result-name { font: 500 17px/1.3 var(--tl-display); letter-spacing: -0.02em; color: var(--tl-ink); margin: 0 0 4px; }
#jjPage_sponsor.tl-theme .sc-result-strong { color: var(--tl-ink); }
#jjPage_sponsor.tl-theme .sc-salary-tip { font: 400 11.5px/1.5 var(--tl-body-font); color: var(--tl-grey); margin-top: 6px; }

/* Badges: verdict words. Licensed keeps the blue tint pill with a check;
   amber-class (B-rated / not confirmed) becomes an ink word; red stays a red
   word. Long salary sentences keep body type; the sponsor verdict itself is
   uppercase Space Grotesk via the #jhSponsorResult scope below. */
#jjPage_sponsor.tl-theme .jh-badge { border-radius: 999px; font: 500 12px/1.4 var(--tl-body-font); }
#jjPage_sponsor.tl-theme .jh-badge-green { background: var(--tl-success-bg); border: 1px solid var(--tl-tint-border); color: var(--tl-blue); }
#jjPage_sponsor.tl-theme .jh-badge-green::before { content: "\2713"; font-weight: 700; }
#jjPage_sponsor.tl-theme .jh-badge-amber { background: transparent; border: 1px solid var(--tl-hair); color: var(--tl-ink); }
#jjPage_sponsor.tl-theme .jh-badge-red { background: transparent; border: 1px solid var(--tl-hair); color: var(--tl-red); }
#jjPage_sponsor.tl-theme #jhSponsorResult .jh-badge { font-family: var(--tl-display); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }

/* ═══ Pass 7a (Apollo cream): Sponsor Check. Alias the page-scoped CHROME --tl-* ->
   --ap-* on #jjPage_sponsor (scoped, no leak). The visa VERDICT TRIAD is the page's
   entire meaning: --tl-red/--tl-success/--tl-success-bg are LEFT un-aliased, and the
   four verdict rules are PINNED to their exact pre-cream values below so the triad is
   byte-identical regardless of the chrome alias. The amber .sc-callout-warn is a
   hardcoded literal (untouched). --tl-blue -> --ap-accent keeps interactive. ═══ */
#jjPage_sponsor{
  --tl-card:var(--ap-card); --tl-hair:var(--ap-hair);
  --tl-ink:var(--ap-ink); --tl-grey:var(--ap-ink-2); --tl-mute:var(--ap-ink-3);
  --tl-blue:var(--ap-accent); --tl-tint:var(--ap-accent-tint); --tl-tint-border:var(--ap-accent);
  --tl-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --tl-bg:var(--ap-bg);
}
/* VERDICT TRIAD: pinned byte-identical (licensed=blue, caution=ink/amber, not-licensed=red): */
#jjPage_sponsor.tl-theme #jhSponsorResult .jh-card:has(.jh-badge-green){ background:#F3F6FF; border-color:#2448FF; }
#jjPage_sponsor.tl-theme .jh-badge-green{ background:#EFF4FD; border-color:#2448FF; color:#2448FF; }
#jjPage_sponsor.tl-theme .jh-badge-amber{ border-color:#E2E2DC; color:#101010; }
#jjPage_sponsor.tl-theme .jh-badge-red{ border-color:#E2E2DC; color:#C9594A; }
/* Fraunces for the page heading + result name (display); labels stay Plus Jakarta. */
#jjPage_sponsor.tl-theme .jj-page-title,
#jjPage_sponsor.tl-theme .sc-result-name{ font-family:var(--ap-display); letter-spacing:-0.02em; }

/* Sector pills: v2 chip grammar (selected state is an inline JS style using
   the legacy accent; logic untouched, left as-is). */
#jjPage_sponsor.tl-theme .sc-sector-btn {
  background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: 999px;
  color: var(--tl-grey); font: 400 13px/1 var(--tl-body-font); box-shadow: none;
}
#jjPage_sponsor.tl-theme .sc-sector-btn:hover { background: var(--tl-card); border-color: var(--tl-blue); color: var(--tl-blue); transform: none; }

/* Download tile + register meta. */
#jjPage_sponsor.tl-theme .sc-download-btn {
  background: transparent; border: 1px dashed var(--tl-hair); border-radius: var(--tl-radius-sm);
  color: var(--tl-blue); -webkit-backdrop-filter: none; backdrop-filter: none;
}
#jjPage_sponsor.tl-theme .sc-download-btn:hover { background: transparent; border-color: var(--tl-blue); transform: none; }
#jjPage_sponsor.tl-theme .sc-download-title { font: 500 13px/1.2 var(--tl-display); color: var(--tl-blue); }
#jjPage_sponsor.tl-theme .sc-download-sub { font: 400 12px/1.3 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_sponsor.tl-theme .sc-last-updated, #jjPage_sponsor.tl-theme .sc-register-fresh { color: var(--tl-mute); }
#jjPage_sponsor.tl-theme .sc-refresh-btn { font: 500 10.5px/1.3 var(--tl-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--tl-blue); text-decoration: none; }
#jjPage_sponsor.tl-theme .sc-refresh-btn:hover { color: #1f3dd9; opacity: 1; }

/* About card check-list. */
#jjPage_sponsor.tl-theme .sc-check-list li { font: 400 13.5px/1.4 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_sponsor.tl-theme .sc-check-list li::before { background: var(--tl-success-bg); color: var(--tl-blue); border-radius: 6px; font-weight: 600; }

/* ============================================================
   v2-contacts: Phase D of the soft-editorial v2 migration (Find Contacts).
   The fce/fcr/fcc system is fully tokenised on .fce (--fce-*), so the heart
   of this migration is a token re-point; structural overrides then flatten
   radii, shadows and lifts, and swap the Fraunces display face for Space
   Grotesk. The draft composer (#fcComposer) is appended to document.body
   (outside .tl-theme), so this block uses LITERAL token values (the trial
   banner precedent) and scopes every selector #jjPage_find.tl-theme or
   #fcComposer.fce to win source-order ties per the recorded lesson.
   Green/amber fce tokens are re-pointed to the v2 conventions (green -> blue
   tint; amber -> ink word on a quiet neutral chip). UK English, no em dashes.
   ============================================================ */

#jjPage_find.tl-theme .fce, #fcComposer.fce {
  --fce-wedg: #2448FF; --fce-wedg-d: #1f3dd9; --fce-wedg-t: #F3F6FF;
  --fce-ink: #101010; --fce-ink-2: #86867E; --fce-ink-3: #A4A49C;
  --fce-bg: #FBFBF9; --fce-surface: #FFFFFF; --fce-surface-2: #FBFBF9;
  --fce-line: #E2E2DC; --fce-line-2: #E2E2DC;
  --fce-green: #2448FF; --fce-green-t: #EFF4FD;
  --fce-amber: #101010; --fce-amber-t: #F0F0EB;
}

/* Display face: Space Grotesk replaces Fraunces on this surface. */
#jjPage_find.tl-theme .fce-topbar-title { font: 500 20px/1.2 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.02em; }
#jjPage_find.tl-theme .fce-hero-h { font: 700 32px/1.1 var(--ap-display); letter-spacing: -0.02em; color: #1A1614; margin: 0; }
#jjPage_find.tl-theme .fce-sec-label { font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-weight: 500; }
#jjPage_find.tl-theme .fce-av-co, #jjPage_find.tl-theme .fcr-av, #jjPage_find.tl-theme .fcr-d-av { font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-weight: 500; }
#jjPage_find.tl-theme .fcr-d-name, #jjPage_find.tl-theme .fcr-why-target-val,
#jjPage_find.tl-theme .fcr-state h3 { font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-weight: 500; letter-spacing: -0.02em; }
#fcComposer.fce .fcc-recip b { font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-weight: 500; }

/* Topbar segment: v2 chip grammar for the active tab. */
#jjPage_find.tl-theme .fce-seg-btn.active { background: #F3F6FF; color: #2448FF; box-shadow: none; }

/* Entry cards (saved applications): kanban card grammar, no lift. */
#jjPage_find.tl-theme .fce-card { border-radius: 10px; }
#jjPage_find.tl-theme .fce-card:hover { border-color: #2448FF; box-shadow: none; transform: none; }
#jjPage_find.tl-theme .fce-card--lift { border-color: #2448FF; box-shadow: 0 0 0 1px #2448FF; }
#jjPage_find.tl-theme .fce-card-role { font-weight: 500; font-size: 13.5px; }
#jjPage_find.tl-theme .fce-card-co { font-size: 12px; }
#jjPage_find.tl-theme .fce-av-co { border-radius: 8px; }
#jjPage_find.tl-theme .fce-pill { font-weight: 500; }
#jjPage_find.tl-theme .fce-meta-amber { font-weight: 500; }
#jjPage_find.tl-theme .fce-find { font-weight: 500; font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; }
#jjPage_find.tl-theme .fce-fallback, #jjPage_find.tl-theme .fce-jd { border-radius: 10px; }
#jjPage_find.tl-theme .fce-fb-inp:focus, #jjPage_find.tl-theme .fce-jd-ta:focus { border-color: #2448FF; }
#jjPage_find.tl-theme .fce-fb-btn, #jjPage_find.tl-theme .fce-jd-btn { border-radius: 8px; font-weight: 500; font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; }
#jjPage_find.tl-theme .fce-jd-msg { font-weight: 400; }
#jjPage_find.tl-theme .fce-empty-ico, #jjPage_find.tl-theme .fcr-state-ico { border-radius: 10px; }
#jjPage_find.tl-theme .fce-nudge-btn { border-radius: 8px; font-weight: 400; }
#jjPage_find.tl-theme .fce-nudge-btn:hover { border-color: #2448FF; color: #2448FF; }

/* ═══ Pass 4 (Apollo cream): Find Contacts runs on --fce-* tokens (active values in the
   #jjPage_find.tl-theme .fce override above). Alias the CHROME --fce-* -> --ap-* here
   (later source wins; scoped to this surface, no leak). LEFT UNTOUCHED: --fce-green/-t
   and --fce-amber/-t, the categorical confidence coding (currently blue/ink in v2) stays
   byte-identical. --fce-wedg -> --ap-accent keeps interactive blue; hardcoded #2448FF
   states are literals. .fcr-name-lock rides --fce-ink-3 -> --ap-ink-3 (gated-name dots
   re-map to the cream muted; the unlock/resolve logic is JS and untouched). ═══ */
#jjPage_find.tl-theme .fce, #fcComposer.fce {
  --fce-wedg: var(--ap-accent); --fce-wedg-d: var(--ap-accent-hover); --fce-wedg-t: var(--ap-accent-tint);
  --fce-ink: var(--ap-ink); --fce-ink-2: var(--ap-ink-2); --fce-ink-3: var(--ap-ink-3);
  --fce-bg: var(--ap-bg); --fce-surface: var(--ap-card); --fce-surface-2: var(--ap-bg-2);
  --fce-line: var(--ap-hair); --fce-line-2: var(--ap-hair);
}
/* Apollo 2-font: Fraunces for display headings + the detail-panel contact name; retire the
   Space Grotesk display face for labels/UI -> Plus Jakarta. Row names (.fcr-row-name) are
   already the body font (data, not display) and stay Plus Jakarta. */
#jjPage_find.tl-theme .fce-hero-h,
#jjPage_find.tl-theme .fce-topbar-title,
#jjPage_find.tl-theme .fcr-d-name { font-family: var(--ap-display); letter-spacing: -0.02em; }
#jjPage_find.tl-theme .fce-sec-label,
#jjPage_find.tl-theme .fce-av-co, #jjPage_find.tl-theme .fcr-av, #jjPage_find.tl-theme .fcr-d-av,
#jjPage_find.tl-theme .fce-find, #jjPage_find.tl-theme .fce-fb-btn, #jjPage_find.tl-theme .fce-jd-btn,
#jjPage_find.tl-theme .fcr-why-target-val, #jjPage_find.tl-theme .fcr-state h3,
#fcComposer.fce .fcc-recip b { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

/* Results: rows, tiers, detail. Flat surfaces, blue selected ring. */
#jjPage_find.tl-theme .fcr-back { border-radius: 8px; font-weight: 400; }
#jjPage_find.tl-theme .fcr-back:hover { box-shadow: none; }
#jjPage_find.tl-theme .fcr-why { border-radius: 10px; box-shadow: none; }
#jjPage_find.tl-theme .fcr-why-ico { border-radius: 8px; }
#jjPage_find.tl-theme .fcr-why-sum { font-weight: 500; }
#jjPage_find.tl-theme .fcr-row { border-radius: 10px; box-shadow: none; }
#jjPage_find.tl-theme .fcr-row:hover { transform: none; border-color: #2448FF; box-shadow: none; }
#jjPage_find.tl-theme .fcr-row.active { background: #F3F6FF; box-shadow: 0 0 0 1px #2448FF; }
#jjPage_find.tl-theme .fcr-row-name { font-weight: 500; font-size: 13.5px; }
#jjPage_find.tl-theme .fcr-row-title { font-size: 12px; }
#jjPage_find.tl-theme .fcr-top { font-weight: 500; font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; }
#jjPage_find.tl-theme .fcr-tier { font-weight: 500; font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.03em; }
#jjPage_find.tl-theme .fcr-detail { border-radius: 10px; box-shadow: none; }
#jjPage_find.tl-theme .fcr-d-label { font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-weight: 500; }
#jjPage_find.tl-theme .fcr-d-why { font-weight: 400; }
#jjPage_find.tl-theme .fcr-email-val { font-weight: 500; color: #2448FF; }
#jjPage_find.tl-theme .fcr-copy { border-radius: 8px; font-weight: 500; font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
#jjPage_find.tl-theme .fcr-reveal-btn, #jjPage_find.tl-theme .fcr-act-main {
  border-radius: 8px; font-weight: 500; font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; box-shadow: none;
}
#jjPage_find.tl-theme .fcr-reveal-btn:hover, #jjPage_find.tl-theme .fcr-act-main:hover { transform: none; box-shadow: none; }
#jjPage_find.tl-theme .fcr-act-sec { border-radius: 8px; font-weight: 400; }
#jjPage_find.tl-theme .fcr-reach-li { font-weight: 500; font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; }

/* Draft composer modal (page-exclusive, but mounted on document.body). */
#fcComposer.fce .fcc-modal { border-radius: 16px; border: 1px solid #E2E2DC; box-shadow: none; }
#fcComposer.fce .fcc-close { border-radius: 8px; }
#fcComposer.fce .fcc-seg-btn.active { box-shadow: none; }
#fcComposer.fce .fcc-subject, #fcComposer.fce .fcc-bodyhl, #fcComposer.fce .fcc-bodyta { border-radius: 8px; }
#fcComposer.fce .fcc-subject { font-weight: 500; }
#fcComposer.fce .fcc-gr { box-shadow: inset 0 -2px 0 rgba(22, 51, 255, 0.3); }
#fcComposer.fce .fcc-btn, #fcComposer.fce .fcr-act-main, #fcComposer.fce .fcr-act-sec {
  border-radius: 8px; font-weight: 500; font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; box-shadow: none;
}
#fcComposer.fce .fcr-act-main:hover { transform: none; box-shadow: none; }

/* ============================================================
   v2-settings: Phase D2 of the soft-editorial v2 migration (Settings page
   only). The st-* base is id-scoped (1,1,0) and later in source, so every
   selector here is #jjPage_settings.tl-theme (1,2,0) per the lesson. The page
   is already a two-column grid of cards, so the card structure is kept (the
   lower-restructuring option). The plan/billing, API key, GDPR export and
   delete-account controls live in #settingsPanel (the global app-shell
   drawer), NOT in this page: shared chrome, deferred to Phase E. No purple,
   green or amber; success/highlight = blue tint. UK English, no em dashes.
   ============================================================ */

/* ═══ Pass 6 (Apollo cream): Settings. Alias the page-scoped --tl-* -> --ap-* on
   #jjPage_settings (scoped, no leak). The danger zone (delete account / GDPR export)
   uses inline var(--danger), NOT --tl-*, so it stays byte-identical (and --tl-red is
   unused on this page). --tl-blue -> --ap-accent keeps interactive; --tl-display ->
   Plus Jakarta for labels, Fraunces on section titles below. Visa fields are chrome. ═══ */
#jjPage_settings{
  --tl-card:var(--ap-card); --tl-hair:var(--ap-hair);
  --tl-ink:var(--ap-ink); --tl-grey:var(--ap-ink-2); --tl-mute:var(--ap-ink-3);
  --tl-blue:var(--ap-accent); --tl-tint:var(--ap-accent-tint);
  --tl-display:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--ap-bg);
  /* Reference-design rebuild (7-screen Settings, Tranche A/B): this page
     gets its OWN precise tokens rather than inheriting Applications' ink-
     and-mono values, since the two pages are deliberately different design
     systems that happen to share the tl-theme card/input plumbing. Overrides
     --tl-blue/--tl-hair/--tl-radius* specifically (--tl-ink/--tl-grey/
     --tl-card etc stay shared, they're not part of the reference's specific
     asks). Tailwind's blue-50/200/600/700 scale for exact harmony with the
     specified #2563EB accent. */
  --tl-blue:#2563EB; --tl-blue-hover:#1D4ED8; --tl-tint:#EFF6FF; --tl-tint-border:#BFDBFE;
  --tl-hair:#E2E8F0;
  --tl-radius:12px; --tl-radius-sm:8px;
}

/* Header rhythm + cards. */
#jjPage_settings.tl-theme .jj-page-head { margin-bottom: 24px; }
#jjPage_settings.tl-theme .st-card {
  background: var(--tl-card); border: 1px solid var(--tl-hair);
  border-radius: var(--tl-radius); box-shadow: none;
}
#jjPage_settings.tl-theme .st-card-title { font: 500 16px/1.3 var(--ap-display); letter-spacing: -0.02em; color: var(--tl-ink); }
#jjPage_settings.tl-theme .st-card-sub { font: 400 12.5px/1.55 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_settings.tl-theme .st-card-title-inline { font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.07em; color: var(--tl-mute); }
/* Fraunces for section/card titles + page heading (display type); the 11px uppercase
   eyebrows (.st-card-title-inline) and form labels stay Plus Jakarta. */
#jjPage_settings.tl-theme .st-card-title,
#jjPage_settings.tl-theme .jj-page-title { font-family: var(--ap-display); letter-spacing: -0.02em; }
#jjPage_settings.tl-theme .st-card-icon,
#jjPage_settings.tl-theme .st-icon-shield, #jjPage_settings.tl-theme .st-icon-bolt,
#jjPage_settings.tl-theme .st-icon-spark {
  background: var(--tl-tint); color: var(--tl-blue); border-radius: var(--tl-radius-sm);
}

/* Form rows. */
#jjPage_settings.tl-theme .st-label { font: 400 12.5px/1.4 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_settings.tl-theme .st-label-hint { font-size: 11.5px; color: var(--tl-mute); }
#jjPage_settings.tl-theme .st-input {
  background: #fff; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm);
  color: var(--tl-ink); font: 400 13.5px/1.3 var(--tl-body-font);
}
#jjPage_settings.tl-theme .st-input:focus { border-color: var(--tl-blue); }
#jjPage_settings.tl-theme .st-input::placeholder { color: var(--tl-mute); }
/* Account / Redeem card (moved onto the JH Settings page). Cream on the --ap-*
   layer; align-items:stretch sizes the button to the input height. */
#jjPage_settings .st-redeem-row { display: flex; gap: 8px; align-items: stretch; margin-top: 2px; }
#jjPage_settings .st-redeem-input { flex: 1; min-width: 0; }
#jjPage_settings .st-redeem-btn { padding: 0 20px; background: transparent; border: 1px solid var(--ap-accent); border-radius: var(--ap-radius); color: var(--ap-accent); font: 600 13px/1 'Plus Jakarta Sans', system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
#jjPage_settings .st-redeem-btn:hover { background: var(--ap-accent); color: #fff; }
#jjPage_settings .st-redeem-btn:disabled { opacity: .55; cursor: default; }
#jjPage_settings.tl-theme .st-input-icon { color: var(--tl-mute); }

/* Sector pills: the v2 chip grammar for the class path (the live renderer
   uses inline styles keyed on selection; logic untouched, flagged). */
#jjPage_settings.tl-theme .st-sector-btn { background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: 999px; color: var(--tl-grey); font-weight: 400; }
#jjPage_settings.tl-theme .st-sector-btn:hover { background: var(--tl-card); border-color: var(--tl-blue); color: var(--tl-blue); }
#jjPage_settings.tl-theme .st-sector-btn.active,
#jjPage_settings.tl-theme #jjSettingSectors .active { background: var(--tl-tint); border-color: var(--tl-tint-border); color: var(--tl-blue); }

/* Buttons: filled blue primary, hairline secondary. */
#jjPage_settings.tl-theme .st-save-btn {
  background: var(--tl-blue); border-radius: var(--tl-radius-sm);
  font: 500 13.5px/1 var(--tl-display); letter-spacing: 0.01em;
}
#jjPage_settings.tl-theme .st-save-btn:hover { background: var(--tl-blue-hover); filter: none; }
#jjPage_settings.tl-theme .jj-btn {
  background: var(--tl-card); border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm);
  color: var(--tl-grey); font-family: var(--tl-body-font); box-shadow: none;
}
#jjPage_settings.tl-theme .jj-btn:hover { border-color: var(--tl-ink); color: var(--tl-ink); background: var(--tl-card); }

/* Tips + help: quiet hairline rows, mono blue icon tiles. */
#jjPage_settings.tl-theme .st-tip-item { background: transparent; border: 1px solid var(--tl-hair); border-radius: var(--tl-radius-sm); }
#jjPage_settings.tl-theme .st-tip-icon,
#jjPage_settings.tl-theme .st-tip-icon-purple, #jjPage_settings.tl-theme .st-tip-icon-blue,
#jjPage_settings.tl-theme .st-tip-icon-slate { background: var(--tl-tint); color: var(--tl-blue); }
#jjPage_settings.tl-theme .st-tip-title { font: 500 13.5px/1.3 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_settings.tl-theme .st-tip-body { font: 400 12.5px/1.5 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_settings.tl-theme .st-help-icon { background: var(--tl-tint); color: var(--tl-blue); }
#jjPage_settings.tl-theme .st-help-title { font: 500 13.5px/1.3 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_settings.tl-theme .st-help-body { font: 400 12.5px/1.45 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_settings.tl-theme .st-help-btn {
  background: transparent; border: 0; padding: 0; box-shadow: none;
  font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--tl-blue);
}
#jjPage_settings.tl-theme .st-help-btn:hover { background: transparent; color: #1f3dd9; }

/* Profile strength: metric number, blue bar (was green gradient), blue dots. */
#jjPage_settings.tl-theme .st-strength-score { font: 500 36px/1 var(--tl-display); letter-spacing: -0.03em; color: var(--tl-ink); }
#jjPage_settings.tl-theme .st-strength-bar-wrap { background: var(--tl-hair); }
#jjPage_settings.tl-theme .st-strength-bar-fill { background: var(--tl-blue); }
#jjPage_settings.tl-theme .st-strength-copy { color: var(--tl-grey); }
#jjPage_settings.tl-theme .st-strength-copy strong { color: var(--tl-ink); font-weight: 500; }
#jjPage_settings.tl-theme .st-strength-list li { color: var(--tl-grey); }
#jjPage_settings.tl-theme .st-strength-list li.is-filled { color: var(--tl-ink); }
#jjPage_settings.tl-theme .st-strength-dot { border-color: var(--tl-hair); }
#jjPage_settings.tl-theme .st-strength-list li.is-filled .st-strength-dot { background: var(--tl-blue); border-color: var(--tl-blue); }
#jjPage_settings.tl-theme .st-strength-cta {
  background: var(--tl-success-bg); border: 1px solid var(--tl-success-bg);
  border-radius: var(--tl-radius-sm); color: var(--tl-blue); font-weight: 500;
}

/* Usage rows: mono blue tiles (kills purple/green/amber/rose), quiet text. */
#jjPage_settings.tl-theme .st-usage-icon,
#jjPage_settings.tl-theme .st-usage-icon-blue, #jjPage_settings.tl-theme .st-usage-icon-purple,
#jjPage_settings.tl-theme .st-usage-icon-green, #jjPage_settings.tl-theme .st-usage-icon-amber,
#jjPage_settings.tl-theme .st-usage-icon-rose { background: var(--tl-tint); color: var(--tl-blue); }
#jjPage_settings.tl-theme .st-usage-title { font: 500 13px/1.3 var(--tl-body-font); color: var(--tl-ink); }
#jjPage_settings.tl-theme .st-usage-body { font: 400 12px/1.45 var(--tl-body-font); color: var(--tl-grey); }
#jjPage_settings.tl-theme .st-usage-chev { color: var(--tl-mute); }
#jjPage_settings.tl-theme .st-usage-learn {
  font: 500 11px/1.3 var(--tl-display); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--tl-blue); text-decoration: none;
}
#jjPage_settings.tl-theme .st-usage-learn:hover { color: #1f3dd9; }

/* ============================================================
   v2-chrome: Phase E, shared chrome. Sidebar, trial banner, the global
   settings drawer (#settingsPanel, REACHABLE in job-hunter mode via the
   app-nav gear, so it is the priority surface: it holds the Stripe upgrade,
   GDPR export and delete-account entry points), and the global toast.
   Literal token values where outside .tl-theme scope (trial-banner
   precedent); !important only where fighting inline styles or the panel's
   inline onmouseover/onmouseout JS writes (CSS !important legally outranks
   element-level style, so the handlers keep firing harmlessly and NO markup,
   handler, Stripe link, GDPR call or confirmation flow is altered). The
   #deleteAccountModal typed-email confirmation flow is left entirely
   untouched. No purple, green or amber. UK English, no em dashes.
   ============================================================ */

/* --- Sidebar: v2 alignment. Active item moves from the inset bar to the v2
   selected grammar (8px-radius tint + blue), matching every other selected
   state in the app. --- */
#jjSidebar.tl-theme .jj-sidebar-section-label { font: 500 10.5px/1.3 var(--tl-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tl-mute); }
#jjSidebar.tl-theme .jj-sidebar-item { border-radius: 8px; color: var(--tl-body); }
#jjSidebar.tl-theme .jj-sidebar-item:hover { background: transparent; color: var(--tl-ink); }
#jjSidebar.tl-theme .jj-sidebar-item.active { background: var(--tl-tint); color: var(--tl-blue); box-shadow: none; font-weight: 500; }
#jjSidebar.tl-theme .jj-sidebar-profile { border-top: 1px solid var(--tl-hair); border-radius: 0; }
#jjSidebar.tl-theme .jj-avatar { background: var(--tl-tint); border: 0; color: var(--tl-blue); font-family: var(--tl-display); font-weight: 500; }
#jjSidebar.tl-theme .jj-profile-name { font: 500 13px/1.3 var(--tl-body-font); color: var(--tl-ink); }
#jjSidebar.tl-theme .jj-profile-sub { font-size: 11.5px; color: var(--tl-grey); }
#jjSidebar.tl-theme .jj-sb-upsell { background: #EFF4FD; border: 1px solid var(--tl-tint-border); border-radius: var(--tl-radius); }
#jjSidebar.tl-theme .jj-sb-upsell-title { font: 500 13px/1.3 var(--tl-display); letter-spacing: -0.01em; color: var(--tl-ink); }
#jjSidebar.tl-theme .jj-sb-upsell-sub { font-size: 12px; color: var(--tl-grey); }
#jjSidebar.tl-theme .jj-sb-upsell-btn {
  margin-top: 8px; padding: 8px 14px; background: var(--tl-blue); border: 0;
  border-radius: var(--tl-radius-sm); color: #fff;
  font: 500 12px/1 var(--tl-display); letter-spacing: 0.01em; text-transform: none;
}
#jjSidebar.tl-theme .jj-sb-upsell-btn:hover { background: #1f3dd9; color: #fff; }

/* ═══ APOLLO CREAM TOKEN LAYER (Pass 1: shell only; NEW --ap-* tokens, not --tl-*
   overrides, so un-gated pages/protected surfaces are untouched until their pass) ═══ */
body.rr-shell-on{
  --ap-bg:#faf9f6; --ap-bg-2:#f4f2ec; --ap-card:#ffffff;
  --ap-ink:#0d0d0d; --ap-ink-2:#4f4f4f; --ap-ink-3:#a49d90;
  --ap-hair:#e7e2d8; --ap-hair-strong:#dedad2;
  --ap-accent:#2448FF; --ap-accent-hover:#1f3dd9; --ap-accent-tint:#edf0ff; --ap-accent-tint-2:#dde3ff;
  --ap-cta:#e5ff00; --ap-cta-ink:#111111;
  --ap-radius:8px; --ap-radius-lg:14px;
  --ap-shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --ap-shadow-card:0 1px 2px rgba(0,0,0,.04),0 24px 48px -28px rgba(0,0,0,.18);
  --ap-display:'Fraunces','Times New Roman',serif;
}
/* ===== CREAM GLOBAL RAIL (Apollo re-theme of the former dark rail; scoped to
   #jjSidebar only, the Job Hunter sidebar; pro/.rr-sidebar untouched) ===== */
#jjSidebar.tl-theme{
  --pr-text:var(--ap-ink); --pr-text2:var(--ap-ink-2); --pr-faint:var(--ap-ink-3);
  --pr-accent:var(--ap-accent); --pr-violet:var(--ap-accent); --pr-hair:var(--ap-hair); --pr-glow:transparent;
  position:relative; isolation:isolate;
  background:var(--ap-bg);
  border-right:1px solid var(--ap-hair); color:var(--ap-ink);
}
#jjSidebar.tl-theme::before{ display:none; }
#jjSidebar.tl-theme::after{ display:none; }
#jjSidebar.tl-theme > *:not(.jj-rail-acct-menu){ position:relative; z-index:1; }
#jjSidebar.tl-theme::-webkit-scrollbar{ width:8px; }
#jjSidebar.tl-theme::-webkit-scrollbar-thumb{ background:var(--ap-hair-strong); border-radius:99px; }
#jjSidebar.tl-theme::-webkit-scrollbar-track{ background:transparent; }
/* Brand lockup */
#jjSidebar.tl-theme .jj-rail-brand{ display:flex; align-items:center; gap:10px; padding:18px 16px 10px; }
#jjSidebar.tl-theme .jj-rail-brand-tile{
  width:30px; height:30px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--ap-accent); color:#fff;
  font:700 15px/1 'Plus Jakarta Sans',sans-serif; box-shadow:0 4px 12px rgba(36,72,255,.28);
}
#jjSidebar.tl-theme .jj-rail-brand-mark{ width:18px; height:18px; object-fit:contain; display:block; }
#jjSidebar.tl-theme .jj-rail-brand-word{ font:550 17px/1 var(--ap-display); letter-spacing:-.02em; color:var(--ap-ink); }
/* Profile card + ringed avatar */
#jjSidebar.tl-theme .jj-rail-profile{
  margin:4px 12px 0; padding:12px; border-radius:12px; gap:11px;
  background:var(--ap-card); border:1px solid var(--ap-hair); box-shadow:var(--ap-shadow-sm);
}
/* Pinned to the sidebar bottom (Claude-desktop pattern): the nav list
   above scrolls internally (see #jjSidebar.tl-theme .jj-sidebar-nav)
   so this stays put regardless of nav length. */
#jjSidebar.tl-theme .jj-rail-profile-bottom{
  margin:8px 12px 12px; flex-shrink:0;
  /* .jj-sidebar-profile sets width:100% !important (styles.css "Fix sidebar
     profile overflow"), which computes against the containing block and is
     unaffected by this rule's own horizontal margin -- margin is always
     additional to a border-box width, never absorbed by it. The result was
     exactly this element overflowing the 240px rail by its own left+right
     margin (confirmed live: 239px wide starting at left:12px, right edge at
     251px, 11px past the sidebar boundary), which is what grew the
     sidebar's scrollWidth past its clientWidth. width:auto reverts to the
     normal flex-item stretch behaviour (fill available width MINUS this
     element's own margin), which is what "100%" was trying to express.
  */
  width:auto !important;
}
#jjSidebar.tl-theme{ overflow-y:hidden !important; }
/* overflow-x explicit, not left to default: per the CSS Overflow spec, a
   'visible' value on one axis computes to 'auto' whenever the other axis is
   'auto'/'scroll' (you cannot mix overflow-y:auto with overflow-x:visible).
   Without this, any descendant that's fractionally wider than the 240px
   rail (an untruncated i18n label, an icon+text combo) silently grows a
   horizontal scrollbar on the whole nav list instead of just being clipped. */
#jjSidebar.tl-theme .jj-sidebar-nav{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
/* Without this, items with overflow:hidden (the ellipsis-truncating section
   labels) get shrunk toward zero height by the flex column instead of the
   nav scrolling, once content exceeds the available space. */
#jjSidebar.tl-theme .jj-sidebar-nav > *{ flex-shrink:0; }
#jjSidebar.tl-theme .jj-avatar{
  background:var(--ap-accent-tint); color:var(--ap-accent); border:0;
  box-shadow:0 0 0 1px var(--ap-accent-tint-2);
}
#jjSidebar.tl-theme .jj-rail-prof-meta{ min-width:0; }
#jjSidebar.tl-theme .jj-profile-name{ color:var(--ap-ink); font:600 13.5px/1.25 'Plus Jakarta Sans',sans-serif; }
#jjSidebar.tl-theme .jj-profile-sub{ color:var(--ap-ink-2); font-size:11.5px; }
/* Rail account menu: card is the trigger; menu is position:fixed so the rail's
   overflow does not clip it (no transform on the rail or ancestors). */
#jjSidebar.tl-theme .jj-rail-profile{ cursor:pointer; }
#jjSidebar.tl-theme .jj-rail-profile:hover{ background:var(--ap-bg-2); }
#jjSidebar.tl-theme .jj-rail-acct-chev{ margin-left:auto; font-size:13px; line-height:1; flex-shrink:0; color:var(--ap-ink-3); transition:color .15s ease; }
#jjSidebar.tl-theme .jj-rail-profile:hover .jj-rail-acct-chev{ color:var(--ap-ink-2); }
.jj-rail-acct-menu{
  display:none; position:fixed; z-index:1200; min-width:196px; padding:6px;
  flex-direction:column; gap:1px; box-sizing:border-box;
  background:var(--ap-card,#fff); border:1px solid var(--ap-hair,#e7e2d8); border-radius:12px;
  box-shadow:0 10px 30px -8px rgba(20,22,30,.20), 0 2px 6px rgba(20,22,30,.06);
}
.jj-rail-acct-menu.open{ display:flex; }
/* Items mirror the sidebar nav item: gap/padding/radius/type + hover, so the
   menu reads as part of the same system. Icons reuse .jj-rail-ico (Phosphor),
   inheriting the nav's 17px / --ap-ink-3 -> --ap-ink hover treatment. */
.jj-rail-acct-menu .rr-dropdown-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  padding:9px 12px; border:0; border-radius:9px; background:transparent;
  font:500 13.5px/1 'Plus Jakarta Sans',sans-serif; color:var(--ap-ink-2,#4f4f4f);
  transition:background .15s ease,color .15s ease;
}
.jj-rail-acct-menu .rr-dropdown-item .jj-rail-ico{ font-size:17px; }
.jj-rail-acct-menu .rr-dropdown-item:hover{ background:var(--ap-bg-2,#f4f2ec); color:var(--ap-ink,#0d0d0d); }
#jjSidebar.tl-theme .jj-rail-acct-menu .rr-dropdown-item:hover .jj-rail-ico{ color:var(--ap-ink,#0d0d0d); }
.jj-rail-acct-menu .rr-dropdown-divider{ height:1px; background:var(--ap-hair,#e7e2d8); margin:5px 4px; }
/* Log out = destructive: the established design-system danger token #C9594A
   (same as Settings' .st-danger-btn), applied to label AND icon. */
.jj-rail-acct-menu .rr-dropdown-danger{ color:#C9594A !important; }
.jj-rail-acct-menu .rr-dropdown-danger:hover{ background:rgba(201,89,74,.10); color:#C9594A !important; }
#jjSidebar.tl-theme .jj-rail-acct-menu .rr-dropdown-danger .jj-rail-ico,
#jjSidebar.tl-theme .jj-rail-acct-menu .rr-dropdown-danger:hover .jj-rail-ico{ color:#C9594A; }
/* Momentum track */
#jjSidebar.tl-theme .jj-rail-momentum{ margin:10px 16px 2px; }
#jjSidebar.tl-theme .jj-rail-mo-track{ height:4px; border-radius:99px; background:var(--ap-hair); overflow:hidden; }
#jjSidebar.tl-theme .jj-rail-mo-fill{ height:100%; width:0%; border-radius:99px; background:var(--ap-accent); transition:width .5s ease; }
#jjSidebar.tl-theme .jj-rail-mo-label{ margin-top:6px; font-size:10.5px; letter-spacing:.04em; color:var(--ap-ink-3); }
/* Eyebrows */
#jjSidebar.tl-theme .jj-sidebar-section-label{
  font:600 10px/1.3 'Plus Jakarta Sans',sans-serif; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ap-ink-3) !important; margin:16px 8px 7px; padding:0 8px;
}
#jjSidebar.tl-theme .jj-sidebar-nav{ padding:2px 8px 16px; }
/* Items */
#jjSidebar.tl-theme .jj-sidebar-item{
  position:relative; display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  padding:9px 12px; margin:1px 0; border:0; border-radius:9px; background:transparent;
  font:500 13.5px/1 'Plus Jakarta Sans',sans-serif; color:var(--ap-ink-2); box-shadow:none;
  transition:background .15s ease,color .15s ease;
}
#jjSidebar.tl-theme .jj-rail-ico{ font-size:17px; line-height:1; flex-shrink:0; color:var(--ap-ink-3); transition:color .15s ease; }
#jjSidebar.tl-theme .jj-sidebar-item:hover{ background:var(--ap-bg-2); color:var(--ap-ink); }
#jjSidebar.tl-theme .jj-sidebar-item:hover .jj-rail-ico{ color:var(--ap-ink); }
#jjSidebar.tl-theme .jj-sidebar-item:focus-visible{ outline:2px solid var(--ap-accent); outline-offset:1px; }
/* Active (reuses the existing .active marker) */
#jjSidebar.tl-theme .jj-sidebar-item.active{
  background:var(--ap-accent-tint);
  box-shadow:inset 0 0 0 1px var(--ap-accent-tint-2); color:var(--ap-accent); font-weight:600;
}
#jjSidebar.tl-theme .jj-sidebar-item.active .jj-rail-ico{ color:var(--ap-accent); }
#jjSidebar.tl-theme .jj-sidebar-item.active::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--ap-accent);
}
@keyframes jjRailPulse{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ #jjSidebar.tl-theme .jj-sidebar-item.active::before{ animation:none; } }
/* AI badge */
#jjSidebar.tl-theme .jj-sb-badge{
  margin-left:auto; background:var(--ap-accent-tint-2); color:var(--ap-accent); border:0;
  font:700 9px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.06em; padding:3px 6px; border-radius:5px;
}
/* Upsell card */
#jjSidebar.tl-theme .jj-sb-upsell{
  margin:14px 12px 16px; padding:14px; border-radius:14px; text-align:left; color:var(--ap-ink); border:1px solid var(--ap-hair);
  background:var(--ap-card);
  box-shadow:var(--ap-shadow-sm);
}
#jjSidebar.tl-theme .jj-sb-upsell-ico{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px;
  margin-bottom:8px; background:var(--ap-accent-tint); color:var(--ap-accent); font-size:16px;
}
#jjSidebar.tl-theme .jj-sb-upsell-ico i{ color:var(--ap-accent); }
#jjSidebar.tl-theme .jj-sb-upsell-title{ color:var(--ap-ink); font:600 14px/1.3 var(--ap-display); letter-spacing:-.01em; }
#jjSidebar.tl-theme .jj-sb-upsell-sub{ color:var(--ap-ink-2); font:400 11.5px/1.45 'Plus Jakarta Sans',sans-serif; margin-top:3px; }
#jjSidebar.tl-theme .jj-sb-upsell-btn{
  margin-top:11px; width:100%; padding:8px 14px; border:0; border-radius:9px; cursor:pointer;
  background:var(--ap-cta); color:var(--ap-cta-ink); font:700 12px/1 'Plus Jakarta Sans',sans-serif;
  letter-spacing:0; text-transform:none; box-shadow:none;
}
#jjSidebar.tl-theme .jj-sb-upsell-btn:hover{ background:#d6ee00; color:var(--ap-cta-ink); }

/* ============================================================
   DARK FOREST-GREEN RAIL (2026-07-21). Supersedes the Apollo cream
   rail immediately above, for #jjSidebar only -- every rule here is
   scoped to the #jjSidebar.tl-theme id+class combo, the same
   specificity precedent the Apollo layer used, so it wins purely by
   coming later in the file (no !important arms race) and can never
   leak onto #rrSidebar, which shares the bare .jj-sidebar class as
   its visual-shell base but is a separate, untouched element.
   ============================================================ */
#jjSidebar.tl-theme{
  --sb-bg:#1F2B23;
  --sb-item:#DCE5DF;
  --sb-item-hover-bg:rgba(255,255,255,0.06);
  --sb-active-bg:#FFFFFF;
  --sb-active-ink:#1F2B23;
  /* Spec value #7E9186 measures 4.40:1 on --sb-bg, just under WCAG AA's
     4.5:1 floor for small text. Nudged lighter to #8A9C90 (5.07:1) per
     the brief's explicit contrast-verification instruction. */
  --sb-label:#8A9C90;
  --sb-divider:#2C3A31;
  --sb-card-bg:#2A382F;
  --sb-card-avatar:#4A5C50;
  --sb-card-sub:#8FA396; /* 4.60:1 on --sb-card-bg -- passes AA as specified */
  /* Same stack #jjPage_sponsor's --ajs-mono uses for the AI Job Search
     labels; declared locally since that variable is scoped to that page
     and unreachable from a sibling element. */
  --sb-mono:'SF Mono','IBM Plex Mono',ui-monospace,'Courier New',monospace;
  /* 2026-07-22: type bumped ~1.25x (comfortable at 100% zoom, was tuned at
     125%); item height follows so the pill doesn't feel cramped. Width
     widened 240->272px to fit "Interview Prep"/"Find Contacts" at the
     larger size without wrapping -- every companion "clears the rail"
     offset (.sim-view padding-left, .cvb-actionbar/.cl-actionbar/
     .rr-vi__start left, .cv-fab-left left, #rrTrialBanner margin-left,
     the RTL .jj-main mirror) is bumped alongside it, see styles.css search
     for "272" if the width ever needs to change again. */
  --sb-width:272px;
  --sb-item-h:46px;
  background:var(--sb-bg) !important;
  border-right:0 !important;
  color:var(--sb-item);
  border-radius:0;
  box-shadow:none;
  width:var(--sb-width) !important;
  min-width:var(--sb-width) !important;
}
#jjSidebar.tl-theme::-webkit-scrollbar-thumb{ background:var(--sb-card-avatar); }

/* Wordmark: 2026-07-23/24, logo mark restored ahead of the word (was
   dropped in the initial redesign, brought back per instruction) -- same
   asset used everywhere else (favicon, landing page, OG image), plain and
   transparent like its landing-header/footer treatment, no colour tile.
   Word matches the landing header's own .apx-brand-logo/.apx-brand-word
   formatting verbatim (font stack, weight, sentence case, tight tracking)
   rather than the mono/uppercase rail typography used for nav labels --
   color swapped to white for the dark bg, size trimmed for the 272px rail
   (landing's own 25px already steps down to 21-22px at its own narrower
   breakpoints). */
/* Containment: the brand lockup is a flex row (display:flex from the Apollo
   rule above) whose text child ("ReplyRate") is one unbreakable word. Flex
   items default to min-width:auto, which lets an unbreakable child refuse to
   shrink below its own rendered width and push the row wider than the 272px
   rail if that word ever renders wider than expected (a slower Fraunces
   webfont load falling through to a wider system serif, a future longer
   name, zoom/DPI variance) -- overflow:visible on the row then lets that
   overflow escape into whatever sits to the rail's right instead of being
   clipped. Hardened at both levels: the row is hard-capped to the rail's own
   width and clips any overflow itself, and the word additionally gets
   min-width:0 (the actual override needed to make a flex child shrinkable)
   plus its own ellipsis fallback so it visually truncates rather than
   overflowing even in that edge case. pointer-events:none since this lockup
   is decorative (not a link/button) -- belt-and-braces alongside the
   containment fix, not a substitute for it. */
#jjSidebar.tl-theme .jj-rail-brand{
  padding:28px 16px 16px; width:100%; max-width:100%; box-sizing:border-box;
  overflow:hidden; pointer-events:none;
}
#jjSidebar.tl-theme .jj-rail-brand-tile{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:auto; height:auto; background:transparent; box-shadow:none; border-radius:0;
}
#jjSidebar.tl-theme .jj-rail-brand-mark{ width:26px; height:26px; object-fit:contain; display:block; }
#jjSidebar.tl-theme .jj-rail-brand-word{
  font-family:'Fraunces','Tiempos Headline','Cormorant Garamond',serif; font-size:22px; font-weight:550;
  color:#FFFFFF; letter-spacing:-0.02em; text-transform:none;
  min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Weekly goal tracker: removed from the rail per instruction (2026-07-23).
   Hidden via CSS only -- jjRailMomentum() in index.html keeps running
   harmlessly against a display:none element, same pattern as the
   upsell card above, so nothing needs to change on the JS side. */
#jjSidebar.tl-theme .jj-rail-momentum{ display:none; }

/* Section labels + dividers. */
#jjSidebar.tl-theme .jj-sidebar-section-label{
  font:600 12.5px/1.3 var(--sb-mono) !important; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--sb-label) !important; margin:28px 14px 10px !important; padding:0 !important;
}
/* --first (MAIN) no longer needs a bigger margin-top than the rest -- that
   extra gap existed to separate MAIN from the weekly-goal line, now
   removed, so it falls back to the standard 28px like TOOLS. Rule (and the
   --first class in index.html) kept as a hook in case a rail element above
   MAIN returns. :first-of-type would not have worked here regardless -- the
   active-pill div (inserted first, for paint order) is also a <div> and
   would win "first div of type" over the MAIN label itself, since
   :first-of-type matches by tag name only, not class. */
#jjSidebar.tl-theme .jj-sidebar-section-label--first{ margin-top:28px !important; }
#jjSidebar.tl-theme .jj-sb-divider{ height:1px; background:var(--sb-divider); margin:14px 14px; border:0; flex-shrink:0; }

/* Nav container: relative, so the active pill's offsetTop math and its own
   absolute positioning share one coordinate space. No top padding of its
   own -- the MAIN label's margin-top above is the single source of that
   gap, so it isn't inflated by an extra, separate padding value here. */
#jjSidebar.tl-theme .jj-sidebar-nav{ position:relative; padding:0 14px 14px !important; }

/* Sliding active pill (index.html positions it via transform on nav change
   and on resize; see the "Sidebar redesign" script). Transform+opacity only,
   fixed height, so nothing about it ever triggers layout. */
#jjSidebar.tl-theme .jj-sb-active-pill{
  position:absolute; left:14px; right:14px; top:0; height:var(--sb-item-h); z-index:0;
  background:var(--sb-active-bg); border-radius:8px;
  transform:translateY(-999px);
  transition:transform 200ms cubic-bezier(0.2,0,0,1);
  pointer-events:none;
}

/* Items */
#jjSidebar.tl-theme .jj-sidebar-item{
  position:relative; z-index:1; height:var(--sb-item-h); min-height:var(--sb-item-h);
  padding:0 10px !important; margin:4px 0 !important; border-radius:8px; gap:10px;
  font:500 15px/1 var(--sb-mono); color:var(--sb-item);
  background:transparent; box-shadow:none;
  transition:background 150ms ease,color 150ms ease;
}
#jjSidebar.tl-theme .jj-rail-ico{ font-size:19px; color:var(--sb-item); transition:color 150ms ease,transform 150ms ease; }
#jjSidebar.tl-theme .jj-sidebar-item:hover{ background:var(--sb-item-hover-bg); color:var(--sb-item); }
#jjSidebar.tl-theme .jj-sidebar-item:hover .jj-rail-ico{ color:var(--sb-item); transform:translateX(2px); }
#jjSidebar.tl-theme .jj-sidebar-item:focus-visible{
  outline:2px solid rgba(255,255,255,0.6); outline-offset:2px; background:var(--sb-item-hover-bg);
}
/* Active item: transparent over the white pill (painted behind it, see
   .jj-sb-active-pill above), text/icon flip to the dark ink for contrast. */
#jjSidebar.tl-theme .jj-sidebar-item.active{ background:transparent; box-shadow:none; color:var(--sb-active-ink); font-weight:500; }
#jjSidebar.tl-theme .jj-sidebar-item.active .jj-rail-ico{ color:var(--sb-active-ink); }
#jjSidebar.tl-theme .jj-sidebar-item.active::before{ display:none; }

/* AI badge pills dropped (Find Contacts) */
#jjSidebar.tl-theme .jj-sb-badge{ display:none; }

/* Upsell card: no slot in this design (promo block), hidden via CSS only --
   its JS (the plan-aware text-swap in index.html) and click handler are
   untouched and keep running harmlessly on a display:none element. */
#jjSidebar.tl-theme .jj-sb-upsell{ display:none; }

/* Flexible spacer: pushes the divider + Settings to the bottom of the nav's
   own scroll box. #jjSidebar.tl-theme .jj-sidebar-nav is already flex:1
   (Apollo rule above) inside a flex-column nav (unscoped rule, styles.css
   "Sidebar layout fix"), so flex:1 here is enough to grow into any slack. */
#jjSidebar.tl-theme .jj-sb-flex-spacer{ flex:1 1 auto; }

/* Settings sub-tabs: functional in-page tab switcher (Profile/Account/
   Billing/Privacy), not decorative -- kept and restyled for legibility on
   the dark rail rather than hidden. */
#jjSidebar.tl-theme .jj-sb-subitem{ font:500 13.5px/1.2 var(--sb-mono) !important; color:var(--sb-card-sub); padding:7px 14px 7px 40px; }
#jjSidebar.tl-theme .jj-sb-subitem:hover{ background:var(--sb-item-hover-bg); color:var(--sb-item); }
#jjSidebar.tl-theme .jj-sb-subitem.active{ background:var(--sb-item-hover-bg); color:#FFFFFF; font-weight:600; box-shadow:inset 2px 0 0 #FFFFFF; }

/* Profile card, pinned at the bottom */
#jjSidebar.tl-theme .jj-rail-profile-bottom{ margin:14px 14px 14px !important; }
#jjSidebar.tl-theme .jj-rail-profile{
  background:var(--sb-card-bg); border:0; border-radius:10px; box-shadow:none; padding:16px;
  transition:transform 100ms ease,background 150ms ease;
}
#jjSidebar.tl-theme .jj-rail-profile:hover{ background:var(--sb-card-bg); }
#jjSidebar.tl-theme .jj-rail-profile:active{ transform:scale(0.98); }
#jjSidebar.tl-theme .jj-avatar{ background:var(--sb-card-avatar); color:#FFFFFF; border:0; box-shadow:none; font-family:var(--sb-mono); font-weight:600; }
#jjSidebar.tl-theme .jj-profile-name{
  color:#FFFFFF; font:600 13px/1.3 var(--sb-mono) !important; letter-spacing:0.04em; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#jjSidebar.tl-theme .jj-profile-sub{ color:var(--sb-card-sub); font-size:12px !important; font-family:var(--sb-mono); }
#jjSidebar.tl-theme .jj-rail-acct-chev{ color:var(--sb-card-sub); }
#jjSidebar.tl-theme .jj-rail-profile:hover .jj-rail-acct-chev{ color:#FFFFFF; }

/* Balance chip (credit ledger; hidden until the boot probe flips ledger
   mode on). Sits above the profile card on the desktop rail and above the
   account card in the mobile More drawer; the --sb-* fallbacks carry the
   rail's palette into the drawer, where those vars are out of scope. */
.rr-credit-chip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 14px 10px; padding:10px 14px; flex-shrink:0;
  background:var(--sb-card-bg,#2A382F); border-radius:10px;
}
.rr-credit-chip[hidden]{ display:none !important; }
.rr-credit-chip-bal{
  font:600 12.5px/1.2 var(--sb-mono,'SF Mono','IBM Plex Mono',ui-monospace,'Courier New',monospace);
  color:#FFFFFF; letter-spacing:0.04em; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rr-credit-chip-top{
  flex:none; padding:7px 12px; cursor:pointer;
  font:600 11px/1 var(--sb-mono,'SF Mono','IBM Plex Mono',ui-monospace,'Courier New',monospace);
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--sb-active-ink,#1F2B23); background:var(--sb-active-bg,#FFFFFF);
  border:0; border-radius:999px; transition:opacity 150ms ease,transform 100ms ease;
}
.rr-credit-chip-top:hover{ opacity:0.88; }
.rr-credit-chip-top:active{ transform:scale(0.96); }
.rr-credit-chip-top:disabled{ opacity:0.5; cursor:default; }
#jjMobDrawer .rr-credit-chip{ margin:6px 4px 4px; }

/* Entrance stagger, initial authenticated load only. index.html sets
   --jj-sb-enter-delay inline per item and adds .jj-sb-entered to #jjSidebar
   once the sequence finishes, which permanently defeats this selector so
   later page switches never replay it. */
#jjSidebar.tl-theme:not(.jj-sb-entered) .jj-sidebar-item{
  opacity:0; transform:translateY(6px);
  animation:jjSbItemIn 250ms ease forwards;
  animation-delay:var(--jj-sb-enter-delay,0ms);
}
@keyframes jjSbItemIn{ to{ opacity:1; transform:translateY(0); } }
/* Resting-state guarantee (2026-08-10): once entered, nav items are fully
   visible by declaration, not by animation fill — whatever interrupts or
   cancels the entrance keyframes, no item may ever rest at opacity 0. */
#jjSidebar.tl-theme.jj-sb-entered .jj-sidebar-item{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  #jjSidebar.tl-theme .jj-sb-active-pill{ transition:none; }
  #jjSidebar.tl-theme .jj-rail-mo-fill{ transition:none; }
  #jjSidebar.tl-theme .jj-sidebar-item,
  #jjSidebar.tl-theme .jj-rail-ico,
  #jjSidebar.tl-theme .jj-rail-profile{ transition:none; }
  #jjSidebar.tl-theme .jj-sidebar-item:hover .jj-rail-ico{ transform:none; }
  #jjSidebar.tl-theme .jj-rail-profile:active{ transform:none; }
  #jjSidebar.tl-theme:not(.jj-sb-entered) .jj-sidebar-item{ opacity:1; transform:none; animation:none; }
}

/* --- Trial banner: confirmed on v2 (hairline, warm white, grey text, blue
   uppercase link). Refinements: the urgent state turns the TEXT red only;
   the emoji icon is hidden (Phase 2 nav-emoji precedent). --- */
#rrTrialBanner .rr-trial-banner-icon { display: none; }
#rrTrialBanner.urgent .rr-trial-banner-text { color: #C9594A; }

/* --- Global settings drawer #settingsPanel (the billing/GDPR surface). --- */
#settingsPanel { background: #FFFFFF; border-left: 1px solid #E2E2DC; box-shadow: none; }
#settingsPanel .settings-label { font: 500 10px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif !important; letter-spacing: 0.08em; text-transform: uppercase; color: #A4A49C !important; }
#settingsPanel .settings-card { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; box-shadow: none; }
#settingsPanel .settings-usage-num { font: 500 22px/1.1 "Space Grotesk", "Albert Sans", system-ui, sans-serif !important; letter-spacing: -0.02em; color: #101010 !important; }
#settingsPanel .settings-usage-lbl { color: #86867E !important; }
/* Plan: "Current" badge to the v2 tint; Upgrade = filled blue primary (the
   showCreditPaywall handler is untouched; !important outranks the inline
   palette and the hover JS writes). */
#settingsPanel #settingsPlanBadge { background: #EFF4FD !important; color: #2448FF !important; font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-weight: 500 !important; }
#settingsPanel #settingsUpgradeBtn { background: #2448FF !important; border-radius: 8px !important; color: #fff !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-weight: 600 !important; }
#settingsPanel #settingsUpgradeBtn:hover { background: #1f3dd9 !important; }
/* Usage progress fill. */
#settingsPanel #settingsRewriteProgress { background: #2448FF !important; }
/* API key row. */
#settingsPanel #settingsApiKey { background: #FFFFFF !important; border: 1px solid #E2E2DC !important; border-radius: 8px !important; color: #101010 !important; }
#settingsPanel #settingsApiKey:focus { border-color: #2448FF !important; }
#settingsPanel button[onclick="saveSettingsApiKey()"] { background: #2448FF !important; border-radius: 8px !important; color: #fff !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-weight: 600 !important; }
#settingsPanel button[onclick="saveSettingsApiKey()"]:hover { background: #1f3dd9 !important; }
/* Data section: quiet hairline secondaries (the inline hover JS that paints
   accent/danger colours is outranked, not removed). */
#settingsPanel button[onclick^="clearAllHistory"],
#settingsPanel button[onclick^="localStorage.removeItem"] {
  background: transparent !important; border: 1px solid #E2E2DC !important;
  border-radius: 8px !important; color: #86867E !important;
}
#settingsPanel button[onclick^="clearAllHistory"]:hover,
#settingsPanel button[onclick^="localStorage.removeItem"]:hover { border-color: #101010 !important; color: #101010 !important; }
/* Account section (legacy #settingsPanel): GDPR export, delete. The redeem card
   moved to #jjPage_settings (the Job Hunter Settings page) so it is reachable. */
#settingsPanel #rrExportDataBtn { background: transparent !important; border: 1px solid #E2E2DC !important; border-radius: 8px !important; color: #86867E !important; }
#settingsPanel #rrExportDataBtn:hover { border-color: #101010 !important; color: #101010 !important; }
#settingsPanel button[onclick="showDeleteAccountModal()"] {
  background: transparent !important; border: 1px solid #E2E2DC !important;
  border-radius: 8px !important; color: #C9594A !important;
}
#settingsPanel button[onclick="showDeleteAccountModal()"]:hover { background: transparent !important; border-color: #C9594A !important; color: #C9594A !important; }

/* --- Global toast (#replyrateToast is created once with inline cssText;
   id + !important outranks it). No error/success variants exist in
   showToast, so the single look applies. --- */
#replyrateToast {
  background: #FFFFFF !important; border: 1px solid #E2E2DC !important;
  border-radius: 10px !important; color: #101010 !important;
  box-shadow: none !important; font-weight: 500 !important; font-size: 12.5px !important;
}
      
.rr-vi__scope {
  --vi-bg: #FFFFFF;
  --vi-surface: var(--rr-surface);
  --vi-border: var(--rr-border);
  --vi-border-hover: var(--rr-border-strong);
  --vi-fg: var(--rr-ink);
  --vi-fg-muted: var(--rr-ink-muted);
  --vi-fg-subtle: var(--rr-ink-subtle);
  --vi-accent: var(--rr-accent);
  --vi-accent-hover: var(--rr-accent-hover);
  --vi-accent-tint: var(--rr-accent-tint);
  --vi-accent-tint-2: var(--rr-accent-tint-2);
  --vi-accent-border: var(--rr-accent-border);
  --vi-shadow-sm: 0 1px 2px rgba(17,17,20,0.04);
  --vi-shadow-card: 0 1px 3px rgba(17,17,20,0.04), 0 1px 2px rgba(17,17,20,0.03);
  --vi-shadow-cta: 0 10px 24px -10px rgba(36, 72, 255,0.55), 0 4px 10px -4px rgba(36, 72, 255,0.35);
  --vi-radius-sm: var(--rr-radius-sm);
  --vi-radius-md: var(--rr-radius-sm);
  --vi-radius-lg: var(--rr-radius);
  --vi-radius-xl: 20px;
  position: relative;
  width: 100%;
  font-family: var(--rr-font-body);
  color: var(--vi-fg);
  background: var(--vi-bg);
  padding: 8px 4px 24px;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  overflow: hidden;
}
.rr-vi__scope *, .rr-vi__scope *::before, .rr-vi__scope *::after { box-sizing: border-box; }
/* Soft brand-tinted radial blobs give the liquid-glass cards something to mix with. */
.rr-vi__scope::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 38% at 12% 16%, rgba(36, 72, 255, 0.14), rgba(36, 72, 255, 0) 60%),
    radial-gradient(46% 34% at 92% 28%, rgba(167, 139, 250, 0.11), rgba(167, 139, 250, 0) 62%),
    radial-gradient(56% 40% at 50% 94%, rgba(36, 72, 255, 0.10), rgba(36, 72, 255, 0) 65%);
  filter: blur(36px);
}
.rr-vi__grid { position: relative; z-index: 1; }

.rr-vi__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 1100px) {
  .rr-vi__grid { grid-template-columns: minmax(0, 1fr) 340px; }
}

.rr-vi__steps { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rr-vi__row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.rr-vi__step {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--vi-radius-lg);
  padding: 20px 22px 22px;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(36, 72, 255, 0.06),
    0 12px 28px -8px rgba(17, 17, 20, 0.10),
    0 4px 12px rgba(17, 17, 20, 0.04);
}
.rr-vi__step-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.rr-vi__step-badge {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px;
  background: var(--vi-accent); color: #fff;
  font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.rr-vi__step-body { flex: 1; min-width: 0; }
.rr-vi__step-title {
  font-weight: 600; font-size: 15.5px; line-height: 1.3;
  letter-spacing: -0.005em; color: var(--vi-fg); margin: 0 0 3px;
}
.rr-vi__step-title-optional { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--vi-fg-subtle); }
.rr-vi__step-help { font-size: 13px; line-height: 1.45; color: var(--vi-fg-muted); margin: 0; }

/* --- 1. CV (paste-only textarea restyled as upload card) --- */
.rr-vi__cv-empty {
  display: block; text-align: center;
  background: #FFFFFF;
  border: 1px dashed rgba(17,17,20,0.14);
  border-radius: var(--vi-radius-md);
  padding: 22px 16px 14px;
}
/* Screen 1 (icw) now toggles this via the hidden attribute (CV ready state);
   [hidden] alone loses the specificity tie against the unconditional
   display:block above since both are one-class-selector-equivalent and this
   stylesheet loads after the UA default. */
.rr-vi__cv-empty[hidden] { display: none; }
.rr-vi__cv-empty-icon {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--vi-accent-tint); color: var(--vi-accent);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
}
.rr-vi__cv-empty-title { font-size: 14px; color: var(--vi-fg); margin: 0 0 2px; font-weight: 500; }
.rr-vi__cv-empty-sub { font-size: 12.5px; color: var(--vi-fg-subtle); margin: 0 0 10px; }
.rr-vi__cv-textarea {
  width: 100%; min-height: 80px; box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-radius-md);
  color: var(--vi-fg);
  padding: 10px 12px;
  font-family: inherit; font-size: 13px; line-height: 1.5;
  resize: vertical;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.rr-vi__cv-textarea:focus {
  outline: none; border-color: var(--vi-accent-border);
  box-shadow: 0 0 0 3px rgba(36, 72, 255,0.16);
}
.rr-vi__cv-textarea::placeholder { color: var(--vi-fg-subtle); }

/* CV file upload (PDF/DOCX/TXT) */
.rr-vi__cv-upload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  padding: 8px 16px;
  background: var(--vi-accent-tint);
  color: var(--vi-accent);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.rr-vi__cv-upload-btn:hover:not(:disabled) { border-color: var(--vi-accent-border); }
.rr-vi__cv-upload-btn:disabled { opacity: 0.55; cursor: progress; }
.rr-vi__cv-upload-btn svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.rr-vi__cv-upload-status {
  min-height: 16px;
  margin: 0 0 10px;
  font-size: 12px; line-height: 1.4;
  color: var(--vi-fg-subtle);
}
.rr-vi__cv-upload-status[data-state="ok"] { color: #0a7d36; }
.rr-vi__cv-upload-status[data-state="err"] { color: #b32525; }

/* --- 2. JD --- */
.rr-vi__jd-wrap { position: relative; }
.rr-vi__jd {
  width: 100%; min-height: 120px; box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-radius-md);
  color: var(--vi-fg);
  padding: 14px 16px 28px;
  font-family: inherit; font-size: 13.5px; line-height: 1.55;
  resize: vertical;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.rr-vi__jd::placeholder { color: var(--vi-fg-subtle); }
.rr-vi__jd:focus {
  outline: none; background: #fff; border-color: var(--vi-accent-border);
  box-shadow: 0 0 0 3px rgba(36, 72, 255,0.16);
}
.rr-vi__jd-count {
  position: absolute; right: 12px; bottom: 10px;
  font-size: 11.5px; color: var(--vi-fg-subtle);
  font-variant-numeric: tabular-nums;
}

/* --- 3. Mode --- */
.rr-vi__mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rr-vi__mode {
  position: relative; text-align: left; cursor: pointer;
  background: var(--vi-surface);
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-radius-md);
  padding: 16px 44px 16px 16px;
  font-family: inherit;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.rr-vi__mode:hover { border-color: var(--vi-border-hover); }
.rr-vi__mode.is-selected, .rr-vi__mode.active {
  border-color: var(--vi-accent);
  background: var(--vi-accent-tint);
  box-shadow: 0 0 0 1px var(--vi-accent) inset;
}
.rr-vi__mode-radio {
  position: absolute; top: 16px; right: 16px;
  width: 18px; height: 18px; border-radius: 999px;
  border: 1.5px solid rgba(17,17,20,0.18);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.rr-vi__mode.is-selected .rr-vi__mode-radio,
.rr-vi__mode.active .rr-vi__mode-radio {
  border-color: var(--vi-accent); background: var(--vi-accent);
}
.rr-vi__mode.is-selected .rr-vi__mode-radio::after,
.rr-vi__mode.active .rr-vi__mode-radio::after {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: #fff;
}
.rr-vi__mode-name {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--vi-fg);
  margin: 0 0 4px; letter-spacing: -0.005em;
}
.rr-vi__mode-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--vi-fg-muted);
}
.rr-vi__mode.is-selected .rr-vi__mode-icon,
.rr-vi__mode.active .rr-vi__mode-icon { color: var(--vi-accent); }
.rr-vi__mode-desc {
  font-size: 12.5px; line-height: 1.45;
  color: var(--vi-fg-muted); margin: 0; padding-left: 32px;
}

/* --- 4. Voice picker: design's "selected card + toggle + dropdown" shape.
   #rrViVoiceCurrent (.rr-iv-voice/.rr-iv-play etc, ported from the design
   reference) is the always-visible display-only summary card - its photo
   sits in the design's icon slot as a circular crop (real product data,
   not the design's waveform glyph - the one deliberate deviation).
   #rrViVoiceScroll (inside the collapsible .rr-iv-voicedrop) holds the 5
   real, interactive options - still .rr-vi__voice[data-voice], vertically
   stacked now instead of a horizontal carousel, so the drag-to-scroll JS
   that used to live here was retired (nothing to drag in a vertical list;
   native scroll on .rr-iv-voicedrop-inner is enough if it ever overflows). --- */
.rr-vi__voice-wrap { position: relative; }
.rr-iv-voice {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 13px 15px; border: 1px solid var(--rr-iv-accent, var(--vi-accent)); border-radius: 14px;
  background: var(--rr-iv-accent-tint, var(--vi-accent-tint));
}
.rr-iv-voice-current-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 999px; object-fit: cover; display: block;
}
.rr-iv-play {
  width: 36px; height: 36px; flex: none; margin-left: auto; border-radius: 50%;
  border: 1.5px solid var(--rr-iv-accent, var(--vi-accent)); background: #fff; color: var(--rr-iv-accent, var(--vi-accent));
  display: grid; place-items: center;
}
.rr-iv-play svg { width: 15px; height: 15px; }
.rr-iv-voice-chev { flex: none; transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
#icVoiceToggle[aria-expanded="true"] .rr-iv-voice-chev { transform: rotate(180deg); }
.rr-iv-voicedrop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 340ms cubic-bezier(.2,.8,.2,1); }
.rr-iv-voicedrop.rr-iv-open { grid-template-rows: 1fr; }
.rr-iv-voicedrop-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s 340ms; }
.rr-iv-voicedrop.rr-iv-open .rr-iv-voicedrop-inner { visibility: visible; transition: visibility 0s; }
.rr-vi__voice-scroll { display: grid; gap: 8px; padding: 12px 2px 4px; }
.rr-vi__voice {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--vi-surface);
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-radius-md);
  padding: 10px 12px 10px 10px;
  cursor: pointer;
  font-family: inherit; text-align: left;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.rr-vi__voice:hover { border-color: var(--vi-border-hover); }
.rr-vi__voice:focus-visible { outline: 2px solid var(--vi-accent); outline-offset: 2px; }
.rr-vi__voice.is-selected {
  border-color: var(--vi-accent);
  background: var(--vi-accent-tint);
  box-shadow: 0 0 0 1px var(--vi-accent) inset;
}
.rr-vi__voice-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px;
  object-fit: cover; display: block;
}
.rr-vi__voice.is-selected .rr-vi__voice-avatar {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vi-accent);
}
.rr-vi__voice-meta { flex: 1; min-width: 0; }
.rr-vi__voice-name {
  display: block;
  font-size: 13.5px; font-weight: 600; color: var(--vi-fg);
  margin: 0 0 1px; line-height: 1.2;
}
.rr-vi__voice-personality {
  display: block;
  font-size: 12px; color: var(--vi-fg-muted); margin: 0; line-height: 1.2;
}
/* Check mark, design's .rr-iv-vcheck: visible only on the selected row so a
   user opening the dropdown can see their current pick without relying on
   colour alone. */
.rr-vi__voice .rr-iv-vcheck { width: 18px; height: 18px; flex: none; color: var(--vi-accent); opacity: 0; transform: scale(.8); transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,.8,.2,1); }
.rr-vi__voice.is-selected .rr-iv-vcheck { opacity: 1; transform: scale(1); }
.rr-vi__voice-play {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  background: transparent; border: 1px solid var(--vi-border);
  color: var(--vi-fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.rr-vi__voice-play:hover { background: #FAFAFA; color: var(--vi-fg); }
.rr-vi__voice.is-selected .rr-vi__voice-play {
  background: var(--vi-accent); border-color: var(--vi-accent); color: #fff;
}
/* Preview play button: spinner while audio loads (icPreviewVoice already sets
   data-state="loading" -> playing/idle/error; this just gives it a visual). */
.rr-vi__voice-play[data-state="loading"] svg { display: none; }
.rr-vi__voice-play[data-state="loading"]::before {
  content: ''; display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(36, 72, 255,0.3); border-top-color: var(--rr-accent);
  border-radius: 50%; animation: voice-spin 0.7s linear infinite;
}
@keyframes voice-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rr-vi__voice-play[data-state="loading"]::before { animation: none; }
  .rr-iv-voicedrop, .rr-iv-voicedrop-inner, .rr-iv-voice-chev, .rr-vi__voice, .rr-iv-vcheck { transition: none !important; }
}

/* ============================================================
   Interview Prep setup screens 1/2 (icw-* prefix: new ported-design
   markup). Reuses --vi-* tokens from .rr-vi__scope for visual
   consistency with the rest of this page rather than inventing a
   parallel token set. Real ids/classes required by existing JS
   (icModePillInt/Coach, icCv*, icJd, rrViVoiceScroll, ic-bound-pill,
   ic-diff-pill, icSetupFocus, icStartCard) are added alongside these
   as plain attributes on the same elements, not replaced by them.
   ============================================================ */
.icw-wizard { display: block; }
.icw-scr { display: flex; flex-direction: column; gap: 0; }
.icw-scr[hidden] { display: none !important; }
.icw-scr-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px;
  align-items: start;
}
@media (max-width: 980px) {
  /* minmax(0, 1fr), not bare 1fr: a plain 1fr track defaults to min-width:
     auto, letting a child's intrinsic content width (e.g. the voice row's
     un-wrapped 5-card width) push this column wider than the viewport
     instead of shrinking to fit it. Silently clipped rather than visibly
     broken because an ancestor (.rr-vi__scope.tl-theme) has overflow-x:
     hidden - confirmed live: .icw-col-l laid out at 820px in a 390px
     viewport, cutting off the last 2-3 voice cards with no way to reach
     them, not even a scrollbar. */
  .icw-scr-grid { grid-template-columns: minmax(0, 1fr); }
}

.icw-h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--vi-fg); margin: 4px 0 22px; }
.icw-section { margin-bottom: 26px; }
.icw-h2 { font-size: 15.5px; font-weight: 600; color: var(--vi-fg); margin: 0 0 12px; }

/* --- Mode picker: visual layer replaced by .rr-iv-opt* below (icw-mode-card/
   ic-mode-pill kept only as bare JS-hook classes on the same buttons, no CSS
   of their own left here) --- */

/* --- Role/CV/JD tabs: visual layer replaced by .rr-iv-tab* below --- */

.icw-role-empty { font-size: 13px; color: var(--vi-fg-muted); padding: 14px 0; }

/* --- Applications picker (4 states) --- */
.icw-apps-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.icw-apps-skeleton[hidden] { display: none; }
.icw-apps-skel-row {
  height: 52px; border-radius: var(--vi-radius-md);
  background: linear-gradient(90deg, var(--vi-surface) 25%, var(--vi-border) 37%, var(--vi-surface) 63%);
  background-size: 400% 100%; animation: icw-skel-shimmer 1.4s ease infinite;
}
@keyframes icw-skel-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .icw-apps-skel-row { animation: none; background-position: 50% 50%; } }

.icw-apps-list { display: flex; flex-direction: column; gap: 8px; }
.icw-apps-list[hidden] { display: none; }
/* Single default-application card (product decision: matches the design
   reference's static rr-iv-rolecard look, not a scrollable list) - always
   rendered in its selected/active state since there's only ever one shown
   here now. Sized roomier than the old list-row card. */
.icw-app-card {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: var(--vi-accent-tint, rgba(36,72,255,0.06)); border: 1px solid var(--vi-accent); border-radius: var(--vi-radius-lg);
  padding: 14px 16px;
}
.icw-app-card:focus-visible { outline: 2px solid var(--vi-accent); outline-offset: 2px; }
.icw-app-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.icw-app-role { font-size: 15.5px; font-weight: 700; letter-spacing: -.012em; color: var(--vi-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icw-app-company, .icw-app-added { font-size: 13.5px; color: var(--vi-fg-muted); margin-top: 2px; }
.icw-app-check { flex: 0 0 auto; width: 24px; height: 24px; color: var(--vi-accent); }
.icw-role-switch { margin-top: 14px; display: inline-block; }
/* !important required: .icw-role-switch also carries rr-iv-linkbtn, whose
   #icWizard .rr-iv-linkbtn base rule (display:inline-flex) has an ID in
   its selector and so outranks a same-tier class+attribute override
   regardless of source order - same fix precedent as .rr-iv-cvcard[hidden]. */
.icw-role-switch[hidden] { display: none !important; }
/* icwLogoHtml borrows the Applications-page's apx-logo-* classes, which are
   otherwise scoped to #jjPage_apps and have no size here at all (pre-existing
   gap) - scoped sizing added to match the reference's 46px logo tile now
   that this card is a single, prominent element rather than a list row. */
#icAppsList .apx-logo-tile { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; object-fit: cover; }
#icAppsList .apx-logo-fallback { display: flex; align-items: center; justify-content: center; background: #0B0E12; color: #fff; font: 600 15px/1 var(--rr-iv-sans, inherit); }

.icw-jd-note {
  font-size: 12.5px; color: var(--vi-fg); background: var(--vi-accent-tint, rgba(36,72,255,0.06));
  border: 1px solid var(--vi-border); border-radius: var(--vi-radius-md); padding: 10px 12px; margin: 0 0 10px;
}
.icw-jd-note[hidden] { display: none; }

/* --- CV-ready card: visual layer replaced by .rr-iv-cvcard below --- */

/* --- Avatar preview (screen 1, right column): stagewrap/stage/signal/qcard/
   tcard visual layer added below. Base/talk crossfade images kept exactly as
   built (data-talking driving .icw-frame-base/.icw-frame-talk opacity) per
   explicit decision to keep this over the reference's static-image+eyelid
   system, which was built for a different asset - a code-drawn eyelid
   overlay is added below instead, calibrated to our own baked eyes. ---- */
.icw-fig-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 18px; z-index: 3; animation: icw-fig-breathe 4.5s ease-in-out infinite alternate; }
/* Motion layers ported from the design reference's .rr-iv-figure/
   .rr-iv-head-sway/.rr-iv-head-nod (see markup comment for naming/
   data-model notes). Each wrapper is full-size so the frame images'
   bottom/left percentage positioning is unaffected. */
.icw-fig-sway { width: 100%; height: 100%; animation: icw-fig-sway 7s ease-in-out infinite alternate; transform-origin: 50% 62%; }
.icw-fig-nod, .icw-fig-look { width: 100%; height: 100%; }
.icw-fig-look { will-change: transform; }
#icAvatarStage[data-talking="0"] .icw-fig-nod { animation: icw-fig-nod 6s ease-in-out infinite; }
#icAvatarStage[data-talking="1"] .icw-fig-nod { animation: icw-fig-bob 900ms ease-in-out infinite; }
@keyframes icw-fig-breathe { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes icw-fig-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes icw-fig-nod { 0%, 82%, 100% { transform: translateY(0); } 88% { transform: translateY(1px); } }
@keyframes icw-fig-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1px); } }
@media (prefers-reduced-motion: reduce) {
  .icw-fig-clip, .icw-fig-sway, .icw-fig-nod { animation: none; }
}
.icw-stage-frame {
  /* Sized by HEIGHT, not width: interviewer-base/-talk.webp is a 900x1350
     (2:3) portrait, taller than the stage is. Sizing by width against a
     shorter, wider stage box means height (locked to the same aspect)
     overflows past the box - bottom-anchored, that overflow comes off the
     TOP, cropping the head. Sizing by height instead guarantees the full
     figure fits vertically; width follows from the same fixed aspect.
     bottom:-32%/height:108% (not bottom:0/height:100%): two stacked
     reasons. (a) The source asset has its own transparent margin +
     rounded-corner crop baked in below the actual figure, so a flush
     bottom:0 alignment put that baked edge exactly at the stage's own
     crop line, fully visible instead of cropped away - any negative
     bottom pushes it below the stage's real overflow:hidden line so the
     STAGE crops it, never the asset's own edge. (b) The figure is sunk
     a further ~27% (product request): at the original -4.5% his head
     covered the question card's text; at -32% (raised slightly from a
     first -36% pass, second product request) the head's top sits just
     below the card's text block, leaving the text readable while the
     head still overlaps the card's lower corner for the layered look.
     Percentages so both hold at any stage size; tuned via
     browser-injected styles + screenshots, per the standing rule. */
  position: absolute; bottom: -32%; left: 50%; transform: translateX(-56.6%);
  width: auto; height: 108%; transition: opacity 320ms ease;
}
.icw-stage-frame.icw-frame-base { opacity: 1; }
.icw-stage-frame.icw-frame-talk { opacity: 0; }
#icAvatarStage[data-talking="1"] .icw-frame-base { opacity: 0; }
#icAvatarStage[data-talking="1"] .icw-frame-talk { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .icw-stage-frame { transition: none; }
}

/* ---- code-drawn eyelid overlay: blink over the baked eyes in
   interviewer-base.webp/-talk.webp (900x1350 native). Two rounded-rect
   lids per eye (cream skin + navy bottom edge), scaleY from a TOP
   transform-origin so 0=open/invisible, 1=closed/covering. Position
   constants below are hardcoded from pixel-scanned eye bounding boxes
   on the actual asset. ---- */
#icAvatarStage {
  --rr-lid-x: 509.5px;
  --rr-lid-y: 406px;
  --rr-lid-w: 40px;
  --rr-lid-h: 80px;
  --rr-lid-gap: 126px;
  --rr-lid-fill: #EEE2D8;
}
.icw-lidlayer {
  /* Must match .icw-stage-frame's box exactly (same fixed aspect source),
     or the lids drift off the baked eyes - see that rule's comment, incl.
     its bottom:-32%/height:108% figure-crop-and-sink values. */
  position: absolute; bottom: -32%; left: 50%; transform: translateX(-56.6%);
  width: auto; height: 108%; pointer-events: none; z-index: 2;
}
/* Geometry (x/y/width/height/rx) is applied via JS (icwApplyLidGeometry),
   not CSS calc() - Chrome's SVG2 stylable-geometry-properties support was
   found unreliable here (getBoundingClientRect intermittently reported
   zero height on a calc()-driven rect nested in a transform-box:fill-box
   group, confirmed by direct testing). Only fill and the blink transform
   stay CSS-driven, both plain/standard usages. */
.icw-lid { transform-box: fill-box; transform-origin: 50% 0%; transform: scaleY(0); }
.icw-lid-skin { fill: var(--rr-lid-fill); }
.icw-lid-edge { fill: #1B2436; }
@media (prefers-reduced-motion: reduce) {
  .icw-lid { transition: none; }
}

/* --- Coach preview (screen 1, swaps in for coach mode). Design's
   answer-review panel, ported verbatim from design-interview-prep.html's
   .rr-iv-coach-card (the card chrome itself is unnecessary here - the
   existing .icw-coach-preview already provides it - only the inner
   content rules below are new). Real animation timing lives in the JS
   engine (window.icCoach, mirroring the reference's window.rrIvCoach). --- */
.icw-coach-preview { border-radius: var(--vi-radius-lg); background: var(--vi-bg); border: 1px solid var(--vi-border); padding: 18px; min-height: 260px; display: flex; flex-direction: column; gap: 10px; }
.icw-coach-preview[hidden] { display: none; }
.icw-coach-badge { align-self: flex-start; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vi-accent); background: rgba(36,72,255,0.08); border-radius: 999px; padding: 3px 9px; margin-bottom: 4px; }
.rr-iv-coach-head { display: flex; align-items: center; justify-content: space-between; }
.rr-iv-coach-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--rr-iv-ink-2, var(--vi-fg-muted)); }
.rr-iv-replay {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 7px; background: transparent; color: #C2C6CC; cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.rr-iv-replay:hover { color: var(--rr-iv-ink, var(--vi-fg)); background: #F2F2EF; }
.rr-iv-replay svg { width: 13px; height: 13px; }
.rr-iv-transcript { position: relative; margin-top: 9px; }
.rr-iv-tl { display: block; white-space: nowrap; font-size: 12.5px; line-height: 1.72; color: #2C313A; opacity: 0; transform: translateY(8px); }
/* .rr-iv-ph is the only highlight mechanism: an inline span's own
   background (tint()/dash() in the coach-review JS), correctly bounded
   to its own content-sized box. The design's separate .rr-iv-light
   (an absolutely-positioned "reading cursor" swept via computed
   coordinates) is deliberately not ported - see the JS comment above
   the coach-review IIFE for why. */
.rr-iv-ph { border-radius: 3px; padding: 1.5px 2px; margin: -1.5px -2px; }
.rr-iv-fbs { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #F0F0EC; }
.rr-iv-fb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--rr-iv-ink, var(--vi-fg)); opacity: 0; transform: translateY(7px); }
.rr-iv-fbico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: #F1F1EE; color: #5B636E; }
.rr-iv-fb-good .rr-iv-fbico { background: var(--rr-iv-accent-tint, var(--vi-accent-tint)); color: #1550c4; }
.rr-iv-fbico svg { width: 11px; height: 11px; }
@media (prefers-reduced-motion: reduce) {
  /* "Reviewed state, static, highlights applied" - not just opacity:1, the
     phrase tints/underline must also be applied since JS wouldn't otherwise
     run to add them; the coach engine's own reduced-motion path
     (finalState()) sets these, this is only a CSS fallback if JS is slow
     to init. */
  .rr-iv-tl, .rr-iv-fb { transition: none; opacity: 1 !important; transform: none !important; }
}

/* --- Feature rows: visual layer replaced by .rr-iv-features* below --- */
.icw-streak { margin-top: 22px; }

/* --- Footer (both screens) --- */
.icw-footer { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--vi-border); }
.icw-cta {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--vi-accent); color: #fff; border: 1px solid var(--vi-accent);
  border-radius: var(--vi-radius-lg); padding: 16px 22px; font-size: 16px; font-weight: 600;
  cursor: pointer;
}
.icw-cta:hover { filter: brightness(1.06); }
.icw-cta.tl-start-notready { background: var(--vi-surface); color: var(--vi-fg-muted); border-color: var(--vi-border); }
.icw-privacy-note { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--vi-fg-subtle); text-align: center; }
.icw-privacy-note a { color: var(--vi-accent); }

/* ============================================================
   Screen 1 visual layer, ported verbatim from the approved design
   (design-interview-prep.html, .rr-iv-* rules) rather than
   reinterpreted. Values/structure/class relationships below are
   copied from that file; only the scope root (#icScreen1 in place of
   #rr-iv-root) and a few omissions are deliberate deviations, called
   out inline. Tokens and generic card/heading/footer components are
   scoped to #icWizard (shared ancestor of both screens) so screen 2
   can reuse them; screen-1-only components (mode picker, tabs, CV
   card, avatar stage, features) stay scoped to #icScreen1.
   ============================================================ */
#icWizard {
  --rr-iv-card: #FFFFFF;
  --rr-iv-border: #ECECE8;
  --rr-iv-ink: #0B0E12;
  --rr-iv-ink-2: #5B636E;
  --rr-iv-ink-3: #8A9099;
  --rr-iv-accent: #1F63E8;
  --rr-iv-accent-tint: #F1F6FE;
  --rr-iv-accent-badge-bg: #E3EDFD;
  --rr-iv-green: #16A34A;
  --rr-iv-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.05);
}
#icWizard .rr-iv-linkbtn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--rr-iv-accent); font: inherit; font-size: 14.5px; font-weight: 600;
}
#icWizard .rr-iv-linkbtn:hover { text-decoration: underline; }
#icWizard .rr-iv-linkbtn-sm { font-size: 13.5px; font-weight: 500; }

/* ---- heading block: sits above the card, not inside it (both screens) ---- */
#icWizard .rr-iv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
#icWizard .rr-iv-h1 { margin: 0; font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -.028em; color: var(--rr-iv-ink); }
#icWizard .rr-iv-h1:focus-visible { outline: 2px solid var(--rr-iv-accent); outline-offset: 6px; border-radius: 4px; }
#icWizard .rr-iv-sub { margin: 12px 0 0; font-size: 15px; color: var(--rr-iv-ink-2); text-wrap: pretty; }
#icWizard .rr-iv-flag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rr-iv-ink-2); }
#icWizard .rr-iv-flag .rr-iv-flag-ico { width: 18px; height: 18px; color: var(--rr-iv-green); flex: none; }

#icWizard .rr-iv-card {
  background: var(--rr-iv-card);
  border: 1px solid var(--rr-iv-border);
  border-radius: 20px;
  box-shadow: var(--rr-iv-shadow);
  overflow: hidden;
}
#icWizard .rr-iv-col-l { padding: 28px 32px 30px; min-width: 0; }
#icWizard .rr-iv-col-r { padding: 26px 30px 30px; border-left: 1px solid var(--rr-iv-border); min-width: 0; }
#icWizard .rr-iv-h3 { margin: 0 0 14px; font-size: 17px; font-weight: 600; letter-spacing: -.012em; color: var(--rr-iv-ink); }
#icWizard .rr-iv-rule { height: 1px; background: var(--rr-iv-border); margin: 26px 0 22px; border: 0; }
/* screen1's own split ratio (58/42, driven by the avatar stage's needs) */
#icScreen1 .rr-iv-split { display: grid; grid-template-columns: 58fr 42fr; }

/* ---- selectable option cards (mode picker) ---- */
#icScreen1 .rr-iv-optgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#icScreen1 .rr-iv-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 18px 20px; border: 1px solid var(--rr-iv-border); border-radius: 16px;
  background: #fff; font: inherit; color: inherit; cursor: pointer; text-align: center;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
#icScreen1 .rr-iv-opt:hover { border-color: #d9d9d3; }
#icScreen1 .rr-iv-opt:focus-visible { outline: 2px solid var(--rr-iv-accent); outline-offset: 2px; }
#icScreen1 .rr-iv-opt[aria-checked="true"] { border-color: var(--rr-iv-accent); background: var(--rr-iv-accent-tint); }
#icScreen1 .rr-iv-opt-ico { width: 36px; height: 36px; color: var(--rr-iv-accent); margin-bottom: 4px; }
#icScreen1 .rr-iv-opt-title { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
#icScreen1 .rr-iv-opt-sub { font-size: 13.5px; line-height: 1.42; color: var(--rr-iv-ink-2); }
#icWizard .rr-iv-badge {
  display: inline-block; margin-top: 6px; padding: 4px 11px; border-radius: 999px;
  background: var(--rr-iv-accent-badge-bg); color: #1550c4; font-size: 12px; font-weight: 600;
}

/* ---- tabs ---- */
#icScreen1 .rr-iv-tabs {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px;
  border: 1px solid var(--rr-iv-border); border-radius: 11px; background: #fff;
}
#icScreen1 .rr-iv-tab {
  padding: 8px 20px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 14px; color: var(--rr-iv-ink-2); cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
#icScreen1 .rr-iv-tab[aria-selected="true"] { background: var(--rr-iv-accent-tint); color: var(--rr-iv-accent); font-weight: 600; }

/* ---- CV ready card ---- */
/* max-width: 224px matches the design reference's own .rr-iv-rolerow grid
   column (minmax(0,1fr) 224px) exactly - the design never lets this card
   stretch full-bleed, even though our stacked (not side-by-side) layout
   keeps it in the same single column as the role/JD panel above it. */
#icScreen1 .rr-iv-cvcard {
  border: 1px solid var(--rr-iv-border); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; margin-top: 14px;
  max-width: 224px;
}
#icScreen1 .rr-iv-cvcard[hidden] { display: none !important; }
#icScreen1 .rr-iv-cv-top { display: flex; gap: 11px; align-items: flex-start; }
#icScreen1 .rr-iv-cv-ico { width: 22px; height: 22px; flex: none; color: var(--rr-iv-accent); margin-top: 1px; }
#icScreen1 .rr-iv-cv-title { font-size: 14.5px; font-weight: 600; display: block; }
#icScreen1 .rr-iv-cv-file { font-size: 13px; color: var(--rr-iv-ink-2); margin-top: 2px; word-break: break-all; display: block; }
#icScreen1 .rr-iv-cv-attached { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--rr-iv-ink-2); }
#icScreen1 .rr-iv-flag-ico { width: 18px; height: 18px; flex: none; color: var(--rr-iv-green); }

/* ---- textareas: JD (screen1, alongside existing rr-vi__jd), focus + own
   questions (screen2) - all share this one rule ---- */
#icWizard .rr-iv-ta {
  width: 100%; min-height: 108px; resize: vertical; padding: 13px 14px;
  border: 1px solid var(--rr-iv-border); border-radius: 12px; background: #fff;
  font: inherit; font-size: 14px; color: var(--rr-iv-ink); line-height: 1.5;
}
#icWizard .rr-iv-ta::placeholder { color: var(--rr-iv-ink-2); }

/* ---- avatar stage: SVG background + signal ribbon + floating cards.
   Base/talk image crossfade kept as-is (see .icw-stage-frame above);
   this only adds the reference's stage chrome around/over it. ---- */
#icScreen1 .rr-iv-stagewrap { position: relative; overflow: visible; min-height: 460px; max-width: 460px; }
#icScreen1 .rr-iv-stagewrap[hidden] { display: none; }
#icScreen1 .rr-iv-stage { display: block; width: 100%; height: auto; min-height: 460px; border-radius: 18px; position: relative; z-index: 0; }
#icScreen1 .rr-iv-halo { transform-box: fill-box; transform-origin: 50% 60%; opacity: .7; animation: rr-iv-halo 3.2s ease-in-out infinite; }
@keyframes rr-iv-halo {
  0%, 100% { opacity: .504; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.04); }
}

#icScreen1 .rr-iv-qcard {
  position: absolute; top: 14px; right: -16px; min-width: 212px; max-width: 228px;
  background: #fff; border-radius: 16px; padding: 16px 17px;
  box-shadow: 0 8px 20px rgba(16,24,40,.12);
  animation: rr-iv-cardin 420ms cubic-bezier(.2,.8,.2,1) 260ms both;
}
#icScreen1 .rr-iv-qchip {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--rr-iv-accent-tint); color: var(--rr-iv-accent); font-size: 15px; font-weight: 700;
}
#icScreen1 .rr-iv-qtext { margin: 11px 0 13px; font-size: 16px; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; color: var(--rr-iv-ink); }
#icScreen1 .rr-iv-qtrack { display: block; height: 5px; border-radius: 2.5px; background: #E6E9EF; }
#icScreen1 .rr-iv-progress {
  display: block; height: 4px; width: 45%; border-radius: 2px; background: var(--rr-iv-accent);
  transform-origin: 0% 50%; animation: rr-iv-fill 9s linear 700ms infinite;
}
@keyframes rr-iv-cardin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rr-iv-fill { 0% { transform: scaleX(0); } 88%, 100% { transform: scaleX(1); } }

#icScreen1 .rr-iv-tcard {
  position: absolute; top: 58%; right: -12px; min-width: 190px;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 8px 20px rgba(16,24,40,.12);
  animation: rr-iv-pop 420ms cubic-bezier(.2,.8,.2,1) 460ms both;
}
#icScreen1 .rr-iv-tico {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--rr-iv-accent-tint); color: var(--rr-iv-accent);
}
#icScreen1 .rr-iv-tico svg { width: 16px; height: 16px; }
#icScreen1 .rr-iv-tlines { display: grid; gap: 7px; flex: 1 1 auto; }
#icScreen1 .rr-iv-tlines i { display: block; height: 5px; border-radius: 2.5px; background: #E4E4E0; }
#icScreen1 .rr-iv-tlines i:last-child { width: 62%; background: #EDEDE9; }
@keyframes rr-iv-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ---- living signal ribbon: blue wave sweeping past the head, six
   crossfading frames under a radial mask (RRSignalFrames JS engine) ----
   Geometry/mask taken verbatim from the design reference's own
   .rr-iv-signal (percentages relative to the stage box, #icAvatarStage -
   NOT coupled to the figure's own differently-sized box). The design
   doesn't need that coupling: it puts the figure layer above the ribbon
   in stacking order (z-index 3 vs 2 below) so the figure's opaque
   silhouette occludes whatever part of the ribbon it overlaps, leaving
   only the shoulder-area sweep visible - a prior fix here re-tuned the
   ribbon's own percentages against an anchor matched to the figure's box
   instead of fixing the z-order, which put the ribbon in FRONT of the
   figure with a hard clipped edge where the mask ended. z-index:3 on
   .icw-fig-clip (see that rule above) is what now puts the figure on top. */
#icScreen1 .rr-iv-signal {
  position: absolute; left: -6%; top: 15%; width: 64%; height: 62%;
  pointer-events: none; z-index: 2; transform-origin: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 38%, transparent 74%);
  mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 38%, transparent 74%);
}
#icScreen1 .rr-iv-signal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }

/* ---- feature rows: bordered card with icon chips ---- */
#icScreen1 .rr-iv-features { display: flex; flex-direction: column; margin-top: 18px; max-width: 460px; background: #fff; border: 1px solid var(--rr-iv-border); border-radius: 16px; padding: 5px 18px; }
#icScreen1 .rr-iv-feature { display: flex; align-items: center; gap: 14px; padding: 13px 0; }
#icScreen1 .rr-iv-feature + .rr-iv-feature { border-top: 1px solid #F0F0EC; }
#icScreen1 .rr-iv-feature-ico {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--rr-iv-accent-tint); color: var(--rr-iv-accent);
  display: grid; place-items: center;
}
#icScreen1 .rr-iv-feature-ico svg { width: 20px; height: 20px; }
#icScreen1 .rr-iv-feature-tx b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--rr-iv-ink); }
#icScreen1 .rr-iv-feature-tx span { display: block; font-size: 13px; color: var(--rr-iv-ink-2); margin-top: 2px; }

/* ---- card footer: flex space-between, inline CTA (both screens) ---- */
#icWizard .rr-iv-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 32px; border-top: 1px solid var(--rr-iv-border);
}
#icWizard .rr-iv-foot-note { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: var(--rr-iv-ink-2); }
#icWizard .rr-iv-foot-ico { width: 22px; height: 22px; flex: none; color: var(--rr-iv-accent); margin-top: 1px; }
#icWizard .rr-iv-foot-right { display: flex; align-items: center; gap: 20px; }
#icWizard .rr-iv-meta { font-size: 13.5px; color: var(--rr-iv-ink-2); white-space: nowrap; }
#icWizard .rr-iv-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px; border: 0; border-radius: 13px;
  background: var(--rr-iv-accent); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.1); white-space: nowrap;
  transition: background 160ms ease, transform 160ms ease;
}
#icWizard .rr-iv-cta:hover { background: #1550c4; }
#icWizard .rr-iv-cta:active { transform: translateY(1px); }
#icWizard .rr-iv-cta svg { width: 18px; height: 18px; flex: none; }
/* inherit, not #fff: the shared orb-button skin (.ic-orb-btn-title, light
   mode) sets the label span itself to near-black (#1A1614), which beats the
   button's own white by being ON the span. Inheriting takes the button's
   color in every state: white on the blue CTA, muted when .tl-start-notready
   dims the whole button - a hardcoded #fff would be unreadable there. */
#icWizard .rr-iv-cta .ic-orb-btn-title { color: inherit; }
#icWizard .icw-cta1-label { transition: opacity 170ms ease; }
@media (prefers-reduced-motion: reduce) { #icWizard .icw-cta1-label { transition: none; } }

/* ---- responsive: screen1's own breakpoints (avatar stage needs its own
   column down to a wider viewport than screen2's summary sidebar does -
   see screen2's own responsive block further down for its breakpoints) ---- */
@media (max-width: 1180px) {
  #icScreen1 .rr-iv-split { grid-template-columns: 1fr; }
  #icScreen1 .rr-iv-col-r { border-left: 0; border-top: 1px solid var(--rr-iv-border); }
}
@media (max-width: 900px) {
  #icScreen1 .rr-iv-optgrid { grid-template-columns: 1fr; }
  #icScreen1 .rr-iv-foot { flex-direction: column; align-items: flex-start; }
  #icScreen1 .rr-iv-cvcard { max-width: none; }
}

/* ---- reduced motion: hard stop on everything ported above (both screens) ---- */
@media (prefers-reduced-motion: reduce) {
  #icWizard .rr-iv-card *, #icWizard .rr-iv-card *::before, #icWizard .rr-iv-card *::after {
    animation: none !important;
    transition: none !important;
  }
  #icScreen1 .rr-iv-progress { transform: scaleX(1); }
}

/* ============================================================
   Screen 2 visual layer, ported from design-interview-prep.html's
   screen-2 section verbatim where its structure matches ours. An
   initial pass adapted several things for real production wiring;
   a later product decision reversed most of those adaptations to
   match the reference exactly, with two adaptations still standing:
   - .rr-iv-grid3 is 4 columns: production's real options are 3/5/8/10
     questions (MINS_BY_COUNT) and graduate/standard/senior/stretch.
     The reference mockup shows 3 tiles per grid; the standing rule is
     never to drop a real option to match it. (An interim pass DID drop
     the 4th tiles to match the mockup - reversed, they're back.)
   - The advanced panel's follow-up-frequency chips are real, wired
     to icSetFollowUpFrequency/icGetFollowUpGuidance/icMaxFollowUps -
     not cosmetic, not omitted.
   - Tile selected-state styling keys off .active, not the reference's
     [aria-checked="true"] - icSetQuestionCount/icSetDifficulty/
     icSetFollowUpFrequency only ever toggle .active (a separate
     delegated listener on #icScreen2, already in place, keeps
     aria-checked mirroring .active for assistive tech).
   - The summary sidebar stays a persistent second column (real
     wiring via icwUpdateSummary) rather than the reference's
     single-column layout with no summary widget - kept because it's
     real, load-bearing UI, not a cosmetic difference. Screen 2 gets
     its own split ratio for this reason (see below), not screen 1's
     58/42.
   - The voice picker: real names/ids only (Alloy, Ash, Shimmer, Echo,
     Marin - the only voices that exist in the TTS API). See the voice
     picker's own restructure block further down for its current shape
     and the setVoiceAvatarVar contract it must preserve.
   ============================================================ */

/* Screen 2's own split: weighted much further left than screen 1's
   58/42. The summary sidebar is a compact key-value list (7 rows,
   longest string "About 25 minutes") - it needs nowhere near the
   room the avatar stage does. 68/32 gives the summary column a
   measured ~300px (comfortable for label+value pairs at this card's
   real ~990px width) while keeping the four-across tile grids from
   getting squeezed the way a 42%-wide column would. */
#icScreen2 .rr-iv-split { display: grid; grid-template-columns: 68fr 32fr; }

#icScreen2 .rr-iv-back { margin-bottom: 12px; }

#icScreen2 .rr-iv-section { padding: 24px 28px 26px; border-top: 1px solid var(--rr-iv-border); }
#icScreen2 .rr-iv-section:first-child { padding-top: 0; border-top: 0; }

#icScreen2 .rr-iv-grid3 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
#icScreen2 .rr-iv-tile {
  display: flex; gap: 14px; align-items: flex-start; text-align: left;
  padding: 16px 18px; border: 1px solid var(--rr-iv-border); border-radius: 16px;
  background: #fff; font: inherit; color: inherit; cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
#icScreen2 .rr-iv-tile:hover { border-color: #d9d9d3; }
#icScreen2 .rr-iv-tile:focus-visible { outline: 2px solid var(--rr-iv-accent); outline-offset: 2px; }
#icScreen2 .rr-iv-tile.active { border-color: var(--rr-iv-accent); background: var(--rr-iv-accent-tint); }
#icScreen2 .rr-iv-tile-ico {
  width: 36px; height: 36px; flex: none; border-radius: 11px;
  border: 1px solid var(--rr-iv-border); background: #fff;
  display: grid; place-items: center; color: var(--rr-iv-ink);
}
#icScreen2 .rr-iv-tile.active .rr-iv-tile-ico { color: var(--rr-iv-accent); border-color: #cfe0fb; }
#icScreen2 .rr-iv-tile-ico svg { width: 19px; height: 19px; }
#icScreen2 .rr-iv-tile-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; display: block; }
#icScreen2 .rr-iv-tile-line { font-size: 13.5px; color: var(--rr-iv-ink-2); margin-top: 3px; display: block; }

/* minmax(0,1fr), not 1fr: the voice strip's horizontal-scroll content
   (rrViVoiceScroll) has an intrinsic content width wider than the column -
   plain 1fr uses auto as the track's min basis, so the track grows to fit
   that content instead of clipping it, crushing the sibling column to a
   sliver. minmax(0,1fr) forces the track to the fair-share width and lets
   the voice strip's own overflow-x scroll within it instead. */
#icScreen2 .rr-iv-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; }
#icScreen2 .rr-iv-two-l { padding-right: 30px; min-width: 0; }
#icScreen2 .rr-iv-two-r { padding-left: 30px; border-left: 1px solid var(--rr-iv-border); min-width: 0; }
#icScreen2 .rr-iv-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
/* Focus-area input: real element is a single-line <input>, not the
   reference's <textarea> - kept as-is (changing input type would be a
   behaviour change, not a visual one), restyled to the same card
   language as .rr-iv-ta minus the textarea-only sizing/resize. */
#icScreen2 .icw-focus-input {
  width: 100%; min-width: 160px; padding: 13px 14px;
  border: 1px solid var(--rr-iv-border); border-radius: 12px; background: #fff;
  font: inherit; font-size: 14px; color: var(--rr-iv-ink);
}
#icScreen2 .icw-focus-input::placeholder {
  color: var(--rr-iv-ink-2);
  /* Placeholder-only, not the input's own font-size: the design's field is
     a <textarea> (kept as a single-line <input> here deliberately, a real
     behaviour difference documented above icw-focus-input's own rule) - a
     textarea wraps long placeholder text across lines, a single-line input
     can only clip it. Measured (canvas ctx.measureText, same font stack) at
     this column's real ~220px available width: the design's exact
     placeholder string needs ~282px at the input's own 14px, ~222px at
     11px (still over), ~212px at 10.5px - comfortable margin, verified
     live, not guessed.
  */
  font-size: 10.5px;
}
#icScreen2 .rr-iv-caption { font-size: 13px; color: var(--rr-iv-ink-2); margin-top: 8px; }

#icScreen2 .rr-iv-adv {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; border: 1px solid var(--rr-iv-border); border-radius: 16px;
  background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
#icScreen2 .rr-iv-adv-chev { width: 20px; height: 20px; margin-left: auto; flex: none; color: var(--rr-iv-ink-2); transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
#icScreen2 .rr-iv-adv[aria-expanded="true"] .rr-iv-adv-chev { transform: rotate(180deg); }
#icScreen2 .rr-iv-advpanel { padding: 18px 18px 4px; display: grid; gap: 18px; }
#icScreen2 .rr-iv-advpanel[hidden] { display: none; }

/* Follow-up-frequency chips: real setting (icSetFollowUpFrequency), keyed
   off .active like every other tile in this screen, not the reference's
   [aria-checked="true"] - same convention as the length/difficulty tiles. */
#icScreen2 .rr-iv-chips { display: flex; gap: 10px; flex-wrap: wrap; }
#icScreen2 .rr-iv-chip {
  padding: 8px 16px; border: 1px solid var(--rr-iv-border); border-radius: 999px;
  background: #fff; font: inherit; font-size: 13.5px; color: var(--rr-iv-ink-2); cursor: pointer;
}
#icScreen2 .rr-iv-chip.active { border-color: var(--rr-iv-accent); background: var(--rr-iv-accent-tint); color: var(--rr-iv-accent); font-weight: 600; }
#icScreen2 .rr-iv-chip:focus-visible { outline: 2px solid var(--rr-iv-accent); outline-offset: 2px; }

/* Voice picker: design's selected-card + toggle + dropdown shape (see the
   "Voice picker" comment block near .rr-iv-voice/.rr-vi__voice-scroll in
   the base rules above for the structural rationale) - colour/spacing
   tokens refreshed to rr-iv-* here, same convention as every other screen-2
   component. */
#icScreen2 .rr-iv-voice { border-color: var(--rr-iv-accent); background: var(--rr-iv-accent-tint); }
#icScreen2 .rr-iv-play { border-color: var(--rr-iv-accent); color: var(--rr-iv-accent); }
#icScreen2 .rr-iv-voice-chev { color: var(--rr-iv-ink-2); }
#icScreen2 .rr-vi__voice { border-radius: 12px; border-color: var(--rr-iv-border); }
#icScreen2 .rr-vi__voice:hover { border-color: #d9d9d3; }
#icScreen2 .rr-vi__voice.is-selected {
  border-color: var(--rr-iv-accent); background: var(--rr-iv-accent-tint);
  box-shadow: 0 0 0 1px var(--rr-iv-accent) inset;
}
#icScreen2 .rr-vi__voice.is-selected .rr-vi__voice-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rr-iv-accent); }
#icScreen2 .rr-vi__voice-name { font-size: 14px; color: var(--rr-iv-ink); }
#icScreen2 .rr-vi__voice-personality { font-size: 13px; color: var(--rr-iv-ink-2); }
#icScreen2 .rr-vi__voice .rr-iv-vcheck { color: var(--rr-iv-accent); }
#icScreen2 .rr-vi__voice-play { border-color: var(--rr-iv-border); color: var(--rr-iv-ink-2); }
#icScreen2 .rr-vi__voice-play:hover { color: var(--rr-iv-ink); }
#icScreen2 .rr-vi__voice.is-selected .rr-vi__voice-play { background: var(--rr-iv-accent); border-color: var(--rr-iv-accent); }

/* Summary sidebar: restyled with rr-iv-* tokens, kept as its own
   persistent column (approved - real wiring via icwUpdateSummary). */
#icScreen2 .icw-summary { border: 1px solid var(--rr-iv-border); border-radius: 16px; padding: 18px 20px; background: #fff; }
#icScreen2 .icw-summary-title { font-size: 15px; font-weight: 600; color: var(--rr-iv-ink); margin: 0 0 12px; }
#icScreen2 .icw-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 9px 0; border-top: 1px solid #F0F0EC; }
#icScreen2 .icw-summary-row:first-of-type { border-top: 0; }
#icScreen2 .icw-summary-row[hidden] { display: none; }
#icScreen2 .icw-summary-k { color: var(--rr-iv-ink-2); }
#icScreen2 .icw-summary-v { color: var(--rr-iv-ink); font-weight: 500; text-align: right; }

/* ---- responsive: screen 2's own breakpoints, not screen 1's.
   1. 4-tile squeeze: with all four real options restored per grid,
      tiles run tight below ~1450px viewport (the main column's share
      of the card minus padding and 3 gaps), so the grids drop to a
      2x2 there - text stays a comfortable width in each tile, and
      the selected tile is still visible in the first two rows of the
      column, not after.
   2. Columns collapse to one at a narrower point than screen 1's
      1180px - the summary sidebar (32% column) degrades gracefully
      at a narrower width than the avatar stage (which needs real
      pixel width to render the figure) ever could, so there's no
      reason to give up the two-column layout as early. Below it, the
      tile grids also collapse to a single column, matching the
      reference's own single-column mobile pattern. ---- */
@media (max-width: 1450px) {
  #icScreen2 .rr-iv-grid3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  #icScreen2 .rr-iv-split { grid-template-columns: 1fr; }
  #icScreen2 .rr-iv-col-r { border-left: 0; border-top: 1px solid var(--rr-iv-border); }
  #icScreen2 .rr-iv-grid3 { grid-template-columns: 1fr; }
  #icScreen2 .rr-iv-two { grid-template-columns: 1fr; }
  #icScreen2 .rr-iv-two-l { padding-right: 0; }
  #icScreen2 .rr-iv-two-r { padding-left: 0; border-left: 0; padding-top: 20px; }
  #icScreen2 .rr-iv-foot { flex-direction: column; align-items: flex-start; }
}

/* Screen 2's old icw-* visual layer (tile-grid/tile/focus-input/
   advanced-toggle+body+help/summary/back) is fully superseded by the
   #icScreen2 .rr-iv-* port above - retired, not left dead alongside it. */
.rr-vi__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rr-vi__chip {
  display: inline-flex; align-items: center; justify-content: center;
  flex-direction: column;
  min-width: 60px; height: 56px; padding: 0 14px;
  border-radius: 12px;
  background: var(--vi-surface);
  border: 1px solid var(--vi-border);
  color: var(--vi-fg);
  font-family: inherit; cursor: pointer;
  transition: all 180ms ease; line-height: 1.1;
}
.rr-vi__chip:hover { border-color: var(--vi-border-hover); }
.rr-vi__chip.is-selected, .rr-vi__chip.active {
  background: var(--vi-accent-tint);
  border-color: var(--vi-accent);
  color: var(--vi-accent);
  box-shadow: 0 0 0 1px var(--vi-accent) inset;
}
.rr-vi__chip-n { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.rr-vi__chip-meta {
  margin-top: 2px; font-size: 11.5px; color: var(--vi-fg-subtle); font-weight: 400;
}
.rr-vi__chip.is-selected .rr-vi__chip-meta,
.rr-vi__chip.active .rr-vi__chip-meta { color: var(--vi-accent); opacity: 0.85; }
/* Interview setup polish (49-interview-setup-polish.md). Applied to the real
   classes: voice rail #rrViVoiceScroll / .rr-vi__voice, question pills
   .ic-bound-pill / .ic-bound-pill-sub. */
/* Change 1: smoother voice-rail scroll. scroll-snap-type + scrollbar already
   exist (prior PRs); this adds momentum / smooth-behaviour / overscroll. */
#rrViVoiceScroll { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rr-vi__voice { scroll-snap-align: center; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
/* Change 2: hover lift on voice cards (cursor:grab kept from the drag PR). */
.rr-vi__voice:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(56, 104, 204, 0.25); border-color: rgba(56, 104, 204, 0.5); }
@media (hover: none) { .rr-vi__voice:hover { transform: none; box-shadow: none; } }
.rr-vi__voice.is-selected { border-color: var(--vi-accent); box-shadow: 0 0 0 2px rgba(56, 104, 204, 0.4); }
/* Change 3: drop the "~X min" estimate from the question-count pills. The
   number (.ic-bound-pill-n) is already 22px and the pill already centers. */
.ic-bound-pill-sub { display: none; }
.rr-vi__chip--single {
  flex-direction: row; height: 40px; min-width: 0; padding: 0 18px;
  font-size: 13.5px; font-weight: 500;
}

/* --- 7. Focus area --- */
.rr-vi__focus {
  width: 100%; height: 44px; box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-radius-md);
  color: var(--vi-fg);
  padding: 0 16px;
  font-family: inherit; font-size: 13.5px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.rr-vi__focus::placeholder { color: var(--vi-fg-subtle); }
.rr-vi__focus:focus {
  outline: none; background: #fff;
  border-color: var(--vi-accent-border);
  box-shadow: 0 0 0 3px rgba(36, 72, 255,0.16);
}

/* --- Right column --- */
.rr-vi__aside {
  position: sticky; top: 24px;
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}
.rr-vi__summary, .rr-vi__start {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--vi-radius-lg);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(36, 72, 255, 0.06),
    0 12px 28px -8px rgba(17, 17, 20, 0.10),
    0 4px 12px rgba(17, 17, 20, 0.04);
}
.rr-vi__summary { padding: 22px 24px 18px; }
.rr-vi__summary-title {
  font-weight: 600; font-size: 15px; color: var(--vi-fg);
  margin: 0 0 14px; letter-spacing: -0.005em;
}
.rr-vi__summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rr-vi__summary-item { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 12px; }
.rr-vi__summary-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--vi-accent-tint); color: var(--vi-accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.rr-vi__summary-label {
  font-size: 13.5px; font-weight: 600; color: var(--vi-fg);
  display: block; line-height: 1.2; margin-bottom: 2px;
}
.rr-vi__summary-value {
  font-size: 13px; color: var(--vi-fg-muted);
  display: block; line-height: 1.3;
}
.rr-vi__summary-value-muted { color: var(--vi-fg-subtle); font-style: italic; }

/* --- Start panel (redesigned: disc + waveform + glass CTA) --- */
.rr-vi__start { padding: 28px 24px 22px; text-align: center; }

/* Square visual: orbit ring + disc + lens highlight + halo + waveform */
.rr-vi__start-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 240px;
  margin: 4px auto 18px;
  display: grid;
  place-items: center;
}
.rr-vi__start-orbit {
  position: absolute; inset: 4%;
  border-radius: 50%;
  border: 1px dashed rgba(36, 72, 255, 0.22);
  animation: rr-vi-orbit-rotate 28s linear infinite;
}
.rr-vi__start-orbit::before {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  top: 78%; left: 8%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #fff 30%, var(--vi-accent-border) 50%, var(--vi-accent) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.6),
    0 0 8px rgba(36, 72, 255, 0.55),
    0 0 16px rgba(36, 72, 255, 0.35);
}
.rr-vi__start-disc {
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #FFFFFF 0%, #F3F6FC 45%, #E0E6F2 100%);
  box-shadow:
    0 0 0 1px rgba(17, 17, 20, 0.06),
    inset 0 3px 8px rgba(255,255,255,1),
    inset 0 -10px 30px rgba(36, 72, 255, 0.10),
    0 2px 4px rgba(17, 17, 20, 0.05),
    0 14px 32px -10px rgba(36, 72, 255, 0.28);
}
.rr-vi__start-disc::before,
.rr-vi__start-disc::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.rr-vi__start-disc::before {
  inset: 8%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(243,246,252,0.2) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -2px 8px rgba(36, 72, 255, 0.06);
}
.rr-vi__start-disc::after {
  inset: 18%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #F7F9FD 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -3px 10px rgba(36, 72, 255, 0.05);
}
.rr-vi__start-lens {
  position: absolute; inset: 12%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 35% at 30% 18%, rgba(255,255,255,0.85), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 35% 25% at 72% 82%, rgba(36, 72, 255, 0.16), rgba(36, 72, 255, 0) 60%);
  mix-blend-mode: screen;
}
.rr-vi__start-halo {
  position: absolute;
  width: 55%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 72, 255, 0.18), rgba(36, 72, 255, 0) 65%);
  filter: blur(10px);
}
.rr-vi__start-wave {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  height: 50%; width: 52%;
  z-index: 2;
}
.rr-vi__start-wave .rr-vi__start-wave-bar {
  flex: 1 1 auto;
  background: linear-gradient(180deg, rgba(36, 72, 255, 0.78) 0%, var(--vi-accent) 100%);
  border-radius: 999px;
  height: 12%;
  opacity: 0.85;
  box-shadow: 0 0 8px rgba(36, 72, 255, 0.30), 0 0 14px rgba(36, 72, 255, 0.16);
  transition: none;
  will-change: height, opacity;
}

.rr-vi__start-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; font-size: 28px; line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--vi-fg);
  margin: 0 0 12px;
  text-align: center;
  text-wrap: balance;
}
.rr-vi__start-title em {
  font-style: normal; color: var(--vi-accent); font-weight: 600;
}
.rr-vi__start-desc {
  font-size: 14px; line-height: 1.55; color: var(--vi-fg-muted);
  margin: 0 auto 22px; max-width: 320px;
}

.rr-vi__start-cta-wrap {
  position: relative;
  width: 100%;
}
.rr-vi__start-cta-wrap::before {
  content: "";
  position: absolute;
  inset: -6px -16px;
  border-radius: 999px;
  background:
    radial-gradient(50% 80% at 30% 50%, rgba(36, 72, 255, 0.42), rgba(36, 72, 255, 0) 70%),
    radial-gradient(50% 80% at 75% 50%, rgba(36, 72, 255, 0.28), rgba(36, 72, 255, 0) 70%);
  filter: blur(12px);
  z-index: 0;
  pointer-events: none;
}
.rr-vi__start-btn {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 60px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: var(--vi-fg);
  font-family: inherit; font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -10px 24px rgba(36, 72, 255, 0.18),
    0 0 0 1px rgba(36, 72, 255, 0.18),
    0 0 24px rgba(36, 72, 255, 0.30),
    0 12px 24px -6px rgba(36, 72, 255, 0.28);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.rr-vi__start-btn::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 55%;
  border-radius: 999px 999px 40px 40px / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  pointer-events: none;
}
.rr-vi__start-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 24px rgba(36, 72, 255, 0.22),
    0 0 0 1px rgba(36, 72, 255, 0.30),
    0 0 32px rgba(36, 72, 255, 0.36),
    0 14px 28px -6px rgba(36, 72, 255, 0.34);
}
.rr-vi__start-btn:active { transform: translateY(0); opacity: 0.97; }
.rr-vi__start-btn-mic {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: var(--vi-accent);
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(17, 17, 20, 0.10),
    0 6px 14px -4px rgba(36, 72, 255, 0.32);
}
.rr-vi__start-btn-mic svg { fill: var(--vi-accent); }
.rr-vi__start-btn-label {
  flex: 1 1 auto;
  font-size: 15px; font-weight: 500;
  color: var(--vi-fg);
  letter-spacing: -0.005em;
}
.rr-vi__start-btn-chev {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--vi-accent);
  margin-right: 4px;
  transition: transform 200ms ease;
}
.rr-vi__start-btn:hover .rr-vi__start-btn-chev { transform: translateX(3px); }

/* Orbit ring rotation keyframe */
@keyframes rr-vi-orbit-rotate {
  to { transform: rotate(360deg); }
}

/* Honour reduced-motion preferences for the orbit. The JS wave loop also bails. */
@media (prefers-reduced-motion: reduce) {
  .rr-vi__start-orbit { animation: none; }
}

/* --- Mobile (≤768px) --- */
@media (max-width: 768px) {
  .rr-vi__scope { padding: 14px 12px 96px; }
  .rr-vi__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rr-vi__steps, .rr-vi__aside { display: contents; }
  .rr-vi__aside { position: static; }

  /* Glass treatment preserved on mobile with a lighter blur for performance */
  .rr-vi__step, .rr-vi__summary, .rr-vi__start {
    border-radius: 16px; padding: 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 0 0 1px rgba(36, 72, 255, 0.05),
      0 4px 12px -4px rgba(17, 17, 20, 0.08);
  }
  .rr-vi__step-head { gap: 10px; margin-bottom: 12px; }
  .rr-vi__step-badge { width: 24px; height: 24px; font-size: 12px; margin-top: 1px; }
  .rr-vi__step-title { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
  .rr-vi__step-help { font-size: 12px; }

  .rr-vi__cv-empty { padding: 18px 12px 12px; }
  .rr-vi__jd { min-height: 96px; padding: 12px 12px 28px; font-size: 13px; border-radius: 12px; }
  .rr-vi__focus { height: 44px; padding: 0 12px; font-size: 13px; border-radius: 12px; }

  .rr-vi__row-split { grid-template-columns: 1fr; gap: 12px; }
  .rr-vi__mode-grid { grid-template-columns: 1fr; gap: 10px; }
  .rr-vi__mode { padding: 14px; padding-right: 40px; border-radius: 14px; }
  .rr-vi__mode-name { font-size: 14px; }
  .rr-vi__mode-desc { font-size: 12px; padding-left: 0; }

  .rr-vi__voice-scroll { gap: 8px; padding: 10px 2px 4px; }
  .rr-vi__voice { padding: 10px 12px; border-radius: 14px; }
  .rr-vi__voice-avatar { width: 34px; height: 34px; }
  .rr-vi__voice-name { font-size: 13px; }
  .rr-vi__voice-personality { font-size: 11px; }
  .rr-vi__voice-play { width: 24px; height: 24px; }

  .rr-vi__chips {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  .rr-vi__chip { height: auto; min-height: 58px; padding: 10px 8px; border-radius: 14px; min-width: 0; }
  .rr-vi__chip-n { font-size: 16px; }
  .rr-vi__chip-meta { font-size: 11px; margin-top: 2px; }
  .rr-vi__chip--single { min-height: 44px; padding: 0 12px; font-size: 13px; font-weight: 600; }

  /* Summary becomes 2-col tile grid at top */
  .rr-vi__summary { order: -1; padding: 14px; }
  .rr-vi__summary-title { font-size: 14px; font-weight: 700; margin: 0 0 10px; }
  .rr-vi__summary-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  .rr-vi__summary-item {
    display: block; padding: 10px; border-radius: 12px;
    background: #F8FAFC; border: 1px solid #E5E7EB;
  }
  .rr-vi__summary-icon { display: none; }
  .rr-vi__summary-label {
    font-size: 11px; line-height: 1.2; color: var(--vi-fg-muted);
    font-weight: 500; margin-bottom: 4px;
  }
  .rr-vi__summary-value { font-size: 12.5px; line-height: 1.35; color: var(--vi-fg); font-weight: 600; }
  .rr-vi__summary-item:last-child { grid-column: 1 / -1; }

  /* Sticky bottom CTA: bottom: 72px to clear the 5-item bottom tab bar */
  .rr-vi__start {
    position: fixed; left: 12px; right: 12px; bottom: 72px;
    z-index: 30; padding: 10px; border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(36, 72, 255, 0.10);
    box-shadow: 0 12px 30px rgba(36, 72, 255, 0.18);
    text-align: left;
  }
  .rr-vi__start-visual, .rr-vi__start-title, .rr-vi__start-desc { display: none; }
  .rr-vi__start-cta-wrap::before { display: none; }
  .rr-vi__start-btn { width: 100%; min-height: 54px; border-radius: 999px; padding: 6px 16px 6px 6px; gap: 12px; }
  .rr-vi__start-btn-mic { flex: 0 0 36px; width: 36px; height: 36px; }
  .rr-vi__start-btn-mic svg { width: 18px; height: 18px; }
  .rr-vi__start-btn-label { font-size: 14px; font-weight: 600; }
}
      
/* ============================================================
   Live Interview redesign (rr-vi-live__), light editorial.
   Scoped under #icLive.rr-vi-live so it only overrides this screen.
   ============================================================ */

/* Hide all legacy live-screen chrome under the new design */
#icLive.rr-vi-live .rr-vi-live__legacy { display: none !important; }

/* When the new live layout is active and the orb is embedded inline,
   hide the fullscreen orb view's now-redundant chrome.
   .ic-orb-stage itself is moved into #rrViLiveOrbHost at runtime; the
   rest of #icOrbView stays for safety but is invisible. */
body.rr-vi-live-active #icOrbView { background: transparent; pointer-events: none; }
body.rr-vi-live-active #icOrbView > * { display: none !important; }
body.rr-vi-live-active #icOrbView .ic-orb-stage { display: block !important; }
/* Inside the new host, the stage fills the slot */
.rr-vi-live__orb-host .ic-orb-stage {
  position: relative !important;
  width: 100%; height: 100%;
  display: block !important;
  margin: 0 !important;
  inset: auto !important;
  transform: none !important;
}
.rr-vi-live__orb-host .ic-orb-svg,
.rr-vi-live__orb-host #icOrbSvg {
  width: 100% !important; height: 100% !important;
  position: relative !important;
  inset: auto !important;
}
.rr-vi-live__orb-host .ic-orb-glow,
.rr-vi-live__orb-host #icOrbGlow {
  position: absolute !important;
  inset: 0 !important;
  transform: none !important;
}

/* Layout shell */
#icLive.rr-vi-live {
  --vi-bg:       #FFFFFF;
  --vi-surface:  var(--rr-surface);
  --vi-border:   var(--rr-border);
  --vi-fg:       var(--rr-ink);
  --vi-fg-muted: var(--rr-ink-muted);
  --vi-fg-subtle:var(--rr-ink-subtle);
  --vi-accent:   var(--rr-accent);
  --vi-accent-tint: var(--rr-accent-tint);
  --vi-coral:    #FAECE7;
  --vi-coral-ink:#9A3A1B;
  --vi-red:      #D9342A;
  display: flex;
  flex-direction: column;
  background: var(--vi-bg);
  color: var(--vi-fg);
  font-family: var(--rr-font-body);
  padding: 20px 28px 28px;
  min-height: 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
#icLive.rr-vi-live *, #icLive.rr-vi-live *::before, #icLive.rr-vi-live *::after { box-sizing: border-box; }

/* Header */
.rr-vi-live__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.rr-vi-live__header-left { display: flex; align-items: center; gap: 14px; }
.rr-vi-live__header-right { display: flex; align-items: center; gap: 16px; }
.rr-vi-live__icon-btn {
  flex: 0 0 auto; width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--vi-surface);
  border: 1px solid var(--vi-border);
  color: var(--vi-fg);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.rr-vi-live__icon-btn:hover { border-color: rgba(17,17,20,0.14); background: #FAFAFA; }
.rr-vi-live__title-block { display: flex; flex-direction: column; }
.rr-vi-live__title {
  font-family: inherit; font-weight: 600; font-size: 20px;
  line-height: 1.15; letter-spacing: -0.012em;
  color: var(--vi-fg); margin: 0;
}
.rr-vi-live__subtitle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--vi-fg-muted);
  margin: 4px 0 0;
}
.rr-vi-live__indicator-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--vi-red);
  box-shadow: 0 0 0 4px rgba(217, 52, 42, 0.14);
  animation: rrViLivePulse 1.4s ease-in-out infinite;
}
@keyframes rrViLivePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217, 52, 42, 0.14); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 52, 42, 0.06); }
}
.rr-vi-live__timer-block { text-align: right; }
.rr-vi-live__timer {
  font-family: var(--rr-font-body);
  font-weight: 600; font-size: 16px;
  color: var(--vi-fg);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rr-vi-live__timer-label {
  font-size: 11.5px; color: var(--vi-fg-subtle);
  margin-top: 3px; letter-spacing: 0.01em;
}

/* Orb slot */
.rr-vi-live__orb-slot {
  position: relative;
  width: 240px; height: 240px;
  margin: 8px auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.rr-vi-live__orb-ring {
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 1.5px dashed rgba(11, 99, 246, 0.28);
  pointer-events: none;
}
.rr-vi-live__orb-host {
  position: relative;
  width: 200px; height: 200px;
  border-radius: 999px;
  overflow: visible;
}

/* Transcript */
.rr-vi-live__transcript-wrap {
  flex: 1 1 auto;
  background: var(--vi-surface);
  border: 1px solid var(--vi-border);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(17,17,20,0.04), 0 1px 2px rgba(17,17,20,0.03);
  padding: 18px 20px 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.rr-vi-live__transcript {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 4px;
  max-height: 38vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(17,17,20,0.14) transparent;
}
.rr-vi-live__transcript::-webkit-scrollbar { width: 6px; }
.rr-vi-live__transcript::-webkit-scrollbar-thumb { background: rgba(17,17,20,0.10); border-radius: 999px; }

/* Bubbles inside the new transcript (overrides the legacy .ic-bubble styles
   only within #icLive.rr-vi-live scope) */
#icLive.rr-vi-live .ic-bubble {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: start;
  gap: 12px;
  margin: 0 0 14px;
  max-width: 100%;
}
#icLive.rr-vi-live .ic-bubble::before {
  content: "";
  display: block;
  width: 32px; height: 32px;
  border-radius: 999px;
  background-color: #E5E7EB;
  background-size: cover;
  background-position: center;
}
#icLive.rr-vi-live .ic-bubble-assistant::before {
  background-image: var(--rr-vi-live-voice-img, none);
}
#icLive.rr-vi-live .ic-bubble-user::before {
  background-color: var(--vi-coral);
  color: var(--vi-coral-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500; font-size: 14px;
  content: "Y";
}
#icLive.rr-vi-live .ic-bubble-body {
  background: #F6F4EF;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px; line-height: 1.5;
  color: var(--vi-fg);
  max-width: 100%;
  word-wrap: break-word;
}
#icLive.rr-vi-live .ic-bubble-user .ic-bubble-body {
  background: var(--vi-coral);
  color: var(--vi-coral-ink);
}
#icLive.rr-vi-live .ic-bubble-error .ic-bubble-body {
  background: #FEF2F2; color: #991B1B;
}
#icLive.rr-vi-live .ic-bubble-replay {
  grid-column: 2;
  justify-self: start;
  margin: 6px 0 0;
  background: transparent;
  border: 1px solid var(--vi-border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px; color: var(--vi-fg-muted);
  cursor: pointer;
}
#icLive.rr-vi-live .ic-bubble-replay:hover { color: var(--vi-fg); border-color: rgba(17,17,20,0.14); }
#icLive.rr-vi-live .ic-bubble-fallback { color: var(--vi-fg-subtle); font-size: 11.5px; font-style: italic; }
#icLive.rr-vi-live .ic-typing .ic-bubble-body { padding: 12px 16px; }
#icLive.rr-vi-live .ic-typing .ic-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--vi-fg-muted);
  display: inline-block; margin-right: 4px;
  animation: rrViTypingDot 1.2s ease-in-out infinite;
}
#icLive.rr-vi-live .ic-typing .ic-dot:nth-child(2) { animation-delay: 0.15s; }
#icLive.rr-vi-live .ic-typing .ic-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes rrViTypingDot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

.rr-vi-live__interim {
  font-size: 12.5px; color: var(--vi-fg-subtle);
  font-style: italic;
  padding: 4px 4px 0;
  min-height: 18px;
}

/* Footer / record + end session */
.rr-vi-live__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  margin-top: 8px;
}
.rr-vi-live__status {
  display: inline-flex; align-items: center;
  font-size: 12.5px; color: var(--vi-fg-muted);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--vi-accent-tint);
  border: 1px solid rgba(11,99,246,0.12);
}
.rr-vi-live__record {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--vi-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(11, 99, 246, 0.55);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.rr-vi-live__record:hover { background: #0851D8; transform: translateY(-1px); }
.rr-vi-live__record .ic-rec-ico { font-size: 12px; line-height: 1; }
.rr-vi-live__end-pill {
  background: transparent;
  border: 1px solid rgba(217, 52, 42, 0.32);
  color: var(--vi-red);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}
.rr-vi-live__end-pill:hover { background: rgba(217, 52, 42, 0.06); border-color: rgba(217, 52, 42, 0.5); }

/* Bubble bg-leak fix: reset the outer bubble container so only the inner
   .ic-bubble-body carries the visible background.
   (Legacy .ic-bubble-user has background:#2563EB at index.html:52107.) */
#icLive.rr-vi-live .ic-bubble-user,
#icLive.rr-vi-live .ic-bubble-assistant,
#icLive.rr-vi-live .ic-bubble-error {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  max-width: 100%;
  align-self: stretch;
}

/* Two-column layout: main + right-side feedback panel */
.rr-vi-live__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  flex: 1 1 auto;
  min-height: 0;
}
@media (min-width: 1024px) {
  .rr-vi-live__cols { grid-template-columns: minmax(0, 1fr) 340px; }
}
.rr-vi-live__main {
  display: flex; flex-direction: column;
  min-width: 0;
}

/* Feedback panel */
.rr-vi-live__feedback {
  background: var(--vi-surface);
  border: 1px solid var(--vi-border);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(17,17,20,0.04), 0 1px 2px rgba(17,17,20,0.03);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.rr-vi-live__feedback-title {
  font-family: inherit; font-weight: 600; font-size: 14.5px;
  letter-spacing: -0.005em;
  color: var(--vi-fg);
  margin: 0 0 4px;
}
.rr-vi-live__metric { display: flex; flex-direction: column; gap: 6px; }
.rr-vi-live__metric--tip {
  background: #FFF9F0;
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
}
.rr-vi-live__metric-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
}
.rr-vi-live__metric-icon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 8px;
  background: var(--vi-accent-tint);
  color: var(--vi-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.rr-vi-live__metric-icon--tip {
  background: rgba(245, 158, 11, 0.16);
  color: #B45309;
}
.rr-vi-live__metric-label {
  font-weight: 600; color: var(--vi-fg);
  font-size: 13px;
}
.rr-vi-live__metric-value {
  margin-left: auto;
  font-weight: 600; color: var(--vi-fg);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rr-vi-live__metric-value[hidden] { display: none; }
.rr-vi-live__metric-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(17, 17, 20, 0.06);
  overflow: hidden;
}
.rr-vi-live__metric-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--vi-fg-subtle);
  border-radius: 999px;
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease;
}
.rr-vi-live__metric--good .rr-vi-live__metric-fill { background: #10b981; }
.rr-vi-live__metric--bad  .rr-vi-live__metric-fill { background: #E25543; }
.rr-vi-live__metric--good .rr-vi-live__metric-value { color: #047857; }
.rr-vi-live__metric--bad  .rr-vi-live__metric-value { color: #B91C1C; }
.rr-vi-live__metric-sub {
  font-size: 11.5px; line-height: 1.4;
  color: var(--vi-fg-muted);
  margin: 0;
}
.rr-vi-live__metric-tip {
  font-size: 12.5px; line-height: 1.5;
  color: #5C3F0D;
  margin: 0;
}
.rr-vi-live__metric-tip[hidden] { display: none; }

/* Tip skeleton shimmer */
.rr-vi-live__skeleton { display: flex; flex-direction: column; gap: 6px; }
.rr-vi-live__skeleton-line {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.05) 75%);
  background-size: 200% 100%;
  animation: rrViShimmer 1.4s ease-in-out infinite;
  width: 100%;
}
@keyframes rrViShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile */
@media (max-width: 768px) {
  #icLive.rr-vi-live { padding: 14px 12px 92px; }
  .rr-vi-live__header { gap: 12px; margin-bottom: 12px; }
  .rr-vi-live__title { font-size: 17px; }
  .rr-vi-live__subtitle { font-size: 11.5px; }
  .rr-vi-live__icon-btn { width: 36px; height: 36px; }
  .rr-vi-live__timer { font-size: 14px; }
  .rr-vi-live__timer-label { font-size: 10.5px; }
  .rr-vi-live__orb-slot { width: 200px; height: 200px; margin: 4px auto 14px; }
  .rr-vi-live__orb-host { width: 168px; height: 168px; }
  .rr-vi-live__transcript-wrap { padding: 12px 12px 8px; border-radius: 14px; max-width: 100%; }
  .rr-vi-live__transcript { max-height: 36vh; }
  #icLive.rr-vi-live .ic-bubble-body { font-size: 13.5px; padding: 9px 12px; }
  .rr-vi-live__feedback { padding: 14px; border-radius: 14px; }
  .rr-vi-live__feedback-title { font-size: 13.5px; }
}
    
/* ============================================================
   Live Interview: glass aesthetic layer (rr-vi-live).
   Retargets the existing rr-vi-live__ selectors; placed after the
   light-editorial block so equal-specificity rules win by source order.
   Pure CSS only: no markup or JS hooks changed. The orb stays the 5-state
   SVG (reskinned into a glass disc), the transcript stays multi-bubble, and
   the timer block is hidden while its timeout logic in tick() stays intact.
   Corner ambient blobs from the prototype are intentionally omitted to avoid
   needing overflow:hidden on the scrolling live screen; the stage gradient
   carries the ambient.
   ============================================================ */

/* Stage: cool lavender-blue ambient */
#icLive.rr-vi-live { color: #171a2a; background: transparent; }

/* Header glass */
.rr-vi-live__header { background: rgba(255,255,255,0.5); backdrop-filter: blur(12px) saturate(170%); -webkit-backdrop-filter: blur(12px) saturate(170%); border: 1px solid rgba(255,255,255,0.7); border-radius: 16px; box-shadow: 0 4px 20px -8px rgba(120,140,200,0.15); padding: 12px 16px; }
.rr-vi-live__icon-btn { background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.7); }
.rr-vi-live__icon-btn:hover { background: rgba(255,255,255,0.78); border-color: rgba(36, 72, 255,0.5); }
.rr-vi-live__title { color: #171a2a; }
.rr-vi-live__subtitle { color: rgba(40,50,80,0.65); }
.rr-vi-live__indicator-dot { background: var(--rr-accent); box-shadow: 0 0 8px var(--rr-accent); animation: rrViGlassPulse 1.6s ease-in-out infinite; }
@keyframes rrViGlassPulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

/* Timer hidden (12-minute timeout in tick() preserved) */
.rr-vi-live__timer-block { display: none !important; }

/* Orb: reskin the existing 5-state SVG inside a glass disc + dotted ring */
.rr-vi-live__orb-ring { border: 2px dotted rgba(36, 72, 255,0.5); animation: rrViDottedSpin 30s linear infinite; }
@keyframes rrViDottedSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.rr-vi-live__orb-host { background: radial-gradient(circle at 35% 30%,rgba(255,255,255,0.55) 0%,rgba(240,246,255,0.35) 50%,rgba(220,232,250,0.25) 100%); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 0 0 1px rgba(180,200,240,0.15) inset, 0 12px 36px -10px rgba(140,170,230,0.35), 0 1px 0 rgba(255,255,255,0.85) inset; overflow: hidden; }
.rr-vi-live__orb-host::before { content: ''; position: absolute; top: 8%; left: 18%; width: 30%; height: 18%; background: radial-gradient(ellipse,rgba(255,255,255,0.8) 0%,transparent 70%); border-radius: 50%; filter: blur(4px); pointer-events: none; z-index: 3; }
.rr-vi-live__orb-host::after { content: ''; position: absolute; bottom: 14%; right: 18%; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle,#ffffff 0%,rgba(255,255,255,0.6) 50%,transparent 100%); box-shadow: 0 0 6px rgba(255,255,255,0.8); pointer-events: none; z-index: 3; }

/* Live orb visual swap: blue 21-bar waveform inside the glass disc.
   The 5-state machine (icOrbSetState) is unchanged; it now reflects state to
   #rrViLiveOrbHost[data-orb-state], which drives the bar pace below. The
   original orange SVG blob is hidden ONLY inside the live host, so the Start
   card still shows it. Bars react to the 5 states (pace), not real-time RMS. */
#rrViLiveOrbHost #icOrbSvg, #rrViLiveOrbHost #icOrbGlow { display: none !important; }
.rr-vi-live__waveform { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; width: 120px; height: 140px; margin: auto; pointer-events: none; z-index: 2; }
.rr-vi-live__wave-bar { flex: 1; background: linear-gradient(180deg, var(--rr-accent) 0%, var(--rr-accent) 100%); border-radius: 2px; box-shadow: 0 0 4px rgba(36, 72, 255,0.5); animation: rr-vi-wave-pulse 1.4s ease-in-out infinite; transform-origin: center; }
.rr-vi-live__wave-bar:nth-child(1)  { height: 10%;  animation-delay: 0.0s; }
.rr-vi-live__wave-bar:nth-child(2)  { height: 18%;  animation-delay: 0.08s; }
.rr-vi-live__wave-bar:nth-child(3)  { height: 28%;  animation-delay: 0.16s; }
.rr-vi-live__wave-bar:nth-child(4)  { height: 38%;  animation-delay: 0.24s; }
.rr-vi-live__wave-bar:nth-child(5)  { height: 50%;  animation-delay: 0.32s; }
.rr-vi-live__wave-bar:nth-child(6)  { height: 62%;  animation-delay: 0.40s; }
.rr-vi-live__wave-bar:nth-child(7)  { height: 74%;  animation-delay: 0.48s; }
.rr-vi-live__wave-bar:nth-child(8)  { height: 84%;  animation-delay: 0.56s; }
.rr-vi-live__wave-bar:nth-child(9)  { height: 92%;  animation-delay: 0.64s; }
.rr-vi-live__wave-bar:nth-child(10) { height: 97%;  animation-delay: 0.72s; }
.rr-vi-live__wave-bar:nth-child(11) { height: 100%; animation-delay: 0.80s; }
.rr-vi-live__wave-bar:nth-child(12) { height: 97%;  animation-delay: 0.72s; }
.rr-vi-live__wave-bar:nth-child(13) { height: 92%;  animation-delay: 0.64s; }
.rr-vi-live__wave-bar:nth-child(14) { height: 84%;  animation-delay: 0.56s; }
.rr-vi-live__wave-bar:nth-child(15) { height: 74%;  animation-delay: 0.48s; }
.rr-vi-live__wave-bar:nth-child(16) { height: 62%;  animation-delay: 0.40s; }
.rr-vi-live__wave-bar:nth-child(17) { height: 50%;  animation-delay: 0.32s; }
.rr-vi-live__wave-bar:nth-child(18) { height: 38%;  animation-delay: 0.24s; }
.rr-vi-live__wave-bar:nth-child(19) { height: 28%;  animation-delay: 0.16s; }
.rr-vi-live__wave-bar:nth-child(20) { height: 18%;  animation-delay: 0.08s; }
.rr-vi-live__wave-bar:nth-child(21) { height: 10%;  animation-delay: 0.0s; }
@keyframes rr-vi-wave-pulse { 0%, 100% { transform: scaleY(1); opacity: 0.9; } 50% { transform: scaleY(0.7); opacity: 1; } }
/* State-aware pace, driven by the JS-reflected attribute on the host */
#rrViLiveOrbHost[data-orb-state="idle"] .rr-vi-live__wave-bar { animation-duration: 2.2s; opacity: 0.75; }
#rrViLiveOrbHost[data-orb-state="speaking"] .rr-vi-live__wave-bar { animation-duration: 1.0s; opacity: 1; }
#rrViLiveOrbHost[data-orb-state="listening"] .rr-vi-live__wave-bar { animation-duration: 0.7s; opacity: 1; }
#rrViLiveOrbHost[data-orb-state="thinking"] .rr-vi-live__wave-bar { animation-duration: 1.8s; opacity: 0.85; }
#rrViLiveOrbHost[data-orb-state="transcribing"] .rr-vi-live__wave-bar { animation-duration: 0.9s; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .rr-vi-live__wave-bar { animation: none; opacity: 0.85; } }
/* Real-audio reactivity: the waveform CONTAINER scales with orb.lastRms,
   written to --rms-level by the rAF loop (icOrbRenderFrame). Bars keep their
   per-bar staggered pulse; the container breathes with actual mic/TTS volume.
   Idle/thinking force a static scale since RMS is meaningless then. */
.rr-vi-live__waveform { transform: scaleY(calc(0.45 + 0.55 * var(--rms-level, 0.4))); transition: transform 80ms ease-out; transform-origin: center; }
#rrViLiveOrbHost[data-orb-state="idle"] .rr-vi-live__waveform,
#rrViLiveOrbHost[data-orb-state="thinking"] .rr-vi-live__waveform { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .rr-vi-live__waveform { transform: scaleY(0.85); transition: none; } }

/* Transcript + bubbles glass */
.rr-vi-live__transcript-wrap { background: rgba(255,255,255,0.5); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255,255,255,0.75); border-radius: 20px; box-shadow: 0 12px 40px -12px rgba(120,140,200,0.2), 0 1px 0 rgba(255,255,255,0.8) inset; }
#icLive.rr-vi-live .ic-bubble-body { background: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.7); color: #171a2a; }
#icLive.rr-vi-live .ic-bubble-assistant::before { background-color: #f4d4c0; }
#icLive.rr-vi-live .ic-bubble-replay { background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.75); color: #3a4258; }
#icLive.rr-vi-live .ic-bubble-replay:hover { background: rgba(255,255,255,0.85); border-color: rgba(36, 72, 255,0.5); color: #171a2a; }

/* Status pill glass */
.rr-vi-live__status { background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.7); color: #3a4258; }

/* CTA (record / Tap to answer): light bg + dark text in ALL states */
.rr-vi-live__record { -webkit-appearance: none !important; appearance: none !important; background: linear-gradient(135deg,#ffffff 0%,#e8f2ff 100%) !important; background-color: #ffffff !important; border: 1.5px solid rgba(36, 72, 255,0.55) !important; color: #0a0a0a !important; box-shadow: 0 10px 32px -8px rgba(36, 72, 255,0.45), 0 1px 0 rgba(255,255,255,0.9) inset; }
.rr-vi-live__record:hover { background: linear-gradient(135deg,#ffffff 0%,#dceaff 100%) !important; background-color: #ffffff !important; color: #0a0a0a !important; border-color: rgba(36, 72, 255,0.85) !important; transform: translateY(-1px); }
.rr-vi-live__record:active { background: linear-gradient(135deg,#f8fbff 0%,#dceaff 100%) !important; color: #0a0a0a !important; transform: translateY(0); }
.rr-vi-live__record:focus, .rr-vi-live__record:focus-visible { outline: none; color: #0a0a0a !important; box-shadow: 0 10px 32px -8px rgba(36, 72, 255,0.45), 0 0 0 3px rgba(36, 72, 255,0.35), 0 1px 0 rgba(255,255,255,0.9) inset; }
.rr-vi-live__record .ic-rec-label { color: #0a0a0a !important; }
.rr-vi-live__record:hover .ic-rec-label, .rr-vi-live__record:active .ic-rec-label, .rr-vi-live__record:focus .ic-rec-label { color: #0a0a0a !important; }
.rr-vi-live__record .ic-rec-ico { color: #ff5a5a !important; font-size: 9px; animation: rrViCtaDot 1.4s ease-in-out infinite; }
@keyframes rrViCtaDot { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }

/* End session: light bg + dark text in ALL states */
.rr-vi-live__end-pill { -webkit-appearance: none !important; appearance: none !important; background: #ffffff !important; background-color: #ffffff !important; border: 1px solid rgba(40,50,80,0.2) !important; color: #0a0a0a !important; }
.rr-vi-live__end-pill:hover { background: #fafbff !important; background-color: #fafbff !important; color: #0a0a0a !important; border-color: rgba(40,50,80,0.4) !important; }
.rr-vi-live__end-pill:active { background: #f0f3fa !important; color: #0a0a0a !important; }
.rr-vi-live__end-pill:focus, .rr-vi-live__end-pill:focus-visible { outline: none; color: #0a0a0a !important; box-shadow: 0 0 0 3px rgba(36, 72, 255,0.3); }
.rr-vi-live__end-pill span { color: #0a0a0a !important; }
.rr-vi-live__end-pill:hover span, .rr-vi-live__end-pill:active span, .rr-vi-live__end-pill:focus span { color: #0a0a0a !important; }

/* Feedback panel glass */
.rr-vi-live__feedback { background: rgba(255,255,255,0.5); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255,255,255,0.75); border-radius: 20px; box-shadow: 0 12px 40px -12px rgba(120,140,200,0.2), 0 1px 0 rgba(255,255,255,0.8) inset; }
.rr-vi-live__feedback-title { color: #171a2a; }
.rr-vi-live__metric-icon { background: rgba(36, 72, 255,0.18); border: 1px solid rgba(36, 72, 255,0.3); color: var(--rr-accent); }
.rr-vi-live__metric-label, .rr-vi-live__metric-value { color: #171a2a; }
.rr-vi-live__metric-bar { background: rgba(200,210,230,0.5); }
.rr-vi-live__metric-fill { background: linear-gradient(90deg,#5d96ff,#7eb8ff); box-shadow: 0 0 8px rgba(93,150,255,0.5); }
.rr-vi-live__metric-sub { color: rgba(40,50,80,0.6); }

/* Tip card: blue (was amber) */
.rr-vi-live__metric--tip { background: linear-gradient(135deg,rgba(200,225,255,0.5) 0%,rgba(180,210,250,0.35) 100%); border: 1px solid rgba(36, 72, 255,0.4); }
.rr-vi-live__metric-icon--tip { background: rgba(36, 72, 255,0.18); border: 1px solid rgba(36, 72, 255,0.35); color: var(--rr-accent); }
.rr-vi-live__metric--tip .rr-vi-live__metric-label { color: #1a3470; }
.rr-vi-live__metric-tip { color: rgba(26,52,112,0.85); }

@media (prefers-reduced-motion: reduce) {
  .rr-vi-live__orb-ring, .rr-vi-live__indicator-dot, .rr-vi-live__record .ic-rec-ico { animation: none; }
}
    
/* ============================================================
   v2-live: soft-editorial v2 layer for the LIVE interview screen. Follows the
   screen's established layering convention (light-editorial -> glass -> v2):
   placed after the glass block so equal-specificity rules win by source
   order; !important only where the glass layer declared it on the record and
   end controls. LITERAL token values throughout: #icLive has no .tl-theme
   ancestor (the tl-theme scope wraps the setup screen only), the trial-banner
   precedent. Every rule keys off existing state classes and attributes
   (data-orb-state, .listening, metric--good/--bad, :empty); zero JS changes.
   No purple, green or amber; the recording dot is the one red use, error text
   lines may be red. UK English, no em dashes.
   ============================================================ */

/* Canvas: flat warm; ink body text. */
#icLive.rr-vi-live { color: #101010; background: transparent; }

/* Header: flat hairline-ruled bar, 34px circular back control, SG title,
   blue dot + uppercase blue micro-label status. */
.rr-vi-live__header {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-bottom: 1px solid #E2E2DC; border-radius: 0; box-shadow: none;
  padding: 0 0 14px;
}
.rr-vi-live__icon-btn { width: 34px; height: 34px; border-radius: 999px; background: #FFFFFF; border: 1px solid #E2E2DC; color: #101010; }
.rr-vi-live__icon-btn:hover { background: #FFFFFF; border-color: #101010; }
.rr-vi-live__title { font: 500 19px/1.15 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.02em; color: #101010; }
.rr-vi-live__subtitle { font: 500 10.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #2448FF; }
.rr-vi-live__indicator-dot { width: 7px; height: 7px; background: #2448FF; box-shadow: none; }

/* Timer: restored (the glass layer hid it; its tick() logic never stopped).
   Existing DOM values styled into the header right per the mockup. */
.rr-vi-live__timer-block { display: block !important; }
.rr-vi-live__timer { font: 500 15px/1.1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; color: #101010; }
.rr-vi-live__timer-label { font: 500 9.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #A4A49C; margin-top: 3px; }

/* Orb: glossy disc, halo, gloss dots and dashed ring go; the waveform sits
   centred in a white hairline card. State classes keep driving pace/opacity
   (the glass attribute rules remain in force); colour now keys off state too:
   mute when idle or thinking, blue otherwise. */
.rr-vi-live__orb-slot {
  width: 100%; max-width: 760px; height: 150px; margin: 14px auto 18px;
  background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px;
}
.rr-vi-live__orb-ring { display: none; }
.rr-vi-live__orb-host { background: transparent; border: 0; box-shadow: none; overflow: visible; width: 240px; height: 110px; border-radius: 0; }
.rr-vi-live__orb-host::before, .rr-vi-live__orb-host::after { display: none; }
.rr-vi-live__waveform { width: 200px; height: 90px; }
.rr-vi-live__wave-bar { background: #2448FF; box-shadow: none; }
#rrViLiveOrbHost[data-orb-state="idle"] .rr-vi-live__wave-bar,
#rrViLiveOrbHost[data-orb-state="thinking"] .rr-vi-live__wave-bar { background: #A4A49C; }

/* Transcript: white hairline card; interviewer turns plain with an uppercase
   INTERVIEWER micro-label; user turns as a blue tint inset with YOU; Replay
   as the quiet uppercase blue text action. Labels and the empty state are
   CSS-generated (flagged: bypasses i18n, precedent is the existing CSS "Y"
   avatar initial). */
.rr-vi-live__transcript-wrap { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #E2E2DC; border-radius: 10px; box-shadow: none; }
.rr-vi-live__transcript:empty::before { content: "Your conversation will appear here once the interview starts."; display: block; font-size: 12.5px; color: #86867E; padding: 10px 4px; }
#icLive.rr-vi-live .ic-bubble-body { background: transparent; border: 0; color: #3B3B36; font-size: 13.5px; padding: 0 0 2px; }
#icLive.rr-vi-live .ic-bubble-assistant .ic-bubble-body::before { content: "Interviewer"; display: block; font: 500 9.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: #A4A49C; margin-bottom: 3px; }
#icLive.rr-vi-live .ic-bubble-user .ic-bubble-body { background: #F3F6FF; border: 0; border-radius: 8px; padding: 10px 14px; color: #101010; }
#icLive.rr-vi-live .ic-bubble-user .ic-bubble-body::before { content: "You"; display: block; font: 500 9.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: #2448FF; margin-bottom: 3px; }
#icLive.rr-vi-live .ic-bubble-user::before { background-color: #F3F6FF; color: #2448FF; font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-weight: 500; }
#icLive.rr-vi-live .ic-bubble-error .ic-bubble-body { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 8px; padding: 10px 14px; color: #C9594A; }
#icLive.rr-vi-live .ic-bubble-replay { background: transparent; border: 0; border-radius: 0; padding: 2px 0; font: 500 10.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #2448FF; }
#icLive.rr-vi-live .ic-bubble-replay:hover { background: transparent; border: 0; color: #1f3dd9; }
#icLive.rr-vi-live .ic-typing .ic-dot { background: #A4A49C; }
.rr-vi-live__interim { color: #A4A49C; }

/* Footer controls. The status pill is a mute hairline chip in all its
   text-driven states; Tap to answer is the filled blue primary at rest and
   flips white/hairline/red on the existing .listening class (the one red
   use); End session is a quiet hairline pill. !important matches the glass
   layer's declarations. */
.rr-vi-live__status { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #E2E2DC; color: #86867E; }
.rr-vi-live__record {
  background: #2448FF !important; background-color: #2448FF !important;
  border: 1px solid #2448FF !important; color: #fff !important;
  border-radius: 999px; box-shadow: none;
  font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-weight: 500;
}
.rr-vi-live__record:hover { background: #1f3dd9 !important; background-color: #1f3dd9 !important; border-color: #1f3dd9 !important; color: #fff !important; transform: none; box-shadow: none; }
.rr-vi-live__record:active { background: #1f3dd9 !important; color: #fff !important; transform: none; }
.rr-vi-live__record:focus, .rr-vi-live__record:focus-visible { color: #fff !important; box-shadow: 0 0 0 3px rgba(22, 51, 255, 0.25); }
.rr-vi-live__record .ic-rec-label { color: #fff !important; }
.rr-vi-live__record:hover .ic-rec-label, .rr-vi-live__record:active .ic-rec-label, .rr-vi-live__record:focus .ic-rec-label { color: #fff !important; }
.rr-vi-live__record .ic-rec-ico { color: rgba(255, 255, 255, 0.85) !important; }
.rr-vi-live__record.listening {
  background: #FFFFFF !important; background-color: #FFFFFF !important;
  border: 1px solid #E2E2DC !important; color: #C9594A !important;
  animation: none; box-shadow: none;
}
.rr-vi-live__record.listening:hover { background: #FFFFFF !important; border-color: #C9594A !important; color: #C9594A !important; }
.rr-vi-live__record.listening .ic-rec-label,
.rr-vi-live__record.listening:hover .ic-rec-label { color: #C9594A !important; }
.rr-vi-live__record.listening .ic-rec-ico { color: #C9594A !important; }
.rr-vi-live__end-pill { background: #FFFFFF !important; background-color: #FFFFFF !important; border: 1px solid #E2E2DC !important; color: #86867E !important; }
.rr-vi-live__end-pill span { color: #86867E !important; }
.rr-vi-live__end-pill:hover { background: #FFFFFF !important; border-color: #101010 !important; }
.rr-vi-live__end-pill:hover span, .rr-vi-live__end-pill:active span, .rr-vi-live__end-pill:focus span { color: #101010 !important; }

/* Feedback rail: white card, SG title, tint icon tiles, 4px hairline track
   with blue fill. The good/bad state classes keep working but no longer
   change colour (green forbidden; the helper line carries the meaning). */
.rr-vi-live__feedback { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #E2E2DC; border-radius: 10px; box-shadow: none; }
.rr-vi-live__feedback-title { font: 500 14px/1.2 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.01em; color: #101010; }
.rr-vi-live__metric-icon { background: #F3F6FF; border: 0; color: #2448FF; border-radius: 6px; }
.rr-vi-live__metric-label { font-weight: 500; color: #101010; }
.rr-vi-live__metric-value { font-family: "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-weight: 500; color: #101010; }
.rr-vi-live__metric-bar { height: 4px; background: #E2E2DC; }
.rr-vi-live__metric-fill { background: #2448FF; box-shadow: none; }
.rr-vi-live__metric--good .rr-vi-live__metric-fill,
.rr-vi-live__metric--bad .rr-vi-live__metric-fill { background: #2448FF; }
.rr-vi-live__metric--good .rr-vi-live__metric-value,
.rr-vi-live__metric--bad .rr-vi-live__metric-value { color: #101010; }
.rr-vi-live__metric-sub { color: #86867E; }
.rr-vi-live__metric--tip { background: #EFF4FD; border: 1px solid #2448FF; border-radius: 8px; }
.rr-vi-live__metric-icon--tip { background: #FFFFFF; border: 0; color: #2448FF; }
.rr-vi-live__metric--tip .rr-vi-live__metric-label { font: 500 9.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: #2448FF; }
.rr-vi-live__metric-tip { color: #3B3B36; }

/* Resume banner (lives at the top of #icChatWrap, shown on interview entry
   when a saved session exists; flows untouched). */
#icResumeBanner.ic-resume-banner { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; box-shadow: none; }
#icResumeBanner .ic-resume-text strong { font: 500 13.5px/1.35 "Plus Jakarta Sans", system-ui, sans-serif; color: #101010; }
#icResumeBanner .ic-resume-meta { color: #86867E; }
#icResumeBanner .ic-btn { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 8px; color: #86867E; }
#icResumeBanner .ic-btn:hover { border-color: #101010; color: #101010; }
#icResumeBanner .ic-btn-primary { background: #2448FF !important; border-color: #2448FF !important; color: #fff !important; border-radius: 8px; }
#icResumeBanner .ic-btn-primary:hover { background: #1f3dd9 !important; border-color: #1f3dd9 !important; filter: none; }

/* Inline error toast: white card, hairline, the message line in red only. */
#icInlineError.ic-inline-error { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 8px; color: #C9594A; }

/* Mobile: the reshaped orb card goes full width. */
@media (max-width: 768px) {
  .rr-vi-live__orb-slot { width: 100%; height: 130px; margin: 10px auto 14px; }
  .rr-vi-live__orb-host { width: 200px; height: 90px; }
  .rr-vi-live__waveform { width: 170px; height: 74px; }
}
    
/* ── 3D Brain tooltip ── */
.bs-tooltip {
  position:absolute; background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; padding:12px 14px; max-width:220px; z-index:20;
  box-shadow:0 8px 32px rgba(0,0,0,0.4); pointer-events:none;
}
.bs-tip-title { font-size:12px; font-weight:700; color:var(--accent); margin-bottom:3px; }
.bs-tip-role  { font-size:10px; font-weight:600; color:var(--text3); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em; }
.bs-tip-body  { font-size:11px; color:var(--text2); line-height:1.5; }
.bs-tip-score { margin-top:8px; font-size:10px; color:var(--accent); font-weight:600; }

/* ── CHANGE 1: Bottom navigation bar ── */
#mob-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: var(--bg, #111318);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 200;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
/* v3.8 marketing integration: scope mobile bottom nav to #app.
   Without #app.active in the selector, this rule fires on the
   marketing landing too because #mob-bottom-nav is a sibling of
   #app (not a child) and only its visibility is class-toggled. */
.is-mobile #app.active ~ #mob-bottom-nav { display: grid; }

.mob-nav-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; background: transparent; border: none;
  color: var(--text2, #a09e9a); padding: 4px 2px 8px;
  cursor: pointer; opacity: 0.45;
  transition: opacity 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
}
.mob-nav-item.active { opacity: 1; color: #FF6B35; }
.mob-nav-icon { font-size: 22px; line-height: 1.15; }
.mob-nav-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2px; }

/* Hide desktop tab bar; pad content above bottom nav */
.is-mobile .app-nav-tabs { display: none !important; }
.is-mobile .app-body { padding-bottom: 80px !important; }

/* ── CHANGE 2: Analyse step bar ── */
#mob-analyse-bar {
  display: none;
  align-items: center; justify-content: space-between;
  padding: 10px 16px; flex-shrink: 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  background: var(--surface, #1a1d24);
  position: sticky; top: 52px; z-index: 10;
}
.is-mobile #mob-analyse-bar { display: flex; }

.mob-back-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface2, #1f2229);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  color: var(--text2, #a09e9a); font-size: 18px;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mob-back-btn.mob-hidden { opacity: 0; pointer-events: none; }

.mob-dots-row { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mob-step-lbl {
  font-size: 11px; font-weight: 600;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  color: var(--text3, #635f59); letter-spacing: 0.3px;
}
.mob-dots { display: flex; gap: 6px; align-items: center; }
.mob-step-d {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border2, rgba(255,255,255,0.15));
  transition: background 0.2s, width 0.2s;
}
.mob-step-d.mob-d-active { background: #FF6B35; width: 20px; border-radius: 4px; }
.mob-step-d.mob-d-done   { background: rgba(255,107,53,0.4); }

/* Step-based panel visibility */
.is-mobile #simulateView #mob-email-panel { display: block; }
.is-mobile #simulateView #mainResultsArea,
.is-mobile #simulateView #subjectAnalyserPanel { display: none; }

.is-mobile #simulateView.mob-step-2 #mob-email-panel,
.is-mobile #simulateView.mob-step-3 #mob-email-panel { display: none !important; }
.is-mobile #simulateView.mob-step-3 #mainResultsArea,
.is-mobile #simulateView.mob-step-3 #subjectAnalyserPanel { display: block; }

/* "Next →" button, only visible on mobile step 1 */
#mob-next-btn {
  display: none;
  width: 100%; height: 56px;
  background: #FF6B35; color: #fff; border: none;
  border-radius: 12px; font-size: 18px;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; cursor: pointer; margin-top: 16px;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#mob-next-btn:active { background: #e05520; }
.is-mobile #simulateView:not(.mob-step-2):not(.mob-step-3) #mob-next-btn { display: block; }

/* ── CHANGE 3: Persona bottom sheet ── */
#mob-sheet-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.6); z-index: 149; cursor: pointer;
}
.is-mobile #mob-sheet-overlay.mob-active { display: block; }

/* Persona panel column becomes an empty placeholder; its panel becomes a fixed sheet */
.is-mobile #mob-persona-col {
  height: 0 !important; overflow: visible !important;
}
.is-mobile #mob-persona-col > .panel {
  position: fixed !important; top: auto !important;
  bottom: 64px !important; left: 0 !important; right: 0 !important;
  height: 85vh !important; max-height: 85vh !important;
  border-radius: 16px 16px 0 0 !important; border-bottom: none !important;
  transform: translateY(106%) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 151; overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  display: flex !important; flex-direction: column !important;
}
.is-mobile #mob-persona-col > .panel.mob-sheet-open {
  transform: translateY(0) !important;
}

/* Drag handle */
.mob-sheet-handle {
  width: 32px; height: 4px; background: rgba(255,255,255,0.2);
  border-radius: 2px; margin: 10px auto 2px; flex-shrink: 0;
}

/* Persona grid: single column on mobile, fills available sheet space */
.is-mobile .persona-grid {
  grid-template-columns: 1fr !important;
  max-height: none !important;
}
.is-mobile #mob-persona-col .persona-grid {
  flex: 1;
}

/* Confirm / Run button at bottom of sheet */
#mob-confirm-btn {
  margin: 8px 16px 16px; height: 56px; flex-shrink: 0;
  background: #FF6B35; color: #fff; border: none;
  border-radius: 12px; font-size: 18px;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; cursor: pointer;
  position: sticky; bottom: 0;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#mob-confirm-btn:disabled { background: var(--border2, rgba(255,255,255,0.15)); color: var(--text3); cursor: default; }
#mob-confirm-btn:not(:disabled):active { background: #e05520; }

/* Hide original run button + hint, replaced by mob-confirm-btn */
.is-mobile #simulateView #mainRunBtn,
.is-mobile #simulateView #runHint,
.is-mobile #simulateView #rewriteOnlyBtn { display: none !important; }

/* ── CHANGE 4: Swipeable result cards ── */
#mob-result-cards { display: none; }
.is-mobile #mob-result-cards {
  display: block; margin: 0 -16px 20px; overflow: hidden;
}

.mob-rc-track {
  display: flex; overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mob-rc-track::-webkit-scrollbar { display: none; }

.mob-rc {
  min-width: 100vw; width: 100vw; flex-shrink: 0;
  scroll-snap-align: start;
  background: var(--surface, #1a1d24);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  padding: 24px 32px 20px;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  align-items: center; min-height: 280px;
}
.mob-rc-overall {
  background: linear-gradient(135deg, var(--surface, #1a1d24) 0%, rgba(255,107,53,0.06) 100%);
}
.mob-rc-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text3, #635f59);
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  margin-bottom: 10px; text-align: center;
}
.mob-rc-rr {
  font-size: 72px; font-weight: 800; color: #FF6B35;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  line-height: 1; margin-bottom: 6px;
}
.mob-rc-sub { font-size: 13px; color: var(--text2, #a09e9a); margin-bottom: 14px; }
.mob-rc-verdict {
  padding: 6px 16px; border-radius: 100px; font-size: 14px;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; margin-bottom: 10px;
}
.mob-rc-verdict.send    { background: rgba(62,255,160,0.12); color: var(--success, #3effa0); }
.mob-rc-verdict.rewrite { background: rgba(255,179,71,0.12);  color: var(--warn, #ffb347); }
.mob-rc-verdict.dont-send { background: rgba(255,79,110,0.12); color: var(--danger, #ff4f6e); }
.mob-rc-persona {
  font-size: 12px; color: var(--text3, #635f59); text-align: center;
}
.mob-rc-sev {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: 100px; font-size: 12px;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 600; margin-bottom: 14px;
}
.mob-rc-ititle {
  font-size: 18px; font-weight: 700; line-height: 1.3;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  color: var(--text, #f0ede8); text-align: center; margin-bottom: 10px;
}
.mob-rc-idesc {
  font-size: 14px; color: var(--text2, #a09e9a);
  line-height: 1.6; text-align: center; margin-bottom: 12px;
}
.mob-rc-fix {
  font-size: 13px; color: var(--success, #3effa0); line-height: 1.5;
  padding: 8px 14px; border-radius: 8px;
  background: rgba(62,255,160,0.06);
  border: 1px solid rgba(62,255,160,0.12);
  width: 100%; box-sizing: border-box; text-align: center;
}
.mob-rc-last {
  justify-content: center; gap: 14px; text-align: center;
}
.mob-rc-last-txt { font-size: 14px; color: var(--text2, #a09e9a); line-height: 1.6; }
.mob-rc-see-btn {
  padding: 14px 28px;
  background: var(--surface2, #1f2229);
  border: 1px solid var(--border2, rgba(255,255,255,0.15));
  border-radius: 12px; color: var(--text, #f0ede8);
  font-size: 16px; font-weight: 600;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  cursor: pointer;
}

.mob-rc-dots { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
.mob-rc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border2, rgba(255,255,255,0.15));
  transition: background 0.2s, width 0.2s;
}
.mob-rc-dot.active { background: #FF6B35; width: 16px; border-radius: 3px; }

.mob-rc-nav { display: flex; justify-content: space-between; padding: 8px 16px 0; }
.mob-rc-nav-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface2, #1f2229);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  color: var(--text2, #a09e9a); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s;
}
.mob-rc-nav-btn:disabled { opacity: 0.25; }

/* ── CHANGE 5: Job Hunter mobile ── */
@media (max-width: 768px) {
  #jobhunterView .jh-app { padding: 16px !important; }
  #jobhunterView .jh-mode-cards { grid-template-columns: 1fr !important; gap: 12px !important; }
  #jobhunterView .jh-mc { min-height: 100px !important; padding: 20px !important; }
  #jobhunterView .jh-fi { font-size: 16px !important; min-height: 48px !important; }
  #jobhunterView .jh-btn { min-height: 56px !important; font-size: 16px !important; }
  #jobhunterView .jh-sp { font-size: 9px !important; padding: 6px 4px !important; min-width: 44px !important; }
  #jobhunterView .jh-sp-n { width: 22px !important; height: 22px !important; font-size: 10px !important; }
}

/* ── CHANGE 6: Global typography ── */
@media (max-width: 768px) {
  body { font-size: 16px; line-height: 1.6; }
  p, li, .vs-reason, .kill-desc { line-height: 1.6 !important; }
  input, textarea, select { font-size: 16px !important; }
  .run-btn, .btn-primary {
    min-height: 48px !important; font-size: 16px !important;
  }
}

    #signOutModal { display:none; position:fixed; inset:0; z-index:99999; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); }
    .so-card { transform: scale(0.92); opacity: 0; transition: transform 0.2s cubic-bezier(.34,1.4,.64,1), opacity 0.18s ease; }
    .so-card.so-open { transform: scale(1); opacity: 1; }
    .so-avatar-wrap { width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;overflow:hidden;flex-shrink:0; }
  
/* ═══════════════════════════════════════
   RR APP HEADER + SIDEBAR (rebuild)
   New header replaces .app-nav, new fixed sidebar replaces jj-sidebar
   ═══════════════════════════════════════ */

/* hide legacy nav + jj-sidebar (kept in DOM for JS refs) */
#app > nav.app-nav#appNav { display: none !important; }


/* Header */
.rr-header {
  height: 58px;
  background: #1c2128;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 8px;
  flex-shrink: 0;
  z-index: 100;
  position: sticky;
  top: 0;
}
.rr-header {
  background: #ffffff;
  border-bottom-color: #E2E8F0;
}
.rr-mode-tabs {
  display: flex; gap: 2px;
  background: rgba(255,255,255,.06);
  border-radius: 8px; padding: 3px;
}
.rr-mode-tabs { background: #F1F5F9; }
.rr-mode-tab {
  padding: 5px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; border: none; background: none;
  color: #8b949e; font-family: inherit;
  transition: all .15s; white-space: nowrap;
}
.rr-mode-tab { color: #64748B; }
.rr-mode-tab:hover { color: #e6edf3; }
.rr-mode-tab:hover { color: #0F172A; }
.rr-mode-tab.active {
  background: #1c2128; color: #e6edf3;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.rr-mode-tab.active {
  background: #ffffff; color: #0F172A;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.rr-spacer { flex: 1; }
.rr-actions { display: flex; align-items: center; gap: 4px; }
.rr-action-btn {
  width: 34px; height: 34px; border-radius: 8px;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #8b949e; font-size: 16px;
  transition: all .12s; position: relative;
}
.rr-action-btn { color: #64748B; }
.rr-action-btn:hover {
  background: rgba(255,255,255,.08); color: #e6edf3;
}
.rr-action-btn:hover {
  background: #F1F5F9; color: #0F172A;
}
.rr-account-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--rr-accent); color: #fff;
  font-size: 12px; font-weight: 700;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-left: 4px; flex-shrink: 0;
  transition: opacity .12s;
}
.rr-account-btn:hover { opacity: .85; }
.rr-account-dropdown {
  position: absolute;
  top: 44px; right: 16px;
  background: #1c2128;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 6px;
  min-width: 200px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  z-index: 200;
  display: none;
  flex-direction: column; gap: 2px;
}
.rr-account-dropdown.open { display: flex; }
.rr-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13px; color: rgba(255,255,255,.86);
  cursor: pointer; border: none; background: none;
  font-family: inherit; width: 100%; text-align: left;
  transition: background .1s, color .1s;
}
.rr-dropdown-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.rr-dropdown-divider {
  height: 1px; background: rgba(255,255,255,.08);
  margin: 4px 0;
}
.rr-dropdown-danger { color: #ff6b6b !important; }
.rr-dropdown-danger:hover { background: rgba(255,80,80,.12); }

/* Shared sidebar shell, fixed positioning. Visual appearance (width,
   background, borders, padding, nav items) is inherited from the
   .jj-sidebar / .jj-sidebar-* rules via the shared class on the root. */
.rr-sidebar {
  position: fixed;
  left: 0;
  top: 58px;
  bottom: 0;
  display: none;
  z-index: 90;
}
/* show sidebar only when #app is the active page */
#app.active ~ .rr-sidebar,
body.rr-shell-on #app.active .rr-sidebar { display: flex; }

/* offset sim-views so they don't sit under the fixed sidebar (272px to match #jjSidebar's --sb-width) */
body.rr-shell-on #app.active .sim-view { padding-left: 272px; }
@media (max-width: 880px) {
  .rr-sidebar { display: none !important; }
  body.rr-shell-on #app.active .sim-view { padding-left: 0; }
  /* on mobile, restore the legacy nav so existing mobile drawer still works */
  #app > nav.app-nav#appNav { display: flex !important; }
  /* ...except the Job Hunter shell has its own nav (jj-sidebar >768px, jj mobile drawer
     <=768px), so the legacy nav must stay hidden there, otherwise it overlaps the dark
     rr-sb sidebar in the 769-880px band. Analyse/A/B (rr-mode-pro) keep the fallback above.
     Specificity (2,2,2) + later source order both beat the re-show rule (2,1,1). */
  body.rr-mode-jh #app > nav.app-nav#appNav { display: none !important; }
  .rr-header { display: none; }
}

.rr-sb-user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 12px;
}
.rr-sb-user-card { border-bottom-color: #E2E8F0; }
.rr-sb-user-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: #2448FF; color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rr-sb-user-name {
  font-size: 13px; font-weight: 600; color: #e6edf3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rr-sb-user-name { color: #0F172A; }
.rr-sb-user-plan { font-size: 11px; color: #8b949e; }
.rr-sb-user-plan { color: #64748B; }

.rr-sb-section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #484f58;
  padding: 12px 8px 6px;
}
.rr-sb-section-label { color: #94A3B8; }

.rr-sb-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: #8b949e;
  cursor: pointer; border: none; background: none;
  font-family: inherit; width: 100%; text-align: left;
  transition: all .12s; white-space: nowrap;
}
.rr-sb-item { color: #64748B; }
.rr-sb-item:hover { background: rgba(255,255,255,.06); color: #e6edf3; }
.rr-sb-item:hover { background: var(--rr-accent-tint); color: var(--rr-accent-strong); }
.rr-sb-item.active { background: rgba(36,72,255,.12); color: #60a5fa; }
.rr-sb-item.active { background: var(--rr-accent-tint); color: var(--rr-accent-strong); }
.rr-sb-item-ico {
  width: 16px; height: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.rr-sb-item-star {
  margin-left: auto; font-size: 10px;
  background: #2448FF; color: #fff;
  padding: 1px 5px; border-radius: 4px; font-weight: 700;
}

/* Panel gating, must beat .jj-sidebar-nav { display: flex } (line ~33995)
   since each panel wrapper now carries both classes. ID+class wins. */
.rr-sb-panel { display: none; flex-direction: column; gap: 0; }
.rr-sb-panel.active { display: flex; }
#rrSidebar > .rr-sb-panel { display: none; }
#rrSidebar > .rr-sb-panel.active { display: flex; flex-direction: column; }

/* end RR rebuild */

/* ═══ LAYOUT OVERRIDES: fix page overflow ═══ */
.jj-main { overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; }
.jj-root { height: 100% !important; }
.jj-sidebar { overflow-y: auto !important; overflow-x: hidden !important; flex-shrink: 0 !important; }
.jh-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; width: 100%; min-width: 0; box-sizing: border-box; }
.jj-page-body, .jj-tool-wrap { min-width: 0; overflow-x: hidden; box-sizing: border-box; }
#jjPage_jobs { display: none !important; }

/* ═══ SIDEBAR NAV SECTIONS ═══ */
.jj-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 0;
  flex: 1;
}
.jj-sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jj-txt3, #484f58);
  padding: 14px 12px 5px;
  user-select: none;
}
.jj-sidebar-section-label { color: #94A3B8; }
/* Prompt 25: slate-400 was 2.02:1 on white (WCAG AA fail for 10px bold). */
.jj-sidebar-section-label { color: rgba(26, 22, 20, 0.55) !important; }
.jj-sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--jj-txt2, #8b949e);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  transition: all .12s;
  white-space: nowrap;
  margin: 0 4px;
  width: calc(100% - 8px);
}
.jj-sidebar-item { color: #475569; }
.jj-sidebar-item:hover {
  background: rgba(36,72,255,.08);
  color: var(--rr-accent);
}
.jj-sidebar-item.active {
  background: rgba(36,72,255,.12);
  color: #60a5fa;
  font-weight: 600;
}
.jj-sidebar-item.active { color: var(--rr-accent-strong); background: var(--rr-accent-tint); }
/* Sidebar upsell card, pinned near the bottom of the nav. */
.jj-sb-upsell {
  margin: auto 10px 12px; padding: 14px;
  border-radius: 12px;
  background: var(--rr-accent-tint); border: 1px solid var(--rr-accent-border);
  display: flex; flex-direction: column; gap: 6px;
}
.jj-sb-upsell-ico {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rr-accent); color: #fff;
}
.jj-sb-upsell-ico i { font-size: 17px; }
.jj-sb-upsell-title { font: 700 13px/1.3 'Plus Jakarta Sans', sans-serif; color: #1A1614; margin-top: 2px; }
.jj-sb-upsell-sub { font: 400 11.5px/1.45 'Plus Jakarta Sans', sans-serif; color: rgba(26,22,20,0.6); }
.jj-sb-upsell-btn {
  margin-top: 4px; padding: 8px 12px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--rr-accent); color: #fff; font: 700 12.5px/1 'Plus Jakarta Sans', sans-serif;
}
.jj-sb-upsell-btn:hover { background: var(--rr-accent-hover); }
.jj-sb-ico {
  font-size: 13px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.jj-sb-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  background: var(--rr-accent);
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ═══ JOB HUNTER PAGE LAYOUT FIXES ═══ */
.jj-main > .jj-page,
#jjPage_cv, #jjPage_cover, #jjPage_sponsor,
#jjPage_interview, #jjPage_settings {
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}
/* .jj-page is a plain block box with no flex-grow, so its height is purely
   content-based. Short content (an empty kanban column, a fresh dashboard,
   few calendar events) leaves .jj-main's white background exposed below it
   instead of the page's own background. Grow the active page to fill
   .jj-main's remaining height in its column flex layout; taller pages are
   unaffected since flex-basis:auto still lets them size to content and
   scroll via .jj-main's overflow-y:auto. */
.jj-main > .jj-page.active {
  flex: 1 0 auto;
}
.jh-two-col {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 24px;
  align-items: start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.jh-two-col > *:last-child { min-width: 0; }
/* #jobhunterView has overflow:hidden, which kills position:sticky. Use
   align-self: stretch so the right column's background/border fills the
   row height, avoiding dead space next to a tall left column. */
.jh-two-col > :nth-child(2) {
  align-self: stretch;
}
.jh-two-col > :nth-child(2) > .jh-card {
  min-height: 100%;
}
.jj-page-body {
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}
.jj-tool-wrap {
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
  flex: 1;
}
.jj-main {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.jj-root {
  height: 100% !important;
  min-height: 0 !important;
}
/* Prompt 28 (replaces Prompt 26), when an "outside" page is active (Interview /
   CV / Cover / Sponsor / Jobs / Settings / Pricing), collapse .jj-root in the
   flex flow so it doesn't reserve flex-grow space, but DON'T hide it, the
   sidebar is its child and still needs to render. #jjSidebar is position:fixed
   so it renders at its own viewport location regardless of parent sizing; we
   just need .jj-root to stop taking flex:1 1 0% vertical space, and we hide
   the now-empty .jj-main content area to zero out .jj-root's content height. */
#jobhunterView:has(> .jj-page.active) > .jj-root {
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0 !important;
}
#jobhunterView:has(> .jj-page.active) > .jj-root > .jj-main {
  display: none;
}
.jj-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex-shrink: 0 !important;
  height: 100% !important;
}
#jjPage_settings .jj-page-body { padding: 20px 24px; max-width: none; margin: 0; }
/* Align Dashboard's body padding with tool pages (.jj-tool-wrap zeroes padding). */
#jjPage_dashboard .jj-page-body { padding: 0; }

/* ===== Dashboard redesign ===== */

#jjPage_dashboard .db-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Stat row (5 tiles) */
#jjPage_dashboard .db-stat-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1180px) {
  #jjPage_dashboard .db-stat-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  #jjPage_dashboard .db-stat-row { grid-template-columns: repeat(2, 1fr); }
}
#jjPage_dashboard .db-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius);
  padding: 14px;
  position: relative;
  overflow: hidden;
}
#jjPage_dashboard .db-stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#jjPage_dashboard .db-stat-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
#jjPage_dashboard .db-ico-apps       { background: rgba(36, 72, 255,0.15); color: var(--rr-accent); }
#jjPage_dashboard .db-ico-replies    { background: rgba(34,197,94,0.15);  color: #86EFAC; }
#jjPage_dashboard .db-ico-interviews { background: rgba(139,92,246,0.15); color: #C4B5FD; }
#jjPage_dashboard .db-ico-risk       { background: rgba(251,191,36,0.15); color: #FCD34D; }
#jjPage_dashboard .db-ico-streak     { background: rgba(249,115,22,0.15); color: #FDBA74; }

#jjPage_dashboard .db-stat-label {
  font: 500 13px/1.3 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.78));
}
#jjPage_dashboard .db-stat-period {
  color: var(--fg-dim, rgba(238,240,239,0.5));
  font-weight: 400;
}
#jjPage_dashboard .db-stat-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
}
#jjPage_dashboard .db-stat-num {
  font: 700 26px/1 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_dashboard .db-stat-unit {
  font: 500 13px/1 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
}
#jjPage_dashboard .db-stat-delta {
  font: 600 12px/1 var(--rr-font-body);
  color: #86EFAC;
}
#jjPage_dashboard .db-stat-delta.is-neg { color: #FCA5A5; }
#jjPage_dashboard .db-stat-delta.is-flat { color: var(--fg-dim, rgba(238,240,239,0.55)); }
#jjPage_dashboard .db-stat-sub {
  font: 400 11px/1.3 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.55));
  margin-bottom: 6px;
}
#jjPage_dashboard .db-stat-band {
  font: 600 12px/1 var(--rr-font-body);
  color: #FCD34D;
}
#jjPage_dashboard .db-stat-band.is-low    { color: #86EFAC; }
#jjPage_dashboard .db-stat-band.is-medium { color: #FCD34D; }
#jjPage_dashboard .db-stat-band.is-high   { color: #FCA5A5; }
#jjPage_dashboard .db-stat-spark {
  width: 100%;
  height: 26px;
  display: block;
  margin-top: 4px;
}
#jjPage_dashboard .db-stat-bar-wrap {
  height: 5px;
  background: var(--rr-border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
#jjPage_dashboard .db-stat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FCD34D, #F59E0B);
  border-radius: 999px;
  width: 0%;
  transition: width 0.4s ease;
}
#jjPage_dashboard .db-streak-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}
#jjPage_dashboard .db-streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
#jjPage_dashboard .db-streak-letter {
  font: 500 10px/1 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.55));
}
#jjPage_dashboard .db-streak-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--rr-border-strong);
  position: relative;
}
#jjPage_dashboard .db-streak-day.is-active .db-streak-dot {
  background: #22c55e;
  border-color: #22c55e;
}
#jjPage_dashboard .db-streak-day.is-active .db-streak-dot::after {
  content: "";
  position: absolute;
  left: 3px; top: 1.5px;
  width: 3px; height: 6px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Middle row: plan / pipeline / visa */
#jjPage_dashboard .db-mid-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  #jjPage_dashboard .db-mid-grid { grid-template-columns: 1fr; }
}

#jjPage_dashboard .db-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius);
  padding: 18px;
}
#jjPage_dashboard .db-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
#jjPage_dashboard .db-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1.2 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_dashboard .db-card-ico {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(36, 72, 255,0.12);
  color: var(--rr-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#jjPage_dashboard .db-ico-cal { background: rgba(36, 72, 255,0.12); color: var(--rr-accent); }
#jjPage_dashboard .db-ico-visa { background: rgba(251,191,36,0.15); color: #FCD34D; }
#jjPage_dashboard .db-ico-bulb { background: rgba(248,113,113,0.15); color: #FCA5A5; }
#jjPage_dashboard .db-ico-weekly { background: rgba(36, 72, 255,0.12); color: var(--rr-accent); }
#jjPage_dashboard .db-card-link {
  font: 500 12px/1 var(--rr-font-body);
  color: var(--rr-accent);
  text-decoration: none;
}
#jjPage_dashboard .db-card-filter {
  font: 400 12px/1 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
  cursor: default;
}

/* Plan */
#jjPage_dashboard .db-plan-list { margin-bottom: 14px; }
#jjPage_dashboard .db-plan-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rr-border);
}
#jjPage_dashboard .db-plan-item:last-child { border-bottom: none; }
#jjPage_dashboard .db-plan-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--rr-border-strong);
  background: transparent;
  cursor: pointer;
  flex: 0 0 18px;
  position: relative;
  padding: 0;
}
#jjPage_dashboard .db-plan-item.is-done .db-plan-check {
  background: #22c55e;
  border-color: #22c55e;
}
#jjPage_dashboard .db-plan-item.is-done .db-plan-check::after {
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
#jjPage_dashboard .db-plan-text {
  flex: 1;
  font: 400 13px/1.35 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_dashboard .db-plan-item.is-done .db-plan-text {
  color: var(--fg-dim, rgba(238,240,239,0.4));
  text-decoration: line-through;
}
#jjPage_dashboard .db-plan-progress-text {
  font: 500 12px/1 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
}
#jjPage_dashboard .db-plan-progress {
  display: flex;
  justify-content: space-between;
  font: 500 12px/1.3 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
  margin-bottom: 6px;
}
#jjPage_dashboard .db-plan-bar {
  height: 5px;
  background: var(--rr-border);
  border-radius: 999px;
  overflow: hidden;
}
#jjPage_dashboard .db-plan-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rr-accent), var(--rr-accent));
  border-radius: 999px;
  width: 0%;
  transition: width 0.4s ease;
}

/* Pipeline */
#jjPage_dashboard .db-pipeline-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
#jjPage_dashboard .db-pipe {
  padding: 14px 12px;
  border-radius: var(--rr-radius-sm);
  background: var(--rr-border);
  border: 1px solid var(--rr-border);
  text-align: left;
}
#jjPage_dashboard .db-pipe-apps       { background: rgba(36, 72, 255,0.10);  border-color: rgba(36, 72, 255,0.25); }
#jjPage_dashboard .db-pipe-replies    { background: rgba(34,197,94,0.08);   border-color: rgba(34,197,94,0.22); }
#jjPage_dashboard .db-pipe-interviews { background: rgba(139,92,246,0.08);  border-color: rgba(139,92,246,0.22); }
#jjPage_dashboard .db-pipe-offers     { background: rgba(249,115,22,0.08);  border-color: rgba(249,115,22,0.22); }
#jjPage_dashboard .db-pipe-label {
  font: 600 12px/1.2 var(--rr-font-body);
  color: var(--text, #EEF0EF);
  margin-bottom: 6px;
}
#jjPage_dashboard .db-pipe-num {
  font: 700 28px/1 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_dashboard .db-pipe-pct {
  font: 500 11px/1 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.7));
  margin-top: 4px;
  min-height: 12px;
}
#jjPage_dashboard .db-pipeline-insight {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--rr-radius-sm);
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.18);
  font: 500 12px/1.4 var(--rr-font-body);
  color: #86EFAC;
  display: none;
}
#jjPage_dashboard .db-pipeline-insight.is-visible { display: block; }

/* Visa card */
#jjPage_dashboard .db-visa-sub {
  font: 400 12px/1.3 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
  margin-bottom: 4px;
}
#jjPage_dashboard .db-visa-days {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
#jjPage_dashboard .db-visa-days-num {
  font: 700 36px/1 var(--rr-font-body);
  color: #FCD34D;
}
#jjPage_dashboard .db-visa-days-unit {
  font: 500 14px/1 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.7));
}
#jjPage_dashboard .db-visa-bar {
  height: 6px;
  background: var(--rr-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
#jjPage_dashboard .db-visa-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #FCD34D);
  border-radius: 999px;
  width: 0%;
  transition: width 0.4s ease;
}
#jjPage_dashboard .db-visa-date {
  font: 500 12px/1 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
}

/* Lower grid: insight + recent + weekly */
#jjPage_dashboard .db-lower-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  #jjPage_dashboard .db-lower-grid { grid-template-columns: 1fr; }
}

/* Insight */
#jjPage_dashboard .db-insight-body {
  display: flex;
  gap: 14px;
  align-items: center;
}
#jjPage_dashboard .db-insight-donut {
  flex: 0 0 90px;
  color: var(--text, #EEF0EF);
}
#jjPage_dashboard .db-insight-text { flex: 1; min-width: 0; }
#jjPage_dashboard .db-insight-title {
  font: 600 13px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
  margin-bottom: 4px;
}
#jjPage_dashboard .db-insight-body-txt {
  font: 400 12px/1.45 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
  margin-bottom: 10px;
}
#jjPage_dashboard .db-insight-btn {
  padding: 8px 14px;
  border-radius: var(--rr-radius-sm);
  background: linear-gradient(180deg, var(--rr-accent), var(--rr-accent));
  border: none;
  color: #fff;
  font: 600 12px/1 var(--rr-font-body);
  cursor: pointer;
}

/* Recent applications list (styled rows) */
#jjPage_dashboard .db-recent-list > *:not(.db-empty) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rr-border);
  font: 400 13px/1.3 var(--rr-font-body);
}
#jjPage_dashboard .db-recent-list > *:last-child { border-bottom: none; }

/* Weekly progress */
#jjPage_dashboard .db-weekly-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
#jjPage_dashboard .db-weekly-label {
  font: 500 13px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_dashboard .db-weekly-count {
  font: 700 16px/1 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_dashboard .db-weekly-count [contenteditable] {
  outline: none;
  min-width: 18px;
  display: inline-block;
}
#jjPage_dashboard .db-weekly-count [contenteditable]:focus { color: var(--rr-accent); }
#jjPage_dashboard .db-weekly-bar {
  height: 6px;
  background: var(--rr-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
#jjPage_dashboard .db-weekly-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rr-accent), var(--rr-accent));
  border-radius: 999px;
  width: 0%;
  transition: width 0.4s ease;
}
#jjPage_dashboard .db-weekly-msg {
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
  margin-bottom: 14px;
}
#jjPage_dashboard .db-weekly-streakhdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
#jjPage_dashboard .db-weekly-streaklabel {
  font: 500 13px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_dashboard .db-weekly-streakval {
  font: 600 13px/1 var(--rr-font-body);
  color: #FDBA74;
}
#jjPage_dashboard .db-weekly-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
#jjPage_dashboard .db-weekly-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#jjPage_dashboard .db-weekly-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--rr-border-strong);
  position: relative;
}
#jjPage_dashboard .db-weekly-day.is-active .db-weekly-dot {
  background: #22c55e;
  border-color: #22c55e;
}
#jjPage_dashboard .db-weekly-day.is-active .db-weekly-dot::after {
  content: "";
  position: absolute;
  left: 5px; top: 3px;
  width: 4px; height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
#jjPage_dashboard .db-weekly-letter {
  font: 500 10px/1 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.55));
}

/* Bottom grid */
#jjPage_dashboard .db-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
}
@media (max-width: 900px) {
  #jjPage_dashboard .db-bottom-grid { grid-template-columns: 1fr; }
}
#jjPage_dashboard .db-empty {
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.5));
  padding: 10px 0;
}
#jjPage_dashboard .db-pinboard-empty {
  text-align: center;
  padding: 30px 10px;
  border: 1px dashed var(--rr-border-strong);
  border-radius: var(--rr-radius-sm);
}
#jjPage_dashboard .db-pinboard-empty-ico { font-size: 24px; margin-bottom: 6px; color: var(--rr-accent); }
#jjPage_dashboard .db-pinboard-empty-title {
  font: 600 13px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
  margin-bottom: 4px;
}
#jjPage_dashboard .db-pinboard-empty-sub {
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.55));
}

/* Light-mode overrides: CV Builder card language (frosted surface, hairline
   border, layered card shadow). */
#jjPage_dashboard .db-stat,
#jjPage_dashboard .db-card {
  background: var(--rr-surface);
  border-color: var(--rr-border);
  box-shadow: var(--rr-shadow-card);
}
#jjPage_dashboard .db-stat-label,
#jjPage_dashboard .db-stat-sub,
#jjPage_dashboard .db-stat-unit,
#jjPage_dashboard .db-visa-sub,
#jjPage_dashboard .db-insight-body-txt,
#jjPage_dashboard .db-weekly-msg,
#jjPage_dashboard .db-empty,
#jjPage_dashboard .db-streak-letter,
#jjPage_dashboard .db-weekly-letter,
#jjPage_dashboard .db-pinboard-empty-sub {
  color: var(--rr-ink-muted);
}
#jjPage_dashboard .db-stat-num,
#jjPage_dashboard .db-pipe-num,
#jjPage_dashboard .db-card-title,
#jjPage_dashboard .db-plan-text,
#jjPage_dashboard .db-weekly-label,
#jjPage_dashboard .db-weekly-count,
#jjPage_dashboard .db-insight-title,
#jjPage_dashboard .db-pinboard-empty-title {
  color: var(--rr-ink);
}

#jjPage_jobs { display: none !important; }
/* mobile stack */
@media (max-width: 880px) {
  .jh-two-col {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Sponsor Check redesign (apple-glass, light mode) ===== */

/* Ambient gradient backdrop so the frosted glass has something to refract. */
#jjPage_sponsor {
  background:
    radial-gradient(900px 700px at 12% -5%, #cfe0f6 0%, rgba(207,224,246,0) 60%),
    radial-gradient(800px 650px at 95% 8%, #d8d4f7 0%, rgba(216,212,247,0) 58%),
    radial-gradient(900px 800px at 80% 100%, #cdeee8 0%, rgba(205,238,232,0) 60%),
    radial-gradient(700px 600px at 5% 95%, #ffe2cf 0%, rgba(255,226,207,0) 60%),
    linear-gradient(180deg,#eef3fa,#e7eef6);
}

/* Grid */
#jjPage_sponsor .sc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: 20px;
  max-width: 1600px;
}
#jjPage_sponsor .sc-col-main,
#jjPage_sponsor .sc-col-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 900px) {
  #jjPage_sponsor .sc-grid { grid-template-columns: 1fr; }
}

/* Cards: frosted glass */
#jjPage_sponsor .sc-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.66);
  border-radius: var(--rr-radius);
  padding: 26px;
  box-shadow: var(--rr-shadow-card);
}
#jjPage_sponsor .sc-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}
#jjPage_sponsor .sc-card-head h3 {
  margin: 1px 0 4px 0;
  font: 700 19px/1.3 var(--rr-font-body);
  letter-spacing: -0.01em;
  color: #1b2a3b;
}
#jjPage_sponsor .sc-card-sub {
  margin: 0;
  font: 500 14px/1.55 var(--rr-font-body);
  color: #52647a;
}
/* Icon chip */
#jjPage_sponsor .sc-card-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.66);
  color: var(--rr-accent);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 6px 14px -8px rgba(26,49,82,0.3);
}
#jjPage_sponsor .sc-icon-shield,
#jjPage_sponsor .sc-icon-calc,
#jjPage_sponsor .sc-icon-building,
#jjPage_sponsor .sc-icon-search,
#jjPage_sponsor .sc-icon-doc { background: rgba(255,255,255,0.6); color: var(--rr-accent); }

/* Callouts: tinted glass */
#jjPage_sponsor .sc-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border-radius: 16px;
  margin: 18px 0;
}
#jjPage_sponsor .sc-callout-warn {
  background: linear-gradient(180deg, rgba(255,231,196,0.6), rgba(255,221,176,0.42));
  border: 1px solid rgba(226,170,82,0.5);
}
#jjPage_sponsor .sc-callout-info,
#jjPage_sponsor .sc-callout-flat {
  background: linear-gradient(180deg, rgba(210,230,250,0.62), rgba(196,221,248,0.44));
  border: 1px solid rgba(118,168,224,0.5);
}
#jjPage_sponsor .sc-callout-icon {
  flex: 0 0 18px;
  color: #a96f16;
  margin-top: 2px;
}
#jjPage_sponsor .sc-callout-info .sc-callout-icon,
#jjPage_sponsor .sc-callout-flat .sc-callout-icon { color: var(--rr-accent-strong); }
#jjPage_sponsor .sc-callout-title {
  font: 700 14px/1.4 var(--rr-font-body);
  color: #a96f16;
  margin-bottom: 3px;
}
#jjPage_sponsor .sc-callout-title-info { color: var(--rr-accent-strong); }
#jjPage_sponsor .sc-callout-body {
  font: 500 13.5px/1.55 var(--rr-font-body);
  color: #7c5210;
}
#jjPage_sponsor .sc-callout-info .sc-callout-body,
#jjPage_sponsor .sc-callout-flat .sc-callout-body { color: #284b67; }

/* Inputs + button row */
#jjPage_sponsor .sc-field-label {
  display: block;
  margin: 22px 0 8px 0;
  font: 700 13px/1 var(--rr-font-body);
  letter-spacing: 0.01em;
  color: #1b2a3b;
}
#jjPage_sponsor .sc-input {
  width: 100%;
  height: 50px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: var(--rr-radius-sm);
  padding: 0 16px;
  color: #1b2a3b;
  font: 500 15px/1.3 var(--rr-font-body);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 3px rgba(26,49,82,0.07);
  box-sizing: border-box;
  transition: 0.2s ease;
}
#jjPage_sponsor .sc-input::placeholder { color: #869ab0; font-weight: 500; }
#jjPage_sponsor .sc-input:focus {
  outline: none;
  border-color: rgba(36,72,255,0.7);
  box-shadow: inset 0 1px 3px rgba(26,49,82,0.07), 0 0 0 4px rgba(36,72,255,0.18);
}
#jjPage_sponsor .sc-textarea {
  height: auto;
  min-height: 90px;
  padding: 12px 16px;
  resize: vertical;
}
#jjPage_sponsor .sc-input-row {
  display: flex;
  gap: 12px;
}
#jjPage_sponsor .sc-input-row .sc-input { flex: 1; }
#jjPage_sponsor .sc-btn-primary {
  height: 50px;
  padding: 0 22px;
  border: none;
  border-radius: 14px;
  background: #2448FF;
  color: #fff;
  font: 700 15px/1 var(--rr-font-body);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 22px -8px rgba(36,72,255,0.7);
  transition: 0.22s ease;
}
#jjPage_sponsor .sc-btn-primary:hover {
  transform: translateY(-1px);
  background: #1f3dd9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 14px 26px -8px rgba(36,72,255,0.8);
  filter: none;
}

/* Toggle row */
#jjPage_sponsor .sc-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}
#jjPage_sponsor .sc-toggle-label {
  font: 500 13px/1.45 var(--rr-font-body);
  color: #52647a;
}
#jjPage_sponsor .sc-info-i {
  opacity: 0.6;
  cursor: help;
  font-size: 12px;
}

/* Sector pills */
#jjPage_sponsor .sc-sector-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}
#jjPage_sponsor .sc-sector-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(255,255,255,0.66);
  border-radius: 999px;
  color: #1b2a3b;
  font: 600 14px/1 var(--rr-font-body);
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.85);
  transition: 0.2s ease;
}
#jjPage_sponsor .sc-sector-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.78);
  border-color: rgba(255,255,255,0.85);
  color: var(--rr-accent);
}
#jjPage_sponsor .sc-sector-ico { font-size: 13px; }

/* Download register tile */
#jjPage_sponsor .sc-download-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(214,232,250,0.4);
  border: 1.5px dashed rgba(36,72,255,0.45);
  color: var(--rr-accent);
  text-decoration: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: 0.2s ease;
}
#jjPage_sponsor .sc-download-btn:hover {
  background: rgba(214,232,250,0.62);
  transform: translateY(-1px);
}
#jjPage_sponsor .sc-download-title {
  font: 700 14.5px/1.2 var(--rr-font-body);
  color: var(--rr-accent);
}
#jjPage_sponsor .sc-download-sub {
  font: 500 12.5px/1.3 var(--rr-font-body);
  color: #52647a;
}
#jjPage_sponsor .sc-last-updated {
  margin-top: 14px;
  font: 500 12.5px/1.5 var(--rr-font-body);
  color: #869ab0;
}
#jjPage_sponsor .sc-register-fresh { color: #869ab0; font-size: 11px; margin-left: 4px; }
#jjPage_sponsor .sc-refresh-btn {
  background: none;
  border: none;
  color: var(--rr-accent);
  font-size: 11px;
  cursor: pointer;
  padding: 0 0 0 8px;
  text-decoration: underline;
  font-family: inherit;
}
#jjPage_sponsor .sc-refresh-btn:hover { opacity: 0.8; }
@media (max-width: 600px) {
  #jjPage_sponsor .sc-last-updated {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    line-height: 1.5;
  }
}

/* Check-list inside About card: soft blue chip icons */
#jjPage_sponsor .sc-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
#jjPage_sponsor .sc-check-list li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 24px;
  padding-left: 34px;
  font: 600 15px/1.4 var(--rr-font-body);
  color: #1b2a3b;
}
#jjPage_sponsor .sc-check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(90,160,216,0.16);
  color: var(--rr-accent);
  font-size: 13px;
  font-weight: 700;
}

/* ===== Cover Letter workflow rebuild (glass, light) ===== */
#jjPage_cover{
  flex-grow: 1;
  background:
    radial-gradient(900px 700px at 12% -5%,#cfe0f6 0%,rgba(207,224,246,0) 60%),
    radial-gradient(800px 650px at 95% 8%,#d8d4f7 0%,rgba(216,212,247,0) 58%),
    radial-gradient(900px 800px at 80% 100%,#cdeee8 0%,rgba(205,238,232,0) 60%),
    radial-gradient(700px 600px at 5% 95%,#ffe2cf 0%,rgba(255,226,207,0) 60%),
    linear-gradient(180deg,#eef3fa,#e7eef6);
}
#jjPage_cover .cl-screen{display:none}
#jjPage_cover .cl-screen.on{display:block;animation:clFade .4s ease both}
@keyframes clFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#jjPage_cover .cl-compose-wrap{max-width:1120px;margin:0 auto;padding:6px 4px 60px}
/* Reuse the interview rr-vi__step glass cards on the compose screen. The
   .rr-vi__step* rules are global; they read these vi vars, which are otherwise
   only set on .rr-vi__scope (the interview page), so define them here for the
   compose screen. Single column (.rr-vi__steps is a flex column); the interview
   two-column .rr-vi__grid and its aside are not used. */
#clStudio{--vi-fg:var(--rr-ink);--vi-fg-muted:var(--rr-ink-muted);--vi-fg-subtle:var(--rr-ink-subtle);--vi-accent:var(--rr-accent);--vi-accent-hover:var(--rr-accent-hover);--vi-border-hover:var(--rr-border-strong);--vi-radius-md:var(--rr-radius-sm);--vi-radius-lg:var(--rr-radius)}
@media (max-width: 768px){
  /* Global mobile rule flattens .rr-vi__steps to display:contents for the
     interview grid; restore the column gap on the compose single-column stack. */
  #clStudio .rr-vi__steps{display:flex;flex-direction:column;gap:12px}
}
/* ============================================================
   Cover Letter compose: reuse the CV Builder shell (stepper, 2-col grid, aside,
   footer) by re-declaring the CV rules scoped to #jjPage_cover. The CV Builder's
   own rules live under #jjPage_cv and are left untouched; these mirror them so
   the cover compose matches the CV Builder without affecting it. --rr-* fallbacks
   keep them robust if a --vi var is not set on this page.
   ============================================================ */
/* Top stepper */
#jjPage_cover .cvb-stepper{display:flex;align-items:center;gap:8px;width:100%;max-width:1280px;margin:0 auto 20px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
#jjPage_cover .cvb-step{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;padding:6px 6px;background:none;border:none;cursor:pointer;font-family:inherit}
#jjPage_cover .cvb-step-num{flex:0 0 auto;width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font:600 12.5px/1 var(--rr-font-body);background:#fff;border:1px solid var(--vi-border-hover,var(--rr-border-strong));color:var(--vi-fg-subtle,var(--rr-ink-subtle));transition:background 160ms ease,color 160ms ease,border-color 160ms ease}
#jjPage_cover .cvb-step-label{font:600 13px/1 var(--rr-font-body);color:var(--vi-fg-subtle,var(--rr-ink-subtle));white-space:nowrap;transition:color 160ms ease}
#jjPage_cover .cvb-step.is-active .cvb-step-num{background:var(--vi-accent,var(--rr-accent));border-color:var(--vi-accent,var(--rr-accent));color:#fff}
#jjPage_cover .cvb-step.is-active .cvb-step-label{color:var(--vi-fg,var(--rr-ink))}
#jjPage_cover .cvb-step-line{flex:1 1 auto;min-width:16px;height:1px;background:var(--vi-border-hover,var(--rr-border-strong))}
/* Two-column grid + columns */
#jjPage_cover .cv-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;width:100%;max-width:1280px;margin:0 auto}
#jjPage_cover .cv-col-main,#jjPage_cover .cv-col-aside{display:flex;flex-direction:column;gap:20px}
@media (max-width:980px){#jjPage_cover .cv-grid{grid-template-columns:1fr}}
/* Aside cards (mirror #jjPage_cv .cv-card / .cv-aside-*) */
#jjPage_cover .cv-card{background:var(--rr-surface-frost);border:1px solid rgba(255,255,255,0.85);border-radius:var(--rr-radius);padding:24px;box-shadow:var(--rr-shadow-card)}
#jjPage_cover .cv-aside-card{padding:20px}
#jjPage_cover .cv-aside-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#jjPage_cover .cv-aside-head h3{margin:0;font:600 14px/1.3 var(--rr-font-body);color:var(--text,var(--rr-ink))}
#jjPage_cover .cv-aside-icon{flex:0 0 28px;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center}
#jjPage_cover .cv-icon-bulb{background:rgba(251,191,36,0.15);color:#FCD34D}
#jjPage_cover .cv-icon-star{background:rgba(34,197,94,0.15);color:#86EFAC}
#jjPage_cover .cv-icon-clock{background:rgba(139,92,246,0.15);color:#C4B5FD}
#jjPage_cover .cv-aside-body{font:400 12.5px/1.6 var(--rr-font-body);color:var(--fg-dim,var(--rr-ink-muted))}
#jjPage_cover .cv-aside-body p{margin:0 0 9px}
#jjPage_cover .cv-aside-body p:last-child{margin-bottom:0}
#jjPage_cover .cv-check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
#jjPage_cover .cv-check-list li{position:relative;padding-left:22px;font:400 13px/1.5 var(--rr-font-body);color:var(--fg-dim,var(--rr-ink-muted))}
#jjPage_cover .cv-check-list li::before{content:"✓";position:absolute;left:0;color:#86EFAC;font-weight:700}
#jjPage_cover .cv-recent-list{display:flex;flex-direction:column;gap:8px}
#jjPage_cover .cv-recent-empty{padding:12px;background:rgba(255,255,255,0.02);border:1px dashed rgba(255,255,255,0.10);border-radius:10px;font:400 12px/1.4 var(--rr-font-body);color:rgba(26,22,20,0.68)}
/* Background card: drop-pattern two columns (mirror .cvb-cv-cols). The left
   affordance is the real Pull-from-CV action, since the cover letter has no
   file-upload path for background. */
#jjPage_cover .clb-bg-cols{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:stretch}
@media (max-width:680px){#jjPage_cover .clb-bg-cols{grid-template-columns:1fr}}
#jjPage_cover .clb-bg-pull{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:18px 14px;border:1.5px dashed var(--rr-border-strong);border-radius:var(--rr-radius-sm);background:var(--rr-accent-tint);color:var(--rr-ink-muted);cursor:pointer;font-family:var(--rr-font-body);transition:border-color .13s,background .13s}
#jjPage_cover .clb-bg-pull:hover{border-color:var(--rr-accent);background:var(--rr-accent-tint-2)}
#jjPage_cover .clb-bg-pull-ico{font-size:22px;color:var(--rr-accent)}
#jjPage_cover .clb-bg-pull-title{font-weight:700;font-size:13px;color:var(--rr-ink)}
#jjPage_cover .clb-bg-pull-sub{font-size:11.5px;color:var(--rr-ink-subtle)}
#jjPage_cover .clb-bg-paste{display:flex;flex-direction:column}
/* Sticky footer bar (mirror .cvb-actionbar, kept off the .cvb-actionbar class so
   the CV Builder show-rule never reveals it). */
.cl-actionbar{display:none;position:fixed;left:272px;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:#fff;border-top:1px solid var(--rr-border-strong);box-shadow:0 -8px 24px -12px rgba(17,17,20,0.18)}
#jjMain:has(#jjPage_cover.jj-page.active #clScreenCompose.cl-screen.on) .cl-actionbar{display:flex}
@media (max-width:768px){.cl-actionbar{left:0;padding-left:16px;padding-right:16px}.cl-actionbar .cvb-ab-secure-title,.cl-actionbar .cvb-ab-secure-sub,.cl-actionbar .cvb-ab-shield{display:none}}
#jjPage_cover .cl-eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rr-accent)}
#jjPage_cover .cl-h1{font-family:var(--rr-font-display);font-size:30px;font-weight:800;letter-spacing:-0.02em;margin:6px 0 2px;color:#1b2a3b}
#jjPage_cover .cl-lede{font-size:14.5px;color:#52647a;font-weight:500;margin-bottom:22px}
#jjPage_cover .cl-glass{background:rgba(255,255,255,0.92);border:1px solid rgba(255,255,255,0.66);box-shadow:var(--rr-shadow-card)}
#jjPage_cover .cl-card2{border-radius:var(--rr-radius);padding:26px}
#jjPage_cover .cl-sec-label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#869ab0;margin:22px 0 12px}
#jjPage_cover .cl-sec-label:first-child{margin-top:0}
#jjPage_cover .cl-field2{margin-bottom:14px}
#jjPage_cover .cl-field2>label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:#1b2a3b}
#jjPage_cover .cl-opt{font-weight:500;color:#869ab0}
#jjPage_cover .cl-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#jjPage_cover .cl-gi{width:100%;border-radius:var(--rr-radius-sm);border:1px solid rgba(255,255,255,0.78);background:rgba(255,255,255,0.55);padding:12px 14px;font:inherit;font-size:14.5px;font-weight:500;color:#1b2a3b;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 2px rgba(26,49,82,0.06);outline:none;transition:.18s;box-sizing:border-box}
#jjPage_cover .cl-ta{resize:vertical;line-height:1.5}
#jjPage_cover .cl-gi::placeholder{color:#869ab0}
#jjPage_cover .cl-gi:focus{border-color:rgba(36,72,255,0.65);box-shadow:inset 0 1px 2px rgba(26,49,82,0.06),0 0 0 4px rgba(36,72,255,0.16)}
#jjPage_cover .cl-count{font-size:11.5px;color:#869ab0;text-align:right;margin-top:4px;font-weight:600}
#jjPage_cover .cl-chips{display:flex;flex-wrap:wrap;gap:8px}
#jjPage_cover .cl-chip{padding:8px 14px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;color:#52647a;cursor:pointer;transition:.16s;background:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.66)}
#jjPage_cover .cl-chip:hover{background:rgba(255,255,255,0.8)}
#jjPage_cover .cl-chip.sel{background:rgba(36,72,255,0.12);border-color:var(--rr-accent);color:var(--rr-accent-strong)}
#jjPage_cover .cl-ghostbtn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--rr-accent);background:rgba(214,232,250,0.55);border:1px solid rgba(120,170,225,0.4)}
#jjPage_cover .cl-ghostbtn:hover{background:rgba(214,232,250,0.8)}
#jjPage_cover .cl-bg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:10px}
#jjPage_cover .cl-sector-caption{font-size:12px;color:#52647a;margin-top:8px}
#jjPage_cover .cl-tone-note{font-size:12px;color:#a96f16;margin-top:8px}
#jjPage_cover .cl-tip{font-size:12.5px;color:#52647a;background:rgba(214,232,250,0.4);border:1px solid rgba(120,170,225,0.35);border-radius:10px;padding:9px 12px;margin-top:8px;line-height:1.45}
#jjPage_cover .cl-proof{margin-top:14px;border-radius:14px;padding:16px;background:linear-gradient(180deg,rgba(29,158,117,0.12),rgba(29,158,117,0.05));border:1px solid rgba(29,158,117,0.35)}
#jjPage_cover .cl-proof-h{font-size:13.5px;font-weight:700;color:#10795a;margin-bottom:4px}
#jjPage_cover .cl-proof-sub{font-size:12.5px;color:#52647a;font-weight:500;margin-bottom:10px;line-height:1.45}
#jjPage_cover .cl-cta{margin-top:24px;width:100%;height:50px;border:none;border-radius:14px;cursor:pointer;font:inherit;font-size:15px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(180deg,#62a6dd,var(--rr-accent));box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 12px 26px -8px rgba(36,72,255,0.7);transition:.2s}
#jjPage_cover .cl-cta:hover{transform:translateY(-1px);filter:brightness(1.03)}
#jjPage_cover .cl-voice-field2{margin-top:14px}
#jjPage_cover .cl-voice-toggle2{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.66);border-radius:12px;padding:11px 14px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:#1b2a3b}
#jjPage_cover .cl-voice-toggle2:hover{background:rgba(255,255,255,0.78)}
#jjPage_cover .cl-voice-body{margin-top:10px}
#jjPage_cover .cl-voice-preview{font-size:12px;color:#52647a}
/* Generating loader: activity-log style mirroring the proven CV transform
   loader (cv-ld-*). Scoped to #jjPage_cover with cl-ld-* classes and local
   --tl-* tokens on the panel, so #jjPage_cover keeps NO .tl-theme (the
   per-sentence review UI + red download gate on the sibling review screen stay
   untouched). The progress fill animates transform:scaleX (composited) NOT
   percentage width: the ancestor #clScreenGenerating.cl-screen.on runs clFade,
   which animates transform and promotes the subtree to a compositor layer where
   a width% animation renders frozen at the from-value (the trap proven on the
   CV loader). The 4s stage ticker + 250ms elapsed clock are JS-driven. */
#jjPage_cover #clScreenGenerating{--tl-ink:#101010;--tl-blue:#2448FF;--tl-hair:#E2E2DC;--tl-mute:#A4A49C;--tl-soft:#86867E;--tl-card:#FFFFFF;--tl-tint:#EFF4FD}
#jjPage_cover .cl-gen-wrap{max-width:520px;margin:0 auto;padding:64px 24px}
#jjPage_cover .cl-ld-card{background:var(--tl-card);border:1px solid var(--tl-hair);border-radius:10px;padding:22px 24px 16px;width:100%;max-width:480px;margin:0 auto}
#jjPage_cover .cl-ld-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
#jjPage_cover .cl-ld-title{margin:0;font:500 19px/1.2 "Space Grotesk","Albert Sans",system-ui,sans-serif;letter-spacing:-0.02em;color:var(--tl-ink)}
#jjPage_cover .cl-ld-elapsed{font:500 12px/1.2 "Space Grotesk","Albert Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--tl-ink)}
#jjPage_cover .cl-ld-eta{margin:4px 0 14px;font-size:12px;line-height:1.4;color:var(--tl-soft)}
#jjPage_cover .cl-ld-track{height:3px;border-radius:999px;background:var(--tl-hair);overflow:hidden;margin-bottom:16px}
#jjPage_cover .cl-ld-fill{display:block;height:100%;width:82%;background:var(--tl-blue);border-radius:999px;transform:scaleX(0.025);transform-origin:left center;animation:clLdProgress 30s ease-out forwards}
#jjPage_cover .cl-ld-arrived .cl-ld-fill{animation:none;width:100%;transform:scaleX(1);transition:transform 200ms ease,width 200ms ease}
@keyframes clLdProgress{from{transform:scaleX(0.025)}to{transform:scaleX(1)}}
#jjPage_cover .cl-ld-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
#jjPage_cover .cl-ld-row{display:flex;align-items:flex-start;gap:12px;padding:8px 6px;border-radius:8px;opacity:0.6}
#jjPage_cover .cl-ld-mark{flex:0 0 16px;width:16px;height:16px;margin-top:2px;border-radius:999px;border:1px solid var(--tl-hair);background:var(--tl-card);position:relative}
#jjPage_cover .cl-ld-main{flex:1 1 auto;min-width:0}
#jjPage_cover .cl-ld-label{font:400 13px/1.4 "Plus Jakarta Sans",system-ui,sans-serif;color:var(--tl-mute)}
#jjPage_cover .cl-ld-detail{display:none;font-size:12px;line-height:1.45;color:var(--tl-soft);margin-top:1px}
#jjPage_cover .cl-ld-row.cl-step-done{opacity:1}
#jjPage_cover .cl-ld-row.cl-step-done .cl-ld-mark{border-radius:4px;background:var(--tl-tint);border-color:var(--tl-tint)}
#jjPage_cover .cl-ld-row.cl-step-done .cl-ld-mark::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--tl-blue);font-size:9px;font-weight:600}
#jjPage_cover .cl-ld-row.cl-step-done .cl-ld-label{color:var(--tl-mute)}
#jjPage_cover .cl-ld-row.cl-step-done .cl-ld-detail{display:block;color:var(--tl-mute)}
#jjPage_cover .cl-ld-row.cl-step-active{opacity:1}
#jjPage_cover .cl-ld-row.cl-step-active .cl-ld-mark{background:var(--tl-blue);border-color:var(--tl-blue);animation:clLdPulse 1.6s ease-in-out infinite}
#jjPage_cover .cl-ld-row.cl-step-active .cl-ld-label{font-weight:500;color:var(--tl-ink)}
#jjPage_cover .cl-ld-row.cl-step-active .cl-ld-detail{display:block}
@keyframes clLdPulse{0%,100%{opacity:1}50%{opacity:0.45}}
#jjPage_cover .cl-ld-foot{margin-top:14px;padding-top:10px;border-top:1px solid var(--tl-hair)}
#jjPage_cover .cl-ld-honesty{font-size:11px;line-height:1.5;color:var(--tl-mute)}
@media (prefers-reduced-motion:reduce){
  #jjPage_cover .cl-ld-row.cl-step-active .cl-ld-mark{animation:none}
  #jjPage_cover .cl-ld-fill{animation:none;width:60%;transform:scaleX(1);transition:none}
  #jjPage_cover .cl-ld-arrived .cl-ld-fill{width:100%;transform:scaleX(1)}
}
#jjPage_cover .cl-screen-review{max-width:1120px;margin:0 auto;padding:6px 4px 60px}
#jjPage_cover .cl-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;padding:8px 13px;border-radius:11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:#1b2a3b;background:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.66)}
#jjPage_cover .cl-back:hover{background:rgba(255,255,255,0.85)}
/* review: topbar */
#jjPage_cover .cl-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
#jjPage_cover .cl-tb-left{display:flex;align-items:center;gap:10px}
#jjPage_cover .cl-tb-title{font-size:17px;font-weight:800;color:#1b2a3b}
#jjPage_cover .cl-saved{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#10795a;background:rgba(29,158,117,0.14);border:1px solid rgba(29,158,117,0.3);padding:3px 10px;border-radius:999px}
#jjPage_cover .cl-result-when{font-size:12px;color:#869ab0;font-weight:600}
#jjPage_cover #jhClWcBadge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(29,158,117,.15);color:#10795a}
#jjPage_cover .cl-tb-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#jjPage_cover .cl-tbtn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:#1b2a3b;background:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.66)}
#jjPage_cover .cl-tbtn:hover{background:rgba(255,255,255,0.9)}
#jjPage_cover .cl-tbtn-icon{padding:9px 10px}
#jjPage_cover .cl-tbtn:disabled{opacity:0.4;cursor:default;pointer-events:none}
#jjPage_cover .cl-tbtn-primary{background:linear-gradient(180deg,#62a6dd,var(--rr-accent));color:#fff;border:none;box-shadow:0 8px 18px -7px rgba(36,72,255,.6)}
#jjPage_cover .cl-menu-wrap{position:relative}
#jjPage_cover .cl-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:240px;background:rgba(255,255,255,0.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.66);border-radius:14px;box-shadow:0 22px 54px -16px rgba(26,49,82,.4);padding:6px;display:none;z-index:12}
#jjPage_cover .cl-menu.on{display:block}
#jjPage_cover .cl-menu-item{padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:#1b2a3b;cursor:pointer}
#jjPage_cover .cl-menu-item:hover{background:rgba(214,232,250,0.6)}
#jjPage_cover .cl-menu-item.cl-menu-safety{color:#10795a}
#jjPage_cover .cl-menu-item.cl-menu-safety:hover{background:rgba(29,158,117,0.12)}
#jjPage_cover .cl-menu-sep{height:1px;background:rgba(26,49,82,.08);margin:5px 8px}
/* review: body grid */
#clStudio .cl-ws-verdict{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;margin-bottom:16px;border-radius:14px;background:var(--st-paper);border:1px solid var(--st-line);box-shadow:0 1px 2px rgba(17,18,22,.04)}
#clStudio .cl-ws-vscore{display:flex;align-items:baseline;gap:8px}
#clStudio .cl-ws-vscore-num{font:500 26px/1 var(--tl-display);letter-spacing:-.02em;color:var(--st-ink)}
#clStudio .cl-ws-vscore-lab{font:600 11px/1.2 var(--tl-bodyf);letter-spacing:.05em;text-transform:uppercase;color:var(--st-faint)}
/* Verdict pass part 2: worded verdict (conservative band of the real score, letter quality) + route descriptor (visa type only, never an eligibility claim). */
#clStudio .cl-ws-vscore{align-items:center}
#clStudio .cl-ws-vscore-lab{display:none}
#clStudio .cl-ws-vmeta{display:flex;flex-direction:column;gap:2px;margin-left:2px}
#clStudio .cl-ws-vword{font:600 14px/1.15 var(--tl-bodyf);color:var(--st-ink)}
#clStudio .cl-ws-vword.is-strong{color:var(--st-green)}
#clStudio .cl-ws-vword.is-low{color:var(--st-amber)}
#clStudio .cl-ws-vroute{font:500 11px/1.2 var(--tl-bodyf);color:var(--st-muted)}
#clStudio .cl-ws-vword:empty,#clStudio .cl-ws-vroute:empty{display:none}
#clStudio .cl-ws-vchips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
#clStudio .cl-ws-chip{font:600 12px/1 var(--tl-bodyf);padding:7px 11px;border-radius:99px;background:rgba(17,18,22,.05);color:var(--st-muted);border:1px solid transparent;white-space:nowrap}
#clStudio .cl-ws-chip-ok{background:rgba(23,116,73,.1);color:var(--st-green)}
#clStudio .cl-ws-chip-warn{background:rgba(160,111,24,.13);color:var(--st-amber)}
#clStudio .cl-ws-chip-pending{background:rgba(17,18,22,.04);color:var(--st-faint);border-color:var(--st-line-soft)}
/* Verdict chip restyle (part 1): clean status pills with a leading icon keyed off the existing state classes. Pure CSS; the chip-writing JS and its honesty logic are untouched, so the confident tick shows ONLY on a truly-passed (ok) chip, while salary and route, which are pending or warn by design, never show it. */
#clStudio .cl-ws-chip{display:inline-flex;align-items:center;gap:6px}
#clStudio .cl-ws-chip-ok::before,
#clStudio .cl-ws-chip-warn::before,
#clStudio .cl-ws-chip-pending::before{content:"";flex:none;width:12px;height:12px;background-color:currentColor;-webkit-mask:var(--rr-chip-ic) center/contain no-repeat;mask:var(--rr-chip-ic) center/contain no-repeat}
#clStudio .cl-ws-chip-ok::before{--rr-chip-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")}
#clStudio .cl-ws-chip-warn::before,
#clStudio .cl-ws-chip-pending::before{--rr-chip-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E")}
/* Salary sub-slice: inline salary entry + going-rate caveat note */
#clStudio .cl-ws-salwrap{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:99px;background:rgba(17,18,22,.04);border:1px solid var(--st-line-soft)}
#clStudio .cl-ws-salprefix{font:600 12px/1 var(--tl-bodyf);color:var(--st-muted)}
#clStudio .cl-ws-salinput{width:74px;border:0;background:transparent;outline:none;font:500 12px/1 var(--tl-bodyf);color:var(--st-ink);padding:0}
#clStudio .cl-ws-salinput::placeholder{color:var(--st-faint)}
#clStudio .cl-ws-saltoggle{display:inline-flex;align-items:center;gap:4px;font:500 11px/1 var(--tl-bodyf);color:var(--st-muted);cursor:pointer;white-space:nowrap}
#clStudio .cl-ws-saltoggle input{margin:0;cursor:pointer}
#clStudio .cl-ws-vnote{flex-basis:100%;margin-top:8px;font:400 11px/1.5 var(--tl-bodyf);color:var(--st-muted)}
/* Review-rail verdict chips: reveal the full sponsor/salary/route caveat by
   wrapping instead of clipping. The caveats are the honest wording and must
   show in full. Scoped to the #atsClRoot review rail; reveal-by-wrap only,
   no text change. */
#atsClRoot .cl-ws-vchips{align-items:flex-start}
#atsClRoot .cl-ws-chip{white-space:normal;align-items:flex-start;line-height:1.35;max-width:100%}
#atsClRoot .cl-ws-chip::before{margin-top:2px}
#clStudio .cl-ws-left{align-self:start;padding:16px;border-radius:14px;background:var(--st-paper);border:1px solid var(--st-line)}
#clStudio .cl-ws-left-h{font:600 13px/1.2 var(--tl-display);letter-spacing:-.01em;color:var(--st-ink);margin-bottom:8px}
#clStudio .cl-ws-left-empty{font:400 12.5px/1.6 var(--tl-bodyf);color:var(--st-muted);margin:0}
/* Slice B: role-requirements list + detail (read-only from scoreJdMatch) */
#clStudio .cl-req-count{font:600 11px/1.2 var(--tl-bodyf);letter-spacing:.04em;text-transform:uppercase;color:var(--st-faint);margin:2px 0 10px}
#clStudio .cl-req-list{display:flex;flex-direction:column;gap:3px}
#clStudio .cl-req-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;border:0;background:transparent;padding:7px 8px;border-radius:9px;font-family:var(--tl-bodyf);transition:background .12s ease}
#clStudio .cl-req-row:hover{background:rgba(17,18,22,.04)}
#clStudio .cl-req-row.is-active{background:rgba(36,72,255,.07)}
#clStudio .cl-req-glyph{flex:0 0 auto;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;font-size:10px;line-height:1}
#clStudio .cl-req-met .cl-req-glyph{background:rgba(23,116,73,.14);color:var(--st-green)}
#clStudio .cl-req-warn .cl-req-glyph{background:rgba(160,111,24,.16);color:var(--st-amber)}
#clStudio .cl-req-miss .cl-req-glyph{background:transparent;color:var(--st-faint);box-shadow:inset 0 0 0 1.5px var(--st-line)}
#clStudio .cl-req-label{flex:1 1 auto;min-width:0;font:500 12.5px/1.3 var(--tl-bodyf);color:var(--st-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#clStudio .cl-req-miss .cl-req-label{color:var(--st-muted)}
#clStudio .cl-req-cat{flex:0 0 auto;font:600 9.5px/1.2 var(--tl-bodyf);letter-spacing:.05em;text-transform:uppercase;color:var(--st-faint)}
#clStudio .cl-req-detail{margin-top:14px;padding-top:13px;border-top:1px solid var(--st-line-soft)}
#clStudio .cl-req-d-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
#clStudio .cl-req-d-label{font:600 13px/1.25 var(--tl-display);letter-spacing:-.01em;color:var(--st-ink)}
#clStudio .cl-req-d-cat{font:600 9.5px/1.2 var(--tl-bodyf);letter-spacing:.05em;text-transform:uppercase;color:var(--st-faint);white-space:nowrap}
#clStudio .cl-req-d-k{font:600 10px/1.2 var(--tl-bodyf);letter-spacing:.05em;text-transform:uppercase;color:var(--st-faint);margin:9px 0 4px}
#clStudio .cl-req-d-sent{font:400 12.5px/1.55 var(--st-serif);color:var(--st-ink)}
#clStudio .cl-req-d-ev{font:400 12px/1.5 var(--tl-bodyf);color:var(--st-muted);padding:8px 10px;border-radius:8px;background:rgba(17,18,22,.035)}
#clStudio .cl-req-d-note{font:400 12px/1.55 var(--tl-bodyf);color:var(--st-muted);margin:0}
#jjPage_cover .cl-letter{font-family:Georgia,"Times New Roman",serif;font-size:15.5px;line-height:1.85;color:#23323f;background:transparent !important;border:none !important;padding:0 !important;min-height:auto !important}
#jjPage_cover .cl-letter .jh-display-line{margin:0 0 14px}
#jjPage_cover .cl-letter .jh-display-para{margin:0 0 14px}
#jjPage_cover .cl-letter .jh-display-para .jh-display-line{display:inline;margin:0}
.cl-off #jjSB_cover,.cl-off #rrSbJH_cover,.cl-off #mobBtn_cover,.cl-off [onclick="jjNav('cover')"],.cl-off [data-ws-nav="cover"],.cl-off [data-type="cover"],.cl-off #cover-letter,.cl-off [data-cl-gated]{display:none !important}
.ev-off #jjSB_evidence{display:none !important}
#jjPage_cover .cl-letter .jh-display-heading{font-weight:700;margin:0 0 6px}
#jjPage_cover .cl-letter .jh-sent{border-radius:4px;padding:1px 2px;transition:background .15s}
#jjPage_cover .cl-letter .jh-sent-green{background:rgba(29,158,117,0.18)}
#jjPage_cover .cl-letter .jh-sent-amber{background:rgba(216,116,47,0.16)}
#jjPage_cover .cl-letter .jh-sent-red{background:rgba(207,70,70,0.18);text-decoration:underline;text-decoration-style:dotted;text-decoration-color:#cf4646;text-underline-offset:3px}
/* Confirmed by you: distinct from auto-verified green (teal, solid underline). */
#jjPage_cover .cl-letter .jh-sent-confirmed{background:rgba(45,140,170,0.16);text-decoration:underline;text-decoration-color:rgba(45,140,170,0.7);text-underline-offset:3px}
/* Editing: the letter is contenteditable. Newly typed text in a classified span
   is neutralised (no colour) until the debounced re-check reclassifies it. */
#jjPage_cover .cl-letter[contenteditable]{outline:none;cursor:text}
#jjPage_cover .cl-letter[contenteditable]:focus{outline:none}
#jjPage_cover .cl-letter .jh-sent-dirty{background:transparent;text-decoration:none}
/* Per-sentence "This is my own words" control on amber sentences. */
#jjPage_cover .cl-confirm-btn{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;border:1px solid rgba(45,140,170,0.5);background:rgba(45,140,170,0.1);color:#1d6e8c;font:600 11px/1.5 var(--rr-font-body);cursor:pointer;vertical-align:middle}
#jjPage_cover .cl-confirm-btn:hover{background:rgba(45,140,170,0.2)}
/* review: sidebar */
#jjPage_cover .cl-claims-card{border-radius:14px;padding:16px;background:linear-gradient(180deg,rgba(207,70,70,0.1),rgba(207,70,70,0.04));border:1px solid rgba(207,70,70,0.35)}
#jjPage_cover .cl-cc-head{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#cf4646;margin-bottom:8px}
#jjPage_cover .cl-cc-quote{font-family:Georgia,serif;font-style:italic;font-size:13px;color:#23323f;line-height:1.45;margin-bottom:13px}
#jjPage_cover .cl-cc-actions{display:flex;gap:8px}
#jjPage_cover .cl-cc-prove,#jjPage_cover .cl-cc-remove{flex:1;padding:9px;border-radius:9px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
#jjPage_cover .cl-cc-prove{background:#1d9e75;color:#fff;border:none}
#jjPage_cover .cl-cc-prove:hover{background:#178862}
#jjPage_cover .cl-cc-remove{background:rgba(255,255,255,0.7);border:1px solid rgba(207,70,70,0.4);color:#cf4646}
#jjPage_cover .cl-cc-remove:hover{background:#fff}
#jjPage_cover .cl-classify{border-radius:18px;padding:20px}
#jjPage_cover .cl-classify-h{font-size:14.5px;font-weight:700;color:#1b2a3b;margin:0 0 14px}
#jjPage_cover .cl-legend2{display:flex;flex-direction:column;gap:13px}
#jjPage_cover .cl-lrow{display:flex;align-items:center;gap:11px}
#jjPage_cover .cl-lmeta{flex:1;min-width:0}
#jjPage_cover .cl-ld{width:11px;height:11px;border-radius:50%;flex:none}
#jjPage_cover .cl-ld-green{background:#1d9e75}
#jjPage_cover .cl-ld-coral{background:#d8742f}
#jjPage_cover .cl-ld-red{background:#cf4646}
#jjPage_cover .cl-ld-confirmed{background:#2d8caa}
#jjPage_cover .cl-lt{font-size:13px;font-weight:700;color:#1b2a3b}
#jjPage_cover .cl-lrow-warn .cl-lt{color:#cf4646}
#jjPage_cover .cl-lc{font-size:11.5px;font-weight:500;color:#869ab0;margin-top:1px}
#jjPage_cover .cl-lcount{margin-left:auto;font-size:13px;font-weight:700;color:#52647a}
#jjPage_cover .cl-classify-explain{margin-top:16px;padding-top:14px;border-top:1px solid rgba(26,49,82,.1);font-size:12px;line-height:1.5;color:#52647a}
/* review: status bar */
#jjPage_cover .cl-statusbar{display:flex;align-items:center;gap:18px;padding:11px 18px;margin-top:18px;border-radius:14px;background:rgba(255,255,255,0.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.66);font-size:13px;font-weight:600;flex-wrap:wrap}
#jjPage_cover .cl-bi{display:inline-flex;align-items:center;gap:6px;color:#52647a}
#jjPage_cover .cl-bi-ok{color:#10795a}
#jjPage_cover .cl-bi-spacer{margin-left:auto}
#jjPage_cover .cl-bi-checks-ok{color:#10795a}
#jjPage_cover .cl-bi-checks-warn{color:#d8742f}


/* ===== Cover Letter redesign ===== */

/* Grid */
#jjPage_cover .cl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: 20px;
  max-width: 1300px;
}
#jjPage_cover .cl-col-main,
#jjPage_cover .cl-col-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 980px) {
  #jjPage_cover .cl-grid { grid-template-columns: 1fr; }
}

/* Card base */
#jjPage_cover .cl-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
}

/* Generator card head */
#jjPage_cover .cl-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
#jjPage_cover .cl-card-head-text { flex: 1; min-width: 200px; }
#jjPage_cover .cl-card-head h3 {
  margin: 2px 0 4px 0;
  font: 600 18px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_cover .cl-card-sub {
  margin: 0;
  font: 400 13px/1.5 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
}
#jjPage_cover .cl-card-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 72, 255,0.12);
  color: var(--rr-accent);
}
#jjPage_cover .cl-uk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(36, 72, 255,0.10);
  border: 1px solid rgba(36, 72, 255,0.25);
  color: var(--rr-accent);
  font: 600 12px/1 var(--rr-font-body);
}
#jjPage_cover .cl-flag { font-size: 13px; }

/* Form fields */
#jjPage_cover .cl-field { margin-bottom: 16px; }
#jjPage_cover .cl-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  #jjPage_cover .cl-field-row { grid-template-columns: 1fr; }
}
#jjPage_cover .cl-field-label {
  display: block;
  margin-bottom: 6px;
  font: 500 13px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_cover .cl-req { color: #F87171; }
#jjPage_cover .cl-field-hint {
  color: var(--fg-dim, rgba(238,240,239,0.55));
  font-weight: 400;
}

/* Inputs */
#jjPage_cover .cl-input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text, #EEF0EF);
  font: 400 14px/1.3 var(--rr-font-body);
  box-sizing: border-box;
}
#jjPage_cover .cl-input:focus {
  outline: none;
  border-color: rgba(36, 72, 255,0.4);
}
#jjPage_cover .cl-input-wrap { position: relative; }
#jjPage_cover .cl-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-dim, rgba(238,240,239,0.5));
  pointer-events: none;
}
#jjPage_cover .cl-input-with-icon { padding-left: 36px; }
#jjPage_cover .cl-textarea {
  min-height: 90px;
  resize: vertical;
  padding: 12px 14px;
}
#jjPage_cover .cl-counter {
  margin-top: 4px;
  text-align: right;
  font: 400 11px/1 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.48));
}

/* Sector & tone buttons */
#jjPage_cover .cl-sector-btns,
#jjPage_cover .cl-tone-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#jjPage_cover .cl-sector-btn,
#jjPage_cover .cl-tone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: var(--text, #EEF0EF);
  font: 500 13px/1 var(--rr-font-body);
  cursor: pointer;
}
#jjPage_cover .cl-sector-btn:hover,
#jjPage_cover .cl-tone-btn:hover {
  background: rgba(36, 72, 255,0.08);
  border-color: rgba(36, 72, 255,0.35);
}
#jjPage_cover .cl-sector-btn.active,
#jjPage_cover .cl-tone-btn.active,
#jjPage_cover .jh-cl-sector.active,
#jjPage_cover .jh-cl-tone.active {
  background: rgba(36, 72, 255,0.15) !important;
  border-color: rgba(36, 72, 255,0.55) !important;
  color: var(--rr-accent) !important;
}
#jjPage_cover .cl-sector-caption {
  margin-top: 8px;
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
}
#jjPage_cover .cl-sector-ico,
#jjPage_cover .cl-tone-ico { opacity: 0.85; }

/* Background label row + Pull button */
#jjPage_cover .cl-bg-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
#jjPage_cover .cl-pull-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.28);
  color: #C4B5FD;
  font: 500 12px/1 var(--rr-font-body);
  cursor: pointer;
}
#jjPage_cover .cl-pull-btn:hover { background: rgba(139, 92, 246, 0.20); }

#jjPage_cover .cl-tone-note {
  margin-top: 6px;
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
}

/* Voice match toggle */
#jjPage_cover .cl-voice-field { margin: 18px 0; }
#jjPage_cover .cl-voice-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: var(--text, #EEF0EF);
  font: 500 13px/1.2 var(--rr-font-body);
  cursor: pointer;
  text-align: left;
}
#jjPage_cover .cl-voice-toggle-left,
#jjPage_cover .cl-voice-toggle-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#jjPage_cover .cl-voice-hint,
#jjPage_cover .cl-voice-cta {
  color: var(--fg-dim, rgba(238,240,239,0.6));
  font-weight: 400;
}
#jjPage_cover .cl-voice-caret { opacity: 0.6; }
#jjPage_cover .cl-voice-body { margin-top: 10px; }
#jjPage_cover .cl-voice-intro {
  margin: 4px 0 8px 0;
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
}
#jjPage_cover .cl-voice-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
#jjPage_cover .cl-voice-preview {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.10);
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.65));
}
#jjPage_cover .cl-btn-ghost {
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text, #EEF0EF);
  font: 500 12px/1 var(--rr-font-body);
  cursor: pointer;
}

/* Generate button */
#jjPage_cover .cl-generate-btn {
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  background: #2448FF;
  border: none;
  color: #fff;
  font: 600 15px/1 var(--rr-font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
#jjPage_cover .cl-generate-btn:hover { background: #1f3dd9; }

/* UK Formula footer card */
#jjPage_cover .cl-formula-card {
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.22);
  padding: 20px 24px;
}
#jjPage_cover .cl-formula-title {
  margin: 0 0 12px 0;
  font: 600 15px/1.2 var(--rr-font-body);
  color: #86EFAC;
}
#jjPage_cover .cl-formula-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
#jjPage_cover .cl-formula-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
#jjPage_cover .cl-formula-num {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.20);
  color: #86EFAC;
  font: 600 12px/24px var(--rr-font-body);
  text-align: center;
}
#jjPage_cover .cl-formula-label {
  font: 600 13px/1.2 var(--rr-font-body);
  color: var(--text, #EEF0EF);
  margin-bottom: 4px;
}
#jjPage_cover .cl-formula-desc {
  font: 400 12px/1.45 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
}
#jjPage_cover .cl-formula-arrow {
  color: rgba(34, 197, 94, 0.4);
  font-size: 18px;
}
@media (max-width: 900px) {
  #jjPage_cover .cl-formula-grid {
    grid-template-columns: 1fr;
  }
  #jjPage_cover .cl-formula-arrow { display: none; }
}

/* Right column, aside cards */
#jjPage_cover .cl-aside-card {
  padding: 20px;
}
#jjPage_cover .cl-aside-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
#jjPage_cover .cl-aside-head h3 {
  margin: 0;
  font: 600 14px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_cover .cl-aside-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#jjPage_cover .cl-icon-warn  { background: rgba(248, 113, 113, 0.15); color: #FCA5A5; }
#jjPage_cover .cl-icon-tip   { background: rgba(34, 197, 94, 0.15);  color: #86EFAC; }
#jjPage_cover .cl-icon-bulb  { background: rgba(139, 92, 246, 0.15); color: #C4B5FD; }
#jjPage_cover .cl-icon-doc-sm{ background: rgba(36, 72, 255, 0.15); color: var(--rr-accent); }

/* Mistake cards */
#jjPage_cover .cl-mistake {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 12px;
  margin-bottom: 10px;
}
#jjPage_cover .cl-mistake-ico { flex: 0 0 22px; font-size: 16px; }
#jjPage_cover .cl-mistake-quote {
  font: 600 13px/1.35 var(--rr-font-body);
  color: var(--text, #EEF0EF);
  margin-bottom: 4px;
}
#jjPage_cover .cl-mistake-body {
  font: 400 12px/1.5 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
}
#jjPage_cover .cl-mistake-red {
  background: rgba(248, 113, 113, 0.05);
  border: 1px solid rgba(248, 113, 113, 0.20);
}
#jjPage_cover .cl-mistake-amber {
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.22);
}
#jjPage_cover .cl-mistake-blue {
  background: rgba(36, 72, 255, 0.05);
  border: 1px solid rgba(36, 72, 255, 0.22);
}

/* Tips list */
#jjPage_cover .cl-tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#jjPage_cover .cl-tips-list li {
  position: relative;
  padding-left: 20px;
  font: 400 13px/1.5 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
}
#jjPage_cover .cl-tips-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #86EFAC;
  font-weight: 700;
}

/* Aside body + view buttons */
#jjPage_cover .cl-aside-body {
  margin: 0 0 12px 0;
  font: 400 13px/1.5 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
}
#jjPage_cover .cl-view-btn {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(36, 72, 255,0.12);
  border: 1px solid rgba(36, 72, 255,0.28);
  color: var(--rr-accent);
  font: 500 12px/1 var(--rr-font-body);
  cursor: pointer;
}
#jjPage_cover .cl-view-btn:hover { background: rgba(36, 72, 255,0.20); }
#jjPage_cover .cl-view-btn-compact { width: auto; margin-top: 10px; }

/* Recent list */
#jjPage_cover .cl-recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#jjPage_cover .cl-recent-empty {
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 10px;
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.55));
}

/* ===== Light-mode overrides ===== */
#jjPage_cover .cl-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.10);
}
#jjPage_cover .cl-card-sub,
#jjPage_cover .cl-field-hint,
#jjPage_cover .cl-sector-caption,
#jjPage_cover .cl-tone-note,
#jjPage_cover .cl-voice-hint,
#jjPage_cover .cl-voice-cta,
#jjPage_cover .cl-voice-intro,
#jjPage_cover .cl-voice-preview,
#jjPage_cover .cl-counter,
#jjPage_cover .cl-formula-desc,
#jjPage_cover .cl-mistake-body,
#jjPage_cover .cl-tips-list li,
#jjPage_cover .cl-aside-body,
#jjPage_cover .cl-recent-empty {
  color: rgba(26,22,20,0.68);
}
#jjPage_cover .cl-input,
#jjPage_cover .cl-sector-btn,
#jjPage_cover .cl-tone-btn,
#jjPage_cover .cl-voice-toggle,
#jjPage_cover .cl-btn-ghost {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  color: #1A1614;
}
#jjPage_cover .cl-card-head h3,
#jjPage_cover .cl-aside-head h3,
#jjPage_cover .cl-field-label,
#jjPage_cover .cl-mistake-quote,
#jjPage_cover .cl-formula-label {
  color: #1A1614;
}
#jjPage_cover .cl-input:focus {
  background: #ffffff;
  border-color: rgba(36, 72, 255,0.5);
}

/* ===== CV Builder redesign ===== */

/* Match the Cover Letter compose surface: full-height ambient gradient + the
   --vi vars the global .rr-vi__step* glass cards read (otherwise only set on
   the interview .rr-vi__scope). Copied from the #jjPage_cover rule. */
#jjPage_cv{
  flex-grow: 1;
  --vi-fg:var(--rr-ink);--vi-fg-muted:var(--rr-ink-muted);--vi-fg-subtle:var(--rr-ink-subtle);--vi-accent:var(--rr-accent);--vi-radius-lg:var(--rr-radius);
  --vi-accent-hover:var(--rr-accent-hover);--vi-accent-tint:var(--rr-accent-tint);--vi-accent-tint-2:var(--rr-accent-tint-2);--vi-accent-border:var(--rr-accent-border);
  --vi-border:var(--rr-border);--vi-border-hover:var(--rr-border-strong);--vi-surface:var(--rr-surface);--vi-radius-md:var(--rr-radius-sm);--vi-radius-sm:var(--rr-radius-sm);
  background:
    radial-gradient(900px 700px at 12% -5%,#cfe0f6 0%,rgba(207,224,246,0) 60%),
    radial-gradient(800px 650px at 95% 8%,#d8d4f7 0%,rgba(216,212,247,0) 58%),
    radial-gradient(900px 800px at 80% 100%,#cdeee8 0%,rgba(205,238,232,0) 60%),
    radial-gradient(700px 600px at 5% 95%,#ffe2cf 0%,rgba(255,226,207,0) 60%),
    linear-gradient(180deg,#eef3fa,#e7eef6);
}

/* Three-moment flow screens, mirroring the cover letter cl-screen mechanics.
   clFade and spin are global keyframes, reused here. */
#jjPage_cv .cv-screen{display:none}
#jjPage_cv .cv-screen.on{display:block;animation:clFade .4s ease both}
#jjPage_cv .cv-screen-result{max-width:1300px;margin:0 auto}
/* ═══ Pass 5a (Apollo cream, SAFE alias): CV Builder CHROME. Only the builder's --tl-*
   chrome (.cv-ld-* loading card, .cv-step-*) -> --ap-*, plus cream page bg. The PROTECTED
   preview document (#atsCvRoot .doc) uses ZERO --tl-* (proven), and its white paper is the
   OPAQUE .pg-sheet layer, so neither this alias nor the cream bg can reach the document.
   This commit does NOT touch --ink/--blue/--line (the shared #atsCvRoot token system) or
   any .dp-* rule, those are Pass 5b. ═══ */
#jjPage_cv{
  --tl-card:var(--ap-card); --tl-hair:var(--ap-hair);
  --tl-ink:var(--ap-ink); --tl-mute:var(--ap-ink-3); --tl-soft:var(--ap-ink-2);
  --tl-blue:var(--ap-accent); --tl-tint:var(--ap-accent-tint);
  background:var(--ap-bg);
}
#jjPage_cv .cv-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;padding:8px 13px;border-radius:11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ap-ink);background:rgba(255,255,255,0.6);border:1px solid var(--ap-hair)}
#jjPage_cv .cv-back:hover{background:rgba(255,255,255,0.85)}
#atsCvRoot .header .cv-back{margin:0;border-color:var(--line)}
/* Generating loader: activity-log style mirroring the Interview Prep report
   loader (icr-ld-*). Scoped to #jjPage_cv with new cv-ld-* classes and local
   --tl-* tokens defined on the panel, so #jjPage_cv keeps NO .tl-theme (the
   per-line review UI and red download gate on the sibling result screen stay
   untouched). The 4s stage ticker + 250ms elapsed clock are JS-driven; the
   progress fill is a self-contained CSS animation. */
#jjPage_cv #cvScreenGenerating{--tl-ink:#101010;--tl-blue:#2448FF;--tl-hair:#E2E2DC;--tl-mute:#A4A49C;--tl-soft:#86867E;--tl-card:#FFFFFF;--tl-tint:#EFF4FD}
#jjPage_cv .cv-gen-wrap{max-width:520px;margin:0 auto;padding:64px 24px}
#jjPage_cv .cv-ld-card{background:var(--tl-card);border:1px solid var(--tl-hair);border-radius:10px;padding:22px 24px 16px;width:100%;max-width:480px;margin:0 auto}
#jjPage_cv .cv-ld-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
#jjPage_cv .cv-ld-title{margin:0;font:500 19px/1.2 "Space Grotesk","Albert Sans",system-ui,sans-serif;letter-spacing:-0.02em;color:var(--tl-ink)}
#jjPage_cv .cv-ld-elapsed{font:500 12px/1.2 "Space Grotesk","Albert Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--tl-ink)}
#jjPage_cv .cv-ld-eta{margin:4px 0 14px;font-size:12px;line-height:1.4;color:var(--tl-soft)}
#jjPage_cv .cv-ld-track{height:3px;border-radius:999px;background:var(--tl-hair);overflow:hidden;margin-bottom:16px}
/* The fill is laid out at its TARGET width (82% of the track) and the progress
   is animated with transform:scaleX from a sliver toward 1 (transform-origin
   left). Why not animate width%: the ancestor #cvScreenGenerating.cv-screen.on
   runs clFade, which animates transform, promoting this subtree to its own
   compositor layer; a percentage-WIDTH animation is NOT compositable, so on
   that layer the rastered width stayed parked at the 2% from-value while the
   animation reported playState:running (frozen bar). transform:scaleX IS
   composited, so the compositor drives it directly. The arrived snap sets both
   scaleX(1) and width:100% so the bar fills the track on resolve. */
#jjPage_cv .cv-ld-fill{display:block;height:100%;width:82%;background:var(--tl-blue);border-radius:999px;transform:scaleX(0.025);transform-origin:left center;animation:cvLdProgress 30s ease-out forwards}
#jjPage_cv .cv-ld-arrived .cv-ld-fill{animation:none;width:100%;transform:scaleX(1);transition:transform 200ms ease,width 200ms ease}
@keyframes cvLdProgress{from{transform:scaleX(0.025)}to{transform:scaleX(1)}}
#jjPage_cv .cv-ld-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
#jjPage_cv .cv-ld-row{display:flex;align-items:flex-start;gap:12px;padding:8px 6px;border-radius:8px;opacity:0.6}
#jjPage_cv .cv-ld-mark{flex:0 0 16px;width:16px;height:16px;margin-top:2px;border-radius:999px;border:1px solid var(--tl-hair);background:var(--tl-card);position:relative}
#jjPage_cv .cv-ld-main{flex:1 1 auto;min-width:0}
#jjPage_cv .cv-ld-label{font:400 13px/1.4 "Plus Jakarta Sans",system-ui,sans-serif;color:var(--tl-mute)}
#jjPage_cv .cv-ld-detail{display:none;font-size:12px;line-height:1.45;color:var(--tl-soft);margin-top:1px}
#jjPage_cv .cv-ld-row.cv-step-done{opacity:1}
#jjPage_cv .cv-ld-row.cv-step-done .cv-ld-mark{border-radius:4px;background:var(--tl-tint);border-color:var(--tl-tint)}
#jjPage_cv .cv-ld-row.cv-step-done .cv-ld-mark::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--tl-blue);font-size:9px;font-weight:600}
#jjPage_cv .cv-ld-row.cv-step-done .cv-ld-label{color:var(--tl-mute)}
#jjPage_cv .cv-ld-row.cv-step-done .cv-ld-detail{display:block;color:var(--tl-mute)}
#jjPage_cv .cv-ld-row.cv-step-active{opacity:1}
#jjPage_cv .cv-ld-row.cv-step-active .cv-ld-mark{background:var(--tl-blue);border-color:var(--tl-blue);animation:cvLdPulse 1.6s ease-in-out infinite}
#jjPage_cv .cv-ld-row.cv-step-active .cv-ld-label{font-weight:500;color:var(--tl-ink)}
#jjPage_cv .cv-ld-row.cv-step-active .cv-ld-detail{display:block}
@keyframes cvLdPulse{0%,100%{opacity:1}50%{opacity:0.45}}
#jjPage_cv .cv-ld-foot{margin-top:14px;padding-top:10px;border-top:1px solid var(--tl-hair)}
#jjPage_cv .cv-ld-honesty{font-size:11px;line-height:1.5;color:var(--tl-mute)}
@media (prefers-reduced-motion:reduce){
  #jjPage_cv .cv-ld-row.cv-step-active .cv-ld-mark{animation:none}
  #jjPage_cv .cv-ld-fill{animation:none;width:60%;transform:scaleX(1);transition:none}
  #jjPage_cv .cv-ld-arrived .cv-ld-fill{width:100%;transform:scaleX(1)}
}

/* Grid: main column flexible, right rail a fixed width, centred up to a sensible
   maximum so the content fills the available width with no wasted right band. */
#jjPage_cv .cv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  width: 100%;
  max-width: 1600px;
  margin: 0;
}
#jjPage_cv .cv-col-main,
#jjPage_cv .cv-col-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 980px) {
  #jjPage_cv .cv-grid { grid-template-columns: 1fr; }
}
/* Widen the compose page body to match the balanced grid (the result screen keeps
   its own full-width override via the :has rule below). */
#jjPage_cv .jj-page-body { max-width: 1600px; }
/* Clearance so the fixed bottom action bar never hides the Generate button. */
#jjPage_cv #cvScreenCompose { padding-bottom: 88px; }

/* Card base */
#jjPage_cv .cv-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
}

/* Step header with numbered badge */
#jjPage_cv .cv-step-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}
#jjPage_cv .cv-step-num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(36, 72, 255,0.15);
  color: var(--rr-accent);
  font: 600 13px/28px var(--rr-font-body);
  text-align: center;
}
#jjPage_cv .cv-step-head-text { flex: 1; }
#jjPage_cv .cv-step-title {
  margin: 2px 0 6px 0;
  font: 600 17px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_cv .cv-step-sub {
  margin: 0;
  font: 400 13px/1.55 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
}

/* Info callout "What makes a UK CV different" */
#jjPage_cv .cv-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}
#jjPage_cv .cv-callout-info {
  background: rgba(36, 72, 255, 0.07);
  border: 1px solid rgba(36, 72, 255, 0.22);
}
#jjPage_cv .cv-callout-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.30);
  margin-top: 12px;
}
#jjPage_cv .cv-callout-error .cv-callout-icon,
#jjPage_cv .cv-callout-error .cv-callout-title { color: #F87171; }
#jjPage_cv .cv-callout-icon {
  flex: 0 0 20px;
  color: var(--rr-accent);
  margin-top: 2px;
}
#jjPage_cv .cv-callout-title {
  font: 600 13px/1.4 var(--rr-font-body);
  color: var(--rr-accent);
  margin-bottom: 4px;
}
#jjPage_cv .cv-callout-body {
  font: 400 13px/1.6 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.78));
}

/* Fields */
#jjPage_cv .cv-field { margin-bottom: 16px; }
#jjPage_cv .cv-field-label {
  display: block;
  margin-bottom: 6px;
  font: 500 13px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_cv .cv-field-hint {
  color: var(--fg-dim, rgba(238,240,239,0.55));
  font-weight: 400;
}
#jjPage_cv .cv-input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text, #EEF0EF);
  font: 400 14px/1.4 var(--rr-font-body);
  box-sizing: border-box;
}
#jjPage_cv .cv-input:focus {
  outline: none;
  border-color: rgba(36, 72, 255,0.4);
}
#jjPage_cv .cv-textarea { resize: vertical; }
#jjPage_cv .cv-counter {
  margin-top: 4px;
  text-align: right;
  font: 400 11px/1 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.48));
}

/* Sector buttons */
#jjPage_cv .cv-sector-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#jjPage_cv .cv-sector-btn {
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: var(--text, #EEF0EF);
  font: 500 13px/1 var(--rr-font-body);
  cursor: pointer;
}
#jjPage_cv .cv-sector-btn:hover {
  background: rgba(36, 72, 255,0.08);
  border-color: rgba(36, 72, 255,0.35);
}
#jjPage_cv .cv-sector-btn.active,
#jjPage_cv .jh-cv-sector.active {
  background: rgba(36, 72, 255,0.15) !important;
  border-color: rgba(36, 72, 255,0.55) !important;
  color: var(--rr-accent) !important;
}
#jjPage_cv .cv-sector-caption {
  margin-top: 8px;
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
}

/* Tone pills */
#jjPage_cv .cv-tone-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#jjPage_cv .cv-tone-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: var(--text, #EEF0EF);
  font: 500 13px/1 var(--rr-font-body);
  cursor: pointer;
}
#jjPage_cv .cv-tone-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.25);
  flex: 0 0 14px;
  position: relative;
}
#jjPage_cv .cv-tone-btn.active {
  background: rgba(36, 72, 255,0.12);
  border-color: rgba(36, 72, 255,0.55);
  color: var(--rr-accent);
}
#jjPage_cv .cv-tone-btn.active .cv-tone-dot {
  background: var(--rr-accent);
  border-color: var(--rr-accent);
}
#jjPage_cv .cv-tone-btn.active .cv-tone-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
}

/* Voice toggle */
#jjPage_cv .cv-voice-field { margin: 18px 0; }
#jjPage_cv .cv-voice-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: var(--text, #EEF0EF);
  font: 500 13px/1.2 var(--rr-font-body);
  cursor: pointer;
  text-align: left;
}
#jjPage_cv .cv-voice-toggle-left,
#jjPage_cv .cv-voice-toggle-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#jjPage_cv .cv-voice-hint,
#jjPage_cv .cv-voice-cta {
  color: var(--fg-dim, rgba(238,240,239,0.6));
  font-weight: 400;
}
#jjPage_cv .cv-voice-caret { opacity: 0.6; }
#jjPage_cv .cv-voice-body { margin-top: 10px; }
#jjPage_cv .cv-voice-intro {
  margin: 4px 0 8px 0;
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.6));
}
#jjPage_cv .cv-voice-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
#jjPage_cv .cv-voice-preview {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.10);
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.65));
}
#jjPage_cv .cv-btn-ghost {
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text, #EEF0EF);
  font: 500 12px/1 var(--rr-font-body);
  cursor: pointer;
}

/* Transform button + Chinese note */
#jjPage_cv .cv-transform-btn {
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--rr-accent);
  border: none;
  color: #fff;
  font: 600 15px/1 var(--rr-font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
#jjPage_cv .cv-transform-btn:hover { background: var(--rr-accent-hover); }
#jjPage_cv .cv-chinese-note {
  margin-top: 10px;
  font: 400 12px/1 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.55));
}


/* Right column aside cards */
#jjPage_cv .cv-aside-card {
  padding: 20px;
}
/* ── CV History panel + compose application picker ── */
#jjPage_cv .cvh-appfield { margin-top: 14px; }
#jjPage_cv .cvh-appfield-label { display: block; font: 500 12.5px/1.4 var(--rr-font-body); color: var(--rr-ink, #1A1614); margin-bottom: 6px; }
#jjPage_cv .cvh-appfield-hint { display: block; font: 400 11.5px/1.35 var(--rr-font-body); color: var(--rr-ink-3, #86867E); font-weight: 400; }
#jjPage_cv select.cvh-appselect { width: 100%; }
#jjPage_cv .cvh-list { display: flex; flex-direction: column; gap: 8px; }
#jjPage_cv .cvh-item { position: relative; border: 1px solid var(--rr-hair, #e7e2d8); border-radius: var(--rr-radius, 12px); background: var(--rr-card, #fff); transition: border-color .15s ease; }
#jjPage_cv .cvh-item:hover { border-color: var(--rr-accent, #2448FF); }
#jjPage_cv .cvh-open { display: block; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 11px 34px 11px 13px; border-radius: var(--rr-radius, 12px); }
#jjPage_cv .cvh-item-title { display: block; font: 600 13px/1.3 var(--rr-font-body); color: var(--rr-ink, #1A1614); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#jjPage_cv .cvh-item-meta { display: block; font: 500 11px/1.3 var(--rr-font-body); color: var(--rr-ink-3, #86867E); margin-top: 3px; }
#jjPage_cv .cvh-del { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border: 0; border-radius: 6px; background: transparent; color: var(--rr-ink-3, #86867E); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
#jjPage_cv .cvh-del:hover { background: rgba(201,89,74,.10); color: #C9594A; }
#jjPage_cv .cvh-linkrow { padding: 0 13px 11px; }
#jjPage_cv select.cvh-linksel { width: 100%; font: 500 12px/1 var(--rr-font-body); padding: 7px 9px; border: 1px solid var(--rr-hair, #e7e2d8); border-radius: 8px; background: var(--rr-bg-2, #f4f2ec); color: var(--rr-ink, #1A1614); cursor: pointer; }
#jjPage_cv .cv-aside-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
#jjPage_cv .cv-aside-head h3 {
  margin: 0;
  font: 500 16px/1.3 var(--ap-display);
  letter-spacing: -0.02em;
  color: var(--text, #EEF0EF);
}
#jjPage_cv .cv-aside-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#jjPage_cv .cv-icon-bulb  { background: rgba(251, 191, 36, 0.15); color: #FCD34D; }
#jjPage_cv .cv-icon-star  { background: rgba(34, 197, 94, 0.15);  color: #86EFAC; }
#jjPage_cv .cv-icon-clock { background: rgba(139, 92, 246, 0.15); color: #C4B5FD; }

/* Tip items, nested cards inside Quick Tips */
#jjPage_cv .cv-tip-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 10px;
}
#jjPage_cv .cv-tip-item:last-child { margin-bottom: 0; }
#jjPage_cv .cv-tip-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#jjPage_cv .cv-tip-icon-blue  { background: rgba(36, 72, 255, 0.15);  color: var(--rr-accent); }
#jjPage_cv .cv-tip-icon-red   { background: rgba(248, 113, 113, 0.15); color: #FCA5A5; }
#jjPage_cv .cv-tip-icon-green { background: rgba(34, 197, 94, 0.15);   color: #86EFAC; }
#jjPage_cv .cv-tip-title {
  font: 600 13px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
  margin-bottom: 4px;
}
#jjPage_cv .cv-tip-body {
  font: 400 12px/1.5 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
}

/* Why this works, check list + trust pill */
#jjPage_cv .cv-check-list {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#jjPage_cv .cv-check-list li {
  position: relative;
  padding-left: 22px;
  font: 400 13px/1.5 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.78));
}
#jjPage_cv .cv-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #86EFAC;
  font-weight: 700;
}
#jjPage_cv .cv-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(36, 72, 255,0.08);
  border: 1px solid rgba(36, 72, 255,0.22);
  color: var(--rr-accent);
  font: 500 12px/1.2 var(--rr-font-body);
}

/* Recent CVs */
#jjPage_cv .cv-recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
#jjPage_cv .cv-recent-empty {
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 10px;
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.55));
}
#jjPage_cv .cv-view-btn {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(36, 72, 255,0.12);
  border: 1px solid rgba(36, 72, 255,0.28);
  color: var(--rr-accent);
  font: 500 12px/1 var(--rr-font-body);
  cursor: pointer;
}

/* ===== Light-mode overrides ===== */
#jjPage_cv .cv-card,
#jjPage_cv .cv-tip-item {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.10);
}
#jjPage_cv .cv-step-sub,
#jjPage_cv .cv-callout-body,
#jjPage_cv .cv-field-hint,
#jjPage_cv .cv-sector-caption,
#jjPage_cv .cv-counter,
#jjPage_cv .cv-voice-hint,
#jjPage_cv .cv-voice-cta,
#jjPage_cv .cv-voice-intro,
#jjPage_cv .cv-voice-preview,
#jjPage_cv .cv-chinese-note,
#jjPage_cv .cv-transforms-list li,
#jjPage_cv .cv-tip-body,
#jjPage_cv .cv-check-list li,
#jjPage_cv .cv-recent-empty {
  color: rgba(26,22,20,0.68);
}
#jjPage_cv .cv-input,
#jjPage_cv .cv-sector-btn,
#jjPage_cv .cv-tone-btn,
#jjPage_cv .cv-voice-toggle,
#jjPage_cv .cv-btn-ghost {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  color: #1A1614;
}
#jjPage_cv .cv-step-title,
#jjPage_cv .cv-field-label,
#jjPage_cv .cv-aside-head h3,
#jjPage_cv .cv-tip-title {
  color: #1A1614;
}
/* Readability on the light glass: the dark-theme rule
   #jobhunterView .jh-card h3{color:#fff} (specificity 1,1,1) out-ranks the CV
   light overrides, so the result heading and the "What the AI transforms"
   heading rendered white. Pin both to the dark title colour, and darken the
   result info-box note (was faint --jh-amber) so it reads. */
#jjPage_cv #jhCvOutput h3 { color: var(--vi-fg); }
#jjPage_cv .cv-transforms-card .cv-step-title { color: var(--vi-fg); }
#jjPage_cv .jh-info-box p { color: #92400e; }
/* Phase 3: inline [TODO: confirm ...] placeholders are clickable to fill. */
#jjPage_cv .jh-cv-todo { cursor: pointer; color: #92400e; background: rgba(210,153,34,0.16); border-radius: 4px; padding: 0 3px; text-decoration: underline dotted; text-underline-offset: 2px; font-weight: 600; }
#jjPage_cv .jh-cv-todo:hover { background: rgba(210,153,34,0.30); }
/* Phase 4: the small inline input the user types a placeholder value into. */
#jjPage_cv .jh-cv-todo-input { display: inline-block; min-width: 150px; max-width: 280px; font: inherit; font-size: 12.5px; padding: 1px 6px; border-radius: 6px; border: 1px solid #92400e; background: #fff; color: #1A1614; outline: none; }
/* Per-line "This is my own words" confirm (mirrors the cover letter). A
   confirmed line is shown in blue (user-attested), distinct from green
   source-grounded lines. */
#jjPage_cv .jh-sent-confirmed { border-left: 3px solid var(--rr-accent-strong); padding-left: 8px; background: rgba(36, 72, 255,0.06); }
#jjPage_cv .jh-sent-confirmed .jh-sent-tag { color: #1d5e95; background: rgba(36, 72, 255,0.10); }
#jjPage_cv .cv-confirm-btn { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(36, 72, 255,0.5); background: rgba(36, 72, 255,0.10); color: #1d5e95; font: 600 11px/1.5 'Plus Jakarta Sans', sans-serif; cursor: pointer; vertical-align: middle; }
#jjPage_cv .cv-confirm-btn:hover { background: rgba(36, 72, 255,0.2); }

/* Glass treatment for the right-hand aside cards and the (now unnumbered)
   "What the AI transforms" card so they read cohesively on the ambient
   gradient, matching the rr-vi__step glass cards. Output cards stay plain
   .cv-card (faint), so the transformed CV output is left exactly as-is. */
#jjPage_cv .cv-aside-card,
#jjPage_cv .cv-transforms-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--vi-radius-lg, 16px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(36, 72, 255, 0.06),
    0 12px 28px -8px rgba(17, 17, 20, 0.10),
    0 4px 12px rgba(17, 17, 20, 0.04);
}

/* ============================================================
   CV BUILDER REDESIGN: top stepper, side-by-side CV content, sticky action bar,
   tone cards. All reuse the page --vi-* tokens, no ad-hoc colours.
   ============================================================ */
/* Top progress stepper */
#jjPage_cv .cvb-stepper {
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 1280px; margin: 0 auto 20px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
#jjPage_cv .cvb-step {
  display: inline-flex; align-items: center; gap: 9px;
  flex: 0 0 auto; padding: 6px 6px; background: none; border: none;
  cursor: pointer; font-family: inherit;
}
#jjPage_cv .cvb-step-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12.5px/1 var(--rr-font-body);
  background: #fff; border: 1px solid var(--vi-border-hover); color: var(--vi-fg-subtle);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
#jjPage_cv .cvb-step-label {
  font: 600 13px/1 var(--rr-font-body); color: var(--vi-fg-subtle);
  white-space: nowrap; transition: color 160ms ease;
}
#jjPage_cv .cvb-step.is-active .cvb-step-num {
  background: var(--vi-accent); border-color: var(--vi-accent); color: #fff;
}
#jjPage_cv .cvb-step.is-active .cvb-step-label { color: var(--vi-fg); }
#jjPage_cv .cvb-step-line {
  flex: 1 1 auto; min-width: 16px; height: 1px;
  background: var(--vi-border-hover);
}
#jjPage_cv .cvb-stepper-compact { display: none; }

/* CV content: side-by-side drop zone + paste */
#jjPage_cv .cvb-cv-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: stretch;
}
#jjPage_cv .cvb-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 4px; width: 100%; min-height: 168px; padding: 22px 16px; cursor: pointer; font-family: inherit;
  background: var(--vi-accent-tint); border: 1.5px dashed var(--vi-accent-border);
  border-radius: var(--vi-radius-md); color: var(--vi-fg);
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
#jjPage_cv .cvb-drop:hover:not(:disabled) { border-color: var(--vi-accent); background: var(--vi-accent-tint-2); }
#jjPage_cv .cvb-drop:disabled { opacity: 0.6; cursor: progress; }
#jjPage_cv .cvb-drop-ico { color: var(--vi-accent); margin-bottom: 4px; }
#jjPage_cv .cvb-drop-ico i { font-size: 30px; }
#jjPage_cv .cvb-drop-title { font: 700 14px/1.3 var(--rr-font-body); color: var(--vi-fg); }
#jjPage_cv .cvb-drop-sub { font: 500 12px/1.4 var(--rr-font-body); color: var(--vi-fg-subtle); }
#jjPage_cv .cvb-cv-paste { display: flex; flex-direction: column; min-width: 0; }
#jjPage_cv .cvb-cv-paste .cv-textarea { flex: 1; min-height: 168px; }
#jjPage_cv .cvb-cv-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 6px; }
#jjPage_cv .cvb-cv-helper { font: 400 12px/1.4 var(--rr-font-body); color: var(--vi-fg-subtle); }
#jjPage_cv .cvb-cv-foot .cv-counter { margin-top: 0; white-space: nowrap; }
#jjPage_cv .cvb-upload-status { margin-top: 8px; font: 400 12px/1.4 var(--rr-font-body); color: var(--vi-fg-subtle); }
#jjPage_cv .cvb-upload-status[data-state="ok"] { color: #0a7d36; }
#jjPage_cv .cvb-upload-status[data-state="err"] { color: #b32525; }
@media (max-width: 720px) {
  #jjPage_cv .cvb-cv-cols { grid-template-columns: 1fr; }
}

/* Tone cards (title + one-line descriptor) */
#jjPage_cv .cv-tone-btns.cvb-tone-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#jjPage_cv .cvb-tone-cards .cv-tone-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 16px; text-align: left; border-radius: var(--vi-radius-md);
}
#jjPage_cv .cvb-tone-card-title { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1.2 var(--rr-font-body); }
#jjPage_cv .cvb-tone-card-desc { font: 400 12px/1.4 var(--rr-font-body); color: var(--vi-fg-subtle); }
#jjPage_cv .cvb-tone-cards .cv-tone-btn.active .cvb-tone-card-desc { color: var(--vi-accent-hover); }
@media (max-width: 560px) {
  #jjPage_cv .cv-tone-btns.cvb-tone-cards { grid-template-columns: 1fr; }
}

/* Sticky bottom action bar. Mounted as a child of #jjMain (outside #jjPage_cv and
   its animated ancestors) so position:fixed anchors to the viewport. Left edge is
   offset by the sidebar width (272px, matching #jjSidebar's --sb-width) and collapses
   to 0 when the sidebar is hidden on narrow widths, mirroring the .sim-view offset.
   Tokens carry their canonical fallback so they resolve outside #jjPage_cv. */
.cvb-actionbar {
  display: none;
  position: fixed; left: 272px; right: 0; bottom: 0; z-index: 40;
  align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px;
  background: #fff; border-top: 1px solid var(--vi-border-hover, rgba(17,17,20,0.14));
  box-shadow: 0 -8px 24px -12px rgba(17, 17, 20, 0.18);
}
/* Show only when the CV compose screen is the active view. */
#jjMain:has(#jjPage_cv.jj-page.active #cvScreenCompose.cv-screen.on) .cvb-actionbar { display: flex; }
.cvb-ab-secure { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cvb-ab-shield { flex: 0 0 auto; color: var(--vi-accent, var(--rr-accent)); }
.cvb-ab-shield i { font-size: 22px; }
.cvb-ab-secure-title { display: block; font: 700 13.5px/1.2 var(--rr-font-body); color: var(--vi-fg, #15161A); }
.cvb-ab-secure-sub { display: block; margin-top: 2px; font: 400 12px/1.3 var(--rr-font-body); color: var(--vi-fg-subtle, #9CA3AF); }
.cvb-ab-right { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.cvb-ab-step { font: 600 12.5px/1 var(--rr-font-body); color: var(--vi-fg-subtle, #9CA3AF); white-space: nowrap; }
.cvb-ab-continue {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border: none; border-radius: var(--vi-radius-md, 12px); cursor: pointer;
  background: var(--vi-accent, var(--rr-accent)); color: #fff; font: 600 14px/1 var(--rr-font-body);
  box-shadow: 0 10px 24px -10px rgba(36, 72, 255,0.55);
  transition: background 160ms ease;
}
.cvb-ab-continue:hover { background: var(--vi-accent-hover, var(--rr-accent-hover)); }
.cvb-ab-continue i { font-size: 16px; }
/* Track the sidebar collapse: at the .jj-sidebar hide breakpoint the offset goes to 0. */
@media (max-width: 768px) {
  .cvb-actionbar { left: 0; padding-left: 16px; padding-right: 16px; }
  .cvb-ab-secure-title, .cvb-ab-secure-sub, .cvb-ab-shield { display: none; }
}

/* ============================================================
   ATS CV BUILDER (ported from ats-cv-builder.html). All selectors scoped under
   #atsCvRoot. The reference :root vars live on #atsCvRoot. The global reset and
   html, body, body rules are dropped. Every position:fixed element from the
   reference is position:absolute here, anchored to the bounded, position:relative
   #atsCvRoot so the builder lays out inside the CV page and never covers the app
   nav. The popout and connector coordinates are computed relative to this root
   in JS (jhAcb positionPopout).
   ============================================================ */
  #atsCvRoot{
    --blue:var(--rr-accent); --blue-600:var(--rr-accent-hover); --blue-700:var(--rr-accent-strong);
    --blue-tint:var(--rr-accent-tint); --blue-tint-2:var(--rr-accent-tint-2); --blue-line:var(--rr-accent-border);
    --green:#16A36B; --green-tint:#E6F6EE; --green-line:#CDEBDB;
    --amber:#E8920C; --amber-tint:#FCF3E4; --amber-line:#F2DEBB;
    --red:#E5544B; --red-tint:#FCEDEC; --red-line:#F4CFCC;
    --ink:#15181D; --ink-2:#3A4049; --muted:#6B7480; --muted-2:#8C95A1;
    --line:#E9EBEF; --line-soft:#EFF1F4; --workspace:#ECEEF1; --card:#FFFFFF;
    --shadow-sm:0 1px 2px rgba(20,24,32,.04),0 1px 3px rgba(20,24,32,.05);
    --shadow-md:0 2px 6px rgba(20,24,32,.05),0 8px 24px rgba(20,24,32,.06);
    --shadow-lg:0 4px 12px rgba(20,24,32,.06),0 18px 50px rgba(20,24,32,.12);
    --radius:var(--rr-radius); --header-h:66px; --sidebar-w:328px;
    position:relative; display:flex; flex-direction:column; overflow:visible; background:transparent;
    font-family:'Plus Jakarta Sans',-apple-system,sans-serif; color:var(--ink);
    -webkit-font-smoothing:antialiased; text-align:left;
  }
  #atsCvRoot *{box-sizing:border-box;margin:0;padding:0}
  #atsCvRoot ::selection{background:var(--blue-tint-2)}
  #atsCvRoot svg{display:block}
  #atsCvRoot .ico{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  #atsCvRoot .ico-sm{width:15px;height:15px} #atsCvRoot .ico-xs{width:13px;height:13px}
  #atsCvRoot button{font-family:inherit}

  /* HEADER (flows at the top of the root) */
  #atsCvRoot .header{position:relative;flex:none;min-height:var(--header-h);z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 22px;background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--line)}
  #atsCvRoot .h-left{display:flex;align-items:center;gap:13px}
  #atsCvRoot .doc-badge{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(155deg,var(--rr-accent),var(--rr-accent-strong));box-shadow:0 4px 12px rgba(36, 72, 255,.3),inset 0 1px 0 rgba(255,255,255,.25)}
  #atsCvRoot .doc-badge .ico{width:20px;height:20px;stroke-width:1.9}
  #atsCvRoot .h-title{font-size:16.5px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
  #atsCvRoot .h-sub{font-size:12.5px;color:var(--muted);margin-top:2px;font-weight:500}
  /* Status pill: reference cv-builder.html pill (999px + shadowed dot), kept single-line at 40px to fit the busier live header */
  #atsCvRoot .h-center{display:inline-flex;align-items:center;gap:11px;height:40px;padding:0 16px 0 12px;border-radius:999px;background:var(--green-tint);border:1px solid var(--green-line);transition:.3s}
  #atsCvRoot .h-center .dot{width:24px;height:24px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;box-shadow:0 2px 6px rgba(22,163,107,.35);flex:none}
  #atsCvRoot .h-center .dot .ico{width:13px;height:13px;stroke-width:2.6}
  #atsCvRoot .h-center .t{font-size:13.5px;font-weight:700;color:#0E7A4E;line-height:1.1;white-space:nowrap}
  #atsCvRoot .h-center .s{display:none}
  #atsCvRoot .h-center.warn{background:var(--amber-tint);border-color:var(--amber-line)}
  #atsCvRoot .h-center.warn .dot{background:var(--amber);box-shadow:0 2px 6px rgba(232,146,12,.35)}
  #atsCvRoot .h-center.warn .t{color:#A66A06} #atsCvRoot .h-center.warn .s{color:#C08428}
  #atsCvRoot .h-right{display:flex;align-items:center;gap:10px}
  #atsCvRoot .btn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:all .16s ease;white-space:nowrap}
  #atsCvRoot .btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-2);padding:9px 14px;box-shadow:var(--shadow-sm)}
  #atsCvRoot .btn-ghost:hover{border-color:#D8DCE2;background:#FCFCFD;transform:translateY(-1px)}
  #atsCvRoot .btn-primary{background:linear-gradient(170deg,var(--rr-accent),var(--blue-600));color:#fff;padding:9px 8px 9px 15px;box-shadow:0 4px 12px rgba(36, 72, 255,.3),inset 0 1px 0 rgba(255,255,255,.18)}
  #atsCvRoot .btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(36, 72, 255,.38)}
  #atsCvRoot .btn-primary .div{width:1px;height:18px;background:rgba(255,255,255,.28);margin:0 2px 0 4px}
  #atsCvRoot .btn-primary .chev{padding:0 4px}
  #atsCvRoot .menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;min-width:210px;display:none;z-index:70}
  #atsCvRoot .menu.open{display:block;animation:acbPop .16s ease}
  #atsCvRoot .menu-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
  #atsCvRoot .menu-item:hover{background:var(--blue-tint);color:var(--blue)}
  #atsCvRoot .menu-item .ico{width:16px;height:16px}
  #atsCvRoot .menu-item small{color:var(--muted-2);font-weight:500;display:block;font-size:11px}

  /* Unified score dashboard, one row, three dials (CV Quality / Job Match /
     ATS Checks), so the two scores never read as contradicting each other in
     two separate panels. Values are mirrored, not recomputed (see cvDashSync). */
  #atsCvRoot .cv-dash-strip{display:flex;gap:0;flex:none;background:var(--card);border-bottom:1px solid var(--line);padding:14px 18px}
  #atsCvRoot .cv-dash-dial{display:flex;align-items:center;gap:12px;flex:1;background:none;border:0;border-right:1px solid var(--line);padding:4px 18px;cursor:pointer;text-align:left;border-radius:0;transition:background-color .12s ease}
  #atsCvRoot .cv-dash-dial:first-child{padding-left:2px}
  #atsCvRoot .cv-dash-dial:last-child{border-right:0}
  #atsCvRoot .cv-dash-dial:hover{background:var(--muted-3,rgba(0,0,0,.03))}
  #atsCvRoot .cv-dash-ring{--pct:0;--dash-color:#3A6FF0;width:46px;height:46px;flex:none;border-radius:50%;background:conic-gradient(var(--dash-color) calc(var(--pct)*1%),#EEF0F3 0);display:flex;align-items:center;justify-content:center;position:relative}
  #atsCvRoot .cv-dash-ring::before{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--card,#fff)}
  #atsCvRoot .cv-dash-num{position:relative;z-index:1;font-weight:700;font-size:13px;color:var(--ink,#1a1614)}
  #atsCvRoot #cvDashMatchRing{--dash-color:#8b5cf6}
  #atsCvRoot #cvDashChecksRing{--dash-color:#16A36B}
  #atsCvRoot .cv-dash-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
  #atsCvRoot .cv-dash-lbl{font-size:12.5px;font-weight:700;color:var(--ink,#1a1614)}
  #atsCvRoot .cv-dash-sub{font-size:11px;color:var(--muted-2,#8b8578);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #atsCvRoot .cv-dash-dial.cv-dash-empty .cv-dash-num{font-size:16px;color:var(--muted-2,#8b8578)}
  @media(max-width:640px){
    #atsCvRoot .cv-dash-strip{flex-direction:column;gap:8px;padding:10px 14px}
    #atsCvRoot .cv-dash-dial{border-right:0;border-bottom:1px solid var(--line);padding:8px 2px}
    #atsCvRoot .cv-dash-dial:last-child{border-bottom:0}
  }

  /* SHELL fills the remaining pane height below the header; sidebar fixed width, workspace scrolls internally */
  #atsCvRoot .shell{position:relative;flex:1;min-height:0;display:flex}
  /* the result screen takes the whole content pane (full width, anchored top-left); compose and generating keep their normal width */
  #jjPage_cv .jj-page-body:has(#cvScreenResult.on){max-width:none;margin:0;padding:0}
  #jjPage_cv #cvScreenResult.on{max-width:none;margin:0}
  #atsCvRoot .sidebar{width:var(--sidebar-w);flex:none;height:100%;overflow-y:auto;padding:20px 18px 32px;display:flex;flex-direction:column;gap:14px;background:transparent}
  #atsCvRoot .sidebar::-webkit-scrollbar{width:8px}
  #atsCvRoot .sidebar::-webkit-scrollbar-thumb{background:#DADEE4;border-radius:8px;border:2px solid #F7F8FA}
  #atsCvRoot .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:17px}
  #atsCvRoot .card-lbl{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--muted-2);text-transform:uppercase}
  #atsCvRoot .row-between{display:flex;align-items:center;justify-content:space-between}
  #atsCvRoot .role-name{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-top:9px}
  #atsCvRoot .role-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--blue);background:var(--blue-tint);border:1px solid var(--blue-line);padding:4px 9px;border-radius:8px;margin-top:11px}
  #atsCvRoot .link{font-size:12.5px;font-weight:600;color:var(--blue);cursor:pointer;display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0}
  #atsCvRoot .link:hover{color:var(--blue-700)}
  #atsCvRoot .jd-box{margin-top:13px;display:none}
  #atsCvRoot .jd-box.open{display:block;animation:acbPop .18s ease}
  #atsCvRoot .jd-box textarea{width:100%;height:150px;border:1px solid var(--line);border-radius:10px;padding:10px;font-family:inherit;font-size:12px;line-height:1.5;color:var(--ink-2);resize:vertical;background:#FCFCFD}
  #atsCvRoot .jd-box textarea:focus{outline:none;border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-tint)}
  #atsCvRoot .ai-live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--blue);background:var(--blue-tint);border:1px solid var(--blue-line);padding:3px 8px;border-radius:999px;text-transform:uppercase}
  #atsCvRoot .ai-live .blip{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:acbBlip 1.4s ease-in-out infinite}
  @keyframes acbBlip{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
  #atsCvRoot .score-head{display:flex;align-items:center;gap:16px;margin:14px 0 6px}
  #atsCvRoot .gauge{position:relative;width:84px;height:84px;flex:none}
  #atsCvRoot .gauge svg{transform:rotate(-90deg)}
  #atsCvRoot .gauge .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  #atsCvRoot .gauge .num{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1}
  #atsCvRoot .gauge .den{font-size:10.5px;color:var(--muted-2);font-weight:600;margin-top:1px}
  #atsCvRoot .pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px}
  #atsCvRoot .pill .ico{width:13px;height:13px;stroke-width:2.4}
  #atsCvRoot .pill.g{color:var(--green);background:var(--green-tint);border:1px solid var(--green-line)}
  #atsCvRoot .pill.a{color:#A66A06;background:var(--amber-tint);border:1px solid var(--amber-line)}
  #atsCvRoot .pill.r{color:#B23B33;background:var(--red-tint);border:1px solid var(--red-line)}
  #atsCvRoot .score-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:9px;font-weight:500}
  #atsCvRoot .breakdown{display:flex;flex-direction:column;gap:9px;margin-top:15px;padding-top:15px;border-top:1px solid var(--line-soft)}
  #atsCvRoot .brk{display:flex;align-items:center;gap:9px;font-size:13px}
  #atsCvRoot .brk .d{width:9px;height:9px;border-radius:50%;flex:none}
  #atsCvRoot .brk .lbl{color:var(--ink-2);font-weight:500} #atsCvRoot .brk .n{margin-left:auto;font-weight:700}
  #atsCvRoot .d.g{background:var(--green)} #atsCvRoot .d.a{background:var(--amber)} #atsCvRoot .d.r{background:var(--red)}
  #atsCvRoot .chk{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
  #atsCvRoot .chk:last-child{border-bottom:none;padding-bottom:0}
  #atsCvRoot .chk .badge{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;margin-top:1px}
  #atsCvRoot .chk .badge .ico{width:11px;height:11px;stroke-width:2.6}
  #atsCvRoot .chk.ok .badge{background:var(--green-tint);color:var(--green)}
  #atsCvRoot .chk.no .badge{background:var(--amber-tint);color:var(--amber)}
  #atsCvRoot .chk .ctext{font-weight:600;color:var(--ink-2)} #atsCvRoot .chk .cdet{font-weight:500;color:var(--muted-2);font-size:11.5px;margin-top:1px}
  #atsCvRoot .kw-wrap{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 4px}
  #atsCvRoot .kw{font-size:12.5px;font-weight:600;color:#B26100;background:var(--amber-tint);border:1px solid var(--amber-line);padding:5px 10px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.14s}
  #atsCvRoot .kw:hover{background:#F9E9CC;transform:translateY(-1px)}
  #atsCvRoot .kw .ico{width:12px;height:12px}
  #atsCvRoot .kw-none{font-size:12.5px;color:var(--green);font-weight:600;display:flex;align-items:center;gap:7px;margin-top:12px}
  #atsCvRoot .set-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line-soft)}
  #atsCvRoot .set-row:last-child{border-bottom:none;padding-bottom:0} #atsCvRoot .set-row:first-of-type{padding-top:13px}
  #atsCvRoot .set-k{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);font-weight:500}
  #atsCvRoot .set-k .ico{width:15px;height:15px;color:var(--muted-2)}
  #atsCvRoot .set-v{font-size:13px;font-weight:600;color:var(--ink-2)}

  /* WORKSPACE */
  /* Reference "desk" texture, re-toned warm for the Apollo cream theme (kept transparent base so the cream page-body shows through). */
  #atsCvRoot .workspace{flex:1;min-width:0;min-height:0;overflow-y:auto;position:relative;background-color:transparent;background-image:radial-gradient(circle at 1px 1px,rgba(60,54,42,.05) 1px,transparent 0);background-size:22px 22px}
  #atsCvRoot .workspace::-webkit-scrollbar{width:11px}
  #atsCvRoot .workspace::-webkit-scrollbar-thumb{background:#CFD4DB;border-radius:10px;border:3px solid var(--workspace)}
  #atsCvRoot .toolbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;padding:11px 16px;background:rgba(250,249,246,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--ap-hair)}
  #atsCvRoot .tbar{display:flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px;box-shadow:var(--shadow-sm)}
  #atsCvRoot .tb{width:33px;height:33px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);background:transparent;border:none;transition:.13s}
  #atsCvRoot .tb:hover{background:#F2F4F7;color:var(--ink)}
  #atsCvRoot .tb.active{background:var(--blue-tint);color:var(--blue)}
  #atsCvRoot .tb .ico{width:16px;height:16px}
  #atsCvRoot .tb-sep{width:1px;height:20px;background:var(--line);margin:0 3px}
  #atsCvRoot .tpl-btn{display:flex;align-items:center;gap:9px;padding:0 12px;height:33px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);background:transparent;border:none;position:relative}
  #atsCvRoot .tpl-btn:hover{background:#F2F4F7}
  #atsCvRoot .tpl-btn .tg{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--green);background:var(--green-tint);padding:2px 6px;border-radius:5px;letter-spacing:.03em}
  #atsCvRoot .zoom{display:flex;align-items:center;gap:2px}
  #atsCvRoot .zoom .pct{font-size:12.5px;font-weight:700;color:var(--ink-2);min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
  #atsCvRoot .tpl-pop{position:absolute;top:calc(100% + 8px);left:0;width:300px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:10px;display:none;z-index:80}
  #atsCvRoot .tpl-pop.open{display:block;animation:acbPop .16s ease}
  #atsCvRoot .tpl-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:7px 10px;margin-bottom:8px;background:#FCFCFD}
  #atsCvRoot .tpl-search .ico{width:14px;height:14px;color:var(--muted-2)}
  #atsCvRoot .tpl-search input{border:none;background:none;outline:none;font-family:inherit;font-size:13px;width:100%;color:var(--ink)}
  #atsCvRoot .tpl-item{display:flex;align-items:flex-start;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer}
  #atsCvRoot .tpl-item:hover{background:var(--blue-tint)}
  #atsCvRoot .tpl-item.sel{background:var(--blue-tint);box-shadow:inset 0 0 0 1px var(--blue-line)}
  #atsCvRoot .tpl-item .ti-name{font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px}
  #atsCvRoot .tpl-item .ti-name .ok{width:14px;height:14px;color:var(--green)}
  #atsCvRoot .tpl-item .ti-desc{font-size:11.5px;color:var(--muted);font-weight:500;margin-top:2px;line-height:1.4}
  #atsCvRoot .fill-chip{position:sticky;top:60px;z-index:25;width:max-content;margin:10px auto -2px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 14px;box-shadow:var(--shadow-sm);font-size:12px;font-weight:600;color:var(--ink-2)}
  #atsCvRoot .fill-track{width:90px;height:6px;border-radius:6px;background:#EEF0F3;overflow:hidden}
  #atsCvRoot .fill-bar{height:100%;border-radius:6px;background:var(--green);transition:width .25s,background .25s}
  #atsCvRoot .fill-chip.warn{border-color:var(--red-line);color:#B23B33}
  #atsCvRoot .fill-chip.warn .fill-bar{background:var(--red)}
  #atsCvRoot .fill-chip .trim{font-size:11px;font-weight:700;color:var(--blue);background:var(--blue-tint);border:1px solid var(--blue-line);border-radius:999px;padding:3px 9px;cursor:pointer;display:none;align-items:center;gap:5px}
  #atsCvRoot .fill-chip.warn .trim{display:inline-flex}
  #atsCvRoot .fill-chip.multi .trim{display:inline-flex}
  #atsCvRoot .fill-chip .trim .ico{width:11px;height:11px}
  #atsCvRoot .page-wrap{display:flex;justify-content:center;padding:10px 16px 70px}
  #atsCvRoot .page-scaler{transform-origin:top center;transition:transform .18s ease}
  /* the A4 reuses the generic class "page"; the app router rule .page:not(.active){display:none!important} hides it, so force display here (id specificity beats the class-only !important rule). Auto height so the full CV flows like the Word export, with a hairline page-break guide every 1123px (one A4) so multi-page content is never clipped. */
  #atsCvRoot .page{display:block!important;width:794px;height:auto;min-height:1123px;border-radius:3px;position:relative;overflow:visible;background:repeating-linear-gradient(to bottom,#fff 0,#fff 1122px,var(--line) 1122px,var(--line) 1123px);box-shadow:0 1px 1px rgba(20,24,32,.04),0 10px 28px rgba(20,24,32,.1),0 30px 70px rgba(20,24,32,.1);border:1px solid rgba(20,24,32,.04)}
  #atsCvRoot .page.unclip{height:auto;min-height:1123px}
  #atsCvRoot .page::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,rgba(229,84,75,.07));opacity:0;transition:.25s;pointer-events:none}
  #atsCvRoot .page.over::after{opacity:1}
  #atsCvRoot .doc{padding:58px 62px;outline:none}
  #atsCvRoot .page{background:transparent;border:0;box-shadow:none}
  #atsCvRoot .pg-sheets{position:absolute;left:0;top:0;width:794px;z-index:0;pointer-events:none}
  #atsCvRoot .pg-sheet{position:absolute;left:0;width:794px;height:1123px;box-sizing:border-box;background:#fff;border-radius:3px;border:1px solid rgba(20,24,32,.04);box-shadow:0 1px 1px rgba(20,24,32,.04),0 10px 28px rgba(20,24,32,.1),0 30px 70px rgba(20,24,32,.1)}
  /* CV builder: content flush to top, left and right edges */
  .jj-page:has(.cv-screen-result.on){padding-top:0;padding-right:0;padding-left:0}
  .jj-page-body.jj-tool-wrap:has(.cv-screen-result.on){padding-right:0}
  .cv-screen-result #workspace{padding-right:44px}
  @media(max-width:768px){.cv-screen-result #workspace{padding-right:16px}}
  @media(max-width:380px){.cv-screen-result #workspace{padding-right:10px}}
  .cv-screen-result .toolbar{margin-right:-44px !important}
  @media(max-width:768px){.cv-screen-result .toolbar{margin-right:-16px !important}}
  @media(max-width:380px){.cv-screen-result .toolbar{margin-right:-10px !important}}
  #atsCvRoot .doc{position:relative;z-index:1;background:transparent}
  #atsCvRoot .pg-break{display:block;width:100%;pointer-events:none;user-select:none}
  #atsCvRoot .doc *{outline:none}
  #atsCvRoot .cv-name{font-family:'Fraunces',serif;font-size:38px;font-weight:500;letter-spacing:.04em;line-height:1;color:var(--ink)}
  #atsCvRoot .cv-role{font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--blue);text-transform:uppercase;margin-top:11px}
  /* Headline-ideas affordance on the role line: subtle persistent sparkle, more prominent on hover/focus, stripped on persist/export. */
  #atsCvRoot .cv-role .cv-headline-ai{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:20px;height:20px;margin-left:8px;padding:0;border:none;background:transparent;color:var(--rr-accent);opacity:.55;cursor:pointer;border-radius:var(--rr-radius-pill);transition:opacity .13s,background .13s}
  #atsCvRoot .cv-role .cv-headline-ai i{font-size:15px;line-height:1}
  #atsCvRoot .cv-role .cv-headline-ai:hover,#atsCvRoot .cv-role .cv-headline-ai:focus{opacity:1;background:var(--rr-accent-tint);outline:none}
  #atsCvRoot .cv-contact{display:flex;flex-wrap:wrap;align-items:center;margin-top:17px;font-size:12.5px;color:var(--ink-2);font-weight:500}
  #atsCvRoot .cv-contact span{display:inline-flex;align-items:center;gap:7px}
  #atsCvRoot .cv-contact .sep{width:1px;height:13px;background:var(--line);margin:0 12px}
  #atsCvRoot .cv-contact .ico{width:14px;height:14px;color:var(--blue);stroke-width:1.9}
  #atsCvRoot .cv-contact:empty::before{content:attr(data-ph);color:var(--muted-2);font-weight:500;pointer-events:none}
  /* Contact "add" chips: muted dashed pills, stripped on persist/export. --rr-* tokens only. */
  #atsCvRoot .cv-contact .cv-add{display:inline-flex;align-items:center;gap:5px;margin-left:12px;padding:2px 9px;font-family:var(--rr-font-body);font-size:11.5px;font-weight:600;color:var(--rr-ink-subtle);background:transparent;border:1px dashed var(--rr-border-strong);border-radius:var(--rr-radius-pill);line-height:1.4;cursor:pointer;user-select:none;transition:color .13s,border-color .13s}
  #atsCvRoot .cv-contact .cv-add:hover{color:var(--rr-ink-muted);border-color:var(--rr-ink-subtle)}
  #atsCvRoot .cv-contact > .cv-add:first-child{margin-left:0}
  #atsCvRoot .cv-contact .cv-add .cv-add-plus{font-weight:700;opacity:.85}
  #atsCvRoot .cv-divider{height:1px;background:var(--line);margin:22px 0 22px}
  #atsCvRoot .cv-sec{margin-bottom:22px} #atsCvRoot .cv-sec:last-child{margin-bottom:0}
  #atsCvRoot .cv-sec-h{font-size:13px;font-weight:800;letter-spacing:.13em;color:var(--blue);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:12px}
  #atsCvRoot .cv-sec-h::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,var(--blue-line),transparent)}
  #atsCvRoot .cv-p{font-size:13px;line-height:1.65;color:var(--ink-2)}
  #atsCvRoot .exp-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
  #atsCvRoot .exp-role{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
  #atsCvRoot .exp-co{font-size:13px;font-weight:600;color:var(--blue);margin-top:2px}
  #atsCvRoot .exp-meta{font-size:12px;color:var(--muted);font-weight:500;text-align:right;white-space:nowrap;line-height:1.5}
  #atsCvRoot .cv-ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:6px}
  #atsCvRoot .cv-ul li{position:relative;padding-left:19px;font-size:12.8px;line-height:1.55;color:var(--ink-2);border-radius:7px;transition:background .15s}
  #atsCvRoot .cv-ul li::before{content:"";position:absolute;left:3px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.85}
  #atsCvRoot .cv-ul li[data-bullet]:hover{background:#F5F8FE;cursor:text}
  #atsCvRoot .cv-ul li.active{background:var(--blue-tint);box-shadow:inset 0 0 0 1px var(--blue-line);padding:6px 11px 6px 21px;color:var(--ink)}
  #atsCvRoot .cv-ul li.active::before{left:9px;top:14px}
  #atsCvRoot .exp-block{margin-bottom:18px} #atsCvRoot .exp-block:last-child{margin-bottom:0}
  #atsCvRoot .skills-line{font-size:12.8px;line-height:1.7;color:var(--ink-2)}
  #atsCvRoot .skills-line b{color:var(--ink);font-weight:700}
  #atsCvRoot .edu-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
  #atsCvRoot .edu-deg{font-size:14px;font-weight:700;color:var(--ink)}
  #atsCvRoot .edu-school{font-size:12.5px;font-weight:600;color:var(--blue);margin-top:2px}
  #atsCvRoot .edu-detail{font-size:12px;color:var(--muted);margin-top:3px;font-weight:500}
  #atsCvRoot .page.tpl-classic .cv-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-.01em;font-size:32px;text-transform:none}
  #atsCvRoot .page.tpl-classic .cv-sec-h{color:var(--ink);border:none;letter-spacing:.06em}
  #atsCvRoot .page.tpl-classic .cv-sec-h::after{background:var(--ink);height:1px;opacity:.25}
  #atsCvRoot .page.tpl-classic .cv-role,#atsCvRoot .page.tpl-classic .exp-co,#atsCvRoot .page.tpl-classic .edu-school{color:var(--ink-2)}
  #atsCvRoot .page.tpl-classic .cv-contact .ico{color:var(--ink-2)}
  #atsCvRoot .page.tpl-classic .cv-ul li::before{background:var(--ink)}
  #atsCvRoot .page.tpl-exec .cv-name{font-size:42px}
  #atsCvRoot .page.tpl-exec .cv-sec-h{justify-content:flex-start}
  #atsCvRoot .page.tpl-exec .cv-sec-h::after{display:none}
  #atsCvRoot .page.tpl-exec .cv-divider{margin:26px 0;height:2px;background:var(--blue-line)}
  #atsCvRoot .page.tpl-tech .cv-name{font-family:'Plus Jakarta Sans';font-weight:800;font-size:30px;text-transform:none;letter-spacing:-.01em}
  #atsCvRoot .page.tpl-tech .cv-sec-h{font-size:11.5px}
  #atsCvRoot .page.tpl-tech .skills-line{background:var(--blue-tint);border:1px solid var(--blue-line);border-radius:10px;padding:11px 13px}
  #atsCvRoot .page.dense .doc{padding:46px 56px}
  #atsCvRoot .page.dense .cv-sec{margin-bottom:15px}
  #atsCvRoot .page.dense .cv-ul{gap:4px} #atsCvRoot .page.dense .cv-ul li{line-height:1.45}
  #atsCvRoot .page.dense .cv-divider{margin:16px 0}
  #atsCvRoot .page.spacious .doc{padding:66px 70px}
  #atsCvRoot .page.spacious .cv-sec{margin-bottom:28px}
  #atsCvRoot .page.spacious .cv-ul{gap:9px}

  /* MATCH POPOUT (absolute within root) */
  #atsCvRoot .popout{position:absolute;width:300px;z-index:45;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:15px 16px;display:none}
  #atsCvRoot .popout.show{display:block;animation:acbFloatIn .4s cubic-bezier(.2,.8,.25,1)}
  #atsCvRoot .popout::before{content:"";position:absolute;left:-7px;top:26px;width:13px;height:13px;background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
  #atsCvRoot .popout.left::before{left:auto;right:-7px;transform:rotate(225deg)}
  #atsCvRoot .po-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
  #atsCvRoot .po-icon{width:26px;height:26px;border-radius:8px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;flex:none}
  #atsCvRoot .po-icon .ico{width:15px;height:15px}
  #atsCvRoot .po-title{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
  #atsCvRoot .po-x{margin-left:auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;cursor:pointer;color:var(--muted-2);background:transparent;border:none}
  #atsCvRoot .po-x:hover{background:#F2F4F7;color:var(--ink)}
  #atsCvRoot .po-body{font-size:12.5px;line-height:1.55;color:var(--ink-2);font-weight:500}
  #atsCvRoot .po-kw{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0}
  #atsCvRoot .po-chip{font-size:11.5px;font-weight:600;color:var(--blue);background:var(--blue-tint);border:1px solid var(--blue-line);padding:4px 9px;border-radius:7px}
  #atsCvRoot .po-ai{width:100%;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(170deg,var(--rr-accent),var(--blue-600));border:none;border-radius:9px;padding:9px;cursor:pointer;box-shadow:0 3px 10px rgba(36, 72, 255,.25)}
  #atsCvRoot .po-ai:hover{transform:translateY(-1px)}
  #atsCvRoot .po-ai .ico{width:14px;height:14px}
  #atsCvRoot .po-ai:disabled{opacity:.7;cursor:wait}
  #atsCvRoot .po-compose{display:none;margin-top:10px}
  #atsCvRoot .po-compose.show{display:block;animation:acbPop .18s ease}
  #atsCvRoot .po-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
  #atsCvRoot .po-preset{font-size:11px;font-weight:600;color:var(--blue);background:var(--blue-tint);border:1px solid var(--blue-line);border-radius:7px;padding:4px 9px;cursor:pointer;transition:.13s}
  #atsCvRoot .po-preset:hover{background:#DCE7FD;transform:translateY(-1px)}
  #atsCvRoot .po-input-row{display:flex;gap:7px;align-items:center}
  #atsCvRoot .po-input-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:12.5px;color:var(--ink);outline:none}
  #atsCvRoot .po-input-row input:focus{border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-tint)}
  #atsCvRoot .po-gen{width:34px;height:34px;flex:none;border:none;border-radius:9px;background:linear-gradient(170deg,var(--rr-accent),var(--blue-600));color:#fff;display:grid;place-items:center;cursor:pointer;transition:.13s}
  #atsCvRoot .po-gen:hover{transform:translateY(-1px)}
  #atsCvRoot .po-gen .ico{width:16px;height:16px}
  #atsCvRoot .po-gen:disabled{opacity:.6;cursor:wait}
  #atsCvRoot .po-result{display:none;margin-top:11px;padding:11px;border:1px solid var(--blue-line);background:var(--blue-tint);border-radius:10px}
  #atsCvRoot .po-result.show{display:block;animation:acbPop .2s ease}
  #atsCvRoot .po-result-lab{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:6px;margin-bottom:8px}
  #atsCvRoot .po-result-lab .po-src{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted-2)}
  #atsCvRoot .po-result-txt{width:100%;min-height:64px;border:1px solid var(--blue-line);border-radius:8px;padding:9px;font-family:inherit;font-size:12.5px;line-height:1.5;color:var(--ink);resize:vertical;background:#fff;outline:none}
  #atsCvRoot .po-result-txt:focus{box-shadow:0 0 0 3px rgba(36, 72, 255,.12)}
  /* Grounding note in the rewrite popout: what the rewrite introduced that the
     candidate's own CV does not support. Sits between the suggestion and Apply
     so it cannot be missed at the moment of the decision. */
  #atsCvRoot .po-ground{margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
  #atsCvRoot .po-ground-h{font-size:11.5px;font-weight:700;line-height:1.45;color:var(--amber);word-break:break-word}
  #atsCvRoot .po-ground-h.err{color:var(--red)}
  #atsCvRoot .po-ground-h+.po-ground-h{margin-top:5px}
  #atsCvRoot .po-ground-note{margin:4px 0 0;font-size:11px;font-weight:500;line-height:1.45;color:var(--muted)}
  #atsCvRoot .po-result-acts{display:flex;gap:7px;margin-top:9px}
  #atsCvRoot .po-result-acts .ap{flex:1;font-size:12px;font-weight:700;color:#fff;background:var(--blue);border:none;border-radius:8px;padding:8px;cursor:pointer}
  #atsCvRoot .po-result-acts .rg,#atsCvRoot .po-result-acts .ds{font-size:12px;font-weight:600;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 11px;cursor:pointer}
  #atsCvRoot .po-result-acts .rg{color:var(--blue)} #atsCvRoot .po-result-acts .rg:disabled{opacity:.6;cursor:wait}
  #atsCvRoot .po-result-acts .ds{color:var(--muted)}
  #atsCvRoot .spin{display:inline-flex;animation:acbSpin .8s linear infinite}
  @keyframes acbSpin{to{transform:rotate(360deg)}}
  #atsCvRoot .po-link{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--blue);text-decoration:none;cursor:pointer;padding-top:11px;margin-top:4px;border-top:1px solid var(--line-soft)}
  #atsCvRoot .po-link .ico{width:13px;height:13px}
  #atsCvRoot .connector{position:absolute;height:2px;z-index:40;pointer-events:none;display:none}
  #atsCvRoot .connector.show{display:block}
  #atsCvRoot .connector .line{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue-line),var(--blue))}
  #atsCvRoot .connector .end{position:absolute;right:-3px;top:-2px;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(36, 72, 255,.16)}

  /* RIGHT DRAWER (absolute within root) */
  #atsCvRoot .overlay{position:absolute;inset:0;z-index:54;background:rgba(20,24,32,.1);opacity:0;pointer-events:none;transition:.26s}
  #atsCvRoot .overlay.show{opacity:1;pointer-events:auto}
  #atsCvRoot .drawer-tab{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:11px;padding:18px 11px;cursor:pointer;background:#fff;border:1px solid var(--line);border-right:none;border-radius:13px 0 0 13px;box-shadow:-4px 4px 20px rgba(20,24,32,.08);transition:.18s}
  #atsCvRoot .drawer-tab:hover{padding-right:15px;box-shadow:-6px 6px 24px rgba(20,24,32,.12)}
  #atsCvRoot .drawer-tab .tgt{width:30px;height:30px;border-radius:9px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;position:relative}
  #atsCvRoot .drawer-tab .tgt .ico{width:17px;height:17px}
  #atsCvRoot .drawer-tab .tgt .cnt{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
  #atsCvRoot .drawer-tab .vtext{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-2)}
  #atsCvRoot .drawer-tab .chev{color:var(--muted-2)} #atsCvRoot .drawer-tab .chev .ico{width:15px;height:15px}
  #atsCvRoot .drawer-panel{position:absolute;right:0;top:var(--header-h);bottom:0;width:356px;z-index:55;background:#fff;border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(20,24,32,.12);transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.8,.25,1);display:flex;flex-direction:column}
  #atsCvRoot .drawer-panel.open{transform:none}
  /* ═══ Pass 5b (Apollo cream): CV Builder right detail panel (.dp-* chrome only).
     Per-rule swap of the SHARED chrome tokens (--line/--muted/--ink/--blue/--blue-tint/
     --line-soft) -> --ap-* on .dp-* rules ONLY. The #atsCvRoot token DEFINITIONS are
     unchanged (the document still uses --ink/--blue/--line), and NO .doc rule is touched.
     Semantic match-quality stats (.dp-stat green/amber/red) left byte-identical. ═══ */
  #atsCvRoot .dp-head{display:flex;align-items:center;gap:11px;padding:18px 18px 16px;border-bottom:1px solid var(--ap-hair)}
  #atsCvRoot .dp-head .tgt{width:32px;height:32px;border-radius:9px;background:var(--ap-accent-tint);color:var(--ap-accent);display:grid;place-items:center}
  #atsCvRoot .dp-head .t{font-size:15px;font-weight:700;letter-spacing:-.01em}
  #atsCvRoot .dp-head .s{font-size:12px;color:var(--ap-ink-2);font-weight:500;margin-top:1px}
  #atsCvRoot .dp-close{margin-left:auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;border:1px solid var(--ap-hair);background:var(--ap-card);color:var(--ap-ink-2)}
  #atsCvRoot .dp-close:hover{background:var(--ap-bg-2);color:var(--ap-ink)}
  #atsCvRoot .dp-summary{display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid var(--ap-hair)}
  #atsCvRoot .dp-stat{flex:1;text-align:center;border-radius:10px;padding:9px 4px}
  #atsCvRoot .dp-stat.g{background:var(--green-tint)} #atsCvRoot .dp-stat.a{background:var(--amber-tint)} #atsCvRoot .dp-stat.r{background:var(--red-tint)}
  #atsCvRoot .dp-stat .n{font-size:19px;font-weight:800;line-height:1}
  #atsCvRoot .dp-stat.g .n{color:var(--green)} #atsCvRoot .dp-stat.a .n{color:#A66A06} #atsCvRoot .dp-stat.r .n{color:#B23B33}
  /* Contrast fix (audit 1.2, 2026-08-05): --ap-ink-3 (#a49d90) on the three
   .dp-stat tints measured 2.37:1 — well under the 4.5:1 needed for 10.5px/600
   text (WCAG 1.4.3, axe serious). #6B6257 keeps the same warm taupe hue and
   measures green-tint 5.35, amber-tint 5.44, red-tint 5.26 — worst case 5.26.
   Scoped to this rule rather than darkening the --ap-ink-3 token, which is
   used elsewhere on lighter backgrounds where it already passes. */
#atsCvRoot .dp-stat .l{font-size:10.5px;font-weight:600;margin-top:3px;color:#6B6257}
  #atsCvRoot .dp-body{padding:14px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
  /* ═══ Pass 6b (CV follow-up): .jm-* Job Match items onto --ap-* (per-rule, same doc-safe
     discipline as 5b, #atsCvRoot token DEFINITIONS untouched, no .doc rule touched).
     Semantic .jm-st match status (green/amber/red) left byte-identical. ═══ */
  #atsCvRoot .jm-item{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border:1px solid var(--ap-hair);border-radius:11px;background:var(--ap-card);transition:.15s}
  #atsCvRoot .jm-item.r{cursor:pointer} #atsCvRoot .jm-item.r:hover{border-color:var(--ap-accent-border,#c2cdff);background:var(--ap-accent-tint)}
  #atsCvRoot .jm-item .d{width:9px;height:9px;border-radius:50%;flex:none;margin-top:4px}
  #atsCvRoot .jm-req{font-size:12.8px;font-weight:600;color:var(--ap-ink);line-height:1.35}
  #atsCvRoot .jm-st{font-size:11px;font-weight:600;margin-top:3px;display:flex;align-items:center;gap:5px}
  #atsCvRoot .jm-st.g{color:var(--green)} #atsCvRoot .jm-st.a{color:#A66A06} #atsCvRoot .jm-st.r{color:#B23B33}
  #atsCvRoot .jm-add{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--ap-accent);white-space:nowrap;margin-top:2px}

  /* toast (absolute within root) */
  #atsCvRoot .toast-wrap{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center}
  #atsCvRoot .toast{display:flex;align-items:center;gap:9px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:11px 16px;border-radius:11px;box-shadow:var(--shadow-lg);animation:acbToastIn .3s cubic-bezier(.2,.8,.25,1)}
  #atsCvRoot .toast .ico{width:15px;height:15px;color:#6EE3AE}
  #atsCvRoot .toast.fade{animation:acbToastOut .3s ease forwards}
  #atsCvRoot .fade-in{opacity:0;transform:translateY(10px);animation:acbFade .6s cubic-bezier(.2,.8,.25,1) forwards}
  @keyframes acbFade{to{opacity:1;transform:none}}
  @keyframes acbPop{from{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:none}}
  @keyframes acbFloatIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes acbToastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes acbToastOut{to{opacity:0;transform:translateY(8px)}}

  /* ===== CV Builder three-column redesign (additive overrides, source-order wins) =====
     Converts the two-column flex shell into a three-column grid: left CV-quality
     analysis, centre document workspace, right PERSISTENT Job Match panel (the old
     slide-out drawer, re-homed into the grid). No JS gate/spine change: #doc and the
     #dlBtn/#dlMenu/#copyBtn export controls keep their ids, so exportCV still runs
     acbRedCount before any file leaves. */
  #atsCvRoot{ --rightcol-w:340px; }
  #atsCvRoot .shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--rightcol-w);grid-template-rows:minmax(0,1fr);align-items:stretch;transition:grid-template-columns .18s ease}
  #atsCvRoot .shell>*{min-height:0;min-width:0}
  /* pin each column so display:none on a collapsing side panel cannot reflow the
     others into the wrong track (the bug: hiding the first item slid the centre
     into the 0px column). The centre workspace is always column 2 -> never collapses. */
  #atsCvRoot .shell>.sidebar{grid-column:1}
  #atsCvRoot .shell>.workspace{grid-column:2}
  #atsCvRoot .shell>.drawer-panel{grid-column:3}
  #atsCvRoot .sidebar{width:auto;height:100%}
  /* right column: the former slide-out drawer, now a static, persistent grid child */
  #atsCvRoot .drawer-panel{position:static;transform:none;width:auto;height:100%;z-index:auto;box-shadow:none;border-left:1px solid var(--line);overflow-y:auto}
  #atsCvRoot .drawer-panel.open{transform:none}
  #atsCvRoot .dp-body{overflow:visible}
  /* the legacy slide-out affordances are inert in the persistent layout */
  #atsCvRoot .drawer-tab{display:none !important}
  #atsCvRoot .overlay{display:none !important}
  /* JOB MATCH ring (right panel) */
  #atsCvRoot .dp-match{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--ap-hair)}
  #atsCvRoot .dp-match .match-ring{position:relative;width:60px;height:60px;flex:none}
  #atsCvRoot .dp-match .match-ring svg{transform:rotate(-90deg)}
  #atsCvRoot .dp-match .mn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ap-ink)}
  #atsCvRoot .dp-match .ml{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ap-accent)}
  #atsCvRoot .dp-match .mv{font-size:14px;font-weight:700;margin-top:2px;color:var(--ap-ink)}
  #atsCvRoot .dp-match .ms{font-size:11.5px;color:var(--ap-muted,var(--ap-ink-2));margin-top:2px}
  /* Edit / Preview segmented control (header) */
  #atsCvRoot .cv-seg{display:inline-flex;height:40px;border:1px solid var(--line);border-radius:10px;background:#F1F2F5;padding:3px;box-shadow:var(--shadow-sm)}
  #atsCvRoot .cv-seg button{padding:0 14px;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted);background:none;border:none;cursor:pointer;transition:color .13s,background .13s}
  #atsCvRoot .cv-seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(20,24,32,.1)}
  #atsCvRoot .cv-coltoggle{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--muted);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm)}
  #atsCvRoot .cv-coltoggle:hover{border-color:#D8DCE2;color:var(--ink)}
  /* column collapse states */
  #atsCvRoot.cv-left-closed .shell{grid-template-columns:0 minmax(0,1fr) var(--rightcol-w)}
  #atsCvRoot.cv-left-closed .sidebar{display:none}
  #atsCvRoot.cv-panel-closed .shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr) 0}
  #atsCvRoot.cv-panel-closed .drawer-panel{display:none}
  #atsCvRoot.cv-left-closed.cv-panel-closed .shell{grid-template-columns:0 minmax(0,1fr) 0}
  /* Preview mode: hide the editing chrome, focus the document */
  #atsCvRoot.cv-preview .shell{grid-template-columns:minmax(0,1fr)}
  #atsCvRoot.cv-preview .sidebar,#atsCvRoot.cv-preview .drawer-panel,#atsCvRoot.cv-preview .toolbar,#atsCvRoot.cv-preview .fill-chip,#atsCvRoot.cv-preview .cv-wshead,#atsCvRoot.cv-preview .popout,#atsCvRoot.cv-preview .connector{display:none !important}
  /* responsive: drop the right panel, then the sidebar */
  @media (max-width:1180px){
    #atsCvRoot .shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
    #atsCvRoot .drawer-panel{display:none}
  }
  @media (max-width:820px){
    #atsCvRoot .shell{grid-template-columns:1fr}
    #atsCvRoot .sidebar{display:none}
  }

  /* ===== CV Builder rich panels (slice 2): improvements, checks-passed accordion,
     grounded recommendation card, strengths, evidence-gap chips, live status.
     All fed from the live analysis via render(); the rec card mirrors the existing
     runRewrite -> #popout pipeline and applies via #poApply, so the export red gate
     (acbRedCount) remains the backstop. ===== */
  /* the old slide-out popout is now the invisible rewrite engine behind the rec card */
  #atsCvRoot .popout{display:none !important}
  #atsCvRoot .connector{display:none !important}
  /* improvements card */
  #atsCvRoot .imp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px}
  #atsCvRoot .imp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
  #atsCvRoot .imp-head .t{font-size:12.5px;font-weight:700;color:var(--ink)}
  #atsCvRoot .imp-head .prog{font-size:11px;font-weight:600;color:var(--blue);background:var(--blue-tint);padding:2px 8px;border-radius:20px}
  #atsCvRoot .imp-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 8px;margin:0 -8px;border-top:1px solid var(--line-soft);cursor:pointer;transition:.12s;border-radius:8px;background:none;border-left:none;border-right:none;border-bottom:none}
  #atsCvRoot .imp-row:first-of-type{border-top:none}
  #atsCvRoot .imp-row:hover{background:var(--blue-tint)}
  #atsCvRoot .imp-row.sel{background:var(--blue-tint)}
  #atsCvRoot .imp-row .nidx{flex:none;width:22px;height:22px;border-radius:6px;background:#fff;border:1px solid var(--blue-line);color:var(--blue);font-size:12px;font-weight:700;display:grid;place-items:center}
  #atsCvRoot .imp-row.sel .nidx{background:var(--blue);color:#fff;border-color:var(--blue)}
  #atsCvRoot .imp-row .it{flex:1;font-size:12.8px;font-weight:600;line-height:1.3;color:var(--ink)}
  #atsCvRoot .imp-row .it small{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:2px}
  #atsCvRoot .imp-row .ichev{color:var(--muted-2);flex:none}#atsCvRoot .imp-row:hover .ichev{color:var(--blue)}
  #atsCvRoot .cv-imp-none{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--green);padding:6px 2px}
  /* "What we changed" provenance card (P0). Reuses the sidebar .card shell;
     only the inner list needs styling. Amber/red are the same semantic
     tokens the rest of the builder uses, so it reads as one system. */
  #atsCvRoot .cv-gr-grp{margin-top:11px}
  #atsCvRoot .cv-gr-grp:first-child{margin-top:9px}
  #atsCvRoot .cv-gr-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--red);line-height:1.3}
  #atsCvRoot .cv-gr-h.warn{color:var(--amber)}
  #atsCvRoot .cv-gr-list{list-style:none;margin:7px 0 0;padding:0}
  #atsCvRoot .cv-gr-list li{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35;padding:5px 0 5px 11px;border-left:2px solid var(--line);word-break:break-word}
  #atsCvRoot .cv-gr-list li small{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:1px}
  #atsCvRoot .cv-gr-note{font-size:11.5px;font-weight:500;color:var(--muted);line-height:1.45;margin:7px 0 0}
  #atsCvRoot .cv-imp-none .ico{color:var(--green)}
  /* checks-passed accordion */
  #atsCvRoot .cv-passed{display:flex;align-items:center;justify-content:space-between;width:100%;padding:2px;cursor:pointer;background:none;border:none}
  #atsCvRoot .cv-passed .pl{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
  #atsCvRoot .cv-passed .pc{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--green-tint)}
  #atsCvRoot .cv-passed .pc .ico{width:10px;height:10px;color:var(--green)}
  #atsCvRoot .cv-passed .pchev{color:var(--muted-2);transition:.18s}
  #atsCvRoot .cv-passed.open .pchev{transform:rotate(180deg)}
  #atsCvRoot .cv-passed-body{display:none;padding-top:8px}
  #atsCvRoot .cv-passed-body.open{display:block}
  #atsCvRoot .pass-item{display:flex;align-items:flex-start;gap:9px;padding:6px 2px;font-size:12px;color:var(--muted)}
  #atsCvRoot .pass-item .ico{color:var(--green);flex:none;margin-top:2px}
  #atsCvRoot .pass-item .ctext{font-weight:600;color:var(--ink-2);font-size:12px}
  #atsCvRoot .pass-item .cdet{font-size:11px;color:var(--muted-2);margin-top:1px}
  /* live status */
  #atsCvRoot .cv-live{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin:0 18px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  #atsCvRoot .cv-live .pulse{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:cvPulse 1.6s infinite}
  #atsCvRoot .cv-live.updating{color:var(--blue);font-weight:600}
  @keyframes cvPulse{0%,100%{opacity:1}50%{opacity:.3}}
  #atsCvRoot .dp-scroll{padding:14px 18px;display:flex;flex-direction:column;gap:8px}
  #atsCvRoot .asst-sub{font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--ink);margin:12px 2px 2px}
  #atsCvRoot .asst-sub:first-child{margin-top:2px}
  #atsCvRoot .asst-help{font-size:11.5px;color:var(--muted);margin:2px 2px 4px}
  /* recommendation card */
  #atsCvRoot .cv-rec{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px;box-shadow:var(--shadow-sm)}
  #atsCvRoot .cv-rec-empty{font-size:12.5px;line-height:1.5;color:var(--muted)}
  #atsCvRoot .cv-rec-loading{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--blue)}
  #atsCvRoot .cv-rec-loading .pulse{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:cvPulse 1.2s infinite}
  #atsCvRoot .cv-rec-obs{font-size:12.8px;line-height:1.5;color:var(--ink-2)}
  #atsCvRoot .cmp-lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin:13px 0 5px}
  #atsCvRoot .cmp-lbl.new{color:var(--blue)}
  #atsCvRoot .cmp-cur{font-size:12.5px;line-height:1.5;color:var(--ink-2);background:#F3F4F7;border-radius:8px;padding:9px 11px}
  #atsCvRoot .cmp-new{font-size:12.5px;line-height:1.5;color:#15321F;background:var(--green-tint);border:1px solid var(--green-line);border-radius:8px;padding:9px 11px}
  #atsCvRoot .cv-rec-src{font-size:10.5px;color:var(--muted-2);margin-top:8px;text-align:right}
  #atsCvRoot .apply-btn{width:100%;height:36px;border-radius:9px;background:linear-gradient(170deg,var(--rr-accent),var(--blue-600));color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:11px;border:none;cursor:pointer}
  #atsCvRoot .apply-btn:hover{box-shadow:0 4px 12px rgba(36,72,255,.3)}
  #atsCvRoot .cv-rec-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;padding-top:11px;border-top:1px solid var(--line-soft)}
  #atsCvRoot .cv-rec-act{font-size:11.5px;font-weight:600;color:var(--blue);background:var(--blue-tint);border:1px solid var(--blue-line);border-radius:7px;padding:5px 10px;cursor:pointer}
  #atsCvRoot .cv-rec-act:hover{background:var(--blue-tint-2)}
  /* strengths */
  #atsCvRoot .strength{display:flex;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--line-soft);font-size:12.8px;color:var(--ink-2)}
  #atsCvRoot .strength:first-of-type{border-top:none}
  #atsCvRoot .strength .ico{color:var(--green);flex:none}
  /* evidence-gap chips */
  #atsCvRoot .kwchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
  #atsCvRoot .kwchip{font-size:12px;font-weight:600;color:#A66A06;background:var(--amber-tint);border:1px solid var(--amber-line);border-radius:7px;padding:5px 10px;cursor:pointer;transition:.13s}
  #atsCvRoot .kwchip:hover{background:#FBECD0;border-color:#E9D09A}
  #atsCvRoot .kw-none{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--green);padding:2px}
  #atsCvRoot .kw-none .ico{color:var(--green)}
  /* improvement-target highlight in the document */
  #atsCvRoot .cv-hl{background:#FFF3D6 !important;box-shadow:inset 0 0 0 1px #F0D68A;border-radius:6px;transition:background .2s}

  /* ===== CV Builder centre canvas: match the reference paper (cv-builder.html),
     CSS-only, layered onto the elements render()/buildDocHtml already produce (no
     DOM restructure). Targets the default ATS Modern template; the tpl-classic /
     tpl-exec / tpl-tech variants keep their own look via higher-specificity rules. ===== */
  /* warm A4 paper with the reference's softer document shadow */
  #atsCvRoot .pg-sheet{background:#FFFDFC;border-radius:6px;box-shadow:0 10px 40px rgba(21,22,26,.11),0 2px 8px rgba(21,22,26,.05)}
  /* WYSIWYG density: serif name sized to the export's 24pt (was 45px) so the preview
     paginates at the same density as the exported document. Identity kept (serif/blue). */
  #atsCvRoot .cv-name{font-family:'Playfair Display','Fraunces',Georgia,'Times New Roman',serif;font-size:32px;font-weight:600;letter-spacing:-.01em;line-height:1.05}
  /* role: blue, letter-spaced caps */
  #atsCvRoot .cv-role{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--blue);text-transform:uppercase;margin-top:8px}
  /* contact row: spaced by gap, no vertical dividers */
  #atsCvRoot .cv-contact{gap:14px;margin-top:12px;font-size:13px;color:#33373f;align-items:baseline}
  #atsCvRoot .cv-contact span{gap:7px}
  #atsCvRoot .cv-contact .sep{display:none}
  /* typed contact slots (reference .cv-cval), at export size */
  #atsCvRoot .cv-cval{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#33373f;line-height:1.4}
  #atsCvRoot .cv-cval .ico{width:13px;height:13px;color:var(--muted);stroke-width:1.9;flex:none}
  #atsCvRoot .cv-cval.empty{margin:0;padding:0 0 2px;background:none;border:none;border-bottom:1px dashed var(--rr-border-strong);border-radius:0;font-family:inherit;font-size:13px;font-weight:500;color:var(--rr-ink-subtle);cursor:text}
  #atsCvRoot .cv-cval.empty:hover{color:var(--rr-ink-muted);border-bottom-color:var(--rr-ink-subtle)}
  #atsCvRoot .cv-cval-input{font-family:inherit;font-size:13px;color:var(--ink);background:transparent;border:none;border-bottom:1px solid var(--blue);outline:none;padding:0 0 1px;min-width:150px}
  #atsCvRoot .cv-divider{margin:14px 0;background:var(--line)}
  /* sections: dark heading + short hairline, tight export spacing */
  #atsCvRoot .cv-sec{margin-bottom:0}
  #atsCvRoot .cv-sec + .cv-sec{margin-top:16px}
  #atsCvRoot .cv-sec-h{color:#2b3038;font-weight:700;letter-spacing:.1em;gap:11px;margin:0 0 8px;font-size:12.5px}
  #atsCvRoot .cv-sec-h::after{flex:1;max-width:56px;height:1px;background:#dfe2e7}
  /* summary + body copy at the export reading size (9.75pt/1.6) */
  #atsCvRoot .cv-p{font-size:13px;line-height:1.6;color:#2b3038}
  #atsCvRoot .exp-block{margin-bottom:11px}
  #atsCvRoot .exp-role{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:0}
  #atsCvRoot .exp-co{font-size:13px;font-weight:600;color:var(--blue)}
  #atsCvRoot .exp-meta{font-size:12px;color:var(--muted)}
  /* bullets: small blue dots, export spacing (9.6pt/1.55, ~4pt gap) */
  #atsCvRoot .cv-ul{margin-top:6px;gap:4px}
  #atsCvRoot .cv-ul li{padding-left:16px;font-size:12.8px;line-height:1.55;color:#2b3038}
  #atsCvRoot .cv-ul li::before{left:0;top:7px;width:5px;height:5px;background:var(--blue);opacity:1}
  #atsCvRoot .cv-ul li.active::before{left:5px;top:12px}
  #atsCvRoot .skills-line{font-size:12.8px;line-height:1.7;color:#33373f}
  #atsCvRoot .edu-deg{font-size:13.5px;font-weight:700;color:var(--ink)}
  #atsCvRoot .edu-school{font-size:13px;font-weight:600;color:var(--blue)}
  #atsCvRoot .edu-detail{font-size:12px;color:var(--muted)}
  /* skills as chips: chips are inline-block (no flex -- flex items can inject
     newlines into innerText); the canonical "Core skills:" label and the comma
     separators stay in the DOM off-screen so plainText()'s .skills-line innerText
     is byte-identical, while only the chips are visible. */
  #atsCvRoot .skills-line{font-size:12.8px;line-height:1.25}
  #atsCvRoot .skills-line .skill{display:inline-block;font-size:12.5px;color:#33373f;background:#F3F4F7;border:1px solid #E7E9EE;border-radius:6px;padding:3px 9px;margin:0 6px 5px 0;line-height:1.25}
  #atsCvRoot .skills-line .cv-sk-lbl,#atsCvRoot .skills-line .cv-sk-c{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  /* page numbers + page nav (gap E). The .pgnum lives in the virtual .pg-sheets
     layer (sibling of #doc), so plainText()/the export gate never see it. */
  #atsCvRoot .pg-sheet .pgnum{position:absolute;right:30px;bottom:22px;font-size:11px;font-weight:500;color:#b3b8c0;pointer-events:none}
  #atsCvRoot .cv-pagenav{position:sticky;top:8px;z-index:26;width:max-content;margin:0 8px -28px auto;display:flex;align-items:center;gap:6px;height:28px;padding:0 5px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 2px 8px rgba(20,24,32,.07)}
  #atsCvRoot .cv-pagenav button{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:none;border:none;cursor:pointer;transition:background .13s,color .13s}
  #atsCvRoot .cv-pagenav button:hover{background:#F1F2F5;color:var(--ink)}
  #atsCvRoot .cv-pagenav button .ico{width:13px;height:13px}
  #atsCvRoot .cv-pagenav .pt{font-size:11px;font-weight:600;color:var(--ink-2);min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
  /* Issue A: reopen-Job-Match FAB (reference .asst-fab). Mounted at #jjMain level so
     position:fixed anchors to the viewport (not the transformed #cvScreenResult).
     Right edge, vertically centred; shown only on the active CV result screen when the
     right panel is collapsed (mirrors the cvbActionBar :has pattern). */
  #jjMain .cv-fab{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:25;width:50px;height:50px;border-radius:50%;background:var(--rr-accent);color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(36,72,255,.35);border:none;cursor:pointer}
  #jjMain .cv-fab svg{width:22px;height:22px}
  #jjMain:has(#jjPage_cv.jj-page.active #cvScreenResult.cv-screen.on #atsCvRoot.cv-panel-closed) .cv-fab{display:flex}
  /* left-sidebar collapse chevron (mirrors the right panel's .dp-close) */
  #atsCvRoot .sb-head{display:flex;justify-content:flex-end}
  /* reopen-analysis FAB: mirrors .cv-fab but on the LEFT edge, offset by the 272px
     global #jjSidebar (matching the .cvb-actionbar left:272px pattern) so it lands at
     the CV content's left edge, not over the app nav. Shown when the left sidebar is collapsed. */
  #jjMain .cv-fab-left{position:fixed;left:288px;top:50%;transform:translateY(-50%);z-index:25;width:50px;height:50px;border-radius:50%;background:var(--rr-accent);color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(36,72,255,.35);border:none;cursor:pointer}
  #jjMain .cv-fab-left svg{width:22px;height:22px}
  #jjMain:has(#jjPage_cv.jj-page.active #cvScreenResult.cv-screen.on #atsCvRoot.cv-left-closed) .cv-fab-left{display:flex}
  /* at the .jj-sidebar hide breakpoint the offset goes to 16px (mirrors .cvb-actionbar) */
  @media (max-width:768px){ #jjMain .cv-fab-left{left:16px} }
  /* Issue B: floating selection toolbar over the summary (reference .sel-toolbar).
     Anchored outside #doc and shown/positioned via JS; hidden in preview. */
  #atsCvRoot .sel-toolbar{position:absolute;z-index:46;display:flex;align-items:center;gap:2px;background:#1b1d22;color:#fff;border-radius:11px;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .15s ease}
  #atsCvRoot .sel-toolbar.show{opacity:1;pointer-events:auto}
  #atsCvRoot .sel-toolbar button{height:30px;padding:0 10px;border-radius:7px;font-size:12px;font-weight:500;color:#e6e7ea;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:none;border:none;cursor:pointer}
  #atsCvRoot .sel-toolbar button:hover{background:rgba(255,255,255,.12)}
  #atsCvRoot .sel-toolbar button.ai{color:#a9bbff}
  #atsCvRoot .sel-toolbar button.ai svg{width:13px;height:13px}
  #atsCvRoot .sel-toolbar .sdiv{width:1px;height:18px;background:rgba(255,255,255,.18);margin:0 3px}
  #atsCvRoot .sel-toolbar button.fmt{font-weight:700;width:30px;padding:0;justify-content:center}
  #atsCvRoot.cv-preview .sel-toolbar{display:none !important}

/* ===== Settings redesign ===== */

/* Grid */
#jjPage_settings .st-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
  gap: 20px;
  max-width: 1300px;
}
#jjPage_settings .st-col-main,
#jjPage_settings .st-col-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 980px) {
  #jjPage_settings .st-grid { grid-template-columns: 1fr; }
}

/* Cards */
#jjPage_settings .st-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--rr-radius);
  padding: 24px;
}
#jjPage_settings .st-card-head-simple { margin-bottom: 16px; }
#jjPage_settings .st-card-title {
  margin: 0 0 4px 0;
  font: 600 17px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_settings .st-card-sub {
  margin: 0;
  font: 400 13px/1.55 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
}
#jjPage_settings .st-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
#jjPage_settings .st-card-title-inline {
  margin: 0;
  font: 700 12px/1.2 var(--rr-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim, rgba(238,240,239,0.7));
}
#jjPage_settings .st-card-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#jjPage_settings .st-icon-shield { background: rgba(36, 72, 255,0.15);  color: var(--rr-accent); }
#jjPage_settings .st-icon-bolt   { background: rgba(251,191,36,0.15);  color: #FCD34D; }
#jjPage_settings .st-icon-spark  { background: rgba(36, 72, 255,0.15);  color: var(--rr-accent); }

/* Form grid */
#jjPage_settings .st-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-bottom: 18px;
}
#jjPage_settings .st-field-full { grid-column: 1 / -1; }
#jjPage_settings .st-field-empty { visibility: hidden; }
#jjPage_settings .st-subsection {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 2px;
  font: 600 11px/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tl-grey, #86867E);
}
#jjPage_settings .st-subsection::after { content: ''; flex: 1; height: 1px; background: var(--tl-hair, #E2E2DC); }
#jjPage_settings .st-form-grid > .st-subsection:first-child { margin-top: 2px; }
@media (max-width: 720px) {
  #jjPage_settings .st-form-grid { grid-template-columns: 1fr; }
  #jjPage_settings .st-field-empty { display: none; }
}
#jjPage_settings .st-label {
  display: block;
  margin-bottom: 6px;
  font: 500 13px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
}
#jjPage_settings .st-label-hint {
  display: block;
  font: 400 12px/1.3 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.55));
  margin-top: 2px;
  font-weight: 400;
}
#jjPage_settings .st-input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--rr-radius-sm);
  padding: 12px 14px;
  color: var(--text, #EEF0EF);
  font: 400 14px/1.3 var(--rr-font-body);
  box-sizing: border-box;
}
#jjPage_settings .st-input:focus {
  outline: none;
  border-color: rgba(36, 72, 255,0.4);
}
#jjPage_settings .st-input-wrap { position: relative; }
#jjPage_settings .st-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-dim, rgba(238,240,239,0.5));
  pointer-events: none;
}
#jjPage_settings .st-input-with-icon { padding-left: 36px; }
#jjPage_settings .st-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Sectors grid */
#jjPage_settings .st-sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#jjPage_settings .st-sector-btn {
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: var(--text, #EEF0EF);
  font: 500 13px/1 var(--rr-font-body);
  cursor: pointer;
}
#jjPage_settings .st-sector-btn:hover {
  background: rgba(36, 72, 255,0.08);
  border-color: rgba(36, 72, 255,0.35);
}
#jjPage_settings .st-sector-btn.active,
#jjPage_settings #jjSettingSectors .active {
  background: rgba(36, 72, 255,0.15);
  border-color: rgba(36, 72, 255,0.55);
  color: var(--rr-accent);
}

/* Save button */
#jjPage_settings .st-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--rr-accent) 0%, var(--rr-accent) 100%);
  border: none;
  color: #fff;
  font: 600 14px/1 var(--rr-font-body);
  cursor: pointer;
}
#jjPage_settings .st-save-btn:hover { filter: brightness(1.05); }

/* Tips */
#jjPage_settings .st-tips-card { padding: 20px 24px; }
#jjPage_settings .st-tip-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 10px;
}
#jjPage_settings .st-tip-item:last-child { margin-bottom: 0; }
#jjPage_settings .st-tip-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#jjPage_settings .st-tip-icon-purple { background: rgba(139,92,246,0.15); color: #C4B5FD; }
#jjPage_settings .st-tip-icon-blue   { background: rgba(36, 72, 255,0.15); color: var(--rr-accent); }
#jjPage_settings .st-tip-icon-slate  { background: rgba(148,163,184,0.15); color: #CBD5E1; }
#jjPage_settings .st-tip-title {
  font: 600 14px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
  margin-bottom: 4px;
}
#jjPage_settings .st-tip-body {
  font: 400 13px/1.5 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
}

/* Help card */
#jjPage_settings .st-help-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}
#jjPage_settings .st-help-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
#jjPage_settings .st-help-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(36, 72, 255,0.15);
  color: var(--rr-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
#jjPage_settings .st-help-title {
  font: 600 14px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
  margin-bottom: 2px;
}
#jjPage_settings .st-help-body {
  font: 400 12px/1.4 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
}
#jjPage_settings .st-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text, #EEF0EF);
  font: 500 13px/1 var(--rr-font-body);
  text-decoration: none;
}
#jjPage_settings .st-help-btn:hover { background: rgba(255,255,255,0.08); }

/* Strength card */
#jjPage_settings .st-strength-card { padding: 20px; }
#jjPage_settings .st-strength-score-row { margin: 4px 0 8px 0; display: flex; align-items: baseline; gap: 8px; }
#jjPage_settings .st-strength-score {
  font: 700 32px/1 var(--rr-font-body);
  color: #86EFAC;
}
#jjPage_settings .st-strength-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
#jjPage_settings .st-strength-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #86EFAC);
  border-radius: 999px;
  transition: width 0.4s ease;
}
#jjPage_settings .st-strength-copy {
  margin: 0 0 14px 0;
  font: 400 12.5px/1.55 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.72));
}
#jjPage_settings .st-strength-copy strong { color: var(--text, #EEF0EF); font-weight: 600; }
#jjPage_settings .st-strength-list {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#jjPage_settings .st-strength-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 13px/1.3 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.7));
}
#jjPage_settings .st-strength-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: transparent;
  flex: 0 0 14px;
  position: relative;
}
#jjPage_settings .st-strength-list li.is-filled .st-strength-dot {
  background: #22c55e;
  border-color: #22c55e;
}
#jjPage_settings .st-strength-list li.is-filled .st-strength-dot::after {
  content: "";
  position: absolute;
  left: 3px; top: 1.5px;
  width: 4px; height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
#jjPage_settings .st-strength-list li.is-filled { color: var(--text, #EEF0EF); }
#jjPage_settings .st-strength-cta {
  padding: 12px;
  border-radius: 10px;
  background: rgba(36, 72, 255,0.08);
  border: 1px solid rgba(36, 72, 255,0.22);
  font: 600 13px/1.4 var(--rr-font-body);
  color: var(--rr-accent);
  text-align: center;
}
#jjPage_settings .st-strength-cta span {
  display: block;
  font-weight: 400;
  font-size: 12px;
  margin-top: 2px;
}

/* Usage card */
#jjPage_settings .st-usage-card { padding: 20px; }
#jjPage_settings .st-usage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#jjPage_settings .st-usage-row:last-of-type { border-bottom: none; }
#jjPage_settings .st-usage-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#jjPage_settings .st-usage-icon-blue   { background: rgba(36, 72, 255,0.15);  color: var(--rr-accent); }
#jjPage_settings .st-usage-icon-purple { background: rgba(139,92,246,0.15);  color: #C4B5FD; }
#jjPage_settings .st-usage-icon-green  { background: rgba(34,197,94,0.15);   color: #86EFAC; }
#jjPage_settings .st-usage-icon-amber  { background: rgba(251,191,36,0.15);  color: #FCD34D; }
#jjPage_settings .st-usage-icon-rose   { background: rgba(244,114,182,0.15); color: #FBCFE8; }
#jjPage_settings .st-usage-text { flex: 1; min-width: 0; }
#jjPage_settings .st-usage-title {
  font: 600 13px/1.3 var(--rr-font-body);
  color: var(--text, #EEF0EF);
  margin-bottom: 2px;
}
#jjPage_settings .st-usage-body {
  font: 400 12px/1.45 var(--rr-font-body);
  color: var(--fg-dim, rgba(238,240,239,0.65));
}
#jjPage_settings .st-usage-chev {
  color: var(--fg-dim, rgba(238,240,239,0.4));
  font-size: 20px;
  font-weight: 400;
}
#jjPage_settings .st-usage-learn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--rr-accent);
  font: 500 13px/1.2 var(--rr-font-body);
  text-decoration: none;
}

/* ===== Light-mode overrides ===== */
#jjPage_settings .st-card,
#jjPage_settings .st-tip-item {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.10);
}
#jjPage_settings .st-card-sub,
#jjPage_settings .st-label-hint,
#jjPage_settings .st-tip-body,
#jjPage_settings .st-strength-copy,
#jjPage_settings .st-help-body,
#jjPage_settings .st-usage-body,
#jjPage_settings .st-strength-list li {
  color: rgba(26,22,20,0.68);
}
#jjPage_settings .st-input,
#jjPage_settings .st-sector-btn,
#jjPage_settings .st-help-btn {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  color: #1A1614;
}
#jjPage_settings .st-card-title,
#jjPage_settings .st-label,
#jjPage_settings .st-tip-title,
#jjPage_settings .st-help-title,
#jjPage_settings .st-usage-title,
#jjPage_settings .st-strength-list li.is-filled {
  color: #1A1614;
}

/* ===== Settings layout, section nav relocated into the main app sidebar =====
   The old floating .st-rail is gone; content spans the full pane, flush against
   the sidebar (no dead gap), matching how Dashboard/Applications sit. */
#jjPage_settings .st-content{ width:100%; max-width:1600px; min-width:0; }
#jjPage_settings .st-mobtabs{ display:none; }

/* Sub-items under "Settings" in the main sidebar, shown only while Settings is the active page. */
#jjSidebar .jj-sb-sub{ display:none; flex-direction:column; gap:1px; margin:1px 0 4px; }
#jjSidebar #jjSB_settings.active + .jj-sb-sub{ display:flex; }
#jjSidebar .jj-sb-subitem{ display:block; width:100%; max-width:100%; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; border:0; background:transparent; cursor:pointer; font:500 13px/1.2 var(--tl-body-font,'Plus Jakarta Sans',sans-serif); color:var(--ap-ink-2,#4f4f4f); padding:7px 14px 7px 41px; transition:background .13s,color .13s; }
#jjSidebar .jj-sb-subitem:hover{ background:var(--ap-bg-2,#f4f2ec); color:var(--ap-ink,#0d0d0d); }
#jjSidebar .jj-sb-subitem.active{ background:#EFF6FF; color:#2563EB; font-weight:600; box-shadow:inset 2px 0 0 #2563EB; }
#jjSidebar .jj-sb-sub-divider{ height:1px; background:var(--ap-hair,#e7e2d8); margin:6px 14px 6px 41px; }
#jjPage_settings .st-panel{ display:none; }
#jjPage_settings .st-panel.active{ display:block; animation:stFade .18s ease; }
@keyframes stFade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
#jjPage_settings .st-panel[data-st-panel="profile"] .st-grid{ max-width:none; }
#jjPage_settings .st-content > .st-panel > .jj-panel.st-card{ margin-bottom:20px; }

/* account / privacy hairline rows */
#jjPage_settings .st-ax-list{ display:flex; flex-direction:column; }
#jjPage_settings .st-ax-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-top:1px solid var(--ap-hair,#e7e2d8); }
#jjPage_settings .st-ax-row:first-child{ border-top:0; padding-top:4px; }
#jjPage_settings .st-ax-label{ font:500 14px/1.3 var(--rr-font-body); color:var(--ap-ink,#0d0d0d); }
#jjPage_settings .st-ax-val{ font:500 14px/1.4 var(--rr-font-body); color:var(--ap-ink-2,#4f4f4f); margin-top:2px; word-break:break-word; }
#jjPage_settings .st-ax-sub{ font:400 12.5px/1.45 var(--rr-font-body); color:var(--ap-ink-3,#a49d90); margin-top:2px; max-width:48ch; }
#jjPage_settings .st-ax-btn{ flex:0 0 auto; white-space:nowrap; padding:8px 16px; font:500 13px/1 var(--rr-font-body); border-radius:var(--ap-radius,8px); }
#jjPage_settings .st-ax-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }
#jjPage_settings .st-danger-btn{ color:#C9594A !important; border-color:rgba(201,89,74,.4) !important; }
#jjPage_settings .st-danger-btn:hover{ background:rgba(201,89,74,.08) !important; color:#C9594A !important; border-color:#C9594A !important; }
#jjPage_settings .st-ax-row-danger .st-ax-label{ color:#C9594A; }

/* ===== Reference-design components (Tranche A): eyebrow, toggle switch,
   chip input, segmented control, disabled/coming-soon rows, Job preferences
   section-actions bar, Contact support layout. New, not reused from
   elsewhere -- see the ship report's UI-component research: no reusable
   toggle/chip/segmented-control existed anywhere in the app before this. ===== */

/* Page eyebrow: swapped per active section by stShowTab (index.html). */
#jjPage_settings.tl-theme .st-eyebrow{
  font:600 12px/1.3 'JetBrains Mono',ui-monospace,'Courier New',monospace;
  color:var(--tl-blue); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px;
}

/* Toggle switch: the one reusable control this rebuild establishes since
   none existed (native checkboxes with accent-color only, elsewhere). */
#jjPage_settings.tl-theme .st-toggle{ position:relative; display:inline-flex; flex-shrink:0; cursor:pointer; }
#jjPage_settings.tl-theme .st-toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
#jjPage_settings.tl-theme .st-toggle-track{
  width:40px; height:22px; border-radius:999px; background:var(--tl-hair); display:block;
  transition:background .15s ease; position:relative; box-sizing:border-box; border:1px solid transparent;
}
#jjPage_settings.tl-theme .st-toggle-thumb{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.25); transition:transform .15s ease;
}
#jjPage_settings.tl-theme .st-toggle input:checked + .st-toggle-track{ background:var(--tl-blue); }
#jjPage_settings.tl-theme .st-toggle input:checked + .st-toggle-track .st-toggle-thumb{ transform:translateX(18px); }
#jjPage_settings.tl-theme .st-toggle input:focus-visible + .st-toggle-track{ outline:2px solid var(--tl-blue); outline-offset:2px; }
#jjPage_settings.tl-theme .st-toggle--disabled{ cursor:not-allowed; opacity:.5; }
#jjPage_settings.tl-theme .st-toggle--disabled .st-toggle-track{ background:var(--tl-hair) !important; }

/* Toggle row: label+sub on the left, toggle flush right -- the repeated
   layout for every Notifications/AI & privacy control. */
#jjPage_settings.tl-theme .st-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--tl-hair); }
#jjPage_settings.tl-theme .st-toggle-row:first-child{ border-top:0; padding-top:2px; }
#jjPage_settings.tl-theme .st-toggle-text{ min-width:0; }
#jjPage_settings.tl-theme .st-toggle-label{ font:500 14px/1.3 var(--tl-body-font); color:var(--tl-ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#jjPage_settings.tl-theme .st-toggle-sub{ font:400 12.5px/1.45 var(--tl-body-font); color:var(--tl-mute); margin-top:2px; max-width:52ch; }
#jjPage_settings.tl-theme .st-toggle-row--disabled .st-toggle-label{ color:var(--tl-grey); }
#jjPage_settings.tl-theme .st-toggle-row--disabled .st-toggle-sub{ color:var(--tl-mute); }
#jjPage_settings.tl-theme .st-soon-badge{
  font:600 9.5px/1 var(--tl-body-font); letter-spacing:.05em; text-transform:uppercase;
  color:var(--tl-mute); background:var(--tl-hair); border-radius:999px; padding:3px 8px; white-space:nowrap;
}

/* Chip input: type-to-add tags (job titles, industries, locations). */
#jjPage_settings.tl-theme .st-chipbox{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 10px; min-height:44px;
  background:#fff; border:1px solid var(--tl-hair); border-radius:var(--tl-radius-sm); box-sizing:border-box;
}
#jjPage_settings.tl-theme .st-chipbox:focus-within{ border-color:var(--tl-blue); }
#jjPage_settings.tl-theme .st-chip-list{ display:contents; }
#jjPage_settings.tl-theme .st-chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--tl-tint); color:var(--tl-blue);
  border:1px solid var(--tl-tint-border); border-radius:999px; padding:4px 6px 4px 12px;
  font:500 12.5px/1.3 var(--tl-body-font); white-space:nowrap;
}
#jjPage_settings.tl-theme .st-chip-x{
  border:0; background:transparent; color:var(--tl-blue); cursor:pointer; font-size:15px; line-height:1;
  width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; padding:0;
}
#jjPage_settings.tl-theme .st-chip-x:hover{ background:var(--tl-tint-border); }
#jjPage_settings.tl-theme .st-chip-entry{
  flex:1 1 120px; min-width:120px; border:0; outline:none; background:transparent;
  font:400 13.5px/1.3 var(--tl-body-font); color:var(--tl-ink); padding:6px 2px;
}
#jjPage_settings.tl-theme .st-chip-entry::placeholder{ color:var(--tl-mute); }

/* Segmented control (Remote/Hybrid/On-site) -- equal joined cells, single
   shared border, same geometric convention as the Applications stage
   control, restyled to this page's own blue/white tokens. */
#jjPage_settings.tl-theme .st-seg-group{ display:flex; border:1px solid var(--tl-hair); border-radius:var(--tl-radius-sm); overflow:hidden; }
#jjPage_settings.tl-theme .st-seg-cell{
  flex:1; padding:11px 8px; border:none; border-right:1px solid var(--tl-hair); background:#fff;
  color:var(--tl-grey); font:600 12.5px/1 var(--tl-body-font); letter-spacing:.02em; cursor:pointer;
  -webkit-appearance:none; appearance:none; transition:background .13s ease, color .13s ease;
}
#jjPage_settings.tl-theme .st-seg-cell:last-child{ border-right:none; }
#jjPage_settings.tl-theme .st-seg-cell:hover:not(.st-seg-cell--active){ background:var(--tl-tint); }
#jjPage_settings.tl-theme .st-seg-cell--active{ background:var(--tl-blue); color:#fff; }

/* Employment-type checkboxes: plain native checkbox + label, wrapped. */
#jjPage_settings.tl-theme .st-check-row{ display:flex; flex-wrap:wrap; gap:14px 22px; padding-top:2px; }
#jjPage_settings.tl-theme .st-check-item{ display:inline-flex; align-items:center; gap:7px; font:400 13.5px/1.3 var(--tl-body-font); color:var(--tl-ink); cursor:pointer; }
#jjPage_settings.tl-theme .st-check-item input{ accent-color:var(--tl-blue); width:15px; height:15px; }

/* Save-preferences bar (Job preferences) -- bottom-right per the reference,
   with a brief inline "Saved" confirmation flash for optimistic UI. */
#jjPage_settings.tl-theme .st-section-actions{ display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:4px; }
#jjPage_settings.tl-theme .st-saved-flash{
  font:600 12.5px/1 var(--tl-body-font); color:#16A34A; opacity:0; transform:translateY(2px);
  transition:opacity .2s ease, transform .2s ease;
}
#jjPage_settings.tl-theme .st-saved-flash--show{ opacity:1; transform:none; }

/* Clear-AI-history two-step confirm state. */
#jjPage_settings.tl-theme .st-danger-btn--armed{ background:#C9594A !important; color:#fff !important; border-color:#C9594A !important; }

/* Contact support (Need help?) layout. */
#jjPage_settings.tl-theme .st-help-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:start; }
@media (max-width:900px){ #jjPage_settings.tl-theme .st-help-grid{ grid-template-columns:1fr; } }
#jjPage_settings.tl-theme .st-help-next-card{ background:var(--tl-tint); border-color:var(--tl-tint-border); }
#jjPage_settings.tl-theme .st-help-steps{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:12px; }
#jjPage_settings.tl-theme .st-help-steps li{ display:flex; gap:10px; align-items:flex-start; font:400 13px/1.5 var(--tl-body-font); color:var(--tl-grey); }
#jjPage_settings.tl-theme .st-help-step-num{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--tl-blue); color:#fff;
  font:600 11px/20px var(--tl-body-font); text-align:center;
}
#jjPage_settings.tl-theme .st-help-mailto{ font:600 13.5px/1 var(--tl-body-font); color:var(--tl-blue); text-decoration:none; }
#jjPage_settings.tl-theme .st-help-mailto:hover{ text-decoration:underline; }
#jjPage_settings.tl-theme .st-help-success{
  margin-top:12px; padding:10px 14px; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:var(--tl-radius-sm);
  color:#15803D; font:500 13px/1.4 var(--tl-body-font);
}
#jjPage_settings.tl-theme .st-textarea{ resize:vertical; min-height:110px; font-family:var(--tl-body-font); }

/* Plan & billing (Tranche B, reference card stack). Reuses this page's own
   --tl-* tokens (12px radius, #2563EB blue, Fraunces title) like every other
   Tranche A/B panel -- not the old cream --ap-* summary bar it replaces. */
#jjPage_settings.tl-theme .st-plan-row{ margin-bottom:16px; }
#jjPage_settings.tl-theme .st-plan-name-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#jjPage_settings.tl-theme .st-plan-loading{ font:400 13.5px/1.4 var(--tl-body-font); color:var(--tl-mute); padding:4px 0; }
#jjPage_settings.tl-theme .st-plan-name{ font:600 20px/1.15 var(--ap-display,'Fraunces',serif); color:var(--tl-ink); letter-spacing:-.01em; }
#jjPage_settings.tl-theme .st-plan-current-tag{
  font:700 10px/1 var(--tl-body-font); letter-spacing:.06em; text-transform:uppercase;
  color:var(--tl-blue); background:var(--tl-tint); border:1px solid var(--tl-tint-border);
  border-radius:999px; padding:4px 9px;
}
#jjPage_settings.tl-theme .st-plan-desc{ font:400 13px/1.4 var(--tl-body-font); color:var(--tl-grey); margin-top:4px; }
#jjPage_settings.tl-theme .st-plan-price{ font:600 15px/1.3 var(--tl-body-font); color:var(--tl-ink); margin-top:8px; }
#jjPage_settings.tl-theme .st-plan-renewal{ font:400 12.5px/1.4 var(--tl-body-font); color:var(--tl-mute); margin-top:4px; }
#jjPage_settings.tl-theme .st-cancel-link{
  display:inline-block; margin-top:14px; font:500 13px/1 var(--tl-body-font); color:var(--tl-grey);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
#jjPage_settings.tl-theme .st-cancel-link:hover{ color:var(--tl-ink); }

/* Usage bars -- one per real weekly-capped feature, or a single honest
   "no limits" row when the tier has none. */
#jjPage_settings.tl-theme .st-usage-row{ padding:12px 0; border-top:1px solid var(--tl-hair); }
#jjPage_settings.tl-theme .st-usage-row:first-child{ border-top:0; padding-top:2px; }
#jjPage_settings.tl-theme .st-usage-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
#jjPage_settings.tl-theme .st-usage-label{ font:500 13.5px/1.3 var(--tl-body-font); color:var(--tl-ink); }
#jjPage_settings.tl-theme .st-usage-remaining{ font:400 12.5px/1.3 var(--tl-body-font); color:var(--tl-mute); white-space:nowrap; }
#jjPage_settings.tl-theme .st-usage-track{ height:6px; border-radius:999px; background:var(--tl-hair); overflow:hidden; }
#jjPage_settings.tl-theme .st-usage-fill{ height:100%; background:var(--tl-blue); border-radius:999px; }
#jjPage_settings.tl-theme .st-usage-reset{ font:400 11.5px/1.3 var(--tl-body-font); color:var(--tl-mute); margin-top:5px; }
#jjPage_settings.tl-theme .st-usage-none{ font:400 13px/1.4 var(--tl-body-font); color:var(--tl-grey); padding:4px 0; }

@media (max-width:860px){
  #jjPage_settings.tl-theme .st-usage-top{ flex-direction:column; align-items:flex-start; gap:2px; }
}

/* The Billing History row reuses .st-ax-row (already used, unchanged, by the
   still-interim Security panel) but must render with THIS panel's --tl-*
   reference tokens, not Security's old --ap-* cream ones -- scoped strictly
   to the billing panel so Security's rows stay byte-identical. */
#jjPage_settings.tl-theme [data-st-panel="billing"] .st-ax-row{ border-top-color:var(--tl-hair); }
#jjPage_settings.tl-theme [data-st-panel="billing"] .st-ax-label{ font-family:var(--tl-body-font); color:var(--tl-ink); }
#jjPage_settings.tl-theme [data-st-panel="billing"] .st-ax-btn{
  background:var(--tl-card); border:1px solid var(--tl-hair); border-radius:var(--tl-radius-sm);
  color:var(--tl-grey); font-family:var(--tl-body-font); box-shadow:none;
}
#jjPage_settings.tl-theme [data-st-panel="billing"] .st-ax-btn:hover{ border-color:var(--tl-ink); color:var(--tl-ink); }
/* Mobile (<=768px): the main sidebar is hidden, so surface the section switcher as a top strip. */
@media (max-width:768px){
  #jjPage_settings .st-mobtabs{ display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 0 8px; margin-bottom:6px; border-bottom:1px solid var(--ap-hair,#e7e2d8); }
  #jjPage_settings .st-mobtab{ flex:0 0 auto; white-space:nowrap; border:0; background:transparent; cursor:pointer; font:600 13px/1 var(--rr-font-body); color:var(--ap-ink-2,#4f4f4f); padding:9px 12px; border-radius:var(--ap-radius,8px); }
  #jjPage_settings .st-mobtab.active{ background:var(--ap-accent-tint,#edf0ff); color:var(--ap-accent,#2448FF); }
}

/* ═══ AI interviewer chat (ic-*) ═══ */
.ic-resume-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 10px; margin-bottom: 16px;
}
.ic-resume-text strong { font-size: 14px; color: var(--text,#e6edf3); }
.ic-resume-meta { font-size: 12px; color: var(--text2,#8b949e); margin-top: 2px; }
.ic-resume-actions { display: flex; gap: 8px; }

.ic-screen { display: flex; flex-direction: column; }
.ic-textarea {
  width: 100%; min-height: 130px; padding: 12px 14px;
  background: var(--bg,#0d1117);
  border: 1px solid var(--border,rgba(255,255,255,.12));
  border-radius: 8px;
  color: var(--text,#e6edf3);
  font-size: 13px; font-family: inherit;
  resize: vertical; box-sizing: border-box; line-height: 1.5;
}
.ic-textarea { background: #F8FAFC; color: #0F172A; border-color: #E2E8F0; }
.ic-textarea:focus { outline: none; border-color: #2448FF; }
.ic-mode-pill {
  padding: 14px 16px;
  background: var(--bg,#0d1117);
  border: 1px solid var(--border,rgba(255,255,255,.12));
  border-radius: 10px;
  color: var(--text,#e6edf3);
  cursor: pointer; text-align: left;
  font-family: inherit; transition: all .15s;
}
.ic-mode-pill { background: #F8FAFC; border-color: #E2E8F0; color: #0F172A; }
.ic-mode-pill.active { border-color: #2448FF; background: rgba(36,72,255,.08); }
@media (max-width: 900px) {
  #jjPage_interview .ic-setup-grid {
    grid-template-columns: 1fr;
  }
  #jjPage_interview .ic-setup-aside {
    position: static;
    order: 2;
  }
}

/* Textareas inside steps */
#jjPage_interview .ic-step .ic-textarea {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 14px;
  color: var(--text, #EEF0EF);
  font: 400 13px/1.5 'DM Sans', sans-serif;
  resize: vertical;
  min-height: 140px;
}
#jjPage_interview .ic-step .ic-textarea:focus {
  outline: none;
  border-color: rgba(59,130,246,0.4);
  background: rgba(255,255,255,0.05);
}
#jjPage_interview .ic-mode-pills .ic-live-mode-pill,
#jjPage_interview .ic-mode-pills [class*="mode-pill"] {
  padding: 16px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#jjPage_interview .ic-mode-pills .active,
#jjPage_interview .ic-mode-pills [class*="mode-pill"].active {
  border-color: rgba(59,130,246,0.6);
  background: rgba(59,130,246,0.08);
}
#jjPage_interview .ic-voice-play.is-loading { opacity: 0.5; pointer-events: none; }
@media (max-width: 640px) {
  #jjPage_interview .ic-bound-sxs { grid-template-columns: 1fr; }
}
#jjPage_interview .ic-start-duration {
  position: absolute;
  right: 18px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  font: 500 12px/1 'DM Sans', sans-serif;
}
#jjPage_interview .ic-start-reassure {
  margin-top: 10px;
  text-align: center;
  font: 400 12px/1.4 'DM Sans', sans-serif;
  color: var(--fg-dim, rgba(238,240,239,0.5));
}

/* ===== Interview Prep preview orb (futuristic purple, all-unified) ===== */

#jjPage_interview .ic-aside-orb {
  position: relative;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: radial-gradient(ellipse at 50% 50%, #1A1035 0%, #0A0418 60%, #050210 100%);
  border: 0.5px solid rgba(167, 139, 250, 0.25);
  cursor: pointer;
  isolation: isolate;
  transition: border-color 0.4s ease;
}

#jjPage_interview .ic-pv-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(167, 139, 250, 0.10) 1px, transparent 1.2px);
  background-size: 22px 22px;
  background-position: center center;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

#jjPage_interview .ic-pv-crosshair-h,
#jjPage_interview .ic-pv-crosshair-v {
  position: absolute;
  pointer-events: none;
}
#jjPage_interview .ic-pv-crosshair-h {
  top: 50%; left: 10%; right: 10%; height: 1px;
  transform: translateY(-0.5px);
  background: linear-gradient(to right, transparent, rgba(167, 139, 250, 0.22), transparent);
}
#jjPage_interview .ic-pv-crosshair-v {
  left: 50%; top: 10%; bottom: 10%; width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(to bottom, transparent, rgba(167, 139, 250, 0.22), transparent);
}

#jjPage_interview .ic-pv-orbit {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#jjPage_interview .ic-pv-orbit-outer {
  width: 70%;
  aspect-ratio: 1;
  border: 0.5px dashed rgba(167, 139, 250, 0.28);
  animation: icPvRingSpin 40s linear infinite;
}
#jjPage_interview .ic-pv-orbit-tick {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #C4B5FD;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.9);
}
#jjPage_interview .ic-pv-t1 { top: -2.5px; left: 50%; margin-left: -2.5px; }
#jjPage_interview .ic-pv-t2 { top: 50%; right: -2.5px; margin-top: -2.5px; }
#jjPage_interview .ic-pv-t3 { bottom: -2.5px; left: 50%; margin-left: -2.5px; }
#jjPage_interview .ic-pv-t4 { top: 50%; left: -2.5px; margin-top: -2.5px; }

#jjPage_interview .ic-pv-guide {
  position: absolute;
  top: 50%; left: 50%;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.5px solid rgba(167, 139, 250, 0.20);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@keyframes icPvRingSpin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

#jjPage_interview .ic-pv-ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 30%;
  aspect-ratio: 1;
  border: 0.5px solid rgba(167, 139, 250, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: icPvRippleOut 4.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
#jjPage_interview .ic-pv-r1 { animation-delay: 0s; }
#jjPage_interview .ic-pv-r2 { animation-delay: -1.4s; }
#jjPage_interview .ic-pv-r3 { animation-delay: -2.8s; }
@keyframes icPvRippleOut {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  15%  { opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

#jjPage_interview .ic-pv-bars {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
#jjPage_interview .ic-pv-bar {
  position: absolute;
  left: 0; top: 0;
  width: 1.5px;
  height: 6px;
  margin-left: -0.75px;
  margin-top: -3px;
  border-radius: 999px;
  background: #C4B5FD;
  box-shadow: 0 0 4px rgba(167, 139, 250, 0.9);
  transform-origin: center center;
}
@keyframes icPvBarDance1 { 0%,100% { height: 6px;  } 50% { height: 26px; } }
@keyframes icPvBarDance2 { 0%,100% { height: 8px;  } 40% { height: 38px; } 80% { height: 12px; } }
@keyframes icPvBarDance3 { 0%,100% { height: 10px; } 30% { height: 22px; } 65% { height: 34px; } }
@keyframes icPvBarDance4 { 0%,100% { height: 6px;  } 50% { height: 16px; } }

#jjPage_interview .ic-pv-halo {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
  transition: filter 0.4s ease;
}
#jjPage_interview .ic-pv-halo-outer {
  width: 42%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.55) 0%, rgba(139, 92, 246, 0.25) 40%, transparent 70%);
  filter: blur(22px);
  animation: icPvHaloBreath 4.6s ease-in-out infinite;
}
#jjPage_interview .ic-pv-halo-mid {
  width: 22%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(196, 181, 253, 0.7) 0%, rgba(139, 92, 246, 0.4) 40%, transparent 75%);
  filter: blur(12px);
  animation: icPvHaloBreath 3s ease-in-out infinite -0.8s;
}
@keyframes icPvHaloBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.85; }
  50%      { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}

#jjPage_interview .ic-pv-blob {
  position: absolute;
  top: 50%; left: 50%;
  width: 14%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  filter: blur(2px);
  pointer-events: none;
  transition: filter 0.4s ease;
}
#jjPage_interview .ic-pv-blob-1 {
  background: radial-gradient(circle at 42% 38%, #FFFFFF 0%, #E9D5FF 10%, #C4B5FD 30%, #8B5CF6 60%, #6D28D9 85%, transparent 100%);
  border-radius: 62% 38% 51% 49% / 55% 45% 55% 45%;
  animation: icPvMorph1 4s ease-in-out infinite, icPvSpin1 9s linear infinite;
}
#jjPage_interview .ic-pv-blob-2 {
  background: radial-gradient(circle at 55% 55%, #DDD6FE 0%, #A78BFA 40%, #7C3AED 80%, transparent 100%);
  border-radius: 40% 60% 65% 35% / 45% 50% 50% 55%;
  animation: icPvMorph2 5.3s ease-in-out infinite, icPvSpin2 11s linear infinite reverse;
  opacity: 0.9;
  width: 17%;
}
#jjPage_interview .ic-pv-blob-3 {
  background: radial-gradient(circle at 50% 50%, rgba(221, 214, 254, 0.7) 0%, rgba(167, 139, 250, 0.55) 45%, rgba(109, 40, 217, 0.35) 80%, transparent 100%);
  border-radius: 55% 45% 42% 58% / 48% 52% 48% 52%;
  animation: icPvMorph3 3.1s ease-in-out infinite, icPvSpin3 7s linear infinite;
  opacity: 0.7;
  width: 20%;
}
@keyframes icPvMorph1 {
  0%, 100% { border-radius: 62% 38% 51% 49% / 55% 45% 55% 45%; transform: translate(-50%, -50%) scale(1);    }
  33%      { border-radius: 48% 52% 60% 40% / 42% 58% 42% 58%; transform: translate(-50%, -50%) scale(1.07); }
  66%      { border-radius: 58% 42% 45% 55% / 60% 40% 60% 40%; transform: translate(-50%, -50%) scale(0.96); }
}
@keyframes icPvMorph2 {
  0%, 100% { border-radius: 40% 60% 65% 35% / 45% 50% 50% 55%; transform: translate(-50%, -50%) scale(1);    }
  40%      { border-radius: 60% 40% 45% 55% / 55% 45% 60% 40%; transform: translate(-50%, -50%) scale(1.10); }
  75%      { border-radius: 52% 48% 58% 42% / 40% 60% 45% 55%; transform: translate(-50%, -50%) scale(0.94); }
}
@keyframes icPvMorph3 {
  0%, 100% { border-radius: 55% 45% 42% 58% / 48% 52% 48% 52%; transform: translate(-50%, -50%) scale(1);    }
  50%      { border-radius: 45% 55% 58% 42% / 55% 45% 55% 45%; transform: translate(-50%, -50%) scale(1.14); }
}
@keyframes icPvSpin1 { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes icPvSpin2 { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes icPvSpin3 { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }

#jjPage_interview .ic-pv-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 3px;
  background: #FFFFFF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 14px rgba(167, 139, 250, 0.95);
  pointer-events: none;
  animation: icPvCorePulse 1.6s ease-in-out infinite;
}
@keyframes icPvCorePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.9; }
  50%      { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
}

#jjPage_interview .ic-pv-chip {
  position: absolute;
  top: 10px; left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 7px;
  border-radius: 4px;
  background: rgba(46, 16, 101, 0.55);
  border: 0.5px solid rgba(167, 139, 250, 0.35);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(221, 214, 254, 0.95);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
  z-index: 2;
}
#jjPage_interview .ic-pv-chip-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #A78BFA;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.95);
  animation: icPvChipPulse 1.4s ease-in-out infinite;
}
@keyframes icPvChipPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

#jjPage_interview .ic-pv-readout {
  position: absolute;
  top: 10px; right: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(46, 16, 101, 0.4);
  border: 0.5px solid rgba(167, 139, 250, 0.22);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(221, 214, 254, 0.75);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
  z-index: 2;
}
#jjPage_interview .ic-pv-hint {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(167, 139, 250, 0.4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}

/* Hover, speed up + brighten */
#jjPage_interview .ic-aside-orb:hover { border-color: rgba(167, 139, 250, 0.6); }
#jjPage_interview .ic-aside-orb:hover .ic-pv-halo-outer  { animation-duration: 2s;   filter: blur(26px) brightness(1.3); }
#jjPage_interview .ic-aside-orb:hover .ic-pv-halo-mid    { animation-duration: 1.4s; filter: blur(14px) brightness(1.35); }
#jjPage_interview .ic-aside-orb:hover .ic-pv-blob-1      { animation-duration: 1.8s, 4.5s; filter: blur(1px) brightness(1.2); }
#jjPage_interview .ic-aside-orb:hover .ic-pv-blob-2      { animation-duration: 2.4s, 5.5s; filter: blur(1px) brightness(1.2); }
#jjPage_interview .ic-aside-orb:hover .ic-pv-blob-3      { animation-duration: 1.4s, 3.5s; filter: blur(1px) brightness(1.2); }
#jjPage_interview .ic-aside-orb:hover .ic-pv-core        { animation-duration: 0.9s; }
#jjPage_interview .ic-aside-orb:hover .ic-pv-ripple      { animation-duration: 2.5s; }
#jjPage_interview .ic-aside-orb:hover .ic-pv-orbit-outer { animation-duration: 20s; border-color: rgba(167, 139, 250, 0.55); }
#jjPage_interview .ic-aside-orb:hover .ic-pv-bar         { box-shadow: 0 0 7px rgba(167, 139, 250, 1); }
#jjPage_interview .ic-aside-orb:hover .ic-pv-chip-dot    { animation-duration: 0.8s; }

@media (prefers-reduced-motion: reduce) {
  #jjPage_interview .ic-aside-orb *,
  #jjPage_interview .ic-aside-orb *::before,
  #jjPage_interview .ic-aside-orb *::after { animation: none !important; }
}
#jjPage_interview .ic-step .ic-textarea {
  min-height: 90px;
  padding: 10px 12px;
  font-size: 12px;
}
#jjPage_interview .ic-mode-pills .ic-live-mode-pill,
#jjPage_interview .ic-mode-pills [class*="mode-pill"] {
  padding: 12px 14px;
}
#jjPage_interview .ic-start-reassure {
  margin-top: 6px;
  font-size: 11px;
}

/* Width + alignment fixes, fill the available content area */
#jjPage_interview .jj-page-body {
  max-width: 1600px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Textareas, visible background, visible border, dark placeholder */
#jjPage_interview .ic-step .ic-textarea {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1A1614;
}
#jjPage_interview .ic-step .ic-textarea::placeholder {
  color: rgba(26, 22, 20, 0.40);
}
#jjPage_interview .ic-step .ic-textarea:focus {
  border-color: rgba(36, 72, 255, 0.5);
  background: #ffffff;
}

/* Mode pills */
#jjPage_interview .ic-mode-pills .ic-live-mode-pill,
#jjPage_interview .ic-mode-pills [class*="mode-pill"] {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
}
#jjPage_interview .ic-mode-pills .active,
#jjPage_interview .ic-mode-pills [class*="mode-pill"].active {
  border-color: rgba(36, 72, 255, 0.7);
  background: rgba(36, 72, 255, 0.06);
}

/* Preview orb card, do NOT change. It has its own dark gradient background and looks correct as-is in both themes. Leave as is. */

/* Start footer reassurance text */
#jjPage_interview .ic-start-reassure {
  color: rgba(26, 22, 20, 0.55);
}

/* Session length (auto-end) bound picker */
.ic-bound-wrap { display: flex; flex-direction: column; gap: 10px; }
.ic-bound-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg,#0d1117);
  border: 1px solid var(--border,rgba(255,255,255,.12));
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ic-bound-row { background: #F8FAFC; border-color: #E2E8F0; }
.ic-bound-row:hover { border-color: #2448FF; }
.ic-bound-row input[type="radio"] { margin: 0; cursor: pointer; accent-color: #2448FF; }
.ic-bound-label { font-size: 13px; font-weight: 600; color: var(--text,#e6edf3); min-width: 78px; }
.ic-bound-label { color: #0F172A; }
.ic-bound-select { flex: 1; max-width: 220px; width: auto; padding: 8px 34px 8px 12px; }
#icBoundQuestionsRow.ic-bound-hidden { display: none; }

/* Countdown warning state, pulses gently when < 2 min remaining */
@keyframes icTimerPulse {
  0%, 100% { background: #FED7AA; color: #9A3412; }
  50%      { background: #FDBA74; color: #7C2D12; }
}
.ic-timer.ic-timer-warn,
.ic-orb-timer.ic-timer-warn {
  animation: icTimerPulse 1.6s ease-in-out infinite;
}

/* Live screen */
#icLive.ic-screen { gap: 16px; }

/* Non-blocking error banner shown near the top of the live screen when a
   bot turn fails (e.g. TTS 504). Position: fixed so it overlays both the
   classic grid layout and the orb overlay without depending on ancestor
   positioning. */
.ic-inline-error {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(220, 60, 60, 0.15);
  border: 1px solid rgba(220, 60, 60, 0.4);
  color: #ff9d9d;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 3100;
  max-width: 80vw;
  text-align: center;
  pointer-events: none;
}
.ic-inline-error[hidden] { display: none; }
.ic-inline-error {
  color: #8a1f1f;
  background: rgba(220, 60, 60, 0.12);
  border-color: rgba(220, 60, 60, 0.35);
}
.ic-live-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: var(--surface,#161b22);
  border: 1px solid var(--border,rgba(255,255,255,.12));
  border-radius: 10px; flex-wrap: wrap;
}
.ic-live-topbar { background: #fff; border-color: #E2E8F0; }
.ic-live-modes {
  display: flex; gap: 2px;
  background: var(--surface2,#0d1117);
  border-radius: 8px; padding: 3px;
}
.ic-live-modes { background: #F1F5F9; }
.ic-live-mode-pill {
  padding: 6px 14px; background: transparent; border: 0; border-radius: 6px;
  color: var(--text2,#8b949e);
  font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.ic-live-mode-pill.active {
  background: var(--bg,#0d1117);
  color: var(--text,#e6edf3);
}
.ic-live-mode-pill.active { background: #fff; color: #0F172A; }
.ic-live-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ic-timer {
  font-size: 13px; font-weight: 700;
  color: var(--text,#e6edf3);
  padding: 6px 10px;
  background: var(--surface2,#0d1117);
  border-radius: 6px;
  font-family: 'SF Mono', Consolas, monospace;
}
.ic-timer { background: #F1F5F9; color: #0F172A; }
.ic-icon-btn {
  padding: 6px 12px;
  background: var(--surface2,#0d1117);
  border: 1px solid var(--border,rgba(255,255,255,.12));
  border-radius: 6px;
  color: var(--text,#e6edf3);
  font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.ic-icon-btn { background: #F1F5F9; border-color: #E2E8F0; color: #0F172A; }
.ic-icon-btn:hover { border-color: #2448FF; }
.ic-end-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(139,92,246,0.12));
  border: 1px solid rgba(167,139,250,0.4);
  color: #C4B5FD;
  border-radius: 10px;
  font: 600 13px/1 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.ic-end-btn::before {
  content: '\25C9';
  font-size: 11px;
  opacity: 0.8;
}
.ic-end-btn:hover {
  background: linear-gradient(135deg, rgba(167,139,250,0.28), rgba(139,92,246,0.2));
  border-color: rgba(167,139,250,0.7);
  color: #E9D5FF;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139,92,246,0.25);
}
.ic-end-btn {
  background: linear-gradient(135deg, rgba(109,40,217,0.08), rgba(139,92,246,0.05));
  border-color: rgba(109,40,217,0.3);
  color: #6D28D9;
}
.ic-end-btn:hover {
  color: #4C1D95;
  background: linear-gradient(135deg, rgba(109,40,217,0.15), rgba(139,92,246,0.1));
}

.ic-live-main {
  display: grid; grid-template-columns: 1fr 260px;
  gap: 16px; min-height: 420px;
}
.ic-transcript {
  background: var(--surface,#161b22);
  border: 1px solid var(--border,rgba(255,255,255,.12));
  border-radius: 10px; padding: 16px;
  overflow-y: auto; max-height: 520px; min-height: 420px;
  display: flex; flex-direction: column; gap: 10px;
}
.ic-transcript { background: #fff; border-color: #E2E8F0; }
.ic-bubble {
  padding: 10px 14px; border-radius: 12px;
  max-width: 82%; line-height: 1.55;
  font-size: 14px;
  word-wrap: break-word;
}
.ic-bubble-user {
  align-self: flex-end;
  background: #2563EB; color: #fff;
  border-bottom-right-radius: 4px;
}
.ic-bubble-assistant {
  align-self: flex-start;
  background: var(--surface2,#0d1117);
  color: var(--text,#e6edf3);
  border-bottom-left-radius: 4px;
}
.ic-bubble-assistant { background: #F1F5F9; color: #0F172A; }
.ic-bubble-system {
  align-self: center;
  background: rgba(36,72,255,.08);
  border: 1px dashed rgba(36,72,255,.4);
  color: var(--text2,#8b949e);
  font-size: 12px; font-style: italic;
  max-width: 90%; text-align: center;
}
.ic-bubble-error {
  background: rgba(220,38,38,.1) !important;
  border: 1px solid rgba(220,38,38,.35) !important;
  cursor: pointer;
  color: #f85149 !important;
}
.ic-bubble-body { white-space: pre-wrap; }
.ic-bubble-replay {
  display: inline-block; margin-top: 6px; margin-right: 4px;
  padding: 4px 10px; background: rgba(0,0,0,.12);
  border: 0; border-radius: 6px;
  color: inherit;
  font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.ic-bubble-user .ic-bubble-replay { background: rgba(255,255,255,.22); }
.ic-typing .ic-dot {
  display: inline-block; width: 7px; height: 7px;
  background: var(--text2,#8b949e);
  border-radius: 50%; margin: 0 2px;
  animation: ic-dot-bounce 1.4s infinite ease-in-out both;
}
.ic-typing .ic-dot:nth-child(1) { animation-delay: -0.32s; }
.ic-typing .ic-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes ic-dot-bounce {
  0%, 80%, 100% { transform: scale(.2); opacity: .4; }
  40% { transform: scale(1); opacity: 1; }
}

.ic-context-side {
  background: var(--surface,#161b22);
  border: 1px solid var(--border,rgba(255,255,255,.12));
  border-radius: 10px; padding: 14px;
  max-height: 520px; overflow-y: auto;
}
.ic-context-side { background: #fff; border-color: #E2E8F0; }
.ic-side-section + .ic-side-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border,rgba(255,255,255,.08)); }
.ic-side-section + .ic-side-section { border-top-color: #E2E8F0; }
.ic-side-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text3,#6e7681); letter-spacing: .5px; margin-bottom: 6px;
}
.ic-side-body {
  font-size: 12px; color: var(--text2,#8b949e);
  line-height: 1.5; white-space: pre-wrap;
  max-height: 220px; overflow-y: auto;
}

.ic-live-bottom {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px;
  background: var(--surface,#161b22);
  border: 1px solid var(--border,rgba(255,255,255,.12));
  border-radius: 10px;
}
.ic-live-bottom { background: #fff; border-color: #E2E8F0; }
.ic-status-pill {
  font-size: 12px; color: var(--text2,#8b949e);
  padding: 5px 14px;
  background: var(--surface2,#0d1117);
  border-radius: 100px;
}
.ic-status-pill { background: #F1F5F9; color: #475569; }
.ic-record-btn {
  padding: 16px 38px; background: #2448FF; border: 0;
  border-radius: 100px; color: #fff;
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 10px;
  transition: all .15s;
}
.ic-record-btn:hover { filter: brightness(1.08); }
.ic-record-btn.listening {
  background: #dc2626;
  animation: ic-pulse 1.5s infinite;
}
@keyframes ic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50% { box-shadow: 0 0 0 14px rgba(220,38,38,0); }
}
.ic-rec-ico { font-size: 18px; line-height: 1; color: #ff3b30; }
/* Prompt 34: Phosphor icon sizing inside Interview Prep UI so swapped <i class="ph ..."> glyphs match the emojis they replaced. */
.ic-pill-title .ph { font-size: 16px; margin-right: 4px; vertical-align: -2px; }
.ic-orb-mode-pill .ph { font-size: 14px; margin-right: 4px; }
.ic-icon-btn .ph { font-size: 14px; margin-right: 4px; vertical-align: -2px; }
.ic-orb-btn .ph { font-size: 16px; vertical-align: -2px; }
.ic-orb-ptt-ico .ph { font-size: 28px; }
.ic-aside-tip-title .ph { font-size: 16px; margin-right: 6px; color: #ffc107; vertical-align: -2px; }
.ic-live-interim {
  font-size: 12px; color: var(--text3,#6e7681);
  font-style: italic; min-height: 16px;
  text-align: center; max-width: 620px; line-height: 1.4;
}

/* Report */
#icReport.ic-screen { align-items: center; }
.ic-report-card {
  max-width: 860px; width: 100%; padding: 28px;
  border-radius: 14px;
  /* Transparent so the #jjPage_interview gradient shows through and the inner
     frosted cards float on it, matching the live interview view (no white box). */
  background: transparent;
  border: none;
  box-shadow: none;
}
.ic-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border,rgba(255,255,255,.15));
  border-top-color: #2448FF;
  border-radius: 50%;
  animation: ic-spin 1s linear infinite;
  margin: 0 auto 12px;
}
@keyframes ic-spin { to { transform: rotate(360deg); } }
.ic-report-center { text-align: center; padding: 40px 20px; color: var(--text2,#8b949e); }
.ic-report-header { text-align: center; margin-bottom: 24px; }
.ic-report-score { font-size: 56px; font-weight: 800; color: #2448FF; line-height: 1; }
.ic-report-score-label { font-size: 13px; color: var(--text2,#8b949e); margin-top: 4px; }
.ic-report-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 20px;
}
.ic-report-section {
  padding: 14px;
  background: var(--bg,#0d1117);
  border: 1px solid var(--border,rgba(255,255,255,.12));
  border-radius: 10px;
}
.ic-report-section { background: #F8FAFC; border-color: #E2E8F0; }
.ic-report-sec-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text3,#6e7681); margin-bottom: 10px; letter-spacing: .5px;
}
.ic-report-item { font-size: 13px; color: var(--text,#e6edf3); line-height: 1.6; margin-bottom: 6px; }
.ic-report-item { color: #0F172A; }
.ic-report-answers { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.ic-report-answer {
  padding: 14px;
  background: var(--bg,#0d1117);
  border: 1px solid var(--border,rgba(255,255,255,.12));
  border-radius: 10px;
}
.ic-report-answer { background: #F8FAFC; border-color: #E2E8F0; }
.ic-report-q { font-size: 13px; color: var(--text,#e6edf3); margin-bottom: 6px; font-weight: 600; }
.ic-report-q { color: #0F172A; }
.ic-report-a { font-size: 13px; color: var(--text2,#8b949e); line-height: 1.65; margin-bottom: 8px; }
.ic-report-scores { font-size: 11px; color: var(--text3,#6e7681); font-weight: 600; }
.ic-report-actions { margin-top: 20px; text-align: center; }
.ic-btn {
  padding: 10px 22px;
  background: var(--surface2,#0d1117);
  border: 1px solid var(--border,rgba(255,255,255,.15));
  border-radius: 8px;
  color: var(--text,#e6edf3);
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.ic-btn { background: #F1F5F9; border-color: #E2E8F0; color: #0F172A; }
.ic-btn-primary { background: #2448FF !important; border-color: #2448FF !important; color: #fff !important; }
.ic-btn-primary:hover { filter: brightness(1.08); }
.ic-error { padding: 20px; text-align: center; color: #f85149; font-size: 13px; }

@media (max-width: 880px) {
  .ic-live-main { grid-template-columns: 1fr; }
  .ic-context-side { max-height: 200px; }
  .ic-report-grid { grid-template-columns: 1fr; }
  .ic-mode-pills { grid-template-columns: 1fr; }
  .ic-live-topbar { gap: 8px; }
  .ic-live-stats { gap: 6px; }
  .ic-icon-btn, .ic-end-btn { padding: 5px 10px; font-size: 11px; }
}

/* ─── Voice mode overlay (orb) ─── */
.ic-orb-view {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: radial-gradient(ellipse at 50% 40%, #1a0f28 0%, #0a0612 55%, #050308 100%);
  overflow: hidden;
}
body.ic-layout-orb #icChatWrap .ic-orb-view {
  display: block;
}
body.ic-layout-orb #icChatWrap > .ic-screen {
  display: none !important;
}
/* Keep #icLive in the render tree in orb mode, its .ic-live-main child uses
   position: fixed to become the transcript drawer, and position: fixed does NOT
   escape a display:none ancestor. Without this override, drawer bubbles compute
   to zero dimensions and never paint. Setup/report screens stay hidden via the
   rule above. Classic-layout topbar + bottom inside #icLive are hidden here so
   only the drawer panel and its transcript show through. */
body.ic-layout-orb #icChatWrap > #icLive {
  display: block !important;
}
body.ic-layout-orb #icChatWrap > #icLive > .ic-live-topbar,
body.ic-layout-orb #icChatWrap > #icLive > .ic-live-bottom {
  display: none !important;
}
.ic-orb-view {
  background: radial-gradient(ellipse at 50% 40%, #fff3ea 0%, #f5edfa 55%, #e8deef 100%);
}

.ic-orb-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  z-index: 3;
  pointer-events: none;
}
.ic-orb-topbar > * { pointer-events: auto; }
.ic-orb-top-right { display: flex; align-items: center; gap: 10px; }
.ic-orb-timer {
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.85);
  font-variant-numeric: tabular-nums;
  padding: 6px 12px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.ic-orb-timer { color: #1e1230; background: rgba(30,18,48,.08); }

.ic-orb-btn {
  appearance: none; border: 0; background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  backdrop-filter: blur(8px);
  transition: background .15s, transform .1s;
}
.ic-orb-btn:hover { background: rgba(255,255,255,.14); }
.ic-orb-btn:active { transform: scale(.96); }
.ic-orb-btn { background: rgba(30,18,48,.07); color: #1e1230; }
.ic-orb-btn:hover { background: rgba(30,18,48,.12); }

.ic-orb-modes { display: flex; gap: 2px; padding: 3px; background: rgba(255,255,255,.06); border-radius: 999px; backdrop-filter: blur(8px); }
.ic-orb-modes { background: rgba(30,18,48,.08); }
.ic-orb-mode-pill {
  appearance: none; border: 0; background: transparent;
  color: rgba(255,255,255,.6);
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.ic-orb-mode-pill.active {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.ic-orb-mode-pill { color: rgba(30,18,48,.55); }
.ic-orb-mode-pill.active { background: rgba(255,255,255,.9); color: #1e1230; }

/* Voice picker, orb top bar variant (matches .ic-orb-btn pill) */
.ic-orb-voice-select {
  appearance: none; border: 0;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  padding: 8px 30px 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  backdrop-filter: blur(8px);
  transition: background .15s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(255,255,255,0.72)' d='M5 6 0 0h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.ic-orb-voice-select:hover { background: rgba(255,255,255,.14); }
.ic-orb-voice-select option { background: #1a1530; color: #fff; }
.ic-orb-voice-select {
  background: rgba(30,18,48,.07); color: #1e1230;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(30,18,48,0.62)' d='M5 6 0 0h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.ic-orb-voice-select:hover { background: rgba(30,18,48,.12); }
.ic-orb-voice-select option { background: #fff; color: #1e1230; }

.ic-orb-bc-toggle { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,.72); cursor: pointer; user-select: none; }
.ic-orb-bc-toggle input { accent-color: #7C3AED; width: 14px; height: 14px; cursor: pointer; }
.ic-orb-bc-toggle { color: rgba(30,18,48,.7); }
.ic-bc-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text2, #64748B); cursor: pointer; user-select: none; }
.ic-bc-toggle input { accent-color: #2448FF; width: 14px; height: 14px; cursor: pointer; }

.ic-orb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ic-orb-glow {
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,53,.35) 0%, rgba(139,92,246,.18) 45%, transparent 75%);
  filter: blur(40px);
  transform: translateZ(0) scale(1);
  transition: opacity .6s, transform .6s;
  opacity: .8;
  pointer-events: none;
}
.ic-orb-svg {
  position: relative;
  width: min(72vmin, 560px);
  height: min(72vmin, 560px);
  overflow: visible;
  z-index: 2;
}

.ic-orb-bottombar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 24px 24px 40px;
  z-index: 3;
  pointer-events: none;
}
.ic-orb-bottombar > * { pointer-events: auto; }
.ic-orb-state-label {
  font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  min-height: 18px;
  transition: color .3s;
}
.ic-orb-state-label { color: rgba(30,18,48,.55); }
.ic-orb-interim {
  font-size: 16px;
  color: rgba(255,255,255,.88);
  max-width: 640px;
  text-align: center;
  min-height: 24px;
  line-height: 1.4;
  font-style: italic;
}
.ic-orb-interim { color: #1e1230; }

.ic-orb-transcript-btn {
  font-size: 12px;
  padding: 7px 14px;
}

/* Transcript drawer, slides up from bottom, CSS transform only (no re-parenting) */
body.ic-drawer-open #icChatWrap .ic-orb-view .ic-orb-stage {
  transform: translateY(-20%) scale(.72);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.ic-orb-stage { transition: transform .35s cubic-bezier(.4,0,.2,1); }

body.ic-layout-orb #icChatWrap .ic-live-main {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 55vh;
  max-height: 520px;
  z-index: 2005;
  background: rgba(10,6,18,.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.1);
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: grid !important;
  grid-template-columns: 1fr;
  padding: 20px 24px;
  overflow: hidden;
}
body.ic-layout-orb.ic-drawer-open #icChatWrap .ic-live-main {
  transform: translateY(0);
}
body.ic-layout-orb #icChatWrap .ic-live-main {
  background: rgba(255,255,255,.92);
  border-top-color: rgba(30,18,48,.12);
}
body.ic-layout-orb #icChatWrap .ic-live-main .ic-context-side { display: none; }
body.ic-layout-orb #icChatWrap .ic-live-main #icTranscript {
  max-height: none;
  overflow-y: auto;
}

.ic-orb-drawer-scrim {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 2001;
  display: none;
}
body.ic-layout-orb.ic-drawer-open #icChatWrap .ic-orb-drawer-scrim { display: block; }

/* Mobile orb */
@media (max-width: 640px) {
  .ic-orb-svg { width: 80vw; height: 80vw; }
  .ic-orb-glow { width: 90vw; height: 90vw; }
  .ic-orb-topbar { padding: 14px 16px; }
  .ic-orb-top-right { gap: 6px; }
  .ic-orb-btn { padding: 7px 10px; font-size: 12px; }
  .ic-orb-mode-pill { padding: 5px 10px; font-size: 11px; }
  .ic-orb-voice-select { padding: 7px 26px 7px 10px; font-size: 11px; background-position: right 9px center; }
  .ic-orb-bottombar { padding: 20px 16px 28px; }
  body.ic-layout-orb #icChatWrap .ic-live-main { height: 70vh; padding: 16px; }
}

/* ── Push-to-talk: visible only when body.ic-turnmode-ptt ── */
body.ic-layout-orb .ic-orb-ptt-wrap {
  position: absolute;
  left: 50%;
  bottom: 160px;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 4;
  pointer-events: auto;
}
body.ic-layout-orb.ic-turnmode-ptt .ic-orb-ptt-wrap { display: flex; }
body.ic-layout-orb .ic-orb-ptt-hint {
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.62);
  text-align: center;
  font-weight: 500;
}
body.ic-layout-orb .ic-orb-ptt-hint { color: rgba(30,18,48,.62); }
body.ic-layout-orb .ic-orb-ptt-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22);
  background: linear-gradient(140deg, rgba(255,107,53,.92), rgba(139,92,246,.88));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(255,107,53,.28), 0 0 0 0 rgba(255,107,53,.0);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body.ic-layout-orb .ic-orb-ptt-btn .ic-orb-ptt-ico { font-size: 34px; line-height: 1; }
body.ic-layout-orb .ic-orb-ptt-btn:hover {
  border-color: rgba(255,255,255,.42);
  transform: translateY(-1px);
}
body.ic-layout-orb .ic-orb-ptt-btn.active,
body.ic-layout-orb .ic-orb-ptt-btn:active {
  transform: scale(.96);
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 12px 50px rgba(255,107,53,.5), 0 0 0 8px rgba(255,107,53,.18);
}
/* Feature #4: visually-disabled PTT while bot is speaking (no pointer-events
   change, tooltip must still render, and the click handler itself short-circuits) */
body.ic-layout-orb .ic-orb-ptt-btn.ic-ptt-locked {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
body.ic-layout-orb .ic-orb-ptt-btn.ic-ptt-locked:hover { transform: none; border-color: rgba(255,255,255,.22); }
/* Hide the auto-mode interim textarea/state label layout shift below when ptt is active */
body.ic-layout-orb.ic-turnmode-ptt .ic-orb-bottombar { padding-bottom: 24px; }
/* Mobile PTT sizing */
@media (max-width: 640px) {
  body.ic-layout-orb .ic-orb-ptt-wrap { bottom: 140px; gap: 8px; }
  body.ic-layout-orb .ic-orb-ptt-btn { width: 116px; height: 116px; font-size: 11px; }
  body.ic-layout-orb .ic-orb-ptt-btn .ic-orb-ptt-ico { font-size: 28px; }
}

/* end ic-* */

/* ═══ MOBILE RESPONSIVE: RR rewrite ═══ */
@media (max-width: 768px) {
  .jj-root { flex-direction: column !important; height: auto !important; min-height: 100dvh; }
  .jj-sidebar { display: none !important; }
  .rr-sidebar { display: none !important; }
  .jj-main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }
  /* The #jjMobNav clearance used to live on .jj-main's own padding-bottom,
     but .jj-main has no background of its own (it's a transparent flex/scroll
     wrapper), so that 80px strip showed the white .jj-root background behind
     it on every page, worst on short pages (Calendar/Find) where it was
     visible without scrolling. Move the same clearance onto the active page
     itself so it's part of the page's own (themed) background. */
  .jj-main > .jj-page.active {
    padding-bottom: 80px !important;
  }
  body.rr-shell-on #app.active .sim-view {
    padding-left: 0 !important;
    padding-bottom: 80px !important;
  }

  .jj-page-body, .jj-tool-wrap { padding: 12px 14px !important; }
  .jj-page-head { padding: 14px 14px 8px !important; }
  .jj-page-title { font-size: 18px !important; }
  .jj-page-sub { font-size: 13px !important; }

  .rr-header { padding: 0 12px !important; height: 48px !important; }
  .rr-mode-tabs { display: none !important; }
  .rr-action-btn { width: 30px !important; height: 30px !important; }

  #jjMobNav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    background: var(--jj-surface, #1c2128) !important;
    border-top: 1px solid var(--jj-bdr, rgba(255,255,255,.1)) !important;
    z-index: 999 !important;
    align-items: stretch !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  #jjMobNav {
    background: var(--surface) !important;
    border-top-color: var(--border) !important;
  }

  /* Find Contacts mobile reflow */
  .fcn-page { padding: 14px 12px 80px !important; gap: 14px !important; }
  .fcn-hd { display: none !important; }
  .fcn-hints { display: none !important; }
  .fcn-search-wrap { border-radius: 10px !important; }
  .fcn-search-inp { font-size: 15px !important; padding: 12px 12px !important; }
  .fcn-get-btn { padding: 0 16px !important; font-size: 14px !important; min-height: 48px !important; }
  .fcn-conf-bar {
    height: auto !important;
    padding: 10px 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .fcn-conf-r { font-size: 11px !important; }
  .fcn-output-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .fcn-ecard, .fcn-ccard {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
  }
  .fcn-email-body { min-height: 140px !important; font-size: 14px !important; }
  .fcn-email-acts { flex-wrap: wrap !important; gap: 8px !important; }
  .fcn-act-main { font-size: 13px !important; padding: 10px 14px !important; }
  .fcn-improve-row { gap: 6px !important; }
  .fcn-improve-btn { font-size: 12px !important; padding: 5px 10px !important; }
  .fcn-locked-section { border-radius: 10px !important; }
  .fcn-unlock-btn { height: 46px !important; font-size: 14px !important; }
  .fcn-others-wrap { margin: 0 !important; }
  .fcn-other-row { padding: 10px 0 !important; }

  /* Two-col layouts stack */
  .jh-two-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  /* CV / Cover / Sponsor */
  #jjPage_cv .jj-page-body textarea { min-height: 200px !important; font-size: 14px !important; }
  #jjPage_cover input,
  #jjPage_cover textarea,
  #jjPage_cover select { font-size: 16px !important; }
  #jjPage_sponsor .jh-two-col { flex-direction: column !important; }

  /* Settings */
  #jjPage_settings .jj-page-body { padding: 14px 12px !important; }
  #jjPage_settings input,
  #jjPage_settings select,
  #jjPage_settings textarea {
    font-size: 16px !important;
    width: 100% !important;
  }

  /* Form controls, iOS zoom fix */
  input, select, textarea { font-size: 16px !important; }
  button { min-height: 40px; }

  /* Cards */
  .jj-card, .jh-card { border-radius: 16px !important; padding: 14px !important; }
}

@media (max-width: 480px) {
  .fcn-page { padding: 10px 10px 80px !important; }
  .jj-page-body { padding: 10px 10px !important; }
  .fcn-get-btn { padding: 0 12px !important; font-size: 13px !important; }
}

/* ═══ MOBILE BOTTOM NAV CSS ═══ */
.jj-mob-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; border: none; background: none;
  cursor: pointer; color: var(--jj-txt2, #8b949e); font-family: inherit;
  padding: 6px 0; transition: color .12s;
  min-height: 44px;
}
.jj-mob-btn { color: #64748B; }
.jj-mob-btn.active { color: var(--rr-accent) !important; }
.jj-mob-ico { font-size: 20px; line-height: 1; }
.jj-mob-lbl { font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.jj-mob-drawer-btn {
  width: 100%; padding: 13px 16px; border: none; background: none;
  text-align: left; font-size: 14px; font-weight: 500;
  color: var(--jj-txt, #e6edf3); cursor: pointer; font-family: inherit;
  border-radius: 8px; transition: background .1s;
}
.jj-mob-drawer-btn { color: #0F172A; }
.jj-mob-drawer-btn:hover { background: var(--jj-bdr, rgba(255,255,255,.06)); }

/* ═══ FIX1 FIND CONTACTS MOBILE STACK ═══ */
@media (max-width: 768px) {
  #fcnOutputCols {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
  }
  #fcnCCard, #fcnECard,
  #fcnECard[style], #fcnCCard[style] {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .fcn-ecard, .fcn-ccard {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    box-sizing: border-box !important;
  }
  #jjPage_find .fcn-page {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px 80px !important;
    overflow-x: hidden !important;
  }
  #fcnSuccessBanner, .fcn-conf-bar {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 10px 12px !important;
    gap: 6px !important;
    font-size: 13px !important;
  }
  .fcn-conf-r { font-size: 11px !important; gap: 6px !important; }
  .fcn-conf-badge { font-size: 10px !important; }
  #fcnOthersWrap { width: 100% !important; }
  .fcn-search-wrap { width: 100% !important; box-sizing: border-box !important; }
}

/* ═══ FIX2 SETTINGS MOBILE SINGLE-COL ═══ */
@media (max-width: 768px) {
  #jjPage_settings .jj-panel,
  #jjPage_settings form,
  #jjPage_settings [style*="grid"],
  #jjPage_settings [style*="display: grid"],
  #jjPage_settings .jj-field-row,
  #jjPage_settings .jj-two-col,
  #jjPage_settings .jh-two-col {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
  }
  #jjPage_settings input,
  #jjPage_settings select,
  #jjPage_settings textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
  #jjPage_settings > * {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ═══ FIX3 MORE DRAWER MOBILE ═══ */
@media (max-width: 768px) {
  #jjMobDrawer {
    bottom: 64px !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    border-top: 1px solid var(--jj-bdr, rgba(255,255,255,.1)) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 8px 8px 4px !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.25) !important;
    max-height: min(360px, 70vh) !important;
    overflow-y: auto !important;
    background: var(--jj-surface, #1c2128) !important;
    z-index: 999 !important;
  }
  #jjMobDrawer {
    background: #ffffff !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1) !important;
  }
  #jjMobNav { z-index: 1000 !important; }
  .jj-mob-drawer-btn {
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
  #jjMobDrawer::before {
    content: '';
    position: fixed;
    inset: 0;
    bottom: 64px;
    background: rgba(0,0,0,.4);
    z-index: -1;
  }
}

/* ═══ MIC PERMISSION TOAST CSS ═══ */
.ip-mic-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: #1e293b;
  border: 1px solid rgba(36,72,255,.35);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #e2e8f0;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  max-width: 420px;
  width: 90vw;
  box-sizing: border-box;
}
.ip-mic-toast {
  background: #ffffff;
  border-color: rgba(36,72,255,.25);
  color: #0f172a;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.ip-mic-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ip-mic-toast-ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(36,72,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ip-mic-toast-ico.denied {
  background: rgba(239,68,68,.12);
}
.ip-mic-toast-body { flex: 1; min-width: 0; }
.ip-mic-toast-title { font-weight: 600; margin-bottom: 2px; }
.ip-mic-toast-sub { font-size: 12px; color: #94a3b8; }
.ip-mic-toast-sub { color: #64748b; }

/* ═══ INTERVIEW ANSWER ANNOTATIONS CSS ═══ */
.ip-annotation {
  position: relative;
  display: inline;
  cursor: help;
  border-radius: 3px;
  padding: 1px 2px;
  transition: background .15s;
}
.ip-annotation-weak {
  background: rgba(234,179,8,.15);
  border-bottom: 2px solid #ca8a04;
  color: var(--text, #e6edf3);
  font-style: italic;
}
.ip-annotation-weak {
  background: rgba(234,179,8,.12);
  color: #78350f;
}
.ip-annotation-missing {
  background: rgba(239,68,68,.12);
  border-bottom: 2px dotted #dc2626;
  color: var(--text, #e6edf3);
  font-style: italic;
}
.ip-annotation-missing {
  color: #7f1d1d;
}
.ip-annotation:hover { opacity: .9; }

.ip-annotation-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 220px;
  max-width: 320px;
  font-size: 13px;
  font-style: normal;
  color: #e2e8f0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  white-space: normal;
  line-height: 1.5;
  display: block;
  text-align: left;
}
.ip-annotation:hover .ip-annotation-tooltip { opacity: 1; }
.ip-annotation-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e293b;
}
.ip-tooltip-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #f59e0b;
  margin-bottom: 4px;
}
.ip-tooltip-issue {
  display: block;
  color: #fca5a5;
  margin-bottom: 8px;
  font-size: 13px;
}
.ip-tooltip-fix-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #86efac;
  margin-bottom: 3px;
}
.ip-tooltip-fix {
  display: block;
  color: #bbf7d0;
  font-size: 13px;
}

/* Mode-aware sidebar visibility. Both sidebars share the same .jj-sidebar
   visual shell but have different nav content:
     - JH mode  → show #jjSidebar (workspace/tools/prepare/account)
     - Pro mode → show #rrSidebar (pro tools)
   Both are position:fixed left:0 top:58px width:240px. */
body.rr-mode-jh nav.jj-sidebar#jjSidebar { display: flex !important; }
body.rr-mode-pro nav.jj-sidebar#jjSidebar { display: none !important; }

body.rr-mode-jh #rrSidebar { display: none !important; }
body.rr-mode-pro #rrSidebar { display: flex !important; }

/* Professional/Job Hunter mode toggle hidden (app pivoted to JH). Markup + handlers preserved. */
#rrModeTabs { display: none !important; }

/* Never show either sidebar when the user is not on the app view */
#app:not(.active) nav.jj-sidebar#jjSidebar,
#app:not(.active) #rrSidebar { display: none !important; }


/* ═══ Sidebar layout fix (width + ellipsis) ═══ */
#jjSidebar {
  overflow-x: hidden !important;
  width: 240px !important;
  min-width: 240px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.jj-sidebar-nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.jj-sb-item, .jj-sidebar-item {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex !important;
  align-items: center;
}
.jj-sb-item > *, .jj-sidebar-item > * {
  min-width: 0;
}
.jj-sb-section, .jj-sidebar-section-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  box-sizing: border-box;
}

/* Fix sidebar profile overflow */
.jj-sidebar-profile {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
  min-width: 0;
}
.jj-sidebar-profile > * {
  min-width: 0;
  overflow: hidden;
}
.jj-profile-name, .jj-profile-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.jj-sidebar-stats {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

/* ═══ Sidebar, fixed-positioned (Pattern B) ═══
   Rendered outside .jj-root flex flow. #jobhunterView gets padding-left:240px
   (in the rule block above) to reserve horizontal space so content starts at
   x=240 and the sidebar never overlays it. Leak-proofed via #app:not(.active)
   hide rule at line 34940. */
#jjSidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 240px !important;
  z-index: 90;
  box-sizing: border-box;
  background: var(--surface2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  flex-direction: column;
}
#jjSidebar::-webkit-scrollbar { width: 4px; }
#jjSidebar::-webkit-scrollbar-track { background: transparent; }
#jjSidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* Full-height rail owns the top-left: the header spans only the content column
   to the right of the 240px rail (JH mode only; Pro layout untouched). On mobile
   (max-width 880px) the header is already hidden and the rail collapses. */
body.rr-mode-jh .rr-header { display: none; }
/* Belt-and-braces: the legacy .rr-header (Pro/Job Hunter mode tabs + account
   button) is deprecated chrome. Hide it whenever the app shell is on, so it can
   never leak as a white strip over the app on any entry path, even if a stray
   rr-mode-pro state ever slips through. The JH shell's own header/rail owns the
   top; the account menu lives in the JH sidebar, so nothing is lost. */
body.rr-shell-on .rr-header { display: none !important; }
/* Retire pro as a user-routable mode: hide its mode-switcher entry. (The whole
   .rr-header above is already hidden; this is explicit belt-and-braces so the
   Pro tab is unreachable even if the header is ever shown.) The pro/cold-email
   code stays in place, re-entry for owner use only, via the browser console:
   rrSwitchMode('pro') after signing in (session-only; boot/sign-in reset to jh). */
#rrTabPro { display: none !important; }
@media (max-width: 880px) { body.rr-mode-jh .rr-header { margin-left: 0; } }
/* Header is collapsed in JH; the trial notice becomes the topmost block, so
   offset it into the content column (right of the 272px rail). */
body.rr-mode-jh #rrTrialBanner { margin-left: 272px; }
@media (max-width: 880px) { body.rr-mode-jh #rrTrialBanner { margin-left: 0; } }

/* Dismissible banner class (paired with localStorage flag) */
.rr-banner--hidden { display: none; }

/* ===== Unified page header (applies to every page) ===== */

.jj-page-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 28px 20px;
  margin: 0;
}


.jj-page-head-text {
  flex: 1;
  min-width: 0;
}

.jj-page-head .jj-page-title,
.jj-page-head .jj-greeting,
.jj-page-head-text .jj-page-title,
.jj-page-head-text .jj-greeting {
  margin: 0;
  font: 700 32px/1.1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
  color: var(--text, #EEF0EF);
}

.jj-page-head .jj-page-title em,
.jj-page-head .jj-greeting em {
  font-style: normal;
  font-weight: 700;
  color: #2448FF;
  background: none;
}

.jj-page-head .jj-page-sub,
.jj-page-head .jj-greeting-sub,
.jj-page-head-text .jj-page-sub,
.jj-page-head-text .jj-greeting-sub {
  margin: 4px 0 0;
  font: 400 14px/1.4 'Plus Jakarta Sans', sans-serif;
  color: var(--fg-dim, rgba(238,240,239,0.72));
}

.jj-page-head-action {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text, #EEF0EF);
  font: 500 13px/1 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.jj-page-head-action:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Responsive: on narrow viewports, stack the action below */
@media (max-width: 640px) {
  .jj-page-head { flex-wrap: wrap; }
  .jj-page-head-action {
    margin-left: 58px;
    margin-top: 8px;
    align-self: flex-start;
  }
}

/* Light-mode overrides, apply to any .jj-page-head on any page */
.jj-page-head .jj-page-title,
.jj-page-head .jj-greeting,
.jj-page-head-text .jj-page-title,
.jj-page-head-text .jj-greeting {
  color: #1A1614;
}
.jj-page-head .jj-page-sub,
.jj-page-head .jj-greeting-sub,
.jj-page-head-text .jj-page-sub,
.jj-page-head-text .jj-greeting-sub {
  color: rgba(26, 22, 20, 0.68);
}
.jj-page-head-action {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
  color: #1A1614;
}
.jj-page-head-action:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* ===== i18n / RTL support ===== */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .jj-sidebar { right: 0; left: auto; }
html[dir="rtl"] .jj-main { margin-right: 272px; margin-left: 0; }
html[dir="rtl"] .jj-page-head { flex-direction: row-reverse; }
html[dir="rtl"] .jj-page-head-text { text-align: right; }
html[dir="rtl"] .jj-sidebar-item svg { transform: scaleX(-1); }
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; }

html[lang="ar"], html[lang="ur"] { font-family: 'Noto Sans Arabic', 'DM Sans', system-ui, sans-serif; }
html[lang="zh-Hans"], html[lang="zh-Hant"] { font-family: 'Noto Sans SC', 'PingFang SC', 'DM Sans', system-ui, sans-serif; }
html[lang="hi"] { font-family: 'Noto Sans Devanagari', 'DM Sans', system-ui, sans-serif; }

.rr-lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text, #EEF0EF);
  font: 500 13px/1 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.rr-lang-switcher:hover { background: rgba(255,255,255,0.08); }
.rr-lang-switcher-flag { font-size: 16px; }
.rr-lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 200px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--bg-elevated, #1a1614);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  padding: 6px;
  display: none;
  z-index: 1000;
}
.rr-lang-menu.open { display: block; }
.rr-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: 400 13px/1.3 'DM Sans', sans-serif;
  color: var(--text, #EEF0EF);
}
.rr-lang-option:hover { background: rgba(255,255,255,0.06); }
.rr-lang-option.active { background: rgba(96, 165, 250, 0.15); color: #60A5FA; font-weight: 500; }
.rr-lang-option-flag { font-size: 18px; }
.rr-lang-option-native { opacity: 0.6; margin-left: auto; font-size: 11px; }
html[dir="rtl"] .rr-lang-menu { right: auto; left: 0; }
html[dir="rtl"] .rr-lang-option-native { margin-left: 0; margin-right: auto; }

.rr-lang-switcher {
  background: #ffffff;
  border-color: rgba(0,0,0,0.10);
  color: #1A1614;
}
.rr-lang-switcher:hover { background: rgba(0,0,0,0.04); }
.rr-lang-menu {
  background: #ffffff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.rr-lang-option { color: #1A1614; }
.rr-lang-option:hover { background: rgba(0,0,0,0.04); }

/* ===== Paywall + trial banner + plan badge ===== */
.rr-paywall-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 2, 16, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}
.rr-paywall-overlay.open { display: flex; }
.rr-paywall-modal {
  width: 100%;
  max-width: 720px;
  background: var(--bg-elevated, #1a1614);
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.25);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
}
.rr-paywall-modal { background: #ffffff; border-color: rgba(0, 0, 0, 0.10); }
.rr-paywall-head { padding: 28px 28px 18px; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rr-paywall-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: none; color: var(--text, #EEF0EF); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rr-paywall-close:hover { background: rgba(255, 255, 255, 0.10); }
.rr-paywall-title { font: 700 22px/1.2 'DM Sans', sans-serif; margin: 0 0 6px; }
.rr-paywall-sub { font: 400 14px/1.5 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.72)); margin: 0; }
.rr-paywall-tiers { padding: 24px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rr-paywall-tier { padding: 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.02); position: relative; cursor: pointer; transition: all 0.2s; }
.rr-paywall-tier:hover { border-color: rgba(167, 139, 250, 0.5); background: rgba(167, 139, 250, 0.05); }
.rr-paywall-tier.featured { border-color: #A78BFA; background: rgba(167, 139, 250, 0.08); }
.rr-paywall-tier.featured::before { content: 'MOST POPULAR'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #A78BFA; color: #0A0418; font: 700 10px/1 'DM Sans', sans-serif; letter-spacing: 0.12em; padding: 5px 10px; border-radius: 6px; }
.rr-paywall-tier-name { font: 600 14px/1.2 'DM Sans', sans-serif; margin: 0 0 8px; color: var(--text, #EEF0EF); }
.rr-paywall-tier-price { font: 700 28px/1 'DM Sans', sans-serif; margin: 0 0 4px; color: var(--text, #EEF0EF); }
.rr-paywall-tier-price-unit { font-size: 13px; font-weight: 400; color: var(--fg-dim, rgba(238, 240, 239, 0.6)); }
.rr-paywall-tier-anchor { font: 400 12px/1.2 'DM Sans', sans-serif; color: rgba(167, 139, 250, 0.9); margin: 0 0 12px; }
.rr-paywall-tier-features { margin: 12px 0 0; padding: 0; list-style: none; }
.rr-paywall-tier-features li { font: 400 13px/1.5 'DM Sans', sans-serif; color: var(--text, #EEF0EF); padding-left: 20px; position: relative; margin-bottom: 6px; }
.rr-paywall-tier-features li::before { content: ''; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5L5 9l4.5-5' stroke='%23A78BFA' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; background-size: 12px; }
.rr-paywall-cta { width: 100%; padding: 12px; margin-top: 16px; border-radius: 10px; border: none; font: 600 14px/1 'DM Sans', sans-serif; cursor: pointer; transition: all 0.2s; }
.rr-paywall-tier .rr-paywall-cta { background: rgba(255, 255, 255, 0.08); color: var(--text, #EEF0EF); }
.rr-paywall-tier.featured .rr-paywall-cta { background: linear-gradient(135deg, #A78BFA, #8B5CF6); color: #ffffff; }
.rr-paywall-cta:hover { transform: translateY(-1px); }
.rr-paywall-foot { padding: 16px 28px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.rr-paywall-billing-toggle { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 'DM Sans', sans-serif; }
.rr-paywall-billing-toggle button { padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.10); background: transparent; color: var(--fg-dim, rgba(238, 240, 239, 0.7)); cursor: pointer; font: 500 12px/1 'DM Sans', sans-serif; }
.rr-paywall-billing-toggle button.active { background: rgba(167, 139, 250, 0.15); border-color: #A78BFA; color: var(--text, #EEF0EF); }
.rr-paywall-guarantee { font: 400 12px/1.4 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.55)); }
@media (max-width: 640px) { .rr-paywall-tiers { grid-template-columns: 1fr; } }
/* ═══ Pass 9 (Apollo cream): Paywall / upgrade modal onto the cream layer.
   EVERY rule is prefixed with .rr-paywall-overlay (specificity +1) so it wins
   over the dark-era base above without !important. The RED GATE (.jh-red-gate-
   modal / .jh-rg-*) shares NO class and NO rule with the paywall, so it is
   untouched by construction (proven at runtime). The D-decision lands here: the
   featured tier's CTA is the ONE true primary, yellow #e5ff00 on #111; the
   other tier's CTA is a transparent hairline secondary. Purple (#A78BFA family)
   -> brand blue; DM Sans -> Plus Jakarta; title -> Fraunces. Aliasing --text/
   --fg-dim on the overlay also fixes the undefined-dim-text (invisible on white)
   bug. Stripe hrefs/handlers untouched, presentation only. */
.rr-paywall-overlay{ --text:var(--ap-ink); --fg-dim:var(--ap-ink-2); }
.rr-paywall-overlay .rr-paywall-modal{ background:var(--ap-card); border-color:var(--ap-hair); }
.rr-paywall-overlay .rr-paywall-head{ border-bottom-color:var(--ap-hair); }
.rr-paywall-overlay .rr-paywall-foot{ border-top-color:var(--ap-hair); }
.rr-paywall-overlay .rr-paywall-close{ background:var(--ap-bg-2); color:var(--ap-ink-3); }
.rr-paywall-overlay .rr-paywall-close:hover{ background:var(--ap-hair); }
.rr-paywall-overlay .rr-paywall-title{ font-family:var(--ap-display); letter-spacing:-0.02em; color:var(--ap-ink); }
.rr-paywall-overlay .rr-paywall-sub,
.rr-paywall-overlay .rr-paywall-tier-name,
.rr-paywall-overlay .rr-paywall-tier-price,
.rr-paywall-overlay .rr-paywall-tier-price-unit,
.rr-paywall-overlay .rr-paywall-tier-anchor,
.rr-paywall-overlay .rr-paywall-tier-features li,
.rr-paywall-overlay .rr-paywall-cta,
.rr-paywall-overlay .rr-paywall-billing-toggle,
.rr-paywall-overlay .rr-paywall-billing-toggle button,
.rr-paywall-overlay .rr-paywall-guarantee{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
.rr-paywall-overlay .rr-paywall-tier{ border-color:var(--ap-hair); background:var(--ap-bg-2); }
.rr-paywall-overlay .rr-paywall-tier:hover{ border-color:var(--ap-accent-border); background:var(--ap-accent-tint); }
.rr-paywall-overlay .rr-paywall-tier.featured{ border-color:var(--ap-accent); background:var(--ap-accent-tint); }
.rr-paywall-overlay .rr-paywall-tier.featured::before{ background:var(--ap-accent); color:#fff; font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
.rr-paywall-overlay .rr-paywall-tier-anchor{ color:var(--ap-ink-3); }
.rr-paywall-overlay .rr-paywall-billing-toggle button{ border-color:var(--ap-hair); }
.rr-paywall-overlay .rr-paywall-tier-features li::before{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5L5 9l4.5-5' stroke='%232448FF' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; background-size:12px; }
/* Secondary (non-featured) tier CTA: transparent + hairline (landing secondary). */
.rr-paywall-overlay .rr-paywall-tier .rr-paywall-cta{ background:transparent; color:var(--ap-ink); border:1px solid var(--ap-hair-strong); }
.rr-paywall-overlay .rr-paywall-tier .rr-paywall-cta:hover{ background:var(--ap-bg-2); }
/* PRIMARY CTA (featured tier), the one true primary: yellow fill, #111 text. */
.rr-paywall-overlay .rr-paywall-tier.featured .rr-paywall-cta{ background:var(--ap-cta); color:var(--ap-cta-ink); border:none; }
.rr-paywall-overlay .rr-paywall-tier.featured .rr-paywall-cta:hover{ background:#d6ef00; }
.rr-paywall-overlay .rr-paywall-billing-toggle button.active{ background:var(--ap-accent-tint); border-color:var(--ap-accent); color:var(--ap-ink); }
.rr-paywall-overlay .rr-paywall-cta:focus-visible,
.rr-paywall-overlay .rr-paywall-close:focus-visible,
.rr-paywall-overlay .rr-paywall-billing-toggle button:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(36,72,255,.16); }
/* Phase 2 mobile slice 1: phone-fit generic modals and overlays. Additive
   max-width media queries only; no base rule is changed and nothing targets
   desktop widths. The cover-letter gate (#jhClExportModal) and placeholder
   (#jhClPlaceholderModal) modals are deliberately not referenced here. */
@media (max-width:480px){
  /* jj-modal already becomes a full-width bottom sheet at 600; ease the padding. */
  .jj-modal{padding:16px}
  /* delete and quick-action modals fit already (overlay has 20px); trim padding. */
  .ap-delete-modal{padding:18px 18px 16px}
  #jjPage_apps .ap-qa-modal{padding:22px 18px}
  #jjPage_apps .ap-qa-title{font-size:26px}
  #jjPage_apps .ap-paste-panel{padding:14px}
  /* Stage control wraps to a 2-3 column grid of the same joined cells rather
     than a single squeezed row; labels never drop below 11px. */
  #jjPage_apps .ap-qa-stage-group{flex-wrap:wrap}
  #jjPage_apps .ap-qa-stage-cell{flex:1 1 33.333%; font-size:11px; padding:13px 4px; border-bottom:1px solid #C9C6BC}
  #jjPage_apps .ap-qa-stage-cell:nth-last-child(1), #jjPage_apps .ap-qa-stage-cell:nth-last-child(2){border-bottom:none}
  /* paywall: lighter head and tier padding, larger close tap target. */
  .rr-paywall-head{padding:20px 18px 14px}
  .rr-paywall-tiers{padding:16px 18px;gap:12px}
  .rr-paywall-tier{padding:16px}
  .rr-paywall-close{width:40px;height:40px}
  /* new-cover-letter overlay: reduce outer and inner padding so the card fits. */
  #clNewOverlay{padding:16px 12px}
  #clNewOverlay .cl-new-head{padding:18px 18px 14px}
  #clNewOverlay .cl-new-body{padding:4px 18px 8px}
  #clNewOverlay .cl-new-foot{padding:14px 18px 18px}
  #clNewOverlay .cl-new-pill{padding:7px 12px}
}
@media (max-width:360px){
  /* tightest phones: trim overlay padding further so the wider modals still fit. */
  #clNewOverlay{padding:10px 8px}
  .rr-paywall-head{padding:16px 14px 12px}
  .rr-paywall-tiers{padding:14px}
}
/* Phase 2 mobile slice 2: contain the kanban board scroll and stack the
   dashboard stat row at phone widths. Additive max-width media query only;
   no base rule changed, nothing targets desktop. */
@media (max-width:480px){
  /* Kanban: hold usable 240px columns and scroll horizontally INSIDE the board.
     .jj-kanban is a block-level grid that fills its parent, so max-width:100%
     plus overflow-x:auto keep the scroll contained and stop the page scrolling
     sideways. (The base 768px rule already added -webkit-overflow-scrolling.) */
  .jj-kanban{grid-template-columns:repeat(6,240px);max-width:100%;overflow-x:auto}
  /* Dashboard stat cards stack one per row. */
  .jj-stat-row{grid-template-columns:1fr}
}
/* Phase 2 mobile slice 3: scale the interview-report header type and cards at
   phone widths. Additive max-width media query only; no base rule changed,
   nothing targets desktop. The hero row already wraps (flex-wrap) and the 132px
   donut fits a 360 screen, so only the oversized type, the loading card width,
   and the hero gap/padding are touched. */
@media (max-width:480px){
  /* Loading card: never wider than the viewport, lighter padding. */
  .icr-ld-card{max-width:100%;padding:18px 16px 14px}
  /* Hero row: tighten the gap and padding for the stacked phone layout. */
  #icReportBody .icr-hero{gap:16px;padding:18px 16px}
  /* Oversized header type scaled down to fit phones legibly. */
  #icReportBody .icr-score{font-size:34px}
  #icReportBody .icr-verdict{font-size:22px}
}
/* Phase 2 mobile slice 4: phone-fit the anchored dropdowns so they can never
   overflow a narrow viewport. Additive max-width media query only; no base rule
   changed, nothing targets desktop, no drawer z-index changed, no slide JS
   touched. .history-drawer is intentionally NOT here: it already becomes
   full-width at <=768 (right:-100% hides it fully, dismiss via its close button,
   no backdrop overlay), so it is already phone-fit; narrowing it to a sliver
   would leave a non-dismissable gap. */
@media (max-width:480px){
  /* App-nav menu: never wider than the viewport. */
  .app-nav-drawer{max-width:calc(100vw - 24px)}
  /* Account dropdowns: cap width so they stay inside the viewport edges. */
  .rr-account-dropdown{max-width:calc(100vw - 24px)}
  .jj-rail-acct-menu{max-width:calc(100vw - 16px)}
}
/* Phase 2 mobile slice 5 (final): bump tap targets on interview icon buttons and
   generic modal close buttons to ~44px, and trim the landing below-stamp padding
   at 360. Additive max-width media queries only; no base rule changed, nothing
   targets desktop. The gate (#jhClExportModal) and placeholder
   (#jhClPlaceholderModal) buttons are built in JS with inline styles and ids, so
   they are not class-targetable here and are deliberately untouched. The landing
   hero is already full-bleed (horizontal padding 0) at <=1100, so it is not
   touched; legal pages are separate .html files, outside this file. */
@media (max-width:480px){
  /* Interview icon buttons: 44px tap target, icon centred. */
  .rr-vi-live__icon-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* Generic modal and drawer close buttons: 44px minimum (gate/placeholder excluded). */
  .ap-modal-close{min-width:44px;min-height:44px}
  .ap-qa-close{min-width:44px;min-height:44px}
  .rr-paywall-close{width:44px;height:44px}
  .cl-new-x{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .history-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:360px){
  /* Landing below-stamp: trim the 48px side padding so the caption is not crowded. */
  .lpv3-root .below{padding-left:20px;padding-right:20px}
}

.rr-trial-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.15), rgba(139, 92, 246, 0.1));
  border-bottom: 1px solid rgba(167, 139, 250, 0.25);
  font: 500 13px/1 'DM Sans', sans-serif;
  color: var(--text, #EEF0EF);
  flex-wrap: wrap;
}
.rr-trial-banner-icon { font-size: 14px; }
.rr-trial-banner-cta { padding: 6px 14px; background: #A78BFA; color: #0A0418; border: none; border-radius: 6px; font: 600 12px/1 'DM Sans', sans-serif; cursor: pointer; }
.rr-trial-banner-cta:hover { background: #8B5CF6; }
.rr-trial-banner-close { background: transparent; border: none; color: var(--fg-dim, rgba(238, 240, 239, 0.6)); cursor: pointer; font-size: 14px; padding: 4px 8px; }
.rr-trial-banner.urgent { background: linear-gradient(90deg, rgba(236, 72, 153, 0.2), rgba(167, 139, 250, 0.15)); border-color: rgba(236, 72, 153, 0.4); }

.rr-plan-badge { margin: 6px 12px 12px; padding: 8px 12px; border-radius: 8px; background: rgba(167, 139, 250, 0.10); border: 1px solid rgba(167, 139, 250, 0.25); font: 500 12px/1.3 'DM Sans', sans-serif; color: var(--text, #EEF0EF); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: all 0.15s; }
.rr-plan-badge:hover { background: rgba(167, 139, 250, 0.15); border-color: rgba(167, 139, 250, 0.45); }
.rr-plan-badge.free { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); }
.rr-plan-badge.paid { background: linear-gradient(135deg, rgba(167,139,250,0.2), rgba(139,92,246,0.12)); border-color: #A78BFA; }
#rrPlanBadgeSub { font-size: 11px; opacity: 0.7; font-weight: 400; }

/* ===== Onboarding wizard ===== */
.rr-ob-overlay { position: fixed; inset: 0; background: rgba(5, 2, 16, 0.85); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 10001; padding: 20px; }
.rr-ob-overlay.open { display: flex; }
.rr-ob-modal { width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; padding: 32px 28px; background: var(--bg-elevated, #1a1614); border-radius: 16px; border: 1px solid rgba(167, 139, 250, 0.3); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.rr-ob-modal { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); }
.rr-ob-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.rr-ob-progress-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); transition: all 0.3s; }
.rr-ob-progress-dot.active { background: #A78BFA; width: 24px; border-radius: 4px; }
.rr-ob-progress-dot.done { background: rgba(167, 139, 250, 0.6); }
.rr-ob-step h2 { font: 700 26px/1.2 'DM Sans', sans-serif; margin: 0 0 8px; text-align: center; }
.rr-ob-step > p { font: 400 14px/1.5 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.65)); text-align: center; margin: 0 0 24px; }
.rr-ob-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rr-ob-cards-compact { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rr-ob-card { padding: 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.02); color: var(--text, #EEF0EF); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; cursor: pointer; transition: all 0.15s; text-align: left; }
.rr-ob-card:hover { border-color: rgba(167, 139, 250, 0.6); background: rgba(167, 139, 250, 0.06); transform: translateY(-1px); }
.rr-ob-card-emoji { font-size: 24px; }
.rr-ob-card-title { font: 600 14px/1.3 'DM Sans', sans-serif; }
.rr-ob-card-sub { font: 400 12px/1.4 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.6)); }
.rr-ob-cards-compact .rr-ob-card { flex-direction: row; align-items: center; padding: 12px; font: 500 14px/1 'DM Sans', sans-serif; gap: 10px; }
.rr-ob-cards-compact .rr-ob-card span:first-child { font-size: 20px; }
.rr-ob-input { width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); color: var(--text, #EEF0EF); font: 400 15px/1 'DM Sans', sans-serif; margin-bottom: 14px; }
.rr-ob-input:focus { outline: none; border-color: #A78BFA; background: rgba(167, 139, 250, 0.06); }
.rr-ob-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.rr-ob-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); color: var(--text, #EEF0EF); font: 400 12px/1 'DM Sans', sans-serif; cursor: pointer; }
.rr-ob-chip:hover { border-color: #A78BFA; background: rgba(167, 139, 250, 0.10); }
.rr-ob-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.rr-ob-back, .rr-ob-next { padding: 12px 20px; border-radius: 10px; border: none; font: 600 14px/1 'DM Sans', sans-serif; cursor: pointer; flex: 1; }
.rr-ob-modal { position: relative; }
.rr-ob-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; padding: 0; border: none; background: none; color: var(--text3); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 8px; transition: all 0.15s; }
.rr-ob-close:hover { background: var(--surface2); color: var(--text); }
.rr-ob-skip { display: block; margin: 18px auto 0; padding: 6px 12px; background: none; border: none; color: var(--text3); font: 500 13px/1 'DM Sans', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rr-ob-skip:hover { color: var(--text); }
.rr-ob-back { background: rgba(255, 255, 255, 0.06); color: var(--text, #EEF0EF); }
.rr-ob-next { background: #A78BFA; color: #0A0418; }
.rr-ob-next:disabled { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 520px) { .rr-ob-cards, .rr-ob-cards-compact { grid-template-columns: 1fr; } }

/* ===== Prompt 24: light-mode readability fixes for onboarding.
   Dark-mode CSS hardcodes fg-dim to rgba(238,240,239,0.65) which is an off-white
   that goes near-invisible on the light-theme white card backgrounds. Override
   to the light-theme text colour (rgba(26,22,20,*)) with !important because the
   :root vars on .rr-ob-* rules win on specificity otherwise. ===== */
#rrObOverlay .rr-ob-step > p,
#rrObOverlay .rr-ob-card p,
#rrObOverlay .rr-ob-subtitle,
#rrObOverlay .rr-ob-sub,
#rrObOverlay p:not(.rr-ob-title):not(.rr-ob-heading) {
  color: rgba(26, 22, 20, 0.68) !important;
}

#rrObOverlay .rr-ob-card-sub,
#rrObOverlay .rr-ob-option-sub,
#rrObOverlay [class*="option-sub"],
#rrObOverlay [class*="option-desc"] {
  color: rgba(26, 22, 20, 0.6) !important;
}

#rrObOverlay input::placeholder,
#rrObOverlay textarea::placeholder {
  color: rgba(26, 22, 20, 0.45) !important;
  opacity: 1;
}

#rrObOverlay .rr-ob-chip,
#rrObOverlay [class*="quick-pick"],
#rrObOverlay [class*="chip"],
#rrObOverlay [class*="suggestion"] {
  color: #1A1614 !important;
  background: rgba(109, 40, 217, 0.06);
  border: 1px solid rgba(109, 40, 217, 0.2);
}

#rrObOverlay .rr-ob-cta:disabled,
#rrObOverlay .rr-ob-next:disabled,
#rrObOverlay button:disabled {
  color: rgba(26, 22, 20, 0.35) !important;
  background: rgba(109, 40, 217, 0.1);
}

/* ===== Empty-state first-action grid ===== */
.rr-empty-first-action { padding: 28px 24px; text-align: center; }
.rr-empty-ico { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: var(--rr-radius); background: var(--rr-accent-tint); color: var(--rr-accent); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.rr-empty-first-action h3 { font: 600 20px/1.3 var(--rr-font-display); color: var(--rr-ink); margin: 0 0 4px; }
.rr-empty-sub { font: 400 13.5px/1.5 var(--rr-font-body); color: var(--rr-ink-muted); margin: 0 0 18px; }
.rr-empty-action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 600px; margin: 0 auto; }
.rr-empty-action { padding: 16px 14px; border-radius: var(--rr-radius-sm); border: 1px solid var(--rr-accent-border); background: var(--rr-accent-tint); text-align: left; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: 4px; }
.rr-empty-action:hover { background: var(--rr-accent-tint-2); transform: translateY(-2px); }
.rr-empty-action span { font: 700 18px/1 var(--rr-font-body); color: var(--rr-accent-strong); }
.rr-empty-action strong { font: 600 14px/1.2 var(--rr-font-body); color: var(--rr-ink); }
.rr-empty-action small { font: 400 12px/1.3 var(--rr-font-body); color: var(--rr-ink-muted); }
@media (max-width: 640px) { .rr-empty-action-grid { grid-template-columns: 1fr; } }

/* ===== Testimonials ===== */
.rr-social-proof { padding: 60px 24px; background: rgba(255, 255, 255, 0.02); }
.rr-social-proof-header { text-align: center; max-width: 600px; margin: 0 auto 40px; }
.rr-social-proof-header h2 { font: 700 28px/1.2 'DM Sans', sans-serif; margin: 0 0 8px; }
.rr-social-proof-header p { font: 400 15px/1.5 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.65)); margin: 0; }
.rr-testimonials { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rr-testimonial { padding: 24px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 16px; }
.rr-testimonial-quote { font: 400 15px/1.55 'DM Sans', sans-serif; color: var(--text, #EEF0EF); }
.rr-testimonial-author { display: flex; gap: 12px; align-items: center; }
.rr-testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #A78BFA, #8B5CF6); color: #0A0418; display: flex; align-items: center; justify-content: center; font: 600 14px/1 'DM Sans', sans-serif; }
.rr-testimonial-name { font: 600 14px/1.2 'DM Sans', sans-serif; }
.rr-testimonial-flag { font-size: 14px; margin-left: 4px; }
.rr-testimonial-role { font: 400 12px/1.3 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.6)); margin-top: 2px; }
@media (max-width: 900px) { .rr-testimonials { grid-template-columns: 1fr; } }

/* ===== Payment methods row ===== */
.rr-pay-methods { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 400 11px/1 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.6)); margin-top: 10px; width: 100%; }
.rr-pay-methods-label { font-weight: 500; }
.rr-pay-icon { padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); }

/* ===== Landing-page language switcher pill ===== */
.rr-landing-lang { position: absolute; top: 16px; right: 16px; display: inline-flex; background: rgba(255, 255, 255, 0.05); border-radius: 999px; padding: 3px; z-index: 10; }
.rr-landing-lang-pill { background: transparent; border: none; padding: 6px 12px; border-radius: 999px; color: var(--text, #EEF0EF); font: 500 13px/1 'DM Sans', sans-serif; cursor: pointer; }
.rr-landing-lang-pill.active { background: #A78BFA; color: #0A0418; }

/* ===== Pricing page ===== */
#jjPage_pricing .jj-page-body { padding: 20px 28px 60px; max-width: 1100px; margin: 0 auto; }
/* The .pr-tier text colors below fall back to near-white --fg-dim values
   designed for a dark landing theme; inside the light in-app pricing page
   they rendered almost invisible (tier names, taglines, price units, and
   the guarantees row were all washed out). Pin them to readable ink here. */
#jjPage_pricing .pr-tier-name{ color: rgba(26,22,20,.75); }
#jjPage_pricing .pr-tier-tagline{ color: rgba(26,22,20,.6); }
#jjPage_pricing .pr-tier-price-unit{ color: rgba(26,22,20,.55); }
#jjPage_pricing .pr-guarantees{ color: rgba(26,22,20,.6); }
.pr-billing-toggle { display: inline-flex; margin: 0 auto 32px; background: rgba(255, 255, 255, 0.05); border-radius: 999px; padding: 4px; }
.pr-bill-btn { padding: 8px 18px; background: transparent; border: none; border-radius: 999px; color: var(--text, #EEF0EF); font: 500 13px/1 'DM Sans', sans-serif; cursor: pointer; }
.pr-bill-btn.active { background: #A78BFA; color: #0A0418; }
.pr-save-badge { margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: rgba(167, 139, 250, 0.3); font-size: 10px; color: #A78BFA; }
.pr-bill-btn.active .pr-save-badge { background: rgba(10, 4, 24, 0.2); color: #0A0418; }
.pr-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.pr-tier { padding: 28px 24px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); position: relative; display: flex; flex-direction: column; }
.pr-tier-featured { background: linear-gradient(180deg, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0.02)); border-color: #A78BFA; transform: scale(1.03); }
.pr-tier-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #A78BFA; color: #0A0418; font: 700 11px/1 'DM Sans', sans-serif; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 6px; }
.pr-tier-name { font: 600 14px/1 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.7)); margin-bottom: 8px; }
.pr-tier-price { display: flex; align-items: baseline; margin-bottom: 6px; }
.pr-tier-price-num { font: 700 44px/1 'DM Sans', sans-serif; }
.pr-tier-price-unit { font: 400 14px/1 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.6)); margin-left: 4px; }
.pr-tier-tagline { font: 400 13px/1.4 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.65)); margin-bottom: 20px; }
.pr-tier-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.pr-tier-features li { font: 400 13px/1.6 'DM Sans', sans-serif; padding-left: 22px; position: relative; margin-bottom: 4px; }
.pr-tier-features li::before { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7l3 3 5-6' stroke='%23A78BFA' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; }
.pr-tier-cta { width: 100%; padding: 12px 20px; border-radius: 10px; border: none; font: 600 14px/1 'DM Sans', sans-serif; cursor: pointer; background: rgba(255, 255, 255, 0.06); color: var(--text, #EEF0EF); }
.pr-tier-cta:hover { background: rgba(255, 255, 255, 0.10); }
.pr-tier-cta-featured { background: linear-gradient(135deg, #A78BFA, #8B5CF6); color: #fff; }
.pr-tier-cta-featured:hover { background: linear-gradient(135deg, #B59EFF, #9669F5); }
.pr-tier-cta-current { opacity: 0.5; cursor: not-allowed; }
.pr-guarantees { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; font: 500 13px/1 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.65)); }
.pr-faq { max-width: 760px; margin: 0 auto; }
.pr-faq h2 { font: 700 24px/1.2 'DM Sans', sans-serif; margin-bottom: 20px; text-align: center; }
.pr-faq-item { padding: 16px 18px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 8px; }
.pr-faq-item summary { font: 600 14px/1.3 'DM Sans', sans-serif; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pr-faq-item summary::after { content: '+'; font-size: 18px; color: var(--fg-dim, rgba(238, 240, 239, 0.6)); }
.pr-faq-item[open] summary::after { content: '−'; }
.pr-faq-item > div { margin-top: 12px; font: 400 13px/1.6 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238, 240, 239, 0.75)); }
@media (max-width: 860px) { .pr-tiers { grid-template-columns: 1fr; } .pr-tier-featured { transform: none; } }

/* ===== Upsell toast ===== */
.rr-upsell-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(10, 4, 24, 0.95); border: 1px solid rgba(167, 139, 250, 0.4); padding: 12px 16px; border-radius: 12px; color: var(--text, #EEF0EF); font: 500 13px/1.3 'DM Sans', sans-serif; display: flex; gap: 12px; align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); z-index: 9999; max-width: 90vw; }
.rr-upsell-toast button { background: #A78BFA; color: #0A0418; border: none; padding: 6px 10px; border-radius: 6px; font: 600 12px/1 'DM Sans', sans-serif; cursor: pointer; }
.rr-upsell-toast button:last-child { background: transparent; color: var(--fg-dim, rgba(238, 240, 239, 0.6)); padding: 4px 6px; }

/* ===== Interview Prep scoring-report error UI ===== */
.ic-report-error { padding: 48px 32px; text-align: center; max-width: 480px; margin: 0 auto; }
.ic-report-error-icon { font-size: 36px; margin-bottom: 16px; }
.ic-report-error-title { font: 600 18px/1.3 'DM Sans', sans-serif; margin-bottom: 8px; }
.ic-report-error-msg { font: 400 14px/1.5 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238,240,239,0.7)); margin-bottom: 24px; }
.ic-report-error-actions { display: flex; gap: 10px; justify-content: center; }

/* ===== Voice dropdown option backgrounds (native popup) ===== */
#jjPage_interview .ic-voice-select option,
#jjPage_interview select option,
.ic-voice-select option,
select.ic-bound-select option,
#icOrbVoiceSelect option {
  background-color: #1a1614;
  color: #EEF0EF;
}
#jjPage_interview .ic-voice-select option,
#jjPage_interview select option,
.ic-voice-select option,
select.ic-bound-select option,
#icOrbVoiceSelect option {
  background-color: #ffffff;
  color: #1A1614;
}

/* ===== How-it-works modal ===== */
.rr-howto-overlay { position: fixed; inset: 0; background: rgba(5, 2, 16, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 10002; padding: 20px; }
.rr-howto-overlay.open { display: flex; }
.rr-howto-modal { width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; padding: 32px 28px; background: var(--bg-elevated, #1a1614); border-radius: 16px; border: 1px solid rgba(167, 139, 250, 0.3); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); position: relative; }
.rr-howto-modal { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); }
.rr-howto-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: none; color: var(--text, #EEF0EF); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rr-howto-close:hover { background: rgba(255, 255, 255, 0.10); }
.rr-howto-title { font: 700 22px/1.2 'DM Sans', sans-serif; margin: 0 0 20px; }
.rr-howto-steps { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: rr-howto; }
.rr-howto-steps li { counter-increment: rr-howto; padding: 14px 14px 14px 48px; position: relative; border-radius: 10px; background: rgba(255, 255, 255, 0.03); margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.rr-howto-steps li::before { content: counter(rr-howto); position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: rgba(167, 139, 250, 0.18); color: #A78BFA; font: 600 13px/24px 'DM Sans', sans-serif; text-align: center; }
.rr-howto-steps li strong { font: 600 14px/1.3 'DM Sans', sans-serif; }
.rr-howto-steps li span { font: 400 13px/1.5 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238,240,239,0.7)); }
.rr-howto-cta { width: 100%; padding: 12px; border-radius: 10px; border: none; background: linear-gradient(135deg, #A78BFA, #8B5CF6); color: #fff; font: 600 14px/1 'DM Sans', sans-serif; cursor: pointer; }
.rr-howto-cta:hover { opacity: 0.92; }

/* ===== Interview setup: difficulty + focus-area controls + live chips ===== */
.ic-difficulty-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.ic-diff-pill { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: var(--text, #EEF0EF); font: 500 13px/1 'DM Sans', sans-serif; cursor: pointer; transition: all 0.15s; }
.ic-diff-pill:hover { border-color: rgba(167,139,250,0.5); background: rgba(167,139,250,0.08); }
.ic-diff-pill.active { border-color: #A78BFA; background: rgba(167,139,250,0.18); color: #C4B5FD; }
.ic-focus-input { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: var(--text, #EEF0EF); font: 400 13px/1.4 'DM Sans', sans-serif; }
.ic-focus-input:focus { outline: none; border-color: #A78BFA; background: rgba(167,139,250,0.05); }
.ic-focus-row { flex-direction: column; align-items: stretch; gap: 8px; }
.ic-diff-pill { background: #ffffff; border-color: rgba(0,0,0,0.1); color: #1A1614; }
.ic-diff-pill.active { background: rgba(167,139,250,0.12); border-color: #8B5CF6; color: #6D28D9; }
.ic-focus-input { background: #ffffff; border-color: rgba(0,0,0,0.1); color: #1A1614; }

.ic-live-chips { display: flex; gap: 6px; }
.ic-live-chip { padding: 3px 8px; border-radius: 4px; background: rgba(167,139,250,0.12); border: 0.5px solid rgba(167,139,250,0.3); color: #C4B5FD; font: 500 10px/1.2 var(--font-mono, ui-monospace, monospace); letter-spacing: 0.08em; text-transform: uppercase; }

/* ===== Session-length 4-pill control ===== */
.ic-bound-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1; }
.ic-bound-pill { padding: 14px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: var(--text, #EEF0EF); cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ic-bound-pill:hover { border-color: rgba(167,139,250,0.5); background: rgba(167,139,250,0.06); }
.ic-bound-pill.active { border-color: #A78BFA; background: rgba(167,139,250,0.14); }
.ic-bound-pill-n { font: 700 22px/1 'DM Sans', sans-serif; color: var(--text, #EEF0EF); }
.ic-bound-pill.active .ic-bound-pill-n { color: #C4B5FD; }
.ic-bound-pill-sub { font: 400 11px/1.3 'DM Sans', sans-serif; color: var(--fg-dim, rgba(238,240,239,0.55)); }
.ic-bound-pill { background: #ffffff; border-color: rgba(0,0,0,0.08); color: #1A1614; }
.ic-bound-pill.active { border-color: #8B5CF6; background: rgba(167,139,250,0.10); }
.ic-bound-pill.active .ic-bound-pill-n { color: #6D28D9; }
@media (max-width: 640px) { .ic-bound-pills { grid-template-columns: repeat(2, 1fr); } }

/* ===== Scoring report (rebuilt in Prompt 11, fixed in Prompt 12) ===== */
#icReportBody { padding: 24px 28px calc(48px + var(--rr-cookie-h, 0px)); max-width: 1600px; margin: 0; }
.ic-progress-card {
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  margin: 0 0 20px auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
}
.ic-section-head-with-hint { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ic-section-head-title { /* inline; inherits font from .ic-section-head */ }
.ic-hero-progress-label { font: 500 12px/1 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.65)); margin-bottom: 10px; letter-spacing: 0.02em; }
.ic-hero-scores { display: flex; gap: 18px; align-items: center; }
.ic-hero-score-cell { display: flex; flex-direction: column; gap: 4px; }
.ic-hero-score-label { font: 400 11px/1 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.55)); }
.ic-hero-score-val { font: 700 22px/1 var(--rr-font-body); }
.ic-hero-score-current { color: #A78BFA; }
.ic-hero-up { color: #10B981; font-weight: 700; }
.ic-hero-down { color: #EF4444; font-weight: 700; }
.ic-hero-flat { color: #9CA3AF; }
.ic-hero-spark { margin-left: auto; }

.ic-headline { display: flex; justify-content: space-between; gap: 32px; padding: 28px 32px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; margin-bottom: 20px; }
.ic-headline-title { font: 700 24px/1.25 var(--rr-font-body); max-width: 560px; }
.ic-headline-sub { font: 400 14px/1.5 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.7)); margin-top: 8px; }
.ic-headline-score { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 160px; }
.ic-headline-score-label { font: 500 12px/1 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.6)); }
.ic-headline-score-number { font: 800 44px/1 var(--rr-font-body); }
.ic-headline-score-low { color: #F87171; }
.ic-headline-score-mid { color: #FBBF24; }
.ic-headline-score-high { color: #10B981; }
.ic-headline-score-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 500 11px/1.4 var(--rr-font-body); }
.ic-headline-score-badge-low { background: rgba(248,113,113,0.15); color: #F87171; }
.ic-headline-score-badge-mid { background: rgba(251,191,36,0.15); color: #FBBF24; }
.ic-headline-score-badge-high { background: rgba(16,185,129,0.15); color: #10B981; }
.ic-gauge { margin-top: 4px; }
.ic-info { font-size: 11px; opacity: 0.6; cursor: help; }

.ic-habits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.ic-habit { padding: 20px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 12px; }
.ic-habit-head { display: flex; gap: 14px; align-items: flex-start; }
.ic-habit-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic-habit-red .ic-habit-icon { background: rgba(248,113,113,0.12); }
.ic-habit-amber .ic-habit-icon { background: rgba(251,191,36,0.12); }
.ic-habit-violet .ic-habit-icon { background: rgba(167,139,250,0.14); }
.ic-habit-title { font: 600 15px/1.3 var(--rr-font-body); margin-bottom: 4px; }
.ic-habit-body { font: 400 13px/1.5 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.75)); }
.ic-habit-fix { font: 400 13px/1.5 var(--rr-font-body); color: var(--text, #EEF0EF); }
.ic-habit-fix-label { font-weight: 600; color: #FBBF24; }
.ic-habit-red .ic-habit-fix-label { color: #F87171; }
.ic-habit-amber .ic-habit-fix-label { color: #FBBF24; }
.ic-habit-violet .ic-habit-fix-label { color: #C4B5FD; }
.ic-habit-example-btn { align-self: flex-start; background: none; border: none; font: 500 13px/1 var(--rr-font-body); color: #F87171; cursor: pointer; padding: 0; }
.ic-habit-amber .ic-habit-example-btn { color: #FBBF24; }
.ic-habit-violet .ic-habit-example-btn { color: #C4B5FD; }
.ic-habit-example { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; display: flex; flex-direction: column; gap: 8px; }
.ic-habit-example[data-open="1"] { margin-top: 4px; }
.ic-habit-example-row { padding: 10px 12px; border-radius: 8px; font: 400 12px/1.5 var(--rr-font-body); }
.ic-habit-example-bad { background: rgba(248,113,113,0.08); border: 1px dashed rgba(248,113,113,0.3); }
.ic-habit-example-good { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.3); }
.ic-habit-example-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; margin-bottom: 4px; }

.ic-prio-block { margin-bottom: 24px; }
.ic-section-head { font: 700 15px/1 var(--rr-font-body); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ic-section-head-sub { font-size: 12px; font-weight: 400; opacity: 0.6; }
.ic-prio-list { border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.ic-prio-row { display: grid; grid-template-columns: 48px 1fr 280px 32px; gap: 16px; padding: 18px 20px; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; }
.ic-prio-row:last-child { border-bottom: none; }
.ic-prio-row:hover { background: rgba(255,255,255,0.02); }
.ic-prio-num { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.05); color: var(--text, #EEF0EF); font: 700 14px/32px var(--rr-font-body); text-align: center; }
.ic-prio-title { font: 600 15px/1.3 var(--rr-font-body); display: flex; align-items: center; gap: 8px; }
.ic-prio-impact { font: 500 10px/1 var(--rr-font-body); padding: 3px 8px; border-radius: 999px; letter-spacing: 0.04em; }
.ic-prio-impact-high { background: rgba(248,113,113,0.15); color: #F87171; }
.ic-prio-impact-med { background: rgba(251,191,36,0.15); color: #FBBF24; }
.ic-prio-summary { font: 400 13px/1.5 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.7)); margin-top: 2px; }
.ic-prio-fix-label { font: 600 12px/1 var(--rr-font-body); color: #A78BFA; margin-bottom: 4px; }
.ic-prio-fix-body { font: 400 13px/1.5 var(--rr-font-body); color: var(--text, #EEF0EF); }
.ic-prio-chev { color: var(--fg-dim, rgba(238,240,239,0.4)); font-size: 20px; text-align: center; transition: transform 0.2s ease; }
.ic-prio-row-open { background: rgba(167,139,250,0.03); }
.ic-prio-row-open .ic-prio-chev { transform: rotate(90deg); }
.ic-prio-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(167,139,250,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ic-prio-detail[data-open="1"] { border-top: 1px solid rgba(167,139,250,0.2); }
.ic-prio-detail-inner { padding: 16px 20px 20px 80px; display: flex; flex-direction: column; gap: 10px; }
.ic-prio-detail-summary { font: 400 13px/1.5 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.75)); }
.ic-prio-detail-fix { font: 400 13px/1.5 var(--rr-font-body); color: var(--text, #EEF0EF); }
.ic-prio-detail-fix strong { color: #C4B5FD; font-weight: 600; }
.ic-prio-jump {
  align-self: flex-start;
  margin-top: 4px;
  padding: 8px 14px;
  background: rgba(167,139,250,0.12);
  border: 1px solid rgba(167,139,250,0.3);
  color: #C4B5FD;
  border-radius: 8px;
  font: 500 12px/1 var(--rr-font-body);
  cursor: pointer;
  transition: all 0.15s;
}
.ic-prio-jump:hover { background: rgba(167,139,250,0.2); border-color: rgba(167,139,250,0.55); }
.ic-prio-detail { background: rgba(109,40,217,0.04); }
.ic-prio-detail-fix strong { color: #6D28D9; }
.ic-prio-jump { color: #6D28D9; background: rgba(109,40,217,0.08); border-color: rgba(109,40,217,0.3); }
.ic-prio-row-open { background: rgba(109,40,217,0.04); }

.ic-qbreak { display: grid; grid-template-columns: 1fr 240px; gap: 20px; margin-bottom: 24px; }
.ic-qbreak-hint { margin-left: auto; font: 400 12px/1 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.55)); }
.ic-qbreak-main { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; }

.ic-qexp { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ic-qexp-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: start; margin-bottom: 16px; }
.ic-qexp-num { width: 32px; height: 32px; border-radius: 50%; background: rgba(167,139,250,0.15); color: #A78BFA; font: 700 14px/32px var(--rr-font-body); text-align: center; }
.ic-qexp-q { font: 600 15px/1.4 var(--rr-font-body); }
.ic-qexp-scores { display: flex; gap: 14px; align-items: center; }
.ic-qexp-score-cell { display: flex; flex-direction: column; gap: 2px; }
.ic-qexp-score-label { font: 500 10px/1 var(--rr-font-body); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; }
.ic-qexp-score-val { font: 700 20px/1 var(--rr-font-body); }
.ic-qexp-score-low { color: #F87171; }
.ic-qexp-score-mid { color: #FBBF24; }
.ic-qexp-score-high { color: #10B981; }
.ic-qexp-sub-scores { display: flex; gap: 10px; }
.ic-qexp-subscore { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 6px 10px; text-align: center; min-width: 60px; }
.ic-qexp-subscore-label { font: 500 10px/1 var(--rr-font-body); opacity: 0.65; margin-bottom: 2px; }
.ic-qexp-subscore-val { font: 700 13px/1 var(--rr-font-body); }
.ic-qexp-subscore-low { color: #F87171; }
.ic-qexp-subscore-mid { color: #FBBF24; }
.ic-qexp-subscore-high { color: #10B981; }
.ic-qexp-collapse { background: transparent; border: none; color: var(--fg-dim, rgba(238,240,239,0.55)); font-size: 18px; cursor: pointer; padding: 4px 8px; }

.ic-qexp-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ic-qexp-col { padding: 14px; border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.ic-qexp-col-red { background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.25); }
.ic-qexp-col-green { background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.25); }
.ic-qexp-col-amber { background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.25); }
.ic-qexp-col-head { display: flex; justify-content: space-between; align-items: center; }
.ic-qexp-col-label { font: 600 12px/1 var(--rr-font-body); }
.ic-qexp-col-red .ic-qexp-col-label { color: #F87171; }
.ic-qexp-col-green .ic-qexp-col-label { color: #10B981; }
.ic-qexp-col-amber .ic-qexp-col-label { color: #FBBF24; }
.ic-qexp-col-body { font: 400 13px/1.55 var(--rr-font-body); color: var(--text, #EEF0EF); }
.ic-qexp-col-body mark { background: rgba(16,185,129,0.25); color: #10B981; padding: 1px 3px; border-radius: 3px; }
.ic-qexp-why-label { font: 600 11px/1 var(--rr-font-body); color: #F87171; margin: 6px 0 4px; }
.ic-qexp-why ul { margin: 0; padding-left: 16px; font: 400 12px/1.5 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.75)); }
.ic-qexp-formula { font: 500 13px/1.4 var(--rr-font-body); color: #FBBF24; }
.ic-qexp-fix-expl { font: 400 12px/1.5 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.7)); }

.ic-qrows { display: flex; flex-direction: column; }
.ic-qrow { display: grid; grid-template-columns: 40px 1fr 60px 24px; gap: 12px; padding: 14px 20px; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; }
.ic-qrow:last-child { border-bottom: none; }
.ic-qrow:hover { background: rgba(255,255,255,0.02); }
.ic-qrow-num { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.05); text-align: center; font: 600 12px/28px var(--rr-font-body); opacity: 0.7; }
.ic-qrow-text { font: 400 13px/1.4 var(--rr-font-body); }
.ic-qrow-score { font: 700 14px/1 var(--rr-font-body); text-align: right; }
.ic-qrow-score-low { color: #F87171; }
.ic-qrow-score-mid { color: #FBBF24; }
.ic-qrow-score-high { color: #10B981; }
.ic-qrow-chev { color: var(--fg-dim, rgba(238,240,239,0.4)); font-size: 16px; text-align: center; }

.ic-sidebar { padding: 20px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; display: flex; flex-direction: column; gap: 12px; align-self: flex-start; position: sticky; top: 20px; }
.ic-sidebar-icon { font-size: 28px; }
.ic-sidebar-title { font: 700 15px/1.2 var(--rr-font-body); }
.ic-sidebar-body { font: 400 13px/1.5 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.7)); }
.ic-sidebar-btn { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); color: var(--text, #EEF0EF); font: 600 13px/1.2 var(--rr-font-body); cursor: pointer; transition: all 0.15s; }
.ic-sidebar-btn:hover { background: rgba(255,255,255,0.05); }
.ic-sidebar-btn-primary { background: linear-gradient(135deg, #A78BFA, #8B5CF6); border: none; color: #fff; }
.ic-sidebar-btn-primary:hover { opacity: 0.92; }
/* Prompt 30: ghost variant for escape-hatch actions ("New interview"); less
   prominent than the primary and secondary CTAs so it doesn't compete. */
.ic-sidebar-btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.12); color: rgba(238,240,239,0.65); font-weight: 500; }
.ic-sidebar-btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.25); color: rgba(238,240,239,0.9); }
.ic-sidebar-btn-ghost { border-color: rgba(26,22,20,0.15); color: rgba(26,22,20,0.65); }
.ic-sidebar-btn-ghost:hover { background: rgba(26,22,20,0.04); border-color: rgba(26,22,20,0.3); color: #1A1614; }

.ic-motivation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 20px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; }
.ic-motiv-item { display: flex; gap: 10px; align-items: center; font: 400 13px/1.5 var(--rr-font-body); color: var(--fg-dim, rgba(238,240,239,0.75)); }
.ic-motiv-icon { font-size: 18px; }

/* VI report mobile rendering (T3 polish). The report screen had no narrow-
   viewport handling; at 360/393/430 the hero card overflowed (max-width
   pinned to 420px), the headline forced title+score side-by-side, and the
   3-cell hero scores plus spark could not fit in a single row. Two new
   breakpoints below restore a usable mobile layout without touching
   desktop. Placed after all unconditioned report rules so the cascade
   resolves in favor of these overrides at narrow widths. */
@media (max-width: 600px) {
  #icReportBody { padding: 16px 14px calc(32px + var(--rr-cookie-h, 0px)); }
  .ic-progress-card { max-width: 100%; padding: 12px 16px; }
  .ic-hero-scores { flex-wrap: wrap; gap: 12px; }
  .ic-hero-spark { margin-left: 0; width: 100%; order: 99; }
  .ic-headline { flex-direction: column; gap: 16px; padding: 20px; }
  .ic-headline-title { font-size: 20px; }
  .ic-headline-score { align-items: flex-start; min-width: 0; }
  .ic-headline-score-number { font-size: 36px; }
  .ic-habit { padding: 14px; }
  .ic-habit-head { gap: 10px; }
  .ic-bound-pill { padding: 10px 6px; }
  .ic-bound-pill-sub { font-size: 10px; }
}
@media (max-width: 380px) {
  .ic-bound-pills { grid-template-columns: 1fr; }
  .ic-headline-score-number { font-size: 32px; }
}

/* ===== Light mode, explicit text + background overrides for readability ===== */
#icReportBody { color: #1A1614; }
#icReportBody .ic-habit-body,
#icReportBody .ic-hero-score-label,
#icReportBody .ic-hero-progress-label,
#icReportBody .ic-headline-sub,
#icReportBody .ic-headline-score-label,
#icReportBody .ic-prio-summary,
#icReportBody .ic-qexp-fix-expl,
#icReportBody .ic-qexp-subscore-label,
#icReportBody .ic-sidebar-body,
#icReportBody .ic-motiv-item,
#icReportBody .ic-qbreak-hint,
#icReportBody .ic-qexp-why ul {
  color: rgba(26, 22, 20, 0.72) !important;
}
#icReportBody .ic-habit-title,
#icReportBody .ic-prio-title,
#icReportBody .ic-headline-title,
#icReportBody .ic-qexp-q,
#icReportBody .ic-sidebar-title,
#icReportBody .ic-section-head-title,
#icReportBody .ic-habit-fix,
#icReportBody .ic-qexp-col-body {
  color: #1A1614 !important;
}
#icReportBody .ic-progress-card,
#icReportBody .ic-headline,
#icReportBody .ic-habit,
#icReportBody .ic-prio-list,
#icReportBody .ic-qbreak-main,
#icReportBody .ic-sidebar,
#icReportBody .ic-motivation {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

@media (max-width: 980px) {
  .ic-habits { grid-template-columns: 1fr; }
  .ic-qbreak { grid-template-columns: 1fr; }
  .ic-qexp-cols { grid-template-columns: 1fr; }
  .ic-prio-row { grid-template-columns: 40px 1fr; }
  .ic-prio-row .ic-prio-fix, .ic-prio-row .ic-prio-chev { display: none; }
  .ic-motivation { grid-template-columns: 1fr; }
}

/* ============================================================
   Interview report: glass redesign (rr-vi-report).
   Maps the approved interview_report_glass_v2_blue prototype (.ir-*) onto the
   existing .ic-* report markup. Plain rules in the main stylesheet placed
   AFTER the existing report styles (incl. the #fff card override above) so
   equal-specificity #icReportBody rules win by source order. Pure CSS: no
   markup or JS changed. Semantic colours preserved (pink "Needs work" /
   "High impact" pills, red scores, pink/green/amber answer cards); purple
   accents flipped to blue (var(--rr-accent)); CTAs light-bg + dark-text in all states.
   ============================================================ */

/* Full-bleed interview stage: the cool blue gradient + ambient blue corner
   blobs live on the page wrapper so all four interview surfaces (setup,
   loading, live, report) share ONE unified background with no off-white box.
   Only renders when #jjPage_interview is the active page, so other pages keep
   their default background. Inner screens drop their own gradient/border so
   they blend in. Corner blobs use in-bounds positioning (no negative offsets)
   so no overflow:hidden is needed on the scrolling page. */
/* flex-grow:1 makes this page fill its flex-column parent (#jobhunterView) so the
   gradient reaches the bottom of the viewport even when a sub-view (#icReport
   loading/short report) is shorter than the viewport. The page keeps its own
   overflow-y:auto, so a taller sub-view (setup) still scrolls within it. */
/* Pass 8 (Apollo cream): warm the interview STAGE only, the shared page
   gradient + the two ambient corner blobs shift from cool blue to warm cream so
   the immersive stage sits next to the cream app. Everything else (the glass
   cards, blue accents, the dark orb, the blue waveform, the pink/green/amber
   semantic report colours) is left byte-identical by deliberate design. */
#jjPage_interview { background: linear-gradient(135deg,#faf9f6 0%,#f5f2ea 30%,#faf8f2 60%,#f4f0e6 80%,#f1ece0 100%); position: relative; flex-grow: 1; }
#jjPage_interview::before { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 35%; background: radial-gradient(ellipse at top left,rgba(221,209,182,0.30) 0%,transparent 70%); pointer-events: none; z-index: 0; }
#jjPage_interview::after { content: ''; position: absolute; bottom: 0; right: 0; width: 45%; height: 35%; background: radial-gradient(ellipse at bottom right,rgba(221,209,182,0.24) 0%,transparent 70%); pointer-events: none; z-index: 0; }
#jjPage_interview > .ic-screen { position: relative; z-index: 1; }
#icReportBody { position: relative; }
/* Inner screens drop their own opaque backgrounds so the wrapper gradient
   shows through on all four surfaces (setup scope + live screen were white). */
#jjPage_interview .rr-vi__scope { background: transparent; }

/* Glass cards (the .ir-card treatment on each section container) */
#icReportBody .ic-progress-card,
#icReportBody .ic-headline,
#icReportBody .ic-habit,
#icReportBody .ic-prio-list,
#icReportBody .ic-qbreak-main,
#icReportBody .ic-sidebar,
#icReportBody .ic-motiv-item {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: var(--rr-radius);
  box-shadow: 0 12px 40px -14px rgba(120,140,200,0.22), 0 1px 0 rgba(255,255,255,0.85) inset;
  position: relative;
  overflow: hidden;
}

/* Progress card: blue accent for current session + sparkline */
#icReportBody .ic-hero-score-current { color: var(--rr-accent); }
#icReportBody .ic-hero-spark polyline { stroke: var(--rr-accent); }
#icReportBody .ic-hero-spark circle { fill: var(--rr-accent); }

/* Score banner: pink ambient blob behind the score (semantic warning) */
#icReportBody .ic-headline::before { content: ''; position: absolute; right: -10%; top: -30%; width: 50%; height: 160%; background: radial-gradient(ellipse,rgba(255,170,200,0.22) 0%,transparent 60%); pointer-events: none; z-index: 0; }
#icReportBody .ic-headline > * { position: relative; z-index: 1; }
#icReportBody .ic-headline-score-badge-low { background: rgba(255,210,220,0.7); border: 1px solid rgba(217,69,101,0.35); color: #a82a48; }

/* "What to fix" cards: blue icon chip + blue example link, amber Fix label */
#icReportBody .ic-habit-icon { background: rgba(36, 72, 255,0.2); border: 1px solid rgba(36, 72, 255,0.4); border-radius: 10px; color: var(--rr-accent); }
#icReportBody .ic-habit-violet .ic-habit-icon svg { stroke: var(--rr-accent); }
#icReportBody .ic-habit-fix-label { color: #c66514; }
#icReportBody .ic-habit-example-btn { color: var(--rr-accent); background: transparent; border: none; cursor: pointer; }

/* Priority section: blue num + blue Fix label, pink High-impact pill preserved */
#icReportBody .ic-prio-num { background: rgba(255,255,255,0.65); border: 1px solid rgba(36, 72, 255,0.4); color: var(--rr-accent); }
#icReportBody .ic-prio-fix-label { color: var(--rr-accent); }
#icReportBody .ic-prio-impact-high { background: rgba(255,200,215,0.65); border: 1px solid rgba(217,69,101,0.3); color: #a82a48; }

/* Answer breakdown: blue question-number chips; red scores preserved */
#icReportBody .ic-qrow-num, #icReportBody .ic-qexp-num { background: rgba(255,255,255,0.55); border: 1px solid rgba(36, 72, 255,0.35); color: var(--rr-accent); }
/* Comparison cards: keep pink/green/amber semantics, apply glass gradients */
#icReportBody .ic-qexp-col-red { background: linear-gradient(180deg,rgba(255,225,232,0.5) 0%,rgba(255,210,220,0.35) 100%); border: 1px solid rgba(217,69,101,0.25); color: #7a2740; }
#icReportBody .ic-qexp-col-green { background: linear-gradient(180deg,rgba(220,245,225,0.5) 0%,rgba(200,235,210,0.35) 100%); border: 1px solid rgba(60,150,90,0.25); color: #1c4a30; }
#icReportBody .ic-qexp-col-amber { background: linear-gradient(180deg,rgba(255,240,205,0.5) 0%,rgba(255,225,180,0.35) 100%); border: 1px solid rgba(200,140,40,0.25); color: #6b4810; }
#icReportBody .ic-qexp-why-label { color: #a82a48; }

/* Sidebar: blue rocket chip + blue practice link; CTAs light-bg dark-text */
#icReportBody .ic-sidebar-icon { background: radial-gradient(circle at 35% 30%,rgba(255,255,255,0.55) 0%,rgba(230,240,255,0.35) 50%,rgba(200,220,250,0.22) 100%); border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 6px 18px -4px rgba(120,160,230,0.45), 0 0 0 1px rgba(140,180,240,0.15) inset; color: var(--rr-accent); }
#icReportBody .ic-sidebar-btn-primary { -webkit-appearance: none !important; appearance: none !important; background: linear-gradient(135deg,#ffffff 0%,#e8f2ff 100%) !important; background-color: #ffffff !important; border: 1.5px solid rgba(36, 72, 255,0.55) !important; color: #0a0a0a !important; box-shadow: 0 8px 22px -6px rgba(36, 72, 255,0.45), 0 1px 0 rgba(255,255,255,0.9) inset; }
#icReportBody .ic-sidebar-btn-primary * { color: #0a0a0a !important; }
#icReportBody .ic-sidebar-btn-primary:hover { background: linear-gradient(135deg,#ffffff 0%,#dceaff 100%) !important; background-color: #ffffff !important; color: #0a0a0a !important; border-color: rgba(36, 72, 255,0.85) !important; transform: translateY(-1px); }
#icReportBody .ic-sidebar-btn-primary:active { background: linear-gradient(135deg,#f8fbff 0%,#dceaff 100%) !important; color: #0a0a0a !important; transform: translateY(0); }
#icReportBody .ic-sidebar-btn-primary:focus, #icReportBody .ic-sidebar-btn-primary:focus-visible { outline: none; color: #0a0a0a !important; box-shadow: 0 8px 22px -6px rgba(36, 72, 255,0.45), 0 0 0 3px rgba(36, 72, 255,0.35), 0 1px 0 rgba(255,255,255,0.9) inset; }
#icReportBody .ic-sidebar-btn-ghost { -webkit-appearance: none !important; appearance: none !important; background: #ffffff !important; background-color: #ffffff !important; border: 1px solid rgba(40,50,80,0.2) !important; color: #0a0a0a !important; }
#icReportBody .ic-sidebar-btn-ghost * { color: #0a0a0a !important; }
#icReportBody .ic-sidebar-btn-ghost:hover { background: #fafbff !important; background-color: #fafbff !important; color: #0a0a0a !important; border-color: rgba(40,50,80,0.4) !important; }
#icReportBody .ic-sidebar-btn-ghost:active { background: #f0f3fa !important; color: #0a0a0a !important; }
#icReportBody .ic-sidebar-btn-ghost:focus, #icReportBody .ic-sidebar-btn-ghost:focus-visible { outline: none; color: #0a0a0a !important; box-shadow: 0 0 0 3px rgba(36, 72, 255,0.3); }
#icReportBody .ic-sidebar-btn:not(.ic-sidebar-btn-primary):not(.ic-sidebar-btn-ghost) { background: transparent !important; border: none !important; color: var(--rr-accent) !important; box-shadow: none !important; }
#icReportBody .ic-sidebar-btn:not(.ic-sidebar-btn-primary):not(.ic-sidebar-btn-ghost) * { color: var(--rr-accent) !important; }

/* Motivation row: per-cell glass cards (container transparent) + tinted icon chips */
#icReportBody .ic-motivation { background: transparent; border: none; box-shadow: none; }
#icReportBody .ic-motiv-item:nth-child(1) .ic-motiv-icon { background: rgba(36, 72, 255,0.2); border: 1px solid rgba(36, 72, 255,0.4); border-radius: 8px; }
#icReportBody .ic-motiv-item:nth-child(2) .ic-motiv-icon { background: rgba(60,150,90,0.15); border: 1px solid rgba(60,150,90,0.35); border-radius: 8px; }
#icReportBody .ic-motiv-item:nth-child(3) .ic-motiv-icon { background: rgba(220,170,60,0.18); border: 1px solid rgba(200,140,40,0.4); border-radius: 8px; }

/* ===== Report loading: soft-editorial v2 activity log (icr-ld-) ===== */
/* Sits inside #icReportBody; the canvas is already flat #FBFBF9 via the
   v2-report :has(#icReport[style*="flex"]) clause. The existing 4s ticker and
   icSetLoadingStep are UNCHANGED and toggle .ic-step-active/.ic-step-done on
   .ic-loading-steps li[data-step]; icrLoadingTimerStart (presentation only)
   drives the elapsed clock and self-stops when the panel leaves the DOM; the
   bar eases to ~82% over the expected window by CSS and jumps to 100% only
   when the real response resolves (icMarkAllLoadingStepsDone). No green,
   amber or purple; reduced motion disables pulse and bar animation. */
.icr-ld-card { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; padding: 22px 24px 16px; width: 100%; max-width: 480px; margin: 28px auto; }
.icr-ld-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.icr-ld-title { margin: 0; font: 500 19px/1.2 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.02em; color: #101010; }
.icr-ld-elapsed { font: 500 12px/1.2 "Space Grotesk", "Albert Sans", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #101010; }
.icr-ld-eta { margin: 4px 0 14px; font-size: 12px; line-height: 1.4; color: #86867E; }
.icr-ld-track { height: 3px; border-radius: 999px; background: #E2E2DC; overflow: hidden; margin-bottom: 16px; }
.icr-ld-fill { display: block; height: 100%; width: 2%; background: #2448FF; border-radius: 999px; animation: icrLdProgress 30s ease-out forwards; }
.icr-ld-arrived .icr-ld-fill { animation: none; width: 100%; transition: width 200ms ease; }
@keyframes icrLdProgress { from { width: 2%; } to { width: 82%; } }
.icr-ld-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.icr-ld-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 6px; border-radius: 8px; }
.icr-ld-mark { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; border-radius: 999px; border: 1px solid #E2E2DC; background: #FFFFFF; position: relative; }
.icr-ld-main { flex: 1 1 auto; min-width: 0; }
.icr-ld-label { font: 400 13px/1.4 "Inter", system-ui, sans-serif; color: #A4A49C; }
.icr-ld-detail { display: none; font-size: 12px; line-height: 1.45; color: #86867E; margin-top: 1px; }
.icr-ld-row { opacity: 0.6; }
.icr-ld-row.ic-step-done { opacity: 1; }
.icr-ld-row.ic-step-done .icr-ld-mark { border-radius: 4px; background: #EFF4FD; border-color: #EFF4FD; }
.icr-ld-row.ic-step-done .icr-ld-mark::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #2448FF; font-size: 9px; font-weight: 600; }
.icr-ld-row.ic-step-done .icr-ld-label { color: #A4A49C; }
.icr-ld-row.ic-step-done .icr-ld-detail { display: block; color: #A4A49C; }
.icr-ld-row.ic-step-active { opacity: 1; }
.icr-ld-row.ic-step-active .icr-ld-mark { background: #2448FF; border-color: #2448FF; animation: icrLdPulse 1.6s ease-in-out infinite; }
.icr-ld-row.ic-step-active .icr-ld-label { font-weight: 500; color: #101010; }
.icr-ld-row.ic-step-active .icr-ld-detail { display: block; }
@keyframes icrLdPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.icr-ld-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid #E2E2DC; }
.icr-ld-honesty { font-size: 11px; line-height: 1.5; color: #A4A49C; }
/* Micro-feed under the active step: hairline left rule, 12px indent. The
   feed supersedes the step's single detail line while open; on collapse the
   detail line carries the real summary. */
.icr-ld-row.icr-ld-hasfeed .icr-ld-detail { display: none; }
.icr-ld-mfeed { margin: 6px 0 2px; padding-left: 12px; border-left: 1px solid #E2E2DC; display: flex; flex-direction: column; gap: 4px; }
.icr-ld-mline { font-size: 11.5px; line-height: 1.45; color: #86867E; animation: icrLdLineIn 200ms ease; }
.icr-ld-mlead { font: 500 10.5px/1.45 "Space Grotesk", "Albert Sans", system-ui, sans-serif; color: #A4A49C; margin-right: 6px; }
.icr-ld-msfx { margin-left: 6px; font: 500 10.5px/1.45 "Space Grotesk", "Albert Sans", system-ui, sans-serif; color: #A4A49C; }
.icr-ld-msfx-done { color: #2448FF; }
.icr-ld-mline-current .icr-ld-msfx { animation: icrLdPulse 1.6s ease-in-out infinite; }
@keyframes icrLdLineIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .icr-ld-row.ic-step-active .icr-ld-mark { animation: none; }
  .icr-ld-fill { animation: none; width: 60%; transition: none; }
  .icr-ld-arrived .icr-ld-fill { width: 100%; }
  .icr-ld-mline { animation: none; }
  .icr-ld-mline-current .icr-ld-msfx { animation: none; }
}
/* Failure: icShowReportError REPLACES the panel with this card (error path
   untouched; the in-feed red dot would require modifying the error
   presenter). Message line red only, retry controls hairline. Later in
   source than the legacy .ic-report-error rules, so ties win here. */
.ic-report-error { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; padding: 22px 24px; max-width: 480px; margin: 28px auto; text-align: left; }
.ic-report-error-icon { color: #C9594A; font-size: 18px; margin-bottom: 8px; }
.ic-report-error-title { font: 500 16px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.02em; color: #101010; margin-bottom: 6px; }
.ic-report-error-msg { font: 400 13px/1.5 "Inter", system-ui, sans-serif; color: #C9594A; margin-bottom: 16px; max-width: 56ch; }
.ic-report-error-actions { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
.ic-report-error-actions .jj-btn { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 8px; color: #3B3B36; font: 500 12.5px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; padding: 9px 16px; box-shadow: none; }
.ic-report-error-actions .jj-btn:hover { border-color: #101010; color: #101010; background: #FFFFFF; }
.ic-report-error-actions .jj-btn.jj-btn-primary { color: #2448FF; background: #FFFFFF; border-color: #E2E2DC; }
.ic-report-error-actions .jj-btn.jj-btn-primary:hover { border-color: #2448FF; color: #2448FF; }

/* ============================================================
   Shared purple-orb button, Start interview (large) + Voice preview (mini)
   ============================================================ */
.ic-orb-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.07), rgba(139, 92, 246, 0.03));
  color: var(--text, #EEF0EF);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
  font-family: 'DM Sans', sans-serif;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.ic-orb-btn:hover:not([data-state="loading"]):not([data-state="playing"]) {
  border-color: rgba(167, 139, 250, 0.55);
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.12), rgba(139, 92, 246, 0.06));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.18);
}
.ic-orb-btn:active { transform: translateY(0); }
.ic-orb-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.35);
}

/* Mini variant, no text, compact, used next to voice dropdown */
.ic-orb-btn-mini {
  width: auto;
  padding: 4px;
  gap: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
}
.ic-orb-btn-mini:hover:not([data-state="loading"]):not([data-state="playing"]) {
  background: transparent;
  transform: translateY(0);
  box-shadow: none;
}
.ic-orb-btn-mini .ic-orb-btn-orb {
  width: 32px; height: 32px;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.35), inset 0 0 8px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(91, 33, 182, 0.35);
}
.ic-orb-btn-mini .ic-orb-btn-icon svg { width: 14px; height: 14px; }
.ic-orb-btn-mini:hover .ic-orb-btn-orb {
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(91, 33, 182, 0.35);
}

/* Orb */
.ic-orb-btn-orb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  background: radial-gradient(circle at 35% 30%, #DDD0FF 0%, #A78BFA 45%, #6D28D9 100%);
  box-shadow:
    0 0 20px rgba(167, 139, 250, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.15),
    inset 0 -4px 8px rgba(91, 33, 182, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s ease;
}

/* Idle pulse, subtle breathing */
.ic-orb-btn-pulse {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.45);
  opacity: 0;
  animation: ic-orb-btn-idle-pulse 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes ic-orb-btn-idle-pulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(1.35); opacity: 0;    }
}

/* Playing state, faster, brighter pulse */
.ic-orb-btn[data-state="playing"] .ic-orb-btn-pulse {
  animation: ic-orb-btn-playing-pulse 1.4s ease-out infinite;
  border-color: rgba(196, 181, 253, 0.7);
}
@keyframes ic-orb-btn-playing-pulse {
  0%   { transform: scale(1);    opacity: 0.8; }
  100% { transform: scale(1.55); opacity: 0;   }
}
.ic-orb-btn[data-state="playing"] .ic-orb-btn-orb {
  box-shadow:
    0 0 30px rgba(167, 139, 250, 0.6),
    inset 0 0 12px rgba(255, 255, 255, 0.2),
    inset 0 -4px 8px rgba(91, 33, 182, 0.4);
}

/* Loading state, dim title, faster ring */
.ic-orb-btn[data-state="loading"] {
  cursor: wait;
}
.ic-orb-btn[data-state="loading"] .ic-orb-btn-title { opacity: 0.78; }
.ic-orb-btn[data-state="loading"] .ic-orb-btn-pulse {
  animation-duration: 1.8s;
  border-color: rgba(196, 181, 253, 0.55);
}

/* Error state */
.ic-orb-btn[data-state="error"] {
  border-color: rgba(248, 113, 113, 0.4);
}

/* Icon */
.ic-orb-btn-icon {
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(1px);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  z-index: 1;
}
.ic-orb-btn[data-state="playing"] .ic-orb-btn-icon { transform: none; }

/* Text block */
.ic-orb-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ic-orb-btn-title {
  font: 600 14px/1.25 'DM Sans', sans-serif;
  color: var(--text, #EEF0EF);
}
.ic-orb-btn-sub {
  font: 400 12px/1.35 'DM Sans', sans-serif;
  color: var(--fg-dim, rgba(238, 240, 239, 0.6));
}

/* Chevron */
.ic-orb-btn-chev {
  color: rgba(167, 139, 250, 0.7);
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.ic-orb-btn:hover:not([data-state="loading"]):not([data-state="playing"]) .ic-orb-btn-chev {
  transform: translateX(2px);
  color: #C4B5FD;
}
.ic-orb-btn[data-state="playing"] .ic-orb-btn-chev,
.ic-orb-btn[data-state="loading"] .ic-orb-btn-chev { opacity: 0; }

/* Start card container spacing */
.ic-start-card {
  margin-top: 12px;
}
.ic-start-card .ic-orb-btn-start {
  padding: 16px 18px;
}
.ic-start-card .ic-orb-btn-start .ic-orb-btn-title {
  font-size: 15px;
}

/* Light mode */
.ic-orb-btn {
  border-color: rgba(109, 40, 217, 0.2);
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.06), rgba(255, 255, 255, 0.85));
}
.ic-orb-btn:hover:not([data-state="loading"]):not([data-state="playing"]) {
  border-color: rgba(109, 40, 217, 0.5);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.14);
}
.ic-orb-btn-title { color: #1A1614; }
.ic-orb-btn-sub { color: rgba(26, 22, 20, 0.62); }
.ic-orb-btn-chev { color: rgba(109, 40, 217, 0.6); }
.ic-orb-btn-mini { border: none; background: transparent; }

/* Hide leftover wrapper if the old Start container becomes empty */
.ic-setup-main > .ic-start-btn-wrap:empty { display: none; }

/* v2 start-bar hover legibility fix. The shared orb-button hover above
   (.ic-orb-btn:hover:not([data-state="loading"]):not([data-state="playing"]),
   specificity 0,4,0) paints a pale lavender gradient + lift that outranked
   the v2 filled-blue hover (0,3,0) and left white text on a pale wash. The
   rule also serves the legacy orb-view controls, so it is scoped-over here
   (0,5,0, later in source) rather than purged: the start bar keeps the
   filled-blue grammar on hover, the not-ready state keeps its muted hairline
   treatment, and the purple focus ring goes blue. */
.tl-theme .rr-vi__start-btn:hover:not([data-state="loading"]):not([data-state="playing"]) {
  background: #1f3dd9; border-color: #1f3dd9;
  transform: none; box-shadow: none;
}
.tl-theme .rr-vi__start-btn.tl-start-notready:hover:not([data-state="loading"]):not([data-state="playing"]) {
  background: #FFFFFF; border-color: #E2E2DC;
  transform: none; box-shadow: none;
}
.tl-theme .rr-vi__start-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(22, 51, 255, 0.25);
}

/* ============================================================
   v2-report: soft-editorial v2 coaching-loop layout for #icReport. Placed
   after the legacy report styles so equal-specificity rules win on source
   order. Literal token values (#icReport has no .tl-theme ancestor, the
   live-screen precedent). Space Grotesk display, weights 400/500 only; white
   hairline radius-10 cards, no shadows or gradients; red only for high
   impact, the low band and the YOUR ANSWER label; primary body text #3B3B36,
   #86867E only for secondary text at 12.5px+. UK English, no em dashes.
   ============================================================ */
#icReportBody { color: #101010; font-family: "Inter", "Albert Sans", system-ui, sans-serif; }
#icReportBody .icr-micro { font: 500 10.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: #A4A49C; }
#icReportBody .icr-micro-blue { color: #2448FF; }
#icReportBody .icr-sec { margin-top: 28px; }
#icReportBody .icr-sec-title { margin: 0 0 14px; font: 500 17px/1.25 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.02em; color: #101010; }
#icReportBody .icr-sec-hint { margin: -8px 0 12px; font-size: 12.5px; color: #86867E; }

/* Buttons */
#icReportBody .icr-btn-primary {
  background: #2448FF; border: 1px solid #2448FF; border-radius: 8px; color: #fff;
  padding: 10px 18px; font: 500 13px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif;
  letter-spacing: 0.01em; cursor: pointer;
}
#icReportBody .icr-btn-primary:hover { background: #1f3dd9; border-color: #1f3dd9; }
#icReportBody .icr-btn-ghost {
  background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 8px; color: #3B3B36;
  padding: 10px 18px; font: 500 13px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif;
  letter-spacing: 0.01em; cursor: pointer;
}
#icReportBody .icr-btn-ghost:hover { border-color: #101010; color: #101010; }
#icReportBody .icr-btn-block { display: block; width: 100%; text-align: center; margin-top: 12px; }

/* Header */
#icReportBody .icr-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 14px; border-bottom: 1px solid #E2E2DC; margin-bottom: 22px; flex-wrap: wrap; }
#icReportBody .icr-header-title { font: 500 19px/1.2 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.02em; color: #101010; }
#icReportBody .icr-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Hero */
#icReportBody .icr-hero { display: flex; gap: 36px; align-items: flex-start; justify-content: space-between; background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; padding: 26px 28px; flex-wrap: wrap; }
#icReportBody .icr-hero-left { flex: 1 1 380px; min-width: 0; }
#icReportBody .icr-score-row { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 10px; }
#icReportBody .icr-score { font: 500 48px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.03em; }
#icReportBody .icr-score-of, #icReportBody .icr-donut-of { font: 500 16px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; color: #A4A49C; }
#icReportBody .icr-score-low { color: #C9594A; }
#icReportBody .icr-score-mid { color: #101010; }
#icReportBody .icr-score-high { color: #2448FF; }
#icReportBody .icr-band { font: 500 10.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid #E2E2DC; margin-left: 8px; }
#icReportBody .icr-band-low { color: #C9594A; border-color: #C9594A; }
#icReportBody .icr-band-mid { color: #101010; }
#icReportBody .icr-band-high { color: #2448FF; border-color: #2448FF; background: #EFF4FD; }
#icReportBody .icr-verdict { margin: 6px 0 8px; font: 500 29px/1.18 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.025em; color: #101010; max-width: 54ch; }
#icReportBody .icr-verdict-long { font-size: 21px; line-height: 1.3; }
#icReportBody .icr-verdict-rest { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #86867E; max-width: 56ch; }
#icReportBody .icr-verdict-sub { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #3B3B36; max-width: 56ch; }
/* Pass 8 (Apollo cream): Fraunces on the interview setup hero + results verdict/
   score display headings only (matches every other page). Placed AFTER the
   Space Grotesk `font:` shorthands above so it wins on font-family without
   !important; scoped so it cannot leak. Colours/sizes unchanged. */
#jjPage_interview .tl-hero-h,
#icReportBody .icr-verdict,
#icReportBody .icr-score{ font-family:var(--ap-display); }
/* Hero paired columns: what went wrong (red dots) vs what you have going for
   you (blue checks). Replaces the single win line. */
#icReportBody .icr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 4px 0 16px; }
@media (max-width: 700px) { #icReportBody .icr-pair { grid-template-columns: 1fr; } }
#icReportBody .icr-pair-label { font: 500 13px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.01em; color: #101010; margin-bottom: 8px; }
#icReportBody .icr-pair-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
#icReportBody .icr-pair-list li { position: relative; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: #3B3B36; max-width: 48ch; }
#icReportBody .icr-pair-wrong li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 999px; background: #C9594A; }
#icReportBody .icr-pair-win li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 600; font-size: 11px; color: #2448FF; }
/* Hero footer strip: next-step line left, CTAs right, hairline top. */
#icReportBody .icr-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid #E2E2DC; flex-wrap: wrap; }
#icReportBody .icr-hero-foot-line { font: 500 13.5px/1.4 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.01em; color: #101010; }
#icReportBody .icr-hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
#icReportBody .icr-hero-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
#icReportBody .icr-donut { position: relative; width: 132px; height: 132px; }
#icReportBody .icr-donut-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
#icReportBody .icr-donut-score { font: 500 30px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.02em; }
#icReportBody .icr-lastblock { text-align: center; }
#icReportBody .icr-last-label { font: 500 10.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: #A4A49C; }
#icReportBody .icr-last-val { margin-top: 4px; font: 500 14px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; color: #101010; }
#icReportBody .icr-last-when { font: 400 12.5px/1.3 "Inter", system-ui, sans-serif; color: #86867E; }
#icReportBody .icr-delta { margin-top: 4px; font: 500 12.5px/1.3 "Inter", system-ui, sans-serif; }
#icReportBody .icr-delta-up { color: #2448FF; }
#icReportBody .icr-delta-down, #icReportBody .icr-delta-flat { color: #101010; }
#icReportBody .icr-spark { margin-top: 8px; }

/* Two-column shell */
#icReportBody .icr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-top: 4px; }
#icReportBody .icr-main { min-width: 0; }
#icReportBody .icr-rail { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }

/* Comparison pair (also reused inside the breakdown's expanded state) */
#icReportBody .ic-qbreak { display: block; }
#icReportBody .ic-qbreak-main { display: block; }
#icReportBody .ic-qexp { background: transparent; border: 0; padding: 0; }
#icReportBody .ic-qexp-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; background: transparent; border: 0; padding: 0; }
#icReportBody .ic-qexp-num, #icReportBody .ic-qrow-num, #icReportBody .ic-prio-num {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 999px; background: #FFFFFF;
  border: 1px solid #E2E2DC; color: #101010; display: inline-flex; align-items: center; justify-content: center;
  font: 500 12px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif;
}
#icReportBody .ic-qexp-q { flex: 1 1 auto; font: 500 14.5px/1.4 "Inter", system-ui, sans-serif; color: #101010; }
#icReportBody .ic-qexp-scores { display: flex; align-items: center; gap: 10px; }
#icReportBody .ic-qexp-score-val { font: 500 15px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; }
#icReportBody .ic-qexp-collapse { background: transparent; border: 1px solid #E2E2DC; border-radius: 999px; width: 26px; height: 26px; color: #86867E; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#icReportBody .ic-qexp-collapse:hover { border-color: #101010; color: #101010; }
#icReportBody .ic-qexp-subs { margin: 0 0 14px 38px; font-size: 12.5px; color: #86867E; }
#icReportBody .icr-subscore { margin-right: 12px; }
#icReportBody .ic-qexp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
/* Decorative circled arrow between the pair (desktop only). */
#icReportBody .ic-qexp-cols::after { content: "\2192"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 999px; background: #FFFFFF; border: 1px solid #E2E2DC; color: #2448FF; font-size: 14px; line-height: 26px; text-align: center; pointer-events: none; }
@media (max-width: 760px) { #icReportBody .ic-qexp-cols { grid-template-columns: 1fr; } #icReportBody .ic-qexp-cols::after { display: none; } }
/* Red hairline chip tags under YOUR ANSWER. */
#icReportBody .icr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
#icReportBody .icr-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(201, 89, 74, 0.35); background: transparent; color: #C9594A; font: 500 11px/1.3 "Inter", system-ui, sans-serif; }
/* Fix-pattern caption beneath the pair, blue sparkle lead. */
#icReportBody .icr-fix-caption { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: #2448FF; max-width: 70ch; }
#icReportBody .icr-spark-glyph { flex: 0 0 auto; margin-top: 2px; color: #2448FF; }
#icReportBody .icr-card { border-radius: 10px; padding: 18px 20px; }
#icReportBody .icr-card-yours { background: #FFFFFF; border: 1px solid #E2E2DC; }
#icReportBody .icr-card-better { background: #F3F6FF; border: 1px solid #2448FF; }
#icReportBody .icr-card-label { font: 500 10.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 10px; }
#icReportBody .icr-card-label-red { color: #C9594A; }
#icReportBody .icr-card-label-blue { color: #2448FF; }
#icReportBody .icr-card-body { font-size: 13.5px; line-height: 1.6; color: #3B3B36; white-space: pre-wrap; max-width: 60ch; }
#icReportBody .icr-card-better .icr-card-body { color: #101010; }
#icReportBody .icr-card-body mark { background: #FFFFFF; color: #2448FF; border-radius: 3px; padding: 0 2px; }
#icReportBody .icr-card-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E2E2DC; font-size: 12.5px; line-height: 1.5; }
#icReportBody .icr-card-foot-grey { color: #86867E; }
#icReportBody .icr-card-foot-label { font: 500 10px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 5px; }
/* Micro-label diet: the grey foot ("Why it did not work") is sentence-case;
   only the blue FIX PATTERN foot keeps caps. */
#icReportBody .icr-card-foot-grey .icr-card-foot-label { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
#icReportBody .icr-card-foot ul { margin: 0; padding-left: 16px; }

/* Fixes ledger: labelled four-column table (ISSUE, IMPACT, WHY IT HURTS,
   HOW TO FIX are sanctioned caps). Expansion + contained inset unchanged. */
#icReportBody .ic-prio-list { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; overflow: hidden; }
#icReportBody .icr-l-head { display: grid; grid-template-columns: minmax(150px, 0.9fr) 70px 1.3fr 1.1fr 18px; gap: 14px; padding: 10px 18px 9px; border-bottom: 1px solid #E2E2DC; background: #FCFCFB; }
#icReportBody .icr-l-h { font: 500 9.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: #A4A49C; }
#icReportBody .ic-prio-row { display: grid; grid-template-columns: minmax(150px, 0.9fr) 70px 1.3fr 1.1fr 18px; align-items: start; gap: 14px; padding: 16px 18px; border: 0; border-top: 1px solid #E2E2DC; background: transparent; cursor: pointer; border-radius: 0; }
#icReportBody .icr-l-head + .ic-prio-row { border-top: 0; }
#icReportBody .ic-prio-row:hover { background: #FBFBF9; }
#icReportBody .icr-l-issue { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
#icReportBody .ic-prio-title { font: 500 13.5px/1.35 "Inter", system-ui, sans-serif; color: #101010; padding-top: 4px; }
#icReportBody .icr-l-impact { padding-top: 5px; }
#icReportBody .ic-prio-impact { font: 500 10px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; background: transparent; border: 0; padding: 0; border-radius: 0; margin: 0; }
#icReportBody .ic-prio-impact-high { color: #C9594A; }
#icReportBody .ic-prio-impact-med { color: #101010; }
#icReportBody .ic-prio-impact-low { color: #A4A49C; }
#icReportBody .ic-prio-summary { margin: 0; padding-top: 4px; font-size: 12.5px; line-height: 1.5; color: #86867E; max-width: 56ch; }
#icReportBody .ic-prio-fix { border-left: 1px solid #E2E2DC; padding-left: 14px; padding-top: 4px; min-width: 0; }
#icReportBody .ic-prio-fix-body { font-size: 12.5px; line-height: 1.5; color: #101010; }
#icReportBody .ic-prio-fix-body::before { content: "\2192"; color: #2448FF; margin-right: 5px; font-weight: 500; }
#icReportBody .ic-prio-chev { color: #A4A49C; font-size: 15px; align-self: center; }
@media (max-width: 860px) {
  #icReportBody .icr-l-head { display: none; }
  #icReportBody .ic-prio-row { display: flex; flex-wrap: wrap; }
  #icReportBody .icr-l-issue { flex: 1 1 auto; }
  #icReportBody .ic-prio-summary, #icReportBody .ic-prio-fix { flex: 1 1 100%; }
  #icReportBody .ic-prio-fix { border-left: 0; padding-left: 36px; }
  #icReportBody .ic-prio-summary { padding-left: 36px; }
}
#icReportBody .ic-prio-detail { overflow: hidden; max-height: 0; transition: max-height 240ms ease; background: #FCFCFB; border-top: 0; }
#icReportBody .ic-prio-detail-inner { display: flex; flex-direction: column; padding: 14px 18px 16px 58px; border-top: 1px solid #E2E2DC; }
#icReportBody .ic-prio-detail-summary { font-size: 13px; line-height: 1.55; color: #3B3B36; max-width: 60ch; }
#icReportBody .ic-prio-detail-fix { margin-top: 8px; font-size: 13px; line-height: 1.55; color: #3B3B36; max-width: 60ch; }
#icReportBody .ic-prio-detail-fix strong { color: #101010; font-weight: 500; }
#icReportBody .ic-prio-detail-inner .ic-prio-jump { align-self: flex-end; }
#icReportBody .ic-prio-jump { margin-top: 10px; background: transparent; border: 0; padding: 0; cursor: pointer; font: 500 11px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: #2448FF; }
#icReportBody .ic-prio-jump:hover { color: #1f3dd9; }

/* Question breakdown rows */
#icReportBody .ic-qrows { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; overflow: hidden; }
#icReportBody .ic-qrows:empty { display: none; }
#icReportBody .ic-qrow { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 0; border-top: 1px solid #E2E2DC; background: transparent; cursor: pointer; border-radius: 0; margin: 0; }
#icReportBody .ic-qrows > .ic-qrow:first-child { border-top: 0; }
#icReportBody .ic-qrow:hover { background: #FBFBF9; }
#icReportBody .ic-qrow-mid { flex: 1 1 auto; min-width: 0; }
#icReportBody .ic-qrow-text { font: 400 13.5px/1.4 "Inter", system-ui, sans-serif; color: #101010; }
#icReportBody .ic-qrow-subs { margin-top: 3px; font-size: 12.5px; color: #86867E; }
#icReportBody .ic-qrow-score { font: 500 14px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; }
#icReportBody .ic-qrow-score-low { color: #C9594A; }
#icReportBody .ic-qrow-score-mid { color: #101010; }
#icReportBody .ic-qrow-score-high { color: #2448FF; }
#icReportBody .ic-qrow-chev { color: #A4A49C; font-size: 15px; }

/* Right rail. Titles sentence-case SG 13.5px 500 (micro-label diet: ALL-CAPS
   reserved for the hero readiness label, FIX, YOUR/BETTER ANSWER, FIX
   PATTERN, impact levels and the jump link). */
#icReportBody .icr-rail-card { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; padding: 18px 20px; }
#icReportBody .icr-rail-title { font: 500 13.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.01em; color: #101010; }
#icReportBody .icr-rail-title-blue { color: #2448FF; }
#icReportBody .icr-next-card { background: #EFF4FD; border-color: #2448FF; }
#icReportBody .icr-next-line { margin-top: 8px; font: 500 14px/1.45 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.01em; color: #101010; }
#icReportBody .icr-rail-body { margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: #86867E; max-width: 56ch; }
/* Practice areas: one card, hairline-divided rows (no inner boxes). */
#icReportBody .icr-habits { margin-top: 6px; display: block; }
#icReportBody .ic-habit { background: transparent; border: 0; border-top: 1px solid #E2E2DC; border-radius: 0; padding: 12px 0; }
#icReportBody .icr-habits .ic-habit:first-child { border-top: 0; }
#icReportBody .ic-habit-title { font: 500 13px/1.35 "Inter", system-ui, sans-serif; color: #101010; }
#icReportBody .ic-habit-body { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: #86867E; }
#icReportBody .ic-habit-fix { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: #3B3B36; background: transparent; border: 0; padding: 0; }
#icReportBody .ic-habit-fix-label { font: 500 10px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: #2448FF; }
#icReportBody .ic-habit-example-btn { margin-top: 8px; background: transparent; border: 0; padding: 0; cursor: pointer; font: 500 12px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #2448FF; }
#icReportBody .ic-habit-example-btn:hover { color: #1f3dd9; }
#icReportBody .ic-habit-example { overflow: hidden; max-height: 0; transition: max-height 240ms ease; }
#icReportBody .ic-habit-example-row { margin-top: 8px; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
#icReportBody .ic-habit-example-bad { background: #FBFBF9; border: 1px solid #E2E2DC; color: #3B3B36; }
#icReportBody .ic-habit-example-good { background: #F3F6FF; border: 1px solid rgba(22, 51, 255, 0.3); color: #101010; }
#icReportBody .ic-habit-example-empty { background: #FBFBF9; border: 1px solid #E2E2DC; color: #86867E; }
#icReportBody .ic-habit-example-label { font: 500 11px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #A4A49C; margin-bottom: 4px; }
#icReportBody .ic-habit-example-good .ic-habit-example-label { color: #2448FF; }
/* Unanswered: one quiet row, never a red zero. Review expands the plain
   question list inline; Retake stays the action. */
#icReportBody .icr-unanswered-wrap { margin-top: 10px; background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 8px; }
#icReportBody .icr-unanswered { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
#icReportBody .icr-unanswered-text { font-size: 12.5px; color: #86867E; }
#icReportBody .icr-unanswered-acts { display: flex; gap: 8px; }
#icReportBody .icr-unanswered-btn { background: transparent; border: 1px solid #E2E2DC; border-radius: 8px; padding: 6px 14px; cursor: pointer; font: 500 12px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; color: #2448FF; }
#icReportBody .icr-unanswered-btn:hover { border-color: #2448FF; }
#icReportBody .icr-unanswered-review { background: transparent; border: 0; padding: 6px 4px; cursor: pointer; font: 500 12px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; color: #86867E; }
#icReportBody .icr-unanswered-review:hover { color: #101010; }
#icReportBody .icr-unanswered-list { border-top: 1px solid #E2E2DC; padding: 6px 16px 10px; }
#icReportBody .icr-unanswered-q { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; font-size: 12.5px; line-height: 1.5; color: #86867E; border-top: 1px solid #F0F0EB; }
#icReportBody .icr-unanswered-q:first-child { border-top: 0; }
#icReportBody .icr-unanswered-qnum { flex: 0 0 auto; color: #A4A49C; font: 500 11px/1.5 "Space Grotesk", "Albert Sans", system-ui, sans-serif; }
/* Sparkline container collapses when icrSparkline returns empty (<2 sessions). */
#icReportBody .icr-spark:empty { display: none; }

/* Footer band */
#icReportBody .icr-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 32px; padding-top: 18px; border-top: 1px solid #E2E2DC; flex-wrap: wrap; }
#icReportBody .icr-footer-line { font: 500 14px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.01em; color: #101010; }

/* Mobile: single column in the coaching order: hero, next best action,
   comparison + fixes + breakdown (the main column), why, practice, takeaway. */
@media (max-width: 980px) {
  #icReportBody .icr-cols { display: flex; flex-direction: column; gap: 14px; }
  #icReportBody .icr-rail { display: contents; }
  #icReportBody .icr-next-card { order: 1; margin-top: 24px; }
  #icReportBody .icr-main { order: 2; }
  #icReportBody .icr-why-card { order: 3; margin-top: 24px; }
  #icReportBody .icr-practice-card { order: 4; }
}

/* ── Interview report rebuild (feat-interview-report-rebuild): charts, unified
   accordion, progress/history. All scoped under #icReportBody. Colours reuse
   the sanctioned band/impact tokens. No em/en dashes. ── */
#icReportBody .icr-charts-sec { margin-top: 22px; }
#icReportBody .icr-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { #icReportBody .icr-charts { grid-template-columns: 1fr; } }
#icReportBody .icr-chart-card { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; padding: 16px 18px 14px; }
#icReportBody .icr-chart-title { font: 500 13.5px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: -0.01em; color: #101010; margin-bottom: 10px; }
#icReportBody .icr-chart-empty { font-size: 12.5px; line-height: 1.5; color: #86867E; padding: 28px 4px; text-align: center; }
#icReportBody .icr-radar-svg { display: block; margin: 0 auto; max-width: 340px; }
#icReportBody .icr-radar-label { font: 500 10.5px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; fill: #3B3B36; }
#icReportBody .icr-bars-svg { display: block; width: 100%; }
#icReportBody .icr-bar-x { font: 500 10px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; fill: #A4A49C; }
#icReportBody .icr-bar-val { font: 500 10px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; fill: #86867E; }
#icReportBody .icr-bar-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
#icReportBody .icr-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #86867E; }
#icReportBody .icr-lg-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
#icReportBody .icr-lg-low { background: #C9594A; }
#icReportBody .icr-lg-mid { background: #101010; }
#icReportBody .icr-lg-high { background: #2448FF; }
#icReportBody .icr-lg-sw-excl { background: repeating-linear-gradient(45deg, #A4A49C, #A4A49C 2px, transparent 2px, transparent 4px); border: 1px solid #A4A49C; }

/* Question-by-question: unified multi-open accordion */
#icReportBody .icr-acc { display: flex; flex-direction: column; gap: 10px; }
#icReportBody .icr-acc-item { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; overflow: hidden; }
#icReportBody .icr-acc-item[data-open="1"] { border-color: #101010; }
#icReportBody .icr-acc-excl { border-left: 3px solid #A4A49C; background: #FCFCFB; }
#icReportBody .icr-acc-excl[data-open="1"] { border-color: #A4A49C; }
#icReportBody .icr-acc-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; }
#icReportBody .icr-acc-head:hover { background: #FBFBF9; }
#icReportBody .icr-acc-head:focus-visible { outline: 2px solid #2448FF; outline-offset: -2px; }
#icReportBody .icr-acc-num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 999px; background: #FFFFFF; border: 1px solid #E2E2DC; color: #101010; display: inline-flex; align-items: center; justify-content: center; font: 500 12px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; }
#icReportBody .icr-acc-excl .icr-acc-num { color: #A4A49C; }
#icReportBody .icr-acc-headmid { flex: 1 1 auto; min-width: 0; }
#icReportBody .icr-acc-q { font: 500 14px/1.4 "Inter", system-ui, sans-serif; color: #101010; overflow-wrap: break-word; word-break: break-word; }
#icReportBody .icr-acc-excl .icr-acc-q { color: #86867E; font-weight: 400; }
#icReportBody .icr-acc-subs { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px 8px; }
#icReportBody .icr-acc-sub { display: inline-flex; align-items: baseline; gap: 4px; font-size: 11.5px; color: #86867E; }
#icReportBody .icr-acc-sub-v { font: 500 11.5px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; color: #3B3B36; }
#icReportBody .icr-acc-reason { margin-top: 5px; font-size: 12px; color: #A4A49C; }
#icReportBody .icr-acc-headright { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
#icReportBody .icr-acc-score { font: 500 17px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; }
#icReportBody .icr-acc-score-of { font-size: 11px; color: #A4A49C; margin-left: 1px; }
#icReportBody .icr-acc-notscored { font: 500 10px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #A4A49C; border: 1px solid #E2E2DC; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
#icReportBody .icr-acc-chev { color: #A4A49C; font-size: 16px; transition: transform 200ms ease; }
#icReportBody .icr-acc-item[data-open="1"] .icr-acc-chev { transform: rotate(90deg); }
#icReportBody .icr-acc-body { overflow: hidden; max-height: 0; transition: max-height 260ms ease; }
#icReportBody .icr-acc-body-inner { padding: 4px 16px 18px; }
#icReportBody .icr-acc-excl-line { margin: 8px 0 12px; font-size: 12.5px; line-height: 1.5; color: #86867E; }
#icReportBody .icr-acc-body .icr-card-label { color: #86867E; }

/* Priority detail: real transcript excerpt of the weakest matching answer */
#icReportBody .ic-prio-detail-where { font: 500 10px/1.3 "Space Grotesk", "Albert Sans", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #2448FF; margin-bottom: 6px; }
#icReportBody .ic-prio-detail-q { font: 500 13px/1.45 "Inter", system-ui, sans-serif; color: #101010; margin-bottom: 8px; max-width: 62ch; }
#icReportBody .ic-prio-detail-excerpt { font-size: 12.5px; line-height: 1.55; color: #3B3B36; white-space: pre-wrap; max-width: 62ch; padding-left: 12px; border-left: 2px solid #E2E2DC; }
#icReportBody .ic-prio-detail-none { font-size: 12.5px; line-height: 1.55; color: #86867E; max-width: 60ch; }

/* Progress / history */
#icReportBody .icr-hist-sec { margin-top: 28px; }
#icReportBody .icr-hist-empty, #icReportBody .icr-hist-note { font-size: 12.5px; line-height: 1.5; color: #86867E; background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; padding: 16px 18px; }
#icReportBody .icr-hist-note { margin-top: 12px; }
#icReportBody .icr-hist-list { background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; overflow: hidden; }
#icReportBody .icr-hist-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid #E2E2DC; }
#icReportBody .icr-hist-row:first-child { border-top: 0; }
#icReportBody .icr-hist-row-current { background: #EFF4FD; }
#icReportBody .icr-hist-when { flex: 1 1 auto; font-size: 12.5px; color: #3B3B36; }
#icReportBody .icr-hist-score { font: 500 13.5px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; color: #101010; }
#icReportBody .icr-hist-delta { min-width: 42px; text-align: right; font: 500 12px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; }
#icReportBody .icr-hist-compare { margin-top: 14px; background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 10px; padding: 14px 18px 16px; }
#icReportBody .icr-hist-compare-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#icReportBody .icr-hist-compare-label { font-size: 12.5px; color: #86867E; }
#icReportBody .icr-hist-select { font: 400 12.5px/1.2 "Inter", system-ui, sans-serif; color: #101010; background: #FFFFFF; border: 1px solid #E2E2DC; border-radius: 8px; padding: 5px 8px; cursor: pointer; }
#icReportBody .icr-hist-dims { display: flex; flex-direction: column; gap: 0; }
#icReportBody .icr-hist-dim { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #F0F0EB; }
#icReportBody .icr-hist-dim:first-child { border-top: 0; }
#icReportBody .icr-hist-dim-label { flex: 1 1 auto; font-size: 13px; color: #101010; }
#icReportBody .icr-hist-dim-vals { display: inline-flex; align-items: baseline; gap: 8px; }
#icReportBody .icr-hist-dim-prev { font: 400 13px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; color: #A4A49C; }
#icReportBody .icr-hist-dim-arrow { color: #A4A49C; font-size: 12px; }
#icReportBody .icr-hist-dim-cur { font: 500 13px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; color: #101010; }
#icReportBody .icr-hist-dim-delta { min-width: 40px; text-align: right; font: 500 12px/1 "Space Grotesk", "Albert Sans", system-ui, sans-serif; }

  #rrThemeTestBtn {
    position: fixed; right: 14px; bottom: 14px; z-index: 9999;
    padding: 8px 12px; border-radius: 8px;
    background: #0d1117; color: #e6edf3; border: 1px solid #30363d;
    font: 600 12px/1 system-ui, sans-serif;
    cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }
  #rrThemeTestBtn:hover { border-color: #2f81f7; }

  /* Inline AI edit popover. Lives on document.body (position:fixed) so the CV
     zoom transform on #scaler never affects it. Class-based, --rr-* tokens. */
  .rr-iae { position: fixed; z-index: 9500; width: 300px; max-width: calc(100vw - 24px);
    background: var(--rr-surface); border: 1px solid var(--rr-border-strong);
    border-radius: var(--rr-radius); box-shadow: var(--rr-shadow-card);
    font-family: var(--rr-font-body); color: var(--rr-ink); padding: 12px; display: none; }
  .rr-iae.show { display: block; }
  .rr-iae-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
  .rr-iae-title { font-weight: 700; font-size: 12.5px; letter-spacing: -.01em; color: var(--rr-ink); }
  .rr-iae-x { border: none; background: none; cursor: pointer; color: var(--rr-ink-subtle);
    font-size: 17px; line-height: 1; padding: 0 2px; }
  .rr-iae-x:hover { color: var(--rr-ink); }
  .rr-iae-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
  .rr-iae-chip { font-size: 11px; font-weight: 600; color: var(--rr-accent-strong);
    background: var(--rr-accent-tint); border: 1px solid var(--rr-accent-border);
    border-radius: var(--rr-radius-pill); padding: 4px 10px; cursor: pointer;
    transition: .13s; font-family: inherit; }
  .rr-iae-chip:hover:not(:disabled) { background: var(--rr-accent-tint-2); }
  .rr-iae-chip:disabled { opacity: .5; cursor: default; }
  .rr-iae-row { display: flex; gap: 6px; }
  .rr-iae-input { flex: 1; min-width: 0; font-family: inherit; font-size: 12.5px;
    color: var(--rr-ink); background: var(--rr-surface); border: 1px solid var(--rr-border-strong);
    border-radius: var(--rr-radius-sm); padding: 7px 9px; outline: none; }
  .rr-iae-input:focus { border-color: var(--rr-accent); }
  .rr-iae-input:disabled { opacity: .6; }
  .rr-iae-go { font-family: inherit; font-size: 12.5px; font-weight: 700; color: #fff;
    background: var(--rr-accent); border: none; border-radius: var(--rr-radius-sm);
    padding: 7px 12px; cursor: pointer; white-space: nowrap; }
  .rr-iae-go:hover:not(:disabled) { background: var(--rr-accent-hover); }
  .rr-iae-go:disabled { opacity: .6; cursor: default; }
  .rr-iae-state { margin-top: 9px; font-size: 12px; color: var(--rr-ink-muted);
    display: flex; align-items: center; gap: 7px; }
  .rr-iae-state.err { color: #b42318; }
  .rr-iae-spin { width: 13px; height: 13px; flex: none; border: 2px solid var(--rr-accent-border);
    border-top-color: var(--rr-accent); border-radius: 50%; animation: rrIaeSpin .7s linear infinite; }
  @keyframes rrIaeSpin { to { transform: rotate(360deg); } }
  .rr-iae-review { margin-top: 9px; }
  .rr-iae-sug { font-size: 12.5px; line-height: 1.5; color: var(--rr-ink);
    background: var(--rr-accent-tint); border: 1px solid var(--rr-accent-border);
    border-radius: var(--rr-radius-sm); padding: 9px 10px; max-height: 168px; overflow: auto;
    white-space: pre-wrap; }
  .rr-iae-actions { display: flex; gap: 6px; margin-top: 9px; }
  .rr-iae-accept { flex: 1; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #fff;
    background: var(--rr-accent); border: none; border-radius: var(--rr-radius-sm); padding: 7px 10px; cursor: pointer; }
  .rr-iae-accept:hover { background: var(--rr-accent-hover); }
  .rr-iae-regen, .rr-iae-cancel { font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--rr-ink-muted); background: var(--rr-surface); border: 1px solid var(--rr-border-strong);
    border-radius: var(--rr-radius-sm); padding: 7px 10px; cursor: pointer; }
  .rr-iae-regen:hover, .rr-iae-cancel:hover { border-color: var(--rr-accent); color: var(--rr-accent-strong); }
  /* Headline-ideas option rows (shares the .rr-iae popover chrome). */
  .rr-iae-opts { margin-bottom: 2px; }
  .rr-iae-opt { display: block; width: 100%; text-align: left; font-family: inherit; font-size: 12.5px;
    line-height: 1.45; color: var(--rr-ink); background: var(--rr-accent-tint);
    border: 1px solid var(--rr-accent-border); border-radius: var(--rr-radius-sm);
    padding: 8px 10px; margin-bottom: 6px; cursor: pointer; transition: background .13s, border-color .13s; }
  .rr-iae-opt:hover { background: var(--rr-accent-tint-2); border-color: var(--rr-accent); }

/* ===== MOBILE RESPONSIVE LAYER (app-scoped) =====
   Owner: mobile UI/UX overhaul. Every rule below is scoped under `body.rr-authed`
   (the authenticated-app state class, toggled from Firebase auth, ABSENT pre-login)
   so nothing here can reach the landing page, sign-in/sign-up UI, Terms/Privacy/
   Cookie pages, or the cookie banner. Desktop (>=1024px) is never touched: all rules
   live inside max-width media queries.

   DO-NOT-TOUCH-UNSCOPED: selectors shared with the landing / pre-auth surfaces.
   NEVER write a bare rule for these; always keep the `body.rr-authed` prefix:
     button, input, select, textarea, a, .card, .btn, .rr-mode-tab,
     .apx-* (landing), #landing, .land-* (landing), .lpv3-* (legal pages).

   Breakpoints: <=1023px tablet-down, <=767px mobile (primary; verified 360-430px).

   Z-INDEX SCALE (mobile app chrome), use these vars, no ad-hoc values:
     content(1) < sticky surface CTA(--rrm-z-cta 900) < bottom tab bar(--rrm-z-nav 1000)
     < more sheet(--rrm-z-sheet 1100) < app modals(2000, unchanged) < toasts(--rrm-z-toast 2200)

   Per-surface sub-sections are appended below this foundations block, one per commit. */

/* ---------- Foundations: tokens/scale (mobile+tablet, in-layer only) ---------- */
@media (max-width: 1023px){
  body.rr-authed{
    --rrm-z-cta: 900;
    --rrm-z-nav: 1000;
    --rrm-z-sheet: 1100;
    --rrm-z-toast: 2200;
    --rrm-nav-h: 64px;                       /* bottom tab bar height (excl. safe area) */
    --rrm-safe-b: env(safe-area-inset-bottom, 0px);
    --rrm-safe-t: env(safe-area-inset-top, 0px);
  }
}

/* ---------- Foundations: touch, tap, inputs (mobile) ---------- */
@media (max-width: 767px){
  /* Kill double-tap zoom delay + grey tap flash on app interactives. */
  body.rr-authed button,
  body.rr-authed a,
  body.rr-authed [role="button"],
  body.rr-authed .jj-nav-item,
  body.rr-authed .jj-mob-btn,
  body.rr-authed .jj-mob-drawer-btn{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  /* Pressed state using existing tokens (no ad-hoc colors). */
  body.rr-authed button:active,
  body.rr-authed [role="button"]:active,
  body.rr-authed .jj-nav-item:active{ opacity: .72; }

  /* iOS Safari auto-zoom guard: text controls never below 16px on mobile. */
  body.rr-authed input,
  body.rr-authed select,
  body.rr-authed textarea{ font-size: 16px !important; }

  /* Long unbroken strings (URLs, tokens) never force horizontal scroll. */
  body.rr-authed .jj-page{ overflow-wrap: break-word; }

  /* Primary scroll container: no scroll-chaining to the page / pull-to-refresh. */
  body.rr-authed #jjMain{ overscroll-behavior: contain; }

  /* Full-height app container: dvh so mobile browser toolbars don't clip content
     (100vh fallback kept above for browsers without dvh support). */
  body.rr-authed #app{ min-height: 100vh; min-height: 100dvh; }
}

/* Hover affordances only where a real pointer exists (tap devices don't hover). */
@media (hover: hover) and (max-width: 767px){
  body.rr-authed .jj-mob-drawer-btn:hover{ background: var(--rr-accent-tint); }
}

/* ---------- Shell / navigation: bottom tab bar (mobile) ---------- */
@media (max-width: 767px){
  body.rr-authed #jjMobNav{
    height: var(--rrm-nav-h) !important;
    padding-bottom: var(--rrm-safe-b) !important;
    z-index: var(--rrm-z-nav) !important;
    background: var(--rr-surface) !important;
    border-top: 1px solid var(--rr-border) !important;
    box-shadow: 0 -8px 24px -14px rgba(17,17,20,.22) !important;
  }
  body.rr-authed .jj-mob-btn{
    min-height: 44px;
    color: var(--rr-ink-subtle) !important;
    gap: 3px;
  }
  body.rr-authed .jj-mob-btn.active{ color: var(--rr-accent) !important; }
  body.rr-authed .jj-mob-btn:active{ color: var(--rr-accent-strong) !important; }
  body.rr-authed .jj-mob-ico{ font-size: 21px; line-height: 1; }
  body.rr-authed .jj-mob-lbl{ font-size: 10px; font-weight: 600; letter-spacing: .01em; }

  /* Every scrollable surface clears the fixed tab bar + home indicator. */
  body.rr-authed .jj-page-body{
    padding-bottom: calc(var(--rrm-nav-h) + var(--rrm-safe-b) + 16px) !important;
  }

  /* The bottom tab bar REPLACES the desktop rail on mobile. The base app force-
     shows the 240px fixed #jjSidebar in JH mode at <=768 (it has no slide-off), so
     it overlays the left of every surface. Hide it (and the pro rail) on phones;
     specificity here (1,3,2) + later source order beat the base show rule (1,2,2).
     The sim-view 240px content offset is already reset to 0 at <=880 upstream. */
  body.rr-authed.rr-mode-jh nav.jj-sidebar#jjSidebar,
  body.rr-authed.rr-mode-pro nav.jj-sidebar#rrSidebar{ display: none !important; }
}

/* ---------- Shell / navigation: "More" slide-up sheet (mobile) ---------- */
@media (max-width: 767px){
  body.rr-authed #jjMobDrawer{
    z-index: var(--rrm-z-sheet) !important;
    bottom: calc(var(--rrm-nav-h) + var(--rrm-safe-b)) !important;
    background: var(--rr-surface) !important;
    border-top: 1px solid var(--rr-border) !important;
    border-radius: var(--rr-radius) var(--rr-radius) 0 0 !important;
    padding: 6px 10px 10px !important;
    box-shadow: 0 -10px 34px -8px rgba(17,17,20,.30) !important;
    overscroll-behavior: contain;
    animation: rrmSheetUp .22s cubic-bezier(.2,.8,.25,1);
  }
  body.rr-authed .jj-mob-sheet-grip{
    width: 36px; height: 4px; border-radius: var(--rr-radius-pill);
    background: var(--rr-border-strong); margin: 6px auto 8px;
  }
  body.rr-authed .jj-mob-sheet-title{
    font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--rr-ink-muted); padding: 0 6px 6px;
  }
  body.rr-authed .jj-mob-drawer-btn{
    display: flex !important; align-items: center; gap: 12px;
    min-height: 48px; width: 100%;
    font-size: 15px; font-weight: 500; color: var(--rr-ink) !important;
    border-radius: 12px !important; padding: 12px 12px !important;
  }
  body.rr-authed .jj-mob-drawer-btn i{ font-size: 20px; color: var(--rr-ink-muted); }
  body.rr-authed .jj-mob-drawer-btn:active{ background: var(--rr-accent-tint); }
  /* Account row, pinned at the bottom of the sheet below a divider so it
     reads as a distinct "you" section, matching the desktop rail pattern. */
  body.rr-authed .jj-mob-sheet-divider{ height: 1px; background: var(--rr-border); margin: 6px 4px 8px; }
  body.rr-authed .jj-mob-acct-trigger{
    display: flex !important; align-items: center; gap: 12px;
    padding: 10px 12px !important; border-radius: 12px !important; cursor: pointer;
  }
  body.rr-authed .jj-mob-acct-trigger .jj-profile-name{ color: var(--rr-ink); font-weight: 700; }
  body.rr-authed .jj-mob-acct-trigger .jj-profile-sub{ color: var(--rr-ink-muted); }
  body.rr-authed .jj-mob-acct-trigger .jj-rail-acct-chev{ margin-left: auto; color: var(--rr-ink-muted); }
  body.rr-authed .jj-mob-acct-trigger:active{ background: var(--rr-accent-tint); }
}
@keyframes rrmSheetUp{ from{ transform: translateY(14px); opacity: .3; } to{ transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  body.rr-authed #jjMobDrawer{ animation: none !important; }
}

/* ---------- Surface: Dashboard (#jjPage_dashboard, db2) ---------- */
/* Base already stacks to one column at <=960px; these rules fix the two things
   that break specifically on phones. */
@media (max-width: 767px){
  /* Funnel: the proportional bar (1fr track) gets squeezed to ~20-38px by the
     desktop 78px|1fr|auto|96px grid. Reflow so name/value/conversion sit on the
     top line and the track spans the FULL row width below -> bar is readable and
     genuinely proportional. Same DOM, same JS-set bar widths. */
  body.rr-authed #jjPage_dashboard .db2-fn-row{
    grid-template-columns: 1fr auto auto !important;
    grid-template-areas: "name val conv" "track track track" !important;
    gap: 7px 10px !important;
    align-items: center;
  }
  body.rr-authed #jjPage_dashboard .db2-fn-name{ grid-area: name; }
  body.rr-authed #jjPage_dashboard .db2-fn-val{ grid-area: val; }
  body.rr-authed #jjPage_dashboard .db2-fn-conv{ grid-area: conv; align-self: center; }
  body.rr-authed #jjPage_dashboard .db2-fn-track{ grid-area: track; height: 12px; }

  /* Sources donut: center the ring (~112px, under the 220 cap), legend below as a
     wrapped two-column list (was a tiny 80px ring crammed beside the legend). */
  body.rr-authed #jjPage_dashboard .db2-src-body{ flex-direction: column; align-items: center; gap: 16px; }
  body.rr-authed #jjPage_dashboard .db2-src-donut svg{ width: 112px !important; height: 112px !important; }
  body.rr-authed #jjPage_dashboard .db2-src-legend{
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; width: 100%;
  }

  /* Next best actions: comfortable tap target on the per-action CTA. */
  body.rr-authed #jjPage_dashboard .rr-action-button{ min-height: 44px; }

  /* Headline eases down a touch more on the narrowest phones. */
  body.rr-authed #jjPage_dashboard .db2-headline{ font-size: 22px; }
}

/* ---------- Surface: CV Builder (#jjPage_cv) ---------- */
/* Result screen desktop 3-col grid currently HIDES analysis + job-match on phones
   (@1180 drops right panel, @820 drops sidebar). Replace that with a segmented
   control that shows one real column at a time (visibility only, state kept). */
body.rr-authed #atsCvRoot .cv-mob-seg{ display: none; }
@media (max-width: 767px){
  /* The clFade entrance uses animation-fill-mode:both, which retains an identity
     transform on .cv-screen.on -> that establishes a containing block and breaks
     position:fixed for the sticky CTAs below. Drop it on mobile (!important beats
     the animation's retained value). */
  body.rr-authed #jjPage_cv .cv-screen.on{ animation: none !important; transform: none !important; }

  /* Segmented control, pinned under the header */
  body.rr-authed #atsCvRoot .cv-mob-seg{
    display: flex; gap: 4px; position: sticky; top: 0; z-index: var(--rrm-z-cta);
    background: var(--rr-surface); padding: 8px 10px; border-bottom: 1px solid var(--rr-border);
  }
  body.rr-authed #atsCvRoot .cv-mob-seg-btn{
    flex: 1; min-height: 40px; border: 1px solid var(--rr-border);
    background: var(--rr-surface); border-radius: 10px;
    font: 600 13px/1 'Plus Jakarta Sans', sans-serif; color: var(--rr-ink-muted);
    touch-action: manipulation;
  }
  body.rr-authed #atsCvRoot .cv-mob-seg-btn.on{
    background: var(--rr-accent-tint); color: var(--rr-accent-strong); border-color: var(--rr-accent-border);
  }

  /* Single-column: show only the selected column; keep the others in the DOM. */
  body.rr-authed #atsCvRoot .shell{ display: block !important; }
  body.rr-authed #atsCvRoot .sidebar,
  body.rr-authed #atsCvRoot .workspace,
  body.rr-authed #atsCvRoot .drawer-panel{ display: none !important; width: auto !important; }
  body.rr-authed #atsCvRoot.cv-mob-doc .workspace{ display: flex !important; }
  body.rr-authed #atsCvRoot.cv-mob-analysis .sidebar{ display: flex !important; }
  body.rr-authed #atsCvRoot.cv-mob-match .drawer-panel{ display: block !important; }

  /* Document fits width: JS sets CSS `zoom` on #scaler (reflows layout, unlike
     transform) so the fixed 794px A4 page shrinks its box to the viewport. The
     workspace + wrap are pinned to the viewport width, and the desktop editing
     chrome (toolbar/popouts/connectors) is hidden so the mobile Document view is a
     focused preview (mirrors the existing cv-preview mode). Deep editing stays a
     desktop affordance; the doc remains tap-editable. */
  body.rr-authed #atsCvRoot .workspace{
    width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important;
    padding-bottom: 84px;
  }
  body.rr-authed #atsCvRoot .page-wrap{
    width: 100% !important; max-width: 100vw !important;
    overflow-x: hidden !important; justify-content: flex-start !important;
    padding: 10px 8px 24px !important;
  }
  body.rr-authed #atsCvRoot .toolbar,
  body.rr-authed #atsCvRoot .popout,
  body.rr-authed #atsCvRoot .connector,
  body.rr-authed #atsCvRoot .fill-chip,
  body.rr-authed #atsCvRoot .cv-wshead{ display: none !important; }
  /* Declutter the tall desktop header on phones. Also drop the header's
     backdrop-filter on mobile: it establishes a containing block that would trap
     the position:fixed sticky action bar inside the header instead of the viewport. */
  body.rr-authed #atsCvRoot .header{ flex-wrap: wrap; max-width: 100vw; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body.rr-authed #atsCvRoot .h-left{ flex-wrap: wrap; min-width: 0; max-width: 100%; gap: 6px; }
  body.rr-authed #atsCvRoot .h-center{ display: none !important; }

  /* Reuse the header's Copy/Download as a sticky bottom bar (same handlers -> the
     acbRedCount red gate stays the backstop). Menu opens upward. */
  body.rr-authed #atsCvRoot .header .h-right{
    position: fixed; left: 0; right: 0; top: auto !important; height: auto;
    bottom: calc(var(--rrm-nav-h) + var(--rrm-safe-b));
    z-index: var(--rrm-z-cta); display: flex; gap: 8px; margin: 0; padding: 10px 12px;
    background: var(--rr-surface); border-top: 1px solid var(--rr-border);
  }
  body.rr-authed #atsCvRoot .header .h-right .btn{ flex: 1; min-height: 48px; justify-content: center; }
  body.rr-authed #atsCvRoot .header .h-right .tbar.zoom{ display: none; } /* fit-to-width handles zoom on mobile */
  body.rr-authed #atsCvRoot .header .h-right #dlMenu{ top: auto; bottom: calc(100% + 6px); }

  /* Compose (Inputs) screen: the grid/flex children default to min-width:auto
     (min-content), which lets the stepper + cards force the column wider than the
     viewport (clips on phones). Allow them to shrink. */
  body.rr-authed #jjMain{ max-width: 100vw; overflow-x: hidden; }
  body.rr-authed #jjPage_cv .cv-grid,
  body.rr-authed #jjPage_cv .cv-col-main,
  body.rr-authed #jjPage_cv .cv-col-aside,
  body.rr-authed #jjPage_cv .cvb-stepper,
  body.rr-authed #jjPage_cv .cvb-cv-cols,
  body.rr-authed #jjPage_cv .rr-vi__step{ min-width: 0 !important; max-width: 100% !important; }
  body.rr-authed #jjPage_cv .cvb-stepper{ overflow-x: auto; }

  /* Compose (Inputs) screen: sticky full-width Generate CTA. cv-grid already
     stacks at <=980. */
  body.rr-authed #jjPage_cv #cvScreenCompose{ padding-bottom: 76px; }
  body.rr-authed #jjPage_cv .cv-transform-btn{
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--rrm-nav-h) + var(--rrm-safe-b));
    z-index: var(--rrm-z-cta); width: auto; margin: 0; border-radius: 0;
    min-height: 52px; justify-content: center;
    box-shadow: 0 -8px 24px -14px rgba(17,17,20,.22);
  }
}

/* ---------- Surface: AI Job Search (#jjPage_sponsor) ---------- */
/* NOTE: this surface is a conversational AI chat (composer + AI-rendered result
   cards), NOT the filters-sidebar + results-table the generic spec assumed, so
   no filter drawer / no table-to-cards work applies. Mobile needs: dvh height so
   the chat area survives mobile browser toolbars, composer/result cards fit the
   viewport, and tap-friendly result actions. Result cards already flex-wrap and
   an existing @640 widens bubbles. */
@media (max-width: 767px){
  body.rr-authed #jjPage_sponsor .ajs-root{
    height: calc(100vh - 150px);
    height: calc(100dvh - 150px);
    min-height: 340px;
  }
  /* Chat scroll area shouldn't chain-scroll the page. */
  body.rr-authed #jjPage_sponsor .ajs-chat-area{ overscroll-behavior: contain; }
  /* Tap-friendly result + follow-up actions. */
  body.rr-authed #jjPage_sponsor .ajs-job-btn{ min-height: 40px; }
  body.rr-authed #jjPage_sponsor .ajs-followup-chip{ min-height: 44px; }
  /* Composer + about-you fill the width on phones. */
  body.rr-authed #jjPage_sponsor .ajs-composer-wrap,
  body.rr-authed #jjPage_sponsor .ajs-composer-dock,
  body.rr-authed #jjPage_sponsor .ajs-about-you{ max-width: 100% !important; }
}

/* ---------- Surface: Applications records-table CRM (#jjPage_apps) ---------- */
/* Kanban mobile rules (scroll-snap lanes, card-action tap targets) removed
   2026-07 with the board -- mobile now renders stacked .apx-card records
   instead (see #jjPage_apps.tl-theme .apx-cards, styles.css ~15250). */

/* ---------- Surface: Interview Prep (#jjPage_interview, rr-vi-live) ---------- */
/* Voice interview: animated orb + timer + record/mic control. NO changes to VAD
   thresholds or recording caps (logic untouched), presentation only. */
@media (max-width: 767px){
  /* Large, thumb-reachable record/mic control. */
  body.rr-authed #jjPage_interview .rr-vi-live__record{
    min-height: 56px; padding: 16px 28px; font-size: 16px; gap: 12px;
  }
  body.rr-authed #jjPage_interview .rr-vi-live__record .ic-rec-ico{ font-size: 16px; }
  /* Prominent timer. */
  body.rr-authed #jjPage_interview .rr-vi-live__timer{ font-size: 22px !important; }
  /* Secondary icon controls meet the 44px min. */
  body.rr-authed #jjPage_interview .rr-vi-live__icon-btn{ width: 44px !important; height: 44px !important; }
  /* No accidental horizontal overflow from the orb/waveform. */
  body.rr-authed #jjPage_interview .rr-vi-live__orb-slot{ max-width: 100%; }
}

/* ---------- Settings (#jjPage_settings) ---------- */
/* Grid already collapses to one column and an upstream rule sets 16px inputs;
   just guarantee comfortable controls + no overflow on phones. */
@media (max-width: 767px){
  body.rr-authed #jjPage_settings .st-grid,
  body.rr-authed #jjPage_settings .st-form-grid{ grid-template-columns: 1fr !important; }
  body.rr-authed #jjPage_settings button{ min-height: 44px; }
  body.rr-authed #jjPage_settings input,
  body.rr-authed #jjPage_settings select,
  body.rr-authed #jjPage_settings textarea{ font-size: 16px !important; width: 100%; }
}

/* ---------- Generic modals + toasts (app-wide chrome) ---------- */
/* Existing app modals already cap to the viewport (max-width:calc(100vw-32px) /
   max-width:500px + width:100%), so they don't overflow, keep them centered.
   On phones just add safe-area room, dvh max-height, and grow tap targets. */
@media (max-width: 767px){
  body.rr-authed .jj-modal{
    max-height: 92dvh !important;
    padding-bottom: calc(18px + var(--rrm-safe-b)) !important;
  }
  body.rr-authed .jj-modal-btns{ padding-bottom: calc(8px + var(--rrm-safe-b)) !important; }

  /* Toasts: full-width minus gutters, floated above the tab bar. */
  body.rr-authed .ip-mic-toast{
    left: 12px !important; right: 12px !important; transform: none !important;
    max-width: none !important; width: auto !important;
  }
}

   /* Keyboard-open: clear fixed chrome so nothing overlaps the focused field.
      Toggled by the mobile keyboard script via body.rrm-kb-open. */
   @media (max-width: 767px){
     body.rr-authed.rrm-kb-open #jjMobNav{ display: none !important; }
     body.rr-authed.rrm-kb-open #jjPage_cv .cv-transform-btn{ display: none !important; }
     body.rr-authed.rrm-kb-open #atsCvRoot .header .h-right{ display: none !important; }
   }

   /* -- Trial-expired banner: pin above app content on mobile --
      #app is a fixed 100vh, overflow:hidden flex column and .app-body's desktop
      min-height floor (calc(100vh - 56px)) ignores the banner, forcing it behind
      clipped content. Give the banner a stacking context above content, keep it in
      flow (content offsets below it; dismiss reclaims the space), drop the floor. */
   @media (max-width: 767px){
     body.rr-authed #rrTrialBanner{
       position: sticky; top: 0; flex-shrink: 0;
       z-index: var(--rrm-z-nav);
       padding: 8px 44px 8px 16px; text-align: center;
     }
     body.rr-authed #rrTrialBanner .rr-trial-banner-close{
       position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
       margin: 0; width: 36px; height: 36px;
       display: flex; align-items: center; justify-content: center;
     }
     body.rr-authed .app-body{ min-height: 0; }
     /* Find + Calendar clear the fixed tab bar (they don't use .jj-page-body). */
     body.rr-authed #jjPage_calendar.active{
       padding-bottom: calc(var(--rrm-nav-h) + var(--rrm-safe-b)) !important;
     }
     body.rr-authed #jjPage_find .fce{
       padding-bottom: calc(var(--rrm-nav-h) + var(--rrm-safe-b)) !important;
     }
   }

/* Pass 2: styled confirm modal (rrConfirm). Apollo-cream tokens with fallbacks. */
.rr-confirm-overlay{position:fixed;inset:0;background:rgba(26,22,20,0.45);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:rrConfirmFade .12s ease}
.rr-confirm-card{background:var(--surface,#ffffff);border:1px solid var(--border,#e2ddd3);border-radius:var(--r-lg,12px);box-shadow:0 24px 64px rgba(80,60,40,0.22);max-width:400px;width:100%;padding:22px 22px 18px;font-family:var(--font-body,system-ui,sans-serif)}
.rr-confirm-title{font-size:16px;font-weight:700;color:var(--text,#1a1614);margin:0 0 8px;letter-spacing:-0.01em}
.rr-confirm-body{font-size:13.5px;line-height:1.55;color:var(--text2,#3d3530);margin:0 0 18px}
.rr-confirm-actions{display:flex;gap:10px;justify-content:flex-end}
.rr-confirm-btn{font-family:var(--font-body,system-ui,sans-serif);font-size:13px;font-weight:600;padding:9px 16px;border-radius:var(--r,8px);border:1px solid transparent;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,filter .15s ease,transform .1s ease}
.rr-confirm-btn:active{transform:translateY(0) scale(.98)}
.rr-confirm-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(36,72,255,.35)}
.rr-confirm-cancel{background:transparent;border-color:var(--border,#e2ddd3);color:var(--text,#1a1614)}
.rr-confirm-cancel:hover{background:var(--surface2,#f0ede8)}
.rr-confirm-primary{background:var(--rr-accent,#2448ff);color:#ffffff}
.rr-confirm-primary:hover{filter:brightness(1.06)}
.rr-confirm-danger{background:#c0362c;color:#ffffff}
.rr-confirm-danger:hover{filter:brightness(1.06)}
@keyframes rrConfirmFade{from{opacity:0}to{opacity:1}}

/* Pass 3: Applications kanban zero-state (P14) removed 2026-07 -- the
   .ap-zero/.ap-board--empty markup it targeted is gone with the board; the
   records-table CRM's own empty state is #jjPage_apps.tl-theme .apx-empty
   (styles.css ~15250). */

/* The board's snap lanes (85vw each on phones; 220px min columns on tablet)
   give #apBoard a min-content width far beyond narrow viewports, and every
   ancestor in the flex chain (.jj-main flex item, .jj-root, .sim-view/
   .app-body) defaults to min-width:auto, so that min-content propagated all
   the way up: .app-body rendered ~1200px wide inside the overflow-clipped
   #app, pushing the page head, stat tiles, filter pills and the action-bar
   CTA off-screen with no way to scroll to them (pre-existing on main,
   reproduced at 375px and 768px). Pin the whole chain to the viewport below
   the 880px sidebar breakpoint so only the board itself scrolls. */
@media (max-width: 880px){
  body.rr-authed .app-body,
  body.rr-authed .sim-view,
  body.rr-authed .jj-root,
  body.rr-authed .jj-main,
  body.rr-authed .jj-page{ min-width: 0 !important; max-width: 100vw !important; }
}

/* Single-plan hard paywall (body.rr-sp-locked, set only when RR_SINGLE_PLAN
   is enabled and the signed-in user has no active subscription): the
   applications tracker goes read-only, cards and columns stay visible, but
   every write affordance (add, move, delete, edit, import) is inert. */
body.rr-sp-locked #jjPage_apps .ap-card-move,
body.rr-sp-locked #jjPage_apps .ap-card-actions,
body.rr-sp-locked #jjPage_apps .ap-zero-cta,
body.rr-sp-locked #jjPage_apps .ap-ab-cta,
body.rr-sp-locked #jjPage_apps .ap-qa-overlay,
body.rr-sp-locked #jjPage_apps [onclick*="apQuickAdd"]{ pointer-events:none; opacity:.45; }
body.rr-sp-locked #jjPage_apps .ap-card{ cursor:default; }
/* .ap-zero-* display rules removed 2026-07 with the kanban zero-state above
   -- the .ap-zero-cta selector in the paywall rule just above stays (it's
   part of a longer selector list still matched by .ap-qa-overlay and
   [onclick*="apQuickAdd"], both still live on the new add-application flow). */

/* Pass 3: boot skeleton (P22). Neutral app-shell shown only while cached-auth restores. */
#rrBootSkeleton{display:none}
body.rr-booting #rrBootSkeleton{display:flex;position:fixed;inset:0;z-index:9998;background:var(--bg,#f0ede8)}
body.rr-booting #landing{display:none!important}
@keyframes rrbsShimmer{0%{opacity:.55}50%{opacity:1}100%{opacity:.55}}
#rrBootSkeleton .rrbs-rail{width:212px;flex-shrink:0;background:var(--surface,#ffffff);border-right:1px solid var(--border,#e2ddd3);padding:22px 16px;display:flex;flex-direction:column;gap:14px}
#rrBootSkeleton .rrbs-logo{height:26px;width:120px;border-radius:6px;background:var(--surface2,#e8e4de);animation:rrbsShimmer 1.4s ease-in-out infinite}
#rrBootSkeleton .rrbs-nav{height:32px;border-radius:8px;background:var(--surface2,#e8e4de);animation:rrbsShimmer 1.4s ease-in-out infinite}
#rrBootSkeleton .rrbs-main{flex:1;padding:28px 32px;display:flex;flex-direction:column;gap:20px;min-width:0}
#rrBootSkeleton .rrbs-topbar{height:40px;width:60%;border-radius:10px;background:var(--surface2,#e8e4de);animation:rrbsShimmer 1.4s ease-in-out infinite}
#rrBootSkeleton .rrbs-cards{display:flex;gap:16px;flex-wrap:wrap}
#rrBootSkeleton .rrbs-card{flex:1;min-width:180px;height:150px;border-radius:12px;background:var(--surface2,#e8e4de);animation:rrbsShimmer 1.4s ease-in-out infinite}
@media (max-width:767px){#rrBootSkeleton .rrbs-rail{display:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   CV Builder redesign (design handoff cv-builder-3a, light variant).
   Scoped to #jjPage_cv, cvx- prefixed. Deliberately light-mode with literal
   token values from the handoff: this screen is the light app variant of the
   builder, independent of the dzc chrome. Appended at end of file so it wins
   equal-specificity ties against the legacy cv-/cvb- blocks above; selectors
   that must beat the inline dzc override block in index.html carry an extra
   class for higher specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page frame */
#jjPage_cv.jj-page { background: #f7f6f3; }
#jjPage_cv .cvx-hero { max-width: 1300px; margin: 0 auto; padding: 6px 0 0; font-family: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif; }
#jjPage_cv .cvx-h1 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: #17130e; }
#jjPage_cv .cvx-sub { margin: 10px 0 0; font-size: 15px; color: #67625b; }
#jjPage_cv:not(:has(#cvScreenResult.on)) .jj-page-body { max-width: 1300px; margin: 0 auto; }
#jjPage_cv:has(#cvScreenResult.on) .cvx-hero,
#jjPage_cv:has(#cvScreenResult.on) .cvx-card,
#jjPage_cv:has(#cvScreenResult.on) .cvx-footnote { display: none; }
#jjPage_cv #cvScreenCompose { padding-bottom: 0; }
#jjPage_cv .cvx-footnote { display: flex; justify-content: center; margin-top: 16px; font-size: 12.5px; color: #96918a; }

/* Container card */
#jjPage_cv .cvx-card {
  margin-top: 28px; background: #fff; border: 1px solid #e7e4de; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(20,15,5,0.05); overflow: hidden;
  font-family: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif; color: #17130e;
}
#jjPage_cv .cvx-card .cvx-mono { font-family: ui-monospace, Menlo, 'SF Mono', monospace; }
#jjPage_cv .cvx-mono { font-family: ui-monospace, Menlo, 'SF Mono', monospace; }

/* Grid */
#jjPage_cv .cvx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; }
#jjPage_cv .cvx-col-form { padding: 36px 40px; border-right: 1px solid #edeae4; min-width: 0; }
#jjPage_cv .cvx-col-preview { padding: 36px 36px 32px; display: flex; flex-direction: column; gap: 20px; background: #fdfcfb; min-width: 0; }

/* Shared bits */
#jjPage_cv .cvx-label { font-size: 15px; font-weight: 600; color: #17130e; display: block; }
#jjPage_cv .cvx-divider { height: 1px; background: #edeae4; margin: 28px 0; }
#jjPage_cv .cvx-hint { font-size: 12px; color: #96918a; }
#jjPage_cv .cvx-link { font-size: 13px; font-weight: 600; color: #2563EB; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
#jjPage_cv .cvx-link:hover { color: #1d4ed8; }
#jjPage_cv .cvx-link.quiet { color: #67625b; }
#jjPage_cv .cvx-link.quiet:hover { color: #b91c1c; }
#jjPage_cv .cvx-icircle { width: 34px; height: 34px; border-radius: 999px; background: #e6eeff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
#jjPage_cv .cvx-icircle i { font-size: 15px; color: #2563EB; }
#jjPage_cv .cvx-icircle.green { background: #e3f5ec; }
#jjPage_cv .cvx-icircle.green i { color: #16a34a; font-size: 14px; }
#jjPage_cv .cvx-icircle.grey { background: #f2f0ec; }
#jjPage_cv .cvx-icircle.grey i { color: #96918a; }
#jjPage_cv .cvx-icircle.sm { width: 26px; height: 26px; }
#jjPage_cv .cvx-icircle.sm i { font-size: 12px; }
#jjPage_cv .cvx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Textareas + fields */
#jjPage_cv .cvx-field { position: relative; display: block; margin-top: 14px; max-width: 640px; }
#jjPage_cv .cvx-field textarea {
  width: 100%; min-height: 150px; background: #fff; border: 1px solid #e2dfd9; border-radius: 10px;
  padding: 13px 15px 34px; font-size: 13px; line-height: 1.6; resize: vertical; box-sizing: border-box;
  font-family: 'DM Sans', sans-serif; color: #17130e;
}
#jjPage_cv .cvx-field textarea::placeholder, #jjPage_cv .cvx-voice-area textarea::placeholder { color: #96918a; }
#jjPage_cv .cvx-field textarea:focus, #jjPage_cv .cvx-voice-area textarea:focus {
  outline: none; border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
#jjPage_cv .cvx-count { position: absolute; right: 12px; bottom: 12px; font-size: 12px; color: #96918a; font-variant-numeric: tabular-nums; pointer-events: none; }
#jjPage_cv .cvx-cjk { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: #e3edff; color: #2563EB; font-size: 11px; font-weight: 600; pointer-events: none; }
#jjPage_cv .cvx-cjk i { font-size: 12px; }
#jjPage_cv .cvx-field-jd { max-width: none; margin-top: 12px; }
#jjPage_cv .cvx-field-jd textarea { min-height: 120px; font-size: 14px; line-height: 1.55; padding-bottom: 30px; }

/* Source cards */
#jjPage_cv .cvx-src-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; max-width: 640px; }
#jjPage_cv .cvx-src-card {
  border: 1px solid #e2dfd9; background: #fff; border-radius: 12px; padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer;
  transition: background 200ms, border-color 200ms; font-family: inherit; color: inherit;
}
#jjPage_cv .cvx-src-card.selected { border: 1.5px solid #2563EB; background: #eef4ff; padding: 23.5px 19.5px; }
#jjPage_cv .cvx-src-card > i { font-size: 24px; color: #2563EB; }
#jjPage_cv .cvx-src-card .t { font-size: 14.5px; font-weight: 600; }
#jjPage_cv .cvx-src-card .d { font-size: 12.5px; line-height: 1.5; color: #67625b; }
#jjPage_cv .cvx-chip-rec { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: #dbe7fd; color: #2563EB; font-size: 11.5px; font-weight: 600; margin-top: 2px; }

/* Upload flow */
#jjPage_cv .cvx-upzone {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1.5px dashed #b7cdf6; background: #f3f7ff; border-radius: 12px; padding: 14px 16px;
  cursor: pointer; margin-top: 14px; max-width: 640px; font-family: inherit; color: inherit; box-sizing: border-box;
  transition: background 200ms, border-color 200ms;
}
#jjPage_cv .cvx-upzone:hover, #jjPage_cv .cvx-upzone.drag { background: #ecf3ff; border-color: #2563EB; }
#jjPage_cv .cvx-uprow { display: flex; align-items: center; gap: 14px; border: 1px solid #e2dfd9; border-radius: 12px; padding: 14px 16px; margin-top: 14px; max-width: 640px; box-sizing: border-box; }
#jjPage_cv .cvx-uprow.done { border-color: #bfe3d0; background: #f4fbf7; }
#jjPage_cv .cvx-upmain { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
#jjPage_cv .cvx-upmain .t { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#jjPage_cv .cvx-upmain .d { font-size: 12px; color: #67625b; }
#jjPage_cv .cvx-upmain .d.green { font-size: 12.5px; color: #16a34a; }
#jjPage_cv .cvx-upbar { display: block; width: 100%; height: 4px; border-radius: 999px; background: #edeae4; overflow: hidden; margin-top: 6px; }
#jjPage_cv .cvx-upbar span { display: block; height: 100%; background: #2563EB; width: 0; animation: cvxUpbarFill 1.4s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes cvxUpbarFill { from { width: 0; } to { width: 92%; } }
#jjPage_cv .cvx-uperr { margin-top: 10px; max-width: 640px; font-size: 12.5px; line-height: 1.5; color: #b91c1c; }

/* Segmented controls (role tabs + tone) */
#jjPage_cv .cvx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #fbfaf8; border: 1px solid #e7e4de; margin-top: 14px; }
#jjPage_cv .cvx-seg > button {
  padding: 8px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: #67625b;
  cursor: pointer; user-select: none; background: transparent; border: 0; font-family: inherit;
  transition: background 200ms, color 200ms; box-shadow: none; margin: 0; line-height: 1.35;
}
#jjPage_cv .cvx-seg > button.active { background: #e3edff; color: #2563EB; font-weight: 600; }
#jjPage_cv .cvx-toneseg .cv-tone-btn { padding: 8px 18px; font-weight: 600; }
#jjPage_cv .cvx-toneseg .cv-tone-btn.active { background: #e3edff; color: #2563EB; border: 0; }
#jjPage_cv .cvx-tone-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#jjPage_cv .cvx-tone-desc { font-size: 12.5px; color: #96918a; }

/* Applications list */
#jjPage_cv .cvx-apps { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-width: 640px; }
#jjPage_cv .cvx-apps #cvxAppsList { display: flex; flex-direction: column; gap: 10px; }
#jjPage_cv .cvx-app-row {
  display: flex; align-items: center; gap: 14px; border: 1px solid #e2dfd9; background: #fff; border-radius: 12px;
  padding: 13px 16px; cursor: pointer; transition: background 200ms, border-color 200ms;
  font-family: inherit; color: inherit; text-align: left; width: 100%; box-sizing: border-box;
}
#jjPage_cv .cvx-app-row.selected { border: 1.5px solid #2563EB; background: #f3f7ff; padding: 12.5px 15.5px; }
#jjPage_cv .cvx-app-row .radio { width: 18px; height: 18px; border-radius: 999px; border: 2px solid #d8d4cd; display: flex; align-items: center; justify-content: center; flex: none; transition: border-color 200ms; box-sizing: border-box; }
#jjPage_cv .cvx-app-row .radio b { width: 8px; height: 8px; border-radius: 999px; background: #2563EB; opacity: 0; transition: opacity 150ms; }
#jjPage_cv .cvx-app-row.selected .radio { border-color: #2563EB; }
#jjPage_cv .cvx-app-row.selected .radio b { opacity: 1; }
#jjPage_cv .cvx-app-row .main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
#jjPage_cv .cvx-app-row .t { font-size: 13.5px; font-weight: 600; }
#jjPage_cv .cvx-app-row .d { font-size: 12.5px; color: #67625b; }
#jjPage_cv .cvx-app-row .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: #f2f0ec; color: #67625b; font-size: 11.5px; font-weight: 500; flex: none; }
#jjPage_cv .cvx-apps-empty { font-size: 12.5px; line-height: 1.55; color: #96918a; border: 1px dashed #e2dfd9; border-radius: 12px; padding: 14px 16px; }
/* Bug 2: actionable note under the saved-applications list — how to add a
   missing JD, or an honesty line when the one on file came from the listing
   rather than the user. Same dashed-panel language as the empty state. */
#jjPage_cv .cvx-apps-note { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: #67625b; border: 1px dashed #e2dfd9; border-radius: 12px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#jjPage_cv .cvx-apps-note[hidden] { display: none; }
#jjPage_cv .cvx-apps-note button { flex: none; border: 1px solid #d8d4cd; background: #fff; color: #2f2a24; font: inherit; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
#jjPage_cv .cvx-apps-note button:hover { border-color: #b9b3aa; }

/* Keyword pills */
#jjPage_cv .cvx-kw-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
#jjPage_cv .cvx-kw { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: #e3edff; color: #2563EB; font-size: 11px; font-weight: 600; }

/* CV-ready row */
#jjPage_cv .cvx-ready { margin-top: 16px; border: 1px solid #e7e4de; border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; max-width: 420px; }
#jjPage_cv .cvx-ready .cvx-icircle { width: 36px; height: 36px; }
#jjPage_cv .cvx-ready .cvx-icircle i { font-size: 16px; }
#jjPage_cv .cvx-ready-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
#jjPage_cv .cvx-ready .t { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#jjPage_cv .cvx-ready .s { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #67625b; }
#jjPage_cv .cvx-ready .s i { font-size: 13px; }
#jjPage_cv .cvx-ready .s.green { color: #16a34a; }
#jjPage_cv .cvx-ready .s.blue { color: #2563EB; }
#jjPage_cv .cvx-ready .s.blue i { animation: spin 1s linear infinite; }
#jjPage_cv .cvx-ready .s.amber { color: #d97706; }

/* Voice sample */
#jjPage_cv .cvx-voice { margin-top: 14px; }
#jjPage_cv .cvx-voice-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #2563EB; cursor: pointer; user-select: none; background: none; border: 0; padding: 0; font-family: inherit; }
#jjPage_cv .cvx-voice-link:hover { color: #1d4ed8; }
#jjPage_cv .cvx-voice-link i { font-size: 11px; transition: transform 200ms cubic-bezier(0.22,1,0.36,1); }
#jjPage_cv .cvx-voice.open .cvx-voice-link i { transform: rotate(90deg); }
#jjPage_cv .cvx-voice-area { margin-top: 12px; max-width: 640px; }
#jjPage_cv .cvx-voice-area textarea { width: 100%; min-height: 88px; background: #fff; border: 1px solid #e2dfd9; border-radius: 10px; padding: 13px 15px; font-size: 13px; line-height: 1.6; resize: vertical; box-sizing: border-box; font-family: 'DM Sans', sans-serif; color: #17130e; }
#jjPage_cv .cvx-voice-note { margin: 8px 0 0; font-size: 12px; color: #96918a; }

/* Error banner */
#jjPage_cv .cvx-error { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; max-width: 640px; border: 1px solid #f3d1cc; background: #fdf6f5; border-radius: 12px; padding: 13px 15px; }
#jjPage_cv .cvx-error > i { font-size: 16px; color: #b91c1c; margin-top: 1px; }
#jjPage_cv .cvx-error .t { font-size: 13px; font-weight: 600; color: #b91c1c; }
#jjPage_cv .cvx-error .d { font-size: 12.5px; line-height: 1.5; color: #67625b; margin-top: 2px; }

/* Right column: preview stage */
#jjPage_cv .cvx-stage { position: relative; background: #ece3d5; border-radius: 14px; height: 360px; overflow: hidden; flex: none; }
#jjPage_cv .cvx-paper { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); width: 198px; background: #fff; border-radius: 8px; box-shadow: 0 16px 32px -14px rgba(60,45,20,0.4); padding: 18px 16px; display: flex; flex-direction: column; gap: 7px; }
#jjPage_cv .cvx-paper span { border-radius: 4px; }
#jjPage_cv .cvx-float-chip { position: absolute; top: 26px; right: 20px; background: #fff; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(60,45,20,0.35); padding: 13px 15px; width: 180px; display: flex; flex-direction: column; gap: 8px; }
#jjPage_cv .cvx-float-chip .ic { width: 26px; height: 26px; border-radius: 8px; background: #e6eeff; display: flex; align-items: center; justify-content: center; }
#jjPage_cv .cvx-float-chip .ic i { font-size: 13px; color: #2563EB; }
#jjPage_cv .cvx-float-chip .t { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
#jjPage_cv .cvx-minibar { width: 100%; height: 4px; border-radius: 999px; background: #edeae4; overflow: hidden; }
#jjPage_cv .cvx-minibar span { display: block; height: 100%; background: #2563EB; }
#jjPage_cv .cvx-float-check { position: absolute; bottom: 26px; left: 20px; background: #fff; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(60,45,20,0.35); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
#jjPage_cv .cvx-stage-label { position: absolute; bottom: 14px; right: 20px; font-size: 11.5px; font-weight: 500; color: #8a7f6d; }

/* Promises */
#jjPage_cv .cvx-promises { background: #fff; border: 1px solid #e7e4de; border-radius: 14px; padding: 6px 20px; }
#jjPage_cv .cvx-promise { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid #edeae4; }
#jjPage_cv .cvx-promise:last-child { border-bottom: none; }
#jjPage_cv .cvx-promise .cvx-icircle { width: 36px; height: 36px; background: #e8f0fe; }
#jjPage_cv .cvx-promise .cvx-icircle i { font-size: 16px; }
#jjPage_cv .cvx-promise .body { min-width: 0; }
#jjPage_cv .cvx-promise .t { display: block; font-size: 13.5px; font-weight: 600; }
#jjPage_cv .cvx-promise .d { font-size: 12.5px; color: #67625b; }

/* CV history card (rehomed into the light right rail) */
#jjPage_cv .cvx-aside-card { background: #fff; border: 1px solid #e7e4de; border-radius: 14px; padding: 16px 18px; }
#jjPage_cv .cvx-aside-title { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: #17130e; }
#jjPage_cv .cvx-aside-card .cvh-item { border-color: #e7e4de; }
#jjPage_cv .cvx-aside-card .cvh-item:hover { border-color: #2563EB; }

/* Footer bar */
#jjPage_cv .cvx-footer { border-top: 1px solid #edeae4; padding: 18px 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
#jjPage_cv .cvx-privacy { display: flex; align-items: flex-start; gap: 10px; max-width: 720px; font-size: 12.5px; line-height: 1.55; color: #67625b; }
#jjPage_cv .cvx-privacy > i { font-size: 17px; color: #2563EB; margin-top: 1px; }
#jjPage_cv .cvx-privacy u { cursor: pointer; }
#jjPage_cv .cvx-privacy u:hover { color: #17130e; }
#jjPage_cv .cvx-pop-anchor { position: relative; display: inline-block; }
#jjPage_cv .cvx-pop { display: none; position: absolute; bottom: calc(100% + 10px); left: -10px; width: 300px; background: #fff; border: 1px solid #e7e4de; border-radius: 12px; box-shadow: 0 24px 48px -12px rgba(20,15,5,0.25); padding: 14px 16px; z-index: 30; text-align: left; }
#jjPage_cv .cvx-pop.open { display: block; }
#jjPage_cv .cvx-pop .head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: #17130e; }
#jjPage_cv .cvx-pop .head i { font-size: 12px; color: #96918a; cursor: pointer; }
#jjPage_cv .cvx-pop .body { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: #67625b; }
#jjPage_cv .cvx-cta-group { display: flex; align-items: center; gap: 16px; flex: none; font-size: 13px; color: #67625b; }
#jjPage_cv .cvx-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; width: auto; margin: 0;
  border-radius: 11px; background: #2563EB; color: #fff; border: none;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 200ms;
}
#jjPage_cv .cvx-btn:hover { background: #1d4ed8; }
#jjPage_cv .cvx-btn i { font-size: 14px; }
#jjPage_cv .cvx-btn.disabled { background: #b7c3dc; cursor: not-allowed; }
#jjPage_cv .cvx-btn.disabled:hover { background: #b7c3dc; }

/* ── Loading screen (spatial, light) ── */
#jjPage_cv #cvScreenGenerating { background: #fdfcfb; font-family: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif; color: #17130e; }
#jjPage_cv .cvx-load-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 40px; border-bottom: 1px solid #edeae4; }
#jjPage_cv .cvx-load-head .t { font-size: 12.5px; font-weight: 600; }
#jjPage_cv .cvx-load-head .m { font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; color: #96918a; }
#jjPage_cv .cvx-load-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); }
#jjPage_cv .cvx-load-left { display: flex; flex-direction: column; padding: 40px 0 32px 40px; min-height: 470px; box-sizing: border-box; }
#jjPage_cv .cvx-enter { animation: cvxEnter 600ms cubic-bezier(0.22,1,0.36,1) both; }
@keyframes cvxEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
#jjPage_cv .cvx-big-pct { display: block; font-size: 88px; font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; font-variant-numeric: tabular-nums; color: #17130e; }
#jjPage_cv .cvx-step-name { display: block; margin-top: 12px; font-size: 15px; font-weight: 500; max-width: 280px; line-height: 1.4; }
#jjPage_cv .cvx-step-meta { display: block; margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; color: #2563EB; transition: color 300ms; }
#jjPage_cv .cvx-step-meta.fin { color: #16a34a; }
#jjPage_cv .cvx-timeline { position: relative; margin-top: 32px; display: flex; flex-direction: column; }
#jjPage_cv .cvx-timeline .rail { position: absolute; left: 3.5px; top: 14px; bottom: 14px; width: 1px; background: #e7e4de; }
#jjPage_cv .cvx-timeline .trow { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 0; animation: cvxEnter 600ms cubic-bezier(0.22,1,0.36,1) both; }
#jjPage_cv .cvx-timeline .trow .dot { width: 8px; height: 8px; border-radius: 999px; background: #fdfcfb; border: 1px solid #cfcac2; box-sizing: border-box; transition: background 300ms, border-color 300ms, box-shadow 300ms; flex: none; }
#jjPage_cv .cvx-timeline .trow span:last-child { font-size: 13px; font-weight: 400; color: #96918a; transition: color 300ms; }
#jjPage_cv .cvx-timeline .trow.cur .dot { background: #2563EB; border-color: #2563EB; box-shadow: 0 0 0 4px rgba(37,99,235,0.15); }
#jjPage_cv .cvx-timeline .trow.cur span:last-child { color: #17130e; font-weight: 600; }
#jjPage_cv .cvx-timeline .trow.done .dot { background: #17130e; border-color: #17130e; }
#jjPage_cv .cvx-timeline .trow.done span:last-child { color: #67625b; }
#jjPage_cv .cvx-cancel { margin-top: auto; align-self: flex-start; font-size: 13px; font-weight: 600; color: #96918a; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
#jjPage_cv .cvx-cancel:hover { color: #17130e; }
#jjPage_cv .cvx-load-stage { position: relative; border-left: 1px solid #edeae4; perspective: 1400px; overflow: hidden; }
#jjPage_cv .cvx-parallax { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 400ms cubic-bezier(0.22,1,0.36,1); }
#jjPage_cv .cvx-breathe { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; animation: cvxBreathe 6s ease-in-out infinite; }
@keyframes cvxBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
#jjPage_cv .cvx-sheet-rise { transform-style: preserve-3d; animation: cvxEnter 700ms cubic-bezier(0.22,1,0.36,1) 160ms both; }
#jjPage_cv .cvx-sheet {
  position: relative; width: 250px; background: #fff; border: 1px solid #edeae4; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20,15,5,0.04), 0 32px 64px -28px rgba(30,20,5,0.35);
  padding: 26px 22px; min-height: 320px; box-sizing: border-box; display: flex; flex-direction: column;
  transform: rotateY(-6deg) rotateX(1.5deg); transition: transform 900ms cubic-bezier(0.22,1,0.36,1);
}
#jjPage_cv .cvx-sheet.fin { transform: rotateY(0deg) rotateX(0deg); }
#jjPage_cv .cvx-sheet .ln { display: block; border-radius: 3px; opacity: 0; transition: opacity 500ms cubic-bezier(0.22,1,0.36,1); }
#jjPage_cv .cvx-sheet .ln.on { opacity: 1; }
#jjPage_cv .cvx-rule { position: absolute; left: 0; right: 0; transition: top 800ms cubic-bezier(0.22,1,0.36,1), opacity 400ms; pointer-events: none; }
#jjPage_cv .cvx-rule .line { display: block; height: 1px; background: #2563EB; }
#jjPage_cv .cvx-rule .tab { position: absolute; right: calc(100% + 10px); top: -6px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; color: #2563EB; white-space: nowrap; }
#jjPage_cv .cvx-fin-foot { position: absolute; left: 22px; right: 22px; bottom: 16px; display: none; align-items: center; justify-content: space-between; border-top: 1px solid #e3f5ec; padding-top: 10px; }
#jjPage_cv .cvx-fin-foot.on { display: flex; }
#jjPage_cv .cvx-fin-foot .l { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #16a34a; }
#jjPage_cv .cvx-fin-foot .l i { font-size: 13px; }
#jjPage_cv .cvx-fin-foot .r { font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; color: #16a34a; }
#jjPage_cv .cvx-stage-note { position: absolute; bottom: 16px; right: 20px; font-size: 11px; font-weight: 500; color: #b5b0a9; }
#jjPage_cv .cvx-load-bar { height: 3px; background: #f2f0ec; }
#jjPage_cv .cvx-load-bar span { display: block; height: 100%; background: #2563EB; width: 100%; transform: scaleX(0); transform-origin: left center; }

/* Keyboard focus */
#jjPage_cv .cvx-src-card:focus-visible, #jjPage_cv .cvx-seg > button:focus-visible,
#jjPage_cv .cvx-upzone:focus-visible, #jjPage_cv .cvx-app-row:focus-visible,
#jjPage_cv .cvx-link:focus-visible, #jjPage_cv .cvx-voice-link:focus-visible,
#jjPage_cv .cvx-btn:focus-visible, #jjPage_cv .cvx-cancel:focus-visible {
  outline: 2px solid #3B82F6; outline-offset: 2px;
}

/* Responsive */
@media (max-width: 1360px) {
  #jjPage_cv .cvx-grid { grid-template-columns: minmax(0, 1fr) 380px; }
  #jjPage_cv .cvx-col-form { padding: 30px 32px; }
  #jjPage_cv .cvx-col-preview { padding: 30px 28px 26px; }
}
@media (max-width: 1080px) {
  #jjPage_cv .cvx-grid { grid-template-columns: 1fr; }
  #jjPage_cv .cvx-col-form { border-right: none; }
  #jjPage_cv .cvx-col-preview { border-top: 1px solid #edeae4; }
  #jjPage_cv .cvx-load-grid { grid-template-columns: 1fr; }
  #jjPage_cv .cvx-load-left { min-height: 0; padding: 32px 32px 24px; }
  #jjPage_cv .cvx-cancel { margin-top: 24px; }
  #jjPage_cv .cvx-load-stage { border-left: none; border-top: 1px solid #edeae4; min-height: 420px; }
}
@media (max-width: 767px) {
  #jjPage_cv .cvx-h1 { font-size: 30px; }
  #jjPage_cv .cvx-col-form { padding: 22px 18px; }
  #jjPage_cv .cvx-col-preview { padding: 22px 18px; }
  #jjPage_cv .cvx-src-grid { grid-template-columns: 1fr; }
  #jjPage_cv .cvx-footer { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; }
  #jjPage_cv .cvx-cta-group { justify-content: space-between; }
  #jjPage_cv .cvx-stage { height: 300px; }
  #jjPage_cv .cvx-big-pct { font-size: 64px; }
  #jjPage_cv .cvx-load-head { padding: 12px 18px; }
  #jjPage_cv .cvx-load-left { padding: 24px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  #jjPage_cv .cvx-enter, #jjPage_cv .cvx-timeline .trow, #jjPage_cv .cvx-sheet-rise { animation: none; }
  #jjPage_cv .cvx-breathe { animation: none; }
  #jjPage_cv .cvx-parallax { transition: none; }
  #jjPage_cv .cvx-upbar span { animation: none; width: 92%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SWISS SETTINGS (owner, 2026-08-13) — first page of the app-wide Swiss
   restyle, matching the onboarding overlay and /pricing: #F4F4F2 ground,
   #111111 ink, hairline rules (#DEDEDA minor / #111111 section), red
   #E8341F accents, 'Instrument Sans' throughout, uppercase letterspaced
   labels, square corners. CSS-only layer over the existing settings DOM —
   every id, handler and test hook is untouched. Appended at end of file
   so equal-specificity rules here win the cascade.
   ═══════════════════════════════════════════════════════════════════════ */
#jjPage_settings.tl-theme {
  --sw-bg: #F4F4F2; --sw-ink: #111111; --sw-sub: #4F4F4A; --sw-mute: #6E6E68;
  --sw-faint: #A8A8A2; --sw-hair: #DEDEDA; --sw-red: #E8341F;
  --sw-font: 'Instrument Sans', -apple-system, sans-serif;
  background: var(--sw-bg);
  font-family: var(--sw-font);
}

/* ── Page head: red eyebrow, big grotesk title, hard rule ── */
#jjPage_settings.tl-theme .jj-page-head { border-bottom: 1px solid var(--sw-ink); padding-bottom: 22px; }
#jjPage_settings.tl-theme .st-eyebrow {
  font: 500 10px/1 var(--sw-font); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sw-red); background: none; border: 0; padding: 0; margin: 0 0 10px;
}
#jjPage_settings.tl-theme .jj-page-title {
  font: 600 34px/1.05 var(--sw-font); letter-spacing: -.03em; color: var(--sw-ink);
}
#jjPage_settings.tl-theme .jj-page-sub { font: 400 14px/1.6 var(--sw-font); color: var(--sw-sub); }

/* ── Cards become ruled sections: no chrome, a section rule on top ── */
#jjPage_settings.tl-theme .jj-panel.st-card,
#jjPage_settings.tl-theme .st-card {
  background: transparent; border: 0; border-top: 1px solid var(--sw-ink);
  border-radius: 0; box-shadow: none; padding: 20px 0 26px; margin: 0 0 10px;
}
/* The page head already draws its rule; the panel's FIRST section starting
   with another ink rule read as a double line (owner, 2026-08-13). Only
   sections after the first carry the divider. The help panel nests its
   card inside .st-help-grid, so it needs its own first-child selector —
   the direct-child one missed it (owner caught the survivor). */
#jjPage_settings.tl-theme .st-panel > .st-card:first-child,
#jjPage_settings.tl-theme .st-panel > .jj-panel.st-card:first-child,
#jjPage_settings.tl-theme .st-help-grid > .st-card:first-child {
  border-top: 0; padding-top: 6px;
}
#jjPage_settings.tl-theme .st-card-title {
  font: 600 17px/1.25 var(--sw-font); letter-spacing: -.02em; color: var(--sw-ink);
}
#jjPage_settings.tl-theme .st-card-sub { font: 400 12.5px/1.6 var(--sw-font); color: var(--sw-mute); }
#jjPage_settings.tl-theme .st-card-head-simple { margin-bottom: 18px; }
#jjPage_settings.tl-theme .st-card-title-inline {
  font: 500 10px/1.3 var(--sw-font); letter-spacing: .14em; text-transform: uppercase; color: var(--sw-mute);
}

/* ── Definition rows ── */
#jjPage_settings.tl-theme .st-ax-row { border-bottom: 1px solid var(--sw-hair); border-radius: 0; background: transparent; }
#jjPage_settings.tl-theme .st-ax-row:last-child { border-bottom: 0; }
#jjPage_settings.tl-theme .st-ax-label { font: 500 13.5px/1.3 var(--sw-font); color: var(--sw-ink); }
#jjPage_settings.tl-theme .st-ax-val { font: 400 13px/1.4 var(--sw-font); color: var(--sw-sub); }
#jjPage_settings.tl-theme .st-ax-sub { font: 400 12px/1.5 var(--sw-font); color: var(--sw-mute); }

/* ── Buttons: black slab, uppercase; red on hover. Danger inverts. ── */
#jjPage_settings.tl-theme .jj-btn,
#jjPage_settings.tl-theme .st-ax-btn,
#jjPage_settings.tl-theme .st-save-btn,
#jjPage_settings.tl-theme .st-redeem-btn {
  background: var(--sw-ink); color: #F4F4F2; border: 0; border-radius: 0;
  font: 500 11px/1 var(--sw-font); letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 18px; cursor: pointer; transition: background .16s; box-shadow: none;
}
#jjPage_settings.tl-theme .jj-btn:hover,
#jjPage_settings.tl-theme .st-ax-btn:hover,
#jjPage_settings.tl-theme .st-save-btn:hover,
#jjPage_settings.tl-theme .st-redeem-btn:hover {
  background: var(--sw-red); color: #F4F4F2; filter: none;
}
#jjPage_settings.tl-theme .st-danger-btn {
  background: transparent; color: var(--sw-red); border: 1px solid var(--sw-red); border-radius: 0;
  font: 500 11px/1 var(--sw-font); letter-spacing: .1em; text-transform: uppercase; padding: 11px 18px;
}
#jjPage_settings.tl-theme .st-danger-btn:hover { background: var(--sw-red); color: #F4F4F2; }
#jjPage_settings.tl-theme .st-ax-row-danger { background: transparent; border-color: var(--sw-hair); }
#jjPage_settings.tl-theme .st-saved-flash { color: var(--sw-red); font: 500 11px/1 var(--sw-font); letter-spacing: .1em; text-transform: uppercase; }
#jjPage_settings.tl-theme .st-cancel-link { color: var(--sw-mute); }
#jjPage_settings.tl-theme .st-cancel-link:hover { color: var(--sw-red); }

/* ── Form fields: white plate, hairline border, ink focus ── */
#jjPage_settings.tl-theme .st-label,
#jjPage_settings.tl-theme .jj-form-label {
  font: 500 10px/1.4 var(--sw-font); letter-spacing: .14em; text-transform: uppercase; color: var(--sw-mute);
}
#jjPage_settings.tl-theme .st-label-hint { font: 400 10px/1.4 var(--sw-font); letter-spacing: .02em; text-transform: none; color: var(--sw-faint); }
#jjPage_settings.tl-theme .st-input,
#jjPage_settings.tl-theme .jj-form-input,
#jjPage_settings.tl-theme .st-select,
#jjPage_settings.tl-theme .st-textarea,
#jjPage_settings.tl-theme .st-redeem-input,
#jjPage_settings.tl-theme .st-chip-entry {
  background: #FFFFFF; border: 1px solid var(--sw-hair); border-radius: 0;
  font: 400 14px/1.4 var(--sw-font); color: var(--sw-ink); box-shadow: none;
}
#jjPage_settings.tl-theme .st-input:focus,
#jjPage_settings.tl-theme .jj-form-input:focus,
#jjPage_settings.tl-theme .st-textarea:focus,
#jjPage_settings.tl-theme .st-redeem-input:focus { border-color: var(--sw-ink); outline: none; box-shadow: none; }
#jjPage_settings.tl-theme .st-input::placeholder,
#jjPage_settings.tl-theme .st-chip-entry::placeholder { color: var(--sw-faint); }
#jjPage_settings.tl-theme .st-chipbox { background: #FFFFFF; border: 1px solid var(--sw-hair); border-radius: 0; }
#jjPage_settings.tl-theme .st-chipbox:focus-within { border-color: var(--sw-ink); }

/* ── Toggles: ink when on (never blue) ── */
#jjPage_settings.tl-theme .st-toggle-track { background: var(--sw-hair); border-radius: 2px; }
#jjPage_settings.tl-theme .st-toggle-thumb { border-radius: 1px; background: #FFFFFF; }
#jjPage_settings.tl-theme .st-toggle input:checked + .st-toggle-track { background: var(--sw-ink); }
#jjPage_settings.tl-theme .st-toggle input:focus-visible + .st-toggle-track { outline: 2px solid var(--sw-ink); }
#jjPage_settings.tl-theme .st-toggle-label { font: 500 13.5px/1.3 var(--sw-font); color: var(--sw-ink); }
#jjPage_settings.tl-theme .st-toggle-sub { font: 400 12px/1.5 var(--sw-font); color: var(--sw-mute); }
#jjPage_settings.tl-theme .st-toggle-row { border-bottom: 1px solid var(--sw-hair); border-radius: 0; background: transparent; }
#jjPage_settings.tl-theme .st-toggle-row:last-child { border-bottom: 0; }

/* ── Segmented control: ink active cell ── */
#jjPage_settings.tl-theme .st-seg-group { border: 1px solid var(--sw-hair); border-radius: 0; background: #FFFFFF; overflow: hidden; }
#jjPage_settings.tl-theme .st-seg-cell {
  font: 500 11px/1 var(--sw-font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--sw-sub); border-right: 1px solid var(--sw-hair); border-radius: 0;
}
#jjPage_settings.tl-theme .st-seg-cell:hover:not(.st-seg-cell--active) { background: var(--sw-bg); }
#jjPage_settings.tl-theme .st-seg-cell--active { background: var(--sw-ink); color: #F4F4F2; }

/* ── Checks, chips, plan, badges ── */
#jjPage_settings.tl-theme .st-check-item { font: 400 13px/1.4 var(--sw-font); color: var(--sw-sub); }
#jjPage_settings.tl-theme .st-check-item input { accent-color: var(--sw-ink); }
#jjPage_settings.tl-theme .st-plan-name { font: 600 22px/1.15 var(--sw-font); letter-spacing: -.02em; color: var(--sw-ink); }
#jjPage_settings.tl-theme .st-plan-price { font: 500 13px/1.3 var(--sw-font); color: var(--sw-sub); }
#jjPage_settings.tl-theme .st-plan-desc,
#jjPage_settings.tl-theme .st-plan-renewal { font: 400 12.5px/1.6 var(--sw-font); color: var(--sw-mute); }
#jjPage_settings.tl-theme .st-plan-current-tag {
  background: transparent; color: var(--sw-red); border: 1px solid var(--sw-red); border-radius: 0;
  font: 500 9.5px/1 var(--sw-font); letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px;
}
#jjPage_settings.tl-theme .st-soon-badge {
  background: transparent; color: var(--sw-faint); border: 1px solid var(--sw-hair); border-radius: 0;
  font: 500 9px/1 var(--sw-font); letter-spacing: .12em; text-transform: uppercase;
}
#jjPage_settings.tl-theme .st-help-success { color: var(--sw-red); }
/* The "What happens next" column is gone (owner, 2026-08-13) — the form
   is the panel, full content width like every other panel's rows. */
#jjPage_settings.tl-theme .st-help-grid { grid-template-columns: 1fr; }

/* ── Mobile tab strip: uppercase, red underline on active ── */
@media (max-width: 768px) {
  #jjPage_settings .st-mobtabs { border-bottom: 1px solid var(--sw-ink, #111111); gap: 0; }
  #jjPage_settings .st-mobtab {
    font: 500 10.5px/1 'Instrument Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase;
    color: #6E6E68; background: transparent; border-radius: 0; padding: 11px 12px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  #jjPage_settings .st-mobtab.active { background: transparent; color: #111111; border-bottom-color: #E8341F; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SWISS HOME — FONTS ONLY (owner, 2026-08-13): every piece of text on the
   dashboard renders in 'Instrument Sans'; sizes, weights, colours, layout
   all stay exactly as they are. !important because the page's type is set
   via `font:` shorthands, inline styles and higher-specificity id rules —
   this is a deliberate blanket swap, scoped to the one page. Icon glyphs
   are a FONT (Phosphor), so .ph elements are restored right after —
   without that, every icon on the page becomes a missing-glyph box.
   ═══════════════════════════════════════════════════════════════════════ */
#jjPage_dashboard,
#jjPage_dashboard * {
  font-family: 'Instrument Sans', -apple-system, sans-serif !important;
}
#jjPage_dashboard .ph { font-family: "Phosphor" !important; }
#jjPage_dashboard .ph-bold { font-family: "Phosphor-Bold" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SWISS HEADERS (owner, 2026-08-13): every page headline in the app
   carries the pricing page's headline type — the VERBATIM spec from
   pricing.html's h1 ("Pay for what you use."): Instrument Sans at
   600 (the owner's "not bold" = not the 700/800 the pages used), the
   same clamp size, .96 line height, -.05em tracking. Colours stay each
   page's own. One selector per page headline; card/section titles are
   not page headers and keep their scale.
   ═══════════════════════════════════════════════════════════════════════ */
#app .jj-page-title,
#app .db2-headline,
#app .dza-h1,
#app .cvx-h1,
#app .cl-st-h1,
#app .rr-iv-h1,
#app .fce-topbar-title {
  font: 600 clamp(42px, 4.6vw, 68px)/0.96 'Instrument Sans', -apple-system, sans-serif !important;
  letter-spacing: -.05em !important;
}