/* =============================================================================
   Band 7 Lab — styles (full rewrite)
   - Dark premium theme for dashboard / picker / result / coach / history.
   - Light CD-IELTS theme strictly under .cd-exam, scoped so it can't leak.
   - Defensive: [hidden] is always respected, even when an author rule sets
     display: on the same selector. This prevents the bug where a fixed
     position view was always visible and ate clicks on other views.
   ============================================================================= */

/* ---- defensive: HTML `hidden` always wins ------------------------------- */
[hidden]{display:none !important}

/* ---- root tokens -------------------------------------------------------- */
:root{
  --bg:         #0c1220;
  --bg-soft:    #141b2d;
  --panel:      #182238;
  --panel-2:    #1f2b46;
  --line:       #2a3656;
  --line-soft:  #1e2944;
  --text:       #ecf1fb;
  --muted:      #9ba8c4;
  --faint:      #6b7898;

  --brand:      #5b8cff;
  --brand-2:    #84baff;
  --accent:     #ffb454;
  --good:       #3ecf8e;
  --warn:       #ffb454;
  --bad:        #ff6b6b;

  --radius:     14px;
  --radius-sm:  10px;
  --radius-xs:  8px;
  --shadow:     0 12px 32px rgba(0,0,0,.4);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* ---- base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--brand-2)}
h1,h2,h3{line-height:1.2}
button{font-family:inherit; cursor:pointer; color:inherit}

/* ---- topbar ------------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:rgba(12,18,32,.85);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:none; padding:4px 0; cursor:pointer;
}
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#0b1326; font-weight:800; font-size:15px;
}
.brand-name{font-weight:700; letter-spacing:.2px; font-size:15px}
.topnav{display:flex; gap:8px}
.ghost-btn{
  background:transparent; color:var(--muted);
  border:1px solid var(--line); border-radius:10px;
  padding:7px 12px; font-size:13px;
}
.ghost-btn:hover{color:var(--text); border-color:var(--brand)}

/* ---- layout ------------------------------------------------------------- */
#app{max-width:1080px; margin:0 auto; padding:20px 16px 80px}
.view{animation:fade .22s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.view-title{font-size:20px; margin:8px 2px 14px}
.back-btn{
  background:none; border:none; color:var(--muted);
  padding:6px 0 14px; font-size:14px;
}
.back-btn:hover{color:var(--text)}

/* ---- hero --------------------------------------------------------------- */
.hero{padding:8px 4px 4px; margin-bottom:6px}
.hero h1{
  font-size:clamp(22px, 3.6vw, 30px);
  margin:0 0 8px; letter-spacing:-.5px;
}
.hero-sub{
  color:var(--muted); margin:0; max-width:60ch;
  font-size:15px; line-height:1.55;
}

/* ---- stat cards --------------------------------------------------------- */
.stat-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin:18px 0;
}
.stat-card{
  position:relative;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px;
}
.stat-label{display:block; font-size:12px; color:var(--muted)}
.stat-value{
  display:block; font-size:28px; font-weight:800; margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.stat-unit{font-size:14px; color:var(--muted); margin-left:1px; font-weight:600}
.stat-link{
  position:absolute; top:10px; right:10px;
  background:none; border:none; color:var(--brand-2); font-size:11px; padding:0;
}

/* ---- Learn primary CTA on home --------------------------------------- */
.learn-cta{
  display:flex; align-items:center; gap:18px; width:100%;
  background:linear-gradient(160deg, #1f3970, #1a2538);
  border:1px solid #3a4f86; border-radius:var(--radius);
  padding:22px 22px;
  text-align:left; color:var(--text);
  cursor:pointer; transition:transform .12s, border-color .12s, background .12s;
  margin-bottom:18px;
}
.learn-cta:hover{transform:translateY(-2px); border-color:var(--brand-2)}
.learn-cta-left{flex:1; min-width:0}
.learn-cta-kicker{font-size:11px; letter-spacing:.4px; color:var(--accent); text-transform:uppercase; font-weight:700}
.learn-cta-title{font-size:22px; font-weight:800; margin-top:6px; letter-spacing:-.2px}
.learn-cta-desc{font-size:13px; color:var(--muted); margin-top:6px; line-height:1.55}
.learn-cta-progress{
  display:flex; flex-direction:column; align-items:center; gap:0;
  background:rgba(0,0,0,.18); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px 18px;
  min-width:120px;
}
.learn-cta-mastered{
  font-size:34px; font-weight:800; color:var(--brand-2); line-height:1;
  font-variant-numeric:tabular-nums;
}
.learn-cta-mastered span{font-size:18px; color:var(--muted); font-weight:600}
.learn-cta-prog-label{font-size:11px; letter-spacing:.4px; color:var(--muted); text-transform:uppercase; margin-top:4px; font-weight:600}
.learn-cta-prog-sub{font-size:11px; color:var(--accent); margin-top:2px}

/* ---- Fast-mark CTA on home (paste & mark the aha path) ------------------ */
.fastmark-cta{
  display:flex; align-items:center; gap:18px; width:100%;
  background:linear-gradient(160deg, #143a2f, #15241f);
  border:1px solid var(--good); border-radius:var(--radius);
  padding:22px; text-align:left; color:var(--text);
  cursor:pointer; transition:transform .12s, border-color .12s, box-shadow .12s;
  margin-bottom:14px;
}
.fastmark-cta:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(62,207,142,.18)}
.fastmark-cta-main{flex:1; min-width:0}
.fastmark-cta-kicker{font-size:11px; letter-spacing:.4px; color:var(--good); text-transform:uppercase; font-weight:700}
.fastmark-cta-title{font-size:22px; font-weight:800; margin-top:6px; letter-spacing:-.2px}
.fastmark-cta-desc{font-size:13px; color:var(--muted); margin-top:6px; line-height:1.55}
.fastmark-cta-arrow{font-size:28px; color:var(--good); font-weight:700; flex-shrink:0}

/* ---- Paste & mark view -------------------------------------------------- */
.back-link{
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:13px; padding:6px 0; margin-bottom:8px;
}
.back-link:hover{color:var(--text)}
.paste-wrap{max-width:780px; margin:0 auto}
.paste-h1{font-size:26px; font-weight:800; letter-spacing:-.3px; margin:0 0 8px}
.paste-sub{font-size:14px; color:var(--muted); line-height:1.6; margin:0 0 22px}
.paste-field{margin-bottom:18px}
.paste-label{display:block; font-size:13px; font-weight:700; color:var(--text); margin-bottom:8px}
.paste-opt{font-weight:400; color:var(--faint)}
.paste-input{
  width:100%; box-sizing:border-box;
  background:var(--bg-soft); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:15px; font-family:var(--sans); line-height:1.6;
  resize:vertical; transition:border-color .12s;
}
.paste-input:focus{outline:none; border-color:var(--brand)}
.paste-essay{min-height:280px}
.paste-foot{display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:12px; flex-wrap:wrap}
.paste-words{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.paste-mark-btn{
  background:var(--good); color:#06281b; border:none;
  border-radius:var(--radius-sm); padding:12px 24px;
  font-size:15px; font-weight:800; cursor:pointer; transition:opacity .12s, transform .12s;
}
.paste-mark-btn:hover:not(:disabled){transform:translateY(-1px)}
.paste-mark-btn:disabled{opacity:.4; cursor:not-allowed}

/* ---- focus banner ------------------------------------------------------- */
.focus-banner{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(90deg, rgba(91,140,255,.18), rgba(132,186,255,.05));
  border:1px solid #2f3f66;
  border-radius:var(--radius-sm); padding:12px 14px;
  margin-bottom:18px; font-size:14px;
}
.focus-icon{color:var(--brand); font-size:10px}

/* ---- CTA grid ----------------------------------------------------------- */
.cta-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px}
.cta-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  text-align:left;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px;
  transition:transform .12s, border-color .12s, background .12s;
}
.cta-card:hover{transform:translateY(-2px); border-color:var(--brand)}
.cta-card.primary{
  background:linear-gradient(160deg, #233461, #1a2236);
  border-color:#3a4f86;
}
.cta-kicker{font-size:11px; color:var(--accent); letter-spacing:.4px; text-transform:uppercase}
.cta-title{font-size:18px; font-weight:700}
.cta-desc{font-size:13px; color:var(--muted)}

/* ---- panels ------------------------------------------------------------- */
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; margin-bottom:18px;
}
.panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:14px;
}
.panel-head h2{font-size:16px; margin:0}
.panel-note{font-size:12px; color:var(--muted)}

/* ---- band chart --------------------------------------------------------- */
.progress-chart .chart-svg{display:block; width:100%; height:auto}
.chart-svg text{fill:var(--muted); font-family:var(--sans)}
.mastery-chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.mastery-chip{background:#e6f4ea; color:#137a3f; border:1px solid #b7e0c4; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600}
.legal-footer{margin:28px auto 10px; max-width:640px; font-size:11px; line-height:1.6; color:var(--muted); text-align:center; opacity:.85}
.device-note{margin:-6px auto 22px; max-width:620px; font-size:12.5px; line-height:1.5; color:var(--muted); text-align:center; opacity:.92}
.legal-footer a{color:var(--muted); text-decoration:underline}
.legal-footer a:hover{color:var(--text, #e8edf7)}
.text-input{width:100%; box-sizing:border-box; background:rgba(255,255,255,.04); color:var(--text,#e8edf7); border:1px solid var(--line,#2a3550); border-radius:8px; padding:10px 12px; font-size:14px; margin-top:4px}
.text-input:focus{outline:none; border-color:var(--brand,#2563eb)}
.field-label{display:block; font-size:12px; color:var(--muted,#9aa6c2); margin-top:10px; font-weight:600}
.field-error{color:#ff6b6b; font-size:13px; margin-top:8px}

/* ---- recent list / history --------------------------------------------- */
.recent-list{display:flex; flex-direction:column; gap:8px}
.attempt{
  display:flex; align-items:center; gap:12px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px;
}
.attempt-band{
  font-size:22px; font-weight:800;
  min-width:48px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.attempt-meta{flex:1; min-width:0}
.attempt-title{font-weight:600; font-size:14px}
.attempt-sub{font-size:12px; color:var(--muted); margin-top:2px}
.attempt-view{
  background:none; border:1px solid var(--line); border-radius:8px;
  color:var(--muted); padding:6px 10px; font-size:12px;
}
.attempt-view:hover{color:var(--text); border-color:var(--brand)}
.attempt-delete{
  background:none; border:1px solid #6e3333; border-radius:8px;
  color:#d98a8a; padding:5px 9px; font-size:12px; margin-left:6px;
}
.attempt-delete:hover{background:rgba(255,107,107,.10); color:#ffb0b0}

/* ---- achievements ------------------------------------------------------- */
.achievements{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
}
.ach{
  display:flex; gap:10px; align-items:center;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px;
  opacity:.45; transition:opacity .2s, border-color .2s;
}
.ach.unlocked{opacity:1; border-color:#39507f}
.ach-ico{
  width:28px; height:28px; flex:none;
  border-radius:8px; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--brand-2);
}
.ach-ico.unlocked{background:linear-gradient(135deg, var(--good), #2a8966); color:#0a221a}
.ach-txt{font-size:12px; line-height:1.3}
.ach-txt b{display:block; font-size:13px; margin-bottom:1px}

/* ---- picker ------------------------------------------------------------- */
.picker-list{display:flex; flex-direction:column; gap:12px}
.picker-card{
  display:flex; gap:14px; align-items:center; text-align:left;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px;
}
.picker-card:hover{border-color:var(--brand)}
.picker-thumb{
  width:96px; height:64px; border-radius:8px;
  background:var(--bg-soft); border:1px solid var(--line);
  flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.picker-thumb svg{width:100%; height:100%}
.picker-info{flex:1; min-width:0}
.picker-kicker{
  font-size:11px; color:var(--accent);
  text-transform:uppercase; letter-spacing:.4px;
}
.picker-title{font-weight:700; font-size:15px; margin-top:2px}
.picker-desc{
  font-size:13px; color:var(--muted); margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.picker-card.random{background:linear-gradient(160deg, #233461, #1a2236); border-color:#3a4f86}
.picker-plan-btn{
  display:inline-block; margin-top:10px;
  background:transparent; color:var(--brand-2);
  border:1px solid var(--line); border-radius:8px;
  padding:6px 12px; font-size:12px; font-weight:600;
}
.picker-plan-btn:hover{background:rgba(91,140,255,.08); border-color:var(--brand)}
.picker-card{cursor:pointer}
.picker-card:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.picker-helpers{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}

/* ---- Learn module list + module flow --------------------------------- */
.module-list{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.module-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px;
  text-align:left; cursor:pointer;
  transition:transform .12s, border-color .12s, background .12s;
}
.module-card:hover{transform:translateY(-1px); border-color:var(--brand)}
.module-card:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.module-card.mastered{border-color:#2f5b48; background:linear-gradient(160deg, rgba(62,207,142,.06), transparent)}
.module-card-head{display:flex; align-items:center; gap:12px; justify-content:space-between}
.module-card-title{font-weight:700; font-size:16px}
.module-card-short{font-size:13px; color:var(--muted); margin-top:6px; line-height:1.4}
.module-card-blocks{font-size:12px; color:var(--brand-2); margin-top:8px}
.module-card-blocks b{font-weight:700}
.module-card-meta{
  display:flex; align-items:center; gap:10px; margin-top:8px;
  font-size:12px; color:var(--muted); flex-wrap:wrap;
}
.module-card-meta b{color:var(--brand-2); font-weight:700}
.module-tier-badge{
  display:inline-block; font-size:10px; font-weight:800;
  letter-spacing:.4px; text-transform:uppercase;
  padding:3px 9px; border-radius:20px;
}
.module-tier-badge.foundation{background:rgba(255,180,84,.16); color:var(--accent); border:1px solid #4d3a18}
.module-tier-badge.polish{background:rgba(132,186,255,.10); color:var(--brand-2); border:1px solid #34487a}

.module-section{margin-bottom:24px}
.module-section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; margin-bottom:6px;
}
.module-section-head h3{font-size:16px; margin:0; color:var(--text)}
.module-section-progress{font-size:13px; color:var(--brand-2); font-weight:700}
.module-section-lead{font-size:13px; color:var(--muted); margin:0 0 12px; line-height:1.55}
.module-badge{
  display:inline-block; font-size:11px; font-weight:700;
  background:var(--panel-2); color:var(--brand-2);
  border:1px solid var(--line); border-radius:20px;
  padding:3px 10px;
}
.module-badge.mastered{background:var(--good); color:#0a221a; border-color:var(--good)}

.module-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:10px}
.module-meta{font-size:13px; color:var(--muted)}
.module-meta b{color:var(--brand-2)}

.module-why{
  background:linear-gradient(90deg, rgba(255,180,84,.08), transparent);
  border:1px solid #4d3a18; border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); padding:12px 14px;
  margin-bottom:18px;
}
.module-why-label{font-size:11px; letter-spacing:.4px; color:var(--accent); font-weight:700; text-transform:uppercase; margin-bottom:6px}
.module-why div:last-child{font-size:13px; color:var(--muted); line-height:1.55}

.module-concept{font-size:14px; line-height:1.6; color:var(--text)}
.module-concept p{margin:0 0 10px}

.module-example{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:10px;
}
.module-example-good{border-left:3px solid var(--good)}
.module-example-bad{border-left:3px solid var(--bad)}
.module-example-label{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; padding:2px 9px; border-radius:20px;
  margin-bottom:8px;
}
.module-example-good .module-example-label{background:var(--good); color:#0a221a}
.module-example-bad  .module-example-label{background:var(--bad);  color:#220a0a}
.module-example-prompt{font-size:13px; color:var(--muted); margin-bottom:6px}
.module-example-text{font-family:var(--serif); font-size:15px; line-height:1.6; color:var(--text); padding:10px 12px; background:var(--panel-2); border-radius:8px}
.module-example-why{font-size:12px; color:var(--muted); margin-top:8px; font-style:italic}

.module-tryit-prompt{
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--brand-2);
  border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:14px;
  font-size:14px; line-height:1.5; color:var(--text);
}

/* ---- module walkthrough (the "we do" stage) -------------------------- */
.walkthrough{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:18px;
}
.walkthrough-scenario{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--brand-2);
  border-radius:8px; padding:12px 14px; margin-bottom:16px;
}
.walkthrough-scenario-label{
  font-size:11px; color:var(--brand-2); letter-spacing:.4px;
  font-weight:700; margin-bottom:4px;
}
.walkthrough-scenario div:last-child{font-size:14px; line-height:1.5; color:var(--text)}
.walkthrough-step{
  display:flex; gap:14px;
  padding:12px 0; border-bottom:1px dashed var(--line);
}
.walkthrough-step:last-of-type{border-bottom:none}
.walkthrough-step-num{
  width:28px; height:28px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:800;
  flex:none; display:flex; align-items:center; justify-content:center; font-size:13px;
}
.walkthrough-step-body{flex:1}
.walkthrough-step-label{font-weight:700; font-size:14px; color:var(--text); margin-bottom:4px}
.walkthrough-step-thinking{
  font-size:13px; color:var(--muted); line-height:1.6;
  font-style:italic;
}
.walkthrough-final{
  background:linear-gradient(160deg, rgba(62,207,142,.10), transparent);
  border:1px solid #2f5b48; border-radius:8px;
  padding:12px 14px; margin-top:14px;
}
.walkthrough-final-label{font-size:11px; color:var(--good); letter-spacing:.4px; font-weight:700; margin-bottom:6px}
.walkthrough-final-text{
  font-family:var(--serif); font-size:15px; line-height:1.65; color:var(--text);
}

/* ---- expandable hints on try-it -------------------------------------- */
.hints-section{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:14px;
}
.hints-label{font-size:12px; color:var(--muted); margin-bottom:8px; font-weight:600}
.hint-item{margin-bottom:6px}
.hint-item summary{
  cursor:pointer; font-size:13px; padding:8px 12px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  color:var(--brand-2); font-weight:600; list-style:none;
  display:flex; align-items:center; gap:8px;
}
.hint-item summary::-webkit-details-marker{display:none}
.hint-item summary::before{content:"+"; font-weight:800; color:var(--brand-2); width:14px; display:inline-block; text-align:center}
.hint-item[open] summary::before{content:"−"; color:#fff}
.hint-item[open] summary{background:var(--brand); color:#fff; border-color:var(--brand)}
.hint-text{
  padding:10px 12px; font-size:13px; color:var(--muted); line-height:1.55;
  background:var(--panel-2); border:1px solid var(--line); border-top:none;
  border-radius:0 0 8px 8px; margin-top:-1px;
}

.module-result-hero{
  background:linear-gradient(160deg, #233460, #161d30);
  border:1px solid #34487a; border-radius:var(--radius);
  padding:24px; text-align:center; margin-bottom:18px;
}
.module-result-hero.pass{background:linear-gradient(160deg, rgba(62,207,142,.18), #161d30); border-color:#2f5b48}
.module-result-hero.fail{background:linear-gradient(160deg, rgba(255,107,107,.10), #161d30); border-color:#6e3333}
.module-result-label{font-size:12px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase}
.module-result-pass{font-size:34px; font-weight:800; margin-top:6px}
.module-result-hero.pass .module-result-pass{color:var(--good)}
.module-result-hero.fail .module-result-pass{color:var(--accent)}
.module-result-score{font-size:14px; color:var(--muted); margin-top:8px}

/* ---- topbar active state -------------------------------------------- */
.ghost-btn.active{
  background:var(--brand); color:#fff; border-color:var(--brand); font-weight:700;
}
.ghost-btn.active:hover{background:#4a7bf0; color:#fff}

/* ---- mode toggle + staged practice ---------------------------------- */
.mode-toggle{
  display:flex; gap:8px; align-items:center;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:8px;
  margin-bottom:18px; flex-wrap:wrap;
}
.mode-toggle-label{
  font-size:12px; color:var(--muted); font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; margin-right:6px;
}
.mode-btn{
  background:transparent; color:var(--muted);
  border:1px solid var(--line); border-radius:8px;
  padding:7px 14px; font-size:13px; font-weight:600;
}
.mode-btn.active{background:var(--brand); color:#fff; border-color:var(--brand)}
.mode-btn:hover:not(.active){border-color:var(--brand); color:var(--text)}

.staged-progress{
  display:flex; gap:6px; margin-bottom:18px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px;
}
.staged-stage{
  flex:1; display:flex; align-items:center; gap:10px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-xs); padding:10px 14px;
  font-size:13px; color:var(--muted);
}
.staged-stage.active{background:linear-gradient(160deg, #233461, #1a2236); border-color:#3a4f86; color:var(--text)}
.staged-num{
  width:22px; height:22px; border-radius:50%;
  background:var(--bg-soft); color:var(--brand-2);
  font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.staged-stage.active .staged-num{background:var(--brand); color:#fff}
.staged-time{margin-left:auto; font-size:12px; color:var(--faint)}

.staged-prompt-box{
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--brand-2);
  border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:18px;
}
.staged-prompt-label{
  font-size:11px; color:var(--brand-2); font-weight:700;
  letter-spacing:.4px; margin-bottom:6px;
}
.staged-prompt-text{font-size:14px; line-height:1.55; color:var(--text)}

.staged-textarea-label{
  display:block; font-size:13px; font-weight:700;
  margin-bottom:8px; color:var(--text);
}
.staged-plan-textarea{
  width:100%; min-height:200px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text);
  padding:14px 16px; font-family:var(--serif); font-size:15px; line-height:1.6;
  resize:vertical; outline:none;
}
.staged-plan-textarea:focus{border-color:var(--brand)}
.staged-plan-textarea::placeholder{color:var(--faint); white-space:pre-line}

.staged-help-actions{display:flex; gap:8px; margin:12px 0 18px}
.staged-help-actions button{flex:1}

/* Plan shown alongside the prompt during the writing stage */
.staged-plan-shown{
  background:#003057; color:#fff;
  border-left:3px solid #ffce00;
  border-radius:4px; padding:10px 14px; margin:14px 0;
  font-size:13px;
}
.staged-plan-shown-label{
  font-size:10px; letter-spacing:.5px; color:#ffce00;
  font-weight:700; margin-bottom:6px;
}
.staged-plan-shown-text{
  font-family:var(--cd-sans, Arial, sans-serif); line-height:1.5;
  white-space:pre-wrap; color:#fff;
}

/* ---- idea bank ------------------------------------------------------- */
.idea-position{
  background:var(--panel-2); border:1px solid var(--line);
  border-left:3px solid var(--brand-2);
  border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px;
}
.idea-stance{font-weight:700; font-size:14px; color:var(--text)}
.idea-why{font-size:13px; color:var(--muted); margin-top:3px}

.idea-arg{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px;
}
.idea-arg-support{border-left:3px solid var(--good)}
.idea-arg-counter{border-left:3px solid var(--accent)}
.idea-arg-head{font-weight:600; font-size:14px}
.idea-arg-eg{font-size:13px; color:var(--brand-2); margin-top:4px; font-style:italic}
.idea-arg-tag{font-size:12px; color:var(--muted); margin-top:6px; padding-top:6px; border-top:1px dashed var(--line)}

.idea-thesis{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px;
  font-family:var(--serif); font-size:14px; line-height:1.5;
  color:var(--text);
}

/* =========================================================================
   CD-IELTS exam screen (light theme, scoped under .cd-exam)
   The .cd-exam[hidden] rule at the top guarantees the screen disappears
   when the router sets hidden=true.
   ========================================================================= */
.cd-exam{
  /* CD-IELTS palette — taken from the real exam interface spec.
     Primary blue #003057 is the British Council / IDP IELTS brand navy.
     Body background is light grey #f4f4f4 (not pure white) — the editable
     panes are white on top of it. Text #333. Borders #ccc. Font Arial. */
  --cd-blue:#003057;
  --cd-blue-2:#001f3a;
  --cd-bg:#f4f4f4;
  --cd-bg-soft:#e8e8e8;
  --cd-bg-stim:#ffffff;
  --cd-bg-write:#ffffff;
  --cd-text:#333333;
  --cd-muted:#555555;
  --cd-line:#cccccc;
  --cd-line-strong:#999999;
  --cd-warn:#b87800;
  --cd-danger:#cf2e2e;
  --cd-submit:#28a745;        /* matches the official Start button green */
  --cd-submit-2:#1e8035;
  --cd-sans: Arial, Helvetica, "Liberation Sans", sans-serif;

  /* IMPORTANT: this is a fixed-overlay screen that REPLACES the topbar.
     Only when [hidden]=false (router shows the exam) it lays out as flex.
     The [hidden] !important rule at the top makes sure switching back
     to home actually hides it.                                            */
  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column;
  background:var(--cd-bg); color:var(--cd-text);
  font-family:var(--cd-sans);
}
.cd-exam *{font-family:var(--cd-sans)}

.cd-bar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--cd-blue); color:#fff;
  padding:6px 12px; border-bottom:2px solid #001f3a;
  flex:none; min-height:42px;
}
.cd-bar-left{display:flex; align-items:center; gap:14px; min-width:0}
.cd-test-name{font-size:14px; font-weight:700; letter-spacing:.2px; white-space:nowrap}
.cd-phase{
  font-size:12px; color:#cbd6e8;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  padding:2px 9px; border-radius:3px;
}
.cd-bar-right{display:flex; align-items:center; gap:8px}
.cd-bar-btn{
  background:#e0e0e0; color:#333; border:1px solid #cccccc;
  border-radius:3px; padding:4px 12px; font-size:13px; font-weight:700;
}
.cd-bar-btn:hover{background:#d0d0d0}
.cd-bar-btn-quit{background:#fff0f0; color:#8b2020; border-color:#e0a0a0}
.cd-bar-btn-quit:hover{background:#ffe0e0}

.cd-timer-wrap{
  display:flex; flex-direction:column; align-items:center;
  background:#000; color:#fff;
  padding:2px 14px; border-radius:3px; min-width:130px; line-height:1.1;
  border:1px solid #000;
}
.cd-timer-label{
  font-size:9px; color:#bcbcbc; letter-spacing:.5px;
  text-transform:uppercase; font-weight:600;
}
.cd-timer{
  font-variant-numeric:tabular-nums;
  font-size:20px; font-weight:800; color:#fff;
  font-family:Arial, sans-serif;
}
.cd-timer.warn{color:#ffcc00}
.cd-timer.danger{color:#ff6666; animation:cd-pulse 1s infinite}
@keyframes cd-pulse{50%{opacity:.55}}

.cd-tabs{
  display:flex; background:var(--cd-bg-soft);
  border-bottom:1px solid var(--cd-line); flex:none;
}
.cd-tabs button{
  background:#e0e0e0; color:#333; border:none;
  border-right:1px solid var(--cd-line);
  padding:8px 24px; font-size:13px; font-weight:700;
}
.cd-tabs button.active{
  background:var(--cd-bg-stim); color:var(--cd-text);
  border-bottom:2px solid var(--cd-blue);
}

.cd-task-strip{
  background:#fff7d6; border-bottom:1px solid #d9c98b;
  padding:7px 16px; flex:none;
}
.cd-task-rubric{font-size:13px; color:#5e4f1a; font-weight:700}

.cd-body{
  flex:1; min-height:0;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--cd-bg);
  gap:0;
  padding:8px;
  border-top:1px solid var(--cd-line);
}
.cd-stim{
  background:var(--cd-bg-stim);
  border:1px solid var(--cd-line);
  display:flex; flex-direction:column; min-height:0;
  margin-right:4px;
}
.cd-stim-scroll{
  padding:22px 28px; overflow:auto; flex:1;
  font-size:15px; line-height:1.55; color:var(--cd-text);
}
.cd-write{
  background:var(--cd-bg-write);
  border:1px solid var(--cd-line);
  display:flex; flex-direction:column; min-height:0;
  margin-left:4px;
}
.cd-answer{
  flex:1; width:100%; border:none; background:transparent;
  color:var(--cd-text);
  font-family:var(--cd-sans); font-size:16px; line-height:1.6;
  padding:20px 22px; resize:none; outline:none;
}
.cd-answer::placeholder{color:#999999}

.cd-stim h3.task-prompt-head{font-size:14px; color:var(--cd-blue); margin:0 0 10px; text-transform:uppercase; letter-spacing:.4px}
.cd-stim .task-prompt{font-size:15px; margin:0 0 14px; line-height:1.55}
.cd-stim .task-instruction{
  font-size:13px; color:var(--cd-muted);
  border-top:1px dashed var(--cd-line);
  padding-top:12px; margin-top:14px;
}
.cd-stim .chart-wrap{
  background:#fff; border:1px solid var(--cd-line);
  border-radius:4px; padding:14px; margin:10px 0;
}
.cd-stim .chart-title{
  font-size:13px; color:var(--cd-blue); font-weight:700;
  text-align:center; margin-bottom:8px;
}
.cd-stim .chart-svg{display:block; width:100%; height:auto; max-width:460px; margin:0 auto}
.cd-stim .chart-svg text{fill:var(--cd-muted)}
.cd-stim .chart-legend{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:8px; font-size:12px; color:var(--cd-muted);
}
.cd-stim .legend-dot{
  width:11px; height:11px; border-radius:3px;
  display:inline-block; margin-right:5px; vertical-align:-1px;
}
.cd-stim .data-table{width:100%; border-collapse:collapse; font-size:13px}
.cd-stim .data-table th{
  background:#e8edf5; color:var(--cd-text);
  border:1px solid var(--cd-line); padding:7px 9px; text-align:center;
}
.cd-stim .data-table td{
  border:1px solid var(--cd-line); padding:7px 9px;
  text-align:center; color:var(--cd-text);
}
.cd-stim .data-table td:first-child,
.cd-stim .data-table th:first-child{text-align:left}
.cd-stim .proc-steps{display:flex; flex-direction:column; gap:8px}
.cd-stim .proc-step{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--cd-text)}
.cd-stim .proc-num{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--cd-blue); color:#fff; font-size:12px;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.cd-stim .proc-cyclic{font-size:12px; color:var(--cd-blue-2); text-align:center; margin-top:8px}

.cd-foot{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--cd-bg-soft); border-top:2px solid var(--cd-line);
  padding:8px 14px; flex:none; min-height:42px;
}
.cd-words{
  font-size:13px; color:var(--cd-muted);
  font-variant-numeric:tabular-nums;
  display:flex; gap:6px; align-items:baseline;
}
.cd-words-label{font-weight:700; color:var(--cd-text)}
.cd-words #wordCount{color:var(--cd-text); font-weight:800; font-size:16px}
.cd-words-target{color:var(--cd-muted)}
.cd-words.ok #wordCount{color:#1e8035}

.cd-submit{
  background:var(--cd-submit); color:#fff; border:none;
  border-radius:3px; padding:7px 20px;
  font-size:14px; font-weight:700; letter-spacing:.2px;
  font-family:Arial, sans-serif;
}
.cd-submit:hover{background:var(--cd-submit-2)}

/* CD-IELTS Hide overlay */
.cd-hide-overlay{
  position:fixed; inset:0; z-index:80;
  background:var(--cd-blue);
  display:flex; align-items:center; justify-content:center;
  font-family:Arial, Helvetica, sans-serif;
}
.cd-hide-card{
  background:#fff; padding:32px 36px; border-radius:6px;
  max-width:380px; text-align:center;
}
.cd-hide-card h2{margin:0 0 10px; color:#1c3d6e; font-size:20px}
.cd-hide-card p{color:#5b6577; margin:0 0 18px; font-size:14px; line-height:1.5}
.cd-hide-card button{
  background:#10693a; color:#fff; border:none; padding:10px 22px;
  border-radius:3px; font-weight:800; font-size:14px;
}
.cd-hide-card button:hover{background:#0d572f}

/* =========================================================================
   Result screen — band hero, criteria grid, edits with Apply, patterns.
   ========================================================================= */
.result-hero{
  background:linear-gradient(160deg, #233460, #161d30);
  border:1px solid #34487a; border-radius:var(--radius);
  padding:24px; text-align:center; margin-bottom:18px;
}
.result-hero-label{font-size:12px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase}
.result-hero-band{font-size:68px; font-weight:800; line-height:1; margin:6px 0; font-variant-numeric:tabular-nums}
.result-hero-target{font-size:14px; color:var(--muted)}
.result-hero-target .hit{color:var(--good); font-weight:700}
.result-hero-target .miss{color:var(--accent); font-weight:700}
.result-hero-note{font-size:12px; color:var(--faint); margin-top:10px; max-width:50ch; margin-left:auto; margin-right:auto}

.compare-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:linear-gradient(90deg, rgba(91,140,255,.12), rgba(132,186,255,.04));
  border:1px solid #34487a; border-radius:var(--radius);
  padding:14px 18px; margin-bottom:16px;
}
.compare-banner-text{display:flex; flex-direction:column; gap:2px}
.compare-banner-text b{font-size:14px}
.compare-banner-text b.up{color:var(--good)}
.compare-banner-text b.down{color:var(--accent)}
.compare-banner-text span{font-size:13px; color:var(--muted)}

.compare-table{
  width:100%; border-collapse:collapse; margin-bottom:18px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden;
}
.compare-table th, .compare-table td{
  padding:9px 12px; border-bottom:1px solid var(--line);
  font-size:14px; text-align:left;
}
.compare-table th{background:var(--panel-2); color:var(--muted); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.4px}
.compare-table td.up{color:var(--good); font-weight:700}
.compare-table td.down{color:var(--accent); font-weight:700}

.compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px}
.compare-col{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.compare-col-current{border-color:#34487a; background:linear-gradient(160deg, #1a2543, #131a2c)}
.compare-col h3{margin:0 0 4px; font-size:14px; color:var(--brand-2)}
.compare-sub{font-size:12px; color:var(--muted); margin-bottom:10px}
.compare-col .your-answer{font-size:14px; line-height:1.65; padding:12px}

.delta-banner{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(90deg, rgba(62,207,142,.18), rgba(91,140,255,.06));
  border:1px solid #2f5b48; border-radius:var(--radius);
  padding:14px 18px; margin-bottom:16px;
}
.delta-banner b{font-size:18px}
.delta-banner b.up{color:var(--good)}
.delta-banner b.down{color:var(--accent)}
.delta-sub{font-size:13px; color:var(--muted); flex:1}

.crit-grid{display:grid; gap:10px; grid-template-columns:1fr 1fr; margin-bottom:18px}
.crit{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px}
.crit-head{display:flex; align-items:center; gap:12px}
.crit-name{font-weight:600; font-size:14px; flex:1}
.crit-band{
  font-size:22px; font-weight:800; min-width:38px;
  text-align:right; font-variant-numeric:tabular-nums;
}
.crit-meter{height:6px; border-radius:6px; background:var(--bg-soft); margin:9px 0; overflow:hidden}
.crit-meter i{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, var(--brand), var(--brand-2))}
.crit-evidence{font-size:13px; color:var(--muted); line-height:1.5}

.result-section{margin-bottom:18px}
.result-section h3{font-size:15px; margin:0 0 10px}
.section-lead{font-size:13px; color:var(--muted); margin:-2px 0 12px; line-height:1.5}

.upgrade{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:10px;
}
.upgrade.applied{background:linear-gradient(0deg, rgba(62,207,142,.05), transparent); border-color:#2f5b48}
.upg-tag{
  display:inline-block; font-size:10px; letter-spacing:.4px;
  text-transform:uppercase; color:#cde0ff;
  background:#26365e; border:1px solid #34487a;
  border-radius:20px; padding:2px 9px; margin-bottom:8px;
}
.upg-pair{display:grid; gap:6px; font-family:var(--serif); font-size:14px}
.upg-before{color:#ff9d9d; text-decoration:line-through; text-decoration-color:#7a3838}
.upg-after{color:#9ff0c4}
.upg-row{
  display:flex; align-items:center; gap:10px; margin-top:8px;
  border-top:1px dashed var(--line); padding-top:7px;
}
.upg-why{font-size:12px; color:var(--muted); flex:1}
.upg-apply{
  background:var(--brand); color:#fff; border:none;
  border-radius:8px; padding:7px 14px;
  font-size:12px; font-weight:700; flex:none;
}
.upg-apply:hover{background:#4a7bf0}
.upg-apply.applied{background:#2f5b48; color:#9ff0c4; cursor:default}
.upg-apply:disabled{cursor:default; opacity:.85}

.remark-bar{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(160deg, #233461, #161d30);
  border:1px solid #3a4f86; border-radius:var(--radius);
  padding:14px 16px; margin-top:14px;
  position:sticky; bottom:14px; z-index:5;
}
.remark-status{font-size:13px; color:var(--brand-2); flex:1}

.pattern{
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:10px;
}
.pat-name{font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px}
.pat-count{
  font-size:11px; color:#1a1100; background:var(--accent);
  border-radius:20px; padding:1px 8px; font-weight:800;
}
.pat-rule{font-size:13px; color:var(--muted); margin-top:4px}
.pat-eg{font-family:var(--serif); font-size:13px; color:#ffd9a8; margin-top:6px}
.pat-fix{font-size:13px; margin-top:6px}

.your-answer{
  font-family:var(--serif); font-size:15px; line-height:1.7;
  white-space:pre-wrap;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:16px;
  color:var(--text);
}
.your-answer mark.redpen{
  background:rgba(255,107,107,.18);
  border-bottom:2px wavy #ff6b6b;
  border-radius:2px; padding:0 1px;
  cursor:help; color:inherit;
}

.fix{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px; margin-bottom:10px;
}
.fix-issue{font-weight:700; font-size:14px}
.fix-why{font-size:13px; color:var(--muted); margin:4px 0}
.fix-how{font-size:13px}
.fix-eg{
  font-size:13px; font-family:var(--serif);
  background:var(--panel-2); border-radius:8px;
  padding:8px 10px; margin-top:6px;
}

.model-toggle{
  display:block; width:100%; text-align:left;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text);
  padding:12px; font-size:14px; font-weight:600;
}
.model-answer{
  font-family:var(--serif); font-size:16px; line-height:1.7;
  white-space:pre-wrap;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:16px; margin-top:10px;
}

.result-actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;
}
.result-actions button{flex:1; min-width:140px}

/* ---- buttons ----------------------------------------------------------- */
.primary-btn{
  background:var(--brand); color:#fff; border:none;
  border-radius:10px; padding:12px 20px;
  font-size:15px; font-weight:700;
}
.primary-btn:hover{background:#4a7bf0}
.primary-btn:disabled{opacity:.45; cursor:not-allowed}
.primary-btn.full{width:100%; margin:8px 0}
.secondary-btn{
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--line); border-radius:10px;
  padding:12px 16px; font-size:14px; font-weight:600;
}
.secondary-btn:hover{border-color:var(--brand)}
.text-btn{
  display:block; width:100%; background:none; border:none;
  color:var(--muted); padding:12px; font-size:13px; margin-top:8px;
}
.text-btn:hover{color:var(--text)}
.text-btn.danger{color:#d98a8a}

/* ---- marking spinner --------------------------------------------------- */
.marking{text-align:center; padding:48px 20px}
.spinner{
  width:42px; height:42px;
  border:4px solid var(--line); border-top-color:var(--brand);
  border-radius:50%; margin:0 auto 18px;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.marking p{color:var(--muted)}
.marking-step{font-size:13px; color:var(--faint); margin-top:6px}

/* ---- modals ------------------------------------------------------------ */
.modal-backdrop{
  position:fixed; inset:0; z-index:50;
  background:rgba(6,9,16,.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.modal{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  width:100%; max-width:460px; max-height:90vh; overflow:auto;
}
.modal.small{max-width:360px}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 0;
}
.modal-head h2{font-size:18px; margin:0}
.modal-close{background:none; border:none; color:var(--muted); font-size:18px}
.modal-body{padding:18px}
.field{display:block; margin-bottom:16px}
.field-group{margin-bottom:16px}
.field-label{
  display:block; font-size:13px; font-weight:700; margin-bottom:6px;
}
.field-opt{color:var(--faint); font-weight:400}
.field-help{font-size:12px; color:var(--muted); margin:0 0 8px; line-height:1.45}
.field input, .field select,
.field-group input, .field-group select{
  width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:9px; color:var(--text);
  padding:11px 12px; font-size:14px;
}
.confirm-actions{display:flex; gap:10px; margin-top:16px}
.confirm-actions button{flex:1}

/* ---- toast ------------------------------------------------------------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#243152; border:1px solid #3a4f86; color:var(--text);
  padding:12px 18px; border-radius:10px; font-size:14px;
  z-index:70; box-shadow:var(--shadow);
}

/* ---- prompt deconstruction modal --------------------------------------- */
.modal.large{max-width:640px}
.decon-prompt{
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--brand-2);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:14px;
  font-size:14px; line-height:1.5; color:var(--muted);
}
.decon-section{margin-bottom:16px}
.decon-section h3{
  font-size:13px; margin:0 0 8px;
  color:var(--brand-2); text-transform:uppercase; letter-spacing:.4px;
}
.decon-pill{
  display:inline-block; background:#26365e; color:#cde0ff;
  border:1px solid #34487a; border-radius:20px;
  padding:3px 12px; font-size:12px; font-weight:700;
}
.decon-list{margin:0; padding-left:22px}
.decon-list li{margin-bottom:8px; font-size:14px; line-height:1.5}
.decon-list li b{color:var(--text)}
.decon-list li .decon-why{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.decon-key{
  display:inline-block; background:var(--panel-2); color:var(--accent);
  border:1px solid var(--line); border-radius:6px;
  padding:2px 8px; font-size:12px; margin:0 4px 4px 0; font-weight:600;
}
.decon-pitfall{
  background:rgba(255,107,107,.08); border:1px solid #6e3333;
  border-radius:var(--radius-sm); padding:10px 12px;
  font-size:13px; color:#ffb0b0;
}
.decon-actions{display:flex; gap:10px; margin-top:18px}
.decon-actions button{flex:1}

/* ---- spelling vault ---------------------------------------------------- */
.vault-word{
  display:flex; align-items:center; gap:14px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:8px;
}
.vault-word.mastered{opacity:.6; border-color:#2f5b48}
.vault-word.mastered .vault-word-correct{color:var(--good)}
.vault-word-correct{
  font-weight:700; font-size:15px; color:var(--text);
  font-family:var(--serif); min-width:160px;
}
.vault-word-meta{
  display:flex; flex-direction:column; gap:3px;
  font-size:12px; color:var(--muted); flex:1;
}
.vault-interval{font-weight:600; color:var(--brand-2)}
.vault-mastered{font-weight:700; color:var(--good)}
.vault-variants{font-family:var(--serif); color:#ffb0b0; text-decoration:line-through; text-decoration-color:#6e3333}
.vault-wrong-tag{
  display:inline-block; font-family:var(--serif);
  color:#ffb0b0; background:rgba(255,107,107,.10);
  border:1px solid #6e3333; border-radius:4px;
  padding:1px 6px; text-decoration:line-through;
  text-decoration-color:#6e3333;
}
.vault-context{font-family:var(--serif); font-size:12px; color:var(--muted); font-style:italic; display:inline-block; margin-top:4px}

/* ---- drill mode -------------------------------------------------------- */
.drill-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:16px 18px; margin-bottom:12px;
}
.drill-card.right{border-left:3px solid var(--good)}
.drill-card.wrong{border-left:3px solid var(--bad)}
.drill-prompt{font-size:15px; margin:0 0 10px; line-height:1.5}
.drill-prompt b{color:var(--brand-2); font-weight:700; margin-right:4px}
.drill-input{
  width:100%; background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; color:var(--text);
  padding:10px 12px; font-size:15px; font-family:var(--serif);
  outline:none;
}
.drill-input:focus{border-color:var(--brand)}
.drill-input[disabled]{opacity:.8; cursor:default}
.drill-result{
  margin-top:8px; font-size:13px; line-height:1.5;
  padding:8px 10px; border-radius:8px; background:var(--panel-2);
}
.drill-result.right{color:var(--good); background:rgba(62,207,142,.10); border:1px solid #2f5b48}
.drill-result.wrong{color:#ffb0b0; background:rgba(255,107,107,.10); border:1px solid #6e3333}
.drill-result b{color:inherit}
.drill-result-correct{display:block; margin-top:4px; color:var(--text); font-style:italic}
.drill-pattern-info{
  background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:18px;
}
.drill-pattern-info .pat-name{font-weight:700; font-size:15px}
.drill-pattern-info .pat-fix{font-size:13px; color:var(--muted); margin-top:6px}

.pat-action{margin-top:10px}
.pat-action button{
  background:var(--brand); color:#fff; border:none;
  border-radius:8px; padding:8px 14px;
  font-size:13px; font-weight:700;
}
.pat-action button:hover{background:#4a7bf0}

/* ---- api hint at bottom of home --------------------------------------- */
.api-hint{
  font-size:13px; color:var(--faint); text-align:center; margin-top:24px;
}
.api-hint b{color:var(--accent)}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:820px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .cta-grid{grid-template-columns:1fr}
  .crit-grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}

  .cd-body{grid-template-columns:1fr; grid-template-rows:38vh 1fr}
  .cd-stim{border-right:none; border-bottom:1px solid var(--cd-line)}
  .cd-stim-scroll{padding:14px 16px}
  .cd-answer{padding:14px 16px}
  .cd-test-name{display:none}
  .cd-bar{padding:6px 10px}
  .cd-timer-wrap{min-width:104px; padding:2px 8px}
  .cd-timer{font-size:17px}
}
@media (max-width:480px){
  .result-hero-band{font-size:54px}
  .cd-bar-btn{padding:4px 8px; font-size:12px}
}