/* ============================================================
   共享设计令牌与基础组件：课堂测评与练习
   与 static/index.html 同一套视觉语言，供答题页/教师端/练习页复用。
   注意：这里只用本地字体栈，不依赖外网字体（课堂局域网可能无外网）。
   ============================================================ */
:root{
  --paper:#F4F6F8; --paper-2:#EAF0F6; --card:#FFFFFF; --card-2:#F8FAFC;
  --ink:#202B3D; --ink-2:#516175; --ink-3:#516175;
  --line:#DCE2EA; --line-2:#B8C3D1;
  --teal:#285AA8; --teal-d:#1F4683; --teal-soft:#EDF3FC; --teal-ink:#244F91;
  --c-ok:#2F9E6E; --c-bad:#C0503F; --c-warn:#D08A12; --c-info:#2F7FB8;
  --bg-ok:#E7F4EC; --bg-bad:#F8E9E5; --bg-warn:#FAF1DC; --bg-info:#E8F1F8;
  --bg-none:#EEF1F4;
  --serif:var(--sans);
  --sans:"Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  --mono:"Cascadia Code","Consolas","Courier New",monospace;
  --shadow:none;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.num{font-variant-numeric:tabular-nums}
.mono,pre.code{font-family:var(--mono)}
button{font-family:var(--sans);cursor:pointer;font-size:inherit}
a{color:var(--teal)}
::selection{background:var(--teal-soft)}

/* ── 页面骨架 ───────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--card);color:var(--ink);
  display:flex;align-items:center;gap:18px;padding:14px 26px;
  border-bottom:1px solid var(--line);
}
.topbar h1{font-family:var(--sans);font-size:18px;font-weight:600}
.topbar .sub{font-size:12px;color:var(--ink-2);margin-top:2px}
.topbar .spacer{flex:1}
.topbar nav{display:flex;gap:6px}
.topbar nav a{
  color:var(--ink-2);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:4px;
  border:1px solid transparent;transition:.15s;
}
.topbar nav a:hover{background:var(--card-2);color:var(--teal)}
.topbar nav a.active{background:var(--teal-soft);color:var(--teal);font-weight:600}

.page{max-width:1180px;margin:0 auto;padding:28px 26px 72px}
.page.narrow{max-width:860px}

.page-head{margin:6px 0 22px}
.page-head .exam-label{font-size:14px;color:var(--ink-2);margin:0 0 6px}
.page-head h2{font-family:var(--sans);font-size:24px;font-weight:600;line-height:1.4}
.page-head p{color:var(--ink-2);max-width:72ch;margin-top:8px;font-size:14px}

/* ── 卡片 ───────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}
.card + .card{margin-top:18px}
.card-h{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--card);
  border-radius:6px 6px 0 0;
}
.card-h h3{font-family:var(--serif);font-size:16px;font-weight:700}
.card-h .spacer{flex:1}
.card-b{padding:18px}

/* ── 按钮 ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink);
  padding:9px 16px;border-radius:4px;font-size:14px;font-weight:500;transition:background-color .15s,border-color .15s;
}
.btn:hover{border-color:var(--teal);color:var(--teal)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line-2);color:var(--ink)}
.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.btn-danger{background:#fff;border-color:#D9A79C;color:var(--c-bad)}
.btn-danger:hover{background:var(--bg-bad);border-color:var(--c-bad);color:var(--c-bad)}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:4px}
.btn-lg{padding:12px 24px;font-size:16px;border-radius:4px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ── 表单 ───────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px}
.flabel{font-size:12.5px;color:var(--ink-2);font-weight:500;letter-spacing:.2px}
.fhint{font-size:11.5px;color:var(--ink-3)}
input[type=text],input[type=number],select,textarea{
  font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--card);
  border:1px solid var(--line-2);border-radius:4px;padding:9px 12px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal-soft);border-color:var(--teal)}
input::placeholder{color:#A9B4BC}

/* ── 表格 ───────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
thead th{
  background:var(--card-2);text-align:left;padding:10px 12px;font-weight:600;
  border-bottom:1px solid var(--line-2);white-space:nowrap;color:var(--ink-2);font-size:12.5px;
}
tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--card-2)}
.t-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 标签与徽章 ─────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:12px;font-weight:500;background:var(--bg-none);color:var(--ink-2);white-space:nowrap;
}
.badge.ok{background:var(--bg-ok);color:#1F7A50}
.badge.bad{background:var(--bg-bad);color:var(--c-bad)}
.badge.warn{background:var(--bg-warn);color:#96650C}
.badge.info{background:var(--bg-info);color:#1F5D8A}
.badge.teal{background:var(--teal-soft);color:var(--teal-ink)}

/* ── 统计块 ─────────────────────────────────────────── */
.stat-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.stat{background:var(--card);border:0;border-left:2px solid var(--line);border-radius:0;padding:12px 16px}
.stat .k{font-size:12px;color:var(--ink-3);letter-spacing:.3px}
.stat .v{font-family:var(--sans);font-size:28px;font-weight:600;margin-top:5px;line-height:1.2}
.stat .u{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ── 提示条 ─────────────────────────────────────────── */
.alert{padding:11px 14px;border-radius:4px;font-size:13.5px;border:1px solid;line-height:1.55}
.alert.info{background:var(--bg-info);border-color:#BBD6E8;color:#1F5D8A}
.alert.warn{background:var(--bg-warn);border-color:#E8CE92;color:#8A5D0B}
.alert.bad{background:var(--bg-bad);border-color:#E3B6AB;color:#9A3A2A}
.alert.ok{background:var(--bg-ok);border-color:#A9D8C0;color:#1F7A50}

.muted{color:var(--ink-3)}
.small{font-size:12.5px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stack{display:flex;flex-direction:column;gap:12px}
.grow{flex:1}
.mt{margin-top:16px}
.mb{margin-bottom:16px}

/* ── 试题块 ─────────────────────────────────────────── */
.qblock{background:var(--card);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:28px 24px}
.qblock + .qblock{margin-top:0}
.qhead{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.qnum{
  font-family:var(--sans);font-weight:600;font-size:17px;color:var(--ink);background:transparent;
  width:28px;height:28px;display:inline-grid;place-items:center;flex:0 0 28px;
}
.qstem{font-size:15px;line-height:1.75;white-space:pre-wrap;flex:1;min-width:220px}
pre.code{
  background:#F0F3F7;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:13px 15px;margin:10px 0;
  font-size:13px;line-height:1.6;white-space:pre;overflow-x:auto;
}
.opts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.opt{
  display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  border:1px solid transparent;background:var(--card);border-radius:4px;
  padding:11px 13px;font-size:14.5px;line-height:1.8;transition:background-color .13s,border-color .13s;cursor:pointer;
}
.opt:hover{border-color:var(--line-2);background:var(--card-2)}
.opt .ol{font-weight:600;color:var(--ink-2);flex:0 0 28px;text-align:center;border:1px solid var(--line-2);border-radius:50%;line-height:26px}
.opt.sel{border-color:var(--teal);background:var(--teal-soft)}
.opt.sel .ol{background:var(--teal);border-color:var(--teal);color:white}
.opt.correct{border-color:var(--c-ok);background:var(--bg-ok)}
.opt.correct .ol{color:#1F7A50}
.opt.wrong{border-color:var(--c-bad);background:var(--bg-bad)}
.opt.wrong .ol{color:var(--c-bad)}
.opt.dimmed{opacity:.62}
.diag{
  margin-top:9px;font-size:13px;line-height:1.6;color:var(--ink-2);
  border-left:3px solid var(--line-2);padding:6px 0 6px 11px;
}
.diag.correct{border-left-color:var(--c-ok)}
.diag.wrong{border-left-color:var(--c-bad)}

@media (max-width:720px){
  .page{padding:18px 14px 56px}
  .page-head h2{font-size:21px}
  .topbar{flex-wrap:wrap;padding:12px 14px}
}

/* 清晰的课堂阅读、键盘焦点与移动布局。 */
:root { --topbar-height:76px; }
body { font-size:16px; }
.page-head p,.opt,.qstem { font-size:16px; }
.flabel,.fhint,.small { font-size:14px; }
.btn,input,select { min-height:44px; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #D08A12; outline-offset:3px; }
.sticky-bar { top:var(--topbar-height)!important; }
.qblock { scroll-margin-top:calc(var(--topbar-height) + 230px); }
.run-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.run-grid .card { margin:0; }
summary { cursor:pointer; padding:12px 0; font-weight:600; }
.danger-zone { border-top:1px solid #E3B6AB; margin-top:16px; }
.question-nav { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.question-nav a { min-width:32px; padding:3px 7px; border:1px solid var(--line-2); border-radius:6px; text-decoration:none; text-align:center; }
.question-nav a.done { background:var(--teal); color:#fff; }
.auth-pending > :not(.auth-gate) { display:none!important; }
.auth-gate { position:fixed; inset:0; z-index:100; overflow:auto; display:grid; place-items:center; background:var(--card); padding:28px 20px; font-family:var(--sans); }
.auth-card { width:min(100%,440px); padding:28px 8px; border-top:3px solid var(--teal); background:var(--card); color:var(--ink); }
.auth-card h1 { font-size:24px; font-weight:600; margin:0 0 10px; }
.auth-card p { font-size:14px; color:var(--ink-2); line-height:1.7; margin:12px 0; overflow-wrap:anywhere; }
.auth-card label { display:block; margin-top:20px; font-size:16px; }
.auth-card input,.auth-card select { display:block; width:100%; margin-top:8px; padding:11px 12px; border:1px solid var(--line-2); border-radius:4px; font:inherit; }
.auth-card button { width:100%; min-height:44px; padding:12px; border:0; border-radius:4px; background:var(--teal); color:white; font:inherit; cursor:pointer; }
.auth-card .btn-row { gap:0; border-bottom:1px solid var(--line); margin-top:24px; }
.auth-card button[aria-pressed] { flex:1; width:auto; border-radius:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink-2); }
.auth-card button[aria-pressed="true"] { color:var(--teal); border-bottom-color:var(--teal); font-weight:600; }
.auth-card button:disabled { opacity:.5; cursor:not-allowed; }
.auth-card .auth-error { color:#9A3A2A; }
@media(max-width:720px) { .run-grid { grid-template-columns:1fr; } .topbar { gap:8px; } .topbar nav { width:100%; flex-wrap:wrap; } .topbar nav a { flex:1; text-align:center; padding:8px; } .qstem { min-width:0; } .card-b,.qblock { padding:16px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }

[hidden] { display:none!important; }

.question-nav a { min-width:44px; min-height:44px; display:grid; place-items:center; }

/* 图表的区间标签在窄屏内滚动，不撑开整个统计页。 */
.dist { overflow-x:auto; padding-bottom:8px; }
.dist .bar { min-width:28px; }
.card,.stat,.table-wrap { min-width:0; max-width:100%; }
@media(max-width:720px) {
  .topbar nav a { flex:0 0 auto; white-space:nowrap; }
  .teacher-view .topbar nav a[href="/student"],
  .teacher-view .topbar nav a[href="/practice"],
  .teacher-view .topbar nav a[href="/"] { display:none; }
}