/* ══════════════════════════════════════════════════════════════════════
   СКИН «AGENKO» — тема поверх существующей вёрстки.
   Компоновка, блоки и разметка не меняются: переопределяются токены
   и несколько форм. Подключается последним, после style.css и proto.css.

   Смысл такого подхода: UX-решения (инструмент подбора на первом экране,
   порядок блоков, лимит тёмных полос) остаются как есть — меняется
   только визуальный язык. Откат = отключить один файл.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Палитра */
  --bg:            #0B0B0D;
  --surface:       #141416;
  --surface-sunk:  #1A1A1D;
  --ink:           #FFFFFF;
  --ink-2:         rgba(255,255,255,.62);
  --ink-3:         rgba(255,255,255,.38);
  --line:          rgba(255,255,255,.09);

  /* Тёмные полосы на тёмной странице должны быть светлее фона,
     иначе герой сливается с телом страницы. */
  --inverse:       #1C1D20;
  --on-inverse:    #FFFFFF;
  /* Полоса баннера — серый, а не чёрный: на почти чёрной странице
     чистый чёрный сливается с фоном, а на светлой читается как дыра.
     #24262A даёт отрыв от обеих баз и держит белый текст на 15.2:1. */
  --panel-dark:    #24262A;

  /* Акцент — кислотный лайм.

     Здесь ступень одна, в отличие от приглушённых цветов: лайм настолько
     светлый, что белый текст на нём невозможен (1.18:1), зато чёрный даёт
     17.8:1, а сам цвет на фоне #0B0B0D — 16.7:1. То есть один и тот же
     оттенок работает и заливкой, и текстом. */
  --signal:        #C8FF2E;
  --signal-press:  #B4EB1A;
  --signal-ink:    #C8FF2E;
  --signal-soft:   rgba(200,255,46,.12);
  --on-signal:     #0B0B0D;

  /* Формы: пилюли вместо скруглённых прямоугольников */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  20px;

  /* Легаси-алиасы пересобираем — иначе половина страницы останется светлой */
  --bg-primary:     var(--bg);
  --bg-secondary:   var(--surface);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --glass-bg:       var(--surface);
  --glass-border:   var(--line);
  --accent-blue:    var(--signal);
  --accent-red:     var(--signal);
  --navy:           var(--ink);
  --turquoise:      var(--signal);
  --turquoise-deep: var(--ink);
}

body { background: var(--bg); color: var(--ink); }

/* ── Шапка в капсуле ─────────────────────────────────────────────────── */
.site-header { background: transparent; border: 0; padding-block: 16px; }
.site-header-inner { gap: 24px; }
.site-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  gap: 2px;
}
.site-menu a { border-radius: 999px; padding: 8px 16px; color: var(--ink-2); }
.site-menu a:hover, .site-menu a.active { background: rgba(255,255,255,.07); color: var(--ink); }
.site-menu a.active::after { display: none; }
.site-logo {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 18px;
}

/* ── Кнопки — пилюли ─────────────────────────────────────────────────── */
.btn { border-radius: 999px; }
.btn-signal, .btn-primary {
  background: var(--signal); color: var(--on-signal); border: 0; font-weight: 600;
}
.btn-signal:hover, .btn-primary:hover { background: var(--signal-press); color: var(--on-signal); }
.btn-secondary { background: transparent; border: 1px solid var(--line); color: var(--ink); }

/* ── Герой: типографика крупнее и жёстче ─────────────────────────────── */
/* Вариант A: герой без плашки — типографика прямо на фоне страницы.
   Ни заливки, ни рамки: первый экран не тратится на декор, и подбирать
   оттенок под каждую тему не нужно — фон один и тот же. */
.hero-pick {
  background: transparent;
  /* Линия под героем осталась от прежней светлой полосы: она отделяла
     плашку от страницы. Плашки больше нет — линия отделяет заголовок
     от воздуха и читается как случайная. Убираем, ритм держит отступ. */
  border-bottom: 0;
  border-radius: 0; margin-inline: 0;
  padding-block: 64px 48px;
}
.band-hero {
  background: transparent;
  color: var(--ink);
  padding-block: 64px 48px;
}
.band-hero h1, .band-hero .cat-title, .band-hero h2 { color: var(--ink); }
.band-hero p, .band-hero .cat-sub, .band-hero .lp-lead { color: var(--ink-2); }
.band-hero .breadcrumbs, .band-hero .breadcrumbs a, .band-hero .eyebrow { color: var(--ink-3); }
.hero-pick h1 {
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  line-height: .96; letter-spacing: -.03em; text-transform: uppercase;
}
.band-hero { border-radius: 0; }

/* Поля подбора — тёмные, в тон карточкам */
.picker { background: var(--surface-sunk); border-color: var(--line); border-radius: var(--r-lg); }
.picker-field select {
  background-color: var(--surface); border-color: var(--line); color: var(--ink);
  border-radius: 999px;
}
.picker-field label { color: var(--ink-3); }

/* ── Карточки ────────────────────────────────────────────────────────── */
.studio-card, .blog-card, .master-card, .expert-card, .calc, .promo-card, .sbook,
.guarantee-list li, .review-card, .spec-card, .cat-filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.studio-card:hover, .blog-card:hover { transform: translateY(-2px); box-shadow: none; }
.sc-body h3, .bc-body h3 { color: var(--ink); }
.sc-district { color: var(--signal); }
.sc-addr, .bc-meta, .master-role { color: var(--ink-2); }

/* ── Чипы и бейджи — пилюли ──────────────────────────────────────────── */
.chip, .badge, .badge-new, .sc-open, .sc-rating, .bc-cat, .badge--attr, .sc-tag {
  border-radius: 999px;
}
.chip { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.chip-toggle[aria-pressed="true"], .chip.active {
  background: var(--signal); border-color: var(--signal); color: var(--on-signal);
}
.badge--accent { background: var(--signal-soft); color: var(--signal); }
.badge--attr, .sc-tag { border-color: var(--line); color: var(--ink-2); }

/* ── Секции и заголовки ──────────────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--ink); }
.section-sub, .how-note, .brand-note, .calc-note { color: var(--ink-2); }
h2 { letter-spacing: -.02em; }

/* Надзаголовок-пилюля, как в референсе */
.eyebrow, .task-card-eyebrow, .premium-eyebrow, .task-new-card .eyebrow {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
  color: var(--ink-2);
}

/* ── Плитки категорий ────────────────────────────────────────────────── */
.cat-tile { background: var(--surface); border: 1px solid var(--line); }
.cat-tile h3 { color: var(--ink); }

/* ── Карточки задач ──────────────────────────────────────────────────── */
.task-new-card { background: var(--surface); border: 1px solid var(--line); }
.task-new-go { background: var(--signal); color: var(--on-signal); }

/* ── Таблица цен ─────────────────────────────────────────────────────── */
.price-table th { color: var(--ink-3); border-color: var(--line); }
.price-table td { border-color: var(--line); }
.price-table a { color: var(--ink); }
.price-table .price { color: var(--signal); font-weight: 600; }
.price-section .price-bg { display: none; }

/* ── Блок бота ───────────────────────────────────────────────────────── */
.bot-block { background: transparent; }
.section.band-dark { background: var(--surface); }
.bot-chat { background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r-lg); }
.bubble-in { background: rgba(255,255,255,.06); color: var(--ink); }
.bubble-out { background: var(--signal); color: var(--on-signal); }

/* ── Цифры ───────────────────────────────────────────────────────────── */
.hero-stats { border-color: var(--line); }
.hero-stats dd { color: var(--ink); font-size: clamp(2rem, 4vw, 3rem); }
.hero-stats dt { color: var(--ink-3); }

/* ── Шаги, гарантия, FAQ ─────────────────────────────────────────────── */
.how-steps li { border-color: var(--line); }
.how-num { color: var(--signal); }
.guarantee-list li::before { color: var(--signal); }
.lp-faq-item { border-color: var(--line); }
.lp-faq-item summary { color: var(--ink); }
.lp-faq-item p { color: var(--ink-2); }

/* ── Слайдер до/після ────────────────────────────────────────────────── */
.ba-stage { border-color: var(--line); }
.ba-divider { background: var(--signal); }
.ba-handle { background: var(--signal); color: var(--on-signal); border: 0; }

/* ── Подвал ──────────────────────────────────────────────────────────── */
.site-footer { background: transparent; border-color: var(--line); }
.footer-about, .site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--signal); }
.footer-bottom { border-color: var(--line); color: var(--ink-3); }

/* ── Карта ───────────────────────────────────────────────────────────── */
.map-teaser { background: var(--surface); border-color: var(--line); color: var(--ink); }
.map-teaser:hover { border-color: var(--ink-3); }

/* ── Фотографии: монохром, как в референсе ───────────────────────────── */
.sc-photo, .bc-cover, .ba-img, .task-card-img {
  filter: grayscale(1) contrast(1.1) brightness(.9);
}
.studio-card:hover .sc-photo { filter: grayscale(0) contrast(1.05); }

/* ── Тёмный скоуп: style.css переопределяет токены внутри [data-theme="dark"],
   поэтому скин обязан перекрыть их там же — иначе акцент внутри героя
   и тёмных полос вернётся к голубому из тёмной темы. ─────────────────── */
[data-theme="dark"] {
  --bg:            #0B0B0D;
  --surface:       #1A1A1D;
  --surface-sunk:  #222226;
  --ink:           #FFFFFF;
  --ink-2:         rgba(255,255,255,.62);
  --ink-3:         rgba(255,255,255,.38);
  --line:          rgba(255,255,255,.09);
  --signal:        #C8FF2E;
  --signal-press:  #B4EB1A;
  --signal-ink:    #C8FF2E;
  --signal-soft:   rgba(200,255,46,.12);
  --on-signal:     #0B0B0D;
  --inverse:       #FFFFFF;
  --on-inverse:    #0B0B0D;
  --text-primary:  var(--ink);
  --text-secondary: var(--ink-2);
}

/* ── Цвет по наведению — как на карточках студий ──────────────────────
   Плитка и карточка задачи лежат монохромными, на ховере возвращается
   цвет: у кадров из Figma это красные детали (стрелка тахометра,
   пружина, окантовка фары). Приём тот же, что уже работает у студий,
   поэтому вся выдача ведёт себя одинаково. */
.cat-tile img,
.task-new-photo img,
.sc-photo, .bc-cover, .ba-img, .task-card-img {
  transition: filter var(--t-reveal, 250ms) var(--ease, ease);
}
.cat-tile img,
.task-new-photo img {
  filter: grayscale(1) contrast(1.1) brightness(.9);
}
.cat-tile:hover img,
.task-new-card:hover .task-new-photo img {
  filter: grayscale(0) contrast(1.05) brightness(1);
}

/* ── Акцент как текст берёт светлую ступень ───────────────────────────
   Для кислотного обе ступени совпадают, но правила оставлены: если
   акцент когда-нибудь сменят на приглушённый, текстовые места сами
   возьмут светлую ступень и контраст не поедет. */
.sc-district,
.price-table .price,
.how-num,
.guarantee-list li::before,
.badge--accent,
.review-source.is-verified,
.site-footer a:hover,
.expert-link i,
.ag-more::after { color: var(--signal-ink); }
.badge--accent { background: var(--signal-soft); color: var(--signal-ink); }
.ag-more::after { background: var(--signal-ink); }
.ba-divider { background: var(--signal-ink); }
.ba-handle { background: var(--signal); color: var(--on-signal); }
.bubble-out { background: var(--signal); color: var(--on-signal); }

/* ── Карта: тайлы OpenStreetMap светлые и выбиваются из тёмной темы.
   Инвертируем и возвращаем тон — приём стандартный для тёмных карт,
   маркеры и попапы при этом остаются нормальными, поэтому фильтр
   вешаем только на слой тайлов. */
.leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.6); }
.leaflet-container { background: var(--surface); }
.leaflet-control-attribution { background: rgba(11,11,13,.7) !important; color: var(--ink-3) !important; }
.leaflet-control-attribution a { color: var(--ink-2) !important; }
.leaflet-bar a { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════════
   СВЕТЛАЯ ТЕМА — инверсия того же скина.
   Переключается атрибутом data-skin="light" на <html>, выбор хранится
   в localStorage (DESIGN §2: переключатель ручной и запоминающийся).

   Акцент не может быть одним и тем же в обеих темах. Лайм на светлом
   фоне даёт 1.10:1 — как текст он нечитаем в принципе. Поэтому:
     заливка кнопки остаётся лаймовой с чёрным текстом (17.8:1),
     но получает границу, иначе теряется на светлом фоне;
     текст и иконки берут тёмную ступень того же тона — #4F6B00 (5.70:1).
   ══════════════════════════════════════════════════════════════════════ */
html[data-skin="light"] {
  --bg:            #F7F7F5;
  --surface:       #FFFFFF;
  --surface-sunk:  #EFEFEC;
  --ink:           #0B0B0D;
  --ink-2:         rgba(11,11,13,.66);
  --ink-3:         rgba(11,11,13,.42);
  --line:          rgba(11,11,13,.12);

  --inverse:       #24262A;
  --on-inverse:    #FFFFFF;
  --panel-dark:    #2B2D32;

  --signal:        #C8FF2E;
  --signal-press:  #B4EB1A;
  --signal-ink:    #4F6B00;
  --signal-soft:   rgba(200,255,46,.28);
  --on-signal:     #0B0B0D;

  --bg-primary:     var(--bg);
  --bg-secondary:   var(--surface);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --glass-bg:       var(--surface);
  --glass-border:   var(--line);
}
/* Лаймовая заливка на светлом фоне теряет края — добавляем границу */
html[data-skin="light"] .btn-signal,
html[data-skin="light"] .btn-primary,
html[data-skin="light"] .task-new-go {
  border: 1px solid rgba(11,11,13,.16);
}
html[data-skin="light"] .chip.chip-toggle[aria-pressed="true"],
html[data-skin="light"] .chip.active { border-color: rgba(11,11,13,.16); }
html[data-skin="light"] .badge--accent { color: var(--signal-ink); }
/* В светлой теме тёмные полосы снова тёмные, а карта — обычная */
html[data-skin="light"] .leaflet-tile-pane { filter: none; }
html[data-skin="light"] .site-menu a:hover,
html[data-skin="light"] .site-menu a.active { background: rgba(11,11,13,.06); }
/* Фото в светлой теме не обесцвечиваем — светлая зона про чистоту и цвет */
html[data-skin="light"] .sc-photo,
html[data-skin="light"] .bc-cover,
html[data-skin="light"] .ba-img,
html[data-skin="light"] .cat-tile img,
html[data-skin="light"] .task-new-photo img { filter: none; }

/* ── Кнопка переключения темы ─────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer; font-size: 18px; line-height: 1;
  transition: color var(--t-micro, 150ms) var(--ease, ease),
              border-color var(--t-micro, 150ms) var(--ease, ease);
}
.theme-toggle:hover { color: var(--signal-ink); border-color: var(--ink-3); }
.theme-toggle .ph-sun { display: none; }
html[data-skin="light"] .theme-toggle .ph-sun { display: block; }
html[data-skin="light"] .theme-toggle .ph-moon { display: none; }

/* ── Карточки задач и плитки: текст следует за темой ──────────────────
   В продакшен-CSS они залиты --inverse и текст задан --on-inverse.
   Скин меняет фон на --surface, поэтому цвет текста обязан переехать
   на --ink, иначе в светлой теме получается белое по белому. */
.task-new-card,
.task-new-card h3 { color: var(--ink); }
.task-new-card p { color: var(--ink-2); }
.task-new-card .eyebrow { color: var(--ink-3); }
.cat-tile h3 { color: var(--ink); }

/* Плитки в светлой теме: фото домаскировано под тёмную подложку,
   на белой карточке край растворяется в пустоту. Возвращаем тёмную
   подложку самой плитке — она остаётся акцентным элементом в обеих темах. */
html[data-skin="light"] .cat-tile { background: var(--panel-dark); border-color: transparent; }
html[data-skin="light"] .cat-tile h3 { color: #FFFFFF; }
html[data-skin="light"] .task-new-photo img { filter: grayscale(1) contrast(1.1) brightness(.95); }
html[data-skin="light"] .task-new-card:hover .task-new-photo img { filter: none; }

/* Прев’ю товарів у тон решті сайту: кадри тёмної зони мають лаймову
   й магентову підсвітку, поруч із рештою карток вони кричать. */
.prod-photo img { filter: grayscale(1) contrast(1.1) brightness(.92); }
.prod:hover .prod-photo img { filter: grayscale(0) contrast(1.05); }

/* ── Тёмная полоса бота: сірий, а не колір поверхні ──────────────────── */
.section.band-dark { background: var(--panel-dark); }
.section.band-dark .bot-copy h2,
.section.band-dark .bot-copy p { color: #fff; }
.section.band-dark .bot-copy p { color: rgba(255,255,255,.72); }
.section.band-dark .bot-chat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.section.band-dark .bot-chat-head { color: #fff; }
.section.band-dark .bubble-in { background: rgba(255,255,255,.1); color: #fff; }

/* ── Преміум-смуга: у світлій темі --inverse світлий, тому напис зникав.
   Прив’язуємо смугу до тієї ж тёмної панелі, що й решта акцентів. ───── */
.premium-strip { background: var(--panel-dark); color: #fff; }
.premium-eyebrow { color: rgba(255,255,255,.6); }
.premium-text { color: rgba(255,255,255,.86); }
.premium-strip .premium-cta { background: var(--signal); color: var(--on-signal); border: 0; }

/* ── Карусель марок у калькуляторі ───────────────────────────────────── */
.brand-pick { margin-bottom: 16px; }
.brand-pick-label { display: block; margin-bottom: 12px; }
.brand-rail {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.brand-rail::-webkit-scrollbar { height: 6px; }
.brand-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.brand-btn {
  flex: none; scroll-snap-align: start;
  min-width: 104px; height: 72px;
  display: grid; place-items: center; gap: 4px;
  padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--ink);
  transition: border-color var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}
.brand-btn:hover { border-color: var(--ink-3); }
.brand-btn[aria-pressed="true"] { border-color: var(--signal); background: var(--signal-soft); }
.brand-btn img { max-width: 56px; max-height: 28px; object-fit: contain; }
.brand-btn small { font-size: .6875rem; font-weight: 400; color: var(--ink-3); }

/* ── Сторінка тюнінгу: перев’язуємо її власні токени на системні ───────
   У tuning.html свій набір --tz-* і помаранчевий акцент #FF6B2C —
   через це вона виглядала як окремий сайт. Переписувати 257 рядків
   її стилів не потрібно: досить підмінити значення токенів, і вся
   сторінка підхопить спільну палітру разом із перемикачем теми. */
html .tz.tz {
  --tz-bg:         var(--bg);
  --tz-surface:    var(--surface);
  --tz-text:       var(--ink);
  --tz-text-2:     var(--ink-2);
  --tz-text-3:     var(--ink-3);
  --tz-line:       var(--line);
  --tz-accent:     var(--signal-ink, var(--signal));
  --tz-accent-dim: var(--signal);
  background: var(--bg);
  color: var(--ink);
}
/* Форми і сітка — як усюди */
.tz-goal, .tz-cat, .tz-figure, .tz-note { border-radius: var(--r-lg); }
.tz-goals { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tz-hero { border-bottom: 0; }
.tz-section { border-bottom: 0; padding-block: 96px; }
.tz .site-header { background: transparent; border-bottom: 0; }
.tz .site-header-cta .btn { background: var(--signal); color: var(--on-signal); border: 0; }
.tz .site-footer { background: transparent; }
@media (max-width: 900px) { .tz-goals { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tz-section { padding-block: 64px; } }

/* Надзаголовок-пілюля має бути по вмісту. У tuning.html власні стилі
   роблять його блоковим, тому inline-block програє за каскадом —
   fit-content працює незалежно від display. */
.eyebrow, .tz-eyebrow, .premium-eyebrow, .task-new-card .eyebrow { width: fit-content; }

/* .hero-pick сам по собі на всю ширину — коли на ньому ще й .band-hero,
   виніс на 100vw додає ширину смуги прокрутки й дає горизонтальний скрол.
   Знімаємо виніс, відступи бере на себе внутрішній .container. */
.hero-pick.band-hero {
  width: auto; max-width: none; margin-inline: 0;
  padding-inline: 0;
}