/* Stezha — design system
   Linear/Vercel-inspired: neutral near-black surfaces, soft shadows over hard
   borders, generous whitespace, a single restrained accent color. */

:root {
  /* surfaces */
  --page:      #0a0a0c;
  --sidebar:   #0c0c0f;
  --card:      #141417;
  --card-hi:   #1a1a1f;
  --inset:     #0a0a0d;
  --line:      rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);

  /* text */
  --fg:        #eceef1;
  --fg-dim:    #a3a7b0;
  --muted:     #6f7380;

  /* accent (Linear indigo) */
  --acc:       #5e6ad2;
  --acc-hi:    #7280e8;
  --acc-soft:  rgba(94, 106, 210, 0.14);
  --acc-line:  rgba(94, 106, 210, 0.35);

  /* status */
  --ok:        #4fb46c;
  --ok-soft:   rgba(79, 180, 108, 0.14);
  --warn:      #d9a441;
  --warn-soft: rgba(217, 164, 65, 0.14);
  --bad:       #e5687a;
  --bad-soft:  rgba(229, 104, 122, 0.14);
  --neutral:      #5b5f6b;
  --neutral-soft: rgba(255, 255, 255, 0.06);

  /* scale */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --ease: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page);
  color: var(--fg);
  font: 14px/1.55 -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- скролбари під темну тему (дефолтні світлі вибивались) ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }  /* Firefox */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.04em; }

a { color: var(--acc-hi); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- app shell ---------- */

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

.sidebar {
  width: 232px;
  flex: none;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  /* .shell лише min-height: 100vh, тож без цього сайдбар розтягується на
     всю висоту сторінки (вирівнюється по .main) — на довгій сторінці
     nav-spacer штовхає "Налаштування/Admin/юзера" в самий низ довгого
     контенту замість низу екрана. Прибиваємо до viewport і скролимо
     сайдбар окремо від контенту. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  color: var(--fg);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(155deg, var(--acc-hi), var(--acc));
  display: flex; align-items: center; justify-content: center; flex: none;
}
.brand .mark svg { width: 13px; height: 13px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--fg-dim);
  font-size: 13.5px; font-weight: 500;
  transition: background var(--ease), color var(--ease);
}
.nav-item:hover { color: var(--fg); background: var(--neutral-soft); text-decoration: none; }
.nav-item.active { color: var(--fg); background: var(--acc-soft); }
.nav-item.active svg { stroke: var(--acc-hi); }
.nav-item svg { width: 16px; height: 16px; stroke: currentColor; flex: none; }
.nav-spacer { flex: 1; }

.sidebar-user {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  border-top: 1px solid var(--line);
  flex: none;
}
.sidebar-user-name { font-size: 12.5px; color: var(--fg-dim); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user form { flex: none; }
.sidebar-logout {
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px;
  cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); transition: color var(--ease), background var(--ease);
}
.sidebar-logout:hover { color: var(--fg); background: var(--neutral-soft); }

.main { flex: 1; min-width: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line);
  gap: var(--sp-4);
}
.topbar .titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.topbar .eyebrow { color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; gap: var(--sp-2); flex: none; }

.content {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--sp-6);
}
/* форма правила: .rail фіксовані 300px, тож увесь виграш ширини йде
   в .main-col (flex:1) — саме туди, де Sigma YAML/use case/плейбук. */
.content-wide { max-width: 1640px; }
/* каталог: широка таблиця з тактикою+техніками — використовуємо бічний простір */
.content-xwide { max-width: 1840px; }

/* ---------- buttons / inputs ---------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--card-hi); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 14px; font: inherit; font-weight: 500; font-size: 13.5px;
  cursor: pointer; transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.btn:hover { background: #202026; border-color: rgba(255,255,255,0.14); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--acc); border-color: var(--acc); color: #fff;
}
.btn-primary:hover { background: var(--acc-hi); border-color: var(--acc-hi); }
.btn-reject { flex: none; }
.btn-reject:hover { border-color: var(--bad); color: var(--bad); }

/* peer review: погодити + відхилити (з обов'язковою причиною) в один ряд */
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.review-actions form { margin: 0; }
.reject-form { display: flex; gap: 6px; align-items: center; flex: 1 1 260px; }
.reject-form input[type="text"] { flex: 1 1 auto; min-width: 0; margin: 0; }

label { display: block; font-weight: 600; font-size: 13px; margin: var(--sp-4) 0 var(--sp-1); }
label.req::after { content: " *"; color: var(--bad); }
.help { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], input[type=date], select, textarea {
  width: 100%; background: var(--inset); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 11px; font: inherit; transition: border-color var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acc-line); box-shadow: 0 0 0 3px var(--acc-soft);
}
textarea.mono, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
}
textarea.mono {
  background: var(--inset); line-height: 1.6; min-height: 320px; resize: vertical;
}
.errorlist { color: var(--bad); list-style: none; padding: 0; margin: 4px 0; font-size: 12.5px; }

/* ---------- cards ---------- */

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
/* inset, а не border-left: не ламає border-radius картки на тому боці */
.card-accent-bad   { box-shadow: var(--shadow-card), inset 3px 0 0 var(--bad); }
.card-accent-ok    { box-shadow: var(--shadow-card), inset 3px 0 0 var(--ok); }
.card-accent-muted { box-shadow: var(--shadow-card), inset 3px 0 0 var(--line); }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
}

/* ---------- rule page: chip strip + tabs ---------- */

/* паспорт правила — рядок кольорових чипів (статус/якість/лінтер/джерела/
   автор/правки); точні дати й імена — у title-підказках чипів */
/* Ключові чипи над вкладками — видимі незалежно від активної вкладки */
.chip-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--sp-4); }
.chip-strip .ck { opacity: 0.6; font-weight: 500; margin-right: 3px; }
/* тактики/техніки в стрічці чипів — кольорові чипи з підписом усередині, як решта (RID-бейджі не чіпаємо) */
.chip-strip .pill-tactic { background: rgba(94, 106, 210, 0.22); color: #98a2f2; font-weight: 600; }
.chip-strip .pill-tech { background: rgba(45, 183, 160, 0.18); color: #4fc7ad; }
.chip-strip .pill-tech .ck { font-family: -apple-system, "Inter", "Segoe UI", system-ui, sans-serif; }

/* Вкладка "Опис і контекст": сітка 2×2 — зверху опис | паспорт, знизу use case | плейбук */
.docs-quad { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: stretch; }
.docs-quad > .card, .docs-quad > .docs-pass { margin: 0; min-width: 0; }
.docs-pass { display: flex; }               /* картка паспорта заповнює свою чверть по висоті */
.docs-pass .card { margin: 0; flex: 1; }
@media (max-width: 900px) { .docs-quad { grid-template-columns: 1fr; align-items: start; } }

/* Селект "Відповідальний" у паспорті — легкий, зливається зі значеннями, власна стрілка */
.docs-pass .meta-owner select {
  width: auto; max-width: 100%; margin: -3px -6px; font-weight: 600; color: var(--fg); font-size: 13px;
  background-color: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 3px 24px 3px 6px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 12px;
}
.docs-pass .meta-owner select:hover { background-color: var(--inset); border-color: var(--line); }
.docs-pass .meta-owner select:focus { background-color: var(--inset); border-color: var(--acc-line); box-shadow: none; }
.docs-pass .meta-owner select option { color: var(--fg); background: var(--card-hi); font-weight: 500; }

/* Структурована документація (Use case / Плейбук) — секції в перегляді, поля в редагуванні */
.doc-sec { margin-bottom: 11px; }
.doc-sec:last-child { margin-bottom: 0; }
.doc-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.doc-sec .pre-text { margin: 0; }
.doc-edit label { display: block; margin: 10px 0 3px; font-size: 12.5px; }
.doc-edit label:first-child { margin-top: 0; }
.doc-edit textarea { margin: 0; }

/* Робочий процес L1 — full-width згорнутий runbook під квадрантами */
.wf-details { margin-top: var(--sp-4); border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.wf-summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; user-select: none; }
.wf-summary::-webkit-details-marker { display: none; }
.wf-summary h3 { margin: 0; font-size: 14px; }
.wf-caret { color: var(--muted); transition: transform var(--ease); font-size: 12px; }
.wf-details[open] .wf-caret { transform: rotate(90deg); }
.wf-hint { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.wf-details[open] .wf-summary { border-bottom: 1px solid var(--line); }
.wf-card { margin: 0; border: none; border-radius: 0; background: none; }
.wf-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.wf-tb { background: var(--inset); border: 1px solid var(--line); color: var(--fg-dim); border-radius: var(--r-sm); min-width: 30px; height: 30px; padding: 0 8px; cursor: pointer; font-size: 13px; line-height: 1; }
.wf-tb:hover { border-color: var(--acc-line); color: var(--fg); }
.wf-preview-btn { margin-left: auto; white-space: nowrap; }
.wf-tb.active { background: var(--acc-soft); border-color: var(--acc-line); color: var(--acc-hi); }
.wf-preview { border: 1px solid var(--acc-line); border-radius: var(--r-sm); padding: 14px 16px; background: var(--inset); min-height: 120px; }
.wf-editing-label { font-size: 12px; }
textarea.wf-editor { min-height: 240px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; }
/* рендер відформатованого Markdown */
.wf-rendered { font-size: 14px; line-height: 1.6; }
.wf-rendered > :first-child { margin-top: 0; }
.wf-rendered > :last-child { margin-bottom: 0; }
.wf-rendered h1, .wf-rendered h2, .wf-rendered h3, .wf-rendered h4 { margin: 1em 0 0.4em; line-height: 1.3; }
.wf-rendered h1 { font-size: 20px; } .wf-rendered h2 { font-size: 17px; } .wf-rendered h3 { font-size: 15px; }
.wf-rendered p { margin: 0.5em 0; }
.wf-rendered ul, .wf-rendered ol { margin: 0.5em 0; padding-left: 1.6em; }
.wf-rendered li { margin: 0.25em 0; }
.wf-rendered img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-sm); margin: 0.5em 0; display: block; }
.wf-rendered code { background: var(--inset); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; }
.wf-rendered pre { background: var(--inset); padding: 12px; border-radius: var(--r-sm); overflow-x: auto; }
.wf-rendered pre code { background: none; padding: 0; }
.wf-rendered blockquote { margin: 0.6em 0; padding: 2px 14px; border-left: 3px solid var(--acc-line); color: var(--fg-dim); }
.wf-rendered a { color: var(--acc-hi); }
.wf-rendered table { border-collapse: collapse; margin: 0.6em 0; }
.wf-rendered th, .wf-rendered td { border: 1px solid var(--line); padding: 5px 10px; }

/* Паспорт правила — список label -> значення (у картці вкладки "Опис і контекст") */
.meta-dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 7px 20px;
  margin: 0; font-size: 13.5px; align-items: center;
}
.meta-dl dt { color: var(--muted); }
.meta-dl dd { margin: 0; color: var(--fg); font-weight: 600; }
.meta-dl dd a { color: var(--acc-hi); text-decoration: none; }
.meta-dl dd a:hover { text-decoration: underline; }
.meta-dl .v-muted { color: var(--muted); font-weight: 400; }
.contrib-list .contrib-name { font-weight: 600; }
/* семантичні кольори значень (заскоуплено .meta-dl, щоб перебити .meta-dl dd) */
.meta-dl .v-st-production { color: var(--ok); }
.meta-dl .v-st-testing    { color: var(--warn); }
.meta-dl .v-st-draft      { color: var(--muted); }
.meta-dl .v-st-deprecated { color: var(--bad); }
.meta-dl .v-plat-windows  { color: #6cb0ff; }
.meta-dl .v-plat-linux    { color: var(--warn); }
.meta-dl .v-plat-macos    { color: var(--fg); }
.meta-dl .v-q-good { color: var(--ok); }
.meta-dl .v-q-mid  { color: var(--warn); }
.meta-dl .v-q-low  { color: var(--bad); }
.meta-dl .v-ok   { color: var(--ok); }
.meta-dl .v-warn { color: var(--warn); }
.meta-dl .v-bad  { color: var(--bad); }
@media (max-width: 480px) {
  .meta-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .meta-dl dt { margin-top: 8px; }
}
/* RID-пілюля поруч із заголовком сторінки */
h1 .title-ref { vertical-align: 3px; margin-left: 4px; }

.tabbar {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
  /* overflow-y: hidden обов'язково: margin-bottom:-1px активної вкладки
     дає 1px вертикального переповнення, і голий overflow-x:auto показував
     через нього постійну смугу прокрутки */
  overflow-x: auto; overflow-y: hidden;
}
.tabbar .tab {
  padding: 9px 16px; font-size: 13.5px; font-weight: 500;
  color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
  transition: color var(--ease);
}
.tabbar .tab:hover { color: var(--fg); text-decoration: none; }
.tabbar .tab.active { color: var(--fg); border-bottom-color: var(--acc); }
.tab-badge {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--neutral-soft); color: var(--fg-dim);
}
.tab-badge.warn { background: var(--warn-soft); color: var(--warn); }

/* секції-вкладки: одна активна, решта приховані (JS перемикає) */
.tab-section { display: none; }
.tab-section.active { display: block; }
/* без .tab-section (режим створення) секції — звичайний потік */
section:not(.tab-section) { display: block; }

.save-bar.hide { display: none; }

/* ---------- filter bar ---------- */

/* Таби каталогу: Усі / Sigma / Native — міняють колонки й фільтри */
.cat-tabs { display: flex; gap: 2px; margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.cat-tab {
  padding: 9px 16px; color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
}
.cat-tab:hover { color: var(--fg); text-decoration: none; }
.cat-tab.on { color: var(--fg); border-bottom-color: var(--acc); }
.cat-tab-cnt {
  font-size: 11px; color: var(--muted); background: var(--neutral-soft, rgba(255,255,255,.06));
  border-radius: 10px; padding: 1px 7px;
}
.cat-tab.on .cat-tab-cnt { color: var(--acc); }

/* Панель фільтрів: згорнута (пошук + Фільтрувати + «Ще фільтри»),
   розгортається у сітку з підписами. */
.filter-panel {
  margin-bottom: var(--sp-4);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
}
.filter-panel input, .filter-panel select { margin: 0; }
.fp-top { display: flex; gap: var(--sp-2); align-items: center; }
.fp-top input[name=q] { flex: 1 1 auto; }
.fp-top .btn { flex: none; }
.fp-toggle { display: inline-flex; align-items: center; gap: 6px; }
.fp-caret { display: inline-block; transition: transform .15s; font-size: 11px; }
.filter-panel.open .fp-caret { transform: rotate(180deg); }
.fp-more { display: none; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.filter-panel.open .fp-more { display: block; }
/* селекти — рівномірна авто-сітка (однаковий тип контролю, завжди вирівняні
   незалежно від кількості під таб Усі/Sigma/Native) */
.fp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.ff-cell { display: flex; flex-direction: column; min-width: 0; }
.ff-cell select, .ff-cell input { width: 100%; }
.flab {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
/* підвал: підпис + чипи-тоглі ліворуч, кнопки праворуч */
.fp-foot {
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.fp-hint { font-size: 12px; color: var(--muted); align-self: center; }
.fp-spacer { flex: 1 1 auto; }
.fp-foot .btn { flex: none; }
.fp-foot .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.col-dep { white-space: nowrap; text-align: center; }
@media (max-width: 1080px) { .fp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .stat-grid-5 { grid-template-columns: repeat(2, 1fr); } .fp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fp-grid { grid-template-columns: 1fr; } }

/* збережені фільтри (localStorage) */
.saved-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: calc(var(--sp-4) * -1 + 4px) 0 var(--sp-4); }
.saved-filters-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.saved-chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--card-hi); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 3px 2px 10px;
}
.saved-chip-link { font-size: 12.5px; color: var(--fg-dim); text-decoration: none; }
.saved-chip:hover { border-color: rgba(255,255,255,0.18); }
.saved-chip:hover .saved-chip-link { color: var(--fg); }
.saved-chip-del {
  border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 0 5px; border-radius: 999px;
}
.saved-chip-del:hover { color: var(--bad); }

/* ---------- stat cards ---------- */

.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid-5 { grid-template-columns: repeat(5, 1fr); }
.stat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4); display: block; color: inherit; text-decoration: none;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
a.stat-card, a.stat-card:hover { text-decoration: none; }
a.stat-card:hover { border-color: var(--line-strong, #3a3a44); transform: translateY(-1px); }
a.stat-card:hover .value { text-decoration: none; }
a.stat-card.on { border-color: var(--acc); box-shadow: inset 2px 0 0 var(--acc); }
.stat-card .label {
  color: var(--muted); font-size: 12.5px; font-weight: 500;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.stat-card .sc-hint { font-size: 10.5px; font-weight: 500; opacity: .6; }
.stat-card .value { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; margin-top: 6px; }
.stat-card.accent-ok .value { color: var(--ok); }
.stat-card.accent-warn .value { color: var(--warn); }
.stat-card.accent-bad .value { color: var(--bad); }
.stat-card.accent-acc .value { color: var(--acc); }

/* ---------- table ---------- */

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th {
  text-align: left; padding: 8px 12px; font-size: 11.5px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}
td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr { transition: background var(--ease); }
tbody tr:hover { background: var(--neutral-soft); }
tbody tr:last-child td { border-bottom: none; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--neutral-soft); color: var(--fg-dim);
  white-space: nowrap;  /* напр. RID-25 не має ламатись по дефісу і розсувати рядок */
}
.pill-tactic { background: var(--acc-soft); color: var(--acc-hi); font-weight: 500; }
/* платформа/ОС */
.plat { background: var(--neutral-soft); color: var(--fg-dim); }
.plat-windows { background: rgba(56, 139, 253, 0.16); color: #6cb0ff; }
.plat-linux   { background: rgba(217, 164, 65, 0.16); color: var(--warn); }
.plat-macos   { background: rgba(255, 255, 255, 0.10); color: var(--fg); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill-tech {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  background: var(--neutral-soft); color: var(--fg-dim);
}

.status-production { background: var(--ok-soft); color: var(--ok); }
.status-testing     { background: var(--warn-soft); color: var(--warn); }
.status-draft       { background: var(--neutral-soft); color: var(--muted); }
.status-deprecated  { background: var(--bad-soft); color: var(--bad); }

.level-critical, .level-high { background: var(--bad-soft); color: var(--bad); }
.level-medium            { background: var(--warn-soft); color: var(--warn); }
.level-low, .level-informational { background: var(--neutral-soft); color: var(--fg-dim); }

.quality-good { background: var(--ok-soft); color: var(--ok); }
.quality-mid  { background: var(--warn-soft); color: var(--warn); }
.quality-low  { background: var(--bad-soft); color: var(--bad); }

.quality-reasons { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12.5px; }
.quality-reasons .ok { color: var(--ok); }
.quality-reasons .warn { color: var(--muted); }
.quality-reasons .lint-high { color: var(--bad); }
.quality-reasons .lint-low { color: var(--fg-dim); }

.similar-list { display: flex; flex-direction: column; gap: 6px; }
.similar-list a { font-size: 13.5px; }

/* ---------- dashboard ---------- */

@keyframes dash-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* доростання заливки з 0 до власної (inline) ширини — implicit `to`.
   Чистий CSS: на відміну від requestAnimationFrame, не спиняється у фоні. */
@keyframes bar-grow { from { width: 0; } }
@keyframes trend-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes trend-fade { to { opacity: 1; } }
@keyframes dot-pop { 0% { transform: scale(0); } 70% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--acc-soft); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Панель діапазону дат */
.dash-range {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.range-presets { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; }
.range-btn {
  padding: 6px 14px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500;
  color: var(--fg-dim); text-decoration: none; transition: background var(--ease), color var(--ease);
}
.range-btn:hover { color: var(--fg); text-decoration: none; }
.range-btn.active { background: var(--acc-soft); color: var(--acc-hi); }
.range-custom { display: inline-flex; align-items: center; gap: 8px; }
.range-custom input[type="date"] {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--fg); padding: 7px 10px; font: inherit; font-size: 12.5px; color-scheme: dark;
}
.range-custom input[type="date"]:focus { outline: none; border-color: var(--acc-line); }
.range-dash { color: var(--muted); }

/* KPI-смуга */
.kpi-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.kpi-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 14px 16px;
  animation: dash-in 460ms cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
  transition: border-color var(--ease), transform var(--ease);
}
.kpi-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--kc, var(--acc)); opacity: 0.9;
}
.kpi-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.16); }
.kpi-acc     { --kc: var(--acc); }
.kpi-ok      { --kc: var(--ok); }
.kpi-warn    { --kc: var(--warn); }
.kpi-bad     { --kc: var(--bad); }
.kpi-neutral { --kc: var(--muted); }
.kpi-muted   { opacity: 0.72; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kpi-label { font-size: 11.5px; color: var(--muted); font-weight: 500; line-height: 1.3; }
.kpi-icon { color: var(--kc, var(--acc)); display: inline-flex; opacity: 0.85; flex: none; }
.kpi-value {
  font-size: 27px; font-weight: 680; letter-spacing: -0.03em; margin-top: 10px;
  color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1;
}
.kpi-ok .kpi-value   { color: var(--ok); }
.kpi-warn .kpi-value { color: var(--warn); }
.kpi-bad .kpi-value  { color: var(--bad); }
.kpi-suffix { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; letter-spacing: 0; }
.kpi-note { font-size: 11.5px; color: var(--fg-dim); margin-top: 5px; }
.kpi-spark {
  display: block; height: 3px; border-radius: 2px; margin-top: 10px;
  background: var(--neutral-soft); overflow: hidden;
}
.kpi-spark-fill { display: block; height: 100%; border-radius: 2px; background: var(--kc, var(--acc)); animation: bar-grow 800ms cubic-bezier(0.4, 0, 0.2, 1) 120ms both; }

/* Ряди дашборда */
.dash-2 { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-4); }
.dash-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.dash-2 > .card, .dash-3 > .card { margin-bottom: 0; }

/* Donut «стан парку» */
.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding-top: 4px; }
.donut {
  position: relative; width: 176px; height: 176px;
  animation: dash-in 500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* Кільце — окремий шар: маска, що вирізає дірку, застосовується ЛИШЕ до нього,
   інакше вона зʼїла б і текст у центрі (дочірній елемент маскованого шару). */
.donut-ring {
  --hole: 62%;
  position: absolute; inset: 0; border-radius: 50%;
  -webkit-mask: radial-gradient(circle closest-side, transparent var(--hole), #000 calc(var(--hole) + 0.5%));
  mask: radial-gradient(circle closest-side, transparent var(--hole), #000 calc(var(--hole) + 0.5%));
}
.donut-hole {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; line-height: 1;
}
.donut-fig { display: flex; align-items: baseline; }
.donut-total { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: var(--ok); font-variant-numeric: tabular-nums; }
.donut-pct { font-size: 17px; font-weight: 600; color: var(--ok); margin-left: 1px; }
.donut-cap { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.05em; }
.donut-legend { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.donut-legend li {
  display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 8px;
  font-size: 12.5px;
  animation: dash-in 400ms ease both; animation-delay: calc(200ms + var(--i, 0) * 60ms);
}
.lg-dot { width: 10px; height: 10px; border-radius: 3px; }
.lg-ok { background: var(--ok); } .lg-warn { background: var(--warn); }
.lg-bad { background: var(--bad); } .lg-neutral { background: var(--muted); }
.lg-label { color: var(--fg-dim); }
.lg-val { font-weight: 650; font-variant-numeric: tabular-nums; }
.lg-pct { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* bar-чарти */
.chart-bars { display: flex; flex-direction: column; gap: 10px; }
.chart-bar-row {
  display: grid; grid-template-columns: 168px 1fr 42px; align-items: center; gap: 10px;
  animation: dash-in 360ms ease both; animation-delay: calc(var(--i, 0) * 35ms);
}
.chart-bar-label { font-size: 12.5px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.chart-bar-row.is-blind .chart-bar-label { color: var(--muted); }
.blind-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); flex: none; box-shadow: 0 0 0 3px var(--bad-soft); }
.chart-bar-track { position: relative; height: 14px; border-radius: 7px; background: var(--neutral-soft); overflow: hidden; }
.chart-bar-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 7px;
  animation: bar-grow 800ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--i, 0) * 35ms) both;
}
.chart-bar-fill-ok      { background: linear-gradient(90deg, var(--ok), #63c47f); }
.chart-bar-fill-warn    { background: linear-gradient(90deg, var(--warn), #e8bd63); }
.chart-bar-fill-bad     { background: linear-gradient(90deg, var(--bad), #ef8494); }
.chart-bar-fill-neutral { background: var(--muted); }
.chart-bar-fill-good    { background: linear-gradient(90deg, var(--ok), #63c47f); }
.chart-bar-fill-mid     { background: linear-gradient(90deg, var(--warn), #e8bd63); }
.chart-bar-fill-low     { background: linear-gradient(90deg, var(--bad), #ef8494); }
.chart-bar-fill-acc     { background: linear-gradient(90deg, var(--acc), var(--acc-hi)); }
.chart-bar-fill-blind   { background: var(--neutral-soft); }
.chart-bar-value { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.chart-card-value { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.cov-badge, .trend-badge {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--acc-soft); color: var(--acc-hi);
}

/* trend-графік */
.dash-trend-card { display: flex; flex-direction: column; }
.trend-chart { width: 100%; height: auto; display: block; flex: 1; min-height: 0; }
.trend-axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.trend-grid { stroke: var(--line-soft); stroke-width: 1; }
.trend-area { opacity: 0; animation: trend-fade 600ms ease 700ms forwards; }
.trend-line {
  fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  /* базовий стан — намальовано (dashoffset:0). Малювання лінії — лише
     enhancement поверх видимого стану, тож якщо анімація не відпрацює
     (спинена/недоступна), лінія все одно на місці. */
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: trend-draw 1100ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
}
.trend-dot { fill: var(--acc); opacity: 0; transform-box: fill-box; transform-origin: center; animation: dot-pop 300ms ease both; animation-delay: calc(1000ms + var(--i, 0) * 40ms); }
.trend-dot[style*="--i"] { opacity: 1; }
.trend-dot-last { fill: var(--acc-hi); stroke: var(--card); stroke-width: 2; animation: pulse-ring 2.2s ease-in-out 1.4s infinite; border-radius: 50%; }
.trend-chart circle { cursor: default; }

/* Потребує уваги */
.attention-clear { color: var(--ok); font-weight: 500; margin: 4px 0 0; }
.attention-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.att-item {
  display: block; padding: 14px; border-radius: var(--r-md); text-decoration: none;
  border: 1px solid var(--line); background: var(--card-hi);
  animation: dash-in 400ms ease both;
  transition: transform var(--ease), border-color var(--ease);
}
a.att-item, a.att-item:hover { text-decoration: none; }
a.att-item:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); }
a.att-item:hover .att-sub { color: var(--fg-dim); }
.att-bad { box-shadow: inset 3px 0 0 var(--bad); }
.att-warn { box-shadow: inset 3px 0 0 var(--warn); }
.att-head { display: flex; align-items: baseline; gap: 8px; }
.att-num { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.att-bad .att-num { color: var(--bad); }
.att-warn .att-num { color: var(--warn); }
.att-lbl { font-size: 13px; color: var(--fg-dim); }
.att-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.att-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.att-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  .kpi-card, .donut, .donut-legend li, .chart-bar-row, .att-item,
  .trend-area, .trend-line, .trend-dot, .trend-dot-last,
  .kpi-spark-fill, .chart-bar-fill { animation: none; }
  .trend-line { stroke-dashoffset: 0; }
  .trend-area, .trend-dot { opacity: 1; }
}

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

/* ---------- rule page: layout grids ---------- */

/* вкладка Редагування: тіло (гумове) + інструменти (фіксована колонка).
   align-items: stretch (дефолт) — обидві колонки однієї висоти; тіло-картка
   flex-колонкою розтягує СВОЮ textarea, тож редактор YAML заповнює висоту. */
.split { display: grid; grid-template-columns: 1fr 480px; gap: var(--sp-4); }
.split-main .card { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; }
.split-main .card textarea { flex: 1; }
.split-side { display: flex; flex-direction: column; gap: var(--sp-4); }
.split-side .card { margin-bottom: 0; }
.split-side .card:last-child { flex: 1; }

/* симетрична 2-колонка; align-items дефолтний (stretch) — картки одного
   ряду однієї висоти. Непарна остання картка (умовні секції на кшталт
   Схожі/Atomic можуть бути відсутні) розтягується на весь ряд — без дір */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.grid-2 > .card { margin-bottom: 0; min-width: 0; }
.grid-2 > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.card + .grid-2 { margin-top: 0; }

/* довгі списки (історія, atomic-тести) — внутрішній скрол замість
   розтягування картки на пів сторінки */
.scroll-box { max-height: 380px; overflow-y: auto; padding-right: 4px; }

/* робочий процес у save-bar: статус + інтервал + причина в один рядок */
.wf-fields { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; flex-wrap: wrap; }
.save-bar select { width: 150px; margin: 0; }
.save-bar input[type=number] { width: 100px; margin: 0; }
.save-bar input[type=text] { flex: 1; min-width: 180px; margin: 0; }

/* ---------- inline edit (перегляд тексту + олівець) ---------- */

.card-head-right { display: flex; align-items: center; gap: 8px; }
.edit-toggle {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  padding: 4px; border-radius: var(--r-sm); display: inline-flex;
  transition: color var(--ease), background var(--ease);
}
.edit-toggle:hover { color: var(--fg); background: var(--neutral-soft); }
.inline-edit.editing .edit-toggle { color: var(--acc-hi); }

.inline-edit .ie-edit { display: none; }
.inline-edit.editing .ie-view { display: none; }
.inline-edit.editing .ie-edit { display: block; }

.pre-text { white-space: pre-wrap; margin: 0; line-height: 1.6; }
.pre-text.empty { color: var(--muted); font-style: italic; }

/* ---------- SIEM query output ---------- */

.query-view {
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 34px 10px 12px; margin: 0; font-size: 12.5px; line-height: 1.6;
  /* довгий однорядковий запит ПЕРЕНОСИТЬСЯ, а не тікає в горизонтальний
     скрол: копіюванню переноси не шкодять, а читати можна без прокрутки.
     padding-right лишає місце під кнопку копіювання. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.query-block { position: relative; }
.copy-btn {
  position: absolute; top: 6px; right: 6px;
  background: var(--card-hi); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer; padding: 4px; display: inline-flex;
  transition: color var(--ease), border-color var(--ease);
}
.copy-btn:hover { color: var(--fg); border-color: rgba(255,255,255,0.2); }
.copy-btn.copied { color: var(--ok); border-color: var(--ok); }

/* ---------- unified diff (peer review) ---------- */

.diff-details { margin-top: var(--sp-3); }
.diff-details summary { cursor: pointer; font-size: 12.5px; }
.diff-view {
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; overflow-x: auto; margin: 8px 0 0;
  font-size: 12px; line-height: 1.55;
}
.diff-view span { display: block; white-space: pre; }
.diff-add  { background: var(--ok-soft); color: var(--ok); }
.diff-del  { background: var(--bad-soft); color: var(--bad); }
.diff-hunk { color: var(--acc-hi); }
.diff-file { color: var(--muted); }
.diff-ctx  { color: var(--fg-dim); }

/* ---------- catalog table: центровані колонки + сортування ---------- */

/* все по центру, крім широкої текстової "Назва" — її заголовок по центру
   висів би далеко від лівовирівняного тексту */
.catalog-table th, .catalog-table td { text-align: center; }
.catalog-table th.col-name, .catalog-table td.col-name { text-align: left; }
/* тактика по центру (заголовок і плашки) */
.catalog-table th.col-tactic, .catalog-table td.col-tactic { text-align: center; }
/* вертикальний зазор між плашками, коли їх у клітинці кілька і вони
   переносяться (статус, домен, тактика, техніки); симетричний margin
   лишає одиночні плашки по центру рядка */
.catalog-table td .pill { margin: 3px 0; }
/* Назва забирає всю вільну ширину таблиці — решта колонок стискаються під
   свій контент, тож "Тактика" не розтягується порожнечею праворуч */
.catalog-table th.col-name, .catalog-table td.col-name { width: 100%; }

.th-sort {
  color: inherit; text-decoration: none;
  transition: color var(--ease);
}
.th-sort:hover { color: var(--fg); text-decoration: none; }
.th-sort.active { color: var(--fg); }
.th-sort .arrow { color: var(--acc-hi); font-size: 9px; }

/* ---------- pagination ---------- */

.pagination {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  padding-top: var(--sp-4); margin-top: var(--sp-2);
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}

/* ---------- empty state ---------- */

.empty-state {
  text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--muted);
}
.empty-state svg { width: 32px; height: 32px; stroke: var(--muted); margin-bottom: var(--sp-3); }
.empty-state p { margin: 0 0 var(--sp-3); }

/* ---------- flash messages ---------- */

.flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--sp-4); }
.flash {
  padding: 10px 14px; border-radius: var(--r-sm); font-size: 13.5px;
  border: 1px solid transparent;
}
.flash-success { background: var(--ok-soft); color: var(--ok); }
.flash-error   { background: var(--bad-soft); color: var(--bad); }
.flash-warning { background: var(--warn-soft); color: var(--warn); }
.flash-info, .flash-debug { background: var(--neutral-soft); color: var(--fg-dim); }

/* ---------- form page ---------- */

.field-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); }
.field-row > div { min-width: 0; }

/* ---------- rule form: main column + sticky metadata rail ---------- */

.two-col { display: flex; gap: var(--sp-4); align-items: flex-start; }
.two-col .main-col { flex: 1 1 0; min-width: 0; }
.two-col .rail {
  flex: 0 0 300px; min-width: 0;
  /* .content не має власного скролу — прилипає відносно viewport. Топбар
     не sticky (скролиться разом зі сторінкою), тож немає його висоти, яку
     треба віднімати з top. */
  position: sticky;
  top: var(--sp-4);
}
.two-col .rail label { margin-top: var(--sp-3); }
.two-col .rail label:first-of-type { margin-top: 0; }

.save-bar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3);
  background: rgba(10, 10, 12, 0.85); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-5);
  margin: var(--sp-5) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ---------- timeline ---------- */

.timeline { display: flex; flex-direction: column; }
.timeline-item {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--acc);
  margin-top: 6px; flex: none;
}
.timeline-body { min-width: 0; }
.timeline-date { font-size: 12px; color: var(--muted); }
.timeline-reason { font-size: 13.5px; margin-top: 2px; }
.timeline-note { font-size: 12px; margin-top: 4px; display: inline-block; }
.timeline-user { color: var(--fg-dim); }
/* історія: перші 5 + розкриття решти (без скролу) */
.history-more > summary {
  cursor: pointer; list-style: none; margin-top: 10px;
  font-size: 12.5px; font-weight: 500; color: var(--acc-hi);
  display: inline-flex; align-items: center; gap: 5px; width: fit-content;
}
.history-more > summary::-webkit-details-marker { display: none; }
.history-more > summary::before { content: "▸"; font-size: 10px; }
.history-more[open] > summary::before { content: "▾"; }
.history-more > summary:hover { color: var(--fg); }
.hm-verb::after { content: "Показати"; }
.history-more[open] .hm-verb::after { content: "Згорнути"; }

/* ---------- coverage: тактика-рядок + технік-чіпи, що переносяться ---------- */
/* Раніше — колонка на тактику (Navigator-стиль), фіксована ширина 128px×15
   тактик змушувала горизонтальний скрол і ховала частину тактик за краєм.
   tiles тут завжди розріджені (лише покриті техніки, не весь довідник
   ATT&CK), тож справжньої "матриці" з вирівняними рядками й так нема —
   рядок-на-тактику з чіпами, що переносяться, використовує ширину чесно
   і ніколи не ріже вміст. */

.heat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
/* чипи-лінки (coverage -> каталог з фільтром) — підсвітка замість підкреслення */
a.heat-chip { text-decoration: none; transition: filter var(--ease); }
a.heat-chip:hover { text-decoration: none; filter: brightness(1.25); }
.heat-chip .n { font-family: -apple-system, sans-serif; opacity: .75; }
.heat-0 { background: var(--neutral-soft); color: var(--fg-dim); }
.heat-1 { background: rgba(94, 106, 210, 0.16); color: var(--fg); }
.heat-2 { background: rgba(94, 106, 210, 0.32); color: var(--fg); }
.heat-3 { background: rgba(94, 106, 210, 0.5); color: #fff; }
.heat-4 { background: rgba(94, 106, 210, 0.74); color: #fff; }

.legend { display: flex; align-items: center; gap: 8px; margin-top: var(--sp-4); font-size: 12px; color: var(--muted); }
.legend .heat-chip { width: 16px; height: 16px; padding: 0; border-radius: 4px; }

/* ---------- ATT&CK матриця (тактики-колонки, техніки-стовпчиком) ---------- */
/* На широкому екрані 15 колонок ростуть і заповнюють ширину (flex-grow),
   тож повний ID технік читається без скролу; на вузьких — min-width тримає
   ID цілим і матриця скролиться горизонтально (Navigator-поведінка), а не
   обрізає текст. */
.matrix-scroll { overflow-x: auto; padding-bottom: 4px; }
.attck-matrix { display: flex; gap: 5px; align-items: flex-start; }
.matrix-col { flex: 1 1 84px; min-width: 84px; display: flex; flex-direction: column; }
.matrix-head {
  min-height: 56px; padding: 2px 2px 8px; margin-bottom: 8px;
  border-bottom: 2px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.mh-name {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--fg-dim); line-height: 1.2; overflow-wrap: anywhere;
}
.mh-count {
  min-width: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--neutral-soft); color: var(--muted);
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.matrix-cells { display: flex; flex-direction: column; gap: 4px; }
.matrix-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 5px 6px; border-radius: var(--r-sm);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px;
  text-decoration: none; white-space: nowrap; transition: filter var(--ease);
}
a.matrix-tile:hover { filter: brightness(1.28); text-decoration: none; }
.matrix-tile .mt-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.matrix-tile .mt-n { font-family: -apple-system, sans-serif; font-size: 10px; opacity: .75; flex: none; }
.matrix-empty { text-align: center; color: var(--muted); font-size: 12px; opacity: .4; padding: 2px 0; }

.matrix-unclassified { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--line); }
.matrix-unclassified .mu-label { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.matrix-unclassified .mu-tiles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.matrix-unclassified .matrix-tile { flex: 0 0 auto; }

/* ---------- chip-row: label + wrapped chips (тактики, джерела логів) ---------- */

.chip-row-list { display: flex; flex-direction: column; }
.chip-row {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft);
}
.chip-row:last-child { border-bottom: none; }
.chip-row.chip-row-dashed {
  border-top: 1px dashed var(--line); margin-top: var(--sp-2); padding-top: var(--sp-4);
}
.chip-row-label {
  flex: 0 0 190px; min-width: 0; padding-top: 5px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  font-size: 12.5px; color: var(--fg-dim);
}
.chip-row-label .muted { font-size: 11px; }
.chip-row-items { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-row-items .chip-row-empty { font-size: 12.5px; padding: 4px 0; }
.chip-row-action { flex: none; padding-top: 1px; }

/* пілюлі-посилання (список правил на джерело) — без підкреслення при ховері,
   легке підсвічування замість нього (незалежно від кольору статус-пілюлі) */
a.pill { text-decoration: none; transition: filter var(--ease); }
a.pill:hover { text-decoration: none; filter: brightness(1.25); }

/* ---------- command palette ---------- */

.cmdk-trigger {
  display: flex; align-items: center; gap: 6px;
  width: 100%; margin-top: var(--sp-2);
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--muted); font: inherit; font-size: 12.5px; padding: 7px 10px; cursor: pointer;
}
.cmdk-trigger:hover { color: var(--fg); border-color: rgba(255,255,255,0.2); }
.cmdk-kbd { margin-left: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--muted); }

.cmdk-overlay[hidden] { display: none; }
.cmdk-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; z-index: 100;
}
.cmdk-panel {
  width: 100%; max-width: 560px; margin: 0 var(--sp-4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.cmdk-input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--fg); font: inherit; font-size: 15px;
  padding: 16px 18px; outline: none; border-radius: 0;
}
.cmdk-results { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmdk-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm); font-size: 13.5px; cursor: pointer;
}
.cmdk-item.active { background: var(--acc-soft); }
.cmdk-kind { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; flex: none; }
.cmdk-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

@media (max-width: 860px) {
  .cmdk-trigger { display: none; }
  .shell { flex-direction: column; }
  .sidebar {
    width: auto; flex-direction: row; align-items: center;
    border-right: none; border-bottom: 1px solid var(--line);
    overflow-x: auto;
    /* десктопна версія прибиває сайдбар на всю висоту viewport (position:
       sticky + height:100vh) — тут це горизонтальний топ-бар, не колонка,
       тож повертаємо звичайну поведінку в потоці сторінки. */
    position: static;
    height: auto;
    overflow-y: visible;
  }
  .nav { flex-direction: row; }
  .nav-spacer { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid-3 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .two-col { flex-direction: column; }
  .two-col .rail { flex: none; width: auto; position: static; top: auto; }
  .split, .grid-2 { grid-template-columns: 1fr; }
  .grid-2 > .card:last-child:nth-child(odd) { grid-column: auto; }
  .wf-fields { flex-basis: 100%; }
  .chip-row { flex-direction: column; gap: 4px; }
  .chip-row-label { flex: none; width: auto; padding-top: 0; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-2, .dash-3 { grid-template-columns: 1fr; }
  .chart-bar-row { grid-template-columns: 100px 1fr 34px; gap: 6px; }
  .chart-bar-label { font-size: 11.5px; }
  .content { padding: var(--sp-4); }
  .topbar { padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
  .topbar-actions { flex: 1 1 100%; flex-wrap: wrap; }
  /* .save-bar розтягує себе назовні на -var(--sp-5) з обох боків, щоб
     дорівнятись краям картки; на мобільному padding контенту менший
     (var(--sp-4)), тож той самий відступ раніше вилазив за viewport. */
  .save-bar { margin-left: calc(var(--sp-4) * -1); margin-right: calc(var(--sp-4) * -1); }
}

/* ============================================================
   Преміум-тема (концепт security-SaaS дашборда). Переозначення в
   кінці файлу — later-declaration wins, решта стилів не чіпається.
   ============================================================ */
:root {
  --acc:      #6c86ff;
  --acc-hi:   #8aa0ff;
  --acc-soft: rgba(108, 134, 255, 0.15);
  --acc-line: rgba(108, 134, 255, 0.38);
  --acc2:     #33d6c0;   /* бірюзовий — вторинний акцент для даних */
  --violet:   #a78bfa;
}

/* М'які радіальні підсвітки на тлі застосунку */
html, body {
  background:
    radial-gradient(1200px 520px at 82% -10%, rgba(108, 134, 255, 0.10), transparent 60%),
    radial-gradient(900px 500px at -5% 110%, rgba(51, 214, 192, 0.06), transparent 55%),
    var(--page);
  background-attachment: fixed;
}

/* Кнопка згортання сайдбара + міні-рейка */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sidebar-toggle {
  flex: none; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  display: grid; place-items: center; transition: var(--ease);
}
.sidebar-toggle:hover { color: var(--fg); background: var(--card); border-color: var(--line2); }
.sidebar-toggle svg { transition: transform var(--ease); }
.main { transition: none; }  /* flex:1 сам розтягує контент, коли рейка вужча */

:root.sb-collapsed .sidebar { width: 68px; padding-left: 10px; padding-right: 10px; gap: var(--sp-4); overflow: visible; }
:root.sb-collapsed .brand-row { flex-direction: column; gap: 12px; }
:root.sb-collapsed .brand-name { display: none; }
:root.sb-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
:root.sb-collapsed .nav-item {
  justify-content: center; padding: 10px 0; font-size: 0; gap: 0;
}
:root.sb-collapsed .nav-item svg { width: 18px; height: 18px; }
:root.sb-collapsed .cmdk-trigger { justify-content: center; font-size: 0; padding: 8px 0; }
:root.sb-collapsed .cmdk-trigger .cmdk-kbd { display: none; }
:root.sb-collapsed .sidebar-user { justify-content: center; padding: 8px; }
:root.sb-collapsed .sidebar-user-name { display: none; }
:root.sb-collapsed .sidebar-logout .lbl { display: none; }
:root.sb-collapsed .sidebar-logout { padding: 7px; }
.sidebar-logout { display: inline-flex; align-items: center; gap: 6px; }

/* Сайдбар: напівпрозорий, бренд-логотип із сяйвом, активний пункт — градієнт-пілюля */
.sidebar {
  background: linear-gradient(180deg, rgba(18, 24, 36, 0.85), rgba(10, 10, 12, 0.9));
  backdrop-filter: blur(8px);
  border-right: 1px solid var(--line);
}
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(140deg, var(--acc-hi), var(--violet));
  box-shadow: 0 6px 18px rgba(108, 134, 255, 0.35);
}
.brand .mark svg { width: 16px; height: 16px; }
.nav-item { border-radius: 10px; font-weight: 500; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(108, 134, 255, 0.20), rgba(108, 134, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(108, 134, 255, 0.28);
}
.sidebar-user {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 11px;
}

/* Картки: м'який вертикальний градієнт + акуратна тінь */
.card {
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -24px rgba(0, 0, 0, 0.6);
}

/* KPI-плитки: крупніше значення, кольорова дельта, акцент-градієнт зверху */
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: var(--sp-4); }
.kpi-card {
  padding: 18px;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border-radius: var(--r-lg);
}
.kpi-card::before {
  inset: 0 0 auto 0; width: auto; height: 3px;
  background: linear-gradient(90deg, var(--kc, var(--acc)), transparent 75%);
  opacity: 0.9;
}
.kpi-card::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, var(--kc, var(--acc)), transparent 70%);
  opacity: 0.08; pointer-events: none;
}
.kpi-value { font-size: 32px; font-weight: 740; margin-top: 12px; }
.kpi-note { font-weight: 500; }
.kpi-icon {
  width: 30px; height: 30px; border-radius: 9px; opacity: 1;
  background: var(--kc-soft, var(--acc-soft));
  display: inline-flex; align-items: center; justify-content: center;
}
.kpi-acc  { --kc-soft: rgba(108,134,255,.16); }
.kpi-ok   { --kc-soft: var(--ok-soft); }
.kpi-warn { --kc-soft: var(--warn-soft); }
.kpi-bad  { --kc-soft: var(--bad-soft); }
/* Міні-графік (sparkline) під кожним KPI — реальний помісячний ряд */
.kpi-spark { display: block; height: 36px; margin-top: 12px; background: none; overflow: visible; }
.kpi-spark.kpi-spark-bar { height: 4px; border-radius: 2px; background: var(--neutral-soft); overflow: hidden; }
.kpi-svg { width: 100%; height: 100%; display: block; }
.kpi-svg-area  { fill: var(--kc, var(--acc)); opacity: 0.16; }
.kpi-svg-line  { fill: none; stroke: var(--kc, var(--acc)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi-svg-dot   { fill: var(--kc, var(--acc)); }
.kpi-spark-fill {
  background: linear-gradient(90deg, var(--kc, var(--acc)), var(--acc2));
  box-shadow: 0 0 10px -2px var(--kc, var(--acc));
}

/* Донати — радіальний gauge зі SVG-дуг (заокруглені кінці + проміжки + сяйво) */
.donut-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 2px 11px rgba(108, 134, 255, 0.30));
  animation: donut-spin 700ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.donut-track { stroke: var(--neutral-soft); }
@keyframes donut-spin { from { opacity: 0; transform: rotate(-14deg) scale(.94); } to { opacity: 1; transform: none; } }
.lg-dot { border-radius: 4px; }

/* Заголовки карток трохи виразніші */
.card-head h3 { letter-spacing: 0.1px; }

/* Стрічка «Останні зміни» на дашборді */
.recent-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.recent-tbl td { padding: 11px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.recent-tbl tr:last-child td { border-bottom: none; }
.recent-tbl tr { cursor: pointer; transition: background var(--ease); }
.recent-tbl tr:hover td { background: var(--neutral-soft); }
.recent-tbl tr:hover td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.recent-tbl tr:hover td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.recent-tbl .rt-title { font-weight: 600; color: var(--fg); width: 40%; }
.recent-tbl .rt-editor { color: var(--fg-dim); white-space: nowrap; }
.recent-tbl .rt-when { color: var(--muted); text-align: right; white-space: nowrap; }
.rt-ava {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), var(--violet));
  color: #0a0d13; font-size: 10px; font-weight: 700; margin-right: 5px; vertical-align: middle;
}

/* Бари бар-чартів — індиго→бірюзовий градієнт (як спарклайни), трохи вищі */
.chart-bar-track { height: 15px; border-radius: 8px; }
.chart-bar-fill-acc { background: linear-gradient(90deg, var(--acc), var(--acc2)); }

/* Панель «Потребує уваги» — картки з градієнтом і кольоровим сяйвом */
.att-item {
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border-radius: var(--r-lg);
}
.att-bad  { box-shadow: inset 3px 0 0 var(--bad), 0 0 34px -22px var(--bad); }
.att-warn { box-shadow: inset 3px 0 0 var(--warn), 0 0 34px -22px var(--warn); }
a.att-item:hover.att-bad  { box-shadow: inset 3px 0 0 var(--bad), 0 12px 30px -18px rgba(0,0,0,.6); }
a.att-item:hover.att-warn { box-shadow: inset 3px 0 0 var(--warn), 0 12px 30px -18px rgba(0,0,0,.6); }
.att-chip {
  display: inline-block; font-size: 11px; padding: 2px 8px; margin: 3px 4px 0 0;
  border-radius: 999px; background: var(--bad-soft); color: var(--bad); font-weight: 500;
}

/* ===================== Kill Chain page ===================== */
.kc-intro { color: var(--fg-dim); font-size: 13px; line-height: 1.6; max-width: 960px; margin: 0 0 var(--sp-4); }
.kc-intro b { color: var(--fg); font-weight: 600; }
.kc-teal { color: var(--acc2); } .kc-acc { color: var(--acc); }

.kc-metrics { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.kc-m { background: linear-gradient(180deg, var(--card-hi), var(--card)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.kc-m-primary { box-shadow: inset 0 0 0 1px rgba(69,200,138,.28); }
.kc-m-primary .kc-m-val { color: var(--ok); }
.kc-m-lab { font-size: 12px; color: var(--muted); }
.kc-m-val { font-size: 28px; font-weight: 740; margin-top: 8px; line-height: 1; }
.kc-m-of { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.kc-m-sub { font-size: 11px; color: var(--dim); margin-top: 6px; }

/* Lockheed rollup */
.kc-lm { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.kc-ph { position: relative; border: 1px solid var(--line); background: var(--card-hi); border-radius: 12px; padding: 12px; overflow: hidden; }
.kc-ph::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.kc-cov::before { background: linear-gradient(90deg, var(--ok), transparent); }
.kc-weak::before { background: linear-gradient(90deg, var(--warn), transparent); }
.kc-blind::before { background: linear-gradient(90deg, var(--bad), transparent); }
.kc-ph-n { font-size: 20px; font-weight: 740; line-height: 1; }
.kc-cov .kc-ph-n { color: var(--ok); } .kc-weak .kc-ph-n { color: var(--warn); } .kc-blind .kc-ph-n { color: var(--bad); }
.kc-ph-t { font-size: 10.5px; color: var(--muted); margin-top: 5px; }

.kc-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 11.5px; color: var(--muted); }
.kc-legend .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: middle; }
.lg-acc { background: var(--acc); } .kc-teal-bg { background: var(--acc2); }

/* UKC lane */
.kc-stage-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet, #a78bfa); font-weight: 700; margin: 18px 0 9px; display: flex; align-items: center; gap: 8px; }
.kc-stage-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.kc-lane { display: flex; flex-direction: column; gap: 8px; }
.kc-drow { border-radius: 11px; background: var(--card-hi); border: 1px solid var(--line); overflow: hidden; }
.kc-drow.kc-row-blind, .kc-drow.kc-row-vis_gap { border-color: rgba(229,104,122,.3); background: rgba(229,104,122,.05); }
.kc-row { display: grid; grid-template-columns: 16px 196px 60px 1fr 168px 40px; align-items: center; gap: 14px; padding: 9px 12px; cursor: pointer; list-style: none; }
.kc-row::-webkit-details-marker { display: none; }
.kc-caret { color: var(--dim); font-size: 11px; transition: transform var(--ease); }
.kc-drow[open] > .kc-row { border-bottom: 1px solid var(--line-soft); }
.kc-drow[open] .kc-caret { transform: rotate(90deg); }
/* дрілдаун-деталі */
.kc-detail { padding: 12px 16px 14px 42px; display: flex; flex-direction: column; gap: 13px; }
.kc-d-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin-bottom: 6px; }
.kc-d-rules { display: flex; flex-direction: column; gap: 3px; }
.kc-d-rule { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; text-decoration: none; color: var(--fg-dim); font-size: 12.5px; }
.kc-d-rule:hover { background: var(--neutral-soft); text-decoration: none; }
.kc-d-title { flex: 1; min-width: 0; color: var(--fg); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-d-flags { font-size: 11px; color: var(--ok); white-space: nowrap; }
.kc-d-off { color: var(--muted); }
.kc-d-src { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 6px; margin: 0 4px 4px 0; }
.kc-d-src.on { background: rgba(51,214,192,.14); color: var(--acc2); }
.kc-d-src.off { background: var(--bad-soft); color: var(--bad); }
.kc-d-tech { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 6px; margin: 0 4px 4px 0; background: var(--acc-soft); color: var(--acc-hi); text-decoration: none; font-family: ui-monospace, Menlo, monospace; }
.kc-d-tech:hover { text-decoration: none; filter: brightness(1.12); }
.kc-d-empty { color: var(--muted); font-size: 12px; margin: 0; }
.kc-tac { font-weight: 600; font-size: 13px; }
.kc-tac small { display: block; color: var(--dim); font-weight: 400; font-size: 11px; }
.kc-eye { display: inline-grid; place-items: center; width: 28px; height: 17px; border-radius: 9px; font-size: 11px; }
.kc-eye.full { background: rgba(51,214,192,.18); color: var(--acc2); }
.kc-eye.part { background: var(--warn-soft); color: var(--warn); }
.kc-eye.none { background: var(--bad-soft); color: var(--bad); }
.kc-depth { display: flex; gap: 4px; align-items: center; }
.kc-depth i { width: 10px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.08); }
.kc-depth i.val { background: linear-gradient(180deg, var(--ok), #37b978); }
.kc-depth i.unval { background: linear-gradient(180deg, var(--acc), var(--acc2)); }
.kc-depth i.gap { background: rgba(229,104,122,.22); }
.kc-dlbl { font-size: 11px; color: var(--dim); margin-left: 4px; }
.kc-state { text-align: right; }
.kc-cnt { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.chip.kc-c-ok { background: var(--ok-soft); color: var(--ok); }
.chip.kc-c-warn { background: var(--warn-soft); color: var(--warn); }
.chip.kc-c-bad { background: var(--bad-soft); color: var(--bad); }
.kc-note { margin-top: 14px; font-size: 11.5px; color: var(--dim); border-left: 2px solid var(--line2); padding-left: 10px; line-height: 1.55; }
.kc-note b { color: var(--fg-dim); }

/* Attention split */
.kc-att { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.kc-att-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 9px; }
.kc-att-h .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.kc-att-h-bad { color: var(--bad); } .kc-att-h-warn { color: var(--warn); }
.kc-att-it { padding: 10px 12px; border-radius: 10px; background: var(--card-hi); border: 1px solid var(--line); margin-bottom: 8px; }
.kc-att-bad { box-shadow: inset 3px 0 0 var(--bad); }
.kc-att-warn { box-shadow: inset 3px 0 0 var(--warn); }
.kc-att-it b { font-size: 12.5px; } .kc-att-it small { display: block; color: var(--dim); font-size: 11px; margin-top: 2px; }
.kc-next { margin-top: var(--sp-4); font-size: 12px; }
.kc-next b { color: var(--fg-dim); }

/* threat-informed селектор */
.kc-threat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--sp-4); }
.kc-threat-lab { font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.kc-tpill { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-dim); background: var(--card); text-decoration: none; transition: var(--ease); }
.kc-tpill:hover { border-color: var(--acc-line); color: var(--fg); text-decoration: none; }
.kc-tpill.on { background: linear-gradient(135deg, var(--acc), #5a74f0); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 6px 16px -6px var(--acc); }

/* розрив ланцюга */
.kc-scenario { box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(108,134,255,.16); }
.kc-sc-metric { font-size: 12.5px; color: var(--muted); }
.kc-sc-metric b { color: var(--fg); font-weight: 700; }
.kc-sc-desc { color: var(--fg-dim); font-size: 12.5px; margin: 0 0 12px; }
.kc-btc { display: flex; flex-direction: column; }
.kc-step { display: grid; grid-template-columns: 26px 150px 1fr auto; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line-soft); }
.kc-step:last-child { border-bottom: none; }
.kc-step.earliest { background: rgba(79,180,108,.08); border-radius: 10px; }
.kc-mk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.kc-mk-validated { background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 0 1px rgba(79,180,108,.4); }
.kc-mk-detected { background: var(--acc-soft); color: var(--acc-hi); box-shadow: 0 0 0 1px var(--acc-line); }
.kc-mk-none { background: var(--bad-soft); color: var(--bad); box-shadow: 0 0 0 1px rgba(229,104,122,.4); }
.kc-step-ph { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.kc-step-tech b { font-size: 13px; } .kc-step-tech small { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.chip.kc-c-acc { background: var(--acc-soft); color: var(--acc-hi); }
.kc-banner { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.55; }
.kc-banner.ok { background: rgba(79,180,108,.1); border: 1px solid rgba(79,180,108,.3); }
.kc-banner.bad { background: rgba(229,104,122,.1); border: 1px solid rgba(229,104,122,.3); }
.kc-banner b { color: var(--fg); }
@media (max-width: 1000px) { .kc-step { grid-template-columns: 26px 110px 1fr auto; gap: 8px; } }

/* посилання на сторінку сценаріїв (на Kill Chain) */
.kc-threat-link { display: block; margin-bottom: var(--sp-4); padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(108,134,255,.12), rgba(108,134,255,.02)); border: 1px solid var(--acc-line);
  color: var(--fg-dim); text-decoration: none; font-size: 13px; }
.kc-threat-link:hover { text-decoration: none; border-color: var(--acc-hi); color: var(--fg); }
.kc-threat-link b { color: var(--fg); }

/* сторінка сценаріїв: мета + дії */
.kc-sc-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
.kc-sc-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.btn-danger { color: var(--bad); }
.btn-danger:hover { border-color: var(--bad); color: #fff; background: var(--bad); }

/* форма сценарію */
.th-form { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 820px; }
.th-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.th-f { display: flex; flex-direction: column; gap: 5px; }
.th-f.th-grow { flex: 1 1 260px; }
.th-row .th-f { flex: 1 1 150px; }
.th-f > label { font-size: 12.5px; color: var(--fg-dim); font-weight: 500; }
.th-f textarea.mono { min-height: 220px; }
.th-actions { display: flex; justify-content: flex-end; gap: 10px; }
.kc-info { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 7px;
  border-radius: 50%; background: rgba(255,255,255,.1); color: var(--fg-dim); font-size: 10px;
  cursor: help; vertical-align: middle; }
.kc-info:hover, .kc-info:focus { background: var(--acc-soft); color: var(--acc-hi); outline: none; }

/* ============ Крос-сторінковий преміум-поліш (узгодження з дашбордом) ============ */
/* Заголовок сторінки */
.topbar { backdrop-filter: blur(6px); }
.topbar h1 { font-weight: 660; letter-spacing: -0.01em; }

/* Фільтр-бар / діапазон — як акуратна панель (а не голий ряд) */
.filter-bar, .dash-range {
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px;
}
.range-btn { transition: var(--ease); }

/* Таблиці в картках — легкий фон шапки + м'який hover */
.card table thead th, .card table > tr:first-child th { background: rgba(255,255,255,0.022); }
th { border-bottom-color: var(--line); }
tbody tr:hover { background: rgba(108,134,255,0.06); }

/* Пілюлі-кнопки й pill-і */
.btn-primary { box-shadow: 0 6px 16px -8px var(--acc); }
.pill-tech { letter-spacing: 0.02em; }

/* Матриця ATT&CK — тонший розділювач, заокруглені тайли, акцент-hover */
.matrix-head { border-bottom-width: 1px; }
.matrix-tile { border-radius: 7px; }
a.matrix-tile:hover { filter: brightness(1.2); box-shadow: inset 0 0 0 1px var(--acc-line); }

/* Секційні інтро на сторінках — єдиний вигляд (як .kc-intro) */
.page-intro { color: var(--fg-dim); font-size: 13px; line-height: 1.6; max-width: 960px; margin: 0 0 var(--sp-4); }

/* Інпути/селекти — трохи глибші, фокус-сяйво вже є */
input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], select, textarea {
  background: var(--inset);
}
input:hover, select:hover, textarea:hover { border-color: var(--line2); }

/* ============ Розгортання / калібрування правила ============ */
.dep { border: 1px solid var(--line); border-radius: 12px; background: var(--card-hi); margin-bottom: 10px; overflow: hidden; }
.dep-head { display: grid; grid-template-columns: 16px minmax(150px,210px) 160px 1fr 26px; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; }
.dep-head::-webkit-details-marker { display: none; }
.dep[open] > .dep-head { border-bottom: 1px solid var(--line-soft); }
.dep[open] .kc-caret { transform: rotate(90deg); }
.dep-src { font-weight: 600; font-size: 13px; }
.dep-src small { display: block; color: var(--dim); font-weight: 400; font-size: 11px; }
.dep-cust { font-size: 12.5px; color: var(--fg); }
.dep-cust small { display: block; color: var(--dim); font-size: 11px; }
.dep-status { display: flex; align-items: center; gap: 10px; }
.dep-steps { display: flex; gap: 3px; flex: 1; max-width: 130px; }
.dep-steps i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); }
.dep-steps i.on { background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.dep-steps i.on.off { background: var(--bad); }
.dep-cnt { text-align: center; color: var(--acc-hi); }
.st-draft { background: var(--neutral-soft); color: var(--muted); }
.st-tuning { background: var(--warn-soft); color: var(--warn); }
.st-tested { background: rgba(51,214,192,.16); color: var(--acc2); }
.st-production { background: var(--ok-soft); color: var(--ok); }
.st-no_telemetry, .st-broken { background: var(--bad-soft); color: var(--bad); }
.dep-body { padding: 14px; background: rgba(0,0,0,.15); }
.dep-qh { display: flex; justify-content: space-between; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin-bottom: 6px; }
.dep-body pre { margin: 0 0 12px; background: var(--inset); border: 1px solid var(--line); border-radius: 9px; padding: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #c9d1d9; overflow-x: auto; }
.dep-kv { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; color: var(--muted); }
.dep-kv b { color: var(--fg); font-weight: 600; }
.dep-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); border-left: 2px solid var(--line2); padding-left: 10px; line-height: 1.5; }
.dep-actions { display: flex; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 900px){ .dep-head { grid-template-columns: 14px 1fr auto; } .dep-cust, .dep-steps { display: none; } }

/* Зведення Kill Chain на дашборді */
.kc-sum { display: block; text-decoration: none; color: inherit; transition: var(--ease); }
.kc-sum:hover { border-color: var(--acc-line); text-decoration: none; transform: translateY(-2px); }
.kc-sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 6px; }
.kc-sum-n { font-size: 26px; font-weight: 740; line-height: 1; font-variant-numeric: tabular-nums; }
.kc-sum-n span { font-size: 15px; color: var(--muted); font-weight: 600; }
.kc-sum-l { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

/* Домен / тип детекції — чипи й паспорт */
.p-dom-endpoint { background: rgba(108,134,255,.16); color: #9db0ff; }
.p-dom-network  { background: rgba(51,214,192,.16); color: var(--acc2); }
.p-dom-cloud    { background: rgba(167,139,250,.18); color: var(--violet); }
.p-dom-identity { background: var(--warn-soft); color: var(--warn); }
.p-native       { background: rgba(167,139,250,.18); color: var(--violet); }
.chip-strip .pill-tech2 { background: var(--neutral-soft); color: var(--fg-dim); font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.chip-strip .pill-tech2 .ck { font-family: -apple-system, "Inter", sans-serif; }
.meta-dl .v-dom-endpoint { color: #9db0ff; } .meta-dl .v-dom-network { color: var(--acc2); }
.meta-dl .v-dom-cloud { color: var(--violet); } .meta-dl .v-dom-identity { color: var(--warn); }
.native-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.native-form .th-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.native-form .th-f { display: flex; flex-direction: column; gap: 5px; }
.native-form .th-f.th-grow { flex: 1 1 300px; }
.native-form .th-row .th-f { flex: 1 1 160px; }
.native-form label { font-size: 12.5px; color: var(--fg-dim); font-weight: 500; }

@media (max-width: 1000px) {
  .kc-metrics { grid-template-columns: 1fr 1fr; }
  .kc-lm { grid-template-columns: repeat(4, 1fr); }
  .kc-att { grid-template-columns: 1fr; }
  .kc-row { grid-template-columns: 14px 130px 40px 1fr 110px 32px; gap: 8px; }
  .kc-detail { padding-left: 20px; }
}

/* ---------- Замовники (тенанти) ---------- */
.tnt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.tnt-card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-4); text-decoration: none; color: inherit;
  transition: border-color .12s, transform .12s;
}
.tnt-card:hover { border-color: var(--acc); transform: translateY(-1px); text-decoration: none; }
.tnt-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tnt-name { font-weight: 650; font-size: 15px; line-height: 1.25; }
.tnt-name small { display: block; color: var(--muted); font-weight: 500; font-size: 11.5px; font-family: var(--mono, monospace); margin-top: 2px; }
.tnt-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; font-size: 12px; }
.tnt-stats { display: flex; gap: var(--sp-4); border-top: 1px solid var(--line); padding-top: 12px; }
.tnt-stats > div { display: flex; flex-direction: column; }
.tnt-stats b { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.tnt-stats span { color: var(--muted); font-size: 11px; }
/* статус-пілюлі замовника */
.tnt-st-onboarding { background: var(--warn-soft, rgba(245,165,36,.14)); color: var(--warn); }
.tnt-st-active     { background: rgba(55,214,122,.14); color: var(--ok); }
.tnt-st-paused     { background: var(--neutral-soft, rgba(255,255,255,.06)); color: var(--muted); }
.tnt-st-archived   { background: rgba(242,97,122,.12); color: var(--bad); }
/* контакти */
.tnt-contact { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.tnt-contact:last-child { border-bottom: 0; }
.tnt-contact-top { display: flex; align-items: center; gap: 8px; }
.tnt-contact-info { color: var(--fg-dim); font-size: 12.5px; margin-top: 2px; }
.tnt-contact-info a { color: var(--acc-hi); text-decoration: none; }
/* форма */
.tnt-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; }
.tnt-form-grid .th-grow { grid-column: span 2; }
.tnt-form .th-f { display: flex; flex-direction: column; margin-top: 12px; }
.tnt-form .th-f label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tnt-form input, .tnt-form select, .tnt-form textarea { width: 100%; }
.tnt-cform { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.tnt-cform:first-child { border-top: 0; }
.tnt-cform-row { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr .8fr auto auto; gap: 10px; align-items: end; }
.tnt-cform-row .th-f { margin-top: 0; }
.tnt-cform-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; padding-bottom: 8px; }
.tnt-cform-flag input { width: auto; }
.tnt-del { color: var(--bad); }
.tnt-form-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
@media (max-width: 760px) {
  .tnt-form-grid { grid-template-columns: 1fr 1fr; }
  .tnt-cform-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- Клієнтський портал ---------- */
.portal-body { background: var(--bg); }
.portal-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; border-bottom: 1px solid var(--line); background: var(--card);
  position: sticky; top: 0; z-index: 10;
}
.portal-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--fg); }
.portal-user { display: flex; align-items: center; gap: 12px; }
.portal-user form { margin: 0; }
.portal-tenant { color: var(--fg-dim); font-weight: 550; }
.portal-main { max-width: 1100px; margin: 0 auto; padding: 28px; }
.portal-hero h1 { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 6px; }
.portal-hero p { max-width: 760px; margin: 0 0 var(--sp-4); }
.portal-kpi { margin-bottom: var(--sp-4); }
.portal-tac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.portal-tac {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line);
  font-size: 13px; background: var(--bg2, var(--card));
}
.portal-tac-name { font-weight: 550; }
.portal-tac-state { font-size: 11.5px; white-space: nowrap; }
.portal-tac-validated { border-color: rgba(55,214,122,.4); }
.portal-tac-validated .portal-tac-state { color: var(--ok); }
.portal-tac-partial, .portal-tac-det_gap { border-color: rgba(245,165,36,.35); }
.portal-tac-partial .portal-tac-state, .portal-tac-det_gap .portal-tac-state { color: var(--warn); }
.portal-tac-blind, .portal-tac-vis_gap { border-color: rgba(242,97,122,.3); }
.portal-tac-blind .portal-tac-state, .portal-tac-vis_gap .portal-tac-state { color: var(--bad); }
.portal-src { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-foot { margin-top: var(--sp-4); font-size: 12.5px; }
@media (max-width: 600px) { .portal-top { padding: 12px 16px; } .portal-main { padding: 18px 16px; } }

/* ---------- Онбординг ---------- */
.ob-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ob-bar-track { flex: 1; height: 6px; border-radius: 4px; background: var(--neutral-soft, rgba(255,255,255,.08)); overflow: hidden; }
.ob-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--acc), var(--teal, #33d6c0)); }
.ob-bar-lbl { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ob-bar-lg .ob-bar-track { height: 9px; }
.ob-bar-lg .ob-bar-lbl { font-size: 13px; font-weight: 600; color: var(--fg-dim); }
.ob-steps { list-style: none; margin: 14px 0 0; padding: 0; }
.ob-step { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ob-step:last-child { border-bottom: 0; }
.ob-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--line-strong, #3a3a44); }
.ob-done .ob-dot { background: var(--ok); }
.ob-in_progress .ob-dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,165,36,.18); }
.ob-name { font-weight: 550; }
.ob-done .ob-name { color: var(--fg); }
.ob-pending .ob-name { color: var(--muted); }
.ob-st { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ob-note { flex-basis: 100%; padding-left: 20px; color: var(--muted); font-size: 12px; }
.ob-cform-row { display: grid; grid-template-columns: 56px 1.4fr 1fr 1fr 1.4fr auto; gap: 10px; align-items: end; }
.ob-cform-row .th-f { margin-top: 0; }
@media (max-width: 760px) { .ob-cform-row { grid-template-columns: 1fr 1fr; } }

/* дашборд: таблиця замовників */
.cl-tbl { width: 100%; border-collapse: collapse; }
.cl-tbl th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 6px 10px; }
.cl-tbl td { padding: 10px; border-top: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.cl-tbl tr:not(:first-child) { cursor: pointer; }
.cl-tbl tr:not(:first-child):hover td { background: var(--neutral-soft, rgba(255,255,255,.04)); }
.cl-name { font-weight: 550; display: flex; align-items: center; gap: 8px; }
.cl-num { text-align: center; font-weight: 650; }
.cl-arrow { color: var(--muted); text-align: right; }
.cl-tbl .ob-bar { margin: 0; min-width: 160px; }

/* ---------- Глобальний перемикач клієнта ---------- */
.tenant-switch { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; }
.tenant-switch-lab { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tenant-switch select { margin: 0; min-width: 150px; }
.topbar-actions { margin-left: 12px; }
.client-lens {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; margin-bottom: var(--sp-4); font-size: 13px;
  border: 1px solid var(--acc); border-radius: var(--r-md);
  background: var(--acc-soft, rgba(108,134,255,.12)); color: var(--fg-dim);
}
.client-lens b { color: var(--fg); }
.client-lens a { color: var(--acc-hi); text-decoration: none; white-space: nowrap; font-weight: 550; }
/* «Скинути фокус» — POST-форма (CSRF), кнопка стилізована під лінк */
.client-lens form { display: inline; margin: 0; }
.client-lens form button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--acc-hi); white-space: nowrap; font-weight: 550;
}
@media (max-width: 700px) {
  .tenant-switch { margin-left: 0; }
  .tenant-switch-lab { display: none; }
}

/* ============================================================
   Адаптив (UX-ревʼю): середні ширини + мобільний пакет.
   В кінці файлу СВІДОМО — перекриває преміум-переозначення вище
   (media-query не піднімає специфічність, перемагає порядок).
   ============================================================ */
@media (max-width: 1160px) {
  /* перемикач клієнта окремим рядком — не вклинюється в заголовок сторінки */
  .topbar { flex-wrap: wrap; }
  .tenant-switch { order: 4; flex: 1 1 100%; margin-left: 0; }
  /* 3-колонкові ряди дашборда: проміжний крок 2 колонки (до 860px -> 1) */
  .dash-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-2 { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .dash-2 > .card, .dash-3 > .card { min-width: 0; }
}
@media (max-width: 860px) {
  .dash-3, .dash-2 { grid-template-columns: 1fr; }
  /* KPI: 2 компактні колонки замість колони повноекранних плиток */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .kpi-card .value { font-size: 26px; }
  /* дат-фільтр: переноситься, кнопку «Застосувати» не ріже */
  .dash-range { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .range-custom { flex-wrap: wrap; }
  /* мобільна нав-стрічка: правий край підказує, що скролиться */
  .sidebar {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  /* каталог: колонки тримають природну ширину — чипи не ріжуться навпіл,
     повний вміст доступний горизонтальним скролом контейнера */
  .catalog-table th, .catalog-table td { white-space: nowrap; }
  .catalog-table th.col-name, .catalog-table td.col-name {
    white-space: normal; min-width: 190px;
  }
}

/* ==== U4: клікабельні рядки через stretched-link (клавіатура/middle-click) ==== */
.catalog-table tbody tr, .cl-tbl tr, .recent-tbl tr { position: relative; }
.row-link { color: inherit; text-decoration: none; font-weight: 600; }
.row-link::after,
.catalog-table td.col-name > a::after { content: ""; position: absolute; inset: 0; }
.cl-tbl tr:hover td { background: var(--neutral-soft); }

/* ==== U6: підписи контролів у save-барі ==== */
.sb-field { display: inline-flex; align-items: center; gap: 6px; }
.sb-lab {
  font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

/* ==== U10: видимий фокус для клавіатурної навігації ==== */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible,
.row-link:focus-visible::after, .catalog-table td.col-name > a:focus-visible::after {
  outline: 2px solid var(--acc-hi); outline-offset: 2px; border-radius: 6px;
}

/* ==== U11: складане інтро Kill Chain ==== */
.kc-intro-fold { margin-bottom: var(--sp-4); }
.kc-intro-fold > summary {
  cursor: pointer; color: var(--muted); font-size: 13px; user-select: none;
}
.kc-intro-fold > summary:hover { color: var(--fg); }
.kc-intro-fold[open] > summary { margin-bottom: 8px; }

/* ==== 2-й прохід UX: дрібні дефекти ==== */
/* /log-sources/: довгі назви правил не вилазять зі свого контейнера під кнопку */
.chip-row-items .pill {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* /coverage/: не ламати назви тактик посеред слова (RECONNAISSA-NCE) */
.matrix-col { min-width: 96px; }
.mh-name { overflow-wrap: break-word; }
/* нативні контроли (date-пікер у формах, скролбари) — темні на темній темі */
:root { color-scheme: dark; }