/* App palette, loaded after page styles. Never style overlay text or
   paint backgrounds here: their colors belong to the user's widget design. */
html.light-theme, body.light-theme {
    color-scheme: light;
    --ui-surface: #ffffff;
    --ui-subtle: #f4f7fb;
    --ui-hover: #eaf0f8;
    --ui-border: #dfe4ee;
    --ui-border-hover: #cbd5e1;
    --ui-text: #202633;
    --ui-muted: #596579;
    --ui-accent: #2563eb;
    --ui-selected: #e8efff;
    --ui-danger: #be123c;
    --gallery-heading-color: #202633;
}

/* Dialogs are siblings of the editor, not descendants of .widget-container. */
:is(html.light-theme body, html body.light-theme) :is(.modal-content, .font-modal-content, .paint-modal-content,
    .user-management-content, .wg-modal-dialog, .emote-popover, .widget-emote-popover,
    .emote-modal-content, .datetime-picker-content, .name-modal-content, .delete-modal-content) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.modal-header, .font-modal-header, .paint-modal-header,
    .modal-actions, .design-category h4, .emote-set-divider, .widget-emote-divider) {
    border-color: var(--ui-border) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.modal-content, .font-modal-content, .paint-modal-content,
    .user-management-content, .wg-modal-dialog) :is(h2, h3, h4, label, .modal-body),
:is(html.light-theme body, html body.light-theme) :is(.font-item-name,
    .emote-set-header strong, .widget-emote-set header strong, .emote-connect-note a) {
    color: var(--ui-text) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.emote-size-row, .emote-set-header, .widget-emote-size,
    .widget-emote-set header, .emote-connect-note, .emote-picker-status,
    .widget-emote-status, .loading, .custom-font-status, .custom-font-head span) {
    color: var(--ui-muted) !important;
}
/* Normal declarations supply unpainted defaults. Renderer inline styles must
   win, including background shorthands serialized by the browser's CSSOM. */
:is(html.light-theme body, html body.light-theme) :is(.font-item-preview, .custom-font-preview) {
    background: transparent;
    color: var(--ui-text);
}
:is(html.light-theme body, html body.light-theme) .paint-modal-item-preview { color: var(--ui-text); }
:is(html.light-theme body, html body.light-theme) .settings-container .seven-tv-logo path { fill: #000 !important; }
:is(html.light-theme body, html body.light-theme) :is(.font-list, .paint-modal-grid) {
    background: transparent !important;
    box-shadow: none !important;
}

/* Shared secondary controls, including both generations of emote picker. */
:is(html.light-theme body, html body.light-theme) :is(.paint-filter-btn, .paint-source-tabs button,
    .emote-menu-button, .emote-size-options button, .emote-set-visibility,
    .text-emote-option, .emote-load-button.secondary, .widget-emote-button,
    .widget-emote-size button, .widget-emote-eye, .widget-emote-option,
    .widget-emote-load.secondary, .scroll-to-top, .basic-color-apply,
    .btn-cancel, .btn-manage-roles, .btn-save, .add-user-btn, .action-btn,
    .admin-action-button, .paint-icon-button, .wg-setting-button,
    .modal-close, .font-modal-close, .design-select, .typography-toggle,
    .filter-button, .filter-option, .chatbot-dropdown-trigger,
    .chatbot-dropdown-menu button, .chatbot-filter-reset) {
    background: var(--ui-subtle) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-muted) !important;
    box-shadow: none !important;
}
:is(html.light-theme body, html body.light-theme) :is(.paint-filter-btn, .paint-source-tabs button,
    .emote-menu-button, .emote-size-options button, .emote-set-visibility,
    .text-emote-option, .emote-load-button, .widget-emote-button,
    .widget-emote-size button, .widget-emote-eye, .widget-emote-option,
    .widget-emote-load, .scroll-to-top, .basic-color-apply,
    .btn-cancel, .btn-manage-roles, .btn-save, .add-user-btn, .action-btn,
    .admin-action-button, .paint-icon-button, .modal-close, .design-select,
    .filter-button, .filter-option, .chatbot-dropdown-trigger,
    .chatbot-dropdown-menu button, .chatbot-filter-reset):hover:not(:disabled) {
    background: var(--ui-hover) !important;
    border-color: var(--ui-border-hover) !important;
    color: var(--ui-text) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.paint-filter-btn.active, .paint-source-tabs button.active,
    .emote-menu-button.active, .emote-size-options button.active,
    .widget-emote-button.active, .widget-emote-size button.active,
    .font-item.selected, .custom-font-item.selected, .design-select-option.selected,
    .typography-toggle.active, .filter-option.active,
    .chatbot-dropdown-menu button.selected, .chatbot-type-chip input:checked + span) {
    background: var(--ui-selected) !important;
    border-color: var(--ui-accent) !important;
    color: #1d4ed8 !important;
}
:is(html.light-theme body, html body.light-theme) :is(.paint-source-tabs, .users-table th, .referral-table th,
    .rank-checkbox-item, .user-item, .chatbot-search-wrap, .chatbot-type-chip span) {
    background: var(--ui-subtle) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.emote-load-button:not(.secondary),
    .widget-emote-load:not(.secondary), .btn-save, .admin-action-button.primary) {
    background: var(--ui-text) !important;
    border-color: var(--ui-text) !important;
    color: #fff !important;
}
:is(html.light-theme body, html body.light-theme) :is(.emote-load-button:not(.secondary),
    .widget-emote-load:not(.secondary), .btn-save, .admin-action-button.primary):hover:not(:disabled) {
    background: #354155 !important;
    color: #fff !important;
}
:is(html.light-theme body, html body.light-theme) :is(.action-btn.danger, .admin-action-button.danger) {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: var(--ui-danger) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.action-btn.danger, .admin-action-button.danger):hover:not(:disabled) {
    background: #ffe4e6 !important;
    color: var(--ui-danger) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.emote-search-row input, .widget-emote-search input,
    .basic-color-native, .basic-color-value, .search-input, .search-bar, .filter-select,
    .modal-content input:not([type="checkbox"]):not([type="range"]):not([type="hidden"]),
    .modal-content select, .modal-content textarea) {
    background: var(--ui-subtle) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.basic-color-controls label, .basic-color-presets) {
    color: var(--ui-muted) !important;
}
:is(html.light-theme body, html body.light-theme) .basic-color-swatches button {
    border-color: var(--ui-border-hover);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
:is(html.light-theme body, html body.light-theme) .basic-color-swatches button:hover { border-color: var(--ui-text); }
:is(html.light-theme body, html body.light-theme) .design-select-arrow { border-top-color: var(--ui-muted); }
:is(html.light-theme body, html body.light-theme) .toggle-slider { background: #cbd5e1 !important; border-color: #cbd5e1 !important; }
:is(html.light-theme body, html body.light-theme) input:checked + .toggle-slider { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; }
:is(html.light-theme body, html body.light-theme) :is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ui-accent) !important;
    outline-offset: 3px;
}
:is(html.light-theme body, html body.light-theme) :is(input, textarea)::placeholder { color: var(--ui-muted); opacity: 1; }
:is(html.light-theme body, html body.light-theme) button:disabled { opacity: .5; cursor: not-allowed; }

/* Management screens and tables that previously retained their dark surfaces. */
:is(html.light-theme body, html body.light-theme) :is(.users-table-container, .referral-table-container,
    .users-section, .filters-section, .ranks-checkbox-list, .users-table,
    .filter-dropdown, .chatbot-dropdown-menu) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.users-table td, .referral-table td) {
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.users-table, .referral-table) tr:hover { background: var(--ui-hover) !important; }
:is(html.light-theme body, html body.light-theme) :is(.roles-header h2, .permissions-header h2,
    .section-title, .user-name, .empty-state h3) { color: var(--ui-text) !important; }
:is(html.light-theme body, html body.light-theme) :is(.permissions-header p, .empty-state p, .user-id,
    .lock-indicator, .checkbox-label) { color: var(--ui-muted) !important; }

:is(html.light-theme body, html body.light-theme) :is(.back-button, .settings-panel-button, .control-button,
    .search-button, .leaderboard-period-pill, .bot-status-pill) {
    background: var(--ui-subtle) !important;
    color: var(--ui-muted) !important;
    border-color: var(--ui-border) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.back-button, .settings-panel-button, .control-button,
    .search-button):hover:not(:disabled) {
    background: var(--ui-hover) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border-hover) !important;
}
:is(html.light-theme body, html body.light-theme) .control-button.primary {
    background: var(--ui-text) !important;
    border-color: var(--ui-text) !important;
    color: #fff !important;
}
:is(html.light-theme body, html body.light-theme) .control-button.primary:hover:not(:disabled) { background: #354155 !important; }
:is(html.light-theme body, html body.light-theme) .control-button.danger {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: var(--ui-danger) !important;
}
:is(html.light-theme body, html body.light-theme) .control-button.danger:hover:not(:disabled) { background: #ffe4e6 !important; }
:is(html.light-theme body, html body.light-theme) :is(.bot-status-pill.connected, .bot-toggle-button.active) {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #047857 !important;
}
:is(html.light-theme body, html body.light-theme) :is(.bot-status-pill.starting, .bot-status-pill.reconnecting) {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}
:is(html.light-theme body, html body.light-theme) .widget-container :is(.radio-option.active, .radio-option.selected, .format-toggle.active,
    .text-align-button.active, .paint-button.selected) {
    background: var(--ui-selected) !important;
    border-color: var(--ui-accent) !important;
    color: #1d4ed8 !important;
}
:is(html.light-theme body, html body.light-theme) :is(.url-toggle, .copy-button-icon, .user-management-button,
    .back-button, .settings-panel-button) svg {
    color: inherit !important;
    stroke: currentColor !important;
    filter: none !important;
}
:is(html.light-theme body, html body.light-theme) .widget-container .copy-button-icon.copied {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #047857 !important;
}
:is(html.light-theme body, html body.light-theme) :is(.field-hint, .browser-source-size-group > div > span,
    .browser-source-size-group span, .browser-source-size-group label,
    .url-section span[style*="color"], .size-controls span[style*="color"],
    label > span[style*="color"], .stacked-field-label span, .leaderboard-select-arrow,
    .wg-setting-button small, .subathon-widget-preview i) {
    color: var(--ui-muted) !important;
}
:is(html.light-theme body, html body.light-theme) #timezone-select-display { color: var(--ui-text) !important; }
:is(html.light-theme body, html body.light-theme) :is(.wg-kicker,
    .coming-soon-kicker, .chat-game-kicker) { color: var(--ui-muted) !important; }
:is(html.light-theme body, html body.light-theme) .wg-source-warning { color: #9f1239 !important; }

:is(html.light-theme body, html body.light-theme) :is(.chatbot-panel, .chatbot-log-item, .maintenance-box) {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.chatbot-panel-header h2, .chatbot-table td,
    .chatbot-table a, .chatbot-log-message, .maintenance-title) { color: var(--ui-text) !important; }
:is(html.light-theme body, html body.light-theme) :is(.chatbot-table th, .chatbot-log-meta, .maintenance-description) { color: var(--ui-muted) !important; }
:is(html.light-theme body, html body.light-theme) :is(.chatbot-table th, .chatbot-table td) { border-color: var(--ui-border) !important; }
:is(html.light-theme body, html body.light-theme) :is(.chatbot-console, .chatbot-tab, .chatbot-select, .chatbot-status) {
    background: var(--ui-subtle) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}
:is(html.light-theme body, html body.light-theme) .chatbot-tab.active { background: var(--ui-selected) !important; border-color: var(--ui-accent) !important; color: #1d4ed8 !important; }
:is(html.light-theme body, html body.light-theme) .chatbot-status.connected { background: #ecfdf5 !important; color: #047857 !important; }
:is(html.light-theme body, html body.light-theme) :is(.chatbot-status.starting, .chatbot-status.reconnecting, .chatbot-status.waiting) { background: #fffbeb !important; color: #92400e !important; }
:is(html.light-theme body, html body.light-theme) :is(.chatbot-status.disabled, .chatbot-status.disconnected) { background: #fff1f2 !important; color: var(--ui-danger) !important; }
:is(html.light-theme body, html body.light-theme) .chatbot-log-message code { color: #047857; }

/* Public app pages restore the same saved theme before the first paint. */
html.light-theme {
    --change-bg: #f4f7fb;
    --change-border: #dfe4ee;
    --change-text: #202633;
    --change-muted: #596579;
    --change-soft: #4b5567;
    --change-accent: #2563eb;
    --legal-bg: #f4f7fb;
    --legal-border: #dfe4ee;
    --legal-text: #202633;
    --legal-muted: #596579;
}
:is(html.light-theme body, html body.light-theme):has(.legal-page, .changelog-shell, .not-found-page, .hero-section) {
    background: var(--ui-subtle);
    color: var(--ui-text);
}
:is(html.light-theme body, html body.light-theme) :is(.legal-page, .hero-section) { background: var(--ui-subtle) !important; }
:is(html.light-theme body, html body.light-theme) :is(.legal-nav, .changelog-topbar, .changelog-entry, .privacy-section, .not-found-panel) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text);
}
:is(html.light-theme body, html body.light-theme) .not-found-panel { box-shadow: 0 18px 45px rgba(15, 23, 42, .12); }
:is(html.light-theme body, html body.light-theme) :is(.privacy-section p, .privacy-section li, .privacy-section address,
    .not-found-copy, .status-code, .subtitle) { color: var(--ui-muted) !important; }
:is(html.light-theme body, html body.light-theme) :is(.tagline, .not-found-panel h1, .not-found-panel .brand) { color: var(--ui-text); }
:is(html.light-theme body, html body.light-theme) :is(.requested-path, .not-found-actions .action-button) {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
    color: var(--ui-text);
}
:is(html.light-theme body, html body.light-theme) .action-button.primary { background: var(--ui-text); color: #fff; }
:is(html.light-theme body, html body.light-theme) :is(.privacy-section a, .legal-nav-links a:hover, .changelog-topbar nav a:hover, .changelog-footer a:hover) {
    color: #1d4ed8;
}
:is(html.light-theme body, html body.light-theme) :is(.legal-nav-links a:hover, .changelog-topbar nav a:hover, .changelog-footer a:hover) { background: var(--ui-hover); }
:is(html.light-theme body, html body.light-theme) :is(.legal-brand img, .changelog-logo img) { content: url('/static/logo-dark.png'); }

:is(html.light-theme body, html body.light-theme) .admin-container :is(input, select, textarea):not([type="checkbox"]):not([type="range"]):not([type="hidden"]) {
    background: var(--ui-subtle) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.changelog-form label, .changelog-section-card-header strong,
    .paint-section-title, .selected-paint-name, .changelog-entry-button-title) { color: var(--ui-text) !important; }
:is(html.light-theme body, html body.light-theme) :is(.paint-preview-name, .selected-paint-id, .paint-empty-state,
    .manual-paint-details, .changelog-entry-button-meta) { color: var(--ui-muted) !important; }
:is(html.light-theme body, html body.light-theme) :is(.changelog-entry-button, .changelog-section-card,
    .selected-paint-row, .theme-editor) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
:is(html.light-theme body, html body.light-theme) :is(.changelog-entry-button.active, .changelog-entry-button:hover) {
    background: var(--ui-selected) !important;
    border-color: var(--ui-accent) !important;
}
:is(html.light-theme body, html body.light-theme) .theme-editor button {
    background: var(--ui-subtle);
    border-color: var(--ui-border);
    color: var(--ui-text);
}
:is(html.light-theme body, html body.light-theme) .theme-editor button:hover { background: var(--ui-hover); }
:is(html.light-theme body, html body.light-theme) :is(.name-modal-header h2, .delete-modal-header h2) { color: var(--ui-text) !important; }
:is(html.light-theme body, html body.light-theme) :is(.name-modal-header p, .delete-modal-content p) { color: var(--ui-muted) !important; }

@media (max-width: 640px) {
    :is(html.light-theme body, html body.light-theme) .paint-filter-container > div { flex-wrap: wrap; }
    :is(html.light-theme body, html body.light-theme) .paint-filter-buttons { flex-basis: 100%; }
}

/* A setup hint is readable content, not a Browser Source URL. */
html body .widget-container #url-display.timer-url-placeholder,
html.light-theme body .widget-container #url-display.timer-url-placeholder {
    color:#f59e0b !important; filter:none !important; opacity:1 !important; user-select:text;
}
html.light-theme body .widget-container #url-display.timer-url-placeholder { color:#b45309 !important; }