/* Presentation scoped to the login screen; setup and admin styles stay independent. */
.login-page {
    --login-accent: #13B981;
    --login-ink: #163D32;
    --login-muted: #526B62;
    overflow: auto;
    padding: 32px 20px;
    background: radial-gradient(ellipse at 18% 18%, rgb(19 185 129 / 15%), transparent 48%),
        radial-gradient(ellipse at 85% 85%, rgb(19 185 129 / 9%), transparent 42%),
        linear-gradient(135deg, #061A17, #0A2822 58%, #071B22);
}
.login-page::before { background-image: radial-gradient(rgb(182 228 210 / 25%) .7px, transparent .7px); opacity: .15; }
.login-page::after { width: 72vw; height: 72vw; background: none; border-color: rgb(19 185 129 / 8%); }
.login-page .auth-ambient span { background: transparent; border-color: rgb(19 185 129 / 10%); box-shadow: none; }
.login-page .auth-ambient span:nth-child(3) { background: rgb(19 185 129 / 3%); border-color: rgb(19 185 129 / 10%); }
.login-page .auth-card { width: min(464px, 100%); margin: auto; padding: 36px 40px 28px; border: 0; border-radius: 28px; background: #fff; box-shadow: 0 32px 80px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 12%); backdrop-filter: none; }
.login-page .auth-card::before, .login-page .auth-card::after, .login-page .auth-brand::after { display: none; }
.login-page .auth-brand { margin: 0 0 28px; padding: 0; border: 0; gap: 8px; }
.login-page .brand-logo-auth { width: 140px; height: auto; }
.login-page .brand-caption { color: var(--login-muted); font-size: 10px; letter-spacing: .16em; }
.login-page .auth-copy { text-align: center; margin-bottom: 28px; }
.login-page .auth-chip { margin-bottom: 16px; padding: 5px 10px; background: #EDF8F2; border: 0; box-shadow: none; color: #076749; font-size: 10px; letter-spacing: .09em; }
.login-page .auth-chip > span { background: var(--login-accent); box-shadow: none; }
.login-page .auth-card h1 { color: var(--login-ink); font-size: clamp(22px, 4.8vw, 27px); line-height: 1.45; letter-spacing: -.025em; }
.login-page .auth-description { margin-top: 8px; color: var(--login-muted); font-size: 13px; line-height: 1.8; }
.login-page .auth-form label { color: var(--login-ink); }
.login-page .auth-form label small { color: var(--login-muted); }
.login-page .login-input-wrap { position: relative; min-width: 0; }
.login-page .auth-form input:not([type="hidden"]) { min-height: 52px; padding: 12px 14px 12px 46px; border: 1px solid #DCE7E3; border-radius: 14px; background: #F5F8F7; box-shadow: none; font-size: 16px; color: var(--login-ink); }
.login-page .auth-form input::placeholder { color: #61766D; opacity: 1; }
.login-page .auth-form .login-password-wrap input { padding-right: 52px; }
.login-page .auth-form input:hover { border-color: #A7C6B8; }
.login-page .auth-form input:focus { outline: none; border-color: #087F5B; background: #fff; box-shadow: 0 0 0 3px rgb(19 185 129 / 16%); }
.login-input-icon { position: absolute; left: 16px; top: 16px; width: 20px; height: 20px; color: #537568; pointer-events: none; }
.login-input-wrap:focus-within .login-input-icon { color: #087F5B; }
.login-password-toggle { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #537568; cursor: pointer; }
.login-password-toggle[hidden] { display: none; }
.login-password-toggle svg { width: 21px; height: 21px; }
.login-password-toggle:hover { background: #E4F1EA; color: #076749; }
.login-password-toggle:focus-visible { outline: 2px solid #087F5B; outline-offset: 1px; }
.login-eye-slash { display: none; }
.login-password-toggle[aria-pressed="true"] .login-eye-slash { display: block; }
.login-page .auth-form .button-primary { margin-top: 16px; min-height: 52px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(110deg, #087F5B, #10A773); font-size: 16px; font-weight: 700; text-shadow: 0 1px 2px rgb(0 0 0 / 15%); box-shadow: 0 8px 20px rgb(8 127 91 / 20%); transition: transform .18s ease, box-shadow .18s ease; }
.login-page .auth-form .button-primary:hover { background: linear-gradient(110deg, #076B4D, #087F5B); transform: translateY(-1px); box-shadow: 0 10px 24px rgb(8 127 91 / 25%); }
.login-page .auth-form .button-primary { font-size: 20px; }
.login-page .auth-form .button-primary:focus-visible { outline: 2px solid #076749; outline-offset: 4px; }
.login-page .auth-footer { border: 0; margin-top: 28px; padding-top: 0; color: var(--login-muted); font-size: 11px; letter-spacing: .02em; }
@media (max-width: 480px) {
    .login-page { padding: 20px 16px; }
    .login-page .auth-card { padding: 28px 24px 24px; border-radius: 24px; }
    .login-page .auth-brand { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .login-page *, .login-page *::before { animation: none !important; transition: none !important; }
}