:root{
  --bg:#0f1115;--panel:#171a21;--panel2:#1e222b;--line:#2a2f3a;--text:#e8eaef;--muted:#8b93a3;
  --accent:#6aa8ff;--good:#3ecf8e;--warn:#f5b84a;--bad:#ff6b6b;--radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --mono:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.55}
button,input,select{font:inherit;color:inherit}
button,.btn{background:var(--accent);color:#0b1020;border:0;border-radius:10px;padding:.55em 1em;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:.35em}
button:hover,.btn:hover{filter:brightness(1.08)}
button.ghost,.btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line);font-weight:500}
button.danger{color:var(--bad)}
button.sm{padding:.15em .6em;font-size:.85em}
button.wide{width:100%;margin:1em 0}
button:disabled{opacity:.4;cursor:not-allowed}
input[type=search],input[type=text],input[type=number],input[type=date],select{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.5em .75em;outline:none}
input:focus,select:focus{border-color:var(--accent)}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:.85em}
kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:0 .4em;font-family:var(--mono);font-size:.85em}

.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1rem;padding:.7rem 1.2rem;background:rgba(15,17,21,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:800;font-size:1.15rem;letter-spacing:.02em}
.brand .sub{font-weight:400;color:var(--muted);font-size:.75rem;margin-left:.5em}
.tabs{display:flex;gap:.3rem;flex:1;overflow-x:auto}
.tabs button{background:transparent;color:var(--muted);font-weight:500;padding:.45em .9em}
.tabs button.active{background:var(--panel2);color:var(--text)}
.net{width:10px;height:10px;border-radius:50%;background:var(--good)}
.net.off{background:var(--bad)}

main{max-width:980px;margin:0 auto;padding:1.2rem 1rem 4rem}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.day-line{font-size:1.8rem;font-weight:800;display:flex;align-items:center;gap:.4rem}
.day-line button{font-size:.8rem}
.stats{display:flex;gap:.6rem;flex-wrap:wrap}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.45em .9em;text-align:center;min-width:76px}
.stat b{display:block;font-size:1.3rem}
.stat span{font-size:.75rem;color:var(--muted)}
.progress{height:6px;background:var(--panel2);border-radius:6px;overflow:hidden;margin:.6rem 0 1rem}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--good));transition:width .3s}

.mode-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.5rem 0 .8rem}
.mode-switch button{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:.8em;font-size:1rem}
.mode-switch button.active{border-color:var(--accent);background:#1b2740}
.queue-pick{display:flex;flex-wrap:wrap;gap:.4rem 1rem;color:var(--muted);font-size:.92rem;margin-bottom:1rem}
.queue-pick label{cursor:pointer}
.queue-pick .chk{margin-left:auto}

.stage{min-height:340px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;position:relative;user-select:none}
.card .counter{position:absolute;top:.8rem;left:1rem;color:var(--muted);font-size:.85rem}
.card .bookmark{position:absolute;top:.6rem;right:.8rem;background:none;color:var(--muted);font-size:1.4rem;padding:.1em .3em}
.card .bookmark.on{color:var(--warn)}
.word-big{font-size:clamp(2.2rem,7vw,3.6rem);font-weight:800;letter-spacing:.01em;margin:.6rem 0 .2rem;word-break:break-word}
.ipa-row{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:.3rem 0}
.ipa{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:.2em .8em;font-family:var(--mono);font-size:.95rem;color:#cfd6e4;cursor:pointer}
.ipa .tag{font-family:var(--font);font-size:.7rem;color:var(--muted);margin-right:.35em}
.ipa.noaudio{cursor:default}
.tap-hint{color:var(--muted);margin-top:2rem;font-size:.9rem}
.back{text-align:left;margin-top:1.4rem;border-top:1px dashed var(--line);padding-top:1.2rem}
.gloss{font-size:1.25rem;font-weight:600;margin-bottom:.6rem}
.sec{margin:.8rem 0}
.sec h4{margin:0 0 .3rem;font-size:.8rem;color:var(--muted);font-weight:600;letter-spacing:.05em}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.1em .55em;font-size:.9rem;cursor:pointer}
.chip.in{border-color:#35507d}
.chip small{color:var(--muted);margin-left:.3em}
.example{font-size:1.02rem}
.example .zh{color:var(--muted);font-size:.92rem}
.example mark{background:none;color:var(--accent);font-weight:700}
.etym{font-size:.88rem;color:#b9c0cf;white-space:pre-line;background:var(--panel2);border-radius:10px;padding:.6em .8em}
.grade-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.2rem}
.grade-row button{padding:.9em .5em;font-size:1rem;flex-direction:column;gap:0}
.grade-row button small{font-weight:400;opacity:.75;font-size:.75rem}
.g1{background:var(--bad)}.g2{background:var(--warn)}.g3{background:var(--good)}
.done{text-align:center;padding:3rem 1rem}
.done .big{font-size:3rem}

.dict-prompt{font-size:1.5rem;font-weight:700;margin:1rem 0 .5rem}
.dict-input{width:100%;max-width:440px;font-size:1.6rem;text-align:center;font-family:var(--mono);padding:.5em;margin:1rem auto;display:block}
.dict-input.ok{border-color:var(--good)}.dict-input.bad{border-color:var(--bad)}
.diff{font-family:var(--mono);font-size:1.4rem;letter-spacing:.06em}
.diff .x{color:var(--bad);text-decoration:underline}.diff .o{color:var(--good)}
.result{font-size:1.1rem;margin:.5rem 0}
.result.ok{color:var(--good)}.result.bad{color:var(--bad)}

.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.8rem}
.toolbar input[type=search]{flex:1;min-width:220px}
.word-list{display:flex;flex-direction:column;gap:.4rem}
.wrow{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:.8rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.55em .9em;cursor:pointer}
.wrow:hover{border-color:#3a4252}
.wrow .w{font-weight:700;font-size:1.05rem}
.wrow .w small{display:block;font-weight:400;font-family:var(--mono);color:var(--muted);font-size:.78rem}
.wrow .g{color:#c9cfdb;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{font-size:.72rem;border-radius:6px;padding:.05em .45em;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.learning{color:var(--bad);border-color:#5a2a2a}.badge.review{color:var(--warn);border-color:#5a4a2a}.badge.mastered{color:var(--good);border-color:#24503b}

.root-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-bottom:1.2rem}
.root{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8em;cursor:pointer}
.root.active{border-color:var(--accent)}
.root b{font-size:1.15rem;font-family:var(--mono)}
.root .m{color:var(--muted);font-size:.85rem}
.root .n{float:right;color:var(--muted);font-size:.8rem}
.root-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:.5rem 0}
.root-head h2{margin:0}

.card-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:1rem}
.card-box h3{margin:.2rem 0 .8rem}
.row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.btns{display:flex;flex-wrap:wrap;gap:.5rem}
.keys{columns:2;padding-left:1.1em;margin:0}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;z-index:20;padding:4vh 1rem;overflow-y:auto}
.modal-body{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);max-width:640px;width:100%;padding:1.5rem;position:relative}
.modal-body .close{position:absolute;top:.6rem;right:.6rem}
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);padding:.6em 1.1em;border-radius:10px;z-index:30;box-shadow:0 6px 24px rgba(0,0,0,.4)}

@media (max-width:640px){
  html,body{font-size:16px}
  .topbar{padding:.6rem .7rem;gap:.5rem}
  .brand .sub{display:none}
  .wrow{grid-template-columns:1fr auto}
  .wrow .g{grid-column:1/-1;white-space:normal}
  .card{padding:1.6rem 1rem}
  .keys{columns:1}
  .queue-pick .chk{margin-left:0}
}
.tabs button{white-space:nowrap;flex-shrink:0}
@media (max-width:640px){
  .tabs{order:3;flex-basis:100%}
  .net{margin-left:auto}
  .stat{min-width:64px;padding:.35em .6em}
  .stat b{font-size:1.1rem}
  .root b{font-size:1rem}
}
#rootInline,#rootDetail{scroll-margin-top:80px}