.auth-layout {
    color-scheme: light;
}

.auth-layout.dark-version {
    color-scheme: dark;
    background:
        radial-gradient(900px 520px at 0% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
        radial-gradient(760px 460px at 100% 100%, color-mix(in srgb, var(--secondary) 14%, transparent), transparent 58%),
        #0b1120 !important;
}

.auth-layout.dark-version .page-header {
    background: transparent !important;
}

.auth-layout.dark-version .auth-right {
    background:
        radial-gradient(760px 420px at 100% 0%, rgba(255, 255, 255, 0.045), transparent 58%),
        #0f172a !important;
    border-left-color: rgba(255, 255, 255, 0.1) !important;
}

.auth-layout.dark-version .auth-panel {
    color: rgba(255, 255, 255, 0.9);
}

.auth-layout.dark-version .auth-title,
.auth-layout.dark-version .auth-field label,
.auth-layout.dark-version .auth-info__title,
.auth-layout.dark-version .otp-expire strong,
.auth-layout.dark-version .lock-panel__time,
.auth-layout.dark-version .lock-chip,
.auth-layout.dark-version .auth-tabs .auth-tab.is-active,
.auth-layout.dark-version .auth-link {
    color: rgba(255, 255, 255, 0.94) !important;
}

.auth-layout.dark-version .auth-subtitle,
.auth-layout.dark-version .auth-meta,
.auth-layout.dark-version .auth-hint,
.auth-layout.dark-version .auth-backlink,
.auth-layout.dark-version .auth-info__sub,
.auth-layout.dark-version .auth-info__text,
.auth-layout.dark-version .otp-meta,
.auth-layout.dark-version .lock-row__label,
.auth-layout.dark-version .lock-panel__label,
.auth-layout.dark-version .text-muted {
    color: rgba(255, 255, 255, 0.64) !important;
}

.auth-layout.dark-version .auth-brand-dot {
    background: color-mix(in srgb, var(--primary) 82%, #ffffff 18%) !important;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 16%, transparent);
}

.auth-layout.dark-version .auth-input,
.auth-layout.dark-version .otp-box {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.94) !important;
}

.auth-layout.dark-version .auth-input::placeholder,
.auth-layout.dark-version .otp-box::placeholder {
    color: rgba(255, 255, 255, 0.38) !important;
}

.auth-layout.dark-version .auth-input:focus,
.auth-layout.dark-version .otp-box:focus {
    border-color: color-mix(in srgb, var(--primary) 58%, rgba(255, 255, 255, 0.16)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

.auth-layout.dark-version .auth-switch {
    color: rgba(255, 255, 255, 0.72) !important;
}

.auth-layout.dark-version .auth-switch input[type="checkbox"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

.auth-layout.dark-version .auth-switch input[type="checkbox"]:checked {
    background: color-mix(in srgb, var(--primary) 86%, #111827) !important;
    border-color: color-mix(in srgb, var(--primary) 72%, rgba(255, 255, 255, 0.22)) !important;
}

.auth-layout.dark-version .auth-button,
.auth-layout.dark-version .auth-button--dark {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 84%, #111827), #111827) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

.auth-layout.dark-version .auth-button--outline {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

.auth-layout.dark-version .auth-button--outline:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.auth-layout.dark-version .auth-info,
.auth-layout.dark-version .lock-panel,
.auth-layout.dark-version .lock-chip,
.auth-layout.dark-version .auth-tabs {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.auth-layout.dark-version .auth-tab {
    color: rgba(255, 255, 255, 0.58) !important;
}

.auth-layout.dark-version .auth-tab.is-active {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24) !important;
}

.auth-layout.dark-version .auth-alert {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.86) !important;
}

.auth-layout.dark-version .auth-alert--success {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.28) !important;
    color: #bbf7d0 !important;
}

.auth-layout.dark-version .auth-alert--info {
    background: rgba(59, 130, 246, 0.14) !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
    color: #bfdbfe !important;
}

.auth-layout.dark-version .auth-alert--danger {
    background: rgba(239, 68, 68, 0.13) !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
    color: #fecaca !important;
}

.auth-layout.dark-version .warn-panel,
.auth-layout.dark-version .warn-panel__chip {
    background: rgba(245, 158, 11, 0.13) !important;
    border-color: rgba(245, 158, 11, 0.28) !important;
}

.auth-layout.dark-version .warn-panel__title,
.auth-layout.dark-version .warn-panel__text,
.auth-layout.dark-version .warn-panel__chip {
    color: #fde68a !important;
}

.auth-layout.dark-version .danger-panel,
.auth-layout.dark-version .danger-panel__chip {
    background: rgba(239, 68, 68, 0.13) !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
}

.auth-layout.dark-version .danger-panel__title,
.auth-layout.dark-version .danger-panel__text,
.auth-layout.dark-version .danger-panel__chip {
    color: #fecaca !important;
}

.auth-layout.dark-version .lock-progress {
    background: rgba(245, 158, 11, 0.22) !important;
}

.auth-layout.dark-version .lock-progress__bar {
    background: linear-gradient(90deg, #f59e0b, #f97316) !important;
}

.auth-layout.dark-version .auth-left-overlay {
    background:
        radial-gradient(900px 600px at 20% 20%, rgba(255, 255, 255, 0.08), transparent 55%),
        radial-gradient(800px 500px at 80% 40%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
        linear-gradient(135deg, rgba(2, 6, 23, 0.62) 0%, rgba(2, 6, 23, 0.82) 56%, rgba(2, 6, 23, 0.94) 100%) !important;
}

.auth-layout.dark-version #toast-container > .toast {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
}