/* =====================================================================
   NMOS Router MVP — design system
   Тёмная broadcast-тема. Без зависимостей. Один файл.
   Подробное описание токенов — в docs/06-design-system.md
   ===================================================================== */

:root {
  /* Surfaces — иерархия плоскостей в тёмной теме */
  --bg-0: #0b0e13;          /* самый глубокий фон */
  --bg-1: #11151c;          /* основной фон рабочей области */
  --bg-2: #161b24;          /* поверхности (карточки, header) */
  --bg-3: #1d242f;          /* hover-состояния, выделенные блоки */
  --bg-4: #2a3340;          /* активные элементы, чипы */

  /* Borders */
  --bd-1: #232a36;          /* основная граница */
  --bd-2: #2f384a;          /* акцентная граница */
  --bd-3: #3d495e;          /* hover на границах */

  /* Text */
  --tx-1: #e6ebf2;          /* основной текст */
  --tx-2: #aab4c4;          /* вторичный */
  --tx-3: #6b7689;          /* третичный, подписи */
  --tx-4: #4a5567;          /* disabled */

  /* Accent — primary action */
  --acc-1: #4f8cff;         /* primary */
  --acc-2: #3b76e8;         /* hover */
  --acc-3: #2a5fc7;         /* pressed */
  --acc-4: rgba(79,140,255,.14); /* tinted bg */
  --acc-5: rgba(79,140,255,.32); /* border-tinted */

  /* Status */
  --ok-1:    #22c55e;
  --ok-bg:   rgba(34,197,94,.12);
  --warn-1:  #f59e0b;
  --warn-bg: rgba(245,158,11,.12);
  --err-1:   #ef4444;
  --err-bg:  rgba(239,68,68,.12);
  --info-1:  #38bdf8;
  --info-bg: rgba(56,189,248,.12);
  --lock-1:  #a78bfa;
  --lock-bg: rgba(167,139,250,.12);
  --sched-1: #06b6d4;
  --sched-bg:rgba(6,182,212,.12);

  /* Signal types */
  --sig-v: #4f8cff;          /* видео */
  --sig-a: #22c55e;          /* аудио */
  --sig-anc:#f59e0b;         /* anc */

  /* Typography */
  --ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px;

  /* Radii */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px;

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Layout */
  --topbar-h: 56px;
  --sidebar-w: 220px;
  --sidebar-w-collapsed: 56px;
  --side-panel-w: 360px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 12px rgba(0,0,0,.4);
  --sh-3: 0 12px 32px rgba(0,0,0,.55);

  /* Transitions */
  --tr: 120ms cubic-bezier(.2,.8,.2,1);
}

/* =====================================================================
   Reset
   ===================================================================== */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-1);
  color: var(--tx-1);
  font-family: var(--ff);
  font-size: var(--fs-14);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea {
  font: inherit; color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bd-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--bd-3); }

/* =====================================================================
   App layout
   ===================================================================== */
.app {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
}

.app-body {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 0;
}

.app-body.with-side-panel {
  grid-template-columns: var(--sidebar-w) 1fr var(--side-panel-w);
}

/* =====================================================================
   Topbar
   ===================================================================== */
.topbar {
  display: flex; align-items: center;
  background: var(--bg-2);
  border-bottom: 1px solid var(--bd-1);
  padding: 0 var(--sp-4);
  gap: var(--sp-6);
  z-index: 10;
}
.topbar__brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-15); font-weight: 600;
  letter-spacing: -0.01em;
}
.topbar__brand .logo {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--acc-1), #8b5cf6);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px;
}
.topbar__brand .logo-text { color: var(--tx-1); }
.topbar__brand .logo-sub { color: var(--tx-3); font-weight: 400; font-size: var(--fs-12); }

.topbar__nav {
  display: flex; gap: var(--sp-1);
  margin-left: var(--sp-4);
}
.topbar__nav a {
  padding: 6px 12px;
  border-radius: var(--r-md);
  color: var(--tx-2);
  font-weight: 500;
  font-size: var(--fs-13);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--tr), color var(--tr);
}
.topbar__nav a:hover { background: var(--bg-3); color: var(--tx-1); }
.topbar__nav a.is-active {
  background: var(--acc-4); color: var(--tx-1);
  box-shadow: inset 0 0 0 1px var(--acc-5);
}
.topbar__nav a.is-disabled {
  color: var(--tx-4); pointer-events: none;
}
.badge-soon {
  font-size: 9px; padding: 1px 6px;
  border-radius: 999px; background: var(--bg-4); color: var(--tx-3);
  text-transform: uppercase; letter-spacing: .06em;
}

.topbar__spacer { flex: 1; }

.topbar__status {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-12); color: var(--tx-2);
}
.topbar__status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-1); box-shadow: 0 0 8px rgba(34,197,94,.7); }
.topbar__status .issues { color: var(--warn-1); }

.topbar__user {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 4px 10px 4px 4px;
  border-radius: var(--r-lg);
  background: var(--bg-3);
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff; font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}
.topbar__user .meta { display: flex; flex-direction: column; line-height: 1.1; }
.topbar__user .name { font-size: var(--fs-12); }
.topbar__user .role { font-size: 10px; color: var(--tx-3); }

.iconbtn {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--tx-2);
  transition: background var(--tr), color var(--tr);
}
.iconbtn:hover { background: var(--bg-3); color: var(--tx-1); }

/* =====================================================================
   Sidebar
   ===================================================================== */
.sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--bd-1);
  padding: var(--sp-3) var(--sp-2);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sidebar__section {
  margin-bottom: var(--sp-5);
}
.sidebar__title {
  text-transform: uppercase;
  font-size: 10px; letter-spacing: .08em;
  color: var(--tx-3);
  padding: 0 var(--sp-2);
  margin-bottom: var(--sp-2);
}
.sidebar__item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-2);
  border-radius: var(--r-md);
  color: var(--tx-2);
  font-size: var(--fs-13);
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.sidebar__item:hover { background: var(--bg-3); color: var(--tx-1); }
.sidebar__item.is-active { background: var(--acc-4); color: var(--tx-1); }
.sidebar__item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tx-4); flex-shrink: 0; }
.sidebar__item .count { margin-left: auto; color: var(--tx-3); font-size: var(--fs-12); }

/* =====================================================================
   Main / content
   ===================================================================== */
.main {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--bg-1);
}
.toolbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-2);
  border-bottom: 1px solid var(--bd-1);
  flex-wrap: wrap;
}
.toolbar__group { display: flex; align-items: center; gap: var(--sp-2); }
.toolbar__spacer { flex: 1; }

.workspace {
  flex: 1; min-height: 0;
  overflow: auto;
  padding: var(--sp-4);
}

.actionbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-2);
  border-top: 1px solid var(--bd-1);
}
.actionbar__status { color: var(--tx-2); font-size: var(--fs-13); display: flex; align-items: center; gap: var(--sp-2); }
.actionbar__spacer { flex: 1; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-md);
  background: var(--bg-3);
  color: var(--tx-1);
  font-size: var(--fs-13); font-weight: 500;
  border: 1px solid var(--bd-2);
  transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.btn:hover { background: var(--bg-4); border-color: var(--bd-3); }
.btn:disabled,
.btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

.btn--primary { background: var(--acc-1); border-color: var(--acc-1); color: #fff; }
.btn--primary:hover { background: var(--acc-2); border-color: var(--acc-2); }

.btn--danger  { background: var(--err-1); border-color: var(--err-1); color: #fff; }
.btn--danger:hover  { background: #dc2626; border-color: #dc2626; }

.btn--ghost   { background: transparent; border-color: transparent; color: var(--tx-2); }
.btn--ghost:hover { background: var(--bg-3); color: var(--tx-1); }

.btn--sm { padding: 4px 8px; font-size: var(--fs-12); }
.btn--lg { padding: 9px 16px; font-size: var(--fs-14); }

.btn .ico { width: 14px; height: 14px; }

/* =====================================================================
   Inputs
   ===================================================================== */
.input, .select {
  background: var(--bg-1);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-md);
  padding: 6px 10px;
  font-size: var(--fs-13);
  color: var(--tx-1);
  outline: none;
  min-width: 140px;
  transition: border-color var(--tr), background var(--tr);
}
.input:focus, .select:focus { border-color: var(--acc-1); background: var(--bg-2); }
.input::placeholder { color: var(--tx-3); }

.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: var(--fs-12); color: var(--tx-3); }

/* =====================================================================
   Chips / segmented controls
   ===================================================================== */
.chips { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg-1); border-radius: var(--r-md); border: 1px solid var(--bd-2); }
.chip {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  color: var(--tx-2);
  font-size: var(--fs-12);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--tr), color var(--tr);
}
.chip:hover { color: var(--tx-1); background: var(--bg-3); }
.chip.is-active { background: var(--acc-4); color: var(--tx-1); box-shadow: inset 0 0 0 1px var(--acc-5); }

.chip--sig-v { box-shadow: inset 0 0 0 1px rgba(79,140,255,.4); color: var(--sig-v); }
.chip--sig-a { box-shadow: inset 0 0 0 1px rgba(34,197,94,.4); color: var(--sig-a); }
.chip--sig-anc{ box-shadow: inset 0 0 0 1px rgba(245,158,11,.4); color: var(--sig-anc); }

.tag {
  display: inline-flex; align-items: center;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--tx-2);
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag--ok    { background: var(--ok-bg);    color: var(--ok-1); }
.tag--warn  { background: var(--warn-bg);  color: var(--warn-1); }
.tag--err   { background: var(--err-bg);   color: var(--err-1); }
.tag--info  { background: var(--info-bg);  color: var(--info-1); }
.tag--lock  { background: var(--lock-bg);  color: var(--lock-1); }
.tag--sched { background: var(--sched-bg); color: var(--sched-1); }

/* =====================================================================
   Status indicators
   ===================================================================== */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tx-4);
}
.status-dot--online   { background: var(--ok-1);   box-shadow: 0 0 6px rgba(34,197,94,.7); }
.status-dot--offline  { background: var(--err-1); }
.status-dot--warning  { background: var(--warn-1); box-shadow: 0 0 6px rgba(245,158,11,.7); }
.status-dot--scheduled{ background: var(--sched-1); box-shadow: 0 0 6px rgba(6,182,212,.7); }

/* =====================================================================
   Routing Matrix
   ===================================================================== */
.matrix-wrap {
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-lg);
  overflow: auto;
  max-height: calc(100vh - var(--topbar-h) - 200px);
  position: relative;
}
.matrix {
  display: grid;
  font-size: var(--fs-12);
  user-select: none;
}
.matrix .cell {
  border-right: 1px solid var(--bd-1);
  border-bottom: 1px solid var(--bd-1);
  background: var(--bg-2);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  transition: background var(--tr);
  cursor: pointer;
  position: relative;
}
.matrix .cell:hover { background: var(--bg-3); }
.matrix .cell.is-selected { background: var(--acc-4); box-shadow: inset 0 0 0 1px var(--acc-1); }
.matrix .cell.is-disabled { background: var(--bg-1); cursor: not-allowed; }
.matrix .cell .marker {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ok-1);
  box-shadow: 0 0 8px rgba(34,197,94,.5);
  position: relative;
}
.matrix .cell .marker--locked { background: var(--lock-1); box-shadow: 0 0 8px rgba(167,139,250,.5); }
.matrix .cell .marker--locked::after {
  content: '🔒'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 9px;
}
.matrix .cell .marker--scheduled { background: var(--sched-1); }
.matrix .cell .marker--scheduled::after {
  content: '⏱'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 9px; color: var(--bg-0);
}
.matrix .cell .marker--warning  { background: var(--warn-1); }
.matrix .cell .marker--warning::after  {
  content: '!'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 10px; color: var(--bg-0); font-weight: 700;
}
.matrix .cell .marker--incompat { background: var(--err-1); width: 10px; height: 10px; box-shadow: none; }

.matrix .head-col, .matrix .head-row {
  background: var(--bg-3);
  font-weight: 500;
  color: var(--tx-2);
  border-right: 1px solid var(--bd-1);
  border-bottom: 1px solid var(--bd-1);
  padding: 0 var(--sp-2);
  display: flex; align-items: center;
  white-space: nowrap;
  position: sticky;
  z-index: 2;
}
.matrix .head-col { /* верхняя строка с ресиверами */
  top: 0;
  height: 40px;
}
.matrix .head-row { /* левая колонка с сендерами */
  left: 0;
  height: 40px;
  min-width: 200px;
  gap: var(--sp-2);
}
.matrix .head-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.matrix .head-corner {
  background: var(--bg-3);
  position: sticky; top: 0; left: 0;
  z-index: 3;
  border-right: 1px solid var(--bd-1);
  border-bottom: 1px solid var(--bd-2);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3);
  font-weight: 600; color: var(--tx-3);
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
}

.matrix .head-col .label { writing-mode: vertical-rl; transform: rotate(180deg); padding: var(--sp-2) 0; font-size: 11px; }

.sig-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: var(--r-sm);
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.sig-pill--V { background: rgba(79,140,255,.18); color: var(--sig-v); }
.sig-pill--A { background: rgba(34,197,94,.18); color: var(--sig-a); }
.sig-pill--ANC{background: rgba(245,158,11,.18); color: var(--sig-anc); }

/* =====================================================================
   Side panel (compatibility checker, device details, event details)
   ===================================================================== */
.side-panel {
  background: var(--bg-2);
  border-left: 1px solid var(--bd-1);
  display: flex; flex-direction: column;
  min-height: 0;
}
.side-panel__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bd-1);
  font-size: var(--fs-13); font-weight: 600;
}
.side-panel__head .iconbtn { margin-left: auto; }
.side-panel__body {
  flex: 1; overflow-y: auto;
  padding: var(--sp-4);
}
.side-panel__foot {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--bd-1);
  display: flex; gap: var(--sp-2);
}

.compat-card {
  background: var(--bg-3);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.compat-card__head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tx-3); margin-bottom: 6px;
}
.compat-card__title {
  font-size: var(--fs-14); font-weight: 600; margin-bottom: var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-2);
}
.compat-card__props { display: grid; grid-template-columns: 1fr 2fr; gap: 4px var(--sp-3); font-size: var(--fs-12); }
.compat-card__props .k { color: var(--tx-3); }
.compat-card__props .v { color: var(--tx-1); font-family: var(--ff-mono); font-size: 11px; }

.compat-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.compat-checks li {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  font-size: var(--fs-13);
}
.compat-checks .icn { width: 18px; text-align: center; font-weight: 700; }
.compat-checks .ok    .icn { color: var(--ok-1); }
.compat-checks .warn  .icn { color: var(--warn-1); }
.compat-checks .err   .icn { color: var(--err-1); }
.compat-checks li.warn { background: var(--warn-bg); }
.compat-checks li.err  { background: var(--err-bg); }

/* =====================================================================
   Tree (Devices)
   ===================================================================== */
.tree { font-size: var(--fs-13); }
.tree-node { display: flex; flex-direction: column; }
.tree-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--tr);
}
.tree-row:hover { background: var(--bg-3); }
.tree-row.is-active { background: var(--acc-4); }
.tree-row .caret {
  width: 14px; color: var(--tx-3);
  display: inline-block;
  transition: transform var(--tr);
  font-size: 10px;
}
.tree-row.is-open > .caret { transform: rotate(90deg); }
.tree-row .name { flex: 1; }
.tree-row .meta { color: var(--tx-3); font-size: 11px; }
.tree-children { padding-left: var(--sp-5); border-left: 1px dashed var(--bd-1); margin-left: var(--sp-3); }

/* =====================================================================
   Cards (Salvo)
   ===================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.card {
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 0;
  overflow: hidden;
  transition: border-color var(--tr), background var(--tr);
}
.card:hover { border-color: var(--bd-3); }
.card__title { font-size: var(--fs-15); font-weight: 600; min-width: 0; }
.card__desc  { font-size: var(--fs-12); color: var(--tx-2); min-height: 32px; }
.card__tags  {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  min-width: 0;
}
.card__meta  { font-size: 11px; color: var(--tx-3); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.card__foot  { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

/* =====================================================================
   Tables (Event Log, Salvo editor)
   ===================================================================== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.table thead th {
  text-align: left;
  padding: 10px var(--sp-3);
  background: var(--bg-3);
  color: var(--tx-3);
  font-weight: 500;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--bd-1);
  position: sticky; top: 0;
}
.table tbody td {
  padding: 8px var(--sp-3);
  border-bottom: 1px solid var(--bd-1);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--tr); cursor: pointer; }
.table tbody tr:hover { background: var(--bg-3); }
.table tbody tr.is-active { background: var(--acc-4); }
.table .mono { font-family: var(--ff-mono); font-size: 11px; color: var(--tx-2); }

/* =====================================================================
   Modal
   ===================================================================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: grid; place-items: center;
  z-index: 100;
  animation: fade-in var(--tr);
}
.modal {
  background: var(--bg-2);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  min-width: 480px; max-width: 90vw; max-height: 86vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal__head { padding: var(--sp-4); border-bottom: 1px solid var(--bd-1); display: flex; align-items: center; gap: var(--sp-3); }
.modal__title { font-size: var(--fs-16); font-weight: 600; flex: 1; }
.modal__body { padding: var(--sp-4); overflow-y: auto; }
.modal__foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--bd-1); display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* =====================================================================
   Toast notifications
   ===================================================================== */
.toasts {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: 200;
}
.toast {
  background: var(--bg-2);
  border: 1px solid var(--bd-2);
  border-left: 3px solid var(--acc-1);
  border-radius: var(--r-md);
  padding: 10px var(--sp-3);
  min-width: 280px; max-width: 360px;
  box-shadow: var(--sh-2);
  font-size: var(--fs-13);
  animation: slide-in var(--tr);
}
.toast--ok    { border-left-color: var(--ok-1); }
.toast--warn  { border-left-color: var(--warn-1); }
.toast--err   { border-left-color: var(--err-1); }

/* =====================================================================
   Empty / loading states
   ===================================================================== */
.empty {
  display: grid; place-items: center;
  padding: var(--sp-10);
  text-align: center;
  color: var(--tx-3);
}
.empty .icon { font-size: 36px; margin-bottom: var(--sp-3); opacity: .4; }
.empty .title { color: var(--tx-1); font-size: var(--fs-16); font-weight: 600; margin-bottom: var(--sp-2); }
.empty .desc  { max-width: 360px; margin-bottom: var(--sp-4); }

/* =====================================================================
   Misc utils
   ===================================================================== */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.flex-1 { flex: 1; }
.text-mono { font-family: var(--ff-mono); }
.text-2 { color: var(--tx-2); }
.text-3 { color: var(--tx-3); }
.text-sm { font-size: var(--fs-12); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.hidden { display: none !important; }

/* Animations */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Pulse для live-индикатора */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--err-1);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  50%      { opacity: .6; box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}