:root{
	--accent1:#5b8cff;
	--accent2:#386bff;
	--card-bg:rgba(255,255,255,0.78);
	--muted:rgba(16,36,58,0.75);
	--bg-start:#eef6ff;
	--bg-end:#f8fbff;
}

html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial;color:var(--muted);background:linear-gradient(180deg,var(--bg-start),var(--bg-end))}

/* page background image (assets/images/bg.png) */
body{
	background-image: url("/assets/images/bg.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Keep wrappers transparent so background shows through */
.container-scroller, .page-body-wrapper, .container-fluid, .content-wrapper { background: transparent !important; }

/* Layout: two-column auth shell */
.auth-shell{width:100%;max-width:760px;margin:0 auto;padding:20px;box-sizing:border-box}

/* Center the login card vertically and horizontally */
form#loginForm{min-height:100vh;display:flex;align-items:center;justify-content:center}
.auth-brand{display:none}
.brand-title{font-size:30px;font-weight:800;margin:8px 0;color:#fff}
.brand-sub{font-size:15px;color:rgba(255,255,255,0.95);max-width:420px;line-height:1.45}
.feature-list{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.feature{display:flex;gap:12px;align-items:flex-start}
.feature .dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,0.9);margin-top:6px}

.auth-card{background:var(--card-bg);border-radius:14px;padding:30px;box-shadow:0 18px 50px rgba(18,38,75,0.12);border:1px solid rgba(11,37,64,0.06);color:var(--muted);backdrop-filter: blur(6px);transform:none;opacity:0;animation:card-enter .42s ease forwards;max-width:760px;margin:0 auto}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.card-logo{width:68px;height:68px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent1)}
h2{margin:0;font-size:22px;color:#0b2540}
p.lead{margin:6px 0 16px;color:rgba(11,37,64,0.65);font-size:14px}

.sso-btn{display:block;width:100%;padding:12px 14px;border-radius:12px;background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#fff;border:none;font-weight:700;box-shadow:0 10px 30px rgba(56,107,255,0.14);text-align:center;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.sso-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(56,107,255,0.16)}

.separator{display:flex;align-items:center;gap:12px;margin:20px 0;color:rgba(11,37,64,0.45);font-size:13px}
.separator:before,.separator:after{content:'';height:1px;background:rgba(11,37,64,0.04);flex:1;border-radius:2px}

form .field{display:flex;flex-direction:column;margin-bottom:14px}
label{font-size:13px;margin-bottom:8px;color:rgba(11,37,64,0.75);font-weight:600}
input[type="email"],input[type="password"],input[type="text"],.form-control{padding:14px;border-radius:12px;border:1px solid rgba(11,37,64,0.06);background:#fff;color:#0b2540;box-shadow:inset 0 -1px 0 rgba(11,37,64,0.02);transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
input::placeholder{color:rgba(11,37,64,0.35)}
/* password toggle icon button */
.input-field{position:relative}
.input-field .input-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;color:rgba(11,37,64,0.45);width:36px;height:36px}
.input-field .input-icon svg{width:18px;height:18px;display:block}
.input-field .form-control{padding-left:48px}

.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:44px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(11,37,64,0.04);color:rgba(11,37,64,0.65);cursor:pointer;padding:0;transition:background .12s ease}
.password-toggle svg{width:18px;height:18px;display:block}
.password-toggle .icon-eye-off{display:none}
.password-toggle:hover{background:rgba(11,37,64,0.03);color:var(--accent1);border-color:rgba(11,37,64,0.08)}
.password-toggle[aria-pressed="true"]{background:rgba(56,107,255,0.06);color:var(--accent2);border-color:rgba(11,95,184,0.12)}
.password-toggle[aria-pressed="true"] .icon-eye{display:none}
.password-toggle[aria-pressed="true"] .icon-eye-off{display:block}
.actions{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:8px}
.btn-primary{background:linear-gradient(90deg,var(--accent2),var(--accent1));border:none;padding:12px 16px;border-radius:12px;color:#fff;font-weight:800;box-shadow:0 10px 30px rgba(56,107,255,0.12);transition:transform .12s ease,box-shadow .12s ease}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(56,107,255,0.16)}
.muted-link{color:var(--accent1);font-size:13px;text-decoration:none}

.form-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.small{font-size:12px;color:rgba(11,37,64,0.6)}

/* Focus and validation styles */
:focus{outline:none}
input:focus,button:focus,a:focus{box-shadow:0 0 0 6px rgba(56,107,255,0.12);border-color:rgba(56,107,255,0.9)}
input:invalid{border-color:#bfbfbf;background:rgba(255,107,107,0.03)}
.error-message{color:#7b2323;background:rgba(255,200,200,0.06);padding:8px 10px;border-radius:8px;font-size:13px;margin-top:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes card-enter{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}

@media (max-width:980px){.auth-shell{padding:24px;max-width:760px}.auth-card{order:1;margin-top:18px}}
@media (max-width:720px){.auth-shell{padding:18px}.auth-card{padding:20px;max-width:620px}}
@media (max-width:520px){.auth-shell{padding:14px}.auth-card{padding:16px}}