html,body{
height:100%;
margin:0;
font-family:Segoe UI;
}

body:before{
content:"";
position:fixed;
inset:0;
background:
linear-gradient(
rgba(0,0,0,.15),
rgba(0,0,0,.20)
),
url(../images/login_bg.png)
center/cover no-repeat;
filter:blur(10px);
transform:scale(1.1);
z-index:-1;
}

.force-center{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

.login-card{
background:rgba(255,255,255,.85);
backdrop-filter:blur(18px);
border-radius:22px;
padding:35px;
max-width:430px;
width:100%;
box-shadow:0 30px 60px rgba(0,0,0,.25);
}

.form-control{
padding:12px;
border-radius:12px;
}

.btn-primary{
border:none;
border-radius:14px;
background:
linear-gradient(
135deg,
#4da3ff,
#2f80ed
);
}


/* Shared account screens: registration uses more room for its additional fields. */
.register-card { max-width: 620px; }
.auth-heading { font-size: 1.05rem; font-weight: 600; margin-bottom: 18px; }
.auth-note { background: rgba(47,128,237,.07); border: 1px solid rgba(47,128,237,.2); padding: 13px 15px; border-radius: 12px; font-size: 13px; color: #405670; }
.login-card .form-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.login-card .form-select { padding: 12px; padding-right: 36px; border-radius: 12px; }
.login-card a:focus-visible, .login-card button:focus-visible { outline: 3px solid #286dc5; outline-offset: 3px; }
@media (max-width: 575.98px) {
    .force-center { padding: 20px 14px; }
    .login-card { padding: 26px 22px; }
}