/* ============================================================
   ТЕМА «STUDIO NOIR» (Схема A) — космическое стекло + Aurora.
   Аддитивный слой: активируется только при html[data-theme='noir'].
   Живой aurora-градиент, фиолетовое стекло, неоновые акценты,
   иридесцентная аура карты и реакция света на финиш.
   Логику/рендер/API не трогает. Уважает prefers-reduced-motion.
   ============================================================ */

/* ---- Токены темы: глубокий индиго-violet (явно НЕ нейтральный тёмный) ---- */
html[data-theme='noir'] {
  --bg-primary: #0a0718;
  --bg-secondary: #100c26;
  --bg-tertiary: #171136;
  --bg-hover: #1f1849;
  --bg-active: #2a2160;

  /* Электрический перивинкль + иридесцентный градиент (aurora) */
  --accent: #8aa2ff;
  --on-accent: #10142c; /* см. пояснение у токена в style.css */
  --accent-hover: #adbcff;
  --accent-dim: rgba(138, 162, 255, 0.18);
  --accent-grad: linear-gradient(120deg, #4d7cff 0%, #8a5cff 32%, #ff2d95 66%, #22d3ee 100%);

  --text-primary: #f2f2fb;
  --text-secondary: #b7bcdd;
  --text-muted: #9198c4;

  --border: rgba(150, 140, 255, 0.14);
  --border-light: rgba(160, 150, 255, 0.28);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 26px rgba(10, 4, 30, 0.6);
  --shadow-lg: 0 30px 70px rgba(6, 2, 20, 0.7);
}

/* ---- Фиолетовое матовое стекло: тулбар + боковые панели ---- */
html[data-theme='noir'] #toolbar,
html[data-theme='noir'] #panel-left,
html[data-theme='noir'] #panel-right {
  background: rgba(16, 12, 38, 0.6);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border-color: rgba(150, 140, 255, 0.16);
}
/* Фирменная деталь: бегущая aurora-линия под тулбаром */
html[data-theme='noir'] #toolbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #4d7cff, #8a5cff, #ff2d95, #22d3ee, #4d7cff);
  background-size: 200% 100%;
  animation: noir-sweep 9s linear infinite;
  opacity: 0.95;
}
@keyframes noir-sweep {
  to {
    background-position: 200% 0;
  }
}
/* Заголовки секций/вкладки — прозрачное фиолетовое стекло */
html[data-theme='noir'] .region-header,
html[data-theme='noir'] .panel-title,
html[data-theme='noir'] .panel-tabs {
  background: linear-gradient(180deg, rgba(138, 92, 255, 0.1), transparent);
}

/* ---- Логотип: иридесцентный градиент-текст ---- */
html[data-theme='noir'] .logo-text,
html[data-theme='noir'] .logo-text em {
  background: linear-gradient(120deg, #8aa2ff, #c58cff, #ff8ad4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[data-theme='noir'] .logo-icon {
  color: #c58cff;
  text-shadow: 0 0 14px rgba(197, 140, 255, 0.65);
}

/* ---- Рабочая зона: ЖИВОЙ AURORA-фон (Северное сияние) ---- */
html[data-theme='noir'] #canvas-area {
  position: relative;
  background: linear-gradient(180deg, #0a0718 0%, #060310 100%);
  overflow: hidden;
}
html[data-theme='noir'] #canvas-area::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 40% at 20% 26%, rgba(77, 124, 255, 0.6), transparent 62%),
    radial-gradient(42% 44% at 82% 30%, rgba(255, 45, 149, 0.42), transparent 62%),
    radial-gradient(48% 50% at 66% 82%, rgba(34, 211, 238, 0.42), transparent 62%),
    radial-gradient(40% 42% at 28% 84%, rgba(138, 92, 255, 0.5), transparent 62%);
  background-size: 200% 200%;
  filter: blur(58px) saturate(1.35);
  mix-blend-mode: screen;
  opacity: 0.6;
  animation: noir-aurora 15s ease-in-out infinite alternate;
}
@keyframes noir-aurora {
  0% {
    background-position: 0% 0%;
    transform: translate3d(-2%, -1%, 0) scale(1.05);
    filter: blur(58px) saturate(1.35) hue-rotate(0deg);
  }
  100% {
    background-position: 100% 100%;
    transform: translate3d(2%, 2%, 0) scale(1.14);
    filter: blur(58px) saturate(1.5) hue-rotate(38deg);
  }
}
/* Спот-виньетка — «свет прожектора» на карте */
html[data-theme='noir'] #canvas-area::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 54% at 50% 45%, transparent 42%, rgba(4, 2, 14, 0.6) 100%);
}

/* ---- Карта = «световой стол»: иридесцентная аура ---- */
html[data-theme='noir'] #main-canvas {
  position: absolute;
  z-index: 1;
  border-radius: 6px;
  animation: noir-aura 9s ease-in-out infinite;
}
@keyframes noir-aura {
  0%,
  100% {
    box-shadow:
      0 34px 90px rgba(0, 0, 0, 0.66),
      0 0 66px -6px rgba(77, 124, 255, 0.5),
      0 0 30px -8px rgba(138, 92, 255, 0.4);
  }
  50% {
    box-shadow:
      0 34px 90px rgba(0, 0, 0, 0.66),
      0 0 78px -4px rgba(255, 45, 149, 0.48),
      0 0 34px -8px rgba(34, 211, 238, 0.42);
  }
}
/* Свет реагирует на премиум-финиш (holo/pearl) — усиленный радужный ореол */
html[data-theme='noir'][data-finish='holo'] #main-canvas,
html[data-theme='noir'][data-finish='pearl'] #main-canvas {
  animation: noir-aura-iri 5s linear infinite;
}
@keyframes noir-aura-iri {
  0% {
    box-shadow:
      0 34px 90px rgba(0, 0, 0, 0.66),
      0 0 96px -4px rgba(77, 124, 255, 0.6);
  }
  33% {
    box-shadow:
      0 34px 90px rgba(0, 0, 0, 0.66),
      0 0 100px -2px rgba(138, 92, 255, 0.66);
  }
  66% {
    box-shadow:
      0 34px 90px rgba(0, 0, 0, 0.66),
      0 0 100px -2px rgba(255, 45, 149, 0.66);
  }
  100% {
    box-shadow:
      0 34px 90px rgba(0, 0, 0, 0.66),
      0 0 96px -4px rgba(34, 211, 238, 0.6);
  }
}

/* ---- Иридесцентные активные состояния + неоновое свечение ---- */
html[data-theme='noir'] .panel-tab.active,
html[data-theme='noir'] .seg-chip.active,
html[data-theme='noir'] .card-tab.active,
html[data-theme='noir'] .mgr-chip.active {
  border-color: transparent;
  background: linear-gradient(
    120deg,
    rgba(77, 124, 255, 0.38),
    rgba(138, 92, 255, 0.34),
    rgba(255, 45, 149, 0.28)
  );
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(170, 160, 255, 0.5),
    0 0 20px rgba(138, 92, 255, 0.45);
}
html[data-theme='noir'] .panel-tab.active svg {
  filter: drop-shadow(0 0 7px rgba(170, 160, 255, 0.75));
}
html[data-theme='noir'] .layer-item.active {
  background: linear-gradient(120deg, rgba(77, 124, 255, 0.24), rgba(255, 45, 149, 0.16));
  border-color: rgba(170, 160, 255, 0.4);
  box-shadow:
    inset 2px 0 0 #8a5cff,
    0 0 18px rgba(138, 92, 255, 0.25);
}

/* ---- Primary-кнопка «Скачать»: бегущий aurora-градиент + свечение ---- */
html[data-theme='noir'] .tool-btn.btn-primary {
  background: linear-gradient(120deg, #4d7cff, #8a5cff, #ff2d95, #22d3ee, #4d7cff);
  background-size: 220% 100%;
  color: #fff;
  border: none;
  box-shadow: 0 6px 28px rgba(138, 92, 255, 0.5);
  animation: noir-sweep 7s linear infinite;
}
html[data-theme='noir'] .tool-btn.btn-primary:hover {
  filter: brightness(1.12) saturate(1.1);
  box-shadow: 0 8px 34px rgba(255, 45, 149, 0.5);
}

/* ---- Стекло для модалок, выпадашек, переключателя карт ---- */
html[data-theme='noir'] .ux-modal-box,
html[data-theme='noir'] .modal-content,
html[data-theme='noir'] .dropdown,
html[data-theme='noir'] .theme-menu,
html[data-theme='noir'] .pcolor-pop,
html[data-theme='noir'] #card-switcher {
  background: rgba(18, 13, 42, 0.82);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  border-color: rgba(160, 150, 255, 0.2);
}
html[data-theme='noir'] .ux-modal-overlay,
html[data-theme='noir'] .modal-overlay {
  background: rgba(3, 2, 12, 0.62);
}

/* ---- Кнопка-переключатель темы (искра переливается) ---- */
html[data-theme='noir'] #btn-theme {
  border-color: rgba(170, 160, 255, 0.45);
  background: var(--accent-dim);
  color: #c58cff;
}
html[data-theme='noir'] #btn-theme svg {
  filter: drop-shadow(0 0 7px rgba(197, 140, 255, 0.7));
  transform: rotate(72deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Ползунки и скроллбар — иридесцентные ---- */
html[data-theme='noir'] input[type='range'] {
  background: linear-gradient(90deg, #4d7cff, #8a5cff, #ff2d95);
}
html[data-theme='noir'] input[type='range']::-webkit-slider-thumb {
  background: #eaf0ff;
  box-shadow: 0 0 10px rgba(138, 92, 255, 0.7);
}
html[data-theme='noir'] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4d7cff, #8a5cff);
  background-clip: padding-box;
}

/* ---- Акцент-маркеры секций инспектора — aurora ---- */
html[data-theme='noir'] .panel-title::before,
html[data-theme='noir'] .inspector-section-title::before {
  box-shadow: 0 0 10px rgba(138, 92, 255, 0.7);
}