:root{--bg-page: #0F1629;--bg-card: #141C2F;--text-main: #E8ECF3;--text-muted: #AAB2C8;--border-color: #1E263B;--green-primary: #1FC48D;--green-shadow: #17956A;--blue-primary: #4DA3FF;--blue-shadow: #3A85D6;--red-primary: #FF4D6D;--red-shadow: #D93A55;--yellow-primary: #FFB020;--yellow-shadow: #D99B1A;--gray-primary: #1E263B;--gray-shadow: #2A3350;--purple-primary: #B07CFF;--purple-shadow: #8B5FBF;--btn-text: #ffffff;--radius: 16px;--radius-sm: 12px;--bg: #0F1629;--surface: #141C2F;--surface2: #111A33;--line: #1E263B;--text: #E8ECF3;--muted: #AAB2C8;--accent: #1FC48D;--accent2: #4DA3FF;--danger: #FF4D6D;--warning: #FFB020}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Nunito,Varela Round,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;background-color:var(--bg-page);color:var(--text-main);background-image:radial-gradient(rgba(255,255,255,.03) 1.5px,transparent 1.5px),radial-gradient(rgba(255,255,255,.03) 1.5px,var(--bg-page) 1.5px);background-size:30px 30px;background-position:0 0,15px 15px}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.app-bg{min-height:100vh;display:flex;justify-content:center;padding:24px}.app-shell{width:min(1080px,100%);display:flex;flex-direction:column;gap:24px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 10px 16px;background:transparent;border-bottom:2px solid var(--border-color)}.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.brand-mark img{width:40px;height:40px;display:block}.brand-zh-tag{font-size:20px;font-weight:800;color:var(--text-muted);letter-spacing:1px}.brand-title{font-size:24px;font-weight:800;color:var(--accent);letter-spacing:-.5px}.brand-sub{font-size:13px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.toplink{color:var(--text-muted);text-decoration:none;font-size:14px;font-weight:700;padding:10px 16px;border-radius:12px;transition:background .2s;text-transform:uppercase;letter-spacing:.8px}.toplink:hover{background-color:#ffffff0f}.topBtn{border-radius:12px;border:none;background:var(--gray-primary);box-shadow:0 4px 0 var(--gray-shadow);color:var(--text-muted);padding:10px 20px;cursor:pointer;font-weight:700;font-size:14px;text-transform:uppercase;transition:transform .1s}.topBtn:active{transform:translateY(4px);box-shadow:none}.topBtn:hover{filter:brightness(.95)}.grid{display:grid;grid-template-columns:1fr 360px;gap:32px}.grid.grid-single{grid-template-columns:1fr;max-width:720px;margin:0 auto}@media (max-width: 980px){.grid{grid-template-columns:1fr}}.panel{border:2px solid var(--border-color);border-radius:var(--radius);background:var(--bg-card);padding:24px}.hero{margin-bottom:24px;text-align:center}.h1{font-size:32px;font-weight:800;color:var(--text-main);letter-spacing:-.5px;margin:0}.p{color:var(--text-muted);margin-top:12px;font-size:18px;line-height:1.5}.p.subtle{font-size:16px}.rowBetween{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.statsRow{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap;justify-content:center}.stat{border:2px solid var(--border-color);border-radius:var(--radius);padding:12px 20px;background:var(--surface);min-width:140px;text-align:center}.statLabel{font-size:13px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.statValue{font-size:24px;font-weight:800;margin-top:4px;color:var(--blue-primary)}.controls{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap;justify-content:center}.label{font-size:14px;font-weight:700;color:var(--text-muted)}.input{width:140px;border-radius:var(--radius-sm);border:2px solid var(--border-color);background:#1a2240;color:var(--text-main);padding:12px 16px;outline:none;font-size:16px;font-weight:600;transition:border-color .2s}.input:focus{border-color:var(--blue-primary);background:#1e2744}.btn{border-radius:var(--radius);border:none;background:var(--blue-primary);box-shadow:0 4px 0 var(--blue-shadow);color:#fff;padding:12px 24px;cursor:pointer;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.8px;transition:transform .1s,filter .1s}.btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 6px 0 var(--blue-shadow)}.btn:active{transform:translateY(4px);box-shadow:none}.btn.primary{background:var(--accent);box-shadow:0 4px 0 var(--green-shadow);color:#041016}.btn.primary:hover{box-shadow:0 10px 34px #1fc48d38}.cardRow{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}@media (max-width: 860px){.cardRow{grid-template-columns:1fr}}.modeCard{border-radius:var(--radius);border:2px solid var(--border-color);background:var(--surface);padding:30px;text-align:center;cursor:pointer;color:var(--text-main);position:relative;overflow:hidden;transition:transform .1s,box-shadow .1s;display:flex;flex-direction:column;align-items:center}.modeCard:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000004d;border-color:var(--blue-primary)}.modeCard:active{transform:translateY(0);box-shadow:none}.modeTitle{font-size:22px;font-weight:800;margin-bottom:8px}.modeBody{color:var(--text-muted);font-size:16px;line-height:1.4}.modeMeta{margin-top:16px;font-size:13px;font-weight:700;color:var(--blue-primary);text-transform:uppercase}.quizPanel{padding:0;border:none;background:transparent}.hudLeft,.hudRight{display:flex;gap:12px;align-items:center}.pill{border:2px solid var(--border-color);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;background:var(--surface);color:var(--text-muted)}.pill.hot{border-color:var(--yellow-primary);color:var(--yellow-primary);background:#ffb02014}.pillBtn{border:none;background:transparent;color:var(--text-muted);font-weight:700;cursor:pointer;padding:8px 12px;font-size:14px;text-transform:uppercase}.pillBtn:hover{background:#ffffff0f;border-radius:12px}.progressOuter{height:16px;border-radius:999px;background:var(--gray-primary);overflow:hidden;margin-top:16px;width:100%}.progressInner{height:100%;background:var(--green-primary);border-radius:999px;position:relative}.progressInner:after{content:"";position:absolute;top:3px;left:10px;right:10px;height:4px;background:#ffffff4d;border-radius:999px}.qWrap{margin-top:32px}.questionBox{border:none;background:transparent;padding:0;text-align:left}.qMeta{display:flex;justify-content:space-between;color:var(--text-muted);font-size:14px;font-weight:700;margin-bottom:16px}.qText{font-size:24px;font-weight:700;line-height:1.4;color:var(--text-main)}.qId{font-weight:900;color:var(--blue-primary)}.imgBox{margin-top:20px;border-radius:var(--radius);overflow:hidden;border:2px solid var(--border-color);background:var(--surface);display:flex;justify-content:center;padding:20px}.imgBox img{max-width:100%;max-height:300px;display:block;object-fit:contain}.signImgBox{justify-content:center;margin-bottom:12px}.signImg{max-width:200px;max-height:200px;display:block;object-fit:contain}.answers{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px}@media (min-width: 720px){.answers{grid-template-columns:1fr 1fr}}.ansBtn{display:flex;align-items:center;text-align:left;border-radius:var(--radius);border:2px solid var(--border-color);border-bottom-width:4px;background:var(--surface);padding:16px;color:var(--text-main);cursor:pointer;position:relative;overflow:hidden;transition:all .1s;font-size:18px}.ansBtn:hover{background:#1a2240}.ansBtn:active{border-bottom-width:2px;transform:translateY(2px)}.ansBtn:disabled{cursor:default;opacity:.7}.ansIndex{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid var(--border-color);font-weight:800;color:var(--text-muted);font-size:14px;margin-right:16px}.ansText{flex:1;line-height:1.4;font-weight:600}.ansBtn.right{border-color:var(--green-primary);background:#1fc48d26;color:var(--green-primary)}.ansBtn.right .ansIndex{border-color:var(--green-primary);background:var(--green-primary);color:#041016}.ansBtn.wrong{border-color:var(--red-primary);background:#ff4d6d1f;color:var(--red-primary)}.ansBtn.wrong .ansIndex{border-color:var(--red-primary);background:var(--red-primary);color:#041016}.ansBtn.sel{border-color:var(--blue-primary);background:#4da3ff1f}.ansBtn.sel .ansIndex{border-color:var(--blue-primary);background:var(--blue-primary);color:#041016}.continueRow{margin-top:32px;padding-top:24px;border-top:2px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;gap:16px}.hint{color:var(--text-muted);font-size:15px;font-weight:600}.green{color:var(--green-primary);font-weight:800}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}to{transform:translate(0)}}.shake{animation:shake .35s ease}.side{display:flex;flex-direction:column;gap:20px}.sideCard{border:2px solid var(--border-color);border-radius:var(--radius);background:var(--surface);padding:20px}.sideCard.glowCard{border-color:var(--yellow-primary);box-shadow:0 18px 60px #00000073;border:1px solid rgba(255,255,255,.08)}.sideTitle{font-weight:800;font-size:18px;margin-bottom:12px;color:var(--text-main)}.sideBody{color:var(--text-muted);font-size:14px;line-height:1.5}.muted{color:var(--text-muted)}.kv{display:flex;justify-content:space-between;margin-top:12px;color:var(--text-muted);font-size:14px;font-weight:600;border-bottom:2px solid var(--line);padding-bottom:8px}.kvV{color:var(--text-main);font-weight:800}.sideQuest{margin-top:16px}.sideQuestRow{display:flex;justify-content:space-between;color:var(--text-muted);font-size:13px;font-weight:700;margin-bottom:8px}.miniBar{height:12px;border-radius:999px;background:var(--gray-primary);overflow:hidden}.miniBarIn{height:100%;background:var(--yellow-primary);border-radius:999px}.setupGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}@media (max-width: 860px){.setupGrid{grid-template-columns:1fr}}.setupCard{border:2px solid var(--border-color);border-radius:var(--radius);background:var(--surface);padding:16px}.setupCard.fancy{background:#4da3ff0f;border-color:var(--blue-primary)}.segRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.seg{border:2px solid var(--border-color);background:var(--surface);color:var(--text-muted);border-radius:12px;padding:8px 12px;cursor:pointer;font-weight:700;font-size:13px;border-bottom-width:4px;transition:all .1s}.seg:hover{background:#1a2240}.seg:active{border-bottom-width:2px;transform:translateY(2px)}.seg.on{border-color:var(--blue-primary);background:var(--blue-primary);color:#fff}.kanjiBig{margin-top:24px;font-size:80px;font-weight:900;text-align:center;color:var(--text-main)}.kanjiSub{margin-top:16px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.toastStack{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:12px;z-index:9999;width:320px}.toast{border-radius:var(--radius);border:2px solid var(--border-color);background:var(--surface);padding:16px;box-shadow:0 8px 16px #0006;animation:shake .3s ease-out}.toastTitle{font-weight:800;font-size:16px;margin-bottom:4px}.toastBody{color:var(--text-muted);font-size:14px;line-height:1.4}.toast.good{border-color:var(--green-primary);background:#1fc48d14}.toast.good .toastTitle{color:var(--green-primary)}.toast.warn{border-color:var(--yellow-primary);background:#ffb02014}.toast.warn .toastTitle{color:var(--yellow-primary)}.toast.info{border-color:var(--blue-primary);background:#4da3ff14}.toast.info .toastTitle{color:var(--blue-primary)}.errorTitle{font-weight:800;color:var(--red-primary)}.errorBody{color:var(--text-muted);margin-top:6px;white-space:pre-wrap;font-size:13px}.footer{text-align:center;color:var(--text-muted);font-size:13px;padding:24px;border-top:2px solid var(--border-color)}.combo{border:2px solid var(--border-color);border-radius:var(--radius);padding:12px;background:var(--surface);min-width:100px;position:relative;overflow:hidden;text-align:center}.combo.hot{border-color:var(--yellow-primary);background:#ffb02014}.combo.mid{border-color:var(--blue-primary);background:#4da3ff14}.comboLabel{font-size:11px;color:var(--text-muted);font-weight:800;text-transform:uppercase;letter-spacing:.5px}.comboValue{font-size:24px;font-weight:900;margin-top:2px}.combo.hot .comboValue{color:var(--yellow-primary)}.combo.mid .comboValue{color:var(--blue-primary)}.comboSub{font-size:11px;color:var(--text-muted);font-weight:600}.timerWrap{display:flex;align-items:center;gap:12px}.pill.timer{border-color:var(--yellow-primary);color:var(--yellow-primary);background:var(--surface)}.timerBar{height:12px;width:120px;border-radius:999px;background:var(--gray-primary);overflow:hidden}.timerBarIn{height:100%;background:var(--yellow-primary);border-radius:999px}.pathTabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.pathTab{border:2px solid var(--border-color);background:var(--surface);color:var(--text-muted);border-radius:12px;padding:10px 18px;cursor:pointer;font-weight:700;font-size:14px;border-bottom-width:4px;transition:all .1s}.pathTab:hover{background:#1a2240}.pathTab:active{border-bottom-width:2px;transform:translateY(2px)}.pathTab.on{border-color:var(--blue-primary);background:var(--blue-primary);color:#fff}.bpmfPill{font-size:15px;letter-spacing:1px}.pathGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}@media (max-width: 980px){.pathGrid{grid-template-columns:1fr}}.pathCol{border:none;background:transparent;padding:0}.pathColTitle{font-weight:900;font-size:18px;margin-bottom:16px;text-align:center;color:var(--text-muted);text-transform:uppercase}.pathNodes{display:flex;flex-direction:column;gap:16px;align-items:center}.pathNode{width:100%;border-radius:var(--radius);border:2px solid var(--border-color);border-bottom-width:4px;background:var(--surface);padding:16px;cursor:pointer;color:var(--text-main);text-align:left;position:relative;overflow:hidden;transition:all .1s}.pathNode:hover{transform:translateY(-2px);filter:brightness(.98)}.pathNode:active{transform:translateY(2px);border-bottom-width:2px}.pathNodeTop{display:flex;justify-content:space-between;align-items:center}.pathNodeTitle{font-weight:800;font-size:16px}.pathNodeCount{font-size:12px;font-weight:800;color:#fff;background:var(--blue-primary);padding:4px 10px;border-radius:999px}.pathNodeBottom{margin-top:8px;font-size:13px;color:var(--text-muted);font-weight:600}.pathNode.done{border-color:var(--green-primary);background:#1fc48d14}.pathNode.done .pathNodeTitle{color:var(--green-primary)}.pathNode.done .pathNodeCount{background:var(--green-primary)}.pathNode.locked{opacity:.6;cursor:not-allowed;filter:grayscale(1);background:#1a2240}.pathNode:disabled{cursor:not-allowed;opacity:.6}.bossBanner{margin-top:16px;border-radius:var(--radius);border:2px solid var(--red-primary);background:#ff4d6d14;color:var(--red-primary);padding:16px;font-weight:800;text-align:center}.lockNote{margin-top:12px;border-radius:12px;background:#1a2240;padding:12px;color:var(--text-muted);font-size:13px;text-align:center;font-weight:600}.kanjiSvgBox{margin-top:24px;border-radius:var(--radius);border:2px solid var(--border-color);background:var(--surface);overflow:hidden;padding:10px}.kanjiSvg{width:100%;display:block;border-radius:12px}.fullPath{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:24px;max-width:400px;margin-left:auto;margin-right:auto}.fullPath .pathNode{width:100%}.bigTestGate{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding:4px 0}.bigTestLine{width:3px;height:12px;background:var(--purple-primary);border-radius:2px}.bigTestBtn{border:2px solid var(--purple-primary);border-radius:var(--radius);background:#b07cff14;color:var(--purple-primary);padding:10px 20px;font-weight:700;font-size:13px;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;transition:all .15s;width:100%;text-align:center}.bigTestBtn:hover{background:#b07cff24;transform:translateY(-1px)}.bigTestBtn.passed{background:#1fc48d14;border-color:var(--green-primary);color:var(--green-primary);cursor:default}.bigTestBtn.locked{opacity:.5;cursor:not-allowed;filter:grayscale(.6);background:#1a2240;border-color:var(--border-color);color:var(--text-muted)}.bigTestBtn.finalTestBtn{border-color:var(--yellow-primary);background:#ffb02014;color:var(--yellow-primary);font-size:14px;font-weight:800}.bigTestBtn.finalTestBtn:hover{background:#ffb02024}.bigTestBtn.finalTestBtn.passed{background:#1fc48d14;border-color:var(--green-primary);color:var(--green-primary)}.bigTestLine.finalLine{background:var(--yellow-primary)}.bigTestBanner{margin-top:16px;border-radius:var(--radius);border:2px solid var(--purple-primary);background:#b07cff14;color:var(--purple-primary);padding:16px;font-weight:800;text-align:center}.bigTestBanner.finalBanner{border-color:var(--yellow-primary);background:#ffb02014;color:var(--yellow-primary)}.bpmfBig{margin-top:24px;font-size:96px;font-weight:900;text-align:center;color:var(--text-main);line-height:1.1}.bpmfRomanBig{margin-top:24px;font-size:48px;font-weight:800;text-align:center;color:var(--blue-primary);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.bpmfReveal{margin-top:16px;border-radius:var(--radius-sm);border:2px solid var(--border-color);background:#1a2240;padding:12px 16px;text-align:center;font-size:15px;line-height:1.6}.ansBtn .ansSymbol{font-size:28px;font-weight:800}@media (min-width: 860px){.cardRow{grid-template-columns:1fr 1fr 1fr}}.testResultBanner{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:var(--radius);margin-top:16px;border:3px solid}.testResultBanner.passed{border-color:var(--green-primary);background:#1fc48d14}.testResultBanner.failed{border-color:var(--red-primary);background:#ff4d6d14}.testResultIcon{font-size:40px;font-weight:900;line-height:1;flex-shrink:0}.testResultBanner.passed .testResultIcon{color:var(--green-primary)}.testResultBanner.failed .testResultIcon{color:var(--red-primary)}.testResultTitle{font-size:20px;font-weight:800}.testResultBanner.passed .testResultTitle{color:var(--green-primary)}.testResultBanner.failed .testResultTitle{color:var(--red-primary)}.testResultSub{font-size:14px;color:var(--text-muted);margin-top:2px}.audioBtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--blue-primary);background:#4da3ff14;color:var(--blue-primary);cursor:pointer;transition:background .15s,transform .12s;flex-shrink:0}.audioBtn:hover{background:var(--blue-primary);color:#fff}.audioBtn:active{transform:scale(.92)}.tfBtnRow{display:flex;gap:16px;margin-top:32px}.tfBtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius);border:2px solid var(--border-color);border-bottom-width:4px;background:var(--surface);padding:24px 16px;cursor:pointer;transition:all .1s;min-height:100px}.tfBtn:hover{background:#1a2240}.tfBtn:active{border-bottom-width:2px;transform:translateY(2px)}.tfBtn:disabled{cursor:default;opacity:.7}.tfIcon{font-size:32px;font-weight:900;line-height:1}.tfLabel{font-size:15px;font-weight:700}.tfBtn.true{border-color:#1fc48d4d;background:#1fc48d0f}.tfBtn.true .tfIcon{color:var(--green-primary)}.tfBtn.true:hover{background:#1fc48d1f}.tfBtn.false{border-color:#ff4d6d4d;background:#ff4d6d0f}.tfBtn.false .tfIcon{color:var(--red-primary)}.tfBtn.false:hover{background:#ff4d6d1f}.tfBtn.right{border-color:var(--green-primary);background:#1fc48d26}.tfBtn.right .tfIcon,.tfBtn.right .tfLabel{color:var(--green-primary)}.tfBtn.wrong{border-color:var(--red-primary);background:#ff4d6d1f}.tfBtn.wrong .tfIcon,.tfBtn.wrong .tfLabel{color:var(--red-primary)}.tfBtn.sel{border-color:var(--blue-primary);background:#4da3ff1f}.dmvStage{width:100%;padding:12px 0 8px}.dmvStageLabel{font-size:14px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;text-align:center}.heroMascot{margin:0 auto 16px;width:120px;height:140px}.heroMascot img{width:120px;height:140px;display:block}.brand-zh-hero{color:var(--text-muted);font-size:22px;margin-top:4px}.toastHead{display:flex;align-items:center;gap:8px}.toastBadge{flex-shrink:0;display:block}@keyframes bearBlink{0%,92%,to{transform:scaleY(1)}94%,96%{transform:scaleY(.1)}}.bearBlink .bear-eye{transform-origin:center;animation:bearBlink 4.8s infinite}@keyframes bearWave{0%,to{transform:rotate(0)}20%{transform:rotate(12deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(10deg)}80%{transform:rotate(-6deg)}}.bearWave .bear-paw{transform-origin:80% 40%;animation:bearWave 1.1s ease-in-out infinite}@keyframes bearPop{0%{transform:scale(1) translateY(0)}40%{transform:scale(1.06) translateY(-2px)}70%{transform:scale(.98) translateY(0)}to{transform:scale(1) translateY(0)}}.bearPop{animation:bearPop .42s ease-out}.baobaoOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;background:#00000059;display:flex;align-items:flex-end;justify-content:center;padding:24px;cursor:pointer}.baobaoPopup{background:var(--surface);border-radius:24px 24px 16px 16px;border:3px solid var(--green-primary);box-shadow:0 -4px 24px #0006;padding:32px 28px 20px;max-width:340px;width:100%;text-align:center;position:relative}.baobaoWaveWrap{margin:-80px auto 12px;width:100px}.baobaoWaveWrap img{width:100px;height:auto;display:block;margin:0 auto}.baobaoText{margin-bottom:12px}.baobaoTitle{font-size:26px;font-weight:900;color:var(--green-primary);margin-bottom:4px}.baobaoSub{font-size:16px;font-weight:600;color:var(--text-muted)}.baobaoScore{margin-top:8px;font-size:32px;font-weight:900;color:var(--blue-primary)}.baobaoDismiss{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;opacity:.6;margin-top:8px}.speechBubble{background:var(--surface);border:2px solid var(--line);border-radius:var(--radius-sm);padding:10px 16px;text-align:center;color:var(--text);font-weight:600;font-size:15px;max-width:320px;margin:0 auto 16px;position:relative}.speechBubble:before{content:"";position:absolute;top:-9px;left:50%;transform:translate(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid var(--line)}.speechBubble:after{content:"";position:absolute;top:-7px;left:50%;transform:translate(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--surface)}.homeStats{display:flex;gap:12px;justify-content:center;margin-top:16px}.homeStat{border:2px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--surface);font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}.homeStatLabel{color:var(--muted)}.homeStatValue{color:var(--accent)}.quickStartBtn{width:100%;border:none;border-radius:var(--radius);background:var(--accent);box-shadow:0 4px 0 var(--green-shadow);color:#041016;padding:16px 24px;cursor:pointer;font-weight:800;font-size:18px;text-align:center;transition:transform .1s,box-shadow .1s,filter .1s;margin-top:20px}.quickStartBtn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 6px 0 var(--green-shadow),0 10px 34px #1fc48d38}.quickStartBtn:active{transform:translateY(4px);box-shadow:none}.quickStartSub{font-size:13px;font-weight:600;opacity:.7;margin-top:2px}.modeQuestBar{width:100%;height:4px;border-radius:999px;background:var(--gray-primary);overflow:hidden;margin-top:12px}.modeQuestBarIn{height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease}.modeQuestLabel{font-size:13px;font-weight:700;color:var(--muted);margin-top:6px}:focus-visible{outline:2px solid rgba(77,163,255,.55);outline-offset:2px}a,.link{color:var(--accent2)}.streakStat{border-color:var(--yellow-primary);background:#ffb02014}.streakStat .homeStatValue{color:var(--yellow-primary)}.trophyBtn{cursor:pointer;border:2px solid var(--line);background:var(--surface);transition:border-color .15s}.trophyBtn:hover{border-color:var(--yellow-primary)}.dailyChallengeBtn{width:100%;border:2px solid var(--yellow-primary);border-radius:var(--radius);background:#ffb02014;color:var(--yellow-primary);padding:14px 24px;cursor:pointer;font-weight:800;font-size:17px;text-align:center;transition:transform .1s,box-shadow .1s;margin-top:12px}.dailyChallengeBtn:hover{background:#ffb02024;transform:translateY(-2px);box-shadow:0 4px 16px #ffb02026}.dailyChallengeBtn:active{transform:translateY(2px)}.wotdCard{border:2px solid var(--border-color);border-radius:var(--radius);background:var(--surface);padding:16px 20px;margin-top:16px}.wotdLabel{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:8px}.wotdMain{display:flex;align-items:center;gap:16px}.wotdHanzi{font-size:52px;font-weight:900;color:var(--text-main);line-height:1}.wotdInfo{flex:1}.wotdPinyin{font-size:15px;font-weight:700;color:var(--blue-primary)}.wotdBpmf{font-size:14px;color:var(--text-muted);margin-top:2px}.wotdMeaning{font-size:14px;color:var(--text-main);margin-top:4px;font-weight:600}.wotdActions{display:flex;gap:8px;margin-top:10px;align-items:center}.lbOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;background:#00000080;display:flex;align-items:center;justify-content:center;padding:24px}.lbPanel{background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius);padding:24px;max-width:500px;width:100%;max-height:80vh;overflow-y:auto}.lbHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.lbList{margin-top:12px;display:flex;flex-direction:column;gap:4px}.lbRow{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:600}.lbRow:nth-child(odd){background:#ffffff05}.lbMe{background:#1fc48d1a!important;border:1px solid var(--green-primary)}.lbRank{font-weight:800;color:var(--yellow-primary);min-width:36px}.lbUid{flex:1;color:var(--text-muted);font-family:ui-monospace,monospace;font-size:13px}.lbScore{font-weight:800;color:var(--blue-primary)}.badgePanel{background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius);padding:24px;max-width:560px;width:100%;max-height:80vh;overflow-y:auto}.badgeGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}@media (max-width: 500px){.badgeGrid{grid-template-columns:repeat(2,1fr)}}.badgeTile{border:2px solid var(--border-color);border-radius:var(--radius-sm);padding:14px 10px;text-align:center;transition:all .15s}.badgeTile.earned{border-color:var(--yellow-primary);background:#ffb0200f}.badgeTile.locked{opacity:.45;filter:grayscale(.5)}.badgeIcon{font-size:32px;line-height:1.2}.badgeName{font-size:13px;font-weight:800;margin-top:6px;color:var(--text-main)}.badgeDesc{font-size:11px;color:var(--text-muted);margin-top:2px}.badgeDate{font-size:10px;color:var(--text-muted);margin-top:4px;font-weight:600}@media (min-width: 860px){.cardRow{grid-template-columns:1fr 1fr}}.flashMenu{display:flex;flex-direction:column;gap:16px}.flashSubModes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px}@media (max-width: 600px){.flashSubModes{grid-template-columns:1fr}}.flashSubBtn{border:2px solid var(--border-color);border-radius:var(--radius);background:var(--surface);padding:20px 16px;cursor:pointer;text-align:center;transition:all .15s;color:var(--text-main);border-bottom-width:4px}.flashSubBtn:hover{border-color:var(--blue-primary);background:#4da3ff0f;transform:translateY(-2px)}.flashSubBtn:active{transform:translateY(2px);border-bottom-width:2px}.flashSubIcon{font-size:32px;margin-bottom:8px}.flashSubTitle{font-weight:800;font-size:16px}.flashSubDesc{font-size:12px;color:var(--text-muted);margin-top:4px}.flipCardWrap{perspective:1000px;width:100%;max-width:340px;margin:24px auto}.flipCard{width:100%;min-height:260px;border-radius:var(--radius);border:2px solid var(--border-color);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;cursor:pointer;transition:box-shadow .2s;text-align:center}.flipCard:hover{box-shadow:0 4px 20px #0000004d}.flipFront .flipHanzi{font-size:72px;font-weight:900;color:var(--text-main)}.flipFront .flipHint{font-size:13px;color:var(--text-muted);margin-top:12px}.flipBack .flipMeaning{font-size:22px;font-weight:800;color:var(--text-main);margin-bottom:8px}.flipBack .flipPinyin{font-size:16px;color:var(--blue-primary);font-weight:700}.flipBack .flipBpmf{font-size:14px;color:var(--text-muted);margin-top:4px}.flipActions{display:flex;gap:12px;margin-top:20px;justify-content:center}.flipGot{background:var(--green-primary);box-shadow:0 4px 0 var(--green-shadow)}.flipMissed{background:var(--red-primary);box-shadow:0 4px 0 var(--red-shadow)}.speedMatchWrap{display:flex;gap:24px;justify-content:center;margin-top:20px}.speedCol{display:flex;flex-direction:column;gap:10px;min-width:140px}.speedItem{border:2px solid var(--border-color);border-radius:var(--radius-sm);padding:14px 16px;text-align:center;font-weight:700;font-size:16px;cursor:pointer;transition:all .12s;background:var(--surface);color:var(--text-main)}.speedItem:hover{border-color:var(--blue-primary);background:#4da3ff0f}.speedItem.selected{border-color:var(--blue-primary);background:var(--blue-primary);color:#fff}.speedItem.matched{border-color:var(--green-primary);background:#1fc48d26;color:var(--green-primary);opacity:.5;pointer-events:none}.speedItem.wrong{animation:shake .3s ease}.memoryGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:400px;margin:20px auto}.memoryCard{aspect-ratio:1;border:2px solid var(--border-color);border-radius:var(--radius-sm);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;font-weight:800;transition:all .15s;color:var(--text-main);padding:6px;text-align:center;word-break:break-word;line-height:1.2}.memoryCard:hover{border-color:var(--blue-primary)}.memoryCard.faceDown{background:var(--gray-primary);color:transparent}.memoryCard.faceDown:after{content:"?";color:var(--text-muted);font-size:24px}.memoryCard.matched{border-color:var(--green-primary);background:#1fc48d1a;color:var(--green-primary);pointer-events:none}.dailyBorder{border:2px solid var(--yellow-primary)!important}.dailyDoneCard{border:2px solid var(--yellow-primary);border-radius:var(--radius);background:#ffb0200f;padding:24px;text-align:center;margin-top:16px}.settingsOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;background:#00000080;display:flex;align-items:center;justify-content:center;padding:24px}.settingsPanel{background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius);padding:24px;max-width:480px;width:100%;max-height:80vh;overflow-y:auto}.tierCard{border:2px solid var(--border-color);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;transition:all .15s;margin-top:8px}.tierCard.active{border-color:var(--green-primary);background:#1fc48d0f}.tierCard:hover{border-color:var(--blue-primary)}.tierLabel{font-weight:800;font-size:15px}.tierDesc{font-size:12px;color:var(--text-muted);margin-top:2px}.syncCodeBox{margin-top:12px;font-family:ui-monospace,monospace;font-size:20px;font-weight:800;color:var(--blue-primary);letter-spacing:2px;text-align:center;padding:12px;border:2px solid var(--border-color);border-radius:var(--radius-sm);background:var(--surface)}.onboardingOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:var(--bg-page);display:flex;align-items:center;justify-content:center;padding:24px}.onboardingCard{max-width:420px;width:100%;text-align:center}.onboardingStep{background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius);padding:32px 24px}.onboardingTitle{font-size:24px;font-weight:900;color:var(--text-main);margin-bottom:12px}.onboardingSub{font-size:15px;color:var(--text-muted);line-height:1.5}.onboardingNav{display:flex;gap:12px;justify-content:center;margin-top:20px}.onboardingDots{display:flex;gap:8px;justify-content:center;margin-top:16px}.onboardingDot{width:8px;height:8px;border-radius:50%;background:var(--border-color)}.onboardingDot.active{background:var(--green-primary)}.lobbyCodeInput{display:flex;gap:8px;justify-content:center;margin:16px 0}.lobbyCodeInput input{width:48px;height:56px;text-align:center;font-size:24px;font-weight:900;border:2px solid var(--border-color);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-main);outline:none;text-transform:uppercase}.lobbyCodeInput input:focus{border-color:var(--blue-primary)}.lobbyCode{font-family:ui-monospace,monospace;font-size:32px;font-weight:900;color:var(--blue-primary);letter-spacing:4px;text-align:center;margin:16px 0}.accGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.accTile{border:2px solid var(--border-color);border-radius:var(--radius-sm);padding:10px;text-align:center;cursor:pointer;font-size:24px;transition:all .12s}.accTile.active{border-color:var(--green-primary);background:#1fc48d0f}.accTile.locked{opacity:.35;cursor:not-allowed}.accName{font-size:10px;font-weight:700;color:var(--text-muted);margin-top:4px}.baobaoSvg{display:block;margin:0 auto}.settingsBtn{border:none;background:transparent;color:var(--text-muted);cursor:pointer;padding:8px;border-radius:8px;display:flex;align-items:center;transition:background .15s}.settingsBtn:hover{background:#ffffff0f}.bpmfGridWrap{display:flex;flex-direction:column;gap:24px;margin-top:16px}.bpmfGridSection{display:flex;flex-direction:column;gap:8px}.bpmfGridSectionTitle{font-size:14px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}.bpmfGridRow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.bpmfCell{border:2px solid var(--border-color);border-radius:var(--radius-sm);background:var(--surface);padding:12px 8px 8px;text-align:center;cursor:pointer;transition:all .12s;display:flex;flex-direction:column;align-items:center;gap:2px}.bpmfCell:hover{border-color:var(--blue-primary);background:#4da3ff0f}.bpmfCell.seen{border-color:#aab2c866}.bpmfCell.learning{border-color:var(--yellow-primary);background:#ffb0200a}.bpmfCell.practiced{border-color:var(--yellow-primary);background:#ffb0201a}.bpmfCell.mastered{border-color:gold;background:#ffd70014;box-shadow:0 0 12px #ffd70026}.bpmfCellSym{font-size:28px;font-weight:800;line-height:1.1;color:var(--text-main)}.bpmfCellRom{font-size:11px;font-weight:700;color:var(--text-muted)}.bpmfCellBar{width:100%;height:3px;border-radius:999px;background:var(--gray-primary);margin-top:4px;overflow:hidden}.bpmfCellBarIn{height:100%;border-radius:999px;background:var(--yellow-primary);transition:width .3s}.bpmfCell.mastered .bpmfCellBarIn{background:gold}.bpmfLessonWrap{max-width:600px;margin:0 auto}.bpmfIntroCard{text-align:center;margin-top:24px}.bpmfDrawWrap{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}.bpmfDrawCanvas{width:240px;height:240px;border:2px solid var(--border-color);border-radius:var(--radius);background:var(--surface);cursor:crosshair;display:block}.bpmfDrawHint{font-size:14px;font-weight:700;color:var(--text-muted);text-align:center}.bpmfDrawActions{display:flex;gap:12px}.bpmfCountdown{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;background:var(--blue-primary);color:#fff;font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center}.bpmfCellExpanded{overflow:hidden;border:2px solid var(--blue-primary);border-radius:var(--radius-sm);background:#4da3ff0f;margin-top:8px}.bpmfExpandedInner{padding:16px}.bpmfExpandedHeader{display:flex;align-items:center;gap:16px}.bpmfExpandedSym{font-size:48px;font-weight:900;line-height:1;color:var(--text-main)}.bpmfExpandedInfo{flex:1}.bpmfExpandedExample{margin-top:12px;padding:10px;border-radius:var(--radius-sm);border:2px solid var(--border-color);background:var(--surface);display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:14px}.bpmfCell.bpmfCellActive{border-color:var(--blue-primary);background:#4da3ff1f}.bpmfPracticeBtn{font-size:16px;padding:10px 28px}.bpmfLessonProgress{font-size:14px;font-weight:800;color:var(--text-muted)}