:root {
    color-scheme: light;
    --auth-bg: #e9edf2;
    --auth-ink: #273950;
    --auth-muted: #65748a;
    --auth-shadow: #c6ced9;
    --auth-light: #ffffff;
    --auth-blue: #3164b8;
}
* { box-sizing: border-box; }
body.auth-page { margin: 0; min-width: 280px; background: var(--auth-bg); color: var(--auth-ink); font-family: "Poppins", "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.auth-shell { min-height: 100vh; min-height: 100svh; padding: 38px 24px; display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 438px; padding: 37px 36px 26px; border-radius: 29px; background: var(--auth-bg); border: 1px solid #ffffff66; box-shadow: 18px 18px 45px #c6ced9, -18px -18px 45px #ffffff; }
.auth-heading { text-align: center; margin-bottom: 32px; }
.auth-logo { display: block; width: 218px; max-width: 76%; height: 84px; object-fit: contain; margin: 0 auto 19px; }
.auth-heading h1 { font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: -.55px; margin: 0; }
.auth-group { margin-bottom: 22px; }
.auth-group > label { display: block; color: #526176; font-size: 12px; font-weight: 650; margin: 0 0 9px 3px; }
.auth-field { display: flex; align-items: center; min-width: 0; height: 52px; padding: 0 14px; gap: 11px; border: 1px solid transparent; border-radius: 13px; box-shadow: inset 5px 5px 10px #cdd4df, inset -5px -5px 10px #ffffff; transition: border-color .2s, box-shadow .2s; }
.auth-field > i { color: #77869b; font-size: 16px; flex: 0 0 auto; }
.auth-field input { border: 0; background: transparent; color: var(--auth-ink); width: 100%; min-width: 0; padding: 0; font-size: 13px; outline: 0; height: 100%; }
.auth-field input::placeholder, .auth-answer::placeholder { color: #7c8899; opacity: 1; }
.auth-field:focus-within { border-color: #7a9dd2; box-shadow: inset 4px 4px 9px #cdd4df, inset -4px -4px 9px #ffffff, 0 0 0 3px #3164b811; }
.auth-eye { width: 28px; height: 32px; border: 0; padding: 0; color: #687991; background: transparent; border-radius: 7px; flex: 0 0 auto; display: grid; place-items: center; }
.auth-eye:hover { color: var(--auth-blue); }
.auth-captcha-row { display: grid; grid-template-columns: 117px minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.auth-challenge { height: 50px; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-size: 17px; font-weight: 700; letter-spacing: 1px; color: #365a8a; border-radius: 12px; box-shadow: 4px 4px 9px #cbd3de, -4px -4px 9px #ffffff; user-select: none; }
.auth-answer { width: 100%; min-width: 0; height: 50px; outline: 0; padding: 0 13px; border: 1px solid transparent; border-radius: 12px; background: var(--auth-bg); box-shadow: inset 4px 4px 9px #cdd4df, inset -4px -4px 9px #ffffff; font-size: 13px; color: var(--auth-ink); }
.auth-answer:focus { border-color: #7a9dd2; box-shadow: inset 4px 4px 9px #cdd4df, inset -4px -4px 9px #ffffff, 0 0 0 3px #3164b811; }
.auth-refresh { height: 48px; width: 48px; display: grid; place-items: center; padding: 0; border: 1px solid #ffffff66; background: var(--auth-bg); border-radius: 12px; color: var(--auth-blue); font-size: 21px; box-shadow: 5px 5px 10px #c8d0db, -5px -5px 10px #ffffff; transition: color .2s, box-shadow .2s; }
.auth-refresh:hover { color: #163f82; }
.auth-refresh:active { box-shadow: inset 3px 3px 6px #c8d0db, inset -3px -3px 6px #ffffff; }
.auth-refresh[aria-busy="true"] i { animation: auth-spin .8s linear infinite; }
.auth-remember { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: #5c6b80; cursor: pointer; margin: 0 0 24px 2px; }
.auth-remember input { width: 15px; height: 15px; accent-color: var(--auth-blue); margin: 0; }
.auth-submit { border: 1px solid #ffffff22; border-radius: 13px; width: 100%; height: 52px; color: #ffffff; font-size: 13px; font-weight: 650; display: flex; align-items: center; justify-content: center; gap: 13px; background: linear-gradient(145deg, #3c70c6, #2d5eae); box-shadow: 6px 6px 13px #bdc8d9, -6px -6px 13px #ffffff; transition: background .2s, box-shadow .2s, transform .2s; }
.auth-submit:hover { background: linear-gradient(145deg, #3467bd, #25539d); }
.auth-submit:active { transform: translateY(1px); box-shadow: inset 3px 3px 8px #204d95, inset -3px -3px 8px #4b7dcf; }
.auth-submit:disabled, .auth-refresh:disabled { opacity: .65; cursor: wait; }
.auth-copyright { text-align: center; font-size: 9px; letter-spacing: .8px; color: #7a8799; margin: 27px 0 0; }
.auth-error { display: flex; gap: 9px; align-items: start; font-size: 12px; line-height: 1.6; padding: 12px 14px; margin-bottom: 21px; color: #9d3742; background: #f4e5e8; border: 1px solid #e8cbd0; border-radius: 11px; }
.auth-error > i { margin-top: 1px; }
.auth-trap { display: none; }
button:focus-visible, .auth-remember input:focus-visible { outline: 2px solid #3164b8; outline-offset: 4px; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) {
    .auth-shell { padding: 26px 19px; }
    .auth-card { max-width: 390px; padding: 30px 25px 24px; border-radius: 25px; box-shadow: 11px 11px 27px #c6ced9, -11px -11px 27px #ffffff; }
    .auth-heading { margin-bottom: 28px; }
    .auth-heading h1 { font-size: 22px; }
    .auth-logo { width: 195px; height: 77px; margin-bottom: 16px; }
    .auth-captcha-row { grid-template-columns: 108px minmax(0, 1fr) 45px; gap: 9px; }
    .auth-refresh { width: 45px; height: 48px; }
    .auth-challenge { font-size: 16px; letter-spacing: .5px; }
}
@media (max-width: 340px) {
    .auth-shell { padding: 22px 14px; }
    .auth-card { padding-left: 20px; padding-right: 20px; }
    .auth-captcha-row { grid-template-columns: 94px minmax(0, 1fr) 40px; gap: 7px; }
    .auth-refresh { width: 40px; }
    .auth-answer { padding-left: 9px; }
    .auth-heading h1 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.auth-copyright { white-space:pre-line;overflow-wrap:anywhere;line-height:1.7; }