:root {
  --paper:#F5F6F4; --surface:#FFFFFF; --ink:#1E2A33; --dim:#66737C; --line:#D5DBD7;
  --accent:#F2C14E; --accent-dark:#D9A62F; --danger:#A8432B; --ok:#3F7D5C; --warn:#B07A12;
  --sans:"IBM Plex Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 var(--sans); }
a { color:var(--ink); text-underline-offset:3px; }
h1 { font-size:1.9rem; line-height:1.25; font-weight:600; margin:0 0 1.2rem; }
h2 { font-size:1.25rem; font-weight:600; margin:2.5rem 0 .9rem; }
h3 { font-size:1rem; font-weight:600; margin:0; }
h4 { font-size:.8rem; font-weight:500; color:var(--dim); margin:0 0 .3rem; }
.dim { color:var(--dim); } .mono { font-family:var(--mono); font-size:.88em; }
.narrow { max-width:68ch; }
.eyebrow { color:var(--dim); font-size:.9rem; margin:0 0 .3rem; }
.pre { white-space:pre-wrap; margin:0; }

.top { display:flex; align-items:center; justify-content:space-between; padding:.85rem 2rem;
       background:var(--surface); border-bottom:1px solid var(--line); }
.brand { font-weight:600; text-decoration:none; padding-left:14px; border-left:5px solid var(--accent); }
.top nav { display:flex; gap:1.6rem; align-items:center; }
.top nav a { text-decoration:none; } .top nav a:hover { text-decoration:underline; }
.top nav form { margin:0; }
.badge { background:var(--accent); font:600 .78rem var(--mono); padding:.05rem .4rem; margin-left:.35rem; border-radius:2px; }

main { max-width:1240px; margin:0 auto; padding:2.5rem 2rem 6rem; }
main.narrowmain { max-width:760px; }
.flash { max-width:1240px; margin:1rem auto 0; padding:0 2rem; }
.flash p { margin:0; padding:.7rem 1rem; background:#FDF3D6; border-left:4px solid var(--accent); }

label { display:block; font-size:.88rem; color:var(--dim); margin-bottom:1rem; }
input, select, textarea { display:block; width:100%; margin-top:.3rem; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:.5rem .65rem; }
textarea { resize:vertical; line-height:1.55; }
input[type=checkbox] { width:auto; margin:0; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline:2px solid var(--accent-dark); outline-offset:1px; }
fieldset { border:0; padding:0; margin:0; }
.row { display:flex; gap:1rem; flex-wrap:wrap; } .row > label { flex:1; min-width:180px; }
button, .btn { display:inline-block; font:inherit; font-size:.95rem; cursor:pointer; padding:.5rem 1.1rem; border-radius:3px;
  border:1px solid var(--ink); background:var(--surface); color:var(--ink); text-decoration:none; }
button:hover, .btn:hover { background:#EEF0EC; }
.primary { background:var(--accent); border-color:var(--accent-dark); font-weight:600; }
.primary:hover { background:var(--accent-dark); }
button.link { border:0; background:none; padding:.25rem .3rem; text-decoration:underline; text-underline-offset:3px; }
.danger { color:var(--danger); }
.actions { display:flex; gap:.75rem; align-items:center; margin-top:1rem; }

main.login { min-height:100vh; display:grid; place-items:center; }
.login-box { width:min(380px, 100%); }
.login-box .bar { width:56px; height:6px; background:var(--accent); margin-bottom:1.4rem; }
.login-box button { width:100%; }

/* 今日 */
.today { display:grid; grid-template-columns:1fr 340px; gap:3rem; align-items:start; }
.step { display:flex; gap:1rem; padding:1.3rem 0; border-top:1px solid var(--line); }
.step:last-child { border-bottom:1px solid var(--line); }
.step .n { flex:none; display:grid; place-items:center; width:2rem; height:2rem; background:var(--ink); color:#fff;
           font:600 .9rem var(--mono); border-radius:2px; }
.step.done .n { background:var(--ok); }
.step > div { flex:1; } .step p { margin:.2rem 0 .8rem; }
.newcase { display:grid; grid-template-columns:1fr 200px auto; gap:1rem; align-items:end; margin-top:.6rem; }
.newcase label { margin:0; }
.stats .figure { display:inline-block; margin-right:2.2rem; }
.figure b { display:block; font:600 2.4rem/1 var(--mono); }
.figure span { color:var(--dim); font-size:.85rem; }
.stats h3 { margin:1.8rem 0 .6rem; font-size:.85rem; color:var(--dim); font-weight:500; }
.bars { list-style:none; margin:0; padding:0; font-size:.9rem; }
.bars li { display:grid; grid-template-columns:7em 1fr 3em; gap:.6rem; align-items:center; padding:.2rem 0; }
.bars i { height:6px; background:var(--line); } .bars u { display:block; height:100%; background:var(--ink); }
.bars em { font:normal .82rem var(--mono); text-align:right; color:var(--dim); }
.list { width:100%; border-collapse:collapse; }
.list td { padding:.6rem .5rem; border-bottom:1px solid var(--line); }
.score { font:600 1rem var(--mono); }

/* 案例 */
.brief { background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1.3rem 1.5rem; }
.brief h2 { margin-top:0; }
.brief dl { display:grid; grid-template-columns:7em 1fr; gap:.5rem 1rem; margin:0; }
.brief dt { color:var(--dim); font-size:.9rem; } .brief dd { margin:0; }
.brief details { margin-top:1rem; } summary { cursor:pointer; color:var(--dim); }
.answer .st { display:block; color:var(--ink); font-weight:600; font-size:1rem; }
.answer .hint { display:block; margin:.1rem 0 .2rem; }
.answer legend.st { margin-bottom:.6rem; padding:0; }
.wait { text-align:center; padding:5rem 0; }
.spinner { width:38px; height:38px; margin:0 auto 1.5rem; border:4px solid var(--line); border-top-color:var(--accent-dark);
           border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .spinner { animation:none; } }
.err { background:#FBEDE8; border-left:4px solid var(--danger); padding:.8rem 1rem; white-space:pre-wrap; font:inherit; font-size:.92rem; }

.overall { display:flex; gap:1.5rem; align-items:flex-start; margin-top:2rem; padding:1.3rem 1.5rem;
           background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); }
.overall p { margin:0; }
.scorebox { flex:none; text-align:center; min-width:4.5rem; }
.scorebox b { display:block; font:600 2.6rem/1 var(--mono); } .scorebox span { color:var(--dim); font-size:.82rem; }
.violated { margin-top:1.5rem; } .violated h2 { margin-top:0; font-size:1.05rem; }
.cmp { border-top:1px solid var(--line); padding:1.1rem 0; }
.cmp header { display:flex; gap:.7rem; align-items:center; margin-bottom:.7rem; }
.v { font:600 .8rem var(--mono); padding:.12rem .5rem; border-radius:2px; background:var(--line); }
.v.hit { background:#DCEBE2; color:var(--ok); } .v.partial { background:#FBEBC4; color:var(--warn); }
.v.miss { background:#F6DDD5; color:var(--danger); }
.cols { display:grid; grid-template-columns:1fr 1.2fr 1.2fr; gap:1.5rem; font-size:.95rem; }
.sources { font-size:.92rem; } .sources a { word-break:break-all; }
.pick { display:flex; gap:.8rem; align-items:flex-start; margin-bottom:.9rem; }
.pick > input { margin-top:.8rem; } .pick > div { flex:1; } .pick textarea { margin-top:.4rem; }
.pick input[name^=cue] { font-weight:600; margin-top:0; }

/* 规则与复习 */
.rule { display:grid; grid-template-columns:5.5em 1fr auto; gap:1rem; padding:.9rem 0; border-top:1px solid var(--line); align-items:start; }
.rmeta { font-size:.78rem; line-height:1.5; } .rbody input { font-weight:600; margin-top:0; } .rbody textarea { margin-top:.4rem; }
.ract { display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; }
.card-review { background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:2rem; }
.card-review h1 { font-size:1.5rem; }
.answer-text { font-size:1.1rem; padding:1rem 0 0; margin:0; white-space:pre-wrap; }

@media (max-width:900px) {
  .today, .cols, .newcase { grid-template-columns:1fr; }
  .brief dl { grid-template-columns:1fr; gap:.1rem; } .brief dd { margin-bottom:.6rem; }
  .top { padding:.8rem 1rem; } .top nav { gap:1rem; } main { padding:1.5rem 1rem 4rem; }
}