:root{
  --paper:#fbf7ef; --card:#fffefb; --ink:#22201e; --muted:#8a8175;
  --red:#b3261e; --deep:#8b1a1a; --gold:#b08d57; --green:#2f6f4f;
  --line:#e6ddcc; --soft:#f3ead9;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%;
  padding:0 0 env(safe-area-inset-bottom);
}
.hide{display:none !important}
.muted{color:var(--muted)}
.tiny{font-size:12px}

/* ---------- 顶部 ---------- */
.top{
  position:sticky;top:0;z-index:20;background:linear-gradient(160deg,#8b1a1a,#a8362b 60%,#b8523c);
  color:#fff;padding:calc(10px + env(safe-area-inset-top)) 16px 12px;
  box-shadow:0 2px 12px rgba(90,40,20,.18);
}
.top .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.who{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:.5px}
.who .dot{width:7px;height:7px;border-radius:50%;background:#ffe08a;box-shadow:0 0 0 3px rgba(255,224,138,.25)}
.day{font-size:12px;opacity:.85}
.bar{height:6px;background:rgba(255,255,255,.22);border-radius:6px;overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe08a,#ffc857);border-radius:6px;transition:width .35s ease}
.meta{display:flex;justify-content:space-between;font-size:12px;opacity:.9;font-variant-numeric:tabular-nums}

/* ---------- 面板 ---------- */
main{padding:14px 14px 40px;max-width:640px;margin:0 auto}
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 18px 18px;box-shadow:0 2px 10px rgba(80,50,20,.06);
  animation:in .22s ease;
}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.tagline{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.chip{
  font-size:12px;color:#fff;background:var(--red);border-radius:20px;
  padding:3px 11px;letter-spacing:.5px;white-space:nowrap;
}
.from{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 题面 */
.stem{
  font-size:26px;line-height:1.7;font-weight:600;letter-spacing:1.5px;
  padding:14px 4px 18px;border-bottom:1px dashed var(--line);margin-bottom:18px;
  word-break:break-word;
}
.stem em{font-style:normal;color:var(--muted);letter-spacing:4px}
.stem .blank{
  display:inline-block;width:4.2em;height:1.6em;vertical-align:-.28em;
  border-bottom:2px solid var(--ink);margin:0 6px 0 2px;
  background:linear-gradient(to bottom,transparent 78%,rgba(179,38,30,.07) 78%);
}

/* 输入 */
#answerForm{display:flex;flex-direction:column;gap:12px}
.answer{
  width:100%;font-size:22px;font-family:inherit;color:var(--ink);
  padding:14px 14px;border:2px solid var(--line);border-radius:12px;background:#fff;
  letter-spacing:2px;outline:none;transition:border-color .15s;
}
.answer:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(179,38,30,.08)}
.answer::placeholder{color:#c4bbad;letter-spacing:0;font-size:17px}

.btn{
  border:0;border-radius:12px;font-family:inherit;font-size:17px;font-weight:600;
  padding:14px;letter-spacing:1px;cursor:pointer;transition:transform .08s,filter .15s;
}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--red);color:#fff;box-shadow:0 3px 10px rgba(179,38,30,.22)}
.btn.next{background:#eef4ef;color:var(--green);border:1px solid #cfe2d5;width:100%;margin-top:14px}

/* 反馈 */
.feedback{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.verdict{font-size:19px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.verdict.ok{color:var(--green)}
.verdict.part{color:#a1741b}
.verdict.bad{color:var(--red)}
.keyline{font-size:17px;line-height:1.9;background:var(--soft);border-radius:10px;padding:10px 12px;
  letter-spacing:1.5px;display:flex;flex-direction:column;gap:6px}
.kv{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kv .lb{font-size:12px;color:var(--muted);letter-spacing:0;flex:0 0 auto;min-width:3.2em}
.kv.right b{color:var(--deep)}
.kv.ok{color:var(--green);font-weight:600}
.keyline b{color:var(--deep)}
.keyline del{color:#c0392b;text-decoration:line-through;background:#fdecea;border-radius:3px}
.keyline ins{color:var(--green);text-decoration:none;background:#e8f5ec;border-radius:3px;padding:0 1px}
.hint{font-size:14px;color:#8a6d3b;background:#fff8e6;border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;padding:8px 10px;margin-top:10px;line-height:1.6}
.hint:empty{display:none}

/* 底部小操作 */
.foot{display:flex;justify-content:space-between;margin-top:16px;gap:12px}
.link{
  background:none;border:0;color:var(--muted);font-family:inherit;font-size:14px;
  text-decoration:underline;text-underline-offset:3px;padding:6px 0;cursor:pointer;
}

/* 完成 */
.badge-big{
  width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:32px;margin:6px auto 14px;
  box-shadow:0 6px 18px rgba(47,111,79,.22);
}
.badge-big.soft{background:var(--soft);color:var(--gold);box-shadow:none}
#done h2,#empty h2{text-align:center;font-size:21px;margin:0 0 8px}
#done .muted,#empty .muted{text-align:center;margin:0}
.stat3{display:flex;gap:10px;margin:20px 0 4px}
.stat3 div{flex:1;background:var(--soft);border-radius:12px;padding:12px 6px;text-align:center}
.stat3 b{display:block;font-size:24px;color:var(--deep);font-variant-numeric:tabular-nums}
.stat3 span{font-size:12px;color:var(--muted)}
#done .tiny{text-align:center;margin-top:14px}

/* 原文弹层 */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(30,20,12,.42);display:flex;align-items:flex-end}
.sheet-in{
  width:100%;max-height:82vh;background:var(--card);border-radius:18px 18px 0 0;
  padding:16px 18px calc(20px + env(safe-area-inset-bottom));overflow:auto;
  animation:up .24s ease;
}
@keyframes up{from{transform:translateY(30px)}to{transform:none}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sheet-head strong{font-size:17px;color:var(--deep)}
.sheet-body{font-size:17px;line-height:2;letter-spacing:1px}
.sheet-body .ln{padding:2px 0}
.sheet-body .hw{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;font-size:14px;color:#6b6156;line-height:1.8}
.sheet-body .hw b{color:var(--deep)}

@media (max-width:360px){
  .stem{font-size:23px}
  .answer{font-size:20px}
}