:root { --bg:#05070d; --text:#eef6ff; --muted:#93a8bd; --line:rgba(255,255,255,.14); --brand:#9be7ff; --accent:#33f0b6; --danger:#ff6b8a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:28px; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); background: radial-gradient(circle at 20% 0%, rgba(51,240,182,.15), transparent 32rem), radial-gradient(circle at 90% 10%, rgba(167,139,250,.16), transparent 34rem), var(--bg); }
a { color:inherit; text-decoration:none; }
.login-shell { width:min(100%, 1040px); display:grid; grid-template-columns:1fr 430px; gap:22px; align-items:stretch; }
.brand-panel, .login-card { border:1px solid var(--line); border-radius:30px; background:rgba(255,255,255,.06); box-shadow:0 28px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.brand-panel { padding:42px; display:flex; flex-direction:column; justify-content:space-between; min-height:560px; position:relative; overflow:hidden; }
.brand-panel::after { content:""; position:absolute; width:520px; height:520px; border-radius:50%; right:-220px; bottom:-230px; background:conic-gradient(from 0deg, rgba(155,231,255,.16), transparent, rgba(51,240,182,.16), transparent); filter:blur(5px); }
.brand { display:flex; align-items:center; gap:13px; position:relative; z-index:2; }
.brand img { width:48px; height:48px; filter:drop-shadow(0 0 18px rgba(155,231,255,.38)); }
.brand strong { display:block; }
.brand small { display:block; color:var(--muted); margin-top:3px; }
h1 { font-size:clamp(2.7rem, 6vw, 5.8rem); line-height:.98; letter-spacing:-.06em; margin:0; max-width:700px; position:relative; z-index:2; }
p { color:var(--muted); line-height:1.6; font-size:1.04rem; position:relative; z-index:2; }
.login-card { padding:32px; display:flex; flex-direction:column; justify-content:center; }
.kicker { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:900; margin:0 0 10px; }
h2 { margin:0 0 8px; font-size:2rem; letter-spacing:-.04em; }
label { display:grid; gap:8px; margin-top:16px; color:var(--muted); font-weight:750; }
input { width:100%; min-height:50px; border:1px solid var(--line); border-radius:15px; background:rgba(0,0,0,.22); color:var(--text); padding:0 14px; outline:none; }
input:focus { border-color:rgba(155,231,255,.55); box-shadow:0 0 0 3px rgba(155,231,255,.08); }
button { margin-top:20px; width:100%; min-height:52px; border:0; border-radius:999px; font-weight:950; color:#041014; background:linear-gradient(135deg, var(--brand), var(--accent)); cursor:pointer; }
.back { display:inline-flex; margin-top:18px; color:var(--muted); }
.error { border:1px solid rgba(255,107,138,.35); color:#ffdbe3; background:rgba(255,107,138,.08); padding:12px 14px; border-radius:15px; margin:14px 0 0; }
.notice { margin-top:18px; border-top:1px solid var(--line); padding-top:18px; font-size:.92rem; }
@media (max-width:880px){ .login-shell{grid-template-columns:1fr;} .brand-panel{min-height:380px;} }