/* 教材词汇教学 · 跟读与默写 —— 样式
   要点：投屏大字 / iPad 触屏友好 / 20 套低亮度配色 / 侧栏可收起 / A4 打印 */

:root{
  --radius:14px; --radius-lg:20px;
  --shadow:0 1px 2px rgba(0,0,0,.18),0 10px 28px rgba(0,0,0,.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,.14);
  --font-en:"Times New Roman",Georgia,serif;
  /* 中文宋体 + 英文 Times New Roman（浏览器按字符集自动选，拉丁用 Times、汉字用宋体） */
  --font-cn:"Times New Roman","宋体",SimSun,"Songti SC","STSong","Noto Serif CJK SC",serif;
  --sidebar-w:264px;
  --transition:.22s cubic-bezier(.4,0,.2,1);
}

/* ============ 配色主题（都不刺眼） ============ */
/* 1. 墨玉（默认，深色） */
body[data-theme="ink"]{
  --bg:#0e1416; --panel:#151f22; --panel-2:#1b2628; --ink:#e6ecec; --muted:#8b9a9b;
  --line:#253233; --brand:#4f9d8c; --brand-ink:#eafff8; --brand-soft:#173029; --chip:#1b2628;
  --uk:#5fa8d3; --us:#d3a15c; --ok:#5fb98a; --bad:#d97a6c;
}
/* 2. 暮靛（深蓝紫） */
body[data-theme="indigo"]{
  --bg:#101321; --panel:#181d2e; --panel-2:#1f2538; --ink:#e7e9f2; --muted:#8e95ad;
  --line:#272e44; --brand:#7286d8; --brand-ink:#f2f4ff; --brand-soft:#1e2540; --chip:#1e2438;
  --uk:#7fb0e0; --us:#d8a566; --ok:#6fbf95; --bad:#dd7f74;
}
/* 3. 暖棕（咖啡色系） */
body[data-theme="sepia"]{
  --bg:#171210; --panel:#211a16; --panel-2:#2a211c; --ink:#efe6dd; --muted:#a2917f;
  --line:#332821; --brand:#c08a5a; --brand-ink:#fff6ec; --brand-soft:#2e2118; --chip:#271f1a;
  --uk:#8fae7e; --us:#d9a05b; --ok:#89b177; --bad:#d07a63;
}
/* 4. 松林（深绿） */
body[data-theme="forest"]{
  --bg:#0d1512; --panel:#141f1a; --panel-2:#1a2620; --ink:#e4ece7; --muted:#8ba394;
  --line:#22322a; --brand:#5da77f; --brand-ink:#f0fff7; --brand-soft:#16301f; --chip:#182520;
  --uk:#6fb3a6; --us:#cfa25f; --ok:#63b98a; --bad:#cf7a6b;
}
/* 5. 素笺（浅色米白，防眩光） */
body[data-theme="paper"]{
  --bg:#efece5; --panel:#faf8f4; --panel-2:#f2eee7; --ink:#332e28; --muted:#7f7768;
  --line:#e0d9cc; --brand:#8a7452; --brand-ink:#fffdf8; --brand-soft:#efe7d8; --chip:#f0ece4;
  --uk:#4a7d78; --us:#a9713c; --ok:#4f8a5f; --bad:#b45a4e;
}
/* 6. 雾灰（浅色冷灰） */
body[data-theme="mist"]{
  --bg:#e9edf1; --panel:#f8fafb; --panel-2:#eef2f6; --ink:#252d36; --muted:#71808f;
  --line:#d8e0e8; --brand:#4a6cf7; --brand-ink:#ffffff; --brand-soft:#e4e9fb; --chip:#eaeff5;
  --uk:#2f6fa8; --us:#a06a2c; --ok:#2f8a5b; --bad:#c05044;
}
/* 7. 深海（深青蓝，冷静） */
body[data-theme="ocean"]{
  --bg:#0a1622; --panel:#10202f; --panel-2:#152838; --ink:#e3edf5; --muted:#8296a8;
  --line:#1e3446; --brand:#3f9ac4; --brand-ink:#f0fbff; --brand-soft:#12303f; --chip:#152838;
  --uk:#5cb3dd; --us:#d9a25f; --ok:#57b98d; --bad:#d5796c;
}
/* 8. 樱花（深紫灰底 + 粉调） */
body[data-theme="sakura"]{
  --bg:#1a1218; --panel:#241a22; --panel-2:#2d2029; --ink:#f2e7ee; --muted:#a98d9e;
  --line:#3a2833; --brand:#d4789e; --brand-ink:#fff3f8; --brand-soft:#341d2a; --chip:#2d2029;
  --uk:#8fb4dd; --us:#dda86a; --ok:#68bd92; --bad:#dd7b83;
}
/* 9. 薄荷（深墨绿底 + 薄荷调，清爽） */
body[data-theme="mint"]{
  --bg:#0c1614; --panel:#13211e; --panel-2:#182a26; --ink:#e2f0ec; --muted:#87a79f;
  --line:#203631; --brand:#4fbfa0; --brand-ink:#eefff9; --brand-soft:#12332b; --chip:#182a26;
  --uk:#63b6cf; --us:#d3a566; --ok:#5cc79a; --bad:#d5806f;
}
/* 10. 葡萄（深紫，沉稳） */
body[data-theme="grape"]{
  --bg:#130f1c; --panel:#1c1729; --panel-2:#241d33; --ink:#eae4f5; --muted:#998fae;
  --line:#2e2640; --brand:#9a7ad6; --brand-ink:#f7f2ff; --brand-soft:#281f3c; --chip:#241d33;
  --uk:#84b0e2; --us:#d8a468; --ok:#6cbf97; --bad:#d97b83;
}
/* 11. 摩卡（浅色奶咖，暖而不亮） */
body[data-theme="mocha"]{
  --bg:#e8e0d6; --panel:#f6f1e9; --panel-2:#efe8de; --ink:#3a2f26; --muted:#877868;
  --line:#dbcfc0; --brand:#a1703f; --brand-ink:#fffaf3; --brand-soft:#ece0d0; --chip:#eee7dc;
  --uk:#3f7b74; --us:#a1682f; --ok:#4c8a5d; --bad:#b0564a;
}
/* 12. 青瓷（浅色冷青，干净） */
body[data-theme="celadon"]{
  --bg:#e6eeec; --panel:#f6faf9; --panel-2:#ecf3f1; --ink:#22322f; --muted:#6d8580;
  --line:#d5e2de; --brand:#3f8f7d; --brand-ink:#f2fffb; --brand-soft:#e0efea; --chip:#e9f1ef;
  --uk:#2f7ba6; --us:#a06f31; --ok:#368a5f; --bad:#bb5548;
}
/* 13. 玫瑰（浅色粉调，柔和） */
body[data-theme="rose"]{
  --bg:#f1e8ea; --panel:#fbf6f7; --panel-2:#f4ecee; --ink:#382a2e; --muted:#877175;
  --line:#e3d5d8; --brand:#b3627f; --brand-ink:#fff6f9; --brand-soft:#f0e0e5; --chip:#f2e9eb;
  --uk:#41768f; --us:#a3702f; --ok:#4a8360; --bad:#b2554f;
}
/* 14. 暗金（深棕黑 + 金，投屏醒目） */
body[data-theme="amber"]{
  --bg:#15120c; --panel:#1f1a12; --panel-2:#282117; --ink:#f2e9d8; --muted:#a89573;
  --line:#372d1d; --brand:#d9a441; --brand-ink:#fff8e8; --brand-soft:#33280f; --chip:#282117;
  --uk:#7fb0cf; --us:#dda85c; --ok:#7cbb84; --bad:#d47a63;
}
/* 15. 石墨（深色中性灰，最耐看） */
body[data-theme="graphite"]{
  --bg:#101214; --panel:#191d20; --panel-2:#212629; --ink:#e8eaec; --muted:#8d959b;
  --line:#2b3236; --brand:#6f9ecf; --brand-ink:#f4faff; --brand-soft:#1c252c; --chip:#212629;
  --uk:#6fa9d8; --us:#cfa367; --ok:#65b48c; --bad:#d3796d;
}
/* 16. 黛蓝（深板岩蓝，沉稳） */
body[data-theme="slate"]{
  --bg:#0d1520; --panel:#141f2c; --panel-2:#1a2735; --ink:#e4ebf3; --muted:#8695a6;
  --line:#22303f; --brand:#5b8fc7; --brand-ink:#f2f8ff; --brand-soft:#17293a; --chip:#1a2735;
  --uk:#63a6d6; --us:#d0a061; --ok:#5fb389; --bad:#d2766a;
}
/* 17. 橄榄（深墨绿棕，复古） */
body[data-theme="olive"]{
  --bg:#12140e; --panel:#1b1e15; --panel-2:#23271b; --ink:#eaeee0; --muted:#959b83;
  --line:#2e3424; --brand:#9aa84f; --brand-ink:#fbfdee; --brand-soft:#262b16; --chip:#23271b;
  --uk:#6fa9c0; --us:#cfa35f; --ok:#7bb074; --bad:#cd7a63;
}
/* 18. 天青（浅色冷青，清透） */
body[data-theme="sky"]{
  --bg:#e6f0f4; --panel:#f7fbfd; --panel-2:#ecf4f8; --ink:#1f2f38; --muted:#6b8592;
  --line:#d3e2ea; --brand:#2c86b8; --brand-ink:#f2fbff; --brand-soft:#dcecf5; --chip:#e8f1f6;
  --uk:#1f6f9e; --us:#9c6a2a; --ok:#2f8a63; --bad:#bb5448;
}
/* 19. 蜜桃（浅色暖粉，柔和） */
body[data-theme="peach"]{
  --bg:#f5eae2; --panel:#fdf7f2; --panel-2:#f7eee7; --ink:#3b2c24; --muted:#8d766a;
  --line:#e9d8ca; --brand:#c87550; --brand-ink:#fff7f1; --brand-soft:#f2e0d5; --chip:#f2e5db;
  --uk:#3d7c86; --us:#a86a2c; --ok:#4d8a5e; --bad:#b4554a;
}
/* 20. 苔原（浅色灰绿，安静） */
body[data-theme="tundra"]{
  --bg:#e8ece6; --panel:#f7faf5; --panel-2:#eef2ea; --ink:#28302a; --muted:#728073;
  --line:#d8dfd4; --brand:#5c8f63; --brand-ink:#f4fdf6; --brand-soft:#e0ecdf; --chip:#eaf0e7;
  --uk:#3f7c86; --us:#9a6c2e; --ok:#3f8a5f; --bad:#b35548;
}
@media (prefers-color-scheme:light){ :root{ --shadow:0 1px 3px rgba(16,24,40,.08),0 8px 22px rgba(16,24,40,.07); } }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-text-size-adjust:100%;transition:background var(--transition),color var(--transition);
}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;padding:10px 16px;
  background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;flex-wrap:wrap;
}
.icon-btn{
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  width:38px;height:38px;border-radius:11px;font-size:17px;cursor:pointer;line-height:1;
}
.icon-btn:hover{border-color:var(--brand);color:var(--brand)}
.brand{display:flex;align-items:center;gap:10px;min-width:180px}
.logo{width:34px;height:34px;border-radius:10px;background:var(--brand);color:var(--brand-ink);
  display:grid;place-items:center;font-weight:700}
.brand b{display:block;font-size:15px}
.brand small{color:var(--muted);font-size:12px}
.modes{display:flex;gap:6px;background:var(--chip);padding:4px;border-radius:12px}
.mode-btn{border:0;background:transparent;color:var(--muted);font-size:15px;font-weight:600;
  padding:8px 16px;border-radius:9px;cursor:pointer;transition:var(--transition)}
.mode-btn.active{background:var(--panel);color:var(--brand);box-shadow:var(--shadow-sm)}
.top-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 12px;
  border-radius:999px;font-size:13px;cursor:pointer;white-space:nowrap;transition:var(--transition)}
.pill:hover{border-color:var(--brand);color:var(--brand)}
.pill.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}

/* ---------- 布局 ---------- */
.layout{display:flex;align-items:stretch;min-height:calc(100vh - 59px)}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--panel);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  max-height:calc(100vh - 59px);position:sticky;top:59px;
  transition:margin-left var(--transition),opacity var(--transition);
}
.layout.collapsed .sidebar{margin-left:calc(-1 * var(--sidebar-w));opacity:0;pointer-events:none}
.sidebar-mask{display:none}
.side-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.side-tools{display:flex;gap:6px}
.mini{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;
  padding:3px 9px;font-size:12px;cursor:pointer}
.mini:hover{color:var(--brand);border-color:var(--brand)}
.tree{overflow:auto;padding:8px 8px 0;flex:1}
.side-foot{padding:10px 14px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.stat-line{font-size:13px;color:var(--muted)} .stat-line b{color:var(--brand);font-size:15px}
.preset-row{display:flex;gap:6px}
.preset-row input{flex:1;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:transparent;color:var(--ink);font-size:13px}
.presets{display:flex;flex-wrap:wrap;gap:6px}
.presets .preset{background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--muted)}
.presets .preset:hover{border-color:var(--brand);color:var(--brand)}
.wide{width:100%;border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);
  border-radius:11px;padding:10px;font-size:13.5px;cursor:pointer;font-weight:600}
.wide.ghost{background:transparent;color:var(--brand)}

/* 树 */
.ed{padding:8px 8px 2px;font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.06em}
.book{margin:2px 0 4px 4px}
.book>.bk{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;cursor:pointer;padding:5px 6px;border-radius:9px}
.book>.bk:hover{background:var(--chip)}
.bk .caret{width:14px;color:var(--muted);transition:transform var(--transition)}
.bk.collapsed .caret{transform:rotate(-90deg)}
.bk .cnt{margin-left:auto;color:var(--muted);font-size:12px;font-weight:400}
.units{margin-left:10px;border-left:1px dashed var(--line);padding-left:6px}
.units.hidden{display:none}
.unit{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:9px;font-size:13.5px;cursor:pointer}
.unit:hover{background:var(--chip)}
.unit input{width:16px;height:16px;accent-color:var(--brand)}
.unit.sel{background:var(--brand-soft)}
.unit .u-n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit .u-c{color:var(--muted);font-size:12px}

/* ---------- 主区 ---------- */
.stage{flex:1;display:flex;flex-direction:column;min-width:0;padding:20px 22px 0}
.panel{display:none;flex:1;flex-direction:column;min-height:0}
.panel.active{display:flex}
.hints{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;color:var(--muted);
  font-size:12px;padding:10px 0 12px;border-top:1px solid var(--line);margin-top:12px}
kbd{background:var(--chip);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  padding:1px 6px;font-family:inherit;font-size:11.5px}

/* 跟读卡片 */
.read-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:26px 30px;display:flex;flex-direction:column;gap:14px;flex:1;justify-content:center}
.card-top{display:flex;gap:8px}
.chip{background:var(--brand-soft);color:var(--brand);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600}
.chip.ghost{background:var(--chip);color:var(--muted);font-weight:400}
.word{font-family:var(--font-en);font-size:clamp(44px,9vw,104px);line-height:1.05;font-weight:700;word-break:break-word}
/* 单词本体里的音节：默认连字符分开，朗读时高亮当前音节 */
.word .syl{padding:0 2px;border-radius:10px;transition:background .12s,color .12s}
.word .syl.on{background:var(--brand);color:#fff}
.word .syl-sep{font-style:normal;color:var(--muted);font-weight:400;padding:0 1px}
.phonetics{display:flex;gap:26px;flex-wrap:wrap}
.ph{display:flex;align-items:center;gap:8px;font-family:var(--font-en);font-size:clamp(18px,2.4vw,30px)}
.ph .flag{font-family:inherit;font-size:12.5px;background:var(--chip);color:var(--muted);border-radius:6px;padding:2px 7px}
.ph:nth-child(1) #readUk{color:var(--uk)}
.ph:nth-child(2) #readUs{color:var(--us)}
.spk{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 10px;cursor:pointer;font-size:16px}
.spk:hover{border-color:var(--brand)}
.zh{font-family:var(--font-cn);font-size:clamp(20px,3vw,34px);font-weight:600}
.zh.masked{filter:blur(14px);user-select:none}
.mask-hint{color:var(--muted);font-size:13px}
.read-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.ctrl{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;
  padding:11px 18px;font-size:15px;cursor:pointer;font-weight:600;transition:var(--transition)}
.ctrl:hover{border-color:var(--brand);color:var(--brand)}
.ctrl.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.ctrl.primary:hover{filter:brightness(1.05)}
.ctrl.ghost{color:var(--muted)}
.ctrl.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.read-settings{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:14px;color:var(--muted);font-size:13px}
.read-settings label{display:flex;align-items:center;gap:8px}
.read-settings b{color:var(--ink);min-width:34px;display:inline-block}
input[type=range]{accent-color:var(--brand);width:120px}
.progress{height:8px;background:var(--chip);border-radius:999px;margin-top:16px;overflow:hidden}
.bar{height:100%;width:0;background:var(--brand);transition:width .2s}
.progress-text{text-align:right;color:var(--muted);font-size:12.5px;padding:6px 2px 0}

/* 默写 */
.dict-toolbar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:12px 16px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:13.5px}
.dict-toolbar select,.set-row select,.modal input[type=text],.modal textarea{
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:10px;padding:7px 10px;font-size:14px;font-family:inherit}
.quiz-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:22px 26px;margin-top:14px;flex:1;display:flex;flex-direction:column;gap:14px;justify-content:center}
.quiz-top{display:flex;gap:8px;align-items:center}
.quiz-q{font-family:var(--font-cn);font-size:clamp(26px,4.4vw,54px);font-weight:700;line-height:1.25;word-break:break-word}
.quiz-q.en{font-family:var(--font-en)}
.quiz-phon{font-family:var(--font-en);font-size:clamp(17px,2.1vw,26px);color:var(--muted)}
.quiz-input-row{display:flex;gap:10px;flex-wrap:wrap}
.quiz-input-row input{flex:1;min-width:220px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  border-radius:12px;padding:14px 16px;font-size:clamp(18px,2.2vw,26px);font-family:var(--font-en)}
.quiz-input-row input:focus{outline:2px solid var(--brand);outline-offset:1px}
.quiz-feedback{font-family:var(--font-cn);font-size:17px;font-weight:600;min-height:24px}
.quiz-feedback.ok{color:var(--ok)} .quiz-feedback.bad{color:var(--bad)}
.quiz-answer{font-family:var(--font-cn);font-size:16px;color:var(--muted);min-height:22px}
.quiz-result{margin-top:14px;display:none}
.quiz-result.show{display:block}
.res-line{display:flex;gap:10px;align-items:baseline;font-size:15px;padding:4px 0;color:var(--muted)}
.res-line b{color:var(--ink);font-size:20px}
.res-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.wrong-list{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px;font-family:var(--font-cn);font-size:14px;line-height:1.9;max-height:240px;overflow:auto}
.wrong-list .w{display:flex;gap:10px;flex-wrap:wrap}
.wrong-list .w b{font-family:var(--font-en)}

/* 弹窗 */
.modal{position:fixed;inset:0;background:rgba(6,10,14,.55);display:grid;place-items:center;z-index:300;padding:16px}  /* 必须高于门禁(200) */
.modal[hidden]{display:none}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;
  width:min(560px,100%);box-shadow:var(--shadow);max-height:88vh;overflow:auto}
.modal-box.wide-box{width:min(860px,100%)}
.modal-box h3{margin:0 0 14px;font-size:18px}
.set-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}
.set-row label{color:var(--muted)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.muted{color:var(--muted);font-size:13px;line-height:1.8}
.cache-info{font-size:12.5px;color:var(--muted)}
.inline-btns{display:flex;gap:8px;flex-wrap:wrap}
.imp-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.imp-grid textarea{width:100%;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  border-radius:12px;padding:10px;font-family:var(--font-en);font-size:14px;resize:vertical}
.imp-grid input[type=text]{width:100%;margin-bottom:8px}
.lbl{display:block;color:var(--muted);font-size:13px;margin:8px 0 6px}
.file-drop{display:block;margin-top:10px;border:1px dashed var(--line);border-radius:12px;padding:14px;
  text-align:center;color:var(--muted);font-size:13px;cursor:pointer;background:var(--panel-2)}
.file-drop:hover,.file-drop.over{border-color:var(--brand);color:var(--brand)}
.imp-preview{margin-top:10px;font-family:var(--font-cn);font-size:13px;color:var(--muted);max-height:200px;overflow:auto;line-height:1.8}
.imp-preview table{width:100%;border-collapse:collapse;font-size:12.5px}
.imp-preview td,.imp-preview th{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left}
.inline{display:flex;align-items:center;gap:6px}
.tabs{display:flex;gap:6px;background:var(--chip);padding:4px;border-radius:11px;margin:10px 0}
.tab-btn{border:0;background:transparent;color:var(--muted);padding:7px 16px;border-radius:8px;font-size:14px;cursor:pointer;font-weight:600}
.tab-btn.active{background:var(--panel);color:var(--brand)}
.acct-form{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.acct-form input{width:100%;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:10px;padding:11px 12px;font-size:15px}
#redeemCode{width:150px}
.themes{display:flex;gap:8px;flex-wrap:wrap}
.theme-swatch{width:64px;border:1px solid var(--line);border-radius:11px;padding:6px 4px;background:var(--panel-2);
  cursor:pointer;text-align:center;font-size:11.5px;color:var(--muted)}
.theme-swatch.on{border-color:var(--brand);color:var(--brand);box-shadow:var(--shadow-sm)}
.theme-swatch .dots{display:flex;justify-content:center;gap:3px;margin-bottom:4px}
.theme-swatch .dots i{width:10px;height:10px;border-radius:3px;display:block}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--panel-2);
  color:var(--ink);border:1px solid var(--line);padding:11px 18px;border-radius:999px;font-size:14px;z-index:420;box-shadow:var(--shadow)}
.toast[hidden]{display:none}

.answer-pane{margin-top:10px}
#handCanvas{display:block;width:100%;height:clamp(160px,26vh,300px);touch-action:none;cursor:crosshair}
.pen-size{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.ctrl.ok-btn{border-color:var(--ok);color:var(--ok)}
.ctrl.bad-btn{border-color:var(--bad);color:var(--bad)}
body.big #handCanvas{height:clamp(200px,34vh,380px)}

/* 大字投屏 */
body.big .word{font-size:clamp(64px,12vw,150px)}
body.big .quiz-q{font-size:clamp(34px,6.5vw,80px)}
body.big .zh{font-size:clamp(26px,4.2vw,46px)}
body.big .read-settings,body.big .hints{display:none}

/* iPad / 窄屏：侧栏变抽屉 */
@media (max-width:900px){
  .layout{flex-direction:column}
  .sidebar{
    position:fixed;left:0;top:59px;bottom:0;width:min(84vw,320px);z-index:40;
    max-height:none;box-shadow:var(--shadow)
  }
  .layout.collapsed .sidebar{margin-left:calc(-1 * min(84vw,320px))}
  .sidebar-mask{display:block;position:fixed;inset:59px 0 0 0;background:rgba(6,10,14,.45);z-index:35}
  .sidebar-mask[hidden]{display:none}
  .stage{padding:14px}
  .word{font-size:clamp(38px,11vw,72px)}
  .imp-grid{grid-template-columns:1fr}
  .ctrl{padding:12px 16px}
}

/* A4 打印 / 存为 PDF */
@page{ size:A4; margin:18mm 16mm; }
@media print{
  body{background:#fff!important;color:#000!important}
  .topbar,.sidebar,.sidebar-mask,.hints,.dict-toolbar,.quiz-input-row,.read-controls,
  .read-settings,.res-actions,.toast,.modal{display:none!important}
  .layout{display:block}
  .stage{padding:0}
  .quiz-card,.read-card,.wrong-list{box-shadow:none;border:0;background:#fff}
  .print-sheet{display:block!important;color:#000}
  .print-sheet h2,.print-sheet div{color:#000}
}
.print-sheet{display:none;font-family:var(--font-cn)!important}
.print-sheet table{font-family:var(--font-cn)}

/* ================= 单词与题面居中排版（视觉更协调） ================= */
.read-card{text-align:center;align-items:center}
.read-card .card-top{justify-content:center}
.word{text-align:center;letter-spacing:.01em;line-height:1.12}
.phonetics{justify-content:center}
.zh{text-align:center;line-height:1.35}
.mask-hint{text-align:center}

.quiz-card{text-align:center;align-items:center}
.quiz-top{justify-content:center}
.quiz-q{text-align:center}
.quiz-phon{text-align:center}
.quiz-feedback,.quiz-answer{text-align:center;width:100%}
.quiz-input-row{justify-content:center;width:100%}
.quiz-input-row input{text-align:center}
.read-controls,.read-settings{justify-content:center}
.progress-text{text-align:center}

/* ================= 视觉微调（行距 / 右上角进度 / 投屏放大） ================= */
/* ① 单词与释义之间留白更像教材排版 */
.read-card{gap:20px}
.word{margin-bottom:2px}
.phonetics{margin-top:2px}
.zh{margin-top:12px;line-height:1.5}
.quiz-q{margin-bottom:4px;line-height:1.3}
.quiz-phon{margin-top:2px}

/* ② 默写卡片：单元标签在左上，进度与计时在右上（不再居中） */
.quiz-card{position:relative;padding-top:52px}
.quiz-top{position:absolute;top:14px;left:20px;right:20px;margin:0;
          justify-content:space-between;align-items:center}
.quiz-meta{display:flex;gap:8px;align-items:center}

/* ③ 投屏大字模式：再放大一级 */
body.big .word{font-size:clamp(76px,14vw,180px);line-height:1.1}
body.big .ph{font-size:clamp(22px,3vw,42px)}
body.big .zh{font-size:clamp(30px,5vw,58px);margin-top:16px}
body.big .quiz-q{font-size:clamp(42px,7.6vw,96px)}
body.big .quiz-phon{font-size:clamp(20px,2.6vw,36px)}
body.big .quiz-card{padding-top:56px}

/* ================= 词性 + 释义合并显示（多词性分行） ================= */
.zh{display:flex;flex-direction:column;gap:4px;align-items:center}
.zh .m-line{display:block}
.zh .m-pos,.quiz-q .m-pos{font-style:normal;font-family:"Times New Roman",serif;color:var(--muted);font-weight:600;margin-right:2px}
.quiz-q .m-line{display:block}
.quiz-q{display:flex;flex-direction:column;gap:4px;align-items:center}
.quiz-answer .ans-en{font-family:"Times New Roman",serif}
.quiz-answer .ans-zh{font-size:.95em}
#readPos:empty{display:none}

/* 手写笔迹缩略图 + 识别结果 */
.ink-thumb{margin-top:8px;display:flex;align-items:center;gap:10px;justify-content:center;color:var(--muted);font-size:12.5px}
.ink-thumb img{border:1px solid var(--line);border-radius:8px;background:#fff;max-width:220px}

/* 分批导航（背诵数量） */
.batch-nav{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.batch-nav b{color:var(--ink);font-variant-numeric:tabular-nums}
.read-settings select{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  border-radius:9px;padding:5px 8px;font-size:13px;font-family:inherit}

/* 课前检测 */
.check-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:52px 26px 22px;margin-top:14px;flex:1;position:relative;
  display:flex;flex-direction:column;gap:14px;justify-content:center;text-align:center;align-items:center}
.check-q{font-size:clamp(38px,7vw,96px);font-weight:700;line-height:1.15;font-family:var(--font-cn)}
.check-q.en{font-family:var(--font-en)}
.check-phon{font-family:var(--font-en);font-size:clamp(16px,2vw,26px);color:var(--muted);min-height:22px}
.check-timer{display:flex;align-items:center;gap:10px;width:min(560px,90%);justify-content:center}
.check-timer b{font-size:clamp(28px,4vw,52px);font-variant-numeric:tabular-nums;color:var(--brand);min-width:2.2em}
.check-timer .unit{color:var(--muted);font-size:14px}
.check-bar{flex:1;height:8px;background:var(--chip);border-radius:999px;overflow:hidden}
.check-bar i{display:block;height:100%;width:100%;background:var(--brand);transition:width .1s linear}
.check-answer{min-height:44px;font-size:clamp(22px,3.4vw,46px);font-family:var(--font-cn)}
.check-answer .ans-en{font-family:var(--font-en)}
.check-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.check-progress{color:var(--muted);font-size:13px}
body.big .check-q{font-size:clamp(48px,9vw,130px)}
body.big .check-answer{font-size:clamp(30px,5vw,64px)}
body.big .check-timer b{font-size:clamp(34px,5vw,64px)}

/* ================= 打字作答区：整体居中、输入框独占一行 ================= */
.type-input-wrap{display:flex;justify-content:center;width:100%;margin-top:6px}
#quizInput{
  width:min(560px,94%);max-width:560px;flex:0 0 auto;
  text-align:center;padding:16px 18px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  font-size:clamp(20px,2.4vw,30px);font-family:var(--font-en);
  letter-spacing:.02em;transition:border-color var(--transition),box-shadow var(--transition);
}
#quizInput::placeholder{color:var(--muted);font-size:.62em;letter-spacing:0}
#quizInput:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.type-actions{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:12px}
.type-actions .ctrl{min-width:104px;justify-content:center;text-align:center}
body.big #quizInput{width:min(680px,94%);font-size:clamp(26px,3vw,42px);padding:18px 22px}
/* 旧的同行布局若仍在，取消其伸缩，避免挤在一起 */
.quiz-input-row{flex-wrap:wrap}
.quiz-input-row input{flex:0 1 auto;width:min(560px,94%);text-align:center}

/* ================= 跟读卡片配图（右侧方形图） ================= */
.read-card{flex-direction:row;align-items:center;gap:26px}
.read-main{flex:1 1 auto;display:flex;flex-direction:column;gap:14px;min-width:0;
  text-align:center;align-items:center;justify-content:center}
.read-figure{flex:0 0 auto;width:clamp(150px,22vw,300px);margin:0;display:flex;flex-direction:column;gap:6px;align-items:center}
.read-figure img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:1px solid var(--line);
  background:var(--panel-2);box-shadow:var(--shadow-sm)}
.read-figure figcaption{font-size:11.5px;color:var(--muted)}
.read-figure.loading img{background:linear-gradient(100deg,var(--panel-2),var(--chip),var(--panel-2));background-size:200% 100%;
  animation:imgshim 1.2s linear infinite}
@keyframes imgshim{from{background-position:200% 0}to{background-position:-20% 0}}
body.big .read-figure{width:clamp(200px,26vw,420px)}
@media (max-width:900px){
  .read-card{flex-direction:column-reverse;gap:16px}
  .read-figure{width:min(52vw,220px)}
}

/* ================= 两栏：左「单词范围」 / 右「模式」 ================= */
.side-scope-label{font-family:var(--font-cn);font-size:13px;font-weight:700;color:var(--muted);
  letter-spacing:2px;padding:14px 16px 0}
.stage-modes{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.stage-modes .modes{padding:5px;border-radius:14px;gap:8px}
.stage-modes .mode-btn{padding:9px 18px;font-size:16px;border-radius:11px}
.stage-col-label{font-family:var(--font-cn);font-size:13px;font-weight:700;color:var(--muted);letter-spacing:2px}
.stage-hint{font-size:12.5px;color:var(--muted);margin-left:auto}

/* ================= 单词游戏（水果忍者） ================= */
#panelGame.active{display:flex}
.gm-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.gm-modes{display:flex;gap:6px;background:var(--chip);padding:4px;border-radius:12px}
.gm-mode{border:0;background:transparent;color:var(--muted);font-family:inherit;font-size:14.5px;font-weight:600;
  padding:8px 14px;border-radius:9px;cursor:pointer}
.gm-mode.active{background:var(--panel);color:var(--brand);box-shadow:var(--shadow-sm)}
.gm-hud{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.gm-chip{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:6px 10px;
  font-size:13px;color:var(--muted)}
.gm-chip b{color:var(--ink);font-family:var(--font-en);font-size:15px}
.gm-chip.lives b{color:#ff6b6b;letter-spacing:1px}
.gm-prompt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 16px;margin-bottom:12px;
  font-family:var(--font-cn);font-size:19px;font-weight:600;min-height:52px}
.gm-prompt-head{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:1px}
.gm-prompt-body{font-family:var(--font-en);font-size:clamp(20px,3vw,34px);font-weight:700;color:var(--ink)}
.gm-stage{position:relative;flex:1;min-height:420px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel-2);overflow:hidden;box-shadow:var(--shadow-sm)}
#gmCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.gm-flash{position:absolute;left:50%;top:14px;transform:translate(-50%,-14px);opacity:0;pointer-events:none;
  font-family:var(--font-cn);font-size:17px;font-weight:700;padding:8px 16px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);transition:opacity .18s,transform .18s;
  max-width:92%;text-align:center}
.gm-flash.show{opacity:1;transform:translate(-50%,0)}
.gm-flash.ok{color:#5fd08a;border-color:rgba(95,208,138,.5)}
.gm-flash.bad{color:#ff6b6b;border-color:rgba(255,107,107,.5)}
.gm-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(8,14,16,.62);backdrop-filter:blur(2px);padding:20px}
.gm-overlay[hidden]{display:none}
.gm-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 24px;max-width:620px;
  text-align:center;box-shadow:var(--shadow)}
.gm-card h3{margin:0 0 12px;font-family:var(--font-cn);font-size:22px;color:var(--ink)}
.gm-stat-box,.gm-stat{font-family:var(--font-cn);font-size:15px;line-height:1.85;color:var(--muted)}
.gm-card b{color:var(--ink)}
.gm-wrong{margin-top:12px;text-align:left;font-family:var(--font-cn);font-size:14.5px;color:var(--muted);
  max-height:210px;overflow:auto}
.gm-wrong ul{margin:6px 0 0;padding-left:20px}
.gm-wrong li{margin:3px 0}
.gm-wrong li b{font-family:var(--font-en);font-size:15.5px}
.gm-card .ctrl{margin-top:16px}
@media (max-width:900px){
  .stage-hint{display:none}
  .gm-stage{min-height:340px}
  .gm-hud{width:100%;margin-left:0}
  .gm-prompt{font-size:16px}
}

.gm-set{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.gm-set select{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:9px;
  padding:5px 8px;font-family:inherit;font-size:13.5px}
.gm-prompt.waiting{color:var(--muted)}
.gm-prompt.waiting .gm-prompt-head::after{content:' · 水果马上抛出来'}
.gm-prompt.waiting .gm-prompt-body{opacity:.8}

#acctMsg, #acctMsg2, #acctWarn{white-space:pre-wrap;line-height:1.7}
.showpwd{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* ===== 关键修正：让 hidden 属性永远生效 =====
   .acct-form / .read-figure 等设了 display:flex，会盖掉浏览器默认的 [hidden]{display:none}，
   导致「登录 + 注册」两个表单同时出现、配图空框一直占位。这里统一兜住。 */
[hidden]{display:none !important}

.read-figure img{cursor:pointer}
.word .syl{cursor:default}
.read-figure figcaption{text-align:center;line-height:1.5;max-width:100%}

/* ===== 竞技模式：比分板 / 当前组 / 排名 ===== */
.gm-board{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.gm-board .gm-team{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-left:6px solid var(--tc,var(--brand));
  background:var(--panel);border-radius:12px;padding:7px 14px;font-family:var(--font-cn);font-size:15px;color:var(--muted)}
.gm-board .gm-team b{color:var(--ink);font-weight:700}
.gm-board .gm-team i{font-style:normal;font-family:var(--font-en);font-size:20px;font-weight:700;color:var(--tc,var(--brand))}
.gm-board .gm-team.on{background:var(--brand-soft);box-shadow:0 0 0 2px var(--tc,var(--brand)) inset;color:var(--ink)}
.gm-turn{font-family:var(--font-cn);font-size:15px;font-weight:700;color:var(--brand);margin:-4px 0 8px;min-height:20px}
.gm-rank{display:flex;align-items:center;gap:12px;font-family:var(--font-cn);font-size:17px;padding:9px 6px;border-bottom:1px solid var(--line)}
.gm-rank:last-of-type{border-bottom:0}
.gm-medal{font-size:22px;width:30px;text-align:center}
.gm-rank-score{font-family:var(--font-en);font-weight:700;font-size:19px;color:var(--ink);margin-left:auto}
.gm-rank-sub{font-size:13px;color:var(--muted);width:170px;text-align:right}
.gm-comp-tip{margin:12px 0 0;line-height:1.75;text-align:left;font-size:13.5px}
.comp-only{display:inline-flex}

/* ===== 🎨 配色面板（点开直接选） ===== */
.theme-pop{position:absolute;top:58px;right:14px;z-index:80;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:12px 14px;width:min(430px,92vw)}
.theme-pop[hidden]{display:none !important}
.theme-pop-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.theme-pop-head b{font-family:var(--font-cn);font-size:15px}
.theme-pop-head .mini{margin-left:auto}
.theme-pop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:52vh;overflow:auto}
.theme-pop .theme-swatch{width:100%;padding:6px 3px;font-size:12px}
.theme-pop .theme-swatch .dots i{width:9px;height:9px}
@media (max-width:520px){ .theme-pop-grid{grid-template-columns:repeat(4,1fr)} }

/* ===== 左栏：版本切换（人教版 / 外研版 / 全部）===== */
.ed-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px 2px}
.ed-tab{flex:1 1 auto;min-width:72px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);font-family:var(--font-cn);font-size:13.5px;font-weight:600;
  cursor:pointer;transition:var(--transition);white-space:nowrap}
.ed-tab:hover{border-color:var(--brand)}
.ed-tab.on{background:var(--brand);color:var(--brand-ink);border-color:transparent;box-shadow:var(--shadow-sm)}
.ed-tab small{display:block;font-weight:400;font-size:11px;opacity:.75;margin-top:1px}

/* ===== 使用门禁（必须登录 + 激活）===== */
.gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:24px}
.gate[hidden]{display:none !important}
.gate-card{width:min(560px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;
  padding:32px 30px;box-shadow:var(--shadow);text-align:center}
.gate-logo{width:64px;height:64px;margin:0 auto 14px;border-radius:18px;background:var(--brand);color:var(--brand-ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-size:26px;font-weight:700}
.gate-card h2{font-family:var(--font-cn);font-size:22px;margin:0 0 10px;color:var(--ink)}
.gate-card p{font-family:var(--font-cn);line-height:1.8;font-size:14.5px}
.gate-actions{margin:20px 0 6px;display:flex;flex-direction:column;gap:12px;align-items:center}
.gate-activate{display:flex;gap:8px;width:100%;max-width:420px}
.gate-activate input{flex:1;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  border-radius:12px;padding:12px 14px;font-size:15px;font-family:var(--font-en)}
.gate-msg{min-height:22px;color:var(--bad)}
.gate-foot{font-size:12.5px;margin-top:14px}

.gate-activate + .gate-activate{margin-top:2px}
.gate-activate button{white-space:nowrap}