html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

html.dark .bg-white {
    background-color: #1e293b !important;
}

html.dark .bg-surface-50,
html.dark .bg-gray-50 {
    background-color: #0f172a !important;
}

html.dark .bg-surface-100,
html.dark .bg-gray-100 {
    background-color: #1e293b !important;
}

html.dark .bg-surface-200,
html.dark .bg-gray-200 {
    background-color: #334155 !important;
}

html.dark .bg-brand-50,
html.dark .bg-blue-50,
html.dark .bg-indigo-50 {
    background-color: #172554 !important;
}

html.dark .bg-green-50 {
    background-color: #052e16 !important;
}

html.dark .bg-amber-50,
html.dark .bg-yellow-50 {
    background-color: #422006 !important;
}

html.dark .bg-purple-50 {
    background-color: #3b0764 !important;
}

html.dark .bg-red-50,
html.dark .bg-rose-50 {
    background-color: #450a0a !important;
}

html.dark .bg-brand-100,
html.dark .bg-blue-100,
html.dark .bg-green-100,
html.dark .bg-amber-100,
html.dark .bg-yellow-100,
html.dark .bg-purple-100,
html.dark .bg-red-100 {
    background-color: #334155 !important;
}

html.dark .text-surface-900,
html.dark .text-gray-900 {
    color: #f8fafc !important;
}

html.dark .text-surface-800,
html.dark .text-surface-700,
html.dark .text-gray-800,
html.dark .text-gray-700 {
    color: #e2e8f0 !important;
}

html.dark .text-surface-600,
html.dark .text-surface-500,
html.dark .text-surface-400,
html.dark .text-gray-600,
html.dark .text-gray-500,
html.dark .text-gray-400 {
    color: #cbd5e1 !important;
}

html.dark .text-brand-600,
html.dark .text-brand-500,
html.dark .text-brand-700,
html.dark .text-brand-800,
html.dark .text-brand-900,
html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark .text-blue-800,
html.dark .text-blue-900 {
    color: #93c5fd !important;
}

html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800,
html.dark .text-green-900 {
    color: #86efac !important;
}

html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900,
html.dark .text-yellow-600,
html.dark .text-yellow-700,
html.dark .text-yellow-800 {
    color: #fcd34d !important;
}

html.dark .text-purple-600,
html.dark .text-purple-700,
html.dark .text-purple-800,
html.dark .text-indigo-700 {
    color: #d8b4fe !important;
}

html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800,
html.dark .text-rose-700 {
    color: #fda4af !important;
}

html.dark .border-surface-100,
html.dark .border-surface-200,
html.dark .border-surface-300,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: #334155 !important;
}

html.dark .border-brand-100,
html.dark .border-brand-200,
html.dark .border-blue-100,
html.dark .border-blue-200,
html.dark .border-green-100,
html.dark .border-green-200,
html.dark .border-amber-100,
html.dark .border-amber-200,
html.dark .border-purple-200,
html.dark .border-red-100,
html.dark .border-red-200,
html.dark .border-yellow-200 {
    border-color: #475569 !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark textarea,
html.dark select {
    background-color: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #94a3b8;
}

.theme-toggle {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    padding: 8px 12px;
    color: #334155;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.theme-toggle:hover {
    background: #f1f5f9;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.theme-toggle-sun,
html.dark .theme-toggle-moon {
    display: none;
}

html.dark .theme-toggle {
    border-color: #475569;
    background: #1e293b;
    color: #e2e8f0;
}

html.dark .theme-toggle:hover {
    background: #334155;
}

html.dark .theme-toggle-sun {
    display: block;
}

html.dark .notice {
    background-color: #334155;
    color: #e2e8f0;
}

html.dark .login .intro,
html.dark .muted,
html.dark .privacy,
html.dark .admin {
    color: #cbd5e1;
}

html.dark .google {
    border-color: #475569;
    background-color: #1e293b;
    color: #f8fafc;
}

html.dark .google:hover {
    background-color: #334155;
}

html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="text"] {
    border-color: #475569;
    background-color: #1e293b;
    color: #f8fafc;
}

html.dark .reveal {
    border-color: #475569;
    background-color: #1e293b;
    color: #93c5fd;
}

.theme-header {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
}

@media (max-width: 760px) {
    .theme-header {
        top: 12px;
        right: 12px;
    }

    .theme-toggle {
        min-height: 38px;
        padding: 7px 9px;
    }
}