:root { --bg:#f6f7f9; --fg:#1b2430; --mut:#5d6b7c; --card:#fff; --line:#d9dee5; --acc:#0b5cab; --acc-fg:#fff; --bad:#b3261e; --ok:#1b7f3b; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg:#12171d; --fg:#e6ebf1; --mut:#9aa8b8; --card:#1a2129; --line:#2b3641; --acc:#5aa2ee; --acc-fg:#0a1623; --bad:#ff8a80; --ok:#6fd48c; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 860px; margin: 0 auto; padding: 24px 16px; }
h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin: 16px 0; }
.mut { color: var(--mut); }
label { display: block; margin: 10px 0 4px; font-size: .9rem; }
input, select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); font: inherit; }
button { padding: 9px 14px; border: 0; border-radius: 6px; background: var(--acc); color: var(--acc-fg); font: inherit; cursor: pointer; margin-top: 12px; }
button.ghost { background: transparent; color: var(--acc); border: 1px solid var(--line); }
.msg { margin-top: 10px; } .bad { color: var(--bad); } .ok { color: var(--ok); }
table { width: 100%; border-collapse: collapse; } td, th { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } code { font-size: 1.1rem; letter-spacing: .08em; }
pre.log { white-space: pre-wrap; font-size: .8rem; overflow-x: auto; }
a.btn { display: inline-block; padding: 9px 14px; border-radius: 6px; background: var(--acc); color: var(--acc-fg); text-decoration: none; margin-top: 12px; }