:root{--bg:#f5f7ff;--card:#fff;--ink:#2b2f55;--sub:#6b709e;--main:#6c7cff;--main2:#ff8fb1;--ok:#37c871;--bad:#ff6b6b;--gold:#f6c453;--line:#e8ebff;--shadow:0 8px 24px rgba(108,124,255,.14)}
body.dark{--bg:#151729;--card:#1f2336;--ink:#eef0ff;--sub:#a0a6cf;--main:#8b97ff;--main2:#ffa9c4;--line:#313752;--shadow:0 8px 24px rgba(0,0,0,.4)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;transition:background .3s,color .3s}
a{color:inherit}
nav.top{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:12px;background:var(--card);border-bottom:2px solid var(--line);position:sticky;top:0;z-index:9}
nav.top a{text-decoration:none;color:var(--sub);font-size:14px;padding:7px 15px;border-radius:20px;transition:.2s;font-weight:600}
nav.top a:hover,nav.top a.cur{background:var(--main);color:#fff}
.back{position:fixed;top:14px;left:14px;text-decoration:none;color:var(--main);font-weight:700;font-size:14px;z-index:30;background:var(--card);padding:5px 13px;border-radius:14px;border:2px solid var(--line)}
.theme-fixed{position:fixed;top:14px;right:14px;z-index:30;width:46px;height:26px;border-radius:20px;background:var(--card);border:2px solid var(--line);cursor:pointer}
.theme-fixed::after{content:"";position:absolute;top:2px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--main);transition:.3s}
body.dark .theme-fixed::after{left:21px}
.box{max-width:860px;margin:30px auto;padding:0 18px}
.sec-title{font-size:26px;margin:34px 0 6px;scroll-margin-top:70px}
.sec-title small{color:var(--main2);font-weight:800}
.hint{color:var(--sub);font-size:13px;margin-bottom:16px}
.card-ui{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:24px;margin-bottom:20px;box-shadow:var(--shadow);transition:.3s}
.opts{display:grid;gap:10px}
.opts label{display:flex;gap:12px;padding:12px 16px;border-radius:14px;border:2px solid var(--line);cursor:pointer;transition:.18s;font-size:15px}
.opts label:hover{border-color:var(--main)}
.opts label.right{border-color:var(--ok);background:rgba(55,200,113,.12);color:var(--ok)}
.opts label.wrong{border-color:var(--bad);background:rgba(255,107,107,.1);color:var(--bad)}
input[type=radio]{accent-color:var(--main);margin-top:5px}
.fb{margin-top:14px;padding:14px;border-radius:14px;background:rgba(55,200,113,.08);font-size:14px;display:none}
.fb.show{display:block}.fb b{color:var(--ok)}
.dl{margin-top:14px;padding:9px 18px;border:2px dashed var(--main);border-radius:14px;background:transparent;color:var(--main);cursor:pointer;font-family:inherit;font-size:14px;transition:.2s}
.dl:hover{background:var(--main);color:#fff}
.btn{padding:10px 24px;border:none;border-radius:16px;background:var(--main);color:#fff;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--main);border:2px solid var(--main)}
.pass{background:rgba(108,124,255,.05);border-left:4px solid var(--main);border-radius:0 16px 16px 0;padding:16px 20px;margin-bottom:16px;font-size:15px}
/* 闪卡 3D */
.stage{max-width:560px;margin:0 auto}
.flip{width:100%;height:210px;perspective:1400px;cursor:pointer;margin-bottom:18px}
.flip .inner{position:relative;width:100%;height:100%;transition:transform .55s;transform-style:preserve-3d}
.flip.gone .inner{transform:rotateX(180deg)}
.flip .face{position:absolute;inset:0;display:grid;place-items:center;border-radius:24px;border:3px solid var(--line);background:var(--card);box-shadow:var(--shadow);backface-visibility:hidden;padding:20px;text-align:center}
.flip .front{font-size:34px;font-weight:800}
.flip .back{transform:rotateX(180deg);font-size:20px;color:var(--main2);font-weight:700}
.flip .back em{font-style:normal;font-size:13px;color:var(--sub);display:block;margin-top:8px;font-weight:400}
.bar{height:12px;background:var(--line);border-radius:10px;overflow:hidden;margin:8px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--main),var(--main2));transition:.4s}
.score{font-size:13px;color:var(--sub);text-align:center}
.combo{font-size:15px;font-weight:700;color:var(--main2);height:24px;text-align:center;margin-top:12px}
/* 拼写输入 */
.spell-box{text-align:center}
.spell-word{font-size:32px;font-weight:800;letter-spacing:2px;margin:6px 0;color:var(--ink)}
.spell-input{width:100%;padding:14px 18px;font-size:18px;border:2px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);font-family:inherit;text-align:center;margin:12px 0;transition:.2s}
.spell-input:focus{outline:none;border-color:var(--main)}
.spell-input.hit{border-color:var(--ok)}
.spell-input.miss{border-color:var(--bad)}
.speak{font-size:28px;background:transparent;border:none;cursor:pointer;margin:6px 0}
/* 匹配 */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match-cell{padding:14px;border:2px solid var(--line);border-radius:16px;cursor:pointer;font-size:16px;transition:.18s;user-select:none;background:var(--card)}
.match-cell:hover{border-color:var(--main)}
.match-cell.sel{border-color:var(--gold);background:rgba(246,196,83,.15)}
.match-cell.got{border-color:var(--ok);background:rgba(55,200,113,.12);color:var(--ok);cursor:default}
.match-cell.no{border-color:var(--bad);background:rgba(255,107,107,.1)}
.match-cell.empty{visibility:hidden}
/* 词库搜索 */
.word-search{width:100%;padding:12px 18px;font-size:16px;border:2px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);font-family:inherit;margin-bottom:14px}
.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:420px;overflow-y:auto;padding:4px}
.word-chip{padding:10px 12px;border-radius:14px;border:1px solid var(--line);font-size:14px;background:var(--card)}
.word-chip b{display:block;font-size:15px}
.word-chip span{color:var(--sub);font-size:12px}
/* 计时 */
.timer{position:sticky;top:0;z-index:8;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px 20px;margin-bottom:22px;box-shadow:var(--shadow)}
.timer b{font-size:22px;color:var(--main);font-variant-numeric:tabular-nums}
.pop{position:fixed;inset:0;display:none;place-items:center;background:rgba(20,22,40,.6);z-index:40}
.pop.show{display:grid}
.pop>div{background:var(--card);padding:36px 48px;border-radius:26px;text-align:center;box-shadow:var(--shadow)}
.pop h2{font-size:28px;margin-bottom:10px}
.pop button{margin:8px;padding:12px 28px;border:none;border-radius:20px;background:var(--main);color:#fff;font-size:16px;cursor:pointer;font-family:inherit}