/* ==========================================================================
   ВРЕМЕННЫЙ СЛОЙ СОВМЕСТИМОСТИ. Удаляется по мере перевода экранов.

   Прежняя тёмная тема жила в base.html и оттуда ушла вместе со своими
   переменными (--bg, --card, --border, --accent, --muted, --text, --success…)
   и классами (card, btn, btn-primary, text-muted, mb-6, grid-3, badge…).
   Экраны, которые ещё не переведены на систему из design.css, без этих имён
   разваливаются. Файл подключается СТРОГО ПОСЛЕ design.css и:

     · переопределяет старые переменные через токены новой системы,
       чтобы собственные <style> непереведённых страниц не остались
       с невалидными цветами;
     · даёт каждому старому классу вид из четырёх правил.

   НОВЫХ ЦВЕТОВ ЗДЕСЬ НЕТ — только переменные design.css.

   ЧЕТЫРЁМ ПРАВИЛАМ СЛОЙ НЕ ПРОТИВОРЕЧИТ:
     .card        → статичная створка --concrete БЕЗ рамки (правило 4);
     .btn/.btn-outline → белое + рамка 3px, как .is-secondary (правило 2);
     .btn-primary → чёрная заливка, как .is-primary (правило 1);
     .badge       → статичный чип на --concrete (правило 4);
     .text-muted  → --steel.
   Голубой (--sky) появляется только на hover и на выбранной вкладке платформы
   (правило 3), чёрная заливка — только у кнопок-действий.

   КОГО ЭТОТ ФАЙЛ ДЕРЖИТ (шаблоны наследуют base.html и ещё не переведены):
     lk/templates/adblock.html      — блокировка рекламы
     lk/templates/amneziawg.html    — AmneziaWG
     lk/templates/content.html      — заработок на контенте
     lk/templates/downloads.html    — приложения (в работе у агента G)
     lk/templates/ios-setup.html    — настройка iPhone
     lk/templates/support.html      — чат поддержки
     lk/templates/dashboard.html    — главная      (в работе у агента C)
     lk/templates/subscribe.html    — подписка     (в работе у агента D)
     lk/templates/balance.html      — баланс       (в работе у агента E)
     lk/templates/network.html      — рефералы     (в работе у агента F)

   СЛОЮ НЕ ПОДЧИНЯЮТСЯ (самодостаточные страницы со своим <style> и своей
   тёмной темой, design.css не подключают, трогать их незачем):
     login.html, register.html, legal.html, connect.html, app-open.html.

   Как удалять: перевели экран — вычеркнули его из списка выше; когда список
   опустеет, удалить файл и строку <link> в base.html. Проверка того, что
   ничего не забыто: .venv-dev/bin/python scripts/check_legacy_classes.py
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Мост старых переменных на токены системы.
   Одна эта секция чинит все собственные <style> непереведённых страниц.
   --danger уже определён в design.css — не переопределяем.
   -------------------------------------------------------------------------- */

:root {
  --bg:           var(--paper);
  --bg2:          var(--concrete);
  --bg-input:     var(--paper);
  --card:         var(--paper);
  --border:       var(--divider);
  --border-light: var(--divider);
  --text:         var(--ink);
  --muted:        var(--steel);
  --accent:       var(--ink);      /* был акцентный оранжевый: теперь текст/рамка */
  --accent-hover: var(--ink);
  --accent2:      var(--steel-2);
  --success:      var(--ok);
  --warning:      var(--warn);
  --info:         var(--steel-2);
}

/* --------------------------------------------------------------------------
   2. Заголовки и текстовые утилиты
   -------------------------------------------------------------------------- */

.page-title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: 18px;
}
.card-title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.card-value {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.text-muted   { color: var(--steel); }
.text-danger  { color: var(--danger); font-weight: 600; }
.text-success { color: var(--ok); font-weight: 600; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* --------------------------------------------------------------------------
   3. Отступы и раскладка (утилиты прежней темы)
   -------------------------------------------------------------------------- */

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

.flex            { display: flex; gap: var(--gap); }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-4           { gap: 16px; }

.grid   { display: grid; gap: var(--gap); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 480px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   4. .card — ПРАВИЛО 4: статичная информация, --concrete, без рамки.
   Карточка часто содержит кнопку; кнопка несёт свою рамку 3px сама,
   поэтому у контейнера рамки нет — иначе рамка обещала бы клик по фону.
   -------------------------------------------------------------------------- */

.card {
  background: var(--concrete);
  color: var(--ink);
  border: 0;
  padding: var(--pad);
}
.card + .card { margin-top: var(--gap); }
.grid > .card + .card,
.grid-2 > .card + .card,
.grid-3 > .card + .card { margin-top: 0; }

/* Инлайновые рамки прежней темы (border:2px solid var(--accent) и т.п.)
   вернули бы рамку некликабельному блоку — гасим. */
.card[style*="border"] { border: 0 !important; }

/* И инлайновые градиенты прежней темы: цветная заливка у некликабельного
   блока — прямой запрет. Статичная карточка всегда --concrete. */
.card[style*="linear-gradient"] { background: var(--concrete) !important; }

/* Карточка ключа на главной — тот же статичный блок. */
.key-card { background: var(--concrete); padding: var(--pad); }
.key-card[style*="border"] { border: 0 !important; }

/* --------------------------------------------------------------------------
   5. Кнопки. .btn/.btn-outline — вид .is-secondary, .btn-primary — .is-primary.
   Высота ≥44px даже у .btn-sm.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 11px 18px;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s linear;
}
.btn:hover  { background: var(--sky); }
.btn:active { transform: translate(2px, 2px); }
.btn[disabled],
.btn:disabled {
  background: var(--concrete);
  color: var(--steel);
  border-color: var(--steel);
  cursor: not-allowed;
  transform: none;
}

/* Вторичное кликабельное — тот же вид, что и .btn (правило 2). */
.btn-outline { background: var(--paper); color: var(--ink); border-color: var(--ink); }

/* Главное действие блока — чёрная заливка (правило 1). */
.btn-primary,
.btn-success {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover,
.btn-success:hover { background: var(--ink); }

/* Удаление — цвет только у текста и рамки, фон белый. */
.btn-danger { background: var(--paper); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--paper); }

.btn-sm { min-height: var(--tap); padding: 10px 14px; font-size: 14px; }

/* Кнопка-пресет суммы и кнопка выбора платформы — обычное вторичное. */
.preset-btn,
.platform-btn { flex: none; }

/* --------------------------------------------------------------------------
   6. Метки-бейджи — ПРАВИЛО 4: статичный чип. Значение несёт слово,
   цвет только у текста и служит подсказкой, а не единственным носителем.
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: var(--concrete);
  color: var(--steel-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.badge-green  { color: var(--ok); }
.badge-yellow { color: var(--warn); }
.badge-red    { color: var(--danger); }
.badge-gold   { color: var(--ink); }

/* --------------------------------------------------------------------------
   7. Таблицы и пустые состояния
   -------------------------------------------------------------------------- */

/* В непереведённых шаблонах таблица не обёрнута в .u-table-wrap —
   даём ей прокрутку самой, иначе на 390px колонки уезжают за экран. */
.table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: 14px;
}

.empty-state {
  background: var(--concrete);
  color: var(--steel);
  padding: 28px var(--pad);
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. Формы прежней темы
   -------------------------------------------------------------------------- */

/* В design.css .field — это строка «ссылка + кнопка копирования» с рамкой 3px.
   В непереведённых шаблонах тем же именем названа группа «подпись + поле».
   Отличаем по прямому <label> внутри и возвращаем группе обычный блок. */
.field:has(> label) {
  display: block;
  border: 0;
  background: transparent;
}
.field:has(> label) > label { display: block; margin-bottom: 6px; }

/* Кнопка внутри такой группы — обычная кнопка, а не чёрная «Копировать»
   из design.css (.field button). Специфичности .field .btn хватает,
   поэтому правило работает и там, где :has() не поддерживается. */
.field .btn {
  flex: none;
  height: auto;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
}
.field .btn:hover { background: var(--sky); }
.field .btn-primary,
.field .btn-success { background: var(--ink); color: var(--paper); }

/* Поля ввода в непереведённых карточках несут инлайновые 1px-рамки прежней
   темы — почти невидимые на белом. Возвращаем поле системы (.u-input).
   !important — потому что перебиваем инлайновый style, иначе никак. */
.card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.card textarea,
.card select {
  width: 100%;
  min-height: var(--tap-row);
  padding: 12px 14px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: var(--bw) solid var(--ink) !important;
  font-family: var(--font-text);
  font-size: 16px;          /* 16px — иначе iOS зумит при фокусе */
  font-weight: 600;
}
.card input::placeholder,
.card textarea::placeholder { color: var(--steel); font-weight: 500; }

/* Блок конфига с кнопкой копирования (AmneziaWG). */
.code-block {
  display: block;
  /* Карточка вокруг уже серая — конфиг отделяем бумагой и тонкой линией
     (1px, не 3px: блок статичный, кликать его нельзя). */
  background: var(--paper);
  border: 1px solid var(--divider);
  color: var(--steel-2);
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border: var(--bw) solid var(--ink);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.copy-btn:active { transform: translate(2px, 2px); }

/* --------------------------------------------------------------------------
   9. Точечные заплатки на конкретные экраны.
   Каждая снимает цвет, который в новой системе означал бы другое.
   Удаляются вместе со своим экраном.
   -------------------------------------------------------------------------- */

/* content.html: инлайновые строки на почти чёрном #0d1117 — серый текст на
   них становился нечитаемым. Возвращаем статичную плитку. */
div[style*="#0d1117"] { background: var(--paper) !important; }

/* ios-setup.html: круги с номерами шагов были залиты акцентом и несли
   color:#000 — с чёрным акцентом текст исчез бы. Делаем статичными. */
[style*="background:var(--accent)"] {
  background: var(--concrete) !important;
  color: var(--ink) !important;
}
/* ios-setup.html: мелкие номера шагов были на оранжевой подложке. */
.step-item .step-num,
.step-item .step-num-sm,
.step-section .step-num,
.step-section .step-num-sm { background: var(--concrete); color: var(--ink); }

/* downloads.html: выбранная вкладка платформы — это выбор (правило 3). */
button.platform-tab.active {
  background: var(--sky);
  color: var(--ink);
  border-color: var(--ink);
}
/* downloads.html: «рекомендуемая» строка была оранжевым градиентом. */
.app-row.app-featured { background: var(--concrete); border-color: var(--divider); }
.platform-section { display: block; }

/* support.html: пузыри чата были оранжевым градиентом с тёмным текстом.
   Оба пузыря — статичная информация; кто сказал, видно по стороне и подписи. */
.msg.msg-user { background: var(--concrete); color: var(--ink); }
.msg.msg-user .msg-time { color: var(--steel); }
.msg.msg-admin { background: var(--paper); border-color: var(--divider); color: var(--ink); }
/* Отправка — единственное действие блока, чёрная заливка (правило 1). */
.chat-input .send-btn { background: var(--ink); color: var(--paper); }
.chat-input .send-btn:hover { background: var(--ink); transform: none; }

/* subscribe.html (до перевода агентом D): сетка сроков и срок по умолчанию. */
.term-list { display: grid; gap: 8px; }
.term-default { position: relative; }