/**
 * Community Builder (CB) integration overrides — loaded under every theme.
 *
 * CB ships its own styling AND the site's templates/justice/css/custom.css
 * applies dungeon-flavoured colours to common Bootstrap utility classes
 * (.card, .bg-light, .text-muted) AND to CB elements via #sp-component
 * scoping. Both override our theme without these guards.
 *
 * Strategy:
 *
 *   1. Drive all colours from --ottcb-* CSS variables each theme defines
 *      in its :root block. Fallbacks reproduce the dungeon default so the
 *      site still works if a theme forgets to set them.
 *
 *   2. Every selector is prefixed with `body[data-otttheme]` to push
 *      specificity to (0,1,X,Y) which beats `#sp-component .X` rules at
 *      (0,1,1,0) in custom.css. The `[data-otttheme]` matches any theme
 *      including dungeon — for dungeon the fallback values apply so the
 *      effect is identical to custom.css.
 *
 *   3. Selectors target the ACTUAL classes used in the rendered CB DOM
 *      (`.activityContainer`, `.streamItem`, `.activityStream`, plus the
 *      Bootstrap utility classes `.bg-light`, `.card`, `.list-group-item`
 *      that custom.css forces to dungeon dark) — not the older `.cbActivity`
 *      family which doesn't appear in the current CB output.
 */

/* === Top toolbar: EDIT | CONNECTIONS, envelope, globe === */
body[data-otttheme] .cbCanvasLayoutTop,
body[data-otttheme] .cb-page-header {
    background: var(--ottcb-chrome-bg, #0f0d0b) !important;
    color: var(--ottcb-chrome-text, #c9b896) !important;
    border-bottom: 1px solid var(--ottcb-divider, rgba(184, 115, 51, 0.3)) !important;
}
body[data-otttheme] .cbCanvasLayoutTop a,
body[data-otttheme] .cbCanvasLayoutTop a *,
body[data-otttheme] .cbCanvasLayoutTop .cbNavBarLink,
body[data-otttheme] .cb-page-header a,
body[data-otttheme] .cb-page-header * { color: var(--ottcb-chrome-text, #c9b896) !important; }
body[data-otttheme] .cbCanvasLayoutTop a:hover,
body[data-otttheme] .cb-page-header a:hover { color: var(--ottcb-accent, #d49656) !important; }

/* === Counters strip: "X CONNECTIONS X VIEWS X PHOTOS X GROUPS" ===
 *
 * The strip uses Bootstrap's `.text-muted` which custom.css force-paints
 * `rgba(201, 184, 150, 0.7) !important` via `#sp-component .text-muted`
 * (specificity 0,1,1,0). We beat that with body[data-otttheme] prefix
 * (specificity 0,1,2,1) and re-set opacity:1 since the Bootstrap default
 * is dim-on-purpose. */
body[data-otttheme] #sp-component .text-muted,
body[data-otttheme] .cbCanvasLayoutCounters,
body[data-otttheme] .cbCanvasLayoutCounters *,
body[data-otttheme] .cbPosCanvasStats,
body[data-otttheme] .cbPosCanvasStats *,
body[data-otttheme] .cbft_counter,
body[data-otttheme] .cbft_counter * {
    color: var(--ottcb-text, #c9b896) !important;
    opacity: 1 !important;
}
body[data-otttheme] .cbCanvasLayoutCounters,
body[data-otttheme] .cbPosCanvasStats {
    background: var(--ottcb-bg, #15110d) !important;
    border-top: 1px solid var(--ottcb-divider, rgba(184, 115, 51, 0.25)) !important;
}

/* === Profile title strip (the "DFT" name bar) ===
 *
 * The title element sits inside a Bootstrap grid column that's
 * positioned OVER the user's banner image. Without an opaque bg
 * the banner bleeds through and the text becomes hard to read.
 * Use explicit background-color (not the shorthand) so we don't
 * unintentionally clear the background-image with `background:
 * <color>`. */
body[data-otttheme] .cbCanvasLayoutTitle,
body[data-otttheme] .cbPosCanvasTitle,
body[data-otttheme] .cbProfileTitle {
    background-color: var(--ottcb-title-bg, #1a1612) !important;
    background-image: none !important;
    color: var(--ottcb-title-text, #ffffff) !important;
}
body[data-otttheme] .cbCanvasLayoutTitle * { color: var(--ottcb-title-text, #ffffff) !important; }

/* === Main content + activity stream containers ===
 *
 * `.cbCanvasLayoutBody` ALSO has class `.card-body`. Bootstrap
 * doesn't set a background on .card-body by default, but the
 * combination with the `.card` rule in custom.css (or somewhere in
 * the CB cascade) appears to be the source of the leak. Crank
 * specificity high enough to be unambiguous AND target the combined
 * class explicitly. */
body[data-otttheme] .cbCanvasLayoutContent,
body[data-otttheme] .cbCanvasLayoutBody,
body[data-otttheme] .cbCanvasLayoutBody.card-body,
body[data-otttheme] div.card-body.cbCanvasLayoutBody,
body[data-otttheme] .cbAjaxContainer,
body[data-otttheme] .activityStream,
body[data-otttheme] .streamContainer,
body[data-otttheme] .streamBind {
    background: var(--ottcb-bg, #15110d) !important;
    background-color: var(--ottcb-bg, #15110d) !important;
    color: var(--ottcb-text, #c9b896) !important;
}

/* === Bootstrap utility-class overrides INSIDE the CB widget. ===
 *
 * custom.css forces `.bg-light, .card, .list-group, .list-group-item,
 * .dropdown-menu` to `#15110d !important`. The site uses these inside
 * CB activity stream items (each item has `.bg-light` somewhere). We
 * need to repoint them to the active theme's `--ottcb-bg` colour. */
body[data-otttheme] #sp-component .bg-light,
body[data-otttheme] #sp-component .bg-light-subtle,
body[data-otttheme] #sp-component .bg-secondary-subtle,
body[data-otttheme] #sp-component .card,
body[data-otttheme] #sp-component .list-group,
body[data-otttheme] #sp-component .list-group-item,
body[data-otttheme] #sp-component .dropdown-menu,
body[data-otttheme] .activityContainer,
body[data-otttheme] .activityContainerNew,
body[data-otttheme] .streamItem,
body[data-otttheme] .streamItem.activityContainer,
body[data-otttheme] .activityContainerFooter {
    background-color: var(--ottcb-bg, #15110d) !important;
    color: var(--ottcb-text, #c9b896) !important;
}

/* Activity item links + headings */
body[data-otttheme] .activityContainer a,
body[data-otttheme] .activityContainer h1,
body[data-otttheme] .activityContainer h2,
body[data-otttheme] .activityContainer h3,
body[data-otttheme] .activityContainer h4,
body[data-otttheme] .activityContainer h5,
body[data-otttheme] .activityContainer h6,
body[data-otttheme] .activityContainer .cbReadMore,
body[data-otttheme] .streamItem a,
body[data-otttheme] .activityStream a {
    color: var(--ottcb-accent, #d49656) !important;
}
body[data-otttheme] .activityContainer a:hover,
body[data-otttheme] .streamItem a:hover { color: var(--ottcb-accent-strong, #ff8c44) !important; }

/* Activity item BODY text — paragraphs and spans inside the article card.
 * Re-set explicitly because custom.css's `#sp-component .text-muted` rule
 * leaks into descendant <small> elements that CB uses for timestamps and
 * meta info. */
body[data-otttheme] .activityContainer p,
body[data-otttheme] .activityContainer li,
body[data-otttheme] .activityContainer span,
body[data-otttheme] .activityContainer div,
body[data-otttheme] .activityContainer small {
    color: var(--ottcb-text, #c9b896) !important;
}

/* === Tabs row (Activity / About / Connections / Gallery / Groups) === */
body[data-otttheme] .cbCanvasLayoutMenu,
body[data-otttheme] .cbTabsNav,
body[data-otttheme] .cbNavBar,
body[data-otttheme] .cbTabsMenu,
body[data-otttheme] .cbSubMenu {
    background: var(--ottcb-chrome-bg, #0f0d0b) !important;
    border-bottom: 1px solid var(--ottcb-divider, rgba(184, 115, 51, 0.25)) !important;
}
body[data-otttheme] .cbCanvasLayoutMenu a,
body[data-otttheme] .cbTabsNav a,
body[data-otttheme] .cbNavBarLink,
body[data-otttheme] .cbTabsMenu a { color: var(--ottcb-chrome-text, #c9b896) !important; }
body[data-otttheme] .cbCanvasLayoutMenu a:hover,
body[data-otttheme] .cbTabsNav a:hover,
body[data-otttheme] .cbNavBarLink:hover,
body[data-otttheme] .cbCanvasLayoutMenu a.active,
body[data-otttheme] .cbNavBarItem.active .cbNavBarLink { color: var(--ottcb-accent, #d49656) !important; }

/* === Bootstrap alerts (.alert-warning, .alert-info, etc.) ===
 *
 * custom.css paints ALL alerts dungeon-dark with bronze text. Forms
 * (Apply, Safety Report) use .alert-warning to show notices; in a
 * light theme that dark box looks completely off-palette. */
body[data-otttheme] .alert,
body[data-otttheme] .alert-info,
body[data-otttheme] .alert-warning,
body[data-otttheme] .alert-success,
body[data-otttheme] .alert-light,
body[data-otttheme] .alert-secondary,
body[data-otttheme] .alert-primary,
body[data-otttheme] .alert-danger {
    background-color: var(--ottcb-input-bg, rgba(184, 115, 51, 0.1)) !important;
    background-image: none !important;
    border: 1px solid var(--ottcb-divider, rgba(184, 115, 51, 0.4)) !important;
    border-left-width: 3px !important;
    border-left-color: var(--ottcb-accent, #b87333) !important;
    color: var(--ottcb-text, #c9b896) !important;
}
body[data-otttheme] .alert *,
body[data-otttheme] .alert-info *,
body[data-otttheme] .alert-warning *,
body[data-otttheme] .alert-success *,
body[data-otttheme] .alert-light *,
body[data-otttheme] .alert-secondary *,
body[data-otttheme] .alert-primary *,
body[data-otttheme] .alert-danger * { color: inherit !important; }

/* === HTML5 <details>/<summary> — YNM uses these for collapsible
 * activity sections (.ynm-category-details, .ynm-category-summary).
 * Custom.css forces dungeon-dark, leaks into every theme. */
body[data-otttheme] details,
body[data-otttheme] .ynm-category-details {
    background-color: var(--ottcb-bg, #15110d) !important;
    border: 1px solid var(--ottcb-divider, rgba(184, 115, 51, 0.25)) !important;
    color: var(--ottcb-text, #c9b896) !important;
}
body[data-otttheme] summary,
body[data-otttheme] .ynm-category-summary {
    background-color: var(--ottcb-chrome-bg, rgba(184, 115, 51, 0.08)) !important;
    color: var(--ottcb-chrome-text, #c9b896) !important;
}
/* Items INSIDE the chrome-colored summary bar (the category header)
 * need chrome text colour, not body text colour — the parent bg is
 * the chrome dark, so body text would be dark-on-dark. */
body[data-otttheme] .ynm-category-summary,
body[data-otttheme] .ynm-category-summary *,
body[data-otttheme] .ynm-category-title,
body[data-otttheme] .ynm-category-progress { color: var(--ottcb-chrome-text, #c9b896) !important; }

/* The .ynm-item card itself sits on the body bg so it gets the body
 * colour (light card in light theme, dark in dark themes). yesnomaybe.css
 * forces it to var(--ynm-surface) which resolves to dungeon dark; we
 * need to override BOTH background and colour, not just colour. */
body[data-otttheme] .ynm-item,
body[data-otttheme] .ynm-item-head,
body[data-otttheme] .ynm-item-desc {
    background-color: var(--ottcb-bg, #15110d) !important;
    border-color: var(--ottcb-divider, rgba(184, 115, 51, 0.25)) !important;
    color: var(--ottcb-text, #c9b896) !important;
}
body[data-otttheme] .ynm-item *,
body[data-otttheme] .ynm-item-title,
body[data-otttheme] .ynm-item-desc,
body[data-otttheme] .ynm-item-head,
body[data-otttheme] .ynm-dim-label,
body[data-otttheme] .ynm-dim,
body[data-otttheme] .ynm-dimension { color: var(--ottcb-text, #c9b896) !important; }

/* === YNM-specific containers that come pre-tinted dark ===
 *
 * custom.css line 1228-1240 has:
 *   `#sp-component [class*="filter-"], [class*="stance-"], [class*="-banner"]`
 * at specificity (0,1,2,0). That `[class*="filter-"]` happily matches
 * `.ynm-tag-filter-bar`, `.ynm-current-stance`, `.ynm-unsaved-banner`,
 * etc., painting them all dungeon-dark.
 *
 * Beat by mirroring `#sp-component` in our selector and adding
 * `body[data-otttheme]` for the extra class spec → (0,1,3,1). */
body[data-otttheme] #sp-component .ynm-tag-filter-bar,
body[data-otttheme] #sp-component .ynm-current-stance,
body[data-otttheme] #sp-component .ynm-expand-controls,
body[data-otttheme] #sp-component .ynm-unsaved-banner,
body[data-otttheme] #sp-component .ynm-list-search,
body[data-otttheme] #sp-component .ynm-wrap,
body[data-otttheme] #sp-component .ynm-tag-filter-label,
body[data-otttheme] #sp-component .ynm-tag-filter-active-label,
body[data-otttheme] #sp-component .ynm-tag-filter-browse-link,
body[data-otttheme] #sp-component [class*="ynm-tag-filter"],
body[data-otttheme] #sp-component [class*="ynm-filter-"],
body[data-otttheme] #sp-component [class*="ynm-stance-"],
body[data-otttheme] #sp-component [class*="ynm-banner"] {
    background-color: var(--ottcb-input-bg, transparent) !important;
    border-color: var(--ottcb-divider, rgba(184, 115, 51, 0.3)) !important;
    color: var(--ottcb-text, #c9b896) !important;
}
/* The outer .ynm-tag-filter-bar gets the accent left-border treatment;
 * inner elements don't need it (would look like nested boxes). */
body[data-otttheme] #sp-component .ynm-tag-filter-bar,
body[data-otttheme] #sp-component .ynm-current-stance {
    border-left-color: var(--ottcb-accent, #b87333) !important;
    border-left-width: 3px !important;
}
body[data-otttheme] #sp-component .ynm-tag-filter-bar *,
body[data-otttheme] #sp-component .ynm-current-stance *,
body[data-otttheme] #sp-component .ynm-expand-controls * { color: inherit !important; }

/* The select dropdown specifically — it's `.ynm-tag-filter-select` which is
 * a <select> element AND has the filter- class chain, so the broader form
 * input rule above sets bg but we also want consistent border/styling. */
body[data-otttheme] #sp-component .ynm-tag-filter-select {
    background-color: var(--ottcb-input-bg, #ffffff) !important;
    color: var(--ottcb-text, #1a1a1a) !important;
    border-color: var(--ottcb-divider, rgba(184, 115, 51, 0.4)) !important;
}

/* YNM tab nav (Popular / Lists / Mine / Profile / Snapshots / etc.) */
body[data-otttheme] .ynm-tabnav a,
body[data-otttheme] .ynm-tabnav button,
body[data-otttheme] .ynm-tabs a,
body[data-otttheme] .nav-tabs a:not(.active),
body[data-otttheme] .nav-pills a:not(.active) {
    color: var(--ottcb-text, #c9b896) !important;
}
body[data-otttheme] .ynm-tabs a.active,
body[data-otttheme] .nav-tabs a.active,
body[data-otttheme] .nav-pills a.active {
    color: var(--ottcb-accent, #d49656) !important;
}

/* === com_ottquest (Quest / playthrough component) — theme retint ===
 *
 * com_ottquest ships with an intentional 80s terminal aesthetic
 * (phosphor green on dark, monospace font). Its colours live on
 * `.ottquest-shell` as custom properties (--ott-bg, --ott-fg,
 * --ott-accent, --ott-accent-warm, --ott-muted, --ott-rule,
 * --ott-link). We don't touch the component's CSS file (it's still
 * under active development in a parallel session) — instead we
 * override the variables per theme via higher-specificity rules.
 *
 * The terminal STRUCTURE (monospace, card-in-page layout) is
 * preserved; only the palette flips to match each theme. For dark-
 * bodied themes (OLED / leather / highcontrast) the terminal look
 * naturally fits. For light-bodied themes the "terminal" reads more
 * as a hi-contrast content card.
 *
 * Specificity: `body[data-otttheme="X"] .ottquest-shell` = (0,0,2,1)
 * beats the component's `.ottquest-shell` definition at (0,0,1,0). */

body[data-otttheme="light"] .ottquest-shell {
    --ott-bg:          #fafafe;
    --ott-bg-soft:     #f0e8f5;
    --ott-fg:          #0d0d12;
    --ott-accent:      #ff006e;   /* light theme magenta */
    --ott-accent-warm: #00d4ff;   /* light theme cyan */
    --ott-muted:       #8338ec;   /* light theme violet */
    --ott-rule:        rgba(131, 56, 236, 0.25);
    --ott-link:        #ff006e;
}

body[data-otttheme="sepia"] .ottquest-shell {
    --ott-bg:          #f5e9c8;
    --ott-bg-soft:     #e8d8a8;
    --ott-fg:          #3a2818;
    --ott-accent:      #8b4513;   /* sepia copper */
    --ott-accent-warm: #a0571b;
    --ott-muted:       #6b5840;
    --ott-rule:        rgba(139, 69, 19, 0.3);
    --ott-link:        #8b4513;
}

body[data-otttheme="oled"] .ottquest-shell {
    --ott-bg:          #000000;
    --ott-bg-soft:     #0a0a0a;
    --ott-fg:          #d9d2c4;
    --ott-accent:      #d49656;   /* oled bronze */
    --ott-accent-warm: #e8b878;
    --ott-muted:       #888888;
    --ott-rule:        rgba(212, 150, 86, 0.3);
    --ott-link:        #d49656;
}

body[data-otttheme="highcontrast"] .ottquest-shell {
    --ott-bg:          #000000;
    --ott-bg-soft:     #111111;
    --ott-fg:          #ffffff;
    --ott-accent:      #ffeb3b;   /* yellow */
    --ott-accent-warm: #ffd600;
    --ott-muted:       #aaaaaa;
    --ott-rule:        #ffeb3b;
    --ott-link:        #ffeb3b;
}

body[data-otttheme="leather"] .ottquest-shell {
    --ott-bg:          #1a1a1a;
    --ott-bg-soft:     #0d0d0d;
    --ott-fg:          #e8e8e8;
    --ott-accent:      #dd0000;   /* heart red */
    --ott-accent-warm: #003581;   /* royal blue */
    --ott-muted:       #888888;
    --ott-rule:        rgba(221, 0, 0, 0.3);
    --ott-link:        #dd0000;
}

body[data-otttheme="pride"] .ottquest-shell {
    --ott-bg:          #ffffff;
    --ott-bg-soft:     #f8f0ff;
    --ott-fg:          #1a1a1a;
    --ott-accent:      #750787;   /* violet */
    --ott-accent-warm: #e40303;   /* red */
    --ott-muted:       #6e7681;
    --ott-rule:        rgba(117, 7, 135, 0.3);
    --ott-link:        #750787;
}

body[data-otttheme="trans"] .ottquest-shell {
    --ott-bg:          #fafdff;
    --ott-bg-soft:     #e8f4f8;
    --ott-fg:          #1a2a4a;
    --ott-accent:      #c46d80;   /* trans pink */
    --ott-accent-warm: #5bcefa;   /* trans blue */
    --ott-muted:       #6e7681;
    --ott-rule:        rgba(245, 169, 184, 0.4);
    --ott-link:        #c46d80;
}

body[data-otttheme="bi"] .ottquest-shell {
    --ott-bg:          #f8f6fb;
    --ott-bg-soft:     #ede5f3;
    --ott-fg:          #1a1233;
    --ott-accent:      #d60270;   /* bi magenta */
    --ott-accent-warm: #0038a8;   /* bi blue */
    --ott-muted:       #6e7681;
    --ott-rule:        rgba(214, 2, 112, 0.3);
    --ott-link:        #d60270;
}

body[data-otttheme="pan"] .ottquest-shell {
    --ott-bg:          #fbfdff;
    --ott-bg-soft:     #e0f0fc;
    --ott-fg:          #1a1a3a;
    --ott-accent:      #ff218c;   /* pan pink */
    --ott-accent-warm: #ffd800;   /* pan yellow */
    --ott-muted:       #6e7681;
    --ott-rule:        rgba(255, 33, 140, 0.3);
    --ott-link:        #ff218c;
}

body[data-otttheme="nb"] .ottquest-shell {
    --ott-bg:          #fcfbff;
    --ott-bg-soft:     #f0e8fc;
    --ott-fg:          #1a1a1a;
    --ott-accent:      #9c59d1;   /* nb purple */
    --ott-accent-warm: #fff430;   /* nb yellow */
    --ott-muted:       #6e7681;
    --ott-rule:        rgba(156, 89, 209, 0.3);
    --ott-link:        #9c59d1;
}

body[data-otttheme="ace"] .ottquest-shell {
    --ott-bg:          #fafafa;
    --ott-bg-soft:     #efefef;
    --ott-fg:          #1a1a1a;
    --ott-accent:      #810081;   /* ace purple */
    --ott-accent-warm: #a4a4a4;   /* ace gray */
    --ott-muted:       #6e7681;
    --ott-rule:        rgba(129, 0, 129, 0.3);
    --ott-link:        #810081;
}

/* === Form inputs + labels across the WHOLE site ===
 *
 * custom.css also paints standard Bootstrap-style form elements (inputs,
 * labels, helper text) with dungeon-bronze (#c9b896) on dark #15110d.
 * That looks fine in dungeon but leaks through every other theme on
 * pages that have forms (Apply, Safety Report, Contact, etc.) — labels
 * become unreadable bronze on white, inputs become dark-on-dark.
 *
 * The selectors below mirror the same `:not()` pattern custom.css uses
 * so we beat it on specificity AND have `body[data-otttheme]` to make
 * the override only apply to themed pages. */

/* Labels + helper text — drive off the theme's content text colour */
body[data-otttheme] label,
body[data-otttheme] .form-label,
body[data-otttheme] dt,
body[data-otttheme] dd,
body[data-otttheme] .form-text,
body[data-otttheme] .form-check-label,
body[data-otttheme] legend,
body[data-otttheme] .col-form-label {
    color: var(--ottcb-text, #c9b896) !important;
}

/* Generic input fields — match the same not()-chain custom.css uses so
 * specificity ends up (0,0,4,1) which beats (0,0,3,0). */
body[data-otttheme] input:not([type="submit"]):not([type="button"]):not(.btn):not([class*="btn-"]),
body[data-otttheme] textarea,
body[data-otttheme] select,
body[data-otttheme] .form-control:not(.btn):not([class*="btn-"]),
body[data-otttheme] .form-select:not(.btn):not([class*="btn-"]),
body[data-otttheme] select.form-control:not(.btn):not([class*="btn-"]),
body[data-otttheme] textarea.form-control:not(.btn):not([class*="btn-"]) {
    background-color: var(--ottcb-input-bg, rgba(255,255,255,0.04)) !important;
    color: var(--ottcb-text, #c9b896) !important;
    border-color: var(--ottcb-divider, rgba(184, 115, 51, 0.35)) !important;
}
body[data-otttheme] input:not([type="submit"]):not([type="button"]):not(.btn):not([class*="btn-"])::placeholder,
body[data-otttheme] textarea::placeholder,
body[data-otttheme] .form-control:not(.btn):not([class*="btn-"])::placeholder {
    color: var(--ottcb-placeholder, rgba(201, 184, 150, 0.55)) !important;
    opacity: 1 !important;
}

/* Helper / muted text inside forms — `.text-muted`, `.text-body-tertiary`
 * and `small` get force-coloured by custom.css's `body, p, li, …` rule.
 * Re-point to the theme's text colour with reduced opacity for "muted"
 * effect that scales to each palette. */
body[data-otttheme] .form-text.text-muted,
body[data-otttheme] form .text-muted,
body[data-otttheme] form small,
body[data-otttheme] form .small {
    color: var(--ottcb-text, #c9b896) !important;
    opacity: 0.75 !important;
}

/* === "What's on your mind?" composer + any CB form input === */
body[data-otttheme] .activityContainerForm input[type="text"],
body[data-otttheme] .activityContainerForm textarea,
body[data-otttheme] .activityContainerForm .form-control,
body[data-otttheme] .cbCanvasLayoutBody input[type="text"],
body[data-otttheme] .cbCanvasLayoutBody textarea {
    background-color: var(--ottcb-input-bg, rgba(255, 255, 255, 0.04)) !important;
    color: var(--ottcb-text, #c9b896) !important;
    border-color: var(--ottcb-divider, rgba(184, 115, 51, 0.35)) !important;
}
body[data-otttheme] .activityContainerForm input::placeholder,
body[data-otttheme] .activityContainerForm textarea::placeholder {
    color: var(--ottcb-placeholder, rgba(201, 184, 150, 0.55)) !important;
}

/* === YNM rating + future-potential chips ===
 *
 * yesnomaybe.css line 3722 has a `body.helix-ultimate, body.justice, ...`
 * dark-redesign block that re-paints `.ynm-rate-1..7` and `.ynm-fp-1..7`
 * with muted dark backgrounds + bright text. That works great for
 * dark-bodied themes (oled, leather, highcontrast) but produces
 * jarring dark chips on light bodies (light, sepia, pride, trans, bi,
 * pan, nb, ace) — and on some of those, the text becomes hard to
 * read because the chip colors are tuned for a dark page surround.
 *
 * Restore the original light-mode pastel scheme for light-bodied
 * themes. Each chip's color pair is intentionally chosen for
 * ≥4.5:1 contrast (bg vs text); copied from the base CSS at
 * yesnomaybe.css lines 326–341. */
body[data-otttheme="light"] .ynm-rate-1,
body[data-otttheme="sepia"] .ynm-rate-1,
body[data-otttheme="pride"] .ynm-rate-1,
body[data-otttheme="trans"] .ynm-rate-1,
body[data-otttheme="bi"] .ynm-rate-1,
body[data-otttheme="pan"] .ynm-rate-1,
body[data-otttheme="nb"] .ynm-rate-1,
body[data-otttheme="ace"] .ynm-rate-1 { background: #ececec !important; color: #555 !important; border-color: #ccc !important; }
body[data-otttheme="light"] .ynm-rate-2,
body[data-otttheme="sepia"] .ynm-rate-2,
body[data-otttheme="pride"] .ynm-rate-2,
body[data-otttheme="trans"] .ynm-rate-2,
body[data-otttheme="bi"] .ynm-rate-2,
body[data-otttheme="pan"] .ynm-rate-2,
body[data-otttheme="nb"] .ynm-rate-2,
body[data-otttheme="ace"] .ynm-rate-2 { background: #e8e0f0 !important; color: #4a3a6c !important; border-color: #b8a8d0 !important; }
body[data-otttheme="light"] .ynm-rate-3,
body[data-otttheme="sepia"] .ynm-rate-3,
body[data-otttheme="pride"] .ynm-rate-3,
body[data-otttheme="trans"] .ynm-rate-3,
body[data-otttheme="bi"] .ynm-rate-3,
body[data-otttheme="pan"] .ynm-rate-3,
body[data-otttheme="nb"] .ynm-rate-3,
body[data-otttheme="ace"] .ynm-rate-3 { background: #f7d6d6 !important; color: #7a1a1a !important; border-color: #d99090 !important; }
body[data-otttheme="light"] .ynm-rate-4,
body[data-otttheme="sepia"] .ynm-rate-4,
body[data-otttheme="pride"] .ynm-rate-4,
body[data-otttheme="trans"] .ynm-rate-4,
body[data-otttheme="bi"] .ynm-rate-4,
body[data-otttheme="pan"] .ynm-rate-4,
body[data-otttheme="nb"] .ynm-rate-4,
body[data-otttheme="ace"] .ynm-rate-4 { background: #fde2cf !important; color: #7a3915 !important; border-color: #e6a878 !important; }
body[data-otttheme="light"] .ynm-rate-5,
body[data-otttheme="sepia"] .ynm-rate-5,
body[data-otttheme="pride"] .ynm-rate-5,
body[data-otttheme="trans"] .ynm-rate-5,
body[data-otttheme="bi"] .ynm-rate-5,
body[data-otttheme="pan"] .ynm-rate-5,
body[data-otttheme="nb"] .ynm-rate-5,
body[data-otttheme="ace"] .ynm-rate-5 { background: #fef3c7 !important; color: #7a5b15 !important; border-color: #e6c878 !important; }
body[data-otttheme="light"] .ynm-rate-6,
body[data-otttheme="sepia"] .ynm-rate-6,
body[data-otttheme="pride"] .ynm-rate-6,
body[data-otttheme="trans"] .ynm-rate-6,
body[data-otttheme="bi"] .ynm-rate-6,
body[data-otttheme="pan"] .ynm-rate-6,
body[data-otttheme="nb"] .ynm-rate-6,
body[data-otttheme="ace"] .ynm-rate-6 { background: #d8eecb !important; color: #2f5a1c !important; border-color: #95c578 !important; }
body[data-otttheme="light"] .ynm-rate-7,
body[data-otttheme="sepia"] .ynm-rate-7,
body[data-otttheme="pride"] .ynm-rate-7,
body[data-otttheme="trans"] .ynm-rate-7,
body[data-otttheme="bi"] .ynm-rate-7,
body[data-otttheme="pan"] .ynm-rate-7,
body[data-otttheme="nb"] .ynm-rate-7,
body[data-otttheme="ace"] .ynm-rate-7 { background: #b5dfa8 !important; color: #214a14 !important; border-color: #6cb04e !important; }

body[data-otttheme="light"] .ynm-fp-1,
body[data-otttheme="sepia"] .ynm-fp-1,
body[data-otttheme="pride"] .ynm-fp-1,
body[data-otttheme="trans"] .ynm-fp-1,
body[data-otttheme="bi"] .ynm-fp-1,
body[data-otttheme="pan"] .ynm-fp-1,
body[data-otttheme="nb"] .ynm-fp-1,
body[data-otttheme="ace"] .ynm-fp-1 { background: #c92a2a !important; color: #fff !important; border-color: #921818 !important; }
body[data-otttheme="light"] .ynm-fp-2,
body[data-otttheme="sepia"] .ynm-fp-2,
body[data-otttheme="pride"] .ynm-fp-2,
body[data-otttheme="trans"] .ynm-fp-2,
body[data-otttheme="bi"] .ynm-fp-2,
body[data-otttheme="pan"] .ynm-fp-2,
body[data-otttheme="nb"] .ynm-fp-2,
body[data-otttheme="ace"] .ynm-fp-2 { background: #f4a3a3 !important; color: #6a1414 !important; border-color: #d97474 !important; }
body[data-otttheme="light"] .ynm-fp-3,
body[data-otttheme="sepia"] .ynm-fp-3,
body[data-otttheme="pride"] .ynm-fp-3,
body[data-otttheme="trans"] .ynm-fp-3,
body[data-otttheme="bi"] .ynm-fp-3,
body[data-otttheme="pan"] .ynm-fp-3,
body[data-otttheme="nb"] .ynm-fp-3,
body[data-otttheme="ace"] .ynm-fp-3 { background: #fcd1aa !important; color: #6a3914 !important; border-color: #e6a878 !important; }
body[data-otttheme="light"] .ynm-fp-4,
body[data-otttheme="sepia"] .ynm-fp-4,
body[data-otttheme="pride"] .ynm-fp-4,
body[data-otttheme="trans"] .ynm-fp-4,
body[data-otttheme="bi"] .ynm-fp-4,
body[data-otttheme="pan"] .ynm-fp-4,
body[data-otttheme="nb"] .ynm-fp-4,
body[data-otttheme="ace"] .ynm-fp-4 { background: #fef3c7 !important; color: #7a5b15 !important; border-color: #e6c878 !important; }
body[data-otttheme="light"] .ynm-fp-5,
body[data-otttheme="sepia"] .ynm-fp-5,
body[data-otttheme="pride"] .ynm-fp-5,
body[data-otttheme="trans"] .ynm-fp-5,
body[data-otttheme="bi"] .ynm-fp-5,
body[data-otttheme="pan"] .ynm-fp-5,
body[data-otttheme="nb"] .ynm-fp-5,
body[data-otttheme="ace"] .ynm-fp-5 { background: #c9e6b8 !important; color: #2f5a1c !important; border-color: #95c578 !important; }
body[data-otttheme="light"] .ynm-fp-6,
body[data-otttheme="sepia"] .ynm-fp-6,
body[data-otttheme="pride"] .ynm-fp-6,
body[data-otttheme="trans"] .ynm-fp-6,
body[data-otttheme="bi"] .ynm-fp-6,
body[data-otttheme="pan"] .ynm-fp-6,
body[data-otttheme="nb"] .ynm-fp-6,
body[data-otttheme="ace"] .ynm-fp-6 { background: #7fc66a !important; color: #16401a !important; border-color: #4f9e3a !important; }
body[data-otttheme="light"] .ynm-fp-7,
body[data-otttheme="sepia"] .ynm-fp-7,
body[data-otttheme="pride"] .ynm-fp-7,
body[data-otttheme="trans"] .ynm-fp-7,
body[data-otttheme="bi"] .ynm-fp-7,
body[data-otttheme="pan"] .ynm-fp-7,
body[data-otttheme="nb"] .ynm-fp-7,
body[data-otttheme="ace"] .ynm-fp-7 { background: #2f7a14 !important; color: #fff !important; border-color: #1f5a0a !important; }

/* The chip's inner spans (.ynm-rating-num, .ynm-rating-label) get
 * `color: inherit !important` in yesnomaybe.css's dark block — which
 * was correct there. We need to ensure they keep inheriting after
 * our override flips the chip color. */
/* === Helping-hand check pills, radio-clear button, and comment/note
 * toggle bars: same pattern as the rating chips. yesnomaybe.css has
 * a dark-theme block (lines 3640+, 3126+) that paints them dungeon
 * dark. For light-bodied themes restore the original light defaults
 * so they look like proper light-card UI. */

/* Helping-hand check boxes — light bg + dark text */
body[data-otttheme="light"] .ynm-hh-check,
body[data-otttheme="sepia"] .ynm-hh-check,
body[data-otttheme="pride"] .ynm-hh-check,
body[data-otttheme="trans"] .ynm-hh-check,
body[data-otttheme="bi"] .ynm-hh-check,
body[data-otttheme="pan"] .ynm-hh-check,
body[data-otttheme="nb"] .ynm-hh-check,
body[data-otttheme="ace"] .ynm-hh-check {
    background: #fafafa !important;
    border-color: #ccc !important;
    color: #1a1a1a !important;
}
body[data-otttheme="light"] .ynm-hh-check .ynm-hh-label,
body[data-otttheme="sepia"] .ynm-hh-check .ynm-hh-label,
body[data-otttheme="pride"] .ynm-hh-check .ynm-hh-label,
body[data-otttheme="trans"] .ynm-hh-check .ynm-hh-label,
body[data-otttheme="bi"] .ynm-hh-check .ynm-hh-label,
body[data-otttheme="pan"] .ynm-hh-check .ynm-hh-label,
body[data-otttheme="nb"] .ynm-hh-check .ynm-hh-label,
body[data-otttheme="ace"] .ynm-hh-check .ynm-hh-label { color: #1a1a1a !important; }
body[data-otttheme="light"] .ynm-hh-check .ynm-hh-explain,
body[data-otttheme="sepia"] .ynm-hh-check .ynm-hh-explain,
body[data-otttheme="pride"] .ynm-hh-check .ynm-hh-explain,
body[data-otttheme="trans"] .ynm-hh-check .ynm-hh-explain,
body[data-otttheme="bi"] .ynm-hh-check .ynm-hh-explain,
body[data-otttheme="pan"] .ynm-hh-check .ynm-hh-explain,
body[data-otttheme="nb"] .ynm-hh-check .ynm-hh-explain,
body[data-otttheme="ace"] .ynm-hh-check .ynm-hh-explain { color: #555 !important; }
body[data-otttheme="light"] .ynm-hh-check-scared:has(input:checked),
body[data-otttheme="sepia"] .ynm-hh-check-scared:has(input:checked),
body[data-otttheme="pride"] .ynm-hh-check-scared:has(input:checked),
body[data-otttheme="trans"] .ynm-hh-check-scared:has(input:checked),
body[data-otttheme="bi"] .ynm-hh-check-scared:has(input:checked),
body[data-otttheme="pan"] .ynm-hh-check-scared:has(input:checked),
body[data-otttheme="nb"] .ynm-hh-check-scared:has(input:checked),
body[data-otttheme="ace"] .ynm-hh-check-scared:has(input:checked) { border-color: #b07a14 !important; background: #fdf6dc !important; }
body[data-otttheme="light"] .ynm-hh-check-forced:has(input:checked),
body[data-otttheme="sepia"] .ynm-hh-check-forced:has(input:checked),
body[data-otttheme="pride"] .ynm-hh-check-forced:has(input:checked),
body[data-otttheme="trans"] .ynm-hh-check-forced:has(input:checked),
body[data-otttheme="bi"] .ynm-hh-check-forced:has(input:checked),
body[data-otttheme="pan"] .ynm-hh-check-forced:has(input:checked),
body[data-otttheme="nb"] .ynm-hh-check-forced:has(input:checked),
body[data-otttheme="ace"] .ynm-hh-check-forced:has(input:checked) { border-color: #ad3d6b !important; background: #fde6ef !important; }

/* The "Clear" pill at the end of each rating row */
body[data-otttheme="light"] .ynm-radio-clear,
body[data-otttheme="sepia"] .ynm-radio-clear,
body[data-otttheme="pride"] .ynm-radio-clear,
body[data-otttheme="trans"] .ynm-radio-clear,
body[data-otttheme="bi"] .ynm-radio-clear,
body[data-otttheme="pan"] .ynm-radio-clear,
body[data-otttheme="nb"] .ynm-radio-clear,
body[data-otttheme="ace"] .ynm-radio-clear { background: #fff !important; color: #555 !important; border-color: #ccc !important; }

/* Shared-comment + Private-note + Description disclosure toggles.
 * These are <details> with .ynm-comments-toggle / .ynm-notes-toggle /
 * .ynm-desc-toggle. The earlier `body[data-otttheme] summary` rule
 * paints them chrome-dark; override here for light themes so the
 * disclosure bar matches the white card it lives in, and use the
 * accent colour for the clickable summary text. */
body[data-otttheme="light"] .ynm-comments-toggle,
body[data-otttheme="sepia"] .ynm-comments-toggle,
body[data-otttheme="pride"] .ynm-comments-toggle,
body[data-otttheme="trans"] .ynm-comments-toggle,
body[data-otttheme="bi"] .ynm-comments-toggle,
body[data-otttheme="pan"] .ynm-comments-toggle,
body[data-otttheme="nb"] .ynm-comments-toggle,
body[data-otttheme="ace"] .ynm-comments-toggle,
body[data-otttheme="light"] .ynm-notes-toggle,
body[data-otttheme="sepia"] .ynm-notes-toggle,
body[data-otttheme="pride"] .ynm-notes-toggle,
body[data-otttheme="trans"] .ynm-notes-toggle,
body[data-otttheme="bi"] .ynm-notes-toggle,
body[data-otttheme="pan"] .ynm-notes-toggle,
body[data-otttheme="nb"] .ynm-notes-toggle,
body[data-otttheme="ace"] .ynm-notes-toggle,
body[data-otttheme="light"] .ynm-desc-toggle,
body[data-otttheme="sepia"] .ynm-desc-toggle,
body[data-otttheme="pride"] .ynm-desc-toggle,
body[data-otttheme="trans"] .ynm-desc-toggle,
body[data-otttheme="bi"] .ynm-desc-toggle,
body[data-otttheme="pan"] .ynm-desc-toggle,
body[data-otttheme="nb"] .ynm-desc-toggle,
body[data-otttheme="ace"] .ynm-desc-toggle {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--ottcb-text, #1a1a1a) !important;
}
body[data-otttheme="light"] .ynm-comments-toggle summary,
body[data-otttheme="sepia"] .ynm-comments-toggle summary,
body[data-otttheme="pride"] .ynm-comments-toggle summary,
body[data-otttheme="trans"] .ynm-comments-toggle summary,
body[data-otttheme="bi"] .ynm-comments-toggle summary,
body[data-otttheme="pan"] .ynm-comments-toggle summary,
body[data-otttheme="nb"] .ynm-comments-toggle summary,
body[data-otttheme="ace"] .ynm-comments-toggle summary,
body[data-otttheme="light"] .ynm-notes-toggle summary,
body[data-otttheme="sepia"] .ynm-notes-toggle summary,
body[data-otttheme="pride"] .ynm-notes-toggle summary,
body[data-otttheme="trans"] .ynm-notes-toggle summary,
body[data-otttheme="bi"] .ynm-notes-toggle summary,
body[data-otttheme="pan"] .ynm-notes-toggle summary,
body[data-otttheme="nb"] .ynm-notes-toggle summary,
body[data-otttheme="ace"] .ynm-notes-toggle summary,
body[data-otttheme="light"] .ynm-desc-toggle,
body[data-otttheme="sepia"] .ynm-desc-toggle,
body[data-otttheme="pride"] .ynm-desc-toggle,
body[data-otttheme="trans"] .ynm-desc-toggle,
body[data-otttheme="bi"] .ynm-desc-toggle,
body[data-otttheme="pan"] .ynm-desc-toggle,
body[data-otttheme="nb"] .ynm-desc-toggle,
body[data-otttheme="ace"] .ynm-desc-toggle {
    background: transparent !important;
    color: var(--ottcb-accent, #1a4480) !important;
}

body[data-otttheme="light"] .ynm-rate-1 *, body[data-otttheme="light"] .ynm-rate-2 *, body[data-otttheme="light"] .ynm-rate-3 *,
body[data-otttheme="light"] .ynm-rate-4 *, body[data-otttheme="light"] .ynm-rate-5 *, body[data-otttheme="light"] .ynm-rate-6 *,
body[data-otttheme="light"] .ynm-rate-7 *, body[data-otttheme="light"] .ynm-fp-1 *, body[data-otttheme="light"] .ynm-fp-2 *,
body[data-otttheme="light"] .ynm-fp-3 *, body[data-otttheme="light"] .ynm-fp-4 *, body[data-otttheme="light"] .ynm-fp-5 *,
body[data-otttheme="light"] .ynm-fp-6 *, body[data-otttheme="light"] .ynm-fp-7 *,
body[data-otttheme="sepia"] [class*="ynm-rate-"] *, body[data-otttheme="sepia"] [class*="ynm-fp-"] *,
body[data-otttheme="pride"] [class*="ynm-rate-"] *, body[data-otttheme="pride"] [class*="ynm-fp-"] *,
body[data-otttheme="trans"] [class*="ynm-rate-"] *, body[data-otttheme="trans"] [class*="ynm-fp-"] *,
body[data-otttheme="bi"]    [class*="ynm-rate-"] *, body[data-otttheme="bi"]    [class*="ynm-fp-"] *,
body[data-otttheme="pan"]   [class*="ynm-rate-"] *, body[data-otttheme="pan"]   [class*="ynm-fp-"] *,
body[data-otttheme="nb"]    [class*="ynm-rate-"] *, body[data-otttheme="nb"]    [class*="ynm-fp-"] *,
body[data-otttheme="ace"]   [class*="ynm-rate-"] *, body[data-otttheme="ace"]   [class*="ynm-fp-"] * {
    color: inherit !important;
}

/* === Per-theme hardcoded fallbacks ===
 *
 * custom.css has a huge `.cb_template_default ...` block that uses
 * selectors like:
 *   `.cb_template_default [class*="cbProfile"]:not([class*="Menu"])
 *    :not([class*="Banner"]):not([class*="Toolbar"])`
 * which sits at specificity (0,0,5,0) — way above our earlier
 * `body[data-otttheme] .cbProfileTitle` (0,0,2,1). To beat that
 * we mirror custom.css's selector shape (.cb_template_default chain +
 * the [class*="cbProfile"]:not()*3 pattern) and add `body[data-otttheme]`
 * to push specificity to (0,0,6,1) — wins both axes. */

/* LIGHT */
body[data-otttheme="light"] .cb_template_default [class*="cbProfile"]:not([class*="Menu"]):not([class*="Banner"]):not([class*="Toolbar"]),
body[data-otttheme="light"] .cb_template_default .card,
body[data-otttheme="light"] .cb_template_default .card-body,
body[data-otttheme="light"] .cb_template_default .card-header,
body[data-otttheme="light"] .cb_template_default .cbProfileBlock,
body[data-otttheme="light"] .cb_template_default .cbProfileFrame,
body[data-otttheme="light"] .cb_template_default .cbProfileTab,
body[data-otttheme="light"] .cb_template_default .cbActivityProfile,
body[data-otttheme="light"] .cb_template_default .bg-white,
body[data-otttheme="light"] .cb_template_default .bg-light,
body[data-otttheme="light"] .cb_template_default [class*="bg-light"],
body[data-otttheme="light"] .cb_template_default [class*="bg-white"],
body[data-otttheme="light"] .cb_template_default .cbCanvasLayoutBody {
    background-color: #fafafe !important;
    background-image: none !important;
    color: #0d0d12 !important;
}

/* SEPIA */
body[data-otttheme="sepia"] .cb_template_default [class*="cbProfile"]:not([class*="Menu"]):not([class*="Banner"]):not([class*="Toolbar"]),
body[data-otttheme="sepia"] .cb_template_default .card,
body[data-otttheme="sepia"] .cb_template_default .card-body,
body[data-otttheme="sepia"] .cb_template_default .card-header,
body[data-otttheme="sepia"] .cb_template_default .cbProfileBlock,
body[data-otttheme="sepia"] .cb_template_default .cbProfileFrame,
body[data-otttheme="sepia"] .cb_template_default .cbProfileTab,
body[data-otttheme="sepia"] .cb_template_default .cbActivityProfile,
body[data-otttheme="sepia"] .cb_template_default .bg-white,
body[data-otttheme="sepia"] .cb_template_default .bg-light,
body[data-otttheme="sepia"] .cb_template_default [class*="bg-light"],
body[data-otttheme="sepia"] .cb_template_default [class*="bg-white"],
body[data-otttheme="sepia"] .cb_template_default .cbCanvasLayoutBody {
    background-color: #f5e9c8 !important;
    background-image: none !important;
    color: #3a2818 !important;
}

/* OLED — pure black, keep CB feel close to dungeon */
body[data-otttheme="oled"] .cb_template_default [class*="cbProfile"]:not([class*="Menu"]):not([class*="Banner"]):not([class*="Toolbar"]),
body[data-otttheme="oled"] .cb_template_default .card,
body[data-otttheme="oled"] .cb_template_default .card-body,
body[data-otttheme="oled"] .cb_template_default .card-header,
body[data-otttheme="oled"] .cb_template_default .cbProfileBlock,
body[data-otttheme="oled"] .cb_template_default .cbProfileFrame,
body[data-otttheme="oled"] .cb_template_default .cbProfileTab,
body[data-otttheme="oled"] .cb_template_default .cbActivityProfile,
body[data-otttheme="oled"] .cb_template_default .bg-white,
body[data-otttheme="oled"] .cb_template_default .bg-light,
body[data-otttheme="oled"] .cb_template_default [class*="bg-light"],
body[data-otttheme="oled"] .cb_template_default [class*="bg-white"],
body[data-otttheme="oled"] .cb_template_default .cbCanvasLayoutBody {
    background-color: #000000 !important;
    background-image: none !important;
    color: #d9d2c4 !important;
}

/* HIGHCONTRAST */
body[data-otttheme="highcontrast"] .cb_template_default [class*="cbProfile"]:not([class*="Menu"]):not([class*="Banner"]):not([class*="Toolbar"]),
body[data-otttheme="highcontrast"] .cb_template_default .card,
body[data-otttheme="highcontrast"] .cb_template_default .card-body,
body[data-otttheme="highcontrast"] .cb_template_default .card-header,
body[data-otttheme="highcontrast"] .cb_template_default .cbProfileBlock,
body[data-otttheme="highcontrast"] .cb_template_default .cbProfileFrame,
body[data-otttheme="highcontrast"] .cb_template_default .cbProfileTab,
body[data-otttheme="highcontrast"] .cb_template_default .cbActivityProfile,
body[data-otttheme="highcontrast"] .cb_template_default .bg-white,
body[data-otttheme="highcontrast"] .cb_template_default .bg-light,
body[data-otttheme="highcontrast"] .cb_template_default [class*="bg-light"],
body[data-otttheme="highcontrast"] .cb_template_default [class*="bg-white"],
body[data-otttheme="highcontrast"] .cb_template_default .cbCanvasLayoutBody {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* LEATHER */
body[data-otttheme="leather"] .cb_template_default [class*="cbProfile"]:not([class*="Menu"]):not([class*="Banner"]):not([class*="Toolbar"]),
body[data-otttheme="leather"] .cb_template_default .card,
body[data-otttheme="leather"] .cb_template_default .card-body,
body[data-otttheme="leather"] .cb_template_default .card-header,
body[data-otttheme="leather"] .cb_template_default .cbProfileBlock,
body[data-otttheme="leather"] .cb_template_default .cbProfileFrame,
body[data-otttheme="leather"] .cb_template_default .cbProfileTab,
body[data-otttheme="leather"] .cb_template_default .cbActivityProfile,
body[data-otttheme="leather"] .cb_template_default .bg-white,
body[data-otttheme="leather"] .cb_template_default .bg-light,
body[data-otttheme="leather"] .cb_template_default [class*="bg-light"],
body[data-otttheme="leather"] .cb_template_default [class*="bg-white"],
body[data-otttheme="leather"] .cb_template_default .cbCanvasLayoutBody {
    background-color: #0d0d0d !important;
    background-image: none !important;
    color: #e8e8e8 !important;
}

/* PRIDE */
body[data-otttheme="pride"] .cb_template_default [class*="cbProfile"]:not([class*="Menu"]):not([class*="Banner"]):not([class*="Toolbar"]),
body[data-otttheme="pride"] .cb_template_default .card,
body[data-otttheme="pride"] .cb_template_default .card-body,
body[data-otttheme="pride"] .cb_template_default .card-header,
body[data-otttheme="pride"] .cb_template_default .cbProfileBlock,
body[data-otttheme="pride"] .cb_template_default .cbProfileFrame,
body[data-otttheme="pride"] .cb_template_default .cbProfileTab,
body[data-otttheme="pride"] .cb_template_default .cbActivityProfile,
body[data-otttheme="pride"] .cb_template_default .bg-white,
body[data-otttheme="pride"] .cb_template_default .bg-light,
body[data-otttheme="pride"] .cb_template_default [class*="bg-light"],
body[data-otttheme="pride"] .cb_template_default [class*="bg-white"],
body[data-otttheme="pride"] .cb_template_default .cbCanvasLayoutBody {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #1a1a1a !important;
}

/* TRANS */
body[data-otttheme="trans"] .cb_template_default [class*="cbProfile"]:not([class*="Menu"]):not([class*="Banner"]):not([class*="Toolbar"]),
body[data-otttheme="trans"] .cb_template_default .card,
body[data-otttheme="trans"] .cb_template_default .card-body,
body[data-otttheme="trans"] .cb_template_default .card-header,
body[data-otttheme="trans"] .cb_template_default .cbProfileBlock,
body[data-otttheme="trans"] .cb_template_default .cbProfileFrame,
body[data-otttheme="trans"] .cb_template_default .cbProfileTab,
body[data-otttheme="trans"] .cb_template_default .cbActivityProfile,
body[data-otttheme="trans"] .cb_template_default .bg-white,
body[data-otttheme="trans"] .cb_template_default .bg-light,
body[data-otttheme="trans"] .cb_template_default [class*="bg-light"],
body[data-otttheme="trans"] .cb_template_default [class*="bg-white"],
body[data-otttheme="trans"] .cb_template_default .cbCanvasLayoutBody {
    background-color: #fafdff !important;
    background-image: none !important;
    color: #1a2a4a !important;
}

/* BI */
body[data-otttheme="bi"] .cb_template_default [class*="cbProfile"]:not([class*="Menu"]):not([class*="Banner"]):not([class*="Toolbar"]),
body[data-otttheme="bi"] .cb_template_default .card,
body[data-otttheme="bi"] .cb_template_default .card-body,
body[data-otttheme="bi"] .cb_template_default .card-header,
body[data-otttheme="bi"] .cb_template_default .cbProfileBlock,
body[data-otttheme="bi"] .cb_template_default .cbProfileFrame,
body[data-otttheme="bi"] .cb_template_default .cbProfileTab,
body[data-otttheme="bi"] .cb_template_default .cbActivityProfile,
body[data-otttheme="bi"] .cb_template_default .bg-white,
body[data-otttheme="bi"] .cb_template_default .bg-light,
body[data-otttheme="bi"] .cb_template_default [class*="bg-light"],
body[data-otttheme="bi"] .cb_template_default [class*="bg-white"],
body[data-otttheme="bi"] .cb_template_default .cbCanvasLayoutBody {
    background-color: #f8f6fb !important;
    background-image: none !important;
    color: #1a1233 !important;
}

/* PAN */
body[data-otttheme="pan"] .cb_template_default [class*="cbProfile"]:not([class*="Menu"]):not([class*="Banner"]):not([class*="Toolbar"]),
body[data-otttheme="pan"] .cb_template_default .card,
body[data-otttheme="pan"] .cb_template_default .card-body,
body[data-otttheme="pan"] .cb_template_default .card-header,
body[data-otttheme="pan"] .cb_template_default .cbProfileBlock,
body[data-otttheme="pan"] .cb_template_default .cbProfileFrame,
body[data-otttheme="pan"] .cb_template_default .cbProfileTab,
body[data-otttheme="pan"] .cb_template_default .cbActivityProfile,
body[data-otttheme="pan"] .cb_template_default .bg-white,
body[data-otttheme="pan"] .cb_template_default .bg-light,
body[data-otttheme="pan"] .cb_template_default [class*="bg-light"],
body[data-otttheme="pan"] .cb_template_default [class*="bg-white"],
body[data-otttheme="pan"] .cb_template_default .cbCanvasLayoutBody {
    background-color: #fbfdff !important;
    background-image: none !important;
    color: #1a1a3a !important;
}

/* NON-BINARY */
body[data-otttheme="nb"] .cb_template_default [class*="cbProfile"]:not([class*="Menu"]):not([class*="Banner"]):not([class*="Toolbar"]),
body[data-otttheme="nb"] .cb_template_default .card,
body[data-otttheme="nb"] .cb_template_default .card-body,
body[data-otttheme="nb"] .cb_template_default .card-header,
body[data-otttheme="nb"] .cb_template_default .cbProfileBlock,
body[data-otttheme="nb"] .cb_template_default .cbProfileFrame,
body[data-otttheme="nb"] .cb_template_default .cbProfileTab,
body[data-otttheme="nb"] .cb_template_default .cbActivityProfile,
body[data-otttheme="nb"] .cb_template_default .bg-white,
body[data-otttheme="nb"] .cb_template_default .bg-light,
body[data-otttheme="nb"] .cb_template_default [class*="bg-light"],
body[data-otttheme="nb"] .cb_template_default [class*="bg-white"],
body[data-otttheme="nb"] .cb_template_default .cbCanvasLayoutBody {
    background-color: #fcfbff !important;
    background-image: none !important;
    color: #1a1a1a !important;
}

/* ACE */
body[data-otttheme="ace"] .cb_template_default [class*="cbProfile"]:not([class*="Menu"]):not([class*="Banner"]):not([class*="Toolbar"]),
body[data-otttheme="ace"] .cb_template_default .card,
body[data-otttheme="ace"] .cb_template_default .card-body,
body[data-otttheme="ace"] .cb_template_default .card-header,
body[data-otttheme="ace"] .cb_template_default .cbProfileBlock,
body[data-otttheme="ace"] .cb_template_default .cbProfileFrame,
body[data-otttheme="ace"] .cb_template_default .cbProfileTab,
body[data-otttheme="ace"] .cb_template_default .cbActivityProfile,
body[data-otttheme="ace"] .cb_template_default .bg-white,
body[data-otttheme="ace"] .cb_template_default .bg-light,
body[data-otttheme="ace"] .cb_template_default [class*="bg-light"],
body[data-otttheme="ace"] .cb_template_default [class*="bg-white"],
body[data-otttheme="ace"] .cb_template_default .cbCanvasLayoutBody {
    background-color: #fafafa !important;
    background-image: none !important;
    color: #1a1a1a !important;
}