.login-tab.active {

    background-color: #fff;

    color: #1f2937;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

}



.login-tab:not(.active) {

    color: #9ca3af;

}



.login-tab:not(.active):hover {

    color: #6b7280;

}



.model-btn.active {

    background-color: rgb(var(--color-theme-rgb));

    color: #fff;

    border-color: rgb(var(--color-theme-rgb));

}



.model-btn:not(.active) {

    background-color: #f9fafb;

    color: #374151;

    border-color: #e5e7eb;

}



.model-btn:not(.active):hover {

    background-color: #f3f4f6;

}



.model-btn {

    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;

}



.login-input {

    border: 1.5px solid rgb(var(--color-theme-border-rgb));

    transition: border-color 0.3s ease, box-shadow 0.3s ease;

}



.login-input:focus {

    border-color: rgb(var(--color-theme-rgb));

    box-shadow: 0 0 0 3px var(--color-theme-focus-ring);

}



.login-checkbox {

    accent-color: rgb(var(--color-theme-rgb));

    width: 16px;

    height: 16px;

}



.login-panel {

    display: none;

}



.login-panel.active {

    display: block;

}



.login-card {

    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

}



.login-logo {

    background: linear-gradient(135deg, rgb(var(--color-theme-rgb)) 0%, var(--color-theme-logo-end) 100%);

    transition: background 0.3s ease;

}



.login-icon-bg {

    background-color: rgb(var(--color-theme-light-rgb));

    transition: background-color 0.3s ease;

}



.login-brand-title,

.login-brand-subtitle {

    transition: color 0.3s ease;

}