/* Selected green-circle glass design: presentation only, scoped to login.php. */
.hsc-login--glass {
    --bg:#f3f9f4; --text:#26323d; --muted:#596873;
    --login-accent:#1f4e79; --login-segment:rgba(222,233,229,.6);
    --login-line:#cddbd5; --login-focus-bg:#fff;
    background:#f3f9f4 url('../images/login-green-circles-v1.webp') center top / cover no-repeat fixed;
}
.hsc-login--glass.hsc-login--student {
    --primary:#d76512; --primary-dark:#b94d08; --login-accent:#32785d;
    --login-focus-ring:rgba(50,120,93,.2);
}
.hsc-login--glass .login-shell {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:38px; min-height:100svh; padding:108px 24px 32px;
}
.hsc-login--glass .login-card {
    flex:none; width:min(100%,560px); min-height:0; padding:30px 39px 26px;
    border:1px solid rgba(255,255,255,.95); border-radius:24px;
    background:rgba(249,253,250,.93); box-shadow:0 22px 56px rgba(28,79,57,.12);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .hsc-login--glass .login-card { background:rgba(248,253,250,.72); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
}
.hsc-login--glass .topbar-school { color:var(--text); font-size:17px; font-weight:600; line-height:1.5; letter-spacing:.02em; }
.hsc-login--glass .login-tabs { width:min(100%,380px); margin:24px auto 0; padding:3px; border:1px solid rgba(74,109,94,.12); border-radius:17px; gap:4px; }
.hsc-login--glass .login-tab { min-height:46px; font-size:16px; border-radius:14px; color:var(--text); }
.hsc-login--glass .login-tab.is-active { background:var(--login-accent); color:#fff; box-shadow:0 2px 5px rgba(25,70,51,.1); }
.hsc-login--glass .login-welcome { margin:24px 0 28px; }
.hsc-login--glass .login-welcome h1 { font-size:38px; line-height:1.3; letter-spacing:.02em; }
.hsc-login--glass .login-welcome p { margin:10px 0 0; font-size:16px; line-height:1.6; }
.hsc-login--glass .login-credentials { display:grid; gap:22px; border:0; border-radius:0; background:transparent; box-shadow:none; }
.hsc-login--glass .login-credentials:focus-within { border:0; box-shadow:none; }
.hsc-login--glass .login-input-row,
.hsc-login--glass .login-input-row:first-child,
.hsc-login--glass .login-input-row:last-child {
    display:flex; flex-direction:column; align-items:stretch; min-height:0; gap:8px;
    padding:0; border:0; border-radius:0; background:transparent;
}
.hsc-login--glass .login-input-row label { flex:none; border:0; font-size:16px; line-height:24px; font-weight:600; color:var(--text); }
.hsc-login--glass .login-input-row:focus-within label { color:var(--login-accent); }
.hsc-login--glass .login-form .input {
    flex:none; width:100%; height:54px; padding:13px 16px;
    border:1px solid var(--login-line); border-radius:11px; background:#fff;
    box-shadow:0 2px 6px rgba(29,70,53,.03); font-size:16px; line-height:26px;
}
.hsc-login--glass .login-form .input::placeholder { color:#65747d; }
.hsc-login--glass .login-form .input:focus { border-color:var(--login-accent); box-shadow:0 0 0 3px var(--login-focus-ring); }
.hsc-login--glass .login-password-field { flex:none; width:100%; border:1px solid var(--login-line); border-radius:11px; background:#fff; box-shadow:0 2px 6px rgba(29,70,53,.03); }
.hsc-login--glass .login-password-field:focus-within { border-color:var(--login-accent); box-shadow:0 0 0 3px var(--login-focus-ring); }
.hsc-login--glass .login-password-field .input { flex:1 1 0; width:0; min-width:0; height:52px; padding-right:4px; border:0; box-shadow:none; }
.hsc-login--glass .login-password-field .input:focus { box-shadow:none; }
.hsc-login--glass .login-password-toggle { margin-right:5px; }
.hsc-login--glass .turnstile-field { margin-top:20px; min-width:0; }
.hsc-login--glass .login-form > .button-primary { min-height:56px; margin-top:20px; border-radius:12px; font-size:20px; font-weight:700; line-height:1.4; }
.hsc-login--glass .login-help { margin:20px 0 0; font-size:14px; line-height:1.6; }
.hsc-login--glass .login-help a { color:var(--login-accent); font-size:16px; }
.hsc-login--glass .login-help p { color:var(--muted); }
.hsc-login--glass .login-shell > .site-footer { flex:none; width:min(100%,544px); margin:0; padding:0; border:0; color:#566b61; font-size:12px; line-height:1.8; text-align:center; }
.hsc-login--glass .login-tab:focus-visible,
.hsc-login--glass .login-help a:focus-visible { outline-color:var(--login-accent); }
.hsc-login--glass .login-card > .alert { overflow-wrap:anywhere; }
@media(max-width:600px) {
    .hsc-login--glass { background-attachment:scroll; background-size:auto 100%; }
    .hsc-login--glass .login-shell { justify-content:flex-start; padding:28px 16px 24px; gap:24px; }
    .hsc-login--glass .login-card { padding:26px 23px 24px; border-radius:22px; }
    .hsc-login--glass .topbar-school { font-size:16px; }
    .hsc-login--glass .login-tabs { margin-top:20px; }
    .hsc-login--glass .login-welcome { margin:22px 0 24px; }
    .hsc-login--glass .login-welcome h1 { font-size:32px; }
    .hsc-login--glass .login-welcome p { font-size:15px; }
    .hsc-login--glass .login-credentials { gap:18px; }
}
@media(max-width:360px) {
    .hsc-login--glass .login-shell { padding:20px 10px; }
    .hsc-login--glass .login-card { padding:24px 15px; }
    .hsc-login--glass .topbar-school { font-size:15px; }
    .hsc-login--glass .login-tab { font-size:14px; }
    .hsc-login--glass .turnstile-field .cf-turnstile { transform:scale(.88); }
}
@media(prefers-reduced-transparency:reduce) { .hsc-login--glass .login-card { background:#f8fcf9; -webkit-backdrop-filter:none; backdrop-filter:none; } }
@media(forced-colors:active) {
    .hsc-login--glass { background:Canvas; }
    .hsc-login--glass .login-card { background:Canvas; border:1px solid CanvasText; box-shadow:none; backdrop-filter:none; }
    .hsc-login--glass .login-password-field:focus-within { outline:2px solid Highlight; }
}