.login-page {
    --login-card-max-width: var(--ui-login-card-max-width, 28rem);
    --login-card-radius: var(--ui-login-card-radius, 2rem);
    --login-logo-size: var(--ui-login-logo-size, 4.75rem);
    --login-page-padding-y: var(--ui-login-page-padding-y, calc(var(--spacing) * 6));
    --login-page-padding-x: var(--ui-login-page-padding-x, calc(var(--spacing) * 3));
    --login-page-bg: var(--ui-login-page-bg, var(--color-bg));
    --login-card-padding: var(--ui-login-card-padding, calc(var(--spacing) * 4));
    --login-input-height: var(--ui-login-input-height, 3.25rem);
    --login-button-height: var(--ui-login-button-height, 3.25rem);
    --login-provider-button-height: var(--ui-login-provider-button-height, 3.5rem);
    --login-provider-icon-size: var(--ui-login-provider-icon-size, 1.25rem);

    --login-logo-radius: var(--ui-login-logo-radius, 1.25rem);
    --login-logo-padding: var(--ui-login-logo-padding, calc(var(--spacing) * 3));

    --login-badge-bg: var(--ui-login-badge-bg, color-mix(in oklab, var(--color-surface) 84%, var(--color-primary) 16%));
    --login-badge-border: var(--ui-login-badge-border, color-mix(in oklab, var(--color-border) 72%, var(--color-primary) 28%));
    --login-badge-text: var(--ui-login-badge-text, color-mix(in oklab, var(--color-text) 72%, var(--color-primary) 28%));
    --login-accordion-bg: var(--ui-login-accordion-bg, color-mix(in srgb, var(--color-primary) 6%, var(--color-surface) 94%));
    --login-accordion-border: var(--ui-login-accordion-border, color-mix(in srgb, var(--color-primary) 18%, var(--color-border) 82%));

    --login-title-size: var(--ui-login-title-size, clamp(1.85rem, 3vw, 2.35rem));
    --login-subtitle-size: var(--ui-login-subtitle-size, 1rem);
    --login-subtitle-max-width: var(--ui-login-subtitle-max-width, 32rem);

    --login-gap: var(--ui-login-gap, calc(var(--spacing) * 3));

    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--login-page-padding-y) var(--login-page-padding-x);
    font-family: var(--font-sans-base);
    background:
        radial-gradient(circle at top left, color-mix(in oklab, var(--color-primary) 14%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in oklab, var(--color-bg) 96%, var(--color-border) 4%), var(--login-page-bg));
}

.login-layout {
    width: 100%;
    max-width: var(--login-card-max-width);
    margin-inline: auto;
}

.login-card {
    width: 100%;
    border-radius: var(--login-card-radius);
    background: color-mix(in oklab, var(--color-surface) 97%, var(--color-border) 3%);
    border: 1px solid color-mix(in oklab, var(--color-border) 72%, var(--color-primary) 28%);
    box-shadow: 0 18px 42px color-mix(in oklab, var(--color-primary) 10%, transparent);
    padding: var(--login-card-padding);
}

.login-stack {
    display: flex;
    flex-direction: column;
    gap: var(--login-gap);
}

.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    text-align: center;
}

.login-logo {
    width: var(--login-logo-size);
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.login-title {
    margin: 0;
    font-weight: 700;
    color: color-mix(in oklab, var(--color-text) 84%, var(--color-primary) 16%);
}

.login-subtitle {
    margin: 0;
    color: color-mix(in oklab, var(--color-text-muted) 88%, var(--color-primary) 12%);
}

.login-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
}

.login-fieldset {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 0;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
}

.login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
}

.login-label {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.login-meta-link {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.login-input,
.login-form .input,
.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"] {
    min-height: var(--login-input-height);
}

.login-actions {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--color-text);
}

.login-remember input[type="checkbox"] {
    margin: 0;
}

.login-submit,
.login-actions .btn,
.login-actions button[type="submit"] {
    min-height: var(--login-button-height);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

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

.login-providers {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2.5);
}

/*
.provider-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.5rem;
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition:
            background-color 160ms ease,
            border-color 160ms ease,
            color 160ms ease,
            transform 160ms ease,
            box-shadow 160ms ease;
}

.provider-button__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
    min-width: 0;
}

.provider-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--login-provider-icon-size);
    height: var(--login-provider-icon-size);
}

.provider-button__icon > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.provider-button__label {
    display: block;
    min-width: 0;
    white-space: nowrap;
    line-height: 1.2;
}
*/
.provider-button {
    justify-content: flex-start;
    gap: calc(var(--spacing) * 3);
    text-align: left;
    border-color: color-mix(in oklab, var(--color-border) 72%, var(--color-primary) 28%);
    background: color-mix(in oklab, var(--color-surface) 98%, var(--color-primary) 2%);
}

.provider-button:hover {
    border-color: color-mix(in oklab, var(--color-primary) 36%, var(--color-border) 64%);
    background: color-mix(in oklab, var(--color-surface) 92%, var(--color-primary) 8%);
}

.provider-button__content {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-width: 0;
}

.provider-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--login-provider-icon-size);
    height: var(--login-provider-icon-size);
    flex: 0 0 auto;
}

.provider-button__icon > svg {
    width: 100%;
    height: 100%;
    display: block;
}

.provider-button__label {
    white-space: nowrap;
    line-height: 1.2;
}

.provider-button--microsoft {
    color: #1f1f1f;
    border-color: #d1d5db;
    background: linear-gradient(
            90deg,
            #0078d4 0,
            #0078d4 0.75rem,
            #ffffff 0.75rem,
            #ffffff 100%
    );
}

.provider-button--microsoft:hover {
    color: #1f1f1f;
    border-color: #cbd5e1;
    background: linear-gradient(
            90deg,
            #0078d4 0,
            #0078d4 0.75rem,
            #f8fafc 0.75rem,
            #f8fafc 100%
    );
}

.auth-accordion {
    border: 0;
}

.auth-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    width: 100%;
    min-height: var(--login-button-height);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);

    border-radius: var(--radius-xl);
    background: var(--login-accordion-bg);
    border: 1px solid var(--login-accordion-border);
    color: var(--color-text);

    font-weight: var(--font-weight-semibold);
    text-align: left;
    cursor: pointer;
    list-style: none;

    box-shadow: var(--shadow-xs);
    transition:
            background-color 160ms ease,
            border-color 160ms ease,
            color 160ms ease,
            box-shadow 160ms ease,
            transform 120ms ease;
}

.auth-accordion__summary:hover {
    background: color-mix(in oklab, var(--color-surface) 92%, var(--color-primary) 8%);
    border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.auth-accordion__summary:active {
    transform: translateY(0);
}

.auth-accordion__summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--color-primary);
}

.auth-accordion__summary::-webkit-details-marker {
    display: none;
}

.auth-accordion__summary::marker {
    content: "";
}

.auth-accordion__title {
    min-width: 0;
}

.auth-accordion__chevron {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 220ms ease;
}

.auth-accordion__chevron svg {
    width: 100%;
    height: 100%;
    display: block;
}

.auth-accordion__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 240ms ease;
}

.auth-accordion__content-inner {
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.25rem);
    transition:
            opacity 180ms ease,
            transform 240ms ease,
            padding-top 240ms ease;
    padding-top: 0;
}

.auth-accordion[open] .auth-accordion__content {
    grid-template-rows: 1fr;
}

.auth-accordion[open] .auth-accordion__content-inner {
    opacity: 1;
    transform: translateY(0);
    padding: calc(var(--spacing) * 3);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-bottom-left-radius: calc(var(--radius-xl) * 0.8);
    border-bottom-right-radius: calc(var(--radius-xl) * 0.8);
    border-bottom: 1px solid var(--color-border);
}

.auth-accordion[open] .auth-accordion__chevron {
    transform: rotate(180deg);
}

.login-support {
    border-top: 1px solid var(--color-border);
    padding-top: calc(var(--spacing) * 3);
    margin-top: calc(var(--spacing) * 2);
}

.login-page .badge {
    background: color-mix(in oklab, var(--color-surface) 92%, var(--color-primary) 8%);
    border-color: color-mix(in oklab, var(--color-border) 76%, var(--color-primary) 24%);
    color: color-mix(in oklab, var(--color-text) 82%, var(--color-primary) 18%);
}

.login-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.validation-summary,
.login-validation {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
}

.validation-summary ul,
.login-validation ul {
    margin: 0;
    padding-left: 1.25rem;
}

.login-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
}

.login-options-row .login-meta-link {
    margin-left: auto;
    text-align: right;
}

.sms-phone-row {
    display: grid;
    grid-template-columns: minmax(5.75rem, 6.75rem) minmax(0, 1fr);
    gap: calc(var(--spacing) * 2);
    align-items: start;
}

.sms-country-picker,
.sms-phone-input-group {
    min-width: 0;
}

.sms-country-picker {
    position: relative;
}

.sms-country-picker__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 1);
    min-height: var(--login-input-height);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 2.5);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}

.sms-country-picker__summary::-webkit-details-marker {
    display: none;
}

.sms-country-picker__summary::marker {
    content: "";
}

.sms-country-picker__summary-label {
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
}

.sms-country-picker__chevron {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    transition: transform 160ms ease;
}

.sms-country-picker__chevron svg {
    width: 100%;
    height: 100%;
}

.sms-country-picker[open] .sms-country-picker__chevron {
    transform: rotate(180deg);
}

.sms-country-picker__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + calc(var(--spacing) * 1));
    left: 0;
    width: 100%;
    max-height: 18rem;
    overflow: auto;
    display: grid;
    gap: calc(var(--spacing) * 1);
    padding: calc(var(--spacing) * 1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.sms-country-picker__option {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    width: 100%;
    padding: calc(var(--spacing) * 2);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.sms-country-picker__option:hover,
.sms-country-picker__option.is-selected {
    background: color-mix(in oklab, var(--color-surface) 92%, var(--color-primary) 8%);
}

.sms-country-picker__flag,
.sms-country-picker__code {
    white-space: nowrap;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--color-text);
}

@media (max-width: 640px) {
    .login-page {
        --login-card-padding: calc(var(--spacing) * 4);
        --login-page-padding-y: calc(var(--spacing) * 4);
        --login-page-padding-x: calc(var(--spacing) * 2);
        --login-logo-size: 3.75rem;
    }

    .login-card {
        border-radius: var(--radius-xl);
    }

    .login-label-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .login-options-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .sms-phone-row {
        grid-template-columns: 1fr;
    }

    .login-options-row .login-meta-link {
        margin-left: 0;
    }
}