/* Reset & base */
html,body{height:100%;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:#2f3c4a;background:radial-gradient(circle at 35% 30%,#f4f8fc 0%,#dde6ef 55%,#ccd6e2 100%) fixed;-webkit-font-smoothing:antialiased;}
body.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;}

*{box-sizing:border-box;}
img{max-width:100%;display:block;}

/* Container */
.login-container{width:100%;max-width:500px;padding:32px 24px 24px;position:relative;animation:fadeIn .8s ease;}

.brand{display:flex;justify-content:center;margin-bottom:28px;}
.brand .logo{height:54px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.15));}

/* Card */
.login-card{background:linear-gradient(145deg,#ffffff 0%,#f4f8fb 90%);backdrop-filter:blur(6px) saturate(180%);border:1px solid #e2e9f1;border-radius:20px;padding:40px 42px 32px;box-shadow:0 10px 28px -12px rgba(31,55,86,.30),0 4px 10px -2px rgba(31,55,86,.15);position:relative;overflow:hidden;}
.login-card:before,.login-card:after{content:"";position:absolute;border-radius:50%;filter:blur(42px);opacity:.35;pointer-events:none;mix-blend-mode:overlay;}
.login-card:before{width:240px;height:240px;background:linear-gradient(135deg,#a3d4ff,#6fb8ff);top:-80px;right:-110px;}
.login-card:after{width:200px;height:200px;background:linear-gradient(135deg,#d5e9ff,#9ec6ff);bottom:-70px;left:-80px;}

.login-title{margin:0 0 8px;font-size:24px;font-weight:600;letter-spacing:.5px;background:linear-gradient(90deg,#205d9e,#3f8ed6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.login-subtitle{margin:0 0 28px;font-size:13px;line-height:1.6;color:#607489;}

/* Form */
.form-group{margin-bottom:22px;display:flex;flex-direction:column;gap:6px;}
.form-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#5d6f82;display:flex;align-items:center;gap:6px;}

.input{width:100%;padding:12px 14px 11px;font-size:14px;border:1px solid #c9d3e1;border-radius:12px;background:#ffffff;color:#1f2e3a;outline:0;transition:.25s border,.25s background,.25s box-shadow;box-shadow:0 1px 0 0 rgba(31,55,86,.08);}
.input:hover{border-color:#b2c2d4;}
.input:focus{border-color:#3d82ff;background:#f7fbff;box-shadow:0 0 0 3px rgba(61,130,255,.25);}
.input::placeholder{color:#97a7b8;}
.input:-webkit-autofill{box-shadow:0 0 0 30px #ffffff inset;-webkit-text-fill-color:#1f2e3a;}

/* Buttons */
.actions{margin-top:8px;}
.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;font-weight:600;line-height:1;padding:14px 18px;border-radius:12px;border:1px solid #2d7fdc;transition:.25s background,.25s box-shadow,.25s transform,.25s border-color;text-decoration:none;user-select:none;background:linear-gradient(180deg,#3f8ed6,#2d7fdc);color:#fff;box-shadow:0 4px 10px -2px rgba(56,133,214,.35),0 2px 4px rgba(31,55,86,.25);}
.btn.primary{background:linear-gradient(180deg,#3f8ed6,#2d7fdc);}
.btn.primary:hover{background:linear-gradient(180deg,#4798e2,#3286e2);}
.btn.primary:active{transform:translateY(2px);box-shadow:0 2px 6px -1px rgba(56,133,214,.4),0 1px 3px rgba(31,55,86,.35);}
.btn.primary:focus{outline:none;box-shadow:0 0 0 3px rgba(61,130,255,.35);}
.w-full{width:100%;}

/* Validation & messages */
.validation-summary{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#fff5f5;border:1px solid #f5b5b5;color:#c53d3d;font-size:12px;}
.login-result{display:block;margin-top:8px;font-size:13px;color:#a06600;}
.auth-failure{display:block;margin-bottom:12px;color:#c53d3d;font-size:13px;}

/* Footer */
.login-footer{margin-top:26px;text-align:center;font-size:11px;color:#6b7c8b;display:flex;flex-direction:column;gap:4px;}
.login-footer .version{font-size:12px;font-weight:600;color:#4c6782;letter-spacing:.5px;}
.login-footer a{color:#1f6fb8;text-decoration:none;}
.login-footer a:hover{text-decoration:underline;}

/* Accessibility focus */
:focus-visible{outline:2px solid #3d82ff;outline-offset:2px;border-radius:4px;}

/* Responsive */
@media (max-width:520px){
	.login-card{padding:34px 28px 28px;}
	.login-container{padding:24px 18px;}
	.login-title{font-size:22px;}
}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

/* Utility (if future use) */
.hidden{display:none!important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}