/* Page chrome only: transaction/receipt components intentionally keep their styles. */
.feed-page { background: #f5f7fa; }
.feed-page-header { box-shadow: 0 2px 12px rgb(15 23 42 / 3%); }
.feed-review-badge { padding: 5px 10px; border-radius: 999px; background: #fff8eb; border: 1px solid #fdebc8; font-size: 12px; }
.feed-workspace { width: 100%; margin-inline: auto; }
.feed-page .feed-content { background: transparent; scrollbar-width: thin; scrollbar-color: #c7d1db transparent; }
.feed-quick-filters { margin: 16px 0 8px; padding: 12px; background: #fff; border: 1px solid #e5eaf0; border-radius: 16px; box-shadow: 0 3px 12px rgb(15 23 42 / 3%); }
.feed-quick-filters > button { border-color: transparent; background: #f4f6f8; border-radius: 9px; min-height: 34px; transition: background .15s, color .15s; }
.feed-quick-filters > button:hover { background: #e9f6f0; color: #047857; }
.feed-quick-filters > button[aria-pressed='true'] { background: #e0f5eb; border-color: #a7dfc7; color: #065f46; box-shadow: none; }
.feed-quick-filters > button:focus-visible, .feed-side-card button:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
.feed-side-card { border: 1px solid #e5eaf0; border-radius: 18px; box-shadow: 0 4px 18px rgb(15 23 42 / 3%); }
.feed-side-card h2 { font-size: 15px; letter-spacing: -.01em; }
.feed-stats-caption { margin-bottom: 20px; color: #64748b; font-size: 12px; line-height: 1.5; }
.feed-side-card .text-2xl { font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
@media (min-width: 1024px) {
  .feed-workspace { max-width: 1120px; grid-template-columns: minmax(0, 720px) minmax(260px, 320px); gap: 24px; padding: 0 24px; }
  .feed-filters { min-height: 0; overflow-y: auto; padding: 16px 0 24px; scrollbar-width: thin; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .feed-quick-filters { margin-inline: 16px; }
}
@media (max-width: 767px) {
  .feed-page-header { box-shadow: 0 2px 8px rgb(15 23 42 / 4%); }
}
html.dark .feed-page { background: #0e1823; }
html.dark .feed-page .feed-side-card, html.dark .feed-page .feed-quick-filters { background: #172330; border-color: #2a394a; box-shadow: none; }
html.dark .feed-page .feed-quick-filters > button { background: #213142; color: #d6e1eb; border-color: transparent; }
html.dark .feed-page .feed-quick-filters > button:hover, html.dark .feed-page .feed-quick-filters > button[aria-pressed='true'] { background: #133e35; color: #a7f3d0; border-color: #276451; }
html.dark .feed-review-badge { background: #332a19; border-color: #594526; }
html.dark .feed-stats-caption { color: #9bafc3; }

/* Feed wallpaper: chat doodles in the Transactions navy-blue palette. */
html.crm-glass body .feed-page,
html.crm-glass.dark body .feed-page {
  background-color: #030b2d;
  background-image: url('/images/feed-doodles-blue-492d69918cd7.svg'),
    radial-gradient(ellipse at 20% 0%, #12346a 0%, transparent 70%),
    linear-gradient(145deg, #071b43 0%, #030b2d 75%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 480px 480px, 100% 100%, 100% 100%;
  background-position: center top;
}
html.crm-glass .feed-page .feed-content { scrollbar-color: #6483b3 transparent; }
/* Only labels outside the transaction cards sit directly on the wallpaper. */
html.crm-glass .feed-page .feed-content h2.text-gray-500 { color: #e0ebff; }
html.crm-glass .feed-page .feed-content h2.text-gray-500 + span { color: #b5caea; }
html.crm-glass .feed-page .feed-content > .border-b { border-color: #91b9ed24; }
html.crm-glass .feed-page .feed-content > [role='status'],
html.crm-glass .feed-page .feed-content .py-4.text-center.text-gray-500,
html.crm-glass .feed-page .feed-content > .text-center > p { color: #b5caea; }
html.crm-glass .feed-page .feed-content > .text-center > h3 { color: #e0ebff; }
html.crm-glass .feed-page .feed-content > [role='status'] .text-red-600 { color: #ffb2bd; }
html.crm-glass .feed-page .feed-content > [role='status'] button,
html.crm-glass .feed-page .feed-content > .justify-center > button { color: #8ce7cd; }
html.crm-glass .feed-page .feed-content > .justify-center > button:hover { color: #065f46; }
@media (max-width: 640px) {
  html.crm-glass body .feed-page, html.crm-glass.dark body .feed-page {
    background-size: 400px 400px, 100% 100%, 100% 100%;
  }
}
/* A single glass surface in both widths; opacity never fades the controls. */
@media (min-width: 1280px) {
  html.crm-glass .desktop-sidebar-rail .desktop-sidebar-panel {
    background: rgb(241 250 245 / 58%);
    border-right-color: rgb(255 255 255 / 58%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    box-shadow: 6px 0 24px -14px rgb(22 63 45 / 22%), inset -1px 0 rgb(255 255 255 / 38%);
  }

  html.crm-glass .desktop-sidebar-rail .desktop-sidebar-panel[data-expanded='true'] {
    box-shadow: 14px 0 38px -18px rgb(22 63 45 / 24%), inset -1px 0 rgb(255 255 255 / 38%);
  }

  html.crm-glass.dark .desktop-sidebar-rail .desktop-sidebar-panel {
    background: rgb(19 37 29 / 62%);
    border-right-color: rgb(193 222 207 / 16%);
    box-shadow: 6px 0 24px -14px rgb(0 0 0 / 35%), inset -1px 0 rgb(217 243 230 / 6%);
  }

  /* Let the existing single decorative layer reach behind the reserved rail.
     Fixed positioning escapes the scrolling page without moving any content. */
  html.crm-glass .transactions-page .transactions-space-background { position: fixed; }

  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-rail .desktop-sidebar-panel {
    background: linear-gradient(180deg, rgb(111 146 190 / 18%), rgb(51 81 132 / 12%)), rgb(12 29 61 / 38%);
    border-right-color: rgb(211 230 255 / 20%);
    box-shadow: 8px 0 28px -16px rgb(0 7 31 / 40%), inset -1px 0 rgb(226 239 255 / 8%);
  }

  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel[data-expanded='true'] {
    box-shadow: 16px 0 40px -18px rgb(0 7 31 / 48%), inset -1px 0 rgb(226 239 255 / 12%);
  }

  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel :is(.sidebar-nav-icon, .sidebar-nav-label, .sidebar-pin-button, .sidebar-brand > span) { color: #dce9f7; }

  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel :is(.sidebar-nav-item, .sidebar-pin-button, .sidebar-user-chip):hover { background: rgb(220 238 255 / 12%); }

  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel .sidebar-nav-item[aria-current='page'],
  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel[data-pinned='true'] .sidebar-pin-button {
    background: rgb(133 234 204 / 18%);
    box-shadow: inset 0 0 0 1px rgb(173 255 228 / 24%), 0 2px 10px rgb(0 12 32 / 10%);
  }

  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel .sidebar-nav-item:is(:hover, [aria-current='page']) :is(.sidebar-nav-label, .sidebar-nav-icon), html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel .sidebar-pin-button:hover, html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel[data-pinned='true'] .sidebar-pin-button { color: #afffe1; }

  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel button:focus-visible { outline-color: #afffe1; }
  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel .sidebar-user-chip > div:first-child { background: rgb(150 242 210 / 18%) !important; color: #b6fce2 !important; }
  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel .sidebar-user-chip .text-gray-600 { color: #cfdeef; }
  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel .sidebar-footer { background: rgb(6 19 46 / 12%); border-color: rgb(211 230 255 / 12%); }
  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel .sidebar-footer button { color: #dce9f7; }
  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel .sidebar-footer button:hover { background: rgb(220 238 255 / 12%); }
  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel .sidebar-footer button.text-red-600 { color: #ffaab7; }
  html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel:is(:hover, :focus-within) .soft-scrollbar { --scroll-thumb: rgb(209 229 251 / 32%); --scroll-thumb-hover: rgb(209 229 251 / 50%); }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.crm-glass .desktop-sidebar-rail .desktop-sidebar-panel { background: #f0f8f3; }
    html.crm-glass.dark .desktop-sidebar-rail .desktop-sidebar-panel { background: #172c21; }
    html.crm-glass:has(.transactions-space-background) .desktop-sidebar-rail .desktop-sidebar-panel { background: #142b4b; }
  }

  @media (prefers-reduced-transparency: reduce) {
    html.crm-glass .desktop-sidebar-rail .desktop-sidebar-panel { background: #f0f8f3; }
    html.crm-glass.dark .desktop-sidebar-rail .desktop-sidebar-panel { background: #172c21; }
    html.crm-glass:has(.transactions-space-background) .desktop-sidebar-rail .desktop-sidebar-panel { background: #142b4b; }
  }

  @media (forced-colors: active) {
    html.crm-glass .desktop-sidebar-rail .desktop-sidebar-panel,
    html.crm-glass:has(.transactions-space-background) .desktop-sidebar-rail .desktop-sidebar-panel {
      background: Canvas; border-right-color: CanvasText; box-shadow: none; backdrop-filter: none;
    }
    html.crm-glass:has(.transactions-space-background) .desktop-sidebar-panel :is(.sidebar-nav-icon, .sidebar-nav-label, .sidebar-pin-button, .sidebar-brand > span, .sidebar-footer button) { color: ButtonText; }
  }
}

/* Shared colours for the floating dock and the sidebar's utility controls. */
html.crm-glass:root {
  --crm-glass-surface: rgb(241 250 245 / 58%);
  --crm-glass-solid: #f0f8f3;
  --crm-glass-edge: rgb(114 158 135 / 20%);
  --crm-glass-ink: #476759;
  --crm-glass-hover: rgb(255 255 255 / 48%);
  --crm-glass-control: rgb(255 255 255 / 18%);
  --crm-glass-active: rgb(98 197 145 / 18%);
  --crm-glass-active-edge: rgb(54 145 99 / 24%);
  --crm-glass-accent: #146b49;
  --crm-glass-danger: #b84759;
  --crm-glass-shadow: rgb(22 63 45 / 16%);
}

html.crm-glass.dark {
  --crm-glass-surface: rgb(19 37 29 / 62%);
  --crm-glass-solid: #172c21;
  --crm-glass-edge: rgb(193 222 207 / 16%);
  --crm-glass-ink: #d0e5d9;
  --crm-glass-hover: rgb(204 239 219 / 12%);
  --crm-glass-control: rgb(210 240 223 / 5%);
  --crm-glass-active: rgb(133 234 181 / 16%);
  --crm-glass-active-edge: rgb(173 255 215 / 24%);
  --crm-glass-accent: #afffe1;
  --crm-glass-danger: #ffaab7;
  --crm-glass-shadow: rgb(0 7 20 / 32%);
}

html.crm-glass:has(.transactions-space-background) {
  --crm-glass-surface: linear-gradient(180deg, rgb(111 146 190 / 18%), rgb(51 81 132 / 12%)), rgb(12 29 61 / 38%);
  --crm-glass-solid: #142b4b;
  --crm-glass-edge: rgb(211 230 255 / 20%);
  --crm-glass-ink: #dce9f7;
  --crm-glass-hover: rgb(220 238 255 / 12%);
  --crm-glass-control: rgb(211 230 255 / 5%);
  --crm-glass-active: rgb(133 234 204 / 18%);
  --crm-glass-active-edge: rgb(173 255 228 / 24%);
  --crm-glass-accent: #afffe1;
  --crm-glass-danger: #ffaab7;
  --crm-glass-shadow: rgb(0 7 31 / 36%);
}

/* This direct-child surface exists only in the desktop dock. Scoped !important
   declarations override the application's global dark Tailwind overrides. */
@media (min-width: 768px) {
  html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) {
    padding: 8px;
    gap: 6px;
    border: 1px solid var(--crm-glass-edge) !important;
    border-radius: 20px;
    background: var(--crm-glass-surface) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    box-shadow: 0 8px 28px -10px var(--crm-glass-shadow), inset 0 1px rgb(255 255 255 / 9%);
  }

  html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) > button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--crm-glass-ink) !important;
    background: var(--crm-glass-control) !important;
    box-shadow: none;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  }

  html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) > button:is(:hover, [aria-expanded='true']) {
    color: var(--crm-glass-accent) !important;
    background: var(--crm-glass-hover) !important;
    border-color: var(--crm-glass-edge);
  }

  html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) > button.relative {
    color: var(--crm-glass-accent) !important;
    background: var(--crm-glass-active) !important;
    border-color: var(--crm-glass-active-edge);
  }

  html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) > button.relative.ring-2 {
    border-color: rgb(251 191 36 / 52%);
    box-shadow: 0 0 0 2px rgb(251 191 36 / 8%);
  }

  html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) > button.relative > span {
    --tw-ring-color: var(--crm-glass-solid);
    min-width: 19px;
    height: 19px;
    line-height: 19px;
    top: -4px;
    right: -4px;
  }

  html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) > button:focus-visible {
    outline: 2px solid var(--crm-glass-accent);
    outline-offset: 2px;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) { background: var(--crm-glass-solid) !important; }
  }
  @media (prefers-reduced-transparency: reduce) {
    html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) { background: var(--crm-glass-solid) !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) > button { transition: none; }
  }
}

@media (min-width: 1280px) {
  html.crm-glass .desktop-sidebar-panel .sidebar-footer { padding: 8px; }
  html.crm-glass .desktop-sidebar-panel .sidebar-footer > div { gap: 4px; }
  html.crm-glass .desktop-sidebar-panel .sidebar-footer > div.space-y-3 > * + * { margin-top: 0; }

  html.crm-glass .desktop-sidebar-panel .sidebar-footer > div > div.relative > button {
    width: 100%;
    min-height: 38px;
    gap: 12px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--crm-glass-ink) !important;
    background: transparent !important;
  }
  html.crm-glass .desktop-sidebar-panel .sidebar-footer > div > div.relative > button > span:not(.absolute) { margin-left: 0; }
  html.crm-glass .desktop-sidebar-panel .sidebar-footer > div > div.relative > button:hover {
    background: var(--crm-glass-hover) !important;
    color: var(--crm-glass-accent) !important;
  }
  html.crm-glass .desktop-sidebar-panel .sidebar-footer > div > div.relative > button.bg-emerald-50 {
    background: var(--crm-glass-active) !important;
    color: var(--crm-glass-accent) !important;
    border-color: var(--crm-glass-active-edge);
  }
  html.crm-glass .desktop-sidebar-panel .sidebar-footer > div > div.relative > button.text-red-600 { color: var(--crm-glass-danger) !important; }

  /* Both segmented controls fit the same row with identical height and radii. */
  html.crm-glass .desktop-sidebar-panel .sidebar-footer > div > div:has(> .inline-flex > button[aria-pressed]) {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 8px;
    padding: 5px 8px;
  }
  html.crm-glass .desktop-sidebar-panel .sidebar-footer .inline-flex:has(> button[aria-pressed]) {
    display: flex;
    min-width: 0;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--crm-glass-edge) !important;
    border-radius: 12px;
    background: var(--crm-glass-control) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 1px rgb(255 255 255 / 4%);
  }
  html.crm-glass .desktop-sidebar-panel .sidebar-footer .inline-flex > button[aria-pressed] {
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 11px;
    color: var(--crm-glass-ink) !important;
    background: transparent !important;
    box-shadow: none;
  }
  html.crm-glass .desktop-sidebar-panel .sidebar-footer .inline-flex > button[aria-pressed]:hover { background: var(--crm-glass-hover) !important; }
  html.crm-glass .desktop-sidebar-panel .sidebar-footer .inline-flex > button[aria-pressed='true'] {
    color: var(--crm-glass-accent) !important;
    background: var(--crm-glass-active) !important;
    border-color: var(--crm-glass-active-edge);
    box-shadow: 0 1px 4px rgb(0 15 30 / 5%);
  }

  html.crm-glass .desktop-sidebar-panel[data-expanded='false'] .sidebar-footer > div > div.relative > button {
    justify-content: center;
    padding: 8px;
  }
  html.crm-glass .desktop-sidebar-panel[data-expanded='false'] .sidebar-footer > div > .flex-col { gap: 4px; }
  html.crm-glass .desktop-sidebar-panel[data-expanded='false'] .sidebar-footer > div > .flex-col > button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    border: 1px solid var(--crm-glass-edge);
    border-radius: 11px;
    color: var(--crm-glass-ink) !important;
    background: var(--crm-glass-control) !important;
  }
  html.crm-glass .desktop-sidebar-panel[data-expanded='false'] .sidebar-footer > div > .flex-col > button:hover {
    color: var(--crm-glass-accent) !important;
    background: var(--crm-glass-hover) !important;
  }
  html.crm-glass .desktop-sidebar-panel[data-expanded='false'] button[data-testid='language-switcher'] > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  html.crm-glass .desktop-sidebar-panel[data-expanded='false'] button[data-testid='language-switcher'] > span > span {
    position: static;
    font-size: 9px;
    line-height: 10px;
  }
}

@media (forced-colors: active) {
  html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) {
    background: Canvas !important;
    border-color: CanvasText !important;
    box-shadow: none;
  }
  html.crm-glass [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) > button,
  html.crm-glass .desktop-sidebar-panel .sidebar-footer button {
    forced-color-adjust: auto;
    color: ButtonText !important;
    background: ButtonFace !important;
    border-color: ButtonText !important;
  }
  html.crm-glass .desktop-sidebar-panel .sidebar-footer button[aria-pressed='true'] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Glass dialogs share the navigation palette, with denser surfaces for reading.
   The search selector identifies TransactionsClientSearch's portal and search input;
   it also styles the unchanged markup in CSS-only production releases. */
html.crm-glass:root {
  --crm-dialog-surface: linear-gradient(145deg, rgb(255 255 255 / 36%), transparent 55%), rgb(239 248 243 / 86%);
  --crm-dialog-solid: #f0f8f3;
  --crm-dialog-ink: #244b3e;
  --crm-dialog-muted: #526f62;
  --crm-dialog-edge: rgb(78 123 99 / 22%);
  --crm-dialog-card: rgb(255 255 255 / 42%);
  --crm-dialog-hover: rgb(255 255 255 / 68%);
  --crm-dialog-active: rgb(48 167 112 / 14%);
  --crm-dialog-accent: #086341;
  --crm-dialog-warning: #805410;
  --crm-dialog-warning-fill: rgb(235 178 63 / 12%);
  --crm-dialog-danger: #a83942;
  --crm-dialog-scroll: rgb(74 116 96 / 35%);
}

html.crm-glass.dark {
  --crm-dialog-surface: linear-gradient(145deg, rgb(110 180 144 / 10%), transparent 55%), rgb(17 35 28 / 86%);
  --crm-dialog-solid: #142b21;
  --crm-dialog-ink: #e8f5ee;
  --crm-dialog-muted: #b5cdbf;
  --crm-dialog-edge: rgb(191 225 207 / 20%);
  --crm-dialog-card: rgb(216 246 230 / 6%);
  --crm-dialog-hover: rgb(216 246 230 / 11%);
  --crm-dialog-active: rgb(119 234 176 / 15%);
  --crm-dialog-accent: #afffe1;
  --crm-dialog-warning: #f5d18b;
  --crm-dialog-warning-fill: rgb(232 178 65 / 10%);
  --crm-dialog-danger: #ffb0b8;
  --crm-dialog-scroll: rgb(181 217 199 / 35%);
}

html.crm-glass:has(.transactions-space-background) {
  --crm-dialog-surface: linear-gradient(145deg, rgb(117 160 215 / 18%), transparent 60%), rgb(13 32 65 / 74%);
  --crm-dialog-solid: #162e50;
  --crm-dialog-ink: #edf5ff;
  --crm-dialog-muted: #b9cde5;
  --crm-dialog-edge: rgb(203 227 255 / 22%);
  --crm-dialog-card: rgb(201 223 255 / 7%);
  --crm-dialog-hover: rgb(201 223 255 / 12%);
  --crm-dialog-active: rgb(123 235 203 / 16%);
  --crm-dialog-accent: #afffe1;
  --crm-dialog-warning: #f7d795;
  --crm-dialog-warning-fill: rgb(241 187 74 / 10%);
  --crm-dialog-danger: #ffb0b8;
  --crm-dialog-scroll: rgb(177 206 240 / 38%);
}

html.crm-glass .crm-assistant-root .crm-assistant-panel,
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div {
  color: var(--crm-dialog-ink) !important;
  background: var(--crm-dialog-surface) !important;
  border: 1px solid var(--crm-dialog-edge);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(24px) saturate(125%) !important;
  backdrop-filter: blur(24px) saturate(125%) !important;
  box-shadow: 0 24px 80px -24px rgb(0 12 35 / 45%), inset 0 1px rgb(255 255 255 / 12%);
  color-scheme: normal;
}

html.crm-glass .crm-assistant-panel::backdrop,
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) {
  background: rgb(6 18 37 / 26%) !important;
}
html.crm-glass .crm-assistant-panel::backdrop {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

html.crm-glass .crm-assistant-panel .crm-assistant-head {
  background: linear-gradient(120deg, var(--crm-dialog-active), transparent);
  border-bottom: 1px solid var(--crm-dialog-edge);
  color: var(--crm-dialog-ink);
}
html.crm-glass .crm-assistant-panel .crm-assistant-eyebrow { color: var(--crm-dialog-accent); }
html.crm-glass .crm-assistant-panel :is(.crm-assistant-head p, .crm-assistant-welcome p, .crm-assistant-message small, .crm-assistant-pending, .crm-assistant-check p, .crm-assistant-footnote, .crm-assistant-compose > small, .crm-assistant-footer) {
  color: var(--crm-dialog-muted);
}
html.crm-glass .crm-assistant-panel .crm-assistant-head > button {
  width: 32px;
  height: 32px;
  color: var(--crm-dialog-ink);
  background: var(--crm-dialog-card);
  border: 1px solid var(--crm-dialog-edge);
}
html.crm-glass .crm-assistant-panel :is(.crm-assistant-tabs, .crm-assistant-compose, .crm-assistant-footer) {
  background: transparent;
  border-color: var(--crm-dialog-edge);
}
html.crm-glass .crm-assistant-panel .crm-assistant-tabs { padding: 10px 15px; gap: 6px; }
html.crm-glass .crm-assistant-panel .crm-assistant-tabs button {
  border: 1px solid transparent;
  color: var(--crm-dialog-muted);
}
html.crm-glass .crm-assistant-panel .crm-assistant-tabs button[aria-pressed='true'] {
  background: var(--crm-dialog-active);
  border-color: var(--crm-dialog-edge);
  color: var(--crm-dialog-accent);
}
html.crm-glass .crm-assistant-panel :is(.crm-assistant-messages, .crm-assistant-checks) {
  scrollbar-width: thin;
  scrollbar-color: var(--crm-dialog-scroll) transparent;
}
html.crm-glass .crm-assistant-panel :is(.crm-assistant-message, .crm-assistant-check, .crm-assistant-welcome button) {
  color: var(--crm-dialog-ink);
  background: var(--crm-dialog-card);
  border: 1px solid var(--crm-dialog-edge);
}
html.crm-glass .crm-assistant-panel .crm-assistant-message { border-radius: 5px 16px 16px; }
html.crm-glass .crm-assistant-panel .crm-assistant-message.user {
  background: var(--crm-dialog-active);
  border-radius: 16px 5px 16px 16px;
}
html.crm-glass .crm-assistant-panel :is(.crm-assistant-key-hint, .crm-assistant-check.needs-attention) {
  background: var(--crm-dialog-warning-fill);
  border-color: rgb(231 184 91 / 32%);
}
html.crm-glass .crm-assistant-panel :is(.crm-assistant-key-hint, .crm-assistant-tabs span, .needs-attention .crm-assistant-check-icon) {
  color: var(--crm-dialog-warning);
  background: var(--crm-dialog-warning-fill);
}
html.crm-glass .crm-assistant-panel :is(.crm-assistant-footer a, .crm-assistant-check button, .crm-assistant-checks-heading button, .crm-assistant-welcome > span) { color: var(--crm-dialog-accent); }
html.crm-glass .crm-assistant-panel .crm-assistant-check-icon { color: var(--crm-dialog-accent); background: var(--crm-dialog-active); }
html.crm-glass .crm-assistant-panel .crm-assistant-compose > div {
  background: var(--crm-dialog-card);
  border-color: var(--crm-dialog-edge);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
html.crm-glass .crm-assistant-panel .crm-assistant-compose > div:focus-within {
  border-color: var(--crm-dialog-accent);
  box-shadow: 0 0 0 3px var(--crm-dialog-active);
}
html.crm-glass .crm-assistant-panel .crm-assistant-compose textarea {
  color: var(--crm-dialog-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html.crm-glass .crm-assistant-panel .crm-assistant-compose textarea::placeholder { color: var(--crm-dialog-muted); opacity: 1; }
html.crm-glass .crm-assistant-panel .crm-assistant-compose button {
  border: 1px solid var(--crm-dialog-edge);
  background: var(--crm-dialog-active);
  color: var(--crm-dialog-accent);
}
html.crm-glass .crm-assistant-panel .crm-assistant-compose button[type='submit']:not(:disabled) { background: #a4efd5; color: #113e30; }
html.crm-glass .crm-assistant-panel .crm-assistant-compose .assistant-speech-button[aria-pressed='true'] { background: var(--crm-dialog-warning-fill); color: var(--crm-dialog-warning); border-color: currentColor; }
html.crm-glass .crm-assistant-panel .assistant-speech-status { background: var(--crm-dialog-solid); color: var(--crm-dialog-ink); border-color: var(--crm-dialog-edge); }
html.crm-glass .crm-assistant-panel .crm-assistant-error { color: var(--crm-dialog-danger); }
/* The reading-position button currently has inline styles. */
html.crm-glass .crm-assistant-panel > button {
  background: var(--crm-dialog-solid) !important;
  color: var(--crm-dialog-accent) !important;
  border-color: var(--crm-dialog-edge) !important;
}
html.crm-glass .crm-assistant-panel :is(.crm-assistant-head > button, .crm-assistant-tabs button, .crm-assistant-welcome button, .crm-assistant-compose button):hover:not(:disabled) { background: var(--crm-dialog-hover); color: var(--crm-dialog-accent); }
html.crm-glass .crm-assistant-panel :is(button, a):focus-visible { outline: 2px solid var(--crm-dialog-accent); outline-offset: 2px; }

html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) { padding-top: clamp(24px, 7dvh, 72px); }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div { min-height: 200px; max-width: 720px; }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div > div:first-child {
  padding: 16px 18px;
  gap: 10px;
  background: var(--crm-dialog-card) !important;
  border-color: var(--crm-dialog-edge);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) input {
  color: var(--crm-dialog-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) input::placeholder { color: var(--crm-dialog-muted); opacity: 1; }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div > div:first-child:focus-within { box-shadow: inset 0 -2px var(--crm-dialog-accent); }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) :is(.text-gray-900, .text-gray-700) { color: var(--crm-dialog-ink) !important; }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600) { color: var(--crm-dialog-muted) !important; }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) :is(.bg-gray-100, .bg-slate-100) { background: var(--crm-dialog-card) !important; border-color: var(--crm-dialog-edge); }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) :is(.bg-emerald-50, .bg-blue-50) { background: var(--crm-dialog-active) !important; color: var(--crm-dialog-accent) !important; border-color: var(--crm-dialog-edge); }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) .bg-amber-50 { background: var(--crm-dialog-warning-fill) !important; color: var(--crm-dialog-warning) !important; border-color: rgb(231 184 91 / 32%); }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) .divide-y > li { border-color: var(--crm-dialog-edge); }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) button:hover:not(:disabled) { background: var(--crm-dialog-hover) !important; color: var(--crm-dialog-accent) !important; }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) button:focus-visible { outline: 2px solid var(--crm-dialog-accent); outline-offset: -3px; }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div > div:first-child button { border-radius: 10px; min-height: 36px; }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div > div:last-child { scrollbar-width: thin; scrollbar-color: var(--crm-dialog-scroll) transparent; }
html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div > div:last-child > div { padding: 24px; line-height: 1.7; }

@media (max-width: 639px) {
  html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) { padding: 0; }
  html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div { border-radius: 0; border: 0; max-width: 100%; }
  html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div > div:first-child { padding: max(12px, env(safe-area-inset-top)) 12px 12px; gap: 6px; }
}
@media (max-width: 600px) {
  html.crm-glass .crm-assistant-root .crm-assistant-panel { border-radius: 24px 24px 0 0; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.crm-glass .crm-assistant-root .crm-assistant-panel, html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div { background: var(--crm-dialog-solid) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  html.crm-glass .crm-assistant-root .crm-assistant-panel, html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div { background: var(--crm-dialog-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.crm-glass .crm-assistant-panel::backdrop, html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.crm-glass .crm-assistant-panel .crm-assistant-compose > div { transition: none; }
}
@media (forced-colors: active) {
  html.crm-glass .crm-assistant-root .crm-assistant-panel, html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div { background: Canvas !important; color: CanvasText !important; border: 1px solid CanvasText; box-shadow: none; }
  html.crm-glass .crm-assistant-panel *, html.crm-glass body > [role='dialog'][aria-modal='true'].fixed:has(> div > div > input[inputmode='search']) > div * { forced-color-adjust: auto; }
}


/* Feed chrome shares one muted slate palette, including navigation outside the page. */
html.crm-glass:root {
  --feed-scene-base: #263f55;
  --feed-scene: url('/images/feed-doodles-slate-ba55fac04ea6.svg') center top / 480px 480px repeat,
    radial-gradient(ellipse at 18% 0%, #3d6278 0%, transparent 68%),
    linear-gradient(145deg, #304d63 0%, #21364b 100%);
  --crm-glass-surface: linear-gradient(180deg, rgb(191 218 230 / 12%), rgb(71 104 124 / 8%)), rgb(27 48 64 / 52%);
  --crm-glass-solid: #304b60;
  --crm-glass-edge: rgb(218 237 246 / 19%);
  --crm-glass-ink: #e5eef4;
  --crm-glass-hover: rgb(223 240 248 / 13%);
  --crm-glass-control: rgb(222 239 248 / 6%);
  --crm-glass-active: rgb(137 227 201 / 18%);
  --crm-glass-active-edge: rgb(175 247 225 / 27%);
  --crm-glass-accent: #b4f5df;
  --crm-glass-danger: #ffc1ca;
  --crm-glass-shadow: rgb(9 25 40 / 30%);
}
html.crm-glass:root.dark {
  --feed-scene-base: #203442;
  --feed-scene: url('/images/feed-doodles-slate-ba55fac04ea6.svg') center top / 480px 480px repeat,
    radial-gradient(ellipse at 18% 0%, #345362 0%, transparent 68%),
    linear-gradient(145deg, #294354 0%, #1b2e3d 100%);
  --crm-glass-surface: linear-gradient(180deg, rgb(173 207 224 / 9%), rgb(57 89 108 / 6%)), rgb(20 37 50 / 62%);
  --crm-glass-solid: #263e50;
}

html.crm-glass:root body .feed-page {
  background: var(--feed-scene) var(--feed-scene-base) !important;
}
/* Align the wallpaper across the page and the reserved navigation rail. */
@media (min-width: 1280px) {
  html.crm-glass:root .desktop-sidebar-rail { background: var(--feed-scene) var(--feed-scene-base); }
  html.crm-glass:root .desktop-sidebar-rail,
  html.crm-glass:root body .feed-page { background-attachment: fixed !important; }
  html.crm-glass:root .desktop-sidebar-rail .desktop-sidebar-panel {
    background: var(--crm-glass-surface);
    border-right-color: var(--crm-glass-edge);
    box-shadow: 8px 0 28px -16px var(--crm-glass-shadow), inset -1px 0 rgb(226 239 247 / 8%);
  }
  html.crm-glass:root .desktop-sidebar-panel[data-expanded='true'] {
    box-shadow: 16px 0 40px -18px var(--crm-glass-shadow), inset -1px 0 rgb(226 239 247 / 10%);
  }
  html.crm-glass:root .desktop-sidebar-panel :is(.sidebar-nav-icon, .sidebar-nav-label, .sidebar-pin-button, .sidebar-brand > span) { color: var(--crm-glass-ink); }
  html.crm-glass:root .desktop-sidebar-panel :is(.sidebar-nav-item, .sidebar-pin-button, .sidebar-user-chip):hover { background: var(--crm-glass-hover); }
  html.crm-glass:root .desktop-sidebar-panel .sidebar-nav-item[aria-current='page'],
  html.crm-glass:root .desktop-sidebar-panel[data-pinned='true'] .sidebar-pin-button {
    background: var(--crm-glass-active); box-shadow: inset 0 0 0 1px var(--crm-glass-active-edge);
  }
  html.crm-glass:root .desktop-sidebar-panel .sidebar-nav-item:is(:hover, [aria-current='page']) :is(.sidebar-nav-label, .sidebar-nav-icon), html.crm-glass:root .desktop-sidebar-panel .sidebar-pin-button:hover { color: var(--crm-glass-accent); }
  html.crm-glass:root .desktop-sidebar-panel button:focus-visible { outline-color: var(--crm-glass-accent); }
  html.crm-glass:root .desktop-sidebar-panel .sidebar-user-chip > div:first-child { background: var(--crm-glass-active) !important; color: var(--crm-glass-accent) !important; }
  html.crm-glass:root .desktop-sidebar-panel .sidebar-user-chip .text-gray-600 { color: var(--crm-glass-ink); }
  html.crm-glass:root .desktop-sidebar-panel .sidebar-footer { background: rgb(19 37 51 / 12%); border-color: var(--crm-glass-edge); }
  html.crm-glass:root .desktop-sidebar-panel:is(:hover, :focus-within) .soft-scrollbar { --scroll-thumb: rgb(209 229 241 / 32%); --scroll-thumb-hover: rgb(209 229 241 / 50%); }
}

html.crm-glass:root body .feed-page .feed-page-header {
  color: var(--crm-glass-ink);
  background: var(--crm-glass-surface);
  border-color: var(--crm-glass-edge);
  box-shadow: 0 5px 20px -12px var(--crm-glass-shadow), inset 0 -1px rgb(225 239 248 / 5%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
}
html.crm-glass:root body .feed-page-header :is(.text-gray-900, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) { color: var(--crm-glass-ink); }
html.crm-glass:root body .feed-page-header > .bg-white { background: transparent; border-color: var(--crm-glass-edge); }
html.crm-glass:root body .feed-page-header button.bg-gray-50 {
  background: var(--crm-glass-control); border-color: var(--crm-glass-edge);
}
html.crm-glass:root body .feed-page-header button[class*='hover:bg-gray-100']:hover { background: var(--crm-glass-hover); }
html.crm-glass:root body .feed-page-header button:not(.bg-emerald-500):not(.bg-red-50) svg { color: inherit; }
html.crm-glass:root body .feed-page-header input[type='search'] {
  background: rgb(13 32 47 / 26%); color: var(--crm-glass-ink);
  border: 1px solid var(--crm-glass-edge);
}
html.crm-glass:root body .feed-page-header input[type='search']::placeholder { color: #c2d4df; opacity: 1; }
html.crm-glass:root body .feed-page-header :is(button, input):focus-visible { outline: 2px solid var(--crm-glass-accent); outline-offset: 2px; }
html.crm-glass:root body .feed-page .feed-review-badge { background: rgb(255 199 96 / 11%); border-color: rgb(255 214 143 / 20%); color: #ffe0a6; }

html.crm-glass:root body .feed-page .feed-content { scrollbar-color: #9bb4c3 transparent; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.crm-glass:root .desktop-sidebar-rail .desktop-sidebar-panel,
  html.crm-glass:root body .feed-page .feed-page-header { background: var(--crm-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  html.crm-glass:root .desktop-sidebar-rail .desktop-sidebar-panel,
  html.crm-glass:root body .feed-page .feed-page-header { background: var(--crm-glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  html.crm-glass:root body .feed-page, html.crm-glass:root .desktop-sidebar-rail, html.crm-glass:root .desktop-sidebar-rail .desktop-sidebar-panel, html.crm-glass:root body .feed-page .feed-page-header { background: Canvas !important; color: CanvasText; backdrop-filter: none; }
  html.crm-glass:root body .feed-page-header :is(button, input, h1, svg), html.crm-glass:root .desktop-sidebar-panel :is(.sidebar-nav-icon, .sidebar-nav-label, .sidebar-pin-button, .sidebar-brand > span) { color: ButtonText; }
}

/* Dense translucent surfaces preserve contrast without a blur per virtual row. */
html.crm-glass:root {
  --slate-card: linear-gradient(145deg, rgb(202 227 240 / 9%), rgb(202 227 240 / 2%)), rgb(29 50 67 / 78%);
  --slate-card-solid: #2d485d;
  --slate-field: rgb(13 32 47 / 28%);
  --slate-ink: #edf5fa;
  --slate-muted: #c6d7e2;
  --slate-edge: rgb(212 233 245 / 17%);
  --slate-positive: #9debd0;
  --slate-negative: #ffb7c2;
  --slate-link: #b0dbff;
  --slate-warning: #ffe0a6;
}
html.crm-glass:root.dark {
  --slate-card: linear-gradient(145deg, rgb(173 205 224 / 5%), transparent), rgb(20 37 51 / 86%);
  --slate-card-solid: #263e50;
  --slate-field: rgb(8 23 34 / 38%);
}

/* TransactionCard's direct surface, not receipts, tooltips or the swipe-delete layer. */
html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-quick-filters, .feed-content .transform > .rounded-xl) {
  background: var(--slate-card); color: var(--slate-ink);
  border-color: var(--slate-edge);
  box-shadow: 0 6px 20px -15px rgb(7 22 35 / 42%), inset 0 1px rgb(226 242 250 / 5%);
}
html.crm-glass:root body .feed-content .transform > .rounded-xl.bg-red-50 { background: rgb(79 49 64 / 88%); border-color: rgb(255 173 190 / 38%); }
html.crm-glass:root body .feed-content .transform > .rounded-xl.bg-emerald-50 { background: rgb(31 70 67 / 88%); border-color: rgb(149 231 201 / 32%); }
html.crm-glass:root body .feed-content .transform > .rounded-xl.bg-gray-50 { background: rgb(44 58 70 / 88%); border-color: rgb(210 225 236 / 16%); }
html.crm-glass:root body .feed-page .feed-stats-caption { color: var(--slate-muted); }

html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-quick-filters, .feed-content .transform > .rounded-xl) :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--slate-ink); }
html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-quick-filters, .feed-content .transform > .rounded-xl) :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-gray-300) { color: var(--slate-muted); }
html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-quick-filters, .feed-content .transform > .rounded-xl) :is(.border-gray-100, .border-gray-200, .border-gray-300) { border-color: var(--slate-edge); }
html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-content .transform > .rounded-xl) :is(.text-red-500, .text-red-600, .text-red-700, .text-rose-700, .text-rose-900) { color: var(--slate-negative); }
html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-content .transform > .rounded-xl) :is(.text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800) { color: var(--slate-positive); }
html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-content .transform > .rounded-xl) :is(.text-blue-600, .text-blue-700, .text-blue-800) { color: var(--slate-link); }
html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-content .transform > .rounded-xl) :is(.text-amber-700, .text-amber-800) { color: var(--slate-warning); }
/* Preserve meaningful badge colours against translucent cards. */
html.crm-glass:root body .feed-content .transform > .rounded-xl :is(.bg-gray-50, .bg-gray-100) { background: rgb(220 237 247 / 9%); }
html.crm-glass:root body .feed-content .transform > .rounded-xl :is(.bg-red-50, .bg-red-100, .bg-rose-50) { background: rgb(255 130 154 / 12%); border-color: rgb(255 173 190 / 30%); }
html.crm-glass:root body .feed-content .transform > .rounded-xl :is(.bg-emerald-50, .bg-emerald-100) { background: rgb(112 226 183 / 12%); border-color: rgb(149 231 201 / 28%); }
html.crm-glass:root body .feed-content .transform > .rounded-xl .bg-blue-100 { background: rgb(130 194 255 / 12%); border-color: rgb(173 216 255 / 28%); }
html.crm-glass:root body .feed-content .transform > .rounded-xl :is(.bg-amber-50, .bg-amber-100) { background: rgb(255 202 111 / 12%); border-color: rgb(255 219 157 / 28%); }

html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-quick-filters) button {
  color: var(--slate-ink); border-color: var(--slate-edge);
}
html.crm-glass:root body .feed-page .feed-quick-filters > button,
html.crm-glass:root body .feed-page .feed-side-card button:is(.bg-white, .bg-gray-100) { background: rgb(218 237 247 / 7%); }
html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-quick-filters) button:hover { background: var(--crm-glass-hover); }
html.crm-glass:root body .feed-page .feed-quick-filters > button[aria-pressed='true'] { background: var(--crm-glass-active); border-color: var(--crm-glass-active-edge); color: var(--slate-positive); }
html.crm-glass:root body .feed-page .feed-quick-filters > button.bg-rose-50 { background: rgb(255 130 154 / 16%); color: var(--slate-negative); border-color: rgb(255 173 190 / 30%); }
html.crm-glass:root body .feed-page .feed-quick-filters > button span { background: rgb(224 241 250 / 10%); color: inherit; }
html.crm-glass:root body .feed-page .feed-side-card :is(input:not([type='checkbox']), select) {
  background: var(--slate-field); color: var(--slate-ink); border-color: var(--slate-edge); color-scheme: dark;
}
html.crm-glass:root body .feed-page .feed-side-card :is(input, select)::placeholder { color: var(--slate-muted); opacity: .85; }
html.crm-glass:root body .feed-page .feed-side-card select option { background: var(--slate-card-solid); color: var(--slate-ink); }
html.crm-glass:root body .feed-page .feed-side-card .bg-white { background: var(--slate-card-solid); }
html.crm-glass:root body .feed-page .feed-side-card :is(.bg-rose-50, .bg-rose-100) { background: rgb(255 130 154 / 12%); color: var(--slate-negative); }
html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-quick-filters) :is(input, select, button):focus-visible { outline: 2px solid var(--crm-glass-accent); outline-offset: 2px; }

/* The export action retains an emerald accent with the same glass treatment. */
html.crm-glass:root body .feed-page-header button.bg-emerald-500 {
  background: rgb(137 227 201 / 17%); color: var(--slate-positive);
  border: 1px solid var(--crm-glass-active-edge); box-shadow: inset 0 1px rgb(218 255 242 / 8%);
}
html.crm-glass:root body .feed-page-header button.bg-emerald-500:hover { background: rgb(137 227 201 / 26%); }
html.crm-glass:root body .feed-page-header button.bg-emerald-500 svg { color: inherit; }

/* Filter bottom sheet lives in a portal. A dense surface stops text showing through. */
html.crm-glass:root:has(.feed-page) [role='dialog'] > .absolute.bottom-0 {
  background: var(--slate-card-solid) !important; color: var(--slate-ink);
  border: 1px solid var(--slate-edge); backdrop-filter: none !important;
}
html.crm-glass:root:has(.feed-page) [role='dialog'] > .absolute.bottom-0 .bg-white { background: var(--slate-card-solid) !important; }
html.crm-glass:root:has(.feed-page) [role='dialog'] > .absolute.bottom-0 :is(.text-gray-900, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) { color: var(--slate-ink); }
html.crm-glass:root:has(.feed-page) [role='dialog'] > .absolute.bottom-0 :is(input:not([type='checkbox']), select) { background: var(--slate-field); color: var(--slate-ink); color-scheme: dark; border-color: var(--slate-edge); }
html.crm-glass:root:has(.feed-page) [role='dialog'] > .absolute.bottom-0 :is(input, select)::placeholder { color: var(--slate-muted); }
html.crm-glass:root:has(.feed-page) [role='dialog'] > .absolute.bottom-0 select option { background: var(--slate-card-solid); color: var(--slate-ink); }
html.crm-glass:root:has(.feed-page) [role='dialog'] > .absolute.bottom-0 button:is(.bg-white, .bg-gray-100) { background: rgb(218 237 247 / 8%) !important; color: var(--slate-ink); border-color: var(--slate-edge); }
html.crm-glass:root:has(.feed-page) [role='dialog'] > .absolute.bottom-0 span.bg-gray-100 { background: rgb(224 241 250 / 10%); color: var(--slate-muted); }
html.crm-glass:root:has(.feed-page) [role='dialog'] > .absolute.bottom-0 :is(.bg-rose-50, .bg-rose-100) { background: rgb(255 130 154 / 12%); color: var(--slate-negative); border-color: rgb(255 173 190 / 30%); }

/* Warehouse's existing header identifies its page at all breakpoints, even when hidden. */
html.crm-glass:root body .h-dvh:has(.warehouse-header) { background: var(--feed-scene) var(--feed-scene-base) !important; color: var(--slate-ink); }
@media (min-width: 1280px) { html.crm-glass:root body .h-dvh:has(.warehouse-header) { background-attachment: fixed !important; } }
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky {
  background: var(--crm-glass-surface) !important; border-color: var(--slate-edge) !important;
  box-shadow: 0 5px 20px -12px var(--crm-glass-shadow); backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%);
}
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky [style*='background'] { background: transparent !important; border-color: var(--slate-edge) !important; backdrop-filter: none !important; }
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky :is(h1, .text-gray-900, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400, [style*='color: rgb(55, 65, 81)'], [style*='color: rgb(17, 24, 39)']) { color: var(--slate-ink) !important; }
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky input:not([type='checkbox']) {
  background: var(--slate-field); color: var(--slate-ink); border: 1px solid var(--slate-edge); --tw-ring-color: transparent; box-shadow: none;
}
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky input::placeholder { color: var(--slate-muted); }
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky button { border-radius: 10px; }
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky button:hover { background: var(--crm-glass-hover) !important; }
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky button:is([style*='34, 197, 94'], .bg-emerald-500) { background: var(--crm-glass-active) !important; color: var(--slate-positive); border: 1px solid var(--crm-glass-active-edge); }
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky button:is([style*='239, 68, 68'], .bg-red-500) { background: rgb(255 130 154 / 13%) !important; color: var(--slate-negative); border: 1px solid rgb(255 173 190 / 28%); }
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky :is(.text-emerald-600, [style*='color: rgb(22, 163, 74)']) { color: var(--slate-positive) !important; }
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky .text-red-600 { color: var(--slate-negative); }
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky :is(button, input):focus-visible { outline: 2px solid var(--crm-glass-accent); outline-offset: 2px; }

html.crm-glass:root body .warehouse-list .group.bg-white {
  background: var(--slate-card); color: var(--slate-ink); border-color: var(--slate-edge); border-radius: 8px;
  box-shadow: inset 0 1px rgb(226 242 250 / 3%);
}
html.crm-glass:root body .warehouse-list .group.bg-white:hover { background: rgb(69 100 122 / 88%); border-color: rgb(212 233 245 / 30%); }
html.crm-glass:root body .warehouse-list .text-gray-900 { color: var(--slate-ink); }
html.crm-glass:root body .warehouse-list :is(.text-gray-500, .text-gray-300) { color: var(--slate-muted); }
html.crm-glass:root body .warehouse-list :is(.text-emerald-600, .text-emerald-500) { color: var(--slate-positive); }
html.crm-glass:root body .warehouse-list .text-red-600 { color: var(--slate-negative); }
html.crm-glass:root body .warehouse-list .text-blue-600 { color: var(--slate-link); }
html.crm-glass:root body .warehouse-list :is(.text-purple-500, .text-purple-600) { color: #dcc6ff; }
html.crm-glass:root body .warehouse-list :is(.bg-emerald-100, .bg-purple-100) { background: rgb(167 223 212 / 12%); border: 1px solid var(--slate-edge); }
html.crm-glass:root body .warehouse-list .group button:hover { background: rgb(222 240 248 / 10%); }
html.crm-glass:root body .h-dvh:has(.warehouse-header) > .flex-1 > div > .text-center :is(h3, p) { color: var(--slate-muted); }
html.crm-glass:root body .warehouse-list { scrollbar-color: #9bb4c3 transparent; }

@media (prefers-reduced-transparency: reduce) {
  html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-quick-filters, .feed-content .transform > .rounded-xl), html.crm-glass:root body .warehouse-list .group.bg-white { background: var(--slate-card-solid); }
  html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky { background: var(--crm-glass-solid) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  html.crm-glass:root body .h-dvh:has(.warehouse-header),
  html.crm-glass:root body .h-dvh:has(.warehouse-header) > .sticky,
  html.crm-glass:root body .feed-page :is(.feed-side-card, .feed-quick-filters, .feed-content .transform > .rounded-xl),
  html.crm-glass:root body .warehouse-list .group.bg-white { background: Canvas !important; color: CanvasText; border-color: CanvasText; }
}

/* Appearance is independent of light/dark mode. The authenticated provider
   owns crm-glass; public pages never receive it. The shared contrast rules in
   index.css use these tokens, so forms and portals follow the same palette. */
html.crm-glass:root {
  color-scheme: dark;
  --slate-card: linear-gradient(145deg, rgb(202 227 240 / 9%), rgb(202 227 240 / 2%)), rgb(29 50 67 / 78%);
  --slate-card-solid: #2d485d;
  --slate-field: rgb(13 32 47 / 28%);
  --slate-ink: #edf5fa;
  --slate-muted: #c6d7e2;
  --slate-edge: rgb(212 233 245 / 17%);
  --slate-positive: #9debd0;
  --slate-negative: #ffb7c2;
  --slate-link: #b0dbff;
  --slate-warning: #ffe0a6;
  --dk-bg: #263f55;
  --dk-bg-solid: #2d485d;
  --dk-bg-deep: #162d40;
  --dk-nav: rgb(32 55 73 / 94%);
  --dk-surface: rgb(29 50 67 / 82%);
  --dk-surface-2: rgb(202 227 240 / 4%);
  --dk-surface-3: rgb(202 227 240 / 7%);
  --dk-surface-4: rgb(202 227 240 / 11%);
  --dk-surface-5: rgb(202 227 240 / 15%);
  --dk-surface-6: rgb(202 227 240 / 20%);
  --dk-surface-raised: #3b566b;
  --dk-popover: #2d485d;
  --dk-surface-solid: #2d485d;
  --dk-surface-opaque: rgb(37 61 79 / 94%);
  --dk-input: var(--slate-field);
  --dk-input-opaque: #243e52;
  --dk-hover: rgb(223 240 248 / 7%);
  --dk-hover-2: rgb(223 240 248 / 11%);
  --dk-hover-3: rgb(223 240 248 / 15%);
  --dk-active: rgb(223 240 248 / 19%);
  --dk-selected: rgb(137 227 201 / 18%);
  --dk-overlay: rgb(7 22 35 / 62%);
  --dk-border-soft: rgb(212 233 245 / 10%);
  --dk-border: var(--slate-edge);
  --dk-border-strong: rgb(212 233 245 / 24%);
  --dk-border-x: rgb(212 233 245 / 30%);
  --dk-accent-border: #9debd0;
  --dk-ring: rgb(157 235 208 / 22%);
  --dk-text-primary: var(--slate-ink);
  --dk-text-body: #e1edf5;
  --dk-text-secondary: #d6e4ed;
  --dk-text-muted: var(--slate-muted);
  --dk-text-faint: #a9c0d0;
  --dk-text-disabled: #91a9ba;
  --dk-link: var(--slate-positive);
  --dk-success: var(--slate-positive);
  --dk-warning: var(--slate-warning);
  --dk-error: var(--slate-negative);
  --dk-info: var(--slate-link);
  --crm-dialog-surface: linear-gradient(145deg, rgb(188 219 236 / 8%), transparent 60%), rgb(30 51 69 / 96%);
  --crm-dialog-solid: var(--slate-card-solid);
  --crm-dialog-ink: var(--slate-ink);
  --crm-dialog-muted: var(--slate-muted);
  --crm-dialog-edge: var(--slate-edge);
  --crm-dialog-card: rgb(202 227 240 / 7%);
  --crm-dialog-hover: rgb(202 227 240 / 12%);
  --crm-dialog-active: var(--dk-selected);
  --crm-dialog-accent: var(--slate-positive);
  --crm-dialog-warning: var(--slate-warning);
  --crm-dialog-warning-fill: rgb(255 202 111 / 12%);
  --crm-dialog-danger: var(--slate-negative);
  --crm-dialog-scroll: #819eaf;
  scrollbar-color: #9bb4c3 transparent;
}
html.crm-glass.dark:root {
  --slate-card: linear-gradient(145deg, rgb(173 205 224 / 5%), transparent), rgb(20 37 51 / 86%);
  --slate-card-solid: #263e50;
  --slate-field: rgb(8 23 34 / 38%);
  --dk-bg: #203442;
  --dk-bg-solid: #263e50;
  --dk-bg-deep: #122536;
  --dk-nav: rgb(23 42 56 / 96%);
  --dk-surface: rgb(20 37 51 / 88%);
  --dk-surface-raised: #304b60;
  --dk-popover: #263e50;
  --dk-surface-solid: #263e50;
  --dk-surface-opaque: rgb(25 44 59 / 96%);
  --dk-input-opaque: #1b3143;
  --crm-dialog-surface: linear-gradient(145deg, rgb(173 207 224 / 6%), transparent 60%), rgb(20 37 50 / 97%);
}

html.crm-glass:root body { background: var(--feed-scene) var(--feed-scene-base); color: var(--slate-ink); }
html.crm-glass:root .crm-workspace { background: var(--feed-scene) var(--feed-scene-base); color: var(--slate-ink); }
html.crm-glass:root .crm-route-content { background: transparent; }
html.crm-glass:root .crm-route-content > :is(.min-h-screen, .h-dvh, .h-screen, .min-h-full, .h-full, .flex-1, .container):not(.transactions-page) { background: transparent !important; }
html.crm-glass:root .desktop-sidebar-rail { background: transparent; }

/* Sticky surfaces remain legible while scrolling. No per-card blur: it would
   make fixed dialogs children of a containing block and hurt long lists. */
html.crm-glass:root :is(header, .sticky, .fixed):is(.bg-white, [class^='bg-white/'], [class*=' bg-white/']),
html.crm-glass:root :is(.analytics-page-header, .analytics-mobile-filters, .client-card-header) {
  background: var(--dk-nav) !important;
  border-color: var(--slate-edge);
}
html.crm-glass:root [style*='background'] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.crm-glass:root .fixed.inset-0 :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100):not(.kp-paper, .kp-paper *, .hr-paper, .hr-paper *),
html.crm-glass:root :is([role='dialog'], [role='menu'], [role='listbox']) .bg-white:not(.kp-paper, .kp-paper *, .hr-paper, .hr-paper *) {
  background-color: var(--dk-surface-solid) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html.crm-glass:root :is(input, select, textarea) { color-scheme: dark; }
html.crm-glass:root :is(.text-red-500, .text-rose-500) { color: var(--slate-negative) !important; }
html.crm-glass:root button[style*='background: rgb(34, 197, 94)'] {
  background: rgb(137 227 201 / 18%) !important;
  color: var(--slate-positive) !important;
  box-shadow: inset 0 0 0 1px rgb(175 247 225 / 27%);
}
html.crm-glass:root button[style*='background: rgb(34, 197, 94)']:hover:not(:disabled) { background: rgb(137 227 201 / 28%) !important; }
html.crm-glass:root :is(input, select, textarea, button, a):focus-visible {
  outline: 2px solid var(--slate-positive); outline-offset: 2px;
}
html.crm-glass:root :is(button, a):is(.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600) {
  background-color: rgb(137 227 201 / 18%); color: var(--slate-positive);
  box-shadow: inset 0 0 0 1px rgb(175 247 225 / 27%);
}
html.crm-glass:root :is(button, a):is(.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600):hover:not(:disabled) { background-color: rgb(137 227 201 / 28%); }
html.crm-glass:root button:is(.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600) {
  background-color: rgb(255 130 154 / 18%); color: var(--slate-negative);
  box-shadow: inset 0 0 0 1px rgb(255 173 190 / 28%);
}
html.crm-glass:root button:is(.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600):hover:not(:disabled) { background-color: rgb(255 130 154 / 28%); }
html.crm-glass:root :is(button, a):is(.bg-blue-500, .bg-blue-600, .bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-purple-600) {
  background-color: rgb(139 194 247 / 18%); color: var(--slate-link);
  box-shadow: inset 0 0 0 1px rgb(173 216 255 / 28%);
}
html.crm-glass:root :is(button, a):is(.bg-blue-500, .bg-blue-600, .bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-purple-600):hover:not(:disabled) { background-color: rgb(139 194 247 / 28%); }
html.crm-glass:root :is(.from-gray-50, .from-gray-100, .from-slate-50, .from-slate-100, .from-zinc-50, .from-zinc-100, .from-neutral-50, .from-neutral-100, .from-stone-50, .from-stone-100, .from-white) {
  --tw-gradient-from: rgb(202 227 240 / 6%) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.crm-glass:root :is(.via-gray-50, .via-gray-100, .via-slate-50, .via-slate-100, .via-zinc-50, .via-zinc-100, .via-neutral-50, .via-neutral-100, .via-stone-50, .via-stone-100, .via-white) {
  --tw-gradient-via: rgb(202 227 240 / 3%) var(--tw-gradient-via-position) !important;
  --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}
html.crm-glass:root :is(.to-gray-50, .to-gray-100, .to-slate-50, .to-slate-100, .to-zinc-50, .to-zinc-100, .to-neutral-50, .to-neutral-100, .to-stone-50, .to-stone-100, .to-white) { --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; }

/* The space scene remains a deliberate feature of Transactions only. */
html.crm-glass:root:has(.transactions-space-background) .crm-workspace { background: #030b2d; }
html.crm-glass:root:has(.transactions-space-background) .desktop-sidebar-rail { background: transparent; }

/* Mobile navigation uses the same palette as the desktop rail. */
html.crm-glass:root .mobile-quick-menu-actions { background: var(--slate-card-solid); color: var(--slate-ink); border-color: var(--slate-edge); }
html.crm-glass:root .mobile-quick-menu-toggle { background: var(--slate-card-solid); color: var(--slate-positive); border-color: var(--slate-edge); }
html.crm-glass:root .mobile-quick-menu-toggle[aria-expanded='true'] { background: #326455; color: #e4fff4; }
html.crm-glass:root :is(.mobile-quick-menu-badge, .mobile-quick-menu-dot) { box-shadow: 0 0 0 2px var(--slate-card-solid); }

/* These regions are captured directly into downloadable PDFs. Their paper
   appearance and QR contrast must not depend on the surrounding workspace. */
html.crm-glass:root :is(#waybill-content, #qrcode-content) { background: #fff !important; color: #111827 !important; color-scheme: light; }
html.crm-glass:root :is(#waybill-content, #qrcode-content) :is(h1, h2, h3, p, span, th, td, div) { color: #111827 !important; }
html.crm-glass:root :is(#waybill-content, #qrcode-content) :is(.bg-white, .bg-gray-50, .bg-gray-100, thead) { background: #f8fafc !important; backdrop-filter: none !important; }
html.crm-glass:root :is(#waybill-content, #qrcode-content) :is(th, td, .border-gray-200, .border-gray-300) { border-color: #cbd5e1 !important; }

/* Standard appearance keeps familiar neutral surfaces, including its dark mode.
   Geometry and controls are shared, so changing appearance never moves content. */
html[data-workspace-appearance='standard'] .desktop-sidebar-rail .desktop-sidebar-panel { background: #f2f8f4; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.dark[data-workspace-appearance='standard'] .desktop-sidebar-rail .desktop-sidebar-panel { background: #15291e; }
html[data-workspace-appearance='standard'] [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) { background: #fff !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.dark[data-workspace-appearance='standard'] [data-testid='sticky-navigation-root'] > div:not(.mobile-quick-menu) { background: var(--dk-surface-solid) !important; }
html[data-workspace-appearance='standard'] .crm-assistant-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (prefers-reduced-transparency: reduce) {
  html.crm-glass:root { --dk-surface: var(--slate-card-solid); --dk-surface-opaque: var(--slate-card-solid); --dk-nav: var(--slate-card-solid); }
  html.crm-glass:root .crm-workspace { background: var(--feed-scene-base); }
  html.crm-glass:root .desktop-sidebar-rail .desktop-sidebar-panel { background: var(--slate-card-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  html.crm-glass:root { --slate-ink: CanvasText; --slate-muted: CanvasText; --slate-edge: CanvasText; --slate-card-solid: Canvas; --dk-surface: Canvas; --dk-surface-solid: Canvas; --dk-nav: Canvas; }
  html.crm-glass:root :is(body, .crm-workspace) { background: Canvas !important; color: CanvasText; }
  html.crm-glass:root .transactions-space-background { display: none; }
}
@media print {
  html.crm-glass:root body, html.crm-glass:root .crm-workspace { color: #111827; background: white !important; }
  html.crm-glass:root .transactions-space-background { display: none; }
}

/* Custom CRM components share the workspace palette. No layout or data rules.
   Dense menus and message bubbles keep foreground text from showing through. */

/* Profile */
/* Emoji picker owns its CSS variables; cover both of its colour modes. */
html.crm-glass:root .EmojiPickerReact {
  --epr-bg-color: var(--slate-card-solid); --epr-dark-bg-color: var(--slate-card-solid);
  --epr-text-color: var(--slate-ink); --epr-dark-text-color: var(--slate-ink);
  --epr-picker-border-color: var(--slate-edge); --epr-dark-picker-border-color: var(--slate-edge);
  --epr-category-label-bg-color: var(--slate-card-solid); --epr-dark-category-label-bg-color: var(--slate-card-solid);
  --epr-category-label-text-color: var(--slate-muted); --epr-preview-text-color: var(--slate-muted);
  --epr-search-input-bg-color: var(--slate-field); --epr-dark-search-input-bg-color: var(--slate-field);
  --epr-search-input-bg-color-active: var(--slate-field); --epr-dark-search-input-bg-color-active: var(--slate-field);
  --epr-search-input-text-color: var(--slate-ink); --epr-search-input-placeholder-color: var(--slate-muted);
  --epr-hover-bg-color: var(--crm-glass-hover); --epr-dark-hover-bg-color: var(--crm-glass-hover);
  --epr-focus-bg-color: var(--crm-glass-active); --epr-dark-focus-bg-color: var(--crm-glass-active);
  --epr-highlight-color: var(--slate-positive); --epr-dark-highlight-color: var(--slate-positive);
  --epr-emoji-variation-picker-bg-color: var(--slate-card-solid); --epr-dark-emoji-variation-picker-bg-color: var(--slate-card-solid);
}
html.crm-glass:root .profile-page { color: var(--slate-ink); background: transparent; }
html.crm-glass:root .profile-card {
  color: var(--slate-ink); background: var(--slate-card); border-color: var(--slate-edge);
  box-shadow: 0 12px 34px -24px rgb(4 19 31 / 55%);
}
html.crm-glass:root .profile-card :is(h2, h3, label) { color: var(--slate-ink); }
html.crm-glass:root .profile-email { color: var(--slate-muted); }
html.crm-glass:root :is(.profile-identity, .profile-password-heading) { border-color: var(--slate-edge); }
html.crm-glass:root .profile-card input:not([type='checkbox']) {
  background: var(--slate-field); border-color: var(--slate-edge); color: var(--slate-ink); color-scheme: dark;
}
html.crm-glass:root .profile-card input:not([type='checkbox']):focus {
  background: var(--slate-field); border-color: var(--crm-glass-accent); box-shadow: 0 0 0 3px rgb(137 227 201 / 12%);
}
html.crm-glass:root .profile-card input::placeholder { color: var(--slate-muted); }
html.crm-glass:root .profile-eye { color: var(--slate-muted); }
html.crm-glass:root .profile-eye:hover { background: var(--crm-glass-hover); color: var(--slate-ink); }
html.crm-glass:root .profile-card :is([role='status'], [role='alert']) { background: var(--slate-field); }
html.crm-glass:root .profile-content #company-sections { border-color: var(--slate-edge); }

/* Team directory and person panel */
html.crm-glass:root :is(.team-workspace, .org-page, .job-instructions) { background: transparent; color: var(--slate-ink); }
html.crm-glass:root :is(.team-header, .team-overview > div, .team-directory, .instructions-directory) {
  background: var(--slate-card); border-color: var(--slate-edge); color: var(--slate-ink);
}
html.crm-glass:root .team-person-panel { background: var(--slate-card-solid); border-color: var(--slate-edge); color: var(--slate-ink); }
html.crm-glass:root :is(.team-header h1, .team-person-heading h2, .instructions-directory-title h2, .instructions-welcome h1) { color: var(--slate-ink); }
html.crm-glass:root :is(.team-header p, .team-overview span, .team-hint, .team-row-name > span, .team-department, .team-badges, .team-empty, .team-person-heading span, .team-person-tabs button, .team-payroll-summary span) { color: var(--slate-muted); }
html.crm-glass:root :is(.team-overview strong, .team-person-heading p, .team-payroll-summary strong) { color: var(--slate-positive); }
html.crm-glass:root :is(.team-emblem, .team-avatar, .team-badges .linked, .team-person-tabs button.active) { background: var(--crm-glass-active); color: var(--slate-positive); }
html.crm-glass:root :is(.team-row, .team-person-heading, .team-person-tabs) { border-color: var(--slate-edge); }
html.crm-glass:root .team-row:hover { background: var(--crm-glass-hover); }
html.crm-glass:root .team-badges span { background: var(--slate-field); color: var(--slate-muted); }
html.crm-glass:root .team-warning { background: rgb(255 196 108 / 12%); color: var(--slate-warning); }
html.crm-glass:root .team-legacy :is(.bg-white, .bg-gray-50) { background: var(--slate-card); }
html.crm-glass:root .team-legacy :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--slate-ink); }
html.crm-glass:root .team-legacy :is(.text-gray-600, .text-gray-500, .text-gray-400) { color: var(--slate-muted); }
html.crm-glass:root .team-legacy :is(.border-gray-200, .border-gray-300, .divide-gray-200 > * + *) { border-color: var(--slate-edge); }
html.crm-glass:root .team-legacy .hover\:bg-gray-50:hover { background: var(--crm-glass-hover); }

/* Structure canvas and its floating tools. Node accents still denote departments. */
html.crm-glass:root :is(.org-workspace, .org-metric, .org-list-row) { background: var(--slate-card); color: var(--slate-ink); border-color: var(--slate-edge); }
html.crm-glass:root :is(.org-detail, .org-editor, .org-reload-dialog) { background: var(--slate-card-solid) !important; color: var(--slate-ink); border-color: var(--slate-edge); }
html.crm-glass:root .org-canvas { background-color: rgb(19 38 54 / 36%); background-image: radial-gradient(rgb(201 224 239 / 24%) .7px, transparent .7px); }
html.crm-glass:root .org-node {
  background: linear-gradient(145deg, var(--slate-card-solid) 55%, color-mix(in srgb, var(--org-accent) 13%, var(--slate-card-solid)));
  color: var(--slate-ink); border-color: var(--slate-edge); border-top-color: var(--org-accent);
  box-shadow: 0 5px 18px rgb(5 20 32 / 24%);
}
html.crm-glass:root .org-node-footer { background: var(--slate-field); border-color: var(--slate-edge); color: var(--slate-muted); }
html.crm-glass:root :is(.org-node-symbol, .org-avatar) { background: color-mix(in srgb, var(--org-accent) 22%, var(--slate-card-solid)); color: color-mix(in srgb, var(--org-accent) 40%, white); }
html.crm-glass:root .org-avatar { box-shadow: 0 0 0 2px var(--slate-card-solid); }
html.crm-glass:root :is(.org-toolbar, .org-breadcrumb, .org-workspace-footer, .org-focus-bar) { border-color: var(--slate-edge); }
html.crm-glass:root :is(.org-studio-header, .org-studio .org-toolbar, .org-studio .org-breadcrumb, .org-studio .org-focus-bar, .org-studio .org-detail, .org-studio .org-search-results, .org-save-dock, .org-zoom) {
  background: var(--slate-card-solid); border-color: var(--slate-edge); color: var(--slate-ink);
  box-shadow: 0 8px 25px rgb(4 17 29 / 22%);
}
html.crm-glass:root :is(.org-studio-heading h1, .org-reload-dialog h2, .org-parent strong) { color: var(--slate-ink); }
html.crm-glass:root :is(.org-eyebrow, .org-metric p, .org-workspace-footer, .org-breadcrumb, .org-studio-heading p, .org-parent span, .org-search-results, .org-canvas-hint, .org-loading) { color: var(--slate-muted); }
html.crm-glass:root :is(.org-button, .org-input, .org-search, .org-parent, .org-view-tabs, .org-list, .org-canvas-hint) { background: var(--slate-field); border-color: var(--slate-edge); color: var(--slate-ink); }
html.crm-glass:root :is(.org-button:hover, .org-icon-button:hover, .org-parent:hover) { background: var(--crm-glass-hover); }
html.crm-glass:root :is(.org-icon-button, .org-view-tabs button, .org-label) { color: var(--slate-muted); }
html.crm-glass:root :is(.org-view-tabs button.active, .org-expand-all, .org-expand-all.is-expanded, .org-list-row.selected, .org-search-results button) { background: var(--crm-glass-active); color: var(--slate-positive); border-color: var(--crm-glass-active-edge); }
html.crm-glass:root :is(.org-text-button, .org-breadcrumb button, .org-focus-bar button) { color: var(--slate-positive); }
html.crm-glass:root .org-search-results button:hover { background: var(--crm-glass-hover); }
html.crm-glass:root .org-button-primary { background: #16836c; border-color: #6ac8ae; color: white; }
html.crm-glass:root .org-button-primary:hover { background: #1b9279; }
html.crm-glass:root .org-search input { background: transparent; color: var(--slate-ink); }
html.crm-glass:root .org-search input::placeholder { color: var(--slate-muted); }
html.crm-glass:root .org-input:disabled { background: var(--slate-field); opacity: .6; }
html.crm-glass:root :is(.org-detail-avatar, .org-detail-symbol, .org-list-symbol, .org-edit-avatar) { background: var(--crm-glass-active) !important; color: var(--slate-positive) !important; }
html.crm-glass:root :is(.org-page, .org-editor) :is(.text-slate-900, .text-slate-800, .text-slate-700) { color: var(--slate-ink); }
html.crm-glass:root :is(.org-page, .org-editor) :is(.text-slate-600, .text-slate-500, .text-slate-400) { color: var(--slate-muted); }
html.crm-glass:root .org-editor { color-scheme: dark; --dk-surface-solid: var(--slate-card-solid); --dk-input: var(--slate-field); --dk-text-primary: var(--slate-ink); --dk-border-x: var(--slate-edge); }
html.crm-glass:root .org-editor [aria-pressed] { --tw-ring-offset-color: var(--slate-card-solid); }

/* Instructions are an editable reading surface, separate from exported PDF paper. */
html.crm-glass:root .instruction-paper { background: var(--slate-card); color: var(--slate-ink); border-color: var(--slate-edge); }
html.crm-glass:root :is(.instruction-paper h1, .instruction-section h2) { color: var(--slate-ink); }
html.crm-glass:root :is(.instruction-person, .instruction-role, .instruction-section > div) { color: var(--slate-muted); }
html.crm-glass:root :is(.instructions-directory-title p, .instruction-person em, .instruction-metadata, .instructions-empty, .instructions-loading, .instructions-welcome) { color: var(--slate-muted); }
html.crm-glass:root :is(.instruction-person:hover, .instruction-person.active, .instruction-avatar, .instruction-contents, .instruction-section h2 span) { background: var(--crm-glass-active); color: var(--slate-positive); }
html.crm-glass:root .instruction-kicker { color: var(--slate-positive); }
html.crm-glass:root .instruction-section { border-color: var(--slate-edge); }
html.crm-glass:root :is(.instruction-status, .instruction-draft-note) { color: var(--slate-warning); }
html.crm-glass:root .instruction-status { background: rgb(255 196 108 / 13%); }
html.crm-glass:root :is(.instruction-status.approved, .instructions-notice) { background: var(--crm-glass-active); color: var(--slate-positive); }
html.crm-glass:root .instructions-error { background: rgb(255 143 164 / 12%); color: var(--slate-negative); }
html.crm-glass:root .job-instructions { --dk-input: var(--slate-field); --dk-text-primary: var(--slate-ink); --dk-border-x: var(--slate-edge); }

/* Knowledge audit keeps its component-level variables, including portalled editor fields. */
html.crm-glass:root .knowledge-audit {
  --ka-bg: var(--slate-card-solid); --ka-soft: var(--slate-field); --ka-line: var(--slate-edge);
  --ka-text: var(--slate-ink); --ka-muted: var(--slate-muted); background: var(--slate-card);
}
html.crm-glass:root .knowledge-audit button[aria-pressed='true'] { background: var(--crm-glass-active); border-color: var(--crm-glass-active-edge); color: var(--slate-positive); }

/* Embedded lesson links use inline colours in the standard appearance. */
html.crm-glass:root .crm-workspace a[aria-label^='Смотреть видеоурок:'] {
  background: var(--slate-card) !important; border-color: var(--slate-edge) !important; color: var(--slate-ink) !important;
}
html.crm-glass:root .crm-workspace a[aria-label^='Смотреть видеоурок:'] > span:last-child > span {
  color: var(--slate-ink) !important;
}
html.crm-glass:root .crm-workspace a[aria-label^='Смотреть видеоурок:'] > span:last-child > span:is(:first-child, :last-child) {
  color: var(--slate-positive) !important;
}
html.crm-glass:root .crm-workspace a[aria-label^='Смотреть видеоурок:'] > span:last-child > span:nth-child(3) {
  color: var(--slate-muted) !important;
}
html.crm-glass:root .ka-error { color: var(--slate-negative); }

/* Training's inline presentation needs explicit overrides; media stays untouched. */
html.crm-glass:root .training-page > header,
html.crm-glass:root .training-page > section > article { background: var(--slate-card) !important; color: var(--slate-ink) !important; border-color: var(--slate-edge) !important; }
html.crm-glass:root .training-page > header > p,
html.crm-glass:root .training-page > p,
html.crm-glass:root .training-page article button > div > span { color: var(--slate-muted) !important; }
html.crm-glass:root .training-page article button { color: var(--slate-ink) !important; }
html.crm-glass:root .training-page article button > div > span:last-child { color: var(--slate-positive) !important; }
html.crm-glass:root dialog[data-training-player] { background: var(--slate-card-solid) !important; color: var(--slate-ink) !important; border-color: var(--slate-edge) !important; }
html.crm-glass:root dialog[data-training-player] > div > header { background: var(--slate-field) !important; }
html.crm-glass:root dialog[data-training-player] :is(header p, footer) { color: var(--slate-muted) !important; }
html.crm-glass:root dialog[data-training-player] header > button { background: var(--crm-glass-control) !important; color: var(--slate-ink) !important; border-color: var(--slate-edge) !important; }
html.crm-glass:root dialog[data-training-player] header > button:hover { background: var(--crm-glass-hover) !important; }

/* Conversation list, messages, composer, AI toolbar. Preserve every interaction. */
html.crm-glass:root :is(.whatsapp-header, .chat-header) { background: var(--crm-glass-surface); color: var(--slate-ink); border-color: var(--slate-edge); }
html.crm-glass:root [class~='bg-[#e5ddd5]'],
html.crm-glass:root .chat-messages.chat-wallpaper,
html.crm-glass:root .chat-input:not(.chat-composer):has(.chat-composer) { background: transparent; }
html.crm-glass:root .chat-messages.chat-wallpaper { background-image: linear-gradient(rgb(15 35 50 / 14%), rgb(15 35 50 / 14%)); }
html.crm-glass:root .chat-messages [role='separator'] > span {
  background: var(--slate-card-solid) !important; color: var(--slate-muted) !important;
}
html.crm-glass:root .wa-chat-row-wrap .wa-chat-row.chat-list-item { color: var(--slate-ink); background: transparent; }
html.crm-glass:root .wa-chat-row-wrap .wa-chat-row:hover { background: var(--crm-glass-hover); }
html.crm-glass:root .wa-chat-row-wrap .wa-chat-selected,
html.crm-glass:root .wa-chat-row-wrap .wa-chat-selected:hover { background: var(--crm-glass-active); box-shadow: inset 0 0 0 1px var(--crm-glass-active-edge); }
html.crm-glass:root .wa-chat-row .wa-chat-name { color: var(--slate-ink); }
html.crm-glass:root :is(.wa-chat-row .wa-chat-time, .wa-chat-content > .wa-chat-line:nth-child(2), .wa-chat-content > .wa-chat-line:nth-child(2) > span) { color: var(--slate-muted); }
html.crm-glass:root .wa-chat-row.wa-chat-unread .wa-chat-time { color: var(--slate-positive); }
html.crm-glass:root .wa-chat-row :is(.wa-chat-stage-dot, .wa-chat-manager-dot) { box-shadow: 0 0 0 2px var(--slate-card-solid); }
html.crm-glass:root .wa-message-row .wa-message-bubble { --bubble-color: #2c4558; color: var(--slate-ink); box-shadow: 0 1px 2px rgb(5 20 31 / 22%), inset 0 0 0 1px rgb(221 240 249 / 6%); }
html.crm-glass:root .wa-message-row .wa-outgoing { --bubble-color: #295b54; }
html.crm-glass:root .wa-message-bubble .message-status { color: #c2d6df; }
html.crm-glass:root .wa-message-bubble .wa-message-text a { color: var(--slate-positive); }
html.crm-glass:root .chat-input.chat-composer { background: var(--slate-card-solid); border-color: var(--slate-edge); color: var(--slate-ink); box-shadow: 0 3px 12px rgb(7 24 38 / 20%); }
html.crm-glass:root .chat-input.chat-composer:focus-within { border-color: var(--crm-glass-accent); box-shadow: 0 0 0 2px rgb(137 227 201 / 12%); }
html.crm-glass:root .chat-composer .chat-textarea { color: var(--slate-ink); background: transparent; }
html.crm-glass:root .chat-composer .chat-textarea::placeholder { color: var(--slate-muted); }
html.crm-glass:root .chat-composer .chat-composer__actions-row :is(.left-icons, .right-icons) > button:not(:has(.lucide-mic, .lucide-send, .lucide-square)):not(.text-red-600),
html.crm-glass:root .chat-composer .chat-composer__actions-row :is(.left-icons, .right-icons) > div > button:not(.text-red-600) { color: var(--slate-muted); }
html.crm-glass:root .chat-composer .chat-composer__actions-row :is(.left-icons, .right-icons) > button:not(:has(.lucide-mic, .lucide-send, .lucide-square)):not(.text-red-600):not(:disabled):hover,
html.crm-glass:root .chat-composer .chat-composer__actions-row :is(.left-icons, .right-icons) > div > button:not(.text-red-600):not(:disabled):hover { background: var(--crm-glass-hover); color: var(--slate-ink); }
html.crm-glass:root .chat-composer .ai-tools > button { color: var(--slate-muted); border-color: var(--slate-edge); background: var(--slate-field); }
html.crm-glass:root .chat-composer .ai-tools > button:not(:disabled):hover { background: var(--crm-glass-hover); color: var(--slate-ink); }
html.crm-glass:root .chat-input:not(.chat-composer):has(.chat-composer) .chat-ai-toolbar__button:not(.chat-ai-toolbar__toggle) { background: rgb(34 61 79 / 80%); color: var(--slate-muted); box-shadow: inset 0 0 0 1px var(--slate-edge); }
html.crm-glass:root .chat-input:not(.chat-composer):has(.chat-composer) .chat-ai-toolbar__button:not(.chat-ai-toolbar__toggle):not(:disabled):hover { background: var(--crm-glass-hover); color: var(--slate-ink); }
html.crm-glass:root :is(.chat-filters-toggle, .chat-filter-modes > button.filter-label) { color: var(--slate-muted); }
html.crm-glass:root .chat-filter-modes { background: var(--slate-field); }
html.crm-glass:root :is(.chat-filters-toggle:hover, .chat-filters-toggle[aria-expanded='true'], .chat-filters-toggle.is-active, .chat-filter-modes > button[aria-pressed='true']) { background: var(--crm-glass-active); color: var(--slate-positive); }
html.crm-glass:root .chat-filter-field > select { background: var(--slate-field); color: var(--slate-ink); border-color: var(--slate-edge); }
html.crm-glass:root .chat-filter-field > select[data-active='true'] { background: var(--crm-glass-active); color: var(--slate-positive); border-color: var(--crm-glass-active-edge); }
html.crm-glass:root .reply-suggestions { background: var(--slate-card-solid); color: var(--slate-ink); border-color: var(--slate-edge); }
html.crm-glass:root :is(.reply-suggestions__toggle:hover, .reply-suggestions [role='option']:hover, .reply-suggestions [aria-selected='true']) { background: var(--crm-glass-hover); }
html.crm-glass:root :is(.reply-suggestions__hint, .reply-suggestions [role='option'] .text-gray-600) { color: var(--slate-muted); }
html.crm-glass:root .reply-suggestions__count { background: var(--slate-field); }
html.crm-glass:root .reply-suggestions [role='option'] { color: var(--slate-ink); border-color: var(--slate-edge); }

/* Reminders and native appointment dialog are portalled outside the page. */
html.crm-glass:root :is(.chat-reminders, .reminder-sheet) { --rem-bg: var(--slate-card-solid); --rem-text: var(--slate-ink); --rem-muted: var(--slate-muted); --rem-line: var(--slate-edge); --rem-soft: var(--slate-field); color-scheme: dark; }
html.crm-glass:root .chat-reminders { background: var(--slate-card); }
html.crm-glass:root :is(.reminder-client, .reminder-empty) { color: var(--slate-positive); }
html.crm-glass:root .reminder-date strong { color: var(--slate-warning); }
html.crm-glass:root .reminder-error { color: var(--slate-negative); }
html.crm-glass:root .reminder-inbox { background: var(--slate-field); color: var(--slate-positive); border-color: var(--slate-edge); }
html.crm-glass:root .reminder-inbox-due { border-color: #d89537; }
html.crm-glass:root .reminder-presets button[aria-pressed='true'] { color: var(--slate-positive); border-color: var(--crm-glass-active-edge); background: var(--crm-glass-active); }
html.crm-glass:root .booking-dialog { --bg-primary: var(--slate-card-solid); --text-primary: var(--slate-ink); color-scheme: dark; border-color: var(--slate-edge); }
html.crm-glass:root :is(.booking-dialog header, .booking-dialog button, .booking-dialog fieldset, .booking-card) { border-color: var(--slate-edge); }
html.crm-glass:root :is(.booking-dialog p, .booking-empty, .booking-card span, .booking-card small) { color: var(--slate-muted); }
html.crm-glass:root :is(.booking-trigger, .booking-toolbar) { background: var(--slate-field); color: var(--slate-positive); border-color: var(--slate-edge); }
html.crm-glass:root .booking-dialog button:hover:not(:disabled) { background: var(--crm-glass-hover); }
html.crm-glass:root .booking-dialog :is(input:not([type='checkbox']), select, textarea) { background: var(--slate-field); border-color: var(--slate-edge); }
html.crm-glass:root .booking-card strong { color: var(--slate-positive); }
html.crm-glass:root .booking-dialog .booking-danger { color: var(--slate-negative); }
html.crm-glass:root .booking-error { background: rgb(255 143 164 / 12%); color: var(--slate-negative) !important; }
html.crm-glass:root .booking-notice { background: rgb(255 196 108 / 12%); color: var(--slate-warning); }

/* Voice settings/pilot are custom CSS rather than Tailwind. */
html.crm-glass:root :is(.wv-phone, .wv-service) { color: var(--slate-ink); }
html.crm-glass:root :is(.wv-card, .wv-catalog .wv-card) { background: var(--slate-card); color: var(--slate-ink); border-color: var(--slate-edge); }
html.crm-glass:root :is(.wv-phone header p, .wv-small, .wv-call-state p, .wv-call-duration, .wv-service-hero p, .wv-service-footer, .wv-knowledge-stats span, .wv-breadcrumb, .wv-setup-grid small) { color: var(--slate-muted); }
html.crm-glass:root :is(.wv-service a, .wv-catalog a, .wv-eyebrow, .wv-setup-grid span) { color: var(--slate-positive); }
html.crm-glass:root :is(.wv-badge, .wv-call-avatar, .wv-service-notice) { background: var(--crm-glass-active); color: var(--slate-positive); }
html.crm-glass:root :is(.wv-notice, .wv-call-result, .wv-meter) { background: var(--slate-field); }
html.crm-glass:root .wv-phone button { background: var(--slate-field); border-color: var(--slate-edge); color: var(--slate-ink); }
html.crm-glass:root .wv-phone button:not(:disabled):hover { background: var(--crm-glass-hover); }
html.crm-glass:root .wv-phone :is(.wv-primary, .wv-call-accept) { background: #16836c; color: white; border-color: #6ac8ae; }
html.crm-glass:root .wv-phone .wv-call-hangup { background: #a53743; color: white; border-color: #ed8f9f; }
html.crm-glass:root .wv-phone .wv-call-decline { background: rgb(255 143 164 / 12%); color: var(--slate-negative); border-color: rgb(255 173 190 / 30%); }
html.crm-glass:root .wv-phone .wv-call-buttons button:disabled { background: var(--slate-field); color: var(--slate-muted); border-color: var(--slate-edge); opacity: .45; }
html.crm-glass:root :is(.wv-phone, .wv-service) :is(input:not([type='checkbox']), textarea, select) { background: var(--slate-field); color: var(--slate-ink); border-color: var(--slate-edge); color-scheme: dark; }
html.crm-glass:root .wv-phone select option { background: var(--slate-card-solid); color: var(--slate-ink); }
html.crm-glass:root :is(.wv-call-scenarios, .wv-knowledge-stats, .wv-service-footer, .wv-tabs) { border-color: var(--slate-edge); }
html.crm-glass:root .wv-knowledge-stats strong { color: var(--slate-positive); }
html.crm-glass:root .wv-service-error { background: rgb(255 143 164 / 12%); color: var(--slate-negative); }
html.crm-glass:root .wv-phone .wv-setup-grid button { background: var(--slate-field); color: var(--slate-ink); }
html.crm-glass:root .wv-phone .wv-tabs button { color: var(--slate-muted); }
html.crm-glass:root .wv-phone .wv-tabs button[aria-current='page'] { background: var(--crm-glass-active); color: var(--slate-positive); border-color: var(--crm-glass-active-edge); }

@media (prefers-reduced-transparency: reduce) {
  html.crm-glass:root :is(.profile-card, .team-header, .team-overview > div, .team-directory, .instructions-directory, .instruction-paper, .org-workspace, .org-metric, .org-list-row, .knowledge-audit, .wv-card, .wv-catalog .wv-card, .chat-reminders) { background: var(--slate-card-solid); }
}
@media (forced-colors: active) {
  html.crm-glass:root :is(.profile-card, .team-header, .team-overview > div, .team-directory, .team-person-panel, .instructions-directory, .instruction-paper, .org-workspace, .org-metric, .org-list-row, .org-editor, .org-detail, .org-node, .org-studio-header, .knowledge-audit, .wv-card, .booking-dialog, .chat-reminders, .reminder-sheet, .reply-suggestions, .chat-input.chat-composer) { background: Canvas !important; color: CanvasText !important; border-color: CanvasText; }
  html.crm-glass:root .wa-message-row .wa-message-bubble { --bubble-color: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}

/* Коммерческое предложение — «бумажный» документ.
   Глобальный тёмный слой (html:is(.dark, .crm-glass) … в src/index.css) перекрашивает
   bg-white / bg-gray-* / text-gray-* в стеклянные тёмные поверхности, и
   светлые темы КП (Светлая, Классическая, Красная, Эко, Морская,
   Строительная, Мобильная) в тёмной теме приложения превращались в кашу:
   белая «бумага» с тёмными блоками и серым текстом без контраста. PDF и
   картинка для WhatsApp собираются из этой же разметки, поэтому клиент
   получал бы тёмный документ.

   Здесь возвращаем внутри .kp-paper светлые значения Tailwind — КП всегда
   выглядит как документ на тёмном фоне, ровно как в PDF. Тёмные темы КП
   (Премиум, Luxury, Tech, Hi-tech) на палитру Tailwind не опираются
   (произвольные hex-цвета) и этими правилами не затрагиваются.
   Специфичность html:is(.dark, .crm-glass) .kp-paper .x (0,3,1) выше слоя (0,2,1);
   !important — только там, где он есть и в слое. */

html:is(.dark, .crm-glass) .kp-paper { color: #000; }

/* Поверхности */
html:is(.dark, .crm-glass) .kp-paper .bg-white {
  background-color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: #e5e7eb;
}
html:is(.dark, .crm-glass) .kp-paper .bg-gray-50 { background-color: #f9fafb; }
html:is(.dark, .crm-glass) .kp-paper .bg-gray-100 { background-color: #f3f4f6; }
html:is(.dark, .crm-glass) .kp-paper .bg-gray-200 { background-color: #e5e7eb; }
html:is(.dark, .crm-glass) .kp-paper .bg-emerald-50 { background-color: #ecfdf5; }
html:is(.dark, .crm-glass) .kp-paper .hover\:bg-gray-50:hover { background-color: #f9fafb; }
html:is(.dark, .crm-glass) .kp-paper .hover\:bg-gray-100:hover { background-color: #f3f4f6; }
html:is(.dark, .crm-glass) .kp-paper .hover\:bg-gray-200:hover { background-color: #e5e7eb; }
/* Inline background '#ffffff' у блока экспорта тёмных тем КП (слой ловит его
   attribute-селектором с !important). */
html:is(.dark, .crm-glass) .kp-paper [style*="background-color: rgb(255, 255, 255)"],
html:is(.dark, .crm-glass) .kp-paper [style*="background-color: #ffffff"] {
  background-color: #fff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Текст */
html:is(.dark, .crm-glass) .kp-paper .text-gray-900 { color: #111827; }
html:is(.dark, .crm-glass) .kp-paper .text-gray-800 { color: #1f2937; }
html:is(.dark, .crm-glass) .kp-paper .text-gray-700 { color: #374151; }
html:is(.dark, .crm-glass) .kp-paper .text-gray-600 { color: #4b5563; }
html:is(.dark, .crm-glass) .kp-paper .text-gray-500 { color: #6b7280; }
html:is(.dark, .crm-glass) .kp-paper .text-gray-400 { color: #9ca3af; }
html:is(.dark, .crm-glass) .kp-paper .text-emerald-600 { color: #059669; }
html:is(.dark, .crm-glass) .kp-paper .text-emerald-700 { color: #047857; }
html:is(.dark, .crm-glass) .kp-paper .text-emerald-800 { color: #065f46; }
html:is(.dark, .crm-glass) .kp-paper .text-emerald-900 { color: #064e3b; }
html:is(.dark, .crm-glass) .kp-paper .text-blue-600 { color: #2563eb; }
html:is(.dark, .crm-glass) .kp-paper .text-blue-700 { color: #1d4ed8; }
html:is(.dark, .crm-glass) .kp-paper .text-red-600 { color: #dc2626; }
html:is(.dark, .crm-glass) .kp-paper .text-red-700 { color: #b91c1c; }
html:is(.dark, .crm-glass) .kp-paper .text-amber-600 { color: #d97706; }
html:is(.dark, .crm-glass) .kp-paper .text-amber-700 { color: #b45309; }
html:is(.dark, .crm-glass) .kp-paper .text-black { color: #000; }

/* Рамки */
html:is(.dark, .crm-glass) .kp-paper .border-gray-100 { border-color: #f3f4f6; }
html:is(.dark, .crm-glass) .kp-paper .border-gray-200 { border-color: #e5e7eb; }
html:is(.dark, .crm-glass) .kp-paper .border-gray-300 { border-color: #d1d5db; }
html:is(.dark, .crm-glass) .kp-paper .border-emerald-200 { border-color: #a7f3d0; }
html:is(.dark, .crm-glass) .kp-paper .border-emerald-300 { border-color: #6ee7b7; }
/* Произвольные hex-рамки тем КП: слой перебивает их через .bg-white
   (border-color) — возвращаем значение из класса. */
html:is(.dark, .crm-glass) .kp-paper .border-\[\#00F0FF\] { border-color: #00F0FF; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#00FF8C\] { border-color: #00FF8C; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#00FFFF\] { border-color: #00FFFF; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#00aaff\] { border-color: #00aaff; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#00b347\] { border-color: #00b347; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#2A2A2A\] { border-color: #2A2A2A; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#333333\] { border-color: #333333; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#39FF14\] { border-color: #39FF14; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#555555\] { border-color: #555555; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#558b2f\] { border-color: #558b2f; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#C2A85D\] { border-color: #C2A85D; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#DDDDDD\] { border-color: #DDDDDD; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#FFD700\] { border-color: #FFD700; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#a5d6a7\] { border-color: #a5d6a7; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#b3e0ff\] { border-color: #b3e0ff; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#c40021\] { border-color: #c40021; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#d4e1d4\] { border-color: #d4e1d4; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#dce9db\] { border-color: #dce9db; }
html:is(.dark, .crm-glass) .kp-paper .border-\[\#ffccd5\] { border-color: #ffccd5; }

/* Тени — светлые значения Tailwind */
html:is(.dark, .crm-glass) .kp-paper .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
html:is(.dark, .crm-glass) .kp-paper .shadow,
html:is(.dark, .crm-glass) .kp-paper .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
html:is(.dark, .crm-glass) .kp-paper .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
html:is(.dark, .crm-glass) .kp-paper .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }

/* Градиенты светлых тем */
html:is(.dark, .crm-glass) .kp-paper .from-emerald-50 { --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(236, 253, 245, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html:is(.dark, .crm-glass) .kp-paper .to-green-50 { --tw-gradient-to: #f0fdf4 var(--tw-gradient-to-position) !important; }
html:is(.dark, .crm-glass) .kp-paper .from-gray-100 { --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(243, 244, 246, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html:is(.dark, .crm-glass) .kp-paper .to-gray-200 { --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position) !important; }

.appearance-heading{display:flex;align-items:center;gap:10px}.appearance-heading h2{font-size:18px;font-weight:650}.appearance-heading>svg{color:#168366;flex-shrink:0}.appearance-caption{margin-top:9px;font-size:13px;line-height:1.6;color:#667b73}.appearance-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}.profile-card .appearance-option{display:block;position:relative;cursor:pointer;margin:0;padding:11px 11px 14px;border:1px solid #d6e1db;border-radius:16px;background:#f9fbfa;transition:border-color .15s,box-shadow .15s}.appearance-option input{position:absolute;width:1px!important;height:1px!important;padding:0!important;opacity:0}.appearance-option:has(input:focus-visible){outline:3px solid #7bd7b9;outline-offset:3px}.profile-card .appearance-option.is-selected{border-color:#149270;box-shadow:0 0 0 1px #149270;background:#f1faf5}.appearance-option-title{display:flex;align-items:center;justify-content:space-between;margin:12px 2px 5px;font-size:15px;font-weight:650;color:#17392e}.appearance-option-title svg{opacity:0;color:#08805b}.is-selected .appearance-option-title svg{opacity:1}.appearance-option-description{display:block;margin:0 2px;font-size:12px;font-weight:400;line-height:1.5;color:#667b73}.appearance-preview{height:102px;border-radius:9px;display:flex;overflow:hidden;border:1px solid #d9e6df;background:#eef3f0}.appearance-preview-nav{width:29px;padding:13px 9px;background:#dfebe4;display:flex;flex-direction:column;gap:12px}.appearance-preview-nav i{width:9px;height:9px;border-radius:3px;background:#81ae99}.appearance-preview-content{flex:1;padding:12px;display:flex;flex-direction:column;gap:11px}.appearance-preview-content>i{height:12px;border-radius:4px;background:white}.appearance-preview-content>span{display:flex;gap:5px;flex:1}.appearance-preview-content>span>i{flex:1;background:white;border-radius:5px;border:1px solid #e1e9e5}.appearance-preview--glass{background:radial-gradient(ellipse at top left,#52778c,transparent),#263f55;border-color:#527284}.appearance-preview--glass .appearance-preview-nav{background:#d7eaf01a}.appearance-preview--glass .appearance-preview-nav i{background:#a3e7d7a8}.appearance-preview--glass .appearance-preview-content>i,.appearance-preview--glass .appearance-preview-content>span>i{background:#b9d9e220;border-color:#d6edf52b}.appearance-mode{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:22px;padding-top:20px;border-top:1px solid #e2ebe7;font-size:13px;font-weight:600}.appearance-mode>div{display:flex;flex-wrap:wrap;gap:4px}.appearance-mode button{display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:9px;color:#62786d;font-size:12px}.appearance-mode button:hover{background:#e6f3ed}.appearance-mode button[aria-pressed=true]{background:#d9f1e5;color:#086445}.profile-card .appearance-save-status{padding:0;margin-top:15px;background:none;font-size:11px;line-height:1.5;color:#6b8176}
html.dark .profile-card.appearance-card{background:var(--dk-surface);border-color:var(--dk-border)}html:is(.dark,.crm-glass) .appearance-heading h2,html:is(.dark,.crm-glass) .appearance-option-title{color:var(--dk-text-primary)}html:is(.dark,.crm-glass) .appearance-heading>svg,html:is(.dark,.crm-glass) .appearance-option-title svg{color:var(--dk-link)}html:is(.dark,.crm-glass) :is(.appearance-caption,.appearance-option-description,.appearance-save-status){color:var(--dk-text-muted)}html:is(.dark,.crm-glass) .profile-card .appearance-option{background:var(--dk-surface-2);border-color:var(--dk-border-x)}html:is(.dark,.crm-glass) .profile-card .appearance-option.is-selected{background:var(--dk-selected);border-color:#7ad9bd;box-shadow:0 0 0 1px #7ad9bd}html:is(.dark,.crm-glass) .appearance-mode{border-color:var(--dk-border);color:var(--dk-text-secondary)}html:is(.dark,.crm-glass) .appearance-mode button{color:var(--dk-text-muted)}html:is(.dark,.crm-glass) .appearance-mode button:hover{background:var(--dk-hover)}html:is(.dark,.crm-glass) .appearance-mode button[aria-pressed=true]{background:var(--dk-selected);color:var(--dk-link)}
@media(max-width:420px){.appearance-options{gap:9px}.profile-card .appearance-option{padding:8px}.appearance-option-title{font-size:13px}.appearance-preview{height:84px}.appearance-preview-content{padding:10px 7px}.appearance-mode>div{width:100%}.appearance-mode button{flex:1;justify-content:center;padding:10px 6px}}

/* Keep all three choices comparable without squeezing their labels on phones. */
.appearance-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.appearance-option-title { gap: 6px; }
.appearance-option-title svg { flex-shrink: 0; }
.appearance-preview--violet {
  background: linear-gradient(135deg, #8864bd, #59378e);
  border-color: #805cb5;
}
.appearance-preview--violet .appearance-preview-nav { background: #513083; }
.appearance-preview--violet .appearance-preview-nav i { background: #d6c5f3; }
.appearance-preview--violet .appearance-preview-content > i {
  background: linear-gradient(to right, #00aeef 28%, #fff 28%);
}
.appearance-preview--violet .appearance-preview-content > span > i {
  background: #fff;
  border-color: #f1eafa;
  border-top: 4px solid #42c2f3;
}
@media (max-width: 620px) {
  .appearance-options { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .profile-card .appearance-option {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 12px;
    padding: 10px;
    align-items: start;
  }
  .appearance-option .appearance-preview { grid-row: 1 / 3; height: 84px; }
  .appearance-option-title { margin: 3px 0 5px; font-size: 14px; }
  .appearance-option-description { margin: 0; }
}

/* The standard profile has custom light surfaces outside Tailwind's dark map. */
html.dark:not(.crm-glass) .profile-page { background: var(--dk-bg); color: var(--dk-text-primary); }
html.dark:not(.crm-glass) .profile-page header { background: var(--dk-nav); border-color: var(--dk-border); }
html.dark:not(.crm-glass) .profile-card { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text-body); box-shadow: 0 16px 60px -28px rgb(0 0 0 / 45%); }
html.dark:not(.crm-glass) .profile-card :is(h2, h3, label) { color: var(--dk-text-primary); }
html.dark:not(.crm-glass) .profile-email { color: var(--dk-text-muted); }
html.dark:not(.crm-glass) :is(.profile-identity, .profile-password-heading, .profile-content #company-sections) { border-color: var(--dk-border); }
html.dark:not(.crm-glass) .profile-card input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']) {
  background: var(--dk-input-opaque); border-color: var(--dk-border-x); color: var(--dk-text-primary); color-scheme: dark;
}
html.dark:not(.crm-glass) .profile-card input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):focus {
  background: var(--dk-input-opaque); border-color: var(--dk-accent-border); box-shadow: 0 0 0 3px var(--dk-ring);
}
html.dark:not(.crm-glass) .profile-card input::placeholder { color: var(--dk-text-muted); }
html.dark:not(.crm-glass) .profile-eye { color: var(--dk-text-muted); }
html.dark:not(.crm-glass) .profile-eye:hover { background: var(--dk-hover); color: var(--dk-text-primary); }
html.dark:not(.crm-glass) .profile-card :is([role='status'], [role='alert']) { background: var(--dk-surface-3); }
html.dark:not(.crm-glass) .profile-card .appearance-save-status { background: transparent; color: var(--dk-text-muted); padding: 0; }