/* ══════════════════════════════════════════════════════════
   ТЕМА · ЗАДАНИЯ · ПИТОМЦЫ · КОШЕЛЁК · УЛУЧШЕНИЯ
   Продолжение css/theme.css. Подключать ПОСЛЕ него.
   Своих цветов здесь нет: всё собрано из переменных темы,
   оттенки — через color-mix от них же.

   Общая мысль по всем четырём экранам одна. Раньше они были
   списками одинаковых плашек: у строки задания, карточки пета,
   ячейки статистики и строки улучшения был один и тот же вес,
   и глаз не знал, за что зацепиться. Здесь у каждой строки
   выстроена иерархия из трёх ступеней:

     1) НАЗВАНИЕ — вторым шрифтом (Tiny5, сетка 8px) кеглем 16.
        Это единственное, что читается при беглом взгляде.
     2) ЧИСЛА и ПОДПИСИ — основным шрифтом ровно 10px.
     3) ДЕЙСТВИЕ или НАГРАДА — справа, всегда на одном месте,
        поэтому колонка кнопок читается как столбец.

   Плюс два сквозных приёма: полоса прогресса везде выглядит
   одинаково (жёлоб с тенью + сегментированная заливка, как
   у полос здоровья в theme.css), а состояние строки несёт
   вертикальная черта слева, а не подкрашенный фон целиком.

   ── ПРО КЛАССЫ И ИНЛАЙН-СТИЛИ ─────────────────────────────
   Разметка этих экранов собирается строками в JS, и раньше
   оформление доставало элементы по подстроке в атрибуте style:
   по цвету тира питомца, по подложке карточки баланса, по
   «border-radius:10px». Такая зацепка рвётся молча — стоит
   поменять цвет или скругление в JS, и правило перестаёт
   находить элемент, а ошибки нигде нет.
   Теперь каждое состояние несёт настоящий класс: блок и
   модификатор через is- (pet-card is-active is-tier-rare,
   wallet-tab is-active, skill-btn is-max). Классы проставлены
   в js/ui-pet.js, ui-tasks.js, ui-upgrades.js, ui-wallet.js.
   Инлайн-стили при этом остались на месте — их разбор это
   отдельная работа, здесь менялись только зацепки.

   Зацепки по литералам остались ровно в трёх местах, и все
   три помечены комментарием: разметку туда пишут чужие файлы
   (js/i18n.js — переключатель языка, js/talents.js — ветки
   талантов), классы в них добавлять не наше дело. Плюс блок 5
   ниже: это не состояния, а сквозная замена серых из старой
   палитры, и она нарочно ловит всё разом.
   ══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   1. ЗАДАНИЯ
   Было: зелёная рамка 16px радиуса вокруг всего окна, строки
   одинакового веса, полоска прогресса в 4px, и справа число
   «1840/5000», уже написанное слева. Стало: окно из тех же
   слоёв, что панели темы; готовое задание видно по зелёной
   черте и свечению; награда — золотая плашка, к которой
   всегда ведёт взгляд.
   ══════════════════════════════════════════════════════════ */

.task-modal { background: rgba(4,3,9,0.88); padding-top: 44px; }

.task-modal-box {
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  gap: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    var(--grain),
    var(--sheen),
    linear-gradient(180deg, #181428 0%, #0d0b16 100%);
  background-blend-mode: overlay, normal, normal;
  background-size: 120px 120px, auto, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px #07060d,
    0 12px 30px rgba(0,0,0,0.6);
}

/* Шапка окна: заголовок вторым шрифтом и зелёная черта под ним —
   та же логика, что у золотой черты под .panel-header. */
.task-modal-header {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid color-mix(in srgb, var(--success) 38%, var(--line));
  box-shadow: 0 1px 0 #07060d;
}
.task-modal-title {
  font-family: var(--font-ui) !important;
  font-size: var(--fs-4);
  letter-spacing: 0 !important;
  color: color-mix(in srgb, var(--success) 72%, #ffffff);
  text-shadow: 0 2px 0 rgba(0,0,0,0.75);
}
.task-modal .bp-close-btn { color: var(--text-3); }

/* Подзаголовки разделов («ЕЖЕДНЕВНЫЕ», «СПЕЦИАЛЬНЫЕ»).
   Разрядку снимаем и добавляем уходящую линию — как у .sec-title. */
.task-modal-body div.task-sec-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-ui);
  letter-spacing: 0 !important;
  color: var(--text-3) !important;
  margin: var(--sp-2) 0 0 !important;
}
.task-modal-body div.task-sec-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.task-modal-body > div.task-sec-title:first-child { margin-top: 0 !important; }

/* ── Строка задания ───────────────────────────────────────── */
.task-modal-body .task-row {
  position: relative;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  overflow: hidden;
}
/* Состояние — вертикальной чертой слева. Подкрашивать всю
   подложку нельзя: под текстом и так лежит фактура. */
.task-modal-body .task-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--line-strong);
}
.task-modal-body .task-row.task-avail {
  border-color: color-mix(in srgb, var(--success) 50%, var(--line));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.035),
    0 0 0 1px #07060d,
    0 2px 0 rgba(0,0,0,0.45),
    0 0 12px color-mix(in srgb, var(--success) 22%, transparent);
}
.task-modal-body .task-row.task-avail::before {
  background: var(--success);
  box-shadow: 0 0 8px color-mix(in srgb, var(--success) 70%, transparent);
}
/* Забранное задание было при opacity 0.4 — текст переставал
   читаться совсем. Гасим цветом и насыщенностью, а не прозрачностью. */
.task-modal-body .task-row.task-done {
  opacity: 1;
  filter: saturate(0.35);
  border-color: var(--line-soft);
}
.task-modal-body .task-row.task-done .task-title,
.task-modal-body .task-row.task-done .task-reward-lbl { color: var(--text-4); }
.task-modal-body .task-row.task-done::before {
  background: color-mix(in srgb, var(--success) 45%, transparent);
}

.task-modal-body .task-title {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  line-height: 1.15;
  color: var(--text);
  margin-bottom: var(--sp-2);
  text-shadow: 0 2px 0 rgba(0,0,0,0.7);
}
.task-modal-body .task-desc { margin-top: 5px; }

/* Полоса прогресса — жёлоб и сегментированная заливка,
   как у полос здоровья: одна механика по всей игре. */
.task-modal-body .task-progress-wrap { gap: var(--sp-2); }
.task-modal-body .task-progress-bar { height: 6px; }
.task-modal-body .task-progress-fill {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--success) 72%, #ffffff) 0%,
    var(--success) 55%,
    color-mix(in srgb, var(--success) 70%, #000000) 100%);
}
.task-modal-body .task-progress-lbl {
  font-size: var(--fs-1);
  color: var(--text-3);
  min-width: 52px; text-align: right;
}

/* Правая колонка: награда всегда сверху, действие всегда снизу. */
.task-modal-body .task-row-right { gap: var(--sp-2); min-width: 74px; }

/* Награда — золотая плашка, а не просто золотой текст:
   ради неё задание и выполняют, она главная в строке. */
.task-modal-body .task-reward-lbl {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-2);
  color: var(--gold);
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--gold-dim) 60%, var(--line));
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #221c0f 0%, #16130c 100%);
  box-shadow: var(--bevel);
  text-shadow: 0 1px 0 rgba(0,0,0,0.8);
}

.task-modal-body .task-claim-btn {
  padding: 6px 12px;
  font-size: var(--fs-1);
  width: 100%;
}
.task-modal-body .task-go-btn {
  padding: 6px 12px;
  font-size: var(--fs-1);
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--info) 65%, var(--line));
  border-radius: var(--r-sm);
  color: color-mix(in srgb, var(--info) 55%, #ffffff);
  background:
    var(--sheen),
    linear-gradient(180deg, #1b2a3d 0%, #121a27 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 0 #07060d;
}
.task-modal-body .task-done-lbl   { font-size: 14px; color: var(--success); }
.task-modal-body .task-timer-lbl  { font-size: var(--fs-1); color: var(--gold); }
.task-modal-body .task-locked-lbl { font-size: var(--fs-1); color: var(--text-4); }
/* Справа стояло ровно то же число, что и под полосой прогресса
   («1840/5000» дважды в одной строке). Прячем дубль там, где
   полоса есть; где её нет — подпись остаётся. */
.task-modal-body .task-row:has(.task-progress-lbl) .task-locked-lbl { display: none; }

/* Специальные задания рисуются внутрь своего контейнера, а
   отступы между строками задавал gap у .task-modal-body —
   до вложенных строк он не доставал, и они слипались. */
#specialTasksSection {
  display: flex; flex-direction: column; gap: var(--sp-2);
}

/* «Загрузка», «нет активных», «только онлайн», «нет связи» */
.task-modal-body div.task-empty {
  color: var(--text-3) !important;
  font-size: var(--fs-2) !important;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.22);
}


/* ══════════════════════════════════════════════════════════
   2. ПИТОМЦЫ
   Тиры питомцев набраны палитрой 2013 года прямо в data.js
   (#888, #2ecc71, #3498db, #9b59b6). Переменные оттуда не
   достать, поэтому ui-pet.js вешает на элемент класс тира, а
   мы подменяем цвет на лестницу редкостей темы, записывая тир
   в --tier — дальше им красится всё: рамка гнезда, свечение
   подложки, черта слева. Раньше тир ловился по самому коду
   цвета в style: правка одной цифры в data.js — и весь экран
   молча становился серым.

   Класс тира стоит ровно на тех элементах, где цвет тира
   попадает в инлайн-стиль, поэтому неполученная строка
   каталога (у неё рамка нейтральная) остаётся, как и была,
   на общем тоне — свой тир ей задаёт только гнездо и имя.
   ══════════════════════════════════════════════════════════ */

#petPanel .is-tier-common   { --tier: var(--r-common);   }
#petPanel .is-tier-uncommon { --tier: var(--r-uncommon); }
#petPanel .is-tier-rare     { --tier: var(--r-rare);     }
#petPanel .is-tier-epic     { --tier: var(--r-epic);     }
#petPanel .is-tier-legend   { --tier: var(--r-legend);   }
#petPanel { --tier: var(--r-common); }

.pet-panel { background: rgba(4,3,9,0.88); padding-top: 40px; }

.pet-panel-box {
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    var(--grain),
    var(--sheen),
    linear-gradient(180deg, #181428 0%, #0d0b16 100%);
  background-blend-mode: overlay, normal, normal;
  background-size: 120px 120px, auto, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px #07060d,
    0 12px 30px rgba(0,0,0,0.6);
}
.pet-panel-title {
  font-family: var(--font-ui) !important;
  font-size: var(--fs-4);
  letter-spacing: 0 !important;
  color: var(--r-unique);
  text-shadow: 0 2px 0 rgba(0,0,0,0.75);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid color-mix(in srgb, var(--r-unique) 34%, var(--line));
  box-shadow: 0 1px 0 #07060d;
}

/* ── Карточка активного питомца ───────────────────────────
   Это главный блок экрана, поэтому он один получает свечение
   в цвет тира и самый крупный кегль имени. */
.pet-panel-box > div.pet-active-card {
  padding: var(--sp-3) !important;
  border: 1px solid color-mix(in srgb, var(--tier) 45%, var(--line)) !important;
  border-radius: var(--r-md) !important;
  background:
    radial-gradient(120% 100% at 50% 130%, color-mix(in srgb, var(--tier) 20%, transparent), transparent 72%),
    var(--sheen),
    linear-gradient(180deg, #221d36 0%, #14111f 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px #07060d,
    0 2px 0 rgba(0,0,0,0.45);
}
/* «АКТИВНЫЙ ПЕТ», «ВСЕ ПЕТЫ» и заголовки тиров */
.pet-panel-box div.pet-sec-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-ui);
  letter-spacing: 0 !important;
  color: var(--text-3) !important;
}
.pet-panel-box div.pet-sec-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
/* Имя активного питомца — крупнее всего на экране */
.pet-panel-box div.pet-active-name {
  font-family: var(--font-ui);
  font-size: 24px !important;
  line-height: 1.1;
  color: var(--tier) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.8);
  overflow-wrap: anywhere;
}
/* Название тира под именем */
.pet-panel-box div.pet-active-tier {
  color: color-mix(in srgb, var(--tier) 70%, var(--text-3)) !important;
}

/* Гнездо со спрайтом: утопленная площадка со свечением тира,
   а не просто рамка вокруг картинки. */
#petPanel div.pet-socket {
  border: 1px solid color-mix(in srgb, var(--tier) 45%, var(--line)) !important;
  border-radius: var(--r-md) !important;
  background:
    radial-gradient(100% 85% at 50% 105%, color-mix(in srgb, var(--tier) 28%, transparent), transparent 72%),
    linear-gradient(180deg, #100e1a 0%, #07060d 100%) !important;
  box-shadow: var(--bevel-in), inset 0 0 14px rgba(0,0,0,0.65);
}
#petPanel .pet-sprite-anim { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7)); }

/* Плашки статов активного питомца */
.pet-panel-box span.pet-stat-chip {
  padding: 3px 7px !important;
  font-size: var(--fs-1) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  background: linear-gradient(180deg, #221d36 0%, #16131f 100%) !important;
  box-shadow: var(--bevel);
}
/* Строка бафа и строка PIXR-бонуса */
.pet-panel-box div.pet-buff-line {
  color: var(--magic) !important;
  border: 1px solid color-mix(in srgb, var(--magic) 35%, var(--line)) !important;
  border-radius: var(--r-sm) !important;
  background: linear-gradient(180deg, #1e1733 0%, #15111f 100%) !important;
  padding: 5px 8px !important;
  box-shadow: var(--bevel);
}
.pet-panel-box div.pet-pixr-line {
  color: var(--pixr) !important;
  border: 1px solid color-mix(in srgb, var(--pixr) 32%, var(--line)) !important;
  border-radius: var(--r-sm) !important;
  background: linear-gradient(180deg, #26142a 0%, #16101c 100%) !important;
  padding: 5px 8px !important;
  box-shadow: var(--bevel);
}

/* ── Заголовок тира в каталоге ─────────────────────────────
   Несёт оба класса: это и заголовок раздела (правило выше), и
   заголовок тира — второй докрашивает его в цвет редкости. */
.pet-panel-box div.pet-tier-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--fs-2) !important;
  letter-spacing: 0 !important;
  color: var(--tier) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: var(--sp-2) !important;
}
.pet-panel-box div.pet-tier-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 55%, transparent), transparent);
}

/* ── Строка каталога ──────────────────────────────────────── */
#petPanel div.pet-card {
  position: relative;
  gap: var(--sp-3) !important;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3) !important;
  border: 1px solid color-mix(in srgb, var(--tier) 34%, var(--line)) !important;
  border-radius: var(--r-sm) !important;
  background:
    var(--sheen),
    var(--weave),
    linear-gradient(180deg, #1e192e 0%, #14111f 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 0 1px #07060d,
    0 2px 0 rgba(0,0,0,0.45);
  overflow: hidden;
}
#petPanel div.pet-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--tier); opacity: 0.75;
}
/* Активный питомец в списке — рамка и свечение в полную силу */
#petPanel div.pet-card.is-active {
  border-color: var(--tier) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 0 1px #07060d,
    0 0 12px color-mix(in srgb, var(--tier) 30%, transparent);
}
/* Неполученный — глушим цветом, а не прозрачностью 0.55:
   при ней подписи проваливались ниже порога читаемости.
   Спрайт при этом остаётся узнаваемым: каталог для того и
   нужен, чтобы видеть, за кем идёшь. Гасим текстовую
   половину и слегка приглушаем гнездо. */
#petPanel div.pet-card.is-locked {
  opacity: 1 !important;
  border-color: var(--line-soft) !important;
}
#petPanel div.pet-card.is-locked::before {
  opacity: 0.25;
}
#petPanel div.pet-card.is-locked > div.pet-card-info {
  filter: saturate(0.3);
  opacity: 0.88;
}
#petPanel div.pet-card.is-locked > div.pet-socket {
  filter: saturate(0.6) brightness(0.88);
}

/* Имя питомца в строке каталога */
#petPanel span.pet-card-name {
  font-family: var(--font-ui);
  font-size: var(--fs-4) !important;
  line-height: 1.15;
  color: var(--tier) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.7);
}
/* Статы / баф / PIXR под именем */
#petPanel div.pet-card-stats { color: var(--text-2) !important; margin-bottom: 3px !important; }
#petPanel div.pet-card-buff  { color: var(--magic)  !important; }
#petPanel div.pet-card-pixr  { color: var(--pixr)   !important; }

/* Значок «АКТИВЕН» */
#petPanel span.pet-active-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px !important;
  font-size: var(--fs-1) !important;
  border-radius: var(--r-sm) !important;
  background: var(--tier) !important;
  color: #0b0a12 !important;
  text-shadow: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--tier) 40%, transparent);
}
/* Кнопка «Активировать» */
#petPanel button.pet-activate-btn {
  padding: 5px 10px !important;
  font-size: var(--fs-1) !important;
  border: 1px solid color-mix(in srgb, var(--tier) 65%, var(--line)) !important;
  border-radius: var(--r-sm) !important;
  color: var(--tier) !important;
  background:
    var(--sheen),
    linear-gradient(180deg, #262038 0%, #17131f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 0 #07060d;
}
/* «Не получен» */
#petPanel span.pet-locked-lbl { color: var(--text-4) !important; font-size: var(--fs-1) !important; }

/* Пустое состояние «нет пета» */
.pet-panel-box div.pet-empty {
  border: 1px dashed var(--line-strong) !important;
  border-radius: var(--r-md) !important;
  background: rgba(0,0,0,0.25) !important;
  color: var(--text-3) !important;
  font-size: var(--fs-2) !important;
  padding: var(--sp-4) var(--sp-3) !important;
}
.pet-panel-none { color: var(--text-3); font-size: var(--fs-2); }

.pet-panel-close {
  margin-top: var(--sp-3);
  padding: 10px !important;
  font-size: var(--fs-2) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-2) !important;
  background:
    var(--sheen),
    linear-gradient(180deg, #2b2544 0%, #1a1730 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 0 #07060d;
}

/* Окна питомца: бокс, результат открытия, карточка из инвентаря.
   Собраны инлайном целиком, поэтому правим только оболочку. */
#petBoxModal    > div,
#petItemModal   > div,
#petResultModal > div {
  border-width: 1px !important;
  border-radius: var(--r-lg) !important;
  background:
    var(--grain),
    var(--sheen),
    linear-gradient(180deg, #181428 0%, #0d0b16 100%) !important;
  background-blend-mode: overlay, normal, normal;
  background-size: 120px 120px, auto, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px #07060d,
    0 14px 34px rgba(0,0,0,0.65);
}
#petBoxModal    div.pet-socket,
#petItemModal   div.pet-socket,
#petResultModal div.pet-socket {
  border-width: 1px !important;
  border-radius: var(--r-md) !important;
  background: linear-gradient(180deg, #100e1a 0%, #07060d 100%) !important;
  box-shadow: var(--bevel-in), inset 0 0 14px rgba(0,0,0,0.65);
}
#petItemModal   div.pet-modal-name,
#petResultModal div.pet-modal-name {
  font-family: var(--font-ui);
  font-size: 24px !important;
  line-height: 1.15;
}


/* ══════════════════════════════════════════════════════════
   3. КОШЕЛЁК
   Главное на экране — два числа: сколько PIXR и сколько GRAM.
   Поэтому карточки балансов подняты в самый верх по весу
   (крупное число цветом валюты, свечение подложки), а всё
   остальное — обмен, индикатор, статистика — идёт ступенью
   ниже. Заодно вычищены серые #778 / #556 / #445: их контраст
   к подложке 4.1 / 2.4 / 1.7 при норме 4.5.
   ══════════════════════════════════════════════════════════ */

/* Переключатель языка — маленькие таблетки, не кнопки.
   ЗАЦЕПКА ПО ЛИТЕРАЛУ, И ЭТО НАМЕРЕННО: разметку кнопок пишет
   renderLangSwitcher() из js/i18n.js — чужой файл, класс
   выбранного языка добавлять туда не наше дело. */
#walletBody button[onclick*="setLang"] {
  padding: 4px 12px !important;
  font-size: var(--fs-1) !important;
  border-width: 1px !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--bevel);
}
#walletBody button[onclick*="setLang"][style*="#f5c542"] {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: linear-gradient(180deg, #241f14 0%, #1a1710 100%) !important;
  box-shadow: var(--bevel), 0 0 10px var(--gold-glow);
}

/* Вкладки «Кошелёк / Статистика» */
#walletBody   button.wallet-tab,
#upgradesBody button.upg-tab {
  padding: 9px 0 !important;
  font-size: var(--fs-2) !important;
  border-width: 1px !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-3) !important;
  background:
    var(--sheen),
    linear-gradient(180deg, #221d36 0%, #16131f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 0 #07060d;
}
/* Активная вкладка: свой цвет у каждой (кошелёк — голубой,
   статистика и характеристики — золото, навыки и таланты —
   фиолет), общая механика — подсветка и свечение. */
#walletBody button.wallet-tab.is-wallet.is-active {
  border-color: var(--gram) !important; color: var(--gram) !important;
  background: linear-gradient(180deg, #12242e 0%, #0e1820 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 0 #07060d,
              0 0 12px color-mix(in srgb, var(--gram) 26%, transparent);
}
#walletBody   button.wallet-tab.is-stats.is-active,
#upgradesBody button.upg-tab.is-stats.is-active {
  border-color: var(--gold) !important; color: var(--gold) !important;
  background: linear-gradient(180deg, #241f14 0%, #1a1710 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 0 #07060d,
              0 0 12px var(--gold-glow);
}
#upgradesBody button.upg-tab.is-skills.is-active,
#upgradesBody button.upg-tab.is-talents.is-active {
  border-color: var(--magic) !important; color: var(--magic) !important;
  background: linear-gradient(180deg, #211a33 0%, #171224 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 0 #07060d,
              0 0 12px color-mix(in srgb, var(--magic) 26%, transparent);
}

/* ── Карточки балансов ──────────────────────────────────────
   Валюта карточки — модификатором, а не цветом подложки:
   раньше PIXR отличали от GRAM по rgba(255,68,204,0.06). */
#walletBody div.wallet-bal-grid { gap: var(--sp-2) !important; }

#walletBody div.wallet-bal.is-pixr { --cur: var(--pixr); }
#walletBody div.wallet-bal.is-gram { --cur: var(--gram); }

#walletBody div.wallet-bal {
  padding: var(--sp-3) var(--sp-2) !important;
  border: 1px solid color-mix(in srgb, var(--cur) 40%, var(--line)) !important;
  border-radius: var(--r-md) !important;
  background:
    radial-gradient(120% 90% at 50% 125%, color-mix(in srgb, var(--cur) 22%, transparent), transparent 72%),
    var(--sheen),
    linear-gradient(180deg, #221d36 0%, #14111f 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px #07060d,
    0 2px 0 rgba(0,0,0,0.45);
}
#walletBody div.wallet-bal img {
  width: 32px !important; height: 32px !important;
  margin-bottom: var(--sp-2) !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.7));
}
/* Подпись валюты */
#walletBody div.wallet-bal div.wallet-cur-lbl {
  font-family: var(--font-ui);
  letter-spacing: 0 !important;
  color: var(--text-3) !important;
}
/* Само число — 20px ровно по сетке шрифта, цветом валюты */
#walletBody div.wallet-bal-val {
  font-size: var(--fs-3) !important;
  color: var(--cur) !important;
  line-height: 1.3;
  margin-top: 2px;
  text-shadow: 0 0 10px color-mix(in srgb, var(--cur) 45%, transparent),
               0 2px 0 rgba(0,0,0,0.8);
}

/* ── Индикатор обмена ─────────────────────────────────────── */
#exchangeIndicator {
  padding: var(--sp-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background:
    var(--sheen),
    linear-gradient(180deg, #1c1830 0%, #13101c 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 0 1px #07060d;
}
#exchangeIndicator > div.wallet-sec-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-ui);
  letter-spacing: 0 !important;
  color: var(--text-3) !important;
}
#exchangeIndicator > div.wallet-sec-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
/* Полоса — тот же жёлоб с сегментами, что и везде */
#exchangeIndicatorInner div.wallet-xbar {
  height: 8px !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid #07060d;
  background: linear-gradient(180deg, #06050c 0%, #0d0b16 100%) !important;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.05);
}
#exchangeIndicatorInner div.wallet-xbar > div {
  position: relative;
  border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.30);
}
#exchangeIndicatorInner div.wallet-xbar > div::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 6px);
}
#exchangeIndicatorInner span { font-size: var(--fs-1) !important; }

/* ── Блок обмена PIXR → GRAM ──────────────────────────────── */
#walletBody div.wallet-exchange {
  padding: var(--sp-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background:
    var(--sheen),
    linear-gradient(180deg, #1c1830 0%, #13101c 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 0 1px #07060d;
}
#walletBody div.wallet-exchange > div:first-child {
  color: var(--text-2) !important;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--sp-2) !important;
}
#pixrGramRateLabel { color: var(--gold) !important; font-size: var(--fs-2); }

/* min-width:0 обязателен: у поля type=number своя внутренняя
   ширина, и без него flex:1 не давал ему сжаться — кнопка
   «Обменять» уезжала за правый край блока. */
#exchangeAmount {
  min-width: 0 !important;
  width: 100%;
  padding: 9px 10px !important;
  font-size: var(--fs-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  background: linear-gradient(180deg, #0a0812 0%, #100d1a 100%) !important;
  box-shadow: var(--bevel-in);
}
#exchangeAmount:focus { outline: none; border-color: var(--gold-dim) !important; }

/* Обмен — главное действие экрана, значит золотое. */
#walletBody button[onclick*="submitExchange"] {
  flex: 0 0 auto;
  padding: 9px 14px !important;
  font-size: var(--fs-2) !important;
  border: 1px solid var(--gold-dim) !important;
  border-radius: var(--r-sm) !important;
  color: #1a1405 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #f0bd3c 0%, #c2911f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 2px 0 #6b4f0e,
    0 0 12px var(--gold-glow);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
#exchangePreview, #exchangeResult { font-size: var(--fs-1) !important; color: var(--text-3) !important; }
#exchangePreview { margin-top: var(--sp-2) !important; }

/* ── Сетка статистики ─────────────────────────────────────
   Было 16 одинаковых карточек в столбик по 140px высотой:
   экран прокручивался вчетверо длиннее, чем нужно, и ни одна
   цифра не была главной. Стало: компактная строка «иконка —
   подпись — число», а боевая мощь (первая ячейка) вынесена
   во всю ширину как итог всего экрана. ── */
.stats-grid { gap: var(--sp-2); margin-top: var(--sp-3); }

.stat-cell {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--sp-2); row-gap: 0;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background:
    var(--sheen),
    linear-gradient(180deg, #1e192e 0%, #14111f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 0 1px #07060d,
    0 2px 0 rgba(0,0,0,0.4);
}
.stat-icon {
  grid-column: 1; grid-row: 1 / span 2;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
}
.stat-label {
  grid-column: 2; grid-row: 1;
  margin-top: 0;
  font-size: var(--fs-1);
  color: var(--text-3);
  line-height: 1.2;
}
.stat-val {
  grid-column: 2; grid-row: 2;
  font-size: var(--fs-3);
  line-height: 1.25;
  color: var(--text);
  text-shadow: 0 2px 0 rgba(0,0,0,0.75);
}
/* Боевая мощь — итог всех вложений, поэтому во всю ширину и золотом */
.stats-grid .stat-cell:first-child {
  grid-column: 1 / -1;
  grid-template-columns: 34px 1fr;
  padding: var(--sp-3);
  border-color: color-mix(in srgb, var(--gold-dim) 55%, var(--line));
  background:
    radial-gradient(120% 100% at 50% 130%, var(--gold-glow), transparent 70%),
    var(--sheen),
    linear-gradient(180deg, #241f14 0%, #16131f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 0 1px #07060d,
    0 2px 0 rgba(0,0,0,0.45),
    0 0 14px var(--gold-glow);
}
.stats-grid .stat-cell:first-child .stat-val {
  font-size: 30px;
  color: var(--gold);
  text-shadow: 0 0 12px var(--gold-glow), 0 2px 0 rgba(0,0,0,0.85);
}

/* История операций (сейчас приходит только при включённом вводе/выводе) */
#txList > div.tx-title {
  font-family: var(--font-ui);
  letter-spacing: 0 !important;
  color: var(--text-3) !important;
}
#txList div.tx-row {
  border-bottom: 1px solid var(--line-soft) !important;
  padding: var(--sp-2) 0 !important;
}


/* ══════════════════════════════════════════════════════════
   4. УЛУЧШЕНИЯ
   Строка улучшения была плоской плашкой, где название, уровень
   и цена весили одинаково, а полоса прокачки в 4px терялась
   у нижнего края. Разложено в три колонки: гнездо с иконкой —
   название с полосой — цена. Полоса теперь золотая и с той же
   сегментацией, что у остальных шкал, поэтому «сколько уже
   вложено» видно, не читая цифр.
   ══════════════════════════════════════════════════════════ */

/* Строка ресурсов сверху (CP · золото · PIXR) */
#upgradesBody > div.upg-res-row {
  padding: var(--sp-2) var(--sp-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background:
    var(--sheen),
    linear-gradient(180deg, #1c1830 0%, #13101c 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 0 1px #07060d;
  color: var(--text-2) !important;
  font-size: var(--fs-2) !important;
}
/* Строка класса */
#upgradesBody > div.upg-class-row {
  padding: var(--sp-2) var(--sp-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: linear-gradient(180deg, #1a1628 0%, #12101b 100%) !important;
  box-shadow: var(--bevel);
}
#upgradesBody button.upg-class-btn {
  padding: 5px 11px !important;
  font-size: var(--fs-1) !important;
  border: 1px solid color-mix(in srgb, var(--magic) 60%, var(--line)) !important;
  border-radius: var(--r-sm) !important;
  color: var(--magic) !important;
  background:
    var(--sheen),
    linear-gradient(180deg, #241d3a 0%, #171224 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 0 #07060d;
}

/* ── Строка улучшения ─────────────────────────────────────── */
.upg-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background:
    var(--sheen),
    var(--weave),
    linear-gradient(180deg, #221d36 0%, #161324 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.035),
    0 0 0 1px #07060d,
    0 2px 0 rgba(0,0,0,0.45);
}
/* Гнездо иконки: утопленная площадка — иконки выстраиваются
   в ровный столбец, а не «плавают» по левому краю. */
.upg-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #100e1a 0%, #16131f 100%);
  box-shadow: var(--bevel-in);
}
.upg-icon svg { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.65)); }

.upg-name {
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  line-height: 1.15;
  color: var(--text);
  text-shadow: 0 2px 0 rgba(0,0,0,0.7);
}
.upg-level {
  font-size: var(--fs-1);
  color: var(--text-2);
  margin-top: 3px;
}
/* Полоса прокачки — жёлоб и сегменты, как у полос здоровья */
.upg-bar-wrap {
  height: 6px;
  margin: 6px 0 0;
  border: 1px solid #07060d;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #06050c 0%, #0d0b16 100%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.upg-bar {
  position: relative;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(180deg, #f5d777 0%, var(--gold) 55%, var(--gold-dim) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.30);
}
.upg-bar::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 6px);
}

/* Цена — золотая табличка справа. Одинаковая ширина у всех,
   поэтому столбец цен читается сверху вниз. */
.upg-btn {
  min-width: 78px;
  padding: 9px 10px !important;
  font-size: var(--fs-1) !important;
  border: 1px solid color-mix(in srgb, var(--gold-dim) 70%, var(--line)) !important;
  border-radius: var(--r-sm) !important;
  color: var(--gold) !important;
  background:
    var(--sheen),
    linear-gradient(180deg, #2a2338 0%, #1a1526 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 0 #07060d;
  text-shadow: 0 1px 0 rgba(0,0,0,0.75);
}
.upg-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
/* MAX — не «отключено и погашено», а достижение */
.upg-btn:disabled {
  opacity: 1 !important;
  filter: none;
  border-color: var(--gold-dim) !important;
  color: var(--gold) !important;
  background: linear-gradient(180deg, #2b2313 0%, #1a1610 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 10px var(--gold-glow);
}

/* ── Вкладка «Навыки» ─────────────────────────────────────── */

/* Сколько книг в сумке */
#upgradesBody div.skill-books {
  padding: var(--sp-2) var(--sp-3) !important;
  border: 1px solid color-mix(in srgb, var(--magic) 30%, var(--line)) !important;
  border-radius: var(--r-md) !important;
  background: linear-gradient(180deg, #1e1733 0%, #15111f 100%) !important;
  box-shadow: var(--bevel);
  color: var(--text-2) !important;
}
#upgradesBody div.skill-books strong { color: var(--magic) !important; }
#upgradesBody div.skill-books span.skill-books-chance {
  color: var(--text-3) !important;
}

/* Карточка навыка. Второй селектор — ЗАЦЕПКА ПО ЛИТЕРАЛУ, И ЭТО
   НАМЕРЕННО: та же оболочка у веток талантов, а рисует их
   js/talents.js — чужой файл, класс туда добавлять не наше дело.
   Экран у них общий, и одинаковая оболочка здесь к лучшему. */
#upgradesBody div.skill-card,
#upgradesBody div[style*="border-radius:10px"][style*="overflow:hidden"] {
  margin-bottom: var(--sp-3) !important;
  border-width: 1px !important;
  border-radius: var(--r-md) !important;
  background:
    var(--sheen),
    linear-gradient(180deg, #1c1830 0%, #13101c 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 0 1px #07060d,
    0 2px 0 rgba(0,0,0,0.45);
}
/* Шапка карточки навыка. Второй селектор — снова литерал ради
   js/talents.js: под него попадает блок перерождения. */
#upgradesBody div.skill-card-head,
#upgradesBody div[style*="padding:10px 12px"] {
  padding: var(--sp-3) !important;
  gap: var(--sp-3) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)) !important;
  border-bottom: 1px solid var(--line-soft);
}
/* Название навыка */
#upgradesBody div.skill-name {
  font-family: var(--font-ui);
  font-size: var(--fs-4) !important;
  line-height: 1.15;
  color: var(--text) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.7);
}
/* Описание уровня — длинная строка, поэтому системным шрифтом
   и без фактуры под ней (правило темы для .craft-desc). */
#upgradesBody div.skill-desc {
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.45;
  color: var(--text-2) !important;
  background-image: none !important;
  margin-top: 4px !important;
}
/* Иконка навыка — в таком же гнезде, как иконки характеристик */
#upgradesBody div.skill-card-head > img,
#upgradesBody div.skill-card-head > div.skill-icon {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #100e1a 0%, #16131f 100%);
  box-shadow: var(--bevel-in);
}
/* Полоса уровня навыка */
#upgradesBody div.skill-bar-wrap {
  height: 6px !important;
  border: 1px solid #07060d;
  border-radius: var(--r-sm) !important;
  background: linear-gradient(180deg, #06050c 0%, #0d0b16 100%) !important;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  margin-bottom: var(--sp-2) !important;
}
#upgradesBody div.skill-bar-wrap > div {
  position: relative;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.30);
}
#upgradesBody div.skill-bar-wrap > div::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 6px);
}
/* Кнопка «Открыть / Lv.2→3» */
#upgradesBody button.skill-btn {
  padding: 9px !important;
  font-size: var(--fs-2) !important;
  border-width: 1px !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 0 #07060d;
}


/* ══════════════════════════════════════════════════════════
   5. ЧИТАЕМОСТЬ
   Серые, оставшиеся от прежней палитры. Замерено на подложке
   карточки #1c1930: #445 → 1.8 · #554 → 2.5 · #556 → 2.5 ·
   #4a4a6a → 2.0 · #5a7090 → 3.4 · #778 → 3.9 при норме 4.5.
   Все уводятся на ступени текста темы (--text-3 = 5.9,
   --text-4 = 4.5) — ровно тем же способом, каким в theme.css
   поднимали кегли: по подстроке в инлайн-стиле.

   ЗДЕСЬ ЗАЦЕПКИ ПО ЦВЕТУ ОСТАВЛЕНЫ НАРОЧНО. Это не состояния,
   а сквозная замена одного цвета другим: правило должно найти
   каждое место, где остался серый из старой палитры, включая
   те экраны, чьи файлы правят не здесь. Классы этому не помощь
   — потребовалось бы пометить полсотни разрозненных подписей,
   и любая забытая осталась бы нечитаемой. Правило само гаснет,
   когда серых в JS не останется: искать будет нечего.
   ══════════════════════════════════════════════════════════ */
#walletBody   [style*="color:#778"],
#upgradesBody [style*="color:#778"],
#petPanel     [style*="color:#778"],
#walletBody   [style*="color:#8099c0"],
#upgradesBody [style*="color:#8099c0"],
#petPanel     [style*="color:#8099c0"],
#walletBody   [style*="color:#6d87a8"],
#upgradesBody [style*="color:#6d87a8"],
#walletBody   [style*="color:#aaa"],
.task-modal-body [style*="color:#6d87a8"] { color: var(--text-3) !important; }

#walletBody   [style*="color:#556"],
#walletBody   [style*="color:#445"],
#upgradesBody [style*="color:#554"],
#petPanel     [style*="color:#5a7090"] { color: var(--text-4) !important; }

/* Погашенные кнопки навыков: рамка #333/#444 на тёмном фоне
   не видна вовсе — плашка выглядела дырой. Обе ветки, MAX и
   «книг не хватает», теперь помечены классами состояния. */
#upgradesBody button.skill-btn.is-max,
#upgradesBody button.skill-btn.is-locked {
  border-color: var(--line) !important;
  color: var(--text-4) !important;
  background: linear-gradient(180deg, #191527 0%, #12101b 100%) !important;
}