:root{--bg:#05070d;--panel:#141722;--panel-border:rgba(255,255,255,.09);--text:#eef2ff;--muted:#a4acc6;--primary:#1f66ff;--primary-2:#0f44b8;--ok:#22c55e;--error:#ef4444}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text)}
.login-layout{min-height:100vh;display:grid;grid-template-columns:1fr 1.2fr}
.login-pane{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px;background:radial-gradient(100% 80% at 20% 15%,rgba(31,102,255,.22),transparent 60%),var(--bg)}
.logo-wrap{width:min(520px,100%);margin-bottom:24px}
.logo-mark{width:58px;height:58px;border:2px solid rgba(255,255,255,.35);border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:32px;color:#7ac0ff;background:rgba(255,255,255,.03)}
.login-card{width:min(520px,100%);background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;padding:30px 26px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.welcome{font-size:14px;color:var(--muted);margin:0 0 8px}
h1{font-size:42px;line-height:1.08;margin:0 0 20px;font-weight:800}
.login-form{display:flex;flex-direction:column;gap:10px}
label{font-size:13px;color:var(--muted)}
input{background:#11151f;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:var(--text);padding:12px 14px;font:inherit;font-size:15px;outline:none}
input:focus{border-color:#5d9dff;box-shadow:0 0 0 3px rgba(31,102,255,.22)}
.row-between{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.hint{font-size:12px;color:#5ca8ff}
button{margin-top:8px;background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#fff;border:none;border-radius:10px;padding:12px 16px;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
button:disabled{opacity:.7;cursor:wait}
.login-msg{font-size:13px;color:var(--muted);min-height:20px;margin:6px 0 0}
.hero-pane{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0f2f9a 0%,#1b52d7 55%,#2f7cff 100%)}
.hero-bg::before{content:'';position:absolute;inset:8% 10%;border:1px solid rgba(255,255,255,.18);border-radius:28px;transform:skewY(-6deg);opacity:.32}
.hero-bg::after{content:'';position:absolute;width:480px;height:480px;right:-120px;bottom:-120px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.24),rgba(255,255,255,0));}
.hero-content{position:relative;padding:44px 54px 58px;max-width:560px}
.hero-content h2{margin:0 0 8px;font-size:34px;line-height:1.1}
.hero-content p{margin:0;color:#d6e3ff;font-size:16px;line-height:1.6}
@media (max-width:980px){.login-layout{grid-template-columns:1fr}.hero-pane{display:none}.login-pane{padding:22px}h1{font-size:34px}}