/* 核心精炼 1000 题 —— 答题系统
   纸面米色 + 墨色 + 朱批红（阅卷人的笔）。无卡片、无圆角、无阴影。
   宋体题面，无衬线界面字。 */

:root{
  --paper:#efe7d8;
  --paper-2:#e7dcc8;
  --ink:#2b2620;
  --ink-2:#6b6154;
  --ink-3:#918678;
  --rule:#cfc2a9;
  --rule-soft:#ded3bd;
  --zhu:#8a2b1d;
  --zhu-soft:rgba(138,43,29,.09);
  --serif:"Noto Serif CJK SC",serif;
  --sans:"Noto Sans CJK SC",sans-serif;
  --fs:1rem;            /* 17px 基准 */
  --ease:cubic-bezier(.22,.7,.18,1);
}
:root[data-theme="dark"]{
  --paper:#17160f;
  --paper-2:#1e1c14;
  --ink:#e8dfcd;
  --ink-2:#a79c87;
  --ink-3:#7b7263;
  --rule:#3a352a;
  --rule-soft:#2c281f;
  --zhu:#c04a3c;
  --zhu-soft:rgba(192,74,60,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background .28s var(--ease),color .28s var(--ease);
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}

.app{height:100dvh;display:grid;grid-template-rows:auto 1fr;overflow:hidden}

/* ---------------- 顶栏 ---------------- */
.top{
  display:flex;align-items:center;gap:.9rem;
  padding:.85rem clamp(1rem,4vw,3.2rem) .7rem;
  position:relative;
}
.top .rule{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);
  transform-origin:left center;transform:scaleX(0);
  animation:draw .55s var(--ease) .05s forwards;
}
.top .rule::after{
  content:"";position:absolute;left:0;top:0;height:1px;width:calc(var(--progress,0) * 100%);
  background:var(--zhu);transition:width .55s var(--ease);
}
@keyframes draw{to{transform:scaleX(1)}}

.brand{font-family:var(--serif);font-size:1rem;letter-spacing:.06em;white-space:nowrap}
.where{display:flex;align-items:baseline;gap:.7rem;min-width:0;flex:1;margin-left:.4rem}
.where span{font-size:.78rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.where span:first-child{flex:none}
.where span:last-child{flex:1;min-width:0;color:var(--ink-3)}
.meter{margin-left:auto;font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.meter .of{opacity:.55;margin:0 .12em}
.clock{font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.02em}

.ghost{color:var(--ink-2);border-radius:0;padding:.35rem;transition:background .16s,color .16s}
.ghost:hover{background:rgba(43,38,32,.06);color:var(--ink)}
:root[data-theme="dark"] .ghost:hover{background:rgba(232,223,205,.07)}
.ghost.icon{display:grid;place-items:center;margin-left:-.2rem}
.ico{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round}
#btnTheme .sun,#btnTheme .moon{display:none}
:root[data-theme="light"] #btnTheme .moon{display:block}
:root[data-theme="dark"] #btnTheme .sun{display:block}

/* ---------------- 主体：左题面 右批注 ---------------- */
.main{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  padding:0 clamp(1rem,4vw,3.2rem);
  min-height:0;
}
.paper{padding:2rem 3rem 1.4rem 0;display:flex;flex-direction:column;min-width:0;min-height:0}
.qscroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding-right:.4rem;
  scrollbar-color:var(--rule) transparent}
.qscroll::-webkit-scrollbar{width:6px}
.qscroll::-webkit-scrollbar-thumb{background:var(--rule)}
.qscroll::-webkit-scrollbar-track{background:transparent}

.qhead{display:flex;align-items:baseline;gap:.85rem}
.qno{font-family:var(--serif);font-size:.95rem;letter-spacing:.08em;color:var(--ink-2)}
.qtype{font-size:.76rem;letter-spacing:.16em;color:var(--zhu)}
.qstate{margin-left:auto;font-size:.76rem;color:var(--ink-3)}
.qstate.right{color:var(--zhu)}
.qstate.wrong{color:var(--ink-3)}

.stem{
  font-family:var(--serif);
  font-size:clamp(1.32rem,1.1vw + 1rem,1.7rem);
  line-height:1.95;margin-top:1.15rem;letter-spacing:.01em;
  text-wrap:pretty;
}

.opts{margin-top:1.5rem}
.opt{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:.82rem .2rem .82rem 0;
  border-bottom:1px solid var(--rule-soft);
  cursor:pointer;position:relative;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.opt:first-child{border-top:1px solid var(--rule-soft)}
.opt .k{
  font-family:var(--serif);font-size:.92rem;line-height:1.9;
  color:var(--ink-2);width:1.5rem;flex:none;position:relative;
}
.opt .k::after{
  content:"";position:absolute;left:0;top:1.55rem;height:1px;width:0;
  background:currentColor;transition:width .22s var(--ease);
}
.opt .t{flex:1;font-size:1.02rem;line-height:1.75;transition:color .18s}
.opt:hover{background:rgba(43,38,32,.035)}
:root[data-theme="dark"] .opt:hover{background:rgba(232,223,205,.04)}
.opt:hover .k::after{width:1.1rem}
.opt.sel .k{color:var(--zhu)}
.opt.sel .k::after{width:1.1rem}
.opt.sel .t{color:var(--ink)}
.opt.sel::before{
  content:"";position:absolute;left:-.9rem;top:.5rem;bottom:.5rem;width:2px;
  background:var(--zhu);transform-origin:top;animation:barin .24s var(--ease) both;
}
@keyframes barin{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* 判定后：正确项以朱红标记，错误选择淡出 */
.opt.correct .k{color:var(--zhu)}
.opt.correct .t{color:var(--zhu)}
.opt.correct .k::after{width:1.1rem}
.opt.wrong{padding-left:0}
.opt.wrong .t{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.opt.wrong{animation:shake .34s var(--ease)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-4px)}
  38%{transform:translateX(3px)}
  58%{transform:translateX(-2px)}
  78%{transform:translateX(1px)}
}

/* 勾：手绘感描边动画 */
.opt .tick{
  width:1.1rem;height:1.1rem;flex:none;margin-top:.28rem;opacity:0;
  stroke:var(--zhu);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.opt.correct .tick{opacity:1}
.opt.correct .tick path{stroke-dasharray:26;stroke-dashoffset:26;animation:ink .34s var(--ease) .06s forwards}
@keyframes ink{to{stroke-dashoffset:0}}

/* 材料分析题的作答区 */
.writing{
  margin-top:1.6rem;border-top:1px solid var(--rule-soft);
  font-family:var(--serif);font-size:1rem;line-height:2.4;color:var(--ink-3);
  padding-top:.9rem;min-height:9rem;
}

/* ---------------- 操作条 ---------------- */
.actions{display:flex;align-items:center;gap:.7rem;padding-top:1.4rem;flex:none}
.btn{
  font-size:.82rem;letter-spacing:.06em;padding:.62rem 1.15rem;
  border:1px solid var(--rule);color:var(--ink-2);
  transition:border-color .16s,color .16s,background .16s;
}
.btn:hover{border-color:var(--ink-2);color:var(--ink)}
.btn.zhu{border-color:rgba(138,43,29,.42);color:var(--zhu)}
.btn.zhu:hover{background:var(--zhu-soft)}
.btn[disabled]{opacity:.35;pointer-events:none}
.marks{margin-left:auto;display:flex;gap:.15rem}
.mk{
  font-size:.78rem;color:var(--ink-3);padding:.4rem .55rem;
  border-bottom:1px solid transparent;transition:color .16s,border-color .16s;
}
.mk:hover{color:var(--ink-2)}
.mk.on{color:var(--zhu);border-bottom-color:var(--zhu)}

/* ---------------- 右侧批注 ---------------- */
.note{
  border-left:1px solid var(--rule);
  padding:2rem 0 1.4rem 2.2rem;
  min-width:0;position:relative;
  max-height:calc(100dvh - 4.2rem);overflow:auto;scrollbar-width:thin;
}
.noteinner{opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.note.open .noteinner{opacity:1;transform:none}
.note h2{font-family:var(--serif);font-size:.8rem;font-weight:600;letter-spacing:.26em;color:var(--ink-2)}

.stamp{
  margin-top:1.1rem;
  font-family:var(--serif);font-size:1.5rem;letter-spacing:.04em;color:var(--zhu);
  display:inline-block;padding:.05rem .45rem .1rem;
  border:1px solid rgba(138,43,29,.42);
  transform:rotate(-3deg);
}
.stamp[hidden]{display:none}
.note.open .stamp{animation:stamp .42s var(--ease) .12s both}
@keyframes stamp{
  0%{opacity:0;transform:rotate(-9deg) scale(1.35)}
  60%{opacity:1}
  100%{opacity:1;transform:rotate(-3deg) scale(1)}
}

.analysis{
  font-family:var(--serif);font-size:.95rem;line-height:2;color:var(--ink-2);
  margin-top:1.15rem;letter-spacing:.01em;
}
.analysis p{margin-bottom:.7em;text-align:justify}
.analysis p b{font-weight:600;color:var(--ink)}
.note.open .analysis p{animation:rise .4s var(--ease) both}
.note.open .analysis p:nth-child(1){animation-delay:.14s}
.note.open .analysis p:nth-child(2){animation-delay:.2s}
.note.open .analysis p:nth-child(3){animation-delay:.26s}
.note.open .analysis p:nth-child(4){animation-delay:.32s}
.note.open .analysis p:nth-child(5){animation-delay:.38s}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.verdict{margin-top:1.3rem;padding-top:.85rem;border-top:1px solid var(--rule-soft);
  font-size:.78rem;letter-spacing:.06em;color:var(--ink-3)}
.verdict.ok{color:var(--zhu)}

/* ---------------- 抽屉 ---------------- */
.scrim{position:fixed;inset:0;background:rgba(24,21,15,.24);opacity:0;transition:opacity .22s;z-index:20}
.scrim.on{opacity:1}
.drawer{
  position:fixed;top:0;bottom:0;z-index:30;background:var(--paper);
  display:flex;flex-direction:column;
  transition:transform .28s var(--ease);
}
.drawer.nav{left:0;width:min(23rem,86vw);border-right:1px solid var(--rule);transform:translateX(-101%)}
.drawer.card{right:0;width:min(24rem,88vw);border-left:1px solid var(--rule);transform:translateX(101%)}
.drawer.on{transform:none}
.drawerhead{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.1rem .8rem;border-bottom:1px solid var(--rule)}
.drawertitle{font-family:var(--serif);font-size:.92rem;letter-spacing:.1em}
.ghost.small{font-size:.9rem;padding:.2rem .45rem}
.drawer .tree{overflow:auto;padding:.5rem 0 2rem}
.drawer .tree section{padding:.2rem 0}
.secbtn{
  width:100%;display:flex;align-items:baseline;gap:.6rem;
  padding:.65rem 1.1rem;text-align:left;transition:background .15s;
}
.secbtn:hover{background:rgba(43,38,32,.04)}
.secbtn .sn{font-family:var(--serif);font-size:.82rem;color:var(--ink-3);width:1rem;flex:none}
.secbtn .sname{font-size:.9rem;flex:1;color:var(--ink)}
.secbtn .sp{font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.secbtn.cur .sname{color:var(--zhu)}
/* 章节列表：点开时高度自上铺开，章节行随后错落入纸 */
.chapters{overflow:hidden;height:0;transition:height .3s var(--ease)}
.chapters.open{height:auto}
.chapters.open > .chapter{animation:chapin .34s var(--ease) both}
@keyframes chapin{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
.chapter{
  width:100%;display:flex;gap:.6rem;align-items:baseline;
  padding:.5rem 1.1rem .5rem 2.7rem;text-align:left;color:var(--ink-2);
  font-size:.84rem;transition:color .15s,background .15s;
}
.chapter:hover{background:rgba(43,38,32,.035);color:var(--ink)}
.chapter.cur{color:var(--zhu)}
.chapter .cname{flex:1;line-height:1.55}
.chapter .cp{font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

.cardgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:.45rem;padding:1rem 1.1rem;overflow:auto}
.cell{
  aspect-ratio:1;display:grid;place-items:center;
  font-size:.76rem;color:var(--ink-2);border:1px solid var(--rule-soft);
  font-variant-numeric:tabular-nums;transition:background .2s,color .2s,border-color .2s;
}
.cell:hover{border-color:var(--ink-3)}
.cell.answered{background:rgba(43,38,32,.1);color:var(--ink)}
.cell.right{background:var(--zhu-soft);border-color:rgba(138,43,29,.4);color:var(--zhu)}
.cell.wrong{background:rgba(43,38,32,.1);color:var(--ink-2)}
.cell.cur{outline:1px solid var(--zhu);outline-offset:1px}
.cardfoot{margin-top:auto;display:flex;gap:.6rem;padding:1rem 1.1rem;border-top:1px solid var(--rule)}

/* 切题换页：纸面内容轻微位移 */
.paper.switch .qhead,.paper.switch .stem,.paper.switch .opts,.paper.switch .actions{
  animation:turn .26s var(--ease) both;
}
.paper.switch .stem{animation-delay:.03s}
.paper.switch .opts{animation-delay:.06s}
@keyframes turn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

/* 首屏入场 */
.paper.enter .qhead{animation:rise .5s var(--ease) both}
.paper.enter .stem{animation:rise .55s var(--ease) .06s both}
.paper.enter .opts{animation:rise .55s var(--ease) .12s both}
.paper.enter .actions{animation:rise .5s var(--ease) .2s both}

/* ---------------- 响应 ---------------- */
@media (max-width:980px){
  html{font-size:16.5px}
  .app{height:auto;min-height:100dvh;overflow:visible}
  .main{grid-template-columns:1fr;padding-bottom:0}
  .paper{padding-right:0;min-height:calc(100dvh - 7.4rem)}
  .qscroll{overflow:visible;flex:none;max-height:none;padding-right:0}
  .actions{margin-top:auto}
  .note{border-left:0;border-top:1px solid var(--rule);padding:1.3rem 0 2rem;
    max-height:0;overflow:hidden;transition:max-height .34s var(--ease),opacity .3s,padding .3s}
  .note.open{max-height:34rem;padding-top:1.3rem}
  .where span{max-width:12ch}
}
@media (max-width:640px){
  .top{gap:.45rem;padding:.7rem 1rem .6rem}
  .brand,.where{display:none}
  .clock{display:none}
  .meter{margin-left:auto;font-size:.74rem}
  .main{padding:0 1rem}
  .paper{padding-top:1.25rem}
  .stem{font-size:1.24rem}
  .actions{flex-wrap:wrap;gap:.5rem;padding-top:1.2rem}
  .btn{padding:.5rem .8rem;font-size:.78rem}
  .marks{width:100%;margin-left:0;justify-content:flex-end;gap:0}
  .mk{padding:.35rem .5rem}
  .cardgrid{grid-template-columns:repeat(5,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}