:root{
  --page:#f9f9f7; --surface:#fcfcfb; --line:#e6e5e0; --line-2:#d2d1ca;
  --ink:#0b0b0b; --ink-2:#52514e; --ink-3:#8a897f;
  --good:#0ca30c; --warn:#fab219; --none:#9a998f; --bad:#d4380d;
  --good-bg:#e9f6e9; --warn-bg:#fff4d6; --none-bg:#efeeea; --bad-bg:#fdeee8;
  --a:#2a78d6; --b:#eb6834; --c:#1baf7a; --d:#4a3aa7;
  --a-bg:#e8f0fb; --b-bg:#fdece5; --c-bg:#e4f6ef; --d-bg:#ebe9f7;
}
@media (prefers-color-scheme: dark){
  :root{
    --page:#0d0d0d; --surface:#1a1a19; --line:#2c2c2a; --line-2:#3b3b38;
    --ink:#fff; --ink-2:#c3c2b7; --ink-3:#8f8e85;
    --good-bg:#12300f; --warn-bg:#3a2d0a; --none-bg:#262622; --bad-bg:#3a1a10; --bad:#f06a3c;
    --a:#3987e5; --b:#d95926; --c:#199e70; --d:#9085e9;
    --a-bg:#132640; --b-bg:#3a1c10; --c-bg:#0f2e23; --d-bg:#221f3d;
  }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--page);color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-text-size-adjust:100%}
.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
a{color:var(--a);text-decoration:none}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);
  border-radius:8px;padding:9px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--a-bg);border-color:var(--a)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px}
.muted{color:var(--ink-3)}
.sub{color:var(--ink-2)}
.pill{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border-radius:99px;font-size:12px;line-height:20px;white-space:nowrap}
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:#a46f00}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.none{background:var(--none-bg);color:var(--ink-2)}
.pill.a{background:var(--a-bg);color:var(--a)}
.pill.b{background:var(--b-bg);color:var(--b)}
.pill.c{background:var(--c-bg);color:var(--c)}
.pill.d{background:var(--d-bg);color:var(--d)}
@media (prefers-color-scheme: dark){.pill.warn{color:var(--warn)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 14px;font-weight:500}
.btn.primary{background:var(--ink);color:var(--page);border-color:var(--ink)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:var(--page);padding:10px 16px;border-radius:8px;font-size:14px;z-index:99;
  max-width:88vw;text-align:center}
.toast.err{background:var(--bad);color:#fff}