*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg:#08060f; --violet:#6d28d9; --violet2:#7c3aed; --gold2:#fbbf24; --frost:#f0e6ff; --muted:#7c6f99; --font-display:'Cinzel',serif; --font-body:'Inter',sans-serif; }
html { overflow-x:hidden; }
body { min-height:100vh; margin:0; color:var(--frost); background:var(--bg); font-family:var(--font-body); }
.page-bg { position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 70% 50% at 15% 0%,rgba(109,40,217,.18) 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 85% 100%,rgba(192,38,211,.14) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 50% 50%,rgba(245,158,11,.05) 0%,transparent 60%); }
.page-bg::after { content:''; position:absolute; inset:0; opacity:.6; background-image:radial-gradient(1px 1px at 20% 15%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1px 1px at 60% 30%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1px 1px at 80% 70%,rgba(255,255,255,.35) 0%,transparent 100%),radial-gradient(1px 1px at 35% 80%,rgba(255,255,255,.25) 0%,transparent 100%),radial-gradient(1px 1px at 90% 10%,rgba(255,255,255,.4) 0%,transparent 100%); background-size:400px 400px; }
.register-container { position:relative; z-index:1; width:min(100% - 32px,440px); margin:80px auto 96px; padding:40px; border:1px solid rgba(109,40,217,.35); border-radius:24px; background:linear-gradient(160deg,#100d1a 0%,#16102a 100%); box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 60px -20px rgba(109,40,217,.4); }
.register-container h2 { margin-bottom:28px; color:var(--frost); font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:.02em; text-align:center; }
.message { margin-bottom:20px; padding:12px 16px; color:var(--gold2); border:1px solid rgba(245,158,11,.3); border-radius:10px; background:rgba(245,158,11,.08); font-size:13px; text-align:center; }
form { display:flex; flex-direction:column; }
label { margin-bottom:8px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.5px; }
input[type="text"],input[type="email"],input[type="password"] { width:100%; margin-bottom:18px; padding:12px 16px; color:var(--frost); border:1px solid rgba(109,40,217,.35); border-radius:10px; outline:none; background:rgba(255,255,255,.05); font-family:var(--font-body); font-size:15px; transition:border-color .2s,box-shadow .2s,background .2s; }
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus { border-color:var(--violet2); box-shadow:0 0 0 3px rgba(109,40,217,.2); background:rgba(255,255,255,.07); }
input::placeholder { color:rgba(240,230,255,.42); opacity:1; }
.password-wrapper { position:relative; }
.password-wrapper input { margin-bottom:18px; padding-right:48px; }
.toggle-password { position:absolute; top:12px; right:14px; cursor:pointer; font-size:16px; opacity:.8; transition:opacity .2s; user-select:none; }
.toggle-password:hover { opacity:1; }
.referral-help { margin:-10px 0 18px; color:var(--muted); font-size:11px; line-height:1.45; }
button[type="submit"] { margin-top:6px; padding:13px; color:#fff; border:0; border-radius:10px; background:linear-gradient(135deg,var(--violet),var(--violet2)); box-shadow:0 4px 20px rgba(109,40,217,.4); cursor:pointer; font-size:15px; font-weight:600; transition:opacity .2s,transform .2s; }
button[type="submit"]:hover { opacity:.9; transform:translateY(-1px); }
@media(max-width:520px){.register-container{margin-top:40px;padding:28px 22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}