/* ============================================================================
   house.css  —  THE onboard.optdigital.io house style, applied everywhere
   ----------------------------------------------------------------------------
   Loaded ABSOLUTELY LAST in base.html (after sales-cards.css) so it wins every
   source-order tie. This is the layer that makes the dashboard read exactly
   like onboard.optdigital.io (opt-onboarding: offer-sheet.html, ob-2.html,
   campaign-dashboard.html) and the OPT Command Centre (opt-ui.css).

   Palette and fonts already come from tokens.css (paper #fbfbf9, white cards,
   ink #15161a, single yellow #f4e14a, Inter Tight body, Bethany display).
   sales-cards.css already floats the card containers. This sheet finishes the
   job on the CONTROLS and CHROME that were still square / editorial:

     1. buttons        -> pills (999px), white with cream border, yellow when
                          primary/active, ink when dark; soft yellow focus ring
     2. inputs         -> 14px radius, cream border, yellow 4px focus ring
     3. checkboxes     -> 21px rounded box, green (#16a34a) with white tick
     4. labels         -> Inter Tight 11.5px uppercase letter-spaced, ink-mute
                          (no more mono eyebrows)
     5. cards          -> 22px radius (18px for tiles), long soft float
     6. tables         -> cream header band, uppercase 11px headers
     7. badges / pills -> 999px, dot pills
     8. sidebar/topbar -> paper canvas, ink text, active = yellow pill
     9. modals, dropdowns, tabs, pagination, alerts, progress, tooltips
    10. dark palette retired: html[data-palette="dark"] renders light

   Rule of thumb from Ben: yellow is the ONLY accent; green/amber/red/blue are
   status only; content opens as pages not modals; SVG icons never emojis.
   Reference: C:\Users\Ben\opt-command-centre\OPT-UI-STYLE-GUIDE.md
   ========================================================================== */

/* ---- 0. tokens that the rest of this sheet leans on ----------------------- */
html:root {
  --hs-yellow: #f4e14a;
  --hs-yellow-deep: #f5c518;
  --hs-yellow-ring: rgba(244, 225, 74, .28);
  --hs-yellow-soft: rgba(244, 225, 74, .12);
  --hs-ink: #15161a;
  --hs-ink-soft: #3b3d44;
  --hs-ink-mute: #8a8d96;
  --hs-paper: #ffffff;
  --hs-bg: #fbfbf9;
  --hs-line: #e9e6da;
  --hs-line-strong: #e7e1cc;
  --hs-line-hover: #dccf93;
  --hs-good: #16a34a;
  --hs-warn: #b8860b;
  --hs-bad: #e0561e;
  --hs-info: #2563eb;
  --hs-radius-card: 22px;
  --hs-radius-tile: 18px;
  --hs-radius-input: 14px;
  --hs-radius-pill: 999px;
  --hs-shadow-card: 0 36px 80px -46px rgba(20, 22, 30, .34);
  --hs-shadow-tile: 0 20px 44px -34px rgba(20, 22, 30, .3);
  --hs-shadow-input: 0 1px 2px rgba(20, 22, 30, .04);
  --hs-font-body: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --hs-font-display: "Bethany Elingston", "Cormorant Garamond", Georgia, serif;

  /* re-point the app's own radius + float tokens so every consumer follows */
  --card-radius: var(--hs-radius-card) !important;
  --card-radius-sm: var(--hs-radius-tile) !important;
  --card-float: var(--hs-shadow-card) !important;
  --card-float-sm: var(--hs-shadow-tile) !important;
  --radius-sm: 10px !important;
  --radius-md: 14px !important;
  --radius-lg: 18px !important;
  --radius-xl: 22px !important;
  --font-mono: var(--hs-font-body) !important;
  --mono: var(--hs-font-body) !important;
  --font-sans: var(--hs-font-body) !important;
  --sans: var(--hs-font-body) !important;
  --font-body: var(--hs-font-body) !important;
  --font-display: var(--hs-font-display) !important;
  --serif: var(--hs-font-display) !important;
  --bs-body-font-family: var(--hs-font-body) !important;
  --bs-border-radius: 14px !important;
  --bs-border-radius-sm: 10px !important;
  --bs-border-radius-lg: 18px !important;
  --bs-border-color: var(--hs-line) !important;
  --bs-body-bg: var(--hs-bg) !important;
  --bs-body-color: var(--hs-ink) !important;
  --bs-link-color: var(--hs-ink) !important;
  --bs-link-hover-color: var(--hs-ink-soft) !important;
}

/* ---- 10. dark palette retired: whatever localStorage says, render light ---- */
html[data-palette="dark"] {
  --surface-0: #fbfbf9 !important; --surface-1: #ffffff !important; --surface-2: #ffffff !important; --surface-3: #f3f1ec !important;
  --paper: #fbfbf9 !important; --paper-2: #f3f1ec !important; --paper-3: #ece9e0 !important;
  --ink: #15161a !important; --ink-2: #3b3d44 !important; --ink-3: #6b6d75 !important; --ink-4: #8a8d96 !important; --ink-5: #b6b8be !important;
  --ink-strong: #15161a !important; --ink-body: #3b3d44 !important; --ink-muted: #6b6d75 !important; --ink-faint: #8a8d96 !important;
  --rule: #e9e6da !important; --rule-2: #f0ede4 !important; --border-subtle: #e9e6da !important; --border-standard: #e9e6da !important;
  --bg-0: #fbfbf9 !important; --bg-50: #fbfbf9 !important; --bg-100: #f3f1ec !important; --bg-200: #ece9e0 !important;
  --text-900: #15161a !important; --text-800: #15161a !important; --text-700: #3b3d44 !important; --text-600: #6b6d75 !important; --text-500: #6b6d75 !important; --text-400: #8a8d96 !important;
  --border-100: #e9e6da !important; --border-200: #e9e6da !important; --border-300: #d9d5c3 !important;
  color-scheme: light !important;
}
.design-mode-toggle { display: none !important; }

/* ---- base ----------------------------------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house {
  font-family: var(--hs-font-body) !important;
  background: var(--hs-bg) !important;
  color: var(--hs-ink) !important;
  -webkit-font-smoothing: antialiased;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house code, html:root[data-design-mode][data-theme][data-palette] body#opt-house pre, html:root[data-design-mode][data-theme][data-palette] body#opt-house kbd, html:root[data-design-mode][data-theme][data-palette] body#opt-house samp, html:root[data-design-mode][data-theme][data-palette] body#opt-house .mono-code, html:root[data-design-mode][data-theme][data-palette] body#opt-house .code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-main, html:root[data-design-mode][data-theme][data-palette] body#opt-house .main-content, html:root[data-design-mode][data-theme][data-palette] body#opt-house .content-wrapper { background: transparent !important; }

/* ---- 4. labels: Inter Tight uppercase, never mono ------------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house label:not(.form-check-label):not(.btn):not(.switch):not(.toggle),
html:root[data-design-mode][data-theme][data-palette] body#opt-house .eyebrow, html:root[data-design-mode][data-theme][data-palette] body#opt-house .kicker, html:root[data-design-mode][data-theme][data-palette] body#opt-house .label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .section-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ui-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .kpi-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .stat-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cc-stat-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .wc-kpi-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .v2-kpi-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-kpi-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsc-kpi-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ga4-kpi-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-kpi-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .sc-kpi-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cb-field-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-stat-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .metric-label, html:root[data-design-mode][data-theme][data-palette] body#opt-house .card-title-eyebrow,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .panel-title, html:root[data-design-mode][data-theme][data-palette] body#opt-house .section-title-sm, html:root[data-design-mode][data-theme][data-palette] body#opt-house .table-eyebrow, html:root[data-design-mode][data-theme][data-palette] body#opt-house .filter-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="-eyebrow"], html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="-kicker"], html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="kpi-label"], html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="stat-label"] {
  font-family: var(--hs-font-body) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--hs-ink-mute) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-check-label { font-family: var(--hs-font-body) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 500 !important; color: var(--hs-ink) !important; }

/* ---- 5. cards: 22px, long soft float (sales-cards.css picked the containers) */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .panel, html:root[data-design-mode][data-theme][data-palette] body#opt-house .opt-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .section-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .content-card,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cc-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cc-panel, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ui-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .wc-widget, html:root[data-design-mode][data-theme][data-palette] body#opt-house .v2-widget, html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsc-widget, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ga4-card,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-hero-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-secondary-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-metric-panel, html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-pipeline-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .client-hero-card,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-hero-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-flag-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .manager-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .integration-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .workspace-card,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .admin-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .kb-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .wb-kb-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .dgst-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ranking-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-detail-panel,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce-main-panel, html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-panel-list, html:root[data-design-mode][data-theme][data-palette] body#opt-house .chart-wrapper, html:root[data-design-mode][data-theme][data-palette] body#opt-house .dash-v2 .dv2-sec, html:root[data-design-mode][data-theme][data-palette] body#opt-house .dash-v2 .dv2-panel,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .results-page .hero-block, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cb-hero-tile {
  background: var(--hs-paper) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-card) !important;
  box-shadow: var(--hs-shadow-card) !important;
}
/* KPI tiles are the smaller 18px cards */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .kpi, html:root[data-design-mode][data-theme][data-palette] body#opt-house .kpi-tile, html:root[data-design-mode][data-theme][data-palette] body#opt-house .kpi-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .kpi-box, html:root[data-design-mode][data-theme][data-palette] body#opt-house .stat-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cc-stat, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ui-kpi,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .wc-kpi, html:root[data-design-mode][data-theme][data-palette] body#opt-house .wc-kpi-tile, html:root[data-design-mode][data-theme][data-palette] body#opt-house .v2-kpi-tile, html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsc-kpi, html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsc-kpi-tile, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ga4-kpi,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-kpi, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-kpi-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-kpi, html:root[data-design-mode][data-theme][data-palette] body#opt-house .sc-kpi, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce-stat, html:root[data-design-mode][data-theme][data-palette] body#opt-house .gbp-kpi, html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-kpi,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .tracked-kpi, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-stat-card, html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="kpi-grid-"] > * {
  background: var(--hs-paper) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-tile) !important;
  box-shadow: var(--hs-shadow-tile) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .card-header, html:root[data-design-mode][data-theme][data-palette] body#opt-house .card-footer { background: transparent !important; border-color: var(--hs-line) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .card-header { border-top-left-radius: var(--hs-radius-card) !important; border-top-right-radius: var(--hs-radius-card) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .card-footer { border-bottom-left-radius: var(--hs-radius-card) !important; border-bottom-right-radius: var(--hs-radius-card) !important; }
/* big numbers in serif */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .kpi .value, html:root[data-design-mode][data-theme][data-palette] body#opt-house .kpi-value, html:root[data-design-mode][data-theme][data-palette] body#opt-house .stat-value, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cc-stat-value, html:root[data-design-mode][data-theme][data-palette] body#opt-house .wc-kpi-value, html:root[data-design-mode][data-theme][data-palette] body#opt-house .v2-kpi-value,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-kpi-value, html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsc-kpi-value, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ga4-kpi-value, html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-kpi-value, html:root[data-design-mode][data-theme][data-palette] body#opt-house .sc-kpi-value, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce-stat-value,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .metric-value, html:root[data-design-mode][data-theme][data-palette] body#opt-house .big-number, html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="kpi-value"], html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="stat-value"] {
  font-family: var(--hs-font-display) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
}

/* ---- 1. buttons: pills ---------------------------------------------------- */
/* The bare-`button` arm below is the house paint for anything that isn't
   already a styled component. Its 18 chained :not()s push it to roughly
   (1 id, 22 classes, 3 elements), which outruns component rules like
   `#cmImages button.ist-choice.is-on` and `.gbp-ap-cad.sel` even though
   those carry !important — so it was repainting SELECTED chips back to
   unselected white. Jonas reported this on 7 Sep as "I can not click any
   button" on the AI Autopilot wizard: the clicks were landing all along,
   the selected highlight just never appeared, on that screen and on the
   photo-generation screen.
   Selected state is therefore excluded below. A button that has told us
   it is chosen must keep its own paint: `.sel` (autopilot wizard),
   `.is-on` (images studio), `.active` / `.selected` (general), and the
   ARIA equivalents. Add to this list rather than raising specificity in
   the component, or this fight starts again on the next new chip.

   `.hs-card-btn` is the second exemption and it is about SHAPE, not state.
   A pill is right for a control you press; it is wrong for a button that is
   really a card — an icon over a title over a line of description. At a 999px
   radius a 90px-tall tile becomes a lozenge and its own corners eat the text.
   Ben reported exactly that on 19 Sep 2026 on the Images tab: the eight
   "Start from" preset tiles rendered as ovals with the words clipped. Those
   tiles ask for the house CARD radius, so they opt out here and take it from
   the component sheet. Tag any button that is card-shaped with `hs-card-btn`
   rather than fighting this rule from the component side — the chained
   :not()s make that fight unwinnable (~1 id, 22 classes, 3 elements). */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house button:not(.btn):not(.btn-close):not(.navbar-toggler):not([class*="sidebar"]):not(.nav-link):not(.dropdown-item):not(.accordion-button):not(.page-link):not(.ql-):not([class*="ce2-"]):not(.tab-btn):not([class*="tab"]):not(.bare):not(.icon-btn):not([class*="icon-btn"]):not(.notification-bell-btn):not(.hs-btn):not(.hs-filter-btn):not(.sel):not(.is-on):not(.is-active):not(.active):not(.selected):not(.hs-card-btn):not([aria-checked="true"]):not([aria-pressed="true"]) {
  font-family: var(--hs-font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--hs-radius-pill) !important;
  border: 1px solid var(--hs-line-strong) !important;
  background: var(--hs-paper) !important;
  color: var(--hs-ink) !important;
  box-shadow: var(--hs-shadow-input) !important;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .12s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* The card-shaped opt-out. Everything a pill button gives (house font, cream
   border, paper ground, soft float) minus the 999px radius, which becomes the
   card/tile radius instead. Components may still override any of it. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house button.hs-card-btn {
  font-family: var(--hs-font-body);
  border-radius: var(--hs-radius-tile);
  border: 1px solid var(--hs-line-strong);
  background: var(--hs-paper);
  color: var(--hs-ink);
  box-shadow: var(--hs-shadow-input);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .12s;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house button.hs-card-btn:focus-visible {
  outline: none; border-color: var(--hs-yellow); box-shadow: 0 0 0 4px var(--hs-yellow-ring);
}

html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn:hover, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-outline-secondary:hover, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-light:hover, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-secondary:hover {
  border-color: var(--hs-line-hover) !important; background: #fdfcf6 !important; color: var(--hs-ink) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn:active { transform: translateY(1px); }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn:focus-visible, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn:focus { outline: none !important; border-color: var(--hs-yellow) !important; box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-primary, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-warning, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn.active, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn.on, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-accent, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-gold,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-check:checked + .btn, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-outline-primary:hover, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-outline-primary.active {
  background: var(--hs-yellow) !important;
  border-color: var(--hs-yellow) !important;
  color: #1a1700 !important;
  box-shadow: 0 8px 20px -10px rgba(244, 197, 24, .9) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-primary:hover, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-warning:hover { background: var(--hs-yellow-deep) !important; border-color: var(--hs-yellow-deep) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-dark, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-ink { background: var(--hs-ink) !important; border-color: var(--hs-ink) !important; color: #fff !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-danger, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-outline-danger:hover { background: var(--hs-paper) !important; border-color: rgba(224, 86, 30, .5) !important; color: var(--hs-bad) !important; box-shadow: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-danger:hover { background: #fff4ef !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-success { background: var(--hs-paper) !important; border-color: rgba(22, 163, 74, .45) !important; color: var(--hs-good) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-link { border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--hs-ink-soft) !important; text-decoration: underline; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-sm, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-group-sm > .btn { padding: 7px 13px !important; font-size: 13px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-lg { padding: 13px 22px !important; font-size: 15px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-group > .btn { border-radius: var(--hs-radius-pill) !important; margin-right: 6px; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-group { gap: 0; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn .bi, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn svg { width: 16px; height: 16px; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-close { border-radius: 50% !important; background-color: #f1efe3 !important; opacity: 1 !important; filter: none !important; padding: 10px !important; background-size: 10px !important; }

/* ---- 2. inputs ------------------------------------------------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-control, html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-select, html:root[data-design-mode][data-theme][data-palette] body#opt-house textarea, html:root[data-design-mode][data-theme][data-palette] body#opt-house select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="text"], html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="search"], html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="email"], html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="url"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="number"], html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="date"], html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="password"], html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="tel"], html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="time"] {
  font-family: var(--hs-font-body) !important;
  font-size: 14px !important;
  color: var(--hs-ink) !important;
  background-color: var(--hs-paper) !important;
  border: 1px solid var(--hs-line-strong) !important;
  border-radius: var(--hs-radius-input) !important;
  box-shadow: var(--hs-shadow-input) !important;
  outline: none !important;
  transition: border-color .18s, box-shadow .18s !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-control:hover, html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-select:hover, html:root[data-design-mode][data-theme][data-palette] body#opt-house textarea:hover { border-color: #d8cfac !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-control:focus, html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-select:focus, html:root[data-design-mode][data-theme][data-palette] body#opt-house textarea:focus, html:root[data-design-mode][data-theme][data-palette] body#opt-house input:focus, html:root[data-design-mode][data-theme][data-palette] body#opt-house select:focus {
  border-color: var(--hs-yellow) !important;
  box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important;
  outline: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-control::placeholder, html:root[data-design-mode][data-theme][data-palette] body#opt-house textarea::placeholder { color: #b7b3a6 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-control.is-invalid, html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-control.err { border-color: var(--hs-bad) !important; box-shadow: 0 0 0 4px rgba(224, 86, 30, .15) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-select {
  appearance: none !important; -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d96' stroke-width='2.4' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 13px center !important; background-size: 15px !important;
  padding-right: 38px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-control-sm, html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-select-sm { border-radius: 12px !important; font-size: 13px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .input-group > .form-control:not(:last-child), html:root[data-design-mode][data-theme][data-palette] body#opt-house .input-group > .form-select:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .input-group > .btn:last-child, html:root[data-design-mode][data-theme][data-palette] body#opt-house .input-group-text:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: var(--hs-radius-input) !important; border-bottom-right-radius: var(--hs-radius-input) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .input-group-text { background: #fcfbf6 !important; border: 1px solid var(--hs-line-strong) !important; color: var(--hs-ink-mute) !important; font-family: var(--hs-font-body) !important; }

/* ---- 3. checkboxes and switches ------------------------------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-check-input[type="checkbox"]:not([role="switch"]) {
  width: 21px !important; height: 21px !important; border-radius: 7px !important;
  border: 1.5px solid #d6cdaf !important; background-color: #fff !important; margin-top: 0 !important;
  transition: background .15s, border-color .15s !important; box-shadow: none !important; cursor: pointer;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-check-input[type="checkbox"]:not([role="switch"]):checked {
  background-color: var(--hs-good) !important; border-color: var(--hs-good) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") !important;
  background-size: 12px !important; background-position: center !important; background-repeat: no-repeat !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-check-input:focus { box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important; border-color: var(--hs-yellow) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-check-input[type="radio"] { width: 20px !important; height: 20px !important; border: 1.5px solid #d6cdaf !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-check-input[type="radio"]:checked { background-color: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; background-image: radial-gradient(circle, #1a1700 40%, transparent 46%) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-switch .form-check-input { width: 40px !important; height: 22px !important; border-radius: 999px !important; border: 1.5px solid #d6cdaf !important; background-color: #f1efe3 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-switch .form-check-input:checked { background-color: var(--hs-good) !important; border-color: var(--hs-good) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-check { display: flex; align-items: center; gap: 10px; min-height: 0; padding-left: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-check .form-check-input { float: none !important; margin-left: 0 !important; }

/* ---- 6. tables ------------------------------------------------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .table, html:root[data-design-mode][data-theme][data-palette] body#opt-house table.cc-table, html:root[data-design-mode][data-theme][data-palette] body#opt-house table.wc-table, html:root[data-design-mode][data-theme][data-palette] body#opt-house table.v2-table, html:root[data-design-mode][data-theme][data-palette] body#opt-house table.ga4-table, html:root[data-design-mode][data-theme][data-palette] body#opt-house table.gsc-table {
  --bs-table-bg: transparent; font-family: var(--hs-font-body) !important; font-size: 14px !important; color: var(--hs-ink) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .table > thead th, html:root[data-design-mode][data-theme][data-palette] body#opt-house table thead th, html:root[data-design-mode][data-theme][data-palette] body#opt-house .table > :not(caption) > * > th {
  font-family: var(--hs-font-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; color: var(--hs-ink-mute) !important; background: #fcfbf6 !important;
  border-bottom: 1px solid var(--hs-line) !important; border-top: 0 !important; white-space: nowrap; padding: 13px 16px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .table > tbody > tr > td, html:root[data-design-mode][data-theme][data-palette] body#opt-house table tbody td { border-color: var(--hs-line) !important; padding: 12px 16px !important; vertical-align: middle; background: transparent !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .table-hover > tbody > tr:hover > td, html:root[data-design-mode][data-theme][data-palette] body#opt-house table tbody tr:hover td { background: #fdfcf6 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .table-responsive { border-radius: var(--hs-radius-card); }

/* ---- 7. badges, pills, chips --------------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge, html:root[data-design-mode][data-theme][data-palette] body#opt-house .pill, html:root[data-design-mode][data-theme][data-palette] body#opt-house .chip, html:root[data-design-mode][data-theme][data-palette] body#opt-house .tag, html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="-badge"]:not(.notification-badge):not(.sidebar-item-badge):not(.sidebar-folder-badge), html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="-chip"], html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="-pill"] {
  font-family: var(--hs-font-body) !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important;
  border-radius: var(--hs-radius-pill) !important; padding: 4px 10px !important; line-height: 1.3 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge { background: #fff !important; color: var(--hs-ink-soft) !important; border: 1px solid var(--hs-line) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.bg-success, html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.text-bg-success { background: #e3f2e6 !important; color: #1f7a3a !important; border-color: #b8d8c0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.bg-warning, html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.text-bg-warning { background: #fdf3d8 !important; color: #8a5a00 !important; border-color: #e8d49a !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.bg-danger, html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.text-bg-danger { background: #fbe7e3 !important; color: #b42318 !important; border-color: #e8c4be !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.bg-info, html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.text-bg-info, html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.bg-primary, html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.text-bg-primary { background: var(--hs-yellow) !important; color: #1a1700 !important; border-color: var(--hs-yellow) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.bg-secondary, html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.text-bg-secondary, html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.bg-dark, html:root[data-design-mode][data-theme][data-palette] body#opt-house .badge.text-bg-dark { background: #f1efe3 !important; color: var(--hs-ink-soft) !important; border-color: var(--hs-line) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-item-badge, html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-folder-badge, html:root[data-design-mode][data-theme][data-palette] body#opt-house .notification-badge { border-radius: 999px !important; background: var(--hs-yellow) !important; color: #1a1700 !important; font-weight: 700 !important; }
/* One geometry for every sidebar count. They were being sized by three sheets
   at once — style.css set 16px tall for an item and 18px for a folder,
   editorial-overlay.css dropped the height and min-width entirely and used
   0.6rem/1px 6px against 0.62rem/1px 7px — so "66", "5" and "33" each came out
   a different size and shape. Ben, 6 Sep 2026: "these dots for notifications
   have different widths and different sizes."
   20px tall with a 20px minimum width: one and two digits render as a circle,
   three digits grow sideways into a pill of exactly the same height.
   Deliberately no `display` here: style.css already makes these inline-flex,
   and forcing it would beat the `display: none` that hides them in a collapsed
   sidebar and on tablet widths. Never set display from this sheet. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-item-badge, html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-folder-badge {
  box-sizing: border-box !important; align-items: center !important; justify-content: center !important;
  flex: 0 0 auto !important; min-width: 20px !important; height: 20px !important; padding: 0 6px !important;
  margin-left: auto !important; border: 0 !important;
  font-family: var(--hs-font-body) !important; font-size: 11px !important; font-weight: 700 !important;
  line-height: 1 !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums !important;
}

/* ---- 8. sidebar and topbar ------------------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar {
  background: var(--hs-bg) !important; border-right: 1px solid var(--hs-line) !important; color: var(--hs-ink) !important;
  font-family: var(--hs-font-body) !important; box-shadow: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-header { border-bottom: 1px solid var(--hs-line) !important; background: transparent !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-link, html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-menu a {
  font-family: var(--hs-font-body) !important; font-weight: 600 !important; font-size: 14px !important; color: var(--hs-ink-soft) !important;
  border-radius: var(--hs-radius-pill) !important; padding: 9px 14px !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-link:hover { background: #f1efe3 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-link.active, html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-menu a.active {
  background: var(--hs-yellow) !important; color: #1a1700 !important; border-color: var(--hs-yellow) !important; box-shadow: 0 8px 20px -12px rgba(244, 197, 24, .9) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-link.active .bi, html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-link.active svg { color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-section-label {
  font-family: var(--hs-font-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar-section-label:hover { color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar {
  background: rgba(251, 251, 249, .94) !important; border-bottom: 1px solid var(--hs-line) !important; box-shadow: none !important; backdrop-filter: blur(8px);
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar .form-control, html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar input[type="search"], html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search input { border-radius: var(--hs-radius-pill) !important; background: #fff !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar kbd { font-family: var(--hs-font-body) !important; font-size: 11px !important; border: 1px solid var(--hs-line-strong) !important; border-bottom-width: 2px !important; border-radius: 6px !important; background: #fff !important; color: var(--hs-ink-soft) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .notification-bell-btn { border-radius: 50% !important; border: 1px solid var(--hs-line-strong) !important; background: #fff !important; color: var(--hs-ink) !important; }

/* ---- 9. modals, dropdowns, tabs, pagination, alerts, progress, tooltips ----- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house div.modal-content { background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-card) !important; box-shadow: var(--hs-shadow-card) !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal-header { border-bottom: 1px solid var(--hs-line) !important; background: transparent !important; padding: 20px 24px 14px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal-title { font-family: var(--hs-font-display) !important; font-weight: 500 !important; font-size: 26px !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal-footer { border-top: 1px solid var(--hs-line) !important; background: transparent !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal-backdrop.show { background: rgba(21, 22, 26, .45) !important; opacity: 1 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal-body .text-muted, html:root[data-design-mode][data-theme][data-palette] body#opt-house .text-muted, html:root[data-design-mode][data-theme][data-palette] body#opt-house .text-secondary { color: var(--hs-ink-mute) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dropdown-menu { background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: 14px !important; box-shadow: var(--hs-shadow-tile) !important; padding: 6px !important; font-family: var(--hs-font-body) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dropdown-item { border-radius: 9px !important; color: var(--hs-ink) !important; font-size: 14px !important; padding: 8px 12px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dropdown-item:hover, html:root[data-design-mode][data-theme][data-palette] body#opt-house .dropdown-item:focus { background: #f1efe3 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dropdown-item.active { background: var(--hs-yellow) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dropdown-divider { border-color: var(--hs-line) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nav-tabs { border-bottom: 1px solid var(--hs-line) !important; gap: 6px; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nav-tabs .nav-link, html:root[data-design-mode][data-theme][data-palette] body#opt-house .nav-pills .nav-link {
  font-family: var(--hs-font-body) !important; font-weight: 600 !important; font-size: 14px !important; color: var(--hs-ink-soft) !important;
  border: 1px solid transparent !important; border-radius: var(--hs-radius-pill) !important; padding: 8px 14px !important; background: transparent !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nav-tabs .nav-link:hover, html:root[data-design-mode][data-theme][data-palette] body#opt-house .nav-pills .nav-link:hover { background: #f1efe3 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nav-tabs .nav-link.active, html:root[data-design-mode][data-theme][data-palette] body#opt-house .nav-pills .nav-link.active { background: var(--hs-yellow) !important; color: #1a1700 !important; border-color: var(--hs-yellow) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pagination .page-link { border-radius: 999px !important; margin: 0 2px; border: 1px solid var(--hs-line-strong) !important; color: var(--hs-ink) !important; background: #fff !important; font-family: var(--hs-font-body) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pagination .page-item.active .page-link { background: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .alert { border-radius: 14px !important; border: 1px solid var(--hs-line) !important; border-left-width: 4px !important; background: #fffdf0 !important; color: var(--hs-ink-soft) !important; font-family: var(--hs-font-body) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .alert-success { border-left-color: var(--hs-good) !important; background: #f2faf4 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .alert-warning { border-left-color: var(--hs-yellow-deep) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .alert-danger { border-left-color: var(--hs-bad) !important; background: #fff6f2 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .alert-info { border-left-color: var(--hs-info) !important; background: #f3f7fd !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .progress { border-radius: 999px !important; background: #f1efe3 !important; height: 8px; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .progress-bar { background: var(--hs-yellow-deep) !important; border-radius: 999px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .tooltip-inner { background: var(--hs-ink) !important; color: #fff !important; border-radius: 10px !important; font-family: var(--hs-font-body) !important; font-size: 12.5px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .popover { border: 1px solid var(--hs-line) !important; border-radius: 14px !important; box-shadow: var(--hs-shadow-tile) !important; font-family: var(--hs-font-body) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .toast { border-radius: 14px !important; border: 1px solid var(--hs-line) !important; box-shadow: var(--hs-shadow-tile) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .list-group-item { border-color: var(--hs-line) !important; background: transparent !important; color: var(--hs-ink) !important; font-family: var(--hs-font-body) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .list-group { border-radius: var(--hs-radius-tile) !important; overflow: hidden; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .accordion-item { border: 1px solid var(--hs-line) !important; border-radius: 14px !important; margin-bottom: 8px; overflow: hidden; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .accordion-button { font-family: var(--hs-font-body) !important; font-weight: 700 !important; background: #fff !important; color: var(--hs-ink) !important; box-shadow: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .accordion-button:not(.collapsed) { background: #fffdf0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house hr { border-color: var(--hs-line) !important; opacity: 1 !important; }
/* links: keep low specificity so component buttons styled as <a> keep their own colour */
:where(html body a:not([class])) { color: var(--hs-ink); }
:where(html body a:not([class])):hover { color: var(--hs-ink-soft); }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .text-primary, html:root[data-design-mode][data-theme][data-palette] body#opt-house .text-info { color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bg-primary, html:root[data-design-mode][data-theme][data-palette] body#opt-house .bg-info { background: var(--hs-yellow-soft) !important; }

/* ---- headings: display serif for page titles, Inter Tight for the rest -------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house h1, html:root[data-design-mode][data-theme][data-palette] body#opt-house .page-title, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ui-h1, html:root[data-design-mode][data-theme][data-palette] body#opt-house .page-header h1, html:root[data-design-mode][data-theme][data-palette] body#opt-house .hero-title {
  font-family: var(--hs-font-display) !important; font-weight: 500 !important; letter-spacing: -.005em !important; color: var(--hs-ink) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house h2, html:root[data-design-mode][data-theme][data-palette] body#opt-house h3, html:root[data-design-mode][data-theme][data-palette] body#opt-house h4, html:root[data-design-mode][data-theme][data-palette] body#opt-house h5, html:root[data-design-mode][data-theme][data-palette] body#opt-house h6, html:root[data-design-mode][data-theme][data-palette] body#opt-house .card-title, html:root[data-design-mode][data-theme][data-palette] body#opt-house .section-title {
  font-family: var(--hs-font-body) !important; font-weight: 800 !important; letter-spacing: -.015em !important; color: var(--hs-ink) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house h2 { font-size: 22px; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house h3 { font-size: 17px; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .card .card-title, html:root[data-design-mode][data-theme][data-palette] body#opt-house .card-header h5, html:root[data-design-mode][data-theme][data-palette] body#opt-house .card-header h6, html:root[data-design-mode][data-theme][data-palette] body#opt-house .card-header .card-title {
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
}

/* ---- ONE control height everywhere (Ben: "some of these aren't the same size") ----
   Every button, input, select and the date range trigger is 40px tall with the same
   14px type, so a toolbar row always lines up. Icon-only round buttons are 36px. ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-sm,
html:root[data-design-mode][data-theme][data-palette] body#opt-house button.sm,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-trigger,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-filter-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-view-mode-btn {
  min-height: 40px !important; height: 40px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 16px !important; padding-right: 16px !important;
  font-size: 14px !important; line-height: 1.2 !important; display: inline-flex !important; align-items: center !important; justify-content: center; gap: 8px; box-sizing: border-box !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-control,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-control-sm,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-select-sm,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house select:not([multiple]):not([size]),
html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="text"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="search"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="email"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="url"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="number"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="date"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="password"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house input[type="tel"] {
  min-height: 40px !important; height: 40px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 14px !important; line-height: 1.2 !important; box-sizing: border-box !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house textarea { height: auto !important; min-height: 96px !important; padding-top: 11px !important; padding-bottom: 11px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-select-sm,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select select { padding-left: 14px !important; padding-right: 38px !important; min-width: 0 !important; width: auto; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select { height: auto !important; min-height: 0 !important; display: inline-flex !important; align-items: center; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select::after, html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select::before { display: none !important; }
/* icon-only round buttons */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-close,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .iconbtn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .icon-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-icon-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .notification-bell-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dm-modal__close,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .mnd-close { width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; }
/* the little KPI drill arrows and inline table action buttons keep their compact size */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-kpi__link,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-kpi button,
html:root[data-design-mode][data-theme][data-palette] body#opt-house td .btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house td button { min-height: 32px !important; height: 32px !important; padding-left: 12px !important; padding-right: 12px !important; font-size: 13px !important; }

/* ---- custom selects inside form fields fill their column; in toolbars they hug content ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="field"] > .nx-select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="form-group"] > .nx-select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .mb-3 > .nx-select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .col > .nx-select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="col-"] > .nx-select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal .nx-select { display: flex !important; width: 100% !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="field"] > .nx-select .nx-select-trigger,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="form-group"] > .nx-select .nx-select-trigger,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .mb-3 > .nx-select .nx-select-trigger,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .col > .nx-select .nx-select-trigger,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="col-"] > .nx-select .nx-select-trigger,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .modal .nx-select .nx-select-trigger { width: 100% !important; flex: 1 1 auto; }
/* section titles inside form cards are labels, not display type */
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="section-title"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="section-heading"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="card-eyebrow"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pcf-section-title, html:root[data-design-mode][data-theme][data-palette] body#opt-house .pcf-legend,
html:root[data-design-mode][data-theme][data-palette] body#opt-house legend {
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
}

/* ---- inline score selects inside tables (Problem Clients, ledger): compact pills ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house td select.score-select.score-select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house td select.form-select-sm.form-select-sm,
html:root[data-design-mode][data-theme][data-palette] body#opt-house td select:not([multiple]):not([size]) {
  min-height: 32px !important; height: 32px !important; font-size: 12.5px !important; font-weight: 600 !important; padding: 0 24px 0 10px !important;
  width: auto; min-width: 0; max-width: 100%; border-radius: var(--hs-radius-pill) !important; background-size: 12px !important; background-position: right 9px center !important; line-height: 1 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house td .form-control,
html:root[data-design-mode][data-theme][data-palette] body#opt-house td input[type="text"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house td input[type="number"] { min-height: 32px !important; height: 32px !important; font-size: 13px !important; padding: 0 10px !important; }

/* ---- KPI icon tiles: soft yellow square, ink icon (matches the account manager page) ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="kpi"] [class*="icon"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="stat"] [class*="icon"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="kpi"] [class*="-ico"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house .co-kpi-icon, html:root[data-design-mode][data-theme][data-palette] body#opt-house .kpi-ico {
  background: rgba(244, 225, 74, .55) !important; color: var(--hs-ink) !important; border-radius: 12px !important; border: 0 !important;
}

/* ---- custom select widget (.nx-select, custom-select.js): the visible trigger is what users see ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select-trigger,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select-sm .nx-select-trigger {
  min-height: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; gap: 10px;
  padding: 0 38px 0 14px !important; font-family: var(--hs-font-body) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--hs-ink) !important;
  background-color: var(--hs-paper) !important; border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-input) !important; box-shadow: var(--hs-shadow-input) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8d96' stroke-width='2.4' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 13px center !important; background-size: 15px !important; text-transform: none !important; letter-spacing: 0 !important; box-sizing: border-box !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select-trigger::after { display: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select-trigger:hover { border-color: #d8cfac !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select.open .nx-select-trigger,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select-trigger:focus,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select-trigger:focus-visible { border-color: var(--hs-yellow) !important; box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important; outline: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select-dropdown {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: 14px !important; box-shadow: var(--hs-shadow-tile) !important; padding: 6px !important; margin-top: 6px;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select-option { font-family: var(--hs-font-body) !important; font-size: 14px !important; color: var(--hs-ink) !important; border-radius: 9px !important; padding: 8px 12px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select-option:hover { background: #f1efe3 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-select-option.selected { background: var(--hs-yellow) !important; color: #1a1700 !important; }

/* ---- controls never shout: normal case, no letter-spacing on inputs and selects ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-control,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn { font-weight: 600 !important; }

/* ---- search inputs with a leading icon: keep room for the icon ----------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="search"] > i + input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="search"] > svg + input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="search"] > span + input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="search"] > .bi + input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .input-icon input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .has-icon input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house input[class*="search"][class*="icon"] { padding-left: 40px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search-field input { padding-left: 36px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search-field .topbar-search-icon { left: 14px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="search"] > i:first-child,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="search"] > svg:first-child { left: 14px !important; color: var(--hs-ink-mute) !important; }

/* ---- scrollbars and focus -------------------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house ::-webkit-scrollbar { width: 8px; height: 8px; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house ::-webkit-scrollbar-thumb { background: #dcd8c9; border-radius: 999px; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house ::-webkit-scrollbar-track { background: transparent; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house :focus-visible { outline: none; box-shadow: 0 0 0 4px var(--hs-yellow-ring); border-radius: 8px; }

/* ---- dev-only UI inspector pill: keep it out of the way ------------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #uiInspectorToggle, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ui-inspector-pill { opacity: .35; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house #uiInspectorToggle:hover, html:root[data-design-mode][data-theme][data-palette] body#opt-house .ui-inspector-pill:hover { opacity: 1; }

/* Sidebar hover: one soft pill only. The old theme also painted the <li> white, slid in a yellow tick and nudged the row 2px right. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-item,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-item:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-menu li:hover { background: transparent !important; box-shadow: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-link::after,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-link:hover::after { display: none !important; content: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-link,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-link:hover { transform: none !important; transition: background-color .15s ease, color .15s ease !important; }

/* ---- Inter Tight for client names + the Client Brain title ------------------
   Ben, 10 Sep 2026: "the client company name should be the same Inter Tight
   font. I really dont like the Bethany font in [the client list] as well as
   the client brain main h1."
   These were caught by editorial-final.css §12 (.client-name) and its
   `body h1` catch-all (.cm-header h1 / .cb-page-title), both of which force
   var(--font-display) with !important. house.css loads after every editorial
   sheet, so matching that !important here wins on source order. Bethany stays
   everywhere else — other page titles, KPI numbers, modal titles.
   Both scopes are listed because the client list renders in the editorial
   overlay whether or not the house shell (body#opt-house) is on the page. */
html[data-design-mode="editorial"] body .client-name,
html[data-design-mode="editorial"] body .company-name,
html[data-design-mode="editorial"] body .cm-header h1,
html[data-design-mode="editorial"] body .cm-header h1 span.cm-client-name,
html[data-design-mode="editorial"] body .cb-page-title,
html[data-design-mode="editorial"] body .cb-client-name,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .client-name,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .company-name,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-header h1,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-header h1 span.cm-client-name,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cb-page-title,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cb-client-name {
  font-family: var(--hs-font-body) !important;
  letter-spacing: -.015em !important;
}
/* Serif at weight 400/500 reads fine, but Inter Tight at that weight looks
   thin next to the rest of the row/header — bump both back to semibold. */
html[data-design-mode="editorial"] body .client-name,
html[data-design-mode="editorial"] body .company-name,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .client-name,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .company-name {
  font-weight: 600 !important;
}
html[data-design-mode="editorial"] body .cm-header h1,
html[data-design-mode="editorial"] body .cb-page-title,
html[data-design-mode="editorial"] body .cb-client-name,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-header h1,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cb-page-title,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cb-client-name {
  font-weight: 700 !important;
}