/* ============================================================
   sales-geo-widget.css — «География продаж» CSS-3D хорошист-виджет
   Стили виджета: карточки KPI, тильт-карта РФ, панель СНГ.
   Цвета — ТОЛЬКО через CSS-переменные из theme.css. Без hardcode.
   Поддерживает обе темы: [data-theme="light"] / [data-theme="dark"].
   ============================================================ */

/* --- Внешняя обёртка виджета --- */
.sgw-root {
  font-family: inherit;
  color: var(--text);
}

/* --- MP-selector: встроенный переключатель МП (левее периода) --- */
/* Отдельный от порталового MP_Switcher — только внутри виджета, не пишет в localStorage. */
.sgw-mp-selector {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.sgw-mp-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 4px 11px;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: background 150ms, color 150ms;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.sgw-mp-btn:hover:not(:disabled) { color: var(--text); }

.sgw-mp-btn.sgw-on {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Недоступный МП (не подключён) */
.sgw-mp-btn.sgw-mp-disabled {
  opacity: 0.40;
  cursor: not-allowed;
}

/* --- Строка управления: MP + период + метрика + склады --- */
.sgw-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Переключатель периода: Месяц / Квартал / Год */
.sgw-period {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.sgw-period-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: background 150ms, color 150ms;
  letter-spacing: 0.1px;
}

.sgw-period-btn:hover {
  color: var(--text);
}

.sgw-period-btn.sgw-on {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Переключатель метрики: Заказы / Выручка */
.sgw-metric-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.sgw-metric-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: background 150ms, color 150ms;
}

.sgw-metric-btn:hover {
  color: var(--text);
}

.sgw-metric-btn.sgw-on {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Переключатель схемы отгрузки: Все склады / FBO / FBS */
.sgw-fulfillment {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.sgw-fulfillment-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: background 150ms, color 150ms;
  letter-spacing: 0.1px;
}

.sgw-fulfillment-btn:hover { color: var(--text); }

.sgw-fulfillment-btn.sgw-on {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* --- KPI-строка: 4 карточки --- */
.sgw-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 900px) {
  .sgw-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sgw-kpi {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  position: relative;
  overflow: hidden;
  /* Тонкое свечение акцента поверх карточки */
}

.sgw-kpi::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 50px;
  background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}

.sgw-kpi-label {
  font-size: 11.5px;
  color: var(--text2);
  font-weight: 550;
  letter-spacing: 0.2px;
  text-transform: none;
  margin-bottom: 4px;
}

.sgw-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.sgw-kpi-sub {
  font-size: 11.5px;
  color: var(--text2);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* --- Сетка: карта РФ + панель СНГ --- */
.sgw-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-5);
  align-items: start;
}

@media (max-width: 1080px) {
  .sgw-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Левая колонка: карта --- */
.sgw-map-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Рамка карты */
.sgw-map-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
}

/* CSS-перспектива — «парящая плита» эффект.
   Вертикальный padding увеличен: карта теперь не делит место с угловой карточкой →
   SVG получает больший viewport и Россия становится крупнее. */
.sgw-mapwrap {
  position: relative;
  padding: 28px 8px 32px;
  perspective: 1300px;
  perspective-origin: 50% 36%;
  flex: 1;           /* растягивает в flex-колонке .sgw-map-card */
  min-height: 360px; /* гарантированный минимум высоты карты */
}

/* Светящийся ореол под SVG-картой (повторяет прототип, в токенах) */
.sgw-mapwrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 60%;
  height: 46%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent) 6%, transparent) 40%,
    transparent 70%
  );
  filter: blur(24px);
}

/* Сцена с 3D-наклоном — transform задаётся JS (наклон за курсором).
   Базовый наклон ~15° по X + отклонение за мышью. Стартовое значение
   ниже = fallback если JS не успел (прогрессивное улучшение). */
.sgw-scene {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  transform: rotateX(15deg);
  will-change: transform;
  filter: drop-shadow(0 22px 18px color-mix(in srgb, var(--bg) 70%, transparent));
  transition: filter 300ms;
}

/* SVG-элемент карты */
.sgw-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Световой оверлей поверх SVG (имитация источника света) */
.sgw-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sgw-lights::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 320px at 25% 10%, rgba(255,255,255,0.06), transparent 55%);
}

.sgw-lights::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 400px at 85% 95%, rgba(0,0,0,0.22), transparent 60%);
}

/* Группа региона: лицо + 2 слоя боковин (3D-экструзия). cursor/hover на группе. */
.sgw-region-group {
  cursor: pointer;
  transition: filter 0.25s ease;
}

/* Боковины экструзии — тёмные грани «приподнятой плиты» (токены из theme.css) */
.sgw-side path { transition: opacity 0.25s; }
.sgw-side-2 path { fill: var(--geo-extrude-2); opacity: 0.9; }
.sgw-side-1 path { fill: var(--geo-extrude-1); opacity: 0.78; }

/* Лицо региона (квантильная заливка) */
.sgw-region {
  fill: var(--geo-fill-q0);
  stroke: var(--geo-border);
  stroke-width: 0.5;
  transition: fill 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              stroke 0.2s,
              stroke-width 0.2s;
}

/* 5-ступенчатая квантильная палитра — 5 ПОДПИСАННЫХ коридоров (Александр 2026-06-23).
   Каждый коридор = ≈20% регионов-с-продажами по выручке (квантиль).
   Светлая тема: от светло-голубого (нижний) до тёмно-синего (топ); шаг L* ≈ 30 ед.
   Тёмная тема: осветлённая шкала (commit f19cba9), 5 чётких ступеней (в блоке dark ниже).
   q6-q8 оставлены для совместимости — не назначаются при Q_LEVELS=5. */

/* Светлая тема: переопределяем theme.css rgba-токены жёсткими цветами.
   Шаг между ступенями явный: #dbeafe(пастель) → #93c5fd(голубой) → #3b82f6(синий)
   → #1d4ed8(тёмно-синий) → #1e3a8a(почти чёрный синий).
   Не зелёный/не красный; монохромная синяя шкала (брендовый --accent). */
.sgw-mapwrap {
  /* design-lint-exempt: map-scale — последовательная density-шкала хороплет-карты:
     фикс-ступени синего (light-тема), не дизайн-токены theme.css; токенизации не подлежат.
     Маркер действует до конца этого CSS-блока. */
  --geo-fill-q1: #dbeafe;  /* blue-100: пастельный голубой (нижний коридор, ≤20%) */
  --geo-fill-q2: #93c5fd;  /* blue-300: средне-голубой (21–40%) */
  --geo-fill-q3: #3b82f6;  /* blue-500: насыщенный синий (41–60%) */
  --geo-fill-q4: #1d4ed8;  /* blue-700: тёмный синий (61–80%) */
  --geo-fill-q5: #1e3a8a;  /* blue-900: почти чёрный синий (топ 81–100%) */
  /* q6-q8 не используются при Q_LEVELS=5, оставлены для совместимости */
  --geo-fill-q6: #312e81;
  --geo-fill-q7: #4a1d96;
  --geo-fill-q8: #2e1065;
}

.sgw-region.sgw-q1 { fill: var(--geo-fill-q1); }
.sgw-region.sgw-q2 { fill: var(--geo-fill-q2); }
.sgw-region.sgw-q3 { fill: var(--geo-fill-q3); }
.sgw-region.sgw-q4 { fill: var(--geo-fill-q4); }
.sgw-region.sgw-q5 { fill: var(--geo-fill-q5); }
.sgw-region.sgw-q6 { fill: var(--geo-fill-q6); }
.sgw-region.sgw-q7 { fill: var(--geo-fill-q7); }
.sgw-region.sgw-q8 { fill: var(--geo-fill-q8); }

/* Нулевые регионы (q0, нет данных): два варианта на выбор Александра.
   Вариант A — штриховка (сейчас активен по умолчанию, класс sgw-q0-hatch).
   Вариант B — тёплый оранжевый (класс sgw-q0-orange).
   JS добавляет один из двух классов в зависимости от DEMO_ZERO_VARIANT (демо) или
   глобальной конфигурации виджета (параметр zeroVariant: 'hatch'|'orange').
   По умолчанию используется 'hatch' — не мешает основной палитре, читается. */
.sgw-region.sgw-q0-hatch {
  /* Нейтральная заливка + SVG-штриховка поверх */
  fill: url(#sgw-hatch);
}
.sgw-region.sgw-q0-orange {
  /* Тёплый оранжевый: «здесь не продаю → есть куда расти» */
  fill: var(--geo-fill-q0-orange, rgba(234,88,12,0.18));
}

/* Hot: топ-регионы подсвечены свечением лидеров.
   ВАЖНО: drop-shadow на group НЕЛЬЗЯ — bbox группы Мурманской области охватывает
   весь холст (дефект path-данных), тень «размазывается» по всей карте.
   Вместо этого: яркость + лёгкое масштабирование (чисто пиксельный эффект). */
.sgw-region-group.sgw-hot {
  filter: brightness(1.12);
}

/* Hover (CSS :hover для быстрого отклика мыши):
   НЕ используем drop-shadow (bbox-проблема Мурманской); НЕ используем stroke (path-проблема).
   Приём «затемни остальных»: при наведении SVG получает класс .sgw-map-active (JS),
   все группы кроме .sgw-hovered получают opacity 0.55.
   CSS :hover даёт мгновенный отклик (brightness); .sgw-hovered из JS — устойчивое состояние. */
.sgw-region-group:hover {
  filter: brightness(1.2) saturate(1.1);
}
.sgw-region-group:hover .sgw-side path { opacity: 1; }
.sgw-region-group.sgw-hot:hover {
  filter: brightness(1.28) saturate(1.15);
}

/* Затемнение остальных регионов при активном hover (класс .sgw-map-active на SVG).
   Только НЕ-выбранный регион получает opacity 0.55.
   .sgw-hovered остаётся полностью видимым (opacity:1 по умолчанию). */
.sgw-mapwrap svg.sgw-map-active .sgw-region-group:not(.sgw-hovered) {
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
.sgw-mapwrap svg.sgw-map-active .sgw-region-group.sgw-hovered {
  filter: brightness(1.25) saturate(1.15);
  opacity: 1;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
[data-theme="dark"] .sgw-mapwrap svg.sgw-map-active .sgw-region-group.sgw-hovered {
  filter: brightness(1.35) saturate(1.2);
}

/* Активный регион (face-paths): ЗОЛОТАЯ РАМКА на ховере.
   ТОЛЬКО на путях с data-safe-stroke="1" (пути с нормальным bbox).
   Пути с аномально большим bbox (Мурманск p[0], Красноярск p[2], Якутия p[0])
   имеют data-safe-stroke="0" → они НЕ получают stroke, рамка не «течёт» на весь холст.
   JS вычисляет safe-stroke при рендере через _pathIsSafeForStroke() (bbox-проверка).
   paint-order: stroke fill → рамка рисуется ПОД заливкой (не перекрывает цвет). */
.sgw-region.sgw-active[data-safe-stroke="1"] {
  stroke: var(--yellow);
  stroke-width: 1.6;
  stroke-linejoin: round;
  paint-order: stroke fill;
  filter: brightness(1.08);
}
[data-theme="dark"] .sgw-region.sgw-active[data-safe-stroke="1"] {
  stroke: var(--yellow);
  stroke-width: 1.8;
  filter: brightness(1.15);
}

/* --- Легенда плотности --- */
.sgw-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  flex-wrap: wrap;
}

.sgw-legend-label {
  font-size: 11px;
  color: var(--text2);
  font-weight: 550;
  white-space: nowrap;
}

.sgw-legend {
  position: relative;
}

.sgw-legend-zero {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text2);
  white-space: nowrap;
  margin-right: 4px;
}

/* Маркер «нет продаж»: оранжевый квадрат (канон-вариант Александра 2026-06-23).
   Цвет совпадает с .sgw-q0-orange → чёткая читаемость подписи «нет продаж». */
.sgw-legend-zero-swatch {
  width: 12px;
  height: 8px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--orange) 40%, var(--border));
  background: rgba(234, 88, 12, 0.22);
  flex-shrink: 0;
}
[data-theme="dark"] .sgw-legend-zero-swatch {
  background: rgba(234, 88, 12, 0.32);
}

/* --- Дискретные коридоры легенды (5 шт + «нет продаж»).
   Заменяют непрерывную полосу «Меньше→Больше».
   Каждый коридор = цветной квадрат-swatch + подпись диапазона в ₽. */
.sgw-legend-corridors {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.sgw-legend-corridor {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
  cursor: default;
}

/* Подсветка коридора при наведении на регион карты */
.sgw-legend-corridor-active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Цветной квадрат коридора */
.sgw-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.08);
}
.sgw-legend-swatch-q1 { background: var(--geo-fill-q1); }
.sgw-legend-swatch-q2 { background: var(--geo-fill-q2); }
.sgw-legend-swatch-q3 { background: var(--geo-fill-q3); }
.sgw-legend-swatch-q4 { background: var(--geo-fill-q4); }
.sgw-legend-swatch-q5 { background: var(--geo-fill-q5); }

/* Подпись диапазона */
.sgw-legend-range {
  font-size: 10px;
  color: var(--text2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Старая полоса — не используется (оставлена для безопасности, display:none) */
.sgw-legend-bar {
  display: none;
}

/* --- Информационная панель ховера (НАД картой, полная ширина колонки карты) ---
   ФИКСИРОВАННАЯ высота: карта не скачет при наведении/уходе курсора.
   .sgw-ip-wrap — внешняя рамка фиксированной высоты (overflow:hidden).
   .sgw-info-panel — внутренний контент (меняется при ховере).
   Монтируется ПЕРВЫМ ребёнком .sgw-map-card (до .sgw-mapwrap).
   Без наведения — премиум-описание карты (не просто «Наведите»).
   При наведении — шапка + ярус 1 (итог) + ярус 2 (склады). */

.sgw-map-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Внешняя обёртка — авто-высота под контент (было 92px + overflow:hidden → обрезало склады).
   Высота фиксируется структурой (3 строки при наведении), а не жёстким height → карта не скачет,
   но обрезки нет. */
.sgw-ip-wrap {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Информационная панель внутри обёртки.
   min-height = высота активного состояния (3 строки) → ФИКСИРОВАННАЯ высота всегда,
   панель НЕ прыгает при отводе/наведении курсора (placeholder и active одной высоты).
   justify-content:center — placeholder/сводка центрируются по вертикали. */
.sgw-info-panel {
  padding: 8px var(--space-5) 9px;
  background: var(--surface2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 116px;
  transition: background 200ms;
  box-sizing: border-box;
}

/* Активное состояние (есть данные) */
.sgw-info-panel.sgw-ip-active {
  background: var(--surface);
}

/* Премиум-плейсхолдер (простой — не ховер) */
.sgw-ip-placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.sgw-ip-placeholder-text {
  font-size: 12px;
  color: var(--text2);
  font-style: italic;
  line-height: 1.4;
  flex: 1;
}

/* Бейдж текущего МП (всегда виден) */
.sgw-ip-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  align-self: flex-start;
}

/* ===== Шапка: Зона (фикс. лейбл) · наведено (фикс. лейбл) · субъект · бейдж =====
   Лейблы «Зона»/«наведено» на фикс. позициях (min-width): при смене субъекта/зоны
   меняется только значение справа, сами слова не прыгают. */
.sgw-ip-header {
  display: flex;
  align-items: baseline;
  gap: 22px;
  flex-wrap: nowrap;
  line-height: 1.15;
}

/* блок зоны — только в зонном режиме */
.sgw-ip-zone-block {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-shrink: 0;
  width: 250px;            /* фикс. ширина под самую длинную зону — не скачет при смене */
}
.sgw-ip-zone-lab {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text2);
  white-space: nowrap;
  min-width: 34px;          /* фикс. позиция слова «Зона» */
}
.sgw-ip-zone-name {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* блок субъекта — лейбл + значение в ФИКС. рамке: при смене субъекта значение
   не скачет (правый край стоит), длинные имена обрезаются «…». */
.sgw-ip-subj-block {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-shrink: 0;
  width: 290px;            /* фикс. ширина под самый длинный субъект РФ */
}
.sgw-ip-subj-lab {
  font-size: 9px;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
  min-width: 60px;          /* фикс. позиция слова «наведено» */
  display: inline-flex;
  align-items: center;
}
.sgw-ip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green, var(--accent));
  display: inline-block;
  margin-right: 5px;
}
.sgw-ip-subj-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;          /* заполняет фикс. ширину блока, длинные — «…» */
}

/* бейдж МП прижат вправо */
.sgw-ip-header .sgw-ip-badge {
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: auto;
}

/* Ярус 1: итог (Продано ₽ + Заказы шт) — крупно + коридор-чип справа (§4 п.8) */
.sgw-ip-tier1 {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: nowrap;
  overflow: hidden;
}

.sgw-ip-t1-col {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.sgw-ip-t1-label {
  font-size: 10.5px;
  color: var(--text2);
}

.sgw-ip-t1-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Доля зоны/коридора от РФ — мелкая подпись рядом с суммой (задание А) */
.sgw-ip-t1-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}

/* ===== Ярус 2: ЗАКАЗЫ (сумма слева │ склады в одну строку) =====
   Вся строка = про заказы. Сверху (ярус 1) — деньги. */
.sgw-ip-tier2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  line-height: 1.3;
  white-space: nowrap;
}

.sgw-ip-orders-sum {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sgw-ip-os-label { font-size: 10px; color: var(--text2); font-weight: 600; }
.sgw-ip-os-val   { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* Доля заказов зоны от РФ — мелкая подпись рядом с «шт» (задание А) */
.sgw-ip-os-pct   { font-size: 10.5px; font-weight: 500; color: var(--text2); font-variant-numeric: tabular-nums; }
.sgw-ip-os-u     { font-size: 9.5px; color: var(--text2); }

.sgw-ip-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
  min-height: 16px;
}

/* склады: «Название: N (X%)» одной строкой, не переносятся */
.sgw-ip-wh {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 10.5px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sgw-ip-wh-item b   { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.sgw-ip-wh-pct      { color: var(--text2); font-weight: 600; }
.sgw-ip-wh-nodata   { color: var(--text2); font-style: italic; font-weight: 400; }
.sgw-ip-wh-sep      { color: var(--border); }

/* Когда данных < MIN_ORDERS */
.sgw-ip-nodata-msg {
  font-size: 11.5px;
  color: var(--text2);
  font-style: italic;
}

/* --- Коридор-чип в правой части яруса 1 (§4 п.8) ---
   Показывает цвет региона + ₽-диапазон + позицию коридора.
   margin-left:auto прижимает к правому краю яруса 1. */
.sgw-ip-corridor {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
  padding: 2px 7px 2px 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  cursor: default;
  max-width: 200px;
}

.sgw-ip-corridor-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.1);
}

/* Инфо-блок коридора: диапазон ₽ + позиция */
.sgw-ip-corridor-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.sgw-ip-corridor-range {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sgw-ip-corridor-pos {
  font-size: 9px;
  color: var(--text2);
  white-space: nowrap;
}

/* --- Обратная подсветка: наведение на коридор легенды → приглушить регионы других коридоров (§4 п.9б) ---
   svgEl получает data-active-legend-q="N" + класс sgw-legend-q-active через JS.
   CSS-атрибутный селектор: если svgEl.data-active-legend-q == "N",
   то НЕ совпадающие по data-q группы приглушаются.
   5 правил (по одному на каждый q 1..5) — нет другого способа без JS per-element. */
.sgw-mapwrap svg.sgw-legend-q-active .sgw-region-group {
  opacity: 0.22;
  transition: opacity 150ms;
}
/* Правила «оставить яркими» — svg.data-active-legend-q="N" + group.data-q="N" */
.sgw-mapwrap svg.sgw-legend-q-active[data-active-legend-q="1"] .sgw-region-group[data-q="1"],
.sgw-mapwrap svg.sgw-legend-q-active[data-active-legend-q="2"] .sgw-region-group[data-q="2"],
.sgw-mapwrap svg.sgw-legend-q-active[data-active-legend-q="3"] .sgw-region-group[data-q="3"],
.sgw-mapwrap svg.sgw-legend-q-active[data-active-legend-q="4"] .sgw-region-group[data-q="4"],
.sgw-mapwrap svg.sgw-legend-q-active[data-active-legend-q="5"] .sgw-region-group[data-q="5"] {
  opacity: 1;
}

/* Подсветка плашки коридора при hover через легенду — рамка более заметная */
.sgw-legend-corridor:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  cursor: pointer;
}

/* Активная плашка (от zone-hover или legend-hover) — заметнее */
.sgw-legend-corridor-active {
  background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Тонкая рамка субъекта под курсором внутри зоны (дополняет толстую зонную .sgw-active) */
.sgw-region.sgw-subject-active[data-safe-stroke="1"] {
  stroke: var(--yellow);
  stroke-width: 0.9;
  stroke-linejoin: round;
  paint-order: stroke fill;
  opacity: 1;
}

/* --- Пикер периода (выбор конкретного месяца) --- */

.sgw-period-picker {
  position: relative;
  flex-shrink: 0;
}

/* Кнопка-триггер */
.sgw-pp-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 550;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
  white-space: nowrap;
}

.sgw-pp-trigger:hover {
  background: var(--border);
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.sgw-pp-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Выпадающая панель пикера */
.sgw-pp-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  min-width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--bg) 50%, transparent),
              0 0 0 1px var(--border);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Скрытый drop */
.sgw-pp-drop[hidden] { display: none; }

/* Строка пресетов (Месяц / Квартал / Год) */
.sgw-pp-presets {
  display: flex;
  gap: 3px;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2);
}

.sgw-pp-preset-btn {
  flex: 1;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.sgw-pp-preset-btn:hover { color: var(--text); background: var(--surface2); }
.sgw-pp-preset-btn.sgw-on {
  background: var(--accent);
  color: var(--on-accent);
}

/* Строка выбора года */
.sgw-pp-yearrow {
  display: flex;
  gap: 3px;
}

.sgw-pp-year-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.sgw-pp-year-btn:hover { color: var(--text); }
.sgw-pp-year-btn.sgw-on {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface2));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* Сетка месяцев (12 кнопок) */
.sgw-pp-months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

/* Сетка кварталов (4 кнопки) */
.sgw-pp-quarters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

/* Кнопки месяца и квартала */
.sgw-pp-month-btn,
.sgw-pp-q-btn,
.sgw-pp-year-all-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 550;
  padding: 5px 4px;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.sgw-pp-month-btn:hover:not(:disabled),
.sgw-pp-q-btn:hover:not(:disabled),
.sgw-pp-year-all-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface2));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--accent);
}

.sgw-pp-year-all-btn {
  grid-column: 1 / -1;
  padding: 6px 4px;
}

/* Недоступная кнопка (будущие месяцы) */
.sgw-pp-disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Скрытые блоки пикера (переключаются пресетом) */
.sgw-pp-hidden { display: none !important; }

/* Заголовок «География продаж · даты» */
.geo-hero-date {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text2);
  letter-spacing: 0;
}

/* --- Старый cursor-следящий tooltip — УДАЛЁН (п.6 задания).
   CSS-классы .sgw-tooltip / .sgw-tip-* оставлены для обратной совместимости
   с возможными внешними ссылками, но больше не создаются JS-кодом. --- */

/* --- Правая колонка: «Рынок СНГ» --- */
.sgw-cis-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.sgw-cis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.sgw-cis-head-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sgw-cis-head-hint {
  font-size: 11px;
  color: var(--text2);
}

.sgw-cis-inner {
  padding: var(--space-2) var(--space-3) var(--space-3);
}

/* Карточка страны СНГ */
.sgw-country {
  border-radius: var(--radius-md);
  margin: 6px 0;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface2);
  transition: border-color 150ms;
}

.sgw-country:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.sgw-country-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
  transition: background 150ms;
}

.sgw-country-head:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Флаговая иконка страны — цветная подложка с кодом */
.sgw-flag {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  font-size: 11px;
  font-weight: 750;
  color: var(--accent);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sgw-country-meta {
  flex: 1;
  min-width: 0;
}

.sgw-country-name {
  font-size: 13.5px;
  font-weight: 640;
  color: var(--text);
}

.sgw-country-sub {
  font-size: 11px;
  color: var(--text2);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Выручка страны СНГ под числом городов */
.sgw-country-rev {
  font-size: 11px;
  color: var(--accent);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Fallback «в следующем периоде» когда выплата ещё не осела */
.sgw-country-rev-pending {
  color: var(--text2);
  font-style: italic;
  font-weight: 400;
}

.sgw-country-orders {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

.sgw-country-chev {
  color: var(--text2);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  display: flex;
}

.sgw-country.sgw-open .sgw-country-chev {
  transform: rotate(180deg);
}

/* Блок городов (аккордеон) */
.sgw-cities {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sgw-country.sgw-open .sgw-cities {
  max-height: 400px;
}

.sgw-cities-inner {
  padding: 2px var(--space-4) var(--space-3);
  border-top: 1px solid var(--border);
}

/* Строка города */
.sgw-city-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 0;
}

.sgw-city-name {
  flex: 0 0 110px;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Полоса доли города от страны */
.sgw-city-track {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}

.sgw-city-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  opacity: 0.65;
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sgw-city-val {
  flex: 0 0 48px;
  text-align: right;
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Доля выручки города от выручки страны, отображается правее числа заказов */
.sgw-city-rev-pct {
  flex: 0 0 34px;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Пустое состояние СНГ */
.sgw-cis-empty {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--text2);
  font-size: 13px;
}

/* Сообщение в аккордеоне СНГ, когда заказы есть, но города не детализированы
   (Ozon FBS/СНГ отдаёт только страну, без города). Не ошибка — ограничение данных.
   Минималистичная inline-заметка в потоке карточки: БЕЗ отдельного бокса
   (иначе «карточка в карточке») и БЕЗ акцентной левой полосы (AI-tell, запрещён
   дизайн-системой MA). Иконка — нейтральная, не акцент. */
.sgw-cities-note {
  padding: var(--space-2) var(--space-3) var(--space-1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sgw-cities-note-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.sgw-cities-note-title svg {
  flex-shrink: 0;
  color: var(--text2);   /* нейтральная иконка — НЕ accent (избегаем AI-tell) */
}
.sgw-cities-note-sub {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text2);
}

/* --- Строка итогов «Не определён субъект» --- */
.sgw-undef-note {
  font-size: 11.5px;
  color: var(--text2);
  padding: 0 var(--space-5) var(--space-3);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* --- Состояние загрузки --- */
.sgw-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 60px var(--space-5);
  color: var(--text2);
  font-size: 13px;
}

.sgw-loading-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: sgwPulse 1.2s ease-in-out infinite;
}

.sgw-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.sgw-loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes sgwPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.1); }
}

/* --- Пустой срез (нет гео-данных для карты) --- */
/* Монтируется внутри .sgw-map-card (position:relative) → абсолютный оверлей */
.sgw-empty-state {
  display: none; /* скрыт по умолчанию; показывается через JS */
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--surface2);
  border-radius: var(--radius-lg);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.sgw-empty-state.sgw-empty-active {
  display: flex;
}

.sgw-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text2) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text2);
}

.sgw-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text1);
  margin: 0;
}

.sgw-empty-sub {
  font-size: 12px;
  color: var(--text2);
  margin: 0;
  max-width: 260px;
  line-height: 1.5;
}

.sgw-empty-revenue {
  font-size: 12px;
  color: var(--text2);
  margin: 4px 0 0;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius);
  display: inline-block;
}

.sgw-empty-revenue strong {
  color: var(--text1);
  font-weight: 600;
}

[data-theme="dark"] .sgw-empty-state {
  background: var(--surface2);
}

/* --- Состояние ошибки --- */
.sgw-error {
  padding: 40px var(--space-5);
  text-align: center;
  color: var(--text2);
  font-size: 13px;
}

.sgw-error-icon {
  font-size: 24px;
  margin-bottom: var(--space-2);
  color: var(--warning);
}

/* --- Демо-баннер (только на sales-geo-demo.html) --- */
.sgw-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

/* --- Примечание о покрытии субъектов (под картой) --- */
.sgw-coverage-note {
  font-size: 11.5px;
  color: var(--text2);
  padding: 0 var(--space-4) var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sgw-coverage-note svg {
  flex-shrink: 0;
  color: var(--accent);
}

/* ==========================================================
   Тёмная тема: 5 подписанных коридоров (revision 2026-06-23, бамп 5-коридоров).
   Подход f19cba9: регионы светлее фона (#242836), читаются как «острова света».
   q0 = светло-стальной (нет продаж); q1..q5 = прогрессия от синего к яркому.
   Диапазон расширен для чёткого шага: q1 близко к q0, q5 = почти-белый синий.
   q6-q8 оставлены для совместимости (не назначаются при Q_LEVELS=5).
   Оранжевые нулевые (sgw-q0-orange) и штриховка НЕ тронуты.
   ========================================================== */

/* q0-базовый: регион БЕЗ данных — заметный светло-стальной серо-синий */
[data-theme="dark"] .sgw-region {
  fill: rgb(85, 93, 130);               /* серо-синий стальной: читается на #242836 */
  stroke: rgba(255, 255, 255, 0.14);
}

/* q1..q5 — расширенный диапазон, шаг ≥ 25 ед. по яркости между соседними:
   q1 (нижний, ≤20%): тёмно-стальной → q5 (топ 81-100%): почти-белый лавандовый.
   В тёмной теме ВСЕ цвета СВЕТЛЕЕ фона (осветлённый подход). */
[data-theme="dark"] .sgw-region.sgw-q1 { fill: rgb(95, 108, 175); }   /* нижний: стальной синий */
[data-theme="dark"] .sgw-region.sgw-q2 { fill: rgb(100, 125, 215); }  /* средне-синий */
[data-theme="dark"] .sgw-region.sgw-q3 { fill: rgb(110, 140, 245); }  /* насыщенный синий */
[data-theme="dark"] .sgw-region.sgw-q4 { fill: rgb(155, 175, 255); }  /* яркий светло-синий */
[data-theme="dark"] .sgw-region.sgw-q5 { fill: rgb(200, 218, 255); }  /* топ: почти белый синий */

/* q6-q8: не используются (Q_LEVELS=5), оставлены для совместимости */
[data-theme="dark"] .sgw-mapwrap {
  --geo-fill-q6: rgb(168, 140, 255);
  --geo-fill-q7: rgb(204, 168, 255);
  --geo-fill-q8: rgb(240, 200, 255);
}

/* Тёмная тема: swatch-квадраты легенды обновляют цвет через CSS-переменные mapwrap */
[data-theme="dark"] .sgw-mapwrap {
  --geo-fill-q1: rgb(95, 108, 175);
  --geo-fill-q2: rgb(100, 125, 215);
  --geo-fill-q3: rgb(110, 140, 245);
  --geo-fill-q4: rgb(155, 175, 255);
  --geo-fill-q5: rgb(200, 218, 255);
}

/* Тёмная тема: нулевые регионы — тёплый оранжевый вариант */
[data-theme="dark"] .sgw-region.sgw-q0-orange {
  fill: rgba(234, 88, 12, 0.28);
}

/* Тёмная тема: штриховка нулевых — светлее */
[data-theme="dark"] .sgw-region.sgw-q0-hatch {
  fill: url(#sgw-hatch);
}

/* Тёмная тема: граница swatch-квадрата — белая вместо чёрной */
[data-theme="dark"] .sgw-legend-swatch {
  border-color: rgba(255,255,255,0.12);
}

/* Тёмная тема: swatch-квадраты легенды — явные цвета (переменные из .sgw-mapwrap
   не наследуются в .sgw-legend, которая является сестрой, а не потомком mapwrap).
   Цвета совпадают с [data-theme="dark"] .sgw-region.sgw-q1..q5 выше. */
[data-theme="dark"] .sgw-legend-swatch-q1 { background: rgb(95, 108, 175); }
[data-theme="dark"] .sgw-legend-swatch-q2 { background: rgb(100, 125, 215); }
[data-theme="dark"] .sgw-legend-swatch-q3 { background: rgb(110, 140, 245); }
[data-theme="dark"] .sgw-legend-swatch-q4 { background: rgb(155, 175, 255); }
[data-theme="dark"] .sgw-legend-swatch-q5 { background: rgb(200, 218, 255); }

/* Тёмная тема: range-текст легенды — чуть светлее */
[data-theme="dark"] .sgw-legend-range {
  color: var(--text2);
}

/* Тёмная тема: ореол более тёплый/насыщенный */
[data-theme="dark"] .sgw-mapwrap::before {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--accent) 32%, transparent),
    color-mix(in srgb, var(--accent) 10%, transparent) 45%,
    transparent 72%
  );
  filter: blur(32px);
}

/* Тёмная тема: тень под сценой мощнее (рельеф заметнее) */
[data-theme="dark"] .sgw-scene {
  filter: drop-shadow(0 28px 22px rgba(0, 0, 0, 0.55));
}