/* ======================================================================
   ТЁМНАЯ ТЕМА - отдельный слой поверх header-only.css
   ======================================================================
   Почему отдельным файлом, а не правками в header-only.css: тот уже 376 КБ,
   и вплетать в него вторую палитру - гарантированные конфликты при каждой
   следующей правке. Здесь всё привязано к html.sp-dark, поэтому светлая
   тема остаётся ровно такой, какой была: не найдётся класса - файл не
   делает ничего.

   Как это работает. В светлой теме почти 800 мест берут цвет из переменных
   --sp-ink / --sp-bg / --sp-line и т.д. Переопределяем эти переменные - и
   разом переворачивается основная масса интерфейса. Оставшееся - жёстко
   зашитые в CSS белые фоны (их около 170) и цвета темы stylesheet24.css -
   гасим точечно ниже, по крупным поверхностям.

   Подключать ПОСЛЕ header-only.css, иначе !important светлой темы победит.
   ====================================================================== */

html.sp-dark{
  color-scheme: dark;

  /* Палитра перевёрнута по смыслу, а не по формуле: --sp-ink был тёмным
     текстом - стал светлым, --sp-bg был светлой подложкой - стал тёмной.
     Фиолетовый и красный осветлены: фирменные оттенки на тёмном фоне
     теряют контраст и выглядят грязными. */
  --sp-ink:#E9E7F3;
  --sp-muted:#9E99B8;
  --sp-line:#2E2942;
  --sp-bg:#1B1730;
  --sp-purple:#9B8CF0;
  --sp-red:#FF5B66;
  --sp-green:#35C41F;

  --sp-dark-page:#12101F;
  --sp-dark-card:#1E1A31;
  --sp-dark-raise:#262138;
}

/* ---------- страница и базовые поверхности ---------- */
html.sp-dark body{ background:var(--sp-dark-page) !important; color:var(--sp-ink); }
html.sp-dark #content,
html.sp-dark .container{ color:var(--sp-ink); }

html.sp-dark header .container,
html.sp-dark #menu,
html.sp-dark .panel,
html.sp-dark .panel-body,
html.sp-dark .panel-heading,
html.sp-dark .panel-footer,
html.sp-dark .well,
html.sp-dark .modal-content,
html.sp-dark .dropdown-menu,
html.sp-dark .sp-linkbar,
html.sp-dark .list-group-item,
html.sp-dark .table > tbody > tr > td,
html.sp-dark .table > thead > tr > th{
  background:var(--sp-dark-card) !important;
  color:var(--sp-ink) !important;
  border-color:var(--sp-line) !important;
}

html.sp-dark hr,
html.sp-dark .table > tbody > tr > td,
html.sp-dark .table > thead > tr > th{ border-color:var(--sp-line) !important; }

/* ---------- шапка ---------- */
html.sp-dark header .container{ box-shadow:0 1px 0 var(--sp-line) !important; }

/* Логотип. Файл идёт с непрозрачной белой подложкой, поэтому одна лишь
   инверсия давала чёрный прямоугольник вокруг знака. Инвертируем И
   смешиваем режимом lighten: инвертированная подложка становится чёрной,
   а чёрное при lighten проигрывает фону страницы и исчезает - остаётся
   только сам знак. Поворот тона возвращает фирменному красному его цвет. */
html.sp-dark #logo img{
  filter:invert(1) hue-rotate(180deg);
  mix-blend-mode:lighten;
  background:transparent !important;
}

/* ---------- меню площадок ---------- */
html.sp-dark #menu .navbar-nav > li > a,
html.sp-dark #menu .nav > li > a{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark #menu .navbar-nav > li > a:hover,
html.sp-dark #menu .navbar-nav > li.open > a{
  background:var(--sp-dark-raise) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.45) !important;
}
html.sp-dark #menu .dropdown-menu,
html.sp-dark #menu .dropdown-inner{ background:var(--sp-dark-card) !important; }
html.sp-dark #menu .dropdown-menu li > a,
html.sp-dark #menu .dropdown-inner a{
  background:transparent !important; color:var(--sp-ink) !important;
}
html.sp-dark #menu .dropdown-menu li > a:hover,
html.sp-dark #menu .dropdown-inner a:hover{ background:var(--sp-dark-raise) !important; }

/* ---------- нижний ряд ссылок ---------- */
html.sp-dark .sp-linkbar{ border-color:var(--sp-line) !important; }
html.sp-dark .sp-linkbar-item{ color:var(--sp-ink) !important; }

/* ---------- формы ---------- */
html.sp-dark .form-control,
html.sp-dark input[type="text"],
html.sp-dark input[type="email"],
html.sp-dark input[type="password"],
html.sp-dark input[type="number"],
html.sp-dark textarea,
html.sp-dark select{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark .form-control::placeholder{ color:var(--sp-muted) !important; }
html.sp-dark .input-group-addon{ color:var(--sp-muted) !important; }

/* ---------- кнопки ---------- */
html.sp-dark .btn-default,
html.sp-dark .btn-link{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}

/* ---------- панель конфигуратора ---------- */
html.sp-dark body.configurator-panel{ background:var(--sp-dark-page) !important; }
html.sp-dark body.configurator-panel .panel,
html.sp-dark body.configurator-panel #config-orders__list tbody tr,
html.sp-dark body.configurator-panel #config-panel > .panel-footer{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
}
html.sp-dark body.configurator-panel #config-orders__filter{
  background:var(--sp-dark-raise) !important;
}
html.sp-dark body.configurator-panel .sp-timer{ color:var(--sp-ink) !important; }

/* ---------- баланс и карточки кабинета ---------- */
html.sp-dark .sp-balance-card,
html.sp-dark .sp-balance-main{ background:var(--sp-dark-card) !important; }
html.sp-dark .sp-balance-num{ color:var(--sp-purple) !important; }

/* ---------- липкая плашка переключения темы ---------- */
html.sp-dark #sp-theme-fab{
  background:var(--sp-dark-raise); border-color:var(--sp-line); color:var(--sp-ink);
  box-shadow:0 6px 20px rgba(0,0,0,.55);
}
html.sp-dark #sp-theme-fab:hover{ box-shadow:0 8px 26px rgba(0,0,0,.7); }

/* ---------- мелочи, которые иначе слепят ---------- */
html.sp-dark .alert-info{ background:var(--sp-dark-raise) !important; color:var(--sp-ink) !important; }
html.sp-dark img[src*="logo" i]{ filter:none; }
html.sp-dark .modal-backdrop.in{ opacity:.7; }


/* ======================================================================
   ВТОРОЙ ПРОХОД: личный кабинет и панель
   ====================================================================== */

/* ---------- личный кабинет ---------- */
html.sp-dark body[class*="account-"] .sp-acc-sidebar-group .list-group-item,
html.sp-dark body[class*="affiliate-"] .sp-acc-sidebar-group .list-group-item{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark body[class*="account-"] .sp-acc-sidebar-group .list-group-item:hover,
html.sp-dark body[class*="affiliate-"] .sp-acc-sidebar-group .list-group-item:hover{
  background:var(--sp-dark-raise) !important;
  color:var(--sp-purple) !important;
}

/* карточки скидок и кешбэка - были белыми плашками */
html.sp-dark .sp-discount-chip{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-line) !important;
}
html.sp-dark .sp-discount-chip span{ color:var(--sp-muted) !important; }

html.sp-dark .breadcrumb{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
}
html.sp-dark .breadcrumb a,
html.sp-dark .breadcrumb li{ color:var(--sp-ink) !important; }

/* Уведомления. Светлые пастельные подложки на тёмном светятся как фонарь,
   поэтому берём тот же оттенок, но приглушённый, а текст наоборот
   осветляем - иначе тёмный текст на тёмном фоне не читается. */
html.sp-dark .alert-danger,
html.sp-dark .alert-warning,
html.sp-dark .alert-success,
html.sp-dark .alert-info{
  border:none !important;
}
html.sp-dark .alert-danger{ background:#3A1B22 !important; color:#FFB3B9 !important; }
html.sp-dark .alert-warning{ background:#3A2E17 !important; color:#F7D488 !important; }
html.sp-dark .alert-success{ background:#16301A !important; color:#8FE08A !important; }
html.sp-dark .alert-info{ background:var(--sp-dark-raise) !important; color:var(--sp-ink) !important; }

/* ======================================================================
   ПАНЕЛЬ УПРАВЛЕНИЯ - отдельное оформление, а не просто тёмный фон
   ======================================================================
   Панель - рабочий экран, за ним сидят во время эфира. Поэтому здесь не
   просто гасим белое, а строим свою иерархию: страница почти чёрная,
   карточки чуть светлее, активные элементы - фиолетовые. Отдельно поднят
   контраст у таймера и статусов: их читают краем глаза.
   ====================================================================== */

html.sp-dark body.configurator-panel{ background:#0D0B16 !important; }

html.sp-dark body.configurator-panel .panel{
  background:#191527 !important;
  border:1px solid #2A2440 !important;
}
html.sp-dark body.configurator-panel .panel-heading{
  background:#1F1A31 !important;
  border-bottom:1px solid #2A2440 !important;
}

/* строки заказов: карточка внутри карточки - на тон выше фона */
html.sp-dark body.configurator-panel #config-orders__list tbody tr{
  background:#221C36 !important;
  border-color:#2F2848 !important;
}
html.sp-dark body.configurator-panel #config-orders__list tbody tr:hover{
  background:#282139 !important;
}
html.sp-dark body.configurator-panel .sp-timer{
  color:#EDEBF5 !important; font-variant-numeric:tabular-nums;
}
html.sp-dark body.configurator-panel .sp-ch{ color:var(--sp-ink) !important; }
html.sp-dark body.configurator-panel .badge{ background:#332B4D !important; color:#C9C2E8 !important; }

/* статусы читаются краем глаза - оставляем цветными, но приглушаем фон */
html.sp-dark body.configurator-panel .label-success{ background:#1B4023 !important; color:#7BE07A !important; }
html.sp-dark body.configurator-panel .label-default{ background:#2E2842 !important; color:#A9A2C6 !important; }

/* фильтр и поля */
html.sp-dark body.configurator-panel #config-orders__filter{ background:#1F1A31 !important; }
html.sp-dark body.configurator-panel .form-control{
  background:#241E39 !important; border-color:#332B4D !important; color:var(--sp-ink) !important;
}

/* меню действий */
html.sp-dark body.configurator-panel .sp-actions__menu{
  background:#241E39 !important; border-color:#332B4D !important;
}
html.sp-dark body.configurator-panel .sp-actions__menu .btn__action-order,
html.sp-dark body.configurator-panel .sp-actions__support{ color:var(--sp-ink) !important; }
html.sp-dark body.configurator-panel .sp-actions__menu li > *:hover{ background:#2E2645 !important; }
html.sp-dark body.configurator-panel .sp-actions__sep{ background:#332B4D !important; }

/* слайдеры и кнопка заказа - акцент остаётся фирменным */
html.sp-dark body.configurator-panel .noUi-target{
  background:#2A2440 !important; border-color:#332B4D !important;
}
html.sp-dark body.configurator-panel #config-panel__button{
  background:var(--sp-purple) !important; color:#12101F !important; font-weight:800;
}

/* липкий подвал с ценой - он поверх формы, поэтому непрозрачный */
html.sp-dark body.configurator-panel #config-panel > .panel-footer{
  background:#1F1A31 !important;
  border-color:#332B4D !important;
  box-shadow:0 -6px 18px -10px #000 !important;
}

/* выпадающий список гео */
html.sp-dark body.configurator-panel .select2-container .select2-selection--single,
html.sp-dark .select2-dropdown{
  background:#241E39 !important; border-color:#332B4D !important; color:var(--sp-ink) !important;
}
html.sp-dark .select2-results__option{ background:#241E39 !important; color:var(--sp-ink) !important; }
html.sp-dark .select2-results__option--highlighted{ background:var(--sp-purple) !important; color:#12101F !important; }


/* ======================================================================
   ПАНЕЛЬ: левая колонка формы
   ======================================================================
   Список ниже не выдуман - он собран из самого header-only.css: взяты все
   правила, у которых селектор относится к body.configurator-panel и внутри
   задан светлый фон (#fff, var(--sp-bg) и родня). Поэтому покрытие полное,
   а не "по памяти": какие поверхности были светлыми, те и перекрашены.
   ====================================================================== */

/* поверхности: карточки, врезки, инфоблоки */
html.sp-dark body.configurator-panel #config-orders.panel,
html.sp-dark body.configurator-panel #config-orders__filter.well,
html.sp-dark body.configurator-panel #config-alerts .alert,
html.sp-dark body.configurator-panel #config-block-channel .well.well-sm,
html.sp-dark body.configurator-panel .modal-order-edit .well.well-sm,
html.sp-dark body.configurator-panel .sp-extra-bar,
html.sp-dark body.configurator-panel .sp-suggest,
html.sp-dark body.configurator-panel #config-panel .form-group:has(> #config-subscribe){
  background:#221C36 !important;
  border-color:#2F2848 !important;
  color:var(--sp-ink) !important;
}

/* органы управления: сегменты, пресеты, чипы, кнопки в форме */
html.sp-dark body.configurator-panel #config-type .btn,
html.sp-dark body.configurator-panel .panel-body .btn-group:not(#config-type) .btn,
html.sp-dark body.configurator-panel .sp-preset,
html.sp-dark body.configurator-panel .sp-chip,
html.sp-dark body.configurator-panel .sp-ch-save,
html.sp-dark body.configurator-panel #config-block-channel .btn-block,
html.sp-dark body.configurator-panel .modal-order-edit .btn-group .btn,
html.sp-dark body.configurator-panel .modal-order-edit .modal-footer .btn:not(.btn-primary),
html.sp-dark body.configurator-panel #config-orders__list .sp-actions__toggle{
  background:#2A2440 !important;
  border-color:#3A3255 !important;
  color:var(--sp-ink) !important;
}

/* наведение и активное состояние - на тон светлее, чтобы отклик читался */
html.sp-dark body.configurator-panel .sp-preset:hover,
html.sp-dark body.configurator-panel .sp-ch-save:hover,
html.sp-dark body.configurator-panel #config-orders__list .sp-actions__menu > li > button:hover{
  background:#352D4E !important;
  color:var(--sp-ink) !important;
}
html.sp-dark body.configurator-panel #config-type .btn.active,
html.sp-dark body.configurator-panel .btn-group .btn.active,
html.sp-dark body.configurator-panel .sp-preset.active{
  background:var(--sp-purple) !important;
  border-color:var(--sp-purple) !important;
  color:#12101F !important;
}

/* поля ввода и значки внутри них */
html.sp-dark body.configurator-panel #config-orders__filter .input-group-addon,
html.sp-dark body.configurator-panel .modal-order-edit .input-group-addon{
  background:transparent !important;
  color:var(--sp-muted) !important;
}
html.sp-dark body.configurator-panel .sp-coupon .form-control,
html.sp-dark body.configurator-panel .modal-order-edit .selectize-input .item{
  background:#241E39 !important;
  border-color:#332B4D !important;
  color:var(--sp-ink) !important;
}

/* стрелка выпадающего меню действий - должна совпадать с его фоном */
html.sp-dark body.configurator-panel #config-orders__list .sp-actions__menu::before{
  background:#241E39 !important;
  border-color:#332B4D !important;
}

/* ползунок слайдера: белый кружок на тёмной дорожке читается лучше всего,
   поэтому его не трогаем - только обводку приглушаем */
html.sp-dark body.configurator-panel .noUi-handle{
  border-color:#3A3255 !important;
  box-shadow:none !important;
}

/* модалка редактирования целиком */
html.sp-dark body.configurator-panel .modal-order-edit .modal-content{
  background:#191527 !important;
  border-color:#2A2440 !important;
}
html.sp-dark body.configurator-panel .modal-order-edit .modal-header,
html.sp-dark body.configurator-panel .modal-order-edit .modal-footer{
  background:#1F1A31 !important;
  border-color:#2A2440 !important;
}


/* ======================================================================
   ТРЕТИЙ ПРОХОД: правки по найденным на живом сайте местам
   ======================================================================
   Главная причина, по которой часть блоков оставалась светлой: в светлой
   теме они заданы через идентификаторы (#top, #config-orders__list,
   #config-panel), а мои правила были на классах. По правилам CSS
   идентификатор сильнее любого числа классов, поэтому светлое побеждало.
   Ниже те же селекторы повторены с id и префиксом html.sp-dark.
   ====================================================================== */

/* --- выпадашки верхней полосы: были белыми, текст на них не читался --- */
html.sp-dark #top .dropdown-menu{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
}
html.sp-dark #top .dropdown-menu a{ color:var(--sp-ink) !important; }
html.sp-dark #top .dropdown-menu a:hover{ background:var(--sp-dark-raise) !important; }
html.sp-dark #top .sp-balance-line2 a{ color:var(--sp-purple) !important; }
html.sp-dark #top .dropdown-menu > li{ border-color:var(--sp-line) !important; }

/* --- крошки и белая полоса под шапкой --- */
html.sp-dark #content .breadcrumb,
html.sp-dark .breadcrumb,
html.sp-dark ul.breadcrumb{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
}
html.sp-dark #content .breadcrumb a,
html.sp-dark .breadcrumb a,
html.sp-dark .breadcrumb li,
html.sp-dark .breadcrumb li + li::before{ color:var(--sp-ink) !important; }
html.sp-dark #content{ background:transparent !important; }

/* --- панель: карточки формы и списка заданы через id --- */
html.sp-dark body.configurator-panel #config-orders.panel{ background:#191527 !important; }
html.sp-dark body.configurator-panel #config-panel.panel,
html.sp-dark body.configurator-panel #config-panel .panel-body,
html.sp-dark body.configurator-panel #config-orders .panel-body{
  background:#191527 !important;
}
html.sp-dark body.configurator-panel #config-panel .control-label,
html.sp-dark body.configurator-panel #config-panel label{ color:var(--sp-muted) !important; }
html.sp-dark body.configurator-panel .sp-pill--pur{
  background:#2E2547 !important; color:#C9BCF5 !important;
}
html.sp-dark body.configurator-panel #config-panel .form-group{ background:transparent !important; }
html.sp-dark body.configurator-panel #config-block-channel .btn-block:hover{ background:#2A2340 !important; }

/* --- меню действий в списке заказов: тоже через id --- */
html.sp-dark body.configurator-panel #config-orders__list .sp-actions__menu{
  background:#241E39 !important;
  border-color:#332B4D !important;
  box-shadow:0 10px 28px rgba(0,0,0,.55) !important;
}
html.sp-dark body.configurator-panel #config-orders__list .sp-actions__menu .btn__action-order,
html.sp-dark body.configurator-panel #config-orders__list .sp-actions__support{
  color:var(--sp-ink) !important;
}
html.sp-dark body.configurator-panel #config-orders__list .sp-actions__menu li > *:hover{
  background:#332B4D !important;
}
html.sp-dark body.configurator-panel #config-orders__list .sp-actions__sep{ background:#332B4D !important; }
html.sp-dark body.configurator-panel #config-orders__list .sp-actions__menu::before{
  background:#241E39 !important; border-color:#332B4D !important;
}

/* цветные ярлыки статусов заданы через id - приглушаем их подложки */
html.sp-dark body.configurator-panel #config-orders__list .label-success{ background:#1B4023 !important; color:#7BE07A !important; }
html.sp-dark body.configurator-panel #config-orders__list .label-warning{ background:#3A2E17 !important; color:#F7D488 !important; }
html.sp-dark body.configurator-panel #config-orders__list .label-danger { background:#3A1B22 !important; color:#FFB3B9 !important; }
html.sp-dark body.configurator-panel #config-orders__list .label-info   { background:#1B2C3F !important; color:#9CC6F0 !important; }
html.sp-dark body.configurator-panel #config-orders__list .label-default{ background:#2E2842 !important; color:#A9A2C6 !important; }
html.sp-dark body.configurator-panel #config-orders__list tbody tr:hover{ background:#282139 !important; }

/* подсказки выбора канала */
html.sp-dark body.configurator-panel .sp-suggest__row:hover{ background:#2A2340 !important; }
html.sp-dark body.configurator-panel .sp-chip--more{ background:#2E2547 !important; color:#C9BCF5 !important; }


/* ======================================================================
   ЧЕТВЁРТЫЙ ПРОХОД: каталог, карточки товара и плашки-уведомления
   ======================================================================
   На страницах каталога вышло худшее сочетание: контейнеры остались
   белыми, а цвета текста уже перевернулись - получились бледные надписи
   на белом. Значит красить нужно не текст, а поверхности. Ниже покрыты
   типовые контейнеры OpenCart и карточки товара; фон снимаем с обёрток,
   чтобы сквозь них был виден тёмный фон страницы.
   ====================================================================== */

/* --- обёртки: у них не должно быть своего фона --- */
html.sp-dark #content,
html.sp-dark #content > .row,
html.sp-dark .container,
html.sp-dark .container-fluid,
html.sp-dark .row,
html.sp-dark [class^="col-"],
html.sp-dark [class*=" col-"]{
  background-color:transparent !important;
}

/* --- карточки товара в списке и сетке --- */
html.sp-dark .product-thumb,
html.sp-dark .product-list .product-thumb,
html.sp-dark .product-grid .product-thumb,
html.sp-dark .product-layout,
html.sp-dark .thumbnail,
html.sp-dark .caption{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark .product-thumb h4 a,
html.sp-dark .product-thumb .caption a{ color:var(--sp-ink) !important; }
html.sp-dark .product-thumb .price{ color:var(--sp-ink) !important; }
html.sp-dark .product-thumb .price-old{ color:var(--sp-muted) !important; }
html.sp-dark .product-thumb .price-new{ color:var(--sp-purple) !important; }

/* --- боковая колонка фильтра --- */
html.sp-dark #column-left,
html.sp-dark #column-right,
html.sp-dark #ocfilter,
html.sp-dark .list-group{
  background:transparent !important;
}
html.sp-dark #column-left .list-group-item,
html.sp-dark #column-right .list-group-item,
html.sp-dark #ocfilter .list-group-item{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}

/* --- панель инструментов списка (список/сетка/сортировка) --- */
html.sp-dark .btn-group > .btn-default,
html.sp-dark #input-sort,
html.sp-dark #input-limit,
html.sp-dark .pagination > li > a,
html.sp-dark .pagination > li > span{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark .pagination > .active > span{ background:var(--sp-purple) !important; color:#12101F !important; }

/* --- вкладки описания товара --- */
html.sp-dark .nav-tabs > li > a{
  background:var(--sp-dark-raise) !important; border-color:var(--sp-line) !important; color:var(--sp-ink) !important;
}
html.sp-dark .nav-tabs > li.active > a{ background:var(--sp-dark-card) !important; color:var(--sp-purple) !important; }
html.sp-dark .tab-content{ background:var(--sp-dark-card) !important; }

/* --- плашки-уведомления над каталогом ---------------------------------
   Это те же .alert, но тема задаёт им фон через свои селекторы, поэтому
   правил из первого прохода не хватило. Здесь и общий .alert, и вариант
   с иконкой в отдельном блоке (.alert-message), который используется на
   витрине и в панели. Текст осветляем принудительно: у ссылок внутри
   плашки свой цвет, и на тёмном фоне он тонул. */
html.sp-dark #content .alert,
html.sp-dark .alert,
html.sp-dark .alert-message,
html.sp-dark .sp-notice{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark #content .alert a,
html.sp-dark .alert a{ color:var(--sp-purple) !important; }
html.sp-dark .alert-message .alert-icon{ background:var(--sp-dark-raise) !important; }
html.sp-dark #content .alert-danger{ background:#3A1B22 !important; color:#FFB3B9 !important; }
html.sp-dark #content .alert-warning{ background:#3A2E17 !important; color:#F7D488 !important; }
html.sp-dark #content .alert-success{ background:#16301A !important; color:#8FE08A !important; }

/* заголовки и описания товара */
html.sp-dark #content h1,
html.sp-dark #content h2,
html.sp-dark #content h3,
html.sp-dark #content h4{ color:var(--sp-ink) !important; }
html.sp-dark #content p,
html.sp-dark #content li,
html.sp-dark .product-thumb .description{ color:var(--sp-muted) !important; }


/* ======================================================================
   КАРТОЧКА ТОВАРА
   ======================================================================
   Обе колонки заданы как .sp-product-left / .sp-product-right с
   background:#fff, вкладки, характеристики и список похожих товаров -
   своими светлыми плашками. Переводим их на тёмные поверхности той же
   иерархии, что и везде: карточка темнее фона, вложенные плашки светлее
   карточки. Цветные бейджи (гарантия, быстрая доставка) оставляем
   цветными, но приглушаем подложку - на тёмном пастель слепит.
   ====================================================================== */

html.sp-dark .sp-product-left,
html.sp-dark .sp-product-right{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.45) !important;
}

html.sp-dark .sp-product-title-left,
html.sp-dark .sp-product-meta,
html.sp-dark .sp-product-gallery{ color:var(--sp-ink) !important; }

/* плашки доверия: анонимно / безопасно / поддержка */
html.sp-dark .sp-product-trust-row > *{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}

/* вкладка описания и таблица фактов */
html.sp-dark .nav-tabs,
html.sp-dark .nav-tabs > li > a{
  background:transparent !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark .nav-tabs > li.active > a{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark .tab-content{ background:transparent !important; color:var(--sp-ink) !important; }
html.sp-dark .sp-desc-facts,
html.sp-dark .sp-desc-fact,
html.sp-dark .sp-desc-link{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark .sp-desc-link a{ color:var(--sp-purple) !important; }

/* уведомления в правой колонке - заданы своими светлыми фонами */
html.sp-dark .sp-product-right .alert-warning:not(.list-unstyled){
  background:#3A2E17 !important; color:#F7D488 !important;
}
html.sp-dark .sp-product-right .alert-danger{
  background:#3A1B22 !important; color:#FFB3B9 !important;
}

/* поля заказа и селекты в правой колонке */
html.sp-dark .sp-product-right .form-control,
html.sp-dark .sp-product-right select,
html.sp-dark .sp-product-right input{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}

/* похожие товары - строки списка */
html.sp-dark #content .table > tbody > tr,
html.sp-dark #content .product-thumb,
html.sp-dark #content .product-list .product-thumb{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
}
html.sp-dark #content .product-thumb h4 a,
html.sp-dark #content .product-thumb .caption a{ color:var(--sp-ink) !important; }
html.sp-dark #content .price{ color:var(--sp-ink) !important; }
html.sp-dark #content .price-old{ color:var(--sp-muted) !important; }

/* верхние уведомления над карточкой (важно / инфо) */
html.sp-dark #content > .alert,
html.sp-dark .alert-dismissible{
  background:var(--sp-dark-card) !important;
  color:var(--sp-ink) !important;
  border-color:var(--sp-line) !important;
}


/* ======================================================================
   ПЯТЫЙ ПРОХОД: блоки "с этим ищут" и "последние товары"
   ======================================================================
   Оба блока задают фон карточек жёстко белым (#fff !important), поэтому
   переворот переменных их не затронул: вышли белые карточки с уже
   осветлённым текстом. Красим сами поверхности.
   ====================================================================== */

/* --- "с этим ищут": чипы-ссылки --- */
html.sp-dark .sp-tags-also-title{ color:var(--sp-ink) !important; }
html.sp-dark .sp-tags-row a{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark .sp-tags-row a:hover{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-purple) !important;
  color:var(--sp-purple) !important;
}

/* --- "последние товары" --- */
html.sp-dark .sp-news-block > h3{ color:var(--sp-ink) !important; }
html.sp-dark .sp-news-block .product-thumb{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
}
html.sp-dark .sp-news-block .product-thumb > div{ background:transparent !important; }
html.sp-dark .sp-news-block h4 a{ color:var(--sp-ink) !important; }
html.sp-dark .sp-news-block .product-thumb p,
html.sp-dark .sp-news-block .product-thumb small,
html.sp-dark .sp-news-block .product-thumb span{ color:var(--sp-muted) !important; }
html.sp-dark .sp-news-icon{ background:var(--sp-dark-raise) !important; }

/* ярлык "без докрутки" в углу карточки */
html.sp-dark .sp-news-block .label,
html.sp-dark .sp-news-block .badge{
  background:var(--sp-dark-raise) !important; color:var(--sp-muted) !important;
}


/* ======================================================================
   ШЕСТОЙ ПРОХОД: крошки, поиск, шапка, карточки sp-card, автозаполнение
   ====================================================================== */

/* --- хлебные крошки: это не .breadcrumb, а свой блок .sp-bc-sticky с
       полупрозрачным белым фоном - потому прошлые правила мимо --- */
html.sp-dark .sp-bc-sticky{
  background:rgba(30,26,49,.92) !important;
  border-color:var(--sp-line) !important;
}
html.sp-dark .sp-bc-sticky a{ color:var(--sp-muted) !important; }
html.sp-dark .sp-bc-sticky a:hover{ color:var(--sp-purple) !important; }
html.sp-dark .sp-bc-sticky .sp-bc-cur{ color:var(--sp-ink) !important; }
html.sp-dark .sp-bc-sep{ color:var(--sp-line) !important; }

/* --- поиск в шапке: фон задан на #search, поэтому нужен тот же id --- */
html.sp-dark #search.input-group{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-line) !important;
}
html.sp-dark #search .form-control{ color:var(--sp-ink) !important; }
html.sp-dark #search .form-control::placeholder{ color:var(--sp-muted) !important; }

/* --- шапка: убираем лишнюю плашку вокруг логотипа ---------------------
   В светлой теме header .container - белая подложка со светлой линией
   снизу. На тёмном она читалась как отдельная коробка вокруг логотипа.
   Делаем фон прозрачным, оставляем только разделительную линию. */
html.sp-dark header .container{
  background:transparent !important;
  box-shadow:0 1px 0 var(--sp-line) !important;
}

/* --- карточки sp-card (партнёрская программа и не только) -------------
   В светлой теме они описаны внутри body.configurator-panel, но сама
   разметка используется шире - на партнёрской странице фон прилетает из
   темы. Поэтому правила без привязки к панели. */
html.sp-dark .sp-card,
html.sp-dark .sp-card--pur,
html.sp-dark .sp-card--grn{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark .sp-card--pur{ background:#231D3A !important; }
html.sp-dark .sp-card--grn{ background:#17281C !important; }
html.sp-dark .sp-card h1,
html.sp-dark .sp-card h2,
html.sp-dark .sp-card h3,
html.sp-dark .sp-card h4{ color:var(--sp-ink) !important; }

/* --- партнёрская страница целиком --- */
html.sp-dark body[class*="affiliate-"] .well,
html.sp-dark body[class*="affiliate-"] .panel,
html.sp-dark body[class*="affiliate-"] fieldset,
html.sp-dark body[class*="affiliate-"] .form-horizontal{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark body[class*="affiliate-"] legend{
  color:var(--sp-ink) !important; border-color:var(--sp-line) !important;
}

/* --- жёлтое поле пароля -----------------------------------------------
   Это не наш стиль: так браузер подсвечивает автозаполнение. Обычным
   background его не перебить, поэтому подменяем внутренней тенью - приём
   стандартный для тёмных тем. */
html.sp-dark input:-webkit-autofill,
html.sp-dark input:-webkit-autofill:hover,
html.sp-dark input:-webkit-autofill:focus,
html.sp-dark textarea:-webkit-autofill,
html.sp-dark select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--sp-dark-raise) inset !important;
  box-shadow:0 0 0 1000px var(--sp-dark-raise) inset !important;
  -webkit-text-fill-color:var(--sp-ink) !important;
  caret-color:var(--sp-ink);
}
html.sp-dark input:autofill{
  background:var(--sp-dark-raise) !important; color:var(--sp-ink) !important;
}

/* --- промо-полоса --- */
html.sp-dark .sp-promo{
  background:var(--sp-dark-card) !important; border-color:var(--sp-line) !important;
}


/* ======================================================================
   СЕДЬМОЙ ПРОХОД: слишком яркие кнопки
   ======================================================================
   Фирменный фиолетовый и пастельные подложки рассчитаны на белый фон. На
   тёмном они превращаются в световые пятна: глаз цепляется за кнопку
   поиска и за ряд ссылок вместо содержимого. Приглушаем фон, а читаемость
   держим за счёт светлого текста - контраст остаётся, яркость уходит.
   ====================================================================== */

/* --- кнопка поиска и корзина --- */
html.sp-dark #search .input-group-btn .btn{
  background-color:#3B3160 !important;
}
html.sp-dark #search .input-group-btn .btn:hover{
  background-color:#4A3E77 !important;
}
html.sp-dark #cart > .btn,
html.sp-dark #cart .btn-inverse,
html.sp-dark #cart .btn{
  background:#3B3160 !important; border-color:#3B3160 !important; color:var(--sp-ink) !important;
}
html.sp-dark #cart > .btn:hover{ background:#4A3E77 !important; }

/* --- ряд ссылок под меню: пастель гасим, цвет оставляем в тексте --- */
html.sp-dark .sp-linkbar-pill-api{ background:#241E3C !important; color:#B4A7F5 !important; }
html.sp-dark .sp-linkbar-pill-support{ background:#15302A !important; color:#6FD9BC !important; }
html.sp-dark .sp-linkbar-pill-news{ background:#152740 !important; color:#8FB8F0 !important; }
html.sp-dark .sp-linkbar-pill-livechat{ background:#332714 !important; color:#E8B667 !important; }
html.sp-dark .sp-linkbar-pill{ border-color:transparent !important; }
html.sp-dark .sp-linkbar-divider{ background:var(--sp-line) !important; }