/* ============================================================
   考公脑库 · 纸感专注主题（Paper Focus）
   方向：像一本精致的纸质真题集——题面是绝对主角，
        墨字纸底、装饰最低、动效克制。
   两套皮肤：默认纸白（日间）/ data-theme="dark" 夜读
   ============================================================ */

/* ===== 设计 token ===== */
:root{
  /* 纸与墨：微暖，绝不用纯白/纯黑 */
  --paper:        oklch(97.6% 0.010 85);   /* 纸底 */
  --paper-2:      oklch(95.2% 0.013 82);   /* 次级纸面（表头/输入框） */
  --surface:      oklch(99.2% 0.006 88);   /* 卡片，比纸底更亮一档 */
  --surface-2:    oklch(96.6% 0.011 84);   /* 卡片内嵌块 */
  --ink:          oklch(23% 0.018 65);     /* 主文字：暖墨黑 */
  --ink-2:        oklch(42% 0.016 65);     /* 次级文字 */
  --ink-3:        oklch(56% 0.014 65);     /* 弱文字/元信息 */
  --rule:         oklch(89% 0.012 78);     /* 分隔线 */
  --rule-2:       oklch(83% 0.014 78);     /* 强调分隔线 */

  /* 墨蓝主色（钢笔蓝黑墨水），只用在真正需要强调的地方 */
  --brand:        oklch(46% 0.088 253);
  --on-brand:     oklch(98% 0 0);
  --on-ok:        oklch(98% 0 0);
  --on-warn:      oklch(23% 0.030 72);
  --on-bad:       oklch(98% 0 0);
  --brand-2:      oklch(38% 0.080 253);
  --accent:       oklch(58% 0.115 42);     /* 赭石：小面积点缀 */
  --ok:           oklch(52% 0.098 152);
  --warn:         oklch(62% 0.105 72);
  --bad:          oklch(51% 0.145 27);
  --purple:       oklch(50% 0.095 300);

  /* 排版：模块化 1.25，rem 单位尊重浏览器字号设置 */
  --font-sans: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --font-serif:"Songti SC","Noto Serif SC","Source Han Serif SC",SimSun,Georgia,"Times New Roman",serif;
  --text-xs:   .75rem;      /* 12 元信息 */
  --text-sm:   .875rem;     /* 14 次级 UI */
  --text-base: 1rem;        /* 16 正文 */
  --text-lg:   1.25rem;     /* 20 小标题 */
  --text-xl:   1.5rem;      /* 24 页标题 */
  --leading:   1.75;
  --measure:   68ch;        /* 长文最佳测量 */

  /* 空间：4pt 节奏 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  --radius:8px;
  --radius-sm:6px;
  --radius-pill:99px;
  /* 纸感：阴影只用于真正浮起的层，且极淡 */
  --shadow:0 1px 2px rgba(28,25,20,.05), 0 4px 12px -8px rgba(28,25,20,.10);
  --shadow-lift:0 2px 4px rgba(28,25,20,.06), 0 10px 24px -12px rgba(28,25,20,.16);
  --ease:cubic-bezier(.16,1,.3,1);       /* ease-out-quart：状态变化专用 */

  --app-bg:var(--paper);
  --sidebar-bg:oklch(96.2% 0.012 84);
  --thead-bg:var(--paper-2);
  --material-bg:oklch(96.8% 0.014 88);
  --material-fg:var(--ink-2);
  --ask-bg:oklch(96.5% 0.020 260);
  --heat-0:oklch(94% 0.010 85); --heat-1:oklch(88% 0.045 150); --heat-2:oklch(78% 0.075 152);
  --heat-3:oklch(66% 0.100 152); --heat-4:oklch(52% 0.098 152);
}

/* ===== 夜读（暗色）：不是把纸白反转，而是换一套墨纸关系 ===== */
html[data-theme="dark"]{
  --paper:     oklch(17.5% 0.012 70);
  --paper-2:   oklch(21% 0.014 70);
  --surface:   oklch(20% 0.013 70);
  --surface-2: oklch(24% 0.014 70);
  --ink:       oklch(92% 0.012 80);
  --ink-2:     oklch(76% 0.014 78);
  --ink-3:     oklch(64% 0.014 78);
  --rule:      oklch(31% 0.014 72);
  --rule-2:    oklch(38% 0.016 72);
  --brand:     oklch(72% 0.075 253);
  --on-brand:  oklch(18% 0.020 253);
  --on-ok:     oklch(19% 0.030 152);
  --on-warn:   oklch(22% 0.035 78);
  --on-bad:    oklch(18% 0.030 27);
  --brand-2:   oklch(62% 0.082 253);
  --accent:    oklch(74% 0.095 52);
  --ok:        oklch(74% 0.090 152);
  --warn:      oklch(80% 0.090 78);
  --bad:       oklch(70% 0.105 27);
  --purple:    oklch(76% 0.075 300);
  --leading:   1.8;          /* 浅字深底：行高再加一点 */
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --shadow-lift:0 2px 6px rgba(0,0,0,.40), 0 12px 28px -14px rgba(0,0,0,.55);
  --app-bg:var(--paper);
  --sidebar-bg:oklch(19% 0.013 70);
  --thead-bg:var(--paper-2);
  --material-bg:oklch(19.5% 0.016 70);
  --material-fg:var(--ink-2);
  --ask-bg:oklch(22% 0.022 265);
  --heat-0:oklch(24% 0.012 75); --heat-1:oklch(32% 0.040 152); --heat-2:oklch(42% 0.070 152);
  --heat-3:oklch(56% 0.090 152); --heat-4:oklch(72% 0.095 152);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font-sans);
  background:var(--app-bg);background-attachment:fixed;
  color:var(--ink);
  font-size:var(--text-base);
  line-height:var(--leading);
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  transition:background .25s var(--ease),color .25s var(--ease);
}

/* ===== 骨架 ===== */
#layout{display:flex;min-height:100vh}
#sidebar{width:236px;flex-shrink:0;background:var(--sidebar-bg);
  border-right:1px solid var(--rule);
  padding:var(--s5) var(--s4);
  position:sticky;top:0;height:100vh;overflow:auto}
.brand-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)}
.brand{font-family:var(--font-serif);font-size:1.0625rem;font-weight:700;letter-spacing:.06em;margin-bottom:2px;color:var(--ink)}
.brand small{display:block;font-family:var(--font-sans);font-size:11.5px;color:var(--ink-3);font-weight:400;letter-spacing:.02em;margin-top:5px}
.theme-btn{flex-shrink:0;cursor:pointer;font-size:15px;line-height:1;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:8px 10px;transition:.18s var(--ease);color:var(--ink)}
.theme-btn:hover{border-color:var(--brand);color:var(--brand)}
#nav{margin:var(--s6) 0;display:flex;flex-direction:column;gap:1px}
#nav a{color:var(--ink-2);text-decoration:none;padding:9px 12px;border-radius:var(--radius-sm);
  font-weight:500;font-size:var(--text-sm);transition:.18s var(--ease);
  border-left:2px solid transparent}
#nav a:hover{background:var(--surface);color:var(--ink)}
#nav a.active{background:var(--surface);color:var(--brand);font-weight:700;
  border-left-color:var(--brand)}
#side-stats{margin-top:var(--s5);font-size:12.5px;color:var(--ink-3)}
.stat-chip{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:8px 11px;margin-bottom:var(--s2);display:flex;justify-content:space-between;gap:var(--s2)}
.stat-chip b{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
#app{flex:1;padding:var(--s8) var(--s10);max-width:1040px;width:100%}
@media(min-width:1500px){#app{margin:0 auto}}

/* ===== 标题层级：衬线用于「卷面感」，正文保持无衬线 ===== */
h1{font-family:var(--font-serif);font-size:var(--text-xl);font-weight:700;
  letter-spacing:.02em;margin:0 0 var(--s2);line-height:1.4;color:var(--ink)}
h2{font-family:var(--font-serif);font-size:var(--text-lg);font-weight:700;
  letter-spacing:.02em;margin:var(--s8) 0 var(--s3);line-height:1.5;color:var(--ink)}
h2:first-child{margin-top:0}
.sub{color:var(--ink-2);margin:0 0 var(--s6);font-size:var(--text-sm);line-height:1.7}

.grid{display:grid;gap:var(--s4)}
.g4{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s5) var(--s5);box-shadow:var(--shadow)}
.kpi{text-align:left}
.kpi .n{font-family:var(--font-serif);font-size:2.125rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
.kpi .l{color:var(--ink-3);font-size:12.5px;margin-top:var(--s2);letter-spacing:.02em}
.kpi.brand .n{color:var(--brand)} .kpi.ok .n{color:var(--ok)}
.kpi.warn .n{color:var(--warn)} .kpi.purple .n{color:var(--purple)}
.kpi.bad .n{color:var(--bad)}

/* ===== 按钮：墨蓝实心，去掉通用渐变与发光 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);border:none;cursor:pointer;
  background:var(--brand);color:var(--on-brand);
  padding:11px 20px;border-radius:var(--radius-sm);font-weight:600;font-size:var(--text-sm);
  min-height:40px;transition:.18s var(--ease);text-decoration:none;letter-spacing:.02em}
.btn:hover{background:var(--brand-2)}
.btn.ghost{background:var(--surface);border:1px solid var(--rule);color:var(--ink)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--surface)}
/* 彩色底按钮的文字色单独给「墨」：暗色主题下 --ok/--warn 是亮色，配白字对比度只有 1.7:1 */
.btn.ok{background:var(--ok);color:var(--on-ok)} .btn.warn{background:var(--warn);color:var(--on-warn)}
.btn.danger{background:var(--bad);color:var(--on-bad)}
.btn.ok:hover,.btn.warn:hover,.btn.danger:hover{filter:brightness(.94)}
.btn.big{padding:14px 26px;font-size:var(--text-base);min-height:48px}
.btn.resume{background:var(--accent);color:oklch(20% 0.030 45)}
.btn.resume:hover{filter:brightness(.94)}
.btn.sm{padding:6px 12px;font-size:13px;min-height:32px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.row{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
select,input,textarea{background:var(--surface);color:var(--ink);border:1px solid var(--rule);
  border-radius:var(--radius-sm);padding:9px 12px;font-size:var(--text-sm);font-family:inherit;
  min-height:38px;transition:.18s var(--ease)}
select:focus,input:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
label.fld{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-2)}

.bar{height:8px;background:var(--paper-2);border-radius:var(--radius-pill);overflow:hidden;margin-top:var(--s2)}
.bar>i{display:block;height:100%;background:var(--ok)}

/* ===== 表格：细线分区，数字对齐 ===== */
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
th,td{padding:11px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top;line-height:1.6}
th{color:var(--ink-2);font-weight:700;font-size:13px;position:sticky;top:0;background:var(--thead-bg);
  border-bottom:2px solid var(--rule-2);letter-spacing:.02em;white-space:nowrap}
tr:hover td{background:var(--surface-2)}
.tag{display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:600;
  background:var(--paper-2);color:var(--ink-2);letter-spacing:.02em}
.tag.new{background:oklch(94% 0.016 253);color:oklch(40% 0.070 253)}
.tag.learning{background:oklch(94% 0.028 72);color:oklch(45% 0.090 62)}
.tag.review{background:oklch(94% 0.030 152);color:oklch(42% 0.080 152)}
.tag.vbadge{background:oklch(94% 0.030 152);color:var(--ok)}

/* ===== 练习页：题面是主角 ===== */
.progress{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  font-size:13px;color:var(--ink-3);margin-bottom:var(--s4)}
.pbar{height:5px;background:var(--paper-2);border-radius:var(--radius-pill);overflow:hidden}
.pbar>i{display:block;height:100%;background:var(--brand);transition:width .3s var(--ease)}
.qhead{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s3)}
.material{background:var(--material-bg);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:var(--s4);margin-bottom:var(--s4);max-height:230px;overflow:auto;
  color:var(--material-fg);font-size:14px;line-height:1.75}
.m-hint{color:var(--ink-3);font-size:12px;font-weight:400}
.material-wrap[open] summary{margin-bottom:var(--s2)}
.mat-missing{background:oklch(96% 0.030 72);border:1px solid oklch(84% 0.070 72);
  color:oklch(45% 0.090 62);border-radius:var(--radius-sm);padding:var(--s3) var(--s4);
  margin-bottom:var(--s4);font-size:13.5px}
.m-toggle{margin:-2px 0 var(--s3);font-size:12.5px}
.m-toggle a{color:var(--ink-3);cursor:pointer}
.m-toggle a:hover{color:var(--brand)}
.askmodel{color:var(--ink-2);font-size:13.5px;margin-bottom:var(--s3);background:var(--ask-bg);
  border-left:3px solid var(--brand);padding:10px 13px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  line-height:1.7}
.stem{font-size:1.0625rem;line-height:1.85;margin-bottom:var(--s5);
  max-width:var(--measure);letter-spacing:.01em;color:var(--ink)}
.stem p{margin:var(--s2) 0}
img{max-width:100%;height:auto;vertical-align:middle;border-radius:var(--radius-sm);
  background:oklch(99% 0 0);padding:2px;border:1px solid var(--rule)}
html[data-theme="dark"] img{background:oklch(28% 0.010 80)}

.opts{display:flex;flex-direction:column;gap:10px;max-width:var(--measure)}
.opt{display:flex;gap:var(--s3);align-items:flex-start;background:var(--surface);
  border:1px solid var(--rule);border-left:3px solid transparent;
  border-radius:var(--radius-sm);padding:12px 14px;min-height:46px;cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease);line-height:1.7}
.opt:hover{background:var(--surface-2);border-color:var(--rule-2)}
.opt .k{font-family:var(--font-serif);font-weight:700;color:var(--brand);min-width:20px;font-size:1rem}
.opt .body{flex:1}
.opt.correct{border-color:var(--ok);border-left-color:var(--ok);background:oklch(96% 0.028 152)}
.opt.wrong{border-color:var(--bad);border-left-color:var(--bad);background:oklch(96% 0.030 27)}
.opt.show-ans{border-left-color:var(--ok)}
.opt.sel{border-color:var(--brand);border-left-color:var(--brand);background:var(--surface-2)}

.reveal{margin-top:var(--s5);max-width:var(--measure)}
.reveal .sec{padding:var(--s2) 0 var(--s2) var(--s4);margin-bottom:var(--s4);
  border-left:2px solid var(--rule-2);background:transparent}
.reveal .sec h4{margin:0 0 var(--s2);font-family:var(--font-serif);font-size:14.5px;
  color:var(--ink);letter-spacing:.04em;font-weight:700}
.reveal .sec.fastest{border-left-color:var(--warn)} .reveal .sec.fastest h4{color:var(--warn)}
.reveal .sec.pitfalls{border-left-color:var(--bad)} .reveal .sec.pitfalls h4{color:var(--bad)}
.reveal .sec.mother{border-left-color:var(--purple)} .reveal .sec.mother h4{color:var(--purple)}
.reveal .sec.doubt{border-left-color:var(--accent)} .reveal .sec.doubt h4{color:var(--accent)}
.reveal .sec.verified{border-left-color:var(--ok)} .reveal .sec.verified h4{color:var(--ok)}
.reveal .sec.verified .vsrc{margin-top:var(--s2);font-size:12px;color:var(--ink-3)}
.reveal ol,.reveal ul{margin:var(--s1) 0;padding-left:22px}
.reveal li{margin:4px 0}

/* 评分档位：低饱和描边，靠颜色而非发光区分 */
.grade{display:flex;gap:10px;margin-top:var(--s6);flex-wrap:wrap;max-width:var(--measure)}
.grade button{flex:1;min-width:108px;padding:12px;border-radius:var(--radius-sm);
  border:1px solid var(--rule);background:var(--surface);color:var(--ink);
  font-weight:600;font-size:14px;cursor:pointer;min-height:48px;transition:.16s var(--ease)}
.grade button:hover{background:var(--surface-2)}
.grade .g-again{border-color:var(--bad);color:var(--bad)}
.grade .g-hard{border-color:var(--warn);color:oklch(45% 0.090 62)}
.grade .g-good{border-color:var(--brand);color:var(--brand)}
.grade .g-easy{border-color:var(--ok);color:var(--ok)}
.grade small{display:block;font-weight:400;color:var(--ink-3);font-size:11px;margin-top:3px}
/* 评分后：停在解析页，等用户自己决定何时前进 */
.grade.nextbar{align-items:center;gap:var(--s4)}
.grade.nextbar .nx-tip{color:var(--ink-3);font-size:var(--fs-sm)}
.grade.nextbar .nx-go{flex:0 0 auto;min-width:160px;min-height:48px;font-size:var(--fs-base)}
.grade.nextbar .nx-go small{display:inline;margin-left:6px;color:inherit;opacity:.6;font-size:11px}
.grade.nextbar .nx-go:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.answer-line{font-size:var(--text-base);font-weight:700;margin:var(--s4) 0;letter-spacing:.02em}
.answer-line.right{color:var(--ok)}.answer-line.wrong{color:var(--bad)}
.empty{text-align:center;padding:var(--s12) var(--s5);color:var(--ink-3)}
.empty .big{font-size:40px;line-height:1;margin-bottom:var(--s3)}
.pager{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s5);align-items:center}
.center{display:flex;flex-direction:column;align-items:center;gap:var(--s4);padding:var(--s10);text-align:center}
.filters{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5);align-items:flex-end}
.kd-card{cursor:pointer;transition:.18s var(--ease)}
.kd-card:hover{border-color:var(--brand)}
.linkback{color:var(--brand);cursor:pointer;font-size:13px}
.footer{margin-top:var(--s12);color:var(--ink-3);font-size:12px;text-align:center}

/* ===== 工具栏 ===== */
.qtools{display:flex;gap:var(--s2);flex-wrap:wrap;margin:6px 0 var(--s4)}
.qtool{cursor:pointer;background:var(--surface);border:1px solid var(--rule);color:var(--ink-2);
  border-radius:var(--radius-sm);padding:6px 12px;font-size:13px;min-height:32px;
  font-weight:500;transition:.16s var(--ease)}
.qtool:hover{border-color:var(--brand);color:var(--brand)}
.qtool.on{background:oklch(95% 0.035 72);border-color:var(--warn);color:oklch(45% 0.090 62)}
.note-box{margin:var(--s3) 0;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-sm);padding:var(--s3) var(--s4);max-width:var(--measure)}
.note-box h4{margin:0 0 var(--s2);font-family:var(--font-serif);font-size:13.5px;color:var(--ink)}
.note-box textarea{width:100%;min-height:64px;resize:vertical;font-size:14px}
.note-box .row{margin-top:var(--s2);justify-content:space-between}
.note-saved{font-size:12px;color:var(--ok)}

/* ===== 模拟考试 ===== */
.exam-timer{position:sticky;top:0;z-index:5;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-sm);padding:11px var(--s5);display:flex;justify-content:space-between;
  align-items:center;margin-bottom:var(--s4);box-shadow:var(--shadow)}
.exam-timer .t{font-family:var(--font-serif);font-size:1.625rem;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.2}
.exam-timer .t.low{color:var(--bad)}
.exam-nav{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s4) 0}
.exam-dot{width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--rule);
  background:var(--surface);cursor:pointer;font-weight:600;font-size:13px;color:var(--ink-3);
  transition:.16s var(--ease);font-variant-numeric:tabular-nums}
.exam-dot.answered{background:oklch(94% 0.020 253);border-color:var(--brand);color:var(--brand)}
.exam-dot.cur{outline:2px solid var(--accent);outline-offset:1px}
.exam-q{margin-bottom:var(--s2)}
.exam-result{text-align:center;padding:var(--s8) var(--s5)}
.exam-result .score{font-family:var(--font-serif);font-size:3.5rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}

/* ===== 统计 ===== */
.heat-wrap{overflow:auto;padding-bottom:6px}
.heat-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,13px);gap:3px;width:max-content}
.heat-cell{width:13px;height:13px;border-radius:2px;background:var(--heat-0)}
.heat-cell.l1{background:var(--heat-1)}.heat-cell.l2{background:var(--heat-2)}
.heat-cell.l3{background:var(--heat-3)}.heat-cell.l4{background:var(--heat-4)}
.heat-legend{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-3);margin-top:var(--s2)}
.ring-row{display:flex;gap:var(--s6);align-items:center;flex-wrap:wrap}
.ring{--v:0;width:132px;height:132px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--brand) calc(var(--v)*1%), var(--paper-2) 0);
  display:flex;align-items:center;justify-content:center;position:relative}
.ring::after{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--surface)}
.ring .in{position:relative;z-index:1;text-align:center}
.ring .in b{font-family:var(--font-serif);font-size:1.625rem;font-weight:700;display:block;
  font-variant-numeric:tabular-nums;line-height:1.2}
.ring .in span{font-size:12px;color:var(--ink-3)}
.acc-row{display:flex;align-items:center;gap:var(--s3);margin:var(--s2) 0}
.acc-row .name{min-width:120px;font-size:13.5px}
.acc-row .track{flex:1;height:12px;background:var(--paper-2);border-radius:var(--radius-pill);overflow:hidden}
.acc-row .track>i{display:block;height:100%;background:var(--brand)}
.acc-row .pct{min-width:84px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.chipset{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}

/* ===== 专注模式 ===== */
html[data-focus="1"] #sidebar{display:none}
html[data-focus="1"] #app{max-width:760px;margin:0 auto}
.focus-exit{display:none}
html[data-focus="1"] .focus-exit{display:block;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--rule);color:var(--ink-2);border-radius:var(--radius-pill);
  padding:8px 18px;font-size:13px;cursor:pointer;z-index:20;box-shadow:var(--shadow-lift)}
html[data-focus="1"] .focus-exit:hover{color:var(--ink);border-color:var(--brand)}

/* ===== 账号区 ===== */
.top-actions{display:flex;gap:var(--s2);align-items:center}
.user-chip{cursor:pointer;background:var(--surface);border:1px solid var(--rule);color:var(--ink);
  border-radius:var(--radius-pill);padding:6px 12px;font-size:13px;font-weight:600;max-width:140px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.16s var(--ease)}
.user-chip:hover{border-color:var(--brand);color:var(--brand)}
.modal-mask{position:fixed;inset:0;background:oklch(20% 0.02 65 / .38);display:flex;align-items:center;
  justify-content:center;z-index:100;padding:var(--s5)}
.modal{max-width:440px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lift)}
.modal h2{font-size:1.1875rem}
.modal input{width:100%}
.guest-sep{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:12px;margin:var(--s4) 0 var(--s3)}
.guest-sep::before,.guest-sep::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ===== 倒计时环 ===== */
.pp-main{flex:1;min-width:0}
.ctime{--v:100; --col:var(--brand);
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--col) calc(var(--v)*1%), var(--paper-2) 0);
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
.ctime::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.ctime span{position:relative;z-index:1}
.ctime.low{--col:var(--bad);animation:pulse 1.1s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ===== 限时开关 ===== */
.switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--radius-pill);transition:.2s var(--ease)}
.switch .slider::before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;
  background:var(--ink-3);border-radius:50%;transition:.2s var(--ease)}
.switch input:checked + .slider{background:var(--brand);border-color:var(--brand)}
.switch input:checked + .slider::before{transform:translateX(20px);background:oklch(99% 0 0)}

/* ===== 响应式：平板 ===== */
@media(max-width:820px){
  #layout{flex-direction:column}
  #sidebar{width:auto;height:auto;position:relative;display:flex;flex-wrap:wrap;gap:10px;
    align-items:center;border-right:none;border-bottom:1px solid var(--rule)}
  .brand-row{width:100%}
  #nav{flex-direction:row;margin:0;flex-wrap:wrap}
  #nav a{border-left:none;padding:8px 12px}
  #nav a.active{border-left:none;box-shadow:inset 0 -2px 0 var(--brand)}
  #side-stats{display:none}
  #app{padding:var(--s5) var(--s4)}
  h1{font-size:1.375rem}
}

/* ===== 响应式：手机 ===== */
@media(max-width:560px){
  #app{padding:var(--s4) var(--s3)}
  #nav{gap:6px}
  #nav a{font-size:13px;padding:7px 10px}
  .card{padding:var(--s4)}
  .kpi .n{font-size:1.75rem}
  .stem{font-size:1rem;line-height:1.8}
  .opts{gap:var(--s2)}
  .opt{min-height:48px;padding:12px}
  .grade{gap:var(--s2)}
  .grade button{min-width:calc(50% - 4px);min-height:52px}
  .btn.big{width:100%;justify-content:center}
  .reveal .sec{padding-left:var(--s3)}
  table{font-size:13px}
  th,td{padding:9px 8px}
  .exam-dot{width:31px;height:31px}
  .filters{gap:var(--s2)}
  .ring-row{gap:var(--s4)}
}

/* ===== 打印 / 减少动效偏好 ===== */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}