.login-page{background-color:#eef5f6;padding:32px;overflow-x:hidden}
.login-layout{width:min(980px,100%);display:grid;grid-template-columns:minmax(340px,410px) minmax(290px,350px);gap:110px;align-items:center;justify-content:center}
.login-page .login-card{width:100%;padding:38px 30px 32px}
.parking-logo{width:64px;height:64px;margin:0 auto 14px;display:grid;place-items:center;background:#075bf5;border:4px solid #07101f;color:#fff;font-size:42px;line-height:1}
.login-page .login-card h1{font-size:32px;margin:5px 0 18px;color:#101b33}
.login-page .login-card>p{margin:0 0 18px}
.login-page .login-card label{color:#31415f}
.login-page .login-card input{height:44px;background:#edf3fc;border-color:#c5d2e6}
.login-page .login-card .btn{height:44px;font-size:16px}
.password-field{position:relative}
.password-field input{padding-right:66px}
.password-toggle{position:absolute;right:7px;top:7px;height:30px;border:0;border-radius:7px;background:transparent;color:#1d4ed8;font-weight:700;cursor:pointer}
.login-divider{display:flex;align-items:center;gap:12px;color:#8391aa;margin:26px 0 0}
.login-divider:before,.login-divider:after{content:"";height:1px;background:#d8e0eb;flex:1}
.login-divider span{font-size:13px}
.login-page .msg{min-height:18px;text-align:center;margin-top:14px}
.msg.success{color:#087a55}
.login-side{display:flex;flex-direction:column;gap:24px}
.online-pill,.info-panel,.online-reservation-btn{background:rgba(255,255,255,.98);padding:12px 16px;box-shadow:0 16px 38px rgba(0,0,0,.18)}
.online-pill{align-self:center;min-width:240px;border-radius:13px;color:#172033;text-align:center;font-size:12px;font-weight:900;letter-spacing:.04em}
.online-dot{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 5px rgba(16,185,129,.14)}
.online-dot.offline{background:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.14)}
.info-panel{padding:12px}
.clock-card,.weather-card{border-radius:17px;background:linear-gradient(135deg,#182438,#34435c);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 18px rgba(0,0,0,.2)}
.clock-card{display:flex;flex-direction:column;align-items:center;padding:17px 14px}
.clock-card strong{font-size:27px;letter-spacing:.04em}
.clock-card strong:before{content:"☀️";font-size:18px;margin-right:9px}
.clock-card span{font-size:12px;text-align:center;margin-top:5px;color:#d9e0ea}
.weather-card{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:14px 18px;margin-top:9px;font-size:17px;font-weight:800}
.online-reservation-btn{border:12px solid #fff;border-radius:2px;background:#059f72;color:#fff;text-decoration:none;text-align:center;font-size:16px;font-weight:800;padding:12px 18px}
.online-reservation-btn:hover{background:#058762;transform:translateY(-1px)}
.btn.is-loading span:after{content:"";display:inline-block;width:13px;height:13px;margin-left:9px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}
}
@media(max-width:1100px){.login-layout{gap:55px}
}
@media(max-width:820px){.login-page{padding:22px}
.login-layout{grid-template-columns:minmax(0,410px);gap:22px}
.login-side{order:-1;gap:12px}
.info-panel{display:none}
.online-pill{padding:10px}
.online-reservation-btn{border-width:6px}
.login-page .login-card{padding:30px 24px}
}
@media(max-width:520px){.login-page{padding:14px}
.login-page .login-card h1{font-size:27px}
.parking-logo{width:58px;height:58px;font-size:38px}
}