/* EnglishQuest — shared components. Every value comes from tokens.css. */

/* ============ 1. Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0 auto;max-width:var(--app-max);min-height:100vh;
  background:var(--bg);color:var(--body);
  font-family:var(--font-body);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;color:var(--ink)}
h1{font-size:var(--t-h1);line-height:var(--lh-h1)}
h2{font-size:var(--t-h2);line-height:var(--lh-h2)}
h3{font-size:var(--t-h3);line-height:var(--lh-h3)}
p{margin:0}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:var(--icon-lg);height:var(--icon-lg);flex:none;color:inherit}
.icon--sm{width:var(--icon-sm);height:var(--icon-sm)}
.icon--md{width:var(--icon-md);height:var(--icon-md)}
.icon-bubble{
  width:var(--avatar-sm);height:var(--avatar-sm);border-radius:var(--r-md);
  display:grid;place-items:center;flex:none;background:var(--brand-soft);color:var(--brand-ink);
}

/* ============ 2. Layout ============ */
.app{
  padding:var(--s4) var(--content-pad) calc(var(--tabbar-space) + var(--s3));
  display:flex;flex-direction:column;gap:var(--gap);
}
.app--no-tabs{padding-bottom:calc(var(--s6) + var(--safe-b))}
.app--flush{padding-left:0;padding-right:0}
.section{display:flex;flex-direction:column;gap:var(--gap-sm)}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.section__head h2{font-size:var(--t-h3)}
.section__meta{font-size:var(--t-sm);color:var(--muted);font-family:var(--font-display);font-weight:600}
.stack{display:flex;flex-direction:column;gap:var(--gap-sm)}
.stack--lg{gap:var(--gap)}
.row{display:flex;align-items:center;gap:var(--s3)}
.row--between{justify-content:space-between}
.row--wrap{flex-wrap:wrap}
.row--top{align-items:flex-start}
.row>.stack,.row>.truncate{min-width:0}
.clamp-2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:100%;
}
.spacer{flex:1 1 auto}
.muted{color:var(--muted)}
.small{font-size:var(--t-sm);line-height:var(--lh-sm)}
.tiny{font-size:var(--t-xs);line-height:var(--lh-xs);letter-spacing:var(--track-xs);text-transform:uppercase;font-weight:600;color:var(--muted)}
.center{text-align:center}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hr{height:1px;background:var(--line);border:0;margin:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-sm)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-sm)}

/* ============ 3. Sticky top bar ============ */
.topbar{
  position:sticky;top:0;z-index:40;
  height:var(--topbar-h);padding:0 var(--content-pad);
  display:flex;align-items:center;gap:var(--s3);
  background:var(--surface);border-bottom:1px solid var(--line);
}
.topbar__title{font-size:var(--t-h2);line-height:var(--lh-h2);flex:1;min-width:0}
.topbar__sub{font-size:var(--t-xs);color:var(--muted);letter-spacing:var(--track-xs);text-transform:uppercase;font-weight:600}
.topbar__actions{display:flex;align-items:center;gap:var(--s2);flex:none}
.topbar__back{
  width:var(--tap-min);height:var(--tap-min);margin-left:calc(var(--s3) * -1);
  display:grid;place-items:center;border:0;background:none;color:var(--ink);cursor:pointer;
}

/* ============ 4. Chips / pills ============ */
.chip{
  display:inline-flex;align-items:center;gap:var(--s1);height:32px;padding:0 var(--s3);
  border-radius:var(--r-full);border:0;background:var(--bg-2);color:var(--body);
  font-family:var(--font-display);font-size:var(--t-xs);line-height:1.4;font-weight:700;
  letter-spacing:var(--track-xs);text-transform:uppercase;white-space:nowrap;max-width:100%;
}
.chip .icon{width:16px;height:16px}
.chip--flame{background:var(--flame-soft);color:var(--flame-ink)}
.chip--gem{background:var(--sky-soft);color:var(--sky-ink)}
.chip--sky{background:var(--sky-soft);color:var(--sky-ink)}
.chip--heart{background:var(--rose-soft);color:var(--rose-ink)}
.chip--gold{background:var(--gold-soft);color:var(--gold-ink)}
.chip--brand{background:var(--brand-soft);color:var(--brand-ink)}
.chip--mango{background:var(--mango-soft);color:var(--mango-ink)}
.chip--grape{background:var(--grape-soft);color:var(--grape-ink)}
.chip--soft{background:var(--bg-2);color:var(--muted)}
.chip--lg{height:36px;padding:0 var(--s4);font-size:var(--t-sm)}
.pill{
  display:inline-flex;align-items:center;gap:var(--s2);height:var(--tap-min);
  padding:0 var(--s4);border-radius:var(--r-full);border:2px solid var(--line-2);
  background:var(--surface);color:var(--body);cursor:pointer;white-space:nowrap;
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:700;line-height:1.3;
}
.pill[aria-selected="true"],.pill--active{
  background:var(--brand-face);border-color:var(--brand-face);color:var(--on-brand);
  box-shadow:0 3px 0 var(--brand-face-deep);
}
.pill__count{color:inherit;font-weight:600}
.pill .icon{width:var(--icon-sm);height:var(--icon-sm)}
.scroller{
  display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s1) var(--content-pad) var(--s3);
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.scroller::-webkit-scrollbar{display:none}
.scroller>*{scroll-snap-align:start}

/* ============ 5. Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);
  letter-spacing:.02em;border-radius:var(--radius-lg);
  min-height:52px;padding:0 20px;border:0;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast),filter var(--dur-fast);
}
.btn .icon{width:var(--icon-md);height:var(--icon-md)}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--brand-face);color:var(--on-brand);box-shadow:var(--sh-btn);--btn-edge:var(--brand-face-deep)}
.btn--accent{background:var(--mango-ink);color:var(--on-brand);box-shadow:var(--sh-btn);--btn-edge:var(--flame-ink)}
.btn--danger{background:var(--danger-ink);color:var(--on-brand);box-shadow:var(--sh-btn);--btn-edge:var(--rose-ink)}
.btn--sky{background:var(--sky);color:var(--on-brand);box-shadow:var(--sh-btn);--btn-edge:var(--sky-deep)}
.btn--gold{background:var(--gold);color:var(--gold-ink);box-shadow:var(--sh-btn);--btn-edge:var(--gold-deep)}
.btn--ghost{background:var(--surface);color:var(--body);border:2px solid var(--line-2);box-shadow:none}
.btn--soft{background:var(--brand-soft);color:var(--brand-ink);box-shadow:none}
.btn--sm{min-height:var(--tap-min);font-size:var(--t-sm);padding:0 var(--s4);border-radius:var(--radius-md)}
.btn--primary:active,.btn--accent:active,.btn--danger:active,.btn--sky:active,.btn--gold:active{
  transform:translateY(3px);box-shadow:var(--sh-btn-flat);
}
.btn--ghost:active,.btn--soft:active{transform:translateY(2px)}
.btn:disabled{background:var(--line);color:var(--muted);box-shadow:none;cursor:not-allowed;transform:none}
.btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.btn--pulse{animation:btnBreath 2s var(--ease) infinite}
.iconbtn{
  width:var(--tap-min);height:var(--tap-min);border-radius:var(--r-md);border:0;
  background:var(--surface);color:var(--body);display:grid;place-items:center;cursor:pointer;
}

/* ============ 6. Cards ============ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--pad-card);box-shadow:var(--sh-1);
}
.card--flat{box-shadow:none}
.card--hero{box-shadow:var(--sh-2)}
.card--link{display:block;color:inherit;text-decoration:none}
.card--link:hover{text-decoration:none}
.card--pad-lg{padding:var(--gap-lg)}
.card--accent{border-color:var(--unit-deep);background:var(--unit-deep);color:var(--on-brand)}
.card--accent h2,.card--accent h3,.card--accent .card__title{color:var(--on-brand)}
.card--accent .hero-num,.card--accent .ring__num,.card--accent .stat-tile__num{color:var(--on-brand)}
.card--accent .muted,.card--accent .small{color:var(--on-brand);opacity:1}
.card--flame{--unit-c:var(--flame)}
.card--brand{--unit-c:var(--brand)}
.card--sky{--unit-c:var(--sky)}
.card__title{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);color:var(--ink)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.hero-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--gap-lg);box-shadow:var(--sh-2);
}

/* ============ 7. Progress ============ */
.progress{
  height:var(--progress-h);border-radius:var(--r-full);background:var(--line);
  overflow:hidden;flex:1;position:relative;
}
.progress__fill{
  height:100%;border-radius:var(--r-full);width:0;
  background:linear-gradient(90deg,var(--brand-hi),var(--brand));
  box-shadow:inset 0 4px 0 var(--highlight);
  transition:width var(--dur-slow) var(--ease);
}
.progress--sky .progress__fill{background:linear-gradient(90deg,var(--sky),var(--sky-deep));box-shadow:inset 0 4px 0 var(--highlight-soft)}
.progress--gold .progress__fill{background:linear-gradient(90deg,var(--gold),var(--gold-deep))}
.progress--thin{height:8px}
.progress--segments{display:flex;gap:3px;background:none;overflow:visible;height:10px}
.progress--segments .seg{flex:1;border-radius:var(--r-full);background:var(--line);transition:background var(--dur) var(--ease)}
.progress--segments .seg--done{background:var(--brand)}
.progress--segments .seg--current{background:var(--mango)}
.segbar{display:flex;gap:3px;height:10px}
.segbar .seg{flex:1;border-radius:var(--r-full);background:var(--line)}
.segbar .seg--done{background:var(--brand)}
.segbar .seg--current{background:var(--mango)}

/* ============ 8. Stat tiles ============ */
.stat-tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start;
  min-width:0;
}
.stat-tile__num{
  font-family:var(--font-display);font-weight:800;font-size:var(--t-h1);
  /* Baloo 2's glyph box is ~1.3em: a tighter line-height clips the digits */
  line-height:1.35;color:var(--ink);max-width:100%;
  min-width:0;white-space:nowrap;
}
.stat-tile__label{font-size:var(--t-xs);letter-spacing:var(--track-xs);text-transform:uppercase;font-weight:600;color:var(--muted)}
.stat-tile--row{flex-direction:row;align-items:center;gap:var(--s2)}
.stat-tile--row>.stack{min-width:0;flex:1 1 auto}
/* leave the number a little more room next to the icon bubble on 375px screens */
.stat-tile--row>.icon-bubble{--avatar-sm:36px}
.stat-tile--flat{background:var(--surface-2)}
.stat-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--tap-min);padding:var(--s2) 0}

/* ============ 9. Learning path ============ */
.unit-banner{
  position:relative;border-radius:var(--r-xl);padding:var(--gap-lg);
  background:var(--unit-deep);color:var(--on-brand);
  box-shadow:var(--sh-1);overflow:hidden;
}
.unit-banner__eyebrow{
  font-size:var(--t-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  font-weight:700;opacity:.85;
}
.unit-banner__title{font-size:var(--t-h2);line-height:var(--lh-h2);margin-top:var(--s1);color:var(--on-brand)}
.unit-banner h2,.unit-banner h3,.unit-banner h1{color:var(--on-brand)}
/* Derived accents must be re-declared on the elements that override --unit-c:
   a custom property is substituted where it is *declared*, so inheriting
   --unit-deep from :root would always resolve against the default --unit-c. */
.unit-banner,.card--accent,.course-card,.course-card__icon,.level-chip,.pill,.choice-card{
  --unit-deep:color-mix(in srgb, var(--unit-c) 45%, var(--ink));
  --unit-soft:color-mix(in srgb, var(--unit-c) 12%, var(--surface));
}
.unit-banner__desc{font-size:var(--t-sm);opacity:.9;margin-top:var(--s2)}
.unit-banner__progress{margin-top:var(--s4);display:flex;align-items:center;gap:var(--s3)}
.unit-banner .progress{background:var(--unit-track)}
.unit-banner__count{font-family:var(--font-display);font-weight:700;font-size:var(--t-sm)}
.unit-banner__badge{
  position:absolute;top:var(--s4);right:var(--s4);width:44px;height:44px;border-radius:var(--r-md);
  display:grid;place-items:center;background:var(--glass);color:var(--on-brand);
}
.path{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s5);padding:var(--s5) 0 var(--s3)}
.path__trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.path__trail path{fill:none;stroke:var(--line-2);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 12}
.path-node-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.path-node{
  position:relative;width:var(--node-size);height:var(--node-size);border-radius:var(--r-full);
  border:0;display:grid;place-items:center;cursor:pointer;color:var(--on-brand);
  background:var(--brand);box-shadow:var(--sh-btn);--btn-edge:var(--brand-deep);
  padding:0;
}
.path-node .icon{width:30px;height:30px}
.path-node--done{background:var(--brand);--btn-edge:var(--brand-deep);color:var(--on-brand)}
.path-node--current{background:var(--mango);--btn-edge:var(--mango-deep);color:var(--on-brand)}
.path-node--locked{background:var(--line);color:var(--locked-ink);box-shadow:none;--btn-edge:var(--line-2);cursor:not-allowed}
.path-node:active{transform:translateY(3px);box-shadow:var(--sh-btn-flat)}
.path-node--current::after{
  content:"";position:absolute;inset:-9px;border-radius:var(--r-full);
  border:3px solid var(--mango);opacity:.55;animation:nodePulse 2s ease-in-out infinite;
}
.path-node__label{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-xs);
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--muted);text-align:center;max-width:130px;
}
.path-node__label--current{color:var(--mango-ink)}
.path-flag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--mango-ink);color:var(--on-brand);border-radius:var(--r-full);
  padding:2px var(--s2);font-family:var(--font-display);font-size:var(--t-xs);font-weight:800;
  letter-spacing:var(--track-xs);text-transform:uppercase;white-space:nowrap;line-height:1.4;
}
.cta-float{
  position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + var(--safe-b) + var(--s3));
  max-width:var(--app-max);margin:0 auto;padding:0 var(--content-pad);z-index:45;
  transform:translateY(calc(100% + var(--s6)));opacity:0;pointer-events:none;
  transition:transform var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease);
}
.cta-float--show{transform:none;opacity:1;pointer-events:auto}

/* ============ 10. Bottom tab bar ============ */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;margin:0 auto;max-width:var(--app-max);
  height:calc(var(--tabbar-h) + var(--safe-b));padding-bottom:var(--safe-b);
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--surface);border-top:1px solid var(--line);
}
.tabbar__item{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--tap-min);color:var(--muted);text-decoration:none;
  font-family:var(--font-display);font-size:var(--t-xs);line-height:1.25;font-weight:700;
  letter-spacing:var(--track-xs);text-transform:uppercase;
}
.tabbar__item:hover{text-decoration:none}
.tabbar__item .icon{width:var(--icon-lg);height:var(--icon-lg)}
.tabbar__item[aria-current="page"]{color:var(--brand-face)}
.tabbar__item[aria-current="page"]::before{
  content:"";position:absolute;top:0;width:30px;height:3px;
  border-radius:0 0 3px 3px;background:var(--brand-face);
}

/* ============ 11. Sheet / toast / modal ============ */
.scrim{
  position:fixed;inset:0;z-index:55;background:var(--overlay);
  opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease);
}
.scrim--show{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:var(--app-max);margin:0 auto;
  background:var(--surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:var(--s5) var(--content-pad) calc(var(--s4) + var(--safe-b));
  box-shadow:var(--sh-2);transform:translateY(110%);
  transition:transform var(--dur-slow) var(--ease);max-height:86vh;overflow-y:auto;
}
.sheet--open{transform:none}
.sheet--ok{background:var(--brand-soft)}
.sheet--bad{background:var(--danger-soft)}
.sheet__grip{width:44px;height:4px;border-radius:var(--r-full);background:var(--line-2);margin:0 auto var(--s4)}
.sheet--ok .sheet__grip{background:var(--brand-hi)}
.sheet--bad .sheet__grip{background:var(--danger)}
.sheet__head{display:flex;align-items:center;gap:var(--s3)}
.sheet__badge{width:36px;height:36px;border-radius:var(--r-full);display:grid;place-items:center;flex:none}
.sheet__badge--ok{background:var(--brand);color:var(--on-brand)}
.sheet__badge--bad{background:var(--danger);color:var(--on-brand)}
.sheet__title{font-family:var(--font-display);font-weight:800;font-size:var(--t-h2);color:var(--ink)}
.sheet--ok .sheet__title{color:var(--brand-ink)}
.sheet--bad .sheet__title{color:var(--rose-ink)}
.sheet__body{margin-top:var(--s3);font-size:var(--t-body)}
.sheet__answer{
  margin-top:var(--s2);font-family:var(--font-display);font-weight:700;
  color:var(--ink);font-size:var(--t-h3);
}
.sheet__actions{margin-top:var(--s5);display:flex;gap:var(--s3)}
.toast{
  position:fixed;left:var(--s4);right:var(--s4);bottom:calc(var(--tabbar-h) + var(--safe-b) + var(--s4));
  z-index:70;max-width:calc(var(--app-max) - var(--s8));margin:0 auto;
  background:var(--ink);color:var(--surface);border-radius:var(--r-lg);
  padding:var(--s3) var(--s4);font-size:var(--t-sm);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.toast--show{opacity:1;transform:none}
.list-sheet__row{
  display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--tap-min);
  padding:var(--s3) 0;border:0;background:none;text-align:left;cursor:pointer;
  border-bottom:1px solid var(--line);color:var(--ink);font-size:var(--t-body);
}
.list-sheet__row:last-child{border-bottom:0}
.list-sheet__row[aria-selected="true"]{color:var(--brand-ink);font-weight:600}
.list-sheet__row[aria-selected="true"]::after{content:"";flex:none}

/* ============ 12. States: skeleton / empty / error ============ */
.skeleton{
  border-radius:var(--r-md);background:linear-gradient(90deg,var(--bg-2) 25%,var(--line) 37%,var(--bg-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;
}
.skeleton--line{height:14px;margin-bottom:var(--s2)}
.skeleton--title{height:22px;width:60%;margin-bottom:var(--s4)}
.skeleton--card{height:96px;border-radius:var(--r-xl)}
.skeleton--node{width:var(--node-size);height:var(--node-size);border-radius:var(--r-full);margin:0 auto}
.state{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  padding:var(--s6) var(--s4);text-align:center;
}
.state__icon{width:56px;height:56px;border-radius:var(--r-full);display:grid;place-items:center;background:var(--bg-2);color:var(--muted)}
.state__title{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);color:var(--ink)}
.state--error .state__icon{background:var(--danger-soft);color:var(--danger-ink)}
.state--error .state__title{color:var(--danger-ink)}

/* ============ 13. Exercise player ============ */
.player{padding:var(--s4) var(--content-pad) calc(var(--s6) + var(--s1) + var(--safe-b));display:flex;flex-direction:column;gap:var(--gap);min-height:calc(100vh - var(--topbar-h))}
.player__bar{display:flex;align-items:center;gap:var(--s3)}
.player__body{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--gap)}
.ex-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--gap-lg);box-shadow:var(--sh-1);
}
.ex-prompt{font-family:var(--font-display);font-weight:700;font-size:var(--t-h2);line-height:var(--lh-h2);color:var(--ink)}
.fill-blank{
  display:inline-block;min-width:72px;border-bottom:2px solid var(--brand);
  vertical-align:baseline;height:1.1em;
}
.ex-hint{font-size:var(--t-sm);color:var(--muted);margin-top:var(--s2)}
.ex-answerline{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  min-height:60px;padding:var(--s2) 0;border-bottom:2px solid var(--line-2);
}
.ex-answerline--empty::before{content:attr(data-placeholder);color:var(--muted);font-size:var(--t-sm)}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.opt{
  min-height:60px;padding:var(--s3);border-radius:var(--radius-lg);
  border:2px solid var(--line-2);background:var(--surface);color:var(--ink);
  box-shadow:0 3px 0 var(--line-2);cursor:pointer;text-align:left;
  font-family:var(--font-body);font-size:var(--t-body);font-weight:600;line-height:1.3;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast),border-color var(--dur-fast);
}
.opt:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line-2)}
.opt[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);box-shadow:0 3px 0 var(--brand-hi)}
.opt--correct{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);box-shadow:0 3px 0 var(--brand-hi)}
.opt--wrong{border-color:var(--danger);background:var(--danger-soft);color:var(--rose-ink);box-shadow:0 3px 0 var(--danger)}
.opt--muted{opacity:.55}
.token-tray{
  display:flex;flex-wrap:wrap;gap:var(--s2);min-height:64px;padding:var(--s2);
  border:2px dashed var(--line-2);border-radius:var(--radius-lg);background:var(--surface-2);
}
.token-tray:empty::after{content:attr(data-placeholder);color:var(--muted);font-size:var(--t-sm);padding:var(--s2)}
.token{
  display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 var(--s3);
  border-radius:var(--radius-md);border:2px solid var(--line-2);background:var(--surface);
  box-shadow:0 2px 0 var(--line-2);cursor:pointer;color:var(--ink);
  font-family:var(--font-body);font-size:var(--t-body);font-weight:600;
}
.token:active{transform:translateY(2px)}
.token--ghost{visibility:hidden}
.token--out{background:var(--bg-2);color:var(--muted);box-shadow:none;border-color:var(--line)}
.typed-input{
  width:100%;min-height:56px;border-radius:var(--radius-lg);border:2px solid var(--line-2);
  background:var(--surface);padding:0 var(--s4);color:var(--ink);
  font-family:var(--font-body);font-size:var(--t-body);font-weight:600;
}
.typed-input::placeholder{color:var(--muted);font-weight:400}
.typed-input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.typed-input--ok{border-color:var(--brand);background:var(--brand-soft)}
.typed-input--bad{border-color:var(--danger);background:var(--danger-soft)}
.speak-btn{
  width:88px;height:88px;border-radius:var(--r-full);border:0;cursor:pointer;
  background:var(--sky);color:var(--on-brand);box-shadow:0 5px 0 var(--sky-deep);
  display:grid;place-items:center;margin:0 auto;
}
.speak-btn .icon{width:36px;height:36px}
.speak-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sky-deep)}
.speak-btn--playing{animation:pulseRing 1.2s var(--ease) infinite}
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.match-col{display:flex;flex-direction:column;gap:var(--s2)}
.match-chip{
  min-height:var(--tap-min);padding:var(--s2) var(--s3);border-radius:var(--radius-md);
  border:2px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;
  font-family:var(--font-body);font-size:var(--t-body);font-weight:600;text-align:left;
  box-shadow:0 2px 0 var(--line-2);
}
.match-chip--picked{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.match-chip--paired{border-color:var(--brand-hi);background:var(--brand-soft);color:var(--brand-ink);opacity:.6;cursor:default}
.match-chip--wrong{border-color:var(--danger);background:var(--danger-soft);color:var(--rose-ink);animation:shake .3s var(--ease)}
.ex-foot{display:flex;flex-direction:column;gap:var(--s3)}
.ex-hintline{font-size:var(--t-sm);color:var(--muted);text-align:center}
.flash-ok{animation:flashOk .4s var(--ease)}

/* ============ 14. Assessments / rings / misc ============ */
.ring{position:relative;width:var(--ring-size);height:var(--ring-size);margin:0 auto}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring__track{fill:none;stroke:var(--line);stroke-width:var(--ring-width)}
.ring__value{fill:none;stroke:var(--brand);stroke-width:var(--ring-width);stroke-linecap:round;transition:stroke-dashoffset 600ms var(--ease)}
.ring--sm{--ring-size:96px;--ring-width:9px}
.ring__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ring__num{font-family:var(--font-display);font-weight:800;font-size:var(--t-hero);line-height:1.5;color:var(--ink);padding:0 var(--s2)}
.ring__label{font-size:var(--t-xs);letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--muted);font-weight:600}
.hero-num{font-family:var(--font-display);font-weight:800;font-size:var(--t-hero);line-height:1.5;color:var(--ink)}
.avatar{
  width:var(--avatar-md);height:var(--avatar-md);border-radius:var(--r-full);flex:none;
  background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:var(--t-h3);overflow:hidden;
}
.avatar--lg{width:var(--avatar-lg);height:var(--avatar-lg);font-size:var(--t-h1)}
.avatar--sm{width:var(--avatar-sm);height:var(--avatar-sm);font-size:var(--t-sm)}
.avatar--ring{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--brand-hi)}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s2)}
.calendar__cell{
  aspect-ratio:1;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--bg-2);color:var(--muted);
}
.calendar__cell--done{background:var(--flame-soft);color:var(--flame)}
.calendar__cell--today{box-shadow:0 0 0 2px var(--gold)}
.calendar__cell .icon{width:16px;height:16px}
.calendar__week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s2);margin-bottom:var(--s2)}
.calendar__week span{text-align:center;font-size:var(--t-xs);color:var(--muted);font-weight:600}
.achv{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.achv__item{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center}
.achv__badge{
  width:56px;height:56px;border-radius:var(--r-full);display:grid;place-items:center;
  background:var(--gold-soft);color:var(--gold-ink);
}
.achv__badge--locked{background:var(--bg-2);color:var(--muted);filter:grayscale(1)}
.achv__name{font-size:var(--t-xs);color:var(--muted);font-weight:600;line-height:1.3}
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s2);align-items:end}
.podium__col{display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.podium__base{
  width:100%;border-radius:var(--r-md) var(--r-md) 0 0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding-top:var(--s2);color:var(--on-brand);
  font-family:var(--font-display);font-weight:800;
}
.podium__base--1{background:var(--gold);color:var(--gold-ink);height:86px}
.podium__base--2{background:var(--line-2);color:var(--ink);height:66px}
.podium__base--3{background:var(--mango-soft);color:var(--mango-ink);height:54px}
.lb-row{
  display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s3);
  border-radius:var(--r-md);
}
.lb-row--me{background:var(--brand-soft)}
.lb-row--me .lb-row__name{color:var(--brand-ink);font-weight:700}
.lb-row__rank{width:28px;text-align:center;font-family:var(--font-display);font-weight:800;color:var(--muted)}
.lb-row__name{flex:1;min-width:0;font-weight:600;color:var(--ink)}
.lb-row__xp{font-family:var(--font-display);font-weight:700;color:var(--mango-ink)}
.plan-card{position:relative}
.plan-card--featured{border:2px solid var(--brand);box-shadow:var(--sh-2);transform:scale(1.02)}
.plan-card__badge{
  position:absolute;top:calc(var(--s3) * -1);left:var(--s4);
  background:var(--mango-ink);color:var(--on-brand);border-radius:var(--r-full);
  padding:3px var(--s3);font-family:var(--font-display);font-size:var(--t-xs);font-weight:800;
  letter-spacing:var(--track-xs);text-transform:uppercase;line-height:1.4;
}
.plan-card__badge--save{background:var(--brand-ink);left:auto;right:var(--s4)}
.plan-card--active{border-color:var(--brand-deep)}
.plan-card__price{display:flex;align-items:baseline;gap:var(--s1);font-family:var(--font-display)}
.plan-card__stars{font-size:var(--t-hero);font-weight:800;line-height:1.5;color:var(--ink);padding:0 var(--s2)}
.perks{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s4) 0}
.perk{display:flex;align-items:flex-start;gap:var(--s2);font-size:var(--t-sm);color:var(--body)}
.perk .icon{width:var(--icon-sm);height:var(--icon-sm);color:var(--brand);margin-top:2px}
.item-tile{
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-width:0;
  padding:var(--s3) var(--s2);border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);text-align:center;
}
.item-tile .chip{padding:0 var(--s2);gap:2px}
.item-tile .btn{padding:0 var(--s2)}
.item-tile__name{font-size:var(--t-xs);font-weight:600;color:var(--body);line-height:1.35}
.segmented{display:flex;background:var(--bg-2);border-radius:var(--r-full);padding:3px;gap:2px}
.segmented__btn{
  flex:1;min-height:44px;border:0;background:none;border-radius:var(--r-full);cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:var(--t-sm);color:var(--muted);
}
.segmented__btn[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.setting-row{
  display:flex;align-items:center;gap:var(--s3);width:100%;min-height:56px;padding:var(--s2) 0;
  border:0;background:none;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;
  color:var(--ink);font-size:var(--t-body);font-family:var(--font-body);
}
.setting-row:last-child{border-bottom:0}
.setting-row__label{
  flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.setting-row__value{
  color:var(--muted);font-size:var(--t-sm);font-weight:600;
  flex:0 0 auto;max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.course-card{position:relative;display:flex;flex-direction:column;gap:var(--s3)}
.course-card__icon{
  width:48px;height:48px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none;
  background:var(--unit-soft);color:var(--unit-deep);
}
.course-card__crown{position:absolute;top:var(--s3);right:var(--s3);color:var(--gold-deep)}
.level-chip{background:var(--unit-soft);color:var(--unit-deep)}
.choice-card{
  display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  border:2px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);
  padding:var(--s3);cursor:pointer;color:var(--ink);
}
.choice-card[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 3px 0 var(--brand-hi)}
.choice-card__check{width:26px;height:26px;border-radius:var(--r-full);border:2px solid var(--line-2);display:grid;place-items:center;flex:none;color:transparent}
.choice-card[aria-pressed="true"] .choice-card__check{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.goal-illustration{display:block;margin:0 auto;width:100%;max-width:220px;height:auto}
.badge-dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--danger);flex:none}

/* ============ 15. Motion keyframes (DESIGN.md §7) ============ */
@keyframes nodePulse{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.12);opacity:.2}
}
@keyframes btnBreath{
  0%,100%{transform:none}
  50%{transform:translateY(-2px)}
}
@keyframes pulseRing{
  0%,100%{box-shadow:0 5px 0 var(--sky-deep),0 0 0 0 var(--sky-soft)}
  50%{box-shadow:0 5px 0 var(--sky-deep),0 0 0 14px var(--sky-soft)}
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes flashOk{0%{background:var(--brand-soft)}100%{background:transparent}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes riseIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.rise{animation:riseIn var(--dur-slow) var(--ease) both}

/* ============ 16. Narrow phones ============ */
@media (max-width:400px){
  .match-chip{padding:var(--s2);font-size:var(--t-sm);line-height:1.35}
  .opt{padding:var(--s2) var(--s3)}
}
@media (max-width:360px){
  :root{--content-pad:var(--s3);--node-size:56px}
  .opt-grid,.match-grid{gap:var(--s2)}
  .grid-3{gap:var(--s2)}
  .btn{font-size:var(--t-body)}
}