/* Addon theme consistency: late pass so feature pages inherit the active site theme. */
:root {
  --addon-ui-bg: var(--bg, #f0f2f5);
  --addon-ui-card: color-mix(in srgb, var(--card, #fff) 94%, var(--bg, #f0f2f5));
  --addon-ui-card-solid: var(--card, #fff);
  --addon-ui-soft: color-mix(in srgb, var(--bg, #f0f2f5) 76%, var(--card, #fff));
  --addon-ui-soft-accent: color-mix(in srgb, var(--accent, #1877f2) 13%, var(--card, #fff));
  --addon-ui-text: var(--text, #1c1e21);
  --addon-ui-muted: var(--muted, #65676b);
  --addon-ui-line: color-mix(in srgb, var(--line, #d9dde3) 84%, transparent);
  --addon-ui-accent: var(--accent, #1877f2);
  --addon-ui-accent-strong: color-mix(in srgb, var(--accent, #1877f2) 76%, var(--text, #1c1e21));
  --addon-ui-on-accent: #fff;
  --addon-ui-danger: #be123c;
  --addon-ui-success: #047857;
  --addon-ui-shadow: 0 14px 36px color-mix(in srgb, var(--text, #1c1e21) 8%, transparent);
  --addon-ui-overlay: color-mix(in srgb, var(--text, #1c1e21) 70%, transparent);
}

html[data-theme="high_contrast"] {
  --addon-ui-card: var(--card, #111);
  --addon-ui-card-solid: var(--card, #111);
  --addon-ui-soft: var(--bg, #000);
  --addon-ui-soft-accent: color-mix(in srgb, var(--accent, #ffea00) 22%, var(--bg, #000));
  --addon-ui-line: var(--line, #fff);
  --addon-ui-accent-strong: var(--accent, #ffea00);
  --addon-ui-on-accent: #000;
  --addon-ui-danger: #ff6b6b;
  --addon-ui-success: #7dff9f;
}

body:is(
  .achievements-page,
  .auto-body,
  .business-directory-page,
  .business-page,
  .calendar-page,
  .donations-page,
  .event-page,
  .events-page,
  .groups-directory-page,
  .groups-page,
  .pages-directory-page,
  .pages-page,
  .photo-page,
  .points-page,
  .points-shop-page,
  .poll-page,
  .polls-page,
  .profile-subscriptions-page,
  .qna-page,
  .reaction-settings-page,
  .real-estate-detail-page,
  .real-estate-manage-page,
  .real-estate-page,
  .sitemusic-directory-page,
  .site-music-page,
  .story-page,
  .story-views-page,
  .subscriptions-page,
  .video-channel-page,
  .video-watch-page
) {
  background: var(--addon-ui-bg) !important;
  background-color: var(--addon-ui-bg) !important;
  color: var(--addon-ui-text);
}

body.events-page.events-has-custom-bg {
  background-color: var(--addon-ui-bg) !important;
}

body:is(
  .achievements-page,
  .auto-body,
  .business-directory-page,
  .business-page,
  .calendar-page,
  .donations-page,
  .event-page,
  .events-page,
  .groups-directory-page,
  .groups-page,
  .pages-directory-page,
  .pages-page,
  .photo-page,
  .points-page,
  .points-shop-page,
  .poll-page,
  .polls-page,
  .profile-subscriptions-page,
  .qna-page,
  .reaction-settings-page,
  .real-estate-detail-page,
  .real-estate-manage-page,
  .real-estate-page,
  .sitemusic-directory-page,
  .site-music-page,
  .story-page,
  .story-views-page,
  .subscriptions-page,
  .video-channel-page,
  .video-watch-page
) :is(.main-content, .content, .page-content) {
  color: var(--addon-ui-text);
}

body:is(
  .achievements-page,
  .auto-body,
  .business-directory-page,
  .business-page,
  .calendar-page,
  .donations-page,
  .event-page,
  .events-page,
  .groups-directory-page,
  .groups-page,
  .pages-directory-page,
  .pages-page,
  .photo-page,
  .points-page,
  .points-shop-page,
  .poll-page,
  .polls-page,
  .profile-subscriptions-page,
  .qna-page,
  .reaction-settings-page,
  .real-estate-detail-page,
  .real-estate-manage-page,
  .real-estate-page,
  .sitemusic-directory-page,
  .site-music-page,
  .story-page,
  .story-views-page,
  .subscriptions-page,
  .video-channel-page,
  .video-watch-page
) :is(
  .card,
  .panel,
  .modal,
  .dialog,
  .points-top-menu,
  .points-user-suggestions,
  .points-ledger-list article,
  .point-shop-cta-box,
  .point-shop-card,
  .points-shop-note-card,
  .point-marquee-dialog,
  .point-shop-insufficient-dialog,
  .point-shoutbox-dialog,
  .point-shoutbox-post-dialog,
  .achievement-sidebar-tile,
  .achievement-compact-card,
  .point-master-dialog,
  .qna-card,
  .poll-card,
  .event-card,
  .calendar-card,
  .video-card,
  .music-card,
  .business-card,
  .directory-card,
  .listing-card,
  .subscription-card,
  .donation-card,
  .group-card,
  .page-card
) {
  background: var(--addon-ui-card) !important;
  border-color: var(--addon-ui-line) !important;
  color: var(--addon-ui-text) !important;
  box-shadow: var(--addon-ui-shadow);
}

body:is(.points-page, .points-shop-page) :is(
  .points-shop-balance,
  .point-shop-cost-chip,
  .point-shop-grant-chip,
  .point-marquee-head button,
  .point-marquee-preview-box,
  .point-shoutbox-confirm,
  .points-user-suggestion,
  .points-user-load-more,
  .achievements-sidebar-empty,
  .achievement-status-chip
) {
  background: var(--addon-ui-soft) !important;
  border-color: var(--addon-ui-line) !important;
  color: var(--addon-ui-text) !important;
}

body:is(.points-page, .points-shop-page) :is(
  .point-shop-card-media,
  .point-shop-card-image-wrap,
  .achievement-card-image-wrap,
  .achievement-sidebar-thumb,
  .achievement-compact-media,
  .point-master-preview-post
) {
  background: var(--addon-ui-soft) !important;
  border-color: var(--addon-ui-line) !important;
}

body:is(.points-page, .points-shop-page) :is(
  .point-shop-card-icon,
  .point-shop-cta-btn,
  .profile-custom-marquee-manage-btn,
  .point-marquee-primary,
  .points-send-top-btn,
  .point-shop-insufficient-icon
) {
  background: var(--addon-ui-accent) !important;
  color: var(--addon-ui-on-accent) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--addon-ui-accent) 24%, transparent);
}

body:is(.points-page, .points-shop-page) :is(
  .point-marquee-secondary,
  .points-top-menu a,
  .point-marquee-file
) {
  background: var(--addon-ui-soft) !important;
  border-color: var(--addon-ui-line) !important;
  color: var(--addon-ui-text) !important;
}

body:is(.points-page, .points-shop-page) :is(
  .points-big,
  .points-shop-balance strong,
  .point-marquee-status,
  .points-ledger-list strong,
  .achievements-rail-meta strong
) {
  color: var(--addon-ui-accent) !important;
}

body:is(.points-page, .points-shop-page) :is(
  .points-top-menu .points-top-menu-primary,
  .points-send-form button,
  .achievements-load-more-btn
) {
  background: var(--addon-ui-accent) !important;
  color: var(--addon-ui-on-accent) !important;
  border-color: var(--addon-ui-accent) !important;
}

body:is(
  .achievements-page,
  .auto-body,
  .business-directory-page,
  .business-page,
  .calendar-page,
  .donations-page,
  .event-page,
  .events-page,
  .groups-directory-page,
  .groups-page,
  .pages-directory-page,
  .pages-page,
  .points-page,
  .points-shop-page,
  .poll-page,
  .polls-page,
  .profile-subscriptions-page,
  .qna-page,
  .reaction-settings-page,
  .real-estate-detail-page,
  .real-estate-manage-page,
  .real-estate-page,
  .sitemusic-directory-page,
  .site-music-page,
  .story-views-page,
  .subscriptions-page,
  .video-channel-page,
  .video-watch-page
) :is(input, textarea, select) {
  background: var(--addon-ui-card-solid) !important;
  border-color: var(--addon-ui-line) !important;
  color: var(--addon-ui-text) !important;
}

body:is(
  .achievements-page,
  .auto-body,
  .business-directory-page,
  .business-page,
  .calendar-page,
  .donations-page,
  .event-page,
  .events-page,
  .groups-directory-page,
  .groups-page,
  .pages-directory-page,
  .pages-page,
  .points-page,
  .points-shop-page,
  .poll-page,
  .polls-page,
  .profile-subscriptions-page,
  .qna-page,
  .reaction-settings-page,
  .real-estate-detail-page,
  .real-estate-manage-page,
  .real-estate-page,
  .sitemusic-directory-page,
  .site-music-page,
  .story-views-page,
  .subscriptions-page,
  .video-channel-page,
  .video-watch-page
) :is(input, textarea, select):focus {
  border-color: var(--addon-ui-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--addon-ui-accent) 18%, transparent) !important;
  outline: 0;
}

body:is(
  .achievements-page,
  .auto-body,
  .business-directory-page,
  .business-page,
  .calendar-page,
  .donations-page,
  .event-page,
  .events-page,
  .groups-directory-page,
  .groups-page,
  .pages-directory-page,
  .pages-page,
  .points-page,
  .points-shop-page,
  .poll-page,
  .polls-page,
  .profile-subscriptions-page,
  .qna-page,
  .reaction-settings-page,
  .real-estate-detail-page,
  .real-estate-manage-page,
  .real-estate-page,
  .sitemusic-directory-page,
  .site-music-page,
  .story-views-page,
  .subscriptions-page,
  .video-channel-page,
  .video-watch-page
) :is(
  h1,
  h2,
  h3,
  h4,
  strong,
  label,
  .title,
  .name
) {
  color: var(--addon-ui-text) !important;
}

body:is(
  .achievements-page,
  .auto-body,
  .business-directory-page,
  .business-page,
  .calendar-page,
  .donations-page,
  .event-page,
  .events-page,
  .groups-directory-page,
  .groups-page,
  .pages-directory-page,
  .pages-page,
  .points-page,
  .points-shop-page,
  .poll-page,
  .polls-page,
  .profile-subscriptions-page,
  .qna-page,
  .reaction-settings-page,
  .real-estate-detail-page,
  .real-estate-manage-page,
  .real-estate-page,
  .sitemusic-directory-page,
  .site-music-page,
  .story-views-page,
  .subscriptions-page,
  .video-channel-page,
  .video-watch-page
) :is(
  p,
  small,
  .muted,
  .subtitle,
  .description,
  .points-shop-hero p,
  .point-shop-card p,
  .point-shop-cta-copy,
  .point-marquee-head p,
  .point-shoutbox-sidecopy,
  .point-shoutbox-dim-note,
  .achievement-compact-copy,
  .achievement-earned-date,
  .achievement-sidebar-name,
  .achievements-sidebar-empty,
  .points-user-empty,
  .points-ledger-list small
) {
  color: var(--addon-ui-muted) !important;
}

body:is(
  .achievements-page,
  .auto-body,
  .business-directory-page,
  .business-page,
  .calendar-page,
  .donations-page,
  .event-page,
  .events-page,
  .groups-directory-page,
  .groups-page,
  .pages-directory-page,
  .pages-page,
  .points-page,
  .points-shop-page,
  .poll-page,
  .polls-page,
  .profile-subscriptions-page,
  .qna-page,
  .reaction-settings-page,
  .real-estate-detail-page,
  .real-estate-manage-page,
  .real-estate-page,
  .sitemusic-directory-page,
  .site-music-page,
  .story-views-page,
  .subscriptions-page,
  .video-channel-page,
  .video-watch-page
) :is(
  .pretty-action,
  .primary-action,
  .load-more,
  .load-more-btn,
  .view-more,
  button[type="submit"]
) {
  background: var(--addon-ui-accent) !important;
  border-color: var(--addon-ui-accent) !important;
  color: var(--addon-ui-on-accent) !important;
}

body:is(
  .achievements-page,
  .auto-body,
  .business-directory-page,
  .business-page,
  .calendar-page,
  .donations-page,
  .event-page,
  .events-page,
  .groups-directory-page,
  .groups-page,
  .pages-directory-page,
  .pages-page,
  .points-page,
  .points-shop-page,
  .poll-page,
  .polls-page,
  .profile-subscriptions-page,
  .qna-page,
  .reaction-settings-page,
  .real-estate-detail-page,
  .real-estate-manage-page,
  .real-estate-page,
  .sitemusic-directory-page,
  .site-music-page,
  .story-views-page,
  .subscriptions-page,
  .video-channel-page,
  .video-watch-page
) :is(
  .chip,
  .badge,
  .pill,
  .tag,
  .filter-chip,
  .status-chip,
  .tabs a,
  .tabs button
) {
  background: var(--addon-ui-soft) !important;
  border-color: var(--addon-ui-line) !important;
  color: var(--addon-ui-text) !important;
}

body:is(
  .achievements-page,
  .auto-body,
  .business-directory-page,
  .business-page,
  .calendar-page,
  .donations-page,
  .event-page,
  .events-page,
  .groups-directory-page,
  .groups-page,
  .pages-directory-page,
  .pages-page,
  .points-page,
  .points-shop-page,
  .poll-page,
  .polls-page,
  .profile-subscriptions-page,
  .qna-page,
  .reaction-settings-page,
  .real-estate-detail-page,
  .real-estate-manage-page,
  .real-estate-page,
  .sitemusic-directory-page,
  .site-music-page,
  .story-views-page,
  .subscriptions-page,
  .video-channel-page,
  .video-watch-page
) :is(
  .is-active,
  .active,
  .tabs a.is-active,
  .tabs button.is-active
) {
  border-color: var(--addon-ui-accent) !important;
}

html[data-theme="high_contrast"] body:is(
  .achievements-page,
  .auto-body,
  .business-directory-page,
  .business-page,
  .calendar-page,
  .donations-page,
  .event-page,
  .events-page,
  .groups-directory-page,
  .groups-page,
  .pages-directory-page,
  .pages-page,
  .points-page,
  .points-shop-page,
  .poll-page,
  .polls-page,
  .profile-subscriptions-page,
  .qna-page,
  .reaction-settings-page,
  .real-estate-detail-page,
  .real-estate-manage-page,
  .real-estate-page,
  .sitemusic-directory-page,
  .site-music-page,
  .story-views-page,
  .subscriptions-page,
  .video-channel-page,
  .video-watch-page
) :is(
  .pretty-action,
  .primary-action,
  .load-more,
  .load-more-btn,
  .view-more,
  button[type="submit"],
  .point-shop-cta-btn,
  .point-shop-card-icon,
  .point-marquee-primary,
  .points-send-top-btn,
  .points-send-form button
) {
  color: #000 !important;
}

body:is(.points-page, .points-shop-page) :is(
  .point-marquee-backdrop,
  .point-shop-insufficient-backdrop
) {
  background: var(--addon-ui-overlay) !important;
}

/* HmoobDM and chat rooms use their own late page CSS, so they get explicit theme hooks too. */
body:is(.messenger-page, .hmoobdm-page, .chat-page, .reel-page, .reels-index-page, .bookmarks-page, .saved-library-page) {
  background: var(--addon-ui-bg) !important;
  background-color: var(--addon-ui-bg) !important;
  color: var(--addon-ui-text);
}

body.messenger-page {
  --hmoobdm-page-bg-top: var(--addon-ui-bg);
  --hmoobdm-page-bg-mid: var(--addon-ui-bg);
  --hmoobdm-panel-bg: var(--addon-ui-card-solid);
  --hmoobdm-incoming-bg: var(--addon-ui-soft);
  --hmoobdm-incoming-text: var(--addon-ui-text);
  --hmoobdm-button-text: var(--addon-ui-on-accent);
}

body.messenger-page :is(
  .messenger-panel,
  .messenger-page-sidebar,
  .messenger-page-chat,
  .messenger-page-friends,
  .mp-chat-head,
  .mp-send,
  .hmoobdm-mobile-switch,
  .mp-message-actions button,
  .mp-message-reaction-flyout,
  .mp-message-reactions span
) {
  background: var(--addon-ui-card) !important;
  border-color: var(--addon-ui-line) !important;
  color: var(--addon-ui-text) !important;
}

body.messenger-page :is(
  .messenger-body,
  .messenger-page-search input,
  .messenger-page-tabs button,
  .mp-thread,
  .mp-friend,
  .mp-chat-tools button,
  .mp-chat-tools a,
  .mp-send input,
  .mp-send .mp-camera-btn,
  .mp-message > span,
  .messenger-page-empty,
  .hmoobdm-mobile-switch button
) {
  background: var(--addon-ui-soft) !important;
  border-color: var(--addon-ui-line) !important;
  color: var(--addon-ui-text) !important;
}

body.messenger-page :is(
  .hmoobdm-panel-title strong,
  .mp-thread strong,
  .mp-friend strong,
  .mp-chat-head strong,
  .messenger-page-empty strong
) {
  color: var(--addon-ui-text) !important;
}

body.messenger-page :is(
  .hmoobdm-panel-title span,
  .mp-thread small,
  .mp-friend small,
  .mp-chat-head small,
  .mp-typing,
  .messenger-page-muted,
  .messenger-page-empty
) {
  color: var(--addon-ui-muted) !important;
}

body.messenger-page :is(
  .messenger-tab,
  .messenger-page-tabs button.is-active,
  .hmoobdm-mobile-switch button.is-active,
  .hmoobdm-mobile-manage-friends,
  .mp-send button:not(.mp-camera-btn)
) {
  background: var(--addon-ui-accent) !important;
  color: var(--addon-ui-on-accent) !important;
  border-color: var(--addon-ui-accent) !important;
}

html[data-theme="high_contrast"] body.messenger-page :is(
  .messenger-tab,
  .messenger-page-tabs button.is-active,
  .hmoobdm-mobile-switch button.is-active,
  .hmoobdm-mobile-manage-friends,
  .mp-send button:not(.mp-camera-btn)
) {
  color: #000 !important;
}

body.chat-page :is(
  .chat-room-card,
  .chat-window,
  .chat-compose,
  .chat-room-sidebar,
  .chat-msg-body,
  .chat-reaction-flyout,
  .chat-user-row,
  .chat-user-actions-menu,
  .chat-create-card,
  .chat-ban-card,
  .chat-ban-row
) {
  background: var(--addon-ui-card) !important;
  border-color: var(--addon-ui-line) !important;
  color: var(--addon-ui-text) !important;
  box-shadow: var(--addon-ui-shadow);
}

body.chat-page :is(
  .chat-room-meta span,
  .chat-reaction-main,
  .chat-reaction-flyout button,
  .chat-compose textarea,
  .chat-create-card input,
  .chat-create-card textarea,
  .chat-mod-form input,
  .chat-image-preview,
  .chat-image-upload,
  .chat-user-actions-toggle,
  .chat-ban-card input[type="search"]
) {
  background: var(--addon-ui-soft) !important;
  border-color: var(--addon-ui-line) !important;
  color: var(--addon-ui-text) !important;
}

body.chat-page :is(
  .chat-room-card,
  .chat-room-card h3,
  .chat-msg-head strong,
  .chat-user-row a,
  .chat-ban-card h2,
  .chat-ban-row strong
) {
  color: var(--addon-ui-text) !important;
}

body.chat-page :is(
  .chat-room-card p,
  .chat-msg-head span,
  .chat-msg-body p,
  .chat-reaction-summary,
  .chat-user-row small,
  .chat-ban-card p,
  .chat-ban-row small,
  .chat-ban-row em
) {
  color: var(--addon-ui-muted) !important;
}

body.chat-page :is(
  .chat-primary,
  .chat-compose button,
  .chat-create-card button[type="submit"],
  .chat-banner-panel button,
  .chat-ban-load
) {
  background: var(--addon-ui-accent) !important;
  color: var(--addon-ui-on-accent) !important;
  border-color: var(--addon-ui-accent) !important;
}

html[data-theme="high_contrast"] body.chat-page :is(
  .chat-primary,
  .chat-compose button,
  .chat-create-card button[type="submit"],
  .chat-banner-panel button,
  .chat-ban-load
) {
  color: #000 !important;
}