/* =========================================================================
   Кабинет вебмастера — базовые токены и минимальная база.

   Выжимка из хаба (только чтение, порт вручную): переменные темы — из
   app/ui/static/theme.css (в самом app.css цвета уже не живут — комментарий
   в файле хаба: «Цветовые токены и тени теперь живут в theme.css»), сброс и
   .btn/.btn-primary/.btn-secondary — из app/ui/static/app.css. .wrap/.topbar/.err/.muted
   в app.css буквально НЕТ (там сайдбарный лейаут — они там не нужны): взяты из
   идентичного паттерна «страницы без сайдбара», которым в хабе пользуются
   analyzer (app/modules/analyzer/static/dashboard.css) и calculator
   (app/modules/calculator/static/calculator.css) — их значения совпадают.

   Две темы. Светлые значения — в :root, тёмные — в :root[data-theme="dark"] (порт из
   app/ui/static/theme.css хаба, только чтение). Атрибут ставит ТОЛЬКО мини-оболочка
   (app/templates/mini_shell.html, до парсинга CSS — иначе первый кадр светлый). Веб-
   оболочка его не ставит вовсе, поэтому веб остаётся светлым сам собой.
   Источник темы в мини-аппе с 02.09.2026 — ручной выбор тумблера ☀/🌙 из localStorage,
   а пока выбора нет — tg.colorScheme (как в шапке хаба, webview_layout.html). */

:root {
  /* spacing/radius/шрифт — не «тема» (не цвет), но без них .btn/.wrap/.topbar/.page-header
     не собрать 1:1: те же токены есть в app.css (:root, spacing/radius/font). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
               "Helvetica Neue", Arial, sans-serif;

  /* цвет/тень — светлые значения theme.css (:root, без блока [data-theme="dark"]) */
  --bg: #F5F7FA;
  /* Фон рейла/тёмной шапки (theme.css хаба: --bg-rail). Нужен шапке мини-аппа
     (.mini-brand в mini_shell.html): она тёмная в ОБЕИХ темах, как сайдбар хаба. */
  --bg-rail: #1A1A2E;
  --ink: #1F2733;
  --muted: #6B7280;
  --faint: #8A94A2;
  --line: #E5E7EB;
  --line-soft: #F0F0F0;
  --card: #FFFFFF;
  --card-2: #F7F9FC;
  --accent: #00B5E7;
  --accent-d: #1685C4;
  --accent-soft: #DBEAFE;
  --good: #22C55E;
  --warn: #F59E0B;
  --danger: #EF4444;
  --danger-bg: #FEE2E2;
  --up: #22C55E;
  --down: #EF4444;
  --grad: linear-gradient(135deg, #3B7BFB 0%, #00B5E7 100%);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .06);
}

/* Тёмная тема — порт блока :root[data-theme="dark"] из app/ui/static/theme.css хаба
   (только чтение). Атрибут ставит мини-оболочка; веб его не ставит, и этот блок для
   веба мёртв. Соответствие имён: наш --ink — это --txt хаба, --accent — --cyan,
   --accent-soft — --info-bg, --up/--down — --good/--danger. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0F19;
  --bg-rail: #0C1120;
  --ink: #E8ECF5;
  --muted: #9AA6BC;
  --faint: #6B7689;
  --line: rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.055);
  --card: #121A2B;
  --card-2: #0F1626;
  --accent: #00B5E7;      /* cyan один и тот же в обеих темах (хаб: --cyan) */
  --accent-d: #46C4F5;
  --accent-soft: rgba(76,134,255,.12);
  --good: #34D399;
  --warn: #FBBF24;
  --danger: #F87171;
  --danger-bg: rgba(248,113,113,.14);
  --up: #34D399;
  --down: #F87171;
  --grad: linear-gradient(135deg, #4C86FF 0%, #00B5E7 100%);
  --shadow-md: 0 20px 60px rgba(0,0,0,.30);
}

/* =========================================================================
   Сброс (app.css, секция Reset)
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden (и element.hidden = true из JS) обязан скрывать — ВСЕГДА. Браузер
   реализует его правилом [hidden]{display:none} из своей UA-таблицы, а она слабее
   любого авторского стиля: компонент с собственным display (.sk, .card, .status)
   молча превращает hidden в no-op без единой ошибки в консоли. Чиним примитив один
   раз и глобально — !important нужен, чтобы перебить ЛЮБОЙ компонентный display. */
[hidden] { display: none !important; }

/* Айфон (и Chrome на Android) сам увеличивает шрифт в блоке, который заметно шире
   вьюпорта, — «text autosizing». Широкая таблица под это попадает: замер 06.09.2026,
   окно счёта на 390px — таблица 606px, и текст 12.5px рисовался примерно как 17px,
   вперемешку с нормальным текстом страницы. Правим глобально: текст в кабинете должен
   быть ровно того размера, который задан. Прокрутке вбок это не мешает — увеличение
   отменяется, а не ширина. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  /* Фон страницы — токен: тёмный блок перекрашивает его вместе с остальными. */
  background: var(--bg);
  line-height: 1.45;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

/* =========================================================================
   Шапка периода (app.css: .page-header/.page-header__right) — база для
   строки контролов над блоками кабинета; per-page правки — в cabinet.css.
   ========================================================================= */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.page-header__right { display: flex; gap: var(--space-2); align-items: center; }

/* =========================================================================
   Buttons (app.css)
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.05s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Первичное действие — cyan-акцент (тот же выбор цвета, что в хабе у analyzer/webmaster:
   «Первичное действие = cyan-акцент analyzer, не brand-синий», см. .wm-page комментарий
   в dashboard.html хаба) — не app.css-синий --brand-500, которого в нашем списке токенов нет. */
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--accent-d); border-color: var(--accent-d); box-shadow: none; }
.btn-primary:active:not(:disabled) { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }

.btn-secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.btn-secondary:hover { background: var(--card-2); color: var(--ink); box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08); }
.btn-secondary:active:not(:disabled) { box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.08); }

/* =========================================================================
   Layout: .wrap/.topbar (паттерн analyzer/calculator — страница без сайдбара)
   ========================================================================= */
.wrap { padding: 18px 20px 40px; }

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 11px 20px;
  display: flex;
  align-items: center;
  /* space-between — не из хаба буквально: там .topbar рассчитан на .spacer{flex:1}
     между брендом и правым кластером, у нас в shell.html только два прямых ребёнка
     (.brand и .topbar__right) — этим и толкаем правый кластер к краю без лишнего div. */
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* =========================================================================
   .err/.muted (analyzer/calculator)
   ========================================================================= */
.err {
  background: var(--danger-bg);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12.5px;
}

.muted { color: var(--muted); }