/* ============================================================
   CAREER PILOT — DESIGN TOKENS
   ============================================================ */
:root{
  --navy:#17324D; --navy-2:#10243A;
  --blue:#2F5D7C; --blue-soft:#4E7FA0;
  --orange:#D97732; --orange-soft:#E9A06F;
  --bg:#F7F9FC; --bg-alt:#EEF4F8; --card:#FFFFFF;
  --text:#1F2933; --text-soft:#64748B; --border:#E2E8F0;
  --green:#2E7D5B; --green-bg:#E7F4EE;
  --amber:#A66A16; --amber-bg:#FBF1DF;
  --red:#B3442B; --red-bg:#FBEAE5;
  /* text-only shades that reach 4.5:1 on light/tinted backgrounds; fills keep the brand colours above */
  --orange-ink:#AE5319; --amber-ink:#946014; --green-ink:#2A7353; --text-soft-alt:#5B6B80;
  --orange-ink-tint:#9E4A15;   /* orange text on an orange/blue tint (role badge): 5.0:1 or better */
  /* disabled / locked controls: explicit colours instead of opacity, so their text stays legible */
  --disabled-bg:#E2E8F0; --disabled-ink:#526073;

  --font-head:'Manrope', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(23,50,77,.06), 0 1px 1px rgba(23,50,77,.04);
  --shadow-md:0 8px 24px rgba(23,50,77,.08);
  --shadow-lg:0 16px 40px rgba(23,50,77,.12);

  --mx:0px; --my:0px;
  --bg-intensity:1;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--navy); margin:0; letter-spacing:-.01em; }
p{ margin:0; color:var(--text-soft); line-height:1.6; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--orange-soft); color:var(--navy-2); }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-9999px; top:8px; z-index:999; background:var(--navy); color:#fff; padding:10px 16px; border-radius:8px; }
.skip-link:focus{ left:12px; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
  border-radius:4px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:10px;
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  transition:transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(217,119,50,.28); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(217,119,50,.34); background:#CB6D2C; }
.btn-secondary{ background:transparent; color:var(--navy); border:1.5px solid var(--border); }
.btn-secondary:hover{ transform:translateY(-2px); border-color:var(--blue-soft); box-shadow:var(--shadow-sm); }
.btn-ghost{ color:var(--blue); font-weight:600; font-family:var(--font-head); font-size:.94rem; }
.btn-ghost:hover{ color:var(--orange-ink); }
.btn-danger{ background:var(--red); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:.85rem; border-radius:8px; }
.btn[disabled]{ cursor:not-allowed; transform:none !important; color:var(--disabled-ink); box-shadow:none; }
.btn-primary[disabled], .btn-danger[disabled]{ background:var(--disabled-bg); }
.btn-secondary[disabled]{ background:transparent; border-color:var(--disabled-bg); }

/* ============================================================
   AMBIENT ANIMATED BACKGROUND SYSTEM
   ============================================================ */
.ambient{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%; filter:blur(70px);
  opacity:calc(.5 * var(--bg-intensity)); will-change:transform;
  transform:translate3d(calc(var(--mx) * var(--px,1)), calc(var(--my) * var(--py,1)), 0);
  transition:transform 900ms cubic-bezier(.2,.7,.2,1);
}
.blob--b1{ width:46vw; height:46vw; left:-10vw; top:-14vw; background:radial-gradient(circle at 35% 35%, rgba(47,93,124,.55), rgba(47,93,124,0) 70%); animation:drift1 26s ease-in-out infinite; --px:.6; --py:.4; }
.blob--b2{ width:34vw; height:34vw; right:-8vw; top:8vw; background:radial-gradient(circle at 60% 40%, rgba(23,50,77,.5), rgba(23,50,77,0) 70%); animation:drift2 32s ease-in-out infinite; --px:-.5; --py:.5; }
.blob--o1{ width:22vw; height:22vw; left:20vw; bottom:-8vw; background:radial-gradient(circle at 50% 50%, rgba(217,119,50,.4), rgba(217,119,50,0) 70%); animation:drift3 22s ease-in-out infinite; --px:.4; --py:-.5; opacity:calc(.32 * var(--bg-intensity)); }
.blob--o2{ width:16vw; height:16vw; right:12vw; bottom:6vw; background:radial-gradient(circle at 50% 50%, rgba(233,160,111,.45), rgba(233,160,111,0) 70%); animation:drift1 19s ease-in-out infinite reverse; --px:-.3; --py:-.3; opacity:calc(.28 * var(--bg-intensity)); }
.blob--b3{ width:24vw; height:24vw; left:44vw; top:38vw; background:radial-gradient(circle at 50% 50%, rgba(47,93,124,.32), rgba(47,93,124,0) 70%); animation:drift2 30s ease-in-out infinite; --px:.25; --py:.35; }

@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(3vw,4vw) scale(1.06);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-4vw,3vw) scale(1.04);} }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(2vw,-3vw) scale(1.08);} }

.grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(47,93,124,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,93,124,.05) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:calc(.6 * var(--bg-intensity));
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black 40%, transparent 85%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black 40%, transparent 85%);
}
#particleCanvas{ position:absolute; inset:0; width:100%; height:100%; }

.trajectory{ position:absolute; inset:0; width:100%; height:100%; opacity:calc(.55 * var(--bg-intensity)); }
.trajectory path{ fill:none; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:6 10; animation:dash 40s linear infinite; }
.trajectory path.tp-blue{ stroke:rgba(47,93,124,.4); }
.trajectory path.tp-orange{ stroke:rgba(217,119,50,.4); }
@keyframes dash{ to{ stroke-dashoffset:-400; } }

/* intensity gating: set on body via data-bg-level */
body[data-bg-level="0"] .ambient{ opacity:0; }
body[data-bg-level="1"] .grid-overlay,
body[data-bg-level="1"] .trajectory,
body[data-bg-level="1"] .blob--b3,
body[data-bg-level="1"] .blob--o2{ display:none; }
body[data-bg-level="2"] .trajectory{ display:none; }

/* ============================================================
   SCREEN VISIBILITY
   ============================================================ */
.screen:not(.is-active){ display:none !important; }
.screen{ position:relative; z-index:1; }
.screen.is-active{ display:block; }
.screen.app-shell.is-active{ display:grid; }
.appcard{ display:none; }
.appcard.is-active{ display:block; animation:screenIn 420ms ease both; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

/* ============================================================
   SHARED: LOGO
   ============================================================ */
.logo{ display:inline-flex; align-items:center; gap:10px; }
/* CareerPilot logo image */
.logo .brand-logo{ width:72px; height:72px; object-fit:contain; display:block; flex:none; }
.site-header .logo .brand-logo{ width:74px; height:74px; }
.site-footer .logo .brand-logo{ width:78px; height:78px; }
.auth-brand .logo .brand-logo{ width:88px; height:88px; border-radius:12px; background:#fff; padding:4px; box-sizing:border-box; }
.app-shell .sidebar .brand-logo{ width:82px; height:82px; border-radius:12px; background:#fff; padding:4px; box-sizing:border-box; }
.interview-topbar .logo .brand-logo{ width:70px; height:70px; }

.logo-mark{ width:34px; height:34px; flex:none; }
.logo-word{ font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:var(--navy); letter-spacing:-.01em; }
.logo-word span{ color:var(--orange); }
.logo--light .logo-word{ color:#fff; }

/* ============================================================
   LANDING PAGE
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 6vw;
  background:rgba(247,249,252,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.site-nav{ display:flex; gap:34px; }
.site-nav a{ font-weight:600; font-size:.94rem; color:var(--text-soft); transition:color 160ms; }
.site-nav a:hover{ color:var(--navy); }
.header-actions{ display:flex; align-items:center; gap:18px; }

.hero{
  padding:9vw 6vw 6vw;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  max-width:1360px; margin:0 auto;
}
.hero-eyebrow{ font-weight:700; color:var(--blue); font-size:.9rem; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); animation:pulse2 2.2s ease-in-out infinite; }
@keyframes pulse2{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.3);} }
.hero h1{ font-size:clamp(2.1rem, 3.6vw, 3.35rem); line-height:1.12; font-weight:800; }
.hero p.lede{ font-size:1.1rem; margin-top:20px; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:34px; margin-top:44px; flex-wrap:wrap; }
.hero-stats div b{ display:block; font-family:var(--font-head); font-size:1.5rem; color:var(--navy); }
.hero-stats div span{ font-size:.85rem; color:var(--text-soft); }

.hero-visual{ position:relative; }
.mock-window{
  background:var(--card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); border:1px solid var(--border); overflow:hidden;
  animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.mock-titlebar{ display:flex; align-items:center; gap:6px; padding:12px 16px; border-bottom:1px solid var(--border); }
.mock-titlebar span{ width:9px; height:9px; border-radius:50%; background:var(--border); }
.mock-body{ padding:20px; display:flex; flex-direction:column; gap:14px; }
.mock-row{ display:flex; gap:14px; }
.mock-card-mini{ flex:1; background:var(--bg-alt); border-radius:12px; padding:14px; border:1px solid var(--border); }
.mock-card-mini b{ display:block; font-family:var(--font-head); color:var(--navy); font-size:1.3rem; }
.mock-card-mini span{ font-size:.75rem; color:var(--text-soft-alt); }
.mock-orbline{ display:flex; align-items:center; gap:12px; background:var(--navy); border-radius:12px; padding:16px; color:#fff; }
.mini-orb{ width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--orange-soft), var(--navy) 70%); box-shadow:0 0 0 4px rgba(217,119,50,.18); animation:breathe 3s ease-in-out infinite; flex:none; }
.mock-orbline div p{ color:rgba(255,255,255,.7); font-size:.78rem; margin-top:2px; }
.mock-orbline div b{ font-family:var(--font-head); font-size:.92rem; }
.floating-badge{
  position:absolute; background:#fff; border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-md); border:1px solid var(--border);
  display:flex; align-items:center; gap:10px; font-size:.82rem; font-weight:600; color:var(--navy);
  animation:floaty 6s ease-in-out infinite;
}
.floating-badge.b1{ top:-6%; right:-4%; animation-delay:-2s; }
.floating-badge.b2{ bottom:6%; left:-6%; animation-delay:-4s; }
.floating-badge .chip-dot{ width:9px; height:9px; border-radius:50%; background:var(--green); }

.section{ padding:5vw 6vw; max-width:1360px; margin:0 auto; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(1.6rem,2.4vw,2.2rem); font-weight:800; }
.section-head p{ margin-top:12px; font-size:1.02rem; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity 560ms ease, transform 560ms ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
@media print{ .reveal{ opacity:1; transform:none; } }

.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.feature-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:26px; transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; position:relative;
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(47,93,124,.25); }
.feature-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-alt); color:var(--blue); margin-bottom:18px;
}
.feature-card h3{ font-size:1.04rem; margin-bottom:8px; }
.feature-card p{ font-size:.92rem; }
.feature-card .fc-link{ margin-top:14px; display:inline-block; font-size:.86rem; font-weight:700; color:var(--orange-ink); cursor:pointer; }

.howitworks{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.step-card{ position:relative; padding:28px 22px 22px; background:var(--bg-alt); border-radius:var(--radius-md); }
.step-num{ font-family:var(--font-head); font-weight:800; font-size:.85rem; color:var(--orange-ink); margin-bottom:12px; }
.step-card h3{ font-size:1rem; margin-bottom:8px; }
.step-card p{ font-size:.9rem; color:var(--text-soft-alt); }

.cta-band{
  margin:6vw 6vw 0; border-radius:var(--radius-lg); background:var(--navy); color:#fff;
  padding:4.5vw 5vw; display:flex; align-items:center; justify-content:space-between; gap:24px;
  position:relative; overflow:hidden;
}
.cta-band h2{ color:#fff; font-size:clamp(1.4rem,2vw,1.9rem); }
.cta-band p{ color:rgba(255,255,255,.72); margin-top:8px; }

.site-footer{ padding:3vw 6vw; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--text-soft); font-size:.85rem; border-top:1px solid var(--border); margin-top:4vw; }

/* ============================================================
   AUTH SCREENS
   ============================================================ */
.auth-shell{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-brand{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff; padding:5vw; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-brand .brand-copy{ max-width:420px; margin-top:14vh; position:relative; z-index:2; }
.auth-brand h2{ color:#fff; font-size:2rem; margin-top:18px; line-height:1.25; }
.auth-brand p{ color:rgba(255,255,255,.68); margin-top:14px; }
.auth-brand .quote-mark{ font-size:.9rem; color:var(--orange-soft); font-weight:700; margin-top:32px; }
.auth-panel{ display:flex; align-items:center; justify-content:center; padding:5vw; }
.auth-card{ width:100%; max-width:400px; }
.auth-card h1{ font-size:1.7rem; }
.auth-card p.sub{ margin-top:8px; margin-bottom:30px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-family:var(--font-body); font-size:.95rem; background:#fff; color:var(--text);
  transition:border-color 160ms, box-shadow 160ms;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--blue-soft); box-shadow:0 0 0 3px rgba(47,93,124,.12); outline:none;
}
.field .err{ display:block; color:var(--red); font-size:.78rem; margin-top:6px; min-height:1em; }
.field .err:empty{ min-height:0; margin-top:0; }
.field.invalid input, .field.invalid select{ border-color:var(--red); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; margin-bottom:22px; font-size:.87rem; }
.divider-line{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--text-soft); font-size:.82rem; }
.divider-line::before,.divider-line::after{ content:""; flex:1; height:1px; background:var(--border); }
.switch-auth{ text-align:center; margin-top:22px; font-size:.9rem; color:var(--text-soft); }
.switch-auth a{ color:var(--orange-ink); font-weight:700; cursor:pointer; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell{ display:grid; grid-template-columns:256px 1fr; min-height:100vh; }
.sidebar{
  background:var(--navy); color:#fff; padding:22px 16px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; z-index:5;
}
.sidebar .logo{ padding:6px 10px 24px; }
.side-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; flex:1; }
.side-nav li a{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px;
  color:rgba(255,255,255,.68); font-weight:600; font-size:.92rem; transition:background 160ms, color 160ms; position:relative;
}
.side-nav li a svg{ flex:none; opacity:.9; }
.side-nav li a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.side-nav li a.active{ background:rgba(47,93,124,.55); color:#fff; }
.side-nav li a.active::before{
  content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:4px; height:20px; border-radius:4px; background:var(--orange);
}
.side-foot{ border-top:1px solid rgba(255,255,255,.12); padding-top:14px; display:flex; flex-direction:column; gap:3px; }
.side-foot a{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; color:rgba(255,255,255,.68); font-weight:600; font-size:.92rem; transition:background 160ms, color 160ms; }
.side-foot a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.side-foot a.active{ background:rgba(47,93,124,.55); color:#fff; }
/* phone-only pieces of the bottom bar (More menu, Profile inside it) */
.nav-more, .side-foot .side-foot-profile{ display:none; }
.auth-mobile-logo{ display:none; }

.app-main{ min-width:0; }
.app-content{ padding:32px 40px 64px; max-width:1240px; }

/* Resume Builder integration: keep the new standalone Resume.html visually
   intact while displaying it inside the existing CareerPilot application shell. */
.resume-embed-card{ margin:0; padding:0; background:transparent; border:0; box-shadow:none; }
.resume-builder-frame{ display:block; width:100%; min-height:calc(100vh - 40px); height:1200px; border:0; background:transparent; }

.topbar-greet{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.topbar-greet h1{ font-size:1.5rem; }
.topbar-greet p{ margin-top:5px; }
.topbar-right{ display:flex; align-items:center; gap:16px; }
.icon-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border); color:var(--blue); position:relative; transition:box-shadow 160ms; }
.icon-btn:hover{ box-shadow:var(--shadow-sm); }
.icon-btn .badge-dot{ position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--orange); }
.user-chip{ display:flex; align-items:center; gap:10px; }
.avatar{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, var(--blue), var(--navy)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:.85rem; }
.user-chip span{ font-weight:600; font-size:.9rem; color:var(--navy); }

.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:22px; transition:transform 200ms ease, box-shadow 200ms ease; }
.card.hoverable:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.welcome-card{
  background:linear-gradient(120deg, var(--navy) 0%, #1D3E5C 60%, var(--navy-2) 100%);
  color:#fff; border-radius:var(--radius-lg); padding:30px 34px; position:relative; overflow:hidden; margin-bottom:26px;
}
.welcome-card::after{
  content:""; position:absolute; width:280px; height:280px; border-radius:50%; right:-80px; top:-100px;
  background:radial-gradient(circle, rgba(217,119,50,.35), transparent 70%);
  animation:drift1 14s ease-in-out infinite;
}
.welcome-card h2{ color:#fff; font-size:1.35rem; max-width:60%; position:relative; z-index:1; }
.welcome-card p{ color:rgba(255,255,255,.72); margin-top:10px; max-width:52%; position:relative; z-index:1; }
.welcome-card .btn{ margin-top:20px; position:relative; z-index:1; }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:26px; }
.stat-card{ display:flex; flex-direction:column; gap:10px; }
.stat-top{ display:flex; align-items:center; justify-content:space-between; }
.stat-icon{ width:36px; height:36px; border-radius:9px; background:var(--bg-alt); color:var(--blue); display:flex; align-items:center; justify-content:center; }
.stat-trend{ font-size:.76rem; font-weight:700; color:var(--green); display:inline-flex; align-items:center; gap:3px; }
.stat-value{ font-family:var(--font-head); font-size:1.9rem; font-weight:800; color:var(--navy); }
.stat-label{ font-size:.85rem; color:var(--text-soft); }
.progress-track{ height:6px; border-radius:6px; background:var(--border); overflow:hidden; margin-top:2px; }
.progress-fill{ height:100%; border-radius:6px; background:var(--orange); width:0%; transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.progress-fill.blue{ background:var(--blue); }
.progress-fill.green{ background:var(--green); }

.section-title-row{ display:flex; align-items:center; justify-content:space-between; margin:30px 0 16px; }
.section-title-row h2{ font-size:1.12rem; }

.topic-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.topic-card{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; cursor:pointer; font-family:inherit; }
.topic-card .ctag{ font-size:.74rem; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.04em; }
.topic-card h3{ font-size:1.02rem; }
.topic-card .meta{ font-size:.82rem; color:var(--text-soft); }
.topic-card-all{ border-color:var(--navy); }
.topic-card-all .ctag{ color:var(--orange-ink); }
.topic-card[disabled]{ cursor:progress; transform:none !important; }
.topic-card.is-starting .meta{ color:var(--orange-ink); font-weight:700; }

.continue-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.continue-card{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.continue-card .ctag{ font-size:.76rem; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.04em; }
.continue-card h3{ font-size:1rem; }
.continue-card .meta{ font-size:.83rem; color:var(--text-soft); }
.continue-card .progress-track{ width:100%; }

.reco-list{ display:flex; flex-direction:column; gap:12px; }
.reco-item{ display:flex; align-items:center; gap:16px; padding:16px 18px; }
.reco-icon{ width:38px; height:38px; border-radius:10px; background:var(--bg-alt); color:var(--orange); display:flex; align-items:center; justify-content:center; flex:none; }
.reco-item div.body{ flex:1; }
.reco-item h4{ font-family:var(--font-body); font-weight:700; font-size:.94rem; color:var(--navy); }
.reco-item p{ font-size:.83rem; margin-top:2px; }

.chart-box{ height:210px; display:flex; align-items:flex-end; gap:10px; padding:10px 0 26px; }
.chart-bar{ flex:1; background:linear-gradient(180deg, var(--blue-soft), var(--blue)); border-radius:6px 6px 0 0; height:0%; transition:height 1s cubic-bezier(.2,.7,.2,1); position:relative; }
.chart-bar span{ position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:.72rem; color:var(--text-soft); font-family:var(--font-mono); }
.chart-bar em{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:.72rem; color:var(--text-soft); font-style:normal; white-space:nowrap; }
.chart-bar.skeleton{ border-radius:6px 6px 0 0; }
.chart-caption{ font-size:.8rem; margin-bottom:14px; }
/* empty / error state keeps the chart's frame and height */
.chart-box.is-empty{ align-items:center; justify-content:center; text-align:center; }
.chart-empty{ display:flex; flex-direction:column; align-items:center; gap:10px; max-width:360px; }
.chart-empty p{ font-size:.9rem; }

/* badges */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; font-size:.76rem; font-weight:700; }
.badge-green{ background:var(--green-bg); color:var(--green-ink); }
.badge-amber{ background:var(--amber-bg); color:var(--amber-ink); }
.badge-red{ background:var(--red-bg); color:var(--red); }
.badge-blue{ background:var(--bg-alt); color:var(--blue); }
.badge[hidden]{ display:none; }

/* ============================================================
   AI INTERVIEW SCREEN
   ============================================================ */
.interview-shell{ background:var(--bg-alt); min-height:100vh; }
.interview-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 40px; flex-wrap:wrap; }
.interview-progress{ display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--text-soft); font-family:var(--font-mono); }
.interview-progress .dots{ display:flex; gap:6px; }
.interview-progress .dots i{ width:20px; height:4px; border-radius:4px; background:var(--border); display:block; }
.interview-progress .dots i.done{ background:var(--orange); }
.interview-progress .dots i.now{ background:var(--blue); }

.interview-stage{ display:flex; flex-direction:column; align-items:center; padding:20px 20px 60px; position:relative; }

.orb-wrap{ position:relative; width:220px; height:220px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.orb-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(47,93,124,.18); }
.orb-ring.r2{ inset:-18px; border-color:rgba(47,93,124,.1); }
.orb-ring.spin{ animation:spin 6s linear infinite; border-style:dashed; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.orb{
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #3E6E90, var(--navy) 68%);
  box-shadow:0 0 0 10px rgba(47,93,124,.08), 0 20px 50px rgba(23,50,77,.25);
  position:relative; z-index:2; animation:breathe 4.2s ease-in-out infinite; transition:box-shadow 400ms ease;
}
@keyframes breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.045);} }
.orb::after{
  content:""; position:absolute; inset:18px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(217,119,50,.5), transparent 65%); opacity:.6;
}
.orb-particle{ position:absolute; width:5px; height:5px; border-radius:50%; background:var(--orange-soft); opacity:0; }

.orb-wrap[data-state="listening"] .orb{ box-shadow:0 0 0 14px rgba(217,119,50,.14), 0 20px 50px rgba(23,50,77,.25); animation:breathe 1.6s ease-in-out infinite; }
.orb-wrap[data-state="listening"] .orb-ring{ border-color:rgba(217,119,50,.35); }
.orb-wrap[data-state="thinking"] .orb-ring.spin{ animation-duration:2.4s; }
.orb-wrap[data-state="thinking"] .orb-particle{ opacity:1; animation:orbitp 2.4s linear infinite; }
.orb-wrap[data-state="thinking"] .orb-particle:nth-child(2){ animation-delay:-.8s; }
.orb-wrap[data-state="thinking"] .orb-particle:nth-child(3){ animation-delay:-1.6s; }
@keyframes orbitp{ from{ transform:rotate(0deg) translateX(95px) rotate(0deg);} to{ transform:rotate(360deg) translateX(95px) rotate(-360deg);} }
.orb-wrap[data-state="speaking"] .orb{ animation:speak .9s ease-in-out infinite; }
@keyframes speak{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.07);} }

.orb-status{ font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:.95rem; margin-top:6px; display:flex; align-items:center; gap:8px; }
.orb-status .stt-dot{ width:8px; height:8px; border-radius:50%; background:var(--text-soft); }
.orb-wrap[data-state="listening"] ~ .orb-status .stt-dot{ background:var(--orange); }
.orb-wrap[data-state="thinking"] ~ .orb-status .stt-dot{ background:var(--blue); }
.orb-wrap[data-state="speaking"] ~ .orb-status .stt-dot{ background:var(--green); }

.waveform{ display:flex; align-items:center; gap:3px; height:32px; margin-top:14px; }
.waveform i{ width:3px; border-radius:3px; background:var(--blue-soft); display:block; height:6px; transition:height 140ms ease; }
.orb-wrap[data-state="listening"] ~ .wave-wrap .waveform i,
.orb-wrap[data-state="speaking"] ~ .wave-wrap .waveform i{ background:var(--orange); }

.question-card{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:32px 36px; max-width:600px; margin-top:24px; text-align:center; position:relative; border:1px solid var(--border); }
.question-card .qlabel{ font-size:.78rem; font-weight:700; color:var(--blue); margin-bottom:10px; letter-spacing:.05em; text-transform:uppercase; }
.question-card h3{ font-size:1.2rem; font-weight:600; font-family:var(--font-body); color:var(--navy); line-height:1.5; }
.question-card.q-anim{ animation:qswap 480ms ease; }
@keyframes qswap{ 0%{ opacity:0; transform:translateY(14px);} 100%{ opacity:1; transform:none; } }

.answer-box{ max-width:600px; width:100%; margin-top:16px; }
.answer-box textarea{ width:100%; min-height:90px; padding:14px; border:1.5px solid var(--border); border-radius:12px; font-family:var(--font-body); font-size:.92rem; resize:vertical; }
.answer-box textarea:focus{ outline:none; border-color:var(--blue-soft); box-shadow:0 0 0 3px rgba(47,93,124,.12); }

.adapt-note{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:.82rem; color:var(--text-soft); background:#fff; border:1px dashed var(--border); padding:8px 14px; border-radius:20px; opacity:0; transition:opacity 400ms ease; }
.adapt-note.show{ opacity:1; }
.adapt-note svg{ color:var(--orange); flex:none; }

.mic-control{ margin-top:30px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.mic-btn{
  width:74px; height:74px; border-radius:50%; background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(217,119,50,.35);
  position:relative; transition:transform 160ms ease;
}
.mic-btn:hover{ transform:scale(1.05); }
.mic-btn.recording{ animation:micpulse 1.4s ease-in-out infinite; }
.mic-btn::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(217,119,50,.3); opacity:0; }
.mic-btn.recording::before{ opacity:1; animation:ringexpand 1.4s ease-out infinite; }
@keyframes micpulse{ 0%,100%{ box-shadow:0 8px 22px rgba(217,119,50,.35);} 50%{ box-shadow:0 8px 30px rgba(217,119,50,.55);} }
@keyframes ringexpand{ 0%{ transform:scale(1); opacity:.6;} 100%{ transform:scale(1.5); opacity:0;} }
.mic-label{ font-size:.86rem; font-weight:700; color:var(--navy); font-family:var(--font-head); }

.interview-controls-demo{ display:flex; gap:10px; margin-top:36px; flex-wrap:wrap; justify-content:center; }

/* Results */
.results-hero{ display:flex; flex-direction:column; align-items:center; padding:44px 20px 10px; text-align:center; }
.score-ring-wrap{ position:relative; width:190px; height:190px; margin-bottom:8px; }
.score-ring-wrap svg{ transform:rotate(-90deg); }
.score-ring-bg{ fill:none; stroke:var(--border); stroke-width:12; }
.score-ring-fill{ fill:none; stroke:var(--orange); stroke-width:12; stroke-linecap:round; stroke-dasharray:502; stroke-dashoffset:502; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1); }
.score-ring-text{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score-ring-text b{ font-family:var(--font-head); font-size:2.4rem; color:var(--navy); }
.score-ring-text span{ font-size:.8rem; color:var(--text-soft); }

.metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:900px; margin:30px auto 0; padding:0 20px; }
.metric-card{ text-align:center; }
.metric-card .mval{ font-family:var(--font-head); font-weight:800; color:var(--navy); font-size:1.3rem; }
.metric-card .mlabel{ font-size:.83rem; color:var(--text-soft); margin-bottom:8px; }

.feedback-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; max-width:1000px; margin:30px auto 0; padding:0 20px 50px; }
.feedback-col h4{ font-size:.92rem; color:var(--navy); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.feedback-col ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.feedback-col li{ font-size:.87rem; color:var(--text-soft); padding-left:18px; position:relative; }
.feedback-col li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; }
.feedback-col.strengths li::before{ background:var(--green); }
.feedback-col.improve li::before{ background:var(--amber); }
.feedback-col.topics li::before{ background:var(--blue); }

/* ============================================================
   RESUME BUILDER
   ============================================================ */
.rb-autosave-pill{ display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--text-soft-alt); background:var(--bg-alt); padding:6px 13px; border-radius:100px; }
.rb-autosave-pill .rb-dot{ width:6px; height:6px; border-radius:50%; background:var(--green); }
.rb-optional{ color:var(--text-soft); font-weight:500; }
.rb-field-hint{ font-size:.76rem; color:var(--text-soft); margin-top:6px; }

/* job match card */
.rb-jobmatch-card{ padding:24px 26px; margin-bottom:22px; }
.rb-jobmatch-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.rb-jobmatch-head h3{ font-size:1.02rem; }
.rb-jobmatch-head p{ font-size:.84rem; margin-top:3px; }
.rb-jobmatch-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:24px; }
.rb-jobmatch-inputs textarea{ resize:vertical; }
.rb-match-result{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.rb-ring-wrap{ position:relative; width:96px; height:96px; flex-shrink:0; }
.rb-ring-wrap svg{ display:block; }
.rb-ring-track{ stroke:var(--bg-alt); }
#rbScoreRing{ stroke:var(--orange); transition:stroke-dashoffset .6s ease, stroke .3s ease; }
.rb-ring-num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.rb-ring-num .n{ font-size:1.3rem; font-weight:800; color:var(--navy); font-family:var(--font-mono); }
.rb-ring-num .d{ font-size:.6rem; color:var(--text-soft); letter-spacing:.04em; }
.rb-kw-groups{ flex:1; min-width:200px; }
.rb-kw-label{ font-size:.74rem; font-weight:700; color:var(--text-soft); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.rb-kw-label svg{ color:var(--green); }
.rb-kw-label-warn svg{ color:var(--amber); }
.rb-kw-label-warn{ margin-top:10px; }
.rb-match-empty{ font-size:.84rem; color:var(--text-soft); padding:14px 0; }
.rb-chip{ display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:600; padding:5px 11px; border-radius:100px; margin:0 6px 6px 0; }
.rb-chip-matched{ background:var(--green-bg); color:var(--green-ink); }
.rb-chip-missing{ background:var(--amber-bg); color:var(--amber-ink); }

/* quality metrics */
.rb-metrics-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.rb-metric-card{ padding:14px 16px; }
.rb-metric-card .lbl{ font-size:.76rem; color:var(--text-soft); margin-bottom:8px; }
.rb-metric-card .val{ font-size:1rem; font-weight:800; color:var(--navy); margin-bottom:8px; }

/* builder grid */
.rb-builder-grid{ display:grid; grid-template-columns:214px 1fr 380px; gap:20px; align-items:start; }

.rb-step-nav{ padding:10px; position:sticky; top:16px; }
.rb-step-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 11px; border-radius:9px; font-size:.85rem; font-weight:600; color:var(--text-soft); position:relative; transition:all 150ms ease; }
.rb-step-item:hover{ color:var(--navy); background:var(--bg-alt); }
.rb-step-item.active{ background:var(--bg-alt); color:var(--navy); }
.rb-step-num{ width:22px; height:22px; border-radius:50%; background:var(--bg-alt); color:var(--text-soft-alt); font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 150ms ease; }
.rb-step-item.active .rb-step-num{ background:var(--orange); color:#fff; }
.rb-step-item.done .rb-step-num{ background:var(--green-bg); color:var(--green-ink); }
.rb-step-optional{ margin-left:auto; font-size:.6rem; color:var(--text-soft-alt); font-weight:500; }
.rb-step-nav-foot{ margin-top:8px; padding-top:10px; border-top:1px solid var(--border); }
.rb-step-progress-label{ font-size:.7rem; color:var(--text-soft); padding:0 11px 8px; }

.rb-form-panel{ padding:26px 28px; min-height:460px; }
.rb-form-section{ display:none; }
.rb-form-section.active{ display:block; animation:rbFadeUp 220ms ease both; }
@keyframes rbFadeUp{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:translateY(0);} }
.rb-form-section-head{ margin-bottom:20px; }
.rb-form-section-head h3{ font-size:1.05rem; }
.rb-form-section-head p{ font-size:.8rem; margin-top:4px; }
.rb-entry-card{ border:1px solid var(--border); border-radius:12px; padding:17px 18px; margin-bottom:14px; background:var(--bg-alt); }
.rb-entry-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }
.rb-entry-tag{ font-size:.7rem; font-weight:800; color:var(--blue); letter-spacing:.02em; }
.rb-remove-entry{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--red); background:var(--red-bg); flex-shrink:0; }
.rb-remove-entry:hover{ background:#F5D5D1; }
.rb-add-entry-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:1.5px dashed var(--border); border-radius:10px; padding:13px; font-size:.85rem; font-weight:700; color:var(--blue); transition:all 150ms ease; }
.rb-add-entry-btn:hover{ border-color:var(--blue); background:var(--bg-alt); }
.rb-present-toggle{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-soft); margin-top:8px; }
.rb-present-toggle input{ accent-color:var(--orange); }
.rb-form-nav-buttons{ display:flex; justify-content:space-between; margin-top:24px; padding-top:18px; border-top:1px solid var(--border); }
.rb-empty-hint{ font-size:.8rem; color:var(--text-soft); font-style:italic; margin-bottom:14px; }

/* preview */
.rb-preview-col{ position:sticky; top:16px; }
.rb-preview-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; }
.rb-tpl-swatches{ display:flex; gap:6px; }
.rb-tpl-swatch{ width:32px; height:32px; border-radius:8px; border:1.5px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:800; color:var(--text-soft); transition:all 150ms ease; }
.rb-tpl-swatch:hover{ border-color:var(--blue); }
.rb-tpl-swatch.active{ border-color:var(--orange); color:var(--orange-ink); box-shadow:0 0 0 3px rgba(217,119,50,.14); }
.rb-preview-frame{ background:#DCE4EC; border-radius:14px; padding:16px; }
.rb-resume-paper{ background:#fff; border-radius:4px; box-shadow:var(--shadow-lg); padding:32px 30px; font-family:Arial, Helvetica, sans-serif; color:#1F2933; max-height:600px; overflow-y:auto; }
.rb-resume-paper::-webkit-scrollbar{ width:7px; }
.rb-resume-paper::-webkit-scrollbar-thumb{ background:#CBD5E1; border-radius:10px; }
.rb-r-name{ font-size:1.15rem; font-weight:700; }
.rb-r-role{ font-size:.75rem; color:#475569; margin-top:2px; font-weight:500; }
.rb-r-contact{ font-size:.66rem; color:#475569; margin-top:9px; line-height:1.6; }
.rb-r-contact span:not(:last-child)::after{ content:'  |  '; color:#CBD5E1; }
.rb-r-section-title{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border-bottom:1.4px solid #1F2933; padding-bottom:3px; margin:16px 0 8px; }
.rb-tpl-professional .rb-r-name{ color:var(--navy); }
.rb-tpl-professional .rb-r-section-title{ color:var(--navy); border-bottom-color:var(--orange); }
.rb-tpl-compact{ padding:22px 24px; font-size:.68rem; }
.rb-tpl-compact .rb-r-section-title{ margin:10px 0 6px; }
.rb-tpl-compact .rb-r-name{ font-size:1.05rem; }
.rb-r-entry{ margin-bottom:11px; }
.rb-r-entry:last-child{ margin-bottom:0; }
.rb-r-entry-head{ display:flex; justify-content:space-between; gap:10px; font-size:.72rem; font-weight:700; }
.rb-r-entry-head .rb-r-date{ font-weight:600; color:#475569; white-space:nowrap; font-size:.66rem; }
.rb-r-entry-sub{ display:flex; justify-content:space-between; gap:10px; font-size:.66rem; color:#475569; font-style:italic; margin-bottom:5px; }
.rb-r-entry ul{ margin:0 0 0 16px; padding:0; }
.rb-r-entry li{ font-size:.68rem; margin-bottom:2.5px; line-height:1.5; }
.rb-r-skills-line{ font-size:.68rem; line-height:1.85; }
.rb-r-skills-line b{ font-weight:700; }
.rb-preview-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.rb-preview-actions .btn{ flex:1; }
.rb-preview-meta{ display:flex; justify-content:space-between; align-items:center; font-size:.68rem; color:var(--text-soft); margin-top:10px; padding:0 2px; }

/* ATS checklist */
.rb-checklist{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.rb-check-row{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; }
.rb-check-icon{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.rb-check-good{ background:var(--green-bg); color:var(--green-ink); }
.rb-check-warn{ background:var(--amber-bg); color:var(--amber-ink); }
.rb-check-title{ font-weight:600; font-size:.85rem; margin-bottom:2px; }
.rb-checklist p{ font-size:.78rem; }

@media (max-width:1180px){
  .rb-builder-grid{ grid-template-columns:1fr; }
  .rb-step-nav, .rb-preview-col{ position:static; }
}
@media (max-width:900px){
  .rb-metrics-grid, .rb-checklist{ grid-template-columns:1fr 1fr; }
  .rb-jobmatch-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .rb-metrics-grid, .rb-checklist{ grid-template-columns:1fr; }
}

/* ============================================================
   CODING PRACTICE
   ============================================================ */
.coding-shell{ display:grid; grid-template-columns:230px 1.15fr 1fr; margin:-32px -40px -64px; min-height:calc(100vh - 0px); border-top:1px solid var(--border); }
.coding-list{ border-right:1px solid var(--border); padding:18px; background:#fff; }
.coding-list .field input{ padding:9px 12px; font-size:.85rem; }
.problem-item{ width:100%; padding:10px; border-radius:8px; font-size:.86rem; display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--text-soft); text-align:left; }
.problem-item:hover{ background:var(--bg-alt); }
.problem-item.active{ background:var(--bg-alt); color:var(--navy); font-weight:700; }
.diff-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.diff-easy{ background:var(--green); } .diff-med{ background:var(--amber); } .diff-hard{ background:var(--red); }

.coding-main{ padding:24px 28px; border-right:1px solid var(--border); background:#fff; }
.coding-main pre{ background:var(--bg-alt); padding:14px 16px; border-radius:10px; font-family:var(--font-mono); font-size:.82rem; overflow:auto; color:var(--navy); }
.coding-editor{ background:#fff; display:flex; flex-direction:column; }
.editor-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.editor-body{ flex:1; min-height:280px; background:var(--navy-2); color:#D7E3EC; font-family:var(--font-mono); font-size:.85rem; padding:18px; line-height:1.7; white-space:pre; overflow:auto; border:none; width:100%; resize:none; }
.editor-body:focus{ outline:2px solid var(--orange); outline-offset:-2px; }
.result-panel{ border-top:1px solid var(--border); padding:16px 18px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

/* ============================================================
   APTITUDE
   ============================================================ */
.aptitude-shell{ max-width:720px; margin:0 auto; }
.apt-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-family:var(--font-mono); font-size:.85rem; color:var(--text-soft); }
.apt-timer{ display:flex; align-items:center; gap:6px; color:var(--navy); font-weight:700; }
.apt-timer.warn{ color:var(--red); }
.apt-progress{ height:6px; background:var(--border); border-radius:6px; overflow:hidden; margin-bottom:30px; }
.apt-progress i{ display:block; height:100%; background:var(--orange); border-radius:6px; transition:width 400ms ease; }
.apt-question{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:34px; transition:opacity 260ms ease, transform 260ms ease; }
.apt-question.swap{ opacity:0; transform:translateX(10px); }
.apt-question h3{ font-size:1.1rem; font-weight:600; font-family:var(--font-body); color:var(--navy); margin-bottom:24px; }
.apt-options{ display:flex; flex-direction:column; gap:10px; }
.apt-opt{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--border); border-radius:12px; font-size:.94rem; color:var(--text); transition:border-color 160ms, background 160ms; text-align:left; }
.apt-opt:hover{ border-color:var(--blue-soft); background:var(--bg-alt); }
.apt-opt .optkey{ width:24px; height:24px; border-radius:6px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; color:var(--blue); flex:none; }
.apt-opt.selected{ border-color:var(--orange); background:#FFF8F2; }
.apt-opt.selected .optkey{ background:var(--orange); color:#fff; }
.apt-footer{ display:flex; justify-content:space-between; margin-top:26px; }

.result-summary-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:24px 0; }
.topic-bar-row{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.topic-bar-row span{ width:100px; font-size:.85rem; color:var(--text-soft); flex:none; }
.topic-bar-row .progress-track{ flex:1; }
.topic-bar-row b{ width:44px; text-align:right; font-family:var(--font-mono); font-size:.85rem; color:var(--navy); }

/* Per-question answer review on the aptitude results screen */
.review-list{ display:flex; flex-direction:column; }
.review-item{ padding:18px 0; border-bottom:1px solid var(--border); }
.review-item:last-child{ border-bottom:none; padding-bottom:2px; }
.review-item:first-child{ padding-top:2px; }
.review-item-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.review-q-num{ font-size:.78rem; font-weight:700; letter-spacing:.02em; color:var(--text-soft); text-transform:uppercase; }
.review-q-text{ color:var(--text); font-size:.94rem; line-height:1.6; margin-bottom:12px; }
.review-options{ display:flex; flex-direction:column; gap:8px; }
.review-option{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; font-size:.86rem; color:var(--text-soft); }
.review-option .optkey{ width:22px; height:22px; border-radius:6px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; color:var(--blue); flex:none; }
.review-option span:nth-child(2){ flex:1; color:var(--text); }
.review-option.is-correct{ border-color:var(--green); background:var(--green-bg); }
.review-option.is-correct .optkey{ background:var(--green); color:#fff; }
.review-option.is-wrong{ border-color:var(--red); background:var(--red-bg); }
.review-option.is-wrong .optkey{ background:var(--red); color:#fff; }
.apt-opt.is-correct{ border-color:var(--green); background:var(--green-bg); }
.apt-opt.is-correct .optkey{ background:var(--green); color:#fff; }
.apt-opt.is-wrong{ border-color:var(--red); background:var(--red-bg); }
.apt-opt.is-wrong .optkey{ background:var(--red); color:#fff; }
.review-tag{ font-size:.72rem; font-weight:700; letter-spacing:.01em; color:inherit; flex:none; }

/* ============================================================
   ANALYTICS
   ============================================================ */
.readiness-card{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.readiness-ring{ position:relative; width:140px; height:140px; flex:none; }
.readiness-ring svg{ transform:rotate(-90deg); }
.readiness-ring .rtext{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.readiness-ring .rtext b{ font-family:var(--font-head); font-size:1.8rem; color:var(--navy); }
.readiness-ring .rtext span{ font-size:.72rem; color:var(--text-soft); }

.trend-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:20px; }
.mini-line{ height:70px; width:100%; }
.ready-chips{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.ready-chips[hidden]{ display:none; }
.trend-labels{ display:flex; justify-content:space-between; gap:10px; margin-top:6px; font-size:.78rem; color:var(--text-soft); }
.trend-labels b{ color:var(--navy); font-family:var(--font-head); }

/* ============================================================
   PROFILE
   ============================================================ */
.profile-hero-card{ margin-bottom:22px; }
.profile-head{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.profile-avatar{ width:76px; height:76px; border-radius:50%; background:linear-gradient(135deg, var(--blue), var(--navy)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:1.5rem; font-weight:700; flex-shrink:0; }
.profile-head-info{ min-width:0; }
.role-badge{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:var(--orange-ink-tint); background:rgba(217,119,50,.09); padding:5px 12px; border-radius:20px; margin:6px 0 10px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:16px; font-size:.85rem; color:var(--text-soft); }
.hero-meta span{ display:flex; align-items:center; gap:6px; }
.hero-meta svg{ opacity:.7; flex-shrink:0; }
.profile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.info-row{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); font-size:.92rem; }
.info-row span:first-child{ color:var(--text-soft); }
.info-row span:last-child{ color:var(--navy); font-weight:600; }
.skill-chip{ display:inline-block; padding:6px 13px; background:var(--bg-alt); color:var(--blue); border-radius:20px; font-size:.82rem; font-weight:600; margin:4px 4px 0 0; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--border); }
.settings-row .s-label{ font-size:.9rem; font-weight:700; color:var(--navy); }
.settings-row .s-desc{ font-size:.78rem; color:var(--text-soft); margin-top:2px; }

/* help / accordion */
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ width:100%; text-align:left; padding:16px 0; display:flex; justify-content:space-between; align-items:center; gap:14px; font-weight:700; color:var(--navy); font-family:var(--font-head); font-size:.95rem; }
.faq-q .chev{ transition:transform 200ms ease; flex:none; }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); }
.faq-a{ display:none; padding:0 0 16px; font-size:.9rem; color:var(--text-soft); line-height:1.6; }
.faq-item.open .faq-a{ display:block; }

/* ============================================================
   EMPTY STATES / TOAST / MODAL
   ============================================================ */
.empty-state{ text-align:center; padding:60px 20px; }
.empty-illustration{ width:84px; height:84px; margin:0 auto 20px; border-radius:20px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; color:var(--blue); animation:floaty 5s ease-in-out infinite; }
.empty-state h3{ font-size:1.05rem; margin-bottom:8px; }
.empty-state p{ max-width:320px; margin:0 auto 20px; }

.toast-stack{ position:fixed; bottom:24px; right:24px; z-index:100; display:flex; flex-direction:column; gap:10px; }
.toast{ background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-md); border-radius:12px; padding:14px 18px; display:flex; align-items:center; gap:12px; font-size:.88rem; min-width:260px; animation:toastIn 320ms ease; color:var(--navy); }
.toast .tmsg{ flex:1; }
.toast-close{ flex:none; width:28px; height:28px; margin:-6px -10px -6px 0; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-soft); }
.toast-close:hover{ background:var(--bg-alt); color:var(--navy); }
.toast.leaving{ animation:toastOut 260ms ease forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(20px);} to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(20px);} }
.toast .ticon{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.toast.success .ticon{ background:var(--green-bg); color:var(--green); }
.toast.error .ticon{ background:var(--red-bg); color:var(--red); }
.toast.info .ticon{ background:var(--bg-alt); color:var(--blue); }

.modal-overlay{ position:fixed; inset:0; background:rgba(16,36,58,.55); backdrop-filter:blur(3px); z-index:150; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open{ display:flex; animation:toastIn 200ms ease; }
.modal{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:28px; width:100%; max-width:420px; animation:screenIn 260ms ease both; }
.modal h3{ font-size:1.15rem; margin-bottom:10px; }
.modal p{ font-size:.92rem; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.account-action-modal{ max-width:480px; }
.account-action-intro{ color:var(--text-soft); line-height:1.55; margin-bottom:16px; }
.account-action-fields{ display:grid; gap:12px; }
.account-action-label{ display:block; font-size:.84rem; font-weight:700; color:var(--navy); margin-bottom:6px; }
.account-action-input{ width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 12px; font:inherit; color:var(--text); background:#fff; box-sizing:border-box; }
.account-action-input:focus{ outline:2px solid rgba(47,93,124,.16); border-color:var(--blue); }
.account-action-error{ min-height:20px; margin-top:10px; color:var(--red); font-size:.82rem; }
.mfa-qr-wrap{ display:flex; justify-content:center; margin:6px 0 14px; }
.mfa-qr{ width:180px; height:180px; border:1px solid var(--border); border-radius:12px; padding:8px; background:#fff; }
.mfa-secret{ word-break:break-all; font-size:.8rem; color:var(--text-soft-alt); background:var(--bg-alt); border-radius:8px; padding:8px; }
.mfa-status{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background:var(--green-bg); color:var(--green-ink); font-size:.84rem; font-weight:700; }

/* ============================================================
   SKELETON
   ============================================================ */
.skeleton{ background:linear-gradient(90deg, var(--bg-alt) 25%, #E4EDF3 37%, var(--bg-alt) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:8px; }
@keyframes shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .hero{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .continue-grid{ grid-template-columns:1fr 1fr; }
  .howitworks{ grid-template-columns:1fr; }
  .coding-shell{ grid-template-columns:1fr; }
  .coding-list, .coding-main{ border-right:none; border-bottom:1px solid var(--border); }
  .feedback-grid{ grid-template-columns:1fr; }
  .metric-grid{ grid-template-columns:repeat(2,1fr); }
  .rb-builder-grid{ grid-template-columns:1fr; }
  .profile-grid{ grid-template-columns:1fr; }
  .trend-grid{ grid-template-columns:1fr; }
}
@media (max-width: 780px){
  .app-shell{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; bottom:0; left:0; right:0; top:auto; height:auto; flex-direction:row; padding:6px 4px; z-index:50; }
  .sidebar .logo{ display:none; }
  .side-nav{ flex-direction:row; overflow-x:auto; gap:0; }
  .side-nav li{ flex:1 1 0; display:flex; }
  .side-nav li a, .side-nav li button{ flex:1; justify-content:center; min-height:44px; min-width:44px; padding:10px 4px; }
  .side-nav li button{ display:flex; align-items:center; border-radius:10px; color:rgba(255,255,255,.68); }
  .side-nav li button.active, .side-nav li button[aria-expanded="true"]{ background:rgba(47,93,124,.55); color:#fff; }
  .side-nav li a span, .side-nav li button span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .side-nav li a.active::before{ display:none; }
  .side-nav li.nav-profile{ display:none; }
  .side-nav li.nav-more{ display:flex; }
  .side-foot .side-foot-profile{ display:flex; }
  .sidebar:not(.more-open) .side-foot{ display:none; }
  .sidebar.more-open{ z-index:110; }
  .side-foot{ position:fixed; right:8px; bottom:64px; min-width:200px; background:var(--navy); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:6px; box-shadow:var(--shadow-lg); }
  .side-foot a{ min-height:44px; }
  .toast-stack{ left:12px; right:12px; bottom:76px; }
  .toast{ min-width:0; }
  .toast-close{ width:44px; height:44px; margin:0; }
  .auth-mobile-logo{ display:inline-flex; margin-bottom:22px; }
  .auth-mobile-logo .brand-logo{ width:56px; height:56px; }
  .app-content{ padding:20px 18px 90px; }
  .resume-builder-frame{ min-height:calc(100vh - 100px); }
  .site-header{ padding:14px 5vw; }
  .site-nav{ display:none; }
  .stat-grid, .continue-grid, .feature-grid{ grid-template-columns:1fr; }
  .auth-shell{ grid-template-columns:1fr; }
  .auth-brand{ display:none; }
  .cta-band{ flex-direction:column; text-align:center; margin:8vw 4vw 0; }
  .result-summary-grid, .metric-grid{ grid-template-columns:repeat(2,1fr); }
  .welcome-card h2, .welcome-card p{ max-width:100%; }
  .interview-topbar{ padding:16px 18px; }
}

/* ============================================================
   CODING PRACTICE — topic-first workspace
   ============================================================ */
.coding-shell{
  display:flex;
  flex-direction:column;
  margin:-32px -40px -64px;
  min-height:calc(100vh - 0px);
  background:var(--bg-alt);
}
.coding-header{
  padding:28px 34px 20px;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.coding-header h1{font-size:1.35rem;margin:0;color:var(--navy);}
.coding-header p{margin-top:6px;color:var(--text-soft);font-size:.9rem;}
.coding-topic-area{padding:22px 34px 30px;background:#fff;}
.coding-search{max-width:560px;}
.coding-search input{
  width:100%;padding:11px 14px;border:1.5px solid var(--border);
  border-radius:10px;background:#fff;font:inherit;font-size:.88rem;
}
.coding-search input:focus{outline:2px solid var(--orange);outline-offset:1px;}
.coding-section-label{font-size:.95rem;font-weight:700;color:var(--navy);margin:22px 0 12px;}
.coding-topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;}
.topic-card{
  min-height:116px;padding:16px;border:1px solid var(--border);border-radius:12px;
  background:#fff;text-align:left;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:space-between;gap:8px;transition:transform 140ms ease,box-shadow 140ms ease,border-color 140ms ease;
}
.topic-card:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(24,50,71,.07);border-color:var(--blue-soft);}
.topic-card .ctag{font-size:.67rem;letter-spacing:.07em;color:var(--text-soft);}
.topic-card strong{font-size:1rem;color:var(--navy);}
.topic-card .meta{font-size:.78rem;color:var(--text-soft);}
.coding-search-results,.coding-question-list{display:flex;flex-direction:column;gap:5px;max-width:680px;}
.problem-item{
  width:100%;padding:11px 12px;border-radius:9px;font-size:.86rem;display:flex;
  justify-content:space-between;align-items:center;gap:12px;color:var(--text-soft);
  text-align:left;border:1px solid transparent;background:transparent;
}
.problem-item:hover{background:var(--bg-alt);border-color:var(--border);color:var(--text-soft-alt);}
.problem-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.problem-item-meta{display:flex;align-items:center;gap:8px;flex:none;}
.solved-mark{font-size:.82rem;color:var(--green);font-weight:800;}
.diff-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.diff-easy{background:var(--green)} .diff-med{background:var(--amber)} .diff-hard{background:var(--red)}
.difficulty-heading{
  display:flex;align-items:center;gap:7px;margin:16px 3px 5px;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--text-soft);
}
.back-topic-button{
  align-self:flex-start;border:0;background:transparent;color:var(--navy);
  font:700 .84rem var(--font-body);padding:6px 4px;cursor:pointer;
}
.back-topic-button:hover{text-decoration:underline;}
.coding-workspace{
  background:var(--bg-alt);border-top:1px solid var(--border);padding:18px 22px 24px;
}
.coding-workspace-head{
  max-width:1280px;margin:0 auto 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.coding-question-position{flex:1;display:flex;justify-content:center;gap:8px;color:var(--text-soft-alt);font:.8rem var(--font-mono);}
.coding-nav-buttons{display:flex;gap:7px;}

.coding-panels{
  max-width:1280px;margin:0 auto;display:grid;grid-template-columns:40% 60%;
  min-height:620px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;
}
.coding-main{padding:22px 24px;border-right:1px solid var(--border);background:#fff;min-width:0;}
.coding-problem-heading>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.coding-problem-scroll{height:calc(100% - 42px);overflow:auto;padding-right:8px;}
.coding-problem-scroll h3{font-size:.92rem;margin:20px 0 8px;color:var(--navy);}
.coding-problem-scroll p{font-size:.88rem;line-height:1.7;color:var(--text-soft);white-space:pre-wrap;}
.coding-main pre{
  background:var(--bg-alt);padding:14px 16px;border-radius:9px;font-family:var(--font-mono);
  font-size:.8rem;overflow:auto;color:var(--navy);white-space:pre-wrap;
}
.coding-editor{background:#fff;display:flex;flex-direction:column;min-width:0;}
.editor-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.editor-toolbar select{
  padding:7px 10px;border:1.5px solid var(--border);border-radius:8px;
  font: .85rem var(--font-body);background:#fff;color:var(--text);
}
.editor-actions{display:flex;gap:8px;}
.editor-body{
  flex:1;min-height:480px;background:var(--navy-2);color:#D7E3EC;font-family:var(--font-mono);
  font-size:.85rem;line-height:1.7;overflow:hidden;border:none;width:100%;
}
.result-panel{
  border-top:1px solid var(--border);padding:13px 15px;display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;max-height:220px;overflow:auto;
}
.result-panel>strong{font-size:.72rem;letter-spacing:.06em;color:var(--navy);width:100%;}
.test-failures{width:100%;display:flex;flex-direction:column;gap:7px;}
.test-failure{
  background:var(--bg-alt);border-radius:8px;padding:9px 11px;font-size:.78rem;
  font-family:var(--font-mono);white-space:pre-wrap;
}
.execution-error{
  width:100%;max-height:150px;overflow:auto;background:var(--bg-alt);border-radius:8px;
  padding:10px;font:.78rem var(--font-mono);white-space:pre-wrap;color:var(--red);
}
/* .coding-shell cancels .app-content's padding exactly (32px 40px 64px; 20px 18px 90px at <=780px) so it runs edge to edge. */
@media (max-width:1100px){
  .coding-header,.coding-topic-area{padding-left:24px;padding-right:24px;}
  .coding-panels{grid-template-columns:42% 58%;}
}
@media (max-width:780px){
  .coding-shell{margin:-20px -18px -90px;padding-bottom:72px;}
  .coding-header,.coding-topic-area{padding-left:18px;padding-right:18px;}
  .coding-workspace{padding:14px;}
  .coding-workspace-head{align-items:flex-start;}
  .coding-question-position{order:3;width:100%;justify-content:flex-start;}
  .coding-panels{grid-template-columns:1fr;min-height:0;}
  .coding-main{border-right:0;border-bottom:1px solid var(--border);min-height:360px;}
  .coding-problem-scroll{height:auto;max-height:440px;}
  .editor-body{min-height:420px;}
}
@media (max-width:560px){
  .coding-topic-grid{grid-template-columns:1fr 1fr;}
  .coding-workspace{padding:10px;}
  .coding-topic-area{padding-bottom:22px;}
  .coding-header h1{font-size:1.2rem;}
  .coding-panels{border-radius:9px;}
  .coding-nav-buttons .btn,.coding-workspace-head>.btn{font-size:.76rem;}
}

/* Authentication/profile additions — scoped so existing application styling remains unchanged. */
.profile-editor { margin-bottom: 22px; }
.profile-editor[hidden] { display: none; }
.onboarding-shell .auth-card { max-width: 720px; }
.onboarding-card { max-height: calc(100vh - 10vw); overflow-y: auto; }
/* keep Finish later / Continue in view while the card scrolls */
.onboarding-card .modal-actions { position: sticky; bottom: 0; z-index: 1; background: var(--bg); padding: 12px 0; border-top: 1px solid var(--border); }
.onboarding-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.onboarding-section h3 { font-size: 1rem; margin-bottom: 4px; }
.onboarding-section p { color: var(--text-soft); font-size: .86rem; margin-bottom: 10px; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-alt); color: var(--text); font-size: .82rem; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.choice-chip:has(input:checked) { border-color: var(--blue); background: rgba(47,93,124,.08); }
.choice-chip input { margin: 0; }
@media (max-width: 700px) {
  .onboarding-card { max-height: none; }
}
/* Profile account-security QR container. Kept scoped to the account modal. */
.mfa-qr-placeholder{width:196px;min-height:196px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;padding:8px;background:#fff;box-sizing:border-box;}
.mfa-qr-placeholder .mfa-qr{display:block;width:180px;height:180px;border:0;border-radius:0;padding:0;background:#fff;object-fit:contain;}

/* === GAMIFICATION === (XP HUD, quests, badges, weekly goal, leaderboard) */
.rb-optional{ font-weight:500; color:var(--text-soft); font-size:.82rem; }
[hidden].gm-hud, [hidden].gm-quests-card, [hidden].gm-profile-block{ display:none; }
.gm-hud{ display:flex; align-items:center; gap:10px; padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:var(--card); }
.gm-level-badge{ font:700 .78rem var(--font-head); color:#fff; background:var(--navy); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.gm-xp-bar{ width:110px; height:7px; border-radius:999px; background:var(--bg-alt); overflow:hidden; }
.gm-xp-fill{ height:100%; width:0; background:linear-gradient(90deg, var(--blue), var(--orange)); border-radius:inherit; transition:width .5s ease; }
.gm-xp-text{ font:.76rem var(--font-mono); color:var(--text-soft); white-space:nowrap; }
.gm-streak{ font-weight:700; font-size:.86rem; color:var(--orange-ink); white-space:nowrap; }
.gm-level-badge::before{ content:'Lv '; }
.gm-freezes{ font-weight:700; font-size:.86rem; color:var(--blue); white-space:nowrap; }
.gm-stale{ margin:0; font-size:.72rem; color:var(--text-soft); white-space:nowrap; }
.gm-stale[hidden]{ display:none; }
.gm-quests-card{ margin-top:22px; }
.gm-quests-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.gm-quests-head h2{ font-size:1.05rem; }
.gm-quests-sub{ font-size:.8rem; color:var(--text-soft); }
.gm-quests-list{ display:flex; flex-direction:column; gap:10px; }
.gm-quest{ display:flex; align-items:center; gap:12px; }
.gm-quest-check{ width:22px; height:22px; flex:none; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#fff; }
.gm-quest.is-done .gm-quest-check{ background:var(--green); border-color:var(--green); }
.gm-quest-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.gm-quest-label{ font-size:.9rem; }
.gm-quest.is-done .gm-quest-label{ color:var(--text-soft); text-decoration:line-through; }
.gm-quest-count{ font:.8rem var(--font-mono); color:var(--text-soft); white-space:nowrap; }
.gm-mastery{ font-size:.72rem; font-weight:700; color:var(--green-ink); background:var(--green-bg); border-radius:999px; padding:2px 8px; }
.gm-combo{ align-self:flex-start; margin:10px 0 0; font-weight:700; font-size:.88rem; color:var(--orange-ink); background:var(--amber-bg); border-radius:999px; padding:4px 12px; display:inline-block; }
.gm-combo[hidden]{ display:none; }
.gm-xp-earned{ margin-top:12px; display:inline-block; font-weight:700; color:var(--green-ink); background:var(--green-bg); border-radius:999px; padding:6px 14px; font-size:.9rem; }
.gm-xp-earned[hidden]{ display:none; }
.gm-analytics-grid{ display:grid; grid-template-columns:minmax(220px,1fr) 2fr; gap:18px; }
.gm-weekly-card h3{ font-size:.95rem; margin-bottom:10px; }
.gm-weekly-count{ font-size:.9rem; margin-bottom:10px; }
.gm-weekly-count b{ font-size:1.4rem; color:var(--navy); }
.gm-weekly-sub{ font-size:.8rem; color:var(--text-soft); margin-top:10px; }
.gm-badge-shelf{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:10px; }
.gm-badge{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:12px 8px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-alt); }
.gm-badge.is-earned{ background:var(--card); box-shadow:var(--shadow-sm); }
/* locked: grey icon, readable text (no container opacity) */
.gm-badge.is-locked .gm-badge-icon{ filter:grayscale(1); opacity:.6; }
.gm-badge.is-locked .gm-badge-name, .gm-badge.is-locked .gm-badge-desc{ color:var(--text-soft-alt); }
.gm-badge-icon{ font-size:1.6rem; line-height:1; }
.gm-badge-name{ font-weight:700; font-size:.8rem; color:var(--navy); }
.gm-badge-desc{ font-size:.7rem; color:var(--text-soft); }
.gm-profile-block{ margin-bottom:22px; }
.gm-profile-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; }
.gm-stat{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--bg-alt); }
.gm-stat span{ font-size:.75rem; color:var(--text-soft-alt); }
.gm-stat b{ font-size:1.05rem; color:var(--navy); }
.gm-profile-h{ font-size:1rem; margin:20px 0 10px; }
.gm-profile-settings{ display:flex; flex-direction:column; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.gm-setting{ display:flex; flex-direction:column; gap:6px; font-size:.86rem; font-weight:600; max-width:520px; }
.gm-setting select{ max-width:240px; }
.gm-setting--check{ flex-direction:row; align-items:flex-start; gap:9px; font-weight:400; color:var(--text-soft); }
.gm-setting--check input{ margin-top:3px; }
.gm-empty{ font-size:.86rem; color:var(--text-soft); list-style:none; padding:8px 0; }
.gm-lb-optin{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.gm-lb-optin[hidden]{ display:none; }
.gm-lb-optin p{ font-size:.88rem; max-width:620px; }
.gm-lb-tabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.gm-lb-tab{ font:600 .84rem var(--font-body); padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; }
.gm-lb-tab.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.gm-lb-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.gm-lb-row{ display:flex; align-items:center; gap:14px; padding:10px 6px; border-bottom:1px solid var(--border); }
.gm-lb-row:last-child{ border-bottom:none; }
.gm-lb-row.is-me{ background:rgba(47,93,124,.07); border-radius:var(--radius-sm); }
.gm-lb-rank{ width:28px; text-align:right; font:700 .9rem var(--font-mono); color:var(--text-soft); }
.gm-lb-name{ flex:1; min-width:0; display:flex; flex-direction:column; font-weight:600; font-size:.9rem; }
.gm-lb-name small{ font-weight:400; color:var(--text-soft); font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-lb-level{ font-size:.78rem; color:var(--blue); font-weight:700; }
.gm-lb-xp{ font:600 .86rem var(--font-mono); color:var(--navy); min-width:72px; text-align:right; }
@media (max-width:900px){
  .gm-analytics-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .topbar-right{ flex-wrap:wrap; justify-content:flex-start; }
  .gm-hud{ flex-wrap:wrap; row-gap:4px; }
  .gm-xp-bar{ width:70px; }
  .gm-xp-text{ font-size:.7rem; }
  .chart-bar em{ font-size:.64rem; }
}

/* === ENGAGEMENT CARDS (engagement.js) === daily challenge, chest, nudges, rings, badge tiers, history, cosmetics, league */
.gm-row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:22px; }
.gm-card{ display:flex; flex-direction:column; gap:10px; }
.gm-card[hidden], .gm-row [hidden], .gm-profile-extras[hidden], .gm-league[hidden], #lbListCard[hidden], #lbFilterTabs[hidden], #lbFilterRow[hidden]{ display:none; }
.gm-card h3{ font-size:.95rem; }
.gm-card .btn{ align-self:flex-start; margin-top:6px; }
/* loading skeletons and the progress load error (refreshGamificationUI / CPEngagement.render) */
.gm-skel-line{ display:block; height:12px; border-radius:6px; margin:6px 0; }
.gm-quest .gm-skel-line{ margin:0; }
.gm-load-error{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gm-load-error p{ margin:0; color:var(--text); }
.gm-card-sub{ font-size:.8rem; color:var(--text-soft); }
.gm-dc-title{ font:700 1.05rem var(--font-head); color:var(--navy); overflow-wrap:anywhere; }
.gm-dc-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.8rem; }
.gm-dc-done{ font-weight:700; font-size:.88rem; color:var(--green); }
.gm-chest-state{ font-weight:700; font-size:.95rem; color:var(--navy); }
.gm-chest-state.is-ready{ color:var(--orange-ink); }
.gm-chest-state.is-locked{ color:var(--text-soft); }
.gm-nudge{ margin-top:14px; padding:10px 14px; border-radius:var(--radius-sm); background:var(--amber-bg); color:var(--amber-ink); font-weight:600; font-size:.88rem; }
.gm-nudge[hidden], .gm-boost[hidden]{ display:none; }
.gm-reset-notice{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); border-left:4px solid var(--blue); background:var(--card); font-size:.9rem; }
.gm-reset-notice p{ flex:1; min-width:200px; margin:0; }
.gm-reset-notice[hidden]{ display:none; }
.gm-storage-line{ margin-top:10px; font-size:.84rem; color:var(--text-soft); }
.gm-storage-line[hidden]{ display:none; }
.gm-boost{ margin-top:14px; padding:10px 14px; border-radius:var(--radius-sm); background:linear-gradient(90deg, var(--navy), var(--blue)); color:#fff; font-size:.9rem; }
.gm-boost b{ color:var(--orange-soft); }
.gm-nearmiss{ margin:-4px 0 12px; font-size:.84rem; color:var(--blue); font-weight:600; }
.gm-nearmiss:empty{ display:none; }
/* topic mastery rings */
.gm-rings{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:12px; }
.gm-ring{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; position:relative; }
.gm-ring svg{ display:block; }
.gm-ring-track{ fill:none; stroke:var(--bg-alt); stroke-width:4; }
.gm-ring-fill{ fill:none; stroke:var(--blue); stroke-width:4; stroke-linecap:round; transition:stroke-dasharray .6s ease; }
.gm-ring.is-mastered .gm-ring-fill{ stroke:var(--green); }
.gm-ring-count{ position:absolute; top:23px; left:0; right:0; font:600 .7rem var(--font-mono); color:var(--navy); }
.gm-ring-topic{ font-size:.74rem; color:var(--text-soft); line-height:1.3; overflow-wrap:anywhere; }
/* badge tiers (shared by the profile grid and the analytics shelf) */
.gm-badge.is-earned.gm-tier-bronze{ border-color:#C0844F; }
.gm-badge.is-earned.gm-tier-silver{ border-color:#9AA6B2; background:linear-gradient(180deg, #F4F6F8, var(--card)); }
.gm-badge.is-earned.gm-tier-gold{ border-color:#D4A017; background:linear-gradient(180deg, #FBF3D9, var(--card)); }
.gm-badge-track{ width:100%; height:4px; border-radius:999px; background:var(--border); overflow:hidden; margin-top:4px; }
.gm-badge-track span{ display:block; height:100%; background:var(--blue); border-radius:inherit; }
/* profile extras */
.gm-profile-extras{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.gm-card--wide{ grid-column:1 / -1; }
.gm-equipped-title{ display:inline-block; margin:2px 0 6px; font-size:.78rem; font-weight:700; color:var(--orange-ink); }
.gm-equipped-title[hidden]{ display:none; }
.gm-xp-history{ list-style:none; margin:0; padding:0; max-height:320px; overflow-y:auto; }
.gm-xp-row{ display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:baseline; padding:8px 2px; border-bottom:1px solid var(--border); font-size:.86rem; }
.gm-xp-row:last-child{ border-bottom:none; }
.gm-xp-row time{ font-size:.74rem; color:var(--text-soft); white-space:nowrap; }
.gm-xp-row b{ font:600 .82rem var(--font-mono); color:var(--green); white-space:nowrap; }
.gm-cos-group + .gm-cos-group{ margin-top:12px; }
.gm-cos-group h4{ font-size:.8rem; color:var(--text-soft); font-weight:600; margin-bottom:6px; }
.gm-cos-list{ display:flex; flex-wrap:wrap; gap:8px; }
.gm-cosmetic{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); text-align:left; font-size:.84rem; font-weight:600; color:var(--navy); }
.gm-cosmetic small{ font-weight:400; font-size:.72rem; color:var(--text-soft); }
.gm-cosmetic:hover:not(:disabled){ border-color:var(--blue); }
.gm-cosmetic.is-equipped{ border-color:var(--navy); background:rgba(47,93,124,.08); }
.gm-cosmetic.is-locked{ cursor:not-allowed; background:var(--bg-alt); color:var(--text-soft-alt); }
.gm-cosmetic.is-locked small{ color:var(--text-soft-alt); }
.gm-cosmetic:focus-visible, .gm-lb-tab:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
/* equipped frames and themes */
.gm-frame{ box-shadow:0 0 0 3px var(--card), 0 0 0 5px var(--frame, var(--blue)); }
.gm-frame-frame_bronze{ --frame:#C0844F; }
.gm-frame-frame_silver{ --frame:#9AA6B2; }
.gm-frame-frame_gold{ --frame:#D4A017; }
.profile-hero-card.gm-theme-theme_silver{ background:linear-gradient(135deg, #F4F6F8, var(--card) 60%); }
.profile-hero-card.gm-theme-theme_platinum{ background:linear-gradient(135deg, #E6F0F5, var(--card) 60%); }
.profile-hero-card.gm-theme-theme_diamond{ background:linear-gradient(135deg, #E3EEFB, #FDF1E7 70%); }
/* weekly league */
.gm-league{ display:flex; flex-direction:column; gap:14px; }
.gm-rival{ flex-direction:row; align-items:center; gap:14px; border-left:4px solid var(--orange); }
.gm-rival[hidden]{ display:none; }
.gm-rival-icon{ font-size:1.6rem; }
.gm-rival-title{ font:700 1rem var(--font-head); color:var(--navy); }
.gm-league-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.gm-league-ends{ font:.8rem var(--font-mono); color:var(--text-soft); }
.gm-league-legend{ display:flex; gap:8px; flex-wrap:wrap; }
.gm-zone{ font-size:.74rem; font-weight:600; border-radius:999px; padding:2px 10px; }
.gm-zone--up{ background:var(--green-bg); color:var(--green-ink); }
.gm-zone--down{ background:var(--red-bg); color:var(--red); }
.gm-league-table{ list-style:none; margin:0; padding:0; }
.gm-league-row{ display:flex; align-items:center; gap:12px; padding:9px 6px; border-bottom:1px solid var(--border); border-left:3px solid transparent; }
.gm-league-row.is-promote{ border-left-color:var(--green); background:linear-gradient(90deg, var(--green-bg), transparent 60%); }
.gm-league-row.is-demote{ border-left-color:var(--red); background:linear-gradient(90deg, var(--red-bg), transparent 60%); }
.gm-league-row.is-me{ font-weight:700; outline:1px solid var(--blue-soft); border-radius:var(--radius-sm); }
.gm-league-note{ font-size:.88rem; }
.gm-league-pause{ margin-top:6px; }
.gm-mini-avatar{ width:26px; height:26px; flex:none; border-radius:50%; background:var(--bg-alt); color:var(--navy); display:flex; align-items:center; justify-content:center; font:700 .75rem var(--font-head); }
/* XP fly-up (skipped entirely under reduced motion by celebrate.js) */
.gm-flyup{ position:fixed; z-index:210; transform:translate(-50%, 0); pointer-events:none; font:700 .95rem var(--font-head); color:var(--green); animation:gm-flyup 1.1s ease-out forwards; }
@keyframes gm-flyup{ from{ opacity:1; transform:translate(-50%, 0); } to{ opacity:0; transform:translate(-50%, -48px); } }

/* Celebration overlay (celebrate.js): level up, gold badge, chest. .is-animated is only set without reduced motion. */
.celebrate{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:16px; background:rgba(16,36,58,.55); }
.celebrate[hidden]{ display:none; }
.celebrate-box, .celebrate-content{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.celebrate-box .btn{ margin-top:14px; }
.celebrate-box{ max-width:360px; background:var(--card,#fff); color:var(--navy); border-radius:16px; padding:28px 36px; text-align:center; box-shadow:0 12px 40px rgba(16,36,58,.25); }
.celebrate-icon{ font-size:2.6rem; line-height:1; }
.celebrate-title{ font:800 1.3rem var(--font-head); }
.celebrate-sub{ font-size:.9rem; color:var(--text-soft); }
.celebrate[data-kind="jackpot"] .celebrate-box, .celebrate[data-kind="badge"] .celebrate-box{ border:2px solid #D4A017; }
.celebrate.is-animated .celebrate-box{ animation:gm-pop .5s cubic-bezier(.2,1.4,.4,1); }
.celebrate.is-animated .celebrate-icon{ animation:gm-bounce 1s ease-in-out 2; }
.celebrate.is-animated[data-kind="chest"] .celebrate-icon, .celebrate.is-animated[data-kind="jackpot"] .celebrate-icon{ animation:gm-shake .6s ease-in-out; }
@keyframes gm-pop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes gm-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes gm-shake{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-12deg); } 75%{ transform:rotate(12deg); } }
@media (prefers-reduced-motion: reduce){
  .gm-flyup, .celebrate .celebrate-box, .celebrate .celebrate-icon{ animation:none !important; }
}
@media (max-width:780px){
  .gm-row, .gm-profile-extras{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .celebrate-box{ padding:22px 20px; }
  .gm-rings{ grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); }
  .gm-xp-row{ grid-template-columns:1fr auto; }
  .gm-xp-row time{ grid-column:1; grid-row:2; }
  .gm-xp-row b{ grid-row:1 / span 2; grid-column:2; align-self:center; }
  .gm-league-row{ gap:8px; }
  .gm-lb-xp{ min-width:0; }
}

/* Touch targets (G-7): 44px minimum on phones and touch screens; desktop sizes are unchanged. */
#toggleLoginPassword{ right:10px; padding:4px; }
@media (max-width:780px), (pointer:coarse){
  .btn-sm, .gm-lb-tab, .choice-chip, .problem-item, .back-topic-button, .faq-q{ min-height:44px; }
  .icon-btn{ width:44px; height:44px; }
  #toggleLoginPassword{ right:0; min-width:44px; min-height:44px; }
  #forgotBtn, .switch-auth a, .header-actions .btn-ghost{ display:inline-block; padding:12px 4px; }
}

/* ---- Profile, leaderboard, help (UI polish batch 5) ---- */
.profile-unset, .info-row span.profile-unset{ color:var(--text-soft); font-weight:500; }
.profile-incomplete{ margin-top:10px; font-size:.86rem; color:var(--text-soft); }
.profile-empty{ font-size:.9rem; }
.link-btn{ background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--orange-ink); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.link-btn:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; border-radius:3px; }
.gm-setting select{ padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; font:inherit; font-weight:500; color:var(--text); background:#fff; }
.gm-setting select:focus{ outline:none; border-color:var(--blue-soft); box-shadow:0 0 0 3px rgba(47,93,124,.12); }
.gm-lb-tabrow{ display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; margin-bottom:14px; }
.gm-lb-tabrow .gm-lb-tabs{ margin-bottom:0; }
.gm-lb-tablabel{ margin:0; min-width:52px; font-size:.84rem; }
.gm-empty .btn{ margin-left:8px; }
#supportCard[hidden]{ display:none !important; }
.hero-meta > span[hidden], .role-badge[hidden], .profile-incomplete[hidden]{ display:none; }
.gm-lb-name{ overflow-wrap:anywhere; }
.gm-lb-xp small{ display:block; font:500 .72rem var(--font-body); color:var(--text-soft); }