:root {
  color-scheme: dark light;
  --bg: #0b1220;
  --panel: #131c2e;
  --text: #e6ebf5;
  --muted: #94a3b8;
  --accent: #2dd4bf;
  --on-accent: #04211d;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --border: #23314d;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --accent: #0f766e;
    --on-accent: #ffffff;
    --ok: #059669;
    --warn: #b45309;
    --err: #dc2626;
    --border: #dbe2ee;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { min-height: 100dvh; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
main { max-width: 28rem; margin: 0 auto; padding: 24px 0 48px; }
[hidden] { display: none !important; }

header h1 { font-size: 1.25rem; margin: 0; letter-spacing: 0.02em; }
.host { margin: 4px 0 24px; color: var(--muted); font-size: 0.9rem; word-break: break-all; }

section { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
h2 { font-size: 1.1rem; margin: 0 0 8px; }
p { line-height: 1.5; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }

label { display: block; font-size: 0.85rem; color: var(--muted); margin: 16px 0 6px; }
input {
  width: 100%;
  font: 600 1.25rem/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 14px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 1rem/1 system-ui, sans-serif;
  cursor: pointer;
}
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
button:disabled { opacity: 0.6; cursor: progress; }

.error { color: var(--err); margin: 12px 0 0; }

.state { display: flex; align-items: center; gap: 12px; font-size: 1.35rem; font-weight: 650; padding: 8px 0 4px; }
.state .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--muted); flex: none; }
.state[data-kind="working"] .dot { background: var(--warn); animation: pulse 1s ease-in-out infinite alternate; }
.state[data-kind="ok"] .dot { background: var(--ok); }
.state[data-kind="error"] .dot { background: var(--err); }
.state[data-kind="error"] { font-size: 1rem; font-weight: 500; line-height: 1.4; }
@keyframes pulse { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .state[data-kind="working"] .dot { animation: none; } }

dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 20px 0 4px; }
dt { color: var(--muted); font-size: 0.85rem; }
dd { margin: 0; font-size: 0.95rem; word-break: break-all; }
#ip { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; }