/* style.css — все стили SPA. Чистый CSS без фреймворков (без Bootstrap).
   Тема: тёплый оранжевый акцент, светлый фон, мягкие тени, скруглённые углы.

   Брейкпоинт адаптивности: 1366px.
   - До 1366px ВКЛЮЧИТЕЛЬНО — мобильный вид (нижняя навигация), это покрывает
     телефоны и планшеты, включая iPad Pro 12.9" в ОБЕИХ ориентациях
     (1024px и 1366px по ширине) — тут сознательно предпочитаем мобильный
     вид десктопному, даже несмотря на широкий экран планшета.
   - Начиная с 1367px — десктопный вид (верхняя горизонтальная навигация,
     контент по центру с ограниченной шириной): это уже реально десктопные
     мониторы/ноутбуки, а не планшет. */

/* ---------- Базовые переменные темы ---------- */
:root {
  --color-accent: #f5a623;
  --color-accent-dark: #d98c0f;
  --color-accent-light: #fdf1dc;
  --color-bg: #faf9f7;
  --color-surface: #ffffff;
  --color-text: #2b2b2b;
  --color-text-muted: #8a8a8a;
  --color-border: #ececec;
  --color-danger: #e0503c;
  --color-success: #3fa96a;

  --shadow-soft: 0 2px 10px rgba(30, 20, 0, 0.06), 0 1px 2px rgba(30, 20, 0, 0.04);
  --shadow-lift: 0 8px 24px rgba(30, 20, 0, 0.10);

  /* Четвёртый цвет статуса ("Partial") — остальные три уже есть выше
     (accent — жёлтый/оранжевый, success — зелёный, danger — красный). */
  --color-partial: #7c3aed;
  --color-partial-light: #f2e9fb;

  /* Голубой — для информационных плашек (см. .migration-banner), которые
     не должны выглядеть как ошибка (--color-danger, красный) или как
     подтверждение успеха (--color-success, зелёный) — нейтральное "к сведению". */
  --color-info: #2f6fd1;
  --color-info-light: #eaf3fe;

  /* Светлые "плашечные" оттенки success/danger — раньше были захардкожены
     прямо в местах использования (.auth-error/.auth-success, .order-banner,
     .status-pill, .order-card-tint-*), теперь вынесены сюда переменными:
     тёмной теме (body.dark-theme ниже) достаточно переопределить эти два
     значения, а не искать и чинить каждое место по отдельности. */
  --color-success-light: #e9f8ee;
  --color-danger-light: #fdecea;

  /* Крупное мягкое скругление в стиле iOS 26 "Liquid Glass" — раньше было
     10/14/20px (--radius-sm/--radius-md/--radius-lg), карточки/панели
     (.auth-card, .page-card, .order-card и т.п.) уже сидели на --radius-lg
     и почти попадали в нужный диапазон (~16-20px), а вот поля ввода,
     select, кнопки-таблетки и подобные средние элементы (--radius-sm)
     были заметно угловатее — 10px. Подняли ВСЕ три ступени, сохранив
     саму трёхступенчатую иерархию (sm < md < lg), но сблизив их —
     Liquid Glass, в отличие от прежнего стиля, тяготеет к единообразно
     мягким скруглениям по всему интерфейсу, а не к резкому контрасту
     между "почти прямоугольным полем" и "сильно скруглённой карточкой".
     Мелкие бейджи/пилюли (999px/50%) этой переменной не пользуются
     и трогать их не нужно — они и так полностью круглые. */
  --radius-sm: 16px;
  --radius-md: 18px;
  --radius-lg: 22px;

  --bottom-nav-height: 64px;
  /* Было 60px — увеличено вместе с логотипом брендов (.logo-image ниже
     вырос с 24px до 48px — правило общее, применяется и к rublevkalike.ru/.com,
     и к 1millionlikes.me, оба сейчас показывают реальный файл логотипа,
     не текст-заглушку), чтобы вокруг него осталась комфортная вертикальная
     "воздушная" зона (72 - 48 = 24px, по 12px сверху и снизу), а не
     логотип впритык к краям шапки. Раньше это значение было
     ОПАСНО менять — .auth-screen считала свою высоту как
     calc(100vh - var(--topbar-height)), и любое расхождение (например,
     из-за баннера о переходе, вставшего между шапкой и .auth-screen)
     срывало вёрстку экрана логина. Это уже исправлено: .auth-screen
     теперь просто flex: 1 внутри .public-shell (см. .public-shell ниже)
     и сама подстраивается под ЛЮБУЮ фактическую высоту шапки — менять
     --topbar-height теперь безопасно. */
  --topbar-height: 72px;
}

/* ---------- Тёмная тема ----------
   Класс на body (переключается кликом по кнопке в шапке, см. #theme-toggle
   в app.js/style.css ниже), а не отдельная media-query prefers-color-scheme —
   так пользователь сам решает, а не браузер/ОС за него; выбор запоминается
   в localStorage (см. THEME_STORAGE_KEY в app.js) и переживает перезаход.
   Раз ВСЁ оформление сайта уже построено на переменных из :root выше —
   тёмная тема это просто их переопределение под селектором body.dark-theme,
   без единого нового правила для конкретных элементов (кроме буквально
   одного места выше — .status-filter-btn.active, — где раньше был
   захардкожен #fff вместо переменной, см. комментарий там же).
   Фон — мягкий тёмно-серый с тёплым оттенком (не чёрный, глазам легче),
   акцент — тот же фирменный оранжевый, но чуть ярче/светлее исходного:
   на тёмном фоне менее яркий/насыщенный оранжевый (--color-accent-dark)
   читается плохо, поэтому местами они меняются ролями (см. ниже).

   --color-accent-light — ИСКЛЮЧЕНИЕ из "оранжевый только для текста/кнопок":
   в светлой теме это тёплая кремовая ПОДЛОЖКА (радиальный градиент на
   экране логина, плашка баланса, описание услуги, выбранный способ
   оплаты, жёлтый статус-пилюль) — то есть везде используется именно как
   ФОН, не текст. На тёмном фоне та же самая тёплая подложка читалась как
   мутное ржавое пятно (особенно в радиальном градиенте позади карточки
   входа — самый заметный случай). Поэтому здесь это НЕ тёплый, а
   нейтральный тёмно-серый оттенок — фон/подложка остаётся нейтральной
   независимо от темы, а сам оранжевый акцент (--color-accent/-dark) как
   и раньше остаётся только в тексте/кнопках/бордерах поверх неё. */
body.dark-theme {
  --color-accent: #ffb648;
  --color-accent-dark: #f5a623;
  --color-accent-light: #332f2b;
  --color-bg: #1c1a18;
  --color-surface: #262320;
  --color-text: #f2ede6;
  --color-text-muted: #a6a29c;
  --color-border: #3a3632;
  --color-danger: #ff6b57;
  --color-success: #4ecb84;

  /* На тёмном фоне тени почти не читаются (нет светлого фона, от которого
     тёмная тень отличалась бы) — вместо "мягкой тени" карточки отличаются
     от фона своим --color-surface (светлее --color-bg), а тень остаётся
     лёгким дополнением, не основным приёмом. */
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.45);

  --color-partial: #b39bfb;
  --color-partial-light: #2f2540;

  --color-info: #6ba6f5;
  --color-info-light: #1d2c40;

  --color-success-light: #1c3324;
  --color-danger-light: #3a201c;
}

/* ---------- Сброс и база ---------- */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

#app {
  min-height: 100vh;
}

/* ================================================================
   ЭКРАН ЛОГИНА / РЕГИСТРАЦИИ
   ================================================================ */

/* .public-shell — обёртка неавторизованных экранов (логин, восстановление
   пароля): шапка + баннер о переходе на платформу (необязательный) +
   .auth-screen, тем же flex-column приёмом, что и .app-shell для
   залогиненного интерфейса ниже. Раньше вместо этого .auth-screen сама
   считала себе высоту как "100vh минус высота шапки" (min-height:
   calc(100vh - var(--topbar-height))) — расчёт держался на предположении,
   что перед .auth-screen ВСЕГДА стоит только .topbar. Когда баннер о
   переходе на платформу переехал сюда же, между шапкой и .auth-screen
   (см. app.js), это предположение сломалось: реальная высота содержимого
   стала topbar + баннер + calc(100vh - topbar) — то есть БОЛЬШЕ 100vh
   ровно на высоту баннера, откуда лишняя прокрутка и "сдвинутый" вниз
   фон-градиент .auth-screen (это и читалось как несовпадающий/светлее
   фон вокруг баннера). flex: 1 ниже сам разбирается, сколько места
   реально осталось — независимо от того, показан баннер или нет и
   какой он высоты (зависит от языка/переноса строк). */
.public-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.auth-screen {
  flex: 1;
  /* Без min-height: 0 flex-элемент по умолчанию не может сжаться меньше
     содержимого (min-height: auto) — с центрированной карточкой это не
     страшно на практике, но обнуляем явно, чтобы flex считал доступное
     место корректно в любом случае. */
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Было "circle at 15% 15%" — центр глубоко в верхнем левом углу
     ПОЛНОШИРИННОГО (проверено: .auth-screen растянут ровно на 100% ширины
     экрана, никакого сужения/сдвига контейнера нет) блока. На узких
     экранах разница малозаметна, но на широких десктопных мониторах
     (2000px+) такая точка приходится всего в 300-400px от левого края —
     то есть заметно ЛЕВЕЕ центрированной карточки входа, а вся правая
     часть экрана (где на самом деле light card) остаётся почти чистым
     --color-bg (#faf9f7 — этот цвет ПОЧТИ белый, поэтому и читается как
     "фон отсутствует"). Симметрии тут никогда не было — она и не могла
     появиться при фиксированной точке привязки в процентах от одного угла:
     чем шире экран, тем сильнее видимый перекос в сторону этого угла.
     center вместо 15% 15% — гарантирует одинаковое расстояние до обеих
     боковых границ НЕЗАВИСИМО от ширины экрана (симметрия по построению,
     а не только "на глаз" при какой-то конкретной ширине), и совпадает
     с точкой, где и так центрируется сама карточка входа (justify-content:
     center выше) — тёплое пятно оказывается точно за карточкой. */
  background:
    radial-gradient(circle at center, var(--color-accent-light), transparent 45%),
    var(--color-bg);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 32px 28px;
}

/* Собственного логотипа внутри .auth-card больше нет — он теперь виден
   в постоянной шапке (.topbar) над этим экраном, см. .auth-screen выше
   и renderPublicTopbarHtml() в app.js; дублировать его внутри карточки
   было бы избыточно (два логотипа подряд). */
.auth-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 24px;
}

.auth-tabs {
  display: flex;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.auth-tab.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.field input,
.field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: 15px;
  color: var(--color-text);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* Кольцо фокуса — это АКТИВНОЕ СОСТОЯНИЕ поля (не фоновая подложка), его
   оставляем оранжевым и в тёмной теме, но --color-accent-light там теперь
   нейтральный тёмно-серый (см. body.dark-theme в начале файла — исключение
   именно для подложек, не для этого случая), поэтому здесь отдельно
   задаём полупрозрачное оранжевое свечение поверх текущего --color-accent,
   а не переиспользуем эту переменную. */
body.dark-theme .field input:focus,
body.dark-theme .field select:focus {
  box-shadow: 0 0 0 3px rgba(255, 182, 72, 0.3);
}

.field input[readonly] {
  color: var(--color-text-muted);
  cursor: default;
}

.field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.btn-primary {
  width: 100%;
  padding: 13px 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn-primary:hover {
  background: var(--color-accent-dark);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-error {
  background: var(--color-danger-light);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.auth-error.visible {
  display: block;
}

.auth-success {
  background: var(--color-success-light);
  color: var(--color-success);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.auth-success.visible {
  display: block;
}

.auth-forgot-link {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}

.auth-forgot-link a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.auth-forgot-link a:hover {
  color: var(--color-accent-dark);
}

/* ================================================================
   ЗАЛОГИНЕННЫЙ ИНТЕРФЕЙС: шапка + контент + нижняя навигация
   ================================================================ */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Шапка ---- */
.topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* Кликабелен (ведёт на главную, см. navigate('/') в app.js) — курсор
     явно намекает на это, иначе выглядел бы как обычный статичный текст. */
  cursor: pointer;
}

.logo span {
  color: var(--color-accent);
}

/* Логотип-картинка (когда для домена задан logoUrl в getSiteLocale()) —
   заменяет текстовый .logo, но должен вписываться в ту же строку шапки
   по высоте. Было 24px, увеличено вдвое до 48px (см. --topbar-height
   выше — шапка подросла вместе с логотипом). width не задаём — img без
   явной ширины сохраняет исходные пропорции файла сама, растягивать
   через width: auto тут не нужно, это и есть поведение по умолчанию. */
.logo-image {
  height: 48px;
  display: block;
}

/* .topbar-left — логотип + переключатель темы как ОДНА группа слева.
   .topbar-inner устроен как justify-content: space-between ровно на ДВА
   элемента (левая группа / .topbar-right), поэтому логотип и кнопку темы
   нельзя просто положить в .topbar-inner по отдельности — так они
   разъехались бы на всю ширину шапки вместо того, чтобы идти вплотную
   друг к другу слева. На публичных экранах (renderPublicTopbarHtml) этот
   же .topbar-left — единственный ребёнок .topbar-inner, там space-between
   просто не с чем сравнивать, группа остаётся у левого края как обычно. */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Переключатель темы — СЛЕВА в шапке, сразу после логотипа (см. разметку
   в renderPublicTopbarHtml()/renderShell() в app.js), по аналогии с
   PerfectPanel. Круглая кнопка-иконка — тот же визуальный язык, что и у
   .btn-burger (справа в шапке), просто на другом краю. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- Информационная строка баланса в меню (см. renderMenuBalanceHtml
   в app.js) — раньше баланс был отдельной плашкой .balance-pill в шапке,
   теперь первым пунктом внутри бургера/десктопного ряда, НЕ кликабельна
   (простой <div>, не <a>/<button>). display:flex + justify-content:
   space-between — подпись "Баланс" слева, сумма справа, тот же приём,
   что и в остальных строках-парах на сайте (.order-row и т.п.). ---- */
.menu-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.menu-balance-label {
  color: var(--color-text-muted);
}

.menu-balance-value {
  color: var(--color-accent-dark);
  font-weight: 700;
  white-space: nowrap;
}

/* В бургере (вертикальный список) — полноразмерная строка с отступами и
   тонкой границей снизу, отделяющей её от НАСТОЯЩИХ (кликабельных)
   пунктов меню под ней, читается как отдельный блок, а не просто ещё
   один пункт списка. */
.burger-dropdown .menu-balance {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}

/* В десктопном горизонтальном ряду — без своих отступов/границы: gap
   самого .topbar-nav (20px между всеми пунктами) уже даёт достаточное
   визуальное разделение, лишняя рамка в один ряд с обычным текстом
   выглядела бы чужеродно. */
.topbar-nav .menu-balance {
  gap: 6px;
}

/* ---- Бургер-меню (кнопка + выпадающий список в шапке) ---- */
.burger-menu {
  position: relative;
}

.btn-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 999px;
  cursor: pointer;
}

.btn-burger svg {
  width: 18px;
  height: 18px;
}

.btn-burger:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.burger-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: 6px;
  flex-direction: column;
  /* Выше топбара/контента (topbar сам не задаёт z-index больше 10) —
     выпадающее меню не должно оказаться под чем-то на странице. */
  z-index: 20;
}

/* БАГ, который тут был: "display: flex;" стоял прямо в .burger-dropdown
   безусловно — он побеждал встроенный браузерный [hidden] { display: none }
   (та же специфичность 0,1,0, но правило автора идёт позже в каскаде),
   поэтому меню визуально было развёрнуто ВСЕГДА, что бы ни делал JS с
   атрибутом hidden. Правильно — включать flex ТОЛЬКО когда hidden снят:
   тогда при hidden браузер сам скрывает элемент через display:none,
   а без hidden срабатывает именно этот display:flex. */
.burger-dropdown:not([hidden]) {
  display: flex;
}

.burger-item {
  /* .burger-item вешается и на <a> (пункты меню/"Поддержка"), и на <button>
     ("Выйти" — см. getMenuItemsHtml/data-action="logout" в app.js: это
     действие, а не переход по ссылке) — здесь же сбрасываем стандартные
     стили браузерной <button>, чтобы оба выглядели одинаково. Для <a>
     эти свойства и так были фактическим поведением по умолчанию, так что
     на неё эта строка визуально не влияет. */
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.burger-item:hover {
  background: var(--color-bg);
}

/* "Выйти" — единственный пункт-ДЕЙСТВИЕ в меню (остальные — переходы),
   поэтому и цветом при наведении отличается: то же красное предупреждение,
   что раньше было у отдельной кнопки .btn-logout в шапке. Специфичность
   выше, чем у .burger-item:hover/.topbar-nav-item:hover — побеждает их. */
.menu-item[data-action="logout"]:hover {
  color: var(--color-danger);
}

/* ---- Десктопное горизонтальное меню (замена бургера на широких экранах) ----
   Тот же список пунктов (см. getMenuItemsHtml() в app.js), просто как
   обычные текстовые ссылки в ряд вместо выпадашки — скрыто по умолчанию,
   включается в медиа-запросе для десктопа ниже (там же прячется бургер). */
.topbar-nav {
  display: none;
  align-items: center;
  gap: 20px;
}

.topbar-nav-item {
  /* Тот же приём, что и у .burger-item — этот класс тоже вешается и на
     <a>, и на <button> ("Выйти"), сбрасываем стандартные стили кнопки. */
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.topbar-nav-item:hover,
.topbar-nav-item.active {
  color: var(--color-accent-dark);
}

/* ---- Контентная область ---- */
.app-content {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /* Нижний паддинг контента должен ровно совпадать с полной высотой
     .app-nav (bottom-nav-height + 20px базового запаса + safe-area),
     иначе последние строки контента прячутся под панелью либо остаётся
     лишний пустой хвост. Числа должны быть теми же, что и в .app-nav ниже. */
  padding: 20px 16px calc(var(--bottom-nav-height) + 20px + env(safe-area-inset-bottom) + 24px);
}

/* ---- Навигация: по умолчанию (мобильный вид) — фиксированная снизу ---- */
.app-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* ИСПРАВЛЕНИЕ (проблема 4): раньше здесь был min-height + меньший
     safe-area-паддинг (12px) — этого на практике не хватило на iPad:
     показания браузера по safe-area-inset-bottom там занижены/нулевые
     в части сценариев (домашний индикатор, полноэкранный Safari), из-за
     чего нижние пункты меню всё равно частично перекрывались системной
     зоной. Теперь высота панели задаётся ЯВНО и детерминированно:
     фиксированная высота "иконки+подписи" (--bottom-nav-height) плюс
     ЩЕДРЫЙ базовый отступ 20px (было 12px) поверх системной зоны, плюс
     сама safe-area (когда браузер её всё же сообщает). height (а не
     min-height) + padding-bottom с той же safe-area-частью гарантируют,
     что кликабельные .nav-item (внутри содержимого коробки, без учёта
     padding) всегда остаются строго НАД нижним краем экрана минимум на
     20px, независимо от того, вернул браузер safe-area-inset-bottom
     корректно или нет. */
  height: calc(var(--bottom-nav-height) + 20px + env(safe-area-inset-bottom));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  background: var(--color-surface);
  box-shadow: 0 -2px 10px rgba(30, 20, 0, 0.06);
  display: flex;
  z-index: 10;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.nav-item svg {
  width: 22px;
  height: 22px;
}

.nav-item.active {
  color: var(--color-accent);
}

/* Сумма баланса на кнопке "Баланс" нижней навигации (см. formatBalanceForNav
   в app.js) — ВСЕГДА оранжевая, независимо от .nav-item.active (активна
   вкладка "Баланс" сейчас или нет): это не обычная подпись пункта меню,
   а конкретная цифра, которая должна выделяться среди остальных серых
   подписей, поэтому со своим собственным цветом, а не просто наследует
   .nav-item/.nav-item.active. */
.nav-balance-value {
  color: var(--color-accent);
}

/* ---- Карточки-заглушки для view'ов ---- */
.page-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 32px 24px;
  text-align: center;
}

.page-card .page-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  color: var(--color-accent);
}

.page-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.page-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Раньше растягивалась на всю ширину контента и была неоправданно крупной
   для простого "текущий баланс: X" — уменьшили примерно в 5 раз по площади,
   но получилось СЛИШКОМ мелко (плохо читалось). Текущие значения — золотая
   середина между исходным огромным (padding 28px 24px, сумма 34px) и
   прошлым слишком мелким (padding 8px 20px, сумма 18px) вариантами:
   разумный компактный размер, но уже комфортно читаемый. width: fit-content
   + margin: 0 auto по-прежнему центрируют её по горизонтали (не во всю
   ширину), text-align — по той же причине, что и раньше (иначе label/value
   повисли бы слева внутри неширокой карточки). */
.balance-hero {
  background: linear-gradient(135deg, var(--color-accent) 0%, #f7b94e 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 14px 22px;
  margin: 0 auto 16px;
  box-shadow: var(--shadow-soft);
  width: fit-content;
  max-width: 100%;
  text-align: center;
}

.balance-hero .label {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 600;
}

.balance-hero .value {
  font-size: 24px;
  font-weight: 800;
  margin-top: 2px;
}

/* ================================================================
   ФОРМА СОЗДАНИЯ ЗАКАЗА (вкладка "Заказать")
   ================================================================ */

.order-form-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 24px 20px;
}

.order-description,
.method-description {
  background: var(--color-accent-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.order-description strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent-dark);
  margin-bottom: 4px;
}

.order-description p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

.method-description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

/* Глобально ссылки наследуют цвет текста и без подчёркивания (см. базовый
   `a` в начале файла) — внутри блока с описанием способа оплаты это сделало
   бы кликабельную ссылку неотличимой от обычного текста, поэтому здесь
   явно возвращаем акцентный цвет и подчёркивание. */
.order-description a,
.method-description a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* ================================================================
   СПОСОБЫ ПОПОЛНЕНИЯ (вкладка "Баланс")
   ================================================================ */

.balance-methods-card h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

/* Один способ оплаты — ОДНА карточка целиком (название + форма суммы или
   инструкция внутри неё же, см. renderMethodRow в balance.js) — раньше
   это были ДВЕ отдельные подложки (карточка названия + отдельная
   .order-form-card в соседнем слоте), теперь одна общая рамка/тень на
   весь блок, без внутреннего разделения линией. Способы больше не
   кликабельны (ни у yookassa, ни у manual/crypto нечего "открывать" —
   всё видно сразу), поэтому никакого cursor/hover-состояния тут нет.
   margin-bottom между карточками способов — раньше на .payment-method-row
   (отдельной обёртки для пары карточка+слот, которой теперь нет), теперь
   прямо здесь через смежный селектор. */
.payment-method-item {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-soft);
}

.payment-method-item + .payment-method-item {
  margin-top: 12px;
}

.payment-method-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}

/* ---- История платежей: карточки, отступ между ними такой же, как у
   заказов (order-card сам по себе уже даёт margin-bottom) ---- */
.balance-history h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

.order-banner {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  display: none;
}

.order-banner.visible {
  display: block;
}

.order-banner-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.order-banner-error {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

/* ---- Баннер о переходе на новую платформу ----
   Общий для всего приложения (рисуется в app.js под шапкой — см.
   renderMigrationBannerHtml()), поэтому виден на ЛЮБОМ экране, включая
   логин, а не только внутри одной вкладки. Заметная, но НЕ блокирующая
   инфо-плашка: обычный блок в потоке страницы (не модалка, не
   position:fixed поверх контента) — пользователь может продолжать
   пользоваться сайтом, просто прокрутив мимо неё. Голубой фон
   (--color-info-light), а не красный/жёлтый-тревожный — это не ошибка.
   margin (а не padding у родителя) — банер лежит НЕПОСРЕДСТВЕННО в
   #app, у которого своего отступа нет (в отличие от .app-content/
   .auth-screen), поэтому отступ от краёв экрана задаём тут же. */
.migration-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-info-light);
  /* Тонкая рамка — --color-info-light (#eaf3fe) сам по себе очень светлый
     и близок по яркости к --color-bg (#faf9f7) страницы, из-за чего без
     явной границы баннер визуально не читался как отдельный блок, а
     смешивался с фоном ("будто фон сдвинулся/стал светлее" — ровно так
     это и описали). Рамка даёт чёткую границу независимо от того,
     насколько близки оттенки фона баннера и страницы. */
  border: 1px solid rgba(47, 111, 209, 0.25);
  color: var(--color-info);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.migration-banner p {
  margin: 0;
}

/* ИСПРАВЛЕНИЕ (проблема 2): раньше кнопка была прозрачной и стояла сразу
   после текста в той же строке — визуально читалась как продолжение
   фразы, а не как кнопка. Теперь: (1) своя строка снизу (flex-direction:
   column у родителя + align-self: flex-end — кнопка справа, отдельно от
   текста), (2) непрозрачный белый фон с рамкой в цвет баннера — чёткий
   контраст с голубым фоном самого баннера, (3) увеличенный padding
   (8px 18px вместо 4px 10px) и жирный шрифт — читается как настоящая
   кнопка, а не как ссылка или часть текста. */
.migration-banner-close {
  align-self: flex-end;
  border: 1.5px solid var(--color-info);
  background: var(--color-surface);
  color: var(--color-info);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.migration-banner-close:hover {
  background: var(--color-info);
  color: #fff;
}

/* ================================================================
   СПИСОК ЗАКАЗОВ (вкладка "Заказы")
   ================================================================ */

.orders-filters {
  display: flex;
  flex-wrap: wrap;
  /* Раньше кнопки жались к левому краю (flex-start по умолчанию) —
     выравниваем по центру ряда фильтров. */
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.status-filter-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Активный фильтр — сплошная заливка цветом ТЕКСТА темы, текст — цветом
   ФОНА темы (не акцентный оранжевый: тут это выбор одного варианта из
   списка, а не призыв к действию). Раньше цвет текста был захардкожен
   как #fff ("тёмный фон + белый текст") — в тёмной теме это сломалось бы:
   --color-text там сам становится СВЕТЛЫМ (это же основной цвет текста
   страницы), то есть фон кнопки стал бы светлым, а текст остался бы
   жёстко белым — почти невидимым на светлом фоне. var(--color-bg) вместо
   #fff — тот же "инвертированный" вид в обеих темах: цвета bg/text просто
   меняются местами относительно того, что светлее в конкретной теме. */
.status-filter-btn.active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.orders-search-field {
  margin-bottom: 16px;
}

.order-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 6px 18px;
  margin-bottom: 14px;
}

.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.order-row:last-child {
  border-bottom: none;
}

.order-label {
  flex: none;
  font-size: 13px;
  color: var(--color-text-muted);
}

.order-value {
  font-weight: 700;
  font-size: 14px;
  text-align: right;
  /* Ссылки заказа могут быть длинными и без пробелов — не должны вылезать
     за карточку на узких мобильных экранах. */
  word-break: break-all;
}

.order-value-refund {
  color: var(--color-success);
}

/* Дочерние заказы bundle — визуально "вложены" под родителя: отступ +
   цветной бордер слева, более лёгкая тень, чтобы карточка читалась как
   часть родительской покупки, а не как самостоятельный заказ. */
.order-children {
  margin-left: 20px;
}

.order-card-child {
  padding-left: 14px;
  border-left: 3px solid var(--color-accent);
  box-shadow: none;
  background: var(--color-bg);
}

/* Едва заметный оттенок фона всей карточки по статусу — см. normalizeOrderStatus
   в orders.js. Идёт ПОСЛЕ .order-card/.order-card-child в файле, чтобы
   переопределять их фон при той же специфичности селектора. */
.order-card-tint-completed {
  background: var(--color-success-light);
}

.order-card-tint-canceled {
  background: var(--color-danger-light);
}

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill-green {
  background: var(--color-success-light);
  color: var(--color-success);
}

.status-pill-yellow {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.status-pill-purple {
  background: var(--color-partial-light);
  color: var(--color-partial);
}

.status-pill-red {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

/* ================================================================
   ПЛАВАЮЩИЕ КНОПКИ СВЯЗИ (Telegram/WhatsApp) — видны всегда, на любом
   экране (логин, восстановление пароля, основное приложение), поверх
   всего остального. Живут вне #app в index.html, JS их не трогает.
   ================================================================ */
.contact-buttons {
  position: fixed;
  right: 16px;
  /* На мобильном/планшете (до 1366px включительно) нижняя навигация
     фиксирована внизу экрана — поднимаем кнопки выше неё, с запасом,
     чтобы не перекрывать её пункты. На десктопе (см. медиа-запрос ниже)
     такой навигации уже нет, там достаточно обычного отступа от края. */
  bottom: calc(var(--bottom-nav-height) + 16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Выше шапки/навигации (у них z-index: 10) — это простые ссылки, а не
     модальное окно, поэтому конфликтовать с интерактивными элементами
     страницы (полями форм, кнопками) им не с чего. */
  z-index: 50;
}

.contact-button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-lift);
  transition: transform 0.15s ease;
}

.contact-button:hover {
  transform: scale(1.06);
}

.contact-button svg {
  width: 26px;
  height: 26px;
}

.contact-button-telegram {
  background: #0088cc;
}

.contact-button-whatsapp {
  background: #25d366;
}

/* ================================================================
   ДЕСКТОП: шире 1366px — верхняя горизонтальная навигация,
   контент по центру с ограниченной максимальной шириной.
   ВАЖНО: min-width: 1367px, поэтому 1024px и 1366px (iPad Pro
   в обеих ориентациях) остаются в мобильном виде, как и требуется.
   ================================================================ */
@media (min-width: 1367px) {
  /* Без фиксированной нижней панели контенту больше не нужен запас снизу. */
  .app-content {
    padding: 32px 24px 40px;
  }

  /* На десктопе баннер выравниваем по той же сетке, что и .app-content
     (max-width 1100px по центру), а не тянем во всю ширину экрана. */
  .migration-banner {
    max-width: 1100px;
    margin: 24px auto 0;
  }

  /* Нижней фиксированной навигации на десктопе уже нет (см. .app-nav
     ниже) — кнопкам связи незачем подниматься так высоко над краем. */
  .contact-buttons {
    bottom: 24px;
  }

  /* ИСПРАВЛЕНИЕ (проблема 3): раньше на десктопе .app-nav просто менял
     раскладку (с "прижат снизу" на "горизонтальный ряд под шапкой") и
     оставался единственной навигацией. Теперь у нас есть отдельное
     десктопное меню в шапке — .topbar-nav (текстовые пункты, включая
     "Поддержка", которой в .app-nav никогда не было — это не роут).
     Держать оба сразу избыточно и сбивает с толку, поэтому на десктопе
     .app-nav скрывается целиком, а .topbar-nav занимает его место. */
  .app-nav {
    display: none;
  }

  /* Бургер — мобильный/планшетный элемент управления, на десктопе все
     4 пункта и так видны текстом в шапке, кнопка-гамбургер не нужна. */
  .burger-menu {
    display: none;
  }

  /* А вот и сам десктопный текстовый ряд — по умолчанию (см. правило
     .topbar-nav вне медиа-запроса) display: none, здесь включаем. */
  .topbar-nav {
    display: flex;
  }

  .nav-item {
    flex: none;
    flex-direction: row;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 14px;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
  }

  .nav-item svg {
    width: 18px;
    height: 18px;
  }

  .nav-item.active {
    background: var(--color-accent);
    color: #fff;
  }
}