/* OWNS: html[data-xf-skin="neon"] — тёмный скин, он же тёмная тема сайта (#707): атрибут ставит FOUC-guard в header.php вместе с data-theme="dark", когда человек сам включил тёмную переключателем; .xf-neon-* (плитки фактов и знак X вывески — include/home/pitch.php, include/neon/x-art.php). Грузится всем и последним в списке header.php. Чужие селекторы перекрывает ТОЛЬКО под атрибутом скина: без него файл ничего не меняет (разметку .xf-neon-* вне скина прячет атрибут hidden в pitch.php). */
/* ============================================================
 * Тёмный скин, третья редакция — «на витрине шоу, у кассы порядок».
 *
 * История: 1) #617 — буквальный референс владельца (Flo AI Hackathon):
 * розовые пятна на фоне, градиент синий→розовый на обводках, заливках и
 * тексте, свечение, пилюли с искрами. 2) #619 — тихая редакция по
 * замечанию Ильи («пёстро, градиенты ИИ-шные и дешёвые»). 3) Владелец
 * хочет яркую. Компромисс, согласованный Ильёй 2026-09-30:
 *   • ГЛАВНАЯ — яркая: подсветка фона, насыщенный знак X, насыщенный
 *     фиолетовый и розовый, цветная тень у главных блоков;
 *   • КАТАЛОГ, ТОВАР, КОРЗИНА, ОФОРМЛЕНИЕ — спокойные: там человек платит,
 *     доверие важнее шоу;
 *   • ВЕЗДЕ сняты круглые кнопки-пилюли и градиентные обводки/заливки —
 *     «самое страшное» по словам Ильи. Яркость держится светом и
 *     насыщенным ровным цветом, а не градиентами. Градиент остаётся только
 *     внутри знака X (это картинка) и в подсветке фона главной.
 *
 * Главная узнаётся по .xf-pitch: вывеска рендерится только из index.php
 * (include/home/hero.php → pitch.php). Блоки, которые живут только на
 * главной (вывеска, «Товар дня», промо конфигуратора), стилизуются
 * напрямую; общие (фон) — через html:has(.xf-pitch).
 *
 * Статус (#707, решение Ильи 2026-10-12): скин — тёмная тема сайта, по
 * переключателю в шапке. Светлая — по умолчанию у всех и живёт по DESIGN.md
 * как раньше; скин от DESIGN.md отступает (подсветка фона — Flat-Surface,
 * #280; градиент в знаке — Gradient-Restraint, #322) — только в тёмной.
 * A/B-тест скина «для всех» (#626) отменён без вывода: docs/ab-test.md.
 *
 * Слои: data-theme="dark" включает тёмные правила остальных файлов (белая
 * плита под фото товара и т. п.) — это база; data-xf-skin="neon" — этот
 * файл поверх. Оба атрибута ставятся и снимаются вместе, в одном месте.
 * Свои токены здесь перекрывают тёмный пакет tokens.css; из него живыми
 * остаются только сигнальные --success / --warning / --danger.
 * ============================================================ */

/* ── Токены (общие для всех страниц) ───────────────────────────
   Графит с фиолетовым подтоном; линии — белый с альфой. Акцент — насыщенный
   фиолетовый (не пыльный, как в тихой редакции): белый на нём 5.2:1.
   --nx-pink — яркий розовый только для текста-акцента на главной (9:1 на
   поверхности), --nx-line — насыщенная фиолетовая рамка ярких блоков,
   --nx-lift — цветная тень со смещением (не ореол вокруг): свет «падает»
   от блока вниз. */
html[data-xf-skin="neon"] {
  --bg:        oklch(0.165 0.020 298);
  --bg-2:      oklch(0.140 0.016 298);
  --surface:   oklch(0.198 0.022 298);
  --surface-2: oklch(0.228 0.022 298);
  --surface-3: oklch(0.272 0.022 298);
  --line:      oklch(1 0 0 / 0.14);
  --line-soft: oklch(1 0 0 / 0.08);
  --text:      oklch(0.96 0.006 298);
  --text-2:    oklch(0.78 0.014 298);
  --text-3:    oklch(0.66 0.014 298);

  --accent:      oklch(0.56 0.23 298);
  --accent-2:    oklch(0.82 0.10 305);
  --accent-3:    oklch(0.51 0.24 298);
  --accent-dim:  oklch(0.56 0.23 298 / 0.16);
  --accent-line: oklch(0.62 0.20 300 / 0.45);

  --nx-pink:  oklch(0.80 0.14 340);
  --nx-line:  oklch(0.62 0.20 300 / 0.55);
  --nx-lift:  0 18px 44px -18px oklch(0.56 0.23 298 / 0.75);

  --header-bg:   oklch(0.165 0.020 298 / 0.78);
  --shadow-card: 0 18px 44px -18px oklch(0 0 0 / 0.7);

  background: var(--bg);
  caret-color: var(--accent-2);
}

/* ── Фон ───────────────────────────────────────────────────────
   Везде — один мягкий свет сверху. На главной — подсветка референса:
   пурпурная дымка за первым экраном и холодный фиолет снизу слева. */
html[data-xf-skin="neon"] body { background: transparent; }
html[data-xf-skin="neon"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(90% 55% at 50% -8%, oklch(0.42 0.09 295 / 0.30), transparent 70%);
}
html[data-xf-skin="neon"]:has(.xf-pitch) body::before {
  background:
    radial-gradient(75% 48% at 50% 34%, oklch(0.40 0.14 330 / 0.50), transparent 72%),
    radial-gradient(60% 42% at 0% 100%, oklch(0.38 0.17 285 / 0.38), transparent 72%),
    radial-gradient(50% 36% at 100% 0%, oklch(0.42 0.15 335 / 0.26), transparent 72%);
}

/* ── Шапка (везде одинаковая, спокойная) ─────────────────────── */
html[data-xf-skin="neon"] .xf-header::before { border-bottom-color: var(--line-soft); }
html[data-xf-skin="neon"] .xf-search input {
  background: oklch(1 0 0 / 0.04);
  border-color: var(--line);
}
html[data-xf-skin="neon"] .xf-search input:focus { border-color: var(--accent-2); }
html[data-xf-skin="neon"] :is(.xf-configurator-pill, .xf-mcall__btn, .xf-drawer__cta) {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}
html[data-xf-skin="neon"] .xf-drawer__panel { background: var(--bg); }

/* ── Кнопки ────────────────────────────────────────────────────
   Форма — обычная для сайта (скругление из ui.css, 10–12px), а не
   пилюля-стадион; материал — ровный акцент, без градиента и обводки.
   Цветная тень — только у главных кнопок главной (ниже). */
html[data-xf-skin="neon"] :is(.xf-btn, .xf-cart-btn, .xf-cookie__accept, .xf-btn-buy) { box-shadow: none; }
@media (hover: hover) {
  html[data-xf-skin="neon"] .xf-btn:where(:not(.xf-btn--ghost, .xf-btn--outline, .xf-btn--subtle, .xf-btn--link)):hover {
    background: var(--accent-3);
  }
}
html[data-xf-skin="neon"] :is(.xf-btn--ghost, .xf-btn--outline) {
  background: transparent;
  border-color: var(--line);
}
html[data-xf-skin="neon"] :is(.xf-chat__fab, .xf-floating-bot) { box-shadow: 0 10px 28px -12px oklch(0 0 0 / 0.8); }

/* ── Заголовки секций ─────────────────────────────────────────
   Моно-надписи над заголовками («ТОВАРЫ», «ПАРТНЁРЫ») дублируют заголовок —
   в скине их нет. В светлой остаются (DESIGN.md). */
html[data-xf-skin="neon"] :is(.xf-section-head__eyebrow, .xf-promo__eyebrow) { display: none; }
html[data-xf-skin="neon"] .xf-section-head__link { color: var(--text-2); }
@media (hover: hover) {
  html[data-xf-skin="neon"] .xf-section-head__link:hover { color: var(--text); }
}

/* ── Баннеры, полка разделов, бренды ──────────────────────── */
html[data-xf-skin="neon"] .xf-hero { border-color: var(--line-soft); }
html[data-xf-skin="neon"] :is(.xf-catrail__item, .xf-brand) {
  background: var(--surface);
  border-color: var(--line-soft);
}
@media (hover: hover) {
  html[data-xf-skin="neon"] .xf-catrail__item:hover { border-color: var(--accent-line); }
}

/* ── Карточка товара (везде, в том числе на главной — спокойная) ──
   Фото — JPEG с запечённым белым фоном, белая плита тёмной темы остаётся
   (DESIGN.md, Light-Is-Canonical). Плита вставлена в тёмную рамку карточки
   с отступом — «фото на стекле». Кнопки избранного/сравнения на плите —
   сплошные светлые (полупрозрачные пропускали фото). «В корзину» —
   тихая рамка, наливается акцентом на наведении карточки. */
html[data-xf-skin="neon"] .xf-product-card {
  background: var(--surface);
  border-color: var(--line-soft);
}
@media (hover: hover) {
  html[data-xf-skin="neon"] .xf-product-card:hover { border-color: var(--accent-line); box-shadow: none; }
}
html[data-xf-skin="neon"] .xf-product-card__image {
  margin: 8px 8px 0;
  border-radius: 10px;
}
html[data-xf-skin="neon"] .xf-product-card__like-btn {
  background: oklch(0.975 0.004 298);
  border-color: oklch(0.2 0.02 298 / 0.10);
  color: oklch(0.32 0.03 298);
}
html[data-xf-skin="neon"] .xf-product-card__cart-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}
@media (hover: hover) {
  html[data-xf-skin="neon"] .xf-product-card:hover .xf-product-card__cart-btn {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
  }
}

/* ── Подвал ───────────────────────────────────────────────── */
html[data-xf-skin="neon"] .xf-footer {
  background: var(--bg-2);
  border-top-color: var(--line-soft);
}

/* ================================================================
 * ГЛАВНАЯ — яркая зона. Всё ниже живёт только на главной.
 * ================================================================ */

/* ── Вывеска ───────────────────────────────────────────────────
   Раскладка референса: знак → заголовок → вторая строка → плитки фактов →
   кнопка. Шрифт заголовка — наш обычный (владелец, #618). Вторая строка —
   ровный яркий цвет вместо градиентного текста. */
html[data-xf-skin="neon"] .xf-pitch { border-bottom: 0; padding-bottom: 40px; }
html[data-xf-skin="neon"] .xf-pitch__facts,
html[data-xf-skin="neon"] .xf-pitch__note { display: none; }
html[data-xf-skin="neon"] .xf-pitch__band {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  grid-template-areas:
    "title art"
    "pills art"
    "cta   art";
  grid-template-rows: auto auto 1fr;
  column-gap: 56px;
  align-items: start;
}
html[data-xf-skin="neon"] .xf-pitch__title-soft { color: oklch(0.80 0.13 322); }
html[data-xf-skin="neon"] .xf-neon-art {
  display: block;
  grid-area: art;
  align-self: center;
}
html[data-xf-skin="neon"] .xf-neon-x {
  display: block;
  width: 100%;
  height: auto;
}
/* Факты — плитки, а не пилюли: прямоугольник со скруглением 14px, ровная
   фиолетовая подложка и рамка (без градиента), текст слева, ключевое
   слово — ярким розовым. Сетка 2×2 и на телефоне: столбик во всю ширину
   той же формы, что кнопка, читался как стопка кнопок. */
html[data-xf-skin="neon"] .xf-neon-pills {
  display: grid;
  grid-area: pills;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  max-width: 600px;
}
html[data-xf-skin="neon"] .xf-neon-pill {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--nx-line);
  border-radius: 14px;
  background: oklch(0.56 0.23 298 / 0.12);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.35;
  text-wrap: pretty;
  transition: border-color .18s, background-color .18s;
}
/* nowrap: ключевое слово не рвётся («1-» / «2 дня» на телефоне по дефису). */
html[data-xf-skin="neon"] .xf-neon-pill b { font-weight: 600; color: var(--nx-pink); white-space: nowrap; }
html[data-xf-skin="neon"] .xf-neon-pill a { color: inherit; text-decoration: none; }
html[data-xf-skin="neon"] .xf-neon-pill a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: hover) {
  html[data-xf-skin="neon"] .xf-neon-pill:has(a):hover { background: oklch(0.56 0.23 298 / 0.2); }
}
html[data-xf-skin="neon"] .xf-btn.xf-pitch__cta {
  grid-area: cta;
  margin-top: 26px;
  min-height: 52px;
  padding: 14px 30px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--nx-lift);
}

@media (max-width: 1023px) {
  html[data-xf-skin="neon"] .xf-pitch__band {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "art" "title" "pills" "cta";
    grid-template-rows: none;
  }
  html[data-xf-skin="neon"] .xf-neon-art {
    width: min(72%, 400px);
    margin: 0 0 16px -4%;
  }
}
@media (max-width: 767px) {
  html[data-xf-skin="neon"] .xf-pitch { padding-top: 12px; padding-bottom: 28px; }
  html[data-xf-skin="neon"] .xf-neon-pills { gap: 8px; margin-top: 24px; }
  html[data-xf-skin="neon"] .xf-neon-pill { min-height: 64px; padding: 10px 12px; font-size: 14px; }
  html[data-xf-skin="neon"] .xf-btn.xf-pitch__cta { width: 100%; margin-top: 18px; }
}

/* ── Товар дня ─────────────────────────────────────────────────
   Яркий блок главной: насыщенная ровная рамка и цветная тень вниз вместо
   градиентной обводки. Цифры отсчёта у владельца зелёные (#486/#489) — в
   скине розовые, в палитре главной; кнопка — общий акцент с тенью. */
html[data-xf-skin="neon"] .xf-day {
  border: 1.5px solid var(--nx-line);
  background: color-mix(in oklch, var(--accent) 7%, var(--surface));
  box-shadow: var(--nx-lift);
}
html[data-xf-skin="neon"] .xf-day--duo .xf-day__item + .xf-day__item { border-color: oklch(0.62 0.20 300 / 0.35); }
html[data-xf-skin="neon"] .xf-day__tag {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}
html[data-xf-skin="neon"] .xf-day__timer {
  background: transparent;
  border-color: oklch(0.62 0.20 300 / 0.35);
}
html[data-xf-skin="neon"] .xf-day--duo .xf-day__num { color: var(--nx-pink); }
html[data-xf-skin="neon"] .xf-day--duo .xf-day__cart:not(.is-added) {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--nx-lift);
}

/* ── Промо конфигуратора: цветная плата ────────────────────────
   Та же плата, что в знаке, в полном цвете; слева её гасит скрим под
   текст (функциональный градиент читаемости, DESIGN.md его разрешает). */
html[data-xf-skin="neon"] .xf-promo__card {
  border: 1.5px solid var(--nx-line);
  background:
    linear-gradient(100deg, oklch(0.165 0.020 298 / 0.96) 32%, oklch(0.165 0.020 298 / 0.45) 100%),
    url(../images/neon/circuit-2.webp) center / cover,
    var(--surface);
  box-shadow: var(--nx-lift);
}
html[data-xf-skin="neon"] .xf-promo__art-wrap { display: none; }
html[data-xf-skin="neon"] .xf-promo__card .xf-btn { box-shadow: var(--nx-lift); }

/* Баннеры главной — в той же фиолетовой рамке, что и яркие блоки. */
html[data-xf-skin="neon"] .xf-home__section--hero .xf-hero { border-color: var(--nx-line); }

/* ================================================================
 * Доводка по обходу «глазами покупателя» 2026-10-05 (перед A/B-тестом
 * #626). Здесь не дизайн, а поломки тёмного: элементы управления, которые
 * в скине теряли контур, и первый экран телефона.
 * ================================================================ */

/* Шапка: стекло 0.78 над белыми плитками фото давало серо-молочную муть,
   пункты меню бледнели. Почти глухой фон — блюр остаётся лёгким намёком. */
html[data-xf-skin="neon"] .xf-header::before { background: oklch(0.165 0.020 298 / 0.94); }
/* Радио, чекбоксы, выключенный тумблер cookie: контур --line (8–14% белого) на
   тёмной карточке не читался как «это можно нажать» — способы доставки
   выглядели справкой. 45% белого даёт контур ≥ 3:1 к подложке. */
html[data-xf-skin="neon"] :is(.xf-choice__dot, .xf-check__box) { border-color: oklch(1 0 0 / 0.45); }
html[data-xf-skin="neon"] .xf-cookie__check:not(:checked) + .xf-cookie__switch:not(.xf-cookie__switch--locked) {
  border-color: oklch(1 0 0 / 0.45);
}
html[data-xf-skin="neon"] .xf-cookie__check:not(:checked) + .xf-cookie__switch:not(.xf-cookie__switch--locked) .xf-cookie__knob {
  background: oklch(0.86 0.010 298);
}

/* Кнопка «В корзину» в карточках списка и «В корзине» после добавления:
   тёмная на тёмном с контуром 14% — терялась. Контур заметнее, у «уже в
   корзине» — фирменный фиолетовый: состояние видно, главной кнопкой не кричит. */
html[data-xf-skin="neon"] .xf-product-card__cart-btn { border-color: oklch(1 0 0 / 0.32); }
html[data-xf-skin="neon"] .xf-btn-buy.is-added { border-color: oklch(0.62 0.20 300 / 0.85); }

/* Просмотр фото крупно: стрелки, крестик и счётчик были тёмными на тёмном. */
html[data-xf-skin="neon"] :is(.xf-lightbox__btn, .xf-lightbox__counter) {
  background: oklch(1 0 0 / 0.14);
  border-color: oklch(1 0 0 / 0.36);
  color: oklch(1 0 0);
}
@media (hover: hover) {
  html[data-xf-skin="neon"] .xf-lightbox__btn:hover { background: oklch(1 0 0 / 0.24); }
}

/* Ссылки, которые в скине перестали выглядеть ссылками: «Забыли пароль?» и
   плитка с рейтингом Onliner (ведёт на отзывы). */
html[data-xf-skin="neon"] .xf-auth__link,
html[data-xf-skin="neon"] .xf-neon-pill a {
  text-decoration: underline;
  text-decoration-color: oklch(1 0 0 / 0.4);
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  /* Первый экран телефона. Знак во всю ширину (72%) уводил заголовок, плитки
     с доводами и кнопку «Открыть каталог» за край экрана, а кружок чата,
     уворачиваясь от кнопки, садился на плитку с рейтингом. Знак меньше —
     всё это возвращается на первый экран; сам знак остаётся первым, что видно. */
  html[data-xf-skin="neon"] .xf-neon-art { width: min(44%, 400px); margin: 0 0 6px -2%; }
  /* Промо конфигуратора: на узком экране текст ложился на яркие дорожки платы. */
  html[data-xf-skin="neon"] .xf-promo__card {
    background:
      linear-gradient(100deg, oklch(0.165 0.020 298 / 0.96) 55%, oklch(0.165 0.020 298 / 0.74) 100%),
      url(../images/neon/circuit-2.webp) center / cover,
      var(--surface);
  }
}