/* Standalone login; independent of shared admin and print styles. */
.spp-login, .spp-login * { box-sizing: border-box; }
.spp-login { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 28px; color: #263b51; font-family: "Segoe UI", Arial, sans-serif; background: radial-gradient(ellipse at 12% 12%, #dcecf8 0, transparent 43%), radial-gradient(ellipse at 95% 95%, #e6eff9 0, transparent 40%), #f5f7fa; }
.login-layout { width: 100%; max-width: 1060px; }
.login-shell { display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); min-height: 610px; padding: 10px; background: #fff; border: 1px solid #e4ebf3; border-radius: 28px; box-shadow: 0 24px 70px #31577a14, 0 3px 12px #31577a06; }
.login-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: 34px; border-radius: 20px; background: linear-gradient(145deg, #24638e, #2b709c 60%, #3175a0); color: #fff; }
.login-brand:before { content: ''; position: absolute; width: 380px; height: 380px; top: -240px; right: -170px; border: 1px solid #ffffff1a; border-radius: 50%; box-shadow: 0 0 0 50px #ffffff04, 0 0 0 100px #ffffff03; pointer-events: none; }
.login-identity { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.login-school-logo { display: grid; place-items: center; flex: 0 0 auto; width: 62px; height: 70px; padding: 7px; border-radius: 13px; background: #fff; box-shadow: 0 3px 12px #183e5d1a; }
.login-school-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.login-identity p { margin: 0; max-width: 300px; color: #fff; font-size: 14px; line-height: 1.55; font-weight: 600; }
.login-identity > div > span { display: block; margin-top: 5px; color: #e1edf6; font-size: 11px; }
.login-brand-content { position: relative; z-index: 1; margin: auto 0; padding: 46px 0 38px; }
.login-brand h1 { margin: 0 0 19px; font-size: clamp(28px, 2.7vw, 36px); line-height: 1.28; letter-spacing: -.9px; font-weight: 650; }
.login-brand h1 > span { color: #c0e6fb; }
.login-brand-description { max-width: 335px; margin: 0; color: #eff6fc; font-size: 14px; line-height: 1.85; }
.login-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 29px; }
.login-features > div { display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; border: 1px solid #ffffff24; border-radius: 10px; background: #ffffff0a; color: #fff; font-size: 11px; line-height: 1.4; }
.login-features svg { width: 20px; height: 20px; color: #d8effb; }
.login-brand-art { position: absolute; bottom: -40px; right: -38px; width: 280px; height: 210px; color: #fff; opacity: .10; pointer-events: none; }
.login-brand-footer { position: relative; z-index: 1; margin: 0; color: #e2eff8; font-size: 11px; line-height: 1.7; }
.login-main { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 38px 45px; }
.login-form-wrap { width: 100%; max-width: 350px; }
.login-form-mark { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 24px; border: 1px solid #dceaf5; border-radius: 13px; background: #eff6fc; color: #438eb9; }
.login-form-mark svg { width: 23px; height: 23px; }
.login-main h2 { margin: 0 0 11px; color: #273d53; font-size: 27px; line-height: 1.3; letter-spacing: -.65px; font-weight: 650; }
.login-intro { margin: 0 0 27px; color: #7b8da0; font-size: 13px; line-height: 1.8; }
.login-field { margin-bottom: 20px; }
.login-field label { display: block; margin-bottom: 8px; color: #4c647c; font-size: 12px; font-weight: 600; }
.login-control, .login-password { position: relative; }
.login-field input { display: block; width: 100%; height: 49px; padding: 12px 14px 12px 43px; border: 1px solid #dae4ef; border-radius: 9px; background: #fbfcfe; color: #30475e; font: 14px "Segoe UI", Arial, sans-serif; outline: none; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.login-field input::placeholder { color: #9aa9b8; }
.login-field input:hover { border-color: #c0d4e5; }
.login-field input:focus { background: #fff; border-color: #70a8d3; box-shadow: 0 0 0 3px #438eb914; }
.login-field-icon { position: absolute; top: 15px; left: 14px; width: 18px; height: 18px; color: #8fa8bc; pointer-events: none; }
.login-control:focus-within > .login-field-icon, .login-password:focus-within > .login-field-icon { color: #438eb9; }
.login-password input { padding-right: 100px; }
.login-password button { position: absolute; top: 8px; right: 8px; height: 33px; padding: 0 9px; border: 0; border-radius: 6px; background: #eef4fa; color: #3d7ca9; font: 600 11px "Segoe UI", Arial, sans-serif; cursor: pointer; }
.login-password button:hover { background: #e2eef8; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; margin-top: 27px; padding: 12px 16px; border: 1px solid #3077a5; border-radius: 9px; background: #3077a5; color: #fff; font: 600 14px "Segoe UI", Arial, sans-serif; cursor: pointer; box-shadow: 0 5px 13px #438eb926; transition: background-color .15s, box-shadow .15s; }
.login-submit > svg { width: 18px; height: 18px; }
.login-submit:hover:not(:disabled) { background: #28688f; border-color: #28688f; box-shadow: 0 6px 17px #438eb933; }
.login-submit:disabled { opacity: .7; cursor: wait; }
.login-submit.is-loading > svg { display: none; }
.login-submit.is-loading:before { content: ''; width: 15px; height: 15px; border: 2px solid #ffffff55; border-top-color: #fff; border-radius: 50%; animation: login-spin .7s linear infinite; }
.login-main button:focus-visible { outline: 3px solid #9dc9ed; outline-offset: 3px; }
.login-support { margin: 22px 0 0; padding-top: 19px; border-top: 1px solid #edf1f6; color: #8b9bac; font-size: 11px; line-height: 1.8; text-align: center; }
.login-error { margin: 0 0 22px; padding: 12px 14px; border: 1px solid #f0d8df; border-radius: 9px; background: #fff3f5; color: #ad5062; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.login-page-footer { margin: 18px 0 0; color: #8b9cae; font-size: 11px; line-height: 1.6; text-align: center; }
.spp-login svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (min-width: 821px) and (max-height: 740px) { .spp-login { padding: 20px; } .login-shell { min-height: 560px; } .login-brand { padding: 28px; } .login-brand-content { padding: 30px 0; } .login-main { padding: 28px 40px; } .login-form-mark { margin-bottom: 18px; } .login-intro { margin-bottom: 22px; } }
@media (max-width: 820px) { .spp-login { padding: 20px; } .login-layout { max-width: 470px; } .login-shell { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 8px; border-radius: 23px; } .login-brand { padding: 22px; border-radius: 16px; } .login-school-logo { width: 51px; height: 58px; } .login-identity p { font-size: 13px; } .login-brand-content, .login-brand-art, .login-brand-footer { display: none; } .login-main { padding: 30px 24px; } .login-form-mark { display: none; } .login-main h2 { font-size: 25px; } .login-field input { font-size: 16px; } }
@media (max-width: 380px) { .spp-login { padding: 12px; } .login-brand { padding: 18px; } .login-main { padding: 28px 16px; } .login-main h2 { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) { .login-submit.is-loading:before { animation: none; } .login-field input, .login-submit { transition: none; } }