.login-premium {
    --login-shell-max-width: 90rem;
    --login-shell-min-height: min(52rem, calc(100vh - (var(--premium-space-xl) * 2)));
    --login-brand-width: minmax(22rem, 0.9fr);
    --login-form-width: minmax(28rem, 1.1fr);
    --login-panel-padding: clamp(2rem, 5vw, 5rem);
    --login-logo-max-width: min(18rem, 72%);
    --login-form-max-width: 27rem;
    --login-control-height: 3.25rem;
    --login-brand-mark-size: 2.75rem;
    --login-icon-size: 1rem;
    --login-background: var(--premium-canvas-deep);
    --login-brand-background: var(--premium-sidebar);
    --login-brand-text: var(--premium-sidebar-text-strong);
    --login-brand-muted: var(--premium-sidebar-text);
    --login-form-background: var(--premium-surface);
    --login-brand-line: rgba(var(--theme-primary-rgb), 0.76);
    --login-brand-accent: var(--primary-color);
    --login-form-border: var(--premium-border);
    --login-control-border: var(--premium-border-strong);
    --login-control-background: var(--premium-surface-subtle);
    --login-control-background-focus: var(--premium-surface);

    min-height: 100vh;
    margin: 0;
    padding: var(--premium-space-xl);
    display: grid;
    place-items: center;
    color: var(--premium-ink);
    background: var(--login-background);
    font-family: var(--premium-font-body);
}

.login-premium .login-container {
    position: relative;
    display: grid;
    grid-template-columns: var(--login-brand-width) var(--login-form-width);
    width: min(100%, var(--login-shell-max-width));
    min-height: var(--login-shell-min-height);
    overflow: hidden;
    border: var(--premium-border-width) solid var(--login-form-border);
    border-radius: var(--premium-radius-lg);
    background: var(--login-form-background);
    box-shadow: var(--premium-shadow-md);
}

.login-premium .login-branding {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: var(--login-panel-padding);
    overflow: hidden;
    color: var(--login-brand-text);
    background: var(--login-brand-background);
}

.login-premium .login-branding::before {
    content: '';
    position: absolute;
    inset: var(--premium-space-xl) auto var(--premium-space-xl) 0;
    width: var(--premium-border-width);
    background: var(--login-brand-accent);
    opacity: 0.9;
}

.login-premium .login-branding::after {
    display: none;
}

.login-premium .login-branding__content {
    display: flex;
    width: 100%;
    max-width: 32rem;
    flex-direction: column;
    align-items: center;
    gap: var(--premium-space-lg);
    text-align: center;
    transform: translateY(calc(-1 * var(--premium-space-xl)));
    z-index: 20;
}

.login-premium .login-logo-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin: 0;
    text-align: center;
}

.login-premium .login-logo {
    width: auto;
    max-width: var(--login-logo-max-width);
    max-height: 9rem;
    margin: 0 0 var(--premium-space-xl);
    object-fit: contain;
    object-position: center;
    filter: none;
    animation: none;
}

.login-premium .login-branding-title {
    margin: 0;
    color: var(--login-brand-text);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: var(--premium-font-weight-semibold);
    line-height: var(--premium-line-height-tight);
    letter-spacing: var(--premium-tracking-tight);
}

.login-premium .login-branding-subtitle {
    max-width: 30rem;
    margin: var(--premium-space-sm) 0 0;
    color: var(--login-brand-muted);
    font-size: var(--premium-font-size-md);
    line-height: var(--premium-line-height-base);
}

.login-premium .login-train-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-premium .login-form-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: var(--login-panel-padding);
    background: var(--login-form-background);
}

.login-premium .login-form-wrapper {
    width: min(100%, var(--login-form-max-width));
    max-width: var(--login-form-max-width);
    animation: none;
}

.login-premium .login-header {
    margin-bottom: var(--premium-space-2xl);
    text-align: left;
}

.login-premium .login-title {
    display: block;
    margin: 0;
    color: var(--premium-ink-strong);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: var(--premium-font-weight-semibold);
    line-height: var(--premium-line-height-tight);
    letter-spacing: var(--premium-tracking-tight);
}

.login-premium .login-title::after {
    display: none;
}

.login-premium .login-subtitle {
    margin: var(--premium-space-sm) 0 0;
    color: var(--premium-ink-muted);
    font-size: var(--premium-font-size-base);
    line-height: var(--premium-line-height-base);
}

.login-premium .login-form .form-group {
    margin: 0 0 var(--premium-space-lg);
    padding: 0;
    animation: none;
}

.login-premium .input-wrapper {
    position: relative;
}

.login-premium .login-form .form-label {
    gap: var(--premium-space-xs);
    margin-bottom: var(--premium-space-xs);
    color: var(--premium-ink);
    font-size: var(--premium-font-size-sm);
    font-weight: var(--premium-font-weight-medium);
}

.login-premium .login-form .form-label i {
    color: var(--premium-ink-muted);
    font-size: var(--login-icon-size);
    transition: color var(--premium-transition);
}

.login-premium .login-form .form-group:focus-within .form-label i {
    color: var(--primary-color);
    transform: none;
}

.login-premium .login-form .form-control {
    height: var(--login-control-height);
    padding: var(--premium-space-sm) var(--premium-space-md);
    border: var(--premium-border-width) solid var(--login-control-border);
    border-radius: var(--premium-radius-sm);
    color: var(--premium-ink-strong);
    background: var(--login-control-background);
    font-size: var(--premium-font-size-base);
    font-weight: var(--premium-font-weight-normal);
    box-shadow: var(--premium-shadow-none);
    transition: border-color var(--premium-transition), background var(--premium-transition), box-shadow var(--premium-transition);
}

.login-premium .login-form .form-control:hover {
    border-color: var(--premium-border-strong);
    background: var(--login-control-background-focus);
}

.login-premium .login-form .form-control:focus {
    border-color: var(--primary-color);
    background: var(--login-control-background-focus);
    box-shadow: var(--premium-shadow-focus);
}

.login-premium .login-form .form-control:focus::placeholder {
    transform: none;
    opacity: 1;
}

.login-premium .password-toggle {
    position: absolute;
    top: 50%;
    right: var(--premium-space-sm);
    display: inline-grid;
    width: var(--premium-icon-control-size);
    height: var(--premium-icon-control-size);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: var(--premium-radius-sm);
    color: var(--premium-ink-muted);
    background: transparent;
    transform: translateY(-50%);
    transition: color var(--premium-transition), background var(--premium-transition), box-shadow var(--premium-transition);
    z-index: 3;
}

.login-premium .password-toggle:hover {
    color: var(--premium-ink-strong);
    background: var(--premium-surface-quiet);
}

.login-premium .password-toggle:focus-visible {
    box-shadow: var(--premium-shadow-focus);
}

.login-premium .login-form input[name='password'] {
    padding-right: calc(var(--premium-icon-control-size) + var(--premium-space-lg));
}

.login-premium .login-form .btn-login {
    width: 100%;
    height: var(--login-control-height);
    margin: var(--premium-space-sm) 0 0;
    border: var(--premium-border-width) solid var(--primary-color);
    border-radius: var(--premium-radius-sm);
    color: var(--primary-foreground);
    background: var(--primary-color);
    font-size: var(--premium-font-size-base);
    font-weight: var(--premium-font-weight-semibold);
    letter-spacing: normal;
    box-shadow: var(--premium-shadow-none);
    animation: none;
    transition: border-color var(--premium-transition), background var(--premium-transition), box-shadow var(--premium-transition);
}

.login-premium .login-form .btn-login:not(:disabled):hover,
.login-premium .login-form .btn-login:not(:disabled):focus-visible {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
    box-shadow: var(--premium-shadow-focus);
    transform: none;
}

.login-premium .login-error {
    margin-bottom: var(--premium-space-lg);
    padding: var(--premium-space-sm) var(--premium-space-md);
    border-radius: var(--premium-radius-sm);
    box-shadow: var(--premium-shadow-none);
}

.login-premium :where(.login-error, .login-success) {
    display: none;
    align-items: center;
    margin-bottom: var(--premium-space-lg);
    padding: var(--premium-space-sm) var(--premium-space-md);
    border: var(--premium-border-width) solid var(--premium-border);
    border-radius: var(--premium-radius-sm);
    font-size: var(--premium-font-size-sm);
}

.login-premium :where(.login-error, .login-success).show {
    display: flex;
}

.login-premium .login-error {
    color: var(--danger-color);
    border-color: var(--danger-soft-border);
    background: var(--danger-light);
}

.login-premium .login-success {
    color: var(--success-color);
    border-color: rgba(var(--theme-success-rgb), 0.18);
    background: var(--success-light);
}

.login-premium .btn-login .spinner {
    display: none;
    width: var(--login-icon-size);
    height: var(--login-icon-size);
    margin-right: var(--premium-space-xs);
    border: calc(var(--premium-border-width) * 2) solid rgba(var(--theme-on-primary-rgb), 0.3);
    border-top-color: var(--primary-foreground);
    border-radius: var(--premium-radius-pill);
    animation: loginSpinner 700ms linear infinite;
}

.login-premium .btn-login.loading .spinner {
    display: inline-block;
}

.login-premium .btn-login.loading .btn-text {
    opacity: 0.72;
}

@keyframes loginSpinner {
    to {
        transform: rotate(360deg);
    }
}

.login-premium .login-form__security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--premium-space-xs);
    margin: var(--premium-space-lg) 0 0;
    color: var(--premium-ink-subtle);
    font-size: var(--premium-font-size-xs);
    text-align: center;
}

@media (max-width: 900px) {
    .login-premium {
        padding: 0;
        place-items: stretch;
    }

    .login-premium .login-container {
        grid-template-columns: 1fr;
        width: 100%;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .login-premium .login-branding {
        min-height: 16rem;
        padding: var(--premium-space-xl);
    }

    .login-premium .login-logo {
        max-width: min(14rem, 64%);
        max-height: 6rem;
        margin-bottom: var(--premium-space-lg);
    }

    .login-premium .login-branding-title {
        font-size: var(--premium-font-size-xl);
    }

    .login-premium .login-form-section {
        padding: var(--premium-space-2xl) var(--premium-space-xl);
    }
}

@media (max-width: 575.98px) {
    .login-premium .login-branding {
        min-height: 16rem;
        padding: var(--premium-space-lg);
    }

    .login-premium .login-branding::after,
    .login-premium .login-branding-title,
    .login-premium .login-branding-subtitle {
        display: none;
    }

    .login-premium .login-logo {
        max-width: min(12rem, 72%);
        max-height: 5rem;
        margin: 0;
    }

    .login-premium .login-branding__content {
        transform: translateY(calc(-1 * var(--premium-space-md)));
    }

    .login-premium .login-form-section {
        align-items: flex-start;
        padding: var(--premium-space-xl) var(--premium-space-lg) var(--premium-space-2xl);
    }

    .login-premium .login-header {
        margin-bottom: var(--premium-space-xl);
    }
}