:root {
  --bg: #0b0f17; --panel: #131a26; --line: #26324a; --text: #e8edf6; --muted: #9aa7bf;
  --gold: #e8b85a; --gold-dark: #b8862e; --ok: #4fd18b; --err: #ff7a7a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: radial-gradient(1200px 600px at 50% -10%, #23324f 0%, var(--bg) 60%) var(--bg);
  color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--gold); }
code { background: #0e1420; border: 1px solid var(--line); border-radius: 4px; padding: 0 .3em; font-size: .9em; }
.hero { text-align: center; padding: 64px 16px 32px; }
.kicker { color: var(--gold); letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; margin: 0; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 6vw, 3.4rem); margin: .2em 0; color: #fff3d6;
     text-shadow: 0 0 24px rgba(232,184,90,.35); }
.lead { color: var(--muted); max-width: 40rem; margin: 0 auto 1rem; }
.status { display: inline-flex; gap: .5em; align-items: center; background: var(--panel); border: 1px solid var(--line);
          border-radius: 999px; padding: .35em 1em; font-size: .9rem; }
.dot { width: .65em; height: .65em; border-radius: 50%; background: var(--muted); }
.status.on .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.status.off .dot { background: var(--err); }
main { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; display: grid; gap: 20px; }
.card { background: linear-gradient(180deg, #151d2b, var(--panel)); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
h2 { margin: 0 0 16px; font-family: Georgia, serif; color: var(--gold); font-weight: 600; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-weight: 600; }
input { font: inherit; color: var(--text); background: #0d131e; border: 1px solid var(--line); border-radius: 8px; padding: .65em .8em; }
input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
small { color: var(--muted); font-weight: 400; }
button { font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 8px; padding: .8em 1em; color: #1b1405;
         background: linear-gradient(180deg, var(--gold), var(--gold-dark)); }
button:disabled { opacity: .6; cursor: wait; }
#message p { margin: .2em 0; }
#message.ok { color: var(--ok); }
#message.err { color: var(--err); }
.steps { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.note { color: var(--muted); font-size: .92rem; margin: 14px 0 0; }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 0 16px 32px; }
@media (max-width: 520px) { .card { padding: 18px; } .hero { padding-top: 40px; } }
.wake { max-width: 30rem; margin: 18px auto 0; display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.wake p { margin: 0; color: var(--muted); font-size: .92rem; }
.wake[hidden] { display: none; }