.auth-page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 12% 18%, rgb(8 127 35 / 9%), transparent 34rem),
        radial-gradient(circle at 88% 78%, rgb(5 99 26 / 7%), transparent 30rem),
        linear-gradient(145deg, #eef8ed, #fbfcf8);
}

.auth-topbar {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 10px clamp(16px, 4vw, 56px);
    border-bottom: 1px solid rgb(170 189 172 / 72%);
    background: rgb(255 255 255 / 88%);
    box-shadow: 0 2px 16px rgb(0 102 0 / 5%);
    backdrop-filter: blur(12px);
}

.auth-topbar-label {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
}

.auth-main {
    width: min(100% - 32px, 700px);
    min-width: 0;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 64px) 0;
}

.auth-shell { width: 100%; }

.auth-card {
    width: min(560px, 100%);
    margin: 0 auto;
    padding: clamp(26px, 6vw, 48px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 22px 60px rgb(28 65 48 / 12%);
}

.auth-card-wide { width: min(620px, 100%); }
.auth-heading { max-width: 52ch; }
.auth-heading h1 { margin-bottom: .75rem; }
.auth-heading .muted { margin-bottom: 0; }

.auth-notice {
    width: min(560px, 100%);
    margin: 0 auto 1rem;
    box-shadow: var(--shadow-sm);
}

.auth-notice p { margin: .25rem 0 0; }

.auth-form {
    gap: .45rem;
    margin-top: 1.75rem;
}

.auth-form > label:not(.checkbox),
.auth-label-row {
    margin-top: .7rem;
}

.auth-form > label:first-child { margin-top: 0; }

.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.auth-label-row label,
.auth-resend-form label {
    color: var(--ink);
    font-size: .9rem;
    font-weight: 700;
}

.auth-label-row a { font-size: .84rem; font-weight: 750; }

.password-control {
    position: relative;
}

.password-control input { padding-right: 76px !important; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    min-width: 60px;
    min-height: 34px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 7px;
    padding: 5px 8px;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.password-toggle:hover { background: #d9efd9; }

.auth-remember {
    margin: .9rem 0 .35rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.auth-remember span { display: grid; gap: .1rem; }
.auth-remember small { font-size: .76rem; }
.auth-submit { width: 100%; margin-top: .7rem; }

.auth-secondary-action {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 750;
}

.auth-security-note {
    display: grid;
    gap: .2rem;
    margin-top: 1.5rem;
    padding: .9rem 1rem;
    border-left: 4px solid var(--green);
    border-radius: 0 10px 10px 0;
    color: var(--ink-soft);
    background: var(--green-soft);
    font-size: .82rem;
    line-height: 1.5;
}

.auth-security-note strong { color: var(--green-dark); }

.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0 1rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.auth-resend-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .5rem .75rem;
}

.auth-resend-form label { grid-column: 1 / -1; }
.auth-resend-form select { min-width: 0; }

.otp-input {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: .32em;
    font-variant-numeric: tabular-nums;
}

.auth-signout { margin-top: 1rem; }
.auth-signout .button { width: 100%; }

.auth-footer {
    display: flex;
    justify-content: center;
    gap: .5rem 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 16px 1.5rem;
    color: var(--muted);
    font-size: .75rem;
    text-align: center;
}

.error-page {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 14% 18%, rgb(8 127 35 / 9%), transparent 32rem),
        linear-gradient(145deg, #eef8ed, #fbfcf8);
}

.error-shell {
    width: min(100%, 680px);
    padding: clamp(28px, 7vw, 56px);
    border: 1px solid var(--line);
    border-radius: 26px;
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 22px 60px rgb(28 65 48 / 12%);
}

.error-brand { margin-bottom: clamp(2rem, 6vw, 3.5rem); }
.error-code {
    display: inline-flex;
    margin-bottom: .9rem;
    border-radius: 999px;
    padding: .35rem .7rem;
    color: var(--green-dark);
    background: var(--green-soft);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .1em;
}

.error-shell h1 { margin-bottom: .75rem; }
.error-description { max-width: 52ch; color: var(--muted); line-height: 1.65; }
.error-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.error-help { margin: 1.5rem 0 0; color: var(--muted); font-size: .82rem; }

@media (max-width: 560px) {
    .auth-topbar { min-height: 66px; }
    .auth-topbar-label { display: none; }
    .auth-main { width: min(100% - 20px, 700px); padding-block: 18px 30px; }
    .auth-card { border-radius: 18px; }
    .auth-resend-form { grid-template-columns: 1fr; }
    .auth-resend-form label { grid-column: auto; }
    .auth-resend-form .button { width: 100%; }
    .error-page { padding: 10px; }
    .error-shell { border-radius: 18px; }
    .error-actions { display: grid; }
}

@media (forced-colors: active) {
    .auth-card,
    .error-shell,
    .auth-security-note,
    .auth-remember { border: 1px solid CanvasText; }
}