:root{--ink:#3a2a1e;--red:#ff4b3e;--yellow:#ffd23f;--cream:#fff6d9;--pink:#ff8fab;--blue:#4cc9f0;--green:#5fd068;--purple:#b388ff;--card:#fff;--shadow:4px 4px 0 var(--ink);}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Baloo 2","Nunito","Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--yellow);background-image:radial-gradient(#ffe27a 2px,transparent 2px);background-size:22px 22px;min-height:100vh;font-size:17px}
.zh{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","SimHei",sans-serif;font-size:1.12em}
#app{max-width:880px;margin:0 auto;padding:12px 14px 120px}
.top{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:6px 0 14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25em;cursor:pointer}
.brand img{width:54px;height:54px;object-fit:contain}
.card{background:var(--card);border:3px solid var(--ink);border-radius:20px;box-shadow:var(--shadow);padding:16px;margin:14px 0}
.card.pink{background:#ffe0ea}.card.blue{background:#dff6ff}.card.green{background:#e3ffe0}.card.cream{background:var(--cream)}
h1,h2,h3{margin:.2em 0}
.btn{font:inherit;font-weight:800;border:3px solid var(--ink);background:var(--red);color:#fff;border-radius:16px;padding:9px 18px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:.08s;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.alt{background:var(--blue);color:var(--ink);text-shadow:none}.btn.yel{background:var(--yellow);color:var(--ink);text-shadow:none}.btn.grn{background:var(--green);color:var(--ink);text-shadow:none}.btn.gray{background:#eee;color:var(--ink);text-shadow:none}
.btn[disabled]{opacity:.5;pointer-events:none}
input[type=text],input[type=password],input[type=number],textarea,select{font:inherit;width:100%;padding:10px 12px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink)}
textarea{min-height:76px;resize:vertical}
label{font-weight:700;display:block;margin:8px 0 4px}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;min-width:160px}
.hero{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero img.b{width:190px;max-width:42%;border:3px solid var(--ink);border-radius:18px;box-shadow:var(--shadow)}
.testgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tbox{border:3px solid var(--ink);border-radius:18px;padding:12px;text-align:center;background:#fff;box-shadow:3px 3px 0 var(--ink);position:relative}
.tbox.done{background:#e3ffe0}.tbox.lock{background:#eee;opacity:.65}
.tbox .big{font-size:1.5em;font-weight:800}
.tbox .tag{position:absolute;top:-10px;right:-6px;background:var(--pink);border:2px solid var(--ink);border-radius:12px;font-size:.75em;padding:0 8px;font-weight:800}
.tea{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:6px 12px;box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.tea svg{width:34px;height:44px}.tea b{font-size:.95em;line-height:1.1}.tea small{display:block;font-weight:600;font-size:.78em}
.tabs{display:flex;gap:8px;position:sticky;top:0;z-index:20;background:var(--yellow);padding:8px 0;flex-wrap:wrap}
.tab{flex:1;min-width:92px;text-align:center;border:3px solid var(--ink);border-radius:16px;background:#fff;padding:6px 8px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:8px;justify-content:center}
.tab img{width:34px;height:34px;object-fit:cover;border-radius:50%;border:2px solid var(--ink)}
.tab.on{background:var(--red);color:#fff}.tab small{display:block;font-weight:600;font-size:.7em}
.q{border:3px solid var(--ink);border-radius:18px;background:#fff;padding:12px 14px;margin:12px 0;box-shadow:3px 3px 0 var(--ink);position:relative}
.q.wrong{background:#fff0ee}.q.ok{background:#effff0}
.qh{display:flex;align-items:flex-start;gap:10px}
.qn{background:var(--ink);color:#fff;border-radius:12px;padding:0 10px;font-weight:800;min-width:38px;text-align:center;line-height:1.7}
.bulb{border:0;background:none;font-size:1.5em;cursor:pointer;filter:grayscale(1) opacity(.45);transition:.15s;padding:0 2px;line-height:1}
.bulb.on{filter:none;text-shadow:0 0 12px #ffd23f,0 0 24px #ffb300;transform:scale(1.15)}
.qt{flex:1;font-weight:700}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
@media(max-width:560px){.opts{grid-template-columns:1fr}}
.opt{font:inherit;text-align:left;border:3px solid var(--ink);background:#fff;border-radius:14px;padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;font-weight:700}
.opt b{background:var(--yellow);border:2px solid var(--ink);border-radius:50%;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:.85em}
.opt.sel{background:var(--blue)}.opt.sel b{background:var(--ink);color:#fff}
.opt.right{background:#b9f6b9}.opt.bad{background:#ffb8b0}
.tf{display:flex;gap:12px;margin-top:10px}.tf .opt{justify-content:center;font-size:1.3em;flex:1}
.audio{background:var(--cream);border:3px dashed var(--ink);border-radius:16px;padding:8px 10px;margin:8px 0;display:flex;align-items:center;gap:8px}
.audio audio{width:100%;height:38px}
.pair{border:3px solid var(--ink);border-radius:22px;background:#dff6ff;padding:6px 12px;margin:14px 0;box-shadow:var(--shadow)}
.pair .q{box-shadow:none}
.bank{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.chip{border:3px solid var(--ink);border-radius:14px;background:#fff;padding:2px 12px;font-weight:800}
.chip i{font-style:normal;background:var(--pink);border-radius:8px;padding:0 6px;margin-right:6px}
.letters{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.letters .opt{padding:5px 10px;text-align:center}
.ordbtn{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ordline{border:3px dashed var(--ink);border-radius:14px;padding:4px 14px;min-width:120px;min-height:44px;font-weight:800;font-size:1.4em;letter-spacing:6px;background:var(--cream)}
.passage{background:var(--cream);border:3px solid var(--ink);border-radius:14px;padding:10px 12px;margin:8px 0;font-weight:600;line-height:1.7}
.slots{min-height:56px;border:3px dashed var(--ink);border-radius:16px;padding:8px;display:flex;flex-wrap:wrap;gap:8px;background:var(--cream);margin:8px 0}
.tok{border:3px solid var(--ink);background:var(--pink);border-radius:12px;padding:2px 12px;font-weight:800;cursor:grab;user-select:none;font-size:1.1em;box-shadow:2px 2px 0 var(--ink)}
.tok.placed{background:var(--green)}
.tok.dragging{opacity:.4}
.pic{display:flex;flex-direction:column;align-items:center;gap:6px}
.pic img{max-width:300px;width:100%;border:3px solid var(--ink);border-radius:14px;background:#fff}
.wordtag{background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:14px;padding:0 16px;font-size:1.5em;font-weight:800}
.bar{display:flex;align-items:center;gap:10px;margin:6px 0}.bar .lab{width:92px;font-weight:800}.bar .track{flex:1;height:22px;border:3px solid var(--ink);border-radius:12px;background:#fff;overflow:hidden}.bar .fill{height:100%;background:var(--green)}.bar .fill.low{background:var(--red)}.bar .v{width:46px;text-align:right;font-weight:800}
.big-total{font-size:3.2em;font-weight:800;line-height:1}
.shout{font-size:1.8em;font-weight:800;text-align:center;margin:6px 0}
.stick{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:3px solid var(--ink);padding:8px 14px;display:flex;gap:10px;align-items:center;justify-content:center;z-index:30;flex-wrap:wrap}
.stick .info{font-weight:800}
.modal{position:fixed;inset:0;background:rgba(58,42,30,.55);z-index:80;display:flex;align-items:center;justify-content:center;padding:14px}
.modal>.card{max-width:640px;width:100%;max-height:88vh;overflow:auto;margin:0}
.note{font-size:.88em;background:#fff8d8;border-left:6px solid var(--yellow);padding:6px 10px;border-radius:8px;margin-top:8px}
.muted{opacity:.7;font-size:.9em}
table{width:100%;border-collapse:collapse;font-size:.92em}th,td{border-bottom:2px solid #eadfc4;padding:6px 6px;text-align:left}th{background:var(--cream);position:sticky;top:0}
tr.click{cursor:pointer}tr.click:hover{background:#fff6d9}
.pill{display:inline-block;border:2px solid var(--ink);border-radius:10px;padding:0 8px;font-weight:800;font-size:.85em}
.pill.g{background:#b9f6b9}.pill.r{background:#ffb8b0}.pill.y{background:#ffe27a}
canvas#fw{position:fixed;inset:0;pointer-events:none;z-index:90}
.mascot{width:90px;float:right;margin:0 0 6px 8px}
.toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 16px;border-radius:14px;z-index:99;font-weight:700}