/* ============================================================
   linq Light Theme — De-nuked edition (2026-05-02 audit)
   ------------------------------------------------------------
   The original light.css was a nuclear `!important`-everywhere
   sledgehammer to flip a dark-mode codebase to ink-on-bone.
   Now that the linq Brand Kit ships cream/ink as the default,
   most of those `!important`s actively break new components
   (.dx-pill-dark, .dx-stat--dark, .dx-page-tab.is-active, etc).

   Audit rules:
     - REMOVED `!important` from generic colour rules so component
       CSS can win without an arms race.
     - KEPT `!important` ONLY where it fights an inline style
       (`[style*="color:#fff"]`), a backdrop modal, the gradient
       sidebar/cmdbar (white-on-gradient), or a fixed drawer.
       Each kept `!important` has a comment explaining why.
   ============================================================ */

:root {
  --bg:              #F2EBDF;          /* Bone — paper */
  --bg-footer:       #EAE2CE;          /* Bone-warm */
  --card-bg:         #FAF6EE;          /* Panel cream */
  --card-border:     rgba(15,22,35,0.12);
  --text:            #0F1623;          /* Ink */
  --text-muted:      rgba(15,22,35,0.62);
  --text-faint:      rgba(15,22,35,0.42);
  /* Sidebar is a single locked identity — Ink #0F1623 → Ocean
     #3B5BDB. theme.py emits the same value. Fallback only. */
  --sidebar-bg:      linear-gradient(165deg, #0F1623 0%, #3B5BDB 100%);
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL TEXT COLOR — bone surface, ink text. No `!important` so
   components (dark pills, gradient buttons, tinted chips) can
   win on their own specificity.
   ══════════════════════════════════════════════════════════════ */
body {
  /* linq paper — bone surface with subtle Signal-warm + Ocean-cool
     halos. `!important` kept on body bg so dashboard-overrides.css
     and other page-scoped overrides can still flatten it cleanly. */
  background:
    radial-gradient(900px 650px at 88% 6%, rgba(234,106,44,0.05), transparent 60%),
    radial-gradient(800px 550px at 4% 92%, rgba(59,91,219,0.04), transparent 60%),
    #F2EBDF !important;
  background-attachment: fixed !important;
}

.main,
.main :where(*, h1, h2, h3, h4, h5, h6, p, span, div, td, th, a, label, li, dt, dd) {
  color: #1a1e2e;
}

/* Restore muted text for secondary elements. No `!important` —
   these are concrete component classes; component CSS wins
   naturally when it opts to. */
.main .stat-label,
.main .stat-row .label,
.main .pnl-row .pnl-label,
.main .widget-link,
.main .call-cell .cc-label,
.main .dash-sub,
.main .conv-preview,
.main .conv-time,
.main .msg-meta,
.main .thread-header-sub {
  color: rgba(0,0,0,0.5);
}
/* Inline-style overrides — `!important` required to beat the
   inline `style="color:..."` attribute (specificity 1,0,0,0). */
.main [style*="color:var(--text-muted)"],
.main [style*="color:var(--text-faint)"] {
  color: rgba(0,0,0,0.5) !important;
}

/* Restore faint text */
.main .empty-state,
.main .empty-state i,
.main .map-placeholder,
.main .map-placeholder span {
  color: rgba(0,0,0,0.32);
}

/* Green values (revenue, profit) */
.main .pnl-value.green {
  color: #16a34a;
}
/* Inline-style overrides — `!important` required to beat inline `style`. */
.main [style*="color:#86efac"],
.main [style*="color:#22c55e"],
.main [style*="color:var(--green)"] {
  color: #16a34a !important;
}

/* Red values (expenses) */
.main .pnl-value.red {
  color: #dc2626;
}
/* Inline-style overrides — `!important` required to beat inline `style`. */
.main [style*="color:#fca5a5"],
.main [style*="color:#ef4444"],
.main [style*="color:var(--red)"] {
  color: #dc2626 !important;
}

/* Teal / brand accent values */
.main .stat-value.teal,
.main .widget-big-stat.teal,
.main .widget-badge,
.main .widget-link {
  color: var(--brand);
}
/* Inline-style overrides — `!important` required to beat inline `style`. */
.main [style*="color:var(--brand-light)"],
.main [style*="color:var(--brand)"] {
  color: var(--brand) !important;
}

/* Inline-style overrides — `!important` required to beat inline `style`. */
.main [style*="color:#f97316"],
.main [style*="color:#fb923c"],
.main [style*="color:var(--orange)"] {
  color: #ea580c !important;
}
.main [style*="color:#3b82f6"],
.main [style*="color:#93c5fd"] {
  color: #2563eb !important;
}
.main [style*="color:#a78bfa"],
.main [style*="color:#7c3aed"],
.main [style*="color:#c4b5fd"] {
  color: #7c3aed !important;
}

/* Status badges — colored text on tinted bg. Inline-style overrides;
   `!important` required to beat inline `style="background:..."`. */
.main span[style*="background:rgba(34,197,94"] { color: #16a34a !important; }
.main span[style*="background:rgba(239,68,68"] { color: #dc2626 !important; }
.main span[style*="background:rgba(59,130,246"] { color: #2563eb !important; }
.main span[style*="background:rgba(249,115,22"] { color: #ea580c !important; }
.main span[style*="background:rgba(124,58,237"] { color: #7c3aed !important; }
.main span[style*="background:rgba(255,255,255"] { color: rgba(0,0,0,0.5) !important; }

/* Links should be brand color — :where() keeps specificity low so button classes win */
.main :where(a) { color: var(--brand); }
.main :where(a:hover) { color: var(--brand-hover, #173B6E); }

/* Table row links stay dark */
.main table a { color: #1a1e2e; }

/* Period tab active keeps white text on gradient bg */
.main .period-tab.active { color: #fff; }

/* Calendar / schedule event chips — colored bg with white label.
   Without this, the dark-text default would render the chip text
   in dark navy on a saturated chip, failing contrast. */
.main a.cal-event,
.main a.cal-event-pill,
.main span.cal-event,
.main span.cal-event-pill,
.main .cal-event,
.main .cal-event-pill {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.30);
}

/* Inline-style gradient buttons — `!important` required to beat
   inline `style="background:..."` plus the dark-text default. */
.main [style*="background:var(--brand-gradient)"],
.main a[style*="background:var(--brand-gradient)"],
.main button[style*="background:var(--brand-gradient)"] {
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   Mobile pill header — hamburger icon. `!important` kept because
   the icon sits on a transparent header that turns into glass on
   scroll; without it, the dark default leaks through.
   ══════════════════════════════════════════════════════════════ */
#sidebar-open { color: rgba(255,255,255,0.85) !important; }

/* ══════════════════════════════════════════════════════════════
   Sidebar dropdown (gradient sidebar context). `!important` kept
   because nav.css ships dark defaults for the gradient sidebar
   and these flip to the light dropdown surface.
   ══════════════════════════════════════════════════════════════ */
.sidebar-dropdown {
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.12) !important;
}
.sidebar-dropdown-item { color: rgba(0,0,0,0.7) !important; }
.sidebar-dropdown-item i { color: inherit !important; }
.sidebar-dropdown-item:hover {
  background: rgba(0,0,0,0.04) !important;
  color: #1a1e2e !important;
}
.sidebar-dropdown-danger { color: rgba(220,38,38,0.8) !important; }
.sidebar-dropdown-danger:hover {
  background: rgba(220,38,38,0.06) !important;
  color: #dc2626 !important;
}
.sidebar-dropdown-divider { background: rgba(0,0,0,0.06) !important; }

/* Masteradmin company switcher — overrides nav.css white-on-dark
   defaults for the light dropdown surface. `!important` kept so
   nav.css gradient-sidebar rules don't paint these invisible. */
.ma-switcher-label {
  color: rgba(0,0,0,0.45) !important;
}
.ma-switcher-search {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: #1a1e2e !important;
}
.ma-switcher-search::placeholder {
  color: rgba(0,0,0,0.35) !important;
}
.ma-switcher-search:focus {
  border-color: var(--brand) !important;
  background: #fff !important;
}
.ma-company-option { color: rgba(0,0,0,0.75) !important; }
.ma-company-option:hover {
  background: rgba(0,0,0,0.04) !important;
  color: #0f1220 !important;
}
.ma-company-option.active {
  background: var(--brand-tint-bg, rgba(14,115,119,0.08)) !important;
  color: var(--brand) !important;
}
.ma-co-icon {
  background: rgba(0,0,0,0.05) !important;
  color: rgba(0,0,0,0.6) !important;
}
.ma-company-option.active .ma-co-icon {
  background: var(--brand-tint-bg, rgba(14,115,119,0.12)) !important;
  color: var(--brand) !important;
}
.ma-co-trade { color: rgba(0,0,0,0.4) !important; }
.ma-company-option.active .ma-co-trade {
  color: var(--brand) !important;
  opacity: 0.65;
}
.ma-co-active-icon { color: var(--brand) !important; }
.ma-company-list {
  scrollbar-color: rgba(0,0,0,0.18) transparent !important;
}
.ma-company-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18) !important;
}

/* Command bar (gradient sidebar context). `!important` kept —
   nav.css defaults paint white-on-dark for sidebar items. */
.sidebar-cmdbar .cmdbar-search-icon {
  color: rgba(255,255,255,0.6);
}
.cmdbar-search {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: #fff !important;
}
.cmdbar-search::placeholder {
  color: rgba(255,255,255,0.6) !important;
}
.cmdbar-search:focus {
  background: #fff !important;
  border-color: var(--brand) !important;
  /* On focus the field flips to a white surface; without this, the
     unfocused `color: #fff` rule above leaves typed text invisible. */
  color: #1a1e2e !important;
}
.cmdbar-search:focus::placeholder { color: rgba(0,0,0,0.4) !important; }
.cmdbar-results {
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
.cmdbar-result-item {
  color: rgba(0,0,0,0.7) !important;
}
.cmdbar-result-item:hover {
  background: rgba(0,0,0,0.04) !important;
  color: #1a1e2e !important;
}
.cmdbar-result-item i {
  background: rgba(0,0,0,0.06) !important;
  color: rgba(0,0,0,0.5) !important;
}
.cmdbar-result-item .result-title {
  color: #1a1e2e !important;
}
.cmdbar-result-item .result-subtitle {
  color: rgba(0,0,0,0.45) !important;
}
.cmdbar-results-empty {
  color: rgba(0,0,0,0.35) !important;
}
.cmdbar-result-section {
  color: rgba(0,0,0,0.35) !important;
}
.cmdbar-create-btn {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.85) !important;
}
.cmdbar-create-btn:hover {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}
.cmdbar-create-btn.open {
  background: rgba(255,255,255,0.28) !important;
  color: #fff !important;
}
.cmdbar-create-menu {
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.12) !important;
}
.cmdbar-create-item {
  color: rgba(0,0,0,0.7) !important;
}
.cmdbar-create-item:hover {
  background: rgba(0,0,0,0.04) !important;
  color: #1a1e2e !important;
}

/* Collapse button — sits on gradient sidebar. `!important` kept. */
.sidebar-collapse-btn {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: rgba(255,255,255,0.75) !important;
}
.sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.20) !important;
  color: #fff !important;
}

/* Collapsed sidebar state rules — `!important` kept; these fight
   the `.sidebar-nav a` defaults from nav.css. */
.sidebar.collapsed .sidebar-nav a.active {
  background: transparent !important;
}
.sidebar.collapsed .sidebar-nav a i {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px;
}
.sidebar.collapsed .sidebar-nav a::after,
.sidebar.collapsed #notif-bell-sidebar::after {
  background: rgba(255,255,255,0.97) !important;
  color: #1a1e2e !important;
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}
.sidebar-nav a.kb-focus {
  background: rgba(0,0,0,0.06) !important;
  color: rgba(0,0,0,0.9) !important;
}

/* ══════════════════════════════════════════════════════════════
   VIOBAR + PILL HEADER — glass-dark material (intentional dark
   surface). `!important` kept so nothing flattens these.
   ══════════════════════════════════════════════════════════════ */
.viobar {
  background: linear-gradient(135deg,
    rgba(10, 37, 57, 0.55) 0%,
    rgba(14, 58, 79, 0.55) 55%,
    rgba(19, 91, 108, 0.55) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  box-shadow:
    0 0 0 6px rgba(10, 14, 26, 0.18),
    0 -6px 16px -8px rgba(10, 14, 26, 0.45) !important;
}
.viobar-item { color: rgba(255,255,255,0.6) !important; }
.viobar-item span { color: inherit !important; }
.viobar-item i { color: inherit !important; }
.viobar-item.active,
.viobar-item.active span,
.viobar-item.active i { color: #fff !important; }
.viobar-item.active::before { background: var(--brand-light, #14b8a6); }

.fvpill-header,
.fvpill-header.fvpill--glass {
  background: linear-gradient(135deg,
    rgba(10, 37, 57, 0.55) 0%,
    rgba(14, 58, 79, 0.55) 55%,
    rgba(19, 91, 108, 0.55) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 0 !important;
  border-radius: 0 0 22px 22px !important;
  box-shadow: none !important;
}
.fvpill-header.is-scrolled,
.fvpill-header.fvpill--glass.is-scrolled {
  background: linear-gradient(135deg,
    rgba(10, 37, 57, 0.65) 0%,
    rgba(14, 58, 79, 0.65) 55%,
    rgba(19, 91, 108, 0.65) 100%) !important;
}
@media (max-width: 1023px) {
  .sidebar {
    background: rgba(10, 14, 26, 0.72) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FAB — gradient variant keeps white icon. `!important` kept
   because fab.css and inline styles both touch this.
   ══════════════════════════════════════════════════════════════ */
.fab:not(.fab--white),
.fab:not(.fab--white) i,
.fab:not(.fab--white) span {
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.fab--white,
.fab--white i,
.fab--white span {
  color: #0f1220 !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE BACK BUTTON — fixed-position widget; `!important` kept
   so page CSS doesn't paint it.
   ══════════════════════════════════════════════════════════════ */
.mobile-back-btn, .mobile-back-btn i {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  color: rgba(0,0,0,0.5) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mobile-back-btn:active, .mobile-back-btn:active i {
  background: rgba(0,0,0,0.06) !important;
  color: rgba(0,0,0,0.8) !important;
}

/* ══════════════════════════════════════════════════════════════
   VIO PANEL — frosted-glass slide-up sheet. `!important` kept
   on translucent surfaces because page CSS often sets opaque bgs.
   ══════════════════════════════════════════════════════════════ */
.vio-panel {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border-top: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow: 0 -12px 40px -12px rgba(0,0,0,0.18);
}
.vio-panel :not(.vio-panel-action):not(.vio-panel-action *) { color: #1a1e2e; }
.vio-panel .vio-panel-action,
.vio-panel .vio-panel-action * { color: #1a1e2e; }
.vio-panel .vio-panel-action {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 20px -12px rgba(0,0,0,0.12);
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.vio-panel .vio-panel-action:hover {
  background: #ffffff;
  border-color: rgba(13,115,119,0.35);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 12px 24px -10px rgba(13,115,119,0.25);
  transform: translateY(-1px);
}
.vio-panel .vio-panel-action i {
  background: rgba(13,115,119,0.10);
  color: var(--brand, #0D7377);
}
.vio-panel .vio-panel-header > span { color: rgba(0,0,0,0.5); }
.vio-panel .vio-panel-select-btn {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  color: #1a1e2e;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background 0.15s, border-color 0.15s;
}
.vio-panel .vio-panel-select-btn:hover {
  background: #ffffff;
  border-color: rgba(13,115,119,0.35);
}
.vio-panel-handle { background: transparent; }

/* ══════════════════════════════════════════════════════════════
   CARDS & CONTAINERS — let component CSS win.
   ══════════════════════════════════════════════════════════════ */
.glass-card, [class*="glass"] {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.04),
    0 8px 32px rgba(0,0,0,0.06),
    0 0 0 1px rgba(255,255,255,0.9) inset;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
[class*="glass"]:hover {
  box-shadow:
    0 4px 12px rgba(0,0,0,0.06),
    0 12px 40px rgba(0,0,0,0.08),
    0 0 0 1px rgba(255,255,255,1) inset;
}

.top-stat, .widget {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.top-stat:hover, .widget:hover {
  border-color: rgba(255,255,255,0.8);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 12px 40px rgba(0,0,0,0.08);
}

.period-tabs {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
}

.progress-bar-track { background: rgba(0,0,0,0.06); }
.stat-row + .stat-row { border-top-color: rgba(0,0,0,0.06); }
.pnl-row.net { border-top-color: rgba(0,0,0,0.08); }
.call-cell { border-color: rgba(0,0,0,0.06); }

.map-placeholder {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════════════════════════
   INLINE-STYLED CONTAINERS — `!important` kept; these MUST beat
   inline `style="background:..."` from legacy templates.
   ══════════════════════════════════════════════════════════════ */
.main div[style*="background:var(--card-bg)"],
.main div[style*="background:rgba(255,255,255,0.04)"],
.main div[style*="background:rgba(255,255,255,0.06)"],
.main div[style*="background:rgba(255,255,255,0.08)"] {
  background: #fff !important;
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Inline-style border overrides — `!important` kept to beat inline `style`. */
.main [style*="border-bottom:1px solid rgba(255,255,255"] {
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
.main [style*="border-top:1px solid rgba(255,255,255"] {
  border-top-color: rgba(0,0,0,0.06) !important;
}
.main [style*="border:1px solid rgba(255,255,255"],
.main [style*="border:1px solid var(--card-border)"] {
  border-color: rgba(0,0,0,0.07) !important;
}

/* ══════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════ */
.main table { border-color: rgba(0,0,0,0.06); }
.main table thead tr { border-bottom-color: rgba(0,0,0,0.08); }
.main table tbody tr { border-bottom-color: rgba(0,0,0,0.05); }
.main table tbody tr:hover { background: rgba(0,0,0,0.02); }
.main table th { color: rgba(0,0,0,0.5); }
.main table td { color: #1a1e2e; }

/* ══════════════════════════════════════════════════════════════
   FORM INPUTS
   ══════════════════════════════════════════════════════════════ */
.main input, .main textarea, .main select {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
  color: #1a1e2e;
}
.main input:focus, .main textarea:focus, .main select:focus {
  border-color: var(--brand);
  background: #fff;
}
.main input::placeholder, .main textarea::placeholder {
  color: rgba(0,0,0,0.35);
}

/* ══════════════════════════════════════════════════════════════
   INBOX
   ══════════════════════════════════════════════════════════════ */
.inbox-layout { background: #fff; }
.inbox-list-panel { border-right-color: rgba(0,0,0,0.08); }
.inbox-list-header { border-bottom-color: rgba(0,0,0,0.08); }
.conv-row { border-bottom-color: rgba(0,0,0,0.06); }
.conv-row:hover, .conv-row.active { background: rgba(0,0,0,0.03); }
.msg-row.inbound .msg-bubble {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.08);
}
.thread-header {
  background: rgba(0,0,0,0.02);
  border-bottom-color: rgba(0,0,0,0.08);
}
.thread-reply {
  background: rgba(0,0,0,0.02);
  border-top-color: rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════════════════════════
   CONTEXT MENU & BULK BAR
   ══════════════════════════════════════════════════════════════ */
.vio-context-menu {
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.vio-context-menu * { color: #1a1e2e; }
.vio-context-menu-item:hover { background: rgba(0,0,0,0.04); }
.vio-context-menu-divider { border-color: rgba(0,0,0,0.08); }

.bulk-bar {
  background: rgba(255,255,255,0.95);
  border-top: 1px solid rgba(0,0,0,0.08);
}
.bulk-bar * { color: #1a1e2e; }

/* ══════════════════════════════════════════════════════════════
   SCROLLBARS
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* ══════════════════════════════════════════════════════════════
   SELECTED ROW
   ══════════════════════════════════════════════════════════════ */
[data-vio].selected {
  outline-color: var(--brand);
  background: var(--brand-tint-bg);
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD — Team strip, job board, up-next
   ══════════════════════════════════════════════════════════════ */

/* Team avatars need white text on coloured bg */
.main .team-avatar,
.main .team-avatar * { color: #fff; }
.main .team-job-count { color: #fff; border-color: #fff; }

/* Job board */
.main .job-row { border-bottom-color: rgba(0,0,0,0.06); }
.main .job-row:hover { background: rgba(0,0,0,0.02); }
.main .job-row.drop-target {
  background: var(--brand-tint-bg);
  border-color: var(--brand);
}

.main .job-tech-assigned { color: #fff; }
.main .job-tech-empty {
  border-color: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.3);
}
.main .job-row.drop-target .job-tech-empty {
  border-color: var(--brand);
  color: var(--brand);
}

/* Up-next cards */
.main .upnext-item {
  border-color: rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
}
.main .upnext-item.is-active {
  background: linear-gradient(135deg, rgba(13,115,119,0.08), rgba(20,184,166,0.05));
  border-color: rgba(13,115,119,0.2);
}
.main .upnext-step-active { color: #fff; }
.main .upnext-step-done { color: #16a34a; }
.main .upnext-btn-nav {
  background: rgba(0,0,0,0.05);
  color: #1a1e2e;
}
.main .upnext-btn-complete { color: #fff; }

/* Period filter */
.main .period-filter {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.06);
}
.main .period-btn { color: rgba(0,0,0,0.5); }
.main .period-btn:hover { background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.8); }
.main .period-btn.active { color: #fff; }

/* Status badges (initial defaults — overridden below for job detail) */
.main .badge-pending { color: #b45309; background: rgba(251,191,36,0.15); }
.main .badge-assigned,
.main .badge-en_route,
.main .badge-in_progress,
.main .badge-scheduled { color: #2563eb; background: rgba(59,130,246,0.12); }
.main .badge-completed,
.main .badge-invoiced { color: #16a34a; background: rgba(34,197,94,0.12); }
.main .badge-cancelled { color: rgba(0,0,0,0.4); background: rgba(0,0,0,0.05); }

/* Green stat value */
.main .dash-stat-value.green { color: #16a34a; }

/* Toast keeps white text */
.main .dash-toast { color: #fff; }

/* ══════════════════════════════════════════════════════════════
   EVENTS PAGE
   ══════════════════════════════════════════════════════════════ */
.main .ev-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.main .ev-card:hover {
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 12px 40px rgba(0,0,0,0.10);
}

.main .ev-name { color: #1a1e2e; }
.main .ev-type { color: var(--brand); }
.main .ev-venue { color: rgba(0,0,0,0.5); }
.main .ev-venue * { color: rgba(0,0,0,0.5); }

.main .ev-pill {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.55);
}
.main .ev-pill i { color: rgba(0,0,0,0.4); }

.main .ev-cap-bar-track { background: rgba(0,0,0,0.06); }

.main .ev-status-badge.planning,
.main .ev-status-badge.confirmed {
  background: var(--brand-tint-bg);
  color: var(--brand);
  border-color: var(--brand-tint-border);
}
.main .ev-status-badge.completed {
  background: rgba(34,197,94,0.10);
  color: #16a34a;
  border-color: rgba(34,197,94,0.20);
}
.main .ev-status-badge.cancelled {
  background: rgba(239,68,68,0.08);
  color: #dc2626;
  border-color: rgba(239,68,68,0.18);
}
.main .ev-status-badge.in_progress {
  background: rgba(59,130,246,0.10);
  color: #2563eb;
  border-color: rgba(59,130,246,0.18);
}

.main .ev-manage-link { color: var(--brand); }
.main .ev-manage-link i { color: var(--brand); }

.main .ev-card-footer {
  border-top: 1px solid rgba(0,0,0,0.05);
}

.main .ev-stat-chip {
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.main .ev-stat-chip .sc-label { color: rgba(0,0,0,0.45); }
.main .ev-stat-chip .sc-value { color: #1a1e2e; }
.main .ev-stat-chip .sc-value.accent { color: var(--brand); }
.main .ev-stat-chip .sc-value.green { color: #16a34a; }

.main .ev-toolbar h2 { color: #1a1e2e; }

.main .ev-empty {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
.main .ev-empty i { color: rgba(0,0,0,0.15); }

.main .ev-section-header h3 { color: rgba(0,0,0,0.4); }

.main .ev-grid.past .ev-card { opacity: 0.75; }

/* ══════════════════════════════════════════════════════════════
   GRADIENT BUTTONS — white text. `!important` kept on the inline-
   style attribute selectors (need to beat inline `style="..."`),
   removed from class selectors (specificity 0-2-0 wins on its own).
   ══════════════════════════════════════════════════════════════ */
.main .btn-ev,         .main .btn-ev *,
.main .btn-ev-sm,      .main .btn-ev-sm *,
.main .btn-submit,     .main .btn-submit *,
.main .btn-sell,       .main .btn-sell *,
.main .btn-brand,      .main .btn-brand *,
.main .btn-save,       .main .btn-save *,
.main .btn-action,     .main .btn-action *,
.main .btn-primary,    .main .btn-primary *,
.main .btn-new,        .main .btn-new *,
.main .btn-new-job,    .main .btn-new-job *,
.main .btn-new-event,  .main .btn-new-event *,
.main .btn-vio-primary,.main .btn-vio-primary *,
.main .btn-clock-in,   .main .btn-clock-in *,
.main .ps-btn-save,    .main .ps-btn-save *,
.main .pill--active,   .main .pill--active *,
.main .btn-add,        .main .btn-add *,
.main .auth-btn,       .main .auth-btn *,
.main .wiz-action,     .main .wiz-action *,
.main .period-tab.active {
  color: #fff;
}
/* Inline-style gradient buttons — `!important` required to beat inline `style`. */
.main [style*="background:var(--brand-gradient)"],
.main [style*="background:var(--brand-gradient)"] *,
.main [style*="background: var(--brand-gradient)"],
.main [style*="background: var(--brand-gradient)"] *,
.main [style*="linear-gradient"][style*="#0D7377"],
.main [style*="linear-gradient"][style*="#0D7377"] *,
.main [style*="linear-gradient"][style*="#14b8a6"],
.main [style*="linear-gradient"][style*="#14b8a6"] * {
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODALS — `!important` kept; these flip an entire backdrop
   subtree to white-on-dark and must beat every page rule.
   ══════════════════════════════════════════════════════════════ */
#add-modal-backdrop, #add-modal-backdrop *,
#edit-modal-backdrop, #edit-modal-backdrop * {
  color: rgba(255,255,255,0.85) !important;
}
#add-modal-backdrop input,
#add-modal-backdrop select,
#add-modal-backdrop textarea,
#edit-modal-backdrop input,
#edit-modal-backdrop select,
#edit-modal-backdrop textarea {
  color: #fff !important;
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
#add-modal-backdrop input::placeholder,
#add-modal-backdrop textarea::placeholder,
#edit-modal-backdrop input::placeholder,
#edit-modal-backdrop textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
}
#add-modal-backdrop h3,
#edit-modal-backdrop h3 {
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   A9 — light-mode legibility sweep for native controls.
   ══════════════════════════════════════════════════════════════ */
.main select option,
.main option {
  background: #fff;
  color: #1a1e2e;
}

.main .form-control,
.main .form-select,
.main input[type="text"],
.main input[type="email"],
.main input[type="password"],
.main input[type="tel"],
.main input[type="url"],
.main input[type="search"],
.main input[type="number"],
.main input[type="date"],
.main input[type="datetime-local"],
.main input[type="time"] {
  background: rgba(0,0,0,0.03);
  color: #1a1e2e;
  border-color: rgba(0,0,0,0.12);
}

.main .dropdown-menu {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.main .dropdown-menu .dropdown-item,
.main .dropdown-item {
  color: #1a1e2e;
}
.main .dropdown-menu .dropdown-item:hover,
.main .dropdown-item:hover,
.main .dropdown-item:focus {
  background: rgba(13,115,119,0.08);
  color: #0d7377;
}
.main .dropdown-divider {
  border-color: rgba(0,0,0,0.08);
}

.main .kpi-label,
.main .pa-kpi-label,
.main .widget-label,
.main .text-muted,
.main small.text-muted,
.main .eyebrow {
  color: rgba(0,0,0,0.55);
}

.main .pa-custom-range input[type="date"],
.main .pa-role-exclude input[type="date"] {
  background: #fff;
  color: #1a1e2e;
  border: 1px solid rgba(0,0,0,0.12);
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL SELECT / DATE — color-scheme override needs `!important`
   to beat glass.css's `color-scheme: dark`. Surface styling does not.
   ══════════════════════════════════════════════════════════════ */
.main select,
.main input[type="date"],
.main input[type="time"],
.main input[type="datetime-local"] {
  color-scheme: light !important;
}
.main select option,
.main .field select option,
.main select:not(.field select) option {
  background: #fff;
  color: #1a1e2e;
}
.main select:not(.field select) {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
  color: #1a1e2e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(0,0,0,0.4)' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

/* ══════════════════════════════════════════════════════════════
   MODALS — customer import, SMS, email
   ══════════════════════════════════════════════════════════════ */
.main .sms-modal,
.main .import-modal {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.main .sms-modal h3,
.main .import-modal h3 {
  color: #1a1e2e;
}
.main .sms-modal textarea,
.main .sms-modal #email-body {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.12);
  color: #1a1e2e;
}
.main .sms-modal textarea::placeholder {
  color: rgba(0,0,0,0.35);
}
.main .import-dropzone {
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.02);
}
.main .import-dropzone:hover,
.main .import-dropzone.dragover {
  background: rgba(13,115,119,0.04);
}
.main .import-file-info {
  background: rgba(0,0,0,0.03);
}
.main .import-preview th {
  border-bottom-color: rgba(0,0,0,0.10);
}
.main .import-preview td {
  border-bottom-color: rgba(0,0,0,0.05);
}
.main .btn-ghost {
  border-color: rgba(0,0,0,0.12);
  color: #1a1e2e;
}
.main .btn-ghost:hover {
  background: rgba(0,0,0,0.04);
}

/* ══════════════════════════════════════════════════════════════
   EVENTS DASHBOARD — override dark --ts-* variables
   ══════════════════════════════════════════════════════════════ */
.main .ts-dash {
  --ts-card: rgba(0,0,0,0.03);
  --ts-card-solid: #ffffff;
  --ts-glass: rgba(0,0,0,0.03);
  --ts-glass-border: rgba(13,115,119,0.15);
  --ts-border: rgba(0,0,0,0.07);
  --ts-white: #1a1e2e;
  --ts-muted: rgba(0,0,0,0.5);
  --ts-muted2: rgba(0,0,0,0.4);
  --ts-teal-dim: rgba(14,196,176,0.06);
  --ts-orange-dim: rgba(245,106,0,0.06);
}
/* Kill dark ambient glow orbs + dot/noise overlays. `!important`
   kept because the originals are positioned absolutely with their
   own bg — `display:none` must beat author CSS. */
.main .ts-dash::before,
.main .ts-dash::after,
.main .ts-dots,
.main .ts-noise {
  display: none !important;
}
/* Hero banner — light glass instead of dark */
.main .ts-hero {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(12px);
}
.main .ts-hero::before {
  background: linear-gradient(135deg, rgba(14,196,176,0.04) 0%, transparent 50%,
    rgba(245,106,0,0.03) 100%);
}
.main .ts-hero::after {
  background: linear-gradient(90deg, transparent, rgba(14,196,176,0.25), rgba(245,106,0,0.15), transparent);
}
.main .ts-hero-dots {
  opacity: 0.3;
}
.main .ts-hero-tag {
  color: rgba(0,0,0,0.45);
}
.main .ts-hero-title {
  color: #1a1e2e;
}
.main .ts-hero-title em {
  color: var(--ts-teal);
}
.main .ts-hero-sub {
  color: rgba(0,0,0,0.5);
}
.main .ts-widget,
.main .ts-section {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  backdrop-filter: none;
}
.main .ts-stat {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
}
.main .ts-action {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  backdrop-filter: none;
}
.main .ts-action:hover {
  background: rgba(13,115,119,0.06);
  border-color: rgba(13,115,119,0.2);
}
.main .ts-ev-row:hover {
  background: rgba(0,0,0,0.02);
}
.main .ts-widget-link {
  color: var(--ts-teal);
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR LIVE BADGE — visible against the gradient sidebar.
   `!important` kept; nav.css ships dark defaults for the sidebar.
   ══════════════════════════════════════════════════════════════ */
.live-nav-badge {
  color: rgba(255,255,255,0.7) !important;
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.live-nav-badge.live {
  color: #fff !important;
  background: rgba(239,68,68,0.85) !important;
  border-color: rgba(239,68,68,1) !important;
}
.live-nav-dot {
  background: rgba(255,255,255,0.45) !important;
}
.live-nav-badge.live .live-nav-dot {
  background: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   CUSTOMER LIST — floating bulk-action bar
   ══════════════════════════════════════════════════════════════ */
.main .cust-bulk-bar {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  color: #1a1e2e;
}
.main .cust-bulk-bar .btn-ghost,
.main .cust-bulk-bar button {
  color: #1a1e2e;
  border-color: rgba(0,0,0,0.12);
}
.main .cust-bulk-bar .btn-ghost:hover,
.main .cust-bulk-bar button:hover {
  background: rgba(0,0,0,0.04);
}

/* ══════════════════════════════════════════════════════════════
   PER-TEMPLATE hardcoded dark options
   ══════════════════════════════════════════════════════════════ */
.main .fg select option,
.main .role-select option,
.main .form-select option,
.main .status-form select option {
  background: #fff;
  color: #1a1e2e;
}

/* ══════════════════════════════════════════════════════════════
   JOB DETAIL — badge contrast fix (green-on-green → solid)
   ══════════════════════════════════════════════════════════════ */
.main .badge-completed,
.main .badge-invoiced {
  background: rgba(34,197,94,0.12);
  color: #15803d;
}
.main .badge-pending,
.main .badge-new {
  background: rgba(251,191,36,0.12);
  color: #a16207;
}
.main .badge-assigned,
.main .badge-en_route,
.main .badge-in_progress,
.main .badge-scheduled {
  background: rgba(59,130,246,0.12);
  color: #1d4ed8;
}
.main .badge-cancelled {
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.45);
}
.main .badge-pri-urgent,
.main .badge-pri-emergency {
  background: rgba(239,68,68,0.12);
  color: #b91c1c;
}
.main .badge-pri-high {
  background: rgba(251,191,36,0.12);
  color: #a16207;
}
.main .badge-pri-normal {
  background: rgba(59,130,246,0.12);
  color: #1d4ed8;
}

/* ══════════════════════════════════════════════════════════════
   MOMENTS MEDIA PAGE
   ══════════════════════════════════════════════════════════════ */
.main .like-badge {
  background: rgba(0,0,0,0.08);
  color: #1a1e2e;
}
.main .ctx-menu {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.main .ctx-menu button,
.main .ctx-menu a {
  color: #1a1e2e;
}
.main .ctx-menu button:hover,
.main .ctx-menu a:hover {
  background: rgba(0,0,0,0.04);
}
.main .sc-bar {
  background: rgba(0,0,0,0.04);
}
.main .sc-bar .sc-play {
  background: rgba(0,0,0,0.08);
  color: #1a1e2e;
}

/* ══════════════════════════════════════════════════════════════
   WEBSITE WALKTHROUGH — preview simulates external (often dark)
   sites. `!important` kept — without it, page text bleeds in.
   ══════════════════════════════════════════════════════════════ */
.main .wt-preview-chrome,
.main .wt-preview-chrome .pv-logo,
.main .wt-preview-chrome .pv-h1,
.main .wt-preview-chrome .pv-section-title,
.main .wt-preview-chrome .pv-feat-title,
.main .wt-preview-chrome .pv-cta-band h3,
.main .wt-preview-chrome .pv-form-submit,
.main .wt-preview-chrome .pv-nav-cta,
.main .wt-preview-chrome .pv-btn.primary {
  color: #fff !important;
}
.main .wt-preview-chrome .pv-sub,
.main .wt-preview-chrome .pv-nav-items span,
.main .wt-preview-chrome .pv-section-lead,
.main .wt-preview-chrome .pv-feat-body,
.main .wt-preview-chrome .pv-footer,
.main .wt-preview-chrome .pv-cta-band p,
.main .wt-preview-chrome .pv-field label,
.main .wt-preview-chrome .pv-field .pv-input,
.main .wt-preview-chrome .pv-stat-lbl,
.main .wt-preview-chrome .pv-btn.ghost {
  color: rgba(255,255,255,0.7) !important;
}
.main .wt-preview-chrome .wt-chrome-url {
  color: rgba(255,255,255,0.55) !important;
}
.main .wt-preview-chrome .pv-form-step-label,
.main .wt-preview-chrome .pv-eyebrow,
.main .wt-preview-chrome .pv-stat-val {
  color: var(--pv-accent, #14b8a6) !important;
}
.main .wt-preview-chrome .pv-stars { color: #fbbf24 !important; }

/* Light-theme preview variants — `!important` kept; need to win
   over the white-text rule above for these specific themes. */
.main .wt-preview-chrome .wt-theme-professional .pv-h1,
.main .wt-preview-chrome .wt-theme-professional .pv-section-title,
.main .wt-preview-chrome .wt-theme-professional .pv-feat-title,
.main .wt-preview-chrome .wt-theme-professional .pv-logo { color: #0f172a !important; }
.main .wt-preview-chrome .wt-theme-professional .pv-sub,
.main .wt-preview-chrome .wt-theme-professional .pv-section-lead,
.main .wt-preview-chrome .wt-theme-professional .pv-feat-body,
.main .wt-preview-chrome .wt-theme-professional .pv-nav-items span { color: rgba(15,23,42,0.65) !important; }

.main .wt-preview-chrome .wt-theme-salon .pv-h1,
.main .wt-preview-chrome .wt-theme-salon .pv-section-title,
.main .wt-preview-chrome .wt-theme-salon .pv-feat-title,
.main .wt-preview-chrome .wt-theme-salon .pv-logo { color: #831843 !important; }
.main .wt-preview-chrome .wt-theme-salon .pv-sub,
.main .wt-preview-chrome .wt-theme-salon .pv-section-lead,
.main .wt-preview-chrome .wt-theme-salon .pv-feat-body,
.main .wt-preview-chrome .wt-theme-salon .pv-nav-items span { color: rgba(131,24,67,0.65) !important; }

.main .wt-preview-chrome .wt-theme-medical .pv-h1,
.main .wt-preview-chrome .wt-theme-medical .pv-section-title,
.main .wt-preview-chrome .wt-theme-medical .pv-feat-title,
.main .wt-preview-chrome .wt-theme-medical .pv-logo { color: #0c4a6e !important; }
.main .wt-preview-chrome .wt-theme-medical .pv-sub,
.main .wt-preview-chrome .wt-theme-medical .pv-section-lead,
.main .wt-preview-chrome .wt-theme-medical .pv-feat-body,
.main .wt-preview-chrome .wt-theme-medical .pv-nav-items span { color: rgba(12,74,110,0.65) !important; }

.main .wt-preview-chrome .wt-theme-cleaning .pv-h1,
.main .wt-preview-chrome .wt-theme-cleaning .pv-section-title,
.main .wt-preview-chrome .wt-theme-cleaning .pv-feat-title,
.main .wt-preview-chrome .wt-theme-cleaning .pv-logo { color: #064e3b !important; }
.main .wt-preview-chrome .wt-theme-cleaning .pv-sub,
.main .wt-preview-chrome .wt-theme-cleaning .pv-section-lead,
.main .wt-preview-chrome .wt-theme-cleaning .pv-feat-body,
.main .wt-preview-chrome .wt-theme-cleaning .pv-nav-items span { color: rgba(6,78,59,0.65) !important; }

.main .wt-preview-chrome .wt-theme-shop .pv-h1,
.main .wt-preview-chrome .wt-theme-shop .pv-section-title,
.main .wt-preview-chrome .wt-theme-shop .pv-feat-title,
.main .wt-preview-chrome .wt-theme-shop .pv-logo { color: #0f172a !important; }
.main .wt-preview-chrome .wt-theme-shop .pv-sub,
.main .wt-preview-chrome .wt-theme-shop .pv-section-lead,
.main .wt-preview-chrome .wt-theme-shop .pv-feat-body,
.main .wt-preview-chrome .wt-theme-shop .pv-nav-items span { color: rgba(15,23,42,0.65) !important; }

.main .wt-preview-chrome .wt-theme-blog .pv-h1,
.main .wt-preview-chrome .wt-theme-blog .pv-section-title,
.main .wt-preview-chrome .wt-theme-blog .pv-feat-title,
.main .wt-preview-chrome .wt-theme-blog .pv-logo { color: #1a1a1a !important; }
.main .wt-preview-chrome .wt-theme-blog .pv-sub,
.main .wt-preview-chrome .wt-theme-blog .pv-section-lead,
.main .wt-preview-chrome .wt-theme-blog .pv-feat-body,
.main .wt-preview-chrome .wt-theme-blog .pv-nav-items span { color: rgba(26,26,26,0.65) !important; }

/* Variant picker + stepper + summary panels render on page bg. */
.main .wt-variant-label { color: #1a1e2e; }
.main .wt-variant-desc,
.main .wt-panel-sub,
.main .wt-panel-title,
.main .wt-step-pill,
.main .wt-nav-hint,
.main .form-label,
.main .form-helper,
.main .wt-summary-row span:first-child { color: rgba(0,0,0,0.55); }
.main .wt-summary-row span:last-child { color: #1a1e2e; }
.main .wt-step-pill.active { color: #1a1e2e; }
.main .wt-step-pill.active .wt-step-num,
.main .wt-step-pill.done .wt-step-num { color: #fff; }