:root{ --accent:#6366f1; --accent3:#a855f7; --bg:#070b16; --line:#1e2a44; --txt:#e7ecf5; --muted:#8a98b5; }
*{ box-sizing:border-box; }
body{ margin:0; min-height:100vh; font-family:'Inter',sans-serif; background:var(--bg); color:var(--txt); display:grid; place-items:center; overflow:hidden; }
body::before{ content:""; position:fixed; inset:0; z-index:0;
    background:radial-gradient(closest-side at 20% 20%,rgba(99,102,241,.28),transparent),
               radial-gradient(closest-side at 80% 30%,rgba(6,182,212,.2),transparent),
               radial-gradient(closest-side at 60% 95%,rgba(168,85,247,.2),transparent); }
.card{ position:relative; z-index:1; width:min(440px,92vw); background:rgba(15,24,40,.75); backdrop-filter:blur(16px);
    border:1px solid var(--line); border-radius:22px; padding:2.4rem; box-shadow:0 40px 90px -30px #000; }
.brand{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.4rem; }
.brand img{ max-height:40px; } .brand .lf{ width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent3)); color:#fff; font-weight:800; font-family:'Sora'; }
.brand b{ font-family:'Sora'; }
h2{ font-family:'Sora'; margin:.2rem 0; font-size:1.4rem; } .sub{ color:var(--muted); font-size:.9rem; margin-bottom:1.4rem; }
label{ display:block; font-size:.8rem; margin:.9rem 0 .35rem; font-weight:500; }
input{ width:100%; padding:.75rem .9rem; border-radius:12px; border:1px solid var(--line); background:#0b1322; color:var(--txt); font-size:.95rem; transition:.2s; }
input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.25); }
.inp{ position:relative; }
.inp i{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--muted); }
.inp input{ padding-left:2.5rem; }
button{ width:100%; margin-top:1.4rem; padding:.85rem; border:none; border-radius:12px; cursor:pointer; font-weight:600;
    font-size:.98rem; font-family:'Inter',sans-serif; transition:.2s;
    color:#fff; background:linear-gradient(100deg,var(--accent),var(--accent3)); box-shadow:0 14px 30px -12px var(--accent); }
button:hover{ filter:brightness(1.08); transform:translateY(-1px); }
#bg{ position:fixed; inset:0; z-index:0; }
a.link{ color:#a5b4fc; font-size:.85rem; text-decoration:none; } a.link:hover{ color:#a5b4fc; text-decoration:none; }
.flash{ background:rgba(16,185,129,.12); color:#10b981; border:1px solid rgba(16,185,129,.3); padding:.7rem 1rem; border-radius:12px; font-size:.85rem; margin-bottom:1rem; }
.errs{ background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.3); padding:.7rem 1rem; border-radius:12px; font-size:.85rem; margin-bottom:1rem; }
.errs ul{ margin:0; padding-left:1.1rem; }
.row{ display:flex; justify-content:space-between; align-items:center; margin-top:1.1rem; }