:root{
  font-size:18px; /* base for rem sizing; the A/A+/A++ toggle overrides this on <html> */
  --color-bg:#f3f0ff;
  --color-surface:#ffffff;
  --color-surface-2:#ece7ff;
  --color-text:#241b4d;
  --color-text-muted:#5d5a8a;
  --color-primary:#6c4df6;
  --color-primary-hover:#5534e0;
  --color-primary-contrast:#ffffff;
  --color-border:#d9d2f5;
  --color-success:#07804d;
  --color-success-bg:#dcfce9;
  --color-warning:#c2410c;
  --color-warning-bg:#fff3d6;
  --color-danger:#d81b57;
  --color-danger-bg:#ffe4e9;
  --color-accent:#ffb703;
  --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:10px; --radius-3:16px; --radius-pill:999px;
  --shadow-1:0 1px 3px rgba(76,50,140,.10);
  --shadow-2:0 4px 14px rgba(76,50,140,.16);
  --maxw:1080px;
}
*{box-sizing:border-box}
html,body{margin:0}
/* --- Mobile foundations (iOS Safari + Android Chrome) ---
   - text-size-adjust: stop iOS auto-inflating text after rotation.
   - tap-highlight: replace the default grey flash with a brand-tinted one.
   - touch-action:manipulation: drop the legacy 300ms tap delay / double-tap
     zoom on interactive controls (older Android WebViews + iOS). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,[role="button"],.choice,.acc,.rub{-webkit-tap-highlight-color:rgba(108,77,246,.14);touch-action:manipulation}
body{font-family:var(--font-sans);font-size:1rem;background:var(--color-bg);color:var(--color-text);line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 480px at 85% -8%, rgba(108,77,246,.10), rgba(108,77,246,0) 60%),
                   radial-gradient(900px 420px at -8% 108%, rgba(255,183,3,.12), rgba(255,183,3,0) 60%);
  background-attachment:fixed}
.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;flex-wrap:wrap;row-gap:var(--space-2);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:800;font-size:1.056rem;color:var(--color-text)}
.brand .badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-2);background:linear-gradient(135deg,#8b5cf6,#6c4df6);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);min-height:44px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-2);color:var(--color-text-muted);font-weight:700;font-size:0.944rem}
@media (hover:hover){.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:linear-gradient(135deg,#ffffff 0%,#f1ecff 100%);border:1px solid var(--color-border);border-radius:var(--radius-3);padding:var(--space-6);box-shadow:var(--shadow-1)}
.hero h1{font-size:1.889rem;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)}
/* Mastery ring (fix: SVG <circle> defaults to solid black fill) */
.ring{width:190px;height:190px}
.ring-bg{fill:none;stroke:var(--color-surface-2);stroke-width:14}
.ring-fg{fill:none;stroke:var(--color-primary);stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.ring-text{font-size:1.556rem;font-weight:800;fill:var(--color-text);text-anchor:middle;dominant-baseline:central}
/* Kids hero — fun empty state before any diagnostic */
.hero .kids-hero-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center}
.kids-hero{width:220px;height:210px;transform-origin:50% 92%;animation:kc-bob 2.6s ease-in-out infinite}
@keyframes kc-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.kids-hero-title{font-size:1.111rem;font-weight:800;color:var(--color-primary);margin-top:var(--space-1)}
.kids-hero-sub{color:var(--color-text-muted);font-size:0.833rem;max-width:240px}
.cefr{font-weight:800;color:var(--color-primary)}
.cefr-note{color:var(--color-text-muted);font-size:0.833rem;text-align:center;max-width:240px}

/* Exam-score estimate card */
.exam-est{margin-top:var(--space-6)}
.exam-est h2{font-size:1.222rem;margin:0 0 var(--space-2)}
.exam-est-note{font-size:0.778rem;margin:0 0 var(--space-4)}
.exam-total{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}
.exam-total-n{font-size:2.222rem;font-weight:800;color:var(--color-primary)}
.exam-level{font-weight:700;color:var(--color-text)}
.exam-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.exam-chip{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--color-surface-2);border-radius:var(--radius-2);padding:var(--space-3)}
.exam-chip-l{font-size:0.778rem;color:var(--color-text-muted)}
.exam-chip-s{font-size:1.444rem;font-weight:800}
.exam-chip-c{font-size:0.722rem;font-weight:700;padding:1px 8px;border-radius:var(--radius-pill)}
.pill-c-belowa2{background:#e7edf5;color:#5b6b7e}
.pill-c-a2{background:#fff0c2;color:#8a6d00}
.pill-c-b1{background:#dceccf;color:#3f6b1f}
.pill-c-b2{background:#cdeede;color:#1f7a4d}
.exam-chip-r{font-size:0.722rem;color:var(--color-text-muted)}
.exam-range{font-size:0.778rem;margin:-6px 0 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);background:linear-gradient(135deg,#7c5cf0,#5b3df0);color:var(--color-primary-contrast);border:0;border-radius:var(--radius-2);padding:var(--space-3) var(--space-4);font:inherit;font-weight:700;cursor:pointer;box-shadow:var(--shadow-1);transition:filter .15s ease}
@media (hover:hover){.btn:hover{filter:brightness(.92)}}
.btn-ghost{background:transparent;color:var(--color-primary);border:1px solid var(--color-border);box-shadow:none}
@media (hover:hover){.btn-ghost:hover{background:var(--color-surface-2);filter:none}}
.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:1.056rem}
.card .meta{color:var(--color-text-muted);font-size:0.833rem}
.section-card{display:flex;flex-direction:column;gap:var(--space-3)}
.section-card .icon-lg{color:var(--color-primary)}

/* Mastery bar */
.bar{height:10px;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:0.778rem;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:32px;height:32px;border-radius:var(--radius-pill);background:linear-gradient(135deg,#8b5cf6,#6c4df6);color:var(--color-primary-contrast);font-weight:800;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:800;padding:0 var(--space-2);color:var(--color-primary)}
.stem{font-size:1.056rem;font-weight:700;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-4);border:1px solid var(--color-border);border-radius:var(--radius-2);margin-bottom:var(--space-2);cursor:pointer;background:var(--color-surface)}
@media (hover:hover){.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);flex-wrap:wrap}
.tts-status{margin-left:auto;font-size:0.833rem;font-weight:600;color:var(--color-text-muted);white-space:nowrap}
.tts-status.tts-loading{color:var(--color-warning)}
.tts-status.tts-playing{color:var(--color-success)}
.tts-status.tts-error{color:var(--color-danger)}

/* Feedback */
.feedback{border-radius:var(--radius-2);padding:var(--space-3) var(--space-4);margin:var(--space-3) 0;font-weight:700}
.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)}
.review-panel{margin-top:var(--space-6);border-top:1px solid var(--color-border);padding-top:var(--space-5)}
.review-panel h2{font-size:1.333rem;margin-bottom:var(--space-2)}
.review-panel>.muted{margin-bottom:var(--space-4)}
.review-item{padding:var(--space-4) 0;border-bottom:1px dashed var(--color-border)}
.review-item:last-child{border-bottom:none}
.review-q{font-weight:700;margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.review-item .choice{cursor:default;margin-bottom:var(--space-2)}
@media (hover:hover){.review-item .choice:hover{border-color:var(--color-border)}}

/* Lesson */
.lesson-max{max-width:760px;margin:0 auto}
.breadcrumb{color:var(--color-text-muted);font-size:0.833rem;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:700}

/* 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:700}
.sub-row .grow{width:160px}
.heading{margin:var(--space-6) 0 var(--space-3);font-size:1.222rem;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:1.444rem;font-weight:800}
.count .l{color:var(--color-text-muted);font-size:0.778rem}

/* 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:0.833rem;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:2.222rem;font-weight:800;color:var(--color-primary)}
.premium{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:0.833rem;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}
  /* iOS repaints fixed backgrounds on every scroll frame — jank. */
  body{background-attachment:scroll}
}

/* Phones: compact two-row app bar.
   Row 1 = brand mark + preferences + points + account.
   Row 2 = navigation as an evenly-spread icon tab bar. */
@media (max-width:600px){
  .topbar{padding:var(--space-2) var(--space-4);row-gap:var(--space-2);column-gap:var(--space-3)}
  .brand>span:not(.badge){display:none}
  .nav{order:9;width:100%;justify-content:space-evenly}
  .nav-link{flex:1 1 0;justify-content:center;padding:var(--space-2) 4px}
  .points-box,.user-box,.pref-box{margin-left:0}
  .pts-lvl{display:none}
}
/* Very narrow phones (e.g. 360px-wide Androids, fold covers): the username
   chip is noise on a personal device — keep the Sign out button instead. */
@media (max-width:380px){
  .user-chip{display:none}
}
/* Progress rows: name + pill on line 1, mastery bar + action on line 2
   (a single-line row needs ~342px and overflows 360px-class phones). */
@media (max-width:600px){
  .sub-row{flex-wrap:wrap;row-gap:var(--space-2)}
  .sub-row .name{flex:1 1 55%;min-width:0}
  .sub-row .grow{flex:1 1 90px;width:auto;min-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-2) var(--space-3);min-height:44px;font-size:0.833rem;font-weight:600;display:inline-flex;align-items:center}
.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:700}
.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:0.833rem}
.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:800;font-size:0.889rem}
.rubric-opts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.rub{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);min-height:44px;border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface);cursor:pointer;font-size:0.833rem}
@media (hover:hover){.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:0.833rem;border-top:1px solid var(--color-border);background:var(--color-surface-2)}
.site-foot a{color:var(--color-primary);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
@media (hover:hover){.site-foot a:hover{text-decoration:underline}}
code{background:var(--color-surface-2);padding:2px 6px;border-radius:var(--radius-2);font-size:.9em}

/* AI grading consent modal */
.consent-overlay{position:fixed;inset:0;background:rgba(36,27,77,.45);display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:50}
.consent-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-3);box-shadow:var(--shadow-2);max-width:460px;width:100%;padding:var(--space-6)}
.consent-card h2{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3);font-size:1.111rem}
.consent-card p{color:var(--color-text);margin:0 0 var(--space-3)}
.consent-list{color:var(--color-text-muted);font-size:0.833rem;margin:0 0 var(--space-4);padding-left:var(--space-5)}
.consent-list li{margin-bottom:var(--space-2)}
.consent-card .btn-row{justify-content:flex-end}

/* --- Account chip (signed-in user) --- */
.user-box{display:none;align-items:center;gap:var(--space-2);margin-left:var(--space-2)}
.user-chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  background:var(--color-surface-2);border:1px solid var(--color-border);
  font-size:0.833rem;font-weight:700;color:var(--color-text);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-sm{padding:7px 12px;font-size:0.833rem;border-radius:var(--radius-2);min-height:44px}

/* --- Points & Rewards --- */
.points-box{display:none;align-items:center;gap:var(--space-2);margin-left:var(--space-2)}
.pts-chip{display:inline-flex;align-items:center;gap:4px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:4px 12px;font-weight:800;color:var(--color-text)}
.pts-star{width:18px;height:18px;color:var(--color-accent)}
.pts-total{font-variant-numeric:tabular-nums}
.pts-lvl{font-size:0.778rem;font-weight:600;color:var(--color-text-muted)}
.pts-streak{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:var(--color-warning);background:var(--color-warning-bg);border-radius:var(--radius-pill);padding:2px 8px;font-size:0.778rem}
.pts-streak .icon{width:16px;height:16px}

/* Celebration toast */
#toast-host{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:60;display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-end;pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--space-2);background:var(--color-text);color:#fff;border-radius:var(--radius-pill);padding:10px 16px;box-shadow:var(--shadow-2);font-weight:800;font-size:0.889rem;transform:translateY(12px);opacity:0;transition:transform .35s ease,opacity .35s ease}
.toast.show{transform:translateY(0);opacity:1}
.toast-ico{width:18px;height:18px;color:var(--color-accent)}
.toast-amt{color:#ffd54f;font-variant-numeric:tabular-nums}
.toast-reason{font-weight:600;color:#e9eef5}

/* Points earned pill inside feedback */
.pts-earned{display:inline-flex;align-items:center;gap:4px;margin-top:var(--space-2);font-weight:800;color:var(--color-warning);font-size:0.833rem}

/* Rewards card (home) mini badges */
.badge-row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-2)}
.badge{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-pill);background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text-muted)}
.badge.earned{background:var(--color-warning-bg);border-color:var(--color-accent);color:var(--color-warning)}
.badge .icon{width:20px;height:20px}

/* Rewards & Achievements section (progress) */
.rewards-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.rewards-head h2{display:flex;align-items:center;gap:var(--space-2)}
.rewards-total{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.rewards-num{font-size:1.889rem;font-weight:800;color:var(--color-warning)}
.rewards-meta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-2)}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3);margin-top:var(--space-3)}
.badge-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface)}
.badge-card .badge-ico{position:relative;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);background:var(--color-surface-2);color:var(--color-text-muted)}
.badge-card .badge-ico .icon{width:22px;height:22px}
.badge-card .badge-check{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-success);color:#fff}
.badge-card .badge-check .icon{width:12px;height:12px;stroke-width:3}
.badge-card.earned{border-color:var(--color-accent);background:#fffaf0}
.badge-card.earned .badge-ico{background:#ffe9bf;color:var(--color-warning)}
.badge-card.locked{opacity:.7}
.badge-card .badge-title{font-weight:800;font-size:0.833rem}
.badge-card .badge-desc{font-size:0.722rem;color:var(--color-text-muted)}
.hist{display:flex;flex-direction:column;gap:2px;margin-top:var(--space-2)}
.hist-row{display:flex;align-items:center;gap:var(--space-3);padding:6px 10px;border-radius:var(--radius-2);background:var(--color-surface-2)}
.hist-reason{flex:1;font-size:0.833rem}
.hist-amt{font-weight:800;color:var(--color-warning)}
.hist-date{font-size:0.722rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums}

/* --- Account management console (admin.php) --- */
.account-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.account-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface)}
.admin-form{display:flex;flex-direction:column;gap:var(--space-3);max-width:420px}
.admin-form label{display:flex;flex-direction:column;gap:6px;font-size:0.833rem;font-weight:700;color:var(--color-text)}
.admin-form input{padding:10px 12px;border:2px solid var(--color-border);border-radius:var(--radius-2);font-size:0.889rem;outline:none}
.admin-form input:focus{border-color:var(--color-primary)}

/* --- Preference buttons (text size + sound) --- */
.pref-box{display:flex;align-items:center;gap:var(--space-2);margin-left:var(--space-2)}
.pref-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 10px;border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface);color:var(--color-text);font:inherit;font-weight:800;cursor:pointer;box-shadow:var(--shadow-1)}
@media (hover:hover){.pref-btn:hover{background:var(--color-surface-2);color:var(--color-primary)}}
.pref-btn.off{opacity:.55;text-decoration:line-through}

/* --- Daily quests card --- */
.quests-card{margin-top:var(--space-6)}
.quests-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.quests-head h2{display:flex;align-items:center;gap:var(--space-2);font-size:1.222rem;margin:0}
.quest-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-2);margin-bottom:var(--space-2)}
.quest-row.done{background:var(--color-success-bg);border-color:var(--color-success)}
.quest-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-primary);flex:0 0 auto}
.quest-row.done .quest-ico{background:var(--color-success);border-color:var(--color-success);color:#fff}
.quest-body{flex:1;min-width:0}
.quest-title{font-weight:800}
.quest-count{font-weight:700;color:var(--color-text-muted);font-size:0.833rem;margin-left:4px}
.quest-desc{color:var(--color-text-muted);font-size:0.833rem}
.quest-done-tag{font-size:0.722rem;font-weight:800;color:var(--color-success);background:var(--color-surface);border-radius:var(--radius-pill);padding:1px 8px;margin-left:6px}
.quest-reward{font-weight:800;color:var(--color-warning);white-space:nowrap}
.quest-row .bar{margin-top:6px}

/* --- Celebration toast (level-up / badge) --- */
.toast-big{background:linear-gradient(135deg,#6c4df6,#8b5cf6)}
.toast-big .toast-reason{color:#f0e9ff}

/* --- Confetti canvas (sfx.js) --- */
#fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:70}

/* === Vocabulary highlights, tap popover, and end-of-exercise checklist === */
.vocab {
  border-bottom: 2px dotted var(--color-primary);
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px;
  background: rgba(108, 77, 246, 0.07);
  -webkit-tap-highlight-color: rgba(108, 77, 246, 0.25);
  transition: background 0.15s ease;
}
.vocab:active, .vocab.visited { background: rgba(108, 77, 246, 0.16); }
.vocab.visited { border-bottom-style: solid; }
.vocab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.vocab-pop {
  position: fixed;
  z-index: 1000;
  max-width: 300px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-3);
  padding: var(--space-4);
  box-shadow: 0 12px 34px rgba(40, 20, 90, 0.28);
  font-size: 0.833rem; /* rem so the A/A+/A++ text-size toggle scales it too */
  line-height: 1.4;
}
.vocab-pop-word { font-weight: 800; color: var(--color-primary); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vocab-pop-word .ipa { font-weight: 500; color: var(--color-text-muted); font-size: 0.85em; }
.vocab-pop-def { margin-top: 6px; }
.vocab-pop-zh { margin-top: 4px; color: var(--color-text-muted); font-size: 0.9em; }
.vocab-pop-x {
  position: absolute; top: 6px; right: 8px;
  border: 0; background: transparent; color: var(--color-text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 10px 12px; border-radius: 8px;
}
.vocab-pop-x:active { background: var(--color-surface-2); }

.vocab-checklist { margin-top: var(--space-6); }
.vocab-checklist h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-2); }
.vocab-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.vocab-list li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--color-surface-2); border-radius: var(--radius-2); border-left: 4px solid var(--color-primary); }
.vocab-list .voc-word { font-weight: 800; color: var(--color-primary); text-transform: capitalize; }
.vocab-list .voc-word .ipa { font-weight: 500; color: var(--color-text-muted); font-size: 0.82em; margin-left: 6px; }
.vocab-list .voc-def { color: var(--color-text); font-size: 0.95em; }

/* ==========================================================================
   Wave 2 — Weekly goal, Boss Challenges, Buddy mascot (2026-10-17)
   ========================================================================== */

/* --- Weekly goal card ------------------------------------------------------ */
.weekly-card .weekly-nums{font-size:1.278rem;margin:var(--space-2) 0 var(--space-3)}
.weekly-card .weekly-nums strong{font-size:1.556rem;color:var(--color-primary)}
.weekly-ctl{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3)}
.weekly-target{font-weight:800;font-size:1rem;min-width:90px;text-align:center}
.weekly-bonus{color:var(--color-text-muted);font-size:0.833rem;display:inline-flex;align-items:center;gap:6px}
.weekly-bonus .icon{color:var(--color-accent)}

/* --- Boss Challenges -------------------------------------------------------- */
.boss-card .boss-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:2px solid var(--color-border);border-left:6px solid var(--boss-accent,var(--color-primary));border-radius:var(--radius-2);margin-top:var(--space-3);color:var(--color-text);background:var(--color-surface);transition:transform .12s ease,box-shadow .12s ease}
@media (hover:hover){.boss-card .boss-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}}
.boss-card .boss-row.beaten{background:var(--color-success-bg);border-color:var(--color-success)}
.boss-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--boss-accent,var(--color-primary));color:#fff;flex:none}
.boss-ico .icon{width:24px;height:24px}
.boss-body{display:flex;flex-direction:column;flex:1;min-width:0}
.boss-title{font-weight:800;font-size:1.056rem}
.boss-taunt{color:var(--color-text-muted);font-size:0.833rem}
.boss-state{font-weight:800;font-size:0.889rem;color:var(--color-primary);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.boss-row.beaten .boss-state{color:var(--color-success)}

/* --- Boss run --------------------------------------------------------------- */
.boss-run .boss-timer{float:right;font-weight:800;font-size:1.278rem;color:var(--color-primary);font-variant-numeric:tabular-nums}
.boss-run .boss-timer.urgent{color:var(--color-danger);animation:pulse .8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.boss-run .boss-timer.urgent{animation:none}}
.boss-time-bar{margin:var(--space-2) 0 var(--space-4)}
.boss-time-bar .bar-fill{background:linear-gradient(90deg,#6c4df6,#9d7bff)}
.boss-taunt{display:flex;align-items:center;gap:var(--space-2);background:var(--color-warning-bg);border:1px dashed var(--color-warning);color:var(--color-warning);font-weight:700;border-radius:var(--radius-2);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-4);font-size:0.944rem}
.boss-verdict{font-size:2rem;letter-spacing:.5px}
.boss-verdict.win{color:var(--color-success)}
.boss-verdict.lose{color:var(--color-warning)}

/* --- Buddy mascot ----------------------------------------------------------- */
.buddy-card .buddy-head{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap}
.buddy-art{flex:none;width:170px;height:auto;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 42%,#efeaff 0%,#f8f6ff 70%);border-radius:var(--radius-3);padding:var(--space-2)}
.buddy-svg{width:150px;height:auto;display:block}
.buddy-meta{flex:1;min-width:220px}
.buddy-meta h2{margin:0 0 var(--space-2);display:flex;align-items:center;gap:8px}
.buddy-meta h2 .icon{color:var(--color-accent)}
.buddy-line{margin:0 0 var(--space-3);color:var(--color-text);background:var(--color-surface-2);border-radius:var(--radius-2);padding:var(--space-2) var(--space-3);font-size:0.944rem;display:flex;gap:8px;align-items:flex-start}
.buddy-line .icon{color:var(--color-primary);flex:none;margin-top:3px}
.buddy-rename{display:flex;gap:var(--space-2);flex-wrap:wrap}
.buddy-name-input{flex:1;min-width:140px;font:inherit;font-size:1rem;padding:var(--space-2) var(--space-3);border:2px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface);color:var(--color-text)}
.buddy-name-input:focus{outline:none;border-color:var(--color-primary)}
.buddy-slots{display:grid;gap:var(--space-3);margin-top:var(--space-4);border-top:1px solid var(--color-border);padding-top:var(--space-4)}
.buddy-slot{display:flex;gap:var(--space-3);align-items:baseline;flex-wrap:wrap}
.buddy-slot-l{font-weight:800;font-size:0.833rem;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-muted);min-width:64px}
.buddy-slot-items{display:flex;gap:var(--space-2);flex-wrap:wrap}
.acc{font:inherit;font-size:0.889rem;font-weight:700;padding:6px 12px;min-height:44px;border-radius:var(--radius-pill);border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
@media (hover:hover){.acc:hover{border-color:var(--color-primary);color:var(--color-primary)}}
.acc.on{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-contrast);cursor:default}
.acc.on .icon{color:var(--color-primary-contrast)}
.acc.locked{opacity:.65;cursor:not-allowed;border-style:dashed}
.acc.locked .icon{width:14px;height:14px}

/* ==========================================================================
   Vocabulary audio — teacher-voice TTS buttons (2026-10-16)
   All audio (listening transcripts + vocabulary) speaks through assets/js/tts.js
   in ONE American-female teacher-like voice. Buttons are real <button>s with
   44px targets (iOS HIG minimum) and a .speaking state while audio plays.
   ========================================================================== */
.vocab-list .voc-head{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.vocab-pop-say{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:var(--space-2);border:0;border-radius:var(--radius-2);background:var(--color-surface-2);color:var(--color-primary);cursor:pointer;vertical-align:middle;transition:background .15s ease,color .15s ease}
@media (hover:hover){.vocab-pop-say:hover{background:#e5dcff}}
.vocab-pop-say:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.vocab-pop-say .icon{width:20px;height:20px}
.vocab-pop-say.speaking{background:var(--color-primary);color:var(--color-primary-contrast)}
.voc-say{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface);color:var(--color-primary);cursor:pointer;transition:background .15s ease,color .15s ease}
@media (hover:hover){.voc-say:hover{background:var(--color-surface-2)}}
.voc-say:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.voc-say .icon{width:18px;height:18px}
.voc-say.speaking{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-contrast)}
@media (prefers-reduced-motion:reduce){.vocab-pop-say,.voc-say{transition:none}}

/* --- Notched devices (iPhone landscape, iPad): keep the sticky header, page
   gutters and toast corner clear of the safe-area insets. env() is ignored by
   browsers without support, and max() keeps the normal gutters otherwise. --- */
@supports (padding:max(0px)){
  .topbar{
    padding-left:max(var(--space-5),env(safe-area-inset-left));
    padding-right:max(var(--space-5),env(safe-area-inset-right));
  }
  .page{
    padding-left:max(var(--space-5),env(safe-area-inset-left));
    padding-right:max(var(--space-5),env(safe-area-inset-right));
  }
  #toast-host{
    right:max(var(--space-4),env(safe-area-inset-right));
    bottom:max(var(--space-4),env(safe-area-inset-bottom));
  }
}
@media (max-width:600px){
  @supports (padding:max(0px)){
    .topbar{
      padding-left:max(var(--space-4),env(safe-area-inset-left));
      padding-right:max(var(--space-4),env(safe-area-inset-right));
    }
  }
}

/* --- Public welcome + Profile (2026-10-16) --- */
.signin-box{display:inline-flex;align-items:center;margin-left:var(--space-2)}
.signin-box[hidden]{display:none}
a.user-chip{text-decoration:none;color:inherit;cursor:pointer}
@media (hover:hover){a.user-chip:hover{background:#ece6ff;border-color:var(--color-primary);color:var(--color-primary)}}

.welcome-hero .welcome-kicker{display:inline-flex;align-items:center;gap:6px;font-weight:800;
  font-size:0.778rem;letter-spacing:.04em;text-transform:uppercase;color:var(--color-primary);
  background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:4px 12px;margin-bottom:var(--space-3)}
.welcome-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 var(--space-3)}
.welcome-lead{font-size:1.05rem;line-height:1.6;color:var(--color-text-muted);max-width:46ch}
.welcome-note{margin-top:var(--space-4);font-size:0.833rem}
.welcome-note::before{content:"\1F512  "}

.what-why{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.welcome-card-h{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.welcome-card-h .icon{color:var(--color-primary)}
.welcome-card h3{margin:0;font-size:1.05rem}

.profile-name-row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center;margin-top:var(--space-3)}
.profile-name-input{flex:1;min-width:200px;min-height:44px;padding:10px 14px;border:2px solid var(--color-border);
  border-radius:var(--radius-2);font-size:1rem;font-family:inherit;background:var(--color-surface);color:var(--color-text)}
.profile-name-input:focus{outline:none;border-color:var(--color-primary)}
.profile-plan{margin-top:var(--space-6)}

@media (max-width:600px){
  .what-why{grid-template-columns:1fr}
  .welcome-hero{grid-template-columns:1fr}
  .welcome-hero .kids-hero-wrap{order:-1}
}