:root{--login-blue:#2563eb;--login-blue-light:#60a5fa;--login-bg:#030712;--login-card:#071226;--login-line:rgba(96,165,250,.2)}
body.login-page{min-height:100vh;margin:0;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 14% 10%,rgba(37,99,235,.26),transparent 34%),radial-gradient(circle at 88% 8%,rgba(14,165,233,.15),transparent 30%),linear-gradient(145deg,#020617,#071126 58%,#030712);color:#fff;overflow-x:hidden}
body.login-page:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(96,165,250,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent)}
.login-shell{position:relative;width:min(1020px,100%);min-height:600px;display:grid;grid-template-columns:1.08fr .92fr;align-items:stretch;padding:0;border-radius:34px;overflow:hidden;background:linear-gradient(145deg,rgba(9,24,52,.96),rgba(3,9,23,.98));border:1px solid rgba(96,165,250,.18);box-shadow:0 38px 120px rgba(0,0,0,.52)}
.login-brand{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:64px;background:radial-gradient(circle at 0 0,rgba(59,130,246,.31),transparent 40%),linear-gradient(145deg,rgba(15,46,96,.76),rgba(4,17,39,.86));border-right:1px solid rgba(96,165,250,.14);text-align:left}
.login-brand:after{content:"";position:absolute;width:260px;height:260px;right:-110px;bottom:-110px;border-radius:50%;border:1px solid rgba(96,165,250,.16);box-shadow:0 0 0 34px rgba(59,130,246,.035),0 0 0 70px rgba(59,130,246,.025)}
.login-brand-icon{width:70px;height:70px;border-radius:23px;display:grid;place-items:center;margin-bottom:28px;background:linear-gradient(145deg,#1d4ed8,#38bdf8);box-shadow:0 18px 40px rgba(37,99,235,.35)}.login-brand-icon img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 7px 10px rgba(0,0,0,.3))}
.login-kicker,.login-card-head>span{color:#7dd3fc;font-size:11px;font-weight:900;letter-spacing:.16em}.login-brand h1{margin:10px 0 14px;color:#fff;font-size:clamp(44px,6vw,72px);line-height:.9;letter-spacing:-.055em;text-shadow:none}.login-brand p{max-width:420px;margin:0;color:rgba(219,234,254,.7);font-size:16px;line-height:1.6;text-transform:none;letter-spacing:0}
.login-card{display:flex;flex-direction:column;justify-content:center;padding:58px 52px;margin:0;border:0;border-radius:0;background:rgba(3,10,25,.7);box-shadow:none}.login-card-head{margin-bottom:28px}.login-card-head h2{margin:8px 0 7px;font-size:34px;letter-spacing:-.04em}.login-card-head p{margin:0;color:rgba(219,234,254,.55);line-height:1.5}
.login-form{display:grid;gap:18px}.login-form label{display:grid;gap:9px;color:#dbeafe;font-size:13px;font-weight:800}.login-form .input{width:100%;height:54px;margin:0;padding:0 16px;border-radius:15px;border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.72);color:#fff;outline:0;transition:.2s}.login-form .input:focus{border-color:#60a5fa;background:rgba(15,36,75,.78);box-shadow:0 0 0 4px rgba(59,130,246,.13)}.login-submit{height:56px;margin-top:5px;border:0;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;font-size:15px;font-weight:900;box-shadow:0 16px 35px rgba(37,99,235,.28);cursor:pointer;transition:.2s}.login-submit:hover{transform:translateY(-2px);filter:brightness(1.06)}.login-submit span{font-size:20px}.login-error{margin:0 0 18px;border-radius:14px;background:rgba(239,68,68,.11);border:1px solid rgba(248,113,113,.22);color:#fecaca}.login-forgot{position:absolute;right:52px;bottom:76px;color:#93c5fd;font-size:13px;text-decoration:none}.login-footer{position:absolute;right:52px;bottom:36px;color:rgba(148,163,184,.45);font-size:11px;letter-spacing:.08em}
@media(max-width:800px){
body.login-page{width:100%;height:100dvh;min-height:100dvh;overflow:hidden;padding:10px;place-items:center}
.login-shell{width:100%;max-height:calc(100dvh - 20px);min-height:0;grid-template-columns:1fr;grid-template-rows:auto 1fr;border-radius:24px;overflow:hidden}
.login-brand{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:18px 20px 16px;border-right:0;border-bottom:1px solid rgba(96,165,250,.14)}
.login-brand-icon{grid-row:1/3;width:48px;height:48px;border-radius:16px;margin:0}.login-brand-icon img{width:30px;height:30px}
.login-kicker{align-self:end;font-size:9px}.login-brand h1{align-self:start;margin:3px 0 0;font-size:31px;line-height:1}.login-brand p{display:none}
.login-card{min-height:0;padding:22px 20px 86px;justify-content:center}.login-card-head{margin-bottom:18px}.login-card-head h2{margin:5px 0 3px;font-size:27px}.login-card-head p{font-size:12px;line-height:1.35}
.login-form{gap:13px}.login-form label{gap:6px}.login-form .input{height:48px}.login-submit{height:50px}
.login-forgot{left:20px;right:auto;bottom:53px}.login-footer{left:20px;right:auto;bottom:22px}
}
@media(max-width:800px) and (max-height:650px){
.login-brand{padding:12px 18px}.login-brand-icon{width:42px;height:42px}.login-brand-icon img{width:27px;height:27px}.login-brand h1{font-size:27px}
.login-card{padding:14px 18px 68px}.login-card-head{margin-bottom:10px}.login-card-head p{display:none}.login-form{gap:9px}.login-form .input{height:44px}.login-submit{height:46px}
.login-forgot{left:18px;bottom:42px;font-size:12px}.login-footer{left:18px;bottom:15px}
}