:root {
  /* 26.08.2026 — визуальный рескин под макет TECH_HANDOFF/CURRENT.html (тёмная тема).
     Значения токенов взяты из базового CSS мокапа (общий для всех разделов блок в начале
     файла — #07111f/#0a1627/#0c1a2c/#1685e8 и т.д.), а не с версионированных v1..v8
     точечных переопределений отдельных компонентов мокапа (тот файл — черновик с наслоением
     правок разных итераций, брать оттуда как источник истины для базовой палитры нельзя).
     Вся остальная вёрстка ниже уже была построена на переменных — реальных изменений
     разметки/классов не потребовалось, только токены + несколько хардкод-цветов (см. ниже). */
  /* 26.08.2026, рескин v3 — по фидбеку владельца ("шрифт более белый", "второй скрин
     ярче и приятнее") приподнят фон (более синий и светлый, а не почти чёрный) и текст
     сайдбара (ближе к белому). Сам --accent/--text не трогали — только фон и приглушённый
     текст навигации, чтобы контраст остался комфортным. */
  /* 26.08.2026, рескин v5 — владелец прислал сравнение "у нас/в макете" ещё раз ("справа
     всё равно ярче шрифты"), пошёл смотреть точный источник — CURRENT.html из
     E:\CLAUDE PROJECTS\SSP\UI_UX\25082026\v1.5\ssp_ad_exchange_FINAL_HTML\, блок
     #final1UnifiedStyles (помечен в самом файле как "FINAL SIDEBAR: dimensions from
     accepted reference" — это финальная, а не черновая версия сайдбара). Там текст пункта
     меню (.final1-nav) — #e9eef4, то есть почти белый, а не приглушённый #9eacc0 из базового
     блока CSS вверху файла (который я использовал в v1 — он касается ТОЛЬКО общей палитры
     страниц, не финальной версии сайдбара). Взял точное значение оттуда, вместо повторного
     подбора на глаз. */
  --sidebar-bg: #0e1d33;
  --sidebar-bg-active: #123252;
  --sidebar-text: #e9eef4;
  --sidebar-text-active: #ffffff;
  --accent: #1685e8;
  --accent-2: #35a8ff;
  /* 26.08.2026, рескин v6 — владелец прислал скриншот дашборда из мокапа ("нужно сделать такой
     же фон"). Взял точные цвета из #dashboardIntegrated в CURRENT.html вместо повторного подбора:
     .panel{background:#0b1b2a;border:#203c55}, .metric{background:#091825;border:#173149},
     .metrics-grid{border:#1e3a51}. Это темнее и контрастнее, чем было в v3-v5 (там панели/фон
     подбирались на глаз от общей палитры страницы, не от реального дашборда). */
  --bg: #07111f;
  --panel: #0b1b2a;
  --panel-alt: #091825;
  --input-bg: #091825;
  --border: #1e3a51;
  --text: #e7edf5;
  --muted: #8496aa;
  --green: #4de0a5;
  --green-bg: rgba(77, 224, 165, .14);
  --red: #ff9292;
  --red-bg: rgba(255, 146, 146, .14);
  --amber: #ffc875;
  --amber-bg: rgba(255, 200, 117, .14);
  --radius: 8px;
}

* { box-sizing: border-box; }

/* 26.08.2026, рескин — базовая тема для ЛЮБОГО select/input/textarea в приложении, а не
   только внутри .field (см. PROJECT-NOTES.md: найдено скриншотом Playwright — <select> роли
   в таблице «Пользователи» рендерится вне .field, без этого правила остаётся белым нативным
   контролом браузера поверх тёмной темы). .field input ниже задаёт то же самое — оставлен
   для явной специфичности/будущих раздельных правок, реального конфликта значений нет. */
select, input, textarea {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
}
select option { background: var(--input-bg); color: var(--text); }

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

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

/* ---- Sidebar ---- */
/* 26.08.2026, рескин v8 — владелец прислал попиксельное сравнение (сэмплировал сам, цвета
   реально разные: у нас фон сайдбара #0e1d33, в макете #001224 — темнее, не светлее, как я
   раньше решил в v3 без проверки источника). Взял ТОЧНЫЙ градиент из
   E:\CLAUDE PROJECTS\SSP\UI_UX\25082026\v1.5\ssp_ad_exchange_FINAL_HTML\CURRENT.html,
   блок #final1UnifiedStyles → .sidebar: linear-gradient(180deg,#001224 0%,#00182c 55%,#001325
   100%), вместо var(--sidebar-bg) (тот токен всё ещё используется .sidebar-version — там его не
   трогал). Это финальный, помеченный как "accepted reference" блок сайдбара, не черновая
   версия — тот же источник, где раньше нашли #e9eef4 для текста пункта меню. */
.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #001224 0%, #00182c 55%, #001325 100%);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 18px 0;
}
/* 26.08.2026, рескин v9 — по просьбе владельца лого крупнее и по центру шапки сайдбара
   (было: прижато к левому краю, размер под макет-строку "AdliumX" без слова "Control Center"
   рядом). align-items:center центрирует и вордмарк, и подпись под ним. */
.sidebar-brand {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.sidebar-brand strong { color: #fff; font-size: 21px; font-weight: 700; letter-spacing: .2px; }
.sidebar-brand-word { display: flex; align-items: center; }
/* 26.08.2026, рескин — подпись "Control Center" под вордмарком, как в макете. */
.sidebar-brand-subtitle { font-size: 11px; color: var(--sidebar-text); opacity: .7; margin-top: 4px; }
/* 26.08.2026, рескин — заголовки секций меню (АНАЛИТИКА/ФИНАНСЫ/СИСТЕМА/...), как в макете. */
.nav-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--sidebar-text); opacity: .55; padding: 16px 20px 6px; }
.sidebar-brand span { display: block; font-size: 10.5px; color: var(--sidebar-text); opacity: .75; }
/* 30.07.2026 (повторно) — иконка «X» встык сразу после текста "Adlium" (было: отдельная
   иконка слева + отдельный текст "AdliumX" — выглядело как два "X" рядом). Полный вордмарк
   сюда не годится — у него непрозрачный белый фон, на тёмной шапке сайдбара выглядел бы белым
   прямоугольником, поэтому используется отдельная иконка «X» с прозрачным фоном. Подпись
   "V3B (боевая ветка)" убрана по просьбе владельца (см. запись выше). */
.sidebar-brand .sidebar-logo-icon { width: 34px; height: 34px; margin-left: 2px; object-fit: contain; flex-shrink: 0; }

.nav-group { margin-bottom: 2px; padding: 0 10px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 1px 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--sidebar-text);
  user-select: none;
}
.nav-item:hover { background: rgba(255,255,255,.06); }
/* 26.08.2026, рескин — активный пункт: сплошная заливка акцентным цветом (как в макете), а не
   тонкая полоска слева. Затрагивает только верхнеуровневые (не вложенные) пункты — у вложенных
   .nav-children .nav-item ниже своя, более компактная версия того же стиля. */
/* 26.08.2026, рескин v8 — точный градиент активного пункта из того же #final1UnifiedStyles
   (.final1-nav.active): linear-gradient(90deg,#0d63e5,#0754d2) + фирменная тень, вместо плоского
   var(--accent) — тоже нашлось попиксельным сравнением владельца (сэмпл на активном пункте в
   макете дал #0a5bdb, это точка на этом градиенте, не сплошной цвет). */
.nav-item.active { background: linear-gradient(90deg, #0d63e5, #0754d2); color: #fff; font-weight: 600; box-shadow: 0 7px 20px rgba(0,71,184,.27); }
.nav-item .icon { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; opacity: .85; flex-shrink: 0; }
.nav-item.active .icon { opacity: 1; }
/* 26.08.2026, рескин v3 — .nav-label занимает всё свободное место в строке, чтобы
   .nav-chevron/.nav-external (декоративные, как в макете) прижимались к правому краю,
   а не текст. Затрагивает только пункты, где эти хвостовые иконки добавлены (Отчёты,
   Финансы, AdliumX-ray) — остальные .nav-item как были, с текстом обычным узлом. */
.nav-label { flex: 1; }
/* 26.08.2026, рескин v5 — в источнике (.final1-tail) хвостовые иконки НЕ приглушены (тот же
   яркий stroke, что и у обычных иконок пункта), поэтому убрал затемнение здесь тоже. */
.nav-chevron, .nav-external { display: inline-flex; align-items: center; justify-content: center; opacity: .8; flex-shrink: 0; }
.nav-item.active .nav-chevron, .nav-item.active .nav-external { opacity: 1; }
.nav-children { display: none; padding-left: 12px; }
.nav-children.open { display: block; }
.nav-children .nav-item { padding: 8px 20px 8px 34px; font-size: 12.5px; }

/* ---- Top bar + content ---- */
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 54px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.breadcrumb { color: var(--muted); font-size: 13px; }
.breadcrumb b { color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted); }

/* Бургер-кнопка сайдбара — видна только на мобильной ширине, см. @media ниже. */
.mobile-menu-btn { display: none; background: none; border: none; font-size: 20px; line-height: 1; color: var(--text); cursor: pointer; padding: 4px 6px; margin-left: -4px; flex-shrink: 0; }
.sidebar-backdrop { display: none; }
.status-pill { display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #c7cede; display: inline-block; }
.dot.ok { background: var(--green); }
.dot.fail { background: var(--red); }

.content { padding: 24px; flex: 1; overflow-y: auto; }
.page-title { font-size: 19px; font-weight: 700; margin: 0 0 4px; }
.page-subtitle { color: var(--muted); font-size: 13px; margin: 0 0 18px; max-width: 900px; line-height: 1.5; }

/* ---- Panels & sections ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.panel-toolbar .tools { display: flex; gap: 8px; }

.section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 14px 16px 6px;
}

/* ---- Tabs ---- */
.tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 16px; overflow-x: auto; }
.tab-btn {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { padding: 16px; display: none; }
.tab-panel.active { display: block; }

/* ---- Table ---- */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th {
  text-align: left;
  padding: 10px 14px;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data-table tbody tr:hover { background: var(--panel-alt); }
table.data-table tbody tr:last-child td { border-bottom: none; }
a.row-link { color: var(--accent); font-weight: 600; text-decoration: none; cursor: pointer; }
a.row-link:hover { text-decoration: underline; }
.id-cell { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Key-value rows (detail card) ---- */
table.kv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.kv-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); }
table.kv-table td:first-child { color: var(--muted); width: 260px; }
table.kv-table tr:last-child td { border-bottom: none; }

/* ---- Badges ---- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; }
.badge-active { background: var(--green-bg); color: var(--green); }
.badge-paused, .badge-blocked { background: var(--red-bg); color: var(--red); }
.badge-pending { background: var(--amber-bg); color: var(--amber); }
.badge-neutral { background: var(--panel-alt); color: var(--muted); }
/* 27.08.2026 — карточка отчёта кампании ("По доменам и приложениям"): Тип (Domain/App)
   отделён от значения визуально отдельным бейджем, не смешан с URL/bundle в одну строку —
   по прямому замечанию владельца. */
.badge-app { background: rgba(96,165,250,.18); color: #93c5fd; }
.badge-domain { background: rgba(74,222,128,.18); color: #86efac; }

/* ---- Buttons ---- */
.btn {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .1s ease;
}
.btn:hover { filter: brightness(0.97); }
.btn:disabled { opacity: 0.55; cursor: default; filter: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--panel-alt); color: var(--text); border-color: var(--border); }
.btn-danger { background: var(--red-bg); color: var(--red); border-color: rgba(216,73,60,.25); }
.btn-success { background: var(--green-bg); color: var(--green); border-color: rgba(28,154,108,.25); }
.btn-small { padding: 5px 10px; font-size: 12px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Forms ---- */
.form-section-title { font-size: 13px; font-weight: 700; margin: 20px 16px 6px; color: var(--text); }
.form-section-title:first-child { margin-top: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; padding: 0 16px 16px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 600; }
.field input, .field select, .field textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid rgba(22,133,232,.3); border-color: var(--accent); }
.field-check { flex-direction: row; align-items: center; gap: 8px; }
.field-hint { font-size: 11.5px; color: var(--muted); }
.checkbox-label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text); cursor: pointer; }
.form-actions { padding: 4px 16px 16px; display: flex; gap: 8px; }

/* ---- Misc ---- */
.empty-state { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.hint-box {
  background: rgba(22,133,232,.12);
  border: 1px solid rgba(22,133,232,.35);
  color: #8fc4ff;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin: 12px 16px;
  line-height: 1.5;
}
.reason-cell { color: var(--red); font-size: 12.5px; }
code.mono { background: var(--panel-alt); color: var(--text); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
pre.code-block {
  background: #10182b;
  color: #cfe0ff;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  overflow: auto;
  max-height: 320px;
  margin: 0 16px 16px;
}
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px 16px; }
.metric-card { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.metric-card .metric-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.metric-card .metric-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.metric-card-link { cursor: pointer; transition: border-color .1s ease, background .1s ease; }
.metric-card-link:hover { border-color: var(--accent); background: rgba(255,255,255,.04); }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; }
.error-text { color: var(--red); font-size: 13px; padding: 4px 16px; }
.subnote { font-size: 11.5px; color: var(--muted); padding: 0 16px 12px; }
.link-btn { background: none; border: none; color: var(--accent); font-weight: 600; cursor: pointer; font-size: 13px; padding: 0; }

/* ---- Charts (inline SVG, no external deps) ---- */
.chart-body { padding: 4px 16px 14px; }
.chart-svg { display: block; }
.chart-empty { padding: 30px 8px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 6px 4px 0; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.chart-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---- Filter bar (client-side filtering over already-fetched list) ---- */
.filter-bar {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 10px 14px;
  padding: 14px 16px 6px;
  border-bottom: 1px solid var(--border);
}
.filter-bar .field label { font-size: 11px; }

/* ---- Toasts — заменяют alert() как единый способ показать ошибку действия, которое
   не привязано к конкретной форме на странице (модерация, теги, статус кампании и т.п.).
   Раньше часть таких действий использовала браузерный alert(), часть — инлайн-текст в
   форме: разнобой. Теперь везде один и тот же ненавязчивый, не блокирующий поток паттерн. */
#toast-root { position: fixed; top: 16px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(20,30,60,.12); padding: 10px 14px; font-size: 13px; color: var(--text); display: flex; gap: 10px; align-items: flex-start; animation: toast-in .15s ease-out; }
/* 28.08.2026 — короткое зелёное подтверждение успешного автосохранения полей (см.
   showSuccessToast в app.js) — та же вёрстка тоста, только цвет левой полосы. */
.toast-success { border-left-color: var(--green); }
.toast-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; margin-left: auto; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Инлайн-форма "быстро создать контрагента", открывается при выборе
   "+ Новый контрагент" в select — заменяет блокирующий prompt(). ---- */
.inline-quick-create { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-quick-create input { flex: 1; min-width: 160px; }

/* ---- Превью собственного видеоплеера (player.js / SspDemoPlayer) в карточке площадки —
   формат 'content': плеер как обычный видеоблок в потоке страницы (не sticky/flying/over,
   которые монтируются в body поверх всего интерфейса). ---- */
.ssp-demo-player { display: inline-block; max-width: 100%; }
.ssp-demo-player-box { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; }
.ssp-demo-player-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.ssp-demo-player-chrome { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.ssp-demo-player-chrome--type1 { position: static; background: rgba(20,30,60,.06); border-radius: var(--radius) var(--radius) 0 0; }
.ssp-demo-player-label { font-size: 10px; letter-spacing: .04em; color: #fff; opacity: .85; }
.ssp-demo-player-chrome--type1 .ssp-demo-player-label { color: var(--muted); }
.ssp-demo-player-close { background: rgba(255,255,255,.15); border: none; color: #fff; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; }
.ssp-demo-player-chrome--type1 .ssp-demo-player-close { background: none; color: var(--muted); }
.ssp-demo-player-trigger, .ssp-demo-player-overstart { margin-top: 8px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 8px 14px; font-size: 12.5px; cursor: pointer; }
.ssp-demo-player-overstart { position: absolute; inset: auto; margin: 0; }
.ssp-demo-player-skip { position: absolute; right: 8px; bottom: 34px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: var(--radius); padding: 4px 10px; font-size: 11px; cursor: pointer; z-index: 2; }

/* ---- Экран входа — полноэкранный оверлей поверх app-shell, показывается пока нет
   валидного токена сессии (см. app.js: showLoginScreen/hideLoginScreen). ---- */
/* 26.08.2026, рескин — по прямому решению владельца экран входа НЕ переводим на тёмную
   тему, оставляем как было (светлый), в отличие от всего остального приложения ниже.
   Поэтому здесь сознательно хардкод, а не var(--bg)/var(--panel)/... — это единственное
   осознанное исключение из общего рескина, не забыть при следующих правках темы. */
.login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #f4f6fb; z-index: 1000; }
.login-box { width: 320px; background: #fff; border: 1px solid #e2e6ef; border-radius: 8px; padding: 28px; box-shadow: 0 8px 24px rgba(20,30,60,.08); display: flex; flex-direction: column; gap: 12px; }
/* 30.07.2026 — логотип (вариант "D" из макетов, одобрено владельцем): вордмарк по центру
   карточки, крупнее прежнего текстового варианта (был div.logo-dot + <strong>AdliumX</strong>). */
.login-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.login-brand img { height: 28px; }
/* Fallback-стиль на случай, если logo-data.js не загрузился (см. showLoginScreen в app.js) —
   .logo-dot раньше был общим (сайдбар+вход), теперь используется только здесь как подстраховка. */
.login-brand .logo-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #2f6fed, #7c5cff); }
.login-brand strong { color: #1a1d24; font-size: 15px; }
.login-box h2 { margin: 0 0 4px; font-size: 16px; text-align: center; color: #202634; }
.login-box label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #6b7488; }
.login-box input { padding: 8px 10px; border: 1px solid #e2e6ef; border-radius: 6px; font-size: 13.5px; background: #fff; color: #202634; }
.login-box .btn { margin-top: 6px; }
.topbar-right .btn-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 0; }

/* =========================================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (23.08.2026) — до этой правки в файле не было ни одного @media,
   вёрстка была рассчитана только на десктоп (см. PROJECT-NOTES.md). Ниже — только новые
   правила для узких экранов, всё выше остаётся как есть и работает на десктопе без изменений.
   ========================================================================================= */
@media (max-width: 768px) {
  /* Сайдбар уезжает за левый край и выезжает поверх контента по клику на бургер (см. JS в
     index.html), вместо того чтобы всегда занимать 232px рядом с контентом. */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.25);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(10,16,30,.45);
    z-index: 998;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }

  .topbar { padding: 0 12px; }
  .content { padding: 14px; }

  /* Сетки форм/фильтров/метрик — в одну колонку вместо фиксированных 2-4. */
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: repeat(2, 1fr); }
  .split-2 { grid-template-columns: 1fr; }

  /* Таблицы: не сжимаем колонки — даём панели скроллиться по горизонтали, если таблица
     шире экрана (у th/td стоит white-space:nowrap, поэтому таблица не "ломается", а просто
     становится шире контейнера — без overflow-x она обрезалась бы/вылезала за экран). */
  .panel, .tab-panel { overflow-x: auto; }
  table.kv-table td:first-child { width: auto; min-width: 130px; }

  .login-box { width: calc(100vw - 40px); max-width: 320px; }
}

/* =========================================================================================
   -- Дашборд «Главная», новый UI, 25.08.2026 --
   Раздел «Главная» переведён на GET /api/dashboard/summary + /api/dashboard/top-campaigns +
   /api/dashboard/top-hosts (см. renderDashboard в app.js). Визуальная идея (сетка метрик,
   delta-индикаторы, топ-10 с переключателем метрики) взята из мокапа (#dashboardIntegrated
   в CURRENT.html), но переведена на классы и цветовую схему уже существующего style.css —
   переменные ниже переиспользуют :root, никакого отдельного id-скоупинга как в мокапе.
   ========================================================================================= */
/* 26.08.2026, рескин v15 — владелец засомневался, тот ли шрифт/цвет в таблицах Топ (прислал
   зум скриншота). Цвет уже поправили в v11 (обычный белый #eef4f8, не ссылочный синий).
   Перепроверил font-family по источнику: #dashboardIntegrated целиком идёт с явным
   `font-family:Arial,Helvetica,sans-serif!important` — отдельно от общего body{font-family:
   Inter,Segoe UI,Arial,sans-serif} у остальной страницы мокапа. У нас для дашборда отдельного
   font-family не было — наследовался общий стек (-apple-system/Segoe UI/...) с body. Добавил
   Arial,Helvetica,sans-serif именно на дашборд-скоуп (.dash-topbar/.dash-metrics-title/
   .dash-metrics-outer/.dash-top-panel), как в источнике — на других страницах шрифт не трогал. */
.dash-topbar, .dash-metrics-title, .dash-metrics-outer, .dash-top-panel { font-family: Arial, Helvetica, sans-serif; }
.dash-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.dash-period-label { font-size: 12.5px; color: var(--muted); }

/* 26.08.2026, рескин v7 — общий заголовок панели (переиспользуется в паре мест). */
.panel-title { padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--text); }

/* 26.08.2026, рескин v9 — точные цвета/отступы из #final1UnifiedStyles → "FINAL DASHBOARD"
   в CURRENT.html (владелец прислал скриншот и попросил "точь-в-точь"; данные/логика — наши,
   взят только визуал). Значения НЕ переиспользуют общие --panel/--border/--panel-alt —
   в источнике это отдельная, более тёмная и контрастная палитра именно для дашборда, отдельно
   от палитры остальных страниц (которая уже выверена под другой, более ранний блок мокапа
   #dashboardIntegrated draft — см. рескин v6). Смешивать две палитры в одних токенах нельзя —
   потому здесь хардкод, как и в самом источнике. */
.dash-metrics-title { font-size: 14px; font-weight: 800; margin: 0 0 7px 12px; color: var(--text); }
.dash-metrics-outer {
  border: 1px solid #203e55;
  border-radius: 8px;
  background: #071a2a;
  padding: 12px;
  margin-bottom: 18px;
}
/* 26.08.2026, рескин v11 — в источнике сетка 6×2 под 12 демо-метрик мокапа; у нас реальных
   метрик 10 (проверено на живом /api/dashboard/summary — больше ключей бэкенд не отдаёт).
   6 колонок оставляли бы 2 пустые ячейки в углу — пробовали заполнить дублем "Маржа %/₽",
   владелец сказал, что не то. Вместо дублирования — 5 колонок: 10 метрик = ровно 2×5, без
   пустых и без повторов. */
.dash-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #17394f;
  border-radius: 7px;
  overflow: hidden;
}
.dash-metric {
  padding: 13px 14px 10px;
  border-right: 1px solid #17394f;
  border-bottom: 1px solid #17394f;
  background: #071928;
}
/* Убирает правую границу у каждого 5-го (конец строки) и нижнюю — у элементов начиная с 6-го
   (вторая строка сетки 5×2). */
.dash-metric:nth-child(5n) { border-right: 0; }
.dash-metric:nth-child(n+6) { border-bottom: 0; }
.dash-metric-label { font-size: 11px; color: #c2d0da; margin-bottom: 8px; }
.dash-metric-value { font-size: 26px; line-height: 29px; font-weight: 700; letter-spacing: -.3px; color: #f7f9fb; white-space: nowrap; }
.dash-metric-value.money { font-size: 24px; }
.dash-metric-delta { font-size: 14px; line-height: 17px; font-weight: 800; margin-top: 11px; color: var(--muted); }
.dash-metric-delta.up { color: #50e47d; }
.dash-metric-delta.down { color: #ff5561; }

/* 26.08.2026, рескин v16 (черновик на ревью) — два графика между "Основные метрики" и "Топ
   кампаний": слева переключаемый Загрузки/Зачёты/Fill rate по часам за сегодня, справа
   переключаемый Маржа ₽/Маржа % по часам за сегодня. Переиспользует уже существующую
   buildLineChartSvg() (была неиспользуемым кодом от старого дашборда — теперь применяется по
   назначению) и уже существующие .chart-svg/.chart-legend классы. Локально переопределяет
   --border/--muted внутри .dash-chart-panel — иначе inline-SVG (использует var(--border)/
   var(--muted) из buildLineChartSvg) подхватил бы светлые общие токены страницы, а не тёмную
   палитру дашборда. ВАЖНО: данные для этого черновика — синтетические, для реальной версии
   нужен новый бэкенд-эндпоинт с почасовыми бинами за "сегодня" (без нового постоянного
   хранилища — считается по тем же данным, что уже использует /api/dashboard/summary). */
.dash-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.dash-chart-panel {
  border: 1px solid #203e55; border-radius: 8px; background: #071a2a; overflow: hidden;
  --border: #17364b; --muted: #7f93a5;
}
.dash-chart-panel .chart-body { padding: 8px 14px 14px; }

/* 29.08.2026 — объединённый график "Динамика" (см. dashChartsRowHtml в app.js): один
   full-width блок вместо сетки из двух .dash-chart-panel. Border/background/--border/--muted
   overrides скопированы с .dash-chart-panel один в один — тот же inline-SVG (buildDualAxis
   LineChartSvg), которому нужна тёмная палитра токенов, а не светлая общая. */
.dash-merged-chart-panel {
  margin-top: 14px;
  border: 1px solid #203e55; border-radius: 8px; background: #071a2a; overflow: hidden;
  --border: #17364b; --muted: #7f93a5;
  padding: 0;
}
.dash-merged-chart-panel .chart-body { padding: 8px 14px 14px; }
.dash-axis-selects { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.dash-axis-select {
  height: 34px;
  border: 1px solid #1d3d55;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-family: inherit;
  background: #061827;
  color: #e8eef3;
}

.dash-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.dash-top-panel { border: 1px solid #203e55; border-radius: 8px; background: #071a2a; overflow: hidden; }
.dash-top-head {
  height: 51px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}
.dash-top-head h3 { margin: 0; font-size: 17px; line-height: 20px; font-weight: 800; color: var(--text); }
.dash-metric-select {
  margin-left: auto;
  height: 34px;
  border: 1px solid #1d3d55;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-family: inherit;
  background: #061827;
  color: #e8eef3;
}
.dash-table-wrap { overflow-x: auto; }
/* 26.08.2026, рескин v9 — таблицы топ-листов на дашборде: своя, более компактная плотность
   строк (высота 32px, фиксированные ширины колонок), как .table-card table в источнике —
   отдельно от общего .data-table на других страницах (там строки просторнее, это осознанно
   не трогали). */
.dash-top-table { table-layout: fixed; }
/* 26.08.2026, рескин v9 — селектор специально с префиксом .dash-top-panel: у общего
   `table.data-table th/td` (см. выше) специфичность выше обычного `.dash-top-table th`
   (元素+класс+элемент против класс+элемент) — без этого префикса общие правила таблицы
   перебивали бы наши, несмотря на то что идут в файле раньше (проверено на живом рендере —
   без префикса заголовок "#" обрезался в "#…" ellipsis'ом от чужого padding). */
.dash-top-panel .dash-top-table th, .dash-top-panel .dash-top-table td { height: 32px; padding: 0 8px; border-bottom: 1px solid #17364b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-top-panel .dash-top-table th { font-size: 12px; color: #a8bbc9; font-weight: 700; }
.dash-top-panel .dash-top-table td { font-size: 13px; color: #eef4f8; }
.dash-top-table .dash-col-rank { width: 34px; }
.dash-top-table .dash-col-name { width: 39%; }
.dash-top-table .dash-col-num { width: 20%; }
.dash-top-table .dash-col-delta { width: 18%; }
.dash-top-table .id-cell { color: #eef4f8; }
/* 26.08.2026, рескин v11 — в источнике название кампании/площадки в таблице обычный белый
   текст (#eef4f8), НЕ выделено акцентным цветом ссылки — у нас .row-link даёт var(--accent)
   (синий), это и была вторая правка "шрифты/цвета не как на скрине". Кликабельность оставляем
   (навигация на карточку кампании/площадки нужна), просто убираем цветовое выделение —
   подчёркивание на hover сигналит, что это ссылка. */
.dash-top-table .row-link { color: #eef4f8; font-weight: 400; }
.dash-top-table .row-link:hover { text-decoration: underline; }
/* 26.08.2026, рескин v13 — та же ошибка со специфичностью, что раньше была с "#" в заголовке:
   `.dash-top-panel .dash-top-table td` (3 класса) перебивал `.dash-delta-up/.dash-delta-down`
   (1 класс) своим color:#eef4f8 — из-за этого Δ% в таблицах всегда был белым, а не зелёным/
   красным (владелец заметил на превью). Добавлен префикс `td`, чтобы специфичность сравнялась
   и порядок в файле (этот блок ниже) снова решал как надо. */
.dash-top-panel .dash-top-table td.dash-delta-up { color: #54e87b; font-weight: 800; }
.dash-top-panel .dash-top-table td.dash-delta-down { color: #ff4e5d; font-weight: 800; }

/* 26.08.2026 — черновик v10 с рядом кнопок периода/кебабом/пагинацией/футером был отправлен
   владельцу на ревью и отклонён ("мы говорили что период не нужен") — CSS убран отсюда, сама
   идея решена раньше (см. запись в CHANGELOG.md про дашборд). Строку не восстанавливать без
   нового явного запроса. */

@media (max-width: 768px) {
  .dash-top-grid { grid-template-columns: 1fr; }
  .dash-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================================
   КАМПАНИИ → СПИСОК КАМПАНИЙ (25.08.2026) — новые ячейки таблицы: прогресс-бар лимита
   (дневной/общий) и небольшие статичные чипы (ГЕО "RU", РП "Вкл"). Добавления только в конец
   файла, ничего существующее выше не менялось (см. app.js: campaignLimitCellHtml/
   campaignRpCellHtml/CAMPAIGN_GEO_CHIP_HTML).
   ========================================================================================= */
.limit-cell { display: flex; flex-direction: column; gap: 4px; min-width: 92px; }
.limit-value { font-size: 12.5px; white-space: nowrap; }
.limit-nolimit { font-size: 12.5px; color: var(--muted); }
.limit-bar { width: 100%; height: 5px; border-radius: 999px; background: var(--panel-alt); overflow: hidden; }
.limit-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }

.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.chip-geo { background: var(--panel-alt); color: var(--muted); }
.chip-rp-on { background: var(--green-bg); color: var(--green); }

/* =========================================================================================
   ПЛОЩАДКИ → СПИСОК ПЛОЩАДОК (26.08.2026) — мелкая подпись домена под названием площадки в
   таблице (аналог .supply-meta-v1 из макета, адаптирован под существующий .data-table).
   Добавление только в конец файла, ничего существующее выше не менялось.
   ========================================================================================= */
.row-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* =========================================================================================
   ОТЧЁТЫ (26.08.2026) — «Отчёты ОРД» свёрнуты из отдельного пункта меню во вложенную вкладку
   внутри «Отчёты» (см. TECH_HANDOFF.md §11: макет ожидает ровно 3 вкладки — По кампаниям /
   По площадкам / ОРД). Вложенные под-вкладки используют СВОИ классы (.subtab-*), а не .tab-*,
   чтобы wireTabs() внешнего таббара не подхватывал клики по внутренним кнопкам ОРД (иначе
   совпадающие ключи вкладок "campaigns"/"hosts" на двух уровнях конфликтовали бы). Визуально —
   тот же вид, что и обычный .tabbar/.tab-btn, просто чуть компактнее и с отступом сверху.
   ========================================================================================= */
.subtabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-top: 8px; overflow-x: auto; }
.subtab-btn {
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.subtab-btn:hover { color: var(--text); }
.subtab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.subtab-panel { padding: 12px 0 0; display: none; }
.subtab-panel.active { display: block; }

/* ==========================================================================
   27.08.2026 — карточка кампании, переработка структуры (Обзор → 9 вкладок).
   Классы -v5/-v6 скопированы 1:1 из макета, апрувнутого владельцем построчно
   по каждому куску (см. CHANGELOG.md / UI-MIGRATION.md). Проверено на коллизии
   с существующими классами выше — пересечений нет.
   ========================================================================== */
.cd-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.cd-title { margin:0 0 4px; font-size:22px; }
.cd-meta { display:flex; align-items:center; gap:10px; }
.cd-kpi-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:18px; }
.cd-kpi-card { display:flex; align-items:center; gap:10px; border:1px solid #203e55; border-radius:8px; background:#071a2a; padding:12px 14px; }
.cd-kpi-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cd-kpi-label { font-size:11.5px; color:#8ea0b0; }
.cd-kpi-value { font-size:17px; font-weight:700; color:#f7f9fb; }
.cd-kpi-sub { font-size:10.5px; color:#5f7284; }
.cd-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 900px) { .cd-kpi-row { grid-template-columns:repeat(2,1fr); } .cd-grid-2 { grid-template-columns:1fr; } }

.cd-rates-head { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 4px; }
.cd-eyebrow { font-size:10.5px; letter-spacing:.06em; color:#5f7284; font-weight:700; }
.cd-type-chip { border:1px solid #35507a; background:#0f2038; color:#8fb7ff; border-radius:999px; padding:4px 12px; font-size:11.5px; font-weight:700; }
.gap-note-v5 { border:1px dashed #4a5568; border-radius:8px; padding:10px 14px; margin:14px 0 0; font-size:12px; color:#9fb0c0; background:#0d1f2f; }

/* ---- RTB, скопировано 1:1 из макета ---- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form .field.full{grid-column:1/-1}
.toggle-row{height:39px;border:1px solid #273b52;border-radius:8px;background:#091626;padding:0 10px;display:flex;align-items:center;justify-content:space-between;color:#c6d1df;font-size:12px}
.ui-switch{position:relative;width:42px;height:24px;border:0;border-radius:20px;background:#33465d;padding:0;flex:none;cursor:pointer}
.ui-switch:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.15s}
.ui-switch.on{background:#1685e8}.ui-switch.on:after{left:21px}
.ui-switch[data-disabled="1"]{opacity:.45;cursor:not-allowed}
.rtb-preview-v5{ width:100%; }
.rtb-title-v5{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid #1d3850; }
.rtb-title-v5 h2{ margin:2px 0 6px!important; font-size:24px!important; color:#f6fbff!important; }
.rtb-title-v5 p{ margin:0; color:#93a7bb; font-size:13px; }
.eyebrow-v5{ color:#4a9eff; font-size:10px; font-weight:800; letter-spacing:.12em; }
.rtb-chip-v5{ padding:7px 11px; border-radius:999px; border:1px solid #2a5f8e; background:#0b2238; color:#86c3ff; font-size:11px; font-weight:800; }
.rtb-grid-v5{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); gap:18px; align-items:stretch; }
.rtb-card-v5{ border:1px solid #24425c; border-radius:12px; padding:20px; background: radial-gradient(circle at 100% 0%,rgba(48,131,255,.05),transparent 34%), linear-gradient(180deg,#0f2234,#0c1c2c); display:flex; flex-direction:column; }
.connection-v5, .timeout-v5{ align-self:start; }
.web-v5{ display:flex; flex-direction:column; position:relative; border-color:#3b3566; background: radial-gradient(circle at 100% 0%,rgba(123,83,222,.08),transparent 34%), linear-gradient(180deg,#111e33,#0c1c2c); }
.web-v5 .cookie-sync-v5{ flex:1; display:flex; flex-direction:column; }
.web-v5 .cookie-sync-v5 .form{ flex:1; align-content:space-between; }
.rtb-card-head-v5{ display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:17px; border-bottom:1px solid #1c3850; position:relative; }
.rtb-card-head-v5 h3{ margin:0!important; font-size:18px!important; color:#f1f7fc!important; }
.rtb-card-head-v5 p{ margin:3px 0 0; font-size:11.5px; color:#8196aa; }
.rtb-icon-v5{ width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff;font-size:17px;font-weight:900;flex:none; }
.rtb-icon-v5.blue-v5{background:linear-gradient(180deg,#258cff,#1262d0)}
.rtb-icon-v5.orange-v5{background:linear-gradient(180deg,#d58b18,#965d08)}
.rtb-icon-v5.green-v5{background:linear-gradient(180deg,#3cbb84,#23845c)}
.rtb-icon-v5.purple-v5{background:linear-gradient(180deg,#7856dc,#5237af)}
.rtb-form-v5{ grid-template-columns:1fr 1fr!important; }
.rtb-form-v5 .full{ grid-column:1/-1; }
.timeout-form-v5{ grid-template-columns:1fr!important; }
.timeout-v5{ min-height:100%; }
.switch-list-v5{ display:grid; gap:10px; }
.switch-item-v5{ min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 12px; border:1px solid #213b53; border-radius:9px; background:#0a1928; }
.switch-item-v5 strong{ display:block; color:#e8f1fa; font-size:13px; }
.switch-item-v5 span{ display:block; margin-top:3px; color:#7e93a8; font-size:11.5px; line-height:1.4; }
.status-badge-v5{ flex:none; display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; font-size:11px; font-weight:700; color:#83dfb0; background:#102a21; border:1px solid #2d624c; white-space:nowrap; }
.cookie-sync-v5{ margin-top:16px; padding-top:16px; border-top:1px solid #2a3150; }
.cookie-head-v5{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.cookie-head-v5 h4{ margin:0; color:#eef4fb; font-size:15px; }
.cookie-head-v5 span{ color:#9f8ce8; font-size:10px; }
@media(max-width:1450px){ .rtb-grid-v5{grid-template-columns:1fr} }
@media(max-width:900px){ .rtb-form-v5{grid-template-columns:1fr!important} .rtb-title-v5{flex-direction:column} }

/* ---- Таргетинг, скопировано 1:1 из макета ---- */
.targeting-preview-v5{width:100%}
.targeting-title-v5{ padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid #1d3850; }
.targeting-title-v5 h2{ margin:2px 0 6px!important; font-size:24px!important; color:#f6fbff!important; }
.targeting-title-v5 p{ margin:0; color:#93a7bb; font-size:13px; line-height:1.5; }
.eyebrow-target-v5{ color:#4a9eff; font-size:10px; font-weight:800; letter-spacing:.12em; }
.targeting-grid-v5{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.target-card-v5{ border:1px solid #24425c; border-radius:12px; padding:20px; min-height:100%; background: radial-gradient(circle at 100% 0%,rgba(48,131,255,.05),transparent 34%), linear-gradient(180deg,#0f2234,#0c1c2c); }
.target-card-head-v5{ display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:17px; border-bottom:1px solid #1d3850; }
.target-card-head-v5 h3{ margin:0!important; font-size:18px!important; color:#f1f7fc!important; }
.target-card-head-v5 p{ margin:3px 0 0; color:#8196aa; font-size:11.5px; }
.target-icon-v5{ width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff;font-size:18px;font-weight:900;flex:none; }
.positive-icon-v5{ background:linear-gradient(180deg,#3dbb84,#24865e); box-shadow:0 8px 18px rgba(61,187,132,.16); }
.negative-icon-v5{ background:linear-gradient(180deg,#d75a68,#963946); box-shadow:0 8px 18px rgba(215,90,104,.15); }
.target-fields-v5{ display:grid; gap:16px; }
.target-field-v5{ margin:0!important; }
.target-select-shell-v5{ min-height:48px; display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:7px 9px; border:1px solid #29475f; border-radius:9px; background:#091825; }
.negative-shell-v5{ border-color:#50343b; background:#091825; }
.target-select-shell-v5 input{ min-width:130px!important; flex:1; width:auto!important; min-height:31px!important; border:0!important; background:transparent!important; box-shadow:none!important; padding:0 4px!important; }
.target-chip-v5{ display:inline-flex; align-items:center; min-height:28px; padding:4px 9px; border-radius:999px; font-size:11px; font-weight:700; }
.blue-chip-v5{ color:#a9e8c8; background:#102b20; border:1px solid #2e7555; }
.red-chip-v5{ color:#ffadb5; background:#321f23; border:1px solid #62363e; }
@media(max-width:1450px){ .targeting-grid-v5{grid-template-columns:1fr} }

/* ---- Ручной подбор, скопировано 1:1 из макета ---- */
.manual-preview-v5{width:100%}
.manual-title-v5{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid #1d3850; }
.manual-title-v5 h2{ margin:2px 0 6px!important; font-size:24px!important; color:#f6fbff!important; }
.manual-title-v5 p{ margin:0; color:#93a7bb; font-size:13px; }
.eyebrow-manual-v5{ color:#4a9eff; font-size:10px; font-weight:800; letter-spacing:.12em; }
.manual-state-v5{ display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; border:1px solid #2d624c; background:#102a21; color:#83dfb0; font-size:11px; font-weight:800; white-space:nowrap; }
.manual-state-dot-v5{ width:8px;height:8px;border-radius:50%; background:#4dd7a5; box-shadow:0 0 0 4px rgba(77,215,165,.10); }
.manual-grid-v5{ display:grid; grid-template-columns:1fr; gap:22px; }
.manual-card-v5{ border:1px solid #24425c; border-radius:12px; padding:20px; background: radial-gradient(circle at 100% 0%,rgba(48,131,255,.05),transparent 34%), linear-gradient(180deg,#0f2234,#0c1c2c); }
.manual-card-head-v5{ display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:17px; border-bottom:1px solid #1d3850; }
.manual-card-head-v5 h3{ margin:0!important; font-size:18px!important; color:#f1f7fc!important; }
.manual-card-head-v5 p{ margin:3px 0 0; color:#8196aa; font-size:11.5px; }
.manual-icon-v5{ width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff;font-size:18px;font-weight:900;flex:none; }
.manual-icon-v5.blue-v5{background:linear-gradient(180deg,#258cff,#1262d0)}
.manual-icon-v5.gold-v5{background:linear-gradient(180deg,#d7a437,#a87714)}
.manual-add-row-v5{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; margin-bottom:15px; }
.manual-add-row-v5 .btn{height:44px}
.manual-table-v5{ width:100%; min-width:900px; border-collapse:collapse; }
.manual-table-v5 th{ text-align:left; padding:12px 13px; background:#0a1827; color:#9fb0c1; font-size:12px!important; border-bottom:1px solid #20374d; }
.manual-table-v5 td{ padding:14px 13px; font-size:14px!important; color:#e1eaf3; border-bottom:1px solid #182d41; vertical-align:top; }
.manual-table-v5 tbody tr:last-child td{border-bottom:0}
.manual-table-v5 tbody tr:hover{background:#0d2134}
.private-rate-form-v5{ display:grid; grid-template-columns:minmax(240px,1fr) 150px minmax(220px,1fr) auto; gap:10px; align-items:end; margin-bottom:15px; }
.private-rate-value-v5{ color:#f1c66d!important; font-weight:800; }
@media(max-width:1050px){ .private-rate-form-v5{grid-template-columns:1fr 1fr} }
@media(max-width:760px){ .manual-title-v5{flex-direction:column} .manual-add-row-v5, .private-rate-form-v5{grid-template-columns:1fr} }

/* ---- Площадки, скопировано 1:1 из макета (hosts-*-v6) ---- */
.hosts-preview-v6{width:100%}
.hosts-title-v6{ display:flex; flex-direction:column; gap:6px; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid #1d3850; }
.hosts-title-v6 h2{ margin:2px 0 6px!important; font-size:24px!important; color:#f6fbff!important; }
.hosts-title-v6 p{ margin:0; color:#93a7bb; font-size:13px; max-width:760px; }
.eyebrow-hosts-v6{ color:#4a9eff; font-size:10px; font-weight:800; letter-spacing:.12em; }
.hosts-section-v6{ border:1px solid #24425c; border-radius:12px; padding:20px; background:linear-gradient(180deg,#0f2234,#0c1c2c); margin-bottom:22px; }
.hosts-section-head-v6{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; margin-bottom:17px; border-bottom:1px solid #1d3850; flex-wrap:wrap; }
.hosts-section-title-v6{ display:flex; align-items:center; gap:12px; }
.hosts-section-title-v6 h3{ margin:0!important; font-size:18px!important; color:#f1f7fc!important; display:flex; align-items:center; gap:9px; }
.hosts-section-title-v6 p{ margin:3px 0 0; color:#8196aa; font-size:11.5px; }
.hosts-icon-v6{ width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff;font-size:18px;font-weight:900;flex:none; }
.active-icon-v6{background:linear-gradient(180deg,#3dbb84,#24865e)}
.filtered-icon-v6{background:linear-gradient(180deg,#d75a68,#963946)}
.count-v6{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 6px; border-radius:999px; font-size:11px; font-weight:800; margin-left:6px; }
.active-count-v6{ background:#102b20; color:#83dfb0; border:1px solid #2e7555; }
.filtered-count-v6{ background:#321f23; color:#ffadb5; border:1px solid #62363e; }
.hosts-table-wrap-v6{ overflow-x:auto; }
.hosts-table-v6{ width:100%; min-width:1000px; border-collapse:collapse; }
.hosts-table-v6 th{ text-align:left; padding:12px 13px; background:#0a1827; color:#9fb0c1; font-size:12px!important; border-bottom:1px solid #20374d; white-space:nowrap; }
.hosts-table-v6 th.num{text-align:right}
.hosts-table-v6 td{ padding:14px 13px; font-size:14px!important; color:#e1eaf3; border-bottom:1px solid #182d41; vertical-align:top; }
.hosts-table-v6 td.num{text-align:right}
.hosts-table-v6 tbody tr:last-child td{border-bottom:0}
.hosts-table-v6 tbody tr:hover{background:#0d2134}
.hosts-table-v6 .muted{color:#7c93a8;font-size:11.5px;margin-top:2px}
.reason-v6{ display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px; font-size:11px; font-weight:700; color:#ffadb5; background:#321f23; border:1px solid #62363e; }
@media(max-width:1010px){ .hosts-section-head-v6{flex-direction:column;align-items:flex-start} }

/* ---- Заблокированные площадки (+ домены), скопировано 1:1 из макета (blocked-*-v5) ---- */
.blocked-preview-v5{width:100%}
.blocked-title-v5{ display:flex; flex-direction:column; gap:6px; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid #1d3850; }
.blocked-title-v5 h2{ margin:2px 0 6px!important; font-size:24px!important; color:#f6fbff!important; }
.blocked-title-v5 p{ margin:0; color:#93a7bb; font-size:13px; max-width:760px; }
.eyebrow-blocked-v5{ color:#4a9eff; font-size:10px; font-weight:800; letter-spacing:.12em; }
.blocked-card-v5{ border:1px solid #24425c; border-radius:12px; padding:20px; background:linear-gradient(180deg,#0f2234,#0c1c2c); margin-bottom:22px; }
.blocked-card-head-v5{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; margin-bottom:17px; border-bottom:1px solid #1d3850; }
.blocked-head-left-v5{ display:flex; align-items:center; gap:12px; }
.blocked-head-left-v5 h3{ margin:0!important; font-size:18px!important; color:#f1f7fc!important; }
.blocked-head-left-v5 p{ margin:3px 0 0; color:#8196aa; font-size:11.5px; }
.blocked-icon-v5{ width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff;font-size:18px;font-weight:900;flex:none; background:linear-gradient(180deg,#d75a68,#963946); }
.blocked-count-v5{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 6px; border-radius:999px; font-size:11px; font-weight:800; margin-left:6px; background:#321f23; color:#ffadb5; border:1px solid #62363e; }
.blocked-table-wrap-v5{ overflow-x:auto; }
.blocked-table-v5{ width:100%; min-width:900px; border-collapse:collapse; }
.domain-add-row-v5{ display:grid; grid-template-columns:minmax(180px,1fr) 150px 130px auto; gap:10px; align-items:end; margin-bottom:15px; }
.domain-add-row-v5 .btn{height:44px}
.blocked-table-v5 th{ text-align:left; padding:12px 13px; background:#0a1827; color:#9fb0c1; font-size:12px!important; border-bottom:1px solid #20374d; }
.blocked-table-v5 td{ padding:14px 13px; font-size:14px!important; color:#e1eaf3; border-bottom:1px solid #182d41; vertical-align:top; }
.blocked-table-v5 tbody tr:last-child td{border-bottom:0}
.blocked-table-v5 tbody tr:hover{background:#0d2134}
.blocked-reason-v5{ display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px; font-size:11px; font-weight:700; color:#ffadb5; background:#321f23; border:1px solid #62363e; }
.blocked-note-v5{ display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border:1px solid #263f56; border-radius:10px; background:#0a1927; }
.blocked-note-v5 strong{ display:block; color:#e8f1f9; font-size:12.5px; }
.blocked-note-v5 span:last-child{ display:block; margin-top:2px; color:#8398ad; font-size:11.5px; }
.info-icon-v5{ width:28px;height:28px;border-radius:50%; display:flex;align-items:center;justify-content:center; flex:none; color:#99c9ff; background:#102b45; border:1px solid #285a84; font-weight:800; }

/* ---- История изменений, скопировано 1:1 из макета (history-*-v5) ---- */
.history-preview-v5{width:100%}
.history-title-v5{ padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid #1d3850; }
.history-title-v5 h2{ margin:2px 0 6px!important; font-size:24px!important; color:#f6fbff!important; }
.history-title-v5 p{ margin:0; color:#93a7bb; font-size:13px; max-width:760px; }
.eyebrow-history-v5{ color:#4a9eff; font-size:10px; font-weight:800; letter-spacing:.12em; }
.history-card-v5{ border:1px solid #24425c; border-radius:12px; padding:20px; background: radial-gradient(circle at 100% 0%,rgba(48,131,255,.05),transparent 34%), linear-gradient(180deg,#0f2234,#0c1c2c); }
.history-card-head-v5{ display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid #1d3850; }
.history-card-head-v5 h3{ margin:0!important; font-size:18px!important; color:#f1f7fc!important; }
.history-card-head-v5 p{ margin:3px 0 0; color:#8196aa; font-size:11.5px; }
.history-icon-v5{ width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff;font-size:18px;font-weight:900;flex:none; background:linear-gradient(180deg,#258cff,#1262d0); }
.history-table-wrap-v5{ border:1px solid #20374d; border-radius:10px; overflow:auto; }
.history-table-v5{ width:100%; min-width:1000px; border-collapse:collapse; }
.history-table-v5 th{ text-align:left; padding:12px 13px; background:#0a1827; color:#9fb0c1; font-size:12px!important; border-bottom:1px solid #20374d; }
.history-table-v5 td{ padding:14px 13px; color:#e1eaf3; font-size:14px!important; border-bottom:1px solid #182d41; vertical-align:middle; }
.history-table-v5 tbody tr:last-child td{border-bottom:0}
.history-table-v5 tbody tr:hover{background:#0d2134}
.history-type-v5{ display:inline-flex; align-items:center; min-height:26px; padding:4px 8px; border-radius:999px; color:#9dccff; background:#112c45; border:1px solid #2c628d; font-size:11px; font-weight:700; }
.history-desc-v5{ margin-top:5px; color:#8fa2b4; font-size:11.5px; }
.history-old-v5{ color:#9aaaba; }
.history-new-v5{ color:#eff7ff; font-weight:800; }


/* =====================================================
   Карточка площадки (renderHostDetail) — визуал 1:1 с макетом
   (§8.2 TECH_HANDOFF.md), перенесено из превью-скрипта после
   апрува владельца (27.08.2026). Классы -v1/-v2 скопированы из
   макета, весь блок жёстко заскоупен селектором
   #supplyDetailIntegrated .visual-v3 — чтобы generic-классы
   макета (.card/.field/input/select/label) не утекли на
   остальную админку. Тот же принцип, что и .gap-note-v5 у
   карточки кампании, только здесь скоуп полный, не по одному
   классу — карточка площадки идёт richer-визуалом по решению
   владельца ("богатый визуал 1:1 с макетом — для площадок"),
   в отличие от карточки кампании (упрощённый стиль админки).
   ===================================================== */
/* =====================================================
   VISUAL V3 — closer to the liked reference, less dull
   ===================================================== */
#supplyDetailIntegrated .visual-v3 {
  --bg:#071523;
  --panel:#0d1e2f;
  --panel2:#102439;
  --line:#1e3a55;
  --muted:#8fa3b7;
  --text:#eff6fd;
  --blue:#1f78ff;
}

#supplyDetailIntegrated .visual-v3 .header h1 {
  font-size:32px !important;
  font-weight:800 !important;
  color:#f8fbff !important;
}

/* KPI vivid reference-like cards */
#supplyDetailIntegrated .visual-v3 .kpis {
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:20px 0 22px !important;
}

#supplyDetailIntegrated .visual-v3 .kpi {
  position:relative;
  min-height:124px !important;
  padding:17px 16px 15px 64px !important;
  background:
    linear-gradient(180deg,rgba(17,36,55,.97),rgba(11,27,42,.98)) !important;
  border:1px solid #1f3a53 !important;
  border-radius:11px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.16) !important;
  overflow:hidden;
}

#supplyDetailIntegrated .visual-v3 .kpi:before {
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.018),transparent 42%);
  pointer-events:none;
}

#supplyDetailIntegrated .visual-v3 .kpi .label {
  font-size:13px !important;
  color:#c1cddd !important;
  margin:1px 0 5px !important;
}

#supplyDetailIntegrated .visual-v3 .kpi .value {
  font-size:26px !important;
  line-height:1.1 !important;
  font-weight:750 !important;
  color:#fff !important;
}

/* Tabs more like the reference */
#supplyDetailIntegrated .visual-v3 .tabs {
  background:#0b1a29 !important;
  border:1px solid #1e3850 !important;
  border-radius:10px 10px 0 0 !important;
  padding:0 10px !important;
}

#supplyDetailIntegrated .visual-v3 .tab {
  font-size:15px !important;
  padding:15px 14px 13px !important;
  color:#b2c0cf !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
}

#supplyDetailIntegrated .visual-v3 .tab.active {
  color:#45a0ff !important;
  border-bottom-color:#1884ff !important;
  background:transparent !important;
}

/* Panels/cards */
#supplyDetailIntegrated .visual-v3 .panel {
  background:
    radial-gradient(circle at 100% 0%,rgba(29,103,177,.05),transparent 28%),
    linear-gradient(180deg,#0c1b2a,#0a1826) !important;
  border:1px solid #1e3850 !important;
  border-top:0 !important;
  border-radius:0 0 11px 11px !important;
  padding:24px !important;
}

#supplyDetailIntegrated .visual-v3 .card {
  background:linear-gradient(180deg,#0e2032,#0c1b2a) !important;
  border:1px solid #244057 !important;
  border-radius:11px !important;
}

#supplyDetailIntegrated .visual-v3 .card h2 {
  font-size:20px !important;
}

/* Inputs and forms */
#supplyDetailIntegrated .visual-v3 input, #supplyDetailIntegrated .visual-v3 select, #supplyDetailIntegrated .visual-v3 textarea {
  min-height:45px !important;
  font-size:15px !important;
  background:#091825 !important;
  border:1px solid #2a465f !important;
  color:#f0f6fb !important;
}

#supplyDetailIntegrated .visual-v3 label {
  font-size:13px !important;
  color:#d5e0ea !important;
}

#supplyDetailIntegrated .visual-v3 .hint, #supplyDetailIntegrated .visual-v3 .muted {
  color:#8fa3b7 !important;
  font-size:12.5px !important;
}

/* Tables */
#supplyDetailIntegrated .visual-v3 th {
  font-size:12px !important;
  color:#9fb1c3 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

#supplyDetailIntegrated .visual-v3 td {
  font-size:14px !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
}

/* Accent section dividers */
#supplyDetailIntegrated .visual-v3 .hosts-section:not(.filtered-section) .section-headline {
  border-left:4px solid #2cbc7f !important;
  padding-left:12px !important;
}

#supplyDetailIntegrated .visual-v3 .filtered-section .section-headline {
  border-left:4px solid #dc5968 !important;
  padding-left:12px !important;
}

/* Body / table readability */
#supplyDetailIntegrated .visual-v3, #supplyDetailIntegrated .visual-v3 input, #supplyDetailIntegrated .visual-v3 select, #supplyDetailIntegrated .visual-v3 button, #supplyDetailIntegrated .visual-v3 table {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

#supplyDetailIntegrated .visual-v3 .field label, #supplyDetailIntegrated .visual-v3 label {
  font-size:12px!important;
}

#supplyDetailIntegrated .visual-v3 input, #supplyDetailIntegrated .visual-v3 select {
  min-height:var(--ui-control-h)!important;
  font-size:14px!important;
}

#supplyDetailIntegrated .visual-v3 table td {
  font-size:14px!important;
}

#supplyDetailIntegrated .visual-v3 table th {
  font-size:12px!important;
}

/* Unified semantic chips across every level */
#supplyDetailIntegrated .visual-v3 :is(
  .status-chip-v6, #supplyDetailIntegrated .status-chip-v7, #supplyDetailIntegrated .geo-chip-v6, #supplyDetailIntegrated .priority-chip-v6, #supplyDetailIntegrated .type-chip-v6, #supplyDetailIntegrated .target-chip-v5, #supplyDetailIntegrated .reason-v6, #supplyDetailIntegrated .blocked-reason-v5, #supplyDetailIntegrated .history-type-v5, #supplyDetailIntegrated .count-v6, #supplyDetailIntegrated .manual-state-v5, #supplyDetailIntegrated .campaign-tag-v7
) {
  min-height:var(--ui-chip-h)!important;
  padding:5px 9px!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-shadow:none!important;
  box-shadow:none!important;
}

/* Smaller counter badges remain compact but legible */
#supplyDetailIntegrated .visual-v3 :is(.count-v6, #supplyDetailIntegrated .blocked-count-v5) {
  min-height:24px!important;
  font-size:11px!important;
  padding:4px 8px!important;
}

/* Unified section/card headings */
#supplyDetailIntegrated .visual-v3 :is(
 .target-card-head-v5 h3, #supplyDetailIntegrated .manual-card-head-v5 h3, #supplyDetailIntegrated .hosts-section-title-v6 h3, #supplyDetailIntegrated .blocked-card-head-v5 h3, #supplyDetailIntegrated .history-card-head-v5 h3, #supplyDetailIntegrated .create-card-head-v7 h2
) {
  font-size:18px!important;
  font-weight:800!important;
}

#supplyDetailIntegrated .visual-v3 :is(
 .targeting-title-v5 h2, #supplyDetailIntegrated .manual-title-v5 h2, #supplyDetailIntegrated .hosts-title-v6 h2, #supplyDetailIntegrated .blocked-title-v5 h2, #supplyDetailIntegrated .history-title-v5 h2
) {
  font-size:24px!important;
}

/* Tabs: same reading level everywhere */
#supplyDetailIntegrated .visual-v3 .tab {
  font-size:14px!important;
  font-weight:700!important;
  min-height:42px!important;
}

/* Buttons */
#supplyDetailIntegrated .visual-v3 .btn {
  min-height:40px;
  font-size:13px!important;
  font-weight:700!important;
}

/* Status colors: common semantics */
#supplyDetailIntegrated .visual-v3 :is(.active-v6) {
  color:#d8ffe9!important;
  background:#123327!important;
  border:1px solid #2f7b59!important;
}

#supplyDetailIntegrated .visual-v3 :is(.paused-v6, #supplyDetailIntegrated .paused-v7) {
  color:#ffd7dc!important;
  background:#3a2025!important;
  border:1px solid #7d3d48!important;
}

#supplyDetailIntegrated .visual-v3 :is(.archived-v6) {
  color:#d2dde6!important;
  background:#1a2937!important;
  border:1px solid #41586e!important;
}

#supplyDetailIntegrated .field-help-v2 {margin-top:5px;color:#7890a5;font-size:10.5px;line-height:1.4}

#supplyDetailIntegrated .field-help-rtb-v1 {margin-top:5px;color:#7890a5;font-size:10.5px;line-height:1.4}

#supplyDetailIntegrated .field-help-v2 {margin-top:6px;color:#7890a5;font-size:10.5px;line-height:1.45}

#supplyDetailIntegrated .supply-main-preview-v2 {width:100%;max-width:1220px}

#supplyDetailIntegrated .supply-main-header-v2 {
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #1d3850
}

#supplyDetailIntegrated .supply-main-breadcrumb-v2 {color:#6f8aa1;font-size:11px;margin-bottom:6px}

#supplyDetailIntegrated .supply-main-title-row-v2 {display:flex;align-items:center;gap:10px}

#supplyDetailIntegrated .supply-main-title-row-v2 h1 {margin:0!important;font-size:27px!important;color:#f6fbff!important}

#supplyDetailIntegrated .supply-main-meta-v2 {display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

#supplyDetailIntegrated .supply-main-meta-v2 span {
  display:inline-flex;align-items:center;min-height:25px;padding:4px 8px;border-radius:999px;
  color:#a9bfd2;background:#102233;border:1px solid #29475f;font-size:11px;font-weight:700
}

#supplyDetailIntegrated .status-chip-main-v2 {min-height:28px;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:1}

#supplyDetailIntegrated .active-main-v2 {color:#d8ffe9;background:#123327;border:1px solid #2f7b59}

/* 27.08.2026 — доп. цвета статус-чипа для остальных статусов площадки (macro-превью
   показывал только "Активная" — Приостановлена/Заблокированная/Ожидает модерации в макете
   не было ни разу, добавлены здесь по аналогии с active-main-v2, той же скоуп-схемой. */
#supplyDetailIntegrated .paused-main-v2 {color:#ffe9c2;background:#332a12;border:1px solid #7b6a2f}
#supplyDetailIntegrated .pending-main-v2 {color:#cfe0ff;background:#12233a;border:1px solid #2f5a7b}
#supplyDetailIntegrated .blocked-main-v2 {color:#ffd8d8;background:#331212;border:1px solid #7b2f2f}

#supplyDetailIntegrated .supply-tabs-main-v2 {
  display:flex;gap:4px;flex-wrap:wrap;padding:5px;margin-bottom:18px;
  border:1px solid #24425c;border-radius:11px;background:#091825
}

#supplyDetailIntegrated .supply-tab-main-v2 {
  min-height:42px;padding:0 14px;border:0;border-radius:7px;background:transparent;
  color:#94a8bb;font-size:14px;font-weight:700;cursor:pointer
}

#supplyDetailIntegrated .supply-tab-main-v2.active {background:#1877e8;color:#fff}

#supplyDetailIntegrated .main-card-v2 {
  margin-bottom:16px;padding:20px;border:1px solid #24425c;border-radius:12px;
  background:radial-gradient(circle at 100% 0%,rgba(48,131,255,.035),transparent 35%),
             linear-gradient(180deg,#0f2234,#0c1c2c)
}

#supplyDetailIntegrated .main-card-head-v2 {
  display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #1d3850
}

#supplyDetailIntegrated .main-card-head-v2 h2 {margin:0!important;color:#f1f7fc!important;font-size:18px!important}

#supplyDetailIntegrated .main-card-head-v2 p {margin:3px 0 0;color:#8196aa;font-size:11.5px}

#supplyDetailIntegrated .main-icon-v2 {
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;background:#176fd4;font-size:13px;font-weight:900;flex:none
}

#supplyDetailIntegrated .green-main-icon-v2 {background:#26855f}

#supplyDetailIntegrated .main-grid-v2 {display:grid;grid-template-columns:1fr 1fr;gap:16px}

#supplyDetailIntegrated .full-main-v2 {grid-column:1/-1}

#supplyDetailIntegrated .required-main-v2 {color:#ff8f98}

#supplyDetailIntegrated .field-help-main-v2 {margin-top:5px;color:#7890a5;font-size:10.5px;line-height:1.45}

#supplyDetailIntegrated .tags-input-main-v2 {
  min-height:44px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;
  border:1px solid #29475f;border-radius:9px;background:#0a1928
}

#supplyDetailIntegrated .tags-input-main-v2 input {
  flex:1;min-width:160px;height:30px!important;padding:0 4px!important;border:0!important;background:transparent!important
}

#supplyDetailIntegrated .setting-row-main-v2 {
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px;border:1px solid #29475f;border-radius:10px;background:#0a1928
}

#supplyDetailIntegrated .setting-title-main-v2 {color:#edf5fc;font-size:14px;font-weight:800}

#supplyDetailIntegrated .setting-desc-main-v2 {margin-top:4px;color:#8499ac;font-size:11.5px}

#supplyDetailIntegrated .toggle-row-main-v2 {min-height:44px;display:flex;align-items:center;gap:9px;color:#c7d5e2;font-size:12px;font-weight:700}

#supplyDetailIntegrated .toggle-row-main-v2 input {display:none}

#supplyDetailIntegrated .toggle-main-v2 {width:38px;height:21px;border-radius:999px;background:#243849;position:relative;border:1px solid #3a5367}

#supplyDetailIntegrated .toggle-main-v2:after {
  content:"";position:absolute;width:15px;height:15px;left:2px;top:2px;border-radius:50%;
  background:#8fa1b1;transition:.18s
}

#supplyDetailIntegrated .toggle-row-main-v2 input:checked + .toggle-main-v2 {background:#1262d0;border-color:#2f86ef}

#supplyDetailIntegrated .toggle-row-main-v2 input:checked + .toggle-main-v2:after {left:19px;background:#fff}

/* ==========================================
   SUPPLY RATES PREVIEW v2
   ========================================== */
#supplyDetailIntegrated .supply-rates-preview-v1 {width:100%}

#supplyDetailIntegrated .rates-mode-card-v2 {
  padding:20px;border:1px solid #24425c;border-radius:12px;
  background:radial-gradient(circle at 100% 0%,rgba(48,131,255,.04),transparent 34%),
             linear-gradient(180deg,#0f2234,#0c1c2c);
}

#supplyDetailIntegrated .rates-mode-card-v2[hidden] {display:none!important}

#supplyDetailIntegrated .rates-mode-head-v2 {
  display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #1d3850;
}

#supplyDetailIntegrated .rates-mode-head-v2 h2 {margin:0!important;color:#f1f7fc!important;font-size:18px!important}

#supplyDetailIntegrated .rates-mode-head-v2 p {margin:3px 0 0;color:#8196aa;font-size:11.5px}

#supplyDetailIntegrated .rates-icon-v2 {
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:900;flex:none;
}

#supplyDetailIntegrated .vast-rate-icon-v2 {background:linear-gradient(180deg,#258cff,#1262d0)}

#supplyDetailIntegrated .ssp-rate-icon-v2 {background:linear-gradient(180deg,#d7a437,#a87714)}

#supplyDetailIntegrated .vast-rate-layout-v2, #supplyDetailIntegrated .ssp-rate-layout-v2 {
  display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start;
}

#supplyDetailIntegrated .vast-rate-main-v2, #supplyDetailIntegrated .ssp-rate-main-v2 {display:grid;gap:16px}

#supplyDetailIntegrated .money-input-v2, #supplyDetailIntegrated .percent-input-v2 {
  display:flex;align-items:center;border:1px solid #29475f;border-radius:9px;background:#091825;overflow:hidden;
}

#supplyDetailIntegrated .money-input-v2 input, #supplyDetailIntegrated .percent-input-v2 input {
  flex:1;border:0!important;background:transparent!important;box-shadow:none!important;
}

#supplyDetailIntegrated .money-input-v2 span, #supplyDetailIntegrated .percent-input-v2 span {
  display:flex;align-items:center;min-height:44px;padding:0 12px;
  border-left:1px solid #29475f;color:#8fa4b7;font-size:11px;white-space:nowrap;
}

#supplyDetailIntegrated .required-v2 {color:#ff8f98}

#supplyDetailIntegrated .rates-side-v2 {display:grid;gap:12px}

#supplyDetailIntegrated .rate-summary-v2 {
  padding:18px;border:1px solid #29475f;border-radius:12px;background:#0a1928;text-align:center;
}

#supplyDetailIntegrated .rate-summary-label-v2 {color:#8196aa;font-size:11px}

#supplyDetailIntegrated .rate-summary-value-v2 {margin-top:6px;color:#9dccff;font-size:28px;font-weight:900}

#supplyDetailIntegrated .gold-value-v2 {color:#f0c66b}

#supplyDetailIntegrated .rate-summary-caption-v2 {margin-top:4px;color:#71879b;font-size:10.5px}

#supplyDetailIntegrated .private-override-v2 {
  padding:14px;border:1px solid #3a4350;border-radius:10px;background:#0b1926;
}

#supplyDetailIntegrated .private-override-title-v2 {margin-bottom:10px;color:#d9e4ee;font-size:12px;font-weight:800}

#supplyDetailIntegrated .rate-priority-v2 {display:flex;align-items:center;gap:10px}

#supplyDetailIntegrated .rate-priority-v2 div {display:flex;flex-direction:column}

#supplyDetailIntegrated .rate-priority-v2 strong {color:#edf5fc;font-size:11.5px}

#supplyDetailIntegrated .rate-priority-v2 span:last-child {margin-top:2px;color:#7f94a8;font-size:10.5px}

#supplyDetailIntegrated .priority-index-v2 {
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;background:#1877e8;font-size:11px;font-weight:800;flex:none;
}

#supplyDetailIntegrated .secondary-index-v2 {background:#42576a}

#supplyDetailIntegrated .priority-arrow-v2 {margin:4px 0 4px 12px;color:#5f7386;font-size:14px}

/* ==========================================
   SUPPLY RTB PREVIEW v1
   ========================================== */
#supplyDetailIntegrated .supply-rtb-preview-v1 {width:100%}

#supplyDetailIntegrated .secondary-rtb-v1 {background:#0d2030!important;border:1px solid #31506a!important;color:#bdd0e2!important}

#supplyDetailIntegrated .rtb-card-v1 {
  padding:20px;border:1px solid #24425c;border-radius:12px;
  background:radial-gradient(circle at 100% 0%,rgba(48,131,255,.04),transparent 34%),
             linear-gradient(180deg,#0f2234,#0c1c2c);
}

#supplyDetailIntegrated .rtb-card-head-v1 {
  display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #1d3850;
}

#supplyDetailIntegrated .rtb-card-head-v1 h2 {margin:0!important;color:#f1f7fc!important;font-size:18px!important}

#supplyDetailIntegrated .rtb-card-head-v1 p {margin:3px 0 0;color:#8196aa;font-size:11.5px}

#supplyDetailIntegrated .rtb-icon-v1 {
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:15px;font-weight:900;flex:none;
}

#supplyDetailIntegrated .blue-rtb-v1 {background:linear-gradient(180deg,#258cff,#1262d0)}

#supplyDetailIntegrated .rtb-setting-row-v1 {
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px;border:1px solid #29475f;border-radius:10px;background:#0a1928;
}

#supplyDetailIntegrated .rtb-setting-title-v1 {color:#edf5fc;font-size:14px;font-weight:800}

#supplyDetailIntegrated .rtb-setting-desc-v1 {margin-top:4px;color:#8499ac;font-size:11.5px}

#supplyDetailIntegrated .toggle-row-rtb-v1 {
  min-height:44px;display:flex;align-items:center;gap:9px;color:#c7d5e2;font-size:12px;font-weight:700;
}

#supplyDetailIntegrated .toggle-row-rtb-v1 input {display:none}

#supplyDetailIntegrated .toggle-rtb-v1 {
  width:38px;height:21px;border-radius:999px;background:#243849;position:relative;border:1px solid #3a5367;
}

#supplyDetailIntegrated .toggle-rtb-v1:after {
  content:"";position:absolute;width:15px;height:15px;left:2px;top:2px;border-radius:50%;
  background:#8fa1b1;transition:.18s;
}

#supplyDetailIntegrated .toggle-row-rtb-v1 input:checked + .toggle-rtb-v1 {background:#1262d0;border-color:#2f86ef}

#supplyDetailIntegrated .toggle-row-rtb-v1 input:checked + .toggle-rtb-v1:after {left:19px;background:#fff}

#supplyDetailIntegrated .rtb-sync-body-v1 {margin-top:16px}

#supplyDetailIntegrated .rtb-sync-body-v1.disabled-v1 {opacity:.42;pointer-events:none}

#supplyDetailIntegrated .rtb-grid-v1 {display:grid;grid-template-columns:1fr 1fr;gap:16px}

#supplyDetailIntegrated .full-width-rtb-v1 {grid-column:1/-1}

#supplyDetailIntegrated .readonly-url-row-v1 {
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;
}

#supplyDetailIntegrated .readonly-url-row-v1 input {
  color:#a9cfff!important;background:#0a1928!important;
}

#supplyDetailIntegrated .rtb-note-v1 {
  display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:13px 15px;
  border:1px solid #263f56;border-radius:10px;background:#0a1927;
}

#supplyDetailIntegrated .info-circle-rtb-v1 {
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex:none;color:#9dccff;background:#112c45;border:1px solid #2c628d;font-weight:800;
}

#supplyDetailIntegrated .rtb-note-v1 strong {display:block;color:#e8f1f9;font-size:12.5px}

#supplyDetailIntegrated .rtb-note-v1 span {display:block;margin-top:3px;color:#8398ad;font-size:11px}

/* v1.1 — local save action + explicit Sync URL example */
#supplyDetailIntegrated .rtb-card-footer-v2 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #1d3850;
}

#supplyDetailIntegrated .rtb-save-note-v2 {
  color:#7f94a8;
  font-size:11.5px;
}

/* ==========================================
   SUPPLY -> CAMPAIGNS PREVIEW v1
   ========================================== */
#supplyDetailIntegrated .supply-campaigns-preview-v1 {width:100%}

#supplyDetailIntegrated .status-chip-camp-v1, #supplyDetailIntegrated .type-chip-camp-v1, #supplyDetailIntegrated .source-chip-camp-v1, #supplyDetailIntegrated .reason-chip-camp-v1 {
  display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 9px;
  border-radius:999px;font-size:12px;font-weight:700;line-height:1;text-shadow:none;box-shadow:none;
}

#supplyDetailIntegrated .dsp-camp-v1 {color:#9dccff;background:#112c45;border:1px solid #2c628d}

#supplyDetailIntegrated .vast-camp-v1 {color:#d6b4ff;background:#261d38;border:1px solid #554074}

#supplyDetailIntegrated .campaigns-card-v1 {
  margin-bottom:22px;padding:20px;border:1px solid #24425c;border-radius:12px;
  background:radial-gradient(circle at 100% 0%,rgba(48,131,255,.04),transparent 34%),
             linear-gradient(180deg,#0f2234,#0c1c2c);
}

#supplyDetailIntegrated .filtered-campaigns-v1 {
  background:radial-gradient(circle at 100% 0%,rgba(215,90,104,.04),transparent 34%),
             linear-gradient(180deg,#0f2234,#0c1c2c);
}

#supplyDetailIntegrated .campaigns-card-head-v1 {
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #1d3850;
}

#supplyDetailIntegrated .campaigns-head-left-v1 {display:flex;align-items:center;gap:12px}

#supplyDetailIntegrated .campaigns-card-head-v1 h2 {margin:0!important;color:#f1f7fc!important;font-size:18px!important}

#supplyDetailIntegrated .campaigns-card-head-v1 p {margin:3px 0 0;color:#8196aa;font-size:11.5px}

#supplyDetailIntegrated .campaigns-icon-v1 {
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;font-weight:900;flex:none;
}

#supplyDetailIntegrated .green-camp-icon-v1 {background:linear-gradient(180deg,#3cbb84,#23845c)}

#supplyDetailIntegrated .red-camp-icon-v1 {background:linear-gradient(180deg,#d75a68,#963946)}

#supplyDetailIntegrated .campaigns-count-v1 {
  display:inline-flex;align-items:center;justify-content:center;min-width:25px;min-height:24px;
  padding:4px 8px;margin-left:5px;border-radius:999px;color:#94e7bc;background:#102b20;
  border:1px solid #2e7555;font-size:11px;vertical-align:2px;
}

#supplyDetailIntegrated .red-count-camp-v1 {color:#ffadb5;background:#321f23;border-color:#62363e}

#supplyDetailIntegrated .campaigns-table-wrap-v1 {
  border:1px solid #20374d!important;border-radius:10px!important;overflow:auto;
}

#supplyDetailIntegrated .campaigns-table-v1 {width:100%;min-width:1580px;border-collapse:collapse}

#supplyDetailIntegrated .filtered-campaign-table-v1 {min-width:1180px}

#supplyDetailIntegrated .campaigns-table-v1 th {
  text-align:left;padding:12px 13px;background:#0a1827!important;color:#9fb0c1!important;
  font-size:12px!important;border-bottom:1px solid #20374d!important;white-space:nowrap;
}

#supplyDetailIntegrated .campaigns-table-v1 td {
  padding:14px 13px!important;color:#e1eaf3!important;font-size:14px!important;
  border-bottom:1px solid #182d41!important;vertical-align:middle;
}

#supplyDetailIntegrated .campaigns-table-v1 tbody tr:hover {background:#0d2134!important}

#supplyDetailIntegrated .reason-chip-camp-v1 {color:#ffadb5;background:#321f23;border:1px solid #62363e}

/* ==========================================
   SUPPLY HISTORY PREVIEW v1
   ========================================== */
#supplyDetailIntegrated .supply-history-preview-v1 {width:100%}

#supplyDetailIntegrated .history-card-h-v1 {
  padding:20px;border:1px solid #24425c;border-radius:12px;
  background:radial-gradient(circle at 100% 0%,rgba(48,131,255,.04),transparent 34%),
             linear-gradient(180deg,#0f2234,#0c1c2c);
}

#supplyDetailIntegrated .history-card-head-h-v1 {
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #1d3850;
}

#supplyDetailIntegrated .history-card-head-h-v1 h2 {margin:0!important;color:#f1f7fc!important;font-size:18px!important}

#supplyDetailIntegrated .history-card-head-h-v1 p {margin:3px 0 0;color:#8196aa;font-size:11.5px}

#supplyDetailIntegrated .history-table-wrap-h-v1 {border:1px solid #20374d!important;border-radius:10px!important;overflow:auto}

#supplyDetailIntegrated .history-table-h-v1 {width:100%;min-width:1120px;border-collapse:collapse}

#supplyDetailIntegrated .history-table-h-v1 th {
  text-align:left;padding:12px 13px;background:#0a1827!important;color:#9fb0c1!important;
  font-size:12px!important;border-bottom:1px solid #20374d!important;white-space:nowrap;
}

#supplyDetailIntegrated .history-table-h-v1 td {
  padding:14px 13px!important;color:#e1eaf3!important;font-size:14px!important;
  border-bottom:1px solid #182d41!important;vertical-align:top;
}

#supplyDetailIntegrated .history-table-h-v1 tbody tr:hover {background:#0d2134!important}

#supplyDetailIntegrated .history-type-chip-h-v1 {
  display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 9px;
  border-radius:999px;color:#9dccff;background:#112c45;border:1px solid #2c628d;
  font-size:12px;font-weight:700;line-height:1;text-shadow:none;box-shadow:none;
}

#supplyDetailIntegrated .history-value-h-v1 {display:flex;flex-direction:column;gap:4px}

#supplyDetailIntegrated .history-value-h-v1 strong {color:#e9f1f8;font-size:13px;font-weight:700}

#supplyDetailIntegrated .history-date-h-v1 {color:#e0eaf2;font-size:13px}


/* ---------------------------------------------------------------------------
   VAST Inspector — Visual Polish V2 (31.08.2026), по формальному ТЗ
   "VAST_INSPECTOR_VISUAL_SPEC_V2.md" + приложенному HTML-превью, реализовано
   "один в один" по прямому запросу владельца. Полностью заменяет композицию
   раундов 1-4 (округ 1: базовая композиция, округ 2: цветовая
   дифференциация+Root Cause в строке статистики, округ 3: диагностика как
   alert-list/error-state, округ 4: финальный polish/стресс-тест фиксы).
   Структура и порядок блоков НЕ менялись (ТЗ V2 п.1/п.22) — менялась только
   палитра, типографика, композиция Root Cause (вынесен в отдельный
   hero-блок) и плотность.

   Палитра НАМЕРЕННО отдельная от общих :root-токенов AdliumX (--accent/
   --muted/--green/--amber/--red и т.п., см. начало файла) — владелец в этом
   ТЗ явно задал новые hex-значения специально для VAST Inspector, отменяя
   более раннее правило "не вводить новых цветов" из ТЗ v1.1 (действовавшее
   до этого момента). Токены изолированы префиксом --vi-*, поэтому не влияют
   ни на RTB Log, ни на остальные разделы приложения — те по-прежнему
   используют общие :root-токены без изменений.
--------------------------------------------------------------------------- */
:root {
  --vi-blue: #2D9CFF;
  --vi-cyan: #2FC7D8;
  --vi-green: #27D89A;
  --vi-amber: #F2B84B;
  --vi-red: #FF626E;
  --vi-violet: #8A7CFF;
  --vi-text: #F3F8FC;
  --vi-text-secondary: #A8C0D2;
  --vi-muted: #6F8DA4;
  --vi-text-faint: #4F6D82;
  --vi-border: #173A52;
  --vi-border-soft: rgba(78, 142, 184, .22);
  --vi-panel: #0B1B2A;
  --vi-panel2: #102437;
  --vi-panel3: #132B40;
}

/* Семантические badge/pill — переиспользуются во всех карточках результата
   (Diagnostics/Timeline/Playback/Summary/Safe Inspect). Badge: 11px/600
   (ТЗ §3), pill-форма как в превью. */
.vi-badge-success, .vi-badge-warning, .vi-badge-error, .vi-badge-info, .vi-badge-neutral,
.vi-http-2xx, .vi-http-3xx, .vi-http-4xx, .vi-http-5xx, .vi-http-neutral, .vi-conf-badge {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; line-height: 1.6;
}
.vi-badge-success { color: var(--vi-green); background: rgba(39,216,154,.14); border: 1px solid rgba(39,216,154,.28); }
.vi-badge-warning { color: var(--vi-amber); background: rgba(242,184,75,.12); border: 1px solid rgba(242,184,75,.28); }
.vi-badge-error   { color: var(--vi-red);   background: rgba(255,98,110,.12); border: 1px solid rgba(255,98,110,.30); }
.vi-badge-info    { color: var(--vi-blue);  background: rgba(45,156,255,.12); border: 1px solid rgba(45,156,255,.24); }
.vi-badge-neutral { color: var(--vi-muted); background: rgba(111,141,164,.12); border: 1px solid rgba(111,141,164,.24); }
.vi-http-2xx { color: var(--vi-green); background: rgba(39,216,154,.14); }
.vi-http-3xx { color: #61B6FF; background: rgba(45,156,255,.14); }
.vi-http-4xx { color: var(--vi-amber); background: rgba(242,184,75,.14); }
.vi-http-5xx { color: var(--vi-red); background: rgba(255,98,110,.14); }
.vi-http-neutral { color: var(--vi-muted); background: rgba(111,141,164,.10); }
.vi-conf-badge { color: var(--vi-amber); background: rgba(242,184,75,.12); border: 1px solid rgba(242,184,75,.28); }
.vi-text-amber { color: var(--vi-amber) !important; }
.vi-text-red { color: var(--vi-red) !important; }

/* Header */
.vi-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 0 0 14px; }
.vi-header-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vi-header-title h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--vi-text); }
.vi-header-sub { color: var(--vi-text-secondary); font-size: 13px; margin: 6px 0 0; max-width: 640px; line-height: 1.5; }
.vi-header-metrics { display: flex; gap: 8px; flex-wrap: wrap; }
.vi-metric-chip {
  display: flex; align-items: center; gap: 10px; background: #0D2132;
  border: 1px solid var(--vi-border); border-radius: 7px; padding: 9px 12px;
  min-width: 170px; max-width: 190px;
}
.vi-metric-chip .vi-metric-icon {
  width: 28px; height: 28px; border-radius: 7px; background: rgba(45,156,255,.14);
  color: var(--vi-blue); display: flex; align-items: center; justify-content: center; flex: none;
}
.vi-metric-chip .vi-metric-value { font-size: 13px; font-weight: 700; color: var(--vi-text); }
.vi-metric-chip .vi-metric-label { font-size: 11px; color: var(--vi-muted); }

/* Форма анализа — высота уменьшена (ТЗ §5: -25/-30% от исходной), без
   лишнего пустого пространства под URL. */
.vi-input-card { padding: 13px 14px; }
.vi-input-body { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; }
.vi-input-field { display: flex; flex-direction: column; gap: 5px; }
.vi-input-field label { font-size: 11.5px; color: var(--vi-text-secondary); font-weight: 600; }
.vi-input-field input, .vi-input-field textarea {
  width: 100%; height: 38px; background: #081825; border: 1px solid #1A4059;
  border-radius: 6px; padding: 0 11px; color: #d8ecf8; font-size: 13px;
}
.vi-input-field input:focus, .vi-input-field textarea:focus {
  border-color: var(--vi-blue); outline: none; box-shadow: 0 0 0 2px rgba(45,156,255,.12);
}
.vi-input-field textarea { font-family: monospace; font-size: 12px; min-height: 110px; height: auto; resize: vertical; padding: 8px 11px; }
.vi-input-side { display: flex; flex-direction: column; gap: 7px; width: 230px; }
.vi-input-side .hint-box {
  margin: 0; padding: 9px 10px; font-size: 12px; border-radius: 6px;
  background: rgba(45,156,255,.07); border: 1px solid rgba(45,156,255,.28); color: var(--vi-text-secondary);
}
.vi-input-side .hint-box svg { color: #61B6FF; }
.vi-analyze-btn {
  width: 100%; height: 38px; padding: 0 16px; font-size: 14px; font-weight: 700;
  border-radius: 6px; background: #238BE6; border: none; color: #fff;
  transition: background .15s ease; cursor: pointer;
}
.vi-analyze-btn:hover { background: var(--vi-blue); }
.vi-safe-note { display: flex; align-items: flex-start; gap: 8px; color: #6FAD94; font-size: 11px; line-height: 1.45; }
.vi-safe-note svg { flex: none; margin-top: 1px; color: var(--vi-green); }
@media (max-width: 900px) { .vi-input-body { grid-template-columns: 1fr; } .vi-input-side { width: auto; } }

.vi-input-summary {
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; flex-wrap: wrap;
}
.vi-input-summary.active { display: flex; }
.vi-input-card.collapsed .vi-input-body,
.vi-input-card.collapsed .vi-capabilities-row { display: none; }
.vi-input-summary-main { min-width: 0; flex: 1; }
.vi-input-summary-label { font-size: 11px; color: var(--vi-muted); text-transform: uppercase; letter-spacing: .03em; }
.vi-input-summary-subtitle { font-size: 12.5px; font-weight: 700; color: var(--vi-text); margin-top: 2px; }
.vi-input-summary-preview {
  font-size: 11px; color: var(--vi-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 640px;
}

/* Capability cards (ТЗ §6) — цветная верхняя полоса-акцент по функции. */
.vi-capabilities-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 12px 14px 0; }
.vi-cap-card {
  display: flex; gap: 10px; align-items: flex-start; background: #0C1E2D;
  border: 1px solid var(--vi-border); border-top: 2px solid var(--vi-border);
  border-radius: 7px; padding: 12px 14px;
}
.vi-cap-cyan  { border-top-color: var(--vi-cyan); }
.vi-cap-blue  { border-top-color: var(--vi-blue); }
.vi-cap-green { border-top-color: var(--vi-green); }
.vi-cap-amber { border-top-color: var(--vi-amber); }
.vi-cap-red   { border-top-color: var(--vi-red); }
.vi-cap-card .vi-cap-title { font-size: 13px; font-weight: 700; color: var(--vi-text); }
.vi-cap-card .vi-cap-desc { font-size: 11px; color: #7896AA; margin-top: 2px; line-height: 1.4; }
@media (max-width: 1100px) { .vi-capabilities-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .vi-capabilities-row { grid-template-columns: repeat(2, 1fr); } }

/* Summary (ТЗ §7) — не шесть одинаковых коробок: Статус выделен левым
   акцентом и цветным значением, остальные нейтральные. */
.vi-result { padding: 16px; }
.vi-stat-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.vi-stat-tile {
  background: var(--vi-panel); border: 1px solid var(--vi-border); border-radius: 7px;
  padding: 14px 16px; min-width: 0;
}
.vi-stat-tile .vi-stat-label { font-size: 10px; color: var(--vi-muted); text-transform: uppercase; letter-spacing: .03em; }
.vi-stat-tile .vi-stat-value { font-size: 20px; font-weight: 700; color: var(--vi-text); margin-top: 4px; word-break: break-word; }
.vi-stat-tile-status { border-left: 3px solid var(--vi-green); }
.vi-stat-tile-status .vi-stat-value { color: var(--vi-green); }
.vi-stat-tile-status-fail { border-left-color: var(--vi-red); }
.vi-stat-tile-status-fail .vi-stat-value { color: var(--vi-red); }
.vi-stat-value-ellipsis { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 1200px) { .vi-stat-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .vi-stat-strip { grid-template-columns: repeat(2, 1fr); } }

/* Root Cause — hero-блок (ТЗ §8), между Summary и сеткой результатов, читается
   раньше Diagnostics. Показывается только когда rootCause != null — см.
   viRootCauseHeroHtml/renderVastResultHtml в app.js. */
.vi-root-hero {
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(242,184,75,.10), rgba(242,184,75,.03));
  border: 1px solid rgba(242,184,75,.32); border-left: 3px solid var(--vi-amber);
  border-radius: 7px; margin-bottom: 14px;
}
.vi-root-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vi-root-hero-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--vi-text); }
.vi-root-hero-cause { font-size: 14px; font-weight: 600; color: var(--vi-text); margin-top: 8px; }
.vi-root-hero-evidence { margin: 6px 0 0; padding-left: 18px; }
.vi-root-hero-evidence li { font-size: 12px; color: var(--vi-text-secondary); line-height: 1.55; word-break: break-word; overflow-wrap: anywhere; }

/* Основная сетка результатов (ТЗ §9) — 38/32/30 на десктопе >1400px,
   вертикальный стек <1200px (в т.ч. по acceptance criteria п.12). */
.vi-results-grid { display: grid; grid-template-columns: 38% 32% 30%; gap: 12px; align-items: start; margin-bottom: 14px; }
.vi-results-grid.vi-results-grid-2 { grid-template-columns: 1fr 1fr; }
.vi-card { background: var(--vi-panel); border: 1px solid var(--vi-border); border-left-width: 3px; border-radius: 7px; overflow: hidden; transition: border-color .15s ease; }
.vi-card:hover { border-color: rgba(132, 150, 170, .5); }
.vi-card-cyan  { border-left-color: var(--vi-cyan); }
.vi-card-blue  { border-left-color: var(--vi-blue); }
.vi-card-green { border-left-color: var(--vi-green); }
.vi-card-amber { border-left-color: var(--vi-amber); }
.vi-card-red   { border-left-color: var(--vi-red); }
.vi-card-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--vi-text); padding: 11px 13px; border-bottom: 1px solid var(--vi-border); }
.vi-card-title-note { font-size: 11px; font-weight: 400; color: var(--vi-muted); }
.vi-card-body { padding: 10px 12px 12px; max-height: 420px; overflow: auto; }
@media (max-width: 1200px) { .vi-results-grid, .vi-results-grid.vi-results-grid-2 { grid-template-columns: 1fr; } }

/* VAST Chain (ТЗ §10) — пунктирный коннектор, HTTP по диапазону кода. */
.vi-chain { position: relative; }
.vi-chain-item { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.vi-chain-item:last-child { padding-bottom: 0; }
.vi-chain-item:not(:last-child):before {
  content: ""; position: absolute; left: 5px; top: 14px; bottom: -14px;
  border-left: 2px dashed rgba(47,199,216,.35);
}
.vi-chain-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 4px; border: 2px solid var(--vi-panel); }
.vi-chain-dot-cyan { background: var(--vi-cyan); }
.vi-chain-dot-green { background: var(--vi-green); }
.vi-chain-card { flex: 1; min-width: 0; border: 1px solid #1A4059; border-radius: 6px; padding: 10px 12px; background: #0D2132; }

/* Tracking (ТЗ §11). */
.vi-event-name { font-size: 12px; font-weight: 600; color: #E8F4FC; }
.vi-ghost-btn {
  display: inline-flex; align-items: center; gap: 5px; background: transparent;
  border: 1px solid #244B64; color: #8FB2C8; border-radius: 5px;
  padding: 4px 9px; font-size: 11px; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.vi-ghost-btn:hover { color: #D8F0FF; border-color: var(--vi-blue); }

/* Media (ТЗ §12) — заголовок карточки несёт "X из Y MediaFile" (см.
   .vi-card-title-note). */

/* Diagnostics (ТЗ §13) — alert-list вместо таблицы. */
.vi-diag-list { display: flex; flex-direction: column; gap: 8px; }
.vi-diag-item { border-left: 3px solid var(--vi-border); background: var(--vi-panel2); border-radius: 6px; padding: 9px 10px; }
.vi-diag-blue { border-left-color: var(--vi-blue); }
.vi-diag-amber { border-left-color: var(--vi-amber); }
.vi-diag-red { border-left-color: var(--vi-red); }
.vi-diag-head { display: flex; align-items: center; gap: 8px; }
.vi-diag-severity { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.vi-diag-code { font-size: 11px; color: var(--vi-muted); margin-left: auto; word-break: break-word; overflow-wrap: anywhere; max-width: 60%; text-align: right; font-family: monospace; }
.vi-diag-message { font-size: 13px; color: var(--vi-text); margin-top: 4px; line-height: 1.5; }

/* Delivery Timeline (ТЗ §14). */
.vi-timeline-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.vi-timeline-dot-green { background: var(--vi-green); }
.vi-timeline-dot-amber { background: var(--vi-amber); }
.vi-timeline-dot-red { background: var(--vi-red); }
.vi-timeline-dot-neutral { background: #55788F; }

/* Diagnostic Playback — отдельная danger-zone (ТЗ §15), не full-solid red. */
.vi-danger-panel {
  border: 1px solid rgba(255,98,110,.30); border-top: 2px solid rgba(255,98,110,.45);
  background: rgba(255,98,110,.035);
  border-radius: 7px; margin-bottom: 14px; overflow: hidden;
}
.vi-danger-panel-header { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid rgba(255,98,110,.20); }
.vi-danger-panel-header svg { color: var(--vi-red); }
.vi-danger-panel-header .vi-danger-title { font-size: 14px; font-weight: 700; color: var(--vi-text); }
.vi-danger-panel-body { padding: 12px 16px 16px; }
.vi-send-btn {
  background: rgba(255,98,110,.14); border: 1px solid rgba(255,98,110,.34); color: #FF7B84;
  border-radius: 5px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .15s ease;
}
.vi-send-btn:hover { background: rgba(255,98,110,.22); }

.vi-footer-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--vi-border); color: var(--vi-muted); font-size: 12px;
}

/* Error state (ТЗ §17). */
.vi-error-card { border: 1px solid var(--vi-border); border-left: 3px solid var(--vi-red); background: rgba(255,98,110,.05); border-radius: 7px; padding: 14px 16px; }
.vi-error-head { display: flex; align-items: center; gap: 8px; color: var(--vi-text); font-size: 14px; }
.vi-error-head svg { color: var(--vi-red); flex: none; }
.vi-error-technical { font-size: 11px; color: var(--vi-muted); margin: 8px 0 10px; }

/* Таблицы внутри карточек результата — компактнее, table 12px (ТЗ §3), row
   34-36px (ТЗ §19). Только внутри .vi-card-body — остальные .data-table в
   приложении не затрагиваются. */
.vi-card-body .data-table th,
.vi-card-body .data-table td { padding: 9px 8px; font-size: 12px; white-space: nowrap; }
.vi-card-body .data-table { table-layout: auto; }