/*
 * PTG Design System v2 — «чёрно-белый премиум» (docs/STYLE-PTG.md; токены дословно из PTG Sales src/index.css:13-72).
 * Подключается первым: задаёт токены, базовую типографику и утилитарные классы; прежние переменные модуля (--panel, --line,
 * --primary, --ok, --err, --warn, --muted, --side…) отображены на токены, поэтому все существующие селекторы продолжают
 * работать. Терминал ТСД (body.theme-terminal) — тёмный в палитре PTG (решение владельца 10.10.2026): чёрный фон,
 * белые плашки активного, статусы on-dark.
 */
:root {
  /* Палитра — тёплые нейтрали */
  --black: #0c0b0a;
  --ink: #1a1815;
  --gray-900: #2b2822;
  --gray-700: #3a3733;
  --gray-500: #7d7871;
  --gray-400: #a09a92;
  --gray-300: #d6d2cb;
  --gray-200: #e8e5df;
  --gray-100: #f4f3f0;
  --gray-50:  #faf9f7;
  --white: #ffffff;

  /* Семантические */
  --bg: var(--gray-100);
  --surface: var(--white);
  --surface-sunken: var(--gray-50);
  --text: var(--ink);
  --text-muted: #5f5a52;
  --text-faint: #726c63;
  --border: #ddd8d0;
  --border-strong: #beb8ac;
  --accent: var(--black);

  /* Статусы: цвет несёт только смысл */
  --green: #1f8a4d;
  --green-bg: #e4f4ea;
  --amber: #b8730a;
  --amber-bg: #fbf0dc;
  --red: #c0392b;
  --red-bg: #fbe8e6;
  /* Синий — только «выбрано вручную» */
  --blue: #1d63d8;
  --blue-strong: #174ea6;
  --blue-bg: #e8effc;
  --blue-soft: rgba(29, 99, 216, 0.10);
  /* Статусы на тёмном */
  --green-on-dark: #7bd88f;
  --amber-on-dark: #f0b64a;
  --red-on-dark: #f08a7a;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow-sm: 0 1px 2px rgba(12, 11, 10, 0.04);
  --shadow: 0 4px 16px rgba(12, 11, 10, 0.06);
  --shadow-lg: 0 18px 48px rgba(12, 11, 10, 0.10);

  --sans: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Прежние имена переменных модуля → токены PTG */
  --panel: var(--surface);
  --muted: var(--text-muted);
  --line: var(--border);
  --primary: var(--black);
  --primary-text: var(--white);
  --ok: var(--green);
  --err: var(--red);
  --warn: var(--amber);
  --side: var(--surface);
  --side-text: var(--text);
  --side-active: var(--gray-100);

  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Терминал ТСД — тёмная тема в палитре PTG */
body.theme-terminal {
  --bg: var(--black);
  --surface: #1a1815;
  --surface-sunken: #141210;
  --panel: var(--surface);
  --text: var(--gray-100);
  --text-muted: var(--gray-400);
  --text-faint: var(--gray-500);
  --muted: var(--text-muted);
  --border: var(--gray-700);
  --border-strong: var(--gray-500);
  --line: var(--border);
  --accent: var(--white);
  --primary: var(--white);
  --primary-text: var(--black);
  --green: var(--green-on-dark);
  --amber: var(--amber-on-dark);
  --red: var(--red-on-dark);
  --ok: var(--green);
  --warn: var(--amber);
  --err: var(--red);
  --green-bg: rgba(123, 216, 143, .16);
  --amber-bg: rgba(240, 182, 74, .16);
  --red-bg: rgba(240, 138, 122, .16);
  --blue-bg: rgba(29, 99, 216, .22);
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.025em; color: var(--text); }
h1 { font-size: 27px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--gray-500); }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* Цифры: моноширинные, табличные — колонки выравниваются по разрядам */
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Надзаголовок секции / шапка таблицы */
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }

/* Прогресс */
.progress { height: 7px; background: var(--gray-200); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 99px; background: var(--black); transition: width 0.4s ease; }
body.theme-terminal .progress { background: var(--gray-700); }
body.theme-terminal .progress-fill { background: var(--white); }

/* Чип «выбрано вручную» — единственный цвет вне чёрно-белой гаммы */
.chip-on { background: var(--blue); color: var(--white); border: 1px solid var(--blue); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.3s ease; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 24px; height: 24px; border: 3px solid var(--gray-200); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}

/* Логотип PTG — только разметкой (векторного файла нет): чёрный квадрат с «PTG» и вордмарк */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 9px; background: var(--black); color: var(--white); flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 16px; letter-spacing: -0.05em;
}
.logo-text { line-height: 1.1; }
.logo-name { font-weight: 800; font-size: 15px; color: var(--text); }
.logo-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; }
.logo-small .logo-mark { width: 32px; height: 32px; font-size: 14px; }
/* Инверсия на тёмной панели (экран входа, Терминал) */
.logo-invert .logo-mark { background: var(--white); color: var(--black); }
.logo-invert .logo-name { color: var(--white); }
.logo-invert .logo-sub { color: rgba(255, 255, 255, .55); }