:root {
  --ink: #2D1015;
  --brand: #C0392B;
  --muted: #6b6b6b;
  --bg: #ffffff;
  --card: #ffffff;
  --line: #ececec;
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#f5f0f0; --muted:#a8a0a0; --bg:#1a0e11; --card:#241417; --line:#3a2529; }
}
* { box-sizing: border-box; }
/* The `hidden` attribute only sets display:none via the UA stylesheet, so any
   author rule (.btn { display:block }) silently beats it. Make it stick. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
main { width: 100%; max-width: 26rem; text-align: center; }
.logo { width: 64px; height: 64px; margin: 0 auto 20px; display: block; }
h1 { font-size: 1.4rem; margin: 0 0 8px; letter-spacing: -0.01em; }
p { color: var(--muted); margin: 0 0 20px; }
.spinner {
  width: 26px; height: 26px; margin: 0 auto 16px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.btn {
  display: block; width: 100%; padding: 14px 18px; margin: 0 0 10px;
  background: var(--brand); color: #fff; text-decoration: none;
  border-radius: 12px; font-weight: 600;
}
.btn.secondary { background: transparent; color: var(--brand); border: 1px solid var(--line); }
.row { display: flex; gap: 10px; }
.row .btn { margin-bottom: 10px; }
.note { font-size: 0.85rem; color: var(--muted); margin-top: 16px; }