:root{
  --bg:#f3f5f1;--bg2:#e9ede5;--card:#ffffff;--ink:#16211a;--mut:#5f6f64;--line:#dbe2d6;
  --acc:#2f6b3f;--acc2:#c99a1e;--accsoft:rgba(47,107,63,.12);--bad:#c0392b;--good:#2e8b4f;--warn:#c99a1e;
  --shadow:0 1px 2px rgba(20,35,25,.06),0 8px 24px rgba(20,35,25,.06);--r:16px
}
:root[data-theme=dark]{
  --bg:#0c110e;--bg2:#121a15;--card:#151d18;--ink:#e8efe9;--mut:#93a396;--line:#243029;
  --acc:#6fcf86;--acc2:#e3b341;--accsoft:rgba(111,207,134,.12);--bad:#ff7b6b;--good:#6fcf86;--warn:#e3b341;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
a{color:var(--acc);text-decoration:none}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}h1{font-size:1.9rem}h2{font-size:1.35rem}h3{font-size:1.05rem}
p{margin:.3em 0 .8em}.mut{color:var(--mut)}.sm{font-size:.86rem}.center{text-align:center}.err{color:var(--bad)}
#shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
#nav{position:sticky;top:0;height:100vh;padding:18px 14px;border-right:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;padding:4px 10px 16px}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:grid;place-items:center;color:#fff;font-weight:900}
#nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink);font-weight:600}
#nav a:hover{background:var(--bg2)}#nav a.on{background:var(--accsoft);color:var(--acc)}
#nav .sp{flex:1}
#nav svg,#tabbar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#top{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:12px 24px;position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:.88rem}
.pill b{color:var(--acc2)}
.ibtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.ibtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
#view{padding:8px 24px 90px;max-width:1040px;width:100%;margin:0 auto;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#tabbar{display:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.card.flat{box-shadow:none}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex;flex-direction:column;gap:6px;margin:0}
.tile:hover{transform:translateY(-3px);border-color:var(--acc)}
.tile .ic{width:42px;height:42px;border-radius:12px;background:var(--accsoft);color:var(--acc);display:grid;place-items:center;font-size:1.25rem}
.tile .ct{font-size:.8rem;color:var(--mut)}
.hero{background:linear-gradient(135deg,#1f4d2c,#2f6b3f 55%,#8f7a1d);color:#fff;border:0;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;overflow:hidden;position:relative}
.hero h1{margin:0}.hero .mut{color:rgba(255,255,255,.8)}
.hero .big{font-size:3.4rem;font-weight:800;line-height:1}
.hero .cd{text-align:center;background:rgba(255,255,255,.14);border-radius:18px;padding:14px 22px}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 10px}.sec h2{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;border:0;background:var(--acc);color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:transform .1s,filter .15s}
:root[data-theme=dark] .btn{color:#06210f}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.warn{background:var(--acc2);color:#2b2100}.btn.sm{padding:6px 12px;font-size:.88rem;border-radius:10px}.btn[disabled]{opacity:.5;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.chip{padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:.9rem;font-weight:600;user-select:none}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}:root[data-theme=dark] .chip.on{color:#06210f}
input,textarea,select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--accsoft)}
textarea{min-height:130px;resize:vertical}label{display:block;font-weight:600;font-size:.88rem;margin:10px 0 4px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row.sb{justify-content:space-between}
.bar{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:99px;transition:width .4s}
.stat b{display:block;font-size:1.9rem;line-height:1.1}.stat span{color:var(--mut);font-size:.85rem}
.stage{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.word{font-size:clamp(2.2rem,8vw,4.2rem);font-weight:800;letter-spacing:-.02em;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.ring{position:relative;width:96px;height:96px}.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}.ring .bg{stroke:var(--bg2)}.ring .fg{stroke:var(--acc);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.ring.low .fg{stroke:var(--bad)}.ring span{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:1.25rem}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;top:56px;z-index:4;background:var(--bg);padding:8px 0}
.pic{max-width:100%;max-height:68vh;border-radius:14px;box-shadow:var(--shadow);background:#fff}
.opt{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;margin:8px 0;cursor:pointer;background:var(--card);transition:border-color .12s,background .12s;text-align:left;width:100%;font:inherit;color:var(--ink)}
.opt:hover{border-color:var(--acc)}.opt.sel{border-color:var(--acc);background:var(--accsoft)}
.opt.ok{border-color:var(--good);background:rgba(46,139,79,.14)}.opt.no{border-color:var(--bad);background:rgba(192,57,43,.12)}
.opt kbd{min-width:26px;height:26px;border-radius:8px;background:var(--bg2);display:grid;place-items:center;font-size:.8rem;font-weight:700;font-family:inherit;flex:none}
.pal{display:flex;flex-wrap:wrap;gap:6px}.pal button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;cursor:pointer}
.pal button.done{background:var(--accsoft);border-color:var(--acc)}.pal button.cur{outline:2px solid var(--acc2)}.pal button.flag{border-color:var(--acc2);box-shadow:inset 0 0 0 2px var(--acc2)}
.tag{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.75rem;font-weight:700;background:var(--accsoft);color:var(--acc)}
.tag.bad{background:rgba(192,57,43,.14);color:var(--bad)}.tag.warn{background:rgba(201,154,30,.18);color:var(--warn)}
.task{display:flex;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px dashed var(--line)}.task:last-child{border:0}
.task .ck{width:24px;height:24px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;flex:none;font-size:.8rem}
.task.done .ck{background:var(--good);border-color:var(--good);color:#fff}.task.done .tt{text-decoration:line-through;color:var(--mut)}
.task .tt{flex:1}
.hint{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.hint span{padding:4px 10px;border-radius:99px;background:var(--bg2);font-size:.8rem;color:var(--mut)}
.lib-body{white-space:pre-wrap;line-height:1.7}mark{background:rgba(201,154,30,.35);color:inherit;border-radius:4px;padding:0 2px}
.crumb{display:inline-flex;gap:6px;align-items:center;font-weight:600;margin:6px 0 10px;cursor:pointer;color:var(--mut)}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;font-weight:600;z-index:50;animation:fade .2s}
.heat{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}.heat i{aspect-ratio:1;border-radius:5px;background:var(--bg2)}
.heat i.l1{background:color-mix(in srgb,var(--acc) 30%,var(--bg2))}.heat i.l2{background:color-mix(in srgb,var(--acc) 60%,var(--bg2))}.heat i.l3{background:var(--acc)}
.login{max-width:380px;margin:9vh auto 0}
.table{width:100%;border-collapse:collapse}.table td,.table th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem}
@media (max-width:860px){
  #shell{grid-template-columns:1fr}#nav{display:none}
  #top{padding:10px 14px}#view{padding:6px 14px 100px}
  .hero{grid-template-columns:1fr}.hero .big{font-size:2.6rem}
  #tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);z-index:20;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  #tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;font-weight:700;color:var(--mut);padding:4px}
  #tabbar a.on{color:var(--acc)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.grid.g3{grid-template-columns:1fr 1fr}
  .topbar{top:52px}
}