:root{
  --bg:#0b0f12; --panel:#131a1f; --line:#2b3941; --ink:#e8eef0; --muted:#93a3ab;
  --dim:#6a7880; --yellow:#f0c800; --cyan:#5ccddb; --red:#ee625a; --green:#8fcf79;
  --fs:19px; --lh:1.72;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans SC","Microsoft YaHei UI","PingFang SC","Segoe UI",sans-serif;
  font-size:var(--fs);line-height:var(--lh)}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
#app{max-width:760px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}

header{position:sticky;top:0;z-index:5;background:linear-gradient(#0b0f12,#0b0f12f5);
  border-bottom:1px solid var(--line);padding:10px 14px}
.title{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.title b{font-size:1.05em;letter-spacing:.06em}
.title span{color:var(--muted);font-size:.8em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--muted);
  font-size:.74em;padding:2px 7px;border-radius:2px}
.chip b{color:var(--ink);font-weight:600}
.chip.hp b{color:var(--green)} .chip.inf b{color:var(--yellow)}
.chip.bad b{color:var(--red)}

main{flex:1;padding:14px;display:flex;flex-direction:column;gap:12px}
.block{border-left:2px solid var(--line);padding:2px 0 2px 12px;white-space:pre-wrap}
.block.gm{border-color:var(--cyan)}
.block.me{border-color:var(--yellow);color:var(--muted)}
.block.sys{border-color:var(--dim);color:var(--dim);font-size:.86em}
.block h4{margin:0 0 6px;font-size:.78em;letter-spacing:.1em;color:var(--dim);font-weight:500}
.empty{color:var(--dim);font-size:.9em;text-align:center;padding:28px 10px}

footer{position:sticky;bottom:0;background:linear-gradient(#0b0f1200,#0b0f12 20%);
  padding:10px 14px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px}
button{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);
  border-radius:3px;padding:13px 14px;text-align:left;cursor:pointer;transition:.15s}
button:active{background:#1b242a;transform:translateY(1px)}
button .hint{display:block;color:var(--dim);font-size:.76em;margin-top:3px}
button.primary{border-color:#6b5c14;background:#1d1a0d}
button.primary .hint{color:#b8a35a}
button.wide{text-align:center}
.tools{display:flex;gap:9px}
.tools button{flex:1;text-align:center;padding:11px 8px;font-size:.86em;color:var(--muted)}
.inputbar{display:flex;gap:8px}
.inputbar textarea{flex:1;min-height:52px;max-height:140px;background:#0f1519;color:var(--ink);
  border:1px solid var(--line);border-radius:3px;padding:11px;font:inherit;font-size:.92em;resize:none}
.inputbar button{width:74px;text-align:center;border-color:#2f4a52;color:var(--cyan)}

.sheet{position:fixed;inset:0;background:#070a0cf5;z-index:20;display:none;overflow:auto;
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
.sheet.on{display:block}
.sheet h3{margin:0 0 6px;font-size:1em;letter-spacing:.08em}
.sheet h4{margin:20px 0 8px;font-size:.86em;color:var(--yellow);letter-spacing:.08em}
.sheet .small{font-size:.8em;color:var(--dim);line-height:1.6}
label{display:block;margin:12px 0 5px;font-size:.84em;color:var(--muted)}
input[type=text],input[type=password],select,textarea{width:100%;background:#0f1519;color:var(--ink);
  border:1px solid var(--line);border-radius:3px;padding:11px;font:inherit;font-size:.9em}
textarea{min-height:110px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #1a2329;font-size:.9em}
.kv span{color:var(--muted)}
.close{margin-top:22px;width:100%;text-align:center;border-color:#4a5a62}
.tag{display:inline-block;border:1px solid var(--line);color:var(--dim);font-size:.72em;
  padding:1px 6px;border-radius:2px;margin-left:6px}
nav.modes{display:flex;gap:8px;margin-top:10px}
nav.modes a{flex:1;text-align:center;text-decoration:none;color:var(--muted);border:1px solid var(--line);
  border-radius:3px;padding:8px;font-size:.82em}
nav.modes a.on{color:var(--ink);border-color:#5e6a70;background:#161d22}

/* ---- 手机端整体缩放：想再小/再大，主要改下面 --fs 这一个值 ---- */
:root{ --fs:16.5px; --lh:1.68; }
header{padding:8px 12px 6px}
main{padding:12px 12px 6px;gap:12px}
footer{padding:8px 12px calc(12px + env(safe-area-inset-bottom));gap:7px}
.title b{font-size:1em}
.title span{font-size:.78em}
.chips{gap:5px;margin-top:7px}
.chip{font-size:.7em;padding:1px 6px}
.block{padding:2px 0 2px 10px;margin-bottom:11px}
button{padding:10px 12px;font-size:.96em}
button .hint{font-size:.72em;margin-top:2px}
.tools{gap:7px}
.tools button{padding:8px 6px;font-size:.82em}
nav.modes{gap:6px;margin-top:7px}
nav.modes a{padding:6px;font-size:.78em}
.inputbar textarea{min-height:46px;padding:9px;font-size:.9em}
.inputbar button{width:64px}
.sheet{padding:16px 13px 22px}
.sheet h3{font-size:.96em}
.sheet h4{margin:16px 0 6px;font-size:.82em}
.kv{padding:6px 0;font-size:.86em}
/* 只管选项框：整行、矮一些、字略小；其余排版不动 */
#choices button{display:block;width:100%;padding:6px 10px;font-size:.9em;line-height:1.45}
#choices button .hint{font-size:.66em;margin-top:1px}
