/* ============================================================
   多主题系统 · 护眼简约风
   主题：warm-paper(暖阳纸) / sage(青瓷) / moon-gray(月灰)
         night-read(夜读)
   ============================================================ */

/* ---------- 主题 1：暖阳纸（默认） ---------- */
:root,[data-theme="warm-paper"]{
  --bg-page:linear-gradient(135deg,#f7f2e8 0%,#efe7d3 100%);
  --bg-card:#fffdf7;
  --bg-raised:#faf5e9;
  --bg-hover:#f0e8d2;
  --bg-input:#fffef9;
  --ink:#3d3428;
  --ink-soft:#6b5d48;
  --ink-mute:#786e57;
  --ink-faint:#b8ac92;
  --accent:#aa5737;
  --accent-h:#a15030;
  --accent-soft:rgba(170,87,55,.13);
  
  --accent-wash:#f4e7de;
  --accent-ink:#a05234;
  --accent-line:rgba(170,87,55,.35);
  --on-accent:#fff;
  --green:#4f744c;
  --green-bg:#edf3e7;
  --red:#ab4946;
  --red-ink:#8f3632;   /* 10-06 新增：红底小按钮上的墨色。--red(#b85450) 压在 --red-bg 上只有 3.99:1，
                         12.5px 的「兑换」这类小字看不清；深色主题下这条会各自反转成浅红，见各主题段。 */
  --red-bg:#f8e8e5;
  --gold:#85632d;
  --gold-bg:#f6ecd2;
  --blue:#506c88;
  --blue-bg:#e7eef5;
  --line:#e4dac2;
  --line-soft:#ede5d0;
  --shadow:rgba(95,72,38,.10);
  --shadow-strong:rgba(95,72,38,.18);
  --radius:14px;
  --font:'Microsoft YaHei','PingFang SC',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---------- 主题 2：青瓷（淡绿护眼） ---------- */
[data-theme="sage"]{
  --bg-page:linear-gradient(135deg,#edf2ea 0%,#e2e9dd 100%);
  --bg-card:#f8faf5;
  --bg-raised:#f0f4eb;
  --bg-hover:#e5ecdf;
  --bg-input:#fcfdfb;
  --ink:#333d36;
  --ink-soft:#56635a;
  --ink-mute:#657066;
  --ink-faint:#a8b2a8;
  --accent:#4f7560;
  --accent-h:#466b56;
  --accent-soft:rgba(79,117,96,.13);
  
  --accent-wash:#e2e9e2;
  --accent-ink:#4a6d5a;
  --accent-line:rgba(79,117,96,.35);
  --on-accent:#fff;
  --green:#4d725e;
  --green-bg:#e8f0e8;
  --red:#9b5351;
  --red-ink:#7d3a38;
  --red-bg:#f5e6e4;
  --gold:#7d6532;
  --gold-bg:#f2ecd6;
  --blue:#506c7b;
  --blue-bg:#e4edf2;
  --line:#d4ddd0;
  --line-soft:#e0e7db;
  --shadow:rgba(60,80,65,.10);
  --shadow-strong:rgba(60,80,65,.16);
}

/* ---------- 主题 3：月灰（极简中性） ---------- */
[data-theme="moon-gray"]{
  --bg-page:linear-gradient(135deg,#f3f3f0 0%,#e9e9e5 100%);
  --bg-card:#fdfdfc;
  --bg-raised:#f4f4f1;
  --bg-hover:#ececea;
  --bg-input:#fff;
  --ink:#2c2c2a;
  --ink-soft:#5a5a56;
  --ink-mute:#6f6f69;
  --ink-faint:#b0b0aa;
  --accent:#4a6fa5;
  --accent-h:#3a5a8a;
  --accent-soft:rgba(74,111,165,.10);
  
  --accent-wash:#ebeff3;
  --accent-ink:#486ba0;
  --accent-line:rgba(74,111,165,.32);
  --on-accent:#fff;
  --green:#4c744c;
  --green-bg:#eaf1ea;
  --red:#a64b4b;
  --red-ink:#8a3232;
  --red-bg:#f6e6e6;
  --gold:#80642e;
  --gold-bg:#f2ecd6;
  --blue:#476a9e;
  --blue-bg:#e6edf5;
  --line:#dcdcd6;
  --line-soft:#e8e8e2;
  --shadow:rgba(50,50,50,.09);
  --shadow-strong:rgba(50,50,50,.15);
}

/* ---------- 主题 4：夜读（柔和暗色） ---------- */
[data-theme="night-read"]{
  --bg-page:linear-gradient(135deg,#25231e 0%,#1d1b17 100%);
  --bg-card:#2c2923;
  --bg-raised:#34312a;
  --bg-hover:#3d3930;
  --bg-input:#33302a;
  --ink:#d6cfbe;
  --ink-soft:#a39b87;
  --ink-mute:#a19a8a;
  --ink-faint:#5a5446;
  --accent:#c4a060;
  --accent-h:#d4b070;
  --accent-soft:rgba(196,160,96,.15);
  
  --accent-wash:#433b2c;
  --accent-ink:#c6a366;
  --accent-line:rgba(196,160,96,.35);
  --on-accent:#1d1b17;
  --green:#8ab88a;
  --green-bg:rgba(138,184,138,.13);
  --red:#d08884;
  --red-ink:#eab5b1;   /* 夜读：--red-bg 是半透明暗红，小按钮的墨色必须反过来走浅 */
  --red-bg:rgba(208,136,132,.13);
  --gold:#d4b070;
  --gold-bg:rgba(212,176,112,.13);
  --blue:#8aa8c8;
  --blue-bg:rgba(138,168,200,.13);
  --line:#3d3930;
  --line-soft:#33302a;
  --shadow:rgba(0,0,0,.45);
  --shadow-strong:rgba(0,0,0,.55);
}

/* ============================================================
   通用组件层（全部使用变量，自动适配所有主题）
   ============================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flow{from{background-position:0 0}to{background-position:200% 0}}
@keyframes vkblink{50%{opacity:0}}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font)!important;
  background:var(--bg-page)!important;
  color:var(--ink)!important;
  transition:background .4s ease,color .4s ease;
}
.container{
  background:var(--bg-card)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:0 12px 36px -18px var(--shadow-strong),inset 0 1px 0 rgba(255,255,255,.4)!important;
  padding:30px 28px 34px!important;
  position:relative;
  animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both;
}

/* 标题 */
h2{color:var(--ink)!important;text-align:center;margin-bottom:6px;letter-spacing:.5px;
  padding-bottom:10px;position:relative;font-weight:800}
h2::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:56px;height:3px;border-radius:2px;background:var(--accent);opacity:.55}
.subtitle{color:var(--ink-mute)!important;text-align:center;letter-spacing:.5px}
.footer{color:var(--ink-mute)!important;text-align:center;font-size:12px;letter-spacing:1px;margin-top:26px}

/* 按钮 */
button,.btn{
  background:var(--accent)!important;color:var(--on-accent)!important;border:none!important;
  border-radius:11px!important;font-weight:700!important;letter-spacing:.5px!important;
  box-shadow:0 5px 15px var(--accent-soft),inset 0 1px 0 rgba(255,255,255,.25)!important;
  transition:transform .12s,box-shadow .2s,filter .2s,background .3s!important;
}
button:hover,.btn:hover{background:var(--accent-h)!important;transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(1px) scale(.992)!important}
button:disabled,.btn:disabled{background:var(--bg-hover)!important;color:var(--ink-mute)!important;
  cursor:not-allowed;box-shadow:none!important;transform:none;filter:none}
.btn.sec,button.sec{background:var(--bg-raised)!important;color:var(--ink-soft)!important;
  border:1px solid var(--line)!important;box-shadow:0 2px 8px var(--shadow)!important}
.btn.sec:hover,button.sec:hover{background:var(--bg-hover)!important;transform:translateY(-1px);filter:none}
.btn.tiny,button.tiny{background:var(--red-bg)!important;color:var(--red-ink,var(--red))!important;   /* 10-06 「看不清字」：原来用 --red，在 --red-bg 上只有 3.99:1，ed-bg(#f8e8e5) 上只有 3.99:1，
   12.5px 的「兑换 / 改昵称」这排小字最糊；新增各主题各自的 --red-ink（夜读那档 --red-bg 是半透明暗红，墨色必须反过来走浅）*/
  border:1px solid var(--accent-line)!important;box-shadow:none!important;border-radius:7px!important;font-weight:600!important;letter-spacing:0}
.btn.tiny:hover,button.tiny:hover{background:var(--red-bg)!important;filter:brightness(.96);transform:none}
.btn.sm{width:auto;padding:8px 16px;font-size:13px}

/* 输入框 */
input[type="text"],input[type="password"],input[type="number"],input[type="date"],input[type="email"],input[type="search"],textarea,select{
  background:var(--bg-input)!important;color:var(--ink)!important;
  border:1.5px solid var(--line)!important;border-radius:11px!important;
  font-size:15px!important;outline:none;transition:.22s!important;font-family:inherit;
}
input:focus,textarea:focus,select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)!important}
input::placeholder,textarea::placeholder{color:var(--ink-faint)!important}

/* 加载 */
/* 10-06 「看不清字」：「加载中」这行原来跟着 --accent(#c0623d)，16px/600 在页面底上 3.37:1。
   转圈本身继续用主色（图形只需 3:1，且它是装饰），文字走正文级的 --ink-soft。 */
.loading{text-align:center;padding:40px 0;color:var(--ink-soft)!important;font-weight:600}
.loading::before{content:"";display:block;width:40px;height:40px;margin:0 auto 12px;border-radius:50%;
  border:3px var(--accent-soft) solid;border-top-color:var(--accent);animation:spin 1s linear infinite}

/* 统计 */
.stats{display:grid;gap:10px;margin-bottom:18px}
.stat{text-align:center;padding:12px 6px;border-radius:13px;
  background:var(--bg-raised)!important;border:1px solid var(--line)!important;
  box-shadow:0 3px 10px var(--shadow)!important}
.stat + .stat::before{content:"";position:absolute;left:-5px;top:14%;height:72%;width:1px;background:var(--line)}
.stat .n{font-size:23px;font-weight:900;color:var(--accent)!important}
.stat .l{font-size:11px;color:var(--ink-mute)!important;margin-top:2px}

/* 标签 */
.tag{display:inline-block;font-size:11px;font-weight:bold;padding:2px 10px;border-radius:20px;margin-right:8px;vertical-align:middle}
.tag.new{background:var(--green-bg)!important;color:var(--green)!important}
.tag.rev{background:var(--gold-bg)!important;color:var(--gold)!important}
.tag.pk{background:var(--accent-wash)!important;color:var(--accent-ink)!important}

/* 单词卡 */
.card{position:relative;margin-bottom:14px;padding:18px 16px 16px 20px;border-radius:14px;
  background:var(--bg-card)!important;border:1px solid var(--line)!important;
  box-shadow:0 6px 20px -10px var(--shadow-strong)!important;animation:fadeUp .4s ease both;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent);opacity:.7;border-radius:14px 0 0 14px}
.card .w{font-size:30px;font-weight:900;letter-spacing:.5px;color:var(--accent)!important}
.card .ph{margin-top:2px;color:var(--ink-mute)!important;font-size:14px;font-style:italic}
.card .m{margin-top:6px;font-size:16px;color:var(--ink)!important;font-weight:600;line-height:1.6}

/* 词根词缀 */
.root{margin-top:12px;padding:12px;border-radius:11px;position:relative;
  background:var(--accent-soft)!important;border:1px solid var(--accent-line)!important}
.root .rt{font-size:13px;font-weight:800;color:var(--accent)!important;margin-bottom:8px;letter-spacing:1px}
.rchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.rchip{font-size:13px;font-weight:700;padding:3px 10px;border-radius:8px;
  background:var(--bg-card)!important;color:var(--ink-soft)!important;border:1px solid var(--line)!important;
  font-family:"Courier New",Consolas,monospace}
.rmet{font-size:12.5px;color:var(--ink-soft)!important;margin-bottom:6px;line-height:1.7}
.rmet b{color:var(--accent)!important}
.ran,.root .ran{font-size:14px;color:var(--ink)!important;line-height:1.75;
  background:var(--bg-raised)!important;border:1px solid var(--line)!important;
  border-left:4px solid var(--blue)!important;border-radius:8px;padding:9px 11px}
.ran .note{display:block;margin-top:5px;color:var(--ink-mute)!important;font-size:12px}

/* 词性 / 例句 */
.pos-list{margin-top:10px;background:var(--bg-raised)!important;border:1px solid var(--line)!important;border-radius:11px!important;padding:8px 12px}
.pos-item{font-size:14px;color:var(--ink-soft)!important;margin-bottom:3px;line-height:1.9}
.pos-tag,.pos,.ai-out .pos{display:inline-block;background:var(--blue-bg)!important;color:var(--blue)!important;
  padding:1px 8px;border-radius:4px;font-size:12px;margin-right:8px;font-weight:bold}
.ex-list{margin-top:10px;border-top:1px dashed var(--line)!important;padding-top:10px}
.ex-item{padding:8px 10px;margin-bottom:6px;border-radius:9px;background:var(--bg-raised)!important;border:1px solid var(--line)!important;font-size:14px;line-height:1.6}
.ex-en{color:var(--ink)!important}.ex-zh{color:var(--ink-mute)!important;font-size:12.5px;margin-top:2px}
.ai-out{background:var(--bg-raised)!important;border:1px solid var(--line)!important;border-radius:11px!important;
  padding:12px 14px;margin-top:10px;font-size:14px;line-height:1.6;color:var(--ink-soft)!important}

/* 测验 */
.qwrap{margin-top:6px}
.qbox{margin-bottom:14px;padding:16px;border-radius:14px;background:var(--bg-card)!important;
  border:1px solid var(--line)!important;box-shadow:0 4px 14px -8px var(--shadow-strong)!important;animation:fadeUp .35s ease both}
.qhead{font-size:13px;font-weight:700;color:var(--accent)!important;margin-bottom:8px}
.qprompt{font-size:20px;font-weight:700;color:var(--ink)!important;margin-bottom:8px;line-height:1.5}
.qph,.qhint{font-size:13px;color:var(--ink-mute)!important;margin-bottom:10px;line-height:1.5}
.ans-box{min-height:50px;padding:12px 14px;border:2px dashed var(--accent)!important;border-radius:11px;
  background:var(--accent-soft)!important;font-size:19px;font-family:"Courier New",Consolas,monospace;letter-spacing:2px;
  cursor:pointer;color:var(--ink);display:flex;align-items:center;outline:none;transition:.15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ans-box.active{border-style:solid!important;box-shadow:0 0 12px var(--accent-soft)!important;background:var(--accent-soft)!important}
.ans-box .ans-text{color:var(--accent)!important;word-break:break-all}
.ans-box .ans-ph{color:var(--ink-mute)!important;font-family:var(--font);font-size:15px;letter-spacing:normal}
.ans-cursor{display:none;width:2px;height:20px;background:var(--accent);margin-left:2px;animation:vkblink 1s step-end infinite;vertical-align:-3px}
.ans-box.active .ans-cursor{display:inline-block}
.opt{display:block;border:2px solid var(--line)!important;border-radius:11px;padding:12px 14px;margin-bottom:9px;font-size:16px;
  cursor:pointer;transition:.15s;color:var(--ink-soft)!important;background:var(--bg-raised)!important}
.opt:hover{border-color:var(--accent)!important;background:var(--accent-soft)!important}
.opt.sel{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important;
  box-shadow:0 4px 14px var(--accent-soft)!important;font-weight:600}
.rs{font-size:13px;color:var(--ink-mute)!important;margin-top:6px;line-height:1.5;font-style:italic}

/* 虚拟键盘 */
.vkeyboard{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:900px;
  background:var(--bg-card)!important;border-top:2px solid var(--accent)!important;
  box-shadow:0 -8px 28px var(--shadow-strong)!important;
  padding:12px 10px calc(10px + env(safe-area-inset-bottom,0px));z-index:500;display:none;border-radius:16px 16px 0 0}
.vkeyboard.show{display:block}
.vk-row{display:flex;gap:7px;justify-content:center;margin-bottom:7px}
.vk-row:last-child{margin-bottom:0}
.vk-key{flex:1;max-width:56px;height:64px;background:var(--bg-raised)!important;
  border:1px solid var(--line)!important;border-radius:10px;font-size:24px;font-weight:800;color:var(--ink)!important;
  display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.vk-key:active{background:var(--accent)!important;color:var(--on-accent)!important;border-color:var(--accent)!important}
.vk-key.wide{max-width:96px;font-size:15px}
.vk-key.space{max-width:200px;font-size:15px;color:var(--ink-mute)}

/* 结果 */
.res-item{border-radius:12px!important;padding:12px 14px;margin-bottom:10px;border-left:5px solid}
.res-item.ok{background:var(--green-bg)!important;border-color:var(--green)!important}
.res-item.no{background:var(--red-bg)!important;border-color:var(--red)!important}
.res-item .rw{font-size:18px;font-weight:700;color:var(--ink)!important}
.res-item .rm{font-size:14px;color:var(--ink-soft)!important;margin-top:3px}
.res-item .ry{font-size:13px;margin-top:4px;color:var(--red)!important}
.badge{font-size:11px;padding:2px 8px;border-radius:20px;margin-left:6px}
.badge.stage{background:var(--accent-wash)!important;color:var(--accent-ink)!important}
.badge.master{background:var(--gold-bg)!important;color:var(--gold)!important}
.banner{text-align:center;padding:26px 18px;border-radius:14px;margin-bottom:18px;animation:fadeUp .5s ease both}
.banner.pass{background:var(--green-bg)!important;border:1px solid var(--green)!important}
.banner.fail{background:var(--red-bg)!important;border:1px solid var(--red)!important}
.banner .big{font-size:28px;font-weight:900;margin-bottom:6px}
.banner.pass .big{color:var(--green)!important}.banner.fail .big{color:var(--red)!important}
.banner .sm2{color:var(--ink-soft)!important;font-size:14px}
.hint{font-size:13px;color:var(--ink-mute)!important;text-align:center;margin:10px 0;line-height:1.6}
.hint b{color:var(--accent)!important}

/* 弹层 */
.mask,#keyMask,#infoMask{position:fixed;inset:0;background:rgba(40,35,25,.45)!important;
  display:none;align-items:center;justify-content:center;z-index:99;padding:16px;backdrop-filter:blur(4px)}
.box,#keyBox,#infoBox{width:100%;max-width:400px;padding:28px 24px;border-radius:16px;text-align:left;
  background:var(--bg-card)!important;border:1px solid var(--line)!important;
  box-shadow:0 16px 50px var(--shadow-strong)!important}
.box h3,#keyBox h3,#infoBox h3{margin:0 0 6px;font-size:19px;color:var(--ink)!important;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
/* 2026-10-06 「看不清字」整改：弹窗副标题这行原来用 --ink-mute(#9a8d72)，
   在 --bg-card(#fffdf7) 上实测只有 3.21:1，13px 的说明文字看着是灰的一片。
   提到 --ink-soft(#6b5d48) 后 ≈6.3:1；只改深浅，字号/字距/行高不动。 */
.box .sub,#keyBox .sub,#infoBox .sub{text-align:center;font-size:13px;color:var(--ink-soft)!important;margin:0 0 16px;line-height:1.6}
.box input,#keyBox input,#infoBox input{width:100%;padding:13px 14px;border-radius:10px;font-size:15px;text-align:center;letter-spacing:1px;margin-bottom:12px}
.err{color:var(--red)!important;font-size:14px;margin-top:6px;display:none;min-height:16px}

/* 标签页 */
.tabs{display:flex;gap:10px;margin-bottom:20px}
.tab{flex:1;padding:11px 0;background:var(--bg-raised)!important;color:var(--ink-soft)!important;
  border:1px solid var(--line)!important;border-radius:11px;font-size:15px;font-weight:700;cursor:pointer;transition:.22s;box-shadow:0 2px 8px var(--shadow)!important;letter-spacing:.5px}
.tab:hover{background:var(--bg-hover)!important;color:var(--ink)!important}
.tab.active{background:var(--accent)!important;color:var(--on-accent)!important;border-color:var(--accent)!important;box-shadow:0 4px 14px var(--accent-soft)!important}

/* 公告栏 */
.announce-bar{background:var(--gold-bg)!important;border:1px solid var(--line)!important;border-left:5px solid var(--gold)!important;
  border-radius:12px!important;padding:12px 14px;margin:0 0 16px;animation:fadeUp .5s ease both}
.announce-bar .ab-head{font-size:13px;font-weight:800;color:var(--gold)!important;margin-bottom:8px}
.announce-bar .ab-item{padding:7px 0;border-top:1px dashed var(--line)!important;font-size:14px;color:var(--ink-soft)!important;line-height:1.6;word-break:break-word}
.announce-bar .ab-item:first-of-type{border-top:none}
.announce-bar .ab-time{font-size:11px;color:var(--ink-mute)!important;margin-left:8px;white-space:nowrap}

/* 打卡页专属 */
.topnav{justify-content:center}
.topnav .btn.sec{width:auto;padding:9px 18px;font-size:14px}
.dash-sec{margin-top:20px}
.dash-sec h3{font-size:15px;color:var(--ink-soft)!important;margin:0 0 10px;border-left:4px solid var(--accent);padding-left:10px;font-weight:700}
.weak-item{background:var(--bg-raised)!important;border:1px solid var(--line)!important;border-radius:12px!important;
  padding:9px 12px;margin-bottom:8px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.weak-item .w{font-weight:800;color:var(--ink)!important;font-size:15px}
.weak-item .ph{color:var(--ink-mute)!important;font-size:13px}
.weak-item .m{color:var(--ink-mute)!important;font-size:13px}
.srs-row{font-size:13px;color:var(--ink-soft)!important;padding:4px 0;border-bottom:1px dashed var(--line)!important}
.spk{font-size:13px;line-height:1;padding:5px 11px;border:1px solid var(--line)!important;
  background:var(--bg-raised)!important;color:var(--ink-soft)!important;border-radius:20px;cursor:pointer;transition:.15s;margin-left:8px;vertical-align:middle}
.spk:hover{background:var(--bg-hover)!important;transform:translateY(-1px)}
.spk-btns{display:inline-flex;gap:6px;margin-left:12px;vertical-align:middle}

/* 悬浮按钮 */
#chatFab{position:fixed;right:18px;bottom:22px;width:54px;height:54px;border-radius:50%;
  background:var(--accent)!important;color:var(--on-accent)!important;font-size:24px;display:none;align-items:center;justify-content:center;
  box-shadow:0 8px 22px var(--accent-soft)!important;cursor:pointer;z-index:60;border:none!important}
#chatBadge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:11px;
  background:var(--red)!important;color:#fff!important;font-size:12px;line-height:20px;text-align:center;font-weight:700;
  box-shadow:0 1px 4px rgba(0,0,0,.2);display:none;border:2px solid var(--bg-card);box-sizing:content-box}
#chatBadge.show{display:block}
.chat-msg{margin-bottom:10px;max-width:84%;clear:both}
.chat-msg .nm{font-size:11px;color:var(--ink-mute)!important;margin-bottom:3px}
.chat-msg .bub{display:inline-block;padding:9px 12px;border-radius:12px;font-size:15px;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.chat-msg.student{float:right;text-align:right}
.chat-msg.student .bub{background:var(--accent)!important;color:var(--on-accent)!important;border-bottom-right-radius:3px}
.chat-msg.teacher{float:left;text-align:left}
.chat-msg.teacher .bub{background:var(--bg-raised)!important;color:var(--ink)!important;border-bottom-left-radius:3px;border:1px solid var(--line)}
#chatList:after{content:"";display:block;clear:both}

/* PK 对战 */
#chatMask .box{max-width:440px!important;max-height:88vh!important}
#pkMask .box{max-width:980px;width:98vw;padding:22px}
#pkBody h3{margin:0 0 6px;color:var(--ink)!important}
#pkBody .sub{color:var(--ink-soft)!important;font-size:13px;margin:0 0 10px}  /* 10-06 同上：--ink-mute 在卡面上只有 3.2:1 */
#pkFab{position:fixed;left:18px;bottom:18px;z-index:60;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--gold))!important;color:#fff!important;display:none;align-items:center;justify-content:center;
  font-size:24px;cursor:pointer;box-shadow:0 8px 24px var(--shadow-strong)!important;border:none!important}
#pkFab:hover{transform:translateY(-2px)}
.pk-code{font-size:40px;font-weight:800;letter-spacing:8px;text-align:center;color:var(--accent-ink);
  background:var(--accent-wash);border:2px dashed var(--accent);border-radius:14px;padding:14px;margin:10px 0;font-family:var(--font)}
.pk-err{display:none;color:var(--red);font-size:13px;margin:8px 0}
.pk-wait-spin{font-size:40px;text-align:center;margin:14px 0;animation:fadeUp .4s ease}
.pk-match-spin{font-size:52px;text-align:center;margin:14px 0;animation:spin 1.1s linear infinite}
.pk-top{margin-bottom:10px}
.pk-timerbar{height:10px;background:var(--bg-hover);border-radius:6px;overflow:hidden}
.pk-timerfill{height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .1s linear}
.pk-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-mute);margin-top:6px}
/* 双方实时答题进度 */
.pk-duel{margin-bottom:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg-raised)}
.pk-duel-title{font-size:12px;color:var(--ink-mute);font-weight:700;text-align:center;margin-bottom:8px;letter-spacing:.05em}
.pk-progress-row{display:flex;align-items:center;gap:8px;margin:4px 0}
.pk-progress-label{font-size:13px;font-weight:700;color:var(--ink);min-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-progress-label.me{color:var(--accent)}
.pk-progress-label.opp{color:var(--gold,#C9892B)}
.pk-progress-bar{flex:1;height:14px;background:var(--bg-hover);border-radius:7px;overflow:hidden;position:relative}
.pk-progress-fill{height:100%;border-radius:7px;transition:width .3s ease;width:0%}
.pk-progress-fill.me{background:linear-gradient(90deg,var(--accent),var(--accent-soft))}
.pk-progress-fill.opp{background:linear-gradient(90deg,var(--gold,#C9892B),#e8c46a)}
.pk-progress-count{font-size:12px;font-weight:700;color:var(--ink-mute);min-width:42px;text-align:right;font-variant-numeric:tabular-nums}
.pk-progress-count.hot{color:#c0392b;animation:pkPulse .8s ease-in-out infinite}
@keyframes pkPulse{0%,100%{opacity:1}50%{opacity:.5}}
.pk-prompt-label{font-size:13px;color:var(--accent);font-weight:700;margin-bottom:4px}
.pk-prompt{font-size:32px;font-weight:800;color:var(--ink);text-align:center;margin:6px 0 16px}
.pk-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk-opt{padding:16px 10px;border:2px solid var(--line)!important;border-radius:12px;background:var(--bg-raised)!important;
  font-size:17px;color:var(--ink)!important;cursor:pointer;transition:.12s;text-align:center;box-shadow:none!important}
.pk-opt:hover{border-color:var(--accent)!important;background:var(--accent-soft)!important}
.pk-opt.sel{background:var(--accent)!important;color:var(--on-accent)!important;border-color:var(--accent)!important;transform:scale(1.03)}
.pk-score{font-size:24px;font-weight:800;text-align:center;margin:8px 0;color:var(--ink)}
.pk-tier{display:flex;align-items:center;gap:10px;justify-content:center;margin:10px 0}
.pk-badge{display:inline-block;color:#fff;font-size:14px;font-weight:700;padding:5px 12px;border-radius:20px}
.pk-badge.sm{font-size:12px;padding:3px 9px}
.pk-tierlv{color:var(--ink-mute);font-size:14px}
.pk-up{color:var(--green);font-weight:700}
.pk-miss{margin-top:12px;background:var(--red-bg);border:1px solid var(--red-bg);border-radius:12px;padding:12px}
.pk-miss h4{margin:0 0 8px;color:var(--red);font-size:14px}
.pk-miss-item{padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink)}
.pk-miss-item:last-child{border-bottom:none}
.pk-miss-ans{color:var(--green);font-size:13px;margin-top:2px}
.pk-history-list{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto;padding:4px 2px}
.pk-hist-card{background:var(--bg-card)!important;border:1px solid var(--line)!important;border-radius:14px!important;overflow:hidden!important;box-shadow:0 2px 10px var(--shadow)!important}
.pk-hist-head{padding:14px 16px!important;cursor:pointer!important;user-select:none!important;transition:background .15s!important;min-height:64px!important}
.pk-hist-head:hover{background:var(--bg-hover)!important}
.pk-hist-row1{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:8px!important}
.pk-hist-row2{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.pk-hist-result{font-size:22px!important;font-weight:900!important;width:36px!important;flex-shrink:0!important;line-height:1!important}
.pk-hist-score{font-size:18px!important;font-weight:800!important;color:var(--ink)!important;width:70px!important;flex-shrink:0!important;line-height:1.2!important}
.pk-hist-opp{flex:1!important;font-size:16px!important;color:var(--ink)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-weight:700!important;line-height:1.2!important}
.pk-hist-arrow{font-size:16px!important;color:var(--ink-mute)!important;width:24px!important;text-align:center!important;flex-shrink:0!important}
.pk-hist-meta{font-size:13px!important;color:var(--ink-soft)!important;white-space:nowrap!important;font-weight:600!important}
.pk-hist-right{margin-left:auto!important;font-weight:700!important;color:var(--ink-soft)!important;font-size:13px!important}
.pk-hist-detail{padding:0 16px 16px!important;border-top:1px solid var(--line-soft)!important}
.pk-hist-qlist{margin-top:12px!important;display:flex!important;flex-direction:column!important;gap:10px!important}
.pk-hist-qitem{background:var(--bg-raised)!important;border:1px solid var(--line-soft)!important;border-radius:12px!important;padding:12px 14px!important}
.pk-hist-qhead{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:6px!important}
.pk-hist-qnum{font-size:14px!important;font-weight:800!important}
.pk-hist-qdir{font-size:12px!important;color:var(--ink-mute)!important;background:var(--bg-hover)!important;padding:3px 10px!important;border-radius:12px!important;font-weight:600!important}
.pk-hist-qprompt{font-size:16px!important;color:var(--ink)!important;font-weight:700!important;margin-bottom:8px!important;line-height:1.5!important}
.pk-hist-qans{font-size:14px!important;color:var(--ink-soft)!important;margin-top:4px!important;font-weight:600!important}
.pk-hist-qlabel{color:var(--ink-mute)!important;margin-right:6px!important;font-weight:600!important}
.pk-hist-qcorrect{margin-top:6px!important;padding-top:6px!important;border-top:1px dashed var(--line-soft)!important}
.pk-mycard{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;padding:10px;margin-bottom:12px}
.pk-lp{font-size:13px;color:var(--ink-soft)}
.pk-rank{font-size:13px;color:var(--accent);font-weight:700}
.pk-board{max-height:46vh;overflow-y:auto}
.pk-row{display:flex;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:14px}
.pk-row.pk-merow{background:var(--accent-soft);border-radius:8px}
.pk-pos{width:26px;text-align:center;font-weight:700;color:var(--ink-mute)}
.pk-name{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-lv{font-size:12px;color:var(--ink-mute)}
.pk-pts{width:46px;text-align:right;font-weight:700;color:var(--ink-soft)}
.pk-versus{text-align:center;padding:8px 4px 4px}
.pk-vs-head{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:14px}
.pk-vs-players{display:flex;align-items:center;justify-content:center;gap:14px}
.pk-vs-card{flex:1;max-width:160px;background:var(--bg-raised);border:2px solid var(--line);border-radius:14px;padding:14px 10px}
.pk-vs-card.me{border-color:var(--accent);box-shadow:0 4px 14px var(--accent-soft)}
.pk-vs-name{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:8px}
.pk-vs-card .pk-badge{margin-bottom:6px}
.pk-vs-lp{font-size:14px;font-weight:700;color:var(--accent);margin-top:6px}
.pk-vs-vs{font-size:22px;font-weight:900;color:var(--red);letter-spacing:1px}
.pk-vs-tip{margin-top:14px;color:var(--ink-mute);font-size:13px}
.pk-vs-count{margin-top:6px;font-size:34px;font-weight:900;color:var(--accent)}
.pk-versus-revenge .pk-vs-head{color:#C0392B;font-size:22px;text-shadow:0 0 12px rgba(192,57,43,.25)}
.pk-versus-revenge .pk-vs-vs{color:#C0392B;animation:pkRevPulse 1s ease-in-out infinite alternate}
.pk-versus-revenge .pk-vs-count{color:#C0392B}
.pk-versus-revenge .pk-vs-card.me{border-color:#C0392B;box-shadow:0 4px 18px rgba(192,57,43,.25)}
@keyframes pkRevPulse{from{transform:scale(1);text-shadow:0 0 6px rgba(192,57,43,.3)}to{transform:scale(1.12);text-shadow:0 0 16px rgba(231,76,60,.55)}}

/* 查词页专属 */
.search-box{display:flex;gap:10px;margin-bottom:20px;position:relative}
.word-header{font-size:40px;font-weight:900;letter-spacing:.5px;color:var(--accent)!important;margin-bottom:8px;animation:fadeUp .5s ease both}
.phonetic{font-size:16px;color:var(--ink-mute)!important;margin-bottom:22px;display:flex;gap:20px}
.section-title{font-size:14px;font-weight:700;border-bottom:1.5px solid var(--line)!important;padding-bottom:8px;margin:25px 0 15px;
  color:var(--ink-soft)!important;letter-spacing:1.2px;display:flex;align-items:center;gap:8px}
.section-title::before{content:"";width:6px;height:16px;border-radius:3px;background:var(--accent);display:inline-block}
.def-list{list-style:none;padding:0;margin:0}
.def-list li{margin-bottom:12px;line-height:1.6;font-size:16px;color:var(--ink-soft)}
.example-item{background:var(--bg-raised)!important;border-left:4px solid var(--accent)!important;
  padding:15px;margin-bottom:15px;border-radius:0 12px 12px 0!important;box-shadow:0 3px 10px var(--shadow)!important}
.example-item .ex-en{font-weight:500;color:var(--ink)!important;margin-bottom:6px;font-size:16px;line-height:1.5}
.example-item .ex-zh{color:var(--ink-mute)!important;font-size:15px}
.translation-text{font-size:20px;line-height:1.8;color:var(--ink)!important;background:var(--bg-raised)!important;
  padding:20px;border-left:4px solid var(--accent)!important;border-radius:0 12px 12px 0!important;box-shadow:0 3px 10px var(--shadow)!important}
.error-msg{color:var(--red)!important;line-height:1.7;background:var(--red-bg)!important;
  padding:15px;border-radius:12px!important;border:1px solid var(--line)!important}
.hist-toggle{width:100%;margin-top:16px;padding:11px 16px;background:var(--accent-wash)!important;
  border:1px solid var(--accent-line)!important;border-radius:12px!important;font-size:14px;font-weight:600;
  color:var(--accent-ink)!important;cursor:pointer;display:flex;justify-content:space-between;align-items:center;box-shadow:none!important}
.hist-toggle:hover{background:var(--accent-soft)!important}
.hist-toggle .cnt{background:var(--accent)!important;color:var(--on-accent)!important;border-radius:20px;padding:1px 10px;font-size:12px}
#historyPanel{margin-top:10px;border:1px solid var(--line)!important;border-radius:12px;padding:14px;background:var(--bg-card)!important}
.hist-bar{display:flex;gap:8px;margin-bottom:10px}
.hist-bar button{padding:0 16px;background:var(--bg-raised)!important;color:var(--ink-soft)!important;
  border:1px solid var(--line)!important;border-radius:10px;font-size:13px;cursor:pointer;box-shadow:none!important}
.hist-bar button:hover{background:var(--bg-hover)!important}
.hist-list{max-height:340px;overflow-y:auto}
.hist-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.hist-item:hover{background:var(--accent-soft)!important}
.hist-item .q{flex:1;font-weight:600;color:var(--ink)!important;word-break:break-word}
.hist-item .t{font-size:12px;color:var(--ink-mute)!important;white-space:nowrap}
.badge.word{background:var(--blue-bg)!important;color:var(--blue)!important}
.badge.sentence{background:var(--bg-hover)!important;color:var(--ink-mute)!important}
.cache-tag{font-size:11px;color:var(--green)!important;margin-left:6px}
.hist-empty{text-align:center;color:var(--ink-mute);padding:24px 0;font-size:14px}
.suggest-box{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--bg-card)!important;
  border:1px solid var(--line)!important;border-radius:12px;box-shadow:0 12px 30px var(--shadow-strong)!important;z-index:120;max-height:280px;overflow-y:auto;display:none}
.suggest-box.show{display:block}
.suggest-item{padding:10px 14px;font-size:15px;color:var(--ink)!important;cursor:pointer;border-bottom:1px solid var(--line)}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover,.suggest-item.active{background:var(--accent-soft)!important}
.spell-warn{background:var(--red-bg)!important;border:1px solid var(--line)!important;border-radius:12px!important;padding:12px 14px;margin-bottom:14px}
.spell-title{color:var(--red)!important;font-weight:700;font-size:15px;margin-bottom:6px}
.spell-issue{font-size:14px;color:var(--ink-soft)!important;line-height:1.7}
.spell-issue b{color:var(--red)!important}
.query-zh{background:var(--blue-bg)!important;border-radius:10px;padding:8px 12px;font-size:14px;color:var(--blue)!important;margin-bottom:10px}
.deriv-list{display:flex;flex-wrap:wrap;gap:8px}
.deriv-item{background:var(--bg-raised)!important;border:1px solid var(--line)!important;border-radius:10px;padding:7px 11px;font-size:13px;color:var(--ink-soft)}
.deriv-item b{color:var(--ink)!important}
.conf-list{display:flex;flex-direction:column;gap:8px}
.conf-item{background:var(--gold-bg)!important;border:1px solid var(--line)!important;border-left:4px solid var(--gold)!important;border-radius:10px!important;padding:8px 12px}
.conf-term{font-weight:bold;color:var(--gold)!important;font-size:14px;margin-bottom:2px}
.conf-note{font-size:13px;color:var(--ink-soft)!important;line-height:1.5}
.coll-list{display:flex;flex-direction:column;gap:7px}
/* 2026-10-06 改上下布局：这条 9 月写下时 .coll-item 里就是 <b>+<span> 平铺，横排正好一行；
   后来「例句」被加成第二个子节点（.coll-ex），横排就把「短语+释义」和「中英例句」挤成左右两栏，
   窄屏下例句一直被迫换行。改成 column，横排交给里面的 .coll-head（页内样式自己管）。 */
.coll-item{display:flex;flex-direction:column;align-items:stretch;gap:0;background:var(--bg-raised)!important;
  border:1px solid var(--line)!important;border-radius:10px!important;padding:8px 12px}
.coll-item b{color:var(--accent)!important;font-size:14px;white-space:nowrap}
.coll-item span{font-size:13px;color:var(--ink-soft)!important}
/* 2026-10-06：例句的中英文此前漏在主题层外面，页内写死的 #7f8c8d 压在抬层底上只有 3.20，
   而中文译文正是 12.5px 的小字、天天要看的那一行，最吃亏。收进令牌，八档主题一起跟着走。 */
.coll-ex{border-left:3px solid var(--line)!important}
.coll-ex-en{font-size:13px;color:var(--ink)!important;line-height:1.55}
.coll-ex-zh{font-size:12.5px;color:var(--ink-soft)!important;line-height:1.5;margin-top:2px}
.gram-head{display:flex;gap:10px;margin-bottom:6px;align-items:center}
.gram-search{flex:1;padding:11px 14px;border:1.5px solid var(--line)!important;border-radius:11px;font-size:15px;outline:none;background:var(--bg-input)!important;color:var(--ink)!important}
.gram-search:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)!important}
.gram-btn{padding:10px 14px;background:var(--bg-raised)!important;color:var(--ink-soft)!important;
  border:1px solid var(--line)!important;border-radius:10px;font-size:14px;cursor:pointer;white-space:nowrap;box-shadow:none!important}
.gram-btn:hover{background:var(--bg-hover)!important}
.gram-tip{font-size:13px;color:var(--ink-mute)!important;margin:8px 0 16px;line-height:1.6}
.g-chapter{border:1px solid var(--line)!important;border-radius:14px!important;margin-bottom:12px;overflow:hidden;background:var(--bg-card)!important}
.g-ch-head{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none;background:var(--bg-raised)!important}
.g-ch-head:hover{background:var(--accent-soft)!important}
.g-ch-title{flex:1;font-size:17px;font-weight:700;color:var(--ink)!important}
.g-ch-diff{font-size:13px;color:var(--gold)!important;letter-spacing:1px;white-space:nowrap}
.g-ch-arrow{color:var(--ink-mute);transition:.25s;font-size:13px}
.g-chapter.open .g-ch-arrow{transform:rotate(90deg)}
.g-ch-body{display:none;padding:6px 16px 16px}
.g-chapter.open .g-ch-body{display:block}
.g-intro{background:var(--blue-bg)!important;border-left:4px solid var(--blue)!important;padding:12px 14px;
  border-radius:0 10px 10px 0;color:var(--ink-soft)!important;font-size:15px;line-height:1.7;margin:10px 0 16px}
.g-sec{margin:16px 0}
.g-sec-title{font-size:15px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px;color:var(--ink)!important}
.g-lv{font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px;color:#fff}
.g-lv.basic{background:var(--green)!important}
.g-lv.intermediate{background:var(--accent)!important}
.g-lv.advanced{background:var(--red)!important}
.g-body p{margin:6px 0;line-height:1.75;color:var(--ink-soft)!important;font-size:15px}
.g-body ul{margin:6px 0;padding-left:22px}
.g-body li{line-height:1.75;color:var(--ink-soft)!important;font-size:15px;margin:3px 0}
.g-formula{background:var(--bg-raised)!important;color:var(--ink)!important;padding:11px 14px;border-radius:10px;
  font-family:Consolas,'Courier New',monospace;font-size:14px;line-height:1.8;margin:8px 0;white-space:pre-wrap;border:1px solid var(--line)}
.g-ex{background:var(--bg-raised)!important;border-left:4px solid var(--accent)!important;padding:12px 14px;border-radius:0 10px 10px 0;margin:10px 0}
.g-ex-en{font-weight:600;color:var(--ink)!important;font-size:15px;line-height:1.6}
.g-ex-zh{color:var(--ink-mute)!important;font-size:14px;margin-top:3px}
.g-ex-note{color:var(--red)!important;font-size:13px;margin-top:5px}
.g-empty{text-align:center;color:var(--ink-mute);padding:30px 0;font-size:15px}

/* 后台页专属 */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.toolbar input[type=text]{flex:1;min-width:180px;padding:11px 14px}
.tablewrap{overflow-x:auto;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:0 3px 12px var(--shadow)!important}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{background:var(--bg-raised)!important;color:var(--ink-soft)!important;font-weight:700;padding:11px 8px;text-align:center;
  cursor:pointer;user-select:none;white-space:nowrap;border-bottom:2px solid var(--line)!important;position:sticky;top:0}
thead th:hover{background:var(--accent-soft)!important}
thead th .arrow{font-size:11px;color:var(--accent)!important;margin-left:2px}
tbody td{padding:10px 8px;text-align:center;border-bottom:1px solid var(--line-soft)!important;color:var(--ink-soft)!important}
tbody tr:hover{background:var(--accent-soft)!important}
td.name{text-align:left;font-weight:600;color:var(--ink)!important}
td.key{font-family:Consolas,Menlo,monospace;color:var(--ink-mute)!important;font-size:13px}
.pill{display:inline-block;font-size:12px;font-weight:bold;padding:2px 10px;border-radius:20px}
.pill.yes{background:var(--green-bg)!important;color:var(--green)!important}
.pill.no{background:var(--red-bg)!important;color:var(--red)!important}
.pill.gray{background:var(--bg-hover)!important;color:var(--ink-mute)!important}
.rate-hi{color:var(--green)!important;font-weight:700}
.rate-lo{color:var(--gold)!important;font-weight:700}
/* 10-06 「看不清字」：空态/占位文案原来用 --ink-faint(#b8ac92)，在暖纸底上只有 1.8~2.0:1，
   「还没有对战记录，去打一局吧！」这种整行提示基本是隐形的。改走 --ink-soft（各主题都有定义，暗色档会自动反转）。 */
.empty{text-align:center;color:var(--ink-soft);padding:40px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{background:var(--blue-bg)!important;color:var(--ink)!important;border-radius:20px;padding:5px 12px;font-size:13px}
.chip b{color:var(--blue)!important}
.chip.sm{padding:3px 9px;font-size:12px;background:var(--bg-hover)!important}
.chip.click,.daily-row.click{cursor:pointer;transition:.15s}
.chip.click:hover{background:var(--blue-bg)!important;box-shadow:0 1px 4px var(--shadow)}
.daily-row.click:hover{border-color:var(--accent)!important;background:var(--accent-soft)!important}
.modal-list{max-height:60vh;overflow:auto;margin:6px 0 12px}
table.mini{width:100%;border-collapse:collapse;font-size:13px}
table.mini th,table.mini td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line-soft)!important}
table.mini th{color:var(--ink-mute)!important;font-weight:600;background:var(--bg-raised)!important;position:sticky;top:0}
table.mini td{color:var(--ink-soft)!important}
table.mini td b{color:var(--ink)!important}
.err-item{border:1px solid var(--line)!important;border-radius:12px!important;padding:10px 12px;margin-bottom:10px;background:var(--bg-card)!important}
.err-item .ei-word{font-weight:800;color:var(--ink)!important;font-size:15px;margin-bottom:4px}
.err-item .ei-date{font-weight:400;color:var(--ink-mute)!important;font-size:12px;margin-left:6px}
.err-item .ei-line{font-size:13px;color:var(--ink-soft)!important;line-height:1.5}
.err-item .ei-wrong{color:var(--red)!important}
.daily-list{margin-bottom:6px}
.daily-row{border:1px solid var(--line)!important;border-radius:12px!important;padding:10px 12px;margin-bottom:10px;background:var(--bg-card)!important}
.daily-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.daily-date{font-weight:800;color:var(--ink)!important;font-size:14px}
.daily-total{color:var(--ink-mute)!important;font-size:12px}
.modal-mask{position:fixed;inset:0;background:rgba(40,35,25,.5)!important;display:none;align-items:center;justify-content:center;z-index:9999;padding:18px;backdrop-filter:blur(4px)}
.modal{background:var(--bg-card)!important;border:1px solid var(--line)!important;border-radius:18px!important;
  padding:22px 22px 18px;width:100%;max-width:640px;box-shadow:0 16px 50px var(--shadow-strong)!important}
.modal-h{font-size:17px;font-weight:800;color:var(--ink)!important;margin-bottom:6px}
.modal-tip{font-size:13px;color:var(--ink-mute)!important;margin:0 0 12px;line-height:1.7}
.csv-text{width:100%;height:220px;box-sizing:border-box;border:1.5px solid var(--line)!important;border-radius:11px;
  padding:10px 12px;font-family:Consolas,'Courier New',monospace;font-size:13px;line-height:1.5;
  color:var(--ink-soft)!important;background:var(--bg-input)!important;resize:vertical;outline:none}
.csv-text:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)!important}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.cmsg{margin-bottom:10px;max-width:80%;clear:both}
.cmsg .cnm{font-size:11px;color:var(--ink-mute)!important;margin-bottom:3px}
.cmsg .cbub{display:inline-block;padding:9px 12px;border-radius:12px;font-size:15px;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.cmsg.student{float:left;text-align:left}
.cmsg.student .cbub{background:var(--bg-raised)!important;color:var(--ink)!important;border-bottom-left-radius:3px;border:1px solid var(--line)}
.cmsg.teacher{float:right;text-align:right}
.cmsg.teacher .cbub{background:var(--accent)!important;color:var(--on-accent)!important;border-bottom-right-radius:3px}
#chatThread:after{content:"";display:block;clear:both}
.chatrow{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border:1px solid var(--line)!important;
  border-radius:12px!important;margin-bottom:9px;cursor:pointer;transition:.15s;background:var(--bg-card)!important}
.chatrow:hover{border-color:var(--accent)!important;background:var(--accent-soft)!important}
.chatrow .rowmain{text-align:left;min-width:0}
.chatrow .rowname{font-weight:700;color:var(--ink)!important}
.chatrow .rowlast{color:var(--ink-mute)!important;font-size:13px;margin-top:2px;max-width:560px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatrow .rowlast.me{color:var(--accent)!important;font-weight:600}
.chatrow .rowkey{color:var(--ink-mute)!important;font-size:12px;font-family:Consolas,monospace;margin-left:0;white-space:nowrap;text-align:right}
.chatrow .rowtime{color:var(--ink-mute)!important;font-size:11px;margin-top:4px;font-family:inherit}
.chatrow .rowright{display:flex;flex-direction:column;align-items:flex-end;margin-left:10px;gap:6px}
.chatrow .rowreset{font-size:12px;padding:4px 10px;border:1px solid var(--line)!important;background:var(--red-bg)!important;
  color:var(--red)!important;border-radius:7px;cursor:pointer;white-space:nowrap;box-shadow:none!important}
.chatrow .rowreset:hover{background:var(--red-bg)!important}
.ann-compose{background:var(--bg-card)!important;border:1px solid var(--line)!important;border-radius:14px!important;
  padding:16px;margin-bottom:18px;box-shadow:0 3px 12px var(--shadow)!important}
.ann-item{background:var(--bg-card)!important;border:1px solid var(--line)!important;
  border-left:4px solid var(--gold)!important;border-radius:10px!important;padding:11px 14px;margin-bottom:10px}
.ann-item .ann-text{font-size:15px;color:var(--ink-soft)!important;line-height:1.6;word-break:break-word;white-space:pre-wrap}
.ann-item .ann-meta{font-size:12px;color:var(--ink-mute)!important;margin-top:6px}
.auto-tip{margin-left:auto;font-size:12px;color:var(--ink-mute);align-self:center}
select option{background:var(--bg-card);color:var(--ink)}

/* 进入动画 */
#app > *,#resultArea > *{animation:fadeUp .5s ease both!important}
#app > *:nth-child(1),#resultArea > *:nth-child(1){animation-delay:.03s!important}
#app > *:nth-child(2),#resultArea > *:nth-child(2){animation-delay:.07s!important}
#app > *:nth-child(3),#resultArea > *:nth-child(3){animation-delay:.11s!important}
#app > *:nth-child(4),#resultArea > *:nth-child(4){animation-delay:.15s!important}
#app > *:nth-child(5),#resultArea > *:nth-child(5){animation-delay:.19s!important}

/* ============================================================
   主题切换器
   ============================================================ */
.theme-fab{position:fixed;top:14px;right:14px;z-index:200;width:38px;height:38px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--line);
  box-shadow:0 4px 14px var(--shadow-strong);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  color:var(--ink-soft);transition:transform .2s,color .2s,box-shadow .2s;opacity:.75}
.theme-fab:hover{opacity:1;transform:rotate(20deg);color:var(--accent);box-shadow:0 6px 20px var(--shadow-strong)}
.theme-fab svg{width:19px;height:19px}
.theme-panel{position:fixed;top:60px;right:14px;z-index:201;width:200px;
  background:var(--bg-card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 36px var(--shadow-strong);padding:8px;display:none;
  animation:fadeUp .2s ease both}
.theme-panel.show{display:block}
.theme-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none!important;
  background:transparent!important;box-shadow:none!important;border-radius:9px;cursor:pointer;
  font-size:13.5px;color:var(--ink-soft)!important;text-align:left;transition:.15s;letter-spacing:0;
  font-family:var(--font);font-weight:500}
.theme-opt:hover{background:var(--accent-soft)!important;color:var(--ink)!important;transform:none}
.theme-opt.active{background:var(--accent-wash)!important;color:var(--accent-ink)!important;font-weight:700}
.theme-opt .swatch{width:18px;height:18px;border-radius:50%;flex:0 0 auto;border:2px solid var(--line);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.theme-opt .check{margin-left:auto;font-size:13px;color:var(--accent);opacity:0}
.theme-opt.active .check{opacity:1}
.theme-panel-tip{padding:6px 10px 4px;font-size:11px;color:var(--ink-mute);text-align:center;letter-spacing:.5px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================
   大师系列主题（2026-09-05）：Rams / Swiss / Bauhaus / MUJI
   ============================================================ */

/* ---------- 主题 5：博朗功能主义（Dieter Rams · Less, but better） ---------- */
[data-theme="rams"]{
  --bg-page:linear-gradient(135deg,#EAE8E3 0%,#E2E0DA 100%);
  --bg-card:#F4F2EE;
  --bg-raised:#ECEAE4;
  --bg-hover:#E2E0D8;
  --bg-input:#F8F7F4;
  --ink:#2C2C2A;
  --ink-soft:#55544F;
  --ink-mute:#696862;
  --ink-faint:#B4B2A9;
  --accent:#b14621;
  --accent-h:#a3401d;
  --accent-soft:rgba(177,70,33,.12);
  
  --accent-wash:#ecddd5;
  --accent-ink:#a6421f;
  --accent-line:rgba(177,70,33,.35);
  --on-accent:#fff;
  --green:#157557;
  --green-bg:#E1F5EE;
  --red:#ba3d36;
  --red-ink:#93261F;
  --red-bg:#F8E8E5;
  --gold:#886308;
  --gold-bg:#F6ECD2;
  --blue:#1f69b3;
  --blue-bg:#E6F1FB;
  --line:#B4B2A9;
  --line-soft:#D8D6CF;
  --shadow:rgba(60,58,52,.10);
  --shadow-strong:rgba(60,58,52,.18);
  --radius:10px;
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ---------- 主题 6：瑞士国际主义（Müller-Brockmann · 网格与秩序） ---------- */
[data-theme="swiss"]{
  --bg-page:#ffffff;
  --bg-card:#ffffff;
  --bg-raised:#F5F5F3;
  --bg-hover:#EDEDEB;
  --bg-input:#ffffff;
  --ink:#111111;
  --ink-soft:#333333;
  --ink-mute:#666666;
  --ink-faint:#999999;
  --accent:#cf321e;
  --accent-h:#B52B18;
  --accent-soft:rgba(207,50,30,.08);
  
  --accent-wash:#fbefed;
  --accent-ink:#cd311e;
  --accent-line:rgba(207,50,30,.40);
  --on-accent:#fff;
  --green:#2E7D32;
  --green-bg:#EAF3EC;
  --red:#C62828;
  --red-bg:#FCEBEB;
  --gold:#856800;
  --gold-bg:#F7F0DC;
  --blue:#185FA5;
  --blue-bg:#E6F1FB;
  --line:#111111;
  --line-soft:#DDDDDD;
  --shadow:rgba(0,0,0,.06);
  --shadow-strong:rgba(0,0,0,.12);
  --radius:2px;
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ---------- 主题 7：包豪斯构成（Gropius / Paul Rand · 几何与原色） ---------- */
[data-theme="bauhaus"]{
  --bg-page:linear-gradient(135deg,#F7F4ED 0%,#F0EDE2 100%);
  --bg-card:#ffffff;
  --bg-raised:#F6F3EC;
  --bg-hover:#EFECE2;
  --bg-input:#ffffff;
  --ink:#2C2C2A;
  --ink-soft:#55544F;
  --ink-mute:#6e6d67;
  --ink-faint:#B4B2A9;
  --accent:#b14621;
  --accent-h:#a3401d;
  --accent-soft:rgba(177,70,33,.13);
  
  --accent-wash:#f5e7e2;
  --accent-ink:#b14621;
  --accent-line:rgba(177,70,33,.38);
  --on-accent:#fff;
  --green:#4c761a;
  --green-bg:#EAF3DE;
  --red:#c2382d;
  --red-bg:#FBEAE7;
  --gold:#996200;
  --gold-bg:#FDF3DC;
  --blue:#206dba;
  --blue-bg:#E6F1FB;
  --line:#D8D4C8;
  --line-soft:#E8E4D8;
  --shadow:rgba(80,70,40,.10);
  --shadow-strong:rgba(80,70,40,.18);
  --radius:16px;
  --font:'Futura','Century Gothic','Trebuchet MS','Segoe UI',sans-serif;
}

/* ---------- 主题 8：无印良品（原研哉 · 白与留白） ---------- */
[data-theme="muji"]{
  --bg-page:#FDFDFC;
  --bg-card:#FDFDFC;
  --bg-raised:#F7F6F2;
  --bg-hover:#F0EEE8;
  --bg-input:#ffffff;
  --ink:#2C2C2A;
  --ink-soft:#5F5E5A;
  --ink-mute:#716f67;
  --ink-faint:#B4B2A9;
  --accent:#9c6213;
  --accent-h:#8d570f;
  --accent-soft:rgba(156,98,19,.10);
  
  --accent-wash:#f3eee5;
  --accent-ink:#955e12;
  --accent-line:rgba(156,98,19,.30);
  --on-accent:#fff;
  --green:#577349;
  --green-bg:#EFF2EA;
  --red:#a5534b;
  --red-bg:#F7ECEA;
  --gold:#986013;
  --gold-bg:#F7F0DE;
  --blue:#516d8a;
  --blue-bg:#EBF0F5;
  --line:#E5E3DC;
  --line-soft:#EFEDE6;
  --shadow:rgba(90,88,80,.07);
  --shadow-strong:rgba(90,88,80,.13);
  --radius:4px;
  --font:'Helvetica Neue','Hiragino Sans','PingFang SC','Segoe UI',sans-serif;
}
.theme-panel{max-height:76vh;overflow-y:auto}
/* ============================================================
   回滚兼容层 · 2026-10-05
   目的：把 UI 与主题设计整体恢复到 9 月那一版（本文件重新成为色彩/字体/圆角/阴影的
        唯一权威），同时保留 10 月上线的功能（牌境、每日固定搭配、教师后台对局记录、
        人教版词库选项等）。9 月的页面 markup 一行没动，功能层也没动，
        所以这里只做两件事：把新令牌名指回 9 月令牌，再把被 Alpine 改坏的两处
        组件规则（按钮字号、虚拟键盘字号）按 9 月口径压回来。
   背景：10-01 的 Alpine 重设计（design.css）把 8 主题（暖阳纸/青瓷/月灰/夜读/
        博朗/瑞士/包豪斯/无印）换成 3 主题（alpine/alpine-night/paper），
        并用 `button{font-size:14px!important}`、`.vk-key{font-size:19px!important}`
        这类全局 !important 规则盖住了页面里的键盘样式——这也是「内部输入法字母太小」
        的直接原因（PK 屏拼写键声明 28px，被压成 14px）。
   ⚠️ 本层的 var() 间接引用全部挂在 :root 上，切换上面 8 个主题时会自动跟随。
   ============================================================ */

/* ---------- A. 新令牌名 → 9 月令牌（牌境/弹窗等 10 月新增 UI 直接引用新名） ---------- */
:root{
  --bg:var(--bg-page); --bg-tint:var(--bg-raised);
  --surface:var(--bg-card); --surface-2:var(--bg-raised); --surface-3:var(--bg-hover);
  /* 2026-10-06：--ink-4 是 design.css 里「最淡的一档文字」，页脚/时间戳/消息名都吃它，
     实测压在卡片上只有 2.21，老师原话「看不清字」就是指这类。文字档整体提到 --ink-mute；
     --ink-faint 保留给输入框占位符（那本来就该比正文淡），不是一视同仁压深。 */
  --ink-2:var(--ink-soft); --ink-3:var(--ink-mute); --ink-4:var(--ink-mute);
  --hair:var(--line); --hair-2:var(--line-soft);
  --accent-hover:var(--accent-h);
  --ok:var(--green);   --ok-bg:var(--green-bg);
  --warn:var(--gold);  --warn-bg:var(--gold-bg);
  --err:var(--red);    --err-bg:var(--red-bg);
  --info:var(--blue);  --info-bg:var(--blue-bg);
  --r-lg:var(--radius); --r-md:11px; --r-sm:8px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px;
  --shadow-1:0 3px 10px var(--shadow);
  --shadow-2:0 8px 24px -10px var(--shadow-strong);
  --shadow-3:0 14px 40px -14px var(--shadow-strong);
  --mono:Consolas,'Courier New',monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- B. 内部输入法（屏幕键盘）字母放大 —— 覆盖 Alpine 的 14px/19px ---------- */
/* PK 拼写 / PK 语法 / 拼写特训三套键盘共用 .pk-sk；页面里注入的样式块没有 !important，
   而 design.css 的 `button{font-size:14px!important}` 有权，所以这里必须用 !important。 */
.pk-sk{
  font-size:34px!important; font-weight:800!important; letter-spacing:0!important;
  padding:0!important; min-height:0!important; line-height:1!important;
}
button.pk-sk-sym{ font-size:26px!important; }          /* 语法填空的 - ' 小键（用 button. 提权压过注入块） */
.pk-sk-pad{ visibility:hidden!important; }             /* 第三行占位键：不吃点击，也不该被刷成实心蓝 */
.pk-sk:active{ filter:brightness(.94); }

/* 打卡键盘：9 月口径 64px 高 / 24px 字母，Alpine 压成 52px / 19px */
.vk-key{ height:64px!important; max-width:58px!important; font-size:26px!important; font-weight:800!important; }
.vk-key.wide{ max-width:100px!important; font-size:16px!important; }
.vk-key.space{ max-width:220px!important; font-size:16px!important; }

/* 牌境作答框：改成「显示框」后字要够大（配合 card_mode.js 的内部键盘） */
.cr-scope .answerin{ font-size:22px!important; letter-spacing:.06em!important; }

/* ---------- C. 9 月组件值重新声明（补齐 !important，压回 Alpine 的同名覆盖） ----------
   下面每条的值都逐字抄自本文件上方 9 月原文，只是补上 !important：
   Alpine 的 design.css 对同一批选择器写了 !important，而 9 月原文多数没写，
   不补就压不回来（卡片圆角、标签胶囊、表头居中、题号字号等都是这样被吃掉的）。 */
h2{font-weight:800!important;letter-spacing:.5px!important;line-height:normal!important;
   padding-bottom:10px!important;margin-bottom:6px!important}   /* 9 月 h2 没有 font-size（=UA 1.5em/24px），只有短线上划线 */
body{letter-spacing:normal!important;font-size:16px!important;line-height:normal!important;
   margin:0!important;padding:0!important;-webkit-font-smoothing:auto!important;text-rendering:auto!important}
   /* Alpine 把 body 压成 .005em / 15px / 1.6 / 四周内边距 + 灰度字体；
      9 月是本文件上方的 `html,body{margin:0;padding:0}` + 浏览器默认行距与字距。
      行距这一条最要命：1.6 会把每张卡片、每行读数都撑高 6~9px。 */
.cr-scope{line-height:1.6}   /* 牌境是 10 月新功能，正文行距保留它自己的 1.6，不跟 9 月的 normal */
.qbox{padding:16px!important;border-radius:14px!important;margin-bottom:14px!important;letter-spacing:normal!important}
.qhead{font-size:13px!important;letter-spacing:normal!important;margin-bottom:8px!important}
.qprompt{font-size:20px!important;line-height:1.5!important;letter-spacing:normal!important;margin-bottom:8px!important}
.qph,.qhint{font-size:13px!important;letter-spacing:normal!important}
.ans-box{min-height:50px!important;padding:12px 14px!important;border-radius:11px!important;font-size:19px!important}
.opt{padding:12px 14px!important;border-radius:11px!important;font-size:16px!important;margin-bottom:9px!important;letter-spacing:normal!important}
.pk-opt{padding:16px 10px!important;border-radius:12px!important;font-size:17px!important;margin-bottom:0!important;letter-spacing:normal!important}
.pk-prompt{font-size:32px!important;font-weight:800!important;letter-spacing:normal!important;margin:6px 0 16px!important}
.card{padding:18px 16px 16px 20px!important;border-radius:14px!important;font-size:16px!important;letter-spacing:normal!important}
.card .w{font-size:30px!important}
.stat{padding:12px 6px!important;border-radius:13px!important;font-size:16px!important;letter-spacing:normal!important}
.stat .n{font-size:23px!important}
.tag{display:inline-block;font-size:11px!important;font-weight:700!important;padding:2px 10px!important;border-radius:20px!important;border:none!important;letter-spacing:normal!important}
.badge{font-size:11px!important;padding:2px 8px!important;border-radius:20px!important;border:none!important;letter-spacing:normal!important}
table{font-size:14px!important;letter-spacing:normal!important}
thead th{font-size:14px!important;font-weight:700!important;padding:11px 8px!important;text-align:center!important;letter-spacing:normal!important;border-bottom:2px solid var(--line)!important}
td{padding:10px 8px!important;letter-spacing:normal!important}
.vkeyboard{max-width:900px!important;border-top:2px solid var(--accent)!important;
  padding:12px 10px calc(10px + env(safe-area-inset-bottom,0px))!important;border-radius:16px 16px 0 0!important;
  font-size:16px!important;letter-spacing:normal!important}
.vk-row{gap:7px!important;margin-bottom:7px!important}
.vk-key{border-radius:10px!important;letter-spacing:normal!important;color:var(--ink)!important}
.res-item{border-radius:12px!important;padding:12px 14px!important;letter-spacing:normal!important}
.banner{padding:26px 18px!important;border-radius:14px!important;letter-spacing:normal!important}
.footer{font-size:12px!important;letter-spacing:1px!important;text-align:center!important}  /* 9 月页脚 12px/1px，Alpine 压成 11.5px */
.hint,.rs{letter-spacing:normal!important}
.subtitle,.sub{letter-spacing:normal!important}   /* 9 月页内没写字距，Alpine 给它们加了 .02em */
.subtitle{letter-spacing:.5px!important}   /* 10-05 差分修正：9 月原文第 160 行就给 .subtitle 写了 .5px，
                                              上面那条把 .sub 和 .subtitle 混在一起写反了；.sub 才是 normal。 */

/* ---------- D. 压回 Alpine 的「页面外壳 / 导航磁贴 / 标签页 / 读数」高权重覆盖 ----------
   design.css 用 body.page-* .container、.navtile、.tab 这类高特异性 + !important
   的选择器盖住了 9 月的这三块（它们是学生每天都会看到的外壳），所以这里用同样的
   特异性和 !important 把 9 月值写回来；9 月原文写死暖色的地方改用主题令牌，
   这样切到「夜读」时不会留一块与主题打架的白斑。 */
body.page-dict .container, body.page-checkin .container, body.page-card .container, body.teacher .container{
  background:var(--bg-card)!important; border-color:var(--line)!important;
  box-shadow:0 12px 36px -18px var(--shadow-strong),inset 0 1px 0 rgba(255,255,255,.4)!important;
}
body.page-dict .container>h2, body.page-checkin .container>h2, body.page-card .container>h2, body.teacher .container>h2{
  font-size:24px!important; font-weight:800!important; letter-spacing:.5px!important; line-height:normal!important;
}
h2::after{display:block!important}          /* 9 月标题下面那截 56px 强调色短线 */
.tabs{gap:10px!important;padding:0!important;border-radius:0!important;background:none!important;border:none!important;
  box-shadow:none!important;justify-content:center!important;flex-wrap:wrap!important;margin-bottom:20px!important}
.tab{flex:1!important;padding:11px 0!important;background:var(--bg-raised)!important;
  color:var(--ink-soft)!important;border:1px solid var(--line)!important;border-radius:11px!important;
  font-size:15px!important;font-weight:700!important;letter-spacing:.5px!important;
  box-shadow:0 2px 8px var(--shadow)!important}
.tab:hover{background:var(--bg-hover)!important;color:var(--ink)!important}
.tab.active{background:var(--accent)!important;color:var(--on-accent)!important;
  border-color:var(--accent)!important;box-shadow:0 4px 14px var(--accent-soft)!important}
body.page-dict .tabs, body.teacher .tabs{box-shadow:none!important}
.navtile{min-height:58px!important;padding:9px 4px 8px!important;gap:4px!important;
  background:linear-gradient(180deg,var(--bg-card),var(--bg-raised))!important;
  border:1px solid var(--line)!important;border-radius:14px!important}
.navtile:hover{transform:none!important;background:linear-gradient(180deg,var(--bg-card),var(--bg-hover))!important}
.navtile .nt{font-size:12.5px!important;font-weight:700!important;color:var(--ink-soft)!important;letter-spacing:.3px!important}
.navtile.on{background:var(--accent-soft)!important;border-color:var(--accent-line)!important;
  box-shadow:0 2px 10px var(--accent-soft)!important}
.navtile.on .nt{color:var(--accent)!important}
.navtile.on::after{display:block!important;content:''!important;position:absolute;top:7px;right:9px;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}
body.page-checkin .topnav{background:none!important;border:none!important;border-radius:0!important;padding:0!important}
.stat .n{font-size:23px!important;font-weight:900!important;color:var(--accent)!important;letter-spacing:0!important}
.stat .l{font-size:11px!important;color:var(--ink-mute)!important;letter-spacing:1px!important;margin-top:2px}
tbody td{padding:10px 8px!important;text-align:center!important;letter-spacing:normal!important}
.vk-key.space{color:var(--ink)!important}

@media (max-width:640px){
  .pk-sk{ font-size:28px!important; }
  button.pk-sk-sym{ font-size:22px!important; }
  .vk-key{ height:56px!important; max-width:52px!important; font-size:22px!important; }
  .vk-key.wide,.vk-key.space{ font-size:14px!important; }
  .pk-prompt{ font-size:26px!important; }
}

/* ---------- E. 主题切换浮标：回到 9 月的「实心强调色圆钮」 ----------
   Alpine 把它改成了浅色描边圆片（.theme-fab 的 !important 特异度高于 9 月的 button 规则，
   所以 9 月那条 `button,.btn{background:var(--accent)!important}` 压不住它）。 */
.theme-fab{background:var(--accent)!important;color:var(--on-accent)!important;
  border:none!important;box-shadow:0 5px 15px var(--accent-soft),inset 0 1px 0 rgba(255,255,255,.25)!important}
/* 字号按页分开处理（10-05 差分）：9 月这个钮是 <button>，三张页面里算出来的字号并不一样 ——
   词典页页内写了 `button{font-size:16px}`（16px），打卡/后台没写（浏览器默认 13.3333px）。
   design.css 的兜底是 14px，特异性比页面自己那条 `button` 高？不：design.css 现在挂在页内
   <style> 之前、且这条没写 !important，所以词典页仍是 16px（与 9 月一致，不用管）；
   只有打卡/后台两页需要从 14px 压回 13.3333px，故只给这两页补。 */
body.page-checkin .theme-fab, body.teacher .theme-fab{font-size:13.3333px!important}
.theme-fab:hover{background:var(--accent-h)!important;color:var(--on-accent)!important;
  transform:rotate(20deg)!important;box-shadow:0 6px 20px var(--shadow-strong)!important}
.theme-fab:active{transform:rotate(20deg) scale(.992)!important}

/* ---------- F. 悬浮球「时段外」锁定态（2026-10-06 图标美化时顺手修的真 bug） ----------
   页内那条 `#pkFab.locked{background:#9aa3a8}` 没有 !important，压不过本文件 366 行的
   `background:linear-gradient(135deg,var(--red),var(--gold))!important` —— 也就是说 9-12 做的
   「时段外置灰」从来没生效过，学生看到的仍是暖色渐变球 + 一枚系统 emoji 锁，像没锁一样。
   themes.css 挂在文档最后，这里用更高特异度把真锁定态补回来；锁标本体已换成页内 sprite 的
   #i-lock（见 checkin.html 的 .fab-lock）。 */
#pkFab.locked,#fbFab.locked{background:var(--bg-raised)!important;color:var(--ink-soft)!important;
  box-shadow:0 4px 14px rgba(61,52,40,.16)!important;border:1px solid var(--line)!important}

/* ============ 2026-10-06 主题令牌层「看不清字」整改（亓老师反馈：PK 页对比度太差） ============
   上面八个主题块里的 51 个令牌值被就地改深（夜读的次级文字是改亮），色相与饱和度一律不动，
   只沿明度轴推到 WCAG 2.1 AA：正文 4.5，图标/大字 3。为什么改令牌而不是逐页改内联颜色：
   --ink-mute 是全站次级说明文字、--accent/--accent-h 是所有实心按钮与选中答案块上的白字、
   --gold/--green/--blue/--red 是词性标签与对错/保段那类彩色小字，一处不达标就是处处不达标。
   实测口径与前后数值：node scripts/_token_sweep_20261006.js（成对算并给建议值）、
   node scripts/_verify_tokens_20261006.js（静置/悬停双口径复核，含「悬停必须比静置更深」）、
   scripts/_test_visual_20261006.js 第 [6] 节（真浏览器里按主题逐个量）。
   补丁本体与逐条理由：scripts/_patch_theme_tokens_20261006.js（行锚定，改前改后都能重跑核对）。 */