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

   Выжимка из хаба (только чтение, порт вручную): переменные темы — из
   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) — их значения совпадают.

   Только светлая тема: переключателя data-theme в сервисе нет (Mini App и тёмная
   тема в v1 не нужны — их запускают только внутри Telegram, а здесь обычный браузер).
   Сайдбар, .container (лейаут с сайдбаром), auth-shell — не переносятся: их в
   сервисе нет вовсе, шапка — плоский .topbar, форма входа — своя вёрстка (login.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"]) */
  --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;
  --up: #22C55E;
  --down: #EF4444;
  --grad: linear-gradient(135deg, #3B7BFB 0%, #00B5E7 100%);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .06);
}

/* =========================================================================
   Сброс (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; }

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  /* Своего --bg (фон страницы) в переданном списке токенов нет — литерал
     светлой темы theme.css (--bg:#F5F7FA). */
  background: #F5F7FA;
  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 {
  /* --danger-bg (мягкий фон) в списке токенов нет — литерал светлой темы theme.css. */
  background: #FEE2E2;
  color: var(--danger);
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12.5px;
}

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