:root { --fs: 16px; }
.theme-dark  { --bg:#090d16; --card:#131b2e; --card2:#1e293b; --text:#f8fafc; --sub:#94a3b8; --line:#1e293b; --accent:#38bdf8; --warn:#f97316; --warnbg:#7c2d12; --ok:#4ade80; --bad:#f87171; }
.theme-sepia { --bg:#f7eed8; --card:#eee0c2; --card2:#e2ceaa; --text:#423223; --sub:#78644e; --line:#d9c39e; --accent:#b45309; --warn:#c2410c; --warnbg:#fed7aa; --ok:#15803d; --bad:#b91c1c; }
.theme-light { --bg:#f8fafc; --card:#ffffff; --card2:#f1f5f9; --text:#0f172a; --sub:#64748b; --line:#e2e8f0; --accent:#0284c7; --warn:#c2410c; --warnbg:#ffedd5; --ok:#15803d; --bad:#b91c1c; }

* { box-sizing: border-box; }
html { font-size: var(--fs); }
body { margin:0; background:var(--bg); color:var(--text); line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","Malgun Gothic",sans-serif; }
a { color:var(--accent); text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }

header.bar { position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--line);
  padding:.6rem 1rem; display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:space-between; }
header.bar h1 { margin:0; font-size:1.05rem; }
.toolbar { display:flex; flex-wrap:wrap; gap:.5rem; }
.seg { display:flex; border:1px solid var(--line); border-radius:.6rem; overflow:hidden; background:var(--card); }
.seg button { border:0; background:transparent; padding:.25rem .6rem; font-size:.8rem; color:var(--sub); }
.seg button.on { background:var(--accent); color:#06121c; font-weight:700; }

main { max-width:60rem; margin:0 auto; padding:1.5rem 1rem 3rem; }
h2 { margin:.2rem 0 1rem; }
h3 { margin:1.4rem 0 .6rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:1rem; padding:1rem 1.2rem; margin-bottom:1rem; }
.muted { color:var(--sub); font-size:.85rem; }
.tag { display:inline-block; font-size:.72rem; padding:.05rem .5rem; border-radius:.4rem; border:1px solid var(--line); color:var(--sub); }

/* route map */
.route { display:flex; flex-direction:column; align-items:center; padding:1rem 0; }
.stage { width:min(34rem,100%); text-align:center; border:2px solid var(--accent); background:var(--card);
  border-radius:.5rem; padding:.7rem 1rem; color:var(--text); display:block; }
.stage.warn { border-color:var(--warn); background:var(--warnbg); }
.stage.todo { opacity:.45; border-style:dashed; pointer-events:none; }
a.stage:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.25); }
.stage b { display:block; }
.stage small { color:var(--sub); }
.stage .prog { margin-top:.3rem; font-size:.8rem; color:var(--ok); }
.arrow { height:1.6rem; width:2px; background:var(--sub); position:relative; margin:0 auto; }
.arrow::after { content:""; position:absolute; bottom:-1px; left:-5px; border:6px solid transparent; border-top:8px solid var(--sub); border-bottom:0; }

/* char cards */
.tabs { margin:.5rem 0 1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(5.2rem,1fr)); gap:.6rem; }
.ch { background:var(--card); border:1px solid var(--line); border-radius:.8rem; padding:.6rem .3rem; text-align:center; }
.ch:hover { border-color:var(--accent); }
.ch .g { font-size:1.9rem; line-height:1.2; }
.ch .r { font-size:.75rem; color:var(--sub); }
.group-title { margin:1rem 0 .4rem; font-size:.9rem; color:var(--accent); }
ul.pts { margin:.3rem 0; padding-left:1.2rem; }
ul.pts li { margin:.25rem 0; }

/* quiz */
.q-sound { font-size:2.4rem; width:5rem; height:5rem; border-radius:50%; border:2px solid var(--accent); background:var(--card2); }
.choices { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-top:1rem; }
.choice { font-size:1.8rem; padding:.7rem; border-radius:.8rem; border:2px solid var(--line); background:var(--card2); }
.choice.right { border-color:var(--ok); }
.choice.wrong { border-color:var(--bad); }
.btn { border:1px solid var(--accent); background:var(--accent); color:#06121c; font-weight:700; border-radius:.6rem; padding:.45rem 1rem; }
.btn.ghost { background:transparent; color:var(--accent); }
.score { font-size:1.4rem; font-weight:700; }

/* 399 table: scales to the viewport so the whole table is visible without scrolling */
main.wide { max-width:none; padding:.6rem 1rem 2rem; }
main.wide h3 { margin:.3rem 0 .5rem; }
.tablewrap { overflow:auto; border:1px solid var(--line); border-radius:.8rem; }
.t399 { border-collapse:separate; border-spacing:0; width:100%; table-layout:fixed; text-align:center;
  font-size:clamp(.8rem, min(1.35vw, 2.5vh), 1.6rem); }
.t399 th, .t399 td { border:1px solid var(--line); padding:0; line-height:1; background:var(--card);
  height:calc((100vh - 15rem) / 21); min-height:1.5rem; }
.t399 td { cursor:pointer; }
.t399 td:hover { background:var(--accent); color:#06121c; }
.t399 th.cv { background:var(--card2); }
.t399 th.grp { font-size:.7em; color:var(--accent); background:var(--card2); height:auto; min-height:0; padding:.2rem 0; }
.t399 th.vert { width:2rem; writing-mode:vertical-rl; letter-spacing:.2rem; }
.t399 col.lab { width:2rem; }
.t399 col.lab2 { width:2.4rem; }
@media (max-width:900px) { .t399 { table-layout:auto; } .t399 th, .t399 td { min-width:2.2rem; } }
.bigchar { font-size:6rem; line-height:1.3; }
.btn:disabled { opacity:.4; cursor:not-allowed; }

main.wide .card { max-width:60rem; margin-left:auto; margin-right:auto; }

/* Colour tiers (teacher's 40-sound table): 1 = red, 2 = blue */
.theme-dark  { --t1:#f87171; --t2:#60a5fa; --t1bg:rgba(248,113,113,.11); --t2bg:rgba(96,165,250,.13); }
.theme-sepia { --t1:#b91c1c; --t2:#1d4ed8; --t1bg:rgba(185,28,28,.10);  --t2bg:rgba(29,78,216,.10); }
.theme-light { --t1:#dc2626; --t2:#1d4ed8; --t1bg:rgba(220,38,38,.07);  --t2bg:rgba(29,78,216,.08); }
.t399 td.r1, .t399 th.r1 { color:var(--t1); }
.t399 td.r2, .t399 th.r2 { color:var(--t2); }
.t399 td.c1, .t399 th.c1 { background:var(--t1bg); }
.t399 td.c2, .t399 th.c2 { background:var(--t2bg); }
.t399 th.cv.c1 { color:var(--t1); }
.t399 th.cv.c2 { color:var(--t2); }
.t399 td:hover { background:var(--accent); color:#06121c; }
.legend { font-size:.82rem; color:var(--sub); margin:.2rem 0 .5rem; }
.legend .r1 { color:var(--t1); font-weight:700; } .legend .r2 { color:var(--t2); font-weight:700; }
.legend .c1 { background:var(--t1bg); padding:0 .3rem; border-radius:.3rem; } .legend .c2 { background:var(--t2bg); padding:0 .3rem; border-radius:.3rem; }
.ch .g.t1 { color:var(--t1); } .ch .g.t2 { color:var(--t2); }

/* Two-colour syllables: clip the same glyph twice (consonant layer / vowel layer) */
.sp { position:relative; display:inline-block; width:1em; height:1em; line-height:1; vertical-align:middle; }
.sp i { position:absolute; left:0; top:0; display:block; font-style:normal; line-height:1; }
.sp .cc { color:var(--text); } .sp .vv { color:var(--t2); }
.k-V1 { --sx:58%; } .k-V1.w { --sx:64%; } .k-V2 { --sx:52%; } .k-V2.w { --sx:58%; } .k-H { --sy:58%; } .k-M { --sx:56%; --sy:58%; }
.k-V1 .cc, .k-V2 .cc { clip-path:inset(0 calc(100% - var(--sx)) 0 0); }
.k-V1 .vv, .k-V2 .vv { clip-path:inset(0 0 0 var(--sx)); }
.k-H .cc { clip-path:inset(0 0 calc(100% - var(--sy)) 0); }
.k-H .vv { clip-path:inset(var(--sy) 0 0 0); }
.k-M .cc { clip-path:inset(0 calc(100% - var(--sx)) calc(100% - var(--sy)) 0); }
.k-M .vv { clip-path:polygon(var(--sx) 0, 100% 0, 100% 100%, 0 100%, 0 var(--sy), var(--sx) var(--sy)); }
.t399.split td.r1, .t399.split td.r2 { color:var(--text); }
.t399.split td.c1, .t399.split td.c2 { background:var(--card); }
.t399.split td:hover { background:var(--card2); }
.legend .seg { display:inline-flex; vertical-align:middle; margin-right:.5rem; }

/* Romanization under each syllable */
.t399 td .cm { line-height:1; }
.rm { display:block; font-size:.5em; line-height:1.1; color:var(--sub); }
.rm.big { font-size:1.4rem; margin-bottom:.6rem; }
.t399.rom td { height:calc((100vh - 16rem) / 21); min-height:2.6rem; }
.t399 th.cv .rm { color:inherit; opacity:.75; }
/* stage 3: 7 representative sounds fit in one row */
.choices.seven { grid-template-columns:repeat(4,1fr); }
.choice .rm { font-size:.7rem; color:var(--sub); }


/* stage 4.5: textbook interactive layout */
[hidden] { display:none !important; }
main.book-main { max-width:68rem; }
.book-audio-dock { position:sticky; top:3.2rem; z-index:9; background:var(--card2); border:2px solid var(--accent);
  border-radius:.8rem; padding:.6rem 1rem; margin-bottom:1rem; display:flex; flex-wrap:wrap; gap:.6rem 1rem;
  align-items:center; justify-content:space-between; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.dock-left { display:flex; align-items:center; gap:.6rem; min-width:12rem; flex-wrap:wrap; }
.dock-select { background:var(--card); color:var(--text); border:1px solid var(--accent); border-radius:.45rem;
  padding:.22rem .5rem; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; }
.dock-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; flex:1; justify-content:flex-end; }
.dock-seek { width:min(14rem, 100%); accent-color:var(--accent); cursor:pointer; }
.btn.sm { padding:.25rem .65rem; font-size:.82rem; border-radius:.45rem; }
.tag.accent-tag { border-color:var(--accent); color:var(--accent); font-weight:700; }
.tag.warn-tag { border-color:var(--warn); color:var(--warn); font-weight:700; }
.tag.ok-tag { border-color:var(--ok); color:var(--ok); font-weight:700; }

.lesson-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.65rem; margin-bottom:1.2rem; }
.lesson-pill { text-align:left; background:var(--card); border:1px solid var(--line); border-radius:.75rem;
  padding:.65rem .85rem; transition:all .15s; display:flex; flex-direction:column; gap:.2rem; }
.lesson-pill:hover { border-color:var(--accent); transform:translateY(-1px); }
.lesson-pill.active { border:2px solid var(--accent); background:var(--card2); }
.lesson-pill .lp-top { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--sub); }
.lesson-pill .lp-ko { font-weight:700; font-size:1rem; color:var(--text); }
.lesson-pill .lp-zh { font-size:.82rem; color:var(--sub); }

.book-banner { background:linear-gradient(135deg, var(--card2), var(--card)); border:1px solid var(--accent);
  border-radius:1rem; padding:1.1rem 1.3rem; margin-bottom:1rem; display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between; align-items:flex-start; }
.book-banner h2 { margin:.2rem 0 .4rem; font-size:1.45rem; }
.obj-list { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }

.subtabs { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; border-bottom:1px solid var(--line); padding-bottom:.6rem; }
.subtab-btn { border:1px solid var(--line); background:var(--card); color:var(--sub); padding:.4rem .85rem;
  border-radius:.6rem; font-size:.88rem; }
.subtab-btn.on { background:var(--accent); color:#06121c; border-color:var(--accent); font-weight:700; }

.g-box { background:var(--card); border:1px solid var(--line); border-radius:.9rem; padding:1rem 1.2rem; margin-bottom:1rem; }
.g-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem;
  border-bottom:1px solid var(--line); padding-bottom:.5rem; margin-bottom:.75rem; }
.g-title { font-size:1.2rem; font-weight:700; color:var(--accent); }
.g-meaning { font-size:.95rem; font-weight:600; color:var(--text); }
.book-table { width:100%; border-collapse:collapse; margin:.6rem 0; font-size:.92rem; }
.book-table th, .book-table td { border:1px solid var(--line); padding:.45rem .65rem; text-align:left; }
.book-table th { background:var(--card2); color:var(--accent); }
.callout { border-left:4px solid var(--accent); background:var(--card2); padding:.65rem .9rem; border-radius:0 .6rem .6rem 0;
  margin:.6rem 0; font-size:.9rem; }
.callout.warn { border-left-color:var(--warn); }
.callout.ok { border-left-color:var(--ok); }

.dlg-wrap { display:flex; flex-direction:column; gap:.55rem; margin:.8rem 0; }
.dlg-line { display:flex; gap:.75rem; align-items:flex-start; background:var(--card2); border:1px solid var(--line);
  border-radius:.8rem; padding:.65rem .9rem; cursor:pointer; transition:border-color .15s; }
.dlg-line:hover { border-color:var(--accent); }
.dlg-speaker { min-width:4.5rem; font-weight:700; color:var(--accent); font-size:.88rem; padding-top:.1rem; }
.dlg-body { flex:1; }
.dlg-ko { font-size:1.08rem; font-weight:600; }
.dlg-zh { font-size:.86rem; color:var(--sub); margin-top:.15rem; }

.vocab-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr)); gap:.5rem; margin:.6rem 0; }
.vocab-item { background:var(--card2); border:1px solid var(--line); border-radius:.65rem; padding:.5rem .75rem;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:.4rem; text-align:left; }
.vocab-item:hover { border-color:var(--accent); }
.vocab-item .v-ko { font-weight:700; font-size:1rem; }
.vocab-item .v-zh { font-size:.82rem; color:var(--sub); }

.pat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr)); gap:.8rem; }
.pat-card { background:var(--card); border:1px solid var(--line); border-radius:.9rem; padding:.9rem 1.1rem; }
.pat-sub { background:var(--card2); border-radius:.6rem; padding:.45rem .7rem; margin:.35rem 0; cursor:pointer;
  border:1px solid transparent; display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.pat-sub:hover { border-color:var(--accent); }
.char-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:.75rem; }
.char-card { background:var(--card); border:1px solid var(--line); border-radius:.85rem; padding:.85rem 1rem; }