/* ============================================================================
   TearCraft Admin — дизайн-система Isaev Labs (Claude Design, «Admin — All
   Pages» + «Finance — Final», сентябрь 2026).
   Канва #faf7f0, карточки #fffdf8 — светлее канвы, а не вровень с ней:
   в прошлой версии карточка была равна канве и держалась на одной hairline,
   из-за чего на длинных вкладках терялась граница между блоками. Чернила
   #1a1917, единственный главный акцент — бирюза #1f6b7a (ссылки isaevlabs.com).
   Заголовки — Fraunces, текст и числа — Bricolage Grotesque с tabular-nums.
   Моноширинный оставлен узко: бейджи и идентификаторы (см. --font-mono).
   ========================================================================== */

:root {
  --bg: #faf7f0;               /* канва */
  --bg-elev: #fffdf8;          /* карточка — светлее канвы */
  --bg-elev-2: #f1ede4;        /* подложки: шапки таблиц, контейнер подвкладок */
  --surface-card: #f1ede4;     /* активные плашки, акцентные блоки */
  --surface-hover: #f5f1e8;
  --zebra: #fbf9f4;            /* чётные строки таблиц */
  --border: #e9e3d6;           /* hairline */
  --border-soft: #efeae0;      /* граница внутри карточки, тише основной */
  --border-strong: #ddd6c8;    /* рамка кнопок и полей */
  --fg: #1a1917;               /* чернила */
  --fg-dim: #4a463f;           /* подписи, тело таблиц */
  --muted-foreground: #8b867b; /* вторичный текст */
  --muted-soft: #a39e92;       /* подстрочник ячеек */
  --muted-faint: #c9c3b6;      /* прочерки, неактивные дни календаря */
  --primary: #1a1917;

  --accent: #1f6b7a;           /* бирюза — единственный главный акцент */
  --accent-strong: #164f5b;    /* бирюза в нажатии и на ховере */
  --accent-soft: #e4eef0;
  --success: #3f8f5e;
  --success-strong: #35784f;
  --success-soft: #e6f0e8;
  --info: #1f6b7a;             /* инфо совпадает с акцентом: две бирюзы рядом
                                  читались как случайность, а не как уровень */
  --info-soft: #e4eef0;
  --violet: #b58a4a;           /* янтарь — третий тёплый тон (имя от старой темы) */
  --violet-soft: #f3ecdc;
  --warning: #b58a4a;
  --warning-light: #f3ecdc;
  --warning-border: rgba(181,138,74,0.38);
  --error: #c65c48;
  --error-soft: #f5e6e2;
  --blue: #4a6fa5;             /* холодная серия графиков: третья линия там,
                                  где зелёный и коралл уже заняты доходом и
                                  расходом, и янтарь сливается с канвой */
  --blue-soft: #e8ecf4;

  /* ТЕКСТ НА ЦВЕТНОЙ ПОДЛОЖКЕ. Сам тон как текст нечитаем: зелёный на своей
     же заливке даёт 3.39 при норме AA 4.5. Каждый вывод получен затемнением
     СВОЕГО базового тона по яркости с сохранением оттенка — до первого
     значения, проходящего AA на собственной подложке. Контраст рядом.
     Бирюза — единственная, кому затемнение не понадобилось. */
  --accent-teal-ink: #1f6b7a;    /* 5.17 на --accent-soft */
  --accent-amber-ink: #846536;   /* 4.58 на --violet-soft */
  --warning-ink: #846536;        /* 4.58 на --warning-light */
  --success-ink: #35784f;        /* 4.55 на --success-soft */
  --error-ink: #ad4936;          /* 4.57 на --error-soft */
  --blue-ink: #486ca0;           /* 4.51 на --blue-soft */
  --muted-ink: #706b62;          /* 4.53 на --surface-card */

  --dark: #1c1a16;             /* тёмные продуктовые поверхности (плеер записей) */
  --dark-elevated: #272420;
  --on-dark: #faf7f0;
  --on-dark-soft: #a09d96;

  --header-h: 76px;            /* единая высота шапки и брендинг-блока сайдбара */
  /* Шкала радиусов из дизайна. Прошлая версия намеренно держала только
     4/8/12/16 и запрещала промежуточные — потому что 9, 10 и 14 были
     рассыпаны по файлу бессистемно. Здесь у каждого радиуса своя роль, и
     ступени идут подряд: чем мельче элемент, тем меньше скругление. */
  --radius-lg: 16px;           /* карточки и крупные контейнеры */
  --radius: 12px;              /* вложенные блоки, контейнер подвкладок */
  --radius-btn: 10px;          /* кнопки, пункты меню */
  --radius-sm: 9px;            /* поля ввода, плашки подвкладок */
  --radius-xs: 6px;            /* чипы, бейджи, мелочь */
  --font: 'Bricolage Grotesque', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  /* Моноширинный в дизайне остался ровно в одном месте — бейдж счётчика в
     меню. Мы держим его ещё и на идентификаторах: код комнаты, хеш коммита,
     IP, версия. Там важно различать 0 и O, 1 и l — в гротеске они сливаются,
     и это ошибка чтения, а не вкусовщина. Числа в KPI и таблицах моно НЕ
     используют: для них есть tabular-nums, см. .num ниже. */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --shadow: 0 1px 3px rgba(26,25,23,0.07);
  --shadow-sm: none;           /* глубина за счёт цвета поверхностей, не теней */
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Числа выравниваются в столбик без моноширинного: одинаковая ширина цифр
   плюс «настоящие» дроби там, где шрифт умеет. Вешать на всё подряд нельзя —
   tabular ломает кернинг в обычном тексте, поэтому только на числовых местах. */
.num, .metric-value, .kpi-value, td.num, th.num,
.fin-kpi-value, .pnl-cell, .pnl-total { font-variant-numeric: tabular-nums lining-nums; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.5;
}

/* Канва плоская: глубина за счёт цвета поверхностей, без градиентов и теней */

::selection { background: var(--accent-soft); color: var(--fg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-faint); }

/* ── Экраны ─────────────────────────────────────────────────────────────── */
.screen { display: none; position: relative; z-index: 1; }
.screen.active { display: flex; }
#login-screen.active { align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
#dashboard-screen.active { flex-direction: row; height: 100vh; overflow: hidden; }

.glass { background: var(--bg-elev); border: 1px solid var(--border); }

/* ── Логин ──────────────────────────────────────────────────────────────── */
.login-card {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: var(--shadow);
}
/* Логин в дизайне не нарисован — собран по его же правилам. Логотип здесь
   оставлен, в отличие от сайдбара: это единственный экран, где панель ещё
   не представилась, и марка продукта работает опознавательным знаком. */
.brand { text-align: center; margin-bottom: 28px; }
.logo-box {
  width: 52px; height: 52px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid rgba(31,107,122,0.3);
  border-radius: var(--radius-lg); color: var(--accent);
}
.logo-box .logo-icon { width: 26px; height: 26px; }
.brand h1 {
  font-family: var(--font-serif); font-size: 26px; font-weight: 400;
  letter-spacing: 0.025em; line-height: 1;
  font-variation-settings: 'opsz' 72, 'SOFT' 40, 'WONK' 0;
}
.brand p {
  color: var(--muted-foreground); font-size: 10.5px; margin-top: 8px;
  letter-spacing: 0.14em; text-transform: uppercase;
}

.input-group { margin-bottom: 16px; }
.input-group label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--fg-dim); margin-bottom: 7px;
}
.input-group label i, .input-group label svg { width: 14px; height: 14px; color: var(--muted-foreground); }
.input-group input {
  width: 100%; padding: 11px 13px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--fg); font-family: var(--font); font-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input-group input::placeholder { color: var(--muted-soft); }
.input-group input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.error-message { color: var(--error); font-size: 13px; min-height: 18px; margin-bottom: 6px; }

.btn-primary {
  width: 100%; padding: 11px 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--on-dark); font-weight: 600; font-size: 14px;
  border: none; border-radius: var(--radius-btn); cursor: pointer;
  transition: filter var(--transition), transform var(--transition);
}
.btn-primary i, .btn-primary svg { width: 16px; height: 16px; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary:active { transform: translateY(1px); }

/* ── Сайдбар ────────────────────────────────────────────────────────────── */
.sidebar {
  width: 244px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: none; border-right: 1px solid var(--border);
  padding: 0 14px 18px;             /* верхний отступ убран — брендинг тянется до самого верха */
}
.sidebar-brand {
  display: flex; align-items: center; position: relative;
  height: var(--header-h);          /* совпадает с высотой шапки → разделители на одной линии */
  padding: 0 0 0 10px; margin-bottom: 8px;
}
/* Разделитель во всю ширину сайдбара (компенсируем боковой padding 14px). */
.sidebar-brand::after {
  content: ""; position: absolute; left: -14px; right: -14px; bottom: 0;
  height: 1px; background: var(--border);
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
/* Набор вместо логотипа: Fraunces на оптическом размере 72 — на крупном opsz
   засечки тоньше и буквы уже, поэтому «ISAEV LABS» читается как вывеска, а не
   как заголовок абзаца. SOFT 40 скругляет концы штрихов, WONK 0 выключает
   характерные наклонные — в капители они выглядят опечаткой. */
.sidebar-brand h2 {
  font-family: var(--font-serif); font-size: 20px; font-weight: 400;
  letter-spacing: 0.025em; line-height: 1; color: #1e1b14;
  font-variation-settings: 'opsz' 72, 'SOFT' 40, 'WONK' 0;
}
.brand-caption {
  font-size: 10.5px; color: var(--muted-foreground);
  letter-spacing: 0.14em; text-transform: uppercase; margin-top: 5px;
}
.login-logo { width: 40px; height: 40px; border-radius: var(--radius); object-fit: cover; }

.sidebar-menu {
  display: flex; flex-direction: column; gap: 2px; margin-top: 16px;
  flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px;
}
.menu-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; background: transparent;
  color: #5f5a52; font-family: var(--font); font-size: 13.5px; font-weight: 400;
  border: 1px solid transparent;    /* рамка заложена и в покое — иначе активный
                                       пункт на 2px выше соседей и меню дёргается */
  border-radius: var(--radius-btn); cursor: pointer; text-align: left; width: 100%;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.menu-item i, .menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted-foreground); }
.menu-item span:not(.badge) { flex: 1; }
.menu-item:hover { background: var(--surface-hover); color: var(--fg); }
.menu-item.active {
  background: var(--bg-elev); color: var(--fg); font-weight: 600;
  border-color: var(--border);
}
.menu-item.active i, .menu-item.active svg { color: var(--accent); }

.badge {
  min-width: 20px; height: 18px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; font-family: var(--font-mono);
  border-radius: var(--radius-xs); background: transparent; color: #6f6a60;
  border: 1px solid var(--border-strong);
}
.badge-rooms { color: var(--accent-teal-ink); border-color: rgba(31,107,122,0.34); background: var(--accent-soft); }
.badge-pending { color: var(--warning-ink); border-color: var(--warning-border); background: var(--warning-light); }

.sidebar-footer {
  display: flex; align-items: center; gap: 10px; position: relative;
  padding-top: 14px; margin-top: 8px;
}
.sidebar-footer::before {
  content: ""; position: absolute; left: -14px; right: -14px; top: 0;
  height: 1px; background: var(--border);
}
.user-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.admin-avatar {
  width: 32px; height: 32px; padding: 7px;
  background: var(--accent); color: var(--on-dark);
  border-radius: var(--radius-btn); flex-shrink: 0;
}
.username-display { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.user-role {
  font-size: 10.5px; color: var(--muted-foreground);
  letter-spacing: 0.1em; text-transform: uppercase;
}
/* Выход — иконка без рамки: обведённая кнопка в подвале перетягивала внимание
   на себя, хотя это самое редкое действие в панели. */
.btn-logout {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--radius-xs);
  color: var(--muted-foreground); cursor: pointer; transition: color var(--transition);
}
.btn-logout i, .btn-logout svg { width: 15px; height: 15px; }
.btn-logout:hover { color: var(--error-ink); }

/* ── Основной контент ───────────────────────────────────────────────────── */
.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.main-header {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding: 0 32px;       /* фикс. высота = высоте брендинг-блока */
  background: rgba(250,247,240,0.88); backdrop-filter: blur(8px);
  border: none; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
/* Заголовок и подзаголовок — в одну строку по общей базовой линии. Стопкой
   они забирали всю высоту шапки, и для кнопок справа не оставалось воздуха. */
.header-left { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.header-left h1 {
  font-family: var(--font-serif); font-size: 34px; font-weight: 400;
  letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
}
.subtitle { font-size: 12.5px; color: var(--muted-foreground); margin: 0; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 8px; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.header-tool-group { display: flex; align-items: center; gap: 8px; }
/* display:flex перебивает атрибут hidden — без этой строки в шапке оказывались
   элементы управления сразу всех вкладок, два календаря подряд. */
.header-tool-group[hidden] { display: none; }
.status-indicator {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 12.5px; color: var(--fg-dim);
  padding: 8px 14px; height: 36px; box-sizing: border-box;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-btn);
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 0 rgba(63,143,94,0.5); animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(63,143,94,0.45); }
  70% { box-shadow: 0 0 0 6px rgba(63,143,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,143,94,0); }
}
.btn-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-btn);
  color: var(--fg-dim); cursor: pointer; transition: all var(--transition);
}
.btn-icon i, .btn-icon svg { width: 16px; height: 16px; }
.btn-icon:hover { background: var(--surface-hover); color: var(--fg); border-color: var(--border-strong); }
.btn-icon.spinning i, .btn-icon.spinning svg { animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.content-body { flex: 1; overflow-y: auto; padding: 20px 32px 28px; }

/* ── Вкладки ────────────────────────────────────────────────────────────── */
.tab-content { display: none; animation: fadeIn 0.25s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Карточки метрик ────────────────────────────────────────────────────── */
/* ПОЛОСА KPI. Раньше это были четыре отдельные карточки с иконкой в цветном
   квадрате. Четыре рамки подряд спорили с рамками таблиц ниже, а квадраты
   иконок давали четыре цветных пятна там, где смысл несут цифры. Теперь это
   одна карточка, разделённая волосяными линиями: показатели читаются как один
   ряд, а не как четыре независимых объекта. Иконка ужата до точки-метки —
   она всё ещё кодирует цвет показателя, но не перетягивает взгляд. */
.metrics-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin-bottom: 16px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 26px;
}
.metric-card {
  display: flex; gap: 8px; align-items: flex-start; min-width: 0;
  padding: 0 24px; border-left: 1px solid var(--border);
  background: none; border-top: none; border-right: none; border-bottom: none;
}
/* Разделитель не нужен в начале каждой строки; если показателей больше
   четырёх, вторая строка отделяется сверху и получает свой отступ. */
.metric-card:nth-child(4n + 1) { padding-left: 0; border-left: none; }
.metric-card:nth-child(n + 5) { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.metric-icon {
  width: 10px; height: 10px; flex-shrink: 0; margin-top: 4px;
  border-radius: 999px; background: var(--muted-faint);
}
.metric-icon i, .metric-icon svg { display: none; }
.color-blue { background: var(--accent); }
.color-green { background: var(--success); }
.color-purple { background: var(--violet); }
.color-red { background: var(--error); }
.metric-data { min-width: 0; flex: 1; }
.metric-data h3 {
  font-size: 11px; font-weight: 500; color: var(--fg-dim);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px;
}
.metric-value {
  font-size: 36px; font-weight: 400; font-family: var(--font-serif);
  letter-spacing: -0.01em; line-height: 1; color: var(--fg);
  font-variant-numeric: tabular-nums lining-nums;
}
.metric-value span { font-family: inherit; }
.metric-desc { font-size: 11.5px; color: var(--muted-foreground); margin-top: 6px; min-height: 16px; }
.metric-progress-bar { height: 5px; background: var(--bg-elev-2); border-radius: 999px; margin-top: 10px; overflow: hidden; }
.metric-progress-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.5s ease; }
.color-blue-fill { background: var(--accent); }

/* ── Графики ────────────────────────────────────────────────────────────── */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.charts-grid-3 { grid-template-columns: repeat(3, 1fr); }
.chart-card { padding: 16px 20px 18px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.chart-card h3 { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 14px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-head h3 { margin-bottom: 14px; }
.chart-legend { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.chart-legend span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted-foreground); white-space: nowrap;
}
.chart-legend i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex-shrink: 0; }
.chart-container { position: relative; height: 220px; }

/* ── Разделитель секций + мониторинг ────────────────────────────────────── */
/* Отступы у разделителя секций были нулевыми снизу, а line-height у серифного
   заголовка — единица. Выносные элементы букв (у, р, д) вылезали за свою
   строку и налезали на карточку под ними. Возвращаем воздух и нормальный
   интерлиньяж: заголовок должен стоять МЕЖДУ блоками, а не на одном из них. */
.section-divider {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 12px 0 4px; padding: 0 2px;
}
.section-title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-serif); font-size: 22px; font-weight: 400;
  letter-spacing: 0; line-height: 1.3; color: var(--fg);
}
.section-title i, .section-title svg { width: 17px; height: 17px; color: var(--accent); }
.mon-strip {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted-foreground);
  padding: 0; background: none; border: none;
}
.mon-strip b { color: var(--fg-dim); font-weight: 600; margin-left: 3px; font-variant-numeric: tabular-nums; }
.mon-sep { opacity: 0.4; }
.mon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); flex-shrink: 0; }
.mon-dot.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.mon-dot.warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-light); }
.mon-dot.down { background: var(--error); box-shadow: 0 0 0 3px var(--error-soft); }

/* ── Таблицы ────────────────────────────────────────────────────────────── */
.table-section { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.margin-top { margin-top: 16px; }
/* Шапка таблицы без нижней границы: её роль берёт на себя верхняя линейка
   строки заголовков столбцов — иначе под названием блока шли две линии подряд. */
.table-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 22px 12px;
}
.table-header h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--fg);
}
.table-header h3 i, .table-header h3 svg { width: 15px; height: 15px; color: var(--muted-foreground); }
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 9px 14px;
  font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted-foreground); background: none;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
thead th:first-child { padding-left: 22px; }
thead th:last-child { padding-right: 22px; }
/* Строки различаются заливкой, а не линиями. Линия под каждой строкой в
   длинных таблицах (узлы, когорты, P&L) складывалась в частокол и мешала
   вести взгляд по строке слева направо. */
tbody td { padding: 10px 14px; border: none; color: var(--fg-dim); vertical-align: middle; }
tbody td:first-child { padding-left: 22px; }
tbody td:last-child { padding-right: 22px; }
tbody tr:nth-child(even) { background: var(--zebra); }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--surface-hover); }

/* ДВЕ ТАБЛИЦЫ ЗЕБРУ НЕ ПОЛУЧАЮТ. Полоса «через одну» работает, пока строки —
   ровный список. У дневных когорт (Закупка) между родителями вклиниваются
   подстроки: чётность съезжает при каждом раскрытии, и полоса начинает
   означать не «следующая строка», а «сколько блоков выше уже открыто». В P&L
   у строк есть собственная иерархия — секции, промежуточные итоги, чистый
   результат, курс месяца; механическая полоса поверх неё делает вид, что все
   строки равны. Гасим только заливку покоя: подсветка под курсором нужна обеим,
   поэтому она восстановлена следующим правилом с той же точностью. */
.pnl-table tbody tr:nth-child(even),
tbody tr.vx-parent:nth-child(even),
tbody tr.vx-child:nth-child(even) { background: transparent; }
.pnl-table tbody tr:hover,
tbody tr.vx-parent:hover { background: var(--surface-hover); }
tbody td strong { color: var(--fg); font-weight: 600; }
.empty-row, .empty-state { text-align: center; color: var(--muted-foreground); padding: 32px 18px !important; font-size: 13px; }

.room-code-tag {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  padding: 3px 9px; border-radius: var(--radius-xs);
  background: var(--accent-soft); color: var(--accent-teal-ink); border: 1px solid rgba(31,107,122,0.3);
}

/* ── Кнопки в таблицах/карточках ────────────────────────────────────────── */
.btn-sm {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 12px; font-size: 12px; font-weight: 500; font-family: var(--font);
  border-radius: var(--radius-xs); cursor: pointer; background: var(--bg-elev);
  border: 1px solid var(--border-strong); color: var(--fg); transition: all var(--transition);
}
.btn-sm i, .btn-sm svg { width: 12px; height: 12px; color: var(--muted-foreground); }
.btn-sm:hover { background: var(--surface-hover); }
/* Основное действие — сплошная бирюза, как в дизайне: на карточке цвета
   слоновой кости обведённая кнопка не читалась как «главная». */
.btn-sm.btn-accent {
  background: var(--accent); border-color: var(--accent); color: var(--on-dark); font-weight: 600;
}
.btn-sm.btn-accent i, .btn-sm.btn-accent svg { color: var(--on-dark); }
.btn-sm.btn-accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-success-outline { color: var(--success-ink); border-color: rgba(63,143,94,0.4); }
.btn-success-outline:hover { background: var(--success-soft); }
.btn-danger-outline { color: var(--error-ink); border-color: rgba(198,92,72,0.35); }
.btn-danger-outline:hover { background: var(--error-soft); }
.btn-warn-outline { color: var(--warning-ink); border-color: var(--warning-border); }
.btn-warn-outline:hover { background: var(--warning-light); }

/* ── Подвкладки модерации ───────────────────────────────────────────────── */
/* Подвкладки — утопленная группа: контейнер тонирован, активная плашка
   поднята до цвета карточки. Раньше было наоборот (светлый контейнер,
   тонированная активная плашка), и группа спорила с карточками под ней. */
.tab-subnav {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 16px;
  background: var(--bg-elev-2); border: none; border-radius: var(--radius); box-shadow: none;
}
.subnav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 500; font-family: var(--font);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: #6f6a60; cursor: pointer; transition: all var(--transition);
}
.subnav-btn:hover { color: var(--fg); }
.subnav-btn.active {
  background: var(--bg-elev); color: var(--fg); font-weight: 600; border-color: var(--border);
}
.subtab-content { display: none; }
.subtab-content.active { display: block; animation: fadeIn 0.25s ease; }

/* ── Карточки модерации ─────────────────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card-pending {
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.card-pending:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.card-image-wrapper {
  position: relative; height: 150px; background: var(--bg-elev-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.card-preview { width: 100%; height: 100%; object-fit: cover; }
.card-preview-fallback { color: var(--muted-faint); }
.card-preview-fallback i, .card-preview-fallback svg { width: 36px; height: 36px; }
.card-tags { position: absolute; bottom: 8px; left: 8px; display: flex; gap: 5px; flex-wrap: wrap; }
.card-body { padding: 14px 16px; flex: 1; }
.card-body h4 { font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 5px; }
.card-desc {
  font-size: 12.5px; color: var(--muted-foreground); margin-bottom: 12px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--muted-foreground); }
.card-author { display: flex; align-items: center; gap: 5px; }
.card-author i, .card-author svg { width: 12px; height: 12px; }
.card-actions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.card-actions .btn-sm { flex: 1; }

.tag-pill {
  font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.55); color: #ffffff; border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(4px);
}
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-list .tag-pill { background: var(--bg-elev-2); color: var(--fg-dim); border: 1px solid var(--border); }

.table-preview { width: 52px; height: 36px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border); }
.table-preview-fallback {
  width: 52px; height: 36px; border-radius: var(--radius-xs); background: var(--bg-elev-2); border: 1px solid var(--border);
  align-items: center; justify-content: center; color: var(--muted-faint);
}

.status-pill {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  display: inline-block; white-space: nowrap;
}
.status-active { color: var(--success-strong); background: var(--success-soft); border: 1px solid rgba(63,143,94,0.4); }
.status-closed { color: var(--error-ink); background: var(--error-soft); border: 1px solid rgba(198,92,72,0.3); }
/* Типовой светофор для любых статусов: хорошо / в процессе / плохо / прочее */
.status-ok { color: var(--success-strong); background: var(--success-soft); border: 1px solid rgba(63,143,94,0.4); }
.status-warn { color: var(--warning-ink); background: var(--warning-light); border: 1px solid var(--warning-border); }
.status-bad { color: var(--error-ink); background: var(--error-soft); border: 1px solid rgba(198,92,72,0.3); }
.status-muted { color: var(--muted-foreground); background: var(--bg-elev-2); border: 1px solid var(--border); }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .charts-grid { grid-template-columns: 1fr; }
  .content-body { padding: 18px; }
}
@media (max-width: 720px) {
  .sidebar { width: 64px; padding: 0 8px 16px; }
  .sidebar-brand h2, .menu-item span:not(.badge), .username-display, .user-role { display: none; }
  .menu-item { justify-content: center; }
  .metrics-grid { grid-template-columns: 1fr; }
}

/* Lucide-иконки без собственного класса (заменяются на <svg>) — общий стиль */
svg.lucide { stroke-width: 2; vertical-align: middle; }

/* ── Аналитика: когортное сравнение версий ─────────────────────────────── */

/* Липкая панель фильтров — полноширинный тулбар, продолжение шапки */
.an-filterbar {
  position: sticky; top: -28px; z-index: 20;   /* компенсируем padding контейнера */
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 10px 28px 12px; margin: -28px -28px 24px;
  border: none; border-bottom: 1px solid var(--border); border-radius: 0;
  box-shadow: 0 6px 16px -12px rgba(26,25,23,0.18);
  background: rgba(250,247,240,0.92); backdrop-filter: blur(10px);
}
.an-filterbar .fin-range-select { font-size: 12.5px; padding: 7px 8px; }
#an-va, #an-vb { max-width: 182px; }
.an-apply-btn { align-self: flex-end; margin-left: auto; }
.an-date-range { display: flex; align-items: center; gap: 5px; color: var(--muted-foreground); }
.an-check {
  display: flex; align-items: center; gap: 6px; align-self: flex-end;
  font-size: 12.5px; color: var(--fg-dim); cursor: pointer; user-select: none;
  padding: 0 0 9px;
}
.an-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.an-filter-group { display: flex; flex-direction: column; gap: 6px; }
.an-filter-group label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.an-filter-group input[type="date"] { font-family: var(--font-mono); font-size: 12.5px; }
.an-apply-btn { width: auto; padding: 9px 20px; font-size: 13.5px; }
.an-filter-note { font-size: 12.5px; color: var(--muted-foreground); align-self: center; }

/* Полоса контекста когорты */
.an-cohort-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 13px 18px; margin-bottom: 22px;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.an-cohort-versions { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.an-cohort-versions b { font-family: var(--font-mono); }
.an-cohort-meta { font-size: 12px; color: var(--muted-foreground); }

/* Чипы версий A/B */
.an-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px;
  font-size: 11px; font-weight: 700; font-family: var(--font-mono);
  vertical-align: middle; margin-right: 2px;
}
/* A и B — бирюза и янтарь, два штатных вторичных акцента. Раньше здесь были
   фиолетовый и розовый: два лишних тона в палитре, где их всего три. */
.an-chip-a { background: var(--info-soft); color: var(--accent-teal-ink); border: 1px solid rgba(31,107,122,0.38); }
.an-chip-b { background: var(--violet-soft); color: var(--accent-amber-ink); border: 1px solid rgba(181,138,74,0.38); }

/* Индикатор надёжности выборки + размер n */
.an-rel { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px 0 8px; vertical-align: middle; }
.an-rel.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.an-rel.warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-light); }
.an-rel.low { background: var(--error); box-shadow: 0 0 0 3px var(--error-soft); }
.an-n { font-size: 12px; color: var(--muted-foreground); font-family: var(--font-mono); }

/* Заголовки секций отчёта */
.an-section-title { margin: 30px 0 14px; }
.an-section-title h2 { font-size: 16px; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; }
.an-section-title p { font-size: 12px; color: var(--muted-foreground); margin-top: 3px; }

/* KPI-карточки сравнения */
.an-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 10px; }
.an-kpi-grid-3 { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.an-kpi { padding: 15px 16px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.an-kpi h3 { font-size: 11.5px; font-weight: 500; color: var(--muted-foreground); margin-bottom: 10px; line-height: 1.35; }
.an-kpi-vals { display: flex; flex-direction: column; gap: 6px; }
.an-kpi-val { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; font-family: var(--font-mono); letter-spacing: -0.02em; }
.an-delta {
  display: inline-block; margin-top: 9px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; font-family: var(--font-mono);
}
.an-delta.up { color: var(--success-strong); background: var(--success-soft); }
.an-delta.down { color: var(--error-ink); background: var(--error-soft); }
.an-delta.flat { color: var(--muted-foreground); background: var(--bg-elev-2); }
.an-kpi-note { font-size: 11px; color: var(--muted-foreground); margin-top: 8px; line-height: 1.4; }

/* Сетки графиков отчёта */
.an-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 6px; }
.an-chart-grid-3 { grid-template-columns: repeat(3, 1fr); }
.an-chart { height: 260px; }
.an-chart-sm { height: 200px; }

@media (max-width: 1200px) {
  .an-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .an-chart-grid, .an-chart-grid-3 { grid-template-columns: 1fr; }
}

/* ── Таблицы дневных когорт (heatmap) ───────────────────────────────────── */
.an-ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1200px) { .an-ct-grid { grid-template-columns: 1fr; } }
.an-ct { font-size: 12px; }
.an-ct thead th { padding: 8px 6px; text-align: center; }
.an-ct thead th:first-child { text-align: left; padding-left: 12px; }
.an-ct tbody td { padding: 6px 6px; text-align: center; font-family: var(--font-mono); font-size: 12px; }
.an-ct .an-ct-day { font-weight: 600; color: var(--fg); text-align: left; white-space: nowrap; padding-left: 12px; width: 1%; }
.an-ct .an-ct-n { color: var(--muted-foreground); width: 1%; }
.an-ct .an-ct-empty { color: var(--muted-faint); }
.an-ct tbody tr:hover { background: transparent; }
/* Стрелки «лучше/хуже» в ячейках: цветной текст на тонированном фоне не читается,
   компактная стрелка при обычном цвете значения — читается везде. */

/* Светофор FPS-таблицы + стрелки изменения B против A */
.an-sev-g { background: rgba(63,143,94,0.16); color: var(--success-ink); }
.an-sev-m { background: rgba(181,138,74,0.16); color: var(--warning-ink); }
.an-sev-b { background: rgba(198,92,72,0.13); color: var(--error-ink); }
.an-arr-good { color: #35784f; font-size: 9px; font-weight: 700; }
.an-arr-bad { color: #c65c48; font-size: 9px; font-weight: 700; }
.an-fps-legend { display: flex; gap: 8px; font-size: 11px; flex-wrap: wrap; }
.an-fps-legend span { padding: 3px 9px; border-radius: 999px; }

/* Узкие таблицы (FPS, плейсменты): значения короткие — во всю ширину нечитаемо */
.an-narrow { width: 50%; min-width: 560px; }
@media (max-width: 1200px) { .an-narrow { width: 100%; min-width: 0; } }

/* ── Кастомный датапикер (в стиле админки, вместо системного календаря) ──── */
.an-date { cursor: pointer; width: 104px; }
.an-dp {
  /* top:100% обязателен: без него absolute-элемент внутри flex-строки дат
     берёт «статическую» позицию с центрированием по кросс-оси и уезжает вверх. */
  position: absolute; top: calc(100% + 6px); z-index: 50; width: 252px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px; user-select: none;
  animation: fadeIn 0.15s ease;
}
.an-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.an-dp-title { font-size: 13px; font-weight: 600; color: var(--fg); text-transform: capitalize; }
.an-dp-nav { display: flex; gap: 4px; }
.an-dp-btn {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-xs);
  color: var(--fg-dim); cursor: pointer; font-size: 13px; line-height: 1;
  transition: all var(--transition);
}
.an-dp-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.an-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.an-dp-wd {
  font-size: 10.5px; font-weight: 600; color: var(--muted-foreground);
  text-align: center; padding: 4px 0; text-transform: uppercase;
}
.an-dp-day {
  height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-family: var(--font-mono); color: var(--fg-dim);
  border: none; background: transparent; border-radius: var(--radius-xs); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.an-dp-day:hover { background: var(--surface-hover); color: var(--fg); }
.an-dp-day.other { color: var(--muted-faint); }
/* Подсказки когорт: зелёная точка — установки есть у всех выбранных версий (≥10),
   янтарная — есть, но мало (<10). */
.an-dp-day { position: relative; }
.an-dp-day.has-strong::after, .an-dp-day.has-weak::after {
  content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
}
.an-dp-day.has-strong::after { background: var(--accent); }
.an-dp-day.has-weak::after { background: var(--warning); }
.an-dp-day.selected.has-strong::after, .an-dp-day.selected.has-weak::after { background: #fff; }
.an-dp-day.today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.an-dp-day.selected { background: var(--accent); color: #fff; font-weight: 600; }
.an-dp-day.selected:hover { background: var(--accent-strong); }
.an-dp-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.an-dp-link {
  font-size: 12px; font-weight: 600; color: var(--accent-strong);
  background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 4px;
}
.an-dp-link:hover { background: var(--success-soft); }
.an-dp-link.muted { color: var(--muted-foreground); }
.an-dp-link.muted:hover { background: var(--bg-elev-2); }

/* ── Записи сессий (Replays) ────────────────────────────────────────────── */

/* Тулбар списка */
.rp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#rp-refresh { display: inline-flex; align-items: center; gap: 6px; }

/* Мастер-деталь: таблица слева, sticky-панель просмотра справа (полстраницы) */
.rp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.rp-list-pane { min-width: 0; }
.rp-detail-pane {
  position: sticky; top: 16px;
  align-self: start;
  min-width: 0;
}

/* Строки таблицы кликабельны — выбирают запись для просмотра */
.rp-row { cursor: pointer; }
.rp-row.active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.rp-row.active:hover { background: var(--accent-soft); }
.rp-row.active td strong, .rp-row.active td { color: var(--fg); }

/* Статусы записей */
.status-recording { color: var(--accent-teal-ink); background: var(--info-soft); border: 1px solid rgba(59,130,246,0.3); }
.status-abandoned { color: var(--warning-ink); background: var(--warning-light); border: 1px solid var(--warning-border); }

/* Панель настроек записи */
.rp-config-header { cursor: pointer; user-select: none; }
.rp-config-header:hover { background: var(--surface-hover); }
.rp-config-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 18px 20px 6px;
}
.rp-field { display: flex; flex-direction: column; gap: 6px; }
.rp-field label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.rp-input {
  width: 100%; padding: 7px 10px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg); font-family: var(--font-mono); font-size: 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.rp-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rp-check {
  display: flex; align-items: center; gap: 8px; align-self: end;
  font-size: 13px; font-weight: 500; color: var(--fg-dim); cursor: pointer; user-select: none;
  padding: 8px 0;
}
.rp-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.rp-hint { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.4; }
.rp-config-footer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 20px 18px;
}
.rp-save-btn { width: auto; padding: 9px 20px; font-size: 13.5px; }
.rp-save-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.rp-msg { font-size: 12.5px; font-weight: 600; }
.rp-msg-ok { color: var(--success-strong); }
.rp-msg-err { color: var(--error); }
.rp-warning {
  margin: 14px 20px 0; padding: 10px 14px;
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--accent-amber-ink);
  background: var(--warning-light); border: 1px solid var(--warning-border);
}

/* Панель просмотра (деталь) */
.rp-detail-card { display: flex; flex-direction: column; }

/* Пустое состояние — ничего не выбрано */
.rp-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 320px; padding: 32px 20px;
  color: var(--muted-foreground); font-size: 13.5px; text-align: center;
}
.rp-detail-empty i, .rp-detail-empty svg { width: 34px; height: 34px; color: var(--muted-faint); }

/* Видео + управление */
.rp-video-area { padding: 16px 16px 14px; }
.rp-video-wrap {
  position: relative; background: #000; border-radius: var(--radius-sm);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}
#rp-video { display: block; width: 100%; max-height: 68vh; background: #000; cursor: pointer; }

/* Полноэкранный режим: фуллскринится контейнер видео+контролы, чтобы работали
   наши перемотка/скорость/чанки (у нативного видео они бы пропали). */
.rp-video-area:fullscreen {
  background: #000;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 24px;
}
.rp-video-area:fullscreen .rp-video-wrap { border-radius: 0; }
.rp-video-area:fullscreen #rp-video { max-height: calc(100vh - 96px); }
/* Тёплая тёмная палитра, а не zinc: холодный серый рядом с кремовой канвой
   читается как чужой интерфейс, и спека Claude запрещает его прямо. */
.rp-video-area:fullscreen .rp-time,
.rp-video-area:fullscreen .rp-chunk { color: var(--on-dark); }
.rp-video-area:fullscreen .rp-seek { background: var(--dark-elevated); border-color: #3a3733; }
.rp-video-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; width: 100%;
  color: var(--on-dark-soft); font-size: 13.5px;
}
.rp-seek {
  position: relative; height: 9px; margin-top: 14px;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; overflow: hidden;
}
.rp-seek:hover { border-color: var(--border-strong); }
.rp-seek-fill {
  height: 100%; width: 0%; background: var(--accent); border-radius: 999px;
  transition: width 0.15s linear;
}
.rp-controls { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
#rp-play { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; }
.rp-time, .rp-chunk { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-dim); white-space: nowrap; }
#rp-speed { width: auto; }

/* Метаданные: сетка «метка — значение» */
.rp-meta-grid {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 16px;
  padding: 4px 16px 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.rp-meta-label {
  color: var(--muted-foreground);
  padding: 7px 0; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rp-meta-val {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg);
  text-align: right; word-break: break-all; min-width: 0;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.rp-meta-grid .rp-meta-label:nth-last-of-type(2),
.rp-meta-grid .rp-meta-val:last-of-type { border-bottom: none; }
.rp-id { font-family: var(--font-mono); word-break: break-all; }
.rp-copy-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; padding: 0;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xs);
  color: var(--muted-foreground); cursor: pointer; transition: all var(--transition);
}
.rp-copy-btn:hover { background: var(--surface-hover); color: var(--fg); border-color: var(--border-strong); }
.rp-copy-btn.copied { color: var(--success-strong); border-color: rgba(63,143,94,0.45); }
.rp-copy-btn i, .rp-copy-btn svg { width: 12px; height: 12px; }

/* Низ панели: удаление записи */
.rp-detail-footer {
  padding: 12px 16px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 8px;
}

@media (max-width: 1200px) {
  .rp-config-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Узкие экраны: одна колонка, панель просмотра над таблицей */
@media (max-width: 1100px) {
  .rp-layout { grid-template-columns: 1fr; }
  .rp-detail-pane { position: static; order: -1; }
  .rp-detail-empty { min-height: 160px; }
}
@media (max-width: 720px) {
  .rp-config-grid { grid-template-columns: 1fr; }
}

/* Финансы: селектор диапазона графика и кнопка синхронизации */
.fin-range-select {
  padding: 6px 10px; background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; cursor: pointer;
}
.fin-range-select:hover { border-color: var(--border-strong); }
#fin-sync-btn { display: inline-flex; align-items: center; gap: 6px; }
#fin-sync-btn.spinning i, #fin-sync-btn.spinning svg { animation: spin 0.6s linear infinite; }

/* ── P&L: отчёт о прибылях и убытках (редакционная таблица в стиле Claude) ─ */
.pnl-hint { font-size: 12px; color: var(--muted-soft); }

.pnl-table-wrap { overflow-x: auto; }
.pnl-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.pnl-table th, .pnl-table td {
  padding: 7px 9px; text-align: right; white-space: nowrap;
  font-family: var(--font-mono);
}
.pnl-table td { border-bottom: 1px solid var(--border-soft); color: var(--fg-dim); }
.pnl-table .empty-row { text-align: center; padding: 24px; font-family: var(--font); color: var(--muted-foreground); }

/* Шапка: месяцы caption-uppercase, текущий месяц отмечен кораллом */
.pnl-head-row th {
  font-family: var(--font); font-weight: 500; font-size: 10.5px;
  color: var(--muted-soft); text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--bg-elev-2); border-bottom: 1px solid var(--border);
  padding-top: 10px; padding-bottom: 10px;
}
.pnl-head-row th.pnl-m-now { color: var(--accent-strong); font-weight: 600; }

/* Первая колонка — названия статей: одна строка, действия не ломают вёрстку */
.pnl-table .pnl-cat-cell {
  text-align: left; font-family: var(--font);
  width: 256px; min-width: 256px; max-width: 256px;
}
.pnl-cat-row .pnl-cat-cell { position: relative; padding-right: 12px; }
.pnl-cat-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: var(--fg-dim);
}
.pnl-cat-actions {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; gap: 2px; padding-left: 6px; opacity: 0; transition: opacity var(--transition);
  background: linear-gradient(90deg, transparent, var(--bg) 12px);
  border-radius: var(--radius-xs);
}
.pnl-cat-row:hover .pnl-cat-actions { opacity: 1; }
.pnl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: none; border-radius: var(--radius-xs);
  color: var(--muted-soft); cursor: pointer; transition: all var(--transition);
}
.pnl-icon-btn:hover { background: var(--surface-card); color: var(--fg); }
.pnl-icon-btn.pnl-danger:hover { color: var(--error-ink); background: var(--error-soft); }
.pnl-icon-btn i, .pnl-icon-btn svg { width: 13px; height: 13px; }

/* Секции «Доходы»/«Расходы»: caption-uppercase с цветной точкой */
.pnl-section-row td {
  font-family: var(--font); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg);
  padding: 18px 9px 7px; border-bottom: 1px solid var(--border);
}
.pnl-section-row .pnl-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px;
}
.pnl-income .pnl-dot { background: var(--info); }
.pnl-expense .pnl-dot { background: var(--accent); }

/* Строка «+ Добавить статью» — тихий коралловый text-link */
.pnl-add-row td { padding: 0; border-bottom: 1px solid var(--border-soft); }
.pnl-add-btn {
  display: block; width: 100%; padding: 6px 9px; text-align: left;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--accent);
  border-radius: 0; transition: background var(--transition), color var(--transition);
}
.pnl-add-btn:hover { background: var(--accent-soft); color: var(--accent-strong); }

/* Редактируемые ячейки: пустые — чистые, значение появляется по вводу */
td.pnl-cell { cursor: pointer; color: var(--fg); min-width: 58px; transition: background var(--transition), box-shadow var(--transition); }
td.pnl-cell:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(31,107,122,0.4); }
td.pnl-editing { padding: 2px; }
.pnl-cell-input {
  width: 88px; padding: 4px 6px; text-align: right;
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--accent); border-radius: var(--radius-xs);
  background: var(--bg); color: var(--fg);
  outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
.pnl-cell-input::-webkit-outer-spin-button, .pnl-cell-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Итоги секций и колонка «Год» */
.pnl-subtotal-row td { font-weight: 600; background: var(--bg-elev-2); color: var(--fg); border-bottom: 1px solid var(--border); }
.pnl-subtotal-row .pnl-cat-cell { font-size: 12px; }
.pnl-row-total { font-weight: 600; border-left: 1px solid var(--border); color: var(--fg); }

/* Финальная строка — surface-card, как featured-карточка */
.pnl-net-row td {
  font-weight: 700; font-size: 12.5px;
  background: var(--surface-card); border-bottom: none;
  padding-top: 10px; padding-bottom: 10px;
}
.pnl-net-row .pnl-cat-cell { font-size: 13px; }
.pnl-pos { color: var(--success-strong); }
.pnl-neg { color: var(--error); }

.pnl-note { padding: 6px 16px 12px; font-size: 12.5px; min-height: 18px; color: var(--muted-foreground); }

@media (max-width: 1280px) {
  .pnl-table .pnl-cat-cell { width: 200px; min-width: 200px; max-width: 200px; }
  .pnl-table th, .pnl-table td { padding: 7px 6px; }
  td.pnl-cell { min-width: 50px; }
}

/* ── P&L: валюты, курс месяца, режимы просмотра ───────────────────────────── */

/* Переключатель «Полный / Операционный» — сегментед в стиле category-tab */
.pnl-mode-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.pnl-mode-btn {
  padding: 5px 12px; font-family: var(--font); font-size: 12.5px; font-weight: 500;
  background: transparent; border: none; border-radius: var(--radius-xs);
  color: var(--muted-foreground); cursor: pointer; transition: all var(--transition);
}
.pnl-mode-btn:hover { color: var(--fg-dim); }
.pnl-mode-btn.active { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgba(26,25,23,0.06); }

/* Строка курса ₽/$ */
.pnl-rate-row td { background: var(--bg); border-bottom: 1px solid var(--border); }
.pnl-rate-label { font-size: 11.5px !important; color: var(--muted-foreground); font-weight: 500; }
td.pnl-rate-cell {
  cursor: pointer; font-size: 11.5px; color: var(--muted-foreground);
  transition: background var(--transition), box-shadow var(--transition);
}
td.pnl-rate-cell:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(31,107,122,0.4); }
td.pnl-rate-inherited { color: var(--muted-soft); font-style: italic; }
td.pnl-rate-missing { color: var(--accent-strong); font-weight: 600; }
.pnl-rate-input { width: 64px; }

/* Бейдж CAPEX у инвестиционных статей */
.pnl-capex-badge {
  flex-shrink: 0; margin-left: 6px;
  font-family: var(--font); font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
  padding: 1.5px 6px; border-radius: 999px;
  background: var(--violet-soft); color: var(--accent-amber-ink); border: 1px solid rgba(181,138,74,0.4);
}
.pnl-cat-row .pnl-cat-cell { display: flex; align-items: center; }
.pnl-cat-row .pnl-cat-name { flex: 1 1 auto; min-width: 0; }

/* Рублёвая ячейка без курса — предупреждающий вид */
td.pnl-cell-rub { color: var(--accent-strong); font-style: italic; }

/* Редактор ячейки: инпут + переключатель ₽/$ */
.pnl-edit-wrap { display: inline-flex; align-items: center; gap: 3px; }
.pnl-cur-toggle {
  display: inline-flex; gap: 1px; padding: 2px;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-xs);
}
.pnl-cur-btn {
  width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 11px; font-weight: 600;
  background: transparent; border: none; border-radius: 4px;
  color: var(--muted-soft); cursor: pointer; transition: all var(--transition);
}
.pnl-cur-btn.active { background: var(--accent); color: #fff; }

/* Строка «скрыто CAPEX-статей» в операционном режиме */
.pnl-hidden-row td {
  font-family: var(--font); font-size: 11.5px; font-style: italic;
  color: var(--muted-soft); padding: 6px 9px; border-bottom: 1px solid var(--border-soft);
}

/* ── P&L: авто-строка налога УСН ──────────────────────────────────────────── */
.pnl-tax-row td { border-bottom: 1px solid var(--border-soft); color: var(--muted-foreground); }
.pnl-tax-row .pnl-cat-cell { display: flex; align-items: center; }
.pnl-tax-row .pnl-cat-name { flex: 1 1 auto; min-width: 0; color: var(--muted-foreground); }
.pnl-auto-badge {
  flex-shrink: 0; margin-left: 6px;
  font-family: var(--font); font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1.5px 6px; border-radius: 999px;
  background: var(--info-soft); color: var(--accent-teal-ink); border: 1px solid rgba(31,107,122,0.4);
}
td.pnl-cell-auto { cursor: default; color: var(--muted-foreground); }

/* ── Творения игроков: фильтры, тумблер каталога, строки таблицы ──────────── */

/* Панель фильтров под шапкой таблицы (она же — форма выдачи доступа):
   поля в колонку «метка сверху, поле снизу», как в настройках записей. */
.cr-filters {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--bg-elev-2);
}
.cr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-field-grow { flex: 1 1 180px; }
.cr-field label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.cr-input {
  width: 100%; padding: 7px 10px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg); font-family: var(--font); font-size: 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cr-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cr-input-date { font-family: var(--font-mono); font-size: 12.5px; width: 148px; }
select.cr-input { cursor: pointer; min-width: 140px; }
.cr-check {
  display: flex; align-items: center; gap: 7px; align-self: flex-end;
  font-size: 12.5px; color: var(--fg-dim); cursor: pointer; user-select: none; padding: 8px 0;
  white-space: nowrap;
}
.cr-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.cr-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-hint { font-size: 11.5px; color: var(--muted-soft); }
.cr-msg { align-self: flex-end; padding: 8px 0; font-size: 12.5px; font-weight: 600; }

/* ── Лента творений ──────────────────────────────────────────────────────────
   Ревью персонажа начинается с картинки: если превью не нравится, остальные
   свойства не нужны вовсе. Поэтому лента — это сетка крупных превью с
   названием и одним статусом, а подробности открываются по клику.

   image-rendering: pixelated обязателен: модели воксельные, и сглаживание при
   масштабировании превращает их в мыло — ровно то, по чему принимается
   решение, становится нечитаемым. */
.cr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px; padding: 16px 20px 20px;
}
.cr-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev); overflow: hidden; cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.cr-card:hover, .cr-card:focus-visible {
  border-color: var(--border-strong); transform: translateY(-1px);
  box-shadow: var(--shadow-sm); outline: none;
}
.cr-card-media {
  aspect-ratio: 1 / 1; background: var(--bg-elev-2);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border);
}
.cr-card-media img {
  width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated;
}
.cr-card-noimg { font-size: 11.5px; color: var(--muted-soft); }
.cr-card-body { padding: 9px 11px 11px; }
.cr-card-body h4 {
  font-size: 13px; font-weight: 600; color: var(--fg); margin: 0 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cr-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cr-card-date { font-size: 11px; color: var(--muted-soft); font-family: var(--font-mono); }
.cr-card-deleted { opacity: 0.55; }

/* Карточка творения: превью слева, свойства справа.
   Селектор с двумя классами намеренно: общее правило .modal-card объявлено
   ниже по файлу, и при равной специфичности побеждало бы оно. */
.modal-card.cr-modal-card { width: min(860px, 100%); }
.cr-modal-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; }
@media (max-width: 720px) { .cr-modal-body { grid-template-columns: minmax(0, 1fr); } }
.cr-modal-media {
  aspect-ratio: 1 / 1; background: var(--bg-elev-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cr-modal-media img {
  width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; cursor: zoom-in;
}
.cr-modal-prompt {
  margin-bottom: 14px; padding: 9px 11px; background: var(--bg-elev-2);
  border-left: 2px solid var(--info); border-radius: var(--radius-xs);
  font-size: 12.5px; color: var(--fg-dim); line-height: 1.5;
}
.cr-modal-props {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 16px;
  font-size: 12.5px;
}
.cr-modal-props dt { color: var(--muted-foreground); }
.cr-modal-props dd { margin: 0; color: var(--fg); font-family: var(--font-mono); font-size: 12px; }
.cr-modal-catalog { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; }
/* Вердикт ИИ-судьи в карточке: причина — обычным текстом (её читают, а не сканируют) */
.cr-judge-reason { margin-top: 5px; font-family: var(--font-sans, inherit); font-size: 12.5px; color: var(--fg); line-height: 1.45; }
.cr-judge-meta { margin-top: 4px; font-size: 11.5px; color: var(--muted-foreground); line-height: 1.45; }

/* Превью во весь экран — поверх карточки, без ухода на другую вкладку:
   ревью это поток из десятков картинок, и каждый переход туда-обратно стоит
   дороже, чем кажется. */
#cr-lightbox {
  position: fixed; inset: 0; z-index: 1000; cursor: zoom-out;
  background: rgba(20, 20, 19, 0.82);
  display: flex; align-items: center; justify-content: center; padding: 40px;
  animation: modal-in 120ms ease-out;
}
#cr-lightbox img {
  /* Растягиваем, а не только ограничиваем: превью приходит 512×512, и «во весь
     экран» без width осталось бы тем же 512 — то есть не увеличилось бы вовсе.
     Пиксельное масштабирование воксельной модели ничего не портит. */
  width: min(720px, 90vw); height: auto; max-height: 86vh; object-fit: contain;
  image-rendering: pixelated; border-radius: var(--radius);
}
.cr-lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(250,247,240,.3); background: rgba(26,25,23,.4);
  color: var(--on-dark); font-size: 20px; line-height: 1; cursor: pointer;
}
.cr-lightbox-close:hover { background: rgba(26,25,23,.7); }

.cr-title-cell { max-width: 300px; }
.cr-sub { font-size: 11px; color: var(--muted-soft); font-family: var(--font-mono); }
.cr-prompt {
  display: block; max-width: 300px; margin-top: 2px;
  font-size: 11.5px; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cr-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }
.cr-actions .btn-sm { white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }
.cr-num { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.cr-err { font-size: 11px; color: var(--error); max-width: 220px; display: inline-block; }

/* Тумблер «в каталоге»: включён = творение лежит в общем каталоге игры */
.cr-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.cr-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cr-switch-track {
  width: 34px; height: 20px; border-radius: 999px; position: relative; display: inline-block;
  background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  transition: background var(--transition), border-color var(--transition);
}
.cr-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--muted-soft);
  transition: transform var(--transition), background var(--transition);
}
.cr-switch input:checked + .cr-switch-track { background: var(--success-soft); border-color: rgba(63,143,94,0.55); }
.cr-switch input:checked + .cr-switch-track::after { transform: translateX(14px); background: var(--success-strong); }
.cr-switch input:focus-visible + .cr-switch-track { box-shadow: 0 0 0 3px var(--accent-soft); }
.cr-switch input:disabled + .cr-switch-track { opacity: 0.45; }
.cr-switch:has(input:disabled) { cursor: not-allowed; }

/* Удалённое творение: строка тише живых */
tr.cr-row-deleted td { opacity: 0.6; }

/* Сводка по джобам — та же полоса мониторинга, но по ширине содержимого */
.mon-strip.cr-summary { display: inline-flex; }

/* Графики нагрузки фабрики: рисуем сами на canvas, без Chart.js — две простые
   картинки (ступени и столбики) не стоят подключения библиотеки. */
.cr-charts { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 8px; }
.cr-chart-title {
  font-size: 12.5px; font-weight: 600; color: var(--fg-dim);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.cr-chart-title .cr-hint { font-weight: 400; }
.cr-canvas { display: block; width: 100%; height: 120px; }
.cr-canvas-tall { height: 170px; }
#cr-metrics-note { display: block; padding-top: 4px; }

/* Лимиты подписки Claude: две карточки «сколько осталось» над графиком расхода */
.cr-limit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 10px; }
.cr-limit-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-card, transparent); }
.cr-limit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cr-limit-name { font-size: 12px; color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; }
.cr-limit-swatch { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.cr-limit-left { font-size: 20px; font-weight: 600; color: var(--fg); }
.cr-limit-left.is-warn { color: var(--warning-ink); }
.cr-limit-left.is-bad { color: var(--error-ink); }
.cr-limit-bar { height: 6px; border-radius: 3px; background: var(--border); margin: 8px 0 6px; overflow: hidden; }
.cr-limit-bar > span { display: block; height: 100%; border-radius: 3px; }
.cr-limit-sub { font-size: 11.5px; color: var(--muted-soft); }
.cr-limit-empty { font-size: 12px; color: var(--muted-soft); padding: 4px 0 8px; }

/* ── Безопасность: второй фактор, резервные коды, журнал входов ──────────── */

.hidden { display: none !important; }

/* Шапка секции с пояснением под заголовком: обычная .table-header раскладывает
   детей в строку, и длинный текст наезжает на заголовок. */
.table-header.stacked { flex-direction: column; align-items: flex-start; gap: 5px; }
.table-header.stacked .pnl-hint { max-width: 720px; line-height: 1.55; }

/* Поле кода: моноширинный, крупный разряд — шесть цифр набирают вслепую,
   поглядывая в телефон, и слипшийся текст здесь мешает. */
.totp-input {
  width: 100%; padding: 11px 14px;
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.18em;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--fg);
  transition: border-color var(--transition);
}
.totp-input:focus { outline: none; border-color: var(--accent); }
.input-hint { margin-top: 6px; font-size: 11px; color: var(--muted-soft); }

.sec-body { padding: 20px; }

.sec-state-row { display: flex; align-items: center; gap: 16px; }
.sec-state-icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.sec-state-icon i, .sec-state-icon svg { width: 22px; height: 22px; }
.sec-state-icon.on  { background: var(--success-soft); color: var(--success-strong); }
.sec-state-icon.off { background: var(--error-soft);   color: var(--error-ink); }
.sec-state-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sec-state-text strong { font-size: 14px; color: var(--fg); }
.sec-state-text span { font-size: 12px; color: var(--muted-foreground); line-height: 1.5; }

.sec-setup { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.sec-qr {
  flex: 0 0 208px; width: 208px; padding: 10px;
  background: #fff;                        /* QR читается только по контрасту */
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.sec-qr svg { width: 100%; height: auto; display: block; }
.sec-steps { flex: 1; min-width: 280px; }
.sec-steps ol { margin: 0 0 16px 18px; color: var(--fg-dim); font-size: 13px; line-height: 1.9; }
.sec-secret {
  display: inline-block; margin-top: 6px; padding: 6px 10px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
  background: var(--surface-card); border-radius: var(--radius-xs); color: var(--fg);
  user-select: all;                        /* один клик — выделен весь ключ */
}
.sec-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sec-inline .totp-input { width: 160px; }
.sec-note { margin-top: 10px; font-size: 12px; color: var(--muted-soft); line-height: 1.6; }
.sec-error { margin-top: 8px; font-size: 12px; color: var(--error); min-height: 16px; }

.sec-disable-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }

.sec-done { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.sec-done strong { font-size: 14px; color: var(--fg); }
.sec-codes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin-bottom: 16px;
}
.sec-codes span {
  padding: 9px 12px; text-align: center;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--fg); user-select: all;
}

.sec-mono { font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim); }
.sec-chip {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-xs);
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.sec-chip-ok   { background: var(--success-soft); color: var(--success-strong); }
.sec-chip-bad  { background: var(--error-soft);   color: var(--error-ink); }
.sec-chip-lock { background: var(--warning-light); color: var(--warning-ink); }

/* ── Календарь бизнес-событий ─────────────────────────────────────────────
   Лента — основной вид: у события есть сумма, поставщик и статус, а в клетке
   сетки они не помещаются. Сетка и год-теплокарта отвечают на другие вопросы:
   «в какие дни скучкованы списания» и «какой месяц тяжелее».            */

.cal-toolbar { flex-wrap: wrap; gap: 12px; }
.cal-toolbar-left, .cal-toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.cal-views { display: inline-flex; background: var(--bg-elev-2); border-radius: var(--radius-sm); padding: 3px; }
.cal-view-btn {
  padding: 6px 14px; border: none; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--muted-foreground);
  border-radius: var(--radius-xs); transition: all var(--transition);
}
.cal-view-btn:hover { color: var(--fg); }
.cal-view-btn.active { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow); }

.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-period { font-size: 13px; font-weight: 600; color: var(--fg); }
.cal-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-foreground); cursor: pointer; }
.cal-check input { accent-color: var(--accent); }

.cal-body { padding: 4px 0 8px; }

/* ── Лента ── */
.cal-month-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 20px 8px;
  font-family: var(--font-serif); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--fg);
}
.cal-month-total { font-family: var(--font-mono); font-size: 12px; color: var(--muted-soft); }

.cal-row {
  display: grid;
  grid-template-columns: 10px 46px 132px minmax(180px, 1fr) 128px 150px auto;
  align-items: center; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid var(--border-soft);
  transition: background var(--transition);
}
.cal-row:hover { background: var(--surface-hover); }
.cal-row-done { opacity: 0.55; }

.cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.cal-dot-overdue { background: var(--error); box-shadow: 0 0 0 3px var(--error-soft); }
.cal-dot-today   { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cal-dot-done    { background: var(--success); }

.cal-date { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.cal-day { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--fg); }
.cal-wd { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-soft); }

.cal-kind {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  padding: 4px 10px; border-radius: var(--radius-xs);
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.cal-kind i, .cal-kind svg { width: 13px; height: 13px; }
.cal-kind-coral { background: var(--accent-soft); color: var(--accent-strong); }
.cal-kind-green { background: var(--success-soft); color: var(--success-strong); }
.cal-kind-amber { background: var(--violet-soft); color: var(--accent-amber-ink); }
.cal-kind-teal  { background: var(--info-soft); color: var(--accent-teal-ink); }
.cal-kind-gray  { background: var(--bg-elev-2); color: var(--muted-foreground); }

.cal-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-title > span:first-child { font-size: 13px; color: var(--fg); font-weight: 500; }
.cal-sub { font-size: 11px; color: var(--muted-soft); }

.cal-amount { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--fg); text-align: right; }
.cal-amount.cal-in { color: var(--success-strong); }
.cal-noamount { font-family: var(--font); font-size: 11px; font-weight: 400; color: var(--muted-soft); }

.cal-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted-soft); }
.cal-auto {
  padding: 2px 6px; border-radius: var(--radius-xs);
  background: var(--info-soft); color: var(--accent-teal-ink); font-size: 10px; letter-spacing: 0.04em;
}
.cal-actions { display: flex; gap: 6px; justify-content: flex-end; }
.cal-done-mark { font-family: var(--font-mono); font-size: 11px; color: var(--muted-soft); }

/* ── Сетка месяца ── */
.cal-grid-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-grid-head { padding: 8px 20px 6px; }
.cal-grid-head div {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted-soft); text-align: center;
}
.cal-grid { padding: 0 20px 20px; gap: 6px; }
.cal-cell {
  min-height: 92px; padding: 7px 8px;
  background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 4px;
}
.cal-cell-empty { background: transparent; border-color: transparent; }
.cal-cell-has { border-color: var(--border-strong); }
.cal-cell-today { border-color: var(--accent); background: var(--accent-soft); }
.cal-cell-day { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); }
.cal-pill {
  padding: 3px 7px; border-radius: var(--radius-xs); cursor: pointer;
  font-size: 10.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-pill-done { opacity: 0.5; text-decoration: line-through; }
.cal-pill-coral { background: var(--accent-soft); color: var(--accent-strong); }
.cal-pill-green { background: var(--success-soft); color: var(--success-strong); }
.cal-pill-amber { background: var(--violet-soft); color: var(--accent-amber-ink); }
.cal-pill-teal  { background: var(--info-soft); color: var(--accent-teal-ink); }
.cal-pill-gray  { background: var(--bg-elev-2); color: var(--muted-foreground); }
.cal-more { font-size: 10px; color: var(--muted-soft); padding-left: 2px; }
.cal-cell-total {
  margin-top: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-soft); text-align: right;
}

/* ── Год-теплокарта ── */
.cal-year { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 18px 20px 8px; }
.cal-year-cell {
  padding: 14px 12px; cursor: pointer; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  /* Заливка пропорциональна доле от самого тяжёлого месяца: сезонность видна
     без чтения чисел. */
  background: color-mix(in srgb, var(--accent) calc(var(--heat) * 22%), var(--bg-elev));
  transition: transform var(--transition), border-color var(--transition);
}
.cal-year-cell:hover { transform: translateY(-2px); border-color: var(--accent); }
.cal-year-name { font-size: 12px; font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.cal-year-sum { font-family: var(--font-mono); font-size: 14px; color: var(--fg); }
.cal-year-in { font-family: var(--font-mono); font-size: 11px; color: var(--success-strong); }
.cal-year-count { font-size: 10px; color: var(--muted-soft); margin-top: 4px; }
.cal-year-hint { padding: 4px 20px 16px; font-size: 11px; color: var(--muted-soft); }

/* ── Модальные окна ────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(20, 20, 19, 0.42);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: modal-in 140ms ease-out;
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: min(680px, 100%); max-height: 88vh; overflow-y: auto;
  border-radius: var(--radius); box-shadow: 0 24px 64px rgba(26,25,23,0.22);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-elev); z-index: 1;
}
.modal-head h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); }
.modal-body { padding: 20px 22px; }
.modal-lead { font-size: 13px; color: var(--fg-dim); margin-bottom: 16px; }
.modal-note {
  margin: 4px 0 14px; padding: 10px 12px;
  background: var(--bg-elev-2); border-left: 2px solid var(--info);
  border-radius: var(--radius-xs); font-size: 12px; color: var(--muted-foreground); line-height: 1.55;
}
.modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--bg-elev);
}
.modal-foot-right { display: flex; gap: 8px; }

.form-row { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.form-field { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; min-width: 148px; }
.form-grow { flex: 1 1 240px; }
.form-field > span { font-size: 11px; font-weight: 500; color: var(--muted-foreground); }
.form-hint { font-weight: 400; color: var(--muted-soft); }
.form-field input, .form-field select, .form-field textarea {
  padding: 9px 11px; font-family: var(--font); font-size: 13px; color: var(--fg);
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--accent);
}
.form-field textarea { resize: vertical; font-family: var(--font); }
.form-error { font-size: 12px; color: var(--error); min-height: 16px; }

.badge-danger { background: var(--error-soft) !important; color: var(--error-ink) !important; }

@media (max-width: 1100px) {
  .cal-row { grid-template-columns: 10px 42px minmax(140px, 1fr) 110px auto; }
  .cal-kind, .cal-meta { display: none; }
  .cal-year { grid-template-columns: repeat(3, 1fr); }
}
.cal-repeat { display: inline-flex; color: var(--muted-soft); }
.cal-repeat i, .cal-repeat svg { width: 12px; height: 12px; }

/* ── Деньги: прогноз, реестр обязательств, счета ─────────────────────────── */

.mn-body { padding: 0 0 10px; }
.mn-rates { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); }

.mn-callout {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 20px 0; padding: 12px 14px;
  background: var(--info-soft); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--accent-teal-ink); line-height: 1.55;
}
.mn-callout i, .mn-callout svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }

.mn-chart-wrap { height: 260px; padding: 16px 20px 4px; }

.mn-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px; flex-wrap: wrap;
}
.mn-summary { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--fg-dim); }
.mn-summary strong { font-family: var(--font-mono); color: var(--fg); }

.mn-table { font-size: 12.5px; }
.mn-table th.num, .mn-table td.num { text-align: right; }
.mn-table td { padding: 10px 18px; }
.mn-mono { font-family: var(--font-mono); font-size: 12px; }
.mn-in { color: var(--success-strong); }
.mn-out { color: var(--accent-strong); }
.mn-quiet { color: var(--muted-soft); }
.mn-row-danger { background: var(--error-soft); }
.mn-row-danger td { color: var(--error); }
.mn-row-muted { opacity: 0.55; }

.mn-items { display: flex; flex-wrap: wrap; gap: 5px; max-width: 460px; }
.mn-item {
  padding: 2px 8px; border-radius: var(--radius-xs);
  background: var(--accent-soft); color: var(--accent-strong); font-size: 11px; white-space: nowrap;
}
.mn-item-in { background: var(--success-soft); color: var(--success-strong); }

.mn-tag {
  margin-left: 6px; padding: 2px 6px; border-radius: var(--radius-xs);
  background: var(--bg-elev-2); color: var(--muted-foreground); font-size: 10px;
}
.mn-tag-in { background: var(--success-soft); color: var(--success-strong); }
.mn-link { margin-left: 6px; color: var(--muted-soft); display: inline-flex; vertical-align: middle; }
.mn-link:hover { color: var(--accent); }
.mn-link i, .mn-link svg { width: 12px; height: 12px; }

.mn-subhead { border-top: 1px solid var(--border); margin-top: 8px; }
.mn-note { padding: 14px 20px 4px; font-size: 11.5px; color: var(--muted-soft); line-height: 1.6; }

.mn-accounts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px; padding: 4px 20px 18px;
}
.mn-account {
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elev); display: flex; flex-direction: column; gap: 6px;
}
.mn-account-head { display: flex; justify-content: space-between; align-items: baseline; }
.mn-account-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.mn-account-cur { font-family: var(--font-mono); font-size: 11px; color: var(--muted-soft); }
.mn-account-balance { font-family: var(--font-mono); font-size: 19px; color: var(--fg); }
.mn-account-meta { font-size: 11px; color: var(--muted-soft); line-height: 1.45; margin-bottom: 4px; }
.mn-account .btn-sm { align-self: flex-start; }

.mn-check-field { justify-content: flex-end; }
.mn-switch { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-dim); cursor: pointer; }
.mn-switch input { accent-color: var(--accent); }

/* ── Карта инфраструктуры ─────────────────────────────────────────────────
   Колонки-слои слева направо: игроки → домены → пограничный слой →
   приложения → данные. Порядок не декоративный: он совпадает с путём
   запроса, поэтому схему можно читать как маршрут, а не как облако.      */

.infra-shell { display: flex; flex-direction: column; }
.infra-layout { display: flex; align-items: stretch; min-height: 540px; }
.infra-summary { font-size: 12px; color: var(--muted-foreground); }
.infra-summary-cost strong { font-family: var(--font-mono); color: var(--fg); }

.infra-canvas { flex: 1; position: relative; overflow: hidden; }
.infra-stage {
  position: absolute; inset: 0; cursor: grab;
  padding: 24px 28px;
  background-image: radial-gradient(circle at 1px 1px, var(--border-soft) 1px, transparent 0);
  background-size: 22px 22px;
}
.infra-stage.is-dragging { cursor: grabbing; }
.infra-world { position: relative; transform-origin: 0 0; transition: transform 90ms linear; }

.infra-edges { position: absolute; left: 0; overflow: visible; pointer-events: none; }
.infra-link-dim { opacity: 0.22; }
.infra-link-label {
  font-family: var(--font); font-size: 10px; fill: var(--muted-soft);
  paint-order: stroke; stroke: var(--bg); stroke-width: 3px;   /* подложка, чтобы текст читался поверх линии */
}

.infra-layer-head {
  position: absolute; top: 0;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted-soft); text-align: center;
}

.infra-node {
  position: absolute; padding: 11px 13px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition);
}
.infra-node:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.infra-node.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.infra-node.is-dim { opacity: 0.4; }

.infra-node-top { display: flex; align-items: center; gap: 7px; }
.infra-node-icon {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev-2); color: var(--muted-foreground);
}
.infra-node-icon i, .infra-node-icon svg { width: 13px; height: 13px; }
.infra-node-coral .infra-node-icon { background: var(--accent-soft); color: var(--accent-strong); }
.infra-node-green .infra-node-icon { background: var(--success-soft); color: var(--success-strong); }
.infra-node-teal  .infra-node-icon { background: var(--info-soft); color: var(--accent-teal-ink); }
.infra-node-amber .infra-node-icon { background: var(--violet-soft); color: var(--accent-amber-ink); }

.infra-node-name {
  flex: 1; font-size: 12.5px; font-weight: 600; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.infra-state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: 0 0 7px; }
.infra-state-warn .infra-state-dot { background: var(--warning); }
.infra-state-bad .infra-state-dot { background: var(--error); }
.infra-state-planned .infra-state-dot { background: var(--info); }
.infra-state-retired { opacity: 0.5; }
.infra-state-retired .infra-state-dot { background: var(--muted-soft); }

.infra-node-sub {
  font-size: 10.5px; color: var(--muted-foreground); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.infra-node-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.infra-chip {
  padding: 2px 6px; border-radius: var(--radius-xs);
  background: var(--bg-elev-2); color: var(--muted-foreground); font-size: 9.5px; white-space: nowrap;
}
.infra-chip-cost { background: var(--accent-soft); color: var(--accent-strong); font-family: var(--font-mono); }
.infra-chip-warn { background: var(--warning-light); color: var(--warning-ink); }

.infra-panel {
  width: 312px; flex: 0 0 312px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; background: var(--bg-elev);
}
.infra-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.infra-panel-head h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); }
.infra-panel-head p { font-size: 11.5px; color: var(--muted-foreground); margin-top: 3px; line-height: 1.4; }
.infra-panel-body { flex: 1; overflow-y: auto; padding: 12px 18px; }
.infra-kv {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px;
}
.infra-kv > span:first-child { color: var(--muted-soft); white-space: nowrap; }
.infra-kv > span:last-child { color: var(--fg-dim); text-align: right; word-break: break-word; }
.infra-kv .mono { font-family: var(--font-mono); font-size: 11px; }
.infra-link-row > span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.btn-icon-sm { padding: 2px; }
.btn-icon-sm i, .btn-icon-sm svg { width: 13px; height: 13px; }
.infra-panel-section {
  margin: 16px 0 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-soft);
}
.infra-note { margin-top: 10px; font-size: 11.5px; color: var(--muted-foreground); line-height: 1.55; }
.infra-panel-foot {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.infra-hint { padding: 10px 20px 14px; font-size: 11px; color: var(--muted-soft); border-top: 1px solid var(--border); }

@media (max-width: 1200px) {
  .infra-layout { flex-direction: column; }
  .infra-panel { width: auto; flex: none; border-left: none; border-top: 1px solid var(--border); }
}

/* ── Отзывы в сторе ─────────────────────────────────────────────────────────
   Карточка вместо строки таблицы: работа с отзывом — это чтение текста и
   правка ответа, а не просмотр колонок. Ширину держим читаемой (72ch), иначе
   на широком мониторе строка ответа растягивается до нечитаемости. */
.rv-card {
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
  max-width: 900px;
}
.rv-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; margin-bottom: 10px;
}
.rv-head .muted { color: var(--muted-soft); }
.rv-stars { color: var(--warning); letter-spacing: 1px; font-size: 15px; }
.rv-text {
  color: var(--fg-dim); font-size: 14px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; max-width: 72ch;
}

/* Вопрос модели владельцу. Выделен янтарём: это не ошибка, а ожидание ответа. */
.rv-ask {
  margin: 12px 0; padding: 12px 14px;
  background: var(--violet-soft); border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
}
.rv-ask-q { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.rv-ask-q i, .rv-ask-q svg { width: 15px; height: 15px; }

.rv-draft { margin-top: 12px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.rv-variants { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rv-variant {
  padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--bg-elev-2); color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.rv-variant:hover { background: var(--surface-hover); }
.rv-variant.active { background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(31,107,122,0.35); }
.rv-input {
  width: 100%; padding: 10px 12px; resize: vertical;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg); font-family: var(--font); font-size: 14px; line-height: 1.5;
}
.rv-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rv-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
/* .btn-primary в панели растянут на всю ширину — здесь это кнопка, а не блок. */
.rv-actions .btn-primary { width: auto; padding: 8px 18px; }
.rv-len { font-size: 12px; color: var(--muted-soft); }
.rv-answered {
  margin-top: 12px; padding: 12px 14px;
  background: var(--bg-elev-2); border-radius: var(--radius-sm);
}

/* ════════════════════════════════════════════════════════════════════════════
   UI-КОМПЛЕКТ: селект, выбор периода, сортируемые таблицы, подсказки графиков.

   Зачем свои контролы. Нативные <select> рисует операционная система: на macOS и
   iOS это синий системный список со своим шрифтом и скруглениями, который не
   подчиняется ни одной нашей переменной. В панели, где всё остальное — тёплая
   канва, коралловый акцент и волосяные линии, он выглядит вставкой из чужого
   приложения. Здесь — тот же набор поведения, но нашими токенами.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Селект ──────────────────────────────────────────────────────────────── */
.vx-select { position: relative; display: inline-block; }

.vx-select-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px 7px 11px; min-height: 34px;
  font-family: var(--font); font-size: 12.5px; font-weight: 500; line-height: 1;
  color: var(--fg-dim); background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--transition); white-space: nowrap;
}
.vx-select-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.vx-select-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent); }
.vx-select.open .vx-select-btn, .vx-range.open .vx-select-btn { border-color: var(--accent); background: var(--bg-elev); }

.vx-select-btn .vx-ico { width: 14px; height: 14px; flex: 0 0 14px; color: var(--muted-foreground); }
.vx-select-btn .vx-val { color: var(--fg); }
.vx-select-btn .vx-caret {
  width: 12px; height: 12px; margin-left: 2px; color: var(--muted-soft);
  transition: transform var(--transition);
}
.vx-select.open .vx-select-btn .vx-caret { transform: rotate(180deg); }

/* Поповеры живут в <body>, а не внутри контрола. Причина: карточки панели
   (.table-section) обрезают содержимое по overflow: hidden ради скруглённых
   углов таблиц, и выпадающий список внутри них просто срезался бы по краю
   карточки. Позиция считается от кнопки при открытии. */
.vx-menu {
  position: fixed; z-index: 200; min-width: 150px;
  padding: 5px; background: var(--bg-elev);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(20, 20, 19, 0.10), 0 2px 6px rgba(20, 20, 19, 0.06);
  max-height: 320px; overflow-y: auto;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
.vx-menu.open { opacity: 1; transform: none; pointer-events: auto; }

.vx-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border-radius: var(--radius-xs);
  font-size: 12.5px; font-weight: 500; color: var(--fg-dim);
  cursor: pointer; white-space: nowrap; transition: background var(--transition);
}
.vx-opt:hover, .vx-opt.cursor { background: var(--surface-hover); }
.vx-opt.sel { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.vx-opt .vx-opt-ico { width: 15px; text-align: center; flex: 0 0 15px; font-size: 13px; opacity: 0.85; }
.vx-opt .vx-opt-hint { margin-left: auto; padding-left: 14px; font-size: 11px; color: var(--muted-soft); font-variant-numeric: tabular-nums; }
.vx-opt.sel .vx-opt-hint { color: var(--accent-strong); opacity: 0.75; }

/* ── Выбор периода ───────────────────────────────────────────────────────── */
.vx-range { position: relative; display: inline-block; }
.vx-range-pop {
  position: fixed; z-index: 200;
  display: flex; background: var(--bg-elev);
  border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 20, 19, 0.12), 0 2px 6px rgba(20, 20, 19, 0.06);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
.vx-range-pop.open { opacity: 1; transform: none; pointer-events: auto; }

.vx-presets {
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
  border-right: 1px solid var(--border); min-width: 150px;
}
.vx-preset {
  padding: 7px 10px; border-radius: var(--radius-xs); text-align: left;
  font-size: 12.5px; font-weight: 500; color: var(--fg-dim); cursor: pointer;
  transition: background var(--transition); white-space: nowrap;
}
.vx-preset:hover { background: var(--surface-hover); }
.vx-preset.sel { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }

.vx-cals { display: flex; gap: 18px; padding: 12px 14px 10px; }
.vx-cal { width: 216px; }
.vx-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--fg);
}
.vx-cal-nav {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xs); cursor: pointer; color: var(--muted-foreground);
  transition: background var(--transition);
}
.vx-cal-nav:hover { background: var(--surface-hover); color: var(--fg); }
.vx-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.vx-cal-dow {
  text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  color: var(--muted-soft); text-transform: uppercase; padding: 4px 0 6px;
}
.vx-day {
  height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--fg-dim); cursor: pointer; border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums; transition: background 100ms ease, color 100ms ease;
}
.vx-day:hover:not(.off):not(.future) { background: var(--surface-hover); }
.vx-day.off { color: transparent; pointer-events: none; }
/* Ненаступивший день: тише соседей, но кликабелен там, где за горизонтом есть
   что показать (прогноз на Финансах). .future — тот же день там, где показывать
   нечего, и тогда он выключен. */
.vx-day.ahead { color: var(--muted-soft); }
.vx-day.future { color: var(--border-strong); cursor: not-allowed; }
.vx-day.in { background: var(--accent-soft); border-radius: 0; }
.vx-day.edge { background: var(--accent); color: #fff; font-weight: 600; }
.vx-day.edge.start { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.vx-day.edge.end { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.vx-day.edge.only { border-radius: var(--radius-xs); }
.vx-day.today:not(.edge) { box-shadow: inset 0 0 0 1px var(--border-strong); }

.vx-range-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--border);
}
.vx-range-hint { font-size: 11.5px; color: var(--muted-soft); font-variant-numeric: tabular-nums; }

/* ── Сортируемые таблицы ─────────────────────────────────────────────────── */
/* Селектор по АТРИБУТУ, а не по классу: разметка ставит data-sort, класса
   vx-sort на заголовках нет никогда — из-за этого стрелки не показывались вовсе,
   и по какому столбцу отсортировано было не видно. */
th[data-sort] { cursor: pointer; user-select: none; transition: color var(--transition); }
th[data-sort]:hover { color: var(--fg); }
th[data-sort]::after {
  content: '↕'; margin-left: 5px; font-size: 10px; opacity: .25;
  display: inline-block; transition: opacity var(--transition);
}
th[data-sort]:hover::after { opacity: .55; }
th[data-sort].asc, th[data-sort].desc { color: var(--accent-strong); background: var(--accent-soft); }
th[data-sort].asc::after { content: '↑'; opacity: 1; }
th[data-sort].desc::after { content: '↓'; opacity: 1; }

/* Числа в таблицах — моноширинными цифрами: колонка читается как столбик, а не
   как рваный текст. Это не украшение: взгляд сравнивает разряды по позиции. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.vx-flag { font-size: 14px; margin-right: 7px; line-height: 1; }
.vx-sub { display: block; font-size: 10.5px; color: var(--muted-soft); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ── Метрики-плашки над графиком ─────────────────────────────────────────── */
.vx-tiles { display: flex; flex-wrap: wrap; gap: 0; }
.vx-tile { padding: 2px 26px 2px 0; margin-right: 26px; border-right: 1px solid var(--border); }
.vx-tile:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.vx-tile-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: 8px;
}
.vx-tile-label .vx-ico { width: 12px; height: 12px; }
.vx-tile-value {
  font-family: var(--font-serif); font-size: 30px; font-weight: 400; color: var(--fg);
  letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums lining-nums;
}
.vx-tile-hint { font-size: 11.5px; color: var(--muted-foreground); margin-top: 6px; }
/* Точка ряда: тот же цвет, что у линии этого показателя на графике ниже. */
.vx-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; display: inline-block; }
.vx-pos { color: var(--success-strong); }
.vx-neg { color: var(--error); }

/* Качество сборки — сетка 2×2. Четыре метрики несопоставимы по величине, и на
   общей оси три из них ложились на ноль; каждой нужна своя. Ниже 1100px
   становится одна колонка: при двух колонках на узком экране график шириной с
   ладонь не показывает ни тренда, ни линии цели. */
.aso-quality-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px;
}
@media (max-width: 1100px) { .aso-quality-grid { grid-template-columns: minmax(0, 1fr); } }

/* ПИЛЮЛЯ НАД ГРАФИКОМ (дизайн pill-week; Финансы и P&L). Прижата к верхнему краю
   холста и центрируется по курсору: подсказка, стоящая сбоку, закрывала именно
   те соседние дни, с которыми сравнивают. Тени нет — на светлой карточке
   хватает волосяной рамки, а тень делала пилюлю тяжелее самих данных. */
.vx-pill {
  position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 5px 14px 5px 12px;
  font-family: var(--font); font-size: 11.5px; line-height: 1; color: var(--fg);
  opacity: 0; transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.vx-pill.on { opacity: 1; transform: none; }
.vx-pill-date { color: var(--muted-foreground); }
.vx-pill-date b { color: var(--fg); font-weight: 600; }
.vx-pill-item { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.vx-pill-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.vx-pill-sep { width: 1px; height: 14px; background: var(--border-strong); }
.vx-pill-fc {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-teal-ink); background: var(--accent-soft);
  border-radius: var(--radius-xs); padding: 2px 6px;
}
.vx-pill-margin { font-family: var(--font-serif); line-height: 1; font-variant-numeric: tabular-nums; }

/* Дельта к прошлому периоду — чипом вплотную к числу. */
.vx-tile-top { display: flex; align-items: baseline; gap: 10px; }
.vx-delta {
  font-size: 11px; font-weight: 600; border-radius: var(--radius-xs); padding: 1px 8px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vx-delta-up { color: var(--success-ink); background: var(--success-soft); }
.vx-delta-down { color: var(--error-ink); background: var(--error-soft); }
.vx-delta-flat { color: var(--muted-ink); background: var(--surface-card); }

/* ── Подсказка на графике ────────────────────────────────────────────────── */
.vx-tip {
  position: absolute; z-index: 40; pointer-events: none;
  min-width: 152px; padding: 10px 12px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(26,25,23,.10);
  font-family: var(--font); font-size: 12px; color: var(--fg-dim);
  opacity: 0; transition: opacity 110ms ease, transform 110ms ease; transform: translateY(2px);
}
.vx-tip.on { opacity: 1; transform: none; }
.vx-tip-title {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-soft); padding-bottom: 7px; margin-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.vx-tip-row { display: flex; align-items: center; gap: 8px; padding: 2.5px 0; }
.vx-tip-dot { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 7px; }
.vx-tip-name { color: var(--muted-foreground); }
.vx-tip-val { margin-left: auto; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.vx-tip-foot {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted-soft);
}

/* ── Панель параметров страницы ──────────────────────────────────────────────
   Период общий для всех блоков вкладки, поэтому живёт над ними, а не в шапке
   одного из них: стоя внутри карточки, он читается как её настройка, и второй
   блок выглядит так, будто у него период свой. */
.vx-pagebar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.vx-pagebar-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-soft);
}
.vx-pagebar-note { font-size: 11.5px; color: var(--muted-soft); margin-left: auto; }

/* ── Ячейка окупаемости ──────────────────────────────────────────────────────
   Одинаковая высота у всех строк важнее плотности: разная высота читается как
   разная значимость, хотя означает лишь наличие подписи. Поэтому вторая строка
   в ячейке есть ВСЕГДА — где нечего показать, там неразрывный пробел. */
.vx-roas { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.vx-roas-sub { display: block; font-size: 10.5px; color: var(--muted-soft); margin-top: 2px; font-variant-numeric: tabular-nums; }
.vx-pred { opacity: .62; font-style: italic; }
.vx-pred .vx-roas::before { content: '≈'; margin-right: 1px; font-style: normal; }
tbody td.vx-cell { padding-top: 10px; padding-bottom: 10px; }

/* Разделитель перед блоком денег. В таблице тринадцать столбцов, и без него
   проценты и суммы читаются как один непрерывный ряд чисел, хотя отвечают на
   разные вопросы: слева «отбивается ли», справа «сколько это в деньгах». */
.data-table th.vx-sep, .data-table td.vx-sep { border-left: 1px solid var(--border); }

/* Факт, построенный на горстке людей: цифра настоящая, но веса у неё нет. */
.vx-thin { opacity: .55; }

/* ── Раскрытие строки дня ────────────────────────────────────────────────────
   Когорта всегда по дням; страна и кампания — подразбивка ВНУТРИ дня, а не
   отдельная ось. Поэтому подстроки живут в той же таблице со сдвигом, а не в
   своём отчёте: сравнивать их надо с итогом дня, который стоит прямо над ними. */
.vx-key { display: inline-flex; align-items: center; gap: 6px; }
.vx-caret-cell {
  display: inline-flex; width: 14px; height: 14px; flex: 0 0 14px;
  color: var(--muted-soft); transition: transform var(--transition);
}
.vx-caret-void { visibility: hidden; }
tr.vx-parent { cursor: pointer; }
tr.vx-parent.open .vx-caret-cell { transform: rotate(180deg); color: var(--accent-strong); }
/* Раскрытый день помечается ЛИНИЕЙ слева, а не заливкой: заливка накрывала
   десятки строк сразу и читалась как «выделено всё полотно», хотя означала лишь
   «этот блок раскрыт». Линия показывает границы блока и не спорит с цветом
   самих чисел, у которых свой смысл (зелёный/янтарный/красный ROAS). */
tr.vx-parent.open > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr.vx-parent.open > td { background: transparent; font-weight: 500; }

tr.vx-child > td:first-child {
  padding-left: 44px;
  box-shadow: inset 3px 0 0 var(--border-strong);
}
tr.vx-child > td {
  background: transparent;
  color: var(--muted-foreground);
  border-bottom-color: var(--border-soft);
}
tr.vx-child:hover > td { background: var(--surface-hover); }
tr.vx-child .vx-roas { font-weight: 500; }

/* Свёрнутый хвост подстрок: это не сущность, а остаток — читается тише. */
.vx-rest { font-style: italic; color: var(--muted-soft); }

/* Шум выборки: строка построена на горстке установок.
   Две ступени, а не одна, потому что «шумно» и «бессмысленно» — разные советы:
   при 20 установках цифру можно читать как направление, при двух — нельзя вовсе.
   Гасим прозрачностью, а не цветом: цвет в этих ячейках уже занят под ROAS. */
.vx-noise { opacity: .58; }
.vx-noise-hard { opacity: .34; }

/* Пунктира под числами НЕТ намеренно (снят 13.09.2026). Он спорил с подчёркнутым
   текстом и добавлял ряби там, где и так всё сказано прозрачностью: чем ненадёжнее
   цифра, тем она бледнее. Одного знака на один смысл достаточно. */

/* Доля дня с известным источником — когда она мала, число в фильтре мало о чём говорит. */
.vx-warn {
  margin-left: 7px; padding: 1px 5px; border-radius: 999px;
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--warning-ink); background: var(--warning-light); border: 1px solid var(--warning-border);
}

/* ── Вкладка «Финансы»: витрины рядом ────────────────────────────────────────
   Три панели в две колонки. Половина ширины выбрана не ради компактности, а
   потому что на всю ширину график перестаёт читаться как форма: кромки
   разъезжаются, и глаз ходит по экрану вместо того, чтобы видеть тренд.
   Ниже 1180px колонки схлопываются — на узком экране две панели рядом дают
   графики шириной с ладонь, что хуже, чем один под другим.

   Ни заголовка, ни пояснений у панели управления нет намеренно: экран
   открывают каждый день, и текст, который прочитан один раз, на сотом
   открытии остаётся только шумом. */
.fin-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}

/* Сводная витрина — во всю ширину, магазины — второй строкой. Раньше все три
   были равноправными ячейками сетки, и «Все витрины» оказывались бок о бок с
   Google Play: два графика одного размера, один из которых включает другой.
   Общая картина должна быть шире частной — тогда порядок чтения очевиден. */
.fin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fin-grid > .fin-panel[data-store=""] { grid-column: 1 / -1; }
@media (max-width: 1180px) { .fin-grid { grid-template-columns: minmax(0, 1fr); } }

/* Шапка панели ужата: заголовок мельче, отступы меньше, легенда рядом с ним.
   Всё это — ради высоты графика: на панели в 280px каждые отыгранные двадцать
   пикселей заметны, а прочитанный один раз заголовок в них не нуждается. */
.fin-panel .table-header { align-items: center; gap: 10px; padding: 14px 22px 10px; }
.fin-panel .table-header h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
}
.fin-panel .table-header h3 svg { width: 15px; height: 15px; color: var(--muted-foreground); }
.fin-panel-warn { font-size: 13px; color: var(--warning-ink); cursor: help; }
/* Чип «прогноз» у заголовка витрины: один на панель вместо метки в каждой плитке. */
.fin-fc-chip {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-teal-ink); background: var(--accent-soft);
  border-radius: var(--radius-xs); padding: 2px 7px; white-space: nowrap;
}
/* «Прогноза нет» — тем же чипом, но нейтральным: это не показатель, а отказ. */
.fin-fc-chip--off { color: var(--muted-ink); background: var(--surface-card); }
/* Подпись под числом — всегда в одну строку: на узкой витрине перенос сдвигал
   соседние плитки по вертикали, и ряд переставал читаться как ряд. */
.vx-tile-hint { white-space: nowrap; }

.fin-panel-tiles { padding: 4px 22px 0; }
.fin-panel-chart { height: 300px; padding: 4px 12px 12px; position: relative; }

/* ПЛИТКИ СНОВА КОЛОНКАМИ (16.09.2026). Карточки с рамкой и своей подложкой были
   компромиссом под старую тему, где карточка панели совпадала по цвету с канвой
   и плитке не на чем было держаться. Теперь панель светлее канвы, и рамка у
   плитки стала третьей рамкой подряд — вокруг панели, вокруг плитки, вокруг
   графика. Волосяной разделитель между колонками говорит то же самое тише. */
.vx-tiles--boxed {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0;
}
.vx-tiles--boxed .vx-tile {
  padding: 0 24px; margin: 0;
  border: none; border-left: 1px solid var(--border); border-radius: 0; background: none;
}
.vx-tiles--boxed .vx-tile:first-child { padding-left: 0; border-left: none; }
.vx-tiles--boxed .vx-tile-label { font-size: 11px; margin-bottom: 8px; }
.vx-tiles--boxed .vx-tile-value { font-size: 30px; }
.vx-tiles--boxed .vx-tile-hint { font-size: 11.5px; margin-top: 6px; min-height: 16px; }

/* Витрины магазинов вдвое уже сводной — числа там на ступень мельче, иначе
   четыре плитки не помещаются в строку и переносятся по две. */
.fin-panel[data-store="googleplay"] .vx-tiles--boxed .vx-tile,
.fin-panel[data-store="rustore"] .vx-tiles--boxed .vx-tile { padding: 0 16px; }
.fin-panel[data-store="googleplay"] .vx-tiles--boxed .vx-tile-value,
.fin-panel[data-store="rustore"] .vx-tiles--boxed .vx-tile-value { font-size: 22px; }

/* ── Промо-кредит Google Ads (нижний блок «Финансов», adcredit.js) ──────────
   Панель во всю ширину сетки: это не четвёртая витрина, а отдельный срок с
   дедлайном, и делить его пополам с соседом было бы враньём про иерархию. */
.fin-grid > .fin-panel--credit { grid-column: 1 / -1; }
.fin-panel--credit .table-header { flex-wrap: wrap; }

/* Вердикт словами. Цвет тут разрешён самый громкий из палитры: это
   единственное место в админке, где у числа есть срок и цена промаха. */
.cred-chip {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 9px; border-radius: var(--radius-xs); white-space: nowrap;
}
.cred-chip--ok   { color: var(--success-ink); background: var(--success-soft); }
.cred-chip--warn { color: var(--warning-ink); background: var(--warning-light); }
.cred-chip--bad  { color: var(--error-ink);   background: var(--error-soft); }

/* Купон и награда — справа и тише всего: их читают один раз, когда сверяют
   цифры с панелью Google, а не каждый день. */
.cred-code { margin-left: auto; font-size: 11.5px; color: var(--muted-foreground); }
.cred-code-val { font-family: var(--font-mono); font-size: 11px; color: var(--muted-soft); }

/* Пять плиток против четырёх у витрин — и у двух из них в значении не число,
   а дата. На 120px «Dec 13» переносился на вторую строку и выезжал за край
   панели, поэтому здесь колонка шире, а число на ступень мельче: читается всё
   равно как заголовок, но помещается целиком. */
.fin-panel--credit .vx-tiles--boxed { grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); }
.fin-panel--credit .vx-tiles--boxed .vx-tile { padding: 0 18px; }
.fin-panel--credit .vx-tiles--boxed .vx-tile-value { font-size: 25px; white-space: nowrap; }
/* Чип «46% of needed» длиннее обычной дельты: на узкой колонке он уходит под
   число, а не налезает на соседнюю плитку. */
.fin-panel--credit .vx-tile-top { flex-wrap: wrap; gap: 6px; }

.cred-bar {
  position: relative; height: 6px; margin: 16px 22px 0;
  background: var(--bg-elev-2); border-radius: 999px; overflow: visible;
}
.cred-bar-fill {
  height: 100%; border-radius: 999px; background: var(--accent);
  transition: width .5s ease; max-width: 100%;
}
.cred-bar-fill--late { background: var(--error); }
/* Метка «где мы должны быть сегодня». Засечка, а не вторая заливка: заливок в
   одной полосе две — это стопка, а здесь не сумма, а сравнение с планом. */
.cred-bar-plan {
  position: absolute; top: -4px; width: 2px; height: 14px;
  background: var(--warning); border-radius: 1px; transform: translateX(-1px);
}

/* Разбивка по кампаниям: строки, а не таблица. Их две-три, и шапка таблицы
   заняла бы больше места, чем сами данные. */
.cred-camps { padding: 2px 22px 16px; display: flex; flex-direction: column; gap: 2px; }
.cred-camp {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 84px 44px;
  align-items: baseline; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--border-soft); font-size: 12.5px;
}
.cred-camp-name { color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred-camp-meta { font-size: 11px; color: var(--muted-soft); }
.cred-camp-sum { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.cred-camp-share { text-align: right; font-size: 11.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
/* Остановленная кампания гаснет, но не исчезает: её расход купон засчитал, и
   из суммы она никуда не делась. */
.cred-camp--idle .cred-camp-name { color: var(--muted-foreground); }

@media (max-width: 720px) {
  .cred-code { width: 100%; margin-left: 0; }
  .cred-camp { grid-template-columns: minmax(0, 1fr) auto; }
  .cred-camp-meta { display: none; }
}

/* Вид творения на карточке ленты (единая фабрика: существо или техника) */
.cr-kind-pill { margin-right: 6px; }
.cr-kind-puppet { background: var(--accent-soft); color: var(--accent-teal-ink); }
.cr-kind-vehicle { background: var(--warning-light); color: var(--warning-ink); }
.cr-kind-auto { background: var(--surface-card); color: var(--muted-ink); }
.cr-kind-block { background: var(--blue-soft, #e6ecf5); color: var(--blue-ink); }
.cr-kind-building { background: var(--success-soft); color: var(--success-ink); }