/* Streama Live — modo escuro (ativado por html.fox-color-dark) */

html.fox-color-dark {
    color-scheme: dark;
    background: #121014;
}

html.fox-color-dark body.fox-theme-default {
    --fox-text: #f3f1f3;
    --fox-muted: #9a989d;
    --fox-soft: #c8c6ca;
    --fox-faint: #7d7b80;
    --fox-line: #2c2a2e;
    --fox-page-bg: #121014;
    --fox-surface: #1a181c;
    --fox-sidebar-bg: #161417;
    --fox-sidebar-border: #2c2a2e;
    --fox-link: #f0709a;
    --tblr-body-bg: #121014;
    --tblr-body-color: #f3f1f3;
    --tblr-bg-surface: #1a181c;
    --tblr-border-color: #2c2a2e;
    --tblr-bg-surface-secondary: #201e22;
    background: #121014;
    color: var(--fox-text);
}

html.fox-color-dark body.fox-theme-default a:hover {
    color: #ff8ab0;
}

html.fox-color-dark .fox-theme-default .fox-shell,
html.fox-color-dark .fox-theme-default .fox-main {
    background: #121014;
}

html.fox-color-dark .fox-theme-default .fox-sidebar {
    background: var(--fox-sidebar-bg);
    border-right-color: var(--fox-line);
}

html.fox-color-dark .fox-theme-default .fox-brand-logo-light,
html.fox-color-dark .fox-theme-default .fox-brand-mark-light {
    display: none;
}

html.fox-color-dark .fox-theme-default .fox-brand-logo-dark {
    display: block;
}

html.fox-color-dark .fox-theme-default .fox-sidebar-collapse,
html.fox-color-dark .fox-theme-default .fox-color-toggle {
    color: #7d7b80;
}

html.fox-color-dark .fox-theme-default .fox-sidebar-collapse:hover,
html.fox-color-dark .fox-theme-default .fox-color-toggle:hover {
    background: #221f24;
    color: #f3f1f3;
}

html.fox-color-dark .fox-theme-default .fox-color-icon-moon {
    display: none;
}

html.fox-color-dark .fox-theme-default .fox-color-icon-sun {
    display: block;
}

html.fox-color-dark .fox-theme-default .fox-nav-item:hover {
    background: #221f24;
}

html.fox-color-dark .fox-theme-default .fox-nav-item.is-active {
    background: #2a1d26;
}

html.fox-color-dark .fox-onair-chip.is-off,
html.fox-color-dark .fox-onair-sep {
    color: #5c5a5f;
}

html.fox-color-dark .fox-theme-default .fox-topbar {
    border-bottom-color: var(--fox-line);
}

html.fox-color-dark .fox-theme-default .card,
html.fox-color-dark .fox-theme-default .card-header {
    background: var(--fox-surface);
    border-color: var(--fox-line);
}

html.fox-color-dark .fox-theme-default .btn-outline-primary,
html.fox-color-dark .fox-theme-default .btn-outline-secondary,
html.fox-color-dark .fox-theme-default .fox-action-btn {
    background: var(--fox-surface);
    border-color: #3a373c;
    color: var(--fox-link);
}

html.fox-color-dark .fox-theme-default .btn-outline-primary:hover,
html.fox-color-dark .fox-theme-default .btn-outline-secondary:hover {
    background: #221f24;
    border-color: var(--fox-link);
    color: var(--fox-link);
}

html.fox-color-dark .fox-theme-default .form-control,
html.fox-color-dark .fox-theme-default .form-select {
    background: #161417;
    border-color: var(--fox-line);
    color: var(--fox-text);
}

html.fox-color-dark .fox-theme-default .form-control:focus,
html.fox-color-dark .fox-theme-default .form-select:focus {
    background: #161417;
    border-color: #e83d72;
    color: var(--fox-text);
}

html.fox-color-dark .fox-overview-aside {
    background: #151316;
}

html.fox-color-dark .fox-theme-default .fox-stats-grid,
html.fox-color-dark .fox-stats-grid {
    background: #2c2a2e !important;
    border-color: #2c2a2e !important;
}

html.fox-color-dark .fox-theme-default .fox-stat-cell,
html.fox-color-dark .fox-stat-cell {
    background: #1a181c !important;
}

html.fox-color-dark .fox-connect-copy-all,
html.fox-color-dark .fox-ov-btn {
    background: #1a181c;
    border-color: #3a373c;
    color: var(--fox-text);
}

html.fox-color-dark .fox-ov-btn:hover,
html.fox-color-dark .fox-connect-copy-all:hover {
    border-color: var(--fox-link);
}

html.fox-color-dark .fox-ov-btn-stop {
    background: transparent;
    color: #f0709a;
}

html.fox-color-dark .fox-ov-btn-stop:hover {
    background: #2a1d26;
    border-color: #3a373c;
}

html.fox-color-dark .fox-connect-k {
    color: #9a989d;
}

html.fox-color-dark .fox-switch {
    background: #3a373c;
}

html.fox-color-dark .fox-theme-default .fox-radio-track,
html.fox-color-dark .fox-theme-default .fox-radio-progress {
    background: #2c2a2e !important;
}

html.fox-color-dark .fox-theme-default .fox-radio-play {
    background: #e83d72;
    color: #fff;
}

html.fox-color-dark .fox-auth-default .fox-auth {
    background: #121014;
}

html.fox-color-dark .fox-auth-default .fox-auth-card {
    background: #1a181c;
    border-color: #2c2a2e;
    color: var(--fox-text);
}

html.fox-color-dark .fox-auth-hero-logo {
    background: #000;
}

html.fox-color-dark .dropdown-menu {
    background: #1e1c20;
    border-color: #2c2a2e;
}

html.fox-color-dark .dropdown-item {
    color: #f3f1f3;
}

html.fox-color-dark .dropdown-item:hover,
html.fox-color-dark .dropdown-item:focus {
    background: #2a1d26;
    color: #fff;
}

html.fox-color-dark .page,
html.fox-color-dark .page-wrapper,
html.fox-color-dark .page-body,
html.fox-color-dark .page-header {
    background: #121014;
    color: var(--fox-text);
}

html.fox-color-dark .table {
    --tblr-table-bg: #1a181c;
    --tblr-table-color: #f3f1f3;
    --tblr-table-border-color: #2c2a2e;
    color: #f3f1f3;
}

html.fox-color-dark .table > :not(caption) > * > * {
    background: #1a181c;
    border-color: #2c2a2e;
    color: #f3f1f3;
}

html.fox-color-dark .modal-content {
    background: #1a181c;
    border-color: #2c2a2e;
    color: #f3f1f3;
}

html.fox-color-dark .modal-header,
html.fox-color-dark .modal-footer {
    border-color: #2c2a2e;
}

html.fox-color-dark .list-group-item {
    background: #1a181c;
    border-color: #2c2a2e;
    color: #f3f1f3;
}

html.fox-color-dark .nav-tabs .nav-link {
    color: #9a989d;
}

html.fox-color-dark .nav-tabs .nav-link.active {
    background: #1a181c;
    border-color: #2c2a2e #2c2a2e #1a181c;
    color: #f3f1f3;
}

html.fox-color-dark .alert {
    background: #221f24;
    border-color: #2c2a2e;
    color: #f3f1f3;
}

html.fox-color-dark .card-body,
html.fox-color-dark .card-footer,
html.fox-color-dark .fox-theme-default .fox-content {
    background: transparent;
    color: var(--fox-text);
}

html.fox-color-dark .text-muted,
html.fox-color-dark .text-secondary {
    color: var(--fox-muted) !important;
}

html.fox-color-dark .bg-white,
html.fox-color-dark .bg-light,
html.fox-color-dark .bg-surface {
    background-color: #1a181c !important;
}

html.fox-color-dark hr,
html.fox-color-dark .hr,
html.fox-color-dark .border,
html.fox-color-dark .border-top,
html.fox-color-dark .border-bottom {
    border-color: #2c2a2e !important;
}

html.fox-color-dark .page-title,
html.fox-color-dark .subheader,
html.fox-color-dark .datagrid-title,
html.fox-color-dark .datagrid-content {
    color: var(--fox-text);
}

html.fox-color-dark input::placeholder,
html.fox-color-dark textarea::placeholder {
    color: #7d7b80;
}

html.fox-color-dark .fox-nav-flyout {
    background: #1e1c20;
    border-color: #2c2a2e;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}

html.fox-color-dark .fox-nav-flyout::before {
    background: #1e1c20;
    border-left-color: #2c2a2e;
    border-bottom-color: #2c2a2e;
}

html.fox-color-dark .fox-nav-flyout-item {
    color: #c8c6ca !important;
}

html.fox-color-dark .fox-nav-flyout-item:hover {
    background: #221f24;
    color: #f3f1f3 !important;
}

html.fox-color-dark .fox-nav-flyout-item.is-active {
    background: #2a1d26;
    color: #f3f1f3 !important;
}

html.fox-color-dark .fox-nav-balloon {
    background: #f3f1f3;
    color: #161417;
}

html.fox-color-dark .fox-nav-balloon::before {
    border-right-color: #f3f1f3;
}

@media (min-width: 992px) {
    html.fox-color-dark.fox-sidebar-collapsed .fox-theme-default .fox-brand-logo-dark {
        display: none;
    }

    html.fox-color-dark.fox-sidebar-collapsed .fox-theme-default .fox-brand-mark-light {
        display: none;
    }

    html.fox-color-dark.fox-sidebar-collapsed .fox-theme-default .fox-brand-mark-dark {
        display: block;
    }

    html.fox-color-dark.fox-sidebar-collapsed .fox-theme-default .fox-nav-accordion-trigger.is-flyout-open {
        background: #2a1d26;
        color: var(--fox-text) !important;
    }
}

html.fox-color-dark .fox-list-card {
    background: var(--fox-surface);
    border-color: var(--fox-line);
}

html.fox-color-dark .fox-list-foot {
    background: #151316;
    border-top-color: var(--fox-line);
}

html.fox-color-dark .fox-list-art {
    border-color: var(--fox-line);
    background-color: #161417;
}

html.fox-color-dark .fox-list-art.is-live:not(.has-art) {
    background-image: repeating-linear-gradient(135deg, #2a272c 0 5px, #1e1c20 5px 10px);
}

html.fox-color-dark .fox-list-icon-btn {
    background: var(--fox-surface);
    border-color: #3a373c;
    color: var(--fox-text);
}

html.fox-color-dark .fox-list-icon-btn:hover {
    border-color: var(--fox-link);
    color: var(--fox-link);
}

html.fox-color-dark .fox-sp-playlists,
html.fox-color-dark .fox-sp-browse,
html.fox-color-dark .fox-sp-help-body,
html.fox-color-dark .fox-sp-setup {
    background: #151316;
}

html.fox-color-dark .fox-sp-center,
html.fox-color-dark .fox-sp-page {
    background: #121014;
}

html.fox-color-dark .fox-sp-pl-item:hover {
    background: #201e22;
}

html.fox-color-dark .fox-sp-track {
    border-bottom-color: #2c2a2e;
}

html.fox-color-dark .fox-sp-cover {
    background: repeating-linear-gradient(135deg, #2a282c 0 5px, #201e22 5px 10px);
    border-color: #3a373c;
}

html.fox-color-dark .fox-sp-icon-btn {
    color: var(--fox-faint);
}

html.fox-color-dark .fox-sp-icon-btn:hover,
html.fox-color-dark .fox-sp-icon-btn.is-on {
    color: var(--fox-link);
}

html.fox-color-dark .fox-sp-dropzone-empty,
html.fox-color-dark .fox-sp-empty,
html.fox-color-dark .fox-sp-field,
html.fox-color-dark .fox-sp-search-row input,
html.fox-color-dark .fox-sp-lib-search-wrap input,
html.fox-color-dark .fox-sp-pager-btn,
html.fox-color-dark .fox-btn-ghost {
    background: var(--fox-surface);
    border-color: #3a373c;
    color: var(--fox-text);
}

html.fox-color-dark .fox-btn-ghost:hover,
html.fox-color-dark .fox-sp-pager-btn:hover {
    border-color: var(--fox-link);
    color: var(--fox-link);
}

html.fox-color-dark .fox-sp-top-status {
    color: var(--fox-soft);
}

html.fox-color-dark .fox-sp-top-status strong,
html.fox-color-dark .fox-sp-pl-title,
html.fox-color-dark .fox-sp-browse-title,
html.fox-color-dark .fox-sp-track-title,
html.fox-color-dark .fox-sp-setup-title {
    color: var(--fox-text);
}

html.fox-color-dark .fox-sp-tracks-loading {
    background: rgba(18, 16, 20, 0.88);
}

html.fox-color-dark .fox-sp-drop-overlay {
    background: rgba(42, 29, 38, 0.94);
}

html.fox-color-dark .fox-sp-modal .modal-content {
    background: var(--fox-surface);
    border-color: #3a373c;
}

html.fox-color-dark .fox-sp-card,
html.fox-color-dark .fox-sp-section,
html.fox-color-dark .fox-sp-pl-item,
html.fox-color-dark .fox-prog-sp-section,
html.fox-color-dark .fox-prog-extras-panel,
html.fox-color-dark .fox-prog-panel,
html.fox-color-dark .fox-prog-browse-item,
html.fox-color-dark .fox-prog-queue-item,
html.fox-color-dark .fox-prog-rule-card,
html.fox-color-dark .fox-prog-pick-item,
html.fox-color-dark .fox-prog-main-panel,
html.fox-color-dark .fox-prog-card,
html.fox-color-dark .fox-prog-field,
html.fox-color-dark .fox-prog-page .form-control,
html.fox-color-dark .fox-prog-page .form-select,
html.fox-color-dark .fox-prog-chip {
    background: var(--fox-surface);
    border-color: var(--fox-line);
    color: var(--fox-text);
}

html.fox-color-dark .fox-sp-step,
html.fox-color-dark .fox-sp-section-head,
html.fox-color-dark .fox-prog-sp-head,
html.fox-color-dark .fox-prog-extras-head,
html.fox-color-dark .fox-prog-panel-head,
html.fox-color-dark .fox-prog-top,
html.fox-color-dark .fox-prog-config,
html.fox-color-dark .fox-prog-schedule-head,
html.fox-color-dark .fox-prog-panel-muted {
    background: #151316;
    border-color: var(--fox-line);
    color: var(--fox-text);
}

html.fox-color-dark .fox-sp-step.active,
html.fox-color-dark .fox-sp-pl-item.active,
html.fox-color-dark .fox-prog-browse-tabs .nav-link.active,
html.fox-color-dark .fox-prog-queue-zone.is-over,
html.fox-color-dark .fox-sp-dropzone.is-over {
    background: #2a1d26;
    border-color: #3a373c;
    color: var(--fox-text);
}

html.fox-color-dark .fox-prog-icon-folder,
html.fox-color-dark .fox-prog-rule-icon.jingle,
html.fox-color-dark .fox-prog-rule-icon.commercial,
html.fox-color-dark .fox-prog-rule-icon.clock {
    background: #2a1d26;
    color: var(--fox-link);
}

html.fox-color-dark .fox-prog-page,
html.fox-color-dark .fox-prog-workspace,
html.fox-color-dark .fox-prog-page .fox-prog-card,
html.fox-color-dark .fox-prog-page .fox-prog-main-panel {
    background: transparent;
}

html.fox-color-dark .fox-prog-main-tabs,
html.fox-color-dark .fox-prog-tabs {
    background: transparent;
    border-color: var(--fox-line);
}

html.fox-color-dark .fox-prog-main-tab,
html.fox-color-dark .fox-prog-tabs .nav-link {
    color: var(--fox-muted);
}

html.fox-color-dark .fox-prog-main-tab.active,
html.fox-color-dark .fox-prog-tabs .nav-link.active {
    color: var(--fox-text);
    border-bottom-color: var(--fox-primary);
}

html.fox-color-dark .fox-prog-sp-head,
html.fox-color-dark .fox-prog-extras-head {
    color: var(--fox-text);
}

html.fox-color-dark .fox-prog-field-lbl {
    color: var(--fox-muted);
}

html.fox-color-dark .fox-prog-on-air {
    background: #2a1d26 !important;
    border-color: #3a373c;
    color: var(--fox-link) !important;
}

html.fox-color-dark .fox-prog-config {
    background: #151316;
    border-color: var(--fox-line);
}

html.fox-color-dark .fox-prog-icon-folder,
html.fox-color-dark .fox-prog-cover {
    background: repeating-linear-gradient(135deg, #1c191c 0 5px, #221f22 5px 10px);
    border-color: var(--fox-line);
}
html.fox-color-dark .fox-prog-dashed {
    background: #151316;
    border-color: var(--fox-line);
    color: var(--fox-muted);
}
html.fox-color-dark .fox-prog-chip.is-active {
    background: #2a1d26;
    border-color: #3a373c;
    color: var(--fox-link);
}
html.fox-color-dark .fox-prog-cal-cell.has-event,
html.fox-color-dark .fox-prog-cal-cell.is-select {
    background: #2a1d26;
    color: var(--fox-link);
}
html.fox-color-dark .fox-prog-cal-cell.has-event-soft {
    background: #1c191c;
    color: var(--fox-soft);
}
html.fox-color-dark .fox-prog-dirty-inner,
html.fox-color-dark .fox-dirty-inner { background: #0d0c0e; }
html.fox-color-dark .fox-prog-modal { background: var(--fox-surface); border-color: var(--fox-line); }
html.fox-color-dark .fox-prog-item-name { color: var(--fox-text); }
html.fox-color-dark .fox-prog-rule-card.is-commercial { background: #1a1612; }
html.fox-color-dark .fox-prog-file-list,
html.fox-color-dark .fox-prog-file-item { background: var(--fox-surface); border-color: var(--fox-line); }
html.fox-color-dark .fox-prog-file-item:hover { background: #151316; }
html.fox-color-dark .fox-prog-file-item.is-selected { background: #2a1d26; }
html.fox-color-dark .fox-prog-item-meta,
html.fox-color-dark .fox-prog-foot,
html.fox-color-dark .fox-prog-panel-meta,
html.fox-color-dark .fox-prog-kicker { color: var(--fox-muted); }
html.fox-color-dark .fox-prog-main-tabs,
html.fox-color-dark .fox-prog-subtabs { background: transparent; }

html.fox-color-dark .fox-prog-cal-cell {
    background: var(--fox-surface);
    border-color: #221f22;
}

html.fox-color-dark .fox-prog-cal-hour,
html.fox-color-dark .fox-prog-cal-dayhead {
    background: transparent;
    color: var(--fox-muted);
    border-color: var(--fox-line);
}

html.fox-color-dark .fox-prog-schedule-item {
    background: transparent;
}

html.fox-color-dark .fox-btn-ghost {
    background: var(--fox-surface);
    border-color: var(--fox-line);
    color: var(--fox-soft);
}

html.fox-color-dark .fox-btn-ghost:hover {
    border-color: var(--fox-link);
    color: var(--fox-link);
}

/* Contas DJ */
html.fox-color-dark .fox-djs-page,
html.fox-color-dark .fox-djs-card,
html.fox-color-dark .fox-djs-modal,
html.fox-color-dark .fox-djs-field,
html.fox-color-dark .fox-djs-day span {
    background: var(--fox-surface);
    border-color: var(--fox-line);
    color: var(--fox-text);
}

html.fox-color-dark .fox-djs-main {
    border-color: var(--fox-line);
}

html.fox-color-dark .fox-djs-connect,
html.fox-color-dark .fox-djs-empty,
html.fox-color-dark .fox-djs-advanced {
    background: var(--fox-surface);
    border-color: var(--fox-line);
}

html.fox-color-dark .fox-djs-connect-head,
html.fox-color-dark .fox-djs-aside,
html.fox-color-dark .fox-djs-advanced {
    background: color-mix(in srgb, var(--fox-surface) 88%, #000);
}

html.fox-color-dark .fox-djs-connect-head span,
html.fox-color-dark .fox-djs-card-meta strong,
html.fox-color-dark .fox-djs-empty-title,
html.fox-color-dark .fox-djs-history li,
html.fox-color-dark .fox-djs-modal-head div,
html.fox-color-dark .fox-djs-switch-title,
html.fox-color-dark .fox-djs-check {
    color: var(--fox-text);
}

html.fox-color-dark .fox-djs-intro p,
html.fox-color-dark .fox-djs-connect-grid span,
html.fox-color-dark .fox-djs-connect-pass span,
html.fox-color-dark .fox-djs-connect-pass em,
html.fox-color-dark .fox-djs-hint,
html.fox-color-dark .fox-djs-kicker,
html.fox-color-dark .fox-djs-aside p,
html.fox-color-dark .fox-djs-empty p,
html.fox-color-dark .fox-djs-history span,
html.fox-color-dark .fox-djs-lbl,
html.fox-color-dark .fox-djs-hours {
    color: var(--fox-muted);
}

html.fox-color-dark .fox-djs-copy,
html.fox-color-dark .fox-djs-onair,
html.fox-color-dark .fox-djs-connect-pass strong,
html.fox-color-dark .fox-djs-aside .fox-mono,
html.fox-color-dark .fox-djs-link,
html.fox-color-dark .fox-djs-more {
    color: var(--fox-link);
}

html.fox-color-dark .fox-djs-avatar,
html.fox-color-dark .fox-djs-empty-icon {
    background: color-mix(in srgb, var(--fox-primary) 18%, var(--fox-surface));
    color: var(--fox-link);
}

html.fox-color-dark .fox-djs-badge {
    background: color-mix(in srgb, var(--fox-primary) 16%, var(--fox-surface));
    border-color: color-mix(in srgb, var(--fox-primary) 28%, var(--fox-line));
    color: var(--fox-link);
}

html.fox-color-dark .fox-djs-badge.is-off {
    background: var(--fox-surface);
    border-color: var(--fox-line);
    color: var(--fox-muted);
}

html.fox-color-dark .fox-djs-switch span {
    background: #3a363c;
}

html.fox-color-dark .fox-djs-modal-back {
    background: rgba(8, 6, 10, .55);
}

html.fox-color-dark .fox-djs-rule,
html.fox-color-dark .fox-djs-connect-pass,
html.fox-color-dark .fox-djs-connect-grid > div,
html.fox-color-dark .fox-djs-history li {
    border-color: var(--fox-line);
    background-color: transparent;
}

/* Biblioteca Auto DJ */
html.fox-color-dark .fox-library-card,
html.fox-color-dark .fox-library-item,
html.fox-color-dark .fox-library-tool,
html.fox-color-dark .fox-upload-queue {
    background: var(--fox-surface);
    border-color: var(--fox-line);
    color: var(--fox-text);
}

html.fox-color-dark .fox-library-toolbar,
html.fox-color-dark .fox-library-item.is-folder,
html.fox-color-dark .fox-library-list .fox-library-list-head,
html.fox-color-dark .fox-library-drop-disabled {
    background: #151316;
    border-color: var(--fox-line);
    color: var(--fox-muted);
}

html.fox-color-dark .fox-library-drop {
    background: color-mix(in srgb, var(--fox-primary) 10%, #151316);
    border-color: color-mix(in srgb, var(--fox-primary) 40%, var(--fox-line));
}

html.fox-color-dark .fox-library-drop.is-dragover {
    background: color-mix(in srgb, var(--fox-primary) 18%, #1c191c);
    border-color: var(--fox-primary);
}

html.fox-color-dark .fox-library-item-icon {
    background: color-mix(in srgb, var(--fox-primary) 16%, #151316);
    color: var(--fox-link);
}

html.fox-color-dark .fox-library-item.is-folder .fox-library-item-icon {
    color: #e0a15a;
    background: color-mix(in srgb, #e0a15a 14%, #151316);
}

html.fox-color-dark .fox-library-item-title,
html.fox-color-dark .fox-library-tool {
    color: var(--fox-text);
}

html.fox-color-dark .fox-library-item-title a:hover,
html.fox-color-dark .fox-library-tool:hover {
    color: var(--fox-link);
}

html.fox-color-dark .fox-library-tool:hover {
    background: #2a1d26;
    border-color: var(--fox-link);
}

html.fox-color-dark .fox-library-item-meta,
html.fox-color-dark .fox-library-empty,
html.fox-color-dark .fox-library-list .fox-library-item-size {
    color: var(--fox-muted);
}

html.fox-color-dark .fox-library-item:hover,
html.fox-color-dark .fox-library-list .fox-library-item:hover {
    border-color: color-mix(in srgb, var(--fox-primary) 40%, var(--fox-line));
    background: #151316;
}

html.fox-color-dark .fox-library-item.is-playing {
    border-color: var(--fox-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fox-primary) 40%, transparent);
}

html.fox-color-dark .fox-library-view-btn.active {
    background: var(--fox-grad);
    color: #fff;
    border-color: transparent;
}

html.fox-color-dark .fox-upload-bar {
    background: #221f22;
}

html.fox-color-dark .fox-upload-bar > span {
    background: var(--fox-primary);
}

/* Relay */
html.fox-color-dark .fox-relay-card {
    background: var(--fox-surface);
    border-color: var(--fox-line);
}

html.fox-color-dark .fox-relay-title,
html.fox-color-dark .fox-relay-field > span {
    color: var(--fox-text);
}

html.fox-color-dark .fox-relay-lead,
html.fox-color-dark .fox-relay-state,
html.fox-color-dark .fox-relay-field small,
html.fox-color-dark .fox-relay-note {
    color: var(--fox-muted);
}

html.fox-color-dark .fox-relay-actions {
    border-color: var(--fox-line);
}

html.fox-color-dark .fox-relay-dot:not(.is-on) {
    background: var(--fox-muted);
}

/* Player web */
html.fox-color-dark .fox-pw-page,
html.fox-color-dark .fox-pw-palette,
html.fox-color-dark .fox-pw-fund,
html.fox-color-dark .fox-pw-toggle strong {
    color: var(--fox-text);
}

html.fox-color-dark .fox-pw-lead,
html.fox-color-dark .fox-pw-help,
html.fox-color-dark .fox-pw-alt,
html.fox-color-dark .fox-pw-kicker,
html.fox-color-dark .fox-pw-toggle small,
html.fox-color-dark .fox-pw-fund small {
    color: var(--fox-muted);
}

html.fox-color-dark .fox-pw-custom label {
    color: var(--fox-muted);
}

html.fox-color-dark .fox-pw-custom input[type="color"] {
    background: var(--fox-surface);
    border-color: var(--fox-line);
}

html.fox-color-dark .fox-pw-urlbar,
html.fox-color-dark .fox-pw-tip,
html.fox-color-dark .fox-pw-ghost,
html.fox-color-dark .fox-pw-open,
html.fox-color-dark .fox-pw-identity-fields input,
html.fox-color-dark .fox-pw-socials input,
html.fox-color-dark .fox-pw-palette,
html.fox-color-dark .fox-pw-fund,
html.fox-color-dark .fox-pw-screens {
    background: var(--fox-surface);
    border-color: var(--fox-line);
    color: var(--fox-text);
}

html.fox-color-dark .fox-pw-grid,
html.fox-color-dark .fox-pw-preview,
html.fox-color-dark .fox-pw-toggle {
    border-color: var(--fox-line);
}

html.fox-color-dark .fox-pw-preview,
html.fox-color-dark .fox-pw-logo {
    background: var(--fox-page-bg);
}

html.fox-color-dark .fox-pw-palette.is-on,
html.fox-color-dark .fox-pw-fund.is-on,
html.fox-color-dark .fox-pw-screens button.is-on {
    background: color-mix(in srgb, var(--fox-primary) 12%, var(--fox-surface));
    border-color: var(--fox-link);
    color: var(--fox-text);
}

html.fox-color-dark .fox-pw-brand,
html.fox-color-dark .fox-pw-font {
    background: var(--fox-surface);
    border-color: var(--fox-line);
    color: var(--fox-text);
}

html.fox-color-dark .fox-pw-brand small {
    color: var(--fox-muted);
}

html.fox-color-dark .fox-pw-brand.is-on {
    background: color-mix(in srgb, var(--fox-primary) 12%, var(--fox-surface));
    border-color: var(--fox-link);
}