:root {
  --storm: #0c1430;
  --storm-deep: #070c1f;
  --slate: #26314f;
  --slate-line: #3a4770;
  --gold: #ffb627;
  --ember: #f0703a;
  --contrail: #eaf0ff;
  --haze: #a9b4d4;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background: radial-gradient(ellipse at top, var(--storm), var(--storm-deep));
  color: var(--contrail);
  font: 17px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { width: 100%; max-width: 24rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--contrail); text-decoration: none; font-weight: 700; letter-spacing: 0.04em; }
.brand img { width: 28px; height: 28px; }
h1 { margin: 1.75rem 0 0.5rem; font-size: 1.9rem; line-height: 1.2; }
p { margin: 0 0 1rem; color: var(--haze); }
a { color: var(--gold); }
.buttons { display: grid; gap: 0.75rem; margin: 1.75rem 0 1rem; }
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0 1.25rem; border: 0; border-radius: 999px;
  font: 600 1rem/1 inherit; cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: progress; }
button svg { width: 20px; height: 20px; }
.google { background: #fff; color: #1f1f1f; }
.google:hover { background: #f2f2f2; }
.apple { background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); }
.apple:hover { background: #1a1a1a; }
.ghost { background: transparent; color: var(--contrail); box-shadow: inset 0 0 0 1px var(--slate-line); }
.ghost:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.error { color: var(--ember); }
.small { font-size: 0.875rem; }
.card { margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: 1rem; background: rgb(38 49 79 / 0.45); box-shadow: inset 0 0 0 1px var(--slate-line); }
.card p { margin: 0; }
.card strong { display: block; color: var(--contrail); }
[hidden] { display: none !important; }