:root {
  --bg: #1b0a10;
  --panel: rgba(77, 16, 39, .58);
  --maroon: #8c1d40;
  --deep: #4d1027;
  --gold: #ffc627;
  --gold-soft: rgba(255,198,39,.42);
  --text: #fff8e7;
  --muted: #c7b9ae;
  --display: 'Montserrat', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
}
html[data-theme='classic'] { --bg:#fff8e7; --panel:rgba(255,255,255,.82); --text:#251017; --muted:#66535a; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:var(--sans); }
body { overflow-x:hidden; }
.stage { min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; position:relative; padding:2rem 1.25rem 6rem; overflow:hidden; }
.stage::before { content:''; position:fixed; inset:0; background:linear-gradient(120deg,var(--bg) 0%,var(--deep) 52%,var(--maroon) 130%); z-index:0; }
html[data-theme='classic'] .stage::before { background:linear-gradient(120deg,#fff8e7,#f4e5dc 62%,#e9c7d2); }
.grid { position:fixed; inset:0; z-index:1; opacity:.28; background-image:linear-gradient(rgba(255,198,39,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(255,198,39,.11) 1px,transparent 1px),linear-gradient(135deg,transparent 48%,rgba(255,198,39,.07) 49%,transparent 50%); background-size:52px 52px,52px 52px,104px 104px; pointer-events:none; }
.flare { position:fixed; width:42rem; height:42rem; right:-14rem; top:-14rem; border-radius:50%; background:rgba(255,198,39,.11); filter:blur(90px); z-index:1; pointer-events:none; }
.panel { position:relative; z-index:3; width:min(100%,31rem); padding:clamp(2rem,5vw,3.4rem); border:1px solid rgba(255,198,39,.28); background:var(--panel); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 40px 110px rgba(0,0,0,.38); }
.mark { width:62px; height:62px; margin:0 auto 1.5rem; color:var(--gold); }
.mark svg { width:100%; height:100%; }
.eyebrow { margin:0; text-align:center; color:var(--gold); font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.34em; }
.title { margin:.75rem 0 0; text-align:center; font-family:var(--display); font-size:clamp(2.25rem,7vw,3.6rem); line-height:.98; font-weight:600; text-transform:uppercase; letter-spacing:-.02em; }
.divider { width:92px; height:1px; margin:1.4rem auto; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.lede { max-width:23rem; margin:0 auto 2rem; text-align:center; color:var(--muted); font-size:.88rem; line-height:1.7; font-weight:300; }
.label { display:block; margin-bottom:.55rem; color:var(--muted); font-size:.63rem; font-weight:600; text-transform:uppercase; letter-spacing:.26em; }
.field { position:relative; }
.field input { width:100%; border:1px solid rgba(255,198,39,.22); background:rgba(10,4,7,.38); color:var(--text); font:400 1rem var(--sans); padding:.9rem 3.15rem .9rem 1rem; outline:none; border-radius:0; caret-color:var(--gold); }
html[data-theme='classic'] .field input { background:rgba(255,255,255,.64); }
.field input::placeholder { color:color-mix(in srgb,var(--muted) 68%,transparent); }
.field input:focus-visible { border-color:var(--gold); box-shadow:0 0 0 1px rgba(255,198,39,.22),0 0 28px rgba(255,198,39,.08); }
.toggle { position:absolute; right:.4rem; top:50%; transform:translateY(-50%); width:2.5rem; height:2.5rem; display:grid; place-items:center; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.toggle:hover,.toggle:focus-visible { color:var(--gold); }
.eye { width:19px; height:19px; }.eye-hide{display:none}.toggle[aria-pressed='true'] .eye-show{display:none}.toggle[aria-pressed='true'] .eye-hide{display:block}
.message { min-height:1.2rem; margin:.7rem 0 .9rem; color:var(--muted); font-size:.78rem; }.message.error{color:#ffb5aa}.message.success{color:var(--gold)}
.submit { width:100%; min-height:3rem; border:1px solid var(--gold); background:var(--gold); color:#1b0a10; font:600 .7rem var(--sans); letter-spacing:.28em; text-transform:uppercase; cursor:pointer; position:relative; }
.submit:hover { filter:brightness(1.05); }.submit:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.submit:disabled{cursor:wait;opacity:.8}
.submit-loading{display:none;gap:.3rem;justify-content:center}.submit.loading .submit-label{display:none}.submit.loading .submit-loading{display:flex}.dot{width:4px;height:4px;border-radius:50%;background:#1b0a10;animation:pulse .8s infinite alternate}.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}@keyframes pulse{to{opacity:.25;transform:translateY(-2px)}}
.notice { margin:1.35rem 0 0; text-align:center; color:var(--muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.18em; }
.theme-wrap { position:absolute; z-index:4; bottom:1.75rem; left:0; right:0; display:flex; justify-content:center; }
.theme-toggle { display:flex; gap:1.1rem; align-items:center; padding:.55rem .85rem; border:1px solid rgba(255,198,39,.22); background:rgba(0,0,0,.16); color:var(--muted); font:500 .58rem var(--sans); text-transform:uppercase; letter-spacing:.18em; cursor:pointer; }
.theme-toggle span { color:var(--muted); transition:color .25s ease; }
html[data-theme='classic'] .theme-toggle span:first-child { color:var(--gold); }
html:not([data-theme='classic']) .theme-toggle span:last-child { color:var(--gold); }
.reveal { opacity:0; transform:translateY(8px); animation:reveal .65s cubic-bezier(.22,1,.36,1) forwards; }.r1{animation-delay:.1s}.r2{animation-delay:.18s}.r3{animation-delay:.27s}.r4{animation-delay:.36s}.r5{animation-delay:.45s}.r6{animation-delay:.58s}@keyframes reveal{to{opacity:1;transform:none}}
.stage.granted .panel { animation:grant .85s cubic-bezier(.22,1,.36,1) both; }@keyframes grant{to{opacity:0;transform:scale(.985);filter:blur(5px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
