:root { color-scheme: light dark; --fg:#1b1f24; --muted:#5b6470; --bg:#ffffff; --card:#f5f7fa; --line:#d9dee5; --accent:#1a5fd0; --danger:#b42318; --ok:#127a3e; }
@media (prefers-color-scheme: dark) { :root { --fg:#e8ebef; --muted:#a2abb6; --bg:#111418; --card:#1a1f25; --line:#2c333c; --accent:#7aa7ff; --danger:#ff7b6e; --ok:#5fd08b; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 40rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
p, ul { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: 1rem; margin: 0 0 1rem; }
.warn { border-color: var(--danger); }
.ok { color: var(--ok); }
.danger { color: var(--danger); }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
button, .button { font: inherit; padding: .55rem 1rem; border-radius: .4rem; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; text-decoration: none; display: inline-block; }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--danger); }
button:disabled { opacity: .6; cursor: progress; }
input[type=text] { font: inherit; padding: .5rem; border-radius: .4rem; border: 1px solid var(--line); background: var(--bg); color: var(--fg); width: 100%; max-width: 20rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .25rem; border-bottom: 1px solid var(--line); vertical-align: top; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; overflow-wrap: anywhere; }
[hidden] { display: none !important; }