/* Content surfaces use the same palette as the player browser. All rules are dark-only. */
html[data-portal-theme="dark"] {
    --portal-panel: #202536;
    --portal-card: #282e43;
    --portal-control: #30384f;
    --portal-hover: #39435f;
    --portal-border: #444e6b;
    --portal-text: #eef1fa;
    --portal-muted: #b8c3dc;
    --portal-accent: #b1b9ff;
}
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(.card, .card-header, .modal-content) { background: var(--portal-panel) !important; color: var(--portal-text); border-color: var(--portal-border); }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) { color: var(--portal-text); color-scheme: dark; }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(h1,h2,h3,h4,h5,h6,label,.text-dark,.headlinerTable,.headerCompany) { color: var(--portal-text) !important; }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(.text-secondary,.text-muted,.semiHeader) { color: var(--portal-muted) !important; }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(.form-control,.form-select,.inputStyle,.searchContainer,.searchMediaContainer,.usersMobileSearch) { background-color: var(--portal-control) !important; color: var(--portal-text) !important; border-color: var(--portal-border) !important; }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(input,textarea)::placeholder { color: var(--portal-muted) !important; opacity: 1; }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(.table,.companyList) { --bs-table-color: var(--portal-text); --bs-table-bg: transparent; --bs-table-striped-bg: #282e43; --bs-table-striped-color: var(--portal-text); color: var(--portal-text); border-color: var(--portal-border); }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(th,td) { color: var(--portal-text); border-color: var(--portal-border) !important; }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(.mediaRow,.cardBodyColor,.companyRow,.hover-highlight td,td.collapse) { background-color: var(--portal-card) !important; color: var(--portal-text); }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(.hover-highlight:hover td,.companyRow:hover) { background-color: var(--portal-hover) !important; }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(.dropdown-menu,.mediaLibraryViews,.mediaLibraryFilters,.mediaCanvaSource,.mediaCanvaLockBadge,.mediaRowTagChip) { background: var(--portal-control) !important; color: var(--portal-muted); border-color: var(--portal-border); }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) .dropdown-item:not(.text-danger) { color: var(--portal-text) !important; }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) .dropdown-item:is(:hover,:focus) { background: var(--portal-hover); }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(input,textarea,select,button,a):focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 3px; }
html[data-portal-theme="dark"] body:has(:is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap)) .modal-content { background: var(--portal-panel) !important; color: var(--portal-text); border-color: var(--portal-border); color-scheme: dark; }
html[data-portal-theme="dark"] body:has(:is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap)) .modal :is(h1,h2,h3,h4,h5,h6,label,.text-dark) { color: var(--portal-text) !important; }
html[data-portal-theme="dark"] body:has(:is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap)) .modal :is(.form-control,.form-select,.inputStyle) { background: var(--portal-control) !important; color: var(--portal-text) !important; border-color: var(--portal-border) !important; }
html[data-portal-theme="dark"] body:has(:is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap)) .modal :is(input,textarea)::placeholder { color: var(--portal-muted); opacity: 1; }
html[data-portal-theme="dark"] body:has(:is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap)) .modal :is(.modal-header,.modal-footer) { border-color: var(--portal-border); }
html[data-portal-theme="dark"] body:has(:is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap)) .modal .btn-close { filter: invert(1) grayscale(1); }

/* Playlists: preserve cover artwork while darkening the surrounding surfaces. */
html[data-portal-theme="dark"] .playlistBrowsePage .playlistNewShell { background: var(--portal-panel); color: var(--portal-text); }
html[data-portal-theme="dark"] .playlistBrowsePage :is(.playlistNewSearch,.playlistNewEmptyCard,.playlistNewPlaceholderCard,.playlistNewSearchSongCard,.playlistNewSearchMoodCard) { background: var(--portal-control); color: var(--portal-text); }
html[data-portal-theme="dark"] .playlistBrowsePage :is(.playlistNewHeadline,.playlistNewExploreTitle,.playlistNewCardTitle,.playlistNewRecommendationTitle,.playlistNewMoodName,.playlistNewSearchTitle,.playlistNewSearchMoodTitle,.playlistNewSearchSongTitle,.playlistNewIconButton,.playlistNewSearchInput) { color: var(--portal-text) !important; }
html[data-portal-theme="dark"] .playlistBrowsePage :is(.playlistNewMeta,.playlistNewCardMeta,.playlistNewRecommendationMeta,.playlistNewViewAll,.playlistNewMoodDescription,.playlistNewMoodEyebrow,.playlistNewSearchSongArtist,.playlistNewSearchSongMeta) { color: var(--portal-muted) !important; }
html[data-portal-theme="dark"] .playlistBrowsePage .playlistNewSearch i { color: var(--portal-text); }
html[data-portal-theme="dark"] .playlistBrowsePage .playlistNewSearchInput::placeholder { color: var(--portal-muted); }
html[data-portal-theme="dark"] .playlistBrowsePage .playlistNewSearchDivider { background: var(--portal-border); }
html[data-portal-theme="dark"] .playlistBrowsePage .playlistNewRecommendationCard { background: var(--portal-card); border: 1px solid var(--portal-border); }
html[data-portal-theme="dark"] .playlistBrowsePage .playlistNewRecommendationCard::before { opacity: .25; }
html[data-portal-theme="dark"] .playlistBrowsePage .playlistNewRecommendationCard::after { background: rgba(32,37,54,.78); }
html[data-portal-theme="dark"] .playlistBrowsePage .playlistNewMoodHero::after { background: linear-gradient(180deg, #20253640, #202536e0 65%, #202536); }

/* Assistant shares its existing component tokens across live chat and results. */
html[data-portal-theme="dark"] .tb-ai-page-wrap { --tb-ai-ink: var(--portal-text); --tb-ai-subtle: var(--portal-muted); --tb-ai-border: var(--portal-border); --tb-ai-surface: var(--portal-panel); --tb-ai-surface-strong: var(--portal-card); --tb-ai-shadow: 0 12px 30px #0003; }
html[data-portal-theme="dark"] :is(.tb-ai-chat-shell,.tb-ai-recent-shell,.tb-ai-terms-dialog,.tb-ai-terms-foot) { background: var(--portal-panel); color: var(--portal-text); border-color: var(--portal-border); }
html[data-portal-theme="dark"] :is(.tb-ai-bubble--assistant,.tb-ai-composer,.tb-ai-field-shell,.tb-ai-recent-item,.tb-ai-mention-menu,.tb-ai-command-card,.tb-ai-terms-scroll,.tb-ai-terms-meta) { background: var(--portal-card); color: var(--portal-text); border-color: var(--portal-border); }
html[data-portal-theme="dark"] :is(.tb-ai-chip,.tb-ai-secondary-link,.tb-ai-new-chat,.tb-ai-feedback-btn,.tb-ai-empty,.tb-ai-response-label,.tb-ai-terms-block,.tb-ai-terms-back,.tb-ai-quoted-text,.tb-ai-command-status,.tb-ai-command-btn--ghost) { background: var(--portal-control); color: var(--portal-accent); border-color: var(--portal-border); }
html[data-portal-theme="dark"] :is(.tb-ai-chip:hover,.tb-ai-chip.is-active,.tb-ai-recent-item:hover,.tb-ai-feedback-btn.is-active) { background: var(--portal-hover); color: var(--portal-text); }
html[data-portal-theme="dark"] :is(.tb-ai-section-title,.tb-ai-chat-empty-title,.tb-ai-command-title,.tb-ai-terms-title,.tb-ai-terms-section h4,.tb-ai-terms-block-title) { color: var(--portal-text); }
html[data-portal-theme="dark"] :is(.tb-ai-placeholder-rotator,.tb-ai-placeholder-prefix,.tb-ai-feedback-label,.tb-ai-chip-title,.tb-ai-suggestion-heading,.tb-ai-playlist-heading,.tb-ai-loading,.tb-ai-terms-content,.tb-ai-terms-subtitle,.tb-ai-terms-status) { color: var(--portal-muted); }
html[data-portal-theme="dark"] .main-content:has(.tb-ai-page-wrap) > .tb-portal-header { background: var(--portal-canvas); }

/* Library controls and metadata. */
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(.mediaCanvaSync,.mediaCanvaSyncStatus,.mediaCanvaUpdated,.mediaCanvaSource,.searchInput,.mediaLibraryView:not(.backgroundActive),.mediaLibraryView.bg-secondary) { color: var(--portal-muted) !important; }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(.mediaLibraryView.backgroundActive,.backgroundActive) { background-color: #2b3aff !important; color: #fff !important; }
html[data-portal-theme="dark"] body:has(:is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap)) :is(.mediaEditPreview,.mediaEditDropzone,.mediaEditSecondary,.mediaEditClear,.mediaEditClose) { background: var(--portal-control); color: var(--portal-muted); border-color: var(--portal-border); }
html[data-portal-theme="dark"] body:has(:is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap)) :is(#mediaEditDimensions,#mediaEditFileName,.mediaEditCanvaSource strong) { color: var(--portal-text); }
html[data-portal-theme="dark"] :is(.mediaLibraryPage, .userSettingsPage, .companyPage, .playlistBrowsePage, .tb-ai-page-wrap) :is(.companyManage .btn,.hover-highlight .fa-user) { background: var(--portal-control) !important; color: var(--portal-muted); border-color: var(--portal-border); }

/* Filters, mobile row actions, and expanded permission cards. */
html[data-portal-theme="dark"] .mediaLibraryPage :is(.mediaTagFilterToggle,.mediaAspectPill,.mediaTagDropdown,.mediaRowTagDropdown,.mediaTagOption,.mediaRowTagToggle,.mediaMobilePreviewExpand,.mediaRow td.last button,.mediaRowTagCreateInput) { background: var(--portal-control) !important; color: var(--portal-muted) !important; border-color: var(--portal-border); }
html[data-portal-theme="dark"] .mediaLibraryPage :is(.mediaTagFilterToggleActive,.mediaAspectPillActive,.mediaTagOptionActive,.mediaRowTagToggleActive) { background: #3b4371 !important; color: #e0e4ff !important; border-color: #7e8ae2; }
html[data-portal-theme="dark"] .mediaLibraryPage .mediaLibraryFilters { background: transparent !important; }
html[data-portal-theme="dark"] .mediaLibraryPage :is(.mediaUploadPill,.mediaCanvaLockBadge,.mediaAspectBadge) { border-color: var(--portal-border); }
html[data-portal-theme="dark"] .mediaLibraryPage .mediaUploadPill { background: var(--portal-control); }
html[data-portal-theme="dark"] .mediaLibraryPage :is(.mediaCanvaSync time,.mediaMobileMeta,.mediaMobileCount,.mediaCanvaFrozen [id^="mediaName-"]) { color: var(--portal-muted); }
html[data-portal-theme="dark"] .mediaLibraryPage .mediaCanvaSyncStatus[data-state="current"] { color: #7fe0b3 !important; }
html[data-portal-theme="dark"] .mediaLibraryPage .mediaCanvaSyncStatus[data-state="changed"] { color: #f4cc83 !important; }
html[data-portal-theme="dark"] .userSettingsPage :is(.usersSummary,.usersPermissionFields .form-switch) { background: var(--portal-card) !important; border-color: var(--portal-border); }
html[data-portal-theme="dark"] .userSettingsPage .usersActions .btn:not(.btn-danger) { background: var(--portal-control) !important; color: var(--portal-text) !important; border-color: var(--portal-border); }
html[data-portal-theme="dark"] .userSettingsPage .usersActions .btn-danger { background: #4c2836 !important; color: #ffacba !important; }
html[data-portal-theme="dark"] .userSettingsPage .usersSummary > td:nth-of-type(2) { color: var(--portal-muted) !important; }
html[data-portal-theme="dark"] :is(.mediaMobileDialog,.usersSettingsModal .table tr) { background: var(--portal-panel); color: var(--portal-text); }
html[data-portal-theme="dark"] .mediaMobileChoice { background: var(--portal-control); color: var(--portal-text); border-color: var(--portal-border); }
html[data-portal-theme="dark"] .mediaMobileChoice[aria-pressed="true"] { background: #3b4371; color: #e0e4ff; }
html[data-portal-theme="dark"] :is(#uploadMediaModal,#editMediaModal,#imageResizeModal) :is(.uploadModeTabs,.uploadModeBtn,.uploadPreviewStage,.uploadMetaDataBlock,.uploadCancelBtn,.uploadDisplayClose,.mediaRowTagToggle,.mediaRowTagDropdown,.mediaTagOption,.mediaRowTagCreateInput) { background: var(--portal-control) !important; color: var(--portal-muted); border-color: var(--portal-border); }
html[data-portal-theme="dark"] :is(#uploadMediaModal,#editMediaModal) :is(.uploadModeBtnActive,.mediaTagOptionActive) { background: #3b4371 !important; color: #e0e4ff; }
html[data-portal-theme="dark"] :is(.uploadDisplayLead,.uploadTiledInfo,.mediaEditPreviewHeader,#mediaEditRequirement,#mediaEditCanvaPages,#mediaEditCanvaStatus) { color: var(--portal-muted); }
/* Playlist preview player and secondary controls. */
html[data-portal-theme="dark"] .playlistBrowsePage :is(#player,.controlSecondary,.playlistNewSpotifyModalContent) { background: var(--portal-card) !important; color: var(--portal-text); }
html[data-portal-theme="dark"] .playlistBrowsePage :is(.currentlyPlayingSong,.currentlyPlayingArtist,.currentlyPlayingPlaylist,.seekerCurrentTime,.seekerTotalTime,.playlistNewSearchMoodMeta) { color: var(--portal-muted); }
html[data-portal-theme="dark"] .playlistBrowsePage .controlSecondary img { filter: brightness(0) invert(1); }
html[data-portal-theme="dark"] :is(.tb-ai-terms-head,.tb-ai-terms-meta) { background: var(--portal-control); color: var(--portal-text); }
html[data-portal-theme="dark"] :is(.tb-ai-link-card i,.tb-ai-playlist-card i) { color: var(--portal-accent); }
/* Legacy library cells paint their own background independently of each row. */
html[data-portal-theme="dark"] .mediaLibraryPage .mediaTable td { background-color: var(--portal-card) !important; }
html[data-portal-theme="dark"] .mediaLibraryPage .mediaTable td.first > div { background-color: var(--portal-control) !important; }
html[data-portal-theme="dark"] .tb-ai-card { background: var(--portal-panel); }
html[data-portal-theme="dark"] .userSettingsPage .usersMobileUserDialog { background: var(--portal-panel); color: var(--portal-text); }
html[data-portal-theme="dark"] .userSettingsPage :is(.usersMobileUserHeader button,.usersMobileSearch input) { background: var(--portal-control); color: var(--portal-text); }
html[data-portal-theme="dark"] .userSettingsPage :is(.usersMobileCount,.usersMobileEmpty,.usersMobileSaveHint,.usersMobileUserHeader p) { color: var(--portal-muted); }
html[data-portal-theme="dark"] .companyPage .companySelected .badge { background: #3b4371; color: #e0e4ff; }
html[data-portal-theme="dark"] .mediaLibraryPage .mediaMobileName > p:first-child { color: var(--portal-text) !important; }
html[data-portal-theme="dark"] .mediaLibraryPage .mediaRow { border-color: var(--portal-border); }
html[data-portal-theme="dark"] .mediaLibraryPage .mediaCanvaSubscribe { color: var(--portal-accent); border-color: var(--portal-accent); }
html[data-portal-theme="dark"] .mediaLibraryPage .mediaCanvaSubscribe:hover { background: var(--portal-hover); }
html[data-portal-theme="dark"] :is(.userSettingsPage,.companyPage) :is(.iOSTitle,.iOSHeadliner,.headlinerTable) { color: var(--portal-text) !important; }
html[data-portal-theme="dark"] body:has(:is(.userSettingsPage,.companyPage)) .modal :is(.iOSTitle,.iOSHeadliner) { color: var(--portal-text) !important; }
html[data-portal-theme="dark"] body:has(:is(.userSettingsPage,.companyPage)) .modal :is(.btn-close,.close,.modal-footer .btn[data-bs-dismiss="modal"]) { background: var(--portal-control); color: var(--portal-text) !important; border-color: var(--portal-border); filter: none; }
/* SweetAlert mounts the Spotify import dialog directly under body. */
html[data-portal-theme="dark"] .playlistNewSpotifyModal { background: var(--portal-panel); color: var(--portal-text); }
html[data-portal-theme="dark"] .playlistNewSpotifyModalTitle { color: var(--portal-text) !important; }
html[data-portal-theme="dark"] .playlistNewSpotifyModalText { color: var(--portal-muted) !important; }
html[data-portal-theme="dark"] .playlistNewSpotifyModalInput { background: var(--portal-control) !important; color: var(--portal-text) !important; border-color: var(--portal-border) !important; }
html[data-portal-theme="dark"] .playlistNewSpotifyValidation { background: #4c2836 !important; color: #ffacba !important; }
html[data-portal-theme="dark"] :is(#editCompanyModal,#newCompanyModal) :is(.close,.modal-footer .btn[data-bs-dismiss="modal"]) { background: var(--portal-control); color: var(--portal-text); border-color: var(--portal-border); }
html[data-portal-theme="dark"] :is(.playlistMobileNav button,.playlistSearchSheet .modal-header button) { background: var(--portal-control); color: var(--portal-text); border-color: var(--portal-border); }
html[data-portal-theme="dark"] .playlistMobileNav button[aria-current="page"] { background: #3b4371; color: #e0e4ff; border-color: #7e8ae2; }
html[data-portal-theme="dark"] .playlistSearchSheet #searchInput { background: var(--portal-control) !important; color: var(--portal-text); border-color: var(--portal-border) !important; }
html[data-portal-theme="dark"] .playlistSearchSheet .search-results { background: var(--portal-card); color: var(--portal-text); }