:root {
  --bg: #0f1115;
  --fg: #e6edf3;
  --muted: #9da7b3;
  --accent: #58a6ff;
  --accent-2: #7ee787;
  --btn-bg: #1f232a;
  --btn-border: #30363d;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; }

.container { max-width: 640px; margin: 10vh auto; padding: 24px; background: #0b0d12; border: 1px solid var(--btn-border); border-radius: 12px; box-shadow: 0 6px 30px rgba(0,0,0,0.35); }
h1 { margin-top: 0; }
.muted { color: var(--muted); }
.notice { padding: 10px 12px; background: #2a1e11; border: 1px solid #3a2a1a; border-radius: 8px; color: #ffcc80; margin-bottom: 16px; }

button { appearance: none; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--fg); padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; }
button:hover { border-color: var(--accent); color: var(--accent); }
button.secondary { color: var(--muted); }

.row { display: flex; gap: 8px; margin-top: 8px; }

footer { margin-top: 18px; }