:root{
  --bg:#f5f6f8; --card:#ffffff; --fg:#1a1d21; --muted:#6b7280; --line:#e4e7eb;
  --accent:#2f6df6; --accent-fg:#ffffff;
  --ok:#15803d; --ok-bg:#e8f6ec;
  --warn:#a16207; --warn-bg:#fdf4e3;
  --bad:#b91c1c; --bad-bg:#fdeaea;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --card:#181b21; --fg:#e8eaed; --muted:#9aa2ad; --line:#272b33;
    --accent:#5b8cff; --accent-fg:#ffffff;
    --ok:#6ee7a0; --ok-bg:#12291c;
    --warn:#f2c469; --warn-bg:#2b2413;
    --bad:#ff9b9b; --bad-bg:#2e1616;
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
      "Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  -webkit-text-size-adjust:100%;
}
main{max-width:760px; margin:0 auto; padding:16px 14px calc(28px + env(safe-area-inset-bottom))}

/* 顶栏 */
header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:8px;
  max-width:760px; margin:0 auto;
  padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-title{flex:1; font-size:15px; font-weight:600; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.icon-btn{
  min-width:40px; height:40px; border:1px solid var(--line); background:var(--card);
  color:var(--fg); border-radius:11px; font-size:19px; line-height:1; cursor:pointer;
}
.icon-btn:active{transform:scale(.96)}

/* 通用 */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:12px}
h1{font-size:21px; margin:6px 0 4px; line-height:1.35}
h2{font-size:17px; margin:0 0 8px}
.sub{color:var(--muted); font-size:13.5px; line-height:1.6; margin:0 0 12px}
.row{display:flex; align-items:center; gap:10px}
.grow{flex:1; min-width:0}
.muted{color:var(--muted)}
.small{font-size:13px}
hr{border:0; border-top:1px solid var(--line); margin:14px 0}

button.primary{
  width:100%; padding:15px; border:0; border-radius:12px; background:var(--accent);
  color:var(--accent-fg); font-size:16.5px; font-weight:600; cursor:pointer;
}
button.primary:disabled{opacity:.5}
button.ghost{
  padding:11px 14px; border:1px solid var(--line); background:transparent;
  color:var(--fg); border-radius:11px; font-size:14.5px; cursor:pointer;
}
button.ghost:active{background:var(--bg)}

/* 科目 / 概念列表 */
.item{
  display:flex; align-items:center; gap:12px;
  padding:14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:10px; cursor:pointer;
}
.item:active{transform:scale(.995)}
.item .id{
  flex:0 0 auto; min-width:42px; height:42px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--line);
  font-weight:700; font-size:14px;
}
.item.done .id{background:var(--ok-bg); color:var(--ok); border-color:transparent}
.item.locked{opacity:.55}
.chip{
  font-size:11.5px; padding:3px 9px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--line); color:var(--muted);
}
.chip.ok{background:var(--ok-bg); color:var(--ok); border-color:transparent}
.chip.doing{background:var(--warn-bg); color:var(--warn); border-color:transparent}
.chip.lock{background:var(--bg)}

/* 进度条 */
.bar{height:5px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:8px}
.bar > i{display:block; height:100%; background:var(--accent)}

/* 题目 */
.qhead{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:12.5px; color:var(--muted)}
.tag{font-size:11.5px; padding:2px 8px; border-radius:999px; background:var(--warn-bg); color:var(--warn)}
.prompt{font-size:16.5px; line-height:1.8}
.prompt p{margin:0 0 10px}
.prompt strong{font-weight:700}
.prompt ul,.prompt ol{margin:0 0 10px; padding-left:22px}
.prompt li{margin:3px 0}
.prompt code{background:var(--bg); padding:1px 5px; border-radius:5px; font-size:14px}
.choices label{
  display:flex; gap:10px; align-items:flex-start; padding:12px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:11px; cursor:pointer;
}
.choices input{margin-top:5px}
textarea{
  width:100%; min-height:130px; padding:13px; border-radius:12px;
  border:1px solid var(--line); background:var(--bg); color:var(--fg);
  font:inherit; font-size:16px; line-height:1.7; resize:none;
}
textarea:focus{outline:2px solid var(--accent); outline-offset:-1px}

/* 批改结果 */
.verdict{display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:var(--radius);
  font-weight:700; margin-bottom:12px}
.verdict .score{margin-left:auto; font-weight:600; font-size:13px; opacity:.85}
.v-correct{background:var(--ok-bg); color:var(--ok)}
.v-partial{background:var(--warn-bg); color:var(--warn)}
.v-wrong{background:var(--bad-bg); color:var(--bad)}
.sec{margin-bottom:14px}
.sec > .label{font-size:12px; letter-spacing:.06em; color:var(--muted); margin-bottom:5px}
.sec .body{font-size:15.5px; line-height:1.8}
.sec .body p{margin:0 0 9px}
.sec .body ul,.sec .body ol{margin:0 0 9px; padding-left:22px}
.sec .body code{background:var(--bg); padding:1px 5px; border-radius:5px}
.answer-echo{
  white-space:pre-wrap; word-break:break-word; background:var(--bg); border:1px solid var(--line);
  border-radius:11px; padding:12px; font-size:14.5px; color:var(--muted); margin-bottom:14px
}

/* 讲义 */
.notes{font-size:15.5px; line-height:1.85}
.notes h1{font-size:20px} .notes h2{font-size:17px; margin-top:20px} .notes h3{font-size:15.5px; margin-top:16px}
.notes table{border-collapse:collapse; width:100%; font-size:14px; display:block; overflow-x:auto}
.notes th,.notes td{border:1px solid var(--line); padding:7px 9px; text-align:left}
.notes pre{background:var(--bg); padding:12px; border-radius:11px; overflow-x:auto; font-size:13.5px}
.notes code{background:var(--bg); padding:1px 5px; border-radius:5px; font-size:14px}
.notes blockquote{margin:12px 0; padding:8px 14px; border-left:3px solid var(--accent); color:var(--muted)}

/* 载入 / 提示 */
.loading{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14.5px; padding:14px 0}
.spin{width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--fg); color:var(--bg); padding:11px 18px; border-radius:12px;
  font-size:14px; z-index:60; max-width:90vw; text-align:center;
}
.center{text-align:center}
.login{padding-top:12vh}
input[type=password]{
  width:100%; padding:14px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); color:var(--fg); font-size:16px; margin-bottom:12px
}
.badge{display:inline-block; font-size:11.5px; padding:2px 8px; border-radius:999px;
  background:var(--line); color:var(--muted); margin-left:6px}