/* 颜色用 Radix 变量（radix.css，由 scripts/make-colors.js 生成）。字号、圆角、线、动效和软件里一样（AGENTS.md） */
:root {
  --bg: var(--slate-2); --card: var(--white); --ink: var(--slate-12); --muted: var(--slate-11); --line: var(--slate-6);
  --accent: var(--green-9); --warn: var(--amber-11); --bad: var(--red-11); --good: var(--green-11); --focus: var(--blue-8);
  --fs-s: 12px; --fs-m: 14px; --fs-l: 16px; --fs-xl: 20px;
  --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-full: 999px;
  --hair: 1px; --fx: 250ms; --fx-ease: ease-out;
  --font-ui: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
@media (min-resolution: 2dppx) { :root { --hair: 0.5px; } }
@media (prefers-reduced-motion: reduce) { :root { --fx: 0ms; } }
* { box-sizing: border-box; }
body { margin: 0; font: var(--fs-m)/1.5 var(--font-ui); background: var(--bg); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
header { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--card); border-bottom: var(--hair) solid var(--line); position: sticky; top: 0; }
header strong { white-space: nowrap; }
nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
nav button { border: 0; background: none; color: var(--muted); padding: 6px 10px; border-radius: var(--r-s); cursor: pointer; font: inherit; white-space: nowrap; }
nav button.on { background: var(--bg); color: var(--ink); font-weight: 600; }
#me { color: var(--muted); font-size: var(--fs-s); display: flex; gap: 8px; align-items: center; white-space: nowrap; }
main { padding: 16px; max-width: 1200px; margin: 0 auto; }
h1 { font-size: var(--fs-xl); margin: 0 0 16px; }
h2 { font-size: var(--fs-l); margin: 20px 0 8px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: var(--hair) solid var(--line); border-radius: var(--r-l); overflow: hidden; }
th, td { text-align: left; padding: 8px 10px; border-bottom: var(--hair) solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: var(--fs-s); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.wrap { overflow-x: auto; }
.muted { color: var(--muted); }
/* 几段并排的短文字用间距隔开，不用中点 */
.seg { margin-left: 8px; white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-full); margin-right: 6px; background: var(--muted); }
.good { color: var(--good); } .good .dot, .dot.good { background: var(--good); }
.warn { color: var(--warn); } .dot.warn { background: var(--warn); }
.bad { color: var(--bad); } .dot.bad { background: var(--bad); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-s); margin-right: 6px; vertical-align: middle; }
button.btn { font: inherit; padding: 4px 10px; border-radius: var(--r-m); border: var(--hair) solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; margin: 2px 4px 2px 0; white-space: nowrap; transition: background var(--fx) var(--fx-ease); }
button.btn:hover { background: var(--slate-4); }
button.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--white); }
button.btn.primary:hover { background: var(--green-10); }
button.btn.danger { color: var(--bad); }
button.btn.link { border-color: transparent; background: none; color: var(--muted); padding: 4px 0; }
button.btn.link:hover { color: var(--ink); background: none; }
input, select, textarea { font: inherit; padding: 5px 8px; border: var(--hair) solid var(--line); border-radius: var(--r-m); background: var(--card); color: var(--ink); }
form.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 16px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: var(--fs-s); color: var(--muted); white-space: nowrap; }
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
.field.inline > span { font-size: inherit; color: inherit; }
div.auth { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin: 48px auto; padding: 24px; background: var(--card); border: var(--hair) solid var(--line); border-radius: var(--r-l); }
div.auth p { margin: 0; }
div.auth .btn { margin: 0; }
form.pair { display: flex; gap: 8px; align-items: flex-end; }
form.pair .field { flex: 1; min-width: 0; }
form.pair .field input { width: 100%; }
form.pair .btn { padding: 5px 12px; }
button.btn:disabled { color: var(--muted); cursor: default; }
button.btn:disabled:hover { background: var(--card); }
.device { white-space: normal; }
.cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.card { background: var(--card); border: var(--hair) solid var(--line); border-radius: var(--r-l); padding: 10px 14px; min-width: 120px; }
.card b { display: block; font-size: var(--fs-xl); }
#toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: var(--r-m); max-width: 90vw; }
.device .btn { margin-left: 4px; }