.auth-page {
    --auth-ink: #061a35;
    --auth-muted: #64748b;
    --auth-line: #dbe7ee;
    --auth-accent: #12c9ce;
    --auth-accent-strong: #0ea5aa;
    color: var(--auth-ink);
    color-scheme: light;
    background:
        radial-gradient(circle at 50% 18%, rgba(18, 201, 206, .07), transparent 32%),
        linear-gradient(180deg, #fbfcfd 0%, #f2f6f8 100%);
}

.auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: .28;
    background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, .72), transparent 34%);
    pointer-events: none;
}

.auth-panel-card {
    border: 1px solid rgba(219, 231, 238, .92);
    border-radius: 28px;
    color: var(--auth-ink);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 24px 70px rgba(6, 26, 53, .12), inset 0 1px 0 #ffffff;
    backdrop-filter: blur(20px);
}

.auth-panel-head {
    text-align: center;
}

.auth-panel-head h2 {
    color: var(--auth-ink);
    font-size: 32px;
}

.auth-panel-head p {
    color: var(--auth-muted);
    line-height: 1.55;
}

.auth-brand .brand-beta {
    border-color: rgba(18, 201, 206, .42);
    color: #087f83;
    background: rgba(18, 201, 206, .10);
}

.auth-field label {
    color: var(--auth-ink);
}

.auth-input,
.auth-input:hover,
.auth-input:active {
    min-height: 52px;
    border: 1px solid #cbdbe5;
    border-radius: 14px;
    color: var(--auth-ink);
    caret-color: var(--auth-accent-strong);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(6, 26, 53, .04);
    -webkit-text-fill-color: var(--auth-ink);
}

.auth-input::placeholder {
    color: #8191a5;
    opacity: 1;
    -webkit-text-fill-color: #8191a5;
}

.auth-input:focus,
.auth-input:focus-visible {
    border-color: var(--auth-accent-strong);
    outline: none;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(18, 201, 206, .16), 0 8px 24px rgba(6, 26, 53, .08);
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:autofill {
    border-color: #cbdbe5;
    color: var(--auth-ink);
    caret-color: var(--auth-accent-strong);
    box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: var(--auth-ink);
}

.auth-btn {
    min-height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--auth-accent) 0%, var(--auth-accent-strong) 100%);
    box-shadow: 0 14px 28px rgba(14, 165, 170, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.auth-btn:hover,
.auth-btn:focus-visible {
    outline: none;
    filter: saturate(1.08) brightness(.98);
    box-shadow: 0 16px 32px rgba(14, 165, 170, .28), 0 0 0 4px rgba(18, 201, 206, .12);
}

.auth-forgot-link {
    justify-self: end;
    color: #087f83;
    font-size: 13px;
    font-weight: 700;
}

.auth-forgot-link:hover {
    color: #065f63;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-separator {
    color: #8191a5;
}

.auth-separator::before,
.auth-separator::after {
    background: linear-gradient(90deg, transparent, var(--auth-line), transparent);
}

.auth-social-btn,
.auth-secondary {
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    color: var(--auth-ink);
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(6, 26, 53, .05);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.auth-social-btn:hover,
.auth-social-btn:focus-visible,
.auth-secondary:hover,
.auth-secondary:focus-visible {
    border-color: #9edfe1;
    outline: none;
    color: var(--auth-ink);
    background: #f4fcfc;
    box-shadow: 0 10px 24px rgba(6, 26, 53, .08);
}

.auth-footer {
    color: var(--auth-muted);
}

.auth-recovery-actions {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.auth-recovery-note {
    margin: 18px 0 0;
    color: var(--auth-muted);
    font-size: 13px;
    line-height: 1.6;
}

.auth-verification-resend {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #bdebe1;
    border-radius: 16px;
    background: #effcf8;
}

.auth-verification-resend p {
    margin: 0 0 12px;
    color: #37566a;
    font-size: 14px;
    line-height: 1.5;
}

.auth-password-control {
    position: relative;
}

.auth-password-control .auth-input {
    padding-right: 52px;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    transform: translateY(-50%);
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #60738a;
    cursor: pointer;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
    background: #eafafb;
    color: var(--auth-accent-strong);
    outline: none;
}

.auth-password-eye {
    position: relative;
    width: 20px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50% / 65%;
}

.auth-password-eye::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: currentColor;
}

.auth-password-toggle.is-visible .auth-password-eye::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -3px;
    width: 23px;
    height: 2px;
    transform: rotate(-42deg);
    background: currentColor;
    box-shadow: 0 0 0 2px #ffffff;
}

.auth-password-requirement {
    color: var(--auth-muted);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 560px) {
    .auth-shell-simple {
        align-items: start;
        padding: 16px;
    }

    .auth-panel-card {
        padding: 26px 18px;
        border-radius: 22px;
    }

    .auth-panel-head h2 {
        font-size: 28px;
    }

    .auth-logo {
        max-width: 210px;
    }

    .auth-input {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-btn,
    .auth-social-btn,
    .auth-secondary {
        transition: none;
    }
}