/* Shared sign-in layout only; no signed-in page styles. */
.hsc-login { --bg:#f4f6f8; --text:#17202a; --muted:#667085; --primary:#1f4e79; --primary-dark:#173b5c; --login-segment:#e8ecf0; --login-line:#e0e5ea; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif; }
.hsc-login--student { --bg:#f7f8f4; --text:#293c46; --muted:#61747a; --primary:#247568; --primary-dark:#1b5c53; --login-segment:#e9ede8; --login-line:#e2e7e1; }
.hsc-login { --login-focus-bg:#f1f5fa; --login-focus-ring:rgba(31,78,121,.16); color-scheme:light; }
.hsc-login--student { --login-focus-bg:#eff7f3; --login-focus-ring:rgba(36,117,104,.16); }
.hsc-login .login-shell { min-height:100svh; padding:46px 22px 28px; place-items:start center; }
.hsc-login .login-card { display:flex; flex-direction:column; width:min(100%,380px); min-height:calc(100svh - 74px); gap:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.hsc-login .topbar-school { text-align:center; color:var(--muted); font-size:13px; line-height:20px; letter-spacing:.04em; }
.hsc-login .login-tabs { align-self:center; width:244px; max-width:100%; margin-top:36px; padding:4px; gap:4px; border:0; border-radius:14px; background:var(--login-segment); }
.hsc-login .login-tab { min-height:44px; padding:0 8px; border-radius:10px; font-size:14px; font-weight:600; }
.hsc-login .login-tab.is-active { color:var(--text); box-shadow:0 1px 4px #17202a0d; }
.hsc-login .login-welcome { margin:22px 0 24px; text-align:center; }
.hsc-login .login-welcome h1 { margin:0; font-size:34px; line-height:1.4; letter-spacing:.02em; font-weight:700; }
.hsc-login .login-welcome p { margin:10px 0 0; font-size:16px; line-height:1.7; color:var(--muted); }
.hsc-login .login-card > .alert { margin:0 0 20px; }
.hsc-login .login-form { gap:0; }
.hsc-login .login-credentials { border:1px solid var(--login-line); border-radius:16px; background:#fff; transition:border-color .15s ease,box-shadow .15s ease; }
.hsc-login .login-credentials:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px var(--login-focus-ring); }
.hsc-login .login-input-row { --login-field-bg:#fff; display:flex; align-items:center; min-height:60px; min-width:0; padding:0 12px 0 18px; background:var(--login-field-bg); border-radius:0; }
.hsc-login .login-input-row:first-child { border-radius:15px 15px 0 0; }
.hsc-login .login-input-row:last-child { border-radius:0 0 15px 15px; }
.hsc-login .login-input-row + .login-input-row { border-top:1px solid var(--login-line); }
.hsc-login .login-input-row:focus-within { --login-field-bg:var(--login-focus-bg); }
.hsc-login .login-input-row:focus-within label { color:var(--primary); }
.hsc-login .login-input-row label { flex:0 0 48px; margin:0; border-right:1px solid var(--login-line); font-size:15px; line-height:24px; font-weight:500; }
.hsc-login .login-form .input { display:block; flex:1 1 0; width:0; min-width:0; height:58px; padding:12px 14px; border:0; border-radius:12px; background:transparent; color:var(--text); font-family:inherit; font-size:16px; line-height:24px; box-shadow:none; }
.hsc-login .login-form .input::placeholder { color:#76817f; opacity:1; }
.hsc-login .login-form .input:focus { outline:none; box-shadow:none; }
/* Keep autofilled text aligned with its row without disabling password managers.
   The inset fill covers browser-owned autofill background; do not delay it away. */
.hsc-login .login-form .input:-webkit-autofill {
    -webkit-text-fill-color:var(--text);
    caret-color:var(--text);
    -webkit-box-shadow:0 0 0 1000px var(--login-field-bg) inset;
    box-shadow:0 0 0 1000px var(--login-field-bg) inset;
}
.hsc-login .login-form .input:autofill {
    -webkit-text-fill-color:var(--text);
    caret-color:var(--text);
    box-shadow:0 0 0 1000px var(--login-field-bg) inset;
}
@media (prefers-reduced-motion:reduce) {
    .hsc-login .login-credentials { transition:none; }
}
@media (forced-colors:active) {
    .hsc-login .login-credentials:focus-within { outline:2px solid Highlight; outline-offset:2px; }
    .hsc-login .login-form .input:focus-visible { outline:1px solid Highlight; outline-offset:-3px; }
}
.hsc-login .turnstile-field { margin-top:26px; min-height:65px; }
.hsc-login .login-form > .button-primary { min-height:50px; margin-top:20px; border-radius:14px; font-size:16px; font-weight:600; background:var(--primary); border-color:var(--primary); }
.hsc-login .login-form > .button-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.hsc-login .login-help { margin:20px 0 28px; text-align:center; color:var(--muted); font-size:13px; line-height:1.8; }
.hsc-login .login-help a { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; color:var(--primary); font-size:15px; font-weight:500; }
.hsc-login .login-help a:hover { text-decoration:underline; }
.hsc-login .login-help p { margin:0; }
.hsc-login .login-card .site-footer { margin-top:auto; padding:20px 0 0; border:0; border-top:1px solid var(--login-line); font-size:11px; line-height:1.8; color:var(--muted); }
.hsc-login .login-tab:focus-visible,
.hsc-login .login-help a:focus-visible,
.hsc-login .login-form > .button:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }
@media (min-width:561px) {
    .hsc-login .login-shell { padding-top:60px; padding-bottom:32px; }
    .hsc-login .login-card { min-height:calc(100svh - 92px); }
    .hsc-login .login-tabs { margin-top:32px; }
}
@media (max-width:360px) {
    .hsc-login .login-shell { padding-left:16px; padding-right:16px; }
    .hsc-login .login-welcome h1 { font-size:30px; }
    /* Preserve the provider's 300px widget on narrow phones. */
    .hsc-login .turnstile-field { height:65px; }
    .hsc-login .turnstile-field .cf-turnstile { flex:0 0 300px; max-width:none; transform:scale(.94); transform-origin:center top; }
}