.login-page{min-height:100svh}.login-page::before{background:linear-gradient(#090a0de8,#090a0df4),url('assets/benefit-tech.webp') center/cover no-repeat!important}.login-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 36px}.login-brand{display:flex;align-items:center;gap:15px;font-weight:650;font-size:18px}.login-brand .brand-mark{width:50px;height:50px;border-radius:50%;font-family:system-ui,sans-serif}.login-back{border:1px solid #ffffff30;background:#ffffff05;border-radius:24px;padding:9px 20px;font-size:14px;min-height:44px;display:grid;place-items:center}.login-main{display:flex;justify-content:center;padding:20px 20px 60px}.login-card{width:100%;max-width:450px;border:1px solid #ffffff30;border-radius:29px;overflow:hidden;background:linear-gradient(140deg,#ffffff05,transparent),#111217d9;box-shadow:0 30px 100px #0008,inset 0 1px 0 #ffffff20;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px)}.login-cover{position:relative;height:220px;overflow:hidden}.login-cover img{width:100%;height:100%;object-fit:cover}.login-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,#111217bf)}.login-cover>span{position:absolute;z-index:1;bottom:20px;left:28px;font-size:12px;letter-spacing:.2em;font-weight:750}.login-content{padding:27px 28px 25px}.login-content h1{font-size:26px;margin:0 0 9px;font-weight:650}.login-intro{font-size:14px;color:#b8b5c4;margin:0 0 26px}.login-content form>label{font-size:14px;font-weight:600;display:block;margin:20px 0 9px}.login-field{display:flex;align-items:center;gap:12px;border:1px solid #ffffff32;border-radius:12px;background:#06070950;padding:0 13px;min-height:50px}.login-field:focus-within{border-color:#c4acee;box-shadow:0 0 0 3px #c4acee12}.login-field>svg{width:19px;height:19px;flex-shrink:0;color:#a5a0b4}.login-field input{flex:1;min-width:0;width:100%;padding:13px 0;border:0;outline:0;background:none;color:#f3effb;font-size:16px;box-shadow:none}.login-field input::placeholder{color:#8c879b}.password-toggle{display:grid;place-items:center;width:34px;height:42px;border:0;background:none;color:#c1b9d1;flex-shrink:0;cursor:pointer}.password-toggle svg{width:19px;height:19px}.login-submit{margin-top:24px;border-radius:24px!important}.login-link{padding:0;border:0;background:none;color:#c8b9e6;text-decoration:underline;text-underline-offset:3px;font-size:14px;cursor:pointer}.login-content>#forgotPassword{display:block;margin:13px auto 0;min-height:32px}.login-divider{display:flex;align-items:center;gap:12px;color:#898394;margin:17px 0;font-size:13px}.login-divider::before,.login-divider::after{content:'';height:1px;background:#ffffff15;flex:1}.login-google{display:flex;align-items:center;justify-content:center;gap:12px;min-height:46px;width:100%;border:1px solid #ffffff44;border-radius:12px;background:#f0eff4;color:#29262f;font-size:14px;font-weight:550;cursor:pointer}.google-letter{font-size:22px;font-weight:750;color:#4285f4;font-family:Arial,sans-serif}.login-registration{font-size:14px;text-align:center;color:#a39cad;margin:24px 0 0}.login-demo{font-size:12px;color:#918a9e;text-align:center;margin:18px 0 0}.login-notice{font-size:13px;color:#d2c6e7;padding:14px;border:1px solid #ffffff25;border-radius:12px;margin-top:18px;background:#ffffff06}.login-page .toast{bottom:20px}.login-page .modal-panel{max-height:calc(100dvh - 30px);overflow-y:auto}
/* The rounded field owns focus feedback; avoid a second square outline inside. */
.login-page .login-field{background:#0d0e12;color-scheme:dark}
.login-page .login-field input:focus,.login-page .login-field input:focus-visible{outline:none;box-shadow:none;background:transparent}
.login-page .login-field input:autofill{box-shadow:0 0 0 1000px #0d0e12 inset;color:#f3effb;caret-color:#f3effb}
.login-page .login-field input:-webkit-autofill,.login-page .login-field input:-webkit-autofill:hover,.login-page .login-field input:-webkit-autofill:focus{box-shadow:0 0 0 1000px #0d0e12 inset;-webkit-box-shadow:0 0 0 1000px #0d0e12 inset;-webkit-text-fill-color:#f3effb;caret-color:#f3effb}
@media(forced-colors:active){.login-page .login-field:focus-within{outline:2px solid Highlight;outline-offset:3px}}
@media(max-width:600px){.login-header{padding:18px 18px 10px}.login-brand{font-size:16px;gap:12px}.login-brand .brand-mark{width:42px;height:42px}.login-back{padding:8px 14px}.login-main{padding:18px 14px 40px}.login-cover{height:185px}.login-content{padding:24px 22px}.login-content h1{font-size:24px}.login-card{border-radius:24px}.login-intro{margin-bottom:20px}}
@media(prefers-reduced-transparency:reduce){.login-card{background:#14151a;backdrop-filter:none;-webkit-backdrop-filter:none}}

.login-page .guardian-caption{margin-top:22px}

/* Match registration focus feedback in the sign-in form. */
.login-page #loginForm>label:has(+ .login-field:focus-within){color:#83d8ed}
.login-page #loginForm .login-field:focus-within{border-color:transparent;background:linear-gradient(#0d0e12,#0d0e12) padding-box,linear-gradient(115deg,#83d8ed,#ad91dc) border-box;box-shadow:0 0 0 2px #83d8ed12}
.login-page #loginForm .login-field:focus-within>svg{color:#83d8ed}
@media(forced-colors:active){.login-page #loginForm .login-field:focus-within{border-color:Highlight;background:Canvas}.login-page #loginForm>label:has(+ .login-field:focus-within),.login-page #loginForm .login-field:focus-within>svg{color:Highlight}}
