/* 由 reference/exploring-space-v6.html 搬過來的樣式（配色、字型、版面）。改外觀請先對照參考檔。 */
:root{
  color-scheme:light;
  --ground:#F6F7F9; --surface:#FFFFFF; --ink:#17212B; --muted:#55606E;
  --line:#E2E6EB; --line-soft:#EEF1F4; --chip-line:#D5DDE6;
  --accent:#1D5C8C; --accent-dark:#123E61; --accent-soft:#EAF1F8;
  --learn-bg:#F3F6FA; --module-bg:#E8EEF5;
  --warn-ink:#8A4A12; --warn-bg:#FBF4EC; --tip-ink:#1E6B52; --tip-bg:#EDF7F2; --tip-line:#B8DCCB;
  --on-accent:#FFFFFF; --rail:#9AAABB;
  --fig-sun:#F0B341; --fig-lit:#FFF6DA; --fig-dark:#4A5563; --fig-earth:#3D7FB8;
  --fig-line:#8897A8; --fig-umbra:#2E3742; --fig-pen:#A9B4C1; --fig-text:#3B4552;
  --todo:#C62828; --todo-bg:#FDECEC;
  /* 科目色（單字牆）：底色淡、字色深，兩者對比 ≥ 4.5 */
  --subj-eng-bg:#EAF1FB; --subj-eng-ink:#1C4F8A; --subj-math-bg:#FCEFE3; --subj-math-ink:#8A4210;
  --subj-sci-bg:#E6F4EC; --subj-sci-ink:#1D6542; --subj-soc-bg:#F4EAF7; --subj-soc-ink:#6A2F80;
  --subj-chi-bg:#FBE9EA; --subj-chi-ink:#932B33; --subj-elec-bg:#F6F1DC; --subj-elec-ink:#6B5A0E;
  --subj-other-bg:#EEF1F4; --subj-other-ink:#3B4552;
  /* 學生首頁 banner 與「繼續上次的課」卡：每套配色各自指定 */
  --hero-bg:#123E61; --hero-ink:#FFFFFF; --hero-btn:#FFFFFF; --hero-btn-ink:#17212B;
  --book-ink-dark:#112332;--book-ink-light:#FFFFFF;--book-eng-top:#DAE9F6;--book-eng-bot:#ACD0EC;--book-math-top:#B1D3ED;--book-math-bot:#84B9E2;--book-sci-top:#8ABCE4;--book-sci-bot:#559DD7;--book-soc-top:#2A77B5;--book-soc-bot:#225F8F;--book-chi-top:#236397;--book-chi-bot:#1C4E75;--book-elec-top:#1E537E;--book-elec-bot:#174162;--book-other-top:#194669;--book-other-bot:#13354F
}
/* 八套配色由帳號設定（User.ui_theme），伺服器在 <html data-theme> 輸出；晴空、抹茶拿鐵、美式復古、蜂蜜吐司、雲朵莓果是淺色。
   不跟著裝置的深色模式；只有使用者在設定頁自己選「粉墨野莓」「海鹽葡萄」「賽博萊姆」才是深色（data-theme="night"／"lavender"／"lime"，各區塊宣告深色 color-scheme）。
   每一套都要定義 :root 的每一個 token。對比檢查見 catalog/tests/test_theme_contrast.py */
:root[data-theme="warm"]{
  color-scheme:light;
  --ground:#EFEDE6; --surface:#FAF8F2; --ink:#26241F; --muted:#5E5A50;
  --line:#DAD6CA; --line-soft:#E8E4D8; --chip-line:#D0CBBE;
  --accent:#3F6B3A; --accent-dark:#2F4A2C; --accent-soft:#DDE5D2;
  --learn-bg:#F4F1E8; --module-bg:#E6E1D3;
  --warn-ink:#8A4A12; --warn-bg:#FBF1E4; --tip-ink:#2F5A2B; --tip-bg:#E9F0E0; --tip-line:#C3D6B4;
  --on-accent:#FFFFFF; --rail:#A39E90;
  --fig-sun:#F0B341; --fig-lit:#FFF6DA; --fig-dark:#4A5563; --fig-earth:#3D7FB8;
  --fig-line:#8897A8; --fig-umbra:#2E3742; --fig-pen:#A9B4C1; --fig-text:#3B4552;
  --todo:#B3261E; --todo-bg:#FBE7E4;
  --subj-eng-bg:#D7D3F5; --subj-eng-ink:#3B3790; --subj-math-bg:#F8E0A8; --subj-math-ink:#6B4A08;
  --subj-sci-bg:#D3E3C4; --subj-sci-ink:#2F5A2B; --subj-soc-bg:#F2D4DC; --subj-soc-ink:#7A2C45;
  --subj-chi-bg:#F6D8D3; --subj-chi-ink:#8A2E2A; --subj-elec-bg:#F1E6B8; --subj-elec-ink:#5E4E0A;
  --subj-other-bg:#E8E4D8; --subj-other-ink:#4A463D;
  --hero-bg:#2F4A2C; --hero-ink:#FFFFFF; --hero-btn:#FAF8F2; --hero-btn-ink:#26241F;
  --book-ink-dark:#1A2A19;--book-ink-light:#FFFFFF;--book-eng-top:#DEEADD;--book-eng-bot:#B7D3B4;--book-math-top:#BCD6B9;--book-math-bot:#95BE91;--book-sci-top:#9AC196;--book-sci-bot:#6DA467;--book-soc-top:#507E4B;--book-soc-bot:#3F643B;--book-chi-top:#42683E;--book-chi-bot:#345231;--book-elec-top:#385734;--book-elec-bot:#2B4428;--book-other-top:#2E492B;--book-other-bot:#233821
}
:root[data-theme="night"]{
  /* 粉墨野莓（night）：唯一的深色配色，只有使用者在設定頁自己選才會出現（不跟著裝置） */
  color-scheme:dark;
  --ground:#0E0E10; --surface:#1B1A1F; --ink:#F4EEF1; --muted:#B8AFB6;
  --line:#34313A; --line-soft:#2A2830; --chip-line:#3F3B45;
  --accent:#FF8FB8; --accent-dark:#FFB3CE; --accent-soft:#3A2230;
  --learn-bg:#222026; --module-bg:#2C2733;
  --warn-ink:#E8B583; --warn-bg:#2B231B; --tip-ink:#8FD3B6; --tip-bg:#17281F; --tip-line:#2F5444;
  --on-accent:#1A0F14; --rail:#6B6470;
  --fig-sun:#E8A92F; --fig-lit:#F3E9C8; --fig-dark:#5A6676; --fig-earth:#4F95CF;
  --fig-line:#6D7C8D; --fig-umbra:#0B0F14; --fig-pen:#4A5562; --fig-text:#D6CED4;
  --todo:#FF8A80; --todo-bg:#3A1C1C;
  --subj-eng-bg:#1F2B44; --subj-eng-ink:#9CC4F0; --subj-math-bg:#3A2716; --subj-math-ink:#F2BC8A;
  --subj-sci-bg:#16301F; --subj-sci-ink:#93D9B2; --subj-soc-bg:#2E1E36; --subj-soc-ink:#D8AEE8;
  --subj-chi-bg:#3A1C20; --subj-chi-ink:#F2A7AD; --subj-elec-bg:#33301A; --subj-elec-ink:#E3D27E;
  --subj-other-bg:#2A2830; --subj-other-ink:#C9C1C8;
  --hero-bg:#3A2230; --hero-ink:#FFF0F5; --hero-btn:#FF8FB8; --hero-btn-ink:#1A0F14;
  --book-ink-dark:#2A1923;--book-ink-light:#FFFFFF;--book-eng-top:#EFE4EB;--book-eng-bot:#DDC5D3;--book-math-top:#DFC9D6;--book-math-bot:#CDA9BE;--book-sci-top:#CFADC1;--book-sci-bot:#BA88A5;--book-soc-top:#9F5D84;--book-soc-bot:#7F4B69;--book-chi-top:#854E6E;--book-chi-bot:#693D56;--book-elec-top:#70425C;--book-elec-bot:#563247;--book-other-top:#5C364D;--book-other-bot:#47293A
}
:root[data-theme="retro"]{
  /* 美式復古（retro）：奶油底、藍色 banner、紅色主按鈕；--fig-* 沿用 :root */
  color-scheme:light;
  --ground:#F7ECD2; --surface:#FFFBF0; --ink:#2A2320; --muted:#5B4F44;
  --line:#E3D2A8; --line-soft:#EFE1BD; --chip-line:#D2C095;
  --accent:#AD282F; --accent-dark:#7E1B21; --accent-soft:#F3D9C6;
  --learn-bg:#FBF3DE; --module-bg:#EBDDB5;
  --warn-ink:#7A3F0E; --warn-bg:#F9ECD3; --tip-ink:#1F4A66; --tip-bg:#DCE8EE; --tip-line:#AFC8D6;
  --on-accent:#FFFFFF; --rail:#A8987A;
  --fig-sun:#F0B341; --fig-lit:#FFF6DA; --fig-dark:#4A5563; --fig-earth:#3D7FB8;
  --fig-line:#8897A8; --fig-umbra:#2E3742; --fig-pen:#A9B4C1; --fig-text:#3B4552;
  --todo:#A3211A; --todo-bg:#F6DDD4;
  --subj-eng-bg:#CFE0EA; --subj-eng-ink:#1F4A66; --subj-math-bg:#F2DCAB; --subj-math-ink:#5E3F06;
  --subj-sci-bg:#D5E0C0; --subj-sci-ink:#3A5320; --subj-soc-bg:#F3CFC4; --subj-soc-ink:#7E1B21;
  --subj-chi-bg:#F6D8D3; --subj-chi-ink:#8A2E2A; --subj-elec-bg:#F1E6B8; --subj-elec-ink:#5E4E0A;
  --subj-other-bg:#E8E4D8; --subj-other-ink:#4A463D;
  --hero-bg:#356C8D; --hero-ink:#FFFFFF; --hero-btn:#F2DCAB; --hero-btn-ink:#2A2320;
  --book-ink-dark:#122530;--book-ink-light:#FFFFFF;--book-eng-top:#DCE9F2;--book-eng-bot:#B2D0E2;--book-math-top:#B6D3E4;--book-math-bot:#8BB9D4;--book-sci-top:#92BDD6;--book-sci-bot:#619EC4;--book-soc-top:#3B789D;--book-soc-bot:#2F617E;--book-chi-top:#316483;--book-chi-bot:#274F66;--book-elec-top:#29556E;--book-elec-bot:#204156;--book-other-top:#22465C;--book-other-bot:#1A3545
}
:root[data-theme="mustard"]{
  /* 蜂蜜吐司（mustard） */
  color-scheme:light;
  --ground:#F3D27A; --surface:#FFF5D9; --ink:#392E1D; --muted:#5A4320;
  --line:#E0B85A; --line-soft:#F6E3AE; --chip-line:#D9AE4E; --accent:#8C5311;
  --accent-dark:#5E3709; --accent-soft:#F8DB8E; --learn-bg:#F8E4A8; --module-bg:#EFD48A;
  --warn-ink:#7A2E08; --warn-bg:#FBE3C8; --tip-ink:#2F4A10; --tip-bg:#E6EBC4;
  --tip-line:#BFC98A; --on-accent:#FFFFFF; --rail:#B08A40; --fig-sun:#F0B341;
  --fig-lit:#FFF6DA; --fig-dark:#4A5563; --fig-earth:#3D7FB8; --fig-line:#8897A8;
  --fig-umbra:#2E3742; --fig-pen:#A9B4C1; --fig-text:#3B4552; --todo:#9E1C14;
  --todo-bg:#FBE0D8; --subj-eng-bg:#E6DDF2; --subj-eng-ink:#4A3A7A; --subj-math-bg:#F1BA1E;
  --subj-math-ink:#392E1D; --subj-sci-bg:#DCE3B4; --subj-sci-ink:#3E4A12; --subj-soc-bg:#F0C49A;
  --subj-soc-ink:#5E2E08; --subj-chi-bg:#F2CDB8; --subj-chi-ink:#7A2318; --subj-elec-bg:#EFE1B0;
  --subj-elec-ink:#4E3E06; --subj-other-bg:#F6E3AE; --subj-other-ink:#4A3A1C; --hero-bg:#392E1D;
  --hero-ink:#F1BA1E; --hero-btn:#F1BA1E; --hero-btn-ink:#392E1D;
  --book-ink-dark:#322911;--book-ink-light:#FFFFFF;--book-eng-top:#F2E7C8;--book-eng-bot:#E3C986;--book-math-top:#E4CC8D;--book-math-bot:#D4AE49;--book-sci-top:#D7B352;--book-sci-bot:#B8922B;--book-soc-top:#8C6F21;--book-soc-bot:#70581A;--book-chi-top:#755C1B;--book-chi-bot:#5C4815;--book-elec-top:#624D17;--book-elec-bot:#4B3C12;--book-other-top:#514013;--book-other-bot:#3D300E
}
:root[data-theme="lavender"]{
  /* 海鹽葡萄（lavender，深色） */
  color-scheme:dark;
  --ground:#24112F; --surface:#391B49; --ink:#F7EEF4; --muted:#D3C1DC;
  --line:#5A3A70; --line-soft:#4A2A5E; --chip-line:#6A4A82; --accent:#F4A69A;
  --accent-dark:#F7B9AE; --accent-soft:#5A2F55; --learn-bg:#301840; --module-bg:#3E2252;
  --warn-ink:#F7C08A; --warn-bg:#3E2A22; --tip-ink:#A8E0C2; --tip-bg:#1E2E2A;
  --tip-line:#3E6050; --on-accent:#391B49; --rail:#8E78A3; --fig-sun:#E8A92F;
  --fig-lit:#F3E9C8; --fig-dark:#5A6676; --fig-earth:#4F95CF; --fig-line:#6D7C8D;
  --fig-umbra:#0B0F14; --fig-pen:#4A5562; --fig-text:#D6CED4; --todo:#FF9A90;
  --todo-bg:#4A1E2A; --subj-eng-bg:#999ECF; --subj-eng-ink:#2E1F1A; --subj-math-bg:#EADCA6;
  --subj-math-ink:#4A3410; --subj-sci-bg:#C29CE4; --subj-sci-ink:#5E0E2C; --subj-soc-bg:#F2C4D6;
  --subj-soc-ink:#5E1636; --subj-chi-bg:#F4A69A; --subj-chi-ink:#4A1218; --subj-elec-bg:#E6D7F5;
  --subj-elec-ink:#3E1F55; --subj-other-bg:#4A2A5E; --subj-other-ink:#E6D7EE; --hero-bg:#68467F;
  --hero-ink:#F3E3A6; --hero-btn:#C29CE4; --hero-btn-ink:#7A1236;
  --book-ink-dark:#23182B;--book-ink-light:#FFFFFF;--book-eng-top:#ECE5F0;--book-eng-bot:#D6C6E0;--book-math-top:#D8CAE2;--book-math-bot:#C1AAD0;--book-sci-top:#C4AED3;--book-sci-bot:#AA8CBF;--book-soc-top:#8C62A8;--book-soc-bot:#714C89;--book-chi-top:#765090;--book-chi-bot:#5D3E71;--book-elec-top:#634279;--book-elec-bot:#4D345D;--book-other-top:#523865;--book-other-bot:#3E2A4B
}
:root[data-theme="lime"]{
  /* 賽博萊姆（lime，螢光綠＋炭黑，深色） */
  color-scheme:dark;
  --ground:#161616; --surface:#222222; --ink:#F2F2F2; --muted:#B5B5B5;
  --line:#3A3A3A; --line-soft:#2C2C2C; --chip-line:#4A4A4A; --accent:#BFFF00;
  --accent-dark:#D4FF4D; --accent-soft:#2E3A0A; --learn-bg:#1C1C1C; --module-bg:#2A2A2A;
  --warn-ink:#FFC27A; --warn-bg:#33281A; --tip-ink:#C6F27A; --tip-bg:#1E2A0E;
  --tip-line:#4A6A1A; --on-accent:#222222; --rail:#6E6E6E; --fig-sun:#E8A92F;
  --fig-lit:#F3E9C8; --fig-dark:#5A6676; --fig-earth:#4F95CF; --fig-line:#6D7C8D;
  --fig-umbra:#0B0F14; --fig-pen:#4A5562; --fig-text:#D6CED4; --todo:#FF8A80;
  --todo-bg:#3A1C1C; --subj-eng-bg:#1F2B44; --subj-eng-ink:#9CC4F0; --subj-math-bg:#3A2716;
  --subj-math-ink:#F2BC8A; --subj-sci-bg:#1E3312; --subj-sci-ink:#C6F27A; --subj-soc-bg:#2E1E36;
  --subj-soc-ink:#D8AEE8; --subj-chi-bg:#3A1C20; --subj-chi-ink:#F2A7AD; --subj-elec-bg:#33301A;
  --subj-elec-ink:#E3D27E; --subj-other-bg:#2C2C2C; --subj-other-ink:#D0D0D0; --hero-bg:#BFFF00;
  --hero-ink:#222222; --hero-btn:#222222; --hero-btn-ink:#BFFF00;
  --book-ink-dark:#293211;--book-ink-light:#FFFFFF;--book-eng-top:#DFEEB4;--book-eng-bot:#B8D857;--book-math-top:#BDDB63;--book-math-bot:#9CC02D;--book-sci-top:#9EC42E;--book-sci-bot:#83A326;--book-soc-top:#647C1D;--book-soc-bot:#506217;--book-chi-top:#536618;--book-chi-bot:#415013;--book-elec-top:#455614;--book-elec-bot:#364310;--book-other-top:#3A4811;--book-other-bot:#2C360D
}
:root[data-theme="guava"]{
  /* 雲朵莓果（guava） */
  color-scheme:light;
  --ground:#FFF3F0; --surface:#FFFFFF; --ink:#4A2E2B; --muted:#7A5852;
  --line:#F6D8D1; --line-soft:#FDE9E5; --chip-line:#F0C8C0; --accent:#A8434E;
  --accent-dark:#8A2F3A; --accent-soft:#FDE3DE; --learn-bg:#FFF8F6; --module-bg:#FBE6E1;
  --warn-ink:#8A3A10; --warn-bg:#FBEBDD; --tip-ink:#4A5216; --tip-bg:#F2F0D2;
  --tip-line:#D6D69A; --on-accent:#FFFFFF; --rail:#D8B0A8; --fig-sun:#F0B341;
  --fig-lit:#FFF6DA; --fig-dark:#4A5563; --fig-earth:#3D7FB8; --fig-line:#8897A8;
  --fig-umbra:#2E3742; --fig-pen:#A9B4C1; --fig-text:#3B4552; --todo:#B3261E;
  --todo-bg:#FDE4E0; --subj-eng-bg:#ECEAF8; --subj-eng-ink:#3B4790; --subj-math-bg:#F8ECD7;
  --subj-math-ink:#6B4A08; --subj-sci-bg:#EAE7B4; --subj-sci-ink:#4A5216; --subj-soc-bg:#FDD7D0;
  --subj-soc-ink:#8A2F3A; --subj-chi-bg:#FBE0DC; --subj-chi-ink:#8A2E2A; --subj-elec-bg:#F4F0D0;
  --subj-elec-ink:#5A520E; --subj-other-bg:#FDE9E5; --subj-other-ink:#5A4440; --hero-bg:#FDD7D0;
  --hero-ink:#7E2F33; --hero-btn:#B2BA69; --hero-btn-ink:#262A0A;
  --book-ink-dark:#321611;--book-ink-light:#FFFFFF;--book-eng-top:#F7E3DF;--book-eng-bot:#EFC2B9;--book-math-top:#EFC5BD;--book-math-bot:#E6A396;--book-sci-top:#E8A79B;--book-sci-bot:#DC7D6C;--book-soc-top:#C8472F;--book-soc-bot:#A03825;--book-chi-top:#A83B27;--book-chi-bot:#842F1F;--book-elec-top:#8C3221;--book-elec-bot:#6D271A;--book-other-top:#752A1C;--book-other-bot:#592015
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 68px);background:var(--ground)}
*,*::before,*::after{box-sizing:border-box}
/* fieldset 預設 min-inline-size:min-content，裡面的 textarea（預設 cols 的寬度）會把它撐得比手機畫面寬（/trial/ 曾經寬到 508px）；
   全站歸零，fieldset 跟著外層寬度走；textarea 最寬不超過外層 */
fieldset{min-width:0;min-inline-size:0}
textarea{max-width:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:'IBM Plex Sans','Noto Sans TC',system-ui,sans-serif;font-size:15px;line-height:1.55}
a{color:var(--accent)} a:hover{color:var(--accent-dark)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0}
p{margin:0}

.topbar{background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1280px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:32px}
.brand{font-weight:700;font-size:18px;color:var(--ink);text-decoration:none}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:none;font-weight:600}
main{max-width:1120px;margin:0 auto;padding:32px 24px 64px;display:flex;flex-direction:column;gap:24px}
.course{font-size:13px;font-weight:600;color:var(--muted)}
.book-head h1{font-size:32px;line-height:1.2}
.sub{color:var(--muted)}

/* Terms: blue = has Chinese on hover / tap */
.term{color:var(--accent);font-weight:700;border-bottom:1px dotted var(--accent);cursor:help;border-radius:2px}
.term.open{background:var(--accent-soft)}
b.plain{font-weight:700}
.pop{position:fixed;z-index:50;background:var(--ink);color:var(--surface);font-size:15px;font-weight:500;padding:6px 12px;border-radius:8px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;max-width:260px;font-family:'Noto Sans TC',system-ui,sans-serif}
.pop.show{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.pop{transition:none}}

/* Book page */
.col-head,.lesson-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.col-head{gap:12px;padding:0 4px;font-size:13px;font-weight:700;color:var(--muted)}
.module{display:flex;flex-direction:column;gap:8px}
.module-head{background:var(--module-bg);border-radius:10px;padding:10px 12px 10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.module-head h2{font-size:18px}
.ov-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:22px;background:var(--surface);border:1px solid var(--chip-line);text-decoration:none;font-weight:600;font-size:14px}
.lesson-row{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.learn{background:var(--learn-bg);padding:18px 20px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--line)}
.lesson-no{font-size:13px;color:var(--muted)}
.lesson-name{font-size:17px;font-weight:600}
.lesson-name .term{color:var(--ink);font-weight:600;border-bottom-color:var(--chip-line)}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.tool{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:8px;background:var(--surface);border:1px solid var(--chip-line);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.tool:hover{border-color:var(--accent);color:var(--ink)}
.tool svg{stroke:var(--accent)}
.skills{list-style:none;margin:0;padding:8px 0}
.skills li{display:flex;align-items:center;gap:12px;padding:0 20px;min-height:44px}
.skills .num{width:20px;flex-shrink:0;font-size:14px;color:var(--muted);text-align:right}
.skills a{flex-grow:1;text-decoration:none}
.score{min-width:44px;text-align:center;font-size:13px;border-radius:6px;padding:2px 8px;color:var(--muted);border:1px dashed var(--chip-line)}
.pending{color:var(--muted);font-size:14px;padding:12px 20px}
.todo{border:1.5px dashed var(--todo);background:var(--todo-bg);color:var(--todo);border-radius:8px;padding:10px 14px;font-size:14px;font-family:'Noto Sans TC','IBM Plex Sans',system-ui,sans-serif;line-height:1.5}
.todo b{font-weight:700}
.todo .src{display:block;font-size:12.5px;opacity:.85}
.todo-list{display:flex;flex-direction:column;gap:8px}
.skills li.todo-li,.aside li.todo-li{min-height:0;padding-top:4px;padding-bottom:4px;border-bottom:none}
.todo-li span{color:var(--todo);font-size:13px;font-weight:600;font-family:'Noto Sans TC','IBM Plex Sans',system-ui,sans-serif}

/* Overview tree (縱貫線) */
.ov{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:20px}
.ov-lesson{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px}
.ov-band{background:var(--accent);color:var(--on-accent);border-radius:22px;display:flex;align-items:center;justify-content:center;padding:16px 0;text-decoration:none}
.ov-band > span{writing-mode:vertical-rl;text-orientation:sideways;transform:rotate(180deg);font-weight:700;font-size:14px;letter-spacing:.02em;white-space:nowrap}
.ov-band:hover{color:var(--on-accent);background:var(--accent-dark)}
.ov-secs{display:flex;flex-direction:column;gap:12px}
.ov-sec{display:grid;grid-template-columns:168px minmax(0,1fr);gap:0;align-items:center}
.ov-node{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:8px 12px;border:1.5px solid var(--accent);border-radius:8px;background:var(--accent-soft);color:var(--accent-dark);font-weight:700;font-size:14px;line-height:1.3;text-decoration:none;position:relative}
.ov-node:hover{background:var(--surface);color:var(--accent-dark)}
.ov-node::after{content:"";position:absolute;right:-18px;top:50%;width:18px;border-top:2px solid var(--rail)}
.ov-leaves{list-style:none;margin:0 0 0 18px;padding:2px 0 2px 16px;border-left:2px solid var(--rail);display:flex;flex-direction:column;gap:6px}
.ov-leaves li{position:relative;font-size:14px;line-height:1.45}
.ov-leaves li::before{content:"";position:absolute;left:-16px;top:.72em;width:10px;border-top:2px solid var(--rail)}
.ov-leaves .k{font-weight:700;color:var(--accent)}
.ov.compact{padding:16px 18px}
.ov-title{font-size:13px;font-weight:700;color:var(--muted)}

/* Lesson page */
.lesson-head h1{font-size:30px;line-height:1.2}
.tabbar{position:sticky;top:0;z-index:20;background:var(--ground);display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);margin-top:calc(-1 * env(safe-area-inset-top,0px))}
.tabs{display:flex;gap:4px;overflow-x:auto}
/* 章節捷徑（Ch. 13／第 13 章）：淡底圓角 chip，不用底線藍字 */
a.chap{display:inline-block;padding:0 8px;border-radius:999px;background:var(--learn-bg);color:var(--ink);font-size:.92em;font-weight:500;line-height:1.5;text-decoration:none;white-space:nowrap;border:1px solid transparent}
a.chap:hover,a.chap:focus-visible{border-color:var(--chip-line);color:var(--accent-dark)}
.zh-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-bottom:4px;padding:0 12px 0 14px;border-radius:22px;border:1px solid var(--chip-line);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;font-family:'Noto Sans TC','IBM Plex Sans',system-ui,sans-serif;flex-shrink:0}
.zh-toggle .sw{width:34px;height:20px;border-radius:10px;background:var(--chip-line);position:relative;transition:background .15s}
.zh-toggle .sw::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .15s}
.zh-toggle[aria-pressed="true"]{border-color:var(--accent)}
.zh-toggle[aria-pressed="true"] .sw{background:var(--accent)}
.zh-toggle[aria-pressed="true"] .sw::after{transform:translateX(14px)}
.zh{display:none;font-family:'Noto Sans TC',system-ui,sans-serif;color:var(--muted);font-size:13px;line-height:1.6;font-weight:400;margin-top:3px;padding-left:10px;border-left:2px solid var(--chip-line)}
body.zh-on .zh{display:block}
/* 語言模式（見 accounts/i18n.py）：標題類用 bi 標籤輸出 .bi > .t-en＋.t-zh
   全英文：只有英文；中英兼具：英文為主、中文在下方（同 .zh：較小字、次要顏色、左側細線，附屬於上一行英文）；
   全中文：中文為主、英文在下方小字（此時中文是主體，不加左側細線）。
   全中文的「EN only」由伺服器整頁改成英文輸出（不輸出中文），不靠 CSS。 */
body.lang-zh .bi{display:inline-flex;flex-direction:column;vertical-align:top}
body.lang-zh .bi .zh.t-zh{order:-1;display:inline;color:inherit;font-size:inherit;font-weight:inherit;font-family:inherit;line-height:inherit;margin:0;padding:0;border:0}
body.lang-zh .bi .t-en{display:block;font-size:max(12px,.72em);font-weight:400;color:var(--muted);line-height:1.4;margin-top:1px}
body.lang-zh .bi .t-en .term{font-weight:inherit;color:inherit}
/* 「本課重點一覽」的關鍵字（kw 標籤）：全中文顯示中文、滑過顯示英文；其他模式顯示英文、滑過顯示中文 */
.kw-zh{display:none}
/* 深色的課名條：中文行跟著白字（原本的灰色在深底上看不清楚） */
.ov-band .zh,body.lang-zh .ov-band .bi .t-en{color:inherit;opacity:.85}
.ov-band .zh{border-left-color:currentColor}
body.lang-zh .kw-en{display:none}
body.lang-zh .kw-zh{display:inline}
.pt-title .zh{font-size:14px;margin-top:0}
.subsec h3 .zh{display:none}
body.zh-on .subsec h3 .zh{display:inline;margin-left:8px}
.tab{min-height:48px;padding:0 18px;border-bottom:3px solid transparent;color:var(--muted);font-weight:500;text-decoration:none;display:inline-flex;align-items:center}
.tab[aria-selected="true"]{border-bottom-color:var(--accent);color:var(--ink);font-weight:700}
.study-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.notes{display:flex;flex-direction:column;gap:16px;min-width:0}

details.pt{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
details.pt > summary{list-style:none;display:flex;align-items:center;gap:14px;padding:14px 20px;min-height:60px;cursor:pointer}
details.pt > summary::-webkit-details-marker{display:none}
.pt-no{flex-shrink:0;width:34px;height:34px;border-radius:9px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700}
.pt-title{font-size:18px;font-weight:700;flex-grow:1}
.chev{flex-shrink:0;transition:transform .15s;stroke:var(--muted)}
details.pt[open] .chev{transform:rotate(180deg)}
.pt-body{padding:4px 24px 24px 68px;display:flex;flex-direction:column;gap:22px;border-top:1px solid var(--line-soft)}
.subsec{display:flex;flex-direction:column;gap:12px;padding-top:18px}
.subsec h3{font-size:16px;display:flex;gap:10px;align-items:baseline}
.subsec h3 .letter{color:var(--accent);font-weight:700}
.subsec.with-fig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);column-gap:24px;row-gap:12px;align-items:start}
.subsec.with-fig h3{grid-column:1 / -1}
.subsec.with-fig .flow.a{grid-column:1;grid-row:2}
.subsec.with-fig .flow.b{grid-column:1;grid-row:3}
.subsec.with-fig .prac-row{grid-row:4}
.subsec.with-fig figure{grid-column:2;grid-row:2 / span 2}
.flow{display:flex;flex-direction:column;gap:12px;min-width:0}
ol.pts{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
ol.pts li::marker{color:var(--muted);font-weight:600}
.note{font-size:13.5px;color:var(--muted);display:flex;gap:8px}
.note .lbl{flex-shrink:0;font-weight:700;color:var(--muted);border:1px solid var(--chip-line);border-radius:4px;padding:0 5px;font-size:12px;height:20px;line-height:18px;margin-top:1px}
.qa{background:var(--warn-bg);border-radius:10px;padding:12px 16px}
.qa .lbl{font-size:13px;font-weight:700;color:var(--warn-ink);margin-bottom:4px}
.qa .q{font-weight:600}
.qa details{margin-top:6px}
.qa details summary{cursor:pointer;color:var(--warn-ink);font-weight:600;font-size:14px;min-height:32px;display:inline-flex;align-items:center}
.qa details .a{margin-top:4px}
.para{display:block}
ul.bul{margin:4px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
ul.bul li::marker{color:var(--muted)}
.zh ul.bul{margin-top:2px}
figure{margin:0;background:var(--learn-bg);border-radius:10px;padding:12px}
figure svg,figure img{width:100%;height:auto;display:block}
figure.wide svg,figure.wide img{margin:0 auto}
figure.wide .f-txt{font-size:11px}
figcaption{font-size:13px;color:var(--muted);margin-top:6px}
figcaption .credit{display:block;font-size:11px;margin-top:2px}
figcaption .credit a{color:inherit}
.cmp{min-width:0}
.cmp .ttl{font-size:14px;font-weight:700;margin-bottom:8px}
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.cmp table{border-collapse:collapse;width:100%;min-width:480px;font-size:14px}
.cmp th,.cmp td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.cmp thead th{background:var(--learn-bg);font-weight:700}
.cmp tbody th{font-weight:600}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp .zh{font-size:13px;margin-top:1px}
.cmp .ttl .zh{font-size:13px;font-weight:400}
.pt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;border-top:1px dashed var(--line);padding-top:16px}
.prac-row{display:flex;justify-content:flex-end;grid-column:1 / -1}
.prac{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 10px 0 16px;border-radius:20px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:700;font-size:14px}
.prac:hover{background:var(--accent-dark);color:var(--on-accent)}
.prac svg{stroke:currentColor}
.skills li.grp,.aside li.grp{min-height:0;padding-top:12px;padding-bottom:2px;font-size:12.5px;font-weight:700;color:var(--muted);text-transform:none;border-bottom:none}
.skills li.grp:first-child,.aside li.grp:first-child{padding-top:4px}
li.grp .term{color:var(--muted);font-weight:700;border-bottom-color:var(--chip-line)}
.prac-c{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.prac-c .lbl{font-size:13px;font-weight:700;color:var(--muted);margin-right:4px}
.prac-c a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:22px;border:1.5px solid var(--accent);color:var(--accent-dark);text-decoration:none;font-weight:700;font-size:14px}
.prac-c a:hover{background:var(--accent);color:var(--on-accent)}
.prac-m{display:none;flex-direction:column;gap:8px;width:100%}
.prac-m a{display:flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:22px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:600;font-size:14px;line-height:1.35}
.next{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px 0 16px;border:none;background:none;color:var(--accent);font-weight:700;font-size:14px;text-decoration:none;margin-left:auto}
.next:hover{color:var(--accent-dark)}
.next svg{stroke:currentColor}
details.glance{display:block}
details.glance > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:28px}
details.glance > summary::-webkit-details-marker{display:none}
details.glance[open] > summary{margin-bottom:12px}
details.glance[open] .chev{transform:rotate(180deg)}

.aside{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px;position:sticky;top:72px}
.aside h2{font-size:13px;font-weight:700;color:var(--muted)}
.aside ol{list-style:none;margin:0;padding:0}
.aside li{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid var(--line-soft)}
.aside li:last-child{border-bottom:none}
.aside li a{flex-grow:1;text-decoration:none;font-size:14px}
.aside .s{font-size:13px;font-weight:700;color:var(--muted)}

.vocab{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.vocab li{padding:14px 22px;border-bottom:1px solid var(--line-soft)}
.vocab li:last-child{border-bottom:none}
.vocab .tw{font-size:17px}
.vocab .ex{color:var(--muted)}
.hint{font-size:13px;color:var(--muted)}

/* Figures */
.f-sun{fill:var(--fig-sun)} .f-lit{fill:var(--fig-lit)} .f-dark{fill:var(--fig-dark)}
.f-earth{fill:var(--fig-earth)} .f-line{stroke:var(--fig-line);fill:none}
.f-umbra{fill:var(--fig-umbra)} .f-pen{fill:var(--fig-pen);opacity:.55}
.f-txt{fill:var(--fig-text);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:15px}
.f-txt.b{font-weight:700}
.f-axis{stroke:var(--fig-text);stroke-width:1.6}
.f-ray{stroke:var(--fig-sun);stroke-width:2;fill:none}

@media (max-width:900px){
  .study-grid{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
  .subsec.with-fig{display:flex;flex-direction:column}
}
@media (max-width:720px){
  .lesson-row{grid-template-columns:minmax(0,1fr)}
  .learn{border-right:none;border-bottom:1px solid var(--line)}
  .col-head{display:none}
  .book-head h1{font-size:26px}
  main{padding:20px 16px 32px}
  .pt-body{padding:4px 16px 20px}
  details.pt > summary{padding:12px 16px}
  .ov{padding:14px}
  .ov-lesson{grid-template-columns:minmax(0,1fr);gap:10px}
  .ov-band{padding:10px 16px;justify-content:flex-start}
  .ov-band > span{writing-mode:horizontal-tb;transform:none}
  .ov-sec{grid-template-columns:minmax(0,1fr);gap:8px}
  .ov-node{justify-content:flex-start;text-align:left;min-height:44px}
  .ov-node::after{display:none}
  .ov-leaves{margin-left:14px}
  .lesson-head h1{font-size:26px}
  .prac-c{display:none}
  .prac-m{display:flex}
  .next{margin-left:0;padding-left:0}
  .zh-toggle{padding:0 10px}
}

/* ===== 以下是 v6 原型沒有、網站另外需要的樣式（沿用 v6 的顏色變數） ===== */
.topbar-inner .zh-toggle{margin-left:auto;margin-bottom:0}
.zh-toggle.htmx-request{opacity:.6}
.site-foot{margin:0;padding:0;background:var(--hero-bg);color:var(--hero-ink);font-size:12.5px;font-family:'Noto Sans TC','IBM Plex Sans',system-ui,sans-serif;line-height:1.6}
.zh-inline{font-family:'Noto Sans TC',system-ui,sans-serif;color:var(--muted);font-weight:400}

/* 練習功能（階段 3）尚未開放：停用狀態 */
.prac.is-disabled,.prac.is-disabled:hover{background:var(--chip-line);color:var(--muted);cursor:not-allowed}
.skills .prac-off{flex-grow:1;color:var(--ink)}
.aside li a .n{color:var(--muted)}

/* 首頁 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12.5px;font-weight:600;padding:2px 10px;border-radius:12px;background:var(--accent-soft);color:var(--accent-dark)}
.card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.card li a{display:inline-flex;align-items:center;min-height:36px;font-weight:600;text-decoration:none}
.empty{color:var(--muted)}
.grade-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;background:var(--line-soft);padding:4px;border-radius:12px;align-self:flex-start;max-width:100%}
.grade-tabs a{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;min-height:40px;padding:4px 14px;border-radius:9px;text-decoration:none;font-weight:600;color:var(--muted)}
.grade-tabs a:hover{color:var(--ink)}
.grade-tabs a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .08)}
.school-menu{position:relative;align-self:flex-start;max-width:100%;background:var(--line-soft);padding:4px;border-radius:12px}
.school-menu summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 14px;border-radius:9px;background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer;box-shadow:0 1px 2px rgb(0 0 0 / .08)}
.school-menu summary::-webkit-details-marker{display:none}
.school-menu summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px)}
.school-menu[open] summary::after{transform:rotate(-135deg) translate(-2px,0)}
.school-label{color:var(--muted);font-size:13px}
.school-menu ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.school-menu li a{display:flex;align-items:center;min-height:40px;padding:4px 14px;border-radius:9px;text-decoration:none;font-weight:600;color:var(--muted)}
.school-menu li a:hover{color:var(--ink)}
.school-menu li a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .08)}
.subjects{display:flex;flex-direction:column;gap:28px}
.subject{display:flex;flex-direction:column;gap:12px}
.subject-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.subject-name{font-size:18px}
.subject-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.my-level{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.level-tabs{display:flex;gap:6px;overflow-x:auto;max-width:100%;scrollbar-width:none;padding:2px}
.level-tabs::-webkit-scrollbar{display:none}
.level-tabs button,.level-tabs a{flex-shrink:0;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--chip-line);background:var(--surface);color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.level-tabs button:hover,.level-tabs a:hover{color:var(--ink);border-color:var(--accent)}
.level-tabs button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.level-tabs .lv-count{font-size:12px;font-weight:700;min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:9px;background:var(--line-soft);color:var(--muted);text-align:center}
.level-tabs button[aria-pressed="true"] .lv-count{background:rgb(255 255 255 / .25);color:var(--on-accent)}
.subject.is-filtered .book-levels{display:none}
.book-tile[hidden],.level-empty[hidden]{display:none}
.level-empty{grid-column:1/-1;padding:14px 16px;border:1px dashed var(--chip-line);border-radius:10px}
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.book-tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;text-decoration:none;color:var(--ink)}
.book-tile:hover{border-color:var(--accent);color:var(--ink)}
.book-title{font-weight:600;line-height:1.35}
.book-tile.mine{background:var(--accent-soft);border-color:transparent}
.book-levels{display:flex;flex-wrap:wrap;gap:4px}
@media (max-width:520px){.subject-head{flex-direction:column;align-items:stretch}.books{grid-template-columns:minmax(0,1fr)}.grade-tabs{align-self:stretch}.grade-tabs a{padding:4px 6px;font-size:14px}}
/* 課本頁（/books/）科目格：科目色方塊＋科名＋「可讀 N 本」，書本兩欄卡片（≥760px 三欄），登入者看已讀 % */
.bk-head .subject-title{min-width:0;width:100%}
.bk-head .subject-name{min-width:0;overflow-wrap:anywhere}
.bk-head .my-level a{display:inline-flex;align-items:center;min-height:44px}
.bk-head .level-tabs button{min-height:44px}
/* 科目色變數：.subj-*（views._subject_class）設定 --sc（科目色，字／邊／實心底）與 --sc-bg（淡底），課本卡、科目圖示、術語樹共用 */
.subj-other{--sc:var(--subj-other-ink);--sc-bg:var(--subj-other-bg)}
.subj-ENG{--sc:var(--subj-eng-ink);--sc-bg:var(--subj-eng-bg)}
.subj-MATH{--sc:var(--subj-math-ink);--sc-bg:var(--subj-math-bg)}
.subj-SCI{--sc:var(--subj-sci-ink);--sc-bg:var(--subj-sci-bg)}
.subj-SOC{--sc:var(--subj-soc-ink);--sc-bg:var(--subj-soc-bg)}
.subj-CHI{--sc:var(--subj-chi-ink);--sc-bg:var(--subj-chi-bg)}
.subj-ELEC{--sc:var(--subj-elec-ink);--sc-bg:var(--subj-elec-bg)}
.bk-subj{flex:none;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--sc);color:var(--sc-bg)}
.bk-count{margin:0 0 0 auto;flex:none;font-size:13px;color:var(--muted);white-space:nowrap}
.books.bk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:760px){.books.bk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bk-card{min-height:120px;min-width:0;padding:12px 14px;justify-content:flex-start}
.bk-card .book-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.bk-card .book-levels .chip{font-size:12px;padding:1px 8px}
.bk-foot{margin-top:auto;display:flex;align-items:center;gap:8px;min-width:0}
.bk-bar{flex:1;min-width:0;height:6px;border-radius:3px;overflow:hidden;background:var(--line-soft)}
.bk-bar span{display:block;height:100%;border-radius:3px;background:var(--sc,var(--accent))}
.bk-pct{flex:none;font-size:12.5px;font-weight:600;color:var(--muted)}
.book-tile.bk-card.planned{opacity:1;background:var(--ground);border-color:var(--chip-line)}
.book-tile.bk-card.planned .book-title{color:var(--muted)}
.bk-more{margin-top:2px}
.bk-more summary{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600;color:var(--accent-dark);cursor:pointer;list-style:none}
.bk-more summary::-webkit-details-marker{display:none}
.bk-more[open] summary{margin-bottom:8px}
.notice{background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:12px 16px}
.section-title{font-size:20px}

/* 技能頁 */
.skill-body{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px 24px 24px}
@media (max-width:720px){.skill-body{padding:4px 16px 20px}.ft{padding:4px 16px 28px}}
.module-head .term,.ov-band .term{color:inherit;border-bottom-color:var(--chip-line)}
.module-head h2 .zh,.lesson-name .zh,.lesson-head h1 .zh{font-size:14px}
.brand{white-space:nowrap;flex-shrink:0}
.back{min-width:0}
.back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:720px){.topbar-inner{padding:0 16px;gap:16px}}

/* ---------- 階段 2：帳號、設定、家長／家教頁（沿用 v6 的配色與字型） ---------- */
.acct{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:600;flex-wrap:wrap}
.acct a{text-decoration:none}
.acct form{margin:0}
.topbar-inner .acct{margin-left:auto}
.topbar-inner .zh-toggle + .acct,.topbar-inner .zh-locked + .acct{margin-left:0}
.linkish{background:none;border:0;padding:0;color:var(--accent);font-weight:600;font-size:14px}
.role-switch{display:inline-flex;gap:4px}
/* 設定頁「外觀」：每套配色一張卡片（三色色票＋名稱＋選中的勾）。手機 2×2、桌機一列 4 個。色票色值由 view 給，不受目前配色影響 */
.theme-options,.panel form.theme-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
/* 配色卡：上半是那套配色的迷你畫面（顏色由按鈕 inline 的 --pv-* 給），下半名稱＋圓形勾 */
.theme-opt{position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:44px;padding:0;overflow:hidden;border:1px solid var(--chip-line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.theme-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.theme-opt[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.theme-opt .pv{display:flex;flex-direction:column;gap:7px;height:78px;padding:7px 9px;background:var(--pv-g);box-sizing:border-box}
.theme-opt .pv-nav{display:flex;align-items:center;gap:4px;height:12px;padding:0 5px;border-radius:3px;background:var(--pv-sf)}
.theme-opt .pv-nav i{width:12px;height:3px;border-radius:2px;background:var(--pv-ac)}
.theme-opt .pv-card{display:flex;flex-direction:column;gap:5px;flex:1;padding:7px 8px;border-radius:5px;background:var(--pv-sf)}
.theme-opt .pv-l1{width:72%;height:5px;border-radius:3px;background:var(--pv-ink)}
.theme-opt .pv-l2{width:52%;height:3px;border-radius:2px;background:var(--pv-mu)}
.theme-opt .pv-btn{width:24px;height:8px;margin-top:auto;border-radius:4px;background:var(--pv-ac)}
.theme-opt .pv-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:40px;padding:6px 10px}
.theme-opt .pv-name{min-width:0;overflow-wrap:anywhere}
.theme-opt .theme-check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border:2px solid var(--chip-line);border-radius:50%;box-sizing:border-box;color:transparent;font-size:12px;line-height:1}
.theme-opt[aria-pressed="true"] .theme-check{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
@media (max-width:720px){.theme-options,.panel form.theme-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lang-switch{display:inline-flex;gap:0}
.lang-switch .chip-btn{border-radius:0;padding:4px 10px;min-width:40px}
.lang-switch .chip-btn:first-child{border-radius:16px 0 0 16px}
.lang-switch .chip-btn:last-child{border-radius:0 16px 16px 0;margin-left:-1px}
.chip-btn{border:1px solid var(--chip-line);background:var(--surface);color:var(--ink);border-radius:16px;padding:4px 12px;font-size:13px;font-weight:600}
.chip-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.zh-locked{margin-left:auto;font-size:13px;color:var(--muted);max-width:280px}
.messages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.msg{border-radius:10px;padding:12px 16px;background:var(--tip-bg);color:var(--tip-ink);border:1px solid var(--tip-line)}
.msg.error{background:var(--todo-bg);color:var(--todo);border-color:var(--todo)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.panel.narrow{max-width:480px;width:100%;margin:0 auto}
.panel h1{font-size:26px}
.panel h2{font-size:19px}
.panel h3{font-size:15px;margin-top:6px}
.panel form{display:flex;flex-direction:column;gap:12px;margin:0}
.panel form.inline,.panel form.row-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
.panel form.inline-form{flex-direction:row;align-items:flex-end;flex-wrap:wrap;gap:10px}
.field{display:flex;flex-direction:column;gap:4px;border:0;margin:0;padding:0}
.field label,.field legend{font-weight:600;font-size:14px}
.field input,.field select,.field textarea,.panel select,.redeem input{font:inherit;padding:10px 12px;border:1px solid var(--chip-line);border-radius:8px;background:var(--surface);color:var(--ink);min-height:44px}
.field textarea{min-height:100px}
.field .opt,.help{color:var(--muted);font-size:13px;font-weight:400}
.radio,.check{display:flex;align-items:flex-start;gap:8px;font-weight:400 !important;font-size:14px;min-height:32px}
.radio input,.check input{min-height:auto;margin-top:4px}
.err,.form-errors{color:var(--todo);font-size:13px}
.form-errors{background:var(--todo-bg);border-radius:8px;padding:10px 12px}
.has-error input{border-color:var(--todo)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:22px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none;font-size:15px}
.btn:hover{color:var(--on-accent);background:var(--accent-dark)}
.btn-secondary{background:var(--surface);color:var(--accent)}
.btn-secondary:hover{background:var(--accent-soft);color:var(--accent-dark)}
.btn-danger{background:var(--todo);border-color:var(--todo)}
.btn-small{min-height:34px;padding:0 12px;font-size:13px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.links{font-size:14px;color:var(--muted)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
table.simple{border-collapse:collapse;width:100%;font-size:14px}
table.simple th,table.simple td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.simple th{color:var(--muted);font-weight:600;font-size:13px}
.badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600;background:var(--line-soft);color:var(--muted)}
.badge.ok{background:var(--tip-bg);color:var(--tip-ink)}
.code-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.code-box .code{font-family:ui-monospace,Menlo,monospace;font-size:26px;font-weight:700;letter-spacing:4px;color:var(--accent)}
.redeem input[name="code"]{font-family:ui-monospace,Menlo,monospace;letter-spacing:1px}
.outline-lessons{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.outline-point{margin:4px 0 0 4px;color:var(--muted);font-size:14px}
.outline-point ul{margin:2px 0 0;padding-left:18px;color:var(--ink)}
.foot-links{display:block;margin-top:6px}
@media (max-width:640px){
  .topbar-inner{gap:12px;flex-wrap:wrap;height:auto;min-height:64px;padding-top:8px;padding-bottom:8px}
  .panel{padding:16px}
  /* 手機：第一列品牌、返回；語言開關（EN only／Chinese）和設定／登出放在下一列，兩者不會擠在一起 */
  .topbar-inner .zh-toggle{order:5;margin-left:0;min-height:40px}
  .topbar-inner .acct{order:6;margin-left:auto}
  .topbar-inner .zh-toggle + .acct{margin-left:auto}
}

/* 只有筆記的書（小說）：課本頁一章一列、課頁側欄是本頁目錄＋上下章 */
.chapter-row{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px 12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chapter-name{font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;min-width:0}
.chapter-name:hover{color:var(--accent)}
.chapter-name .term{color:inherit;font-weight:inherit;border-bottom-color:var(--chip-line)}
.chapter-row .tools{flex-wrap:nowrap}
.chapter-nav{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.chapter-nav a{display:flex;flex-direction:column;gap:2px;text-decoration:none;font-weight:600;font-size:14px}
.chapter-nav small{font-size:12px;font-weight:500;color:var(--muted)}
.prose-blocks{display:flex;flex-direction:column;gap:12px}
.novel-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.novel-main{display:flex;flex-direction:column;gap:24px;min-width:0}
.guide{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 24px;display:flex;flex-direction:column;gap:18px}
.guide h2{font-size:20px}
.guide-sec{display:flex;flex-direction:column;gap:8px}
.guide-sec h3{font-size:15px;color:var(--accent-dark)}
.whole-book h2 .bi,.whole-book h2{line-height:1.4}
@media (max-width:860px){.novel-grid{grid-template-columns:minmax(0,1fr)}.whole-book{position:static}}
@media (max-width:720px){.guide{padding:16px}}
.guide-more{border-top:1px solid var(--line-soft);padding-top:10px}
.guide-more summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;min-height:36px}
.guide-more summary::-webkit-details-marker{display:none}
.guide-more summary .chev{stroke:var(--muted);transition:transform .15s}
.guide-more[open] summary .chev{transform:rotate(180deg)}
.guide-more[open] summary{margin-bottom:8px}

/* 書本頁分頁（只有筆記的書） */
.book-tabs{margin:8px 0 20px}
.book-tabs .tab{white-space:nowrap;flex-shrink:0}
.read-upto{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.read-upto label{font-weight:600}
.read-upto select{min-height:40px;max-width:100%;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.by-chapter .part-h{font-size:18px;margin:24px 0 8px}
.by-chapter .by-ch{margin-bottom:8px}
.by-chapter .by-ch .pt-title{font-weight:600}
.whole-book-tab{display:grid;gap:8px}

/* 單字卡 */
.vocab-view{margin-bottom:12px}
.vocab-answer{margin:12px 0}
.vocab-answer p{margin:4px 0}
.vocab-answer .example{color:var(--muted)}
.flash .deck{display:grid}
.flash .card[hidden]{display:none}
.flash .card{box-sizing:border-box;min-width:0;white-space:normal;overflow-wrap:anywhere;min-height:220px;width:100%;padding:28px 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center}
.flash .card .face{width:100%}
.flash .card .front{font-size:30px;font-weight:700}
.flash .card .back{display:none;flex-direction:column;gap:12px}
.flash .card .back .mean{font-family:'Noto Sans TC',system-ui,sans-serif;font-size:24px;font-weight:700}
.flash .card .back .ex{color:var(--muted);font-size:16px;white-space:normal}
.flash .card.flipped .front{display:none}
.flash .card.flipped .back{display:flex}
.flash .card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.flash-ctrl{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.flash-count{min-width:64px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}

/* 數學式子（KaTeX）：表格內的式子不撐寬頁面；獨立一行的長式子在自己的框內左右捲動 */
.cmp-scroll{position:relative}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:2px 0}

/* 書本頁：沒有方案時，試閱單元後面的「訂閱解鎖」提示 */
.paywall{margin:20px 0;padding:24px 20px;border:1px dashed var(--accent);border-radius:12px;background:var(--surface);text-align:center}
.paywall-icon{color:var(--accent)}
.paywall h2{margin:8px 0 6px;font-size:20px}
.paywall p{margin:6px 0;color:var(--muted)}
.paywall-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px!important}

/* 例題（階梯式解析）：觀念提示 → 關鍵算式 → 完整詳解，前一層打開才出現下一層 */
.ex{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:12px 16px;background:var(--surface)}
.ex .lbl{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:4px}
.ex .q{font-weight:600}
.ex-steps{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ex .step{border-radius:8px;background:var(--accent-soft);padding:4px 12px}
.ex .step[data-locked]{display:none}
.ex .step summary{cursor:pointer;font-weight:600;font-size:14px;min-height:36px;display:flex;align-items:center;gap:6px;color:var(--accent)}
.ex .step .a{padding:2px 0 8px}
.ex-all{margin-top:8px;background:none;border:0;padding:4px 0;color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer}

/* 首頁「我的課本」：最近 3 本以外的收起來 */
.more-books{margin-top:12px}
.more-books summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:15px;min-height:44px;display:flex;align-items:center}
.more-books .books{margin-top:8px}

/* 方案頁 */
.plan-pick{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 16px}
.plan-pick .field{min-width:140px}
.plan-books ul{margin:6px 0 0;padding-left:20px}
.plan-books li{margin:4px 0}
.plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0}
.plan-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 16px;display:flex;flex-direction:column;gap:8px}
.plan-card.best{border:2px solid var(--accent)}
.plan-card h3{margin:0;font-size:17px}
.plan-price{font-size:26px;font-weight:700;color:var(--ink)}
.plan-card .btn{margin-top:auto}
.plan-badge{position:absolute;top:-11px;right:12px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;padding:2px 10px;border-radius:10px}
.btn-disabled{background:var(--line-soft);border-color:var(--line);color:var(--muted);cursor:default}
.btn-disabled:hover{background:var(--line-soft);color:var(--muted)}
.plan-redeem{margin:16px 0}
/* 方案快到期 */
.expiry{margin:12px 0}
.expiry .btn{margin-top:8px}

/* 主選單：電腦在上方，手機固定在底部 */
.site-tabs{display:flex;gap:4px;margin-left:16px;margin-right:auto}
.site-tabs a{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:600;font-size:15px}
.site-tabs a:hover{color:var(--accent);background:var(--accent-soft)}
.site-tabs a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.site-tabs svg{flex:none}
/* 管理員選單：圓點用警示色（--warn），和家長／家教切換鍵的藍色（--accent）區分 */
.admin-menu{position:relative}
.admin-menu summary{list-style:none;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;color:var(--muted);font-weight:600;font-size:15px;cursor:pointer}
.admin-menu summary::-webkit-details-marker{display:none}
.admin-menu summary:hover,.admin-menu[open] summary{color:var(--accent);background:var(--accent-soft)}
.admin-dot{width:8px;height:8px;border-radius:50%;background:var(--warn-ink);flex:none}
.admin-pop{position:absolute;top:100%;left:0;z-index:60;min-width:160px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
/* 審題進度（卡片式，手機不用橫向捲動） */
.rv-totals strong{color:var(--ink)}
.rv-note{font-size:12px;color:var(--muted);margin:4px 0 0}
.rv-stale{border-color:var(--todo);background:var(--todo-bg)}
.rv-alert{color:var(--todo);font-weight:600;font-size:14px}
.rv-steps{margin:4px 0 0;display:flex;flex-direction:column;gap:8px}
.rv-step{display:grid;grid-template-columns:104px 1fr;gap:4px 10px;align-items:start}
.rv-step dt{font-size:13px;font-weight:600;color:var(--muted)}
.rv-step dd{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.rv-lesson{margin-top:20px}
.rv-lesson-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.rv-lesson-head h2{font-size:17px;margin:0}
.rv-lesson-head form,.rv-actions form{margin:0}
.rv-actions{display:flex;gap:8px;flex-wrap:wrap}
.rv-export{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.rv-export .rv-note{margin:0}
.rv-subject h2{font-size:18px;margin:20px 0 8px}
.rv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rv-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.rv-title{font-weight:700;font-size:16px}
.rv-en{font-weight:400;font-size:13px;color:var(--muted)}
.rv-meta,.rv-pct{font-size:13px;color:var(--muted)}
.rv-warn{background:var(--warn-bg);color:var(--warn-ink)}
.rv-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0}
.rv-counts div{background:var(--line-soft);border-radius:8px;padding:4px 8px}
.rv-counts dt{font-size:12px;color:var(--muted)}
.rv-counts dd{margin:0;font-weight:700}
.rv-bar{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.rv-bar span{display:block;height:100%;background:var(--tip-ink)}
@media (max-width:720px){
  .site-tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0;gap:0;justify-content:space-around;
    background:var(--surface);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .site-tabs a{flex:1;flex-direction:column;gap:2px;padding:6px 2px;font-size:11px;border-radius:6px;min-height:48px;justify-content:center}
  .site-tabs a[aria-current="page"]{background:none}
  .admin-menu{flex:1;padding:0 2px}  /* 左右各 2px 和旁邊的分頁（padding:6px 2px）一樣，五格或六格才會真的平分 */
  .admin-menu summary{flex-direction:column;gap:2px;font-size:11px;min-height:48px;justify-content:center;padding:6px 0}
  .admin-pop{top:auto;bottom:100%;left:auto;right:0}
  body[data-tabs]{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* 有頁尾的頁：底部選單的留白改放進頁尾裡，頁尾底色一路延伸到底部選單上緣（不露出 --ground 的灰）；
     內容比螢幕短時 body 撐滿一個畫面、頁尾吃掉剩下的高度（main 改 width:100%，因為 flex 欄裡 margin:auto 會縮成內容寬） */
  body[data-tabs]:has(> .ft-slim, > .site-foot){padding-bottom:0;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
  body[data-tabs]:has(> .ft-slim, > .site-foot) > main{width:100%;box-sizing:border-box}
  body[data-tabs] > .ft-slim,body[data-tabs] > .site-foot{flex-grow:1;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .top-login{display:none}
}
/* 首頁 */
.hello h1{font-size:28px}
.continue{margin:16px 0}
.continue .lbl{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.continue-card{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;background:var(--accent);color:var(--on-accent);border-radius:12px;padding:16px 18px;text-decoration:none}
.continue-card:hover{background:var(--accent-dark);color:var(--on-accent)}
.continue-book{font-size:13px;opacity:.85}
.continue-lesson{font-size:17px;font-weight:700;grid-column:1}
.continue-lesson .zh{color:inherit;opacity:.85}
.continue-go{grid-column:2;grid-row:1 / span 2;font-size:22px}
/* 未登入訪客的首頁（catalog/landing.html）。手機單欄；電腦版只有這一頁放寬到 1080px、字放大。其他頁面不受影響 */
.lp{max-width:1080px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:48px;font-size:17px;line-height:1.65}
.lp h1{font-size:30px;line-height:1.25;letter-spacing:-.01em}
.lp h2{font-size:26px;line-height:1.3}
.lp .btn{min-height:52px;padding:0 26px;border-radius:26px;font-size:17px}
.lp-hero{display:grid;gap:28px;align-items:center;padding-top:8px}
.lp-hero-text{display:flex;flex-direction:column;gap:16px}
.lp-kicker{font-weight:600;color:var(--accent-dark);font-size:16px}
.lp-sub{font-size:18px;color:var(--muted)}
.lp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.lp-preview{position:relative;display:flex;flex-direction:column;gap:12px;padding:0 0 18px;user-select:none}
.lp-pv-lesson{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgb(23 33 43 / .08)}
.lp-pv-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lp .chip{font-size:16px}
.lp-pv-tag{font-size:16px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.lp-pv-lesson h3{font-size:20px;line-height:1.3}
.lp-pv-en{font-size:17px}
.lp-pv-zh{color:var(--muted);border-left:3px solid var(--line);padding-left:10px;font-size:16px}
.lp-pv-q{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;background:var(--learn-bg);font-size:16px}
.lp-pv-opt{font-style:normal;padding:8px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--chip-line)}
.lp-pv-opt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark);font-weight:600}
.lp-pv-parent{align-self:flex-end;width:min(88%,340px);display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:var(--tip-bg);border:1px solid var(--tip-line);color:var(--tip-ink);font-size:16px;box-shadow:0 8px 24px rgb(23 33 43 / .08)}
.lp-pv-parent .lp-pv-tag{color:var(--tip-ink)}
.lp-doors{display:grid;gap:14px}
.lp-door{display:flex;flex-direction:column;gap:6px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:18px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.lp-door:hover,.lp-door:focus-visible{border-color:var(--accent);color:var(--ink);transform:translateY(-2px)}
.lp-icon{color:var(--accent);flex:none}
.lp-door-title{font-size:24px;font-weight:700;margin-top:6px}
.lp-door-sub{color:var(--muted);font-size:17px}
.lp-door-meta{margin-top:6px;font-size:16px;font-weight:600;color:var(--accent-dark)}
.lp-how,.lp-plans,.lp-faq{display:flex;flex-direction:column;gap:18px}
.lp-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lp-steps li{position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.lp-steps p{font-size:18px;font-weight:600}
.lp-step-no{position:absolute;top:10px;right:14px;font-size:16px;font-weight:700;color:var(--muted)}
.lp-more{font-size:17px;font-weight:600}
.lp-plans{padding:28px;background:var(--accent-soft);border-radius:20px}
.lp-plans-line{font-size:22px;font-weight:700;color:var(--accent-dark)}
.lp-plans .btn-secondary{background:var(--surface)}
.lp-cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:8px 0}
.lp-cta-line{font-size:22px;font-weight:700}
.lp-faq-list{margin:0;display:grid;gap:14px}
.lp-faq-list>div{padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.lp-faq-list dt{font-size:18px;font-weight:700;margin-bottom:6px}
.lp-faq-list dd{margin:0;color:var(--muted);font-size:17px}
.foot-help{margin-top:6px}
@media (min-width:900px){
  .lp{font-size:18px;gap:72px}
  .lp h1{font-size:46px}
  .lp h2{font-size:34px}
  .lp-hero{grid-template-columns:1.1fr 1fr;gap:56px}
  .lp-sub{font-size:20px}
  .lp-kicker{font-size:17px}
  .lp-doors{grid-template-columns:repeat(3,1fr);gap:20px}
  .lp-door{padding:30px}
  .lp-steps{grid-template-columns:repeat(3,1fr);gap:20px}
  .lp-steps li{flex-direction:column;align-items:flex-start;padding:28px 24px;gap:14px}
  .lp-plans{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:36px 40px}
  .lp-plans h2{flex-basis:100%}
  .lp-plans-line{font-size:26px}
  .lp-faq-list{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (prefers-reduced-motion: reduce){.lp-door{transition:none}.lp-door:hover{transform:none}}
/* 學生首頁科目方塊的科目色（_sh_book.html） */
.sh-subj.subj-ENG{background:var(--subj-eng-bg);color:var(--subj-eng-ink)}
.sh-subj.subj-MATH{background:var(--subj-math-bg);color:var(--subj-math-ink)}
.sh-subj.subj-SCI{background:var(--subj-sci-bg);color:var(--subj-sci-ink)}
.sh-subj.subj-SOC{background:var(--subj-soc-bg);color:var(--subj-soc-ink)}
.sh-subj.subj-CHI{background:var(--subj-chi-bg);color:var(--subj-chi-ink)}
.sh-subj.subj-ELEC{background:var(--subj-elec-bg);color:var(--subj-elec-ink)}
/* 網站根網址 / 的 Superb 大主頁（catalog/main_home.html）：「專區」版型。手機一欄；電腦（≥ 1000px）第一屏兩欄、專區卡三張一排。
   專區色沿用科目 token：學校＝--subj-eng-*、考試＝--subj-math-*、單字＝--subj-sci-*（--zc 線與字、--zbg 淡底），不新增顏色 */
.z-school{--zc:var(--subj-eng-ink);--zbg:var(--subj-eng-bg)}
.z-exam{--zc:var(--subj-math-ink);--zbg:var(--subj-math-bg)}
.z-words{--zc:var(--subj-sci-ink);--zbg:var(--subj-sci-bg)}
.mh-kicker{align-self:flex-start;margin:0;padding:3px 12px;border-radius:14px;background:var(--accent-soft);color:var(--accent-dark);font-size:14px;font-weight:700}
.mh-hero{display:grid;gap:28px;align-items:start;padding-top:8px}
.mh-hero-text{display:flex;flex-direction:column;gap:16px;min-width:0}
.mh-hero h1 em{font-style:normal;color:var(--accent)}
:root[data-theme="mustard"] .mh-hero h1 em{color:var(--accent-dark)}  /* 芥末黃的 --accent 對底色只有 4.26:1 */
.mh-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px}
.mh-actions .btn{width:100%;min-height:48px;font-size:17px;border-radius:24px}
.mh-stats{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px}
.mh-stats li{display:flex;flex-direction:column;gap:2px}
.mh-stats b{font-size:30px;line-height:1.15;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.mh-stats span{font-size:14px;color:var(--muted)}
.mh-where{display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 8%,transparent);min-width:0}
.mh-where h2{font-size:20px}
.mh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mh-list li+li{border-top:1px solid var(--line-soft)}
.mh-row{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 4px;color:var(--ink);text-decoration:none;border-radius:12px}
.mh-row:hover,.mh-row:focus-visible{background:var(--accent-soft);color:var(--ink)}
.mh-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--zbg);color:var(--zc)}
.mh-row-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.mh-row-text b{font-size:17px}
.mh-row-text span{color:var(--muted);font-size:15px}
.mh-chev{flex:none;font-size:26px;color:var(--muted);line-height:1}
.mh-head{display:flex;flex-direction:column;gap:6px}
.mh-head p{color:var(--muted)}
.mh-zone-grid{display:grid;gap:16px}
.mh-zone{display:flex;flex-direction:column;gap:14px;padding:20px 20px 0;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--zc);border-radius:18px;overflow:hidden;min-width:0}
.mh-zone-top{display:flex;gap:12px;align-items:flex-start}
.mh-zone h3{font-size:19px;line-height:1.3}
.mh-zone-top p{font-size:15px;color:var(--muted)}
.mh-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mh-pill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 8px 6px 14px;border-radius:20px;font-size:15px;font-weight:600;text-decoration:none}
.mh-pill small{font-size:13px;font-weight:500}
.mh-pill.is-open{background:var(--zbg);color:var(--zc)}
.mh-pill.is-open:hover,.mh-pill.is-open:focus-visible{color:var(--zc);box-shadow:inset 0 0 0 2px var(--zc)}
.mh-pill.is-wip{background:var(--surface);color:var(--ink);border:1px dashed var(--chip-line)}
.mh-tag{padding:1px 8px;border-radius:10px;font-size:12.5px;font-weight:700}
.is-open .mh-tag{background:var(--zc);color:var(--zbg)}
.is-wip .mh-tag{background:var(--warn-bg);color:var(--warn-ink)}
.mh-zone-foot{margin:auto -20px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:10px 20px;background:var(--zbg);color:var(--zc);font-size:15px;font-weight:600}
.mh-zone-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--zc)}
.mh-how{display:flex;flex-direction:column;gap:18px}
.mh-how-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.mh-how-list > li{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:18px;min-width:0}
.mh-no{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--accent-dark)}
.mh-how-list h3{font-size:19px}
.mh-how-list > li > p{font-size:16px;color:var(--muted)}
.mh-mini{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:12px;background:var(--learn-bg);font-size:15px;line-height:1.5;user-select:none}
.mh-mini-en{color:var(--ink)}
.mh-mini-zh{color:var(--muted)}
.mh-mini mark{padding:0 3px;border-radius:4px;background:var(--warn-bg);color:var(--warn-ink);font-weight:700}
.mh-mini-word{font-size:22px;color:var(--ink)}
.mh-mini-step{font-size:13.5px;font-weight:600;color:var(--muted)}
.mh-mini-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mh-mini-bar i{height:6px;border-radius:3px;background:var(--line)}
.mh-mini-bar i.on{background:var(--accent)}
.mh-mini-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mh-mini-week li{display:flex;align-items:center;justify-content:center;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px;font-weight:600}
.mh-mini-week li.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mh-report{display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 8%,transparent);min-width:0}
.mh-report-tag{font-size:14px;font-weight:700;color:var(--muted)}
.mh-report-status{padding:8px 12px;border-radius:10px;background:var(--tip-bg);color:var(--tip-ink);font-weight:700;font-size:16px}
.mh-report-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mh-report-tiles li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.mh-report-tiles b{font-size:24px;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--accent-dark)}
.mh-report-tiles span{font-size:14px;color:var(--muted)}
.mh-report-weak{padding:8px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn-ink);font-size:15px;font-weight:600}
.mh-rr{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;padding:14px 20px;border:2px dashed var(--chip-line);border-radius:16px;color:var(--ink)}
.mh-rr a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--accent-dark)}
@media (min-width:720px){
  .mh-how-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mh-report-tiles{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1000px){
  .mh-hero{grid-template-columns:1.05fr .95fr;gap:48px;padding-top:32px}
  .mh-actions{flex-direction:row;max-width:none}
  .mh-actions .btn{width:auto;padding:0 28px}
  .mh-zone-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .mh-zone-grid.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 大主頁「學生｜家長｜家教」三個膠囊分頁（main_home.html 的 .aud，切換用 v6.js 的 [data-ew-tabs]，預設家長）：
   每段左文右圖，電腦（≥ 1000px）兩欄、手機一欄。學生段的配色卡沿用設定頁的迷你畫面（accounts/_theme_preview.html），
   外觀照 .theme-opt 重寫在 .aud-theme 底下（不動設定頁規則）；顏色只有卡片裡的 --pv-*（值來自 THEME_SWATCHES，inline 給） */
.aud{display:flex;flex-direction:column;gap:20px}
.aud-tabs{align-self:center;display:flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px}
.aud-tabs[hidden]{display:none}
.aud-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.aud-tab:hover{color:var(--ink)}
.aud-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aud-tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
.aud-panel{display:grid;gap:24px;align-items:center}
.aud-panel[hidden]{display:none}
.aud-panel:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
.aud-text{display:flex;flex-direction:column;gap:14px;min-width:0}
.aud-sub{color:var(--muted)}
.aud-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.aud-points li{position:relative;display:flex;flex-direction:column;gap:2px;padding-left:32px}
.aud-points li::before{content:"✓";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--tip-bg);color:var(--tip-ink)}
.aud-points b{font-size:17px}
.aud-points span{font-size:16px;color:var(--muted)}
.aud-proof{align-self:flex-start;padding:8px 14px;border-radius:12px;background:var(--accent-soft);color:var(--accent-dark);font-weight:700}
.aud-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.aud-note{font-size:14px;color:var(--muted)}
.aud-visual{display:flex;flex-direction:column;gap:10px;min-width:0}
.aud-tag{font-size:14px;font-weight:700;color:var(--muted)}
.aud-more{align-self:flex-end;font-size:14px}
.aud-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--accent-dark)}
.aud-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.aud-theme{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--chip-line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:600;min-width:0}
.aud-theme.is-checked{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.aud-theme .pv{display:flex;flex-direction:column;gap:5px;height:58px;padding:6px 7px;background:var(--pv-g)}
.aud-theme .pv-nav{display:flex;align-items:center;gap:3px;height:10px;padding:0 4px;border-radius:3px;background:var(--pv-sf)}
.aud-theme .pv-nav i{width:10px;height:3px;border-radius:2px;background:var(--pv-ac)}
.aud-theme .pv-card{display:flex;flex-direction:column;gap:4px;flex:1;padding:5px 6px;border-radius:5px;background:var(--pv-sf)}
.aud-theme .pv-l1{width:72%;height:4px;border-radius:2px;background:var(--pv-ink)}
.aud-theme .pv-l2{width:52%;height:3px;border-radius:2px;background:var(--pv-mu)}
.aud-theme .pv-btn{width:18px;height:6px;margin-top:auto;border-radius:3px;background:var(--pv-ac)}
.aud-theme .pv-foot{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:32px;padding:4px 6px}
.aud-theme .pv-name{min-width:0;white-space:nowrap}
.aud-theme .theme-check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;border:2px solid var(--chip-line);border-radius:50%;color:transparent;font-size:10px;line-height:1}
.aud-theme .theme-check.is-on{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.aud-week{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.aud-week ol{flex:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.aud-week li{height:16px;border-radius:4px;background:var(--line)}
.aud-week li.on{background:var(--accent)}
.aud-cards{display:grid;gap:12px}
.aud-card{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 8%,transparent);min-width:0}
.aud-card-h{font-size:14px;font-weight:700;color:var(--muted)}
.aud-card-title{font-size:18px;font-weight:700;color:var(--ink)}
.aud-meta{font-size:14px;color:var(--muted)}
.aud-bar{display:block;height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.aud-bar i{display:block;width:60%;height:100%;background:var(--accent)}
.aud-badges{display:flex;flex-wrap:wrap;gap:6px}
.aud-badge{padding:2px 10px;border-radius:12px;font-size:13px;font-weight:700}
.aud-badge.is-ok{background:var(--tip-bg);color:var(--tip-ink)}
.aud-badge.is-late{background:var(--warn-bg);color:var(--warn-ink)}
.aud-report{font-size:15px;line-height:1.75;color:var(--ink)}
.aud-auto{padding:0 3px;border-radius:4px;background:var(--warn-bg);color:var(--warn-ink);font-weight:700}
.aud-fakes{display:flex;flex-wrap:wrap;gap:8px}
.aud-fake{min-height:36px;padding:0 14px;font-size:14px;pointer-events:none}
.aud-foot{font-size:13px;color:var(--muted)}
@media (max-width:720px){
  .aud-tabs{align-self:stretch}
  .aud-tab{flex:1;padding:0 8px}
}
@media (min-width:760px){
  .aud-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 配色卡斜向疊放：由後到前 warm、mustard、night，往右下錯開；後兩張露出左下角的配色名稱 */
  .aud-themes{display:block;position:relative;height:216px;max-width:480px}
  .aud-theme{position:absolute;width:250px;font-size:14px}
  .aud-theme:nth-child(1){left:0;top:0}
  .aud-theme:nth-child(2){left:110px;top:44px}
  .aud-theme:nth-child(3){left:220px;top:88px}
  .aud-theme .pv{gap:7px;height:84px;padding:7px 9px}
  .aud-theme .pv-nav{gap:4px;height:12px;padding:0 5px}
  .aud-theme .pv-nav i{width:12px}
  .aud-theme .pv-card{gap:5px;padding:7px 8px}
  .aud-theme .pv-l1{height:5px}
  .aud-theme .pv-btn{width:24px;height:8px;border-radius:4px}
  .aud-theme .pv-foot{gap:6px;min-height:40px;padding:6px 10px}
  .aud-theme .theme-check{width:20px;height:20px;font-size:12px}
}
@media (min-width:1000px){
  .aud-panel{grid-template-columns:1fr 1fr;gap:48px}
}
/* 課本頁（books.html）與單冊販售系列書架（series.html）頂端的膠囊：學校・年級（課本頁沿用 .bk-where 那一行）、各系列（.shelf-pill）。
   選中填色（--accent／--on-accent），沒選中是外框；沒打開的系列前面有小鎖頭（仍可點） */
.shelf-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.shelf-tabs .bk-where,.shelf-pill{display:inline-flex;align-items:center;min-height:40px;margin:0;padding:0 16px;border:1.5px solid var(--accent);border-radius:999px;font-size:15px;font-weight:700;line-height:1.2;text-decoration:none}
.shelf-tabs .bk-where,.shelf-pill.is-on{background:var(--accent);color:var(--on-accent)}
.shelf-tabs .bk-where .school-current{color:inherit}
.shelf-pill{background:var(--surface);color:var(--accent)}
.shelf-pill:hover,.shelf-pill:focus-visible{background:var(--accent-soft);color:var(--accent-dark)}
.shelf-pill.is-on:hover,.shelf-pill.is-on:focus-visible{background:var(--accent);color:var(--on-accent)}
.shelf-pill .school-current{color:inherit}
.shelf-lock{flex:none;margin-right:6px}
/* 系列書架：一冊一張卡；封面是自己畫的色塊（六個科目色輪流），沒買的冊與即將推出的冊是灰色加鎖；手機兩欄 */
.sv-head .shelf-tabs{margin:0 0 14px}
.sv-head .sub{color:var(--muted)}
.sv-grid{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.sv-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--surface);border:1.5px solid var(--accent);border-radius:14px}
.sv-card.is-locked,.sv-card.is-soon{border-color:var(--line)}
.sv-c0{--sc:var(--subj-eng-ink);--sc-bg:var(--subj-eng-bg)}
.sv-c1{--sc:var(--subj-math-ink);--sc-bg:var(--subj-math-bg)}
.sv-c2{--sc:var(--subj-sci-ink);--sc-bg:var(--subj-sci-bg)}
.sv-c3{--sc:var(--subj-soc-ink);--sc-bg:var(--subj-soc-bg)}
.sv-c4{--sc:var(--subj-chi-ink);--sc-bg:var(--subj-chi-bg)}
.sv-c5{--sc:var(--subj-elec-ink);--sc-bg:var(--subj-elec-bg)}
.sv-cover{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;aspect-ratio:4/3;padding:14px;background:var(--sc-bg);color:var(--sc)}
.is-locked .sv-cover,.is-soon .sv-cover{background:var(--learn-bg);color:var(--muted)}
.sv-brand{font-size:13px;font-weight:700;letter-spacing:.04em}
.sv-level{font-size:26px;line-height:1.1}
.sv-grade{font-size:14px;font-weight:600}
.sv-lock{position:absolute;top:10px;right:10px}
.sv-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px}
.sv-title{font-size:16px;line-height:1.35;overflow-wrap:anywhere}
.sv-title a{color:var(--ink);text-decoration:none}
.sv-title a:hover{text-decoration:underline}
.is-soon .sv-title{color:var(--muted)}
.sv-status{font-size:14px;font-weight:700;color:var(--muted)}
.sv-status.is-owned{color:var(--tip-ink)}
.sv-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.sv-actions .btn{min-height:40px;padding:0 14px;font-size:14px}
.sv-buy{font-size:13px;color:var(--muted)}
@media (max-width:520px){
  .sv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sv-cover{padding:10px}
  .sv-level{font-size:22px}
  .sv-body{padding:10px}
  .sv-actions .btn{width:100%;padding:0 8px}
}
/* 康橋專區（landing.html）頁首上方的麵包屑：首頁 › 學校專區 › 林口康橋 */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;max-width:1080px;width:100%;margin:0 auto 8px;font-size:14px;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-dark);font-weight:600}
/* 學生首頁（catalog/dashboard.html）：Hero、今日單字三格、本週、我的課本 */
.sh-hero{display:flex;flex-direction:column;gap:12px;margin:12px 0 16px;padding:20px;border-radius:18px;background:var(--hero-bg);color:var(--hero-ink)}
.sh-hero h1{font-size:24px;line-height:1.3;color:inherit}
.sh-hero-sub{font-size:15px;opacity:.9}
.sh-resume{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border-radius:14px;background:var(--hero-btn);color:var(--hero-btn-ink);text-decoration:none}
.sh-resume:hover,.sh-resume:focus-visible{color:var(--hero-btn-ink);filter:brightness(.95)}
.sh-resume-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.sh-resume-lbl{font-size:13px;font-weight:700;color:inherit;opacity:.8}
.sh-resume-name{font-weight:600;overflow-wrap:anywhere}
.sh-resume-name .bi,.sh-resume-name .zh{color:inherit}
.sh-chev{flex:none;font-size:26px;color:var(--muted);line-height:1}
.sh-resume .sh-chev{color:inherit;opacity:.8}
.sh-today{display:flex;flex-direction:column;gap:12px;margin:0 0 16px}
.sh-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sh-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:84px;padding:10px 6px;border-radius:14px;text-align:center;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.sh-stat b{font-size:30px;line-height:1.1;color:var(--accent-dark)}
.sh-stat span{font-size:12.5px;font-weight:600;line-height:1.25;overflow-wrap:anywhere;color:var(--muted)}
.sh-start{width:100%;min-height:52px;font-size:17px;border-radius:26px;gap:8px;flex-wrap:wrap;text-align:center}
.sh-start small{font-size:14px;font-weight:500;opacity:.9}
.sh-start.is-done{background:var(--line-soft);border-color:var(--line);color:var(--muted);cursor:default}
.sh-week{margin:0 0 16px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.sh-week h2,.sh-books h2{font-size:18px}
.sh-days{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.sh-day{display:flex;flex-direction:column;align-items:center;gap:4px}
.sh-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--line-soft);border:1px solid var(--line);color:var(--on-accent)}
.sh-day.done .sh-dot{background:var(--accent);border-color:var(--accent)}
.sh-day.is-today .sh-dot{border:2px solid var(--accent)}
.sh-day.done.is-today .sh-dot{background:var(--accent)}
.sh-day small{font-size:12px;color:var(--muted);text-align:center}
.sh-day.is-today small{color:var(--accent-dark);font-weight:700}
.sh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sh-books{display:flex;flex-direction:column;gap:10px}
.sh-books-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sh-books-head a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.sh-booklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sh-book{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none}
.sh-book:hover,.sh-book:focus-visible{border-color:var(--accent);color:var(--ink)}
.sh-subj{flex:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--subj-other-bg);color:var(--subj-other-ink)}
.sh-book-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sh-book-title{font-weight:600;overflow-wrap:anywhere}
.sh-bar progress{display:block;width:100%;height:6px;border:0;border-radius:3px;overflow:hidden;appearance:none;-webkit-appearance:none;background:var(--line-soft)}
.sh-bar progress::-webkit-progress-bar{background:var(--line-soft)}
.sh-bar progress::-webkit-progress-value{background:var(--accent);border-radius:3px}
.sh-bar progress::-moz-progress-bar{background:var(--accent);border-radius:3px}
.sh-pct{flex:none;min-width:3em;text-align:right;font-weight:700;color:var(--muted)}
@media (min-width:900px){
  .sh-hero{padding:28px}
  .sh-hero h1{font-size:30px}
}
/* 學生首頁兩欄（dashboard.html）：電腦（≥ 1000px）.sh-grid＝左 .sh-side（黏住；問候＋今天合成 .sh-lead 深色卡、家教指派、本週、錯題）
   ＋右 .sh-main（繼續上次的課、釘選、我的課本），main 與精簡頁尾放寬到 1280px。
   999px 以下 .sh-side／.sh-main／.sh-lead 是 display:contents，各區塊用 order 排回改版前的一欄順序；
   繼續上次的課（.sh-resume-wrap）接在問候卡下面、同一塊深色底，看起來和改版前包在 .sh-hero 裡一樣 */
.sh-resume-wrap{background:var(--hero-bg);color:var(--hero-ink)}
.sh-prog .bk-pct{font-size:13px}
@media (max-width:999px){
  .sh-grid{display:flex;flex-direction:column}
  .sh-side,.sh-main,.sh-lead{display:contents}
  .sh-grid .sh-hero{order:1}
  .sh-resume-wrap{order:2;margin:0 0 16px;padding:12px 20px 20px;border-radius:0 0 18px 18px}
  .sh-grid:has(.sh-resume-wrap) .sh-hero{margin-bottom:0;padding-bottom:0;border-radius:18px 18px 0 0}
  .sh-grid .pin-home{order:3}
  .sh-grid .sh-today{order:4}
  .sh-grid .sh-assign{order:5}
  .sh-grid .sh-wrong{order:6}
  .sh-grid .sh-week{order:7}
  .sh-grid .sh-books{order:8}
  .sh-grid .sh-hero,.sh-resume-wrap,.sh-grid .pin-home,.sh-grid .sh-today,.sh-grid .sh-assign,.sh-grid .sh-wrong,.sh-grid .sh-week,.sh-grid .sh-books{min-width:0}
}
@media (min-width:900px) and (max-width:999px){.sh-resume-wrap{padding:12px 28px 28px}}
@media (min-width:1000px){
  main:has(> .sh-grid){max-width:1280px}
  body:has(> main > .sh-grid) .ft-slim-in{max-width:1280px}
  .sh-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start;margin-top:12px}
  .sh-side,.sh-main{display:flex;flex-direction:column;gap:16px;min-width:0}
  .sh-side{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain}
  .sh-side > *,.sh-main > *{margin:0}
  .sh-lead{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:18px;background:var(--hero-bg);color:var(--hero-ink)}
  .sh-lead .sh-hero{margin:0;padding:0;border-radius:0;background:none}
  .sh-lead .sh-hero h1{font-size:26px}
  .sh-lead .sh-today{margin:0}
  .sh-resume-wrap{padding:16px;border-radius:18px}
}
/* 分析：閱讀紀錄 */
.rr-book{margin:12px 0}
.rr-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.rr-bar{height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden}
.rr-bar span{display:block;height:100%;background:var(--accent)}
/* 說明 */
.help-group{margin:20px 0}
.help-group h2{font-size:19px}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 16px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:600;min-height:48px;display:flex;align-items:center}
.faq p{margin:0 0 12px}
/* 說明頁最上面的捷徑：說明提到哪一頁就直接點得過去 */
.help-jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 20px}
.help-jump a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border:1px solid var(--chip-line);border-radius:22px;background:var(--surface);color:var(--accent);font-weight:600;font-size:14px;text-decoration:none}
.help-jump a:hover{border-color:var(--accent)}
.help-jump .j-ico{font-size:15px;line-height:1}
/* 步驟：一格一步，中間用箭頭接起來 */
.steps{list-style:none;display:flex;flex-flow:row wrap;align-items:center;gap:6px 4px;margin:0 0 14px;padding:0}
.steps li{position:relative;display:inline-flex;align-items:center;padding:5px 11px;border-radius:14px;background:var(--line-soft);color:var(--ink);font-size:13.5px;font-weight:600}
.steps li+li{margin-left:20px}
.steps li+li::before{content:"→";position:absolute;left:-17px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:400}
/* 說明頁的例圖 */
.pic{margin:4px 0 14px}
.pic svg{width:100%;height:auto;max-width:360px;display:block}
.pic .box{fill:none;stroke:var(--chip-line);stroke-width:1.5}
.pic .box.last{fill:var(--accent-soft);stroke:var(--accent)}
.pic .lv{fill:var(--muted);stroke:none;font-size:12px;font-weight:600;font-family:inherit}
.pic .ok{fill:none;stroke:var(--tip-ink);stroke-width:2}
.pic .no{fill:none;stroke:var(--todo);stroke-width:2}
.pic .phone .ok+.mark{stroke:var(--tip-ink)}
.pic .phone .no+.mark{stroke:var(--todo)}
.pic .mark{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pic figcaption{margin-top:6px;font-size:13px;color:var(--muted)}
/* 說明頁的示範句與語言模式 */
.sample{margin:4px 0 14px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:10px;background:var(--bg-soft,transparent)}
.sample-line{margin:0 0 6px;font-size:16px;line-height:1.6}
.sample-tip{margin:0;font-size:13px;color:var(--muted)}
.modes{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px}
.mode{padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px}
.mode-name{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:700;color:var(--muted)}
.mode p{margin:0}
.mode .m-en{font-size:15px}
.mode .m-zh{font-size:14px;color:var(--muted);font-family:'Noto Sans TC',system-ui,sans-serif}
.mode .m-zh.big{font-size:16px;color:var(--ink)}
.mode .m-en.small{font-size:12.5px;color:var(--muted)}
/* 身分卡：像單字卡一樣翻面，背面才是問題（.back／.front 已經被別處用掉，所以用 rc- 開頭） */
.helpcards{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.helpcard{perspective:1200px}
.rc-inner{position:relative;transition:transform .5s cubic-bezier(.2,.7,.3,1),height .25s ease}
.helpcard[data-ready] .rc-inner{transform-style:preserve-3d}
.helpcard[data-ready] .rc-face{position:absolute;top:0;left:0;right:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.helpcard[data-ready] .rc-back{transform:rotateY(180deg)}
.helpcard[data-ready].flipped .rc-inner{transform:rotateY(180deg)}
.rc-face{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:left}
.rc-front{display:flex;align-items:center;gap:14px;min-height:92px;padding:16px 18px;cursor:pointer;font:inherit;color:var(--ink)}
.rc-front:hover{border-color:var(--accent)}
.rc-front .r-ico{width:30px;height:30px;flex:none;color:var(--accent)}
.rc-front .r-ico,.rc-return svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rc-return svg{width:18px;height:18px;flex:none}
.rc-front .r-name{font-weight:700;font-size:17px}
.rc-front .r-hint{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600;text-align:right}
/* 手機上標題就夠寬了，提示只留翻面箭頭 */
.rc-front .r-turn{width:22px;height:22px;flex:none;margin-left:12px;color:var(--muted);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.rc-front .r-hint{display:none}.rc-front .r-turn{margin-left:auto}}
.rc-back{padding:6px 14px 12px}
.rc-return{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--accent);font:inherit;font-weight:700;cursor:pointer}
.rc-back .faq{border:0;background:transparent;padding:0;margin:0}
.rc-back .faq summary{min-height:44px;font-size:15px}
.rc-back .faq+.faq{border-top:1px solid var(--line-soft)}
@media (prefers-reduced-motion:reduce){.rc-inner{transition:height .2s ease}}
/* 說明頁的按鈕列 */
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn.ghost{background:transparent;color:var(--accent)}
/* 答案裡的連結與示範 */
.faq .go{font-weight:600}
.faq .go a{color:var(--accent)}
.faq .demo{color:var(--muted);font-size:14px}
.continue-card .bi,.continue-card .bi *{color:inherit!important}
.continue-card .zh{opacity:.85}

.plan-hint{margin:10px 0 0}
.plan-cta{margin:10px 0}

/* 服務條款、隱私權政策 */
.legal h2{font-size:22px;margin:0 0 12px}
.legal h3{font-size:16px;margin:20px 0 6px}
.legal p,.legal li{line-height:1.7}
.legal ol{padding-left:22px}
.legal table th{text-align:left;white-space:nowrap;vertical-align:top;padding-right:12px}
.legal+.legal{margin-top:16px}

.site-foot .disclaimer{margin:0 0 6px}

/* 家長、老師首頁：孩子／學生狀態卡 */
.status-card{padding:16px 18px}
.sc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sc-head h2{margin:0;font-size:19px}
.sc-gear{position:relative;color:var(--muted);padding:6px;border-radius:8px}
.sc-gear:hover{background:var(--accent-soft);color:var(--accent)}
.sc-dot{position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--todo)}
.sc-week{margin:12px 0}
.sc-week-head{font-weight:600;font-size:14px;margin-bottom:8px}
.sc-on{color:var(--tip-ink)}.sc-off{color:var(--rail)}
.sc-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.sc-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:46px;border-radius:8px;background:var(--line-soft);color:var(--muted);font-size:11px}
.sc-day b{font-size:14px;line-height:1;min-height:14px}
.sc-day.on{background:var(--accent);color:var(--on-accent)}
.sc-day.today{outline:2px solid var(--accent);outline-offset:1px}
.sc-day.future{opacity:.45}
.sc-last{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);margin:10px 0}
.sc-last:hover{border-color:var(--accent)}
.sc-last .lbl{font-size:12px;color:var(--muted)}
.sc-last-book{font-size:13px;color:var(--muted)}
.sc-last-lesson{font-weight:600}
.sc-verdict{margin:12px 0 8px;font-weight:700;font-size:15px;line-height:1.45}
.sc-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
.sc-nums div{display:flex;flex-direction:column-reverse;align-items:center;padding:8px 4px;border-radius:10px;background:var(--line-soft)}
.sc-nums dd{margin:0;font-size:20px;font-weight:700;line-height:1.2}
.sc-nums dt{font-size:12px;color:var(--muted)}
.sc-weak{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sc-weak li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:8px 10px;border-radius:10px;background:var(--warn-bg);color:var(--warn-ink)}
.sc-weak-name{font-weight:600;flex:1 1 140px;min-width:0}
.sc-weak-pct{font-weight:700}
.sc-weak small{flex-basis:100%;font-size:12px;opacity:.85}
.sc-lastpractice{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:10px 0}
.sc-lastpractice .lbl{font-size:12px;color:var(--muted)}
.pr-wrong-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pr-wrong-list li{padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.pr-wrong-list li:last-child{border-bottom:0;padding-bottom:0}
.pr-num{white-space:nowrap;text-align:right}
.pr-meta{display:flex;flex-wrap:wrap;gap:2px 10px}
.pr-stem{font-weight:600}
.pr-answer{margin-top:2px}
.outline-details>summary{cursor:pointer;list-style:revert}
.tutor-plan-line{margin:0 0 12px;color:var(--muted)}

/* 還沒有題目的書：課本頁不分兩欄，技能清單直接接在課名下面 */
.lesson-row.no-practice{grid-template-columns:minmax(0,1fr)}
.lesson-row.no-practice .learn{border-right:none;border-bottom:1px solid var(--line)}

/* 練習 */
.quiz-head{margin:8px 0 16px}
.quiz-skill{font-size:20px;font-weight:700;margin-bottom:10px}
.quiz-bar{height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden}
.quiz-bar span{display:block;height:100%;background:var(--accent);transition:width .25s}
.quiz-meta{margin-top:6px;font-size:13px;color:var(--muted)}
/* 練習時打開同一個技能的例題 */
.see-example{margin:0 0 14px;border:1px solid var(--chip-line);border-radius:12px;background:var(--surface);padding:0 14px}
.see-example>summary{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;font-weight:600;color:var(--accent)}
.see-example>summary svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.see-example[open]{padding-bottom:10px}
/* 答錯解說頁的「複習筆記」摺疊區（自然科）：外觀同例題摺疊區；手機優先，沒有電腦版專用樣式 */
.note-points{margin:12px 0 0;border:1px solid var(--chip-line);border-radius:12px;background:var(--surface);padding:0 14px}
.note-points>summary{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;font-weight:600;color:var(--accent)}
.note-points>summary svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.note-points[open]{padding-bottom:12px}
.note-points-list{list-style:none;margin:0 0 12px;padding:0;font-size:15px;line-height:1.6}
.note-points-list>li{padding:8px 0;border-top:1px solid var(--line-soft)}
.note-points-list>li:first-child{border-top:0;padding-top:0}
.note-points-list>li.is-note{padding:8px 10px;border-top:0;border-radius:8px;background:var(--line-soft);font-size:14px}
.note-points-list>li.is-note+li{border-top:0}
.note-points-list .lbl{display:inline-block;font-weight:700;color:var(--muted);border:1px solid var(--chip-line);border-radius:4px;padding:0 5px;font-size:12px;line-height:18px;margin-right:4px}
.note-points-link{margin:0}
.quiz{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.quiz-stem{font-size:17px;line-height:1.6;margin-bottom:14px}
/* 單選／多選：原生 radio／checkbox 只做視覺隱藏（不用 display:none，鍵盤與表單送出才正常），選中與否整列換色 */
.choices{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.choices label,.choices.result li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-height:48px;position:relative}
.choices label{cursor:pointer;transition:background .12s,border-color .12s}
.choices label:hover{background:var(--line-soft)}
.choices label input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.choices label:has(input:checked){background:var(--accent-soft);border-color:var(--accent)}
.choices label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.ch-letter{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--line-soft);color:var(--muted);font-weight:700;font-size:14px;line-height:1}
.choices label:has(input:checked) .ch-letter{background:var(--accent);color:var(--on-accent)}
.choices li.right{border-color:var(--tip-ink);background:var(--tip-bg)}
.choices li.wrong{border-color:var(--todo);background:var(--todo-bg)}
.choices li.right .ch-letter{background:var(--tip-ink);color:var(--surface)}
.choices li.wrong .ch-letter{background:var(--todo);color:var(--surface)}
.choices.plain li{border-color:var(--line-soft)}
/* 選字填空：題幹裡的空格 */
.blank{font:inherit;font-size:16px;padding:4px 6px;margin:0 2px;max-width:min(100%,220px);border:1px solid var(--accent);border-radius:8px;background:var(--surface);color:var(--ink);min-height:36px}
/* 排序題（點選式）：上面是待選項，點一下依序落到下面的答案區；點答案區的項目再放回去 */
.order-pool,.order-slots{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.order-title{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 6px}
.order-item,.order-slot{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.order-item:hover,.order-slot.filled:hover{background:var(--line-soft)}
.order-item .ch-text,.order-slot .ch-text{flex:1}
.order-slot{border-style:dashed;cursor:default;align-items:center;color:var(--muted)}
.order-slot.filled{border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--ink);cursor:pointer}
.order-slot.filled:hover{background:var(--accent-soft);border-color:var(--accent-dark)}
.rank-no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--line-soft);color:var(--muted);font-size:13px;font-weight:700;flex:none}
.order-slot.filled .rank-no{background:var(--accent);color:var(--on-accent)}
.order-none{margin:0 0 12px;color:var(--todo);font-size:14px;font-weight:600}
/* 管理員預覽還沒上線的題目 */
.preview-tag{margin:0 0 12px;padding:6px 10px;border-radius:8px;background:var(--warn-bg);color:var(--warn-ink);font-size:13px;font-weight:600}
.preview-tag code{font-size:12px;font-weight:400}
/* 數字填答：單位印在答案格後面 */
.answer-box{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.answer-box input{min-height:44px}
.answer-unit{color:var(--muted);font-weight:600}
/* 練習頁的獨立數學式放大一級，式子才是題目的主體 */
.quiz-stem .katex-display{font-size:1.3em;margin:14px 0}
.quiz-stem .katex-display>.katex{font-size:1em}
/* 分數格：分子、分母各一個格子 */
.frac-answer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.frac-stack{display:inline-flex;flex-direction:column;align-items:stretch;gap:6px;width:min(100%,160px)}
.frac-answer input{min-height:48px;text-align:center;font-size:20px;border:1px solid var(--chip-line);border-radius:8px}
.frac-whole{width:72px}
.frac-sign{min-height:48px;width:64px;text-align:center;font-size:20px;border:1px solid var(--chip-line);border-radius:8px;background:var(--surface);color:var(--ink);font-family:inherit}
.frac-bar{height:3px;border-radius:2px;background:var(--ink)}
.lbl-plain{display:block;margin-bottom:6px;font-weight:600}
/* 自訂數字鍵盤 */
.keypad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0 4px;max-width:360px}
.keypad button{min-height:48px;border:1px solid var(--chip-line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:19px;font-weight:600;cursor:pointer}
.keypad button:hover{border-color:var(--accent)}
.keypad button:active{background:var(--accent-soft)}
.keypad .k-erase{color:var(--muted)}
/* 收起／展開鍵盤的按鈕只給有滑鼠鍵盤的裝置（見檔尾 hover/pointer 區塊），觸控裝置鍵盤永遠展開 */
.keypad-toggle{display:none}
/* 算式填答：邊打邊排版 */
.expr-input{font-family:'IBM Plex Mono',ui-monospace,monospace}
/* 找錯改錯：句子的每個字是一個可以選的選項（核取方塊藏起來，但鍵盤一樣能 Tab 到、空白鍵選取） */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.spot-sentence{display:flex;flex-wrap:wrap;gap:8px 6px;margin:0 0 8px;font-size:18px;line-height:1.4}
.spot-tok{position:relative;display:inline-block}
.spot-tok input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.spot-tok label{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:1px solid var(--chip-line);border-radius:10px;background:var(--surface);cursor:pointer}
.spot-tok label:hover{border-color:var(--accent)}
.spot-tok input:checked+label{border-color:var(--todo);background:var(--todo-bg);font-weight:700;text-decoration:underline wavy var(--todo);text-underline-offset:4px}
.spot-tok input:focus-visible+label{outline:3px solid var(--accent);outline-offset:2px}
.spot-fixes{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.spot-fixes li:not([hidden]){display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spot-fixes label{font-weight:600}
.spot-fixes input{flex:1;min-width:160px;font:inherit;font-size:16px;min-height:44px;padding:6px 10px;border:1px solid var(--chip-line);border-radius:8px;background:var(--surface);color:var(--ink)}
.spot-none{margin:0 0 10px;font-weight:600;color:var(--warn-ink)}
/* 找錯改錯的回饋：字下面用符號和文字（不只靠顏色）標出對錯 */
.spot-sentence.result .spot-tok{padding:6px 8px;border:1px solid var(--line-soft);border-radius:8px}
.spot-tok.right{border-color:var(--tip-ink)!important;background:var(--tip-bg)}
.spot-tok.miss{border-color:var(--todo)!important;background:var(--todo-bg);font-weight:700}
.spot-tok.extra{border-style:dashed!important;border-color:var(--warn-ink)!important;text-decoration:line-through}
.spot-review{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.spot-review li{padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px}
.spot-review li.right{border-color:var(--tip-ink);background:var(--tip-bg)}
.spot-review li.wrong{border-color:var(--todo);background:var(--todo-bg)}
.spot-mark{display:block;margin-top:2px;font-size:14px}
/* 引導輸出：輸入框上方固定的句首提示、輸入框、四燈 */
.guided textarea{font:inherit;font-size:16px;line-height:1.5;width:100%;min-height:96px;resize:vertical}
.guided textarea::placeholder{color:var(--muted);opacity:1}
.starter-hint{margin:0 0 6px;padding:8px 12px;border-radius:8px;background:var(--accent-soft);color:var(--ink);font-size:15px;user-select:none}
.lights{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.light{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px}
.light small{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.light .dot{flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;border:2px solid var(--muted);background:transparent}
.light.on{border-color:var(--tip-ink);background:var(--tip-bg)}
.light.on .dot{background:var(--tip-ink);border-color:var(--tip-ink)}
.light.off{border-color:var(--todo);background:var(--todo-bg)}
.light.off .dot{border-color:var(--todo);background:repeating-linear-gradient(45deg,var(--todo) 0 3px,transparent 3px 6px)}
.light.unchecked{border-style:dashed}
.appeal{margin:12px 0}

@media (max-width:520px){.lights{grid-template-columns:minmax(0,1fr)}.spot-sentence{font-size:17px}}
.ch-text{flex:1}
.ch-why{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.verdict{font-weight:700;margin:12px 0;padding:10px 14px;border-radius:10px}
.verdict.ok{background:var(--tip-bg);color:var(--tip-ink)}
.verdict.no{background:var(--warn-bg);color:var(--warn-ink)}
.quiz-given{margin:6px 0 12px}
.quiz-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.quiz-actions form{margin:0}
.big-score{font-size:52px;font-weight:700;line-height:1;color:var(--accent)}
.big-score small{font-size:20px;color:var(--muted);font-weight:600}
/* 結果頁：分數那一列；滿分時旁邊一個完成標記（inline SVG）＋寵物系統預留的空容器 */
.score-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.done-mark{flex:none;color:var(--tip-ink)}
.pet-slot:empty{display:none}
/* 結果頁的按鈕：主按鈕排第一；手機上每顆各佔一列，主按鈕最顯眼。
   「再做一次」的 <form> 當成一般的 flex item（display:block），不用 display:contents：
   WebKit 對 display:contents 套在表單相關元素上有過多個已知問題（按鈕不能點、不進無障礙樹），送出路徑不冒這個險 */
.quiz-result .quiz-actions{margin-top:8px}
.quiz-result .quiz-actions form{display:block;margin:0}
@media (max-width:520px){
  .quiz-result .quiz-actions{flex-direction:column;align-items:stretch}
  .quiz-result .quiz-actions form,.quiz-result .quiz-actions .btn{width:100%}
}
.wrong-list{padding-left:20px}
.wrong-list li{margin:8px 0}
.score.ok{border-style:solid;border-color:var(--tip-ink);color:var(--tip-ink);font-weight:700}
.score.part{border-style:solid;color:var(--ink)}
.aside .s.ok{color:var(--tip-ink);font-weight:700}

/* 還沒建內容的書：灰色、不能點 */
.book-tile.planned{opacity:.6;cursor:default;border-style:dashed}
.book-tile.planned:hover{border-color:var(--line)}
.chip.soon{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-bg)}
/* 練習頁：輸入框至少 16px，iOS Safari 才不會點進去就放大頁面 */
.quiz input,.quiz select,.quiz textarea,.frac-answer input,.answer-box input{font-size:16px}
.frac-answer input{font-size:20px}
/* 說明文字在輸入框上方，字小、色淡 */
.help-top{margin:0 0 6px;font-size:12px;color:var(--muted)}
.quiz .btn-block{display:flex;width:100%;margin-top:8px}
/* 答對提示：一秒後淡出，不佔版面 */
.got-it{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translateX(-50%);z-index:50;padding:6px 16px;border:1px solid var(--tip-line);border-radius:18px;background:var(--tip-bg);color:var(--tip-ink);font-size:14px;font-weight:600;pointer-events:none;animation:got-it-out .4s ease 1s forwards}
@keyframes got-it-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion: reduce){.got-it{animation-duration:.01s}}

/* 練習頁寬螢幕排版：手機版（≤720px）完全不動，寬螢幕才把作答區收到 640px 置中，鍵盤與按鈕維持手機尺寸。
   這一塊只看寬度，跟裝置是不是觸控無關；鍵盤收納與自動聚焦另外用 hover/pointer 判斷 */
@media (min-width:721px){
  .quiz-head,.see-example,.quiz{width:100%;max-width:640px;margin-left:auto;margin-right:auto}
  .keypad{margin-left:auto;margin-right:auto}
  .quiz .btn-block{width:min(100%,360px);margin-left:auto;margin-right:auto}
  /* 有鍵盤的作答格：輸入框與鍵盤同寬 360px、一起置中 */
  .quiz .field:has(> [data-keypad]){width:min(100%,360px);margin-left:auto;margin-right:auto}
  .quiz .answer-box{display:flex;flex-wrap:nowrap;width:100%}
  .quiz .answer-box input{flex:1 1 auto;min-width:0}
  .quiz .frac-answer{justify-content:center}
  .keypad{width:100%;margin-top:6px;gap:5px}
  .keypad button{min-height:38px;font-size:16px;border-color:transparent;border-radius:8px;background:var(--line-soft)}
  .keypad button:hover{border-color:var(--accent);background:var(--surface)}
  .keypad button:active{background:var(--accent-soft)}
  .keypad .k-gap{margin-top:8px}
  .keypad .k-var{background:var(--accent-soft);color:var(--accent-dark)}
}
/* 鍵盤收納只給有滑鼠鍵盤的裝置：用 hover/pointer 判斷，不看寬度（iPad 直式 768px 也是觸控，要永遠展開）。
   觸控裝置（手機、平板，不論寬度）沒有收納按鈕、鍵盤永遠展開、不自動聚焦 */
@media (hover: hover) and (pointer: fine){
  /* 鍵盤預設收起；輸入框下方一顆低調的小按鈕切換 */
  .keypad-toggle{display:inline-flex;align-items:center;gap:6px;align-self:center;margin-top:6px;padding:4px 10px;border:0;border-radius:14px;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
  .keypad-toggle:hover{background:var(--line-soft);color:var(--ink)}
  .keypad-toggle[aria-expanded="true"]{color:var(--accent)}
  .field:not(.keypad-open)>.keypad{display:none}
}

/* 練習頁的中文：題幹與選項的中譯預設收起（學校考試是全英文，先讀英文），按題幹下方的「中文」展開。
   開關只管 .quiz 裡的題幹、選項、排序項、找錯句；答錯後的解說（.note）照語言模式中英並陳，不受影響。
   展開時不管語言模式都顯示（全英文模式的學生也可以按出來看） */
.zh-switch-row{margin:-6px 0 12px}
.zh-switch{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid var(--chip-line);border-radius:14px;background:none;color:var(--muted);font:inherit;font-family:'Noto Sans TC',system-ui,sans-serif;font-size:13px;cursor:pointer}
.zh-switch::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--chip-line)}
.zh-switch:hover{border-color:var(--accent);color:var(--ink)}
.zh-switch[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.zh-switch[aria-expanded="true"]::before{background:var(--accent)}
.quiz .quiz-stem .zh,.quiz .choices .zh,.quiz .order-pick .zh,.quiz .spot-sentence .zh{display:none}
.quiz.zh-open .quiz-stem .zh,.quiz.zh-open .choices .zh,.quiz.zh-open .order-pick .zh,.quiz.zh-open .spot-sentence .zh{display:block}
/* 數學解說（三段式）：中文版跟題幹一樣由「中文」按鈕控制；結果頁的「查看本輪詳解」（.quiz-review）同一套 */
.quiz .math-explain .zh,.quiz-review .quiz-stem .zh,.quiz-review .math-explain .zh{display:none}
.quiz.zh-open .math-explain .zh,.quiz-review.zh-open .quiz-stem .zh,.quiz-review.zh-open .math-explain .zh{display:block}
/* 數學解說：觀念提示／關鍵算式／答案三行分開、行距拉開；關鍵算式獨立一行、置中、放大 1.25 倍 */
.math-explain{display:flex;gap:8px;font-size:14px;color:var(--ink)}
.math-explain>.lbl{flex-shrink:0;font-weight:700;color:var(--muted);border:1px solid var(--chip-line);border-radius:4px;padding:0 5px;font-size:12px;height:20px;line-height:18px;margin-top:1px}
.math-explain-body{flex:1;min-width:0}
.ex-lang{display:flex;flex-direction:column;gap:10px;line-height:1.6}
.ex-lang.zh{margin-top:10px;padding-left:10px;border-left:2px solid var(--chip-line);color:var(--muted);font-family:'Noto Sans TC',system-ui,sans-serif;font-size:13.5px}
.ex-lbl{display:inline-block;margin-right:6px;font-size:12px;font-weight:700;color:var(--muted)}
.ex-hint,.ex-step,.ex-answer{color:var(--muted)}
.ex-answer .ex-body{font-weight:600;color:var(--ink)}
.ex-key{text-align:center;padding:6px 0}
.ex-key .ex-lbl{display:block;margin:0 0 2px}
.ex-key .ex-body{display:block;font-size:1.25em;font-weight:600;color:var(--ink)}
/* 結果頁：查看本輪詳解 */
.round-review{margin:4px 0 0;border:1px solid var(--chip-line);border-radius:12px;background:var(--surface);padding:0 14px}
.round-review>summary{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;font-weight:600;color:var(--accent)}
.round-review>summary svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.round-review[open]{padding-bottom:12px}
.review-list{margin:0;padding-left:22px}
.review-list>li{padding:10px 0;border-top:1px solid var(--line-soft)}
.review-list>li:first-child{border-top:0;padding-top:0}
.review-list .quiz-stem{font-size:16px;margin-bottom:8px}

/* 防隨手複製（只擋一般人，不追求完全防止）：伺服器只在課本、課頁、練習等頁、且不是站長時，才在 main 加 .protect。
   文字仍在 DOM 裡，讀屏器照常讀。輸入框要能打字作答：iOS Safari 的輸入框若是 user-select:none 會打不了字，所以明確放行 */
.protect,.protect *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.protect input,.protect textarea,.protect [contenteditable]:not([contenteditable="false"]),.protect [contenteditable]:not([contenteditable="false"]) *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* 「單字」分頁（/words/）：今日任務、詞書卡、拼寫／聽寫、翻開畫面 */
.words-today .today-counts{font-size:18px;font-weight:600;margin:0}
.words-today .help{margin:0}
.word-books{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.word-books h2{margin:0}
.word-book .word-stats{font-size:13.5px;color:var(--muted)}
.spell-quiz .spell-meaning{font-size:18px;margin:0 0 10px}
.spell-input{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:18px;padding:10px 12px;border:1px solid var(--chip-line);border-radius:8px;background:var(--surface);color:var(--ink);min-height:48px;margin:0 0 14px}
.word-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:12px 0}
.word-card p{margin:0 0 6px}
.word-card .wc-word{font-size:22px}
.word-card .wc-word i{font-size:15px;color:var(--muted)}
.word-card .wc-meaning{font-size:17px}
.wc-examples{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.wc-examples li{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line-soft);padding-top:8px}
.wc-examples small{color:var(--muted)}
.signup-end{border:1px solid var(--accent);background:var(--accent-soft);border-radius:12px;padding:14px 16px}
.signup-end h2{margin:0 0 6px;font-size:18px}
.signup-end p{margin:0 0 10px}
/* 詞書分組（可展開收合）與書磚的年級、科目標籤 */
.word-group{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.word-group>summary{list-style:none}
.word-group>summary::-webkit-details-marker{display:none}
.word-group>summary.ww-row{border:0;background:none}
.word-group>.books{padding:0 12px 12px}
/* 科目列：科目名下面一行淡字列出前三本書名，放不下用省略號 */
.wg-books{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:400;color:var(--muted)}
/* 我的書：左邊 6px 科目色邊（.subj-* 的 --sc；不認得的科目用 other） */
.book-tile.my-book{border-left:6px solid var(--sc,var(--subj-other-ink))}
.word-book .book-levels{display:flex;flex-wrap:wrap;gap:6px}
/* 我的書：進度條（已熟／總字數）與今天到期 */
.word-progress{width:100%;height:8px;accent-color:var(--accent)}
.chip.due-badge{background:var(--warn-bg);color:var(--warn-ink)}
.words-today .today-meta{margin:0 0 6px;color:var(--muted)}
.words-today .today-done{font-size:18px;font-weight:600;margin:0}
/* /words/ 首頁：兩個入口（學校課本單字、考試單字），前綴 wh-。登入的人上面一條「今天」（--hero-*）；只用配色 token */
.wh-page{display:flex;flex-direction:column;gap:14px}
.wh-head h1{margin:0}
.wh-head .sub{margin:4px 0 0}
.wh-browse{margin:0 0 4px;border-radius:12px;background:var(--warn-bg);color:var(--warn-ink);font-size:14px;line-height:1.5}
.wh-browse a{display:block;min-height:44px;padding:10px 14px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.wh-browse a:hover,.wh-browse a:focus-visible{color:inherit;text-decoration-thickness:2px}
/* /words/ 最上面的「今天」卡（vocab/_today_card.html）：組數＋約幾分鐘、三色進度條（考試、課本、單字本）、到期複習、主按鈕、底部「調整」 */
.td-card{display:flex;flex-direction:column;gap:10px}
.td-card p{margin:0}
.td-streak{font-size:13px;color:var(--muted)}
.td-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.td-groups{font-size:24px;font-weight:700;color:var(--ink)}
.td-min{font-size:14px;color:var(--muted)}
.td-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--line-soft);border:1px solid var(--line)}
.td-seg{width:var(--w);min-width:4px}
.td-seg.is-exam,.td-legend .is-exam .td-dot{background:var(--accent)}
.td-seg.is-textbook,.td-legend .is-textbook .td-dot{background:var(--subj-sci-ink)}
.td-seg.is-mine,.td-legend .is-mine .td-dot{background:var(--subj-math-ink)}
.td-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted)}
.td-legend li{display:inline-flex;align-items:center;gap:6px}
.td-dot{display:inline-block;width:10px;height:10px;border-radius:3px}
.td-due{font-size:15px;color:var(--ink)}
.td-done[aria-disabled="true"]{background:var(--line-soft);border-color:var(--line);color:var(--muted);cursor:default}
.td-tomorrow{font-size:14px;color:var(--muted);text-align:center}
.td-adjust{border-top:1px solid var(--line-soft);padding-top:4px}
.td-adjust>summary{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-height:44px;cursor:pointer;font-size:13px;color:var(--muted);list-style:none}
.td-adjust>summary::-webkit-details-marker{display:none}
.td-adjust-sum{flex:1 1 14em;min-width:0;overflow-wrap:anywhere}
.td-adjust-link{color:var(--accent-dark);font-weight:700}
.td-adjust-body{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.td-adjust-body .eg-label{margin:0 0 6px;font-weight:700;color:var(--ink)}
.td-goal-pick{display:flex;flex-direction:column;gap:8px}
.td-goal-now{margin:0;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.td-order{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.td-order li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 4px 4px 12px;border:1px solid var(--chip-line);border-radius:12px;background:var(--surface)}
.td-order-name{font-weight:700;color:var(--ink)}
.td-order-btns{display:flex;gap:6px}
.td-order-btns .btn{min-width:44px;min-height:44px;padding:0 10px}
.td-order-btns .btn:disabled{opacity:.4;cursor:default}
.wh-plus{margin:0;font-size:14px;color:var(--muted)}
.wh-today{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;background:var(--hero-bg);color:var(--hero-ink)}
.wh-today p{margin:0;color:inherit}
.wh-today-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.wh-today-n{font-size:20px;font-weight:700}
.wh-streak{font-size:15px;font-weight:600}
.wh-today-note{font-size:14px}
.wh-today .eg-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wh-today .eg-goal-wrap button,.wh-today .eg-goal-more>summary{background:var(--hero-bg);border-color:var(--hero-ink);color:var(--hero-ink)}
.wh-today .eg-goal-wrap button[aria-pressed="true"],.wh-today .eg-goal-more>summary[data-on]{background:var(--hero-btn);border-color:var(--hero-btn);color:var(--hero-btn-ink)}
.wh-today :focus-visible{outline-color:var(--hero-ink)}
.wh-cards{display:grid;gap:12px}
/* ≥760px 兩欄等高，主按鈕推到卡片底部（.wh-actions margin-top:auto），兩張卡的按鈕在同一條線上 */
@media (min-width:760px){.wh-cards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}}
.wh-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink)}
.wh-card p{margin:0}
.wh-kicker{font-size:13px;font-weight:700;color:var(--accent-dark)}
.wh-title{margin:0;font-size:20px;line-height:1.3;overflow-wrap:anywhere}
.wh-title .preview-tag{display:inline-block;margin:0 0 0 6px;padding:2px 8px;font-size:12px;vertical-align:middle}
.wh-num{font-size:26px;font-weight:700;line-height:1.3}
.wh-sub{font-size:14px;color:var(--muted)}
.wh-line{font-size:15px}
.wh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0 0}
.wh-stats div{display:flex;flex-direction:column-reverse;align-items:center;gap:2px;padding:8px 4px;border-radius:10px;background:var(--accent-soft);color:var(--accent-dark);text-align:center}
.wh-stats dt{font-size:12.5px;line-height:1.3}
.wh-stats dd{margin:0;font-size:20px;font-weight:700;line-height:1.2}
.wh-fam{margin:4px 0}
.wh-exams{margin:4px 0}
.wh-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:8px}
.wh-review{margin:0;font-size:13.5px;color:var(--muted)}
/* /words/ 首頁改版（「單字首頁提案」v3）：今天橫幅／訪客主視覺（--hero-*）、我的單字卡、考試單字包、其他背法、怎麼背。只用配色 token */
.wh-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:20px;border-radius:20px;background:var(--hero-bg);color:var(--hero-ink)}
.wh-hero p{margin:0;color:inherit}
.wh-hero :focus-visible{outline:2px solid var(--hero-ink);outline-offset:2px}
.wh-hero-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.wh-hero-title{margin:0;font-size:26px;line-height:1.3;color:var(--hero-ink);overflow-wrap:anywhere}
.wh-hero-sub{font-size:15px;line-height:1.7}
.wh-kicker-hero,.wh-today-date{font-size:13px;font-weight:700;letter-spacing:.04em}
.wh-hero .td-start,.wh-cta{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;width:auto;min-height:48px;padding:0 22px;border:0;border-radius:24px;background:var(--hero-btn);color:var(--hero-btn-ink);font-weight:700;font-size:16px;text-decoration:none}
.wh-hero .td-start:hover,.wh-hero .td-start:focus-visible,.wh-cta:hover,.wh-cta:focus-visible{background:var(--hero-btn);color:var(--hero-btn-ink);text-decoration:underline}
.wh-hero .td-done[aria-disabled="true"]{align-self:flex-start;width:auto;min-height:48px;padding:0 22px;border:1px solid var(--hero-ink);border-radius:24px;background:var(--hero-bg);color:var(--hero-ink)}
.wh-chips,.wh-checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.wh-chips li{padding:3px 10px;border:1px solid var(--hero-ink);border-radius:999px;font-size:13px;font-weight:600}
.wh-checks{gap:6px 16px;font-size:14px;font-weight:600}
.wh-checks li::before{content:"✓ "}
.wh-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.wh-hero-link{display:inline-flex;align-items:center;min-height:44px;color:var(--hero-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wh-hero-link:hover,.wh-hero-link:focus-visible{color:var(--hero-ink);text-decoration-thickness:2px}
.wh-hero-note{font-size:13px}
.wh-hero-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.wh-today-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.wh-today-stats div{display:flex;flex-direction:column-reverse;align-items:center;gap:2px;padding:10px 4px;border-radius:12px;background:var(--hero-btn);color:var(--hero-btn-ink);text-align:center}
.wh-today-stats dt{font-size:12.5px;line-height:1.3}
.wh-today-stats dd{margin:0;font-size:20px;font-weight:700;line-height:1.2}
.wh-hero .td-legend{color:var(--hero-ink)}
.wh-hero .td-bar{border-color:var(--hero-ink)}
.wh-today-hero .td-adjust{grid-column:1/-1;border-top:1px solid var(--hero-ink)}
.wh-today-hero .td-adjust>summary,.wh-today-hero .td-adjust-link,.wh-today-hero .td-goal-now,.wh-today-hero .td-adjust-body .eg-label{color:var(--hero-ink)}
.wh-today-hero .eg-goal-wrap button,.wh-today-hero .eg-goal-more>summary{background:var(--hero-bg);border-color:var(--hero-ink);color:var(--hero-ink)}
.wh-today-hero .eg-goal-wrap button[aria-pressed="true"],.wh-today-hero .eg-goal-more>summary[data-on]{background:var(--hero-btn);border-color:var(--hero-btn);color:var(--hero-btn-ink)}
.wh-demo{display:none}
@media (min-width:860px){
  .wh-hero{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;padding:32px 36px}
  .wh-hero-title{font-size:34px}
  .wh-demo{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:16px;background:var(--surface);color:var(--ink);pointer-events:none;user-select:none}
}
.wh-demo p{color:var(--ink)}
.wh-demo .wh-demo-kicker,.wh-demo .wh-demo-ipa{font-size:13px;font-weight:700;color:var(--muted)}
.wh-demo-word{font-size:30px;font-weight:700;line-height:1.2}
.wh-demo-zh{font-size:16px}
.wh-demo-pos{font-weight:700;color:var(--accent-dark)}
.wh-demo-ex{font-size:14px;line-height:1.6}
.wh-demo-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.wh-demo-btns span{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:12px;font-weight:700}
.wh-demo-btns span:last-child{border-color:var(--tip-line);background:var(--tip-bg);color:var(--tip-ink)}
.wh-sec-head{display:flex;flex-direction:column;gap:4px;margin:0 0 10px}
.wh-h2{margin:0;font-size:22px}
.wh-sec-sub{margin:0;font-size:14px;color:var(--muted)}
.wh-mine-row{list-style:none;margin:0;padding:0 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
@media (min-width:760px){.wh-mine-row{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}}
.wh-mc{display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);scroll-snap-align:start}
.wh-mc p{margin:0}
.wh-mc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.wh-mc-kind{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:12.5px;font-weight:700;color:var(--accent-dark)}
.wh-mc-tag{padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-size:12px}
.wh-mc-name{margin:0;font-size:17px;line-height:1.35;overflow-wrap:anywhere}
.wh-mc-ctx{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.wh-mc-due{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.wh-mc-due b{font-size:28px;line-height:1.1}
.wh-mc-due span{font-size:13px;color:var(--muted)}
.wh-mc-due.is-done b{font-size:17px;color:var(--accent-dark)}
.wh-mc-known{font-size:13px;color:var(--muted)}
.wh-mc-bar{display:block;height:6px;border-radius:999px;overflow:hidden;background:var(--line-soft)}
.wh-mc-bar span{display:block;height:100%;background:var(--tip-ink)}
.wh-mc-go{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:auto;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none}
.wh-mc-go:hover,.wh-mc-go:focus-visible{color:var(--on-accent);text-decoration:underline}
.wh-mine-more{margin-top:10px}
.wh-mine-more>summary{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--accent-dark);cursor:pointer}
.wh-mine-more[open]>summary{margin-bottom:8px}
.wh-pills{display:flex;flex-wrap:wrap;gap:8px}
.wh-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.wh-pill:hover,.wh-pill:focus-visible{border-color:var(--accent);color:var(--ink)}
@media (min-width:760px){.wh-packs-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px}}
.wh-free{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0 0 16px}
@media (min-width:760px){.wh-free{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wh-free-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink)}
.wh-free-card p{margin:0}
.wh-free-title{margin:0;font-size:20px}
.wh-free-meta{font-size:14px;font-weight:700;color:var(--accent-dark)}
.wh-free-desc{font-size:14px;line-height:1.6;color:var(--muted)}
.wh-notify{margin:0}
.wh-btn{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:44px;padding:0 18px;border:1px solid var(--accent);border-radius:22px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.wh-btn:hover,.wh-btn:focus-visible{color:var(--on-accent);text-decoration:underline}
.wh-btn-line{background:var(--surface);color:var(--accent-dark)}
.wh-btn-line:hover,.wh-btn-line:focus-visible{color:var(--accent-dark)}
.wh-btn-line.is-on{background:var(--accent);color:var(--on-accent)}
.wh-cat{margin:0 0 16px;scroll-margin-top:12px}
.wh-cat-title{margin:0 0 8px;font-size:17px}
.wh-pack-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wh-pack-grid>li:nth-child(n+5){display:none}
@media (min-width:760px){.wh-pack-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.wh-pack-grid>li:nth-child(n+5){display:block}}
.wh-pack{display:flex;flex-direction:column;gap:4px;height:100%;min-height:44px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none}
a.wh-pack:hover,a.wh-pack:focus-visible{border-color:var(--accent);color:var(--ink)}
.wh-pack-title{font-size:15px;font-weight:700;overflow-wrap:anywhere}
.wh-pack-small{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.wh-pack-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:4px}
.wh-pack-level,.wh-pack-soon{padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600}
.wh-pack-level{background:var(--accent-soft);color:var(--accent-dark)}
.wh-pack-soon{background:var(--warn-bg);color:var(--warn-ink)}
.wh-pack-all{margin:0}
.wh-ways-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px}
@media (min-width:760px){.wh-ways-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wh-way{display:flex;flex-direction:column;gap:4px;min-height:44px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);text-decoration:none}
.wh-way:hover,.wh-way:focus-visible{border-color:var(--accent);color:var(--ink)}
.wh-way-title{font-size:17px;font-weight:700}
.wh-way-meta{font-size:14px;color:var(--muted)}
.wh-how{padding:16px;border-radius:16px;background:var(--accent-soft);color:var(--accent-dark)}
.wh-how .wh-h2{color:var(--accent-dark)}
.wh-how-steps{list-style:none;margin:10px 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:760px){.wh-how-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wh-how-steps li{display:flex;flex-direction:column;gap:2px}
.wh-how-steps span{font-size:14px}
.wh-how-days{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:14px}
.wh-day{padding:2px 10px;border-radius:999px;background:var(--surface);color:var(--accent-dark);font-weight:700}
/* 「怎麼背」收進 <details>（課本單字頁的登入版、考試首頁） */
.ww-how-fold>summary,.eg-how>summary{display:flex;align-items:center;min-height:44px;font-weight:700;cursor:pointer}
/* 課本單字頁的「怎麼背」預設收合：右邊 ⌄，展開時轉向 */
.ww-how-fold>summary{list-style:none;gap:12px}
.ww-how-fold:not([open]){gap:0}  /* 收合時 Chrome 仍把隱藏的內容算成一個 flex 項目，多出一段 gap，看起來像空卡 */
.ww-how-fold>summary::-webkit-details-marker{display:none}
.ww-how-title{flex:1;min-width:0}
.ww-how-fold[open]>summary .ww-chev{transform:rotate(45deg)}
.eg-how .ww-steps,.ww-how-fold .ww-steps{margin-top:4px}
/* 單字牆（訪客版 /words/）與詞書、考試字表的列（訪客版、使用者版共用），前綴 ww-。只用配色 token，四套配色都適用。
   牆：手機 3 欄、≥760px 4 欄，一次 12 張；篩選列與「換一批」有 JS 才打開（hidden），v6.js 加上 .js-flip 後才藏中文，點一下翻面 */
.ww-page{display:flex;flex-direction:column;gap:10px}
.ww-page h2{line-height:1.3}
.ww-head h1{margin:0}
.ww-total{margin:0;font-size:17px;font-weight:700}
.ww-subj{background:var(--subj-other-bg);color:var(--subj-other-ink)}
.ww-subj.subj-ENG{background:var(--subj-eng-bg);color:var(--subj-eng-ink)}
.ww-subj.subj-MATH{background:var(--subj-math-bg);color:var(--subj-math-ink)}
.ww-subj.subj-SCI{background:var(--subj-sci-bg);color:var(--subj-sci-ink)}
.ww-subj.subj-SOC{background:var(--subj-soc-bg);color:var(--subj-soc-ink)}
.ww-subj.subj-CHI{background:var(--subj-chi-bg);color:var(--subj-chi-ink)}
.ww-subj.subj-ELEC{background:var(--subj-elec-bg);color:var(--subj-elec-ink)}
.ww-filter{display:flex;gap:8px;margin-bottom:6px;padding-bottom:2px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.ww-filter::-webkit-scrollbar{display:none}
.ww-filter[hidden],.ww-shuffle[hidden]{display:none}
.ww-chip{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--chip-line);border-radius:22px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.ww-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ww-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@media (min-width:760px){.ww-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}}
.ww-grid li{display:flex;min-width:0}
.ww-card{width:100%;min-width:0;min-height:56px;padding:6px;border:0;border-radius:10px;font:inherit;font-size:14px;line-height:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;overflow-wrap:anywhere;cursor:pointer}
.ww-card .ww-en{font-weight:600;hyphens:auto}
.ww-grid.js-flip .ww-card:not(.flipped) .ww-zh,.ww-grid.js-flip .ww-card.flipped .ww-en{display:none}
.ww-grid.js-flip .ww-card.flipped .ww-zh{font-weight:600}
.ww-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.ww-hint{margin:0;font-size:13.5px;color:var(--muted)}
.ww-shuffle{flex:none;min-height:44px}
.ww-try-row{margin:0}
.ww-try{min-height:48px;display:flex;align-items:center;justify-content:center}
.ww-how h2{margin:0 0 2px;font-size:17px}
.ww-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:ww-step}
.ww-steps li{display:flex;align-items:center;gap:10px;counter-increment:ww-step}
.ww-steps li::before{content:counter(ww-step);flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--accent-soft);color:var(--accent-dark)}
.ww-review{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
/* 列：考試字表（整列是連結）、詞書分組（<details> 的 summary）。左邊科目色方塊、名稱、數字、右邊 › */
.ww-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ww-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer}
a.ww-row:hover{border-color:var(--accent);color:var(--ink)}
.ww-sq{flex:none;width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.ww-name{flex:1;min-width:0;font-size:16px;font-weight:700;overflow-wrap:anywhere}
.ww-name .preview-tag{display:inline-block;margin:0 0 0 6px;padding:2px 8px;font-size:12px}
.ww-meta{flex:none;font-size:13.5px;color:var(--muted)}
.ww-chev{flex:none;width:8px;height:8px;margin:0 4px 0 2px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.word-group[open]>summary .ww-chev{transform:rotate(45deg)}
@media (prefers-reduced-motion: reduce){.ww-chev{transition:none}}
/* 頁尾：想記住進度（申請試用＋建立家長帳號，最多兩個按鈕） */
.ww-page .word-books{margin:0;gap:6px}
.ww-page .word-books h2{font-size:17px}
.ww-page .words-cta{margin:0;padding:10px 14px 12px}
.ww-page .words-cta h2{margin:0 0 6px;font-size:16px}
.ww-cta-actions{display:flex;flex-wrap:wrap;gap:8px}
.ww-cta-actions .trial-cta{display:contents}
.ww-cta-actions .trial-cta a[target="_blank"]{display:none}
/* 發音鈕：瀏覽器能唸（v6.js）才拿掉 hidden */
.say-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:6px;vertical-align:middle;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--accent);cursor:pointer;flex:none}
.say-btn[hidden]{display:none}
.wc-ex{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
/* 新字卡片：兩面疊在同一格（高度取較高的一面），翻面不改變高度，下面的按鈕位置固定 */
.flashcard{display:grid;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 18px;margin:12px 0;min-height:220px}
.flashcard .fc-face{grid-area:1/1;display:flex;flex-direction:column;gap:8px}
.flashcard .fc-front{justify-content:center;align-items:center;text-align:center}
.flashcard.js-flip .fc-back,.flashcard.js-flip.flipped .fc-front{visibility:hidden}
.flashcard.js-flip.flipped .fc-back{visibility:visible}
.fc-word{margin:0;font-size:30px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.fc-word.small{font-size:22px;justify-content:flex-start}
.fc-back .wc-meaning{font-size:18px;margin:0}
.fc-flip{font:inherit;font-size:14px;color:var(--accent);background:none;border:none;padding:8px;cursor:pointer;text-decoration:underline}
.card-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}
.card-actions.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-actions .btn{width:100%;padding:0 8px;white-space:nowrap}
.card-actions .badge{align-self:center;justify-self:center}
.choose-words{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.choose-actions,.panel form.choose-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.choose-actions .btn{width:100%}
/* 試用申請（/trial/）：三段、honeypot 藏起來、done 頁覆蓋狀態 */
.trial-step{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0;display:flex;flex-direction:column;gap:12px}
.trial-step legend{font-weight:700;padding:0 6px}
.trial-step input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.trial-step select,.trial-step textarea{width:100%;max-width:100%;box-sizing:border-box}
.trial .lbl{font-weight:600}
.trial .choices{display:flex;flex-wrap:wrap;gap:6px 16px}
.trial .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.coverage{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.coverage li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.coverage .cov-status{font-weight:600;color:var(--muted)}
.coverage .cov-practice .cov-status{color:var(--accent-dark)}
.trial-cta{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.lesson-trial-cta{display:flex;justify-content:center;margin:24px 0}
/* 註冊入口：我是家長／我是家教老師 */
.role-pick{display:flex;flex-direction:column;gap:10px}
.role-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--chip-line);border-radius:10px;text-decoration:none;color:var(--ink);background:var(--surface)}
.role-card:hover,.role-card:focus-visible{border-color:var(--accent-dark)}
.role-card b{font-size:17px}
/* 新增孩子：內容語言每個選項下面一行說明 */
.field label.radio .help{display:block;margin:2px 0 6px 24px}
/* 學習專欄（/learn/）、關於頁 */
.learn-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.learn-filter a.chip-btn{text-decoration:none}
.learn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.learn-list h2{font-size:18px;margin:0;line-height:1.4}
.learn-list p{margin:0;line-height:1.7}
.learn-lang{margin:0 0 12px}
.learn-article h1{font-size:26px;line-height:1.35;margin:0 0 4px}
.learn-body{line-height:1.8}
.learn-body h2{font-size:20px;margin:24px 0 8px}
.learn-body h3{font-size:17px;margin:20px 0 6px}
.learn-body ul,.learn-body ol{padding-left:22px}
.learn-body blockquote{margin:12px 0;padding:8px 16px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0}
.learn-body table{border-collapse:collapse;width:100%;font-size:14px;display:block;overflow-x:auto}
.learn-body th,.learn-body td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.learn-body th{color:var(--muted);font-weight:600}
.learn-related{margin-top:16px}
.learn-related h2{font-size:18px;margin:0}
.learn-related ul{margin:0;padding-left:22px}
.about p{line-height:1.8}


.school-plain{display:flex;align-items:center;gap:8px;margin:0;font-weight:600}
.school-plain .school-label{color:var(--muted);font-weight:500}
.chip.this-term{background:var(--accent-soft);color:var(--accent-dark)}
/* 學生首頁：錯題卡、書齋那一列；課本頁底部的書齋連結 */
.sh-wrong{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;margin:0 0 16px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;color:var(--ink);text-decoration:none}
.sh-wrong:hover,.sh-wrong:focus-visible{border-color:var(--accent);color:var(--ink)}
.sh-wrong-text{font-weight:700;overflow-wrap:anywhere}
.sh-wrong-go{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:22px;background:var(--accent);color:var(--on-accent);font-weight:600}
.sh-wrong.is-empty{background:var(--line-soft);color:var(--muted)}
.sh-wrong.is-empty .sh-wrong-text{font-weight:500}
.sh-row{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none}
.sh-row:hover,.sh-row:focus-visible{border-color:var(--accent);color:var(--ink)}
.sh-row-icon{flex:none;color:var(--accent)}
.sh-row-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.sh-row-text b{font-size:16px}
.sh-row-text span{color:var(--muted);font-size:14px}
.sh-week .sh-books-head a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.books-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/* 註冊頁三張卡（accounts/register_choose.html） */
/* 註冊選身分（accounts/register_choose.html）：手機＝身分方塊 2 欄；≥900px＝左欄價值卡＋右欄橫向身分卡。身分卡只有一份 HTML，靠 CSS 切換 */
.rg-value{display:none}
.rg-wide{display:none}
.rg-main h1,.rg-main>.sub{text-align:center}
.rg-roles{list-style:none;margin:20px 0 16px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.rg-roles li{display:flex;min-width:0}
.rg-role{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;min-height:44px;padding:14px;border:1px solid var(--chip-line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none}
.rg-role:hover,.rg-role:focus-visible{border-color:var(--accent-dark);color:var(--ink)}
.rg-role.is-recommended{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-soft)}
.rg-role-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent-dark)}
.rg-role.is-recommended .rg-role-ico{background:var(--surface)}
.rg-role-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.rg-role-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rg-role-title b{font-size:16px}
.rg-tag{padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;line-height:1.5}
.rg-role-desc{color:var(--muted);font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.rg-role-rest,.rg-arrow{display:none}
.rg-links{text-align:center;color:var(--muted)}
.rg-links a{display:inline-flex;align-items:center;min-height:44px}
.rg-trial{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding:16px;border-radius:14px;background:var(--accent-soft);color:var(--ink)}
.rg-trial p{margin:0;font-weight:600}
.rg-faq h2{margin:28px 0 8px;font-size:18px}
@media (min-width:900px){
  main:has(> .rg-page){max-width:1120px}
  .rg-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:start}
  .rg-value{display:flex;flex-direction:column;gap:18px;padding:36px;border-radius:24px;background:var(--hero-bg);color:var(--hero-ink)}
  .rg-brand{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .rg-value-title{margin:0;font-size:30px;line-height:1.25;color:var(--hero-ink)}
  .rg-value-sub{margin:0;font-size:16px;line-height:1.6}
  .rg-points{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
  .rg-points li{display:flex;align-items:flex-start;gap:12px}
  .rg-points li>span:last-child{display:flex;flex-direction:column;gap:2px;line-height:1.5}
  .rg-point-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--hero-btn);color:var(--hero-btn-ink)}
  .rg-sample{margin-top:8px;padding:16px;border-radius:16px;background:var(--surface);color:var(--ink)}
  .rg-sample-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 10px;font-weight:700}
  .rg-sample-tag{padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-size:12px;font-weight:700}
  .rg-bar{display:block;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
  .rg-bar i{display:block;width:71%;height:100%;border-radius:999px;background:var(--accent)}
  .rg-sample-stats{display:flex;gap:16px;margin:10px 0 0;color:var(--muted);font-size:14px}
  .rg-wide{display:inline}
  .rg-narrow{display:none}
  .rg-main h1,.rg-main>.sub{text-align:left}
  .rg-roles{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .rg-role{flex-direction:row;align-items:center;gap:14px;padding:16px 18px}
  .rg-role-text{flex:1}
  .rg-role-rest{display:inline}
  .rg-arrow{display:block;flex:none;margin-left:auto;color:var(--muted)}
  .rg-links{text-align:left}
}
.rg-trial .trial-cta{display:flex;flex-direction:column;gap:8px;margin:4px 0 0}
.rg-trial .trial-cta .btn{width:100%;min-height:44px}
/* 設定頁的等級列：480px 以下每一科直排一塊（科目＋目前等級 / 下拉 / 按鈕），桌機維持表格 */
.lv-action .btn{min-height:44px}
@media (max-width:480px){
  .lv-table,.lv-table tbody{display:block}
  .lv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lv-table .lv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .lv-table .lv-row td{display:block;padding:0;border:0}
  .lv-table .lv-subject{font-weight:600}
  .lv-table .lv-current{color:var(--muted);text-align:right}
  .lv-table .lv-action{grid-column:1 / -1}
  .lv-table .lv-action form.inline{flex-direction:column;align-items:stretch;gap:8px;width:100%}
  .lv-table .lv-action select,.lv-table .lv-action .btn{width:100%;min-height:44px}
}
/* 家教後台（accounts/tutor_*.html）與學生首頁的「家教指派」卡 */
.tu-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tu-pill{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:100%;padding:0 16px;border:1px solid var(--chip-line);border-radius:22px;background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.tu-pill.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tu-pill.tu-all{background:var(--accent-soft);color:var(--accent-dark);border-color:transparent}
.tu-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--todo)}
.tu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tu-head h2,.tu-head h3{overflow-wrap:anywhere}
.tu-reasons{list-style:none;margin:8px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tu-reasons li,.tu-why{display:inline-block;padding:2px 10px;border-radius:12px;background:var(--warn-bg);color:var(--warn-ink);font-size:13px;font-weight:600}
.tu-count{display:inline-block;min-width:1.6em;padding:0 8px;border-radius:12px;background:var(--accent-soft);color:var(--accent-dark);font-size:13px;text-align:center}
.tu-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.tu-row{display:flex;flex-direction:column;gap:4px;min-height:60px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none}
.tu-row:hover,.tu-row:focus-visible{border-color:var(--accent);color:var(--ink)}
.tu-row-name{font-weight:700;overflow-wrap:anywhere}
.tu-row-name small{margin-left:8px;color:var(--muted);font-weight:500}
.tu-row-nums,.tu-row-last{color:var(--muted);font-size:14px}
.tu-row-why{display:flex;flex-wrap:wrap;gap:6px}
.tu-row-locked{flex-direction:column}
.tu-invites{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tu-invites li{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tu-form{display:flex;flex-direction:column;gap:10px}
.tu-form .field input,.tu-form .field select,.tu-form .field textarea{width:100%;max-width:100%;min-height:44px}
.tu-form fieldset{border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.tu-form legend{padding:0 6px;color:var(--muted);font-size:13px}
.tu-assign-row{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.tu-assign-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tu-status{padding:2px 10px;border-radius:12px;background:var(--accent-soft);color:var(--accent-dark);font-size:13px;font-weight:600}
.tu-overdue .tu-status{background:var(--warn-bg);color:var(--warn-ink)}
.tu-done .tu-status{background:var(--tip-bg);color:var(--tip-ink)}
.tu-new{margin-top:12px}
.tu-new summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
.tu-history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tu-history a{display:flex;align-items:center;min-height:44px}
.tu-report-text{margin:0 0 12px;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;background:var(--learn-bg);border:1px solid var(--line);border-radius:12px;font:inherit;line-height:1.7}
.tu-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.tu-actions .btn{width:100%;min-height:44px}
.tu-children{border:0;margin:0 0 12px;padding:0}
.tu-child{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 0}
.tu-child.is-linked{color:var(--muted)}
.tu-invite .btn-row{display:flex;flex-direction:column;gap:8px}
.tu-invite .btn-row .btn{width:100%;min-height:44px}
.tu-summary .sc-nums,.tu-summary .sc-weak{margin-top:8px}
.sh-assign{display:flex;flex-direction:column;gap:4px;margin:0 0 16px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;color:var(--ink);text-decoration:none}
.sh-assign:hover,.sh-assign:focus-visible{border-color:var(--accent);color:var(--ink)}
.sh-assign-lbl{font-size:13px;font-weight:700;color:var(--muted)}
.sh-assign-title{font-weight:700;overflow-wrap:anywhere}
.sh-assign-meta,.sh-assign-count{color:var(--muted);font-size:14px}
.sh-assign-overdue .sh-assign-meta b{color:var(--warn-ink)}
.sh-assign-done .sh-assign-meta b{color:var(--tip-ink)}
.tu-summary .btn-small,.tu-assign .btn-small,.tu-invites .btn-small,.tu-plan .btn-small,.tu-locked .btn-small,.tu-report .btn-small{min-height:44px;display:inline-flex;align-items:center}
.tu-admin .btn-small,.tu-admin .btn{min-height:44px}
.tu-actions [hidden],.tu-copy-msg[hidden]{display:none !important}
.tu-head{flex-wrap:wrap}.tu-head .btn{flex:none;white-space:nowrap}


/* 練習的答對停留頁：大的英文讚美詞置中、上方打勾；Next 是主按鈕；解說收在「Why this is right」 */
.praise{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0 6px;text-align:center}
.praise-mark{color:var(--tip-ink)}
.praise-word{margin:0;font-size:34px;font-weight:700;line-height:1.2;color:var(--ink)}
.praise-actions{display:flex;justify-content:center;margin:14px 0 4px}
.praise-actions .btn{min-width:200px}
.praise-why{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:4px}
.praise-why>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--accent);font-weight:600}
.praise-why[open]>summary{margin-bottom:8px}
@media (max-width:520px){.praise-word{font-size:30px}.praise-actions .btn{width:100%}}
/* 頁尾（base.html）：深色手風琴。手機三組預設收起，≥760px 展開成三欄、不顯示箭頭；底色與字色用 hero token（四套配色各自驗過對比） */
.ft{max-width:1120px;margin:0 auto;padding:8px 24px 40px}
.ft a{color:var(--hero-ink);text-decoration:underline;text-underline-offset:3px}
.ft a:hover,.ft a:focus-visible{color:var(--hero-ink);text-decoration-thickness:2px}
.ft :focus-visible{outline-color:var(--hero-ink)}
.ft a.btn{text-decoration:none}
.ft a.btn-secondary{color:var(--accent)}
.ft a.btn:not(.btn-secondary){color:var(--on-accent)}
.ft-group{border-bottom:1px solid color-mix(in srgb,var(--hero-ink) 25%,transparent)}
.ft-group>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;list-style:none;font-size:15px;font-weight:700}
.ft-group>summary::-webkit-details-marker{display:none}
.ft-group>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--hero-ink);border-bottom:2px solid var(--hero-ink);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.ft-group[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.ft-group ul{list-style:none;margin:0;padding:0 0 8px}
.ft-group li a{display:flex;align-items:center;min-height:44px;font-size:15px}
.ft-base{padding-top:14px}
.ft-base .disclaimer,.ft-base .foot-help,.ft-mail{margin:0 0 6px;opacity:.9}
@media (min-width:760px){
  .ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:20px}
  .ft-group{border-bottom:0}
  .ft-group>summary{pointer-events:none;cursor:default;min-height:36px}
  .ft-group>summary::after{display:none}
  .ft-base{border-top:1px solid color-mix(in srgb,var(--hero-ink) 25%,transparent);margin-top:12px}
}
/* 精簡頁尾（catalog/_footer_slim.html）：六個對外頁以外的頁面；一行、和主內容同寬對齊 */
.ft-slim{background:var(--surface);border-top:1px solid var(--chip-line);color:var(--ink);font-family:'Noto Sans TC','IBM Plex Sans',system-ui,sans-serif}
.ft-slim-in{box-sizing:border-box;max-width:1120px;min-height:56px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:12px}
.ft-slim-brand{flex-shrink:0;font-size:13px;font-weight:700;color:var(--ink)}
.ft-slim-note{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted)}
.ft-slim-links{display:flex;flex-shrink:0;margin-left:auto}
.ft-slim-links a{position:relative;padding:0 10px;border-radius:8px;font-size:13px;font-weight:700;line-height:28px;color:var(--accent);text-decoration:none;white-space:nowrap}
.ft-slim-links a::before{content:"";position:absolute;inset:-8px 0}  /* 點擊區上下各多 8px（28 + 16 = 44px），底色不變胖 */
.ft-slim-links a:hover,.ft-slim-links a:focus-visible{background:var(--accent-soft)}
@media (max-width:720px){
  /* 手機仍是一行：英文四個連結在 390px 只剩約 305px，左右 padding 縮成 4px（等距排開，hover 底色仍圓角） */
  .ft-slim-in{padding:12px 16px;gap:4px}
  .ft-slim-note{display:none}
  .ft-slim-links{flex:1;justify-content:space-between;margin-left:4px}
  .ft-slim-links a{padding:0 4px;font-size:12px}
}
@media (max-width:380px){
  .ft-slim-in{padding:12px}
  .ft-slim-links a{padding:0 2px;font-size:min(11px,3.05vw)}
}
/* 聯絡我們（leads/contact*.html） */
.ct .ct-kinds{border:0;margin:0 0 12px;padding:0;min-width:0}
.ct-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ct-card{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border:1px solid var(--chip-line);border-radius:12px;background:var(--surface);cursor:pointer}
.ct-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark);font-weight:600}
.ct-card input{width:20px;height:20px;flex:none}
.ct fieldset.field{border:0;padding:0;min-width:0}
.ct .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ct-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ct-role{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border:1px solid var(--chip-line);border-radius:12px;background:var(--surface);cursor:pointer;font-size:15px}
.ct-role:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark);font-weight:600}
.ct-role input{width:20px;height:20px;flex:none;margin:0}
.ct-card input,.ct-role input{accent-color:var(--accent)}
.ct textarea{width:100%;max-width:100%}
.ct-count{display:flex;justify-content:space-between;gap:12px}
.ct-warn{margin:0 0 12px}
.ct-preview{margin:0 0 12px;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;background:var(--learn-bg);border:1px solid var(--line);border-radius:12px;font:inherit;line-height:1.7}
.ct-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.ct-code-big{margin:0 0 8px;font-size:28px;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--accent-dark);overflow-wrap:anywhere}
.ct-actions{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.ct-actions .btn{min-height:48px;width:100%}
.ct-line{background:var(--brand-line);border-color:var(--brand-line);color:var(--brand-line-ink)}
.ct-line:hover,.ct-line:focus-visible{background:var(--brand-line);color:var(--brand-line-ink);filter:brightness(.95)}
.ct-edit{margin-top:8px}
.ct-copy-msg[hidden]{display:none !important}
/* LINE 按鈕的品牌色：只在這裡定義一次，四套配色共用（對比檢查見 catalog/tests/test_theme_contrast.py） */
:root{--brand-line:#06C755;--brand-line-ink:#111111}

/* 家長首頁（_status_card.html，前綴 pc-）與每週報告（parent_week.html，前綴 pw-）：只用 var(--…)，四套配色共用 */
.status-card{gap:14px}
.pc-head{display:flex;align-items:center;gap:12px}
.pc-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;background:var(--accent-soft);color:var(--accent-dark)}
.pc-who{flex:1;min-width:0}
.pc-who h2{overflow-wrap:anywhere}
.pc-who .sub{color:var(--muted);font-size:14px}
.pc-gear{margin-left:auto}
.pc-nums .sc-nums{margin:0}
.pc-nums .sc-nums div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 4px}
.pc-nums .sc-nums dd{color:var(--accent-dark);font-size:26px}
.pc-nums .sc-nums .is-low dd{color:var(--warn-ink)}
.pc-days-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.status-card h3,.pw h3{font-size:15px;margin:0}
.pc-days .sc-days{grid-template-columns:repeat(7,minmax(0,1fr))}
.pc-days .sc-day{height:auto;min-height:44px;border-radius:50%;aspect-ratio:1;justify-self:center;width:100%;max-width:52px}
.pc-days .sc-day.on{background:var(--accent);color:var(--on-accent)}
.pc-days .sc-day.today{background:var(--surface);color:var(--accent-dark);outline:2px solid var(--accent);outline-offset:-2px}
.pc-days .sc-day.today.on{background:var(--accent);color:var(--on-accent)}
.pc-weak{display:flex;flex-direction:column;gap:8px}
.pc-weak .sc-weak{margin:0}
.pc-weak .sc-weak li{align-items:center;flex-wrap:nowrap;gap:10px}
.pc-weak-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pc-weak-main .sc-weak-name{flex:none}
.pc-weak .sc-weak small{flex-basis:auto}
.pc-wrong{background:var(--line-soft)!important;color:var(--ink)!important}
.pc-subj,.pw-subj{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--subj-other-bg);color:var(--subj-other-ink)}
.pc-subj.subj-ENG,.pw-subj.subj-ENG{background:var(--subj-eng-bg);color:var(--subj-eng-ink)}
.pc-subj.subj-MATH,.pw-subj.subj-MATH{background:var(--subj-math-bg);color:var(--subj-math-ink)}
.pc-subj.subj-SCI,.pw-subj.subj-SCI{background:var(--subj-sci-bg);color:var(--subj-sci-ink)}
.pc-subj.subj-SOC,.pw-subj.subj-SOC{background:var(--subj-soc-bg);color:var(--subj-soc-ink)}
.pc-subj.subj-CHI,.pw-subj.subj-CHI{background:var(--subj-chi-bg);color:var(--subj-chi-ink)}
.pc-subj.subj-ELEC,.pw-subj.subj-ELEC{background:var(--subj-elec-bg);color:var(--subj-elec-ink)}
.pc-books{display:flex;flex-direction:column;gap:8px}
.pc-actions{display:flex;flex-direction:column;gap:8px}
.pc-actions .btn{width:100%}

.pw{display:flex;flex-direction:column;gap:14px;width:100%}
.pw-kids{display:flex;flex-wrap:wrap;gap:8px}
.pw-kids a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.pw-kids a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pw-kids a.pw-add{border-style:dashed;color:var(--accent-dark)}
.pw-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.pw-head h1{margin:0}
.pw-week{display:flex;align-items:center;gap:4px}
.pw-range{min-width:8.5em;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.pw-step{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--accent-dark);text-decoration:none;font-size:24px;line-height:1}
.pw-step:hover,.pw-step:focus-visible{border-color:var(--accent)}
.pw-step.is-off{visibility:hidden}
.pw-card{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;color:var(--ink)}
.pw-card h2{margin:0;font-size:18px}
.pw-verdict-head{display:flex;align-items:center;gap:10px}
.pw-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--muted)}
.pw-verdict.is-good .pw-dot{background:var(--tip-ink)}
.pw-verdict.is-warn .pw-dot{background:var(--warn-ink)}
.pw-verdict.is-ok .pw-dot{background:var(--accent)}
.pw-summary{margin:0;color:var(--muted);line-height:1.55}
.pw-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.pw-nums div{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:2px;min-height:78px;padding:8px 4px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-align:center}
.pw-nums dd{margin:0;font-size:28px;font-weight:700;line-height:1.1;color:var(--accent-dark)}
.pw-nums dt{font-size:12.5px;font-weight:600;color:var(--muted)}
.pw-day{display:flex;flex-direction:column;gap:6px}
.pw-day h3{color:var(--muted)}
.pw-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pw-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;border-radius:14px;background:var(--line-soft)}
.pw-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pw-row-main b{overflow-wrap:anywhere}
.pw-row-main small{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.pw-steps{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.pw-steps a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.pw-tutor h2{font-size:16px}
.pw-note{line-height:1.6;overflow-wrap:anywhere}
.pw-foot{margin:0}
.pw-foot a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
@media (min-width:900px){
  .pw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .pw>.pw-kids,.pw>.pw-head,.pw>.pw-verdict,.pw>.pw-foot,.pw>.panel{grid-column:1/-1}
  .pc-actions{flex-direction:row}
  .pc-actions .btn{width:auto;flex:1}
}

/* 設定頁的家教清單（settings.html、child_settings.html）：長 email 可斷行，徽章與按鈕不縮、不超出卡片 */
.bind-list{list-style:none;margin:0;padding:0;width:100%;min-width:0}
.bind-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;padding:8px 10px;border-bottom:1px solid var(--line-soft)}
.bind-name{flex:1 1 12em;min-width:0;overflow-wrap:anywhere}
.bind-row .badge{flex:none}
.bind-remove{flex:none;margin:0 0 0 auto}
.bind-row .btn{min-height:44px}

/* 翻牌數字（單字牆字數）：牌底與數字只用 hero 配色 token，四套配色的對比同 banner；大小全用 em，跟著外層字級 */
/* 每張牌同寬（.74em）：Plex／Noto Sans TC 粗體數字寬 .60／.59em，備用字型最寬約 .68em，都放得下並置中；牌與牌、牌與符號一律 .08em */
.fl-num{display:inline-flex;align-items:center;gap:.08em;vertical-align:middle;font-size:1.3em;line-height:1;font-variant-numeric:tabular-nums}
.fl-card{position:relative;display:inline-block;flex:none;width:.74em;height:1.2em;border-radius:6px;background:var(--hero-bg);color:var(--hero-ink);text-align:center;line-height:1.2em;overflow:hidden;perspective:6em}
.fl-card::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:color-mix(in srgb,var(--hero-ink) 35%,transparent);z-index:3}
.fl-sym{font-size:.7em;font-weight:700;align-self:flex-end;padding-bottom:.1em}
/* 逗號：淡字、窄（.3em）、貼齊牌的底線；加號：和牌同一條中線、約數字的 .8 倍、和牌同色（深色系三套 hero-bg 太接近底色，改用 accent-dark 才有 4.5:1） */
.fl-sym.comma{flex:none;width:.375em;font-size:.8em;line-height:1;padding:0;text-align:center;color:var(--muted)}
.fl-sym.plus{flex:none;align-self:center;font-size:.8em;line-height:1;padding:0;color:var(--hero-bg)}
:root[data-theme="night"] .fl-sym.plus,:root[data-theme="lavender"] .fl-sym.plus,:root[data-theme="guava"] .fl-sym.plus{color:var(--accent-dark)}
.fl-d,.fl-h{position:absolute;inset:0}
.fl-h{backface-visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  .fl-run .fl-flip .fl-d{clip-path:inset(0 0 50% 0)}
  .fl-run .fl-old{clip-path:inset(50% 0 0 0)}
  .fl-run .fl-front{clip-path:inset(0 0 50% 0);animation:fl-front .225s ease-in both;animation-delay:var(--fl-delay)}
  .fl-run .fl-back{clip-path:inset(50% 0 0 0);animation:fl-back .225s ease-out both;animation-delay:calc(var(--fl-delay) + .225s)}
}
@keyframes fl-front{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
@keyframes fl-back{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}

/* 上方導覽列（≥721px，分頁在上方）：分頁文字不換行、返回連結至少留約 8 個中文字、品牌與帳號區不被擠出畫面。
   721–1023px 只顯示分頁圖示（文字視覺隱藏、留給螢幕閱讀器，連結另有 title）；≥1024px 圖示＋文字。 */
@media (min-width:721px){
  .site-tabs a,.site-tabs a span{white-space:nowrap}
  .site-tabs a{flex:none;position:relative;min-height:44px}
  .brand,.topbar-inner .acct{flex:none}
  .topbar-inner .acct{flex-wrap:nowrap;white-space:nowrap}
  .back{min-width:calc(8em + 24px)}
}
@media (min-width:721px) and (max-width:1279px){
  .topbar-inner{gap:16px}
  .site-tabs{margin-left:0;gap:2px}
}
.site-tabs .tab-tip{display:none}
@media (min-width:721px) and (max-width:1023px){
  .site-tabs .tab-tip{display:block;position:absolute;inset:0}
  .site-tabs a{justify-content:center;min-width:44px;padding:6px 10px}
  .site-tabs a span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
}

/* 家教首頁（tutor_home.html，前綴 tc-）與學生頁（tutor_student.html，前綴 ts-）：只用 var(--…)，四套配色共用 */
.tc,.ts{display:flex;flex-direction:column;gap:14px;width:100%}
.tc-head h1{margin:0}
.tc-sub{margin:4px 0 0;color:var(--muted)}
.tc-big{display:flex;flex-direction:column;gap:10px}
.tc-big-btn{min-height:72px;border-radius:18px;font-size:17px;text-align:center}
.tc-block{display:flex;flex-direction:column;gap:8px}
.tc-block h2{margin:0;font-size:18px}
.tc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tc-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none}
a.tc-row:hover,a.tc-row:focus-visible{border-color:var(--accent);color:var(--ink)}
.tc-avatar{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--accent-soft);color:var(--accent-dark)}
.tc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tc-name{font-weight:700;overflow-wrap:anywhere}
.tc-name small{margin-left:8px;color:var(--muted);font-weight:500}
.tc-why{color:var(--warn-ink);font-size:14px;font-weight:600}
.tc-weak,.tc-nums{color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.tc-chev{flex:none;font-size:24px;color:var(--muted);line-height:1}
.tc-attn{border-color:var(--warn-ink)}
.tc-attn .tc-avatar{background:var(--warn-bg);color:var(--warn-ink)}
.tc-pending{border-style:dashed;background:transparent}
.tc-more{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.tc-link,.tc-plan{gap:10px}
.tc-seats{margin:0;font-weight:600}
.tc-bar{height:8px;border-radius:4px;background:var(--line-soft);overflow:hidden}
.tc-bar span{display:block;height:100%;background:var(--accent)}
.tc-manage{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.tc-link .btn-small{min-height:44px}

.ts-hero{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:18px;background:var(--hero-bg);color:var(--hero-ink)}
.ts-hero-lbl{font-size:13px;font-weight:700;opacity:.9}
.ts-hero h2{margin:0;font-size:22px;color:inherit;overflow-wrap:anywhere}
.ts-hero h2 small{margin-left:10px;font-size:14px;font-weight:500;opacity:.85}
.ts-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.ts-nums div{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:2px;min-height:76px;padding:8px 4px;border-radius:14px;background:var(--surface);color:var(--ink);text-align:center}
.ts-nums dd{margin:0;font-size:26px;font-weight:700;line-height:1.1;color:var(--accent-dark)}
.ts-nums .is-low dd{color:var(--warn-ink)}
.ts-nums dt{font-size:12.5px;font-weight:600;color:var(--muted)}
.ts-reasons{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ts-reasons li{padding:2px 10px;border-radius:12px;background:var(--warn-bg);color:var(--warn-ink);font-size:13px;font-weight:600}
.ts-card{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;color:var(--ink)}
.ts-card h2{margin:0;font-size:18px}
.ts-card h3{margin:6px 0 0;font-size:15px}
.ts-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.ts-head h2 small{margin-left:6px;font-size:13px;font-weight:500;color:var(--muted)}
.ts-week{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-dark)}
.ts-first3{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ts-first3 li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:14px;background:var(--line-soft)}
.ts-no{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--accent);color:var(--on-accent)}
.ts-first3-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ts-first3-main b{overflow-wrap:anywhere}
.ts-first3-main small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.ts-pct{flex:none;font-weight:700;color:var(--warn-ink)}
.ts-wrong summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 14px;border:1px solid var(--line);border-radius:14px;background:var(--line-soft);cursor:pointer;font-weight:700}
.ts-wrong summary::-webkit-details-marker{display:none}
.ts-wrong summary>span:first-child{flex:1;min-width:0}
.ts-sub{color:var(--muted);font-size:13px;font-weight:500}
.ts-wrong[open] .tc-chev{transform:rotate(90deg)}
.ts-wrong .pr-wrong-list{margin-top:12px}
.ts-auto{background:var(--accent-soft);border-color:transparent}
.ts-auto legend{color:var(--accent-dark)}
.ts-preview{display:flex;flex-direction:column;gap:8px}
.ts-add{flex:none}
.ts-add[open]{flex-basis:100%}
.ts-add summary{list-style:none;display:inline-flex;min-height:44px}
.ts-add summary::-webkit-details-marker{display:none}
.ts-assign-row{display:flex;flex-direction:row;gap:12px;align-items:flex-start}
.ts-assign-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ts-subj{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--subj-other-bg);color:var(--subj-other-ink)}
.ts-subj.subj-ENG{background:var(--subj-eng-bg);color:var(--subj-eng-ink)}
.ts-subj.subj-MATH{background:var(--subj-math-bg);color:var(--subj-math-ink)}
.ts-subj.subj-SCI{background:var(--subj-sci-bg);color:var(--subj-sci-ink)}
.ts-subj.subj-SOC{background:var(--subj-soc-bg);color:var(--subj-soc-ink)}
.ts-subj.subj-CHI{background:var(--subj-chi-bg);color:var(--subj-chi-ink)}
.ts-subj.subj-ELEC{background:var(--subj-elec-bg);color:var(--subj-elec-ink)}
.ts-card .btn-small{min-height:44px}
@media (min-width:900px){
  .tc-big{flex-direction:row}
  .tc-big-btn{flex:1}
  .ts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .ts>.tu-pills,.ts>.ts-hero,.ts>.ts-report,.ts>#report{grid-column:1/-1}
}

/* 考試專區單字列表、主題頁：一個字一列（vocab/_word_row.html）、狀態小標記、眼睛開關（v6.js） */
.wl-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wl-title h1{margin:0}
.eye-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:22px;border:1px solid var(--chip-line);background:var(--surface);color:var(--muted);cursor:pointer}
.eye-toggle:hover{color:var(--ink);border-color:var(--accent)}
.eye-toggle[hidden]{display:none}
.eye-toggle .eye-closed,.eye-toggle[aria-pressed="true"] .eye-open{display:none}
.eye-toggle[aria-pressed="true"] .eye-closed{display:inline}
.eye-toggle[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.wl-filters{margin:12px 0}
.level-tabs a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.level-tabs a[aria-current="page"] .lv-count{background:var(--accent-dark);color:var(--on-accent)}
.wl-section h2{display:flex;align-items:baseline;gap:8px}
.wl-count{font-size:13px;font-weight:600;color:var(--muted)}
.exam-list-words{list-style:none;margin:0;padding:0}
.wl-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.wl-row:last-child{border-bottom:none}
.wl-word{display:inline-flex;align-items:baseline;gap:6px}
.wl-status{font-size:11.5px;font-weight:700;line-height:18px;padding:0 6px;border-radius:9px;border:1px solid var(--chip-line);color:var(--muted)}
.wl-status.is-review{border-color:transparent;background:var(--warn-bg);color:var(--warn-ink)}
.wl-status.is-done{border-color:transparent;background:var(--tip-bg);color:var(--tip-ink)}
.wl-detail{min-width:0}
.wl-phonetic,.wl-pos{color:var(--muted);font-size:13.5px}
.wl.is-covered .wl-detail{min-width:96px;min-height:1.4em;border-radius:6px;background:var(--line-soft);cursor:pointer}
.wl.is-covered .wl-row:not(.is-peek) .wl-detail>*{visibility:hidden}
.wl.is-covered .wl-row.is-peek .wl-detail{background:none}
.wl.is-covered .wl-detail:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a.wl-word{color:inherit;text-decoration:none}
a.wl-word strong{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a.wl-word:hover strong{color:var(--accent-dark)}
/* 課本清單（books.html）：書卡左邊 6px 科目色邊、第二行「學期・N 課」小字、書齋一整列（.bk-room） */
.bk-where{font-weight:600}
.book-tile.bk-card{border-left:6px solid var(--sc,var(--chip-line))}
.bk-card .bk-meta{align-items:center;font-size:12.5px;color:var(--muted)}
.bk-info{margin-right:4px}
.bk-room{display:flex;align-items:center;gap:12px;min-height:64px;margin-top:8px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}
.bk-room:hover,.bk-room:focus-visible{background:var(--line-soft);color:var(--ink)}
.bk-room-icon{flex:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.bk-room-text{flex:1;min-width:0;display:flex;flex-direction:column}
.bk-room-name{font-weight:700}
.bk-room-text small{font-size:13px;color:var(--muted)}
.bk-room-count{flex:none;font-size:13.5px;font-weight:600;color:var(--accent)}
/* 一本書（_textbook_modules.html，一般課本）：每課 <details> 收合，預設只露一列 */
.lesson-row.lr-fold{display:block}
main:has(.lr-fold) .col-head{display:none}  /* 「學習／練習」欄名是給改版前的左右兩欄用的；收合後大綱在課名下方 */
.lesson-row.lr-fold > summary.learn{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;border-right:none;border-bottom:none;cursor:pointer;list-style:none}
.lesson-row.lr-fold > summary.learn::-webkit-details-marker{display:none}
.lesson-row.lr-fold[open] > summary.learn{border-bottom:1px solid var(--line)}
.lr-fold .lr-title{flex:1 1 200px;min-width:0}
.lr-fold[open] > summary .chev{transform:rotate(180deg)}
@media (max-width:720px){.lesson-row.lr-fold > summary.learn{position:relative;padding-right:48px}.lr-fold > summary > .chev{position:absolute;top:22px;right:16px}}  /* 手機：工具列換行時 ⌄ 仍在右上角 */
/* 同頁切換的分段按鈕（通用）：兩格相連，選中實心 --accent */
.seg{display:inline-flex;flex:none;border:1.5px solid var(--accent);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-size:14px;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap}
.seg-btn + .seg-btn{border-left:1.5px solid var(--accent)}
.seg-btn:hover{background:var(--accent-soft);color:var(--accent)}
.seg-btn[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
.lesson-head .seg{margin-left:auto}
@media (max-width:720px){
  .lesson-head::after{content:"";flex-basis:100%;order:1}
  .lesson-head .seg{order:2;margin:8px 0 0}
}
/* 「這課一眼看」與單元總覽的術語樹：用這本書的科目色（.sc.subj-*）；重點字 .k 維持 --accent。
   海鹽葡萄（lavender）的 --subj-*-ink 是深色（給淺色科目底用），在深底上看不清：那一套改用淺色的 --subj-*-bg 當樹的顏色（other 本來就是淺色 ink） */
.ov.sc{--sc-tree:var(--sc)}
:root[data-theme="lavender"] .ov.sc:not(.subj-other){--sc-tree:var(--sc-bg)}
.ov.sc .ov-node{background:color-mix(in srgb,var(--sc-tree) 14%,var(--surface));color:var(--sc-tree);border-color:color-mix(in srgb,var(--sc-tree) 45%,transparent)}
.ov.sc .ov-node:hover{background:var(--surface);color:var(--sc-tree)}
.ov.sc .ov-node::after,.ov.sc .ov-leaves li::before{border-top-color:color-mix(in srgb,var(--sc-tree) 55%,transparent)}
.ov.sc .ov-leaves{border-left-color:color-mix(in srgb,var(--sc-tree) 55%,transparent)}
/* 一本書頁（textbook.html，一般課本）：電腦（≥ 1000px）兩欄＝左單元目錄（_book_modules_nav.html，沿用 .ls-toc）＋右邊原本的內容；
   main 與精簡頁尾放寬到 1280px。999px 以下單欄（.ls-toc 本來就 display:none）、版面和改版前一樣 */
.tb-grid,.tb-main{display:flex;flex-direction:column;gap:24px;min-width:0}
@media (min-width:1000px){
  main:has(> .tb-grid){max-width:1280px}
  body:has(> main > .tb-grid) .ft-slim-in{max-width:1280px}
  .tb-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
}
.tb-nav-row{align-items:flex-start}
.tb-nav-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tb-nav-no{font-size:11.5px;font-weight:700;color:var(--muted)}
.tb-nav-count{flex:none;padding-top:1px;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.ls-toc-row[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.ls-toc-row[aria-current="true"] .tb-nav-no,.ls-toc-row[aria-current="true"] .tb-nav-count,.ls-toc-row[aria-current="true"] .bi .t-zh,
.ls-toc-row[aria-current="true"] .bi .t-en{color:var(--accent)}
/* 作答頁（課本一輪 hub_*、考試五步驟 group_*）：進度在作答卡頂端（.qz-cardhead）、新字卡片按鈕（.qz-actions）；
   電腦（≥ 1000px）三欄 .qz-grid＝左這一輪／這一組（_quiz_side.html）、中間作答卡（最寬 640px 置中）、右工具（_quiz_tools.html），
   main 與精簡頁尾放寬到 1280px。999px 以下 .qz-grid／.qz-main 是 display:contents、左右欄不顯示，版面和改版前一樣 */
.qz-cardhead{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.qz-cardtitle{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:var(--muted)}
.qz-count{flex:none;font-size:13px;font-weight:700;color:var(--muted)}
.qz-count.quiz-meta{margin:0}
.qz-cardhead .quiz-bar{height:4px;border-radius:2px}
.flashcard > .qz-cardhead{grid-area:1/1}
.flashcard .fc-face{grid-area:2/1}
.card-actions.qz-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-actions.two.qz-actions{grid-template-columns:minmax(0,1fr)}
.card-actions .qz-btn{min-height:52px;flex-direction:column;justify-content:center;gap:2px;line-height:1.25;white-space:normal;text-align:center}
.qz-btn small{font-size:12px;font-weight:500}
.qz-mastered{grid-column:1/-1;margin:2px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.qz-mastered .linkish{min-height:44px;padding:0 4px;font-size:13px;color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.qz-faint{color:var(--muted)}
.qz-grid,.qz-main{display:contents}
.qz-side,.qz-tools{display:none}
@media (min-width:1000px){
  main:has(> .qz-grid){max-width:1280px}
  body:has(> main > .qz-grid) .ft-slim-in{max-width:1280px}
  .qz-grid{display:grid;grid-template-columns:230px minmax(0,1fr) 260px;gap:24px;align-items:start}
  .qz-main{display:flex;flex-direction:column;gap:24px;width:100%;max-width:640px;min-width:0;margin:0 auto}
  .qz-side,.qz-tools{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px;min-width:0}
}
.qz-card{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.qz-card h2{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.qz-card p{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.qz-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.qz-row{display:flex;align-items:center;gap:8px;min-height:32px;padding:2px 8px;border-radius:8px;font-size:14px;color:var(--ink)}
.qz-row.is-todo{color:var(--muted)}
.qz-row.is-current{background:var(--accent-soft);color:var(--accent);font-weight:700}
.qz-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:2px solid var(--chip-line)}
.qz-row.is-current .qz-mark{border-color:var(--accent)}
.qz-row.is-done .qz-mark{border:0}
.qz-row.is-done .qz-mark::before{content:"✓";font-size:13px;font-weight:700;color:var(--tip-ink)}
.qz-card .qz-stat{font-size:12.5px;color:var(--muted)}
.qz-bar{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.qz-bar span{display:block;height:100%;background:var(--tip-ink)}
/* 課本一輪左欄不洩題：題號格（一列 5 格、只有號碼）、圖例、剛答過（✓／✗／·＋英文＋中文） */
.qz-cells{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.qz-cell{display:flex;align-items:center;justify-content:center;height:30px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.qz-cell.is-ok{border-color:var(--tip-bg);background:var(--tip-bg);color:var(--tip-ink);font-weight:700}
.qz-cell.is-bad{border-color:var(--warn-bg);background:var(--warn-bg);color:var(--warn-ink);font-weight:700}
.qz-cell.is-seen{border-color:var(--accent-soft);background:var(--accent-soft);color:var(--accent-dark)}
.qz-cell.is-current{border:2px solid var(--accent);color:var(--ink);font-weight:700}
.qz-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--muted)}
.qz-legend span{display:inline-flex;align-items:center;gap:5px}
.qz-legend .qz-cell{display:inline-block;width:12px;height:12px;border-radius:3px}
.qz-card .qz-sub{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--muted)}
.qz-recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.qz-recent li{display:flex;align-items:flex-start;gap:8px;font-size:14px}
.qz-res{flex:none;width:14px;font-weight:700;text-align:center;color:var(--muted)}
.qz-recent li.is-ok .qz-res{color:var(--tip-ink)}
.qz-recent li.is-bad .qz-res{color:var(--warn-ink)}
.qz-recent-word{display:flex;flex-direction:column;min-width:0}
.qz-recent-word b{color:var(--ink);overflow-wrap:anywhere}
.qz-recent-word small{font-size:12.5px;color:var(--muted)}
.qz-locked{display:flex;align-items:flex-start;gap:6px;font-size:13px;color:var(--muted)}
.qz-locked svg{flex:none;margin-top:3px}
.qz-examples{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.55}
.qz-examples small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
/* 例句卡：課本卡片翻面前藏起來、改顯示提示卡（沒有 JS 時卡片兩面都顯示，例句卡也照常顯示） */
.qz-hint[data-before-flip]{display:none}
.qz-grid:has(.flashcard.js-flip:not(.flipped)) .qz-ex{display:none}
.qz-grid:has(.flashcard.js-flip:not(.flipped)) .qz-hint[data-before-flip]{display:flex}
/* 課頁、單元總覽（catalog/lesson.html、module.html）：電腦（≥ 1000px）三欄 .ls-grid＝左課目錄 .ls-toc（_book_toc.html）、
   中間 .ls-main、右工具 .ls-tools（_lesson_tools.html），main 只在這兩頁放寬到 1280px。
   999px 以下單欄：目錄、重點字卡、閱讀進度不顯示；練習／本頁目錄（.aside）照舊排在內容下方。手機另外藏底部的 .ls-nav（手機版面不動） */
.ls-grid,.ls-main{display:flex;flex-direction:column;gap:24px;min-width:0}
.ls-tools{display:contents}
.ls-toc,.ls-card{display:none}
.ls-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;padding-top:12px;border-top:1px solid var(--line)}
.ls-nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;text-decoration:none}
.ls-nav-next{margin-left:auto;text-align:right}
@media (max-width:720px){.ls-nav{display:none}}
@media (max-width:999px){.ls-grid .aside{position:static}}  /* 單欄時練習／本頁目錄排在內容下方，不黏住 */
@media (min-width:1000px){
  main:has(> .ls-grid){max-width:1280px}
  body:has(> main > .ls-grid) .ft-slim-in{max-width:1280px}  /* 精簡頁尾和放寬的內容左右對齊 */
  .ls-grid{display:grid;grid-template-columns:230px minmax(0,1fr) 260px;gap:24px;align-items:start}
  .ls-toc{display:flex;flex-direction:column;gap:12px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 8px}
  .ls-tools{display:flex;flex-direction:column;gap:16px;position:sticky;top:72px;min-width:0}
  .ls-tools .aside{position:static}
  .ls-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
}
.ls-toc-title{margin:0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ls-toc-mod{display:flex;flex-direction:column;gap:2px}
.ls-toc-mh{margin:0 8px 2px;font-size:12.5px;font-weight:700;line-height:1.4;color:var(--muted)}
.ls-toc-mh.is-here{color:var(--accent)}
.ls-toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ls-toc-row{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 8px;border-radius:8px;font-size:13.5px;line-height:1.35;color:var(--ink);text-decoration:none}
.ls-toc-row:hover{background:var(--line-soft);color:var(--ink)}
.ls-toc-row[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.ls-toc-no{flex:none;min-width:1.2em;font-size:12px;font-weight:700;color:var(--muted)}
.ls-toc-row[aria-current="page"] .ls-toc-no,.ls-toc-row[aria-current="page"] .bi .t-zh,.ls-toc-row[aria-current="page"] .bi .t-en{color:var(--accent)}
.ls-toc-name{flex:1;min-width:0}
.ls-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--chip-line)}
.ls-dot.is-read{background:var(--tip-ink)}
.ls-card h2{font-size:13px;font-weight:700;color:var(--muted)}
.ls-words ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ls-words li{display:flex;align-items:baseline;gap:8px;font-size:14px}
.ls-word{font-weight:700;color:var(--accent)}
.ls-mean{min-width:0;color:var(--ink)}
.ls-words .btn{align-self:flex-start}
.ls-progress p{margin:0;font-size:14px;color:var(--ink)}
.ls-bar{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.ls-bar span{display:block;height:100%;background:var(--tip-ink)}
/* 考試專區完整單字頁：手機一張主卡（.ew-card）＋膠囊分頁（.ew-tabs）；電腦（≥ 1000px）左邊字表（.ew-side）、右邊主卡與分頁。
   答錯畫面（.vocab-reveal）共用主卡與分頁。只用 var(--…)；點擊目標 ≥ 44px。 */
.ew-layout{display:flex;flex-direction:column;gap:16px;min-width:0}
.ew-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.ew-card{gap:10px}
.ew-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ew-count{margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.ew-steps{display:none;gap:6px}
.ew-step{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--accent);font-size:24px;line-height:1;text-decoration:none}
.ew-step:hover{background:var(--accent-soft);color:var(--accent)}
.ew-step.is-off{color:var(--muted);border-color:var(--line-soft);background:var(--line-soft)}
.ew-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ew-title h1{margin:0;font-size:34px;line-height:1.15;overflow-wrap:anywhere;min-width:0}
.ew-title h2{margin:0;font-size:28px;line-height:1.15;overflow-wrap:anywhere;min-width:0}
.ew-title .say-btn{width:44px;height:44px;border-radius:22px;margin-left:0;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ew-sub{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0}
.ew-phonetic{color:var(--muted);font-size:16px}
.ew-sense-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ew-meaning{margin:0;font-size:18px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.ew-pos{font-style:normal;font-size:13px;font-weight:700;line-height:20px;padding:0 8px;border-radius:10px;background:var(--accent-soft);color:var(--accent-dark)}
.ew-ex-list li{border-top:1px dashed var(--line);padding-top:10px}
.ew-hit{font-weight:700;color:inherit;background:linear-gradient(transparent 55%,color-mix(in srgb,var(--accent) 22%,transparent) 55%);padding:0 1px;border-radius:2px}
.ew-more{display:flex;flex-direction:column;gap:10px;border-top:1px dashed var(--line);padding-top:12px}
.ew-more-title{margin:0;font-size:15px;color:var(--muted)}
.ew-more .ew-meaning{font-size:16px}
.ew-exam{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line);padding-top:12px}
.ew-years{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ew-years li{display:flex;flex-direction:column;align-items:center;padding:6px 0;border:1px solid var(--line-soft);border-radius:8px;color:var(--ink)}
.ew-year{font-size:12px;color:var(--muted)}
.ew-years strong{font-size:17px}
.ew-years li.is-top{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.ew-years li.is-top .ew-year{color:var(--accent)}
.ew-exam-line{margin:0;font-size:14px;font-weight:600;color:var(--muted)}
.ew-nav{display:flex;justify-content:space-between;gap:10px;margin:2px 0}
.ew-nav .btn{gap:6px;min-width:0;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ew-panels{display:flex;flex-direction:column;gap:16px;min-width:0}
.ew-tabs{gap:8px;padding:2px}
.ew-tabs[hidden]{display:none}
.ew-tabs .tab{flex-shrink:0;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--muted);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer}
.ew-tabs .tab:hover{color:var(--accent);border-color:var(--accent)}
.ew-tabs .tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ew-tabs .tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ew-panel[hidden]{display:none}
.ew-panels.is-tabbed .ew-panel>.panel>h2{display:none}
.ew-panels.is-tabbed .ew-panel>.panel>h2+.wc-examples{margin-top:0}
.ew-panels.is-tabbed .ew-panel>.panel>h2+.wc-examples>li:first-child{border-top:0;padding-top:0}
.ew-panel:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}
.ew-side{display:none}
@media (min-width:1000px){
  .ew-layout{display:grid;grid-template-columns:220px minmax(0,760px);grid-template-areas:"side main";justify-content:center;align-items:start;gap:24px}
  .ew-main{grid-area:main}
  .ew-side{grid-area:side;display:flex;flex-direction:column;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 8px}
  .ew-steps{display:inline-flex}
  .ew-nav{display:none}
}
.ew-side-title{margin:0 8px 8px;font-size:15px;color:var(--ink)}
.ew-side-total{color:var(--muted);font-weight:600}
.ew-side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ew-side-group{position:sticky;top:0;z-index:1;pointer-events:none;display:flex;align-items:center;height:30px;padding:0 8px;border-radius:6px;background:var(--line-soft);color:var(--muted);font-size:12px;font-weight:700}
.ew-side-group.is-current{color:var(--accent)}
.ew-side-row{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 8px;border-radius:8px;color:var(--ink);text-decoration:none}
.ew-side-row:hover{background:var(--line-soft);color:var(--ink)}
.ew-side-row[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.ew-side-word{flex:none;max-width:60%;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ew-side-meaning{flex:1;min-width:0;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ew-side-row[aria-current="page"] .ew-side-meaning{color:var(--accent)}
.ew-dot{flex:none;width:10px;height:10px;border-radius:50%;border:2px solid var(--muted)}
.ew-dot.is-review{border-color:var(--warn-ink);background:var(--warn-ink)}
.ew-dot.is-done{border-color:var(--tip-ink);background:var(--tip-ink)}
.ew-side-back{margin:8px 8px 0;font-size:14px}
.ew-side-back a{display:inline-flex;align-items:center;min-height:44px}
.ew-group h3{margin:0 0 6px}
.ew-root-note{margin:0 0 6px;font-weight:600}
.ew-related{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ew-related li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.ew-related-word{font-weight:600}
.ew-related-meaning{color:var(--muted);font-size:13.5px}
/* 考試專區一組：第 5 步選擇頁（三個大按鈕）、頂端切換、拼字輸入框 */
.step5-choose{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.step5-choose .btn{min-height:56px;width:100%;font-size:17px}
/* 第 5 步（選字／拼字）作答卡：頂端切換方式、空格、選字庫。只用 var(--…)；對比見 test_theme_contrast（on-accent／accent、accent-dark／surface、muted／surface） */
.s5-modes{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.s5-label{font-size:13px;color:var(--muted)}
.s5-seg{display:inline-flex;margin-right:auto}
.s5-seg-btn{min-height:44px;padding:0 16px;border:1px solid var(--accent);background:var(--surface);color:var(--accent-dark);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.s5-seg-btn+.s5-seg-btn{margin-left:-1px}
.s5-seg-btn:first-child{border-radius:22px 0 0 22px}
.s5-seg-btn:last-child{border-radius:0 22px 22px 0}
.s5-seg-btn:hover{background:var(--accent-soft)}
.s5-seg-btn[aria-pressed="true"],.s5-seg-btn[aria-pressed="true"]:hover{background:var(--accent);color:var(--on-accent);opacity:1;cursor:default}
/* 單字表的解釋語言（vocab/_word_mode.html）：標題、兩格分段按鈕、一行說明；手機也一排兩格 */
.mb-mode{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 12px;min-width:0}
.book-head .mb-mode{margin-top:12px}
.mb-mode-title{margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.mb-mode .s5-seg{margin:0;max-width:100%}
.mb-mode .s5-seg-btn{white-space:nowrap}
.mb-mode-help{margin:0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.s5-skip{min-height:44px;padding:0 4px;border:0;background:none;color:var(--accent-dark);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;margin-left:auto}
.s5-blank{display:inline-block;min-width:6em;max-width:100%;border-bottom:2px solid currentColor;vertical-align:baseline}
.s5-blank-phrase{min-width:9em}
.s5-bank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.s5-bank .btn{min-height:44px;height:auto;padding:8px 10px;text-align:center;line-height:1.3;overflow-wrap:anywhere}
@media (max-width:720px){.s5-bank{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spell-input{width:100%;max-width:360px;min-height:48px;font:inherit;font-size:20px;padding:0 12px;box-sizing:border-box;border:1px solid var(--chip-line);border-radius:8px;background:var(--surface);color:var(--ink)}
/* 一組流程的答錯畫面：完整單字頁的主卡與膠囊分頁（標題用 h2） */
.vocab-reveal .ew-card{margin:12px 0 0}
.vocab-reveal .ew-panels{margin-top:16px}

/* ---------- 我的錯題（/practice/wrong/）：畫布 A 總覽／B 展開／C 全部清完。只用這頁的 wr- class，
   不動 .pr-wrong-list（家教學生頁在用）與全站 .zh。手機優先；寬螢幕置中 640px，和練習頁一致 ---------- */
.wr-page{display:flex;flex-direction:column;gap:16px;width:100%;max-width:640px;margin:0 auto}
.wr-page .book-head{margin:0}
/* 摘要卡 */
.wr-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-radius:18px;background:var(--hero-bg);color:var(--hero-ink)}
.wr-hero-main{min-width:0}
.wr-hero-label{margin:0;font-size:14px;font-weight:600}
.wr-hero-num{margin:2px 0;font-size:44px;font-weight:700;line-height:1.1}
.wr-hero-rule{margin:0;font-size:13px;line-height:1.5}
.wr-hero-week{flex:none;margin:0;max-width:44%;padding:10px 12px;border-radius:12px;background:var(--surface);color:var(--muted);font-size:13px;line-height:1.35;text-align:center}
.wr-hero-week b{display:block;font-size:24px;line-height:1.1;color:var(--tip-ink)}
/* 科目膠囊（兩科以上才有） */
.wr-pills{display:flex;flex-wrap:wrap;gap:8px}
.wr-pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--chip-line);border-radius:22px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.wr-pill b{color:var(--accent-dark)}
.wr-pill:hover{border-color:var(--accent)}
/* 科目字頭＋書卡 */
.wr-subject{display:flex;flex-direction:column;gap:12px;scroll-margin-top:16px}
.wr-subject-name{display:flex;align-items:center;gap:10px;margin:4px 0 0;font-size:19px}
.wr-subj{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;font-size:15px;font-weight:700;background:var(--subj-other-bg);color:var(--subj-other-ink)}
.wr-subj.subj-ENG{background:var(--subj-eng-bg);color:var(--subj-eng-ink)}
.wr-subj.subj-MATH{background:var(--subj-math-bg);color:var(--subj-math-ink)}
.wr-subj.subj-SCI{background:var(--subj-sci-bg);color:var(--subj-sci-ink)}
.wr-subj.subj-SOC{background:var(--subj-soc-bg);color:var(--subj-soc-ink)}
.wr-subj.subj-CHI{background:var(--subj-chi-bg);color:var(--subj-chi-ink)}
.wr-subj.subj-ELEC{background:var(--subj-elec-bg);color:var(--subj-elec-ink)}
.wr-book{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.wr-book-title{margin:0;padding:10px 14px 6px;font-size:12px;font-weight:600;color:var(--muted)}
/* 技能一列：Redo 表單疊在同一列右側（不放進 <summary>） */
.wr-skill{position:relative;border-top:1px solid var(--line-soft)}
.wr-book-title+.wr-skill{border-top:0}
.wr-skill-head{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 104px 10px 14px;cursor:pointer;list-style:none}
.wr-skill-head::-webkit-details-marker{display:none}
.wr-skill-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wr-skill-name{margin:0;font-weight:700;color:var(--ink);line-height:1.35}
.wr-rule-note{margin:0 0 12px}
.wr-skill-meta{margin:0;font-size:13px;color:var(--muted);line-height:1.4}
.wr-skill-meta .zh{display:none;margin:0;padding:0;border:0;font-size:inherit;color:inherit;line-height:inherit}
body.zh-on .wr-skill-meta .zh{display:inline}
.wr-skill-meta .zh::after{content:" · "}
.wr-count{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;border-radius:12px;background:var(--warn-bg);color:var(--warn-ink);font-size:13px;font-weight:700}
.wr-chev{flex:none;width:8px;height:8px;margin-right:2px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.wr-skill-box[open] .wr-chev{transform:rotate(45deg)}
.wr-redo{position:absolute;top:10px;right:12px;margin:0}
.wr-redo-btn{min-height:44px;min-width:80px;padding:0 16px}
/* 鎖住的技能：灰底一列 */
.wr-locked{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;background:var(--line-soft)}
.wr-locked .wr-skill-head{flex:1;min-width:0;min-height:0;padding:0;cursor:default;display:block}
.wr-renew{flex:none;min-height:44px;padding:0 16px}
/* 展開後的題目 */
.wr-points{list-style:none;margin:0;padding:0 14px 14px;display:flex;flex-direction:column;gap:12px}
.wr-point{padding:12px 0 0;border-top:1px solid var(--line-soft)}
.wr-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.wr-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:12px;font-size:12px;font-weight:700}
.wr-tag-ok{background:var(--tip-bg);color:var(--tip-ink)}
.wr-tag-no{background:var(--warn-bg);color:var(--warn-ink)}
.wr-tag-plain{background:var(--line-soft);color:var(--muted);font-weight:600}
.wr-stem{font-weight:400;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.wr-stem .zh{display:none;margin:2px 0 0;padding:0;border:0;font-size:13px;color:var(--muted)}
body.zh-on .wr-stem .zh{display:block}
.wr-answer{margin-top:10px}
.wr-answer>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--accent);border-radius:22px;color:var(--accent);background:var(--surface);font-size:14px;font-weight:600;cursor:pointer;list-style:none}
.wr-answer>summary::-webkit-details-marker{display:none}
.wr-answer[open]>summary{margin-bottom:8px}
.wr-answer-box{margin:0;padding:10px 12px;border:1px solid var(--tip-line);border-radius:10px;background:var(--tip-bg);color:var(--ink);overflow-wrap:anywhere}
.wr-answer-box b{display:block;margin-bottom:2px;font-size:12px;color:var(--tip-ink)}
/* 全部清完 */
.wr-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);text-align:center}
.wr-empty-mark{padding:8px;width:64px;height:64px;border-radius:50%;background:var(--tip-bg);color:var(--tip-ink)}
.wr-empty h2{margin:4px 0 0;font-size:22px}
.wr-empty p{margin:0;color:var(--muted)}
.wr-empty .btn{margin-top:8px}

/* ---------- 結果頁：重做錯題那一輪清掉幾個考點（practice/result.html 的 .redo-outcome） ---------- */
.redo-outcome{margin:12px 0;padding:12px 16px;border-radius:12px;background:var(--tip-bg);color:var(--tip-ink);border:1px solid var(--tip-line)}
.redo-outcome p{margin:0 0 4px;line-height:1.5}
.redo-outcome .redo-cleared{font-size:17px;font-weight:700}
.redo-outcome .redo-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.redo-outcome .redo-actions form{margin:0}

/* 釘選（catalog/pins.py）：圖釘按鈕在書、Module、Lesson 標題旁；首頁「我的釘選」；課本頁「其他 Module」。只用 var(--…) */
.pin-head{display:flex;align-items:center;gap:8px;min-width:0}
.pin-head h1{min-width:0;overflow-wrap:anywhere}
.pin-form{display:inline-flex;margin:0;flex:none}
.pin-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.pin-btn:hover,.pin-btn:focus-visible{background:var(--accent-soft);color:var(--accent-dark)}
.pin-btn.is-pinned{color:var(--accent-dark);background:var(--accent-soft);border-color:var(--accent)}
.module-head .pin-form,.tools .pin-form{align-self:center}
.pin-other{margin-top:8px}
.pin-other>summary{display:flex;align-items:center;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;font-weight:700;color:var(--ink)}
.pin-other[open]>summary{margin-bottom:12px}
.pin-home{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.pin-home h2{margin:0;font-size:16px}
.lesson-head{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.lesson-head .course{flex:1 0 100%}
.lesson-head h1{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}

/* 首頁「我的釘選」：一行一個（類型小標、標題、細進度、Continue、⋯ 選單裡才有取消釘選）；在「繼續上次的課」之下、統計卡之上 */
.pin-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pin-more{margin-top:2px}
.pin-more>summary{display:flex;align-items:center;min-height:44px;padding:0 4px;color:var(--accent-dark);font-weight:600;cursor:pointer}
.pin-more[open]>summary{margin-bottom:6px}
.pin-row{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink)}
.pin-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pin-kind{font-size:12px;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.pin-title{font-weight:700;overflow-wrap:anywhere;line-height:1.3}
.pin-row-sub{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.pin-thin{flex:1;min-width:24px;max-width:96px;height:3px;border-radius:2px;background:var(--line-soft);overflow:hidden}
.pin-thin span{display:block;height:100%;background:var(--accent)}
.pin-go{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid var(--accent);border-radius:22px;color:var(--accent-dark);font-weight:600;font-size:14px;text-decoration:none}
.pin-go:hover,.pin-go:focus-visible{background:var(--accent-soft);color:var(--accent-dark)}
.pin-menu{flex:none;position:relative}
.pin-menu>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;cursor:pointer;color:var(--muted);font-size:22px;line-height:1}
.pin-menu>summary::-webkit-details-marker{display:none}
.pin-menu>summary:hover,.pin-menu[open]>summary{background:var(--accent-soft);color:var(--accent-dark)}
.pin-menu-pop{position:absolute;z-index:20;right:0;top:100%;min-width:140px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 18%,transparent)}
.pin-menu-pop .btn-small{min-height:44px;width:100%}
.pin-menu-pop .pin-form{display:flex;width:100%}
.pin-row.is-gone{background:var(--line-soft);border-style:dashed;color:var(--muted)}
.pin-row.is-gone .pin-title{color:var(--muted)}
/* 釘滿 8 個的換釘頁（catalog/pin_full.html）：一行一個現有的釘選，右邊「取消這個，改釘新的」；手機上按鈕換到下一行、整行寬 */
.pin-full{display:flex;flex-direction:column;gap:10px;min-width:0}
.pin-full h1{margin:0;overflow-wrap:anywhere}
.pin-full .sub{margin:0;overflow-wrap:anywhere}
.pin-swap-list .pin-row{flex-wrap:wrap;padding:8px 8px 8px 12px}
.pin-swap-form{display:flex;flex:none;margin:0}
.pin-swap-form .btn{min-height:44px;white-space:normal}
.pin-full-cancel{margin:4px 0 0}
.pin-full-cancel .btn{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:560px){.pin-swap-form{flex:1 0 100%}.pin-swap-form .btn{width:100%}}

/* 考試專區：單字列表的精熟度圖示（空心＝未學習、部分填滿＝複習中、實心＋勾＝複習完成、小圓點＝今天要複習）與圖例 */
.wl-mark{flex:none;align-self:center;position:relative;display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid var(--accent);box-sizing:border-box;background:conic-gradient(var(--accent) var(--fill,0%),transparent 0)}
.wl-mark.lv-0{border-color:var(--muted);background:none}
.wl-mark.lv-1{--fill:25%}
.wl-mark.lv-2{--fill:50%}
.wl-mark.lv-3{--fill:75%}
.wl-mark.lv-4{background:var(--accent)}
.wl-mark.lv-4::before{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:7px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg)}
.wl-mark.is-due::after{content:"";position:absolute;right:-5px;top:-5px;width:7px;height:7px;border-radius:50%;background:var(--warn-ink);border:1px solid var(--surface)}
.wl-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0;font-size:12.5px;color:var(--muted)}
.wl-legend>span{display:inline-flex;align-items:center;gap:6px}
/* 一組流程：從後面主題補進來的字的來源標籤 */
.from-topic{display:inline-block;max-width:100%;padding:0 8px;border-radius:9px;background:var(--line-soft);color:var(--muted);font-size:12px;line-height:20px;overflow-wrap:anywhere;vertical-align:middle}
.from-topic-line{margin:6px 0 0}
@media (min-width:721px){.s5-col{width:100%;max-width:640px;margin-left:auto;margin-right:auto}}  /* 作答卡外的 .from-topic-line、.card-actions：和 .quiz 同寬置中（放在它們的規則後面，才蓋得過 margin） */

/* 考試首頁目標卡（eg-）：內容建置中提示、熟悉度圓環、每天新字按鈕列、預計背完色帶 */
.eg-card{display:flex;flex-direction:column;gap:14px}
.eg-card>p{margin:0}
.eg-warn{padding:10px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn-ink);font-size:14px;line-height:1.5}
.eg-fam{display:flex;align-items:center;gap:16px}
.eg-ring{--eg-pct:0;flex:none;position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--eg-pct)*1%),var(--line-soft) 0)}
.eg-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}
.eg-ring span{position:relative;font-size:16px;font-weight:700;color:var(--ink)}
.eg-fam-text{min-width:0}
.eg-fam-text p{margin:0}
.eg-label{font-size:13px;color:var(--muted);margin:0}
.eg-big{font-size:22px;font-weight:700;line-height:1.3;color:var(--ink)}
.eg-sub{font-size:14px;color:var(--muted)}
.eg-goal-form{display:flex;flex-direction:column;gap:6px;margin:0}
/* 每天新字目標：一排 7 格（5…30 六顆＋第 7 格「35+ ▾」稍寬），不換行；第 7 格是 <details>：summary 疊在第 7 格的位置（.eg-goal-slot 佔位），
   展開區在整排下方、同寬、5 欄（35…100）。目標 ≤ 30 時第 7 格虛線框；> 30 時第 7 格顯示目前數字、選中樣式（data-on） */
.eg-goal-wrap{position:relative}
.eg-goal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(0,1.35fr);gap:6px}
.eg-goal button,.eg-goal-panel button,.eg-goal-more>summary{box-sizing:border-box;min-width:0;min-height:44px;padding:0;border:1.5px solid var(--chip-line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.eg-goal button[aria-pressed="true"],.eg-goal-panel button[aria-pressed="true"],.eg-goal-more>summary[data-on]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.eg-goal-more>summary{position:absolute;top:0;right:0;width:calc((100% - 36px) * 1.35 / 7.35);height:44px;display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;list-style:none;border-style:dashed}
.eg-goal-more>summary::-webkit-details-marker{display:none}
.eg-goal-more>summary[data-on]{border-style:solid}
.eg-goal-panel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:6px}
/* 考試首頁的兩顆按鈕：學一組、複習到期，並列、不互相取代；不能按時是灰色（aria-disabled，不是連結），下面一行小字說明 */
.eg-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;align-items:start}
.eg-action{display:flex;flex-direction:column;gap:4px;min-width:0}
.eg-action .btn{padding:6px 10px;text-align:center;line-height:1.3}
.eg-note{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.btn.eg-off,.btn.eg-off:hover{background:var(--line-soft);border-color:var(--line);color:var(--muted);cursor:not-allowed}
.eg-eta{position:relative;display:flex;align-items:center;gap:8px;padding:6px 4px 6px 12px;min-height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent-dark)}
.eg-eta svg{flex:none}
.eg-eta>p{margin:0;flex:1;font-size:15px;font-weight:600;min-width:0}
.eg-why summary{display:grid;place-items:center;width:44px;height:44px;list-style:none;cursor:pointer;color:var(--accent-dark)}
.eg-why summary::-webkit-details-marker{display:none}
.eg-why-text{position:absolute;z-index:2;right:0;top:100%;margin:4px 0 0;width:min(280px,calc(100vw - 64px));padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:14px;line-height:1.5;font-weight:400;box-shadow:0 4px 14px var(--line)}

/* 書齋書架（good_books.html）：書封是「物件」，顏色用下面這組 token，不跟四套（八套）配色變，所以另開一個 :root 只定義一次 */
.gb-tabs{display:flex;flex-wrap:wrap;gap:8px}
.gb-tab{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none}
.gb-tab:hover,.gb-tab:focus-visible{border-color:var(--accent);color:var(--ink)}
.gb-tab[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.gb-shelf{--row:176px;--plank:14px;display:flex;flex-direction:column;gap:10px}
.gb-books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:var(--row);
  background:linear-gradient(to bottom,transparent calc(100% - var(--plank)),var(--module-bg) calc(100% - var(--plank)),var(--chip-line) calc(100% - 3px),var(--accent) calc(100% - 3px)) 0 0/100% var(--row) repeat-y}
.gb-book,.gb-slot{align-self:start;justify-self:center;width:min(104px,calc(100% - 8px));height:148px;margin-top:14px;box-sizing:border-box}
.gb-book{--bt:var(--book-other-top);--bb:var(--book-other-bot);--bi:var(--book-ink-light);--b1:color-mix(in srgb,var(--bt) 65%,var(--bb));--b2:color-mix(in srgb,var(--bb) 65%,var(--bt));
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:4px;padding:10px 12px 10px 14px;overflow:hidden;color:var(--bi);text-decoration:none;
  border-radius:3px 6px 6px 3px;background:linear-gradient(180deg,var(--bt),var(--bb));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--bi) 30%,transparent),2px 0 0 var(--surface),3px 0 0 var(--line),5px 7px 9px color-mix(in srgb,var(--ink) 22%,transparent)}
.gb-book.subj-ENG{--bt:var(--book-eng-top);--bb:var(--book-eng-bot);--bi:var(--book-ink-dark)}
.gb-book.subj-MATH{--bt:var(--book-math-top);--bb:var(--book-math-bot);--bi:var(--book-ink-dark)}
.gb-book.subj-SCI{--bt:var(--book-sci-top);--bb:var(--book-sci-bot);--bi:var(--book-ink-dark)}
.gb-book.subj-SOC{--bt:var(--book-soc-top);--bb:var(--book-soc-bot)}
.gb-book.subj-CHI{--bt:var(--book-chi-top);--bb:var(--book-chi-bot)}
.gb-book.subj-ELEC{--bt:var(--book-elec-top);--bb:var(--book-elec-bot)}
.gb-book.book-v1{background:linear-gradient(180deg,var(--b1),var(--bb))}
.gb-book.book-v2{background:linear-gradient(180deg,var(--bt),var(--b2))}
a.gb-book:hover,a.gb-book:focus-visible{color:var(--bi);transform:translateY(-3px)}
.gb-subj{font-size:10.5px;font-weight:700;letter-spacing:.04em;overflow-wrap:anywhere}
.gb-title{flex:1;display:flex;align-items:center;font:700 14px/1.25 'Noto Serif TC','Source Serif 4',Georgia,'Times New Roman',serif;overflow-wrap:anywhere;word-break:break-word;overflow:hidden}
.gb-series{padding-top:4px;border-top:1px solid var(--bi);font-size:10px;line-height:1.25;overflow-wrap:anywhere;max-height:2.7em;overflow:hidden}
.gb-book.is-planned{cursor:default;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--bi) 30%,transparent)}
.gb-soon{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;border-top:1px solid var(--bi);font-size:10px;font-weight:600;text-align:center}
.gb-slot{border:2px dashed var(--chip-line);border-radius:3px 6px 6px 3px;background:transparent}
.gb-note{margin:0;color:var(--muted);font-size:13.5px}
@media (min-width:560px){.gb-books{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:720px){.gb-books{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1000px){.gb-books{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* 設定頁（settings.html）：三組，組名小標；組內的 panel 連成一塊。≥1000px 左邊 200px 小目錄（sticky），較窄時標題下一排膠囊 */
.set-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:-8px}
.set-pills a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.set-pills a[aria-current="true"],.set-toc a[aria-current="true"]{border-color:var(--accent-soft);background:var(--accent-soft);color:var(--accent)}
.set-layout{display:block}
.set-toc{display:none}
.set-main{display:flex;flex-direction:column;gap:24px;min-width:0}
.set-grp{display:flex;flex-direction:column;gap:8px;scroll-margin-top:16px}
.set-grp-title{margin:0;padding:0 4px;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.08em}
.set-stack{display:flex;flex-direction:column}
.set-stack>.panel{border-radius:0}
.set-stack>.panel+.panel{border-top:0;box-shadow:inset 0 1px 0 var(--line)}
.set-stack>.panel:first-child{border-radius:12px 12px 0 0}
.set-stack>.panel:last-child{border-radius:0 0 12px 12px}
.set-stack>.panel:only-child{border-radius:12px}
.panel h2.set-danger{color:var(--warn-ink)}
@media (min-width:1000px){
  .set-pills{display:none}
  .set-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
  .set-toc{display:block;position:sticky;top:16px}
  .set-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
  .set-toc a{display:flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid transparent;border-radius:8px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none}
  .set-toc a:hover{color:var(--ink)}
}

/* 家長首頁（parent_home.html、_status_card.html、_parent_plans.html）：狀態列取代深色卡；電腦（≥ 1000px）兩欄 .ph-grid＝左孩子卡、右（黏住）方案＋目標卡 */
.ph-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.ph-kids{display:flex;flex-wrap:wrap;gap:8px;margin-top:-8px}
.ph-kids a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 6px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none}
.ph-kids a[aria-current="true"]{border-color:var(--accent-soft);background:var(--accent-soft);color:var(--accent)}
.ph-kid-av{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--line-soft);color:var(--ink);font-size:14px}
.ph-grid,.ph-main,.ph-side{display:flex;flex-direction:column;gap:24px;min-width:0}
.pc-settings{margin-left:auto}
.pc-gear+.pc-settings{margin-left:0}
.pc-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 16px;border-radius:12px}
.pc-status.is-idle{background:var(--warn-bg);color:var(--warn-ink)}
.pc-status.is-on{background:var(--tip-bg);color:var(--tip-ink)}
.pc-dot{flex:none;width:10px;height:10px;border-radius:50%;background:currentColor}
.pc-status .pc-verdict{flex:1 1 14em;min-width:0;margin:0;font-size:16px;font-weight:600;color:inherit;overflow-wrap:anywhere}
.pc-last{flex:0 1 auto;margin-left:auto;font-size:13px}  /* 窄螢幕放不下就換到判斷句下一行 */
.pc-start{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pc-nums .sc-nums.pc-nums4{grid-template-columns:repeat(2,minmax(0,1fr))}
.ph-plan-list,.ph-goal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ph-plan-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line-soft)}
.ph-plan-list li:first-child{border-top:0}
.ph-plan-name{min-width:0;overflow-wrap:anywhere}
.ph-plan-list .badge{flex:none}
.ph-goal-list li{padding:8px 0;border-top:1px solid var(--line-soft);overflow-wrap:anywhere}
.ph-goal-list li:first-child{border-top:0}
.ph-redeem{border-top:1px solid var(--line-soft);padding-top:10px}
.ph-redeem summary{display:flex;align-items:center;min-height:44px;font-weight:600;color:var(--accent-dark);cursor:pointer}
.ph-redeem[open] summary{margin-bottom:8px}
@media (min-width:560px){.pc-nums .sc-nums.pc-nums4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1000px){
  main:has(> .ph-grid){max-width:1180px}
  body:has(> main > .ph-grid) .ft-slim-in{max-width:1180px}
  .ph-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
  .ph-side{position:sticky;top:16px}
}

/* ---------- 我的單字本（/words/mine/，vocab/mybooks_views.py）：mb- 前綴；只用配色 token；點擊目標 ≥ 44px；手機一欄 ---------- */
.mb-page{display:flex;flex-direction:column;gap:16px;width:100%;max-width:760px;margin:0 auto;min-width:0}
.mb-page .book-head{margin:0}
.mb-note{margin:0;padding:10px 14px;border-radius:10px;background:var(--warn-bg);color:var(--warn-ink)}
.mb-note a{color:var(--warn-ink);font-weight:700}
.mb-soon{margin:6px 0 0;color:var(--muted);font-size:14px}
.mb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mb-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none}
a.mb-row:hover{border-color:var(--accent);color:var(--ink)}
.mb-pick{justify-content:flex-start;cursor:pointer}
.mb-pick input{width:22px;height:22px;flex:none}
.mb-name{font-weight:700;min-width:0;overflow-wrap:anywhere}
.mb-meta{color:var(--muted);font-size:14px}
.mb-lock{display:inline-block;margin-left:4px;padding:0 8px;border-radius:10px;background:var(--warn-bg);color:var(--warn-ink);font-size:12.5px;font-weight:700}
.mb-item{display:flex;flex-direction:column;gap:4px;min-width:0}
.mb-trash{display:flex;flex-direction:column;gap:8px;min-width:0}
.mb-trash h2{margin:0;font-size:17px}
.mb-trash .help{margin:0}
.mb-trash-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 160px}
.mb-restore{margin:0;flex:none}
.mb-restore .btn{min-height:44px}
.mb-due{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:22px;background:var(--warn-bg);color:var(--warn-ink);font-size:14px;font-weight:700;text-decoration:none}
a.mb-due:hover{color:var(--warn-ink);text-decoration:underline}
.mb-home-due{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:8px 0 0}
.mb-home-due-label{color:var(--muted);font-size:14px}
.mb-home-due a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.mb-create{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:10px}
.mb-create .field{flex:1 1 220px;min-width:0}
.mb-create .field input{width:100%}
.mb-words{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mb-word{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.mb-word-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.mb-head-word{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0;overflow-wrap:anywhere}
/* 我的單字本：一個字的字典卡（vocab/mybooks_item.py）。內頁的字是連結（沒有 JS 就到完整頁），整列可點；
   有 JS 時從下方滑出（.ws-sheet，role=dialog）：最高 90vh、內容自己捲動、上緣拖把手、右下關閉鍵；減少動態時不滑動、直接出現 */
.mb-word[data-item]{position:relative;cursor:pointer}
.ws-open{position:absolute;inset:0;z-index:0;border-radius:12px}
.ws-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mb-word[data-item] form{position:relative;z-index:1}
.mb-word[data-item]:hover .mb-head-word strong{text-decoration:underline;color:var(--accent-dark)}
body.ws-lock{overflow:hidden}
.ws-sheet{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:flex-end}
.ws-sheet[hidden]{display:none}
.ws-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent);opacity:0;transition:opacity .2s ease}
.ws-panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:760px;max-height:90vh;margin:0 auto;padding:8px 16px 72px;
  background:var(--ground);color:var(--ink);border-radius:18px 18px 0 0;box-shadow:0 -8px 24px color-mix(in srgb,var(--ink) 18%,transparent);
  transform:translateY(100%);transition:transform .25s ease;outline:none;min-width:0}
.ws-sheet.is-open .ws-backdrop{opacity:1}
.ws-sheet.is-open .ws-panel{transform:none}
.ws-handle{flex:none;width:44px;height:5px;margin:4px auto 10px;border-radius:3px;background:var(--chip-line)}
.ws-content{overflow-y:auto;overscroll-behavior:contain;min-width:0;display:flex;flex-direction:column;gap:12px}
.ws-loading{margin:24px 0;text-align:center;color:var(--muted)}
.ws-close{position:absolute;right:16px;bottom:16px;width:48px;height:48px;border-radius:24px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 12px color-mix(in srgb,var(--ink) 12%,transparent)}
.ws-close:hover{border-color:var(--accent);color:var(--accent-dark)}
.ws-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.ws-body .ew-card{margin:0}
.ws-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ws-own{margin:0}
.ws-more{margin:0;text-align:right}
.ws-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.ws-page{gap:12px}
@media (prefers-reduced-motion: reduce){.ws-panel,.ws-backdrop{transition:none}}
/* 字典卡的詞形變化（ECDICT）、查字結果頁的「或自己填中文」 */
.ws-forms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 12px}
.ws-forms li{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.ws-form-label{font-size:13px;color:var(--muted)}
/* 字下方的一排小標籤（_word_tags.html；這一版只有科目）與字典卡的「課本裡的譯名」（_mine_school_terms.html） */
.wt-tags{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wt-tag{padding:0 10px;border-radius:999px;border:1px solid var(--chip-line);background:var(--surface);color:var(--muted);font-size:13px;line-height:24px;white-space:nowrap}
.wt-tag.is-exam{border-color:var(--accent);color:var(--accent-dark);font-weight:600}
.ew-also{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:8px}
.ew-also-label{font-size:13.5px;color:var(--muted)}
.ew-also .wt-tags{margin:0}
.mb-word>.wt-tags,.rt-word>.wt-tags{margin:0}
.ws-school h2{margin:0 0 8px}
.ws-school-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ws-school-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0;overflow-wrap:anywhere}
.ws-school-zh{min-width:0;color:var(--ink);font-size:17px}
.ws-school-subjects{min-width:0;color:var(--muted);font-size:13px}
/* 查字結果「可以加入」：字與中文一行，右邊「改中文」（<details>）展開才出現輸入框 */
.mb-ready{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 12px}
.mb-ready-main{flex:1 1 12em;min-width:0;padding:10px 0}
.mb-edit-zh{flex:0 1 auto;min-width:0}
.mb-edit-zh summary{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;cursor:pointer;color:var(--accent-dark);font-weight:700;list-style:none}
.mb-edit-zh summary::-webkit-details-marker{display:none}
.mb-edit-zh[open]{flex-basis:100%}
.mb-edit-zh[open] summary{color:var(--muted)}
/* 詞形變化分詞性（動詞／名詞／形容詞副詞）；內頁、查字結果頁英英解釋前的 Collins 詞性（小字） */
.ws-form-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.ws-form-group+.ws-form-group{margin-top:12px}
.ws-form-group h3{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.mb-def-pos{font-size:12px;line-height:18px;padding:0 6px;margin-right:2px;vertical-align:1px}
.mb-own-zh{margin-top:6px}
/* 資料來源與授權（/credits/，catalog/credits.html） */
.cr-page{display:flex;flex-direction:column;gap:16px;width:100%;max-width:760px;margin:0 auto;min-width:0}
.cr-page .book-head{margin:0}
.cr-source h2{margin:0}
.cr-source p{margin:0}
.cr-facts{display:flex;flex-direction:column;gap:6px;margin:0}
.cr-facts div{display:flex;flex-wrap:wrap;gap:2px 12px}
.cr-facts dt{min-width:5em;color:var(--muted)}
.cr-facts dd{margin:0;overflow-wrap:anywhere}
.cr-license{margin:0;padding:12px;border-radius:10px;background:var(--line-soft);color:var(--ink);font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.mb-head-word strong{font-size:18px}
.mb-via{color:var(--muted)}
.mb-zh{margin:0}
.mb-own{display:inline-block;padding:0 8px;border-radius:10px;background:var(--accent-soft);color:var(--accent-dark);font-size:12.5px;font-weight:700}
.mb-form-hint{display:inline-block;margin-left:4px;padding:0 8px;border-radius:10px;background:var(--warn-bg);color:var(--warn-ink);font-size:12.5px;font-weight:700;font-style:normal;line-height:1.6;vertical-align:middle;white-space:nowrap}
.mb-def{margin:0;color:var(--ink);overflow-wrap:anywhere}
.mb-ex{margin:0;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.mb-remove{min-height:44px;padding:0 12px;flex:none}
.mb-pages{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mb-add textarea,.mb-paste,.mb-block textarea{width:100%;max-width:100%;min-height:96px;font:inherit}
.mb-more summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}
/* 改名或刪除：一欄、靠左。.panel form（0,1,1）會把 .panel 裡的表單改成 flex-direction:column，所以這裡也要用同樣的特異度寫，
   不然原本的 align-items:flex-end 與 .field 的 flex-basis 200px 在直向 flex 裡會把欄位推到右邊、撐成 200px 高 */
.mb-manage{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.mb-actions,.panel form.mb-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0;width:100%;min-width:0}
.mb-actions .field{align-self:stretch;min-width:0}
.mb-actions .field input{width:100%}
.mb-manage > p{margin:0}
.mb-dash{margin:0}
.mb-dash .mh-pill{min-height:44px}
.mb-block h2{font-size:17px}
.mb-check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mb-check-list li{min-width:0;overflow-wrap:anywhere}
.mb-check-list small{color:var(--muted)}
.mb-check-list .field input{width:100%}
.mb-err{margin:4px 0 0;color:var(--todo);font-size:14px}
/* 我的單字本：學新字（內頁的「學新字」按鈕與新字數、答錯畫面的字典卡） */
.mb-study{margin:10px 0 0}
.mb-study-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 0}
.mb-study-col{display:flex;flex-direction:column;gap:4px;min-width:0}
.mb-study-col .btn{min-height:44px}
.mb-new{margin:6px 0 0;color:var(--muted);font-size:14px}
.mb-reveal{margin:12px 0 0}

/* 首次設定、家長新增孩子（accounts/_school_grade.html）：學校名稱只在選「其他學校」時出現。有 JS 才藏（html.js），沒有 JS 一律顯示 */
.school-other{display:flex;flex-direction:column;gap:4px}
.js .school-other.is-off{display:none}

/* ===== 字根專區（/words/roots/ 目錄、/words/roots/<code>/ 字根頁；完整單字頁的 Word roots 區塊）：沿用 wh-／ww- 的版面與現有配色變數，不新增顏色 ===== */
/* 目錄頁（拆字磚，roots.html）：頂端主視覺（--hero-bg）＋熱門字根、今天的字根（--surface 卡）＋字根磚（電腦 4 欄、平板 3 欄、手機 2 欄）。
   拆字方塊：字根段實心 --accent／--on-accent，其他段 --ground 底、--line 框；拼法用 --accent-dark（芥末黃的 --accent 對白底不到 4.5:1）。 */
@media (min-width:1000px){
  main:has(> .rt-index){max-width:1280px}
  body:has(> main > .rt-index) .ft-slim-in{max-width:1280px}
}
.rt-index{display:flex;flex-direction:column;gap:20px;min-width:0}
.rt-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:24px;border-radius:20px;background:var(--hero-bg);color:var(--hero-ink)}
@media (min-width:860px){.rt-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;padding:32px}}
.rt-hero-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.rt-hero h1{margin:0;font-size:32px;color:var(--hero-ink)}
.rt-hero-sub{margin:0;color:var(--hero-ink);font-size:15px}
.rt-search input{width:100%;box-sizing:border-box;min-height:48px;padding:0 16px;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
.rt-search input::placeholder{color:var(--muted)}
.rt-popular{display:flex;flex-direction:column;gap:6px}
.rt-popular-title{margin:0;font-size:13px;font-weight:700;color:var(--hero-ink)}
.rt-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rt-pill{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px;border-radius:22px;background:var(--hero-btn);color:var(--hero-btn-ink);font-weight:700;font-size:14px;text-decoration:none}
.rt-pill:hover,.rt-pill:focus-visible{text-decoration:underline}
.rt-today{display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px;border-radius:16px;background:var(--surface);color:var(--ink)}
.rt-today-kicker{font-size:13px;font-weight:700;color:var(--accent-dark);text-decoration:none;overflow-wrap:anywhere}
.rt-today-kicker:hover,.rt-today-kicker:focus-visible{text-decoration:underline}
.rt-today-word{margin:0;font-size:30px;font-weight:700;line-height:1.1;overflow-wrap:anywhere}
.rt-today-zh{margin:0;font-size:15px;font-weight:600}
.rt-boxes{display:flex;flex-wrap:wrap;gap:6px}
.rt-box{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:44px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--ground);color:var(--ink)}
.rt-box.is-root{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.rt-box-seg{font-size:18px;font-weight:700;line-height:1.2}
.rt-box-zh{font-size:12px;line-height:1.3}
.rt-boxes.is-small{gap:4px}
.rt-boxes.is-small .rt-box{min-width:0;padding:3px 7px;border-radius:8px}
.rt-boxes.is-small .rt-box-seg{font-size:14px}
.rt-boxes.is-small .rt-box-zh{font-size:11px}
.rt-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.rt-all{margin:0;font-size:20px}
.rt-sort{display:inline-flex;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface)}
.rt-sort-link{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.rt-sort-link[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
/* 依字母時：.rt-lay 兩欄＝側邊字母欄＋字母分段。電腦（≥ 760px）字母欄在左，手機在右（通訊錄式）；字母欄跟著捲動（sticky），自己不捲。
   目前看到的字母（v6.js 用 IntersectionObserver 標 aria-current="true"）：--accent 底、--on-accent 字。搜尋中（.is-searching）字母欄隱藏、只剩一欄。 */
.rt-lay{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start}
.rt-lay.is-searching{grid-template-columns:minmax(0,1fr)}
.rt-lay-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.rt-letters{position:sticky;top:12px;align-self:start;display:flex;flex-direction:column;max-height:calc(100vh - 24px);overflow:auto;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.rt-letters[hidden]{display:none}
.rt-letter-link{display:flex;align-items:center;justify-content:space-between;gap:4px;height:27px;padding:0 8px;border-radius:8px;color:var(--ink);font-weight:700;font-size:13px;text-decoration:none}
.rt-letter-n{font-size:11px;font-weight:600;color:var(--muted)}
a.rt-letter-link:hover,a.rt-letter-link:focus-visible{background:var(--accent-soft);color:var(--accent-dark)}
a.rt-letter-link:hover .rt-letter-n,a.rt-letter-link:focus-visible .rt-letter-n{color:var(--accent-dark)}
.rt-letter-link[aria-current="true"]{background:var(--accent);color:var(--on-accent)}
.rt-letter-link[aria-current="true"] .rt-letter-n{color:var(--on-accent)}
.rt-letter-link.is-off{opacity:.35;cursor:default}
.rt-section{scroll-margin-top:8px}
html:has(.rt-lay){scroll-padding-top:0}  /* 全站預設留 68px（給其他頁的黏頂列）；這頁頂端沒有黏住的東西，點字母後標題要剛好在頂端 */
.rt-letter{position:sticky;top:0;z-index:2;margin:0 0 8px;padding:6px 0;background:var(--ground);font-size:18px}
.rt-letter-roots{margin-left:6px;font-size:13px;font-weight:600;color:var(--muted)}
.rt-bubble{position:fixed;z-index:60;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-size:28px;font-weight:700;pointer-events:none}
.rt-bubble[hidden]{display:none}
@media (max-width:759px){
  .rt-lay{grid-template-columns:minmax(0,1fr) 22px;gap:8px}
  .rt-lay > .rt-letters{grid-column:2;grid-row:1}
  .rt-lay > .rt-lay-main{grid-column:1;grid-row:1}
  .rt-letters{top:6px;padding:2px 0;border-radius:11px;touch-action:none;overflow:visible;max-height:none}
  .rt-letter-link{justify-content:center;height:18px;padding:0;border-radius:6px;font-size:11px}
  .rt-letter-n{display:none}
  .rt-today{display:none}
}
.rt-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.rt-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.rt-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rt-tile-item{min-width:0}
.rt-tile{display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none}
.rt-tile:hover,.rt-tile:focus-visible{border-color:var(--accent)}
.rt-tile-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.rt-forms{min-width:0;font-size:18px;font-weight:700;line-height:1.2;color:var(--accent-dark);overflow-wrap:anywhere}
.rt-count{flex:none;font-size:12px;color:var(--muted)}
.rt-tile-zh{font-size:15px;font-weight:700}
.rt-tile-ex{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.rt-tile-ex b{color:var(--accent-dark)}
.rt-tile .rt-boxes{display:none}
@media (min-width:700px){.rt-tile .rt-boxes{display:flex}}
.rt-none{margin:0;color:var(--muted)}
/* 字根專區三個分頁「字首｜字根｜字尾」（_roots_tabs.html）與字首字尾頁（affixes.html、affix.html）：沿用磚與方塊的樣式 */
.rt-tabs{display:inline-flex;align-self:flex-start;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface)}
.rt-tab{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;color:var(--ink);font-weight:700;font-size:15px;text-decoration:none}
.rt-tab[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.rt-tab-note{margin:-8px 0 0;color:var(--muted);font-size:14px}
.wh-head .rt-tabs{margin-top:8px}
.wh-head .rt-tab-note{margin:6px 0 0}
.wh-head .rt-search{display:block;margin-top:12px}
.rt-forms-rest{font-size:12.5px;font-weight:600;color:var(--muted)}
.rt-word-root{margin:0;font-size:13.5px}
.rt-word-root a{color:var(--accent-dark)}
.rt-en{font-size:13px;color:var(--muted)}
.rt-meaning{margin:6px 0 0;font-size:18px;font-weight:600}
.rt-words{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rt-word{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
.rt-word p{margin:0}
.rt-word-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.rt-word-head{font-size:17px;font-weight:700}
.rt-parts{font-size:15px;letter-spacing:.01em}
.rt-parts strong{color:var(--accent-dark)}
.rt-parts-zh{font-size:13.5px;color:var(--muted)}
.rt-word-line .say-btn{align-self:center}
.rt-word-line .ew-phonetic{font-size:14px;color:var(--muted)}
.rt-more{margin:8px 0 0}
.rt-more-sum{display:flex;align-items:center;min-height:44px;padding:0 4px;color:var(--accent-dark);font-weight:600;cursor:pointer;list-style:none}
.rt-more-sum::-webkit-details-marker{display:none}
.rt-more-sum::before{content:"▸";display:inline-block;margin-right:6px;transition:transform .15s}
.rt-more[open]>.rt-more-sum::before{transform:rotate(90deg)}
.rt-more[open]>.rt-more-sum{margin-bottom:8px}
.rt-add{margin:4px 0 0}
.rt-add>summary{list-style:none;cursor:pointer}
.rt-add>summary::-webkit-details-marker{display:none}
.rt-add-btn{min-height:44px;padding:0 16px;font-size:14px}
.rt-add-books{display:flex;flex-direction:column;gap:6px;margin:8px 0 0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--ground)}
.rt-add-q{margin:0;font-size:13.5px;color:var(--muted)}
.rt-add-book{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;text-align:left;overflow-wrap:anywhere;cursor:pointer}
.rt-add-book:hover,.rt-add-book:focus-visible{border-color:var(--accent);color:var(--accent-dark)}
.rt-add-book{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rt-add-book:disabled{cursor:default;color:var(--muted);border-color:var(--line)}
.rt-add-check{flex:none;font-size:13px;font-weight:600;color:var(--accent-dark)}
.rt-add-btn:disabled{cursor:default;opacity:1;color:var(--muted)}
.rt-add-status{display:block;margin:6px 0 0;font-size:13.5px;color:var(--accent-dark);overflow-wrap:anywhere}
.rt-add-status:empty{display:none}
.rt-add-status.is-error{padding:6px 10px;border-radius:8px;background:var(--warn-bg);color:var(--warn-ink)}
.rt-back{margin:4px 0 0}
.rt-back a{display:inline-flex;align-items:center;min-height:44px}
.ew-root h3{margin:0 0 4px}
.ew-root-link{text-decoration:none}
.ew-root-link:hover .ew-root-zh,.ew-root-link:focus-visible .ew-root-zh{text-decoration:underline}
.ew-root-zh{font-weight:600;color:var(--ink)}
.ew-root-parts{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 8px}

/* ===== 老師核准（feat/tutor-approval）：管理選單的待核准徽章、老師申請欄位、待核准／未通過頁、老師交流室連結。只用現有配色變數 ===== */
.ta-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--todo);color:var(--surface);font-size:12px;font-weight:700;line-height:1;flex:none}
.admin-pop .ta-pending-link{font-weight:700;color:var(--todo)}
.ta-fields{margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ta-fields legend{padding:0 6px;font-weight:700}
.ta-fields input{width:100%;max-width:100%}
.ta-note{margin:8px 0 0}
.ta-page h1{overflow-wrap:anywhere}
.ta-community{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ta-community p{margin:0}
.ta-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
@media (max-width:720px){.admin-menu summary .ta-badge{min-width:18px;height:18px;font-size:11px}}  /* 手機底部選單：徽章在「管理」下面（同 admin-dot 的位置） */

/* ===== 帳號名稱（feat/account-name）：註冊時即時檢查、設定頁的帳號名稱與學生 Email、家長頁「重設孩子的密碼」、忘記密碼頁的無 Email 說明。只用現有配色變數 ===== */
.an-check:empty{display:none}
.an-check.is-ok{color:var(--tip-ink)}
.an-check.is-bad{color:var(--todo)}
.an-mine{margin:0 0 12px;overflow-wrap:anywhere}
.an-email{margin:12px 0}
.an-child{margin:0 0 10px;overflow-wrap:anywhere}
.an-reset{display:inline-flex;align-items:center;min-height:44px}
.an-no-email{margin-top:16px}
.an-no-email p{margin:0 0 6px}

/* ===== 家長可選（feat/parent-optional）：學生首頁的「邀請家長」小卡、邀請頁。只用現有配色變數 ===== */
.po-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
.po-card-text{flex:1 1 220px;min-width:0;margin:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.po-card-btn{flex:none;min-height:44px;display:inline-flex;align-items:center}
.po-invite .tu-report-text{white-space:pre-wrap;overflow-wrap:anywhere}

/* 社會人士首頁（catalog/adult_home.html）：問候＋三張入口卡（考試包、單字、書齋）＋我的釘選；手機一欄，電腦（≥ 900px）三欄。只用 var(--…) */
.ad-home{display:flex;flex-direction:column;gap:16px;min-width:0}
.ad-home .sh-hero{margin:12px 0 0}
.ad-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.ad-cards li{display:flex;min-width:0}
.ad-card{flex:1;display:flex;align-items:center;gap:14px;min-width:0;min-height:72px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none}
.ad-card:hover,.ad-card:focus-visible{border-color:var(--accent);color:var(--ink)}
.ad-card-ico{flex:none;color:var(--accent)}
.ad-card-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.ad-card-text b{font-size:17px}
.ad-card-text span{color:var(--muted);font-size:14px;line-height:1.4}
@media (min-width:900px){
  .ad-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ad-card{flex-direction:column;align-items:flex-start;min-height:160px;padding:20px}
  .ad-card .sh-chev{display:none}
}

/* ===== 考試專區首頁（/exams/，exams.html＋_exams_free_card.html＋_exams_pack.html）：行銷頁，只用現有配色變數，不新增顏色 =====
   主視覺 --hero-bg／--hero-ink（主按鈕 --hero-btn／--hero-btn-ink）；示意作答卡、免費卡、考試包卡 --surface／--ink（小字 --muted）。
   狀態：已上線、答對 --tip-bg／--tip-ink；即將上線 --warn-bg／--warn-ink；籌備中、程度標籤、最多人想要 --accent-soft／--accent-dark。
   膠囊：未選 --surface／--ink、選中 --accent／--on-accent；「我想要」未按 --surface／--accent-dark（--accent 框）、已按 --accent／--on-accent。
   以上每一組都在 catalog/tests/test_theme_contrast.py 的 PAIRS（8 套配色 ≥ 4.5:1），vocab/tests/test_exams_landing.py 也檢查這裡只用這幾組。 */
@media (min-width:1000px){
  main:has(> .xp-page){max-width:1280px}
  body:has(> main > .xp-page) .ft-slim-in{max-width:1280px}
}
.xp-page{display:flex;flex-direction:column;gap:28px;min-width:0}
.xp-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 20px;border-radius:20px;background:var(--hero-bg);color:var(--hero-ink)}
@media (min-width:860px){.xp-hero{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;padding:40px}}
.xp-hero-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.xp-kicker{margin:0;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--hero-ink)}
.xp-hero h1{margin:0;font-size:28px;line-height:1.3;color:var(--hero-ink);overflow-wrap:anywhere}
@media (min-width:860px){.xp-hero h1{font-size:38px}}
.xp-hero-sub{margin:0;font-size:15px;line-height:1.7;color:var(--hero-ink)}
.xp-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:4px}
.xp-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:24px;background:var(--hero-btn);color:var(--hero-btn-ink);font-weight:700;font-size:16px;text-decoration:none}
.xp-cta:hover,.xp-cta:focus-visible{text-decoration:underline}
.xp-hero-link{display:inline-flex;align-items:center;min-height:44px;color:var(--hero-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.xp-hero :focus-visible{outline:2px solid var(--hero-ink);outline-offset:2px}
.xp-hero-note{margin:0;font-size:13px;color:var(--hero-ink)}
.xp-checks{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;font-weight:600;color:var(--hero-ink)}
.xp-checks li::before{content:"✓ "}
.xp-demo{display:none}
@media (min-width:860px){
  .xp-demo{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:16px;background:var(--surface);color:var(--ink);pointer-events:none;user-select:none}
}
.xp-demo-kicker{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.xp-demo-word{margin:0;font-size:30px;font-weight:700;line-height:1.2}
.xp-demo-options{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.xp-demo-options li{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 14px;border:1px solid var(--line);border-radius:10px;font-size:15px}
.xp-demo-options li.is-right{border-color:var(--tip-line);background:var(--tip-bg);color:var(--tip-ink);font-weight:700}
.xp-demo-next{margin:0;font-size:13px;color:var(--muted)}

.xp-h2{margin:0;font-size:22px}
.xp-sub{margin:4px 0 14px;color:var(--muted);font-size:14px}
.xp-free-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:760px){.xp-free-grid{gap:16px}}
.xp-free-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
@media (min-width:760px){.xp-free-card{gap:10px;padding:20px;border-radius:16px}}
.xp-free-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.xp-free-title{margin:0;font-size:16px;overflow-wrap:anywhere}
@media (min-width:760px){.xp-free-title{font-size:20px}}
.xp-free-title a{color:inherit}
.xp-state{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700}
.xp-state.is-live{background:var(--tip-bg);color:var(--tip-ink)}
.xp-state.is-soon{background:var(--warn-bg);color:var(--warn-ink)}
.xp-free-head .xp-preview{display:inline-block;margin:0;padding:2px 8px;font-size:12px}
.xp-grade{margin:0;font-size:12px;color:var(--muted)}
.xp-free-desc{display:none;margin:0;font-size:14px;line-height:1.6}
.xp-free-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.xp-free-rows li{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.xp-row-name{min-width:0;overflow-wrap:anywhere}
.xp-row-state{align-self:flex-start;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-size:12px;font-weight:700;white-space:nowrap}
.xp-row-state.is-live{background:var(--tip-bg);color:var(--tip-ink)}
.xp-free-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:auto;padding-top:4px}
.xp-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:22px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:14px;text-decoration:none}
.xp-btn:hover,.xp-btn:focus-visible{text-decoration:underline}
.xp-link{color:var(--accent-dark);font-size:14px;font-weight:600}
.xp-notify{margin:0}
.xp-free-more{display:none;margin:0;font-size:13px}
.xp-free-more a{color:var(--accent-dark)}
@media (min-width:760px){
  .xp-free-desc,.xp-free-more{display:block}
  .xp-free-rows li{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
  .xp-row-state{align-self:center}
  .xp-btn{padding:0 20px;font-size:15px}
}

.xp-packs{scroll-margin-top:12px}
.xp-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.xp-pills[hidden]{display:none}
.xp-pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.xp-pill-n{font-size:12px;font-weight:700}
.xp-pill[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.xp-pill:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
.xp-cat{display:flex;flex-direction:column;margin:0 0 22px;min-width:0}
.xp-cat[hidden]{display:none}
.xp-cat-title{margin:0;font-size:18px}
.xp-cat-note{margin:2px 0 10px;font-size:13px;color:var(--muted)}
.xp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
.xp-pack{scroll-margin-top:12px;min-width:0}
.xp-pack-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.xp-pack-title{margin:0;font-size:16px;overflow-wrap:anywhere}
.xp-pack-small{margin:0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.xp-levels{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.xp-levels li{padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-size:12px;font-weight:600}
.xp-pack-mods{display:none;margin:4px 0 0;font-size:13px;line-height:1.5}
.xp-top{align-self:flex-start;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-size:12px;font-weight:700}
.xp-wish{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:0}
.xp-wish-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid var(--accent);border-radius:22px;background:var(--surface);color:var(--accent-dark);font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer}
.xp-wish-btn.is-on{background:var(--accent);color:var(--on-accent)}
.xp-wish-btn:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
.xp-votes{font-size:12px;color:var(--muted);white-space:nowrap}
.xp-legal{margin:0;font-size:12px;color:var(--muted)}
/* 手機（< 760px）：每類一張白底清單、每個考試一列（左：標題＋小字＋程度；右：按鈕＋票數）；「全部」膠囊不顯示（v6.js 一次只開一類） */
@media (max-width:759px){
  .xp-pill-all{display:none}
  .xp-grid{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
  .xp-pack{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
  .xp-pack:last-child{border-bottom:0}
  .xp-pack.is-top{box-shadow:inset 3px 0 0 var(--accent)}
}
/* 電腦：每類 4 欄卡片；最多人想要的那張加粗 --accent 框 */
@media (min-width:760px){
  .xp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .xp-pack{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
  .xp-pack.is-top{border:2px solid var(--accent);padding:15px}
  .xp-pack-mods{display:block}
  .xp-wish{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:1000px){.xp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}