static/css/_dark.css

/* ── Dark mode: sidebar ── */
.dark .sidebar, .dark [class*="sidebar"] {
    background: #1a1a1a !important;
    border: none !important;
    box-shadow: none !important;
}
.dark .sidebar h1, .dark [class*="sidebar"] h1 {
    color: #e8e8e8 !important;
}
.dark .sidebar .block,
.dark .sidebar .form,
.dark .sidebar .panel,
.dark .sidebar > div,
.dark [class*="sidebar"] .block,
.dark [class*="sidebar"] .form,
.dark [class*="sidebar"] .panel,
.dark [class*="sidebar"] > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Dark mode: global inputs ── */
.dark textarea, .dark input[type="text"] {
    background: #2a2a2a !important;
    color: #e8e8e8 !important;
    border-color: #3a3a3a !important;
}
.dark textarea::placeholder, .dark input[type="text"]::placeholder {
    color: #666 !important;
}

/* ── Dark mode: slider tracks ── */
.dark .gradio-container input[type="range"]::-moz-range-progress { background-color: #6b9fff !important; }
.dark .gradio-container input[type="range"]::-moz-range-track { background: #2a2a2a !important; }

/* ── Dark mode: dropdowns ── */
.dark select, .dark .wrap[data-testid="dropdown"] {
    background: #2a2a2a !important;
    color: #e8e8e8 !important;
    border-color: #3a3a3a !important;
}

/* ── Dark mode: accordion ── */
.dark .accordion {
    background: #1f1f1f !important;
    border-color: #2a2a2a !important;
}

/* ── Dark mode: forms & labels ── */
.dark .form {
    border-color: #2a2a2a !important;
}
.dark label, .dark .label-wrap {
    color: #c0c0c0 !important;
}
.dark .info-text, .dark span[data-testid="block-info"] {
    color: #808080 !important;
}

/* ── Dark mode: scrollbars ── */
.dark *::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    background: transparent !important;
}
.dark *::-webkit-scrollbar-track {
    background: transparent !important;
    border: none !important;
}
.dark *::-webkit-scrollbar-thumb {
    background: #3a3a3a !important;
    border-radius: 4px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}
.dark *::-webkit-scrollbar-thumb:hover {
    background: #505050 !important;
    background-clip: padding-box !important;
}
.dark *::-webkit-scrollbar-corner {
    background: transparent !important;
}
.dark * {
    scrollbar-width: thin !important;
    scrollbar-color: #3a3a3a transparent !important;
}

/* ── Dark mode: sliders (track + thumb) ── */
.dark input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    height: 4px !important;
    cursor: pointer !important;
}
.dark input[type="range"]::-webkit-slider-runnable-track {
    background: #2f2f2f !important;
    height: 4px !important;
    border-radius: 2px !important;
    border: none !important;
}
.dark input[type="range"]::-moz-range-track {
    background: #2f2f2f !important;
    height: 4px !important;
    border-radius: 2px !important;
    border: none !important;
}
.dark input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #6b9fff !important;
    border: 2px solid #1f1f1f !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    margin-top: -7px !important;
    cursor: pointer !important;
}
.dark input[type="range"]::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #6b9fff !important;
    border: 2px solid #1f1f1f !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    cursor: pointer !important;
}
.dark input[type="range"]::-moz-range-progress {
    background-color: #4b7fd6 !important;
    height: 4px !important;
    border-radius: 2px !important;
}

/* ── Dark mode: number/spin inputs (slider value boxes) ── */
.dark input[type="number"] {
    background: #1f1f1f !important;
    color: #c8c8c8 !important;
    border: 1px solid #262626 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
.dark input[type="number"]:focus {
    border-color: rgba(107, 159, 255, 0.35) !important;
    outline: none !important;
}
.dark input[type="number"]::-webkit-inner-spin-button,
.dark input[type="number"]::-webkit-outer-spin-button {
    filter: invert(0.85) !important;
    opacity: 0.4 !important;
}
/* Number-input wrappers (the small editable boxes next to sliders).
 * Previously also targeted .wrap.svelte-1cl284s; dropped the hash since
 * Gradio regenerates it. Stable selectors below cover the same elements. */
.dark .gradio-container [class*="number_input"],
.dark .gradio-container [data-testid*="number"] input,
.dark .gradio-container [data-testid*="number"] .wrap,
.dark .gradio-container .head .wrap,
.dark .gradio-container .head input {
    background: #1f1f1f !important;
    color: #c8c8c8 !important;
    border-color: #262626 !important;
    box-shadow: none !important;
}
.dark .gradio-container .head,
.dark .gradio-container .head > div,
.dark .gradio-container .tabular-nums {
    background: transparent !important;
    border-color: #262626 !important;
}

/* ── Dark mode: slider min/max range labels (e.g. "0", "1", "65536") ── */
.dark .gradio-container .min,
.dark .gradio-container .max,
.dark .head .min,
.dark .head .max,
.dark span.tabular-nums {
    color: #707070 !important;
}

/* ── Dark mode: reset-to-default arrow button next to inputs ── */
.dark button[aria-label="Reset to default value"],
.dark button[title="Reset to default value"] {
    background: transparent !important;
    color: #707070 !important;
    border: none !important;
    box-shadow: none !important;
}
.dark button[aria-label="Reset to default value"]:hover,
.dark button[title="Reset to default value"]:hover {
    color: #b0b0b0 !important;
    background: transparent !important;
}