:root { --bg:#070a12; --panel:rgba(15,21,38,.86); --text:#f7f9ff; --muted:#8f9ab3; --cyan:#00e7ff; --blue:#4177ff; --violet:#9c5cff; --border:rgba(154,174,218,.16); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--text); font-family:Inter,"Segoe UI",Arial,sans-serif; background:radial-gradient(circle at 12% 10%,rgba(38,75,178,.2),transparent 30%),radial-gradient(circle at 90% 85%,rgba(130,42,181,.16),transparent 28%),var(--bg); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,#000,transparent 78%); }
.auth-glow { position:fixed; width:350px; height:350px; border-radius:50%; filter:blur(130px); opacity:.16; pointer-events:none; }
.glow-one { left:-150px; bottom:0; background:var(--cyan); } .glow-two { right:-120px; top:-60px; background:var(--violet); }
.auth-shell { position:relative; min-height:100vh; width:min(1180px,calc(100% - 48px)); margin:auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.7fr); align-items:center; gap:90px; padding:64px 0; }
.auth-brand { position:absolute; top:38px; left:0; display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; letter-spacing:.8px; font-size:18px; }
.auth-brand b { color:var(--cyan); }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; border:1px solid rgba(0,231,255,.42); background:linear-gradient(145deg,rgba(0,231,255,.2),rgba(156,92,255,.15)); box-shadow:0 0 25px rgba(0,231,255,.16); }
.brand-mark i,.brand-mark::before { content:""; position:absolute; width:18px; height:9px; border:2px solid var(--cyan); border-left-color:transparent; border-radius:50%; transform:rotate(-22deg); }
.brand-mark i { width:10px; height:4px; border-color:#ff4fd8; border-left-color:transparent; }
.eyebrow { margin:0; color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:1.9px; }
.auth-intro h1 { max-width:680px; margin:18px 0; font-size:clamp(42px,5vw,68px); line-height:1.03; letter-spacing:-3px; }
.auth-intro h1 span { background:linear-gradient(90deg,var(--cyan),#7d8aff 60%,#d76aff); color:transparent; background-clip:text; }
.auth-intro>p:not(.eyebrow) { max-width:590px; color:#a5b1c9; font-size:17px; line-height:1.75; }
.feature-list { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.feature-list span { padding:11px 14px; color:#bdc7da; font-size:12px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.025); }
.feature-list i { color:var(--cyan); font-style:normal; margin-right:7px; }
.auth-card { padding:30px; border:1px solid rgba(100,135,220,.22); border-radius:26px; background:var(--panel); backdrop-filter:blur(22px); box-shadow:0 30px 90px rgba(0,0,0,.4); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:13px; background:rgba(255,255,255,.035); }
.auth-tabs button { border:0; padding:10px; border-radius:10px; color:var(--muted); background:transparent; font-weight:700; cursor:pointer; }
.auth-tabs button.active { color:var(--text); background:linear-gradient(135deg,rgba(0,231,255,.15),rgba(65,119,255,.15)); box-shadow:inset 0 0 0 1px rgba(0,231,255,.18); }
.auth-heading { margin:28px 0 23px; }.auth-heading h2 { margin:7px 0; font-size:27px; }.auth-heading p:last-child { margin:0; color:var(--muted); font-size:13px; }
form { display:grid; gap:17px; } label { display:grid; gap:8px; color:#bcc7db; font-size:12px; font-weight:700; }
input { width:100%; border:1px solid var(--border); border-radius:12px; padding:13px 14px; outline:none; color:var(--text); background:rgba(5,9,19,.7); transition:.2s; }
input:focus { border-color:rgba(0,231,255,.5); box-shadow:0 0 0 3px rgba(0,231,255,.07); }
.password-field { position:relative; }.password-field input { padding-right:62px; }.password-field button { position:absolute; right:7px; top:7px; border:0; padding:7px; color:var(--cyan); background:transparent; font-size:10px; font-weight:800; cursor:pointer; }
.submit-button { display:flex; justify-content:space-between; align-items:center; margin-top:4px; padding:13px 15px; border:0; border-radius:13px; color:white; font-weight:800; cursor:pointer; background:linear-gradient(135deg,#0bd9f2,#5275ff 70%,#8a5fff); box-shadow:0 10px 32px rgba(41,128,255,.25); }
.submit-button:disabled { opacity:.65; cursor:wait; }.submit-button.loading i { animation:pulse .7s infinite alternate; } @keyframes pulse { to { transform:translateX(4px); } }
.auth-error { padding:11px 13px; border:1px solid rgba(255,85,118,.28); border-radius:11px; color:#ff9caf; background:rgba(255,85,118,.08); font-size:12px; line-height:1.5; }
.auth-note { margin:20px 0 0; padding-top:18px; border-top:1px solid var(--border); color:#66738d; font-size:10px; line-height:1.5; text-align:center; }
[hidden] { display:none!important; }
@media(max-width:850px){.auth-shell{grid-template-columns:1fr;gap:45px;width:min(520px,calc(100% - 32px));padding:110px 0 44px}.auth-intro h1{font-size:44px}.auth-intro>p:not(.eyebrow),.feature-list{display:none}.auth-brand{top:30px}.auth-card{padding:24px}}
@media(max-width:460px){.auth-intro h1{font-size:37px;letter-spacing:-2px}.auth-shell{gap:28px}.auth-card{padding:20px;border-radius:20px}}