/* app.css — 现代大字（适老化）
   原则：最小字号 20px，正文 24–26px，标题 44px 起；全部竖屏手机优先；
   任何文案都不缩小，靠间距、留白和层级区分信息。 */

:root{
  --bg:#EDEBE6; --card:#FBFAF7; --ink:#111111; --muted:#45443F;
  --line:rgba(17,17,17,.22); --soft:rgba(17,17,17,.06); --control:rgba(17,17,17,.38);
  --accent:#B0242A; --accent-press:#8C1B20; --accent-soft:rgba(176,36,42,.12);
  --indigo:#2E3D4D; --shadow:none; --radius:12px; --maxw:520px; --bar:6.5rem;
  --sans:"PingFang SC","Noto Sans SC","Microsoft YaHei","Heiti SC","Hiragino Sans GB",sans-serif;
  --serif:var(--sans);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0E0E0C; --card:#171714; --ink:#EDEBE4; --muted:#B6B4AB;
  --line:rgba(237,235,228,.24); --soft:rgba(237,235,228,.07); --control:rgba(237,235,228,.4);
  --accent:#F2685F; --accent-press:#D9504A; --accent-soft:rgba(242,104,95,.16);
  --indigo:#A8BECD; color-scheme:dark;
}

*{box-sizing:border-box}
html{font-size:calc(16px * var(--fs, 1)); -webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:1.5rem; line-height:1.6; -webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
ol,ul{margin:0;padding:0;list-style:none}
b,strong{font-weight:800}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- 骨架 ---------- */
.app{max-width:var(--maxw);margin:0 auto;
  padding:0 1.25rem calc(var(--bar) + 2rem);min-height:100vh}

.top{position:sticky;top:0;z-index:20;background:var(--bg);padding-top:1.1rem;
  border-bottom:2px solid var(--ink)}
.brandline{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;font-size:1.3rem;font-weight:800;letter-spacing:.01em}
.seal{display:grid;place-items:center;width:2.2rem;height:2.2rem;background:var(--accent);
  color:#fff;font-size:1.35rem;font-weight:800;line-height:1;border-radius:2px}
html[data-theme="dark"] .seal{color:#0E0E0C}
.fs{border:0;background:none;padding:.5rem .25rem;min-height:3rem;font-size:1.25rem;font-weight:700;
  color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

.meta{display:flex;align-items:center;gap:.9rem;padding:.7rem 0 .8rem;
  font-size:1.25rem;color:var(--muted);font-variant-numeric:tabular-nums}
.meta .dot{color:var(--muted)}

/* ---------- 题目卡 ---------- */
.card{border-top:6px solid var(--ink);margin-top:1.4rem;padding-top:1.4rem}
.tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.1rem}
.tag{font-size:1.25rem;font-weight:700;padding:.45rem .8rem;background:var(--soft);
  border-radius:8px;line-height:1.2}
.tag.lv{background:var(--accent-soft);color:var(--accent);letter-spacing:2px}
.tag.lv .on{color:var(--accent)}
.tag.lv .off{color:var(--muted)}
.tag.lv .txt{color:var(--accent);margin-left:.15rem}
.tag.old{background:transparent;border:2px solid var(--control);color:var(--muted)}

h1.q{font-size:clamp(2.6rem, 11.5vw, 3.4rem);line-height:1.04;letter-spacing:-.02em;
  font-weight:900;margin:0 0 1.1rem}
.sub{font-size:1.55rem;line-height:1.62;margin:0;font-weight:400}
.fig{margin:1.6rem 0 .4rem;color:var(--ink)}
.fig svg{width:100%;height:auto;display:block}

.speak{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;
  margin-top:1.4rem;min-height:4rem;border:2px solid var(--control);background:transparent;
  color:var(--ink);font-size:1.35rem;font-weight:700;border-radius:12px;padding:0 1rem}
.speak svg{width:1.6rem;height:1.6rem}
.speak:active{background:var(--soft)}

/* ---------- 思考锁 ---------- */
.gate{margin-top:1.6rem}
.gate .bar{height:.6rem;background:var(--soft);border-radius:99px;overflow:hidden}
.gate .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s ease}
.gate p{margin:.9rem 0 1.1rem;font-size:1.4rem;color:var(--muted);font-weight:600}
.escape{width:100%;min-height:4.2rem;border:2px dashed var(--control);background:transparent;
  border-radius:12px;font-size:1.35rem;font-weight:700;color:var(--ink)}
.escape:active{background:var(--soft)}

/* ---------- 主按钮 ---------- */
.primary{width:100%;min-height:5rem;border:0;border-radius:12px;background:var(--ink);
  color:var(--bg);font-size:1.6rem;font-weight:800;letter-spacing:.02em;padding:0 1.2rem}
.primary:active{background:var(--accent);color:#fff}
.primary[disabled]{background:var(--soft);color:var(--muted)}

/* ---------- 答案 ---------- */
.answer{margin-top:2.2rem}
.think{font-size:1.35rem;color:var(--muted);font-weight:600;margin:0 0 1.1rem}
.answer h2{font-size:1.25rem;letter-spacing:.32em;color:var(--accent);font-weight:800;margin:0 0 1.1rem}
.ansline{margin:0 0 1.4rem}
.ansline b{font-size:clamp(2.2rem, 9.5vw, 2.9rem);font-weight:900;line-height:1.15;letter-spacing:-.01em}
#asteps{counter-reset:step;display:grid;gap:1.1rem;margin-top:.4rem}
#asteps li{counter-increment:step;position:relative;padding-left:3.4rem;
  font-size:1.45rem;line-height:1.62}
#asteps li::before{content:counter(step);position:absolute;left:0;top:.1rem;
  width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:#fff;font-size:1.35rem;font-weight:800;
  font-variant-numeric:tabular-nums}
html[data-theme="dark"] #asteps li::before{color:#0E0E0C}
.note{margin:1.6rem 0 0;padding-left:1.1rem;border-left:6px solid var(--accent);
  font-size:1.4rem;line-height:1.6;font-weight:600}
.shareBtn{margin-top:1.8rem;background:var(--ink);color:var(--bg)}
.shareBtn:active{background:var(--accent);color:#fff}

/* ---------- 做过的 ---------- */
.archive{margin-top:2.4rem}
.archive h2{font-size:1.5rem;font-weight:800;margin:0 0 .6rem}
.archive ul{border-top:2px solid var(--ink)}
.archive li{display:flex;align-items:center;gap:1rem;min-height:5rem;padding:.9rem .2rem;
  border-bottom:1px solid var(--line);cursor:pointer}
.archive li:active{background:var(--soft)}
.archive .tt{flex:1;font-size:1.45rem;font-weight:600}
.archive .dt{flex:none;font-size:1.25rem;color:var(--muted);font-variant-numeric:tabular-nums}
.archive li.empty{color:var(--muted);cursor:default;justify-content:flex-start;
  font-size:1.35rem;line-height:1.6;min-height:0;padding:1.4rem .2rem}

/* ---------- 底部导航 ---------- */
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);
  border-top:2px solid var(--ink);
  padding:.8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom))}
.bottom .inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:.8rem}
.bottom button{min-height:4.5rem;border-radius:12px;font-size:1.5rem;font-weight:800;
  border:2px solid var(--ink);background:transparent;color:var(--ink)}
.bottom button:active{background:var(--soft)}
.bottom button[disabled]{color:var(--muted);border-color:var(--line);background:transparent}
.bottom .square{flex:none;width:4.5rem;padding:0;font-size:1.7rem}
.bottom .square[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.bottom .next{flex:1;background:var(--ink);color:var(--bg)}
.bottom .next:active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- 弹层 ---------- */
.mask{position:fixed;inset:0;background:rgba(12,12,10,.6);display:flex;align-items:flex-end;
  justify-content:center;z-index:40}
.mask.center{align-items:center}
.sheet{width:100%;max-width:var(--maxw);background:var(--card);border-radius:20px 20px 0 0;
  padding:1.5rem 1.25rem calc(1.6rem + env(safe-area-inset-bottom));
  max-height:88vh;overflow:auto}
.mask.center .sheet{border-radius:20px}
.sheethead{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sheethead h3{margin:0;font-size:1.7rem;font-weight:800}
.sheetclose{width:3rem;height:3rem;flex:none;border:2px solid var(--control);border-radius:50%;
  background:transparent;font-size:1.8rem;line-height:1;display:grid;place-items:center}
.tip{margin:.9rem 0 1.1rem;font-size:1.3rem;line-height:1.6;color:var(--muted)}
.opt{display:block;width:100%;min-height:4.6rem;margin-bottom:.8rem;padding:.9rem 1.1rem;
  border:2px solid var(--control);border-radius:12px;background:transparent;text-align:left;
  font-size:1.4rem;line-height:1.5;font-weight:600}
.opt:active{background:var(--soft)}
.settingRow{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:4.6rem;border-bottom:1px solid var(--line);font-size:1.45rem;font-weight:600}
.ghost{min-height:3.6rem;padding:0 1.1rem;border:2px solid var(--control);border-radius:10px;
  background:transparent;font-size:1.35rem;font-weight:800;color:var(--ink);white-space:nowrap}
.ghost:active{background:var(--soft)}
.about{margin:1.4rem 0 0;font-size:1.3rem;line-height:1.65;color:var(--muted)}
.manualCopy{width:100%;min-height:12rem;margin-top:.8rem;padding:1rem;font-size:1.3rem;
  font-family:var(--sans);line-height:1.6;color:var(--ink);background:var(--bg);
  border:2px solid var(--control);border-radius:12px}
.posterHolder{max-width:100%;font-size:1.35rem;color:var(--muted);text-align:center}
.posterHolder img{width:100%;height:auto;border:1px solid var(--line);border-radius:12px}

/* ---------- toast ---------- */
.toast{position:fixed;left:1.25rem;right:1.25rem;bottom:calc(var(--bar) + 1.4rem);
  max-width:var(--maxw);margin:0 auto;z-index:50;background:var(--ink);color:var(--bg);
  padding:1.1rem 1.3rem;border-radius:12px;font-size:1.35rem;font-weight:700;text-align:center}

/* ---------- 首次引导 ---------- */
.intro{position:fixed;inset:0;z-index:60;background:var(--bg);overflow:auto;
  display:flex;align-items:center;justify-content:center;padding:2rem 1.25rem}
.introBox{width:100%;max-width:var(--maxw)}
.introBrand{font-size:1.3rem;font-weight:800;letter-spacing:.14em;color:var(--accent);margin:0 0 1.4rem}
.introTitle{font-size:clamp(2.4rem, 11vw, 3.2rem);line-height:1.1;font-weight:900;
  letter-spacing:-.02em;margin:0 0 1.3rem}
.introText{font-size:1.5rem;line-height:1.7;color:var(--ink);margin:0 0 1.8rem}
.introList{margin:0 0 2rem;border-top:2px solid var(--ink)}
.introList li{display:flex;align-items:flex-start;gap:1rem;padding:1.1rem .2rem;
  border-bottom:1px solid var(--line);font-size:1.4rem;line-height:1.55;font-weight:600}
.introList li span{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;
  border-radius:50%;background:var(--ink);color:var(--bg);font-size:1.3rem;font-weight:800}
.introBox .primary{margin-top:.4rem}

/* ---------- 宽屏兜底（仍然竖屏优先） ---------- */
@media (min-width:620px){
  .app{padding-left:1.5rem;padding-right:1.5rem}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}