:root {
  color-scheme: dark;
  --base: #080b12; --surface: #141a25; --text: #f5f7fb;
  --muted: #b4bfce; --gold: #e6c277; --error: #ffb4ab;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color: var(--text); background: var(--base); font-size: 100%; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: env(safe-area-inset-top) 1.25rem max(1.5rem, env(safe-area-inset-bottom)); }
button, input, select, textarea { font-family: inherit; }
.brand { max-width: 30rem; margin: 2rem auto 3.5rem; display: flex; align-items: center; gap: .75rem; font-weight: 650; }
.brand svg { width: 2rem; height: 2rem; color: var(--gold); flex: none; }
.byline { font-size: .875rem; font-weight: 400; color: var(--muted); }
main { max-width: 30rem; margin: auto; }
h1 { font-size: clamp(2.15rem, 8vw, 3rem); font-weight: 650; line-height: 1.2; letter-spacing: -.035em; margin: 0 0 1rem; text-wrap: balance; }
.intro { color: var(--muted); margin: 0 0 2rem; }
.setup { background: rgba(20,26,37,.92); border: 1px solid #303847; border-top-color: #465060; border-radius: 1.75rem; padding: 1.5rem; backdrop-filter: blur(28px) saturate(190%); -webkit-backdrop-filter: blur(28px) saturate(190%); }
.status-heading { display: flex; gap: .65rem; align-items: center; }
.status-heading svg { height: 1.4rem; width: 1.4rem; color: var(--gold); flex: none; }
h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.5; margin: 0; }
.membership { background: linear-gradient(120deg, #30291b, #1c2029); border: 1px solid #6d5a35; border-radius: 1.1rem; padding: 1.25rem; margin-top: 1.25rem; display: grid; gap: .5rem; }
.membership-title { color: var(--gold); font-size: 1.1rem; font-weight: 650; }
.account { font-size: 1.5rem; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.membership-meta { color: var(--muted); font-size: .875rem; }
#message { color: var(--muted); overflow-wrap: anywhere; }
button { min-height: 3rem; width: 100%; border-radius: 1rem; padding: .8rem 1rem; border: 1px solid transparent; font-size: 1rem; font-weight: 650; line-height: 1.5; background: var(--gold); color: #201909; cursor: pointer; touch-action: manipulation; transition: transform 120ms ease-out, background-color 160ms ease; }
button:active { transform: scale(.98); }
button:disabled { opacity: .6; cursor: wait; }
button.secondary { background: #222c3d; color: var(--text); border-color: #4c5d77; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.instructions { margin: 2.5rem 0; }
ol { padding-left: 1.3rem; }
li { padding-left: .4rem; margin: .8rem 0; }
.instructions p, footer p { font-size: .875rem; color: var(--muted); }
footer { border-top: 1px solid #303847; padding: 1.25rem 0; }
a { color: var(--gold); text-underline-offset: .3em; display: inline-block; padding: .6rem 0; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:active { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .setup { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { .setup { background: var(--surface); border-color: var(--muted); } :root { --muted: #d1d9e5; } }