:root { --bg:#fff; --fg:#1d2733; --muted:#5a6672; --line:#d6dde3; --accent:#1f4e5f; --ok:#1b7a3a; --bad:#b3261e; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg:#14191f; --fg:#e6ecf1; --muted:#a3b0bc; --line:#2c3640; --accent:#7fc4dc; --ok:#6fd08c; --bad:#ff8a80; 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", Roboto, Arial, sans-serif; }
header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
header b { color: var(--accent); }
main { max-width: 980px; margin: 0 auto; padding: 16px; }
section[hidden], .hidden { display: none !important; }
h1 { font-size: 22px; margin: 4px 0 12px; } h2 { font-size: 18px; margin: 18px 0 8px; }
label { display: block; margin: 8px 0 2px; font-weight: 600; }
input, select { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); width: 100%; max-width: 420px; }
input[type=checkbox] { width: auto; }
button { font: inherit; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: var(--bg); cursor: pointer; margin: 8px 6px 0 0; }
button.light { background: transparent; color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
.muted { color: var(--muted); } .ok { color: var(--ok); } .bad { color: var(--bad); }
#msg { min-height: 22px; margin: 6px 0; font-weight: 600; }
table { border-collapse: collapse; width: 100%; margin: 8px 0; } th, td { border-bottom: 1px solid var(--line); padding: 6px; text-align: left; vertical-align: top; }
.tabs button { background: transparent; color: var(--accent); } .tabs button.on { background: var(--accent); color: var(--bg); }
.box { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 10px 0; }
.secret { font-family: ui-monospace, monospace; font-size: 16px; padding: 4px 8px; border: 1px dashed var(--accent); display: inline-block; }
.scroll { overflow-x: auto; }