:root{
  --bg:#FAF7F0; --surface:#FFFFFF; --surface2:#F4F1E8; --surface3:#EFEADD;
  --border:#E5DED0; --border2:#D5CBB4;
  --text:#2C2A26; --text2:#6B6558; --text3:#9A9182;
  --primary:#B03A2E; --primary-soft:#F8EBE7; --primary-dark:#8E2D23;
  --accent:#2C5A7A; --accent-soft:#E9F0F5;
  --ok:#4A7C1F; --ok-soft:#EEF4E4;
  --warn:#A8721A; --warn-soft:#FBF1DF;
  --danger:#A32D2D; --danger-soft:#FAEBEB;
  --r:12px; --r-s:8px; --r-l:16px;
  --serif:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  --sans:-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  --maxw:520px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  padding-bottom:76px;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:16px 16px 0}
@media(min-width:900px){ .wrap{max-width:720px} }

h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.4}
h1{font-size:21px} h2{font-size:18px} h3{font-size:16px}
p{margin:0}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--accent);text-decoration:none}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.card+.card{margin-top:12px}
.sec{margin-top:20px}
.sec-t{font-size:12px;color:var(--text3);letter-spacing:.08em;margin-bottom:8px;font-weight:500}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.metric{background:var(--surface2);border-radius:var(--r-s);padding:9px 10px}
.metric .k{font-size:11px;color:var(--text3);margin-bottom:1px}
.metric .v{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.1}
.metric .u{font-size:11px;color:var(--text3);margin-left:2px;font-family:var(--sans);font-weight:400}
.metric.hot .v{color:var(--primary)}

.chip{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--surface3);color:var(--text2);vertical-align:middle}
.chip.p{background:var(--primary-soft);color:var(--primary)}
.chip.a{background:var(--accent-soft);color:var(--accent)}
.chip.g{background:var(--ok-soft);color:var(--ok)}
.chip.w{background:var(--warn-soft);color:var(--warn)}

.stars{color:var(--primary);font-size:11px;letter-spacing:-1px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row+.row{margin-top:9px}
.muted{color:var(--text2);font-size:13px}
.tiny{color:var(--text3);font-size:12px}

.btn{display:block;width:100%;text-align:center;padding:13px;border-radius:var(--r-s);
  background:var(--primary);color:#fff;font-size:15px;font-weight:500;transition:background .15s}
.btn:active{background:var(--primary-dark)}
.btn.sec{background:var(--surface2);color:var(--text)}
.btn.line{background:transparent;border:1px solid var(--border2);color:var(--text2)}
.btn:disabled{opacity:.45}
.btn-mini{padding:7px 14px;border-radius:var(--r-s);background:var(--surface2);font-size:13px;width:auto;display:inline-block}

.bar{height:4px;background:var(--surface3);border-radius:3px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .4s}
.bar.p>i{background:var(--primary)}
.bar.g>i{background:var(--ok)}

.tasklist{margin-top:12px}
.taskrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border)}
.taskrow:first-child{border-top:none}
.taskrow .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border2);flex:0 0 auto}
.taskrow.done .dot{background:var(--ok);border-color:var(--ok);position:relative}
.taskrow.done .dot::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.taskrow .nm{flex:1;font-size:14px}
.taskrow.done .nm{color:var(--text3)}
.taskrow .mn{font-size:12px;color:var(--text3)}

nav{position:sticky;bottom:0;left:0;right:0;background:rgba(250,247,240,.96);
  border-top:1px solid var(--border);display:flex;backdrop-filter:blur(8px);
  position:fixed;z-index:50}
nav button{flex:1;padding:9px 0 11px;font-size:11px;color:var(--text3);display:flex;flex-direction:column;align-items:center;gap:3px}
nav button.on{color:var(--primary)}
nav .ic{width:19px;height:19px;display:block}
#syncDot{position:absolute;top:6px;right:8px;width:8px;height:8px;border-radius:50%;
  background:var(--text3);box-shadow:0 0 0 2px rgba(250,247,240,.9)}
#syncDot.s-syncing{background:var(--warn)}
#syncDot.s-synced{background:var(--ok)}
#syncDot.s-offline{background:var(--danger)}
#syncDot.s-error{background:var(--danger)}
#syncDot.s-idle{background:var(--text3)}

.tabs{display:flex;gap:8px;justify-content:center}
.tabs .tab{flex:1;padding:10px 0;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--paper);color:var(--text2);font-size:14px;cursor:pointer}
.tabs .tab.on{border-color:var(--primary);color:var(--primary);font-weight:600;background:var(--primary-soft)}

.flow{min-height:calc(100vh - 90px);display:flex;flex-direction:column}
.flow-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.flow-head .bar{flex:1}
.flow-body{flex:1}
.flow-foot{position:sticky;bottom:12px;padding-top:14px}

.qcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;min-height:180px;display:flex;flex-direction:column;justify-content:center}
.qcard .front{font-family:var(--serif);font-size:19px;line-height:1.55;text-align:center}
.qcard .back{margin-top:16px;padding-top:16px;border-top:1px dashed var(--border2);font-size:15px;line-height:1.75;white-space:pre-wrap}
.qcard .mn2{margin-top:12px;background:var(--warn-soft);color:var(--warn);border-radius:var(--r-s);padding:8px 11px;font-size:13px}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.grade button{padding:12px 0;border-radius:var(--r-s);font-size:14px;font-weight:500}
.grade .g0{background:var(--danger-soft);color:var(--danger)}
.grade .g3{background:var(--warn-soft);color:var(--warn)}
.grade .g5{background:var(--ok-soft);color:var(--ok)}

.stem{font-size:15px;line-height:1.75;margin-bottom:14px}
.opt{display:block;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--border);
  border-radius:var(--r-s);background:var(--surface);margin-bottom:8px;font-size:14px;line-height:1.6}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrong{border-color:var(--danger);background:var(--danger-soft)}
.ana{background:var(--surface2);border-radius:var(--r-s);padding:12px 14px;font-size:13px;line-height:1.75;margin-top:4px;white-space:pre-wrap}

.pt{padding:11px 0;border-top:1px solid var(--border)}
.pt:first-child{border-top:none}
.pt .h{display:flex;align-items:baseline;gap:7px}
.pt .no{font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums}
.pt .ti{font-size:15px;flex:1}

.heat{display:grid;grid-template-columns:repeat(13,1fr);gap:3px}
.heat i{aspect-ratio:1;border-radius:2px;background:var(--surface3);display:block}
.heat i.l1{background:#DCE8CB} .heat i.l2{background:#B9D49A}
.heat i.l3{background:#8FB863} .heat i.l4{background:#4A7C1F}

.empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:14px}
.big{font-family:var(--serif);font-size:40px;font-weight:600;text-align:center;line-height:1.2}
.center{text-align:center}
.hide{display:none!important}
.sp{height:12px}
input,select{font-family:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--border2);
  border-radius:var(--r-s);background:var(--surface);color:var(--text);width:100%}
label{font-size:13px;color:var(--text2);display:block;margin-bottom:5px}
.field+.field{margin-top:13px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;background:var(--text);
  color:#fff;padding:9px 18px;border-radius:20px;font-size:13px;z-index:99;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.on{opacity:.94}

/* 自评量表 */
.rub{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border)}
.rub:first-child{border-top:none}
.rub-n{flex:1;font-size:14px;line-height:1.4}
.rub-b{display:flex;gap:6px;flex:0 0 auto}
.rub-b button{padding:6px 12px;border-radius:var(--r-s);background:var(--surface2);font-size:13px;color:var(--text2);border:1px solid transparent;transition:all .12s}
.rub-b button.on{background:var(--primary);color:#fff;border-color:var(--primary)}

/* 提醒横幅 */
.banner{background:var(--primary-soft);color:var(--primary);border-radius:var(--r-s);padding:10px 12px;font-size:13px;margin-bottom:12px;line-height:1.5}
.banner a{font-weight:600;text-decoration:underline}

/* 弱项雷达 */
.radar{width:100%;max-width:280px;margin:0 auto;display:block}

/* 模考趋势图 */
.trend{width:100%;max-width:300px;margin:0 auto;display:block}

/* 文本框 */
textarea{font-family:inherit;font-size:14px;padding:10px;border:1px solid var(--border2);border-radius:var(--r-s);
  background:var(--surface);color:var(--text);width:100%;line-height:1.6;resize:vertical}

/* 案例精练 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip{cursor:pointer;border:none;font-size:12px;padding:6px 11px}
.chips .chip:hover{filter:brightness(.97)}
.case-scenario{background:var(--ok-soft);border-left:3px solid var(--ok);padding:12px 14px;border-radius:8px;
  margin:10px 0;line-height:1.75;white-space:pre-wrap;font-size:14px;color:var(--text)}
.case-q{border-top:1px solid var(--border2);padding:13px 0}
.case-q:first-of-type{border-top:none}
.case-qh{display:flex;gap:9px;line-height:1.6;font-size:14px;align-items:flex-start}
.case-qh .no{flex:0 0 22px;height:22px;width:22px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px}
.case-ans{margin-top:9px;padding:11px 13px;background:var(--warn-soft);border-radius:8px;
  white-space:pre-wrap;line-height:1.8;font-size:13.5px;color:var(--text)}
.case-ans .muted{font-size:12.5px}