:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --purple:#8b5cf6; --muted:#8f96aa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: #f8f8fc; background: #090b13; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(440px, 1.15fr) minmax(400px, .85fr); }
.welcome { position: relative; overflow: hidden; padding: 48px clamp(40px, 6vw, 92px); display: flex; flex-direction: column; background: radial-gradient(circle at 75% 30%, rgba(139,92,246,.23), transparent 35%), linear-gradient(145deg,#111328,#090b13 70%); border-right: 1px solid rgba(255,255,255,.07); }
.welcome::after { content:""; position:absolute; width:680px; height:680px; right:-300px; bottom:-310px; border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 25px,rgba(139,92,246,.065) 26px 27px); }
.brand { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.brand > span, .mobile-brand { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(145deg,#9b6bff,#6942df); font-weight:900; font-size:21px; box-shadow:0 10px 35px rgba(139,92,246,.35); }
.brand strong,.brand small { display:block; }.brand strong{font-size:17px}.brand small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.14em;margin-top:3px}
.welcome-copy { margin:auto 0; max-width:700px; position:relative; z-index:1; }.welcome-copy p,.eyebrow{color:#9b89d0;text-transform:uppercase;letter-spacing:.17em;font-size:10px;font-weight:800}.welcome-copy h1{font-size:clamp(45px,5vw,72px);line-height:1.02;letter-spacing:-.06em;margin:14px 0 22px}.welcome-copy h1 em{color:#b79bff;font-style:normal}.welcome-copy > span{color:#989fb4;line-height:1.75;font-size:14px;max-width:570px;display:block}
.feature-row { display:flex; gap:25px; color:#858ca0; font-size:11px; position:relative; z-index:1; }.feature-row span::first-letter{color:#a889ff}
.login-panel { display:grid; place-items:center; padding:40px; background:radial-gradient(circle at 50% 20%,rgba(34,211,238,.05),transparent 30%); }
.login-card { width:min(100%,390px); }.mobile-brand{display:none}.login-card h2{font-size:34px;letter-spacing:-.05em;margin:9px 0 6px}.subhead{color:var(--muted);font-size:13px;margin:0 0 30px}.login-card label{display:block;color:#a7adbd;font-size:11px;margin:15px 0 8px}.login-card input{width:100%;background:#111420;border:1px solid rgba(255,255,255,.09);border-radius:11px;padding:13px;color:white;outline:none}.login-card input:focus{border-color:rgba(139,92,246,.75);box-shadow:0 0 0 3px rgba(139,92,246,.12)}.login-card button{width:100%;margin-top:22px;border:0;border-radius:11px;padding:13px 16px;background:linear-gradient(135deg,#8b5cf6,#6d4bea);color:white;font-weight:750;cursor:pointer;display:flex;justify-content:space-between}.login-card button:hover{filter:brightness(1.12);transform:translateY(-1px)}.login-card > small{display:block;text-align:center;color:#62697d;font-size:10px;margin-top:18px;line-height:1.5}
.error-message:empty{display:none}.error-message{border:1px solid rgba(251,113,133,.3);background:rgba(251,113,133,.08);color:#fb7185;border-radius:9px;padding:10px;font-size:11px;margin:15px 0}
@media(max-width:850px){.login-shell{grid-template-columns:1fr}.welcome{display:none}.login-panel{padding:28px}.mobile-brand{display:grid;margin-bottom:35px}}