*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#05080F;--bg2:#0A0F1E;--card:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.14);
  --primary:#1B42FF;--electric:#4D72FF;--sky:#5B9BF8;--teal:#22D3EE;--green:#10B981;--gold:#F59E0B;--red:#EF4444;
  --muted:#5A6A8A;--muted2:#8A9BBF;--ghost:#E8EFFF;--white:#fff;
  --display:'Sora',sans-serif;--body:'DM Sans',sans-serif;--mono:'JetBrains Mono',monospace;
  --logo:url('assets/logo.png');
}
html{scroll-behavior:smooth;scrollbar-width:none}html::-webkit-scrollbar{display:none}
body{background:var(--bg);color:var(--white);font-family:var(--body);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.fx{position:fixed;inset:0;pointer-events:none;z-index:0}
.fx-grid{background-image:linear-gradient(rgba(91,155,248,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(91,155,248,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 35%,#000,transparent 75%);opacity:.6}
#particles{position:fixed;inset:0;z-index:0}
.glow{position:fixed;left:50%;top:30%;transform:translate(-50%,-50%);width:900px;height:900px;max-width:130vw;background:radial-gradient(circle,rgba(27,66,255,.16),transparent 62%);filter:blur(30px);z-index:0;pointer-events:none}
.logo-mark-img{background:var(--logo) center/cover no-repeat;display:inline-block;flex:none;border-radius:9px}

nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 40px;backdrop-filter:blur(18px);background:linear-gradient(180deg,rgba(5,8,15,.85),rgba(5,8,15,.35));border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;letter-spacing:.01em;font-size:19px;white-space:nowrap}
.logo .logo-mark-img{width:34px;height:34px}
.nav-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted2);padding:10px 18px;border:1px solid var(--border);border-radius:30px;transition:all .25s}
.nav-back:hover{color:#fff;border-color:var(--border2)}

.portal{position:relative;z-index:5;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:130px 24px 80px;text-align:center}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--sky);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--sky);opacity:.7}
.p-h{font-family:var(--display);font-weight:700;font-size:clamp(34px,5vw,62px);line-height:1.04;margin:18px 0 0;letter-spacing:-.02em}
.p-sub{color:var(--muted2);max-width:46ch;margin:18px auto 0;font-size:16px}

.auth{position:relative;width:min(440px,100%);margin:46px auto 0;border-radius:24px;border:1px solid var(--border2);background:linear-gradient(180deg,rgba(13,19,38,.86),rgba(8,12,24,.86));backdrop-filter:blur(22px);padding:36px 32px;box-shadow:0 40px 100px -40px rgba(27,66,255,.5);overflow:hidden}
.auth::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1px;background:linear-gradient(150deg,rgba(77,114,255,.6),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.state{display:none}
.state.on{display:block;animation:fade .5s cubic-bezier(.16,1,.3,1)}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.auth h3{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.01em}
.auth p.note{color:var(--muted);font-size:13.5px;margin-top:10px;line-height:1.6}
.conn{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.cbtn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;padding:15px;border-radius:13px;font-weight:600;font-size:15px;cursor:pointer;border:1px solid var(--border2);transition:transform .15s,background .25s,box-shadow .3s}
.cbtn svg{width:19px;height:19px;fill:currentColor}
.cbtn.discord{background:#5865F2;color:#fff;border-color:transparent}
.cbtn.discord:hover{box-shadow:0 12px 30px -10px rgba(88,101,242,.7)}
.cbtn:active{transform:scale(.98)}
.divider{display:flex;align-items:center;gap:12px;margin:22px 0 6px;color:var(--muted);font-size:11px;font-family:var(--mono);letter-spacing:.1em}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.spinner{width:46px;height:46px;margin:6px auto 18px;border-radius:50%;border:3px solid rgba(255,255,255,.1);border-top-color:var(--electric);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:14px 26px;border-radius:40px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .3s,background .3s}
.btn-p{background:var(--primary);color:#fff;box-shadow:0 10px 30px rgba(27,66,255,.45)}
.btn-g{background:rgba(255,255,255,.05);border-color:var(--border2);color:var(--ghost)}
.btn:active{transform:scale(.98)}
.row{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.fail-ic{width:60px;height:60px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:var(--red);font-size:28px}

/* membership card */
.member{display:flex;flex-direction:column;align-items:center}
.welcome{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:18px;display:inline-flex;align-items:center;gap:8px}
.welcome .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.card{position:relative;width:100%;aspect-ratio:1.6/1;border-radius:18px;overflow:hidden;border:1px solid var(--border2);background:linear-gradient(135deg,#10204f,#0a1330 55%,#0a1a3e);text-align:left;padding:22px;box-shadow:0 30px 70px -28px rgba(27,66,255,.7)}
.card .holo{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(91,155,248,.22) 45%,rgba(34,211,238,.16) 52%,transparent 62%);mix-blend-mode:screen;opacity:.9}
.card .wm{position:absolute;right:-24px;bottom:-30px;width:170px;height:170px;opacity:.12}
.card .ct{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;justify-content:space-between}
.card .top{display:flex;align-items:center;justify-content:space-between}
.card .brand{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.14em}
.card .tier{font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:5px 10px;border-radius:20px;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.5);color:var(--gold)}
.card .name{font-family:var(--display);font-weight:700;font-size:clamp(20px,6vw,26px);letter-spacing:.02em}
.card .handle{font-family:var(--mono);font-size:12px;color:var(--sky);margin-top:2px}
.card .meta{display:flex;gap:22px;margin-top:2px}
.card .meta div .l{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
.card .meta div .v{font-family:var(--mono);font-size:14px;font-weight:700;margin-top:2px}
.card .id{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:11px;color:var(--muted2)}

.demo{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:40;display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);background:rgba(8,12,24,.8);border:1px solid var(--border);border-radius:30px;padding:7px 12px;backdrop-filter:blur(10px)}
.demo b{color:var(--muted2);letter-spacing:.1em}
.demo button{font-family:var(--mono);font-size:11px;color:var(--muted2);background:transparent;border:1px solid var(--border);border-radius:20px;padding:5px 11px;cursor:pointer;transition:all .2s}
.demo button:hover{color:#fff;border-color:var(--electric)}
.portal-pfp{width:72px;height:72px;border-radius:50%;margin:8px auto 14px;background:conic-gradient(from 180deg,var(--electric),var(--teal),var(--primary),var(--electric));padding:2px}
.portal-pfp img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#0a1120}
@media(max-width:480px){.portal{padding:110px 16px 70px}nav{padding:14px 18px}.auth{padding:26px 20px}}