:root { --bg: #fff; --fg: #111; --muted: #666; --ok: #0a7a2f; --bad: #b00020; --line: #ddd; --btn: #1f5eff; }
@media (prefers-color-scheme: dark) { :root { --bg: #111; --fg: #eee; --muted: #aaa; --ok: #4cd07d; --bad: #ff6b81; --line: #333; --btn: #5b8cff; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.45 -apple-system, system-ui, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
h1 small { font-size: 0.55em; color: var(--muted); font-weight: normal; }
h2 { font-size: 1.05em; margin-top: 1.6em; }
.host { color: var(--muted); font-size: 0.9em; word-break: break-all; }
pre { white-space: pre-wrap; word-break: break-word; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-size: 0.85em; }
.readback { font-size: 0.95em; }
button, .button { display: inline-block; font: inherit; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--fg); text-decoration: none; margin: 4px 0; }
button.primary { background: var(--btn); color: #fff; border: 0; width: 100%; font-size: 1.1em; }
button:disabled { opacity: 0.5; }
label { display: block; margin: 8px 0; }
input, textarea { font: inherit; width: 100%; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--fg); }
textarea { min-height: 120px; font-family: ui-monospace, monospace; font-size: 0.8em; }
.verdict { margin-top: 12px; padding: 12px; border-radius: 8px; border: 2px solid var(--line); font-weight: 600; }
.verdict.ok { border-color: var(--ok); color: var(--ok); }
.verdict.bad { border-color: var(--bad); color: var(--bad); }
.meta { color: var(--muted); font-size: 0.85em; }
code { word-break: break-all; }