:root {
  --bg: #050505;
  --surface: #111010;
  --line: #2a2424;
  --text: #f3ece4;
  --muted: #9c918a;
  --gold: #f2b33d;
  --gold-hi: #ffcf5c;
  --red: #e0262e;
  --red-hi: #ff4d3d;
  --ok: #57c27a;
  --radius: 14px;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; }
h1 { font-size: 44px; line-height: 1.05; }
h2 { font-size: 26px; }
a { color: var(--gold); }
.muted { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 16px 0 6px; }
input {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: #0a0909; color: var(--text); font: inherit;
}
input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 179, 61, .2); }
button {
  font: 600 15px var(--sans); border: 0; border-radius: 10px; padding: 12px 18px; cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--red)); color: #140a05;
}
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
button:disabled { opacity: .5; cursor: default; }
.error { color: var(--red-hi); min-height: 1.5em; margin: 12px 0 0; font-size: 14px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 8px; }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--red); }