#loginPage { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(var(--page-padding), env(safe-area-inset-top)) max(var(--page-padding), env(safe-area-inset-right)) max(var(--page-padding), env(safe-area-inset-bottom)) max(var(--page-padding), env(safe-area-inset-left)); background: linear-gradient(rgba(8,10,12,.2),rgba(8,10,12,.5)),url('../images/backLoginMobile.jpg') center/cover no-repeat; }
.login-box { width: min(100%,420px); padding: clamp(24px,7vw,40px); border: 1px solid var(--panel-border); border-radius: 24px; background: var(--panel-bg); box-shadow: 0 24px 70px rgba(0,0,0,.36); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.login-box h1 { margin: 0 0 22px; font-size: clamp(1.8rem,7vw,2.4rem); line-height: 1.1; text-align: center; }
.login-box input, .login-box button { margin-top: 12px; }
.login-box button { width: 100%; }
#loginError { min-height: 1.4em; margin-top: 12px; color: var(--danger); font-size: .92rem; line-height: 1.4; text-align: center; }
@media (min-width: 768px) { #loginPage { background-image: linear-gradient(rgba(8,10,12,.15),rgba(8,10,12,.48)),url('../images/backLogin.jpg'); } }