:root{ --accent:#6366f1; --accent2:#06b6d4; --accent3:#a855f7; --bg:#070b16; --panel:#0f1828; --line:#1e2a44; --txt:#e7ecf5; --muted:#8a98b5; }
*{ box-sizing:border-box; }
body{ margin:0; min-height:100vh; font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--txt); overflow:hidden; }
h1,h2,.display{ font-family:'Sora',sans-serif; letter-spacing:-.02em; }
#bg{ position:fixed; inset:0; z-index:0; }
body::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(closest-side at 18% 20%, rgba(99,102,241,.28), transparent),
      radial-gradient(closest-side at 82% 18%, rgba(6,182,212,.22), transparent),
      radial-gradient(closest-side at 60% 95%, rgba(168,85,247,.2), transparent); }
.wrap{ position:relative; z-index:2; min-height:100vh; display:flex; }
.promo{ flex:1; padding:4rem 4rem; display:flex; flex-direction:column; justify-content:center; }
.promo .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2); }
.promo h1{ font-size:3rem; font-weight:800; line-height:1.05; margin:1rem 0; max-width:12ch;
    background:linear-gradient(120deg,#fff,#a5b4fc 60%,#67e8f9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.promo p{ color:var(--muted); max-width:46ch; font-size:1.05rem; line-height:1.6; }
.feats{ display:flex; gap:1.4rem; margin-top:2rem; flex-wrap:wrap; }
.feat{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--txt); }
.feat i{ width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent3)); }
.auth{ width:480px; max-width:100%; padding:2.5rem; display:flex; align-items:center; }
.card{ width:100%; background:rgba(15,24,40,.72); backdrop-filter:blur(18px); 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.6rem; }
.brand img{ max-height:42px; } .brand .lf{ width:42px;height:42px;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'; font-size:1.15rem; }
.card h2{ font-size:1.5rem; margin:.2rem 0 .2rem; }
.card .sub{ color:var(--muted); font-size:.9rem; margin-bottom:1.6rem; }
label{ display:block; font-size:.8rem; color:var(--txt); margin:1rem 0 .4rem; font-weight:500; }
.inp{ position:relative; }
.inp i{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--muted); }
input[type=email],input[type=password]{ width:100%; padding:.8rem .9rem .8rem 2.5rem; 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); }
.row{ display:flex; align-items:center; gap:.5rem; margin-top:1rem; font-size:.85rem; color:var(--muted); }
button{ width:100%; margin-top:1.6rem; padding:.85rem; border:none; border-radius:12px; cursor:pointer; font-weight:600; font-size:.98rem;
    color:#fff; background:linear-gradient(100deg,var(--accent),var(--accent3)); box-shadow:0 14px 30px -12px var(--accent); transition:.2s; }
button:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.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; }
@media(max-width:980px){ .promo{ display:none; } .wrap{ justify-content:center; } .auth{ width:100%; } }