/* ============================================================
   Тёмная тема лендинга OkRouter.ru

   Не «светлая с выключенным светом». Задача — чтобы ночью
   страница читалась лучше дневной, а не просто темнее.

   Три решения, на которых всё держится:

   1. Фон не серый, а чернильный с фиолетовым подтоном. Марка
      живёт даже в тенях, страница не выглядит выцветшей.
   2. Карточку на тёмном фоне не видно по тени — тень некуда
      падать. Поэтому объём даёт светлая кромка сверху: так
      свет ложится на настоящую поверхность.
   3. Фирменные индиго-блоки не гасим. На светлой странице они
      были тёмными пятнами, а здесь становятся источниками
      света: остаются насыщенными и получают свечение.

   Подключается последней, после styles.css и landing.css.
   Ни одна строка существующих файлов не тронута.
   ============================================================ */

html[data-theme="dark"]{
  color-scheme:dark;

  /* --- Марка ---------------------------------------------- */
  /* На тёмном фоне индиго нужно поднять: исходный #4A38DC
     на чернильном читается как грязно-синий. */
  --indigo-800:#241A6E;
  --indigo-700:#33269C;
  --indigo-600:#4A38DC;   /* заливка крупных кнопок */
  --indigo-500:#6553F0;
  --indigo-400:#8E7DFF;   /* основной акцент: ссылки, значки */
  --indigo-300:#B3A7FF;
  --indigo-100:#1E1938;   /* была почти белая подложка — стала тёмной */
  --indigo-50:#15122A;
  --magenta:#D98BE6;

  /* --- Нейтральные ---------------------------------------- */
  --bg:#08070C;
  --surface:#100F17;
  --ink:#F4F3F8;
  --ink-2:#C7C4D2;
  --muted:#928EA1;
  --muted-2:#726E80;
  --border:#232130;
  --border-2:#1A1823;

  /* --- Пастель -------------------------------------------- */
  /* Светлые плашки переворачиваются: подложка уходит в тень,
     а краска текста становится яркой. Смысл цвета сохраняется. */
  --mint:#0E2A1E;      --mint-fg:#5FD3A0;
  --pink:#2C1622;      --pink-fg:#F292BF;
  --yellow:#2A2111;    --yellow-fg:#EBC161;
  --blue:#0F2131;      --blue-fg:#74B8ED;
  --peach:#2C1C13;     --peach-fg:#ED9C66;
  --lilac:#1D1832;     --lilac-fg:#B0A0FF;

  /* --- Тени ----------------------------------------------- */
  /* На тёмном тень не читается. Работают внутренняя кромка
     сверху и плотная тень снизу, которая отделяет от фона. */
  --shadow-sm:inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px rgba(0,0,0,.5);
  --shadow-md:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.6);
  --shadow-lg:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 80px rgba(0,0,0,.7);
  --shadow-indigo:0 12px 36px rgba(91,75,232,.45);
}

/* ============================================================
   Основа
   ============================================================ */

html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}

/* Общий приём темы: любая поверхность получает светлую кромку
   сверху. Ниже она применяется точечно, чтобы не задеть блоки,
   у которых свой фирменный фон. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:var(--shadow-sm);
}

/* Плитки сервисов в блоке «две сети» намеренно оставлены светлыми.
   У каждой свой пастельный фон под логотип, и он там не для красоты:
   у МАКСа и ChatGPT знак нарисован тёмным, на тёмной подложке он
   просто исчезает. Приглушаем плитку целиком, чтобы восемь светлых
   квадратов не били по глазам, но знаки остались читаемыми. */
html[data-theme="dark"] .tile{
  background:var(--tile-bg);
  filter:brightness(.88) saturate(.96);
  border-color:rgba(255,255,255,.08);
}

/* ============================================================
   Кнопка смены оформления
   ============================================================ */

.theme-switch{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:transparent;color:var(--ink-2);cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.theme-switch svg{width:20px;height:20px;display:block;transition:transform .32s var(--ease-out)}
.theme-switch:hover{color:var(--ink);border-color:var(--muted-2)}
.theme-switch:active svg{transform:scale(.92)}
html[data-theme="dark"] .theme-switch svg{transform:rotate(180deg)}
html[data-theme="dark"] .theme-switch:active svg{transform:rotate(180deg) scale(.92)}
@media (prefers-reduced-motion:reduce){.theme-switch svg{transition:none}}

/* ============================================================
   Поверхности, у которых был свой зашитый белый фон

   Их не покрывают переменные, поэтому каждая перекрашивается
   отдельно — и осмысленно, а не «залить тёмным».
   ============================================================ */

/* Шапка. Стекло остаётся стеклом, но тёмным: сквозь него
   должно просвечивать то, что под ним, иначе оно мёртвое. */
html[data-theme="dark"] .header__bar{
  background:rgba(16,15,23,.72);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 2px 14px rgba(0,0,0,.5);
}
html[data-theme="dark"] .header.is-scrolled .header__bar{
  background:rgba(16,15,23,.9);
  box-shadow:0 12px 34px rgba(0,0,0,.6);
}

/* Плашки сервисов: «ChatGPT», «Xbox», «PlayStation».
   Белая пилюля на чернильном фоне бьёт по глазам, поэтому
   поверхность приглушается, а держит её контур. */
html[data-theme="dark"] .chip{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.10);
  color:var(--ink-2);
}

/* Переключатель периодов и переключатель в блоке «включён». */
html[data-theme="dark"] .periods,
html[data-theme="dark"] .switcher{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.10);
  box-shadow:none;
}
html[data-theme="dark"] .switcher__thumb{
  background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 4px 14px rgba(0,0,0,.5);
}

/* Подвал. Ровно на тон светлее фона: он завершает страницу,
   а не начинает новую. */
html[data-theme="dark"] .footer{
  background:rgba(255,255,255,.02);
  border-top-color:var(--border);
}

/* Иллюстрации шагов и сцен: светло-серые подложки под
   картинками. Уходят в тень, но остаются отделимыми от фона. */
html[data-theme="dark"] .step__art,
html[data-theme="dark"] .setup,
html[data-theme="dark"] .setup__bar,
html[data-theme="dark"] .cablescene__chip,
html[data-theme="dark"] .device__panel{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.09);
}
html[data-theme="dark"] .setup__stamp{
  background:var(--surface);
  border-color:rgba(255,255,255,.12);
  color:var(--ink-2);
}

/* ============================================================
   Макет iPhone в первом экране

   Это снимок настоящего экрана «Настройки — Wi-Fi». Ночью
   человек видит его тёмным, поэтому и здесь он тёмный:
   светлый прямоугольник в тёмной странице выглядел бы
   вырезкой из чужого макета.

   Цвета взяты из системной тёмной палитры iOS, а не подобраны
   на глаз: подложка #000, группы #1C1C1E, разделитель
   rgba(84,84,88,.6), вторичный текст #98989D, синий #0A84FF,
   зелёный переключатель #30D158.
   ============================================================ */

html[data-theme="dark"] .iphone__screen{background:#000}
html[data-theme="dark"] .ios-group{background:#1C1C1E}
html[data-theme="dark"] .ios-row__label{color:#F2F2F7}
html[data-theme="dark"] .ios-sep{background:rgba(84,84,88,.6)}
html[data-theme="dark"] .ios-switch{background:#30D158}
html[data-theme="dark"] .ios-net__check{color:#0A84FF}
html[data-theme="dark"] .ios-net:active,
html[data-theme="dark"] .ios-net.is-pressed{background:#2C2C2E}
html[data-theme="dark"] .ios-notif{background:rgba(44,44,46,.92); color:#F2F2F7}
html[data-theme="dark"] .ios-title,
html[data-theme="dark"] .ios-status__time{color:#F2F2F7}
html[data-theme="dark"] .ios-status__icons{color:#F2F2F7}
html[data-theme="dark"] .ios-caption{color:#98989D}
html[data-theme="dark"] .ios-island{background:#000}

/* Названия сетей и подписи внутри макета — по системной
   тёмной палитре iOS, иначе строки читаются как выключенные. */
html[data-theme="dark"] .ios-net__name{color:#F2F2F7}
html[data-theme="dark"] .ios-net__name em{color:#98989D}
html[data-theme="dark"] .ios-net[data-net="alisa"] .ios-net__name em{color:#9C8BFF}
html[data-theme="dark"] .ios-net--other .ios-net__name{color:#AEAEB2;opacity:.9}
html[data-theme="dark"] .ios-net svg{color:#98989D}

/* Градиентный заголовок собран из цветов средней яркости.
   На белом это читалось, на чернильном начало фразы уходило
   в серый — поэтому здесь градиент светлее ровно настолько,
   чтобы «Без» весило столько же, сколько «ограничений». */
html[data-theme="dark"] .grad{filter:brightness(1.34) saturate(1.12)}
html[data-theme="dark"] .grad.is-pulse{filter:brightness(1.44) saturate(1.7)}

/* ============================================================
   Секции с собственными светлыми градиентами

   Их не видно по цвету фона: он задан картинкой-градиентом.
   Каждая переписана так, чтобы сохранился её смысл —
   подкрашенная секция остаётся подкрашенной, зелёная плашка
   остаётся зелёной, просто теперь это тень, а не свет.
   ============================================================ */

/* Подкрашенные секции: сиреневый отсвет сверху вместо
   сиреневой заливки. Ритм страницы сохраняется. */
html[data-theme="dark"] .section--tint{
  background:linear-gradient(180deg,rgba(110,92,240,.13),rgba(8,7,12,0) 78%);
}

/* Иллюстрации карточек комфорта. */
html[data-theme="dark"] .comfort-card__art{
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
}

/* Плашка «Банки и Госуслуги работают как обычно» — зелёная
   по смыслу, поэтому и в темноте зелёная, только приглушённо. */
html[data-theme="dark"] .bankok{
  background:linear-gradient(135deg,rgba(30,122,84,.20),rgba(16,15,23,.9) 70%);
  border-color:rgba(95,211,160,.28);
  box-shadow:var(--shadow-sm);
}

/* Нижняя полоса с кнопкой: растворяется в фоне страницы,
   а не лежит на ней белым бруском. */
html[data-theme="dark"] .stickycta{
  background:linear-gradient(180deg,rgba(8,7,12,0),rgba(8,7,12,.94) 40%);
}

/* Остатки макета iPhone: строка статуса, полоска «домой»,
   уведомление. Все они были почти чёрными и на тёмном
   экране просто исчезали. */
html[data-theme="dark"] .ios-status{color:#F2F2F7}
html[data-theme="dark"] .ios-homebar{background:#F2F2F7;opacity:.5}
html[data-theme="dark"] .ios-notif__text b{color:#F2F2F7}
html[data-theme="dark"] .ios-notif__text span{color:#AEAEB2}
html[data-theme="dark"] .ios-nav{color:#0A84FF}

/* ============================================================
   Фирменный индиго в роли текста

   #4A38DC задуман для белого фона. На чернильном он даёт
   около 2.3:1 — надпись видно, но прочесть трудно. Всюду,
   где индиго работает текстом, а не заливкой, берём светлый
   оттенок той же марки.
   ============================================================ */

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .stage__note-key,
html[data-theme="dark"] .rt-tag,
html[data-theme="dark"] .co-period,
html[data-theme="dark"] .co-promotoggle,
html[data-theme="dark"] .co-ordernum,
html[data-theme="dark"] .step__num,
html[data-theme="dark"] .duo__num{
  color:var(--indigo-300);
}

/* Красный на тёмном тоже нужно поднять, иначе он читается
   как бурый и перестаёт быть тревожным. */
html[data-theme="dark"] em,
html[data-theme="dark"] .co-ship-err{color:#F0857B}

/* Тихий уровень текста поднят: в темноте страница подкрашена
   сиреневым и подсвечена свечениями, поэтому дневной серый
   на ней теряется. Проверено замером по пикселям, а не на глаз. */
html[data-theme="dark"]{
  --muted:#A6A2B5;
  --muted-2:#7F7B8E;
  --ink-2:#D2CFDB;
}

/* Свечения на фоне: в темноте они работают в полную силу и
   поднимают фон под текстом. Приглушаем, чтобы читалось
   написанное, а не подсветка. */
html[data-theme="dark"] .aurora__blob{opacity:.22}

/* Название роутера в схеме подключения было фирменным индиго
   для белого фона. */
html[data-theme="dark"] .cablescene__label--ok b,
html[data-theme="dark"] .cablem__text b{color:var(--indigo-300)}

/* Кнопка стоит рядом с бургером, а не в блоке действий:
   тот скрыт на телефоне, а тема нужна прежде всего там. */
.header__bar .theme-switch{margin-left:auto}
.header__bar .burger + .theme-switch,
.header__bar .theme-switch + .burger{margin-left:10px}
@media (min-width:900px){
  .header__bar .theme-switch{margin-left:0;order:0}
}

/* ============================================================
   Чат поддержки

   Ответ оператора приходил светлой плашкой со светлым текстом:
   на тёмной странице такое сообщение просто не прочесть.
   Своё сообщение остаётся фирменным, ответ — тёмным.
   ============================================================ */

/* В файле два разных чата с одним и тем же классом `.msg`, и поздний
   перекрывает ранний. На светлой странице это незаметно — обе плашки
   светлые. В темноте сообщение человека получало светлый фон и белый
   текст, то есть исчезало. Поэтому фон задаём явно всем трём случаям. */
html[data-theme="dark"] .msg{background:rgba(255,255,255,.07);color:var(--ink-2)}
html[data-theme="dark"] .msg--op{background:rgba(255,255,255,.07);color:var(--ink-2)}
html[data-theme="dark"] .msg--user,
html[data-theme="dark"] .msg--mine{
  background:linear-gradient(135deg,var(--indigo-500),var(--indigo-600));
  color:#fff;
}
/* Переключатель валюты в оформлении заказа. */
html[data-theme="dark"] .co-cur{background:rgba(255,255,255,.05)}

/* Плашка над заголовком первого экрана. Была белой с приглушённым
   текстом: на светлой странице это тихая деталь, на тёмной —
   единственное белое пятно, в котором ничего не прочесть. */
html[data-theme="dark"] .pill{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  color:var(--ink-2);
}

/* ============================================================
   Состояния, которых не видно в закрытом виде

   Их легко пропустить: обход страницы их не находит, потому
   что они скрыты. Каждое нужно открыть и посмотреть отдельно.
   ============================================================ */

/* Мобильное меню было белым со светлыми ссылками — то есть
   пустым белым прямоугольником. */
html[data-theme="dark"] .mobile-menu{
  background:rgba(16,15,23,.98);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 20px 50px rgba(0,0,0,.65);
}
html[data-theme="dark"] .mobile-menu a{color:var(--ink-2)}
html[data-theme="dark"] .mobile-menu a:hover{background:rgba(255,255,255,.06)}

/* Панель поддержки. Шапка остаётся фирменной — это лицо службы,
   а тело панели уходит в тёмное, иначе окно светит на всю страницу. */
html[data-theme="dark"] .helper__panel{
  background:#100F17;
  box-shadow:0 26px 70px rgba(0,0,0,.72);
}
html[data-theme="dark"] .helper__send{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
}
html[data-theme="dark"] .helper__send textarea,
html[data-theme="dark"] .helper__send input{
  background:transparent;
  color:var(--ink);
}
html[data-theme="dark"] .helper__send textarea::placeholder,
html[data-theme="dark"] .helper__send input::placeholder{color:var(--muted-2)}
html[data-theme="dark"] .helper__feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16)}

/* ============================================================
   Сцена «ваш роутер + наш роутер»

   Цвета нарисованы прямо в картинке и рассчитаны на белый лист:
   светло-серый там читался тихо. На чернильном фоне он стал
   самым светлым пятном блока и перетягивал внимание с фирменного
   роутера, хотя по смыслу должен быть тише его.

   Приглушаем целиком фильтром, а не покраской по частям: так
   сохраняются отношения внутри картинки — лампочки остаются
   светлее корпуса, а корпус светлее фона.
   ============================================================ */

html[data-theme="dark"] .cablem__ic svg,
html[data-theme="dark"] .cs-old{
  filter:brightness(.55) saturate(.8);
}

/* ============================================================
   Плитки сервисов в блоке «Всё, что вы любите»

   Плитка белеет и логотип расцветает одновременно и за одно
   время. В середине перехода получается ровно то, чего нельзя:
   серый обесцвеченный логотип на уже белом квадрате.

   Меняем порядок. Сначала оживает логотип, плитка подсвечивается
   следом — читается как «сервис заработал, и его подсветили»,
   а не как незаконченная перерисовка.
   ============================================================ */

html[data-theme="dark"] .sc-tile{transition-delay:.14s}
html[data-theme="dark"] .sc-tile__icon{
  transition-duration:.3s;
  transition-delay:0s;
}
/* Закрытый сервис не должен пропадать совсем: на тёмной плитке
   прежняя прозрачность .5 делала логотип почти невидимым. */
html[data-theme="dark"] .sc-tile.is-off .sc-tile__icon{
  filter:grayscale(1) brightness(1.05) opacity(.62);
}