:root{
  --paper:#FBF7EE;
  --card:#FFFFFF;
  --ink:#2B2620;
  --ink-2:#5B5348;
  --muted:#918879;
  --line:#EBE3D3;
  --brand:#14513E;
  --brand-2:#1D6B52;
  --brand-soft:#E7F0EB;
  --mgt:#B4653A;
  --eng:#14513E;
  --math:#2B4C7E;
  --ok:#1F7A5C;
  --bad:#C0392B;
  --amber:#BA7517;
  --r:14px;
  --shadow:0 1px 2px rgba(43,38,32,.04),0 6px 18px rgba(43,38,32,.05);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:calc(64px + env(safe-area-inset-bottom))}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}
.brand{display:flex;align-items:center;gap:8px}
.brand-mark{
  width:26px;height:26px;border-radius:8px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:500;letter-spacing:0
}
.brand-name{font-size:15px;font-weight:500;letter-spacing:.02em}
.today{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

.view{padding:4px 20px 20px;animation:fade .18s ease}
.view.hidden{display:none}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.checkin-card{
  background:var(--brand);color:#fff;border-radius:20px;padding:22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:6px;
}
.cc-label{font-size:12px;opacity:.72;letter-spacing:.06em}
.cc-streak{font-size:15px;margin-top:2px;display:flex;align-items:baseline;gap:4px}
.cc-streak b{font-size:44px;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.cc-streak span{font-size:14px;opacity:.8}
.cc-sub{font-size:12px;opacity:.66;margin-top:6px;max-width:150px}

.ring-wrap{position:relative;width:96px;height:96px;flex:0 0 auto}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.16);stroke-width:8}
.ring-fg{
  fill:none;stroke:#F2D9A0;stroke-width:8;stroke-linecap:round;
  stroke-dasharray:314.16;stroke-dashoffset:314.16;
  transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.3,1);
}
.ring-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;gap:1px;font-variant-numeric:tabular-nums
}
.ring-text b{font-size:22px;font-weight:500}
.ring-text i{font-style:normal;opacity:.75}

.cta-row{display:flex;gap:10px;margin-top:14px}
.btn-primary{
  flex:1;border:0;border-radius:var(--r);background:var(--brand);color:#fff;
  font-size:15px;font-weight:500;padding:14px 18px;font-family:inherit;cursor:pointer;
  transition:transform .12s,opacity .12s
}
.btn-primary:active{transform:scale(.985);opacity:.9}
.btn-primary:disabled{opacity:.34;cursor:default;transform:none}
.btn-primary.wide{width:100%;margin-top:16px;flex:none}
.btn-ghost{
  flex:1;border:.5px solid var(--line);border-radius:var(--r);background:var(--card);
  color:var(--ink);font-size:15px;padding:14px 18px;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px
}
.btn-ghost:active{background:#F6F1E6}
.badge{
  background:var(--bad);color:#fff;font-size:11px;font-style:normal;
  border-radius:9px;padding:1px 6px;min-width:18px;text-align:center;font-variant-numeric:tabular-nums
}
.link-btn{
  display:block;margin:16px auto 0;background:none;border:0;color:var(--muted);
  font-size:13px;font-family:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px
}

.sec-title{font-size:14px;font-weight:500;margin:24px 0 10px;letter-spacing:.02em}
.sec-title.first{margin-top:8px}
.sec-sub{font-size:12px;color:var(--muted);margin:-6px 0 14px}
.sub-title{font-size:13px;font-weight:500;margin:24px 0 10px;color:var(--ink-2)}

.subject-grid{display:grid;grid-template-columns:1fr;gap:10px}
.subject-card{
  background:var(--card);border-radius:var(--r);padding:16px 18px;border:.5px solid var(--line);
  display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform .12s
}
.subject-card:active{transform:scale(.99)}
.s-mark{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  color:#fff;font-size:15px;font-weight:500;flex:0 0 auto
}
.s-body{flex:1;min-width:0}
.s-name{font-size:15px;font-weight:500;display:flex;align-items:center;gap:8px}
.s-desc{font-size:12px;color:var(--muted);margin-top:2px}
.s-meta{font-size:12px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.s-meta em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}
.pill{font-size:10px;padding:1px 6px;border-radius:6px;background:var(--brand-soft);color:var(--brand-2);font-weight:400}

.tip-card{
  background:#F5EFE0;border-radius:var(--r);padding:14px 16px;margin-top:18px
}
.tip-title{font-size:12px;color:var(--amber);font-weight:500;letter-spacing:.04em}
.tip-card p{margin:6px 0 0;font-size:13px;color:var(--ink-2)}

.quiz-head{display:flex;align-items:center;gap:10px;padding:6px 0 4px}
.icon-btn{
  width:34px;height:34px;border:0;background:none;font-size:26px;line-height:1;
  color:var(--ink);cursor:pointer;padding:0;flex:0 0 auto;margin-left:-6px
}
.q-progress{flex:1}
.q-bar{height:4px;background:#EDE6D6;border-radius:3px;overflow:hidden}
.q-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:3px;transition:width .3s}
.q-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.q-count b{color:var(--ink);font-weight:500}

.q-chapter{
  display:inline-block;font-size:11px;color:var(--brand-2);background:var(--brand-soft);
  padding:3px 9px;border-radius:7px;margin:14px 0 4px
}
.q-stem{font-size:17px;line-height:1.7;font-weight:400;margin:10px 0 20px;letter-spacing:.01em}
.q-stem .blank{color:var(--brand)}

.opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;gap:12px;align-items:flex-start;background:var(--card);
  border:.5px solid var(--line);border-radius:var(--r);padding:14px 15px;
  cursor:pointer;transition:background .15s,border-color .15s,transform .1s
}
.opt:active{transform:scale(.995)}
.opt .key{
  width:24px;height:24px;border-radius:50%;border:.5px solid #D9D0BD;color:var(--muted);
  display:grid;place-items:center;font-size:12px;flex:0 0 auto;margin-top:1px;font-weight:500
}
.opt .txt{font-size:15px;line-height:1.55;flex:1;min-width:0;word-break:break-word}
.opt.picked{border-color:var(--brand);background:var(--brand-soft)}
.opt.right{border-color:var(--ok);background:#EAF5F0}
.opt.right .key{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:#FBEDEA}
.opt.wrong .key{background:var(--bad);border-color:var(--bad);color:#fff}
.opt.locked{cursor:default}
.opt.dim{opacity:.5}

.explain{
  margin-top:18px;background:var(--card);border:.5px solid var(--line);
  border-radius:var(--r);padding:14px 16px;animation:fade .2s ease
}
.explain.hidden{display:none}
.ex-head{font-size:13px;font-weight:500;margin-bottom:6px}
.ex-head.ok{color:var(--ok)}
.ex-head.bad{color:var(--bad)}
.explain p{margin:0;font-size:13.5px;line-height:1.72;color:var(--ink-2)}

.quiz-foot{margin-top:20px}
.quiz-foot .btn-primary.disabled{opacity:.34}

.result-card{
  background:var(--brand);color:#fff;border-radius:20px;padding:26px 22px 20px;margin-top:10px
}
.res-ring-wrap{position:relative;width:132px;height:132px;margin:0 auto}
.ring.big .ring-bg{stroke:rgba(255,255,255,.14);stroke-width:7}
.ring.big .ring-fg{stroke:#F2D9A0;stroke-width:7;stroke-dasharray:314.16;stroke-dashoffset:314.16}
.res-ring-wrap .ring-text b{font-size:34px}
.res-stats{display:flex;margin-top:18px;border-top:.5px solid rgba(255,255,255,.14);padding-top:16px}
.res-stats>div{flex:1;text-align:center}
.res-stats b{display:block;font-size:19px;font-weight:500;font-variant-numeric:tabular-nums}
.res-stats span{font-size:11px;opacity:.66}
.res-tip{font-size:13px;color:var(--ink-2);text-align:center;margin:16px 4px 0;line-height:1.7}

.wrong-item{
  background:var(--card);border:.5px solid var(--line);border-radius:var(--r);
  padding:13px 15px;margin-bottom:9px;cursor:pointer
}
.wrong-item:active{background:#F7F2E7}
.wi-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.wi-sub{font-size:10px;padding:1px 6px;border-radius:5px;color:#fff}
.wi-ch{font-size:11px;color:var(--muted)}
.wi-q{font-size:13.5px;line-height:1.6;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wi-n{font-size:11px;color:var(--bad);margin-left:auto}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:40px 20px;line-height:1.8}

.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric{background:var(--card);border:.5px solid var(--line);border-radius:var(--r);padding:14px 16px}
.m-label{font-size:11px;color:var(--muted);letter-spacing:.03em}
.m-num{font-size:26px;font-weight:500;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.heat{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.heat i{aspect-ratio:1;border-radius:3px;background:#EFE8D9;display:block}
.heat i.l1{background:#CBE0D5}
.heat i.l2{background:#8FBFA8}
.heat i.l3{background:#4C8F73}
.heat i.l4{background:var(--brand)}

.rate-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:12px}
.rate-row .rn{width:64px;color:var(--ink-2);flex:0 0 auto}
.rate-bar{flex:1;height:6px;background:#EFE8D9;border-radius:4px;overflow:hidden}
.rate-bar i{display:block;height:100%;border-radius:4px;background:var(--brand);width:0;transition:width .5s}
.rate-row .rv{width:40px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.rate-row .rc{color:var(--muted);font-size:11px;width:52px;text-align:right}

.foot-note{font-size:11px;color:var(--muted);text-align:center;margin:10px 0 0;line-height:1.7}
#reportBox img{width:100%;border-radius:var(--r);margin-top:14px;display:block;box-shadow:var(--shadow)}

.picker-head{display:flex;align-items:center;gap:6px;margin-top:4px}
.picker-head h2{font-size:18px;font-weight:500;margin:0}
.chapter-row{
  background:var(--card);border:.5px solid var(--line);border-radius:var(--r);
  padding:13px 15px;margin-bottom:9px;display:flex;align-items:center;gap:12px;cursor:pointer
}
.chapter-row:active{background:#F7F2E7}
.cr-name{flex:1;min-width:0}
.cr-t{font-size:14px;font-weight:500}
.cr-d{font-size:11.5px;color:var(--muted);margin-top:1px}
.cr-go{font-size:12px;color:var(--brand-2);flex:0 0 auto}
.cr-bar{width:44px;height:5px;background:#EFE8D9;border-radius:3px;overflow:hidden;flex:0 0 auto}
.cr-bar i{display:block;height:100%;background:var(--brand);width:0}

.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;
  background:rgba(251,247,238,.94);backdrop-filter:blur(12px);
  border-top:.5px solid var(--line);display:flex;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:50
}
.tab{
  flex:1;border:0;background:none;font-family:inherit;font-size:11px;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:2px 0
}
.tab .ico{font-size:16px;line-height:1.1}
.tab.active{color:var(--brand);font-weight:500}

.toast{
  position:fixed;left:50%;bottom:90px;transform:translate(-50%,10px);
  background:rgba(43,38,32,.92);color:#fff;font-size:13px;padding:9px 16px;border-radius:10px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:99;max-width:80%;text-align:center
}
.toast.show{opacity:1;transform:translate(-50%,0)}