/* =========================================================================
   Дизайн «Flux» для кабинета отчётов — тот же, что в CRM (новая версия).

   Включается атрибутом data-skin="flux" на <html> (скрипт в <head>
   index.html, переключатель ?skin=flux / ?skin=old, запоминается в
   localStorage 'yo_skin'). Без атрибута не срабатывает ни одно правило —
   старый вид остаётся как был.

   Тема — как в CRM: по системной (светлая днём, тёмная ночью), принудительно
   ?theme=light|dark|auto (localStorage 'yo_theme').

   Два слоя:
   • flux.gen.css — СГЕНЕРИРОВАН из style.css (scripts/build_flux_css.py):
     все цвета style.css переведены в переменные ниже;
   • этот файл — переменные обеих тем и ручная доводка (шрифт, фон, меню,
     шапка, карточки, кнопки). Подключается после flux.gen.css.

   Язык Flux (из CRM, styles/skin-flux.css): светлое стекло на серо-голубом
   фоне с размытыми пятнами и «лентой», карточки — полупрозрачная бумага с
   тонкой гранью и скруглением 18px, шрифт тонкий (400/500), акцент — тёмные
   «чернила», главная кнопка — жёлтая с тёмным текстом, рост — зелёная
   плашка, падение — красная.
   ========================================================================= */

/* ── Шрифт: TT Norms Pro со сдвигом весов на ступень легче (как в CRM) ──
   Кабинет написан на 500–900; под Flux запрошенный 800 рисуется средним
   начертанием, 500 — обычным. Иерархия сохраняется, вес — как в образце. */
@font-face {
  font-family: "TT Norms Flux";
  src: url("/static/fonts/flux/TTNormsPro-Regular.woff2") format("woff2");
  font-weight: 100 560;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Norms Flux";
  src: url("/static/fonts/flux/TTNormsPro-Medium.woff2") format("woff2");
  font-weight: 561 850;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Norms Flux";
  src: url("/static/fonts/flux/TTNormsPro-Bold.woff2") format("woff2");
  font-weight: 851 1000;
  font-style: normal;
  font-display: swap;
}

/* ── Переменные: светлая тема ── */
:root[data-skin="flux"] {
  color-scheme: light;

  --fx-ink: #17181a;
  --fx-ink-rgb: 23 24 26;
  --fx-paper: #ffffff;
  --fx-paper-rgb: 255 255 255;
  --fx-shade-rgb: 25 35 50;
  --fx-hi-rgb: 255 255 255;
  --fx-edge-rgb: 255 255 255;
  --fx-edge-k: 1;
  --fx-on-color: #17181a;      /* текст на цветной/жёлтой плашке */
  --fx-on-ink: #ffffff;        /* текст на плашке цвета «чернил» */
  --fx-g1: #3a3e45;
  --fx-g2: #4b5058;
  --fx-g3: #5f6670;
  --fx-g4: #5d636c;
  --fx-yellow: #ffe24a;
  --fx-yellow-deep: #f2cd1c;
  --fx-up-bg: #e3f4e4;
  --fx-up-fg: #2f9e4f;
  --fx-down-bg: #fde6e6;
  --fx-down-fg: #ae1e24;
  --fx-bg: #e8ecef;

  /* Цвета данных (заливки, линии) — rgb-тройки для генератора */
  --fxc-violet-rgb: 122 92 214;
  --fxc-teal-rgb: 31 162 181;
  --fxc-green-rgb: 47 158 79;
  --fxc-blue-rgb: 76 141 246;
  --fxc-yellow-rgb: 233 184 36;
  --fxc-orange-rgb: 240 122 44;
  --fxc-red-rgb: 229 72 77;
  /* Цвета данных для ТЕКСТА — темнее, чтобы читались на белом */
  --fxt-violet-rgb: 90 60 178;
  --fxt-teal-rgb: 12 94 108;
  --fxt-green-rgb: 32 104 54;
  --fxt-blue-rgb: 30 86 176;
  --fxt-yellow-rgb: 128 96 0;
  --fxt-orange-rgb: 158 72 18;
  --fxt-red-rgb: 174 30 36;

  /* Переменные style.css — в палитру Flux */
  --primary: #17181a;
  --primary-hover: #2b2f36;
  --primary-light: rgba(23, 24, 26, 0.06);
  --primary-border: rgba(23, 24, 26, 0.12);
  --primary-glow: rgba(25, 35, 50, 0.12);
  --bg-dark: transparent;
  --bg-sidebar: transparent;
  --bg-card: rgba(255, 255, 255, 0.72);
  --bg-input: rgba(255, 255, 255, 0.7);
  --bg-hover: rgba(23, 24, 26, 0.035);
  --bg-table-header: transparent;
  --border: rgba(23, 24, 26, 0.08);
  --border-light: rgba(23, 24, 26, 0.06);
  --text-white: #17181a;
  --text-primary: #17181a;
  --text-secondary: #4f5560;
  --text-muted: #555b64;
  --text-dim: #5d636c;
  --green: #22693a;
  --green-bg: #e3f4e4;
  --red: #ae1e24;
  --red-bg: #fde6e6;
  --orange: #9e4812;
  --blue: #2f6fd6;
  --cyan: #0c5e6c;
  --emerald: #22693a;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --shadow-card: 0 0 0 1px rgba(23, 24, 26, 0.05), 0 10px 30px rgba(25, 35, 50, 0.06);
  --shadow-lg: 0 0 0 1px rgba(23, 24, 26, 0.06), 0 16px 36px rgba(25, 35, 50, 0.1);

  /* Карточка Flux */
  --fx-card-bg: linear-gradient(160deg, rgb(255 255 255 / 0.92) 0%, rgb(255 255 255 / 0.66) 55%, rgb(255 255 255 / 0.58) 100%);
  --fx-card-border: rgb(255 255 255 / 0.95);
  --fx-card-shadow: 0 0 0 1px rgb(23 24 26 / 0.05), 0 10px 30px rgb(25 35 50 / 0.06);
  --fx-card-shadow-hover: 0 0 0 1px rgb(23 24 26 / 0.07), 0 16px 36px rgb(25 35 50 / 0.1);
  --fx-pill-bg: rgb(255 255 255 / 0.62);
  --fx-pill-border: rgb(255 255 255 / 0.9);
  --fx-field-bg: #ffffff;
  --fx-menu-bg: rgb(255 255 255 / 0.94);
}

/* ── Переменные: тёмная тема (как flux-dark.css в CRM: графит, светлые
   «чернила», тёмная бумага, жёлтая кнопка с тёмным текстом) ── */
:root[data-skin="flux"][data-theme="dark"] {
  color-scheme: dark;

  --fx-ink: #eef0f3;
  --fx-ink-rgb: 238 240 243;
  --fx-paper: #1b1e24;
  --fx-paper-rgb: 27 30 36;
  --fx-shade-rgb: 0 0 0;
  --fx-hi-rgb: 255 255 255;
  --fx-edge-rgb: 255 255 255;
  --fx-edge-k: 0.16;
  --fx-on-color: #14161a;
  --fx-on-ink: #14161a;
  --fx-g1: #d6d9de;
  --fx-g2: #d2d6dc;
  --fx-g3: #b3b9c1;
  --fx-g4: #9ea4ad;
  --fx-up-bg: rgba(68, 194, 108, 0.16);
  --fx-up-fg: #5ccf80;
  --fx-down-bg: rgba(255, 107, 112, 0.16);
  --fx-down-fg: #ff7b80;
  --fx-bg: #0e1014;

  --fxc-violet-rgb: 155 131 240;
  --fxc-teal-rgb: 72 196 214;
  --fxc-green-rgb: 68 194 108;
  --fxc-blue-rgb: 110 168 255;
  --fxc-yellow-rgb: 242 205 28;
  --fxc-orange-rgb: 255 154 82;
  --fxc-red-rgb: 255 107 112;
  --fxt-violet-rgb: 185 163 255;
  --fxt-teal-rgb: 111 211 225;
  --fxt-green-rgb: 110 213 142;
  --fxt-blue-rgb: 141 184 255;
  --fxt-yellow-rgb: 243 207 90;
  --fxt-orange-rgb: 255 173 115;
  --fxt-red-rgb: 255 138 142;

  --primary: #eef0f3;
  --primary-hover: #ffffff;
  --primary-light: rgba(238, 240, 243, 0.08);
  --primary-border: rgba(238, 240, 243, 0.16);
  --primary-glow: rgba(0, 0, 0, 0.35);
  --bg-card: rgba(27, 30, 36, 0.7);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-hover: rgba(238, 240, 243, 0.05);
  --border: rgba(238, 240, 243, 0.12);
  --border-light: rgba(238, 240, 243, 0.08);
  --text-white: #eef0f3;
  --text-primary: #eef0f3;
  --text-secondary: #c4c9d0;
  --text-muted: #b0b6be;
  --text-dim: #9ea4ad;
  --green: #44c26c;
  --green-bg: rgba(68, 194, 108, 0.16);
  --red: #ff6b70;
  --red-bg: rgba(255, 107, 112, 0.16);
  --orange: #ff9a52;
  --blue: #6ea8ff;
  --cyan: #48c4d6;
  --emerald: #44c26c;
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 36px rgba(0, 0, 0, 0.45);

  --fx-card-bg: linear-gradient(160deg, rgb(32 36 43 / 0.9) 0%, rgb(27 30 36 / 0.78) 55%, rgb(27 30 36 / 0.72) 100%);
  --fx-card-border: rgb(255 255 255 / 0.12);
  --fx-card-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 10px 30px rgb(0 0 0 / 0.32);
  --fx-card-shadow-hover: 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 36px rgb(0 0 0 / 0.45);
  --fx-pill-bg: rgb(30 33 40 / 0.72);
  --fx-pill-border: rgb(255 255 255 / 0.12);
  --fx-field-bg: rgb(255 255 255 / 0.07);
  --fx-menu-bg: rgb(30 33 40 / 0.97);
}

/* ── Основа: шрифт, фон ── */
:root[data-skin="flux"] body {
  background: var(--fx-bg);
  color: var(--fx-ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}
/* Шрифт Flux всем, кроме значков (у значков свой шрифт с лигатурами). */
:root[data-skin="flux"] body,
:root[data-skin="flux"] body *:not(.material-symbols-outlined) {
  font-family: "TT Norms Flux", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif !important;
  font-synthesis: none;
}
/* Каплокапс в подписях — не в стиле Flux: там подписи обычным регистром. */
:root[data-skin="flux"] :is(.kpi-label, .funnel-label, .data-table thead th, .dp-weekday,
  .header-user-role, .glass-audience-total-text, .geo-total-pill-label, .geo-top-label,
  .td-metric-label, .col-settings-title, .td-insight-label) {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Живой фон: подложка + «лента» из CRM. Лежит под всем, кликам не мешает. */
.fx-backdrop { display: none; }
:root[data-skin="flux"] .fx-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fx-backdrop > * { position: absolute; will-change: transform; }
.fx-backdrop .fx-wash {
  inset: -10%;
  background:
    radial-gradient(55% 60% at 6% 22%, rgba(150, 186, 222, 0.85), rgba(150, 186, 222, 0) 70%),
    radial-gradient(50% 55% at 2% 88%, rgba(200, 214, 228, 0.9), rgba(200, 214, 228, 0) 70%),
    radial-gradient(45% 40% at 38% 104%, rgba(232, 240, 190, 0.85), rgba(232, 240, 190, 0) 70%),
    radial-gradient(60% 55% at 100% 8%, rgba(236, 238, 240, 1), rgba(236, 238, 240, 0) 70%),
    linear-gradient(115deg, #dbe3ea 0%, #e8ebee 45%, #eceeee 100%);
  animation: fxBreath 16s ease-in-out infinite alternate;
}
:root[data-skin="flux"][data-theme="dark"] .fx-backdrop .fx-wash {
  background:
    radial-gradient(55% 60% at 6% 22%, rgba(48, 72, 112, 0.55), rgba(48, 72, 112, 0) 70%),
    radial-gradient(50% 55% at 2% 88%, rgba(34, 44, 60, 0.8), rgba(34, 44, 60, 0) 70%),
    radial-gradient(45% 40% at 38% 104%, rgba(74, 66, 40, 0.28), rgba(74, 66, 40, 0) 70%),
    radial-gradient(60% 55% at 100% 8%, rgba(40, 46, 58, 0.9), rgba(40, 46, 58, 0) 70%),
    linear-gradient(115deg, #10141b 0%, #12151b 45%, #0f1115 100%);
}
.fx-backdrop .fx-layer {
  inset: -6%;
  width: 112%;
  height: 112%;
  max-width: none;
  object-fit: cover;
}
.fx-backdrop .fx-layer--night { display: none; }
:root[data-skin="flux"][data-theme="dark"] .fx-backdrop .fx-layer--day { display: none; }
:root[data-skin="flux"][data-theme="dark"] .fx-backdrop .fx-layer--night { display: block; }
.fx-backdrop .fx-shadow { animation: fxShadow 26s ease-in-out infinite alternate; }
.fx-backdrop .fx-warmband { animation: fxWarmband 22s ease-in-out infinite alternate; transform-origin: 70% 30%; }
.fx-backdrop .fx-silk { animation: fxSilk 18s ease-in-out infinite alternate; transform-origin: 45% 25%; }
@keyframes fxShadow { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(2.5%, -2%) scale(1.06); } }
@keyframes fxWarmband { 0% { transform: translate(-1.5%, 1%) rotate(-3deg) scale(1); } 100% { transform: translate(2%, -1.5%) rotate(4deg) scale(1.05); } }
@keyframes fxSilk { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(1.2%, -0.8%) rotate(2.5deg) scale(1.025); } 100% { transform: translate(-1%, 1%) rotate(-2deg) scale(1.01); } }
@keyframes fxBreath { 0% { transform: translate(0, 0); } 100% { transform: translate(2%, -1.5%); } }
@media (prefers-reduced-motion: reduce) {
  .fx-backdrop > * { animation: none !important; }
}

/* Слой приложения — поверх фона. */
:root[data-skin="flux"] .app-layout {
  position: relative;
  z-index: 1;
  background: transparent;
}
:root[data-skin="flux"] .main-content { background: transparent; }

/* ── Боковое меню: стеклянная панель с отступом, как карточки ── */
:root[data-skin="flux"] .sidebar {
  top: 12px;
  left: 12px;
  height: calc(100vh - 24px);
  width: 64px;
  border-radius: 22px;
  background: var(--fx-pill-bg);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--fx-pill-border);
  box-shadow: var(--fx-card-shadow);
  contain: layout style;
}
:root[data-skin="flux"] .sidebar:hover { width: 248px; background: var(--fx-menu-bg); }
:root[data-skin="flux"] .main-content { padding-left: 88px; }
:root[data-skin="flux"] .sidebar-logo { padding: 1rem 1rem; }
:root[data-skin="flux"] .sidebar-logo h1 { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.03em; color: var(--fx-ink); }
:root[data-skin="flux"] .sidebar-logo p { color: var(--fx-g3); font-weight: 400; font-size: 0.8rem; }
:root[data-skin="flux"] .sidebar-nav { padding: 0.25rem 0.6rem; }
:root[data-skin="flux"] .nav-item {
  color: var(--fx-g3);
  border-radius: 999px;
  padding: 0.62rem 0.78rem;
  border: 0;
}
:root[data-skin="flux"] .nav-label { font-size: 0.86rem; font-weight: 400; letter-spacing: -0.01em; }
:root[data-skin="flux"] .nav-item:hover { background: rgb(var(--fx-ink-rgb) / 0.05); color: var(--fx-ink); }
:root[data-skin="flux"] .nav-item.active {
  background: var(--fx-ink);
  color: var(--fx-on-ink);
  border-left: 0;
  padding-left: 0.78rem;
  box-shadow: 0 6px 16px rgb(var(--fx-shade-rgb) / 0.18);
}
:root[data-skin="flux"] .nav-item.active .material-symbols-outlined { color: var(--fx-on-ink); }
:root[data-skin="flux"] .sidebar-footer { border-top: 1px solid rgb(var(--fx-ink-rgb) / 0.07); }

/* ── Шапка: прозрачная, элементы — таблетки ── */
:root[data-skin="flux"] .top-header {
  background: transparent;
  border-bottom: 0;
  padding: 1rem 2rem 0.5rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-skin="flux"] .period-selector {
  background: var(--fx-pill-bg);
  border: 1px solid var(--fx-pill-border);
  box-shadow: 0 0 0 1px rgb(var(--fx-ink-rgb) / 0.05), 0 4px 14px rgb(var(--fx-shade-rgb) / 0.05);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
:root[data-skin="flux"] .period-btn {
  border-radius: 999px;
  color: var(--fx-g2);
  font-size: 0.86rem;
  font-weight: 400;
  padding: 0.5rem 0.95rem;
}
:root[data-skin="flux"] .period-btn:hover { color: var(--fx-ink); background: rgb(var(--fx-ink-rgb) / 0.05); }
:root[data-skin="flux"] .period-btn.active {
  background: var(--fx-ink);
  color: var(--fx-on-ink);
  box-shadow: 0 6px 16px rgb(var(--fx-shade-rgb) / 0.16);
}
:root[data-skin="flux"] .header-bell {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: var(--fx-pill-bg);
  border: 1px solid var(--fx-pill-border);
  box-shadow: 0 0 0 1px rgb(var(--fx-ink-rgb) / 0.05), 0 4px 14px rgb(var(--fx-shade-rgb) / 0.05);
  color: var(--fx-ink);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
:root[data-skin="flux"] .header-bell:hover {
  background: var(--fx-ink);
  border-color: var(--fx-ink);
  color: var(--fx-on-ink);
  box-shadow: 0 6px 16px rgb(var(--fx-shade-rgb) / 0.18);
}
:root[data-skin="flux"] .header-bell .material-symbols-outlined { font-size: 1.3rem; }
:root[data-skin="flux"] .header-divider { background: rgb(var(--fx-ink-rgb) / 0.1); }
:root[data-skin="flux"] .header-user-name { color: var(--fx-ink); font-weight: 500; }
:root[data-skin="flux"] .header-user-role { color: var(--fx-g3); font-weight: 400; font-size: 0.72rem; }
:root[data-skin="flux"] .header-avatar {
  background: var(--fx-paper);
  border: 1px solid rgb(var(--fx-ink-rgb) / 0.08);
  color: var(--fx-ink);
  box-shadow: 0 4px 14px rgb(var(--fx-shade-rgb) / 0.08);
}
:root[data-skin="flux"] .header-account-title {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--fx-ink);
}

/* ── Заголовки секций: тонкие и крупнее ── */
:root[data-skin="flux"] .page-content { gap: 1.75rem; }
:root[data-skin="flux"] :is(.section-title, .table-header h2, .glass-audience-title, .geo-title, .glass-chart-title) {
  font-weight: 500 !important;
  font-size: 1.45rem !important;
  letter-spacing: -0.03em !important;
  color: var(--fx-ink) !important;
  line-height: 1.15 !important;
}
:root[data-skin="flux"] :is(.geo-subtitle, .glass-chart-subtitle, .td-panel-subtitle, .td-bottom-desc) {
  color: var(--fx-g3) !important;
  font-weight: 400 !important;
}

/* ── Карточки: бумага Flux с гранью и мягкой тенью ── */
:root[data-skin="flux"] :is(.kpi-card, .funnel-card, .table-container, .glass-audience-card,
  .geo-filter-card, .geo-map-container, .geo-insight-card, .geo-glass-card,
  .td-glass-panel, .td-bottom-card, .td-metric-card, .glass-chart-section, .geo-total-pill) {
  background: var(--fx-card-bg) !important;
  border: 1px solid var(--fx-card-border) !important;
  box-shadow: var(--fx-card-shadow) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
:root[data-skin="flux"] :is(.kpi-card, .funnel-card, .glass-audience-card, .geo-insight-card, .td-metric-card):hover {
  box-shadow: var(--fx-card-shadow-hover) !important;
  border-color: var(--fx-card-border) !important;
}
/* Декоративные свечения старого дизайна под Flux не нужны. */
:root[data-skin="flux"] :is(.kpi-card::before, .glass-audience-card-glow, .geo-glass-card-glow,
  .td-panel-glow, .glass-chart-glow) { display: none !important; }

/* Карточки показателей */
:root[data-skin="flux"] .kpi-card { padding: 1.1rem 1.25rem 1.2rem; }
:root[data-skin="flux"] .kpi-icon { border-radius: 999px; width: 2.1rem; height: 2.1rem; }
:root[data-skin="flux"] .kpi-label { font-size: 0.92rem; font-weight: 400; color: var(--fx-g2); margin-bottom: 0.45rem; }
:root[data-skin="flux"] .kpi-value { font-size: 1.95rem; font-weight: 500; letter-spacing: -0.035em; color: var(--fx-ink); }
:root[data-skin="flux"] .kpi-spark-bar { border-radius: 4px; }
:root[data-skin="flux"] .funnel-card { padding: 1.05rem 1.25rem; }
:root[data-skin="flux"] .funnel-label { font-size: 0.9rem; font-weight: 400; color: var(--fx-g2); }
:root[data-skin="flux"] .funnel-value { font-size: 1.7rem; font-weight: 500; letter-spacing: -0.035em; color: var(--fx-ink); }

/* Плашки изменения: рост — зелёная, падение — красная (как «↗ 18%» во Flux) */
:root[data-skin="flux"] .kpi-change {
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.18rem 0.45rem;
}
:root[data-skin="flux"] .kpi-change.up { color: var(--fx-up-fg); background: var(--fx-up-bg); }
:root[data-skin="flux"] .kpi-change.down { color: var(--fx-down-fg); background: var(--fx-down-bg); }
:root[data-skin="flux"] .delta-badge-wrap .delta-tooltip,
:root[data-skin="flux"] .card-tooltip {
  background: var(--fx-menu-bg);
  color: var(--fx-g1);
  border: 1px solid rgb(var(--fx-ink-rgb) / 0.08);
  box-shadow: 0 12px 30px rgb(var(--fx-shade-rgb) / 0.16);
}

/* ── Кнопки: таблетки. Главная — жёлтая с тёмным текстом ── */
:root[data-skin="flux"] .btn { border-radius: 999px; font-weight: 500; }
:root[data-skin="flux"] .btn-primary,
:root[data-skin="flux"] .datepicker-footer .btn-primary {
  background: var(--fx-yellow);
  color: var(--fx-on-color) !important;
  border: 1px solid rgba(200, 160, 0, 0.25);
  box-shadow: 0 6px 18px rgba(242, 205, 28, 0.35), inset 0 1px 0 rgb(255 255 255 / 0.6);
}
:root[data-skin="flux"] .btn-primary:hover { background: #ffe866; color: var(--fx-on-color); }
:root[data-skin="flux"] .btn-primary:active { background: var(--fx-yellow-deep); }
:root[data-skin="flux"] .btn-primary .material-symbols-outlined { color: var(--fx-on-color); }
:root[data-skin="flux"] :is(.btn-secondary, .btn-outline, .glass-audience-settings-btn, .col-settings-btn) {
  background: var(--fx-pill-bg);
  border: 1px solid rgb(var(--fx-ink-rgb) / 0.09);
  color: var(--fx-ink);
  border-radius: 999px;
}
:root[data-skin="flux"] :is(.btn-secondary, .btn-outline, .glass-audience-settings-btn, .col-settings-btn):hover {
  background: var(--fx-paper);
  border-color: rgb(var(--fx-ink-rgb) / 0.18);
  color: var(--fx-ink);
}

/* Поля ввода и выпадающие списки — овалом */
:root[data-skin="flux"] :is(.search-box input, .status-filter, select.status-filter) {
  background-color: var(--fx-field-bg);
  border: 1px solid rgb(var(--fx-ink-rgb) / 0.09);
  color: var(--fx-ink);
  border-radius: 999px;
}
:root[data-skin="flux"] :is(.search-box input, .status-filter):focus {
  border-color: rgb(var(--fx-ink-rgb) / 0.3);
  box-shadow: 0 0 0 3px rgba(255, 226, 74, 0.35);
}

/* Переключатели-сегменты (Клики / Продажи, фильтры гео) — как период */
:root[data-skin="flux"] .glass-audience-toggles {
  background: var(--fx-pill-bg);
  border: 1px solid var(--fx-pill-border);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgb(var(--fx-ink-rgb) / 0.05);
}
:root[data-skin="flux"] .glass-audience-toggle { border-radius: 999px; color: var(--fx-g2); }
:root[data-skin="flux"] .glass-audience-toggle.active {
  background: var(--fx-ink);
  color: var(--fx-on-ink);
  box-shadow: 0 6px 16px rgb(var(--fx-shade-rgb) / 0.16);
}
:root[data-skin="flux"] .geo-filter-btn { border-radius: 999px; background: rgb(var(--fx-ink-rgb) / 0.04); }
:root[data-skin="flux"] .geo-filter-btn.active {
  background: var(--fx-ink) !important;
  color: var(--fx-on-ink) !important;
}

/* ── Таблица кампаний ── */
:root[data-skin="flux"] .table-header { border-bottom: 1px solid rgb(var(--fx-ink-rgb) / 0.07); }
:root[data-skin="flux"] .data-table thead th {
  background: transparent;
  color: var(--fx-g3);
  font-weight: 400;
  font-size: 0.82rem;
  border-bottom: 1px solid rgb(var(--fx-ink-rgb) / 0.08);
}
:root[data-skin="flux"] .data-table thead th:hover,
:root[data-skin="flux"] .data-table thead th.sorted { color: var(--fx-ink); }
:root[data-skin="flux"] .data-table tbody tr { border-bottom: 1px solid rgb(var(--fx-ink-rgb) / 0.06); }
:root[data-skin="flux"] .data-table tbody tr:hover { background: rgb(var(--fx-ink-rgb) / 0.03); }
:root[data-skin="flux"] .data-table tbody td { color: var(--fx-ink); }

/* Выпадающие меню, настройки колонок, подсказки */
:root[data-skin="flux"] :is(.col-settings-dropdown, .datepicker-dropdown) {
  background: var(--fx-menu-bg);
  border: 1px solid rgb(var(--fx-ink-rgb) / 0.08);
  box-shadow: 0 20px 50px rgb(var(--fx-shade-rgb) / 0.18);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border-radius: 20px;
}
:root[data-skin="flux"] .col-settings-item { color: var(--fx-ink) !important; }
:root[data-skin="flux"] .col-settings-item:hover { background: rgb(var(--fx-ink-rgb) / 0.05); }

/* ── Календарь «Свой период» ── */
:root[data-skin="flux"] .datepicker-month-title { font-weight: 500; letter-spacing: -0.02em; color: var(--fx-ink); }
:root[data-skin="flux"] .datepicker-nav {
  border-radius: 999px;
  border: 1px solid rgb(var(--fx-ink-rgb) / 0.09);
  background: var(--fx-pill-bg);
  color: var(--fx-ink);
}
:root[data-skin="flux"] .datepicker-nav:hover { background: var(--fx-ink); color: var(--fx-on-ink); border-color: var(--fx-ink); }
:root[data-skin="flux"] .dp-weekday { color: var(--fx-g4); font-weight: 400; }
:root[data-skin="flux"] .dp-day { color: var(--fx-ink); font-weight: 400; border-radius: 999px; }
:root[data-skin="flux"] .dp-day:hover { background: rgb(var(--fx-ink-rgb) / 0.06); color: var(--fx-ink); }
:root[data-skin="flux"] .dp-day.today { border: 1px solid rgb(var(--fx-ink-rgb) / 0.35); }
:root[data-skin="flux"] .dp-day.selected { background: var(--fx-ink); color: var(--fx-on-ink); font-weight: 500; border-radius: 999px; }
:root[data-skin="flux"] .dp-day.in-range { background: rgba(255, 226, 74, 0.32); color: var(--fx-ink); border-radius: 0; }
:root[data-skin="flux"][data-theme="dark"] .dp-day.in-range { background: rgba(255, 226, 74, 0.16); }
:root[data-skin="flux"] .dp-day.range-start { border-radius: 999px 0 0 999px; }
:root[data-skin="flux"] .dp-day.range-end { border-radius: 0 999px 999px 0; }
:root[data-skin="flux"] .datepicker-footer { border-top: 1px solid rgb(var(--fx-ink-rgb) / 0.08); }
:root[data-skin="flux"] .datepicker-range-display { color: var(--fx-g2); font-weight: 400; }

/* ── Плашки статуса кампании ── */
:root[data-skin="flux"] .status-badge,
:root[data-skin="flux"] .status-pill-table { border-radius: 999px; font-weight: 500; }

/* ── Экран загрузки и всплывающее уведомление ── */
:root[data-skin="flux"] .loading-overlay { background: rgb(var(--fx-paper-rgb) / 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-skin="flux"] .toast {
  background: var(--fx-ink);
  color: var(--fx-on-ink);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgb(var(--fx-shade-rgb) / 0.25);
}

/* ── Телефон: как в CRM — без матового стекла (рывки при прокрутке),
   карточки плотнее, фон неподвижен ── */
@media (max-width: 900px) {
  :root[data-skin="flux"] .main-content { padding-left: 0; }
  :root[data-skin="flux"] .top-header { padding: 0.6rem 1rem 0.25rem; }
  .fx-backdrop > * { animation: none !important; will-change: auto; }
  .fx-backdrop .fx-layer { inset: -6% -60% -6% -40%; width: 200%; }
  :root[data-skin="flux"] {
    --fx-card-bg: rgb(255 255 255 / 0.84);
    --fx-pill-bg: rgb(255 255 255 / 0.86);
  }
  :root[data-skin="flux"][data-theme="dark"] {
    --fx-card-bg: rgb(30 33 40 / 0.92);
    --fx-pill-bg: rgb(30 33 40 / 0.92);
  }
  :root[data-skin="flux"] * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  :root[data-skin="flux"] .kpi-value { font-size: 1.55rem; }
  :root[data-skin="flux"] .funnel-value { font-size: 1.4rem; }
  :root[data-skin="flux"] :is(.section-title, .table-header h2, .glass-audience-title, .geo-title, .glass-chart-title) {
    font-size: 1.25rem !important;
  }
}

/* ── Мелочи по замеру контраста (WCAG ≥ 3 для мелкого служебного текста) ── */
:root[data-skin="flux"] { --fx-up-fg: #22693a; }
:root[data-skin="flux"][data-theme="dark"] { --fx-up-fg: #5ccf80; }
:root[data-skin="flux"] .campaign-id { color: var(--fx-g3) !important; background: rgb(var(--fx-ink-rgb) / 0.05) !important; }
:root[data-skin="flux"] :is(.geo-info-txt, .geo-map-density span) { color: var(--fx-g3) !important; }

/* Телефон: размытия нет, поэтому выпадающие панели — сплошные, иначе сквозь
   календарь читаются цифры карточек. Деньги в карточке — в одну строку. */
@media (max-width: 900px) {
  :root[data-skin="flux"] :is(.datepicker-dropdown, .col-settings-dropdown) { background: var(--fx-paper); }
  :root[data-skin="flux"] .funnel-value { font-size: 1.22rem; white-space: nowrap; }
}


/* =========================================================================
   Контраст — вторая проработка (жалоба 14.10.2026: «поля и тексты плохо
   видно», «переключения не видать»).
   ========================================================================= */

/* Поля ввода и выпадающие списки везде: сплошная бумага, заметная рамка,
   тёмный текст, читаемая подсказка. Флажки, ползунки и выбор цвета не трогаем. */
:root[data-skin="flux"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea) {
  background-color: var(--fx-field-bg) !important;
  border: 1px solid rgb(var(--fx-ink-rgb) / 0.2) !important;
  color: var(--fx-ink) !important;
  box-shadow: 0 1px 2px rgb(var(--fx-shade-rgb) / 0.05) !important;
}
:root[data-skin="flux"] :is(input, textarea)::placeholder { color: rgb(var(--fx-ink-rgb) / 0.55) !important; opacity: 1; }
:root[data-skin="flux"] :is(input, select, textarea):hover:not(:disabled) { border-color: rgb(var(--fx-ink-rgb) / 0.32) !important; }
:root[data-skin="flux"] :is(input, select, textarea):focus {
  border-color: rgb(var(--fx-ink-rgb) / 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 226, 74, 0.45) !important;
  outline: none;
}
:root[data-skin="flux"] select option { background: var(--fx-paper); color: var(--fx-ink); }
/* Значок календаря в полях даты — тёмным на светлом, светлым на тёмном. */
:root[data-skin="flux"] input::-webkit-calendar-picker-indicator { opacity: 0.7; }
:root[data-skin="flux"][data-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(1); }
:root[data-skin="flux"] :is(input, select, textarea):disabled { opacity: 0.55; }
/* Флажки — в цвет «чернил». */
:root[data-skin="flux"] input:is([type="checkbox"], [type="radio"]) { accent-color: var(--fx-ink); }

/* Тексты-пояснения в карточках («Конверсии утром на 65% выше среднего»). */
:root[data-skin="flux"] :is(.td-bottom-desc, .td-panel-subtitle, .geo-subtitle, .glass-chart-subtitle, .td-metric-label,
  .td-insight-label, .td-heatmap-legend, .td-growth-label, .geo-top-label, .geo-total-pill-label) {
  color: var(--fx-g3) !important;
}
:root[data-skin="flux"] .td-bottom-title { color: var(--fx-ink) !important; font-weight: 500 !important; }

/* Номер-кружок ИИ-помощника на цветной заливке — светлым. */
:root[data-skin="flux"] .ai-num { color: #ffffff !important; }
:root[data-skin="flux"][data-theme="dark"] .ai-num { color: #14161a !important; }
:root[data-skin="flux"] .reco-subtab-count { color: var(--fx-ink) !important; }

/* Кнопка выбора файла (Пульс → «Семантика проекта») — таблеткой Flux. */
:root[data-skin="flux"] input[type="file"] { color: var(--fx-g2); font-size: 0.86rem; }
:root[data-skin="flux"] input[type="file"]::file-selector-button {
  margin-right: 0.6rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--fx-ink-rgb) / 0.2);
  background: var(--fx-field-bg);
  color: var(--fx-ink);
  font: inherit;
  cursor: pointer;
}
:root[data-skin="flux"] input[type="file"]::file-selector-button:hover { background: var(--fx-ink); color: var(--fx-on-ink); }

/* ======================================================================
   ТЁМНАЯ ТЕМА — «ночное небо» (15.10.2026)
   Было: ровный графит, «лента» почти не видна, карточки сливались с фоном.
   Стало: глубокий индиго-градиент с тремя мягкими сияниями (синее, фиолетовое,
   бирюзовое) и тёплым отблеском снизу; карточки — стекло с бликом по верхней
   грани, поэтому отделяются от фона без жирных рамок. Светлая тема не тронута.
   ====================================================================== */
:root[data-skin="flux"][data-theme="dark"] {
  --fx-bg: #0a0d16;
  --fx-card-bg: linear-gradient(165deg, rgb(38 44 60 / 0.74) 0%, rgb(26 30 42 / 0.64) 55%, rgb(22 25 36 / 0.6) 100%);
  --fx-card-border: rgb(255 255 255 / 0.085);
  --fx-card-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px rgb(0 0 0 / 0.22), 0 14px 34px rgb(0 0 0 / 0.36);
  --fx-card-shadow-hover: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 0 0 1px rgb(255 255 255 / 0.06), 0 18px 42px rgb(0 0 0 / 0.46);
  --fx-pill-bg: rgb(30 35 50 / 0.7);
}
:root[data-skin="flux"][data-theme="dark"] .fx-backdrop .fx-wash {
  background:
    radial-gradient(52% 46% at 10% 6%, rgba(58, 104, 186, 0.42), rgba(58, 104, 186, 0) 72%),
    radial-gradient(42% 44% at 94% 14%, rgba(126, 90, 226, 0.30), rgba(126, 90, 226, 0) 72%),
    radial-gradient(50% 42% at 72% 102%, rgba(28, 158, 170, 0.20), rgba(28, 158, 170, 0) 72%),
    radial-gradient(38% 32% at 16% 98%, rgba(214, 150, 64, 0.10), rgba(214, 150, 64, 0) 72%),
    linear-gradient(160deg, #0e1424 0%, #0b0f1a 48%, #090b12 100%);
}
:root[data-skin="flux"][data-theme="dark"] .fx-backdrop .fx-layer { opacity: 0.55; mix-blend-mode: screen; }
/* Тонкая звёздная пыль — два слоя точек, не картинка: 0 запросов, не мешает читать. */
:root[data-skin="flux"][data-theme="dark"] .fx-backdrop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1px 1px at 68% 32%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(1px 1px at 38% 74%, rgba(255,255,255,0.22), transparent 60%),
    radial-gradient(1px 1px at 86% 82%, rgba(255,255,255,0.28), transparent 60%),
    radial-gradient(1.5px 1.5px at 54% 8%, rgba(190,210,255,0.35), transparent 60%);
  background-size: 640px 520px, 760px 600px, 560px 480px, 820px 640px, 900px 700px;
  opacity: 0.7;
}
@media (max-width: 900px) {
  :root[data-skin="flux"][data-theme="dark"] { --fx-card-bg: rgb(26 30 42 / 0.94); }
}

/* ── Переключатели вкл/выкл (18.10.2026) ──
   Генератор flux.gen.css перекрасил белый кружок в «чернила»: у включённого
   и дорожка, и кружок становились чёрными — кружок пропадал. Единый вид для
   .col-toggle (настройки столбцов, отчёт) и .ai-set-toggle (настройки ИИ):
   выкл — светлая дорожка, белый кружок с тенью; вкл — дорожка цвета чернил,
   кружок цвета «на чернилах». В тёмной теме переменные меняются местами сами. */
:root[data-skin="flux"] .col-toggle,
:root[data-skin="flux"] .ai-set-track {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgb(var(--fx-ink-rgb) / 0.14);
  border: 0;
  box-shadow: inset 0 0 0 1px rgb(var(--fx-ink-rgb) / 0.06);
  transition: background 0.2s ease;
}
:root[data-skin="flux"] .ai-set-toggle { width: 34px; height: 20px; }
:root[data-skin="flux"] .col-toggle::after,
:root[data-skin="flux"] .ai-set-thumb {
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}
:root[data-skin="flux"] .col-toggle.active,
:root[data-skin="flux"] .ai-set-toggle input:checked + .ai-set-track {
  background: var(--fx-ink);
  border-color: transparent;
  box-shadow: none;
}
:root[data-skin="flux"] .col-toggle.active::after,
:root[data-skin="flux"] .ai-set-toggle input:checked + .ai-set-track .ai-set-thumb {
  background: var(--fx-on-ink);
  transform: translateX(14px);
}
:root[data-skin="flux"] .col-toggle:hover { background: rgb(var(--fx-ink-rgb) / 0.2); }
:root[data-skin="flux"] .col-toggle.active:hover { background: var(--fx-ink); opacity: 0.88; }
:root[data-skin="flux"] .col-settings-item--dragging {
  background: var(--fx-menu-bg) !important;
  box-shadow: 0 10px 24px rgb(var(--fx-shade-rgb) / 0.22), 0 0 0 1px rgb(var(--fx-ink-rgb) / 0.08);
}
:root[data-skin="flux"] .col-settings-item .col-drag-handle:hover { background: rgb(var(--fx-ink-rgb) / 0.07); }