/*
 * Canonical CRM visual system.
 *
 * The PV retention workspace is the visual reference. New CRM modules use
 * these tokens and primitives instead of defining a parallel font, canvas,
 * panel, control or table system. Kaiten keeps an independent workspace visual
 * language, while the outer CRM sidebar remains part of the shared shell.
 */
:root {
  --crm-ui-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --crm-canvas-light: radial-gradient(circle at 82% 8%, rgba(236,170,177,.34), transparent 27%), radial-gradient(circle at 58% 22%, rgba(98,181,224,.28), transparent 31%), linear-gradient(135deg, #dce8ef 0%, #eef3f5 46%, #e7eef2 100%);
  --crm-canvas-dark: radial-gradient(circle at 88% 0, rgba(111,91,218,.2), transparent 31%), radial-gradient(circle at 48% 16%, rgba(32,166,204,.15), transparent 35%), linear-gradient(135deg, #08131f 0%, #0d1926 48%, #091522 100%);
  --crm-text: #30465d;
  --crm-muted: #71869a;
  --crm-border: rgba(151,174,194,.42);
  --crm-border-strong: rgba(126,158,183,.58);
  --crm-surface: rgba(255,255,255,.82);
  --crm-surface-soft: rgba(255,255,255,.58);
  --crm-surface-solid: #fff;
  --crm-surface-hover: color-mix(in srgb, var(--crm-accent) 12%, var(--crm-surface-solid));
  --crm-table-head: rgba(239,245,248,.92);
  --crm-panel-shadow: 0 7px 22px rgba(48,69,89,.1);
  --crm-control-radius: 9px;
  --crm-panel-radius: 12px;
  --crm-page-inset: 5px;
  --crm-page-gap: 8px;
  --crm-accent: #2aa9df;
  --crm-accent-hover: #249bcf;
  --crm-sidebar-nav-text: #536b82;
  --crm-sidebar-nav-active: #249bcf;
  --crm-focus-ring: 0 0 0 3px rgba(42,169,223,.2);
}

html[data-theme="dark"] {
  --crm-text: #dce9f4;
  --crm-muted: #91a5b7;
  --crm-border: #2a4053;
  --crm-border-strong: #31495c;
  --crm-surface: rgba(20,35,49,.94);
  --crm-surface-soft: rgba(32,54,72,.82);
  --crm-surface-solid: #172838;
  --crm-surface-hover: color-mix(in srgb, var(--crm-accent) 14%, var(--crm-surface-solid));
  --crm-table-head: #142535;
  --crm-panel-shadow: 0 8px 24px rgba(0,0,0,.2);
  --crm-accent: #55c7ef;
  --crm-accent-hover: #68d1f4;
  --crm-sidebar-nav-text: #dce9f4;
  --crm-sidebar-nav-active: #55c7ef;
}

[data-crm-staff-avatar] {
  position: relative;
  overflow: hidden;
}

[data-crm-staff-avatar] > [data-crm-staff-avatar-image] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* The shared shell follows the same typography as the reference workspace. */
body:has(.page-view.active:not(#page-kaiten)) :where(.crm, .crm *),
body:has(.page-view.active:not(#page-kaiten)) .desktop-sidebar-edge-trigger {
  font-family: var(--crm-ui-font);
  font-synthesis: none;
}

/* The outer navigation is shared even while the isolated Kaiten workspace is open. */
.sidebar,
.sidebar :where(*) {
  font-family: var(--crm-ui-font);
  font-synthesis: none;
}

.sidebar {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* Retention's rendered type engine is the base layer for every CRM module. */
body:has(.page-view.active:not(#page-kaiten)) .crm {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

body:has(.page-view.active) .nav-item {
  padding-block: 7px;
  color: var(--crm-sidebar-nav-text);
  font: 400 15px/normal var(--crm-ui-font);
}

body:has(.page-view.active) :is(.nav-group, .sidebar-nav-list) {
  gap: 1px;
}

body:has(.page-view.active) .nav-item.active {
  color: var(--crm-sidebar-nav-active);
  font-weight: 400;
}

/* Every CRM page except Kaiten inherits one font, including canvas charts. */
.page-view:not(#page-kaiten),
.page-view:not(#page-kaiten) :where(button, input, select, textarea, optgroup, table, canvas) {
  font-family: var(--crm-ui-font);
  font-synthesis: none;
}

/* PV previously split Open Sans and system UI. Retention's system stack wins. */
#page-pv {
  --pv-font-family: var(--crm-ui-font);
  --pv-retention-font-family: var(--crm-ui-font);
}

/* PV dashboard must rasterize the shared system face exactly like Retention. */
#page-pv [data-pv-panel="dashboard"] {
  -webkit-font-smoothing: antialiased;
}

/* Keep the PV navigation compact; the operational controls own the right edge. */
#page-pv .pv2-tab-list {
  flex-grow: 0;
}

#page-pv .pv2-tabs-topbar-slot {
  margin-left: auto;
}

/* Retention archive follows the same shared surfaces as the live workspace. */
#page-pv [data-pv-panel="retention"] .pv2-retention-archive {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

#page-pv [data-pv-panel="retention"] .pv2-retention-archive > header,
#page-pv [data-pv-panel="retention"] .pv2-retention-archive .pv2-retention-table-wrap {
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-panel-shadow);
}

#page-pv [data-pv-panel="retention"] .pv2-retention-archive > header strong,
#page-pv [data-pv-panel="retention"] .pv2-retention-archive > header b,
#page-pv [data-pv-panel="retention"] .pv2-retention-archive .pv2-retention-table td:first-child strong {
  color: var(--crm-text);
}

#page-pv [data-pv-panel="retention"] .pv2-retention-archive > header span,
#page-pv [data-pv-panel="retention"] .pv2-retention-archive .pv2-retention-table td:first-child small,
#page-pv [data-pv-panel="retention"] .pv2-retention-archive .pv2-retention-table td {
  color: var(--crm-muted);
}

#page-pv [data-pv-panel="retention"] .pv2-retention-archive .pv2-retention-table th {
  border-color: var(--crm-border);
  background: var(--crm-table-head);
  color: var(--crm-muted);
}

#page-pv [data-pv-panel="retention"] .pv2-retention-archive .pv2-retention-table td {
  border-color: var(--crm-border);
  background: transparent;
}

#page-pv [data-pv-panel="retention"] .pv2-retention-archive .pv2-retention-table tbody tr:hover,
#page-pv [data-pv-panel="retention"] .pv2-retention-archive .pv2-retention-table tbody tr:focus-visible {
  outline: 0;
  background: var(--crm-surface-hover);
}

#page-pv [data-pv-panel="retention"] .pv2-retention-archive :is(.pv2-retention-archive-action, .pv2-retention-archive-more) {
  border-color: var(--crm-border-strong);
  background: var(--crm-surface-soft);
  color: var(--crm-text);
}

#page-pv [data-pv-panel="retention"] .pv2-retention-archive :is(.pv2-retention-archive-action, .pv2-retention-archive-more):hover {
  border-color: var(--crm-accent);
  background: var(--crm-surface-hover);
  color: var(--crm-accent-hover);
}

#page-pv [data-pv-panel="retention"] .pv2-retention-archive .pv2-retention-archive-action.restore {
  border-color: var(--crm-accent);
  color: var(--crm-accent);
}

#page-pv [data-pv-panel="retention"] .pv2-retention-archive :is(.pv2-retention-archive-action, .pv2-retention-archive-more):focus-visible {
  outline: 0;
  box-shadow: var(--crm-focus-ring);
}

/* PV drawers and filter popovers are document-level portals, outside #page-pv. */
body:has(#page-pv.active) :is(
  .users-value-filter-popover,
  .pv2-global-filter-popover,
  #pv2-retention-drawer,
  [data-pv-retention-filter-dialog]
) {
  font-family: var(--crm-ui-font);
}

/*
 * Reference canvas and compact workspace inset for non-PV product pages.
 *
 * The gradient is composed once on the document canvas. Painting the same
 * fixed gradient on the sidebar, main, page and PV panel produced visibly
 * different rasters because every layer had its own box and alpha blend.
 */
html:has(body > .crm .page-view.active:not(#page-kaiten)) {
  background: var(--crm-canvas-light);
  background-attachment: fixed;
  background-size: 100vw 100vh;
}

html[data-theme="dark"]:has(body > .crm .page-view.active:not(#page-kaiten)) {
  background: var(--crm-canvas-dark);
  background-attachment: fixed;
  background-size: 100vw 100vh;
}

/*
 * The root canvas owns the viewport background. Keeping it on the root avoids
 * WebKit's stale fixed pseudo-element compositor layer after a standalone CRM
 * window returns to the foreground, while an explicit viewport-sized image
 * keeps long pages from changing the gradient geometry.
 */
body:has(.page-view.active:not(#page-kaiten)) {
  background: transparent;
}

/* Authentication keeps its dedicated, opaque safety surface above every page. */
html:has(body.crm-locked > .crm .page-view.active:not(#page-kaiten)) {
  background: var(--crm-locked-background);
}

html body.crm-locked:has(.page-view.active:not(#page-kaiten)) {
  background: transparent;
}

body:has(.page-view.active:not(#page-kaiten)) .crm {
  position: relative;
  z-index: 1;
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .crm,
  .main,
  .sidebar-header,
  #page-pv,
  #page-pv > [data-pv-panel],
  #page-pv .pv2-section.active,
  #page-pv .pv2-retention-dashboard
) {
  background: transparent !important;
  background-image: none !important;
}

body:has(.page-view.active:not(#page-kaiten)) .main {
  gap: 1px;
  padding: 0 1px 1px;
}

body:has(.page-view.active:not(#page-kaiten):not(#page-pv)) .page-view.active {
  min-height: 100%;
  gap: 12px;
  padding: var(--crm-page-inset) var(--crm-page-inset) 24px;
  background: transparent;
}

/* One continuous menu surface; the logo itself never paints a second slab. */
body:has(.page-view.active) .sidebar {
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-panel-shadow);
  -webkit-font-smoothing: auto;
}

/*
 * Kaiten keeps an opaque workspace canvas. The document canvas gives the
 * translucent sidebar the same final color while the opaque workspace keeps
 * its independent visual language.
 */
body:has(#page-kaiten.active) {
  background:
    linear-gradient(to right, transparent 0 230px, #f2f2f7 230px 100%),
    var(--crm-canvas-light);
  background-attachment: fixed;
}

html[data-theme="dark"] body:has(#page-kaiten.active) {
  background:
    linear-gradient(to right, transparent 0 230px, #0e0f13 230px 100%),
    var(--crm-canvas-dark);
  background-attachment: fixed;
}

body.desktop-sidebar-collapsed:has(#page-kaiten.active):not(.desktop-sidebar-peek) {
  background: #f2f2f7;
}

html[data-theme="dark"] body.desktop-sidebar-collapsed:has(#page-kaiten.active):not(.desktop-sidebar-peek) {
  background: #0e0f13;
}

body:has(.page-view.active) .sidebar-header {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body:has(.page-view.active) :is(
  .sidebar-navigation-settings,
  .desktop-sidebar-toggle,
  .nav-item.active
) {
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
  color: var(--crm-text);
}

body:has(.page-view.active) :is(.logo, .nav-item):hover {
  background: var(--crm-surface-soft);
  color: var(--crm-text);
}

body:has(.page-view.active) .logo {
  background: transparent;
}

body:has(.page-view.active) :is(
  .nav-item,
  .sidebar-nav-name
) {
  color: var(--crm-sidebar-nav-text);
}

html[data-theme="dark"] body:has(.page-view.active) .logo-wordmark {
  color: #fff;
}

body:has(.page-view.active) .nav-section-title {
  color: var(--crm-sidebar-nav-text);
}

body:has(.page-view.active) :is(
  .nav-item.active,
  .nav-item.active:hover,
  .nav-item.active .sidebar-nav-name
) {
  color: var(--crm-sidebar-nav-active);
}

/* PV header and sidebar use the same light, restrained control typography. */
body:has(#page-pv.active) :is(
  #page-pv .pv2-tab,
  #page-pv .pv2-retention-nl-actions button,
  #page-pv #global-topbar .crm-online-status,
  #page-pv #global-topbar .period-tab
) {
  font-family: var(--crm-ui-font);
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}

#page-pv .pv2-tab {
  padding-inline: 8px;
}

#page-pv #global-topbar .period-tab {
  padding-inline: 11px;
}

#page-pv #global-topbar .crm-online {
  padding-inline: 9px;
}

#page-pv .pv2-tabs-topbar-slot #global-topbar {
  gap: 7px;
}

#page-pv .pv2-tabs-topbar-slot #global-topbar .period-control {
  order: 1;
}

#page-pv .pv2-tabs-topbar-slot #global-topbar .crm-online {
  order: 2;
}

#page-pv .pv2-tabs-topbar-slot #global-topbar .crm-notifications {
  order: 3;
}

#page-pv .pv2-tabs-topbar-slot #global-topbar .settings {
  order: 4;
}

/* The retention Filter control is the visual reference for PV header controls. */
html[data-theme="dark"] body:has(#page-pv.active) #page-pv :is(
  .pv2-tab:not(.active),
  #global-topbar .period-tab:not(.active),
  #global-topbar .crm-online,
  #global-topbar .icon-btn
) {
  border-color: rgba(151,174,194,.24);
  background: var(--crm-surface-soft);
  color: #dce9f4;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] #page-pv .pv2-retention-column-stage strong {
  color: #0b334c;
}

html[data-theme="dark"] #page-pv .pv2-retention-card-open > strong {
  color: #fff;
}

#page-pv .pv2-tab-list {
  flex: 1 1 auto;
}

#page-pv .pv2-tabs-topbar-slot {
  flex: 0 0 auto;
}

/* Headers use the same compact row and control geometry as PV retention. */
.page-view:not(#page-kaiten):not(#page-pv) > .page-header {
  height: auto;
  min-height: 36px;
  max-height: none;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  padding: 0;
}

/* A single 12px vertical rhythm between page-level semantic blocks. */
.page-view:not(#page-kaiten):not(#page-pv) > :not(.page-header):not([hidden]):not(dialog):not([class*="overlay"]):not([class*="popover"]):not([class*="drawer"]) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.page-view:not(#page-kaiten):not(#page-pv) > .page-header > :first-child {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  white-space: nowrap;
}

.page-view:not(#page-kaiten):not(#page-pv) > .page-header > :first-child .page-sub {
  min-width: 0;
  overflow: hidden;
  margin-top: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-view:not(#page-kaiten):not(#page-pv) > .page-header :is(button, .analytics-action, .ads-tool-button, .integration-action) {
  height: 36px;
  min-height: 36px;
}

/* Main uses the exact compact operational row from the PV retention header. */
body:has(#page-main.active) #page-main > .page-header {
  height: auto;
  min-height: 36px;
  max-height: none;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 0;
}

#page-main > .page-header > :first-child {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#page-main > .page-header > :first-child .page-sub {
  margin-top: 0;
  white-space: nowrap;
}

#page-main #global-topbar {
  width: auto;
  min-width: 0;
  min-height: 36px;
  height: auto;
  flex: 1 1 auto;
  margin-left: auto;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

/* The shared topbar moves between pages. Its geometry must depend on its own
   container, not on a transient active-page class or a late page stylesheet. */
.page-view:not(#page-kaiten) #global-topbar {
  width: auto;
  min-width: 0;
  min-height: 36px;
  height: auto;
  flex: 0 1 auto;
  margin-left: auto;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

/* PV visibility wrappers travel with the shared topbar; keep them layout-neutral
   after the topbar is moved into another page header. */
#global-topbar > .pv2-page-visibility-item {
  display: contents;
}

.page-view:not(#page-kaiten) #global-topbar .settings-stack {
  display: contents;
}

.page-view:not(#page-kaiten) #global-topbar .period-control {
  order: 1;
  display: block;
  width: auto;
  min-width: 116px;
  max-width: none;
  flex: 0 1 auto;
}

.page-view:not(#page-kaiten) #global-topbar .export-button { order: 2; }
.page-view:not(#page-kaiten) #global-topbar .crm-online { order: 3; }
.page-view:not(#page-kaiten) #global-topbar .crm-agreements-quick { order: 4; }
.page-view:not(#page-kaiten) #global-topbar .crm-notifications { order: 5; }
.page-view:not(#page-kaiten) #global-topbar .settings { order: 6; }

body #page-access.active > .page-header #global-topbar .period-control {
  display: none !important;
}

body #page-access.active > .page-header #global-topbar :is(
  .access-header-invite,
  .access-header-invite-history,
  .access-header-add
) {
  display: flex !important;
}

body #page-access.active > .page-header #global-topbar :is(
  .access-header-invite,
  .access-header-invite-history,
  .access-header-add
).permission-denied {
  display: none !important;
}

@media (max-width: 1360px) {
  body #page-access.active > .page-header #global-topbar :is(
    .access-header-invite,
    .access-header-invite-history,
    .access-header-add
  ) {
    width: 36px;
    min-width: 36px;
    padding: 0;
    justify-content: center;
  }

  body #page-access.active > .page-header #global-topbar :is(
    .access-header-invite,
    .access-header-invite-history,
    .access-header-add
  ) > span:last-child {
    display: none;
  }
}

html[data-theme="dark"] .crm-permission-notice.success {
  border-color: rgba(67,183,168,.42);
  background: #152724;
  color: #82ddcf;
}

.page-view:not(#page-kaiten) #global-topbar .period-selection {
  display: none;
}

#page-main #global-topbar .settings-stack {
  display: contents;
}

#page-main #global-topbar .crm-online {
  order: 3;
  height: 36px;
  padding: 4px 9px;
  gap: 9px;
}

#page-main #global-topbar .crm-online-status {
  color: inherit;
  font-size: 13px;
  font-weight: 400;
}

#page-main #global-topbar .crm-online-value {
  min-width: 18px;
  font-size: 18px;
  font-weight: 400;
}

#page-main #global-topbar .export-button {
  order: 2;
}

#page-main #global-topbar .period-control {
  order: 1;
  display: block;
  width: auto;
  min-width: 116px;
  max-width: none;
  flex: 0 0 auto;
}

#page-main #global-topbar .period-selection {
  display: none;
}

#page-main #global-topbar :is(.period-tab-custom-label, [data-period-comparison-label]) {
  display: none;
}

#page-main #global-topbar .crm-notifications {
  order: 5;
}

#page-main #global-topbar .crm-agreements-quick { order: 4; }

#page-main #global-topbar .settings {
  order: 6;
}

#page-main #global-topbar :is(.icon-btn, .settings-button) svg {
  width: 18px;
  height: 18px;
}

#page-main #global-topbar :is(.crm-online-status, .period-tab) {
  font-family: var(--crm-ui-font);
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}

body:has(#page-main.active) #page-main #global-topbar .period-preset-tabs .period-tab {
  width: auto;
  height: 30px;
  min-height: 30px;
  padding: 0 11px;
}

body:has(#page-main.active) #page-main #global-topbar .period-tab-custom {
  width: 36px;
  padding: 6px 11px;
}

body:has(#page-main.active) #page-main #global-topbar .period-tab-custom svg {
  width: 16px;
  height: 18px;
}

body:has(#page-main.active) #page-main #global-topbar .period-compare-button {
  width: 36px;
  justify-content: center;
  margin-left: 1px;
  padding: 6px;
  font-weight: 400;
  -webkit-font-smoothing: auto;
}

body:has(#page-main.active) #page-main #global-topbar .period-compare-button-symbol {
  font-size: 20px;
}

body:has(#page-main.active) #page-main #global-topbar .crm-online-value {
  color: #74d7a2;
}

body:has(#page-main.active) #page-main #global-topbar .crm-notifications-badge {
  font-weight: 400;
}

#page-main #global-topbar {
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] body:has(#page-main.active) #page-main #global-topbar :is(
  .crm-online,
  .icon-btn,
  .period-tab:not(.active),
  .period-tab-custom,
  .period-compare-button
) {
  border-color: rgba(151,174,194,.24);
  background: var(--crm-surface-soft);
  color: #dce9f4;
}

/* Main charts use the accepted restrained PV control typography. */
#page-main .goal-cluster {
  gap: 12px;
}

#page-main .content-grid {
  gap: 12px;
  margin-top: 4px;
}

#page-main .goal-chart-card {
  font-family: var(--crm-ui-font);
  -webkit-font-smoothing: antialiased;
}

#page-main .goal-chart-title {
  color: var(--crm-text);
  font-family: var(--crm-ui-font);
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}

#page-main .goal-chart-period {
  color: var(--crm-muted);
  font-size: 9px;
  font-weight: 400;
  line-height: normal;
}

#page-main .goal-chart-total {
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 500;
}

#page-main .goal-chart-delta {
  font-size: 9px;
  font-weight: 500;
}

#page-main .goal-chart-aggregation-select {
  color: #87cce5;
  font-weight: 400;
}

html[data-theme="dark"] #page-main :is(.goal-chart-title, .goal-chart-total) {
  color: #eef7ff;
}

html[data-theme="dark"] #page-main .goal-chart-period {
  color: #b6c8d8;
}

/* Main keeps one restrained PV type voice across cards, controls and paths. */
#page-main,
#page-main :where(button, input, select, textarea, canvas) {
  font-family: var(--crm-ui-font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

#page-main :where(
  .kpi-label,
  .kpi-value,
  .kpi-delta,
  .panel-title,
  .user-stats-period,
  .user-stat-label,
  .user-stat-value,
  .user-stat-share,
  .user-stat-delta,
  .path-conversion-mode,
  .funnel-label-text,
  .funnel-select,
  .path-filter-summary,
  .paths-list-header,
  .path-step,
  .path-stage-count,
  .path-conversion,
  .path-count,
  .path-delta
) {
  letter-spacing: normal;
}

#page-main .goal-pair .kpi-label,
#page-main .panel-title,
#page-main .user-stat-label {
  font-weight: 500;
}

#page-main .goal-pair .kpi-value,
#page-main .user-stat-value,
#page-main .path-count {
  font-weight: 600;
}

#page-main :is(
  .goal-pair .kpi-delta,
  .user-stat-delta,
  .path-filter-summary,
  .path-stage-count,
  .path-conversion,
  .path-delta
) {
  font-weight: 500;
}

#page-main :is(
  .user-stats-period,
  .user-stat-share,
  .path-conversion-mode,
  .funnel-label-text,
  .paths-list-header,
  .path-step
) {
  font-weight: 400;
}

/* Dark Main contrast: white hierarchy plus clean semantic chart accents. */
html[data-theme="dark"] #page-main :is(
  .goal-pair .kpi-label,
  .goal-chart-title,
  .goal-chart-total,
  .panel-title,
  .funnel-label-text
) {
  color: #f8fbff;
}

html[data-theme="dark"] #page-main .goal-pair .kpi-value {
  color: var(--goal-color);
}

#page-main .goal-pair:has([data-goal-metric="youtube"]) { --goal-color: #ff5a4d !important; }
#page-main .goal-pair:has([data-goal-metric="trained"]) { --goal-color: #43c2ff !important; }
#page-main .goal-pair:has([data-goal-metric="pv"]) { --goal-color: #3be28f !important; }
#page-main .goal-pair:has([data-goal-metric="kdi"]) { --goal-color: #cf6cff !important; }

#page-main [data-user-metric="total"] { --user-accent: #a68bff !important; }
#page-main [data-user-metric="new"] { --user-accent: #49c8ff !important; }
#page-main [data-user-metric="active"] { --user-accent: #3be28f !important; }
#page-main [data-user-metric="paused"] { --user-accent: #ffb23e !important; }

html[data-theme="dark"] #page-main :is(
  .goal-pair .kpi-delta.up,
  .goal-chart-delta,
  .user-stat-delta.up,
  .path-delta.up,
  .path-conversion
) {
  color: #3be28f;
}

html[data-theme="dark"] #page-main :is(
  .goal-pair .kpi-delta.down,
  .user-stat-delta.down,
  .path-delta.down
) {
  color: #ff6158;
}

html[data-theme="dark"] #page-main :is(
  .goal-chart-period,
  .user-stats-period,
  .user-stat-share,
  .paths-list-header
) {
  color: #b9cad8;
}

html[data-theme="dark"] #page-main .goal-chart-aggregation-select {
  color: #8ed9f2;
}

html[data-theme="dark"] #page-main .user-stat-label {
  color: var(--user-accent);
}

html[data-theme="dark"] #page-main .user-stat-value {
  color: #f8fbff;
}

html[data-theme="dark"] #page-main :is(.funnel-select, .path-step) {
  color: #e0ebf4;
}

html[data-theme="dark"] #page-main .path-conversion-mode {
  color: #b3c5d4;
}

html[data-theme="dark"] #page-main .path-conversion-mode.active {
  color: #f8fbff;
}

html[data-theme="dark"] #page-main .path-stage-count {
  color: #53d3ff;
}

html[data-theme="dark"] #page-main .path-count {
  color: #ffb23e;
}

html[data-theme="dark"] #page-main .path-conversion-modes {
  border-color: rgba(151,174,194,.24);
  background: var(--crm-surface-soft);
}

html[data-theme="dark"] #page-main .path-conversion-mode.active {
  background: #1f5270;
  color: #f8fbff;
  box-shadow: inset 0 -2px 0 #55d7ff;
}

html[data-theme="dark"] #page-main :is(.path-filter-summary, .path-filter-summary.to) {
  background: rgba(49,180,238,.18);
  color: #8fe1ff;
}

#page-main .path-filter-summary {
  display: none;
}

html[data-theme="dark"] #page-main .path-filter-summary.to .path-filter-total {
  color: #8fe1ff;
}

#page-main .path-item {
  grid-template-columns: minmax(0,1fr) max-content;
}

#page-main .path-result {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

html[data-theme="dark"] #page-main .path-step,
html[data-theme="dark"] #page-main .path-step.end {
  border: 1px solid #315b76;
  background: #183a52;
  color: #e0ebf4;
}

html[data-theme="dark"] #page-main .path-step.end {
  border-color: #3f83a8;
  background: #1f5270;
  color: #f8fbff;
}

html[data-theme="dark"] :is(
  #page-main,
  #page-pv [data-pv-panel="dashboard"]
) .chart-type-toggle {
  border-color: #30343e;
  background: rgba(17,19,24,.72);
}

html[data-theme="dark"] :is(
  #page-main,
  #page-pv [data-pv-panel="dashboard"]
) .chart-type-button {
  color: #747a87;
}

html[data-theme="dark"] :is(
  #page-main,
  #page-pv [data-pv-panel="dashboard"]
) .chart-type-button.active {
  background: #1f5270;
  color: #63dcff;
  box-shadow: 0 1px 5px rgba(0,0,0,.32);
}

/* PV Dashboard nested retention metrics use the shared blue field surface. */
#page-pv [data-pv-panel="dashboard"].pv2-dashboard {
  gap: 12px;
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-retention-stat {
  border-color: rgba(151,174,194,.24);
  background: var(--crm-surface-soft);
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] :is(
  .pv2-engagement-card,
  .pv2-dashboard-empty,
  .pv2-signal.emphasis
) {
  border-color: rgba(151,174,194,.24);
  background: var(--crm-surface-soft);
}

/* PV Dashboard shares the clean, high-chroma palette accepted on Main. */
#page-pv [data-pv-panel="dashboard"] [data-pv-chart-card="active"] { --goal-color: #44e0cf !important; }
#page-pv [data-pv-panel="dashboard"] [data-pv-chart-card="new"] { --goal-color: #43c2ff !important; }
#page-pv [data-pv-panel="dashboard"] [data-pv-chart-card="mrr"] { --goal-color: #a987ff !important; }
#page-pv [data-pv-panel="dashboard"] [data-pv-chart-card="churn"] { --goal-color: #ff6158 !important; }

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-dashboard-goal-pair .kpi-value {
  color: var(--goal-color);
}

#page-pv [data-pv-panel="dashboard"] .pv2-dashboard-goal-pair :is(.kpi-label, .kpi-value, .kpi-delta) {
  letter-spacing: normal;
}

#page-pv [data-pv-panel="dashboard"] .pv2-dashboard-goal-pair .kpi-label,
#page-pv [data-pv-panel="dashboard"] .pv2-dashboard-goal-pair .kpi-delta {
  font-weight: 500 !important;
}

#page-pv [data-pv-panel="dashboard"] .pv2-dashboard-goal-pair .kpi-value {
  font-weight: 600 !important;
}

#page-pv [data-pv-panel="dashboard"] [data-pv-chart-card="mrr"] .kpi-value {
  font-size: 26px;
  letter-spacing: -.02em;
  white-space: nowrap;
}

#page-pv [data-pv-panel="dashboard"] .goal-chart-card {
  font-family: var(--crm-ui-font);
  -webkit-font-smoothing: antialiased;
}

#page-pv [data-pv-panel="dashboard"] .goal-chart-title {
  font-family: var(--crm-ui-font);
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}

#page-pv [data-pv-panel="dashboard"] .goal-chart-period {
  font-size: 9px;
  font-weight: 400;
  line-height: normal;
}

#page-pv [data-pv-panel="dashboard"] .goal-chart-total {
  font-size: 15px;
  font-weight: 500 !important;
}

#page-pv [data-pv-panel="dashboard"] .goal-chart-delta {
  font-size: 9px;
  font-weight: 500 !important;
}

#page-pv [data-pv-panel="dashboard"] .goal-chart-aggregation-select {
  font-weight: 400;
}

#page-pv [data-pv-panel="dashboard"] :is(
  .pv2-panel-title,
  .pv2-dashboard-group-title,
  .pv2-engagement-label,
  .pv2-retention-stat span,
  .pv2-funnel-step,
  .pv2-cohort-table th,
  .pv2-cohort-table td,
  .pv2-dashboard-empty,
  .pv2-signal
) {
  letter-spacing: normal;
}

#page-pv [data-pv-panel="dashboard"] :is(
  .pv2-panel-title,
  .pv2-dashboard-group-title,
  .pv2-engagement-label
) {
  font-weight: 500;
}

#page-pv [data-pv-panel="dashboard"] :is(
  .pv2-panel-note,
  .pv2-dashboard-group-note,
  .pv2-retention-stat span,
  .pv2-engagement-note,
  .pv2-funnel-step,
  .pv2-cohort-table th,
  .pv2-cohort-table td,
  .pv2-dashboard-empty,
  .pv2-signal
) {
  font-weight: 400;
}

#page-pv [data-pv-panel="dashboard"] :is(
  .pv2-retention-stat strong,
  .pv2-engagement-value,
  .pv2-funnel-step strong
) {
  font-weight: 600;
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] :is(
  .kpi-label,
  .goal-chart-title,
  .goal-chart-total,
  .pv2-panel-title,
  .pv2-op-label,
  .pv2-dashboard-group-title
) {
  color: #f8fbff;
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] :is(
  .goal-chart-period,
  .pv2-panel-note,
  .pv2-retention-stat span,
  .pv2-funnel-step,
  .pv2-engagement-label,
  .pv2-engagement-note,
  .pv2-dashboard-group-note,
  .pv2-bar-label,
  .pv2-cohort-table th
) {
  color: #b9cad8;
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] :is(
  .pv2-cohort-table td,
  .pv2-funnel-step strong,
  .pv2-dashboard-empty,
  .pv2-signal
) {
  color: #dce9f4;
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] :is(
  .pv2-dashboard-goal-pair .kpi-delta.up,
  .goal-chart-delta.up,
  .pv2-kpi-note strong
) {
  color: #3be28f;
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] :is(
  .pv2-dashboard-goal-pair .kpi-delta.down,
  .goal-chart-delta.down
) {
  color: #ff6158;
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .goal-chart-aggregation-select {
  color: #8fe1ff;
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-retention-stat:nth-child(1) strong { color: #3be28f !important; }
html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-retention-stat:nth-child(2) strong { color: #a987ff !important; }
html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-retention-stat:nth-child(3) strong { color: #f8fbff !important; }
html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-retention-stat:nth-child(4) strong { color: #ffb23e !important; }

#page-pv [data-pv-panel="dashboard"] .pv2-engagement-card[data-pv-engagement="events"] { --pv2-accent: #3be28f !important; }
#page-pv [data-pv-panel="dashboard"] .pv2-engagement-card[data-pv-engagement="kdi"] { --pv2-accent: #ffb23e !important; }
#page-pv [data-pv-panel="dashboard"] .pv2-engagement-card[data-pv-engagement="nps"] { --pv2-accent: #f06fcb !important; }

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-engagement-card {
  border-color: rgba(151,174,194,.24);
  background: var(--crm-surface-soft);
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-progress {
  background: #173148;
}

#page-pv [data-pv-panel="dashboard"] .pv2-funnel-step:nth-child(1) .pv2-progress > span { --color: #a987ff !important; }
#page-pv [data-pv-panel="dashboard"] .pv2-funnel-step:nth-child(n+2) .pv2-progress > span { --color: #44e0cf !important; }

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-cohort-cell {
  border-color: rgba(68,224,207,.28);
  background: color-mix(in srgb,#44e0cf var(--heat,15%),#173148);
  color: #f8fbff !important;
  font-size: 24px;
  font-weight: 600 !important;
  line-height: 1;
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-cohort-cell.on-light {
  color: #0b334c !important;
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-cohort-table :is(th,td) {
  border-color: #2a4053;
}

html[data-theme="dark"] #page-pv [data-pv-panel="dashboard"] .pv2-cohort-size {
  color: #b9cad8;
  font-weight: 400;
}

.page-view:not(#page-kaiten) .page-title {
  color: var(--crm-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.page-view:not(#page-kaiten) .page-sub,
.page-view:not(#page-kaiten) .panel-sub,
.page-view:not(#page-kaiten) .panel-note {
  color: var(--crm-muted);
}

body:has(.page-view.active:not(#page-kaiten)) :is(.crm-online, .icon-btn, .filter-btn, .panel-action, .period-tab, .period-tab-custom, .period-compare-button),
.page-view:not(#page-kaiten) :is(.pv2-button, .ads-tool-button, .analytics-action, .integration-action) {
  min-height: 40px;
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-control-radius);
  background: var(--crm-surface-soft);
  color: #536b82;
  font-family: var(--crm-ui-font);
  font-size: 12px;
  letter-spacing: .005em;
  box-shadow: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

body:has(.page-view.active:not(#page-kaiten)) :is(.crm-online, .icon-btn, .filter-btn, .panel-action, .period-tab, .period-tab-custom, .period-compare-button):hover,
.page-view:not(#page-kaiten) :is(.pv2-button, .ads-tool-button, .analytics-action, .integration-action):hover {
  border-color: rgba(42,169,223,.48);
  background: rgba(255,255,255,.82);
  color: var(--crm-accent-hover);
  transform: translateY(-1px);
}

body:has(.page-view.active:not(#page-kaiten)) :is(.crm-online, .icon-btn, .filter-btn, .panel-action, .period-tab, .period-tab-custom, .period-compare-button):focus-visible,
.page-view:not(#page-kaiten) :is(.pv2-button, .ads-tool-button, .analytics-action, .integration-action):focus-visible {
  outline: 0;
  box-shadow: var(--crm-focus-ring);
}

body:has(.page-view.active:not(#page-kaiten)) .icon-btn,
.page-view:not(#page-kaiten) #global-topbar .icon-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

/* One header raster on every module: no opaque wrapper behind period buttons. */
body:has(.page-view.active:not(#page-kaiten)) :is(.topbar, #global-topbar) {
  align-items: center;
  gap: 2px;
}

.page-view:not(#page-kaiten) #global-topbar {
  align-items: center;
  gap: 2px;
}

body:has(.page-view.active:not(#page-kaiten)) .period-tabs,
.page-view:not(#page-kaiten) #global-topbar .period-tabs {
  min-height: 36px;
  gap: 1px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body:has(.page-view.active:not(#page-kaiten)) .period-preset-tabs,
.page-view:not(#page-kaiten) #global-topbar .period-preset-tabs {
  display: flex;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-control-radius);
  background: var(--crm-surface-soft);
}

body:has(.page-view.active:not(#page-kaiten)) .period-preset-tabs .period-tab,
.page-view:not(#page-kaiten) #global-topbar .period-preset-tabs .period-tab {
  height: 30px;
  min-height: 30px;
  padding-block: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .crm-online,
  .icon-btn,
  .period-tab-custom,
  .period-compare-button
),
.page-view:not(#page-kaiten) #global-topbar :is(
  .crm-online,
  .icon-btn,
  .period-tab-custom,
  .period-compare-button
) {
  height: 36px;
  min-height: 36px;
}

body:has(.page-view.active:not(#page-kaiten)) .icon-btn,
.page-view:not(#page-kaiten) #global-topbar .icon-btn {
  width: 36px;
  flex-basis: 36px;
}

#page-pv > .pv2-tabs,
body #page-pv .pv2-tabs {
  background: transparent;
}

html[data-theme="dark"] body:has(.page-view.active:not(#page-kaiten)) :is(.crm-online, .icon-btn, .filter-btn, .panel-action, .period-tab, .period-tab-custom, .period-compare-button),
html[data-theme="dark"] .page-view:not(#page-kaiten) :is(.pv2-button, .ads-tool-button, .analytics-action, .integration-action) {
  border-color: rgba(151,174,194,.24);
  background: var(--crm-surface-soft);
  color: #dce9f4;
}

html[data-theme="dark"] body:has(.page-view.active:not(#page-kaiten)) :is(.crm-online, .icon-btn, .filter-btn, .panel-action, .period-tab, .period-tab-custom, .period-compare-button):hover,
html[data-theme="dark"] .page-view:not(#page-kaiten) :is(.pv2-button, .ads-tool-button, .analytics-action, .integration-action):hover {
  border-color: #3b627b;
  background: #1d3346;
  color: var(--crm-accent-hover);
}

/*
 * Visible page rhythm starts at the controls themselves. The social switcher
 * used to add a second inset inside the canonical 12px page gap, so its first
 * row appeared noticeably lower than the accepted PV header composition.
 */
#page-socials > .socials-switcher {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#page-socials > .socials-switcher > .socials-network-tabs {
  padding: 0;
}

/* SVL section controls are the exact same control family as the PV tabs. */
#page-svl > .svl-tabs {
  width: 100%;
  height: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
}

#page-svl > .svl-tabs::-webkit-scrollbar {
  display: none;
}

#page-svl > .svl-tabs > .svl-tab {
  height: 36px;
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 5px;
  border: 1px solid rgba(151,174,194,.32);
  border-radius: 9px;
  background: rgba(255,255,255,.55);
  color: #536b82;
  box-shadow: none;
  font-family: var(--crm-ui-font);
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  white-space: nowrap;
  -webkit-font-smoothing: auto;
}

#page-svl > .svl-tabs > .svl-tab:hover,
#page-svl > .svl-tabs > .svl-tab.active {
  border-color: rgba(42,169,223,.48);
  background: rgba(255,255,255,.82);
  color: #249bcf;
  box-shadow: none;
}

html[data-theme="dark"] body #page-svl > .svl-tabs > .svl-tab {
  border-color: rgba(151,174,194,.24);
  background: var(--crm-surface-soft);
  color: #dce9f4;
}

html[data-theme="dark"] body #page-svl > .svl-tabs > .svl-tab:hover,
html[data-theme="dark"] body #page-svl > .svl-tabs > .svl-tab.active {
  border-color: #3b627b;
  background: #1d3346;
  color: #55c7ef;
}

/*
 * Page modules historically painted their own near-black cards over the
 * canonical canvas. Major and nested structural underlays now resolve to the
 * same PV retention surface tokens; semantic status/accent fills stay local.
 */
.page-view:not(#page-kaiten):not(#page-pv) :is(
  [class$="-panel"],
  [class*="-panel "],
  [class$="-card"],
  [class*="-card "],
  [class$="-filters"],
  [class*="-filters "],
  [class$="-insights"],
  [class*="-insights "],
  [class$="-table-wrap"],
  [class*="-table-wrap "],
  .analytics-metric,
  .analytics-ratio-card,
  .user-stat-card
) {
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-panel-shadow);
}

#page-pv [data-pv-panel]:not([data-pv-panel="retention"]) :is(
  [class$="-panel"],
  [class*="-panel "],
  [class$="-card"],
  [class*="-card "],
  [class$="-module"],
  [class*="-module "]
) {
  border-color: var(--crm-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-panel-shadow);
}

.page-view:not(#page-kaiten) :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select:not([data-crm-native-select]),
  textarea,
  .chart-type-toggle,
  .path-conversion-modes
) {
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
  color: var(--crm-text);
}

.page-view:not(#page-kaiten):not(#page-pv) table tbody td {
  background-color: var(--crm-surface-solid);
}

.page-view:not(#page-kaiten):not(#page-pv) table tbody tr:nth-child(even) td {
  background-color: var(--crm-surface);
}

/* Standard underlays: panels, KPI groups and table shells share one surface. */
.page-view:not(#page-kaiten):not(#page-pv) :is(
  .panel,
  .kpi-card,
  .goal-pair,
  .online-panel,
  .user-stats-panel,
  .users-table-panel,
  .ads-campaigns-panel,
  .ads-events-panel,
  .socials-panel,
  .svl-panel,
  .kdi-finance-panel,
  .analytics-acquisition-panel,
  .analytics-breakdown-panel,
  .analytics-chart-panel,
  .analytics-detail-panel,
  .analytics-quality-panel,
  .team-pulse-panel,
  .team-structure-canvas-card,
  .planning-card,
  .planning-detail-card,
  .planning-review-card
) {
  border-color: var(--crm-border);
  border-radius: var(--crm-panel-radius);
  background: var(--crm-surface);
  box-shadow: var(--crm-panel-shadow);
}

.page-view:not(#page-kaiten):not(#page-pv) :is(
  .users-table-wrap,
  .access-table-wrap,
  .audit-table-wrap,
  .online-history-table-wrap,
  .ads-table-wrap,
  .socials-table-wrap,
  .svl-table-wrap,
  .kdi-table-wrap,
  .analytics-table-wrap,
  .data-normalization-table-wrap,
  .product-project-table-wrap
) {
  border-color: var(--crm-border);
  border-radius: var(--crm-control-radius);
  background: var(--crm-surface);
  box-shadow: var(--crm-panel-shadow);
}

.page-view:not(#page-kaiten) table {
  color: var(--crm-text);
}

.page-view:not(#page-kaiten) table thead th {
  border-color: var(--crm-border);
  background: var(--crm-table-head);
  color: var(--crm-muted);
}

.page-view:not(#page-kaiten) table tbody td {
  border-color: var(--crm-border);
}

/*
 * Shared service surfaces.
 *
 * Settings is portaled to body, while presence history is a sibling of its
 * page.  Both therefore need the same document-level scope as the common
 * header.  The inner Kaiten workspace remains outside these selectors.
 */
body:has(.page-view.active:not(#page-kaiten)) :is(
  .settings-menu,
  .login-history-dialog,
  .audit-toolbar
) {
  border-color: var(--crm-border);
  background: var(--crm-surface);
  color: var(--crm-text);
  box-shadow: var(--crm-panel-shadow);
}

body:has(.page-view.active:not(#page-kaiten)) .settings-menu {
  font-family: var(--crm-ui-font);
  font-synthesis: none;
}

body:has(.page-view.active:not(#page-kaiten)) .settings-divider {
  background: var(--crm-border);
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .settings-account,
  .settings-link,
  .settings-account-name
) {
  color: var(--crm-text);
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .settings-account-role,
  .settings-link-sub,
  .settings-link-arrow,
  .settings-row
) {
  color: var(--crm-muted);
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .settings-account:hover,
  .settings-link:hover
) {
  background: var(--crm-surface-hover);
  color: var(--crm-text);
}

body:has(.page-view.active:not(#page-kaiten)) .settings-menu :is(.theme-toggle,.pv-appearance-toggle) {
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .online-employee,
  .online-history-search,
  .login-history-summary,
  .login-history-stat:not(.login-history-stat-featured),
  .login-history-day,
  .login-history-event,
  .login-history-section-panel
) {
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
  color: var(--crm-text);
}

body:has(.page-view.active:not(#page-kaiten)) .online-history-search input {
  border: 0;
  background: transparent;
  color: var(--crm-text);
  box-shadow: none;
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .online-history-search,
  .login-history-summary,
  .login-history-head,
  .login-history-events
) {
  border-color: var(--crm-border);
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .online-panel-title,
  .online-employee-name,
  .login-history-title,
  .login-history-stat-value,
  .login-history-day-title,
  .login-history-event-label,
  .login-history-section-copy strong,
  .audit-actor-name,
  .audit-action
) {
  color: var(--crm-text);
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .online-panel-sub,
  .online-employee-login,
  .online-history-search,
  .online-history-search input::placeholder,
  .login-history-login,
  .login-history-stat-label,
  .login-history-stat-note,
  .login-history-state,
  .login-history-section-copy span,
  .login-history-section-note,
  .login-history-section-empty,
  .audit-summary-copy,
  .audit-actor-login,
  .audit-details,
  .audit-empty
) {
  color: var(--crm-muted);
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .login-history-close,
  .audit-refresh
) {
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
  color: var(--crm-text);
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .login-history-close:hover,
  .audit-refresh:hover
) {
  border-color: var(--crm-accent);
  background: var(--crm-surface-hover);
  color: var(--crm-accent);
}

/* Cell backgrounds used to hide the row hover painted underneath the table. */
body:has(#page-online.active) .online-history-row:hover > td,
body:has(#page-online.active) .online-history-row:focus-visible > td,
body:has(#page-online.active) .online-history-row:hover .online-history-action,
body:has(#page-online.active) .online-history-row:focus-visible .online-history-action {
  background: var(--crm-surface-hover) !important;
}

body:has(#page-online.active) .online-employee:hover {
  border-color: var(--crm-border-strong);
  background: var(--crm-surface-hover);
}

/* Canvas remains transparent so the final graph raster includes the underlay. */
.page-view:not(#page-kaiten) canvas {
  background: transparent;
  color: var(--crm-text);
}

/* SVG chart labels use the same typeface as canvas charts and page text. */
.page-view:not(#page-kaiten) svg text {
  font-family: var(--crm-ui-font);
}

/*
 * PV participants: keep the accepted CRM canvas visible and use the same
 * clean blue surfaces as Main/PV dashboard. Status colors are accents only;
 * they must not tint the card underlays or create a muddy overlay.
 */
html[data-theme="dark"] body:has(#page-pv.active [data-pv-panel="participants"].active) #page-pv.pv2-page [data-pv-panel="participants"].pv2-section.active {
  background: transparent !important;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card {
  border-color: var(--crm-border);
  border-left-color: var(--user-accent);
  background: var(--crm-surface);
  box-shadow: var(--crm-panel-shadow);
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card-summary {
  border-right-color: var(--crm-border);
  background: transparent;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card-chart {
  background: transparent;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card .user-stat-label,
html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-chart-head,
html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-chart-head strong {
  color: #f8fbff;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card .user-stat-value {
  color: var(--user-accent);
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card .user-stat-delta.up {
  color: #3be28f;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card .user-stat-delta.down {
  color: #ff6158;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] :is(
  .pv2-status-card .user-stat-delta.neutral,
  .pv2-status-chart-period
) {
  color: #b9cad8;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card:nth-child(1) { --user-accent: #a987ff !important; }
html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card:nth-child(2) { --user-accent: #43c2ff !important; }
html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card:nth-child(3) { --user-accent: #3be28f !important; }
html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card:nth-child(4) { --user-accent: #ffb23e !important; }
html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card:nth-child(5) { --user-accent: #ff6158 !important; }
html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card:nth-child(6) { --user-accent: #44e0cf !important; }
html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card:nth-child(7) { --user-accent: #cf6cff !important; }
html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card:nth-child(8) { --user-accent: #b9cad8 !important; }
html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status-card:nth-child(9) { --user-accent: #ffd166 !important; }

/* Participants table: clean palette, content-led defaults and one 12px rhythm. */
#page-pv [data-pv-panel="participants"].active {
  gap: 12px;
}

#page-pv [data-pv-panel="participants"] .pv2-participant-status-grid {
  margin-bottom: 0;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="participants"].active .pv2-table-wrap {
  border-color: #2a4053;
  background: var(--crm-surface);
  box-shadow: var(--crm-panel-shadow);
}

html[data-theme="dark"] body #page-pv [data-pv-panel="participants"].active .pv2-participants-table th {
  border-color: #2a4053;
  background: #183044;
  color: #e7f3fb;
  font-weight: 500;
  letter-spacing: 0;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="participants"].active .pv2-participants-table td {
  border-color: #2a4053;
  color: #dce9f4;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="participants"].active :is(.pv2-person,.pv2-telegram-link) {
  color: #f8fbff;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="participants"].active .pv2-telegram-link {
  color: #43c2ff;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="participants"].active .pv2-participants-table tbody tr:nth-child(odd) > td {
  background: #162a3a;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="participants"].active .pv2-participants-table tbody tr:nth-child(even) > td {
  background: #193044;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="participants"].active .pv2-participants-table tbody tr:hover > td {
  background: #1f4056;
}

/* Retention uses the same solid surface ladder as every other CRM module. */
html[data-theme="dark"] body #page-pv [data-pv-panel="retention"] .pv2-retention-nl-kpis > button {
  background: var(--crm-surface);
}

html[data-theme="dark"] body #page-pv [data-pv-panel="retention"] :is(
  .pv2-retention-nl-actions button,
  .pv2-retention-nl-search,
  .pv2-retention-nl-view-tabs,
  .pv2-retention-quick-card
) {
  background: var(--crm-surface-soft);
}

html[data-theme="dark"] body #page-pv [data-pv-panel="retention"] .pv2-retention-nl-card {
  background: var(--crm-surface-solid);
}

/* PV finance follows the accepted clean Main palette without losing depth. */
#page-pv [data-pv-panel="finance"] .pv2-finance-dashboard {
  display: grid;
  gap: 12px;
  font-family: var(--crm-ui-font);
  font-synthesis: none;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-dashboard {
  --finance-surface: var(--crm-surface);
  --finance-surface-soft: var(--crm-surface-soft);
  --finance-surface-subtle: #1f4056;
  --finance-border: #2a4053;
  --finance-border-strong: #31495c;
  --finance-track: #173148;
  --finance-heading: #f8fbff;
  --finance-text: #f8fbff;
  --finance-label: #dce9f4;
  --finance-muted: #b9cad8;
  --finance-soft-text: #91a5b7;
  --finance-chart-text: #dce9f4;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-block {
  border-color: color-mix(in srgb,var(--finance-accent) 38%,#2a4053);
  background: var(--finance-surface);
  box-shadow: var(--crm-panel-shadow);
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] :is(
  .pv2-finance-summary-card,
  .pv2-finance-chart-card,
  .pv2-finance-plan,
  .pv2-finance-composition
) {
  border-color: var(--finance-border);
  background: var(--finance-surface-soft);
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-block-title {
  color: #f8fbff !important;
  font-size: 16px;
  font-weight: 500 !important;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-block-note {
  color: #b9cad8 !important;
  font-size: 10px;
  font-weight: 400 !important;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-summary-label {
  min-height: 0;
  color: #dce9f4;
  font-size: 10px;
  font-weight: 400 !important;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-summary-value {
  color: var(--card-color,var(--finance-text));
  font-size: 20px;
  font-weight: 500 !important;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-summary-note {
  color: #b9cad8;
  font-size: 9px;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-rule {
  border: 1px solid var(--finance-border);
  background: var(--finance-surface-soft);
  color: var(--finance-muted);
  font-size: 9px;
  font-weight: 400;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-report-wrap {
  border-color: var(--finance-border);
  background: var(--finance-surface-soft);
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-report th {
  border-color: var(--finance-border);
  background: #183044;
  color: #dce9f4;
  font-size: 10px;
  font-weight: 500 !important;
  letter-spacing: 0;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-report td {
  border-color: var(--finance-border);
  background: #193044;
  color: #f8fbff;
  font-size: 11px;
  font-weight: 400;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-report td:nth-child(3) { color: #44e0cf; }
html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-report td:nth-child(4) { color: #ff6158; }
html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .pv2-finance-report td:nth-child(5) { color: #a987ff; }

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .svl-empty strong {
  color: #f8fbff;
  font-size: 14px;
  font-weight: 500 !important;
}

html[data-theme="dark"] body #page-pv [data-pv-panel="finance"] .svl-empty p {
  color: #b9cad8;
  font-size: 11px;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-participant-filter-trigger:is(:hover,.active) {
  border-color: #3b627b;
  background: #1f526f;
  color: #f8fbff;
}

#page-pv [data-pv-panel="participants"] .pv2-participant-sort {
  position: relative;
  width: 24px;
  height: 24px;
  border-color: transparent;
  background: transparent;
  color: #9fb8ca;
  font-size: 0;
}

#page-pv [data-pv-panel="participants"] .pv2-participant-sort::before,
#page-pv [data-pv-panel="participants"] .pv2-participant-sort::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
}

#page-pv [data-pv-panel="participants"] .pv2-participant-sort::before {
  top: 5px;
  transform: rotate(45deg);
}

#page-pv [data-pv-panel="participants"] .pv2-participant-sort::after {
  bottom: 5px;
  transform: rotate(225deg);
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-participant-sort:is(:hover,.active) {
  border-color: #3b627b;
  background: #1f526f;
  color: #43c2ff;
}

#page-pv [data-pv-panel="participants"] .pv2-participant-sort[data-sort-direction="asc"]::after,
#page-pv [data-pv-panel="participants"] .pv2-participant-sort[data-sort-direction="desc"]::before {
  opacity: .28;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status {
  border: 1px solid rgba(59,226,143,.34);
  background: rgba(59,226,143,.14);
  color: #3be28f;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status.new-premium {
  border-color: rgba(67,194,255,.38);
  background: rgba(67,194,255,.14);
  color: #43c2ff;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status.social {
  border-color: rgba(68,224,207,.36);
  background: rgba(68,224,207,.14);
  color: #44e0cf;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status.returned {
  border-color: rgba(169,135,255,.38);
  background: rgba(169,135,255,.14);
  color: #a987ff;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status.warn {
  border-color: rgba(255,178,62,.38);
  background: rgba(255,178,62,.14);
  color: #ffb23e;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status.danger {
  border-color: rgba(255,97,88,.4);
  background: rgba(255,97,88,.14);
  color: #ff6158;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status.free {
  border-color: rgba(185,202,216,.3);
  background: rgba(185,202,216,.12);
  color: #dce9f4;
}

#page-pv [data-pv-panel="participants"] .pv2-participant-statuses {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

#page-pv [data-pv-panel="participants"] .pv2-status.gift {
  background: rgba(214,164,55,.14);
  color: #a97910;
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status.gift {
  border-color: rgba(255,209,102,.38);
  background: rgba(255,209,102,.14);
  color: #ffd166;
}

#page-pv .pv2-retention-drawer-section dd.subscription-status.gift {
  background: #fff4d1;
  color: #986b05;
  box-shadow: inset 0 0 0 1px #e4bf59;
}

html[data-theme="dark"] #page-pv .pv2-retention-drawer-section dd.subscription-status.gift {
  background: rgba(255,209,102,.14);
  color: #ffd166;
  box-shadow: inset 0 0 0 1px rgba(255,209,102,.38);
}

html[data-theme="dark"] #page-pv [data-pv-panel="participants"] .pv2-status.active {
  border-color: rgba(59,226,143,.34);
  background: rgba(59,226,143,.14);
  color: #3be28f;
}

/* Remaining PV modules share the same clean, layered visual language. */
#page-pv :is(
  .pv2-events-dashboard,
  .pv2-passport-dashboard,
  .pv2-marketing-dashboard,
  .pv2-surveys-dashboard
) {
  display: grid;
  gap: 12px;
  font-family: var(--crm-ui-font);
  font-synthesis: none;
}

#page-pv :is(
  .pv2-events-module-title,
  .pv2-passport-module-title,
  .pv2-marketing-module-title,
  .pv2-surveys-module-title
) {
  font-size: 16px;
  font-weight: 500 !important;
}

html[data-theme="dark"] body #page-pv :is(
  .pv2-events-dashboard,
  .pv2-passport-dashboard,
  .pv2-marketing-dashboard,
  .pv2-surveys-dashboard
) {
  --pv-clean-heading: #f8fbff;
  --pv-clean-label: #dce9f4;
  --pv-clean-muted: #b9cad8;
  --pv-clean-soft-text: #91a5b7;
  --pv-clean-border: #2a4053;
  --pv-clean-border-strong: #31495c;
  --pv-clean-teal: #44e0cf;
  --pv-clean-blue: #43c2ff;
  --pv-clean-green: #3be28f;
  --pv-clean-violet: #a987ff;
  --pv-clean-amber: #ffb23e;
  --pv-clean-rose: #ff6f91;
}

html[data-theme="dark"] body #page-pv :is(
  .pv2-events-hero,
  .pv2-passport-hero,
  .pv2-marketing-hero,
  .pv2-surveys-hero
) {
  border-color: var(--pv-clean-border-strong);
  background:
    radial-gradient(circle at 12% 12%, rgba(67,194,255,.1), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(169,135,255,.08), transparent 32%),
    var(--crm-surface);
  box-shadow: var(--crm-panel-shadow);
}

html[data-theme="dark"] body #page-pv :is(
  .pv2-events-hero h2,
  .pv2-passport-hero h2,
  .pv2-marketing-hero h2,
  .pv2-surveys-hero h2,
  .pv2-events-module-title,
  .pv2-passport-module-title,
  .pv2-marketing-module-title,
  .pv2-surveys-module-title,
  .pv2-passport-hypothesis-head > strong,
  .pv2-marketing-source-head h4
) {
  color: var(--pv-clean-heading) !important;
}

html[data-theme="dark"] body #page-pv :is(
  .pv2-events-hero p,
  .pv2-passport-hero p,
  .pv2-marketing-hero p,
  .pv2-surveys-hero p,
  .pv2-events-module-note,
  .pv2-passport-module-note,
  .pv2-marketing-module-note,
  .pv2-surveys-module-note
) {
  color: var(--pv-clean-muted) !important;
  font-weight: 400 !important;
}

html[data-theme="dark"] body #page-pv :is(
  .pv2-events-hero-kicker,
  .pv2-passport-hero-kicker,
  .pv2-marketing-hero-kicker
) { color: var(--pv-clean-teal); }

html[data-theme="dark"] body #page-pv .pv2-surveys-hero-kicker { color: var(--pv-clean-violet); }

html[data-theme="dark"] body #page-pv :is(
  .pv2-events-module,
  .pv2-passport-module,
  .pv2-marketing-module,
  .pv2-surveys-module
) {
  border-color: color-mix(in srgb,var(--events-accent,var(--passport-accent,var(--marketing-accent,var(--surveys-accent,#44e0cf)))) 38%,var(--pv-clean-border));
  background: var(--crm-surface);
  box-shadow: var(--crm-panel-shadow);
}

html[data-theme="dark"] body #page-pv :is(
  .pv2-events-module,
  .pv2-passport-module,
  .pv2-marketing-module,
  .pv2-surveys-module
) .svl-empty strong {
  color: var(--pv-clean-heading);
  font-size: 14px;
  font-weight: 500 !important;
}

html[data-theme="dark"] body #page-pv :is(
  .pv2-events-module,
  .pv2-passport-module,
  .pv2-marketing-module,
  .pv2-surveys-module
) .svl-empty p {
  color: var(--pv-clean-muted);
  font-size: 11px;
  font-weight: 400 !important;
}

html[data-theme="dark"] body #page-pv :is(
  .pv2-passport-hero-meta,
  .pv2-marketing-hero-period,
  .pv2-surveys-hero-period,
  .pv2-marketing-hero-kpis > div,
  .pv2-passport-offer-fact,
  .pv2-passport-hypothesis,
  .pv2-marketing-source-card,
  .pv2-marketing-table-wrap
) {
  border-color: var(--pv-clean-border);
  background: var(--crm-surface-soft);
}

html[data-theme="dark"] body #page-pv .pv2-passport-hero-meta strong,
html[data-theme="dark"] body #page-pv .pv2-marketing-hero-kpis strong {
  color: var(--pv-clean-heading);
  font-weight: 500 !important;
}

html[data-theme="dark"] body #page-pv :is(
  .pv2-passport-hero-meta small,
  .pv2-marketing-hero-kpis span,
  .pv2-marketing-source-card > small,
  .pv2-marketing-source-foot
) {
  color: var(--pv-clean-muted) !important;
}

html[data-theme="dark"] body #page-pv .pv2-passport-offer-facts {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin-top: 0;
}

html[data-theme="dark"] body #page-pv .pv2-passport-offer-fact {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--pv-clean-border);
  border-left: 3px solid var(--passport-accent);
  border-radius: 10px;
}

html[data-theme="dark"] body #page-pv .pv2-passport-offer-fact dt {
  color: var(--pv-clean-teal);
  font-size: 8px;
}

html[data-theme="dark"] body #page-pv .pv2-passport-offer-fact dd {
  color: var(--pv-clean-label);
  font-size: 10px;
}

html[data-theme="dark"] body #page-pv .pv2-passport-hypotheses {
  gap: 10px;
}

html[data-theme="dark"] body #page-pv .pv2-passport-hypothesis {
  border-color: var(--pv-clean-border);
  background: var(--crm-surface-soft);
}

html[data-theme="dark"] body #page-pv .pv2-passport-hypothesis-head {
  border-color: var(--pv-clean-border);
}

html[data-theme="dark"] body #page-pv .pv2-passport-hypothesis-head > strong {
  padding: 0;
  background: transparent;
  font-size: 10px;
  font-weight: 500 !important;
}

html[data-theme="dark"] body #page-pv .pv2-marketing-source-card > strong {
  color: var(--pv-clean-teal);
  font-weight: 500 !important;
}

html[data-theme="dark"] body #page-pv .pv2-marketing-source-foot {
  flex-wrap: wrap;
  font-size: 9px;
}

html[data-theme="dark"] body #page-pv .pv2-marketing-table th {
  border-color: var(--pv-clean-border);
  background: #183044;
  color: var(--pv-clean-label);
  font-size: 9px;
  font-weight: 500 !important;
  letter-spacing: 0;
}

html[data-theme="dark"] body #page-pv .pv2-marketing-table td {
  border-color: var(--pv-clean-border);
  background: #193044;
  color: var(--pv-clean-heading);
  font-size: 10px;
}

html[data-theme="dark"] body #page-pv .pv2-marketing-table tbody tr:hover td {
  background: #1f4056;
}

html[data-theme="dark"] body #page-pv .pv2-marketing-channel-dot {
  background: var(--pv-clean-blue);
}

html[data-theme="dark"] body #page-pv .pv2-marketing-hero-period {
  color: var(--pv-clean-teal);
  font-size: 9px;
}

html[data-theme="dark"] body #page-pv .pv2-surveys-hero-period {
  color: var(--pv-clean-violet);
  font-size: 9px;
}

/* CRM modules outside Main/PV use the same blue depth ladder and clean type. */
html[data-theme="dark"] body :is(
  #page-users,
  #page-analytics,
  #page-paths,
  #page-ads,
  #page-socials,
  #page-svl,
  #page-vdp,
  #page-kdi,
  #page-planning,
  #page-team-pulse,
  #page-team-structure,
  #page-integrations
) {
  --module-heading: #f8fbff;
  --module-label: #dce9f4;
  --module-muted: #b9cad8;
  --module-soft-text: #91a5b7;
  --module-border: #2a4053;
  --module-border-strong: #31495c;
  --module-teal: #44e0cf;
  --module-blue: #43c2ff;
  --module-green: #3be28f;
  --module-violet: #a987ff;
  --module-amber: #ffb23e;
  --module-red: #ff6158;
  font-family: var(--crm-ui-font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] body :is(
  #page-users,
  #page-analytics,
  #page-paths,
  #page-ads,
  #page-socials,
  #page-svl,
  #page-vdp,
  #page-kdi,
  #page-planning,
  #page-team-pulse,
  #page-team-structure,
  #page-integrations
) :is(h1,h2,h3,h4,.page-title,.panel-title) {
  color: var(--module-heading);
}

html[data-theme="dark"] body :is(
  #page-users,
  #page-analytics,
  #page-paths,
  #page-ads,
  #page-socials,
  #page-svl,
  #page-vdp,
  #page-kdi,
  #page-planning,
  #page-team-pulse,
  #page-team-structure,
  #page-integrations
) :is(.page-sub,.panel-sub,.panel-note) {
  color: var(--module-muted);
}

html[data-theme="dark"] body :is(
  #page-users,
  #page-analytics,
  #page-paths,
  #page-ads,
  #page-socials,
  #page-svl,
  #page-vdp,
  #page-kdi,
  #page-planning,
  #page-team-pulse,
  #page-team-structure,
  #page-integrations
) :is(
  [class$="-panel"],
  [class*="-panel "],
  .planning-workspace,
  .planning-local-nav,
  .planning-detail,
  .team-pulse-rating-layout,
  .team-pulse-intro,
  .integrations-overview,
  .integrations-summary,
  .socials-dashboard-toolbar,
  .socials-command-center,
  .ads-attribution-note,
  .kdi-semantics,
  .svl-tabs,
  .vdp-tabs
) {
  border-color: var(--module-border);
  background: var(--crm-surface);
  box-shadow: var(--crm-panel-shadow);
}

html[data-theme="dark"] body :is(
  #page-users,
  #page-analytics,
  #page-paths,
  #page-ads,
  #page-socials,
  #page-svl,
  #page-vdp,
  #page-kdi,
  #page-planning,
  #page-team-pulse,
  #page-team-structure,
  #page-integrations
) :is(
  [class$="-card"],
  [class*="-card "],
  .kpi-card,
  .ads-kpi,
  .svl-kpi,
  .vdp-kpi,
  .kdi-kpis > article,
  .integration-summary-item,
  .integrations-summary > div,
  .planning-task,
  .team-pulse-colleagues,
  .team-pulse-score-board,
  .team-pulse-savebar,
  .team-pulse-deadline
) {
  border-color: var(--module-border);
  background: var(--crm-surface-soft);
  box-shadow: none;
}

html[data-theme="dark"] body :is(
  #page-users,
  #page-analytics,
  #page-paths,
  #page-ads,
  #page-socials,
  #page-svl,
  #page-vdp,
  #page-kdi,
  #page-planning,
  #page-team-pulse,
  #page-team-structure,
  #page-integrations
) :is(
  [class$="-table-wrap"],
  [class*="-table-wrap "],
  .ads-events-wrap,
  .kdi-finance-body,
  .integration-flow,
  .planning-task,
  .team-pulse-scroll
) {
  border-color: var(--module-border);
  background: var(--crm-surface-soft);
}

html[data-theme="dark"] body :is(
  #page-users,
  #page-analytics,
  #page-paths,
  #page-ads,
  #page-socials,
  #page-svl,
  #page-vdp,
  #page-kdi,
  #page-planning,
  #page-team-pulse,
  #page-team-structure,
  #page-integrations
) table thead th {
  border-color: var(--module-border);
  background: #183044;
  color: var(--module-label);
}

html[data-theme="dark"] body :is(
  #page-users,
  #page-analytics,
  #page-paths,
  #page-ads,
  #page-socials,
  #page-svl,
  #page-vdp,
  #page-kdi,
  #page-planning,
  #page-team-pulse,
  #page-team-structure,
  #page-integrations
) table tbody td {
  border-color: var(--module-border);
  background: #193044;
  color: var(--module-label);
}

html[data-theme="dark"] body :is(
  #page-users,
  #page-analytics,
  #page-paths,
  #page-ads,
  #page-socials,
  #page-svl,
  #page-vdp,
  #page-kdi,
  #page-planning,
  #page-team-pulse,
  #page-team-structure,
  #page-integrations
) table tbody tr:nth-child(even) td {
  background: #162a3a;
}

html[data-theme="dark"] body :is(
  #page-users,
  #page-analytics,
  #page-paths,
  #page-ads,
  #page-socials,
  #page-svl,
  #page-vdp,
  #page-kdi,
  #page-planning,
  #page-team-pulse,
  #page-team-structure,
  #page-integrations
) table tbody tr:hover td {
  background: #1f4056;
}

/* Page-specific old near-black layers that are not named as cards/panels. */
html[data-theme="dark"] body #page-ads :is(.ads-kpi,.ads-events-wrap,.ads-spend-editor,.ads-empty-state),
html[data-theme="dark"] body #page-socials :is(.socials-network-tabs,.socials-switcher,.socials-data-warning,.socials-source-state),
html[data-theme="dark"] body #page-svl :is(.svl-callouts > *, .svl-signal, .svl-source-banner),
html[data-theme="dark"] body #page-vdp :is(.vdp-source-banner,.vdp-completeness,.vdp-empty),
html[data-theme="dark"] body #page-kdi :is(.kdi-source-state,.kdi-semantics,.kdi-finance-body,.kdi-empty),
html[data-theme="dark"] body #page-planning :is(.planning-toolbar,.planning-quick-capture,.planning-search),
html[data-theme="dark"] body #page-team-pulse :is(.team-pulse-tabs,.team-pulse-status,.team-pulse-person,.team-pulse-score-zone,.team-pulse-savebar),
html[data-theme="dark"] body #page-integrations :is(.integrations-overall-status,.integrations-action,.integration-flow) {
  border-color: var(--module-border);
  background: var(--crm-surface-soft);
}

html[data-theme="dark"] body #page-paths :is(
  .journey-column,
  .journey-detail-shell,
  .journey-detail-stage,
  .journey-detail-goal,
  .journey-detail-transition-card,
  .journey-route-empty
) {
  border-color: var(--module-border);
  background: var(--crm-surface-soft);
}

html[data-theme="dark"] body #page-socials :is(
  .socials-kpi-card strong,
  .socials-network-card strong,
  .socials-panel h2,
  .socials-panel h3
) { color: var(--module-heading); }

html[data-theme="dark"] body #page-socials :is(
  .socials-kpi-card span,
  .socials-network-card small,
  .socials-chart-empty,
  .socials-panel p
) { color: var(--module-muted); }

html[data-theme="dark"] body :is(#page-svl,#page-vdp,#page-kdi) :is(
  .svl-kpi-label,
  .svl-kpi-note,
  .svl-heading-note,
  .kdi-finance-note,
  .kdi-panel-head p
) { color: var(--module-muted); }

html[data-theme="dark"] body :is(#page-svl,#page-vdp,#page-kdi) :is(
  .svl-kpi-value,
  .svl-heading,
  .kdi-heading,
  .kdi-panel-head h3
) { color: var(--module-heading); }

/* Exact nested surfaces and controls missed by the generic structural names. */
html[data-theme="dark"] body #page-integrations .integrations-summary article,
html[data-theme="dark"] body #page-kdi .kdi-finance-grid article,
html[data-theme="dark"] body #page-team-structure .team-structure-inspector {
  border-color: var(--module-border);
  background: var(--crm-surface-soft);
  box-shadow: none;
}

html[data-theme="dark"] body #page-team-structure .team-structure-inspector-empty {
  color: var(--module-muted);
}

html[data-theme="dark"] body #page-integrations .integrations-action {
  border-color: var(--module-border);
  background: var(--crm-surface-soft);
  color: var(--module-heading);
}

html[data-theme="dark"] body #page-integrations :is(
  .integrations-summary span,
  .integrations-action small,
  .integration-card > p,
  .integration-card-foot > div span
) { color: var(--module-muted); }

html[data-theme="dark"] body #page-integrations :is(
  .integrations-summary strong,
  .integrations-action strong,
  .integration-card-head strong,
  .integration-card-foot > div strong
) { color: var(--module-heading); }

html[data-theme="dark"] body #page-socials .socials-switcher {
  background: transparent;
}

html[data-theme="dark"] body #page-socials .socials-network-tabs button,
html[data-theme="dark"] body #page-socials .socials-audience-tabs {
  border-color: var(--module-border);
  background: var(--crm-surface-soft);
  color: var(--module-label);
}

html[data-theme="dark"] body #page-socials .socials-network-tabs button.active {
  border-color: color-mix(in srgb,var(--socials-accent) 66%,var(--module-border));
  background: color-mix(in srgb,var(--socials-accent) 16%,var(--crm-surface-soft));
  color: var(--module-heading);
}

html[data-theme="dark"] body #page-socials .socials-audience-tabs button.active {
  background: #1f5270;
  color: var(--module-heading);
}

html[data-theme="dark"] body #page-analytics .analytics-tabs {
  gap: 7px;
  margin-bottom: 12px;
}

html[data-theme="dark"] body #page-analytics .analytics-tabs button {
  border-color: var(--module-border);
  background: var(--crm-surface-soft);
  color: var(--module-muted);
  font-weight: 400;
}

html[data-theme="dark"] body #page-analytics .analytics-tabs button.active {
  border-color: #3b627b;
  background: #1f5270;
  color: var(--module-heading);
  box-shadow: inset 0 -2px 0 #55d7ff;
}

html[data-theme="dark"] body #page-kdi .kdi-finance-grid :is(header strong,dd) {
  color: var(--module-heading);
}

html[data-theme="dark"] body #page-kdi .kdi-finance-grid :is(header span,dt),
html[data-theme="dark"] body #page-kdi .kdi-finance-note {
  color: var(--module-muted);
}

/* The reference Filter label is the canonical control weight everywhere. */
body:has(.page-view.active:not(#page-kaiten)) :is(
  button,
  .crm-online-status,
  .period-tab,
  .filter-btn,
  .panel-action
) {
  font-family: var(--crm-ui-font);
  font-synthesis: none;
}

body:has(.page-view.active:not(#page-kaiten)) :is(
  .crm-online-status,
  .period-tab,
  .filter-btn,
  .panel-action
) {
  font-weight: 400;
}

/* The reference header represents custom period and comparison as square icons. */
body:has(.page-view.active:not(#page-kaiten)) .period-tab-custom {
  width: 36px;
  min-width: 36px;
  justify-content: center;
  padding: 6px;
  font-size: 0;
}

body:has(.page-view.active:not(#page-kaiten)) .period-tab-custom svg {
  width: 16px;
  height: 18px;
}

body:has(.page-view.active:not(#page-kaiten)) .period-compare-button {
  width: 36px;
  min-width: 36px;
  justify-content: center;
  padding: 6px;
  font-size: 0;
}

body:has(.page-view.active:not(#page-kaiten)) .period-compare-button-symbol {
  font-size: 20px;
}

body:has(.page-view.active:not(#page-kaiten)) [data-period-comparison-label] {
  display: none;
}

/* Analytics has three secondary actions; keep them as compact header icons. */
#page-analytics .analytics-header-actions .analytics-action {
  width: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 0;
}

#page-analytics .analytics-header-actions .analytics-action::before {
  font-size: 11px;
  font-weight: 500;
}

#page-analytics .analytics-header-actions .analytics-action:nth-child(1)::before { content: "₽"; }
#page-analytics .analytics-header-actions .analytics-action:nth-child(2)::before { content: "CSV"; }
#page-analytics .analytics-header-actions .analytics-action:nth-child(3)::before { content: "↻"; font-size: 17px; }

#page-analytics .analytics-header-actions .analytics-action > span {
  display: none;
}

#page-socials .socials-source-link {
  min-width: 0;
  min-height: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0 10px;
  border-color: var(--crm-border);
  border-radius: var(--crm-control-radius);
  background: var(--crm-surface-soft);
  color: #dce9f4;
  font-family: var(--crm-ui-font);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

#page-coming-soon.coming-soon-page.active {
  min-height: 100%;
  align-items: stretch;
  justify-content: flex-start;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--crm-text);
  text-align: left;
}

#page-coming-soon .coming-soon-state {
  min-height: calc(100vh - 72px);
  flex: 1 1 auto;
  align-self: stretch;
  justify-content: center;
  margin: 0 !important;
  text-align: center;
}

#page-svl .svl-mark,
#page-vdp .svl-mark,
#page-kdi .kdi-mark {
  display: none !important;
}

#page-svl .svl-heading > div,
#page-vdp .svl-heading > div,
#page-kdi .kdi-heading > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  white-space: nowrap;
}

#page-svl .svl-heading-note,
#page-vdp .svl-heading-note {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-team-structure .team-structure-toolbar,
#page-team-structure .team-structure-view-switch {
  height: 36px;
  min-height: 36px;
  gap: 1px;
}

#page-team-structure .team-structure-view-switch {
  padding: 2px;
  border-color: var(--crm-border);
  border-radius: var(--crm-control-radius);
  background: var(--crm-surface-soft);
}

#page-team-structure .team-structure-view-switch button {
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  font-family: var(--crm-ui-font);
  font-size: 12px;
  font-weight: 400;
}

#page-planning .planning-header-actions,
#page-planning .planning-person-picker {
  height: 36px;
  min-height: 36px;
  align-items: center;
}

#page-planning .planning-person-picker {
  display: block;
}

#page-planning .planning-person-trigger {
  height: 36px;
  min-height: 36px;
  border-color: var(--crm-border);
  border-radius: var(--crm-control-radius);
  background: var(--crm-surface-soft);
  color: var(--crm-text);
  font-family: var(--crm-ui-font);
  font-size: 12px;
}

#page-integrations .integrations-refresh,
#page-kdi .kdi-refresh {
  width: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 0;
}

#page-integrations .integrations-refresh::before,
#page-kdi .kdi-refresh::before {
  content: "↻";
  font-size: 17px;
  font-weight: 400;
}

/* Final header composition: VDP navigation replaces the removed page title. */
#page-vdp > .page-header > .vdp-tabs {
  width: auto;
  height: 36px;
  min-height: 36px;
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
}

#page-vdp > .page-header > .vdp-tabs::-webkit-scrollbar {
  display: none;
}

#page-vdp > .page-header > .vdp-tabs > .vdp-tab {
  height: 36px;
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 5px;
  border: 1px solid rgba(151,174,194,.32);
  border-radius: 9px;
  background: rgba(255,255,255,.55);
  color: #536b82;
  box-shadow: none;
  font-family: var(--crm-ui-font);
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  white-space: nowrap;
  -webkit-font-smoothing: auto;
}

#page-vdp > .page-header > .vdp-tabs > .vdp-tab:hover,
#page-vdp > .page-header > .vdp-tabs > .vdp-tab.active {
  border-color: rgba(42,169,223,.48);
  background: rgba(255,255,255,.82);
  color: #249bcf;
  box-shadow: none;
}

html[data-theme="dark"] body #page-vdp > .page-header > .vdp-tabs > .vdp-tab {
  border-color: rgba(151,174,194,.24);
  background: var(--crm-surface-soft);
  color: #dce9f4;
}

html[data-theme="dark"] body #page-vdp > .page-header > .vdp-tabs > .vdp-tab:hover,
html[data-theme="dark"] body #page-vdp > .page-header > .vdp-tabs > .vdp-tab.active {
  border-color: #3b627b;
  background: #1d3346;
  color: #55c7ef;
}

/*
 * The selected report period must remain visible after the generic header
 * control pass.  Keep the same cyan underline used by the accepted PV header
 * instead of repainting the active button as an ordinary control.
 */
body:has(.page-view.active:not(#page-kaiten)) .period-preset-tabs .period-tab.active {
  border-color: transparent;
  background: transparent;
  color: var(--crm-accent);
  box-shadow: inset 0 -2px var(--crm-accent);
}

/* Period presets belong to the shared CRM surface system, not the old black UI. */
body:has(.page-view.active:not(#page-kaiten)) .period-preset-popover {
  border-color: var(--crm-border);
  background: var(--crm-surface-solid);
  color: var(--crm-text);
  box-shadow: var(--crm-panel-shadow);
  font-family: var(--crm-ui-font);
}

body:has(.page-view.active:not(#page-kaiten)) .period-preset-title,
body:has(.page-view.active:not(#page-kaiten)) .period-preset-name {
  color: var(--crm-text);
}

body:has(.page-view.active:not(#page-kaiten)) :is(.period-preset-sub, .period-preset-range) {
  color: var(--crm-muted);
}

body:has(.page-view.active:not(#page-kaiten)) .period-preset-option {
  border-color: var(--crm-border);
  background: var(--crm-surface-soft);
  color: var(--crm-text);
}

body:has(.page-view.active:not(#page-kaiten)) .period-preset-option:is(:hover, .active) {
  border-color: color-mix(in srgb, var(--crm-accent) 62%, transparent);
  background: color-mix(in srgb, var(--crm-accent) 14%, var(--crm-surface-soft));
}

body:has(.page-view.active:not(#page-kaiten)) :is(.period-preset-close, .period-preset-option):focus-visible {
  outline: 0;
  box-shadow: var(--crm-focus-ring);
}

body:has(.page-view.active:not(#page-kaiten)) .period-preset-close {
  color: var(--crm-muted);
}

body:has(.page-view.active:not(#page-kaiten)) .period-preset-close:hover {
  background: var(--crm-surface-soft);
  color: var(--crm-accent-hover);
}

body:has(.page-view.active:not(#page-kaiten)) .period-preset-radio {
  border-color: var(--crm-border-strong);
}

body:has(.page-view.active:not(#page-kaiten)) .period-preset-option.active .period-preset-radio {
  border-color: var(--crm-accent);
}

body:has(.page-view.active:not(#page-kaiten)) .period-preset-option.active .period-preset-radio::after {
  background: var(--crm-accent);
}

/* These containers must stay transparent after the generic module-surface pass. */
#page-svl > .svl-tabs,
#page-vdp > .page-header > .vdp-tabs {
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 1300px) {
  .page-view:not(#page-pv):not(#page-kaiten) > .page-header .page-sub {
    display: none;
  }
}

@media (max-width: 700px) {
  body:has(.page-view.active:not(#page-kaiten)) .main {
    gap: 12px;
    padding:max(12px,env(safe-area-inset-top)) 12px max(20px,env(safe-area-inset-bottom));
  }

  body:has(.page-view.active:not(#page-kaiten):not(#page-pv)) .page-view.active {
    padding: 0 0 24px;
  }

  .page-view:not(#page-kaiten):not(#page-pv) > .page-header {
    width:100%;
    height:auto;
    min-height:44px;
    max-height:none;
    box-sizing:border-box;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:8px;
    padding-right:52px;
  }

  body:has(#page-main.active) #page-main > .page-header {
    height:auto;
    min-height:44px;
    max-height:none;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:8px;
    padding-right:52px;
  }

  body:has(.page-view.active:not(#page-kaiten)) :is(.topbar,#global-topbar) {
    width:100%;
    height:auto;
    min-width:0;
    max-height:none;
    flex-wrap:wrap;
  }

  body:has(.page-view.active:not(#page-kaiten)) #global-topbar .period-control {
    width:100%;
    max-width:100%;
    flex:1 1 100%;
  }

  body:has(.page-view.active:not(#page-kaiten)) .period-control {
    min-width:0;
    max-width:100%;
  }

  body:has(.page-view.active:not(#page-kaiten)) .period-tabs {
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  body:has(.page-view.active:not(#page-kaiten)) .period-tabs::-webkit-scrollbar { display:none; }

  #page-pv .pv2-heading { min-width:0; flex-wrap:wrap; }
  #page-pv .pv2-tab-list { width:100%; max-width:100%; flex:1 1 100%; overflow-x:auto; scrollbar-width:none; }
  #page-pv .pv2-tab-list::-webkit-scrollbar { display:none; }
  #page-pv .pv2-tabs-topbar-slot { width:100%; max-width:100%; min-width:0; margin-left:0; overflow:hidden; }
  #page-pv .pv2-tabs-topbar-slot #global-topbar { width:100%; max-width:100%; min-width:0; display:block; overflow:hidden; }
  #page-pv .pv2-tabs-topbar-slot #global-topbar .period-control { width:100%; }
  #page-pv .pv2-tabs-topbar-slot #global-topbar :is(.crm-online,.crm-agreements-quick,.crm-notifications,.settings,.export-button) { display:none; }

  .page-view.active:not(#page-kaiten) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { max-width:100%; font-size:16px; }
  .page-view.active:not(#page-kaiten) :is(canvas,svg,img,video) { max-width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.page-view.active:not(#page-kaiten)) :is(.crm-online, .icon-btn, .filter-btn, .panel-action, .period-tab),
  .page-view:not(#page-kaiten) button {
    transition-duration: .01ms;
  }
}