:root{
  --color-bg:#f5f8fc;
  --color-surface:#ffffff;
  --color-surface-2:#eef3fa;
  --color-text:#1f2933;
  --color-text-muted:#5b6b7b;
  --color-primary:#1565c0;
  --color-primary-hover:#0d4f9e;
  --color-primary-contrast:#ffffff;
  --color-border:#dbe4ee;
  --color-success:#2e7d32;
  --color-success-bg:#e8f5e9;
  --color-warning:#e08600;
  --color-warning-bg:#fff4e0;
  --color-danger:#c62828;
  --color-danger-bg:#fdecea;
  --color-accent:#f0a500;
  --font-sans:"Inter","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --radius-2:8px; --radius-3:12px; --radius-pill:999px;
  --shadow-1:0 1px 3px rgba(16,32,56,.08);
  --shadow-2:0 4px 14px rgba(16,32,56,.10);
  --maxw:1080px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.55;-webkit-font-smoothing:antialiased}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.icon.sm{width:16px;height:16px}
.icon.lg{width:24px;height:24px}
a{color:var(--color-primary);text-decoration:none}

/* Layout */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-5);background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-1)}
.brand{display:flex;align-items:center;gap:var(--space-2);font-weight:700;font-size:16px;color:var(--color-text)}
.brand .badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-2);background:var(--color-primary);color:var(--color-primary-contrast)}
.nav{display:flex;align-items:center;gap:var(--space-1)}
.nav-link{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-2);color:var(--color-text-muted);font-weight:600;font-size:14px}
.nav-link:hover{background:var(--color-surface-2);color:var(--color-text)}
.nav-link.active{background:var(--color-surface-2);color:var(--color-primary)}
.page{max-width:var(--maxw);margin:0 auto;padding:var(--space-6) var(--space-5) var(--space-8)}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-6);align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-3);padding:var(--space-6);box-shadow:var(--shadow-1)}
.hero h1{font-size:26px;margin:0 0 var(--space-3);line-height:1.25}
.hero p{color:var(--color-text-muted);margin:0 0 var(--space-4)}
.hero .ring-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.cefr{font-weight:700;color:var(--color-primary)}
.cefr-note{color:var(--color-text-muted);font-size:13px;text-align:center;max-width:240px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-primary);color:var(--color-primary-contrast);border:0;border-radius:var(--radius-2);padding:var(--space-3) var(--space-4);font:inherit;font-weight:600;cursor:pointer;box-shadow:var(--shadow-1);transition:background .15s ease}
.btn:hover{background:var(--color-primary-hover)}
.btn-ghost{background:transparent;color:var(--color-primary);border:1px solid var(--color-border);box-shadow:none}
.btn-ghost:hover{background:var(--color-surface-2)}
.btn-block{width:100%;justify-content:center}
.btn-row{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-3);padding:var(--space-4);box-shadow:var(--shadow-1)}
.card h3{margin:0 0 var(--space-2);font-size:16px}
.card .meta{color:var(--color-text-muted);font-size:13px}
.section-card{display:flex;flex-direction:column;gap:var(--space-3)}
.section-card .icon-lg{color:var(--color-primary)}

/* Mastery bar */
.bar{height:8px;border-radius:var(--radius-pill);background:var(--color-surface-2);overflow:hidden;margin-top:var(--space-2)}
.bar-fill{height:100%;border-radius:var(--radius-pill);background:var(--color-primary);transition:width .4s ease}
.bar-fill.st-mastered{background:var(--color-success)}
.bar-fill.st-studied{background:var(--color-warning)}
.bar-fill.st-diagnosed{background:var(--color-accent)}
.bar-fill.st-not-started{background:var(--color-border)}

/* Status pills */
.pill{display:inline-flex;align-items:center;gap:var(--space-1);font-size:12px;font-weight:700;padding:2px var(--space-2);border-radius:var(--radius-pill)}
.pill.st-mastered{background:var(--color-success-bg);color:var(--color-success)}
.pill.st-studied{background:var(--color-warning-bg);color:var(--color-warning)}
.pill.st-diagnosed{background:var(--color-surface-2);color:var(--color-text-muted)}
.pill.st-not-started{background:var(--color-surface-2);color:var(--color-text-muted)}

/* Steps / explainer */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.step{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-3);padding:var(--space-4);box-shadow:var(--shadow-1)}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-primary-contrast);font-weight:700;margin-bottom:var(--space-2)}

/* Quiz */
.quiz-max{max-width:720px;margin:0 auto}
.fieldset{border:1px solid var(--color-border);border-radius:var(--radius-3);background:var(--color-surface);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-1)}
.fieldset legend{font-weight:700;padding:0 var(--space-2);color:var(--color-primary)}
.stem{font-size:16px;font-weight:600;margin-bottom:var(--space-3)}
.passage{background:var(--color-surface-2);border-radius:var(--radius-2);padding:var(--space-3);margin-bottom:var(--space-3);font-style:italic;color:var(--color-text)}
.transcript{background:var(--color-surface-2);border-radius:var(--radius-2);padding:var(--space-3);margin-bottom:var(--space-3)}
.choice{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-2);margin-bottom:var(--space-2);cursor:pointer;background:var(--color-surface)}
.choice:hover{border-color:var(--color-primary)}
.choice.selected{border-color:var(--color-primary);background:var(--color-surface-2)}
.choice.correct{border-color:var(--color-success);background:var(--color-success-bg)}
.choice.wrong{border-color:var(--color-danger);background:var(--color-danger-bg)}
.choice input{accent-color:var(--color-primary)}
.play-row{display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3)}

/* Feedback */
.feedback{border-radius:var(--radius-2);padding:var(--space-3) var(--space-4);margin:var(--space-3) 0;font-weight:600}
.feedback.ok{background:var(--color-success-bg);color:var(--color-success)}
.feedback.no{background:var(--color-danger-bg);color:var(--color-danger)}
.explain{color:var(--color-text-muted);font-weight:400;margin-top:var(--space-2)}

/* Lesson */
.lesson-max{max-width:760px;margin:0 auto}
.breadcrumb{color:var(--color-text-muted);font-size:13px;margin-bottom:var(--space-4)}
.tip{display:flex;gap:var(--space-2);padding:var(--space-3);border-left:3px solid var(--color-primary);background:var(--color-surface);border-radius:0 var(--radius-2) var(--radius-2) 0;margin-bottom:var(--space-2)}
.example{background:var(--color-surface-2);border-radius:var(--radius-2);padding:var(--space-4);margin:var(--space-4) 0}
.example .q{font-weight:600}

/* Progress table */
.sub-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface);margin-bottom:var(--space-2)}
.sub-row .name{flex:1;font-weight:600}
.sub-row .grow{width:160px}
.heading{margin:var(--space-6) 0 var(--space-3);font-size:18px;display:flex;align-items:center;gap:var(--space-2)}
.muted{color:var(--color-text-muted)}
.counts{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-3)}
.count{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-1)}
.count .n{font-size:22px;font-weight:700}
.count .l{color:var(--color-text-muted);font-size:12px}

/* Misc */
.callout{border:1px solid var(--color-border);border-left:4px solid var(--color-accent);background:var(--color-surface);border-radius:var(--radius-2);padding:var(--space-4);margin-top:var(--space-6)}
.disclaimer{color:var(--color-text-muted);font-size:13px;margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px dashed var(--color-border)}
.reset-row{margin-top:var(--space-8);text-align:center}
.empty-tip{color:var(--color-text-muted)}
.result-score{font-size:34px;font-weight:800;color:var(--color-primary)}
.premium{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:13px;margin-top:var(--space-4)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .card-grid,.steps{grid-template-columns:1fr}
  .nav-link span{display:none}
  .sub-row .grow{width:90px}
}

/* v2: performance tasks (Speaking / Writing) */
.sents{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)}
.chip{padding:var(--space-1) var(--space-2);font-size:12px;font-weight:600}
.prompt{background:var(--color-surface-2);border-left:3px solid var(--color-primary);border-radius:0 var(--radius-2) var(--radius-2) 0;padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);font-weight:600}
.timer{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
.essay{width:100%;min-height:160px;resize:vertical;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-2);font:inherit;line-height:1.55;background:var(--color-surface);color:var(--color-text)}
.essay:focus{outline:none;border-color:var(--color-primary)}
.rec-playback{margin-top:var(--space-2)}
.rec-playback audio{width:100%}
.rec-status{font-size:13px}
.rubric{margin-top:var(--space-3);border-top:1px dashed var(--color-border);padding-top:var(--space-3)}
.rubric-row{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2) 0;border-bottom:1px solid var(--color-surface-2)}
.rubric-label{font-weight:700;font-size:14px}
.rubric-opts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.rub{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface);cursor:pointer;font-size:13px}
.rub:hover{border-color:var(--color-primary)}
.rub input{accent-color:var(--color-primary)}

/* Footer + inline code for static pages */
.site-foot{display:flex;gap:var(--space-4);align-items:center;justify-content:center;flex-wrap:wrap;
  padding:var(--space-5) var(--space-4);margin-top:var(--space-8);
  color:var(--color-text-muted);font-size:13px;border-top:1px solid var(--color-border);background:var(--color-surface)}
.site-foot a{color:var(--color-primary);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
code{background:var(--color-surface-2);padding:2px 6px;border-radius:var(--radius-2);font-size:.9em}