:root { color-scheme: dark; --bg:#060a12; --panel:#0b101b; --line:#202b3e; --text:#f4f8ff; --muted:#8290a7; --cyan:#3ddcff; --blue:#168dff; --red:#ff667a; --green:#51e3a4; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { min-width:320px; min-height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:0; }
button, input { font:inherit; letter-spacing:0; }
button { color:inherit; }
.auth-shell { position:relative; min-height:100vh; overflow:hidden; background:#020616; }
.visual-stage { position:absolute; inset:0; min-height:100vh; overflow:hidden; background:#020616 url('/auth-visual.webp') left center/auto 90% no-repeat; }
.visual-stage::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(1,4,15,.02) 0,rgba(1,4,15,.02) 58%,rgba(1,4,15,.62) 76%,rgba(1,4,15,.94) 100%),linear-gradient(0deg,rgba(1,4,15,.62),transparent 24%,transparent 76%,rgba(1,4,15,.45)); }
.visual-stage::after { display:none; }
.stage-copy { display:none; }
.signal { display:flex; align-items:center; gap:9px; color:#b7eaff; font-size:12px; font-weight:800; }
.signal i { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 18px var(--cyan); animation:pulse 1.8s ease-in-out infinite; }
.stage-copy h1 { margin:15px 0 7px; font-size:clamp(48px,7vw,94px); line-height:.96; font-weight:850; text-shadow:0 8px 40px rgba(0,0,0,.55); }
.stage-copy p { margin:0; color:#d4deeb; font-size:clamp(16px,1.5vw,21px); }
.stage-metrics { display:none; }
.auth-panel { position:relative; z-index:2; width:min(470px,100%); min-height:100vh; display:grid; grid-template-rows:1fr auto; margin-left:auto; border-left:1px solid rgba(104,161,220,.24); background:rgba(5,9,18,.86); box-shadow:-28px 0 80px rgba(0,0,0,.3); backdrop-filter:blur(18px); }
.auth-inner { display:grid; align-items:center; padding:46px 48px; }
.auth-view { width:min(420px,100%); margin:auto; }
.mobile-brand { display:none; align-items:center; gap:10px; margin-bottom:44px; color:inherit; text-decoration:none; }
.mobile-brand span { width:38px; height:38px; display:grid; place-items:center; border:1px solid #34516d; background:#111b2b; color:var(--cyan); font-weight:900; }
.panel-head { margin-bottom:27px; }
.eyebrow { color:var(--cyan); font-size:11px; font-weight:800; }
.panel-head h2 { margin:10px 0 7px; font-size:30px; }
.panel-head p { margin:0; color:var(--muted); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:24px; padding:4px; border:1px solid var(--line); background:#080d16; }
.auth-tabs button { height:40px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-weight:750; }
.auth-tabs button.active { background:#162134; color:#fff; box-shadow:inset 0 -2px var(--cyan); }
.auth-form { display:grid; gap:16px; }
.auth-form label { display:grid; gap:8px; color:#b9c5d7; font-size:13px; font-weight:700; }
.auth-form input { width:100%; height:48px; padding:0 14px; border:1px solid #2b374a; border-radius:5px; outline:0; background:#080d16; color:var(--text); }
.auth-form input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(61,220,255,.1); }
.submit-button { height:50px; display:flex; align-items:center; justify-content:space-between; margin-top:5px; padding:0 17px; border:1px solid #41cfff; border-radius:5px; background:linear-gradient(110deg,#087ddd,#16b9ef); color:white; cursor:pointer; font-weight:850; box-shadow:0 12px 38px rgba(13,157,231,.2); }
.submit-button b { font-size:21px; }
.submit-button:disabled { opacity:.55; cursor:wait; }
.text-action, .resend-button { justify-self:center; border:0; background:transparent; color:#8fcfff; cursor:pointer; font-size:12px; }
.bonus-line { display:flex; justify-content:space-between; padding:11px 13px; border:1px solid #20354a; background:#0b1724; color:var(--muted); font-size:12px; }
.bonus-line strong { color:var(--green); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.notice { margin-top:18px; padding:12px 14px; border:1px solid #294058; background:#0c1826; color:#a9d9ff; line-height:1.55; font-size:13px; }
.notice.error { border-color:#5a2935; background:#211018; color:#ff9cab; }
.notice.success { border-color:#1f4d3b; background:#0d211a; color:#8ef0bf; }
.resend-button { width:100%; margin-top:10px; padding:9px; border:1px solid #294058; }
footer { display:flex; justify-content:space-between; padding:18px 26px; border-top:1px solid var(--line); color:#526077; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; }
@keyframes pulse { 50% { opacity:.45; transform:scale(.8); } }
@media (max-width:900px) { .auth-shell { overflow:visible; } .visual-stage { position:relative; inset:auto; min-height:230px; height:32vh; background-size:cover; background-position:center; } .visual-stage::before { background:linear-gradient(0deg,rgba(1,4,15,.5),transparent 45%); } .auth-panel { width:100%; min-height:68vh; margin:0; border-left:0; border-top:1px solid var(--line); background:#070c15; box-shadow:none; backdrop-filter:none; } .auth-inner { padding:42px 22px 54px; } }
@media (max-width:560px) { .visual-stage { min-height:180px; height:24vh; background-position:center; } .auth-inner { align-items:start; padding-top:34px; } .panel-head h2 { font-size:26px; } footer { padding:14px; } }