:root {
  --bg: #0f172a;
  --panel: #111827;
  --border: #1f2937;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #22d3ee;
  --danger: #ef4444;
  --ok: #10b981;
}

* { box-sizing: border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--text); font:16px/1.4 system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; }
header { display:flex; align-items:center; gap:12px; padding:20px; max-width:980px; margin:0 auto; }
header img { width:32px; height:32px; }
h1 { font-size:22px; margin:0; }
main { max-width:980px; margin:0 auto; padding:0 20px 40px; display:grid; gap:16px; }
.card { background:var(--panel); border:1px solid var(--border); padding:20px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.hidden { display:none; }
button { background:#0ea5e9; border:none; color:#00131a; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600; }
button.copy { background:#0ea5e9; }
button.danger { background:var(--danger); color:#fff; }
button:disabled { opacity:.6; cursor:not-allowed; }
input[type="text"] { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0b1220; color:#e5e7eb; }
.kv { display:grid; grid-template-columns: 140px 1fr; gap:8px 12px; align-items:center; margin:12px 0; }
code { background:#0b1220; border:1px solid var(--border); padding:2px 6px; border-radius:8px; }
.row { display:flex; align-items:center; gap:12px; margin-top:12px; }
.badge { padding:4px 8px; border-radius:8px; background:#334155; color:#e5e7eb; }
.badge.ok { background:var(--ok); color:#03140f; }
.badge.off { background:#475569; }
footer { max-width:980px; margin:0 auto; padding:8px 20px 24px; color:#9ca3af; }
.tabs { display:flex; gap:8px; margin:10px 0 14px; }
.tab { background:#0b1220; color:var(--text); border:1px solid var(--border); padding:8px 12px; border-radius:10px; }
.tab.active { outline:2px solid var(--accent); }
.pane { margin-top:8px; }
.muted { color:var(--muted); }