/* izitop.com — базовые стили каркаса.
   Всё визуальное живёт в инлайн-стилях страниц (перенос 1:1 из канвасов Claude Design).
   Здесь только: reset, переключение десктоп/мобайл, обёртки страниц, плейсхолдер картинок,
   тёмная тема (трюк прототипа) и состояния попапов. Дизайн-стили сюда НЕ добавлять. */

/* --- reset (база из канваса) --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #F5F4F9; color: #1A1726; font-family: 'Onest', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* бегущая строка (из канваса) */
@keyframes tick-a { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- переключение версий --- */
.vd { display: block; }
.vm { display: none; }
@media (max-width: 1023px) {
  .vd { display: none; }
  .vm { display: block; }
}

/* --- обёртки страниц --- */
.pgd { width: 100%; max-width: 1440px; margin: 0 auto; background: #F5F4F9; color: #1A1726; font-family: 'Onest', sans-serif; position: relative; overflow-x: clip; }
.pgm { width: 100%; max-width: 480px; margin: 0 auto; background: #F5F4F9; color: #1A1726; font-family: 'Onest', sans-serif; position: relative; overflow-x: clip; }
/* Правка-3 #11: на части страниц шапка/подвал — прямые потомки .vd/.vm (вне .pgd/.pgm) и
   растягивались на всю ширину. Ограничиваем их той же шириной, что и .pgd/.pgm — как на главной.
   На страницах, где шапка уже внутри .pgd (.vd > .pgd > header), это правило не срабатывает. */
.vd > header, .vd > footer { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; }
.vm > header, .vm > footer { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }

/* --- подвал (ЛК-правки): колонки ссылок не влезали рядом с бренд-блоком (360+40+938px
       > ~1122px контент-зоны), flex-wrap уносил их на вторую строку влево — «подвал съехал».
       Фикс: бренд 280px (как в дизайне кабинет-варианта подвала), блоку колонок flex:1 —
       рядом с брендом он растягивается и раскладывает колонки space-between до правого края;
       если всё же переносится (узкое окно) — занимает всю строку и тоже распределяется. --- */
.vd footer > div:first-child > div:first-child { max-width: 280px !important; }
.vd footer > div:first-child > div:last-child { flex: 1 1 560px; min-width: 0; justify-content: space-between; gap: 28px 32px !important; }
/* колонкам — гибкая ширина (сжимаются, текст переносится), чтобы все 4 всегда в одну строку */
.vd footer > div:first-child > div:last-child > div { flex: 1 1 110px; min-width: 0; }

/* --- плейсхолдер изображений (иконка внутри — remixicon) --- */
.img-ph { background: #EDEBF5; color: #8B87A0; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
/* мягкий shimmer-скелетон: бегущий блик через ::after (анимация только по transform).
   JS каталогов вешает класс на контейнер обложки и снимает его по onload/onerror картинки. */
.img-ph.img-loading::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 62%); transform: translateX(-100%); animation: img-ph-shimmer 1.6s ease-in-out infinite; }
@keyframes img-ph-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .img-ph.img-loading::after { animation: none; } }
/* ============================================================================
   ТЁМНАЯ ТЕМА — настоящий перекрас палитры (заменила filter-инверсию 28.07.2026)
   ============================================================================
   Раньше тут был трюк прототипа: filter: invert(1) hue-rotate(180deg) на #page.
   Он выворачивает ВСЁ без разбора и поэтому давал заведомо неверную картинку:
     * #FFC531 превращался в коричневый — фирменный жёлтый обязан оставаться собой;
     * белый текст на фиолетовых плашках становился чёрным (invert белого = чёрный);
     * белые карточки (#FFFFFF) уходили в чистый чёрный, то есть ТЕМНЕЕ фона
       страницы, и карточки сливались с подложкой вместо того, чтобы быть светлее;
     * обложки товаров приходилось инвертировать обратно вторым фильтром.

   Теперь — обычный перекрас по токенам. Страницы свёрстаны инлайн-стилями из
   строго ограниченной палитры Claude Design (проверено на выборке 406 страниц:
   ~25 уникальных цветов), поэтому цепляемся селектором [style*="свойство:цвет"]:
   он матчит только нужное свойство, и background:#FFFFFF не путается с
   color:#FFFFFF. Инлайн-стиль перебивается лишь !important — отсюда он везде.

   ВАЖНО: цвет попадает в style двумя способами — запечённым в разметке
   ("color:#4E4A63") и выставленным из JS каталогов, который браузер сериализует
   как "color: rgb(78, 74, 99)". Ловим обе формы, иначе JS-сетки и фильтры
   остаются в светлой палитре. Блок ниже генерируется gen_dark.py по таблице
   токенов — правки вносить туда, а не в CSS руками.

   Правило перекраса:
     — нейтральные поверхности и текст переводим в тёмную шкалу;
     — ФИРМЕННЫЕ цвета не трогаем: #7B5CFA, #6C4CE0(фон), #FFC531, #F0A400,
       #1F9D57, #0077FF, #FC3F1D, #161327 (тёмный текст на жёлтом), белый текст;
     — тёмные акценты, нечитаемые на тёмном фоне, осветляем до пары из той же гаммы;
     — картинки не трогаем: фильтров больше нет вообще.

   Иерархия поверхностей (карточка обязана быть СВЕТЛЕЕ страницы):
     страница #0F0E17  <  шапка/подвал #14131F  <  карточка #1B1A27  <  чип #262336
   ---------------------------------------------------------------------------- */

/* нативная тёмная отрисовка форм, скроллбаров и системных виджетов */
html.theme-dark { color-scheme: dark; }

/* --- базовые поверхности (классовые, инлайнов тут нет) --- */
html.theme-dark body,
html.theme-dark .pgd,
html.theme-dark .pgm { background: #0F0E17; color: #F2F0F9; }
/* Шапка и подвал прозрачные — своего фона не имеют. На части страниц они прямые
   потомки .vd/.vm, на части лежат внутри .pgd/.pgm (см. «Правка-3 #11» выше),
   поэтому перечисляем оба варианта. Комбинатор > намеренный: внутри статей блога
   бывают свои <header>, их трогать не нужно. */
html.theme-dark .vd > header,
html.theme-dark .vm > header,
html.theme-dark .pgd > header,
html.theme-dark .pgm > header,
html.theme-dark .vd > footer,
html.theme-dark .vm > footer,
html.theme-dark .pgd > footer,
html.theme-dark .pgm > footer { background: #14131F; }
html.theme-dark .img-ph { background: #232030; color: #948FAA; }
/* блик скелетона: на тёмном ярко-белый слепит */
html.theme-dark .img-ph.img-loading::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, 0) 62%); }

/* --- ПОВЕРХНОСТИ из инлайн-стилей --- */
/* фон страницы/секции */
html.theme-dark [style*="background:#F5F4F9" i],
html.theme-dark [style*="background: rgb(245, 244, 249)" i],
html.theme-dark [style*="background-color:#F5F4F9" i],
html.theme-dark [style*="background-color: rgb(245, 244, 249)" i] { background: #0F0E17 !important; }
/* карточка, попап, шторка меню — главный слой «светлее фона» */
html.theme-dark [style*="background:#FFFFFF" i],
html.theme-dark [style*="background: rgb(255, 255, 255)" i],
html.theme-dark [style*="background-color:#FFFFFF" i],
html.theme-dark [style*="background-color: rgb(255, 255, 255)" i],
html.theme-dark [style*="background:#FFF" i],
html.theme-dark [style*="background: rgb(255, 255, 255)" i],
html.theme-dark [style*="background-color:#FFF" i],
html.theme-dark [style*="background-color: rgb(255, 255, 255)" i] { background: #1B1A27 !important; }
/* нейтральные светлые подложки, hover, врезки */
html.theme-dark [style*="background:#F7F6FB" i],
html.theme-dark [style*="background: rgb(247, 246, 251)" i],
html.theme-dark [style*="background-color:#F7F6FB" i],
html.theme-dark [style*="background-color: rgb(247, 246, 251)" i],
html.theme-dark [style*="background:#F6F5FA" i],
html.theme-dark [style*="background: rgb(246, 245, 250)" i],
html.theme-dark [style*="background-color:#F6F5FA" i],
html.theme-dark [style*="background-color: rgb(246, 245, 250)" i],
html.theme-dark [style*="background:#EFEDF5" i],
html.theme-dark [style*="background: rgb(239, 237, 245)" i],
html.theme-dark [style*="background-color:#EFEDF5" i],
html.theme-dark [style*="background-color: rgb(239, 237, 245)" i],
html.theme-dark [style*="background:#EDEBF5" i],
html.theme-dark [style*="background: rgb(237, 235, 245)" i],
html.theme-dark [style*="background-color:#EDEBF5" i],
html.theme-dark [style*="background-color: rgb(237, 235, 245)" i],
html.theme-dark [style*="background:#FAF9FD" i],
html.theme-dark [style*="background: rgb(250, 249, 253)" i],
html.theme-dark [style*="background-color:#FAF9FD" i],
html.theme-dark [style*="background-color: rgb(250, 249, 253)" i],
html.theme-dark [style*="background:#F1EFF3" i],
html.theme-dark [style*="background: rgb(241, 239, 243)" i],
html.theme-dark [style*="background-color:#F1EFF3" i],
html.theme-dark [style*="background-color: rgb(241, 239, 243)" i],
html.theme-dark [style*="background:#FBFAFF" i],
html.theme-dark [style*="background: rgb(251, 250, 255)" i],
html.theme-dark [style*="background-color:#FBFAFF" i],
html.theme-dark [style*="background-color: rgb(251, 250, 255)" i] { background: #201E2C !important; }
/* сиреневые плитки */
html.theme-dark [style*="background:#EDE9FA" i],
html.theme-dark [style*="background: rgb(237, 233, 250)" i],
html.theme-dark [style*="background-color:#EDE9FA" i],
html.theme-dark [style*="background-color: rgb(237, 233, 250)" i],
html.theme-dark [style*="background:#E6E1F7" i],
html.theme-dark [style*="background: rgb(230, 225, 247)" i],
html.theme-dark [style*="background-color:#E6E1F7" i],
html.theme-dark [style*="background-color: rgb(230, 225, 247)" i],
html.theme-dark [style*="background:#E9E5F7" i],
html.theme-dark [style*="background: rgb(233, 229, 247)" i],
html.theme-dark [style*="background-color:#E9E5F7" i],
html.theme-dark [style*="background-color: rgb(233, 229, 247)" i],
html.theme-dark [style*="background:#E4DDFB" i],
html.theme-dark [style*="background: rgb(228, 221, 251)" i],
html.theme-dark [style*="background-color:#E4DDFB" i],
html.theme-dark [style*="background-color: rgb(228, 221, 251)" i],
html.theme-dark [style*="background:#F3F0FF" i],
html.theme-dark [style*="background: rgb(243, 240, 255)" i],
html.theme-dark [style*="background-color:#F3F0FF" i],
html.theme-dark [style*="background-color: rgb(243, 240, 255)" i],
html.theme-dark [style*="background:#F3F0FE" i],
html.theme-dark [style*="background: rgb(243, 240, 254)" i],
html.theme-dark [style*="background-color:#F3F0FE" i],
html.theme-dark [style*="background-color: rgb(243, 240, 254)" i],
html.theme-dark [style*="background:#F8F6FE" i],
html.theme-dark [style*="background: rgb(248, 246, 254)" i],
html.theme-dark [style*="background-color:#F8F6FE" i],
html.theme-dark [style*="background-color: rgb(248, 246, 254)" i],
html.theme-dark [style*="background:#F6F3FF" i],
html.theme-dark [style*="background: rgb(246, 243, 255)" i],
html.theme-dark [style*="background-color:#F6F3FF" i],
html.theme-dark [style*="background-color: rgb(246, 243, 255)" i] { background: #231F38 !important; }
/* сиреневый чип */
html.theme-dark [style*="background:#F1EFF8" i],
html.theme-dark [style*="background: rgb(241, 239, 248)" i],
html.theme-dark [style*="background-color:#F1EFF8" i],
html.theme-dark [style*="background-color: rgb(241, 239, 248)" i] { background: #262336 !important; }
/* зелёный тинт (успех/гарантия) */
html.theme-dark [style*="background:#E4F5EA" i],
html.theme-dark [style*="background: rgb(228, 245, 234)" i],
html.theme-dark [style*="background-color:#E4F5EA" i],
html.theme-dark [style*="background-color: rgb(228, 245, 234)" i] { background: #0D2416 !important; }
/* голубой тинт */
html.theme-dark [style*="background:#E8F1FB" i],
html.theme-dark [style*="background: rgb(232, 241, 251)" i],
html.theme-dark [style*="background-color:#E8F1FB" i],
html.theme-dark [style*="background-color: rgb(232, 241, 251)" i] { background: #152030 !important; }
/* янтарный тинт (выгода/бонус) */
html.theme-dark [style*="background:#FBF3E0" i],
html.theme-dark [style*="background: rgb(251, 243, 224)" i],
html.theme-dark [style*="background-color:#FBF3E0" i],
html.theme-dark [style*="background-color: rgb(251, 243, 224)" i],
html.theme-dark [style*="background:#FCF0DA" i],
html.theme-dark [style*="background: rgb(252, 240, 218)" i],
html.theme-dark [style*="background-color:#FCF0DA" i],
html.theme-dark [style*="background-color: rgb(252, 240, 218)" i],
html.theme-dark [style*="background:#FBF0D4" i],
html.theme-dark [style*="background: rgb(251, 240, 212)" i],
html.theme-dark [style*="background-color:#FBF0D4" i],
html.theme-dark [style*="background-color: rgb(251, 240, 212)" i],
html.theme-dark [style*="background:#FDF8EC" i],
html.theme-dark [style*="background: rgb(253, 248, 236)" i],
html.theme-dark [style*="background-color:#FDF8EC" i],
html.theme-dark [style*="background-color: rgb(253, 248, 236)" i],
html.theme-dark [style*="background:#FDF3D8" i],
html.theme-dark [style*="background: rgb(253, 243, 216)" i],
html.theme-dark [style*="background-color:#FDF3D8" i],
html.theme-dark [style*="background-color: rgb(253, 243, 216)" i],
html.theme-dark [style*="background:#FFF4D6" i],
html.theme-dark [style*="background: rgb(255, 244, 214)" i],
html.theme-dark [style*="background-color:#FFF4D6" i],
html.theme-dark [style*="background-color: rgb(255, 244, 214)" i],
html.theme-dark [style*="background:#FFF6E6" i],
html.theme-dark [style*="background: rgb(255, 246, 230)" i],
html.theme-dark [style*="background-color:#FFF6E6" i],
html.theme-dark [style*="background-color: rgb(255, 246, 230)" i] { background: #2E2614 !important; }
/* красный тинт (риск/ошибка) — статьи блога, /failed, /verify-email */
html.theme-dark [style*="background:#FCE8E7" i],
html.theme-dark [style*="background: rgb(252, 232, 231)" i],
html.theme-dark [style*="background-color:#FCE8E7" i],
html.theme-dark [style*="background-color: rgb(252, 232, 231)" i],
html.theme-dark [style*="background:#FBEBEB" i],
html.theme-dark [style*="background: rgb(251, 235, 235)" i],
html.theme-dark [style*="background-color:#FBEBEB" i],
html.theme-dark [style*="background-color: rgb(251, 235, 235)" i],
html.theme-dark [style*="background:#FBE7E6" i],
html.theme-dark [style*="background: rgb(251, 231, 230)" i],
html.theme-dark [style*="background-color:#FBE7E6" i],
html.theme-dark [style*="background-color: rgb(251, 231, 230)" i] { background: #331A1A !important; }
/* розовый тинт */
html.theme-dark [style*="background:#FBE4F0" i],
html.theme-dark [style*="background: rgb(251, 228, 240)" i],
html.theme-dark [style*="background-color:#FBE4F0" i],
html.theme-dark [style*="background-color: rgb(251, 228, 240)" i] { background: #331728 !important; }
/* тёмная плашка светлой темы — на тёмном её надо ПОДНЯТЬ */
html.theme-dark [style*="background:#1A1726" i],
html.theme-dark [style*="background: rgb(26, 23, 38)" i],
html.theme-dark [style*="background-color:#1A1726" i],
html.theme-dark [style*="background-color: rgb(26, 23, 38)" i] { background: #2B2840 !important; }
/* ИСКЛЮЧЕНИЕ: светлая плитка, внутри которой лежит логотип бренда. Логотипы —
   прозрачные PNG/SVG, нарисованные под светлую подложку, и у большинства
   (ChatGPT, Claude, Cursor, Suno, Midjourney) они ЧЁРНЫЕ. Перекрась плитку в
   тёмный — логотип исчезнет. Такие плитки узнаём по прямому потомку
   <img>/<picture> и оставляем светлыми, слегка приглушив. Карточку-родителя это
   не задевает: у неё <img> не прямой потомок. */
html.theme-dark [style*="background:#fff" i]:has(> img),
html.theme-dark [style*="background: rgb(255, 255, 255)" i]:has(> img),
html.theme-dark [style*="background:#EDE9FA" i]:has(> img),
html.theme-dark [style*="background: rgb(237, 233, 250)" i]:has(> img),
html.theme-dark [style*="background:#fff" i]:has(> picture),
html.theme-dark [style*="background:#EDE9FA" i]:has(> picture) { background: #EFEEF5 !important; }
/* белая полупрозрачная подложка бейджей поверх обложек */
html.theme-dark [style*="background:rgba(255,255,255,.92)" i],
html.theme-dark [style*="background: rgba(255, 255, 255, 0.92)" i] { background: rgba(24, 22, 34, .92) !important; }
/* заливки «чернилами» (в светлой теме — лёгкая тень поверх белого) */
html.theme-dark [style*="background:rgba(26,23,38," i],
html.theme-dark [style*="background: rgba(26, 23, 38," i] { background: rgba(255, 255, 255, .08) !important; }
/* пастельные градиенты-заглушки обложек (все варианты содержат #EDE9FA) */
html.theme-dark [style*="linear-gradient"][style*="#EDE9FA" i] { background: linear-gradient(135deg, #241F3A, #1B1A27) !important; }

/* --- ТЕКСТ из инлайн-стилей --- */
/* основной текст */
html.theme-dark [style*="color:#1A1726" i],
html.theme-dark [style*="color: rgb(26, 23, 38)" i] { color: #F2F0F9 !important; }
/* вторичный текст */
html.theme-dark [style*="color:#4E4A63" i],
html.theme-dark [style*="color: rgb(78, 74, 99)" i] { color: #C8C4DA !important; }
/* третичный текст */
html.theme-dark [style*="color:#6E6A85" i],
html.theme-dark [style*="color: rgb(110, 106, 133)" i] { color: #ABA6C0 !important; }
/* приглушённый текст */
html.theme-dark [style*="color:#8B87A0" i],
html.theme-dark [style*="color: rgb(139, 135, 160)" i] { color: #948FAA !important; }
/* едва заметный текст */
html.theme-dark [style*="color:#C7C2DB" i],
html.theme-dark [style*="color: rgb(199, 194, 219)" i],
html.theme-dark [style*="color:#B8B4C6" i],
html.theme-dark [style*="color: rgb(184, 180, 198)" i] { color: #6E6A85 !important; }
/* сиреневый акцент: #6C4CE0 на тёмном даёт 3.1:1, светлая пара — 6.4:1 */
html.theme-dark [style*="color:#6C4CE0" i],
html.theme-dark [style*="color: rgb(108, 76, 224)" i],
html.theme-dark [style*="color:#4B2CC4" i],
html.theme-dark [style*="color: rgb(75, 44, 196)" i] { color: #A78BFA !important; }
/* «золотые» оттенки, жившие на янтарных тинтах */
html.theme-dark [style*="color:#B8860B" i],
html.theme-dark [style*="color: rgb(184, 134, 11)" i],
html.theme-dark [style*="color:#B8791A" i],
html.theme-dark [style*="color: rgb(184, 121, 26)" i],
html.theme-dark [style*="color:#8A6400" i],
html.theme-dark [style*="color: rgb(138, 100, 0)" i],
html.theme-dark [style*="color:#B07E00" i],
html.theme-dark [style*="color: rgb(176, 126, 0)" i],
html.theme-dark [style*="color:#7A5A12" i],
html.theme-dark [style*="color: rgb(122, 90, 18)" i] { color: #E8B33D !important; }
/* тёмно-зелёный на зелёном тинте */
html.theme-dark [style*="color:#1F8A5B" i],
html.theme-dark [style*="color: rgb(31, 138, 91)" i] { color: #43CC88 !important; }
/* малиновый на розовом тинте */
html.theme-dark [style*="color:#C2367F" i],
html.theme-dark [style*="color: rgb(194, 54, 127)" i] { color: #F58CC0 !important; }
/* ошибка/риск (#C0392B — «Риски:» в статьях блога) */
html.theme-dark [style*="color:#D9534F" i],
html.theme-dark [style*="color: rgb(217, 83, 79)" i],
html.theme-dark [style*="color:#D14343" i],
html.theme-dark [style*="color: rgb(209, 67, 67)" i],
html.theme-dark [style*="color:#C0392B" i],
html.theme-dark [style*="color: rgb(192, 57, 43)" i] { color: #FF7A73 !important; }
/* Страховка: на СВЕТЛЫХ фирменных заливках (жёлтый/янтарный) текст обязан
   остаться тёмным. В разметке он почти везде задан явно как #161327, но кое-где
   наследуется — а наследуемый цвет мы только что сделали светлым. */
html.theme-dark [style*="background:#FFC531" i],
html.theme-dark [style*="background: rgb(255, 197, 49)" i],
html.theme-dark [style*="background:#F0A400" i],
html.theme-dark [style*="background: rgb(240, 164, 0)" i] { color: #161327 !important; }

/* --- ГРАНИЦЫ ---
   В светлой теме все рамки — «чернила» с малой альфой; на тёмном нужен белый. */
html.theme-dark [style*="rgba(26,23,38,.0" i],
html.theme-dark [style*="rgba(26,23,38,.1" i],
html.theme-dark [style*="rgba(26, 23, 38, 0.0" i],
html.theme-dark [style*="rgba(26, 23, 38, 0.1" i] { border-color: rgba(255, 255, 255, .11) !important; }
html.theme-dark [style*="rgba(26,23,38,.2" i],
html.theme-dark [style*="rgba(26,23,38,.4" i],
html.theme-dark [style*="rgba(26, 23, 38, 0.2" i],
html.theme-dark [style*="rgba(26, 23, 38, 0.4" i] { border-color: rgba(255, 255, 255, .20) !important; }

/* --- ШАПКА/МЕГА-МЕНЮ: классовые стили (нужны :hover), инлайнов нет --- */
html.theme-dark .mpn-top,
html.theme-dark .mpn-nav { border-bottom-color: rgba(255, 255, 255, .10); }
html.theme-dark .mpn-cat { background: #262336; color: #A78BFA; }
html.theme-dark .mpn-cat:hover { background: #2F2B44; }
html.theme-dark .mpn-a { color: #C8C4DA; }
html.theme-dark .mpn-a:hover,
html.theme-dark .mpn-a.is-act { color: #A78BFA; }
html.theme-dark .mpn-chev { color: #948FAA; }
html.theme-dark .mpn-badge { color: #ABA6C0; }
html.theme-dark .mpn-pop,
html.theme-dark .mpn-mm { background: #1B1A27; border-color: rgba(255, 255, 255, .12); }
html.theme-dark .mpn-pop a:hover,
html.theme-dark .mpn-mm-x:hover { background: #262336; }
html.theme-dark .mpn-mm-t { color: #F2F0F9; }
html.theme-dark .mpn-mm-t i { background: #262336; color: #A78BFA; }
html.theme-dark a.mpn-mm-t:hover,
html.theme-dark .mpn-mm-l:hover { color: #A78BFA; }
html.theme-dark .mpn-mm-l { color: #C8C4DA; }
html.theme-dark .mpn-mm-note { color: #948FAA; }
html.theme-dark .mpn-mm-x { color: #ABA6C0; }
html.theme-dark .mpn-mm-x:hover { color: #F2F0F9; }
/* .mpn-tag (жёлтый бейдж) и .mpn-mm-promo (фиолетовый градиент) — фирменные */

/* --- КАРУСЕЛЬ ГЛАВНОЙ (.hs-*) — тоже классовая --- */
html.theme-dark .hs-dot { background: rgba(255, 255, 255, .28); }
/* .hs-dot.on — фирменный #FFC531, оставляем */

/* --- попапы: карточка внутри .fb-popup красится общими правилами выше,
       затемняющая подложка и так тёмная — трогать нечего --- */
/* --- мгновенное состояние входа (без мигания «Войти» ↔ «Кабинет» при переходах) ---
   Класс is-authed/is-guest ставит на <html> инлайн-скрипт в <head> (nginx sub_filter),
   ДО первой отрисовки — поэтому шапка сразу рисуется в правильном состоянии, а не
   логаутится на долю секунды, пока site.js в конце <body> не догонит. !important —
   перебиваем инлайн style="display:none" у ссылки «Кабинет». site.js после загрузки
   лишь подставляет имя в [data-auth-name]. */
html.is-authed [data-login-open] { display: none !important; }
html.is-authed [data-auth-user]  { display: block !important; }

/* --- каркас модалок (возвращено 2026-07-28): при выкатке тёмной темы в 10:57 из файла
   пропали структурные правила .fb-popup, из-за чего #login-popup и #buy-popup рисовались
   обычным блоком в конце <body> — под футером, вне экрана. Тёмную тему это не трогает:
   карточку внутри попапа красят общие правила выше. --- */
.fb-popup { position: fixed; inset: 0; z-index: 1000; background: rgba(26, 23, 38, .55); align-items: flex-start; justify-content: center; padding: 70px 16px 40px; overflow-y: auto; }
.fb-popup.open { display: flex; }
body.fb-popup-open { overflow: hidden; }

/* --- Подсказка у чипа: [data-dtip] + плашка .mp-dtip, раскрывается тапом.
   Первым потребителем стал чип «Ручная выдача до 24 ч» на семейных карточках;
   чипы там на инлайн-цветах и своих правил не имеют, поэтому тёмная тема
   прописана здесь явно. --- */
[data-dtip] { position: relative; cursor: pointer; }
.mp-dtip { position: absolute; z-index: 60; left: 0; top: calc(100% + 8px); width: max-content; max-width: min(280px, 78vw); background: #1A1726; color: #FFFFFF; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-align: left; white-space: normal; border-radius: 10px; padding: 9px 12px; box-shadow: 0 14px 40px -10px rgba(26, 23, 38, .45); }
.mp-dtip::before { content: ''; position: absolute; left: var(--dtip-arrow, 14px); top: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #1A1726; }
html.theme-dark .mp-dtip { background: #2A2740; color: #F2F0F9; }
html.theme-dark .mp-dtip::before { border-bottom-color: #2A2740; }