/* [CG] SYNGLI-7039 retain artwork and metric colours while theming app surfaces. */
html[data-theme="dark"] :is(.behind_header, .footer_container,
    .course-detail, .info-modal-content, .info-modal-navigation,
    .info-modal-program-course, .network_context, .network_owner_card,
    #contacts_area > .network_panel_header, .network_profile_network,
    .app_banner, #activity_rank, #stripe_form_container) {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(.footer_container a, .course-name,
    .featured-course-name, .course-details, .course-creator,
    .info-modal-navigation-option, .info-modal-details-table th,
    .info-modal-details-table td, .info-modal-reviews-text,
    .review-author, .review-text, .no-courses-found, .learn_no_courses,
    .network_owner_card, .network_context, .network_panel_header,
    .network_settings label, .network_context h3, .network_context h4,
    .app_banner, .app_link, .settings-menu-title, .settings-header) {
    color: var(--app-text);
}
html[data-theme="dark"] #top-nav :is(.inkles, #inkles, .inkle_count,
    .inkles_label, #equivMoney) {
    color: var(--app-text-secondary);
}
html[data-theme="dark"] #networks .network_card,
html[data-theme="dark"] .network_card.ui-sortable-helper {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
    border-top-color: var(--network-colour, var(--app-action));
}
html[data-theme="dark"] :is(#networks > .network_card,
    .network_card.ui-sortable-helper).network_circle > a > .network_name {
    color: var(--app-text);
    background: color-mix(in srgb, var(--network-colour, #2875ab) 15%, #1b1f24);
}
html[data-theme="dark"] #networks .network_name_text {
    color: var(--app-text);
}
html[data-theme="dark"] :is(.nav.network_view_tabs > li > a,
    .nav.nav-tabs.network_view_tabs > li.active > a,
    .nav.nav-tabs.network_view_tabs > li.active > a:hover,
    #create_network, .info-modal-navigation-option.active) {
    color: var(--app-text);
    background: var(--app-selection);
    border-color: var(--app-border);
}
html[data-theme="dark"] .nav.nav-tabs.network_view_tabs {
    background: var(--app-surface-secondary);
}
html[data-theme="dark"] #networks > #create_network {
    background: var(--app-surface-secondary);
    color: var(--app-action);
}
html[data-theme="dark"] .network_invitation_settings {
    background: var(--app-surface-secondary);
    border-color: var(--app-border);
}
html[data-theme="dark"] .network_settings_form :is(label, legend) {
    color: var(--app-text-secondary);
}

/* [CG] Authoring and account surfaces share the same palette as learner pages. */
html[data-theme="dark"] :is(.courses_content, .course-tab-content,
    #courses_table-placeholder, #selected_table, #all_table,
    .account_card, .account_history, .premises-create_tags,
    .select2-container-multi .select2-choices, .select2-search-choice,
    .CodeMirror, .CodeMirror-gutters, .editable-container .popover-content) {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(.premises-action_button, .nr-tabs,
    .select2-search-choice, .select2-choice, #profile_update_link,
    .course-action_button, .course-menu_toggle, .course-dropdown_toggle,
    .course-option_button, .course-control, .course-dropdown_menu,
    .course_mode_dropdown_menu, .nr_button) {
    background: var(--app-surface-secondary);
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(.premises-page_title, .account_card h2,
    .account_card h3, .account_card label, .course-header,
    .courses_content label, #create_new_course, .title h2,
    .form_title h3, .page_title h1) { color: var(--app-text); }
html[data-theme="dark"] :is(#course_content_default > .course-tab-content,
    #course_content_default .nr-tabs, #relation_search_div,
    #tags_search_div, #tags_search_div .select2-container-multi .select2-choices) {
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(#course_content_default li.active .nr-tabs,
    .course-option_button.active, .course-option_button:has(input:checked)) {
    background: var(--app-selection);
    color: var(--app-action);
}
html[data-theme="dark"] :is(.nr-tabs .course_name_text,
    .course-tab_name_text, .course-explanation_detail_title,
    .course-dropdown_menu li > a, .syngli-text_button) {
    color: var(--app-text);
}
html[data-theme="dark"] :is(.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected) {
    background: var(--app-selection);
}
html[data-theme="dark"] .CodeMirror-cursor { border-left-color: var(--app-text); }
html[data-theme="dark"] .CodeMirror-linenumber { color: var(--app-text-muted); }
html[data-theme="dark"] .cm-s-default .cm-keyword { color: #d6a7ff; }
html[data-theme="dark"] .cm-s-default .cm-string { color: #a5d6a7; }
html[data-theme="dark"] .cm-s-default .cm-number { color: #f6b26b; }
html[data-theme="dark"] .cm-s-default .cm-comment { color: #a3acb7; }
html[data-theme="dark"] .cm-s-default .cm-property { color: #a4c5ff; }
html[data-theme="dark"] .cm-s-default .cm-tag { color: #8ddbbd; }
html[data-theme="dark"] .cm-s-default .cm-attribute { color: #ffd086; }

/* [CG] Authoring and Statistics share a responsive page width in both themes. */
:root {
    --app-content-width: 80%;
}
/* [CG] These responsive pages must not inherit the legacy 420px body minimum. */
html body:has(:is(#course_content_default, #history_container,
    #programs_content, #bundles_content)) {
    min-width: 0;
}
html :is(#course_content_default, #history_container, #programs_content, #bundles_content) {
    box-sizing: border-box;
    width: var(--app-content-width);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}
html #history_container { display: block; }
#history_container .stats_history_table_placeholder {
    width: 100%;
    margin-left: 0;
}
@media (max-width: 480px) {
    :root { --app-content-width: 90%; }
}

/* [CG] Course authoring: selected rows, late Select2 styles and loading masks. */
html[data-theme="dark"] #course_content_default {
    background: transparent;
    --course-loading-surface: var(--app-surface);
    --course-loading-text: var(--app-text-secondary);
}
html[data-theme="dark"] #course_content_default :is(.select2-choices,
    .select2-choice, #relation_search, #course_tags_input,
    .select2-search-field input, #selected_course_info) {
    background: var(--app-surface-secondary);
    color: var(--app-text);
    border-color: var(--app-border);
    box-shadow: none;
}
html[data-theme="dark"] #course_content_default :is(.course-header,
    .course-tab-list, .nr-tabs) .syngli-icon {
    color: var(--app-text-secondary);
}
html[data-theme="dark"] #course_content_default li.active .nr-tabs {
    border-bottom-color: var(--app-selection) !important;
}
html[data-theme="dark"] :is(.course-option_button, .course-control,
    .course-dropdown_toggle, .course-mode-column) :is(.caret, .fa) {
    color: inherit;
}
html[data-theme="dark"] #course_content_default :is(.course-relations-status,
    #courses_table-placeholder) { background: var(--app-surface); }
html[data-theme="dark"] .course-relations-status[data-state="error"] {
    color: var(--app-error);
}

/* [CG] Legacy tables remain in Library and in some embedded selectors. */
html[data-theme="dark"] :is(.table, .nr-theader, .nr-tbody, .nrtable-zebra,
    .tablesorter-header, .grey) {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-divider);
}
html[data-theme="dark"] :is(.table, .nr-theader, .nr-tbody) :is(thead, th) {
    background: var(--app-surface-secondary);
    color: var(--app-text);
}
html[data-theme="dark"] :is(.nrtable-zebra, .table-striped > tbody > tr:nth-of-type(odd)) {
    background: var(--app-surface-secondary);
}
html[data-theme="dark"] #library_content :is(.library-icon, .fa-eye,
    .glyphicon, .library_course_name, .nr-title, .nr-table_text) {
    color: var(--app-text-secondary);
}
html[data-theme="dark"] #library_content :is(.icon-learn, .icon-test) {
    filter: none;
}
html[data-theme="dark"] .syngli-modal-body :is(.nrtable-zebra,
    .premises-zebra_row, .premises-zebra_row td) {
    background: var(--app-surface-secondary);
    color: var(--app-text);
}

/* [CG] Editors must pair selection backgrounds with readable foregrounds. */
html[data-theme="dark"] :is(.syngli-modal-body, .premises-page_body,
    .premises-create_shell) :is([contenteditable="true"], .item_list_input,
    .pc_relation, #relation_before_A, #relation_between_two, #relation_after_B) {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(.CodeMirror, .syngli-modal-body,
    .premises-page_body, .premises-create_shell) ::selection {
    background: var(--app-selection);
    color: var(--app-text);
}
html[data-theme="dark"] :is(.CodeMirror-selectedtext,
    .CodeMirror-focused .CodeMirror-selectedtext) { color: var(--app-text); }
html[data-theme="dark"] :is(.syngli-editor_lang_item,
    .syngli-editor_file_item, .syngli-editor_file_tab).is-selected {
    background: var(--app-selection);
    color: var(--app-text);
}

/* [CG] Media's side panel is app furniture, distinct from media previews. */
html[data-theme="dark"] :is(#file_gallery, #file_information, #file_details,
    #display_file_information, #file_dropzone, #file_dropzone_info,
    #total_files, #gallery_sort_menu, .file_information,
    .audio_list, .long_text_list, .long_seg_list) {
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(#gallery_sort_menu li, #total_files_badge,
    #selected_files_badge, #text-content) { color: var(--app-text); }
html[data-theme="dark"] #gallery_sort_menu li:is(:hover, .is-selected) {
    background: var(--app-selection);
}
html[data-theme="dark"] :is(.ui-layout-pane, .ui-layout-resizer) {
    background: var(--app-surface-secondary) !important;
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] :is(.overview_tag_unselected, .network_shared_course,
    .network_courses_section, .network_course_count) {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
    border-color: var(--app-border);
}
html[data-theme="dark"] .overview_tag_selected {
    background: var(--app-selection);
    color: var(--app-action);
    border-color: var(--app-action);
}
html[data-theme="dark"] .network_shared_course > span:not(.network_course_icon) {
    color: var(--app-text);
}
html[data-theme="dark"] :is(.account_balance, .account_balance_amount,
    .account_balance_unit, .account_balance_breakdown) {
    background: var(--app-surface);
    color: var(--app-text);
}
html[data-theme="dark"] :is(.account_card_title, .account_card_label,
    .account_upgrade p, .network_courses_heading) { color: var(--app-text-secondary); }

/* [CG] Keep neutral interface colours soft at both ends of the dark palette. */
html[data-theme="dark"] .syngli-icon.dark { color: var(--app-text-secondary); }
html[data-theme="dark"] .syngli-icon.dark:hover { color: var(--app-action); }
html[data-theme="dark"] :is(.program_secondary_button,
    .programs_eyebrow, .program_icon_button, .program_course_order,
    #program_course_count, #bundle_course_count) { color: var(--app-action); }
html[data-theme="dark"] :is(#upload_panel, .media-ai_action_button,
    .premises-create_mode_switch) {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
    border-color: var(--app-border);
}
html[data-theme="dark"] #content_content .nav-tabs > li.active > a {
    background: var(--app-selection);
    color: var(--app-action);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(#upload_panel_placeholder_text,
    #upload_panel_placeholder_hint, #upload_panel_placeholder .fa) {
    color: var(--app-text-secondary);
}
html[data-theme="dark"] :is(.gauge__min_value, .gauge__max_value) {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: var(--app-surface-secondary);
}

/* [CG] CodeMirror's active line is separate from its text selection layer. */
html[data-theme="dark"] :is(.CodeMirror-activeline-background,
    .CodeMirror-activeline-gutter, .CodeMirror-activeline .CodeMirror-linenumber) {
    background: var(--app-selection);
    color: var(--app-text-secondary);
}
html[data-theme="dark"] :is(.syngli-editor_lang_item,
    .syngli-editor_file_item, .syngli-editor_file_tab,
    .premises-create_tag_chip, .premises-create_panel_header) {
    color: var(--app-text-secondary);
}
html[data-theme="dark"] .syngli-editor_file_tab.is-active {
    background: var(--app-selection);
    color: var(--app-action);
    border-color: var(--app-action);
}

html[data-theme="dark"] #course_content_default :is(table, th, td) {
    border-color: var(--app-divider);
}
html[data-theme="dark"] :is(#programs_content, #bundles_content) :is(
    .programs_card, .bundle_pricing_type > label, .bundles_currency,
    .programs_table_shell, th, td) {
    border-color: var(--app-divider);
}
html[data-theme="dark"] .program_primary_button {
    background: var(--app-action);
    color: var(--app-on-action);
    border-color: var(--app-action);
}
html[data-theme="dark"] .program_primary_button:is(:hover, :focus) {
    background: var(--app-focus);
    color: var(--app-on-action);
}

html[data-theme="dark"] .program_group_status {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
}
html[data-theme="dark"] .program_group_row.is_editing .program_group_status {
    background: #493f24;
    color: #e3cc91;
}
html[data-theme="dark"] :is(#program_warning, #bundle_warning).program_message_success {
    background: var(--app-success-surface);
    color: var(--app-success);
    border-color: var(--app-success);
}
html[data-theme="dark"] :is(#program_warning, #bundle_warning).program_message_error {
    background: var(--app-error-surface);
    color: var(--app-error);
    border-color: var(--app-error);
}
html[data-theme="dark"] :is(.program_delete_button, .program_group_delete_button,
    .program_remove_course_button, .bundle_delete_button,
    .bundle_remove_course_button):is(:hover, :focus) {
    background: var(--app-error-surface);
    color: var(--app-error);
}

/* [CG] Shared course menus keep their text and active state in both appearances. */
html[data-theme="dark"] #side-menu #course_list label.course_label_list {
    color: var(--app-text-secondary) !important;
    border-color: var(--app-divider) !important;
}
html[data-theme="dark"] #side-menu #course_list label.course_label_list.active {
    background: var(--app-selection) !important;
    color: var(--app-action) !important;
}
html[data-theme="dark"] :is(.mm-title, .mm-navbar, .mm-header,
    .stats_side_menu_header, .stats_side_menu_header button,
    .stats_course_type_button, .course-list) {
    background: var(--app-surface-secondary);
    color: var(--app-text);
    border-color: var(--app-divider);
}
html[data-theme="dark"] :is(#feedback_form, #feedback_inner) {
    background: var(--app-surface-elevated);
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(#feedback_send, #feedback_cancel) {
    background: var(--app-surface-secondary);
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] #feedback_send:hover,
html[data-theme="dark"] #feedback_cancel:hover { color: var(--app-action); }

/* [CG] Dialog controls inherit colours even when their styles load late. */
html[data-theme="dark"] :is(.syngli_btn, .syngli_btn_secondary,
    .syngli_dropdown_toggle, .syngli_dropdown_menu, .syngli_table_column_label,
    .syngli_table_column_actions, .syngli-editor_relation_tag,
    .syngli-editor_relation_preview, .syngli-editor_relation_help,
    .course-virtual_relation_chip, .presentation-order_table,
    .presentation-order_table thead, .premises-preview_card,
    .premises-preview_question, .premises-preview_empty, .premises-preview_loading,
    .premises-preview_meta_value, .premises-preview_item_audio_select) {
    background: var(--app-surface-secondary);
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(.premises-preview_label,
    .premises-preview_counter, .presentation-order_relation,
    .presentation-order_help, .course-virtual_relation_text,
    .syngli-editor_relation_tag, .syngli-editor_relation_preview,
    .syngli_table_column_menu a, .syngli_table_column_menu label,
    .syngli_table_column_menu button) { color: var(--app-text-secondary); }
html[data-theme="dark"] .premises-preview_itemA_wrap {
    background: var(--app-selection);
    color: var(--app-text);
}
html[data-theme="dark"] :is(.premises-preview_nav .btn,
    .premises-preview_edit_cancel, .presentation-order_moves button,
    .syngli_table_column_actions button) {
    background: var(--app-surface-secondary);
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(.syngli_dropdown_menu li > a:hover,
    .syngli_table_column_label:hover, .language_li:hover) {
    background: var(--app-selection);
    color: var(--app-action);
}
html[data-theme="dark"] :is(.syngli-modal-body, .syngli-panel_body) code {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
}
html[data-theme="dark"] .presentation-order_table :is(th, td) {
    border-color: var(--app-divider);
}
html[data-theme="dark"] .presentation-order_itemA { color: var(--app-action); }

/* [CG] The shared legal content also appears inside update-notice dialogs. */
html[data-theme="dark"] :is(.info_content, .memberbox,
    .careers-position-title, .careers-position-content) {
    background-color: var(--app-page);
    color: var(--app-text-secondary);
    border-color: var(--app-divider);
}
html[data-theme="dark"] :is(#terms, #privacy, #careers, #contact,
    .info_content, .memberbox) :is(p, li, h2, h3, h4, small, .membertitle) {
    color: var(--app-text-secondary);
    text-shadow: none;
}
html[data-theme="dark"] .memberbox h3.membertitle { color: var(--app-text); }
html[data-theme="dark"] .org_logo {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid var(--app-divider);
    border-radius: 8px;
    background: var(--app-surface);
}
html[data-theme="dark"] .org_logo img {
    width: auto;
    max-width: 100%;
    height: 72px;
    object-fit: contain;
}
html[data-theme="dark"] .footer_container a:is(:focus, :hover) .footer-icon .st0 {
    fill: var(--app-action);
}
html[data-theme="dark"] #select_language .language_li {
    color: var(--app-text);
    border-color: var(--app-divider);
}

/* [CG] Account members, network identities and stats filters use readable labels. */
html[data-theme="dark"] :is(.account_member_name, .account_member_initials,
    .network_owner_name, .network_owner_title, .network_profile_identity h4,
    .network_context_description, .network_about_heading,
    .network_members_header, .network_members_title, .contacts_heading,
    #contacts_area .contact_name, #contacts_area .user_name,
    .stats_searchable_menu .user_name, .stats_searchable_menu .network_name,
    .stats_learning_filters .user_name, .stats_learning_filters .network_name,
    .stats_user_network_badge, .stats_user_network_more,
    .stats_user_network_overflow, .stats_history_source_badge,
    .stats_history_current_course, .stats_history_metric_basis) {
    color: var(--app-text-secondary);
}
html[data-theme="dark"] :is(.account_member_initials, .network_owner_badge,
    .stats_user_network_badge, .stats_user_network_more,
    .stats_user_network_overflow, .stats_history_source_badge,
    .stats_history_current_course, .stats_history_metric_basis,
    .stats_argument_completion_toggle button) {
    background: var(--app-surface-secondary);
    border-color: var(--app-divider);
    color: var(--app-text-secondary);
}
html[data-theme="dark"] :is(.stats_argument_completion_toggle button.selected,
    .stats_user_network_more:hover) {
    background: var(--app-selection);
    color: var(--app-action);
}
html[data-theme="dark"] :is(.network_owner_email, .network_profile_email) {
    color: var(--app-text-muted);
}
/* [CG] A grid placeholder must not impose a fixed extra track while dragging. */
#networks > .network_card_placeholder {
    width: auto !important;
    min-width: 0;
    max-width: 100%;
}

/* [CG] Course detail overlays and large Dashboard cards retain metric colours. */
html[data-theme="dark"] :is(.course-description, .course-details,
    .info-modal-store-text, .info-modal-program-title,
    .info-modal-program-group-title, .comment_text, .review-text,
    .review-author, .rating_text, .info-modal-details-table tr th,
    .info-modal-details-table tr td) { color: var(--app-text-secondary); }
html[data-theme="dark"] .info-modal-details-table tr:nth-child(odd) {
    background: var(--app-surface-secondary);
}
html[data-theme="dark"] :is(.info-modal-navigation-option .fa,
    .course-detail .fa, .course-detail .glyphicon) { color: var(--app-text-secondary); }
html[data-theme="dark"] :is(.info-modal-button, .info-modal-button-half,
    .info-modal-button-icon) {
    background: var(--app-selection);
    color: var(--app-action);
}
html[data-theme="dark"] .info-modal-button-like-hide { color: var(--app-action); }
html[data-theme="dark"] :is(.vex .vex-dialog-message,
    .vex .modal-section-text, .tutorial-content) { color: var(--app-text-secondary); }
html[data-theme="dark"] #library_content :is(.btn-success, .btn-danger) {
    background: var(--app-surface-secondary);
    border-color: var(--app-border);
    color: var(--app-text-secondary);
}
html[data-theme="dark"] #library_content .btn-success { color: var(--app-success); }
html[data-theme="dark"] #library_content .btn-danger { color: var(--app-error); }

html[data-theme="dark"] :is(.network_members_heading,
    .contact_bubble_title, .contact_bubble_email, .contact_bubble_email_duplicate,
    .contact_bubble_networks, .network_owner_badge, .stats_side_menu_header a,
    .course_list_title) { color: var(--app-text-secondary); }
html[data-theme="dark"] #contacts_area .contact_bubble_label a {
    color: var(--app-text);
}
html[data-theme="dark"] :is(.network_owner_badge, .course-virtual_relation_chip) {
    background: var(--app-surface-secondary);
    border-color: var(--app-divider);
}

html[data-theme="dark"] :is(#tab-setting, #button_setting,
    .dashboard_stats_tooltip, .jumbotron) {
    background-color: var(--app-surface-secondary);
    color: var(--app-text-secondary);
    border-color: var(--app-divider);
}
html[data-theme="dark"] :is(#button_setting .setting_list_name,
    .account_page .user_name, .account_page .account_member_name span,
    .stats_learning_filters label, .history #users, .history #networks,
    #button_setting_icon) { color: var(--app-text-secondary); }
html[data-theme="dark"] #contacts_area .contact_bubble {
    /* [CG] Legacy member rendering sets its card surface inline. */
    background-color: var(--app-surface) !important;
    border-color: var(--app-divider);
}
html[data-theme="dark"] .contact_bubble.ui-sortable-helper {
    background-color: var(--app-surface) !important;
}
html[data-theme="dark"] .network_avatar_initials {
    background: transparent;
    color: inherit;
}

html[data-theme="dark"] #library_content .errors {
    background: var(--app-error-surface);
    color: var(--app-error);
}
html[data-theme="dark"] #library_content .no_errors {
    background: var(--app-success-surface);
    color: var(--app-success);
}
html[data-theme="dark"] :is(.stats_list_view_button,
    .stats_program_button, .stats_program_course) {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
    border-color: var(--app-divider);
}
html[data-theme="dark"] .stats_list_view_button.active,
html[data-theme="dark"] .account_tabs.nav-tabs > li.active > a {
    background: var(--app-selection);
    color: var(--app-action);
    border-color: var(--app-divider);
}
html[data-theme="dark"] #family_member_table .syngli_table :is(th, td) {
    color: var(--app-text-secondary);
}

html[data-theme="dark"] #library_content .slider {
    background-color: var(--app-error-surface);
    border: 1px solid var(--app-border);
}
html[data-theme="dark"] #library_content input:checked + .slider {
    background-color: var(--app-success-surface);
}
html[data-theme="dark"] #library_content .slider:before {
    background-color: var(--app-text-secondary);
}

html[data-theme="dark"] :is(.premises-relation_pagination_status,
    .premises-pagination_page, .setting_list_icon) { color: var(--app-text-muted); }
html[data-theme="dark"] #course_content_default .syngli-text_button {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
    border-color: var(--app-border);
}
html[data-theme="dark"] .presentation-order_row--focused {
    background: var(--app-selection);
}

html[data-theme="dark"] .syngli-text_button {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(.title-bar-button, .modal_left, .modal_right) {
    color: var(--app-text-secondary);
    border-color: var(--app-divider);
}
html[data-theme="dark"] .title-bar-button-active {
    color: var(--app-text);
    border-color: var(--app-border);
}
html[data-theme="dark"] .modal_circle { background: var(--app-border); }
html[data-theme="dark"] .modal_circle.active { background: var(--app-action); }

/* [CG] Media selection uses the same quiet blue for tabs, files and drag ranges. */
html[data-theme="dark"] #content_content .nav-tabs > li > a {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
    border-color: var(--app-border);
}
html[data-theme="dark"] #content_content .nav-tabs > li.active > a,
html[data-theme="dark"] #content_content .nav-tabs > li > a:focus {
    background: var(--app-selection);
    color: var(--app-action);
}
html[data-theme="dark"] #thumbnail_display .selectable_li:hover {
    /* [CG] Gallery mouse handlers still set their old hover colour inline. */
    background-color: var(--app-surface-secondary) !important;
    color: var(--app-text);
}
html[data-theme="dark"] #thumbnail_display .selectable_li:is(.ui-selected, .ui-selecting) {
    background-color: var(--app-selection) !important;
    color: var(--app-text);
    box-shadow: inset 3px 0 var(--app-action);
}
html[data-theme="dark"] .selectable_li:is(.ui-selected, .ui-selecting) :is(
    .audio_list, .long_text_list, .long_seg_list) {
    background: transparent;
    color: var(--app-text);
}

html[data-theme="dark"] .file-gallery_batch_badge {
    /* [CG] These batch colours were applied inline by the legacy gallery. */
    background-color: hsl(var(--batch-hue, 210), 30%, 20%) !important;
    color: hsl(var(--batch-hue, 210), 45%, 80%) !important;
    border-color: hsl(var(--batch-hue, 210), 30%, 42%) !important;
}
html[data-theme="dark"] .file-gallery_batch_badge.is-active {
    background-color: hsl(var(--batch-hue, 210), 35%, 28%) !important;
}

html[data-theme="dark"] #sharing_module :is(.course-network_panel,
    .list-group, .list-group-item, .list-group-item.disabled) {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
    border-color: var(--app-divider);
}

html[data-theme="dark"] #sharing_module .list-group.checked-list-box
    .list-group-item:is(.active, .list-group-item-primary) {
    background: var(--app-selection);
    color: var(--app-action);
    border-color: var(--app-border);
}
html[data-theme="dark"] .presentation-order_table th {
    background: var(--app-surface-secondary);
    color: var(--app-text);
}
html[data-theme="dark"] .presentation-order_itemB { color: var(--app-error); }
html[data-theme="dark"] .premises-preview_header {
    border-color: var(--app-divider);
}

/* [CG] These are app-owned monochrome navigation icons, not course artwork. */
html[data-theme="dark"] .info-modal-navigation-option > img[src^="/images/icon_"] {
    filter: brightness(0) invert(.8);
}

/* [CG] Walkthrough headers and file-type tabs use the shared dark surfaces. */
html[data-theme="dark"] .vex.vex-theme-default .title-bar {
    background: var(--app-surface-secondary);
    color: var(--app-text);
}
html[data-theme="dark"] .vex.vex-theme-default .title-bar-button {
    color: var(--app-text-secondary);
    border-color: var(--app-divider);
}
html[data-theme="dark"] .vex.vex-theme-default .title-bar-button-active {
    color: var(--app-text);
    background: var(--app-selection);
    border-color: var(--app-border);
}
html[data-theme="dark"] .syngli-editor_file_tabs {
    border-color: var(--app-divider);
}
html[data-theme="dark"] .syngli-editor_file_tab {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
    border-color: var(--app-border);
}
html[data-theme="dark"] .syngli-editor_file_tab:is(.is-active, :hover) {
    background: var(--app-selection);
    color: var(--app-action);
    border-color: var(--app-action);
}
html[data-theme="dark"] .premises-page_body .badge {
    background: var(--app-surface-elevated);
    color: var(--app-text);
    border: 1px solid var(--app-border);
}
html[data-theme="dark"] .premises-page_body .pc_badge {
    background: var(--app-selection);
    color: var(--app-action);
}
html[data-theme="dark"] .footer_container a:is(:hover, :focus)
    :is(#google_play_store_link, #apple_app_store_link),
html[data-theme="dark"] .footer_container
    :is(#google_play_store_link, #apple_app_store_link):hover {
    background: var(--app-action);
}
html[data-theme="dark"] .footer_container a:is(:hover, :focus)
    :is(#google_play_store_link, #apple_app_store_link) i {
    color: var(--app-on-action);
}
html[data-theme="dark"] #social_menu .google_btn,
html[data-theme="dark"] #social_menu .g_id_signin,
html[data-theme="dark"] #social_menu .g_id_signin iframe {
    background: transparent;
}
/* [CG] Keep the embedded provider canvas from inheriting forced dark colours. */
html[data-theme="dark"] #social_menu .g_id_signin iframe {
    color-scheme: normal;
}

/* [CG] Account history remains readable before and after changing tabs. */
html[data-theme="dark"] .account_page {
    --account-placeholder: var(--app-divider);
}
html[data-theme="dark"] .account_page .account_tabs {
    border-color: var(--app-divider);
}
html[data-theme="dark"] .account_page .account_tabs > li > a {
    color: var(--app-text-secondary);
    background: transparent;
}
html[data-theme="dark"] .account_page .account_tabs > li.active > a,
html[data-theme="dark"] .account_page .account_tabs > li > a:is(:hover, :focus) {
    color: var(--app-action);
    background: var(--app-selection);
    border-bottom-color: var(--app-action);
}
html[data-theme="dark"] .account_page .syngli_table :is(th, td),
html[data-theme="dark"] .account_page :is(.syngli_table_no_results,
    .syngli_table_message, .syngli_table_placeholder) {
    color: var(--app-text-secondary);
    border-color: var(--app-divider);
}
html[data-theme="dark"] .account_page .syngli_table thead {
    border-bottom: 1px solid var(--app-divider);
}

/* [CG] Disabled profile actions stay muted without fading their text away. */
html[data-theme="dark"] .save_form_button .btn:is(.disabled, :disabled) {
    background: var(--app-surface-secondary);
    /* [CG] Override the legacy generic .disabled text colour. */
    color: var(--app-text-muted) !important;
    border-color: var(--app-border);
    opacity: 1;
    text-shadow: none;
}

/* [CG] Compact member previews blend into their card without white corners. */
html[data-theme="dark"] :is(#networks > .network_card,
    .network_card.ui-sortable-helper).network_circle
    .network_members > .contact_bubble {
    border-color: var(--app-surface);
    background: var(--app-surface);
    overflow: hidden;
}
html[data-theme="dark"] :is(#networks > .network_card,
    .network_card.ui-sortable-helper).network_circle
    .network_members > .contact_bubble > .panel-body {
    background: transparent;
    border-radius: inherit;
}

/* [CG] Library's legacy sharing editor needs explicit open and menu states. */
html[data-theme="dark"] #library_content .dropdown-toggle.btn-default {
    background: var(--app-surface-secondary);
    color: var(--app-text);
    border-color: var(--app-border);
    box-shadow: none;
}
html[data-theme="dark"] #library_content .open > .dropdown-toggle.btn-default,
html[data-theme="dark"] #library_content .dropdown-toggle.btn-default:is(:hover, :focus) {
    background: var(--app-selection);
    color: var(--app-action);
    border-color: var(--app-action);
}
html[data-theme="dark"] #library_content .dropdown-menu > li > a {
    background: var(--app-surface);
    color: var(--app-text-secondary);
}
html[data-theme="dark"] #library_content .dropdown-menu > li > a:is(:hover, :focus) {
    background: var(--app-selection);
    color: var(--app-text);
}
html[data-theme="dark"] #library_content .library-sharing-dropdown
    :is(.network_name, .state-icon) {
    color: inherit;
}
html[data-theme="dark"] #library_content :is(.nr-network-private, .nr-network-multiple) {
    background: var(--app-surface-secondary);
    border-color: var(--app-text-secondary);
}
html[data-theme="dark"] #library_content .nr-network-public {
    background: var(--app-text-muted);
}