/* Layout: one centred column. Each lesson screen has a single focal element (the talking mouth or the question)
   and one primary action in the bottom bar; everything else is quieter text.
   Palette: porcelain blue (青花) on cool white, seal red for rewards, four fixed tone colours. Slightly squared corners. */
:root {
  --bg: #F5F7FB;
  --surface: #FFFFFF;
  --surface-2: #EDF1F8;
  --ink: #17203A;
  --muted: #5E6985;
  --line: #DCE2EE;
  --accent: #2950B8;
  --accent-strong: #1E3D91;
  --accent-soft: #E3EAFB;
  --on-accent: #FFFFFF;
  --good: #198754;
  --good-soft: #E1F4EA;
  --bad: #C8363A;
  --bad-soft: #FBE7E7;
  --seal: #C23A2B;
  --warn-soft: #FFF4DA;
  --warn-ink: #7A5200;
  --t1: #2F6FDB;
  --t2: #14915F;
  --t3: #B7790A;
  --t4: #C8452F;
  --skin: #F7E3D4;
  --skin-line: #E9CBB6;
  --lip: #D9776F;
  --lip-line: #B65A53;
  --cavity: #4A1A26;
  --tongue: #E0848F;
  --tooth: #FFFFFF;
  --shadow: 0 1px 2px rgba(23, 32, 58, .06), 0 6px 18px rgba(23, 32, 58, .06);
  --f-thai: "Kanit", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  --f-py: "Lexend", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-hz: "LXGW WenKai TC", "Kaiti TC", "BiauKai", "DFKai-SB", "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;
  --r-lg: 12px;
  --r-md: 8px;
  --r-sm: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1422; --surface: #182035; --surface-2: #1F2942; --ink: #E7ECF7; --muted: #9CA8C4; --line: #2C3756;
    --accent: #7E9EF2; --accent-strong: #A9BEF7; --accent-soft: #233257; --on-accent: #0E1424;
    --good: #4CC38A; --good-soft: #163A2B; --bad: #F07A7A; --bad-soft: #42202A; --seal: #E3604F;
    --warn-soft: #3A2F14; --warn-ink: #F3D27A;
    --t1: #79A6FF; --t2: #4FD39A; --t3: #F0B53D; --t4: #FF8A70;
    --skin: #3B302C; --skin-line: #4D3F39; --lip: #C9706A; --lip-line: #E79A93; --cavity: #1C0A10; --tongue: #B9636E; --tooth: #F1F1F1;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1422; --surface: #182035; --surface-2: #1F2942; --ink: #E7ECF7; --muted: #9CA8C4; --line: #2C3756;
  --accent: #7E9EF2; --accent-strong: #A9BEF7; --accent-soft: #233257; --on-accent: #0E1424;
  --good: #4CC38A; --good-soft: #163A2B; --bad: #F07A7A; --bad-soft: #42202A; --seal: #E3604F;
  --warn-soft: #3A2F14; --warn-ink: #F3D27A;
  --t1: #79A6FF; --t2: #4FD39A; --t3: #F0B53D; --t4: #FF8A70;
  --skin: #3B302C; --skin-line: #4D3F39; --lip: #C9706A; --lip-line: #E79A93; --cavity: #1C0A10; --tongue: #B9636E; --tooth: #F1F1F1;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-thai); font-size: 16px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.modal-open, body.in-lesson { overflow: hidden; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.3; text-wrap: balance; margin: 0; font-weight: 600; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--muted); }
.py { font-family: var(--f-py); }
.hz, .hz-inline { font-family: var(--f-hz); }
.label { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.eyebrow { font-size: 14px; font-weight: 500; color: var(--accent-strong); }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.topbar-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; flex-shrink: 0; }
.brand-mark { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-family: var(--f-hz); font-size: 21px; font-weight: 700; }
.brand-name { font-size: 17px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: 15px; padding: 7px 12px; border-radius: var(--r-sm); }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a.active { color: var(--accent-strong); background: var(--accent-soft); }

/* ---------- page container ---------- */
.view { max-width: 760px; margin: 0 auto; padding-block: 32px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 32px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--r-md); padding: 10px 20px; font-weight: 500; font-size: 16px; cursor: pointer; transition: transform .08s ease, filter .15s ease, background-color .15s ease; text-decoration: none; min-height: 44px; }
.btn svg { width: 20px; height: 20px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; background: var(--surface-2); color: var(--muted); box-shadow: none; }
.btn.lg { font-size: 17px; padding: 13px 28px; min-height: 52px; }
.btn.sm { font-size: 14px; padding: 6px 14px; min-height: 36px; }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 0 var(--accent-strong); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.btn.ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); }
.btn.on-accent { background: var(--on-accent); color: var(--accent-strong); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.btn.on-accent-ghost { background: transparent; color: var(--on-accent); border: 1.5px solid color-mix(in srgb, var(--on-accent) 60%, transparent); }
.btn.good-solid { background: var(--good); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--good) 70%, #000); }
.btn.bad-solid { background: var(--bad); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--bad) 70%, #000); }
.btn.danger { color: var(--bad); }
.btn.danger-solid { background: var(--bad); color: #fff; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--r-md); cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 24px; height: 24px; }

/* ---------- speaker buttons ---------- */
.speak { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--r-md); padding: 7px 16px 7px 12px; font-weight: 500; font-size: 15px; min-height: 44px; transition: background-color .15s ease, transform .08s ease; position: relative; }
.speak:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 30%); }
.speak:active { transform: scale(.97); }
.speak-ico { display: inline-grid; place-items: center; }
.speak-ico svg { width: 22px; height: 22px; }
.speak.xl { font-size: 18px; padding: 12px 28px 12px 20px; min-height: 56px; background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 3px 0 var(--accent-strong); }
.speak.xl:hover { filter: brightness(1.07); background: var(--accent); }
.speak.xl .speak-ico svg { width: 26px; height: 26px; }
.speak.slow { border-color: var(--line); background: var(--surface); color: var(--muted); padding: 7px 14px 7px 10px; }
.speak.slow:hover { color: var(--accent-strong); border-color: var(--accent); }
.speak.mini { padding: 0; width: 38px; height: 38px; min-height: 38px; justify-content: center; }
.speak.mini .speak-ico svg { width: 20px; height: 20px; }
.speak.round { width: 104px; height: 104px; padding: 0; justify-content: center; border-radius: var(--r-lg); background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--accent-strong); }
.speak.round:hover { background: var(--accent); filter: brightness(1.07); }
.speak.round .speak-ico svg { width: 50px; height: 50px; }
.speak.is-playing:not(.xl):not(.round) { background: color-mix(in srgb, var(--accent-soft) 55%, var(--accent) 45%); color: var(--accent-strong); }
.speak.is-playing::after, .learned-item.is-playing::after, .pair-word.is-playing::after, .tone-row.is-playing::after, .an-result.is-playing::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2.5px solid var(--accent); animation: ring 1s ease-out infinite; pointer-events: none;
}
@keyframes ring { from { opacity: .9; transform: scale(.97); } to { opacity: 0; transform: scale(1.06); } }
.is-playing .w1 { animation: wave .8s ease-in-out infinite; }
.is-playing .w2 { animation: wave .8s ease-in-out .2s infinite; }
@keyframes wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------- home ---------- */
.welcome { display: flex; flex-direction: column; gap: 8px; }
.welcome h1 { font-size: clamp(30px, 5.5vw, 42px); letter-spacing: -.01em; }
.lead { color: var(--muted); font-size: 17px; max-width: 34em; }
.feature { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--accent); color: var(--on-accent); border-radius: var(--r-lg); padding: 28px; box-shadow: 0 4px 0 var(--accent-strong); }
.ft-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ft-kicker { font-size: 14px; opacity: .85; }
.feature h2 { font-size: clamp(24px, 4vw, 30px); }
.ft-obj { opacity: .9; max-width: 32em; }
.ft-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ft-art { font-family: var(--f-py); font-weight: 600; font-size: 44px; line-height: 1; opacity: .35; letter-spacing: .06em; white-space: nowrap; }
.ft-art .hz { font-size: 88px; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.h2 { font-size: 20px; }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.row-mark { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; font-family: var(--f-py); font-weight: 600; font-size: 18px; background: var(--accent-soft); color: var(--accent-strong); }
.row-mark svg { width: 22px; height: 22px; }
.row.st-done .row-mark { background: var(--good-soft); color: var(--good); }
.row.st-locked .row-mark { background: var(--surface-2); color: var(--muted); }
.row.st-locked h3 { color: var(--muted); }
.row-main { min-width: 0; }
.row-num { font-size: 13px; color: var(--muted); }
.row h3 { font-size: 17px; font-weight: 500; }
.row-right { display: flex; align-items: center; gap: 10px; }
.row-note { font-size: 14px; color: var(--muted); }
.row-score { font-family: var(--f-py); font-weight: 600; color: var(--good); font-variant-numeric: tabular-nums; }
.footnote { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; }
.chip { font-family: var(--f-py); font-size: 14px; padding: 1px 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }

/* ---------- progress page ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; }
.stat b { font-family: var(--f-py); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat b small { font-size: 18px; color: var(--muted); }
.stat span { color: var(--muted); font-size: 14px; }
.prog-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prog-row { display: grid; grid-template-columns: 1.2fr 2fr auto; gap: 18px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.pr-main { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.pr-main h3 { font-size: 17px; font-weight: 500; }
.pill { font-size: 12px; font-weight: 500; padding: 1px 10px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-strong); }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.muted { background: var(--surface-2); color: var(--muted); }
.pr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.pr-stats dt { font-size: 12px; color: var(--muted); }
.pr-stats dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.learned { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.learned-item { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 70px; cursor: pointer; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 6px 12px; line-height: 1.2; }
.learned-item:hover { border-color: var(--accent); }
.learned-item .py { font-size: 19px; font-weight: 500; }
.learned-item .hz { font-size: 24px; color: var(--muted); }
.empty { color: var(--muted); background: var(--surface); border: 1.5px dashed var(--line); border-radius: var(--r-md); padding: 18px; margin-top: 10px; }
.reset { display: flex; justify-content: flex-end; }

/* ---------- player ---------- */
.player { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.p-top { display: flex; align-items: center; gap: 12px; max-width: 680px; width: 100%; margin: 0 auto; padding-block: 8px; padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.p-bar { flex: 1; height: 12px; background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; }
.p-bar i { display: block; height: 100%; width: 0; background: var(--good); border-radius: var(--r-sm); transition: width .35s ease; }
.p-count { font-family: var(--f-py); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.stage { flex: 1; overflow-y: auto; outline: none; padding-block: 12px 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.step { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; animation: stepIn .25s ease; }
@keyframes stepIn { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.review-tag { max-width: 600px; margin: 0 auto 10px; font-size: 13px; color: var(--warn-ink); background: var(--warn-soft); width: fit-content; padding: 2px 10px; border-radius: var(--r-sm); }
.step-title { font-size: clamp(23px, 4vw, 28px); }
.step-text { color: var(--muted); }

.p-foot { border-top: 1px solid var(--line); background: var(--surface); padding-bottom: env(safe-area-inset-bottom, 0px); transition: background-color .2s ease; }
.foot-inner { max-width: 680px; margin: 0 auto; display: flex; align-items: center; gap: 16px; justify-content: space-between; padding-block: 14px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.foot-inner .btn.lg { min-width: 200px; }
.foot-hint { color: var(--muted); font-size: 14px; }
.p-foot.good { background: var(--good-soft); border-top-color: transparent; }
.p-foot.bad { background: var(--bad-soft); border-top-color: transparent; }
.fb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb-title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; }
.fb-title svg { width: 26px; height: 26px; }
.p-foot.good .fb-title { color: var(--good); }
.p-foot.bad .fb-title { color: var(--bad); }
.fb-answer b { font-family: var(--f-py); font-size: 18px; }
.fb-explain { font-size: 15px; }
.fb-requeue { font-size: 13px; color: var(--muted); }
.reveal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.reveal .hz { font-size: 30px; line-height: 1.1; }
.reveal .py { font-size: 18px; font-weight: 500; }
.reveal .mean { color: var(--muted); }

/* intro */
.intro { display: flex; flex-direction: column; gap: 18px; }
.note { color: var(--muted); font-size: 15px; }
.intro-list { display: flex; flex-direction: column; gap: 6px; }
.points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.points li { position: relative; padding-left: 26px; }
.points li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
.anatomy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; background: var(--surface); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); }
.an-part { display: flex; flex-direction: column; align-items: center; min-width: 72px; padding: 8px 10px; border-radius: var(--r-md); line-height: 1.25; }
.an-part b { font-family: var(--f-py); font-size: 30px; font-weight: 600; }
.an-part span { font-size: 13px; }
.an-part.ini { background: var(--accent-soft); }
.an-part.fin { background: var(--surface-2); }
.an-part.tone { background: color-mix(in srgb, var(--t1) 14%, var(--surface)); }
.an-part.tone b { color: var(--t1); }
.an-op { font-family: var(--f-py); font-size: 22px; color: var(--muted); }
.an-result { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 6px 12px; }
.an-result:hover { border-color: var(--accent); }
.an-result .hz { font-size: 40px; line-height: 1; }
.an-result .py { font-size: 22px; font-weight: 500; color: var(--t1); }
.an-result .mean { color: var(--muted); font-size: 14px; }
.an-result .speak-ico { color: var(--accent-strong); }

/* sound screen: header → mouth stage (focus) → listen → quiet extras */
.sound { display: flex; flex-direction: column; gap: 16px; }
.snd-head { display: flex; align-items: center; gap: 16px; }
.snd-symbol { flex-shrink: 0; width: 88px; height: 88px; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--accent); color: var(--on-accent); font-family: var(--f-py); font-weight: 600; font-size: 64px; line-height: 1; padding-bottom: 6px; }
.snd-titles { min-width: 0; }
.snd-kind { font-size: 13px; color: var(--muted); }
.snd-title { font-size: clamp(21px, 3.6vw, 26px); }
.snd-approx { color: var(--muted); }
.snd-approx b { color: var(--ink); font-size: 22px; font-weight: 600; margin-left: 2px; }
.mouth-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 20px; align-items: center; background: var(--surface); border-radius: var(--r-lg); padding: 16px 20px; box-shadow: var(--shadow); }
.mouth-host { width: 100%; max-width: 280px; margin: 0 auto; }
.live-mouth { display: block; width: 100%; height: auto; }
.live-mouth .m-face { fill: var(--skin); }
.live-mouth .m-nose { fill: none; stroke: var(--skin-line); stroke-width: 4; stroke-linecap: round; }
.live-mouth .m-lip { fill: var(--lip); stroke: var(--lip-line); stroke-width: 1.6; stroke-linejoin: round; }
.live-mouth .m-cavity { fill: var(--cavity); }
.live-mouth .m-tongue { fill: var(--tongue); }
.live-mouth .m-teeth { fill: var(--tooth); stroke: var(--lip-line); stroke-width: 1; }
.live-mouth .m-air ellipse { fill: none; stroke: var(--accent); stroke-width: 3; }
.live-mouth .m-hum path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.phases li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); color: var(--muted); transition: background-color .15s ease, color .15s ease; }
.ph-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; font-family: var(--f-py); font-size: 14px; font-weight: 600; background: var(--surface-2); color: var(--muted); }
.phases li.on { background: var(--accent-soft); color: var(--ink); }
.phases li.on .ph-n { background: var(--accent); color: var(--on-accent); }
.phases li.past .ph-n { background: color-mix(in srgb, var(--accent) 30%, var(--surface-2)); color: var(--accent-strong); }
.snd-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.snd-caption { text-align: center; font-size: 14px; color: var(--muted); }
.snd-caption .py { color: var(--ink); }
.snd-more { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.snd-tip { font-size: 15px; }
.snd-tip b { color: var(--warn-ink); font-weight: 600; margin-right: 4px; }
.snd-example { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.snd-example .hz { font-size: 34px; line-height: 1; }
.snd-example .py { font-size: 19px; font-weight: 500; }
.snd-example .mean { color: var(--muted); }

/* contrast */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct { background: var(--surface); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow); min-width: 0; }
.ct-top { display: flex; align-items: center; gap: 10px; align-self: stretch; }
.ct-symbol { font-family: var(--f-py); font-size: 48px; font-weight: 600; line-height: 1; color: var(--accent-strong); }
.ct-label { font-size: 14px; color: var(--muted); line-height: 1.35; }
.ct-label b { color: var(--ink); font-weight: 500; }
.ct .mouth-host { max-width: 200px; }
.air-meter { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; width: 100%; font-size: 12px; color: var(--muted); }
.am-bar { height: 8px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.am-bar i { display: block; height: 100%; background: var(--accent); min-width: 3px; }
.air-meter b { font-family: var(--f-py); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.pair { display: flex; flex-direction: column; gap: 8px; }
.pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair-word { justify-content: center; }
.pair-vs { font-size: 13px; color: var(--muted); }
.pair-word { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: var(--r-md); background: var(--surface); border: 1.5px solid var(--line); padding: 6px 12px; }
.pair-word:hover { border-color: var(--accent); }
.pair-word .hz { font-size: 32px; line-height: 1.1; }
.pair-word .py { font-size: 18px; font-weight: 500; }
.pair-word .mean { color: var(--muted); font-size: 14px; }
.pair-word .speak-ico { color: var(--accent-strong); }

/* combine */
.combo-nav { display: flex; justify-content: center; }
.dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dot-btn { font-family: var(--f-py); font-size: 14px; border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 3px 12px; cursor: pointer; color: var(--muted); min-height: 34px; }
.dot-btn.seen { color: var(--ink); }
.dot-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dot-btn:disabled { cursor: default; opacity: .5; }
.combo { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.combo .mouth-host { max-width: 220px; }
.combo-eq, .display-eq, .build-slots { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tile, .slot { font-family: var(--f-py); font-size: 36px; font-weight: 600; min-width: 70px; height: 72px; padding: 0 14px; border-radius: var(--r-md); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: var(--surface-2); border: 2px solid var(--line); }
.tile small, .slot small { font-family: var(--f-thai); font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 5px; }
.tile.ini { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); }
.tile.res { background: var(--accent); color: var(--on-accent); border-color: var(--accent); min-width: 100px; animation: pop .4s .1s ease both; }
@keyframes pop { from { transform: scale(.75); opacity: 0; } 70% { transform: scale(1.05); } to { transform: none; opacity: 1; } }
.op { font-family: var(--f-py); font-size: 24px; color: var(--muted); }
.combo-word { display: flex; align-items: baseline; gap: 10px; justify-content: center; flex-wrap: wrap; }
.combo-word .hz { font-size: 48px; line-height: 1; }
.combo-word .py { font-size: 24px; font-weight: 500; }
.combo-word .mean { color: var(--muted); }
.combo-word .approx { font-size: 18px; color: var(--muted); }

/* tones */
.tones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tone-row { position: relative; width: 100%; display: grid; grid-template-columns: 72px auto 1fr auto; gap: 14px; align-items: center; text-align: left; cursor: pointer; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 8px 14px; }
.tone-row:hover { border-color: var(--tc); }
.t1 { --tc: var(--t1); } .t2 { --tc: var(--t2); } .t3 { --tc: var(--t3); } .t4 { --tc: var(--t4); }
.contour { width: 72px; height: 48px; }
.contour .cg { stroke: var(--line); stroke-width: 1; }
.contour polyline { stroke: var(--tc); }
.contour .cdot { fill: var(--surface); stroke: var(--tc); stroke-width: 3; opacity: 0; transition: opacity .15s; }
.contour.live .cdot { opacity: 1; }
.tone-word { display: flex; align-items: baseline; gap: 8px; }
.tone-word .py { font-size: 24px; font-weight: 600; color: var(--tc); }
.tone-word .hz { font-size: 30px; line-height: 1.1; }
.tone-info { font-size: 15px; line-height: 1.4; min-width: 0; }
.tone-info b { font-weight: 600; }
.tone-info small { display: block; font-size: 13px; color: var(--muted); }
.tone-row .speak-ico { color: var(--muted); }
.tone-row.is-playing { border-color: var(--tc); }
.tone-row.is-playing::after { border-color: var(--tc); }
.sentence { background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--line); }
.sentence summary { cursor: pointer; padding: 12px 16px; font-weight: 500; color: var(--accent-strong); }
.sentence summary .hz { color: var(--muted); font-weight: 400; margin-left: 6px; }
.sentence-body { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding: 0 16px 16px; }
.sen-hz { font-size: 26px; line-height: 1.4; }
.sentence-body .py { font-size: 15px; }
.sentence-body .mean { color: var(--muted); font-size: 15px; }
.sen-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* exercises */
.ex { display: flex; flex-direction: column; gap: 20px; }
.ex-kind { font-size: 14px; color: var(--accent-strong); }
.ex-prompt { font-size: clamp(21px, 3.6vw, 26px); margin-top: -14px; }
.big-listen { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 0; }
.options { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.options.n3 { grid-template-columns: repeat(3, 1fr); }
.options.n4 { grid-template-columns: repeat(4, 1fr); }
.opt { position: relative; display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 12px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md); cursor: pointer; box-shadow: 0 2px 0 var(--line); transition: border-color .12s ease, background-color .12s ease, transform .08s ease; }
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt:active:not(:disabled) { transform: translateY(1px); }
.opt kbd { position: absolute; top: 5px; left: 7px; font-family: var(--f-py); font-size: 11px; color: var(--muted); }
.opt-py .opt-text { font-family: var(--f-py); font-size: 32px; font-weight: 600; }
.opt-th .opt-text { font-size: 20px; font-weight: 500; }
.opt.tonal .opt-text { color: var(--tc); }
.opt.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 2px 0 var(--accent); }
.opt.correct { border-color: var(--good); background: var(--good-soft); box-shadow: 0 2px 0 var(--good); }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); box-shadow: 0 2px 0 var(--bad); }
.opt:disabled { cursor: default; }
.opt:disabled:not(.correct):not(.wrong) { opacity: .5; }
.fill-word { display: flex; justify-content: center; gap: 6px; }
.fill-word .fixed, .fill-word .slot { font-family: var(--f-py); font-size: 54px; font-weight: 600; height: 88px; min-width: 74px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); }
.fill-word .slot { border: 3px dashed var(--accent); color: var(--muted); background: var(--surface); }
.fill-word .slot.filled { border-style: solid; color: var(--accent-strong); background: var(--accent-soft); }
.fill-word .slot.correct { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.targets { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: -6px; }
.target { font-family: var(--f-py); font-size: 18px; padding: 3px 14px; border-radius: var(--r-sm); border: 1.5px dashed var(--line); color: var(--muted); }
.target.hit { border-style: solid; border-color: var(--good); background: var(--good-soft); color: var(--good); }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-col { display: flex; flex-direction: column; gap: 10px; }
.m-tile { min-height: 58px; border: 2px solid var(--line); background: var(--surface); border-radius: var(--r-md); cursor: pointer; padding: 8px 12px; font-size: 17px; box-shadow: 0 2px 0 var(--line); transition: all .12s ease; }
.m-tile.py-tile { font-family: var(--f-py); font-size: 28px; font-weight: 500; }
.m-tile:hover:not(:disabled) { border-color: var(--accent); }
.m-tile.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 2px 0 var(--accent); }
.m-tile.matched { border-color: var(--good); background: var(--good-soft); color: var(--good); box-shadow: none; opacity: .8; cursor: default; }
.m-tile.shake { border-color: var(--bad); background: var(--bad-soft); animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.build-slots .slot { min-width: 66px; font-size: 32px; height: 74px; border: 2px dashed var(--line); color: var(--muted); background: var(--surface); white-space: nowrap; }
.build-slots .slot.filled { border-style: solid; border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.build-slots .slot.result { min-width: 92px; }
.build-slots .slot.result.filled { background: var(--accent); color: var(--on-accent); }
.build-slots .slot.result.filled small { color: var(--on-accent); }
.build-slots.correct .slot.result { background: var(--good); border-color: var(--good); }
.build-slots.wrong .slot.result { background: var(--bad); border-color: var(--bad); }
.b-row { display: flex; flex-direction: column; gap: 6px; }
.b-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.b-tile { font-family: var(--f-py); font-size: 28px; font-weight: 500; min-width: 62px; min-height: 58px; padding: 4px 14px; cursor: pointer; border: 2px solid var(--line); background: var(--surface); border-radius: var(--r-md); box-shadow: 0 2px 0 var(--line); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.b-tile:hover:not(:disabled) { border-color: var(--accent); }
.b-tile.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 2px 0 var(--accent); }
.b-tile:disabled { cursor: default; }
.tone-tile .tm { color: var(--tc); font-size: 28px; }
.tone-tile small { font-family: var(--f-thai); font-size: 12px; color: var(--muted); }

/* done */
.done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 12px; }
.seal { width: 100px; height: 100px; border-radius: var(--r-lg); background: var(--seal); color: #fff; font-family: var(--f-hz); font-size: 66px; font-weight: 700; display: grid; place-items: center; transform: rotate(-6deg); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .3); animation: stamp .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes stamp { from { transform: rotate(-6deg) scale(1.8); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
.done h2 { font-size: 30px; }
.done-msg { max-width: 30em; }
.done-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 520px; margin: 8px 0; }
.done-stats div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; }
.done-stats dt { font-size: 13px; color: var(--muted); }
.done-stats dd { margin: 0; font-family: var(--f-py); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.done-learned { display: flex; flex-direction: column; align-items: center; }
.done-learned p { color: var(--muted); font-size: 14px; }
.done-learned .learned { justify-content: center; }
.done-actions { justify-content: center; }

/* modal & toast */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(10, 14, 28, .5); display: grid; place-items: center; padding: 16px; }
.modal-card { background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: 22px; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.modal-head h2 { font-size: 21px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 70; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: var(--r-md); max-width: min(520px, calc(100vw - 32px)); font-size: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.in-lesson .toast { bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .brand-name { display: none; }
  .view { padding-block: 22px 48px; gap: 26px; }
  .feature { grid-template-columns: 1fr; padding: 22px; }
  .ft-art { display: none; }
  .ft-actions .btn { flex: 1; }
  .row { grid-template-columns: 40px 1fr; }
  .row-right { grid-column: 2; }
  .row-mark { width: 36px; height: 36px; }
  .stat-row { gap: 8px; }
  .stat { padding: 12px; }
  .stat b { font-size: 24px; }
  .stat span { font-size: 12px; }
  .prog-row { grid-template-columns: 1fr; }
  .snd-symbol { width: 68px; height: 68px; font-size: 48px; }
  .mouth-stage { grid-template-columns: 1fr; padding: 12px; }
  .mouth-host { max-width: 230px; }
  .phases { flex-direction: row; gap: 6px; }
  .phases li { flex: 1; flex-direction: column; text-align: center; gap: 4px; padding: 8px 4px; font-size: 13px; line-height: 1.35; }
  .contrast { gap: 8px; }
  .ct { padding: 10px; }
  .ct-symbol { font-size: 40px; }
  .ct-label { font-size: 12px; }
  .air-meter { grid-template-columns: 1fr auto; }
  .air-meter > span:first-child { grid-column: 1 / -1; }
  .ct .speak { font-size: 14px; padding: 6px 10px 6px 8px; }
  .options.n4 { grid-template-columns: repeat(2, 1fr); }
  .opt { min-height: 70px; }
  .opt-py .opt-text { font-size: 28px; }
  .opt-th .opt-text { font-size: 17px; }
  .tile, .slot { font-size: 28px; min-width: 54px; height: 62px; padding: 0 10px; }
  .build-slots .slot { min-width: 52px; font-size: 26px; height: 64px; }
  .build-slots .slot.result { min-width: 68px; }
  .op { font-size: 19px; }
  .combo-eq, .build-slots { gap: 5px; }
  .tone-row { grid-template-columns: 60px auto 1fr; gap: 10px; padding: 8px 10px; }
  .tone-row .speak-ico { display: none; }
  .contour { width: 60px; height: 40px; }
  .tone-info { font-size: 14px; }
  .tone-info small { font-size: 12px; }
  .sentence-body { grid-template-columns: 1fr; }
  .sentence-body .mouth-host { max-width: 170px; }
  .foot-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .foot-inner .btn.lg { width: 100%; }
  .foot-hint:empty { display: none; }
  .done-stats dd { font-size: 18px; }
  .done-actions { flex-direction: row; }
  .done-actions .btn.lg { flex: 1; min-width: 0; }
  .speak.round { width: 88px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}