:root {
  color-scheme: dark;
  --bg: #12141a;
  --panel: #1c1f28;
  --panel-2: #232733;
  --border: #2c303c;
  --text: #f2f3f5;
  --muted: #9aa1ac;
  --accent: #ff5d5d;
  --accent-2: #ffb020;
  --ok: #3ddc84;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
a { color: var(--accent-2); }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  background: var(--panel-2);
  color: var(--text);
  transition: background 0.15s ease, transform 0.05s ease;
}
button:hover { background: #2b303d; }
button:active { transform: scale(0.97); }
button.primary { background: var(--accent); color: #1a0000; font-weight: 600; }
button.primary:hover { background: #ff7373; }
button.ghost { background: transparent; border: 1px solid var(--border); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
input[type="text"] {
  font-family: inherit;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text);
}
input[type="text"]:focus { outline: 2px solid var(--accent-2); }
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
  flex: none;
}
.status-dot.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.status-dot.off { background: var(--accent); box-shadow: 0 0 6px var(--accent); }