/* Дизайн-система CRM · components/bundle.css
   Шрифты, переменные токенов (зеркало tokens.json), текстовые классы, компоненты и движение.
   Источник значений — tokens.json: меняя токен там, поменяйте его и в :root ниже. */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@1,900&family=JetBrains+Mono:wght@400;500&family=Onest:wght@400..800&display=swap");

:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --line: #e1e6ef;
  --dots: #d5dbe6;
  --control-border: #8690a3;
  --ink: #0b1324;
  --ink-2: #475569;
  --ink-3: #5e6b80;
  --primary: #2d5bf0;
  --primary-hover: #2149d8;
  --primary-soft: #e8eeff;
  --on-primary: #ffffff;
  --on-primary-muted: #eaf0ff;
  --positive-soft: #ddf6e9;
  --positive-ink: #0b6b45;
  --warn: #ea6a12;
  --warn-soft: #ffeedf;
  --warn-ink: #b4490a;
  --danger-soft: #fde8ec;
  --danger-ink: #b4233f;
  --violet: #7a4cf0;          /* третья линия ИИ-рекрутера — «Полный цикл» (рядом с синей Натали и оранжевой Даной) */
  --violet-soft: #efe9ff;
  --violet-ink: #5a2fc4;
  --focus: #2d5bf0;

  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(11, 19, 36, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 19, 36, 0.04), 0 6px 16px rgba(11, 19, 36, 0.06);
  --shadow-md: 0 2px 6px rgba(11, 19, 36, 0.05), 0 18px 36px rgba(11, 19, 36, 0.10);
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #2d5bf0;

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 420ms;
  --motion-stagger: 60ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* ---------- Основа ---------- */
.ds-root {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ds-root *, .ds-root *::before, .ds-root *::after { box-sizing: border-box; }
.ds-root a { color: var(--primary); }
.ds-root a:hover { color: var(--primary-hover); }
.ds-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dotgrid { background-image: radial-gradient(circle at 1px 1px, var(--dots) 1px, transparent 1.5px); background-size: 24px 24px; }

/* ---------- Текст ---------- */
.text-display { margin: 0; font: 800 48px/52px var(--font-sans); letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.text-h1 { margin: 0; font: 800 32px/38px var(--font-sans); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.text-h2 { margin: 0; font: 700 20px/26px var(--font-sans); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.text-h3 { margin: 0; font: 700 16px/22px var(--font-sans); color: var(--ink); }
.text-body { margin: 0; font: 400 15px/22px var(--font-sans); }
.text-label { margin: 0; font: 500 14px/20px var(--font-sans); }
.text-caption { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
.text-eyebrow { margin: 0; font: 700 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.text-stat { margin: 0; font: 800 32px/36px var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.text-mono { margin: 0; font: 500 13px/18px var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.text-strong { font-weight: 700; }
.nowrap { white-space: nowrap; }

/* ---------- Каркас: AppShell ---------- */
.app { min-height: 100vh; background-color: var(--bg); background-image: radial-gradient(circle at 1px 1px, var(--dots) 1px, transparent 1.5px); background-size: 24px 24px; }
.app__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) var(--space-10) var(--space-12); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.page-head__titles { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.page-head__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; max-width: 100%; }
.crumbs { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font: 500 13px/18px var(--font-sans); color: var(--ink-2); }
.ds-root .crumbs a { color: var(--ink-2); text-decoration: none; }
.ds-root .crumbs a:hover { color: var(--primary); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; } .span-12 { grid-column: span 12; }
.grid-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.sticky { position: sticky; top: 104px; }
@media (max-width: 1180px) {
  .bento > .span-3 { grid-column: span 6; }
  .bento > .span-4, .bento > .span-5, .bento > .span-6, .bento > .span-7, .bento > .span-8, .bento > .span-9 { grid-column: span 12; }
  .grid-split { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
}
@media (max-width: 860px) {
  .app__main { padding: var(--space-5) var(--space-4) var(--space-10); }
}
@media (max-width: 640px) {
  .bento > * { grid-column: span 12 !important; }
  .bento > .stat.span-3 { grid-column: span 6 !important; } /* плитки показателей на телефоне — по две в ряд */
  .bento > .stat:not(.stat--hero) { padding: var(--space-4); } /* на телефоне плитки компактнее */
}

/* ---------- TopNav: плавающая верхняя панель ---------- */
.topbar {
  position: sticky; top: var(--space-4); z-index: 20;
  display: flex; align-items: center; gap: var(--space-4);
  margin: var(--space-4) var(--space-6) 0; min-height: 68px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: var(--space-3); flex: none; padding-right: var(--space-2); text-decoration: none; }
/* Бренд ad1 team: надпись «ad1 team» жирным наклонным Inter 900, единица — своя острая, синяя (форма из референса, наклон под шрифт) */
.brand__word { display: inline-flex; align-items: baseline; font: italic 900 28px/1 "Inter", var(--font-sans); letter-spacing: -0.05em; color: var(--ink); white-space: nowrap; }
.brand__one { display: block; height: 0.727em; width: auto; margin-left: 0.035em; transform: skewX(-9deg); transform-origin: bottom left; fill: var(--primary); overflow: visible; }
.brand__team { margin-left: 0.26em; }
.brand__sub { display: block; font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.topnav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.topnav__item {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  font: 600 14px/20px var(--font-sans); color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.topnav__item svg { width: 18px; height: 18px; flex: none; }
.ds-root a.topnav__item { color: var(--ink-2); }
.ds-root a.topnav__item:hover { background: var(--surface-2); color: var(--ink); }
.ds-root .topnav__item--active, .ds-root a.topnav__item--active, .ds-root a.topnav__item--active:hover { background: var(--primary-soft); color: var(--primary); }
.topnav__item--soon { color: var(--ink-3); font-weight: 500; cursor: default; }
.topnav__sep { width: 1px; height: 24px; flex: none; margin: 0 var(--space-2); background: var(--line); }
.topnav__tag { padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--surface-2); font: 600 11px/16px var(--font-sans); color: var(--ink-3); }
.topbar__tools { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.search {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px;
  padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--ink-2); font: 500 14px/20px var(--font-sans); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.search:hover { background: var(--surface); border-color: var(--control-border); }
.ds-root a.search, .ds-root a.search:hover { color: var(--ink-2); text-decoration: none; } /* поиск — ссылка на палитру ⌘K: выглядит как поле, не как ссылка */
.search svg { width: 18px; height: 18px; flex: none; }
.search__text { display: none; flex: 1; text-align: left; }
@media (min-width: 1600px) { .search { min-width: 240px; } .search__text { display: inline; } }
.kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: 0 1px 0 var(--line);
  font: 500 12px/1 var(--font-mono); color: var(--ink-2);
}
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--on-primary); font: 700 14px/1 var(--font-sans); }
.avatar--sm { width: 36px; height: 36px; font-size: 13px; }
.avatar--soft { background: var(--primary-soft); color: var(--primary); }
.ds-root a.avatar { color: var(--on-primary); text-decoration: none; transition: box-shadow var(--motion-fast) var(--ease-standard); }
.ds-root a.avatar:hover { color: var(--on-primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ds-root .avatar--active, .ds-root a.avatar--active:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
/* Шапка на ширине: ниже 1180 прячется «Скоро», ниже 1024 — слово team у бренда */
@media (max-width: 1179px) { .topbar__tools .topnav__item--soon { display: none; } }
@media (max-width: 1023px) { .brand__team { display: none; } }

/* ---------- NavMenu: выпадающие группы шапки ---------- */
button.topnav__item { border: 0; background: transparent; cursor: pointer; }
.navgroup { position: relative; }
.navgroup::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.navgroup__chev { width: 14px; height: 14px; margin-left: -2px; transition: transform var(--motion-fast) var(--ease-standard); }
.topnav__item .navgroup__chev { width: 14px; height: 14px; }
.navgroup:hover > .navgroup__trigger, .navgroup:focus-within > .navgroup__trigger { background: var(--surface-2); color: var(--ink); }
.ds-root .navgroup:hover > .topnav__item--active, .ds-root .navgroup:focus-within > .topnav__item--active { background: var(--primary-soft); color: var(--primary); }
.navgroup:hover .navgroup__chev, .navgroup:focus-within .navgroup__chev, .navgroup--open .navgroup__chev { transform: rotate(180deg); }
.navmenu {
  display: none; position: absolute; z-index: 40; top: calc(100% + 12px); left: -8px; width: 372px;
  padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md);
}
.navgroup:hover .navmenu, .navgroup:focus-within .navmenu, .navgroup--open .navmenu { display: grid; gap: 2px; opacity: 1; transition-delay: 0s; animation: ds-menu-in 240ms var(--ease-emphasized) both; }
/* Задержка закрытия (hover intent): курсор, ушедший с кнопки наискосок к пункту меню, на миг выходит из наведения.
   Меню не исчезает сразу: 180 мс держится, потом за 120 мс гаснет; display:none — через 300 мс (allow-discrete),
   поэтому возврат курсора не перезапускает анимацию. Наведение на соседнее меню закрывает это сразу. */
.navmenu { opacity: 0; transition: opacity 120ms var(--ease-exit) 180ms, display 0s linear 300ms allow-discrete; }
.topbar:has(.navgroup:hover) .navgroup:not(:hover):not(:focus-within):not(.navgroup--open) .navmenu { transition: none; }
.navmenu { transform-origin: 32px 0; }
.navmenu::before {
  content: ""; position: absolute; top: -7px; left: 30px; width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 3px 0 0 0;
}
.navmenu > .navmenu__item, .navmobile__sheet > .navmenu__item, .navmobile__sheet > .navmobile__group {
  animation: ds-menu-item 300ms var(--ease-emphasized) both; animation-delay: calc(var(--i, 0) * 40ms + 60ms);
}
.navmenu__item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); align-items: center;
  padding: var(--space-2) 10px; border-radius: var(--radius-md); text-decoration: none; color: var(--ink);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.ds-root a.navmenu__item, .ds-root a.navmenu__item:hover { color: var(--ink); }
.ds-root a.navmenu__item:hover { background: var(--surface-2); }
.navmenu__icon {
  width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-2); transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.navmenu__icon svg { width: 20px; height: 20px; }
.ds-root a.navmenu__item:hover .navmenu__icon { background: var(--primary-soft); color: var(--primary); transform: scale(1.06); }
.navmenu__icon { transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-base) var(--ease-emphasized); }
.navmenu__icon svg { transition: transform var(--motion-base) var(--ease-emphasized); }
.ds-root a.navmenu__item:hover .navmenu__icon svg { transform: translateY(-1px); }
.navmenu__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.navmenu__title { display: flex; align-items: center; gap: var(--space-2); font: 600 14px/20px var(--font-sans); color: var(--ink); }
.navmenu__sub { font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
.ds-root .navmenu__item--current, .ds-root a.navmenu__item--current:hover { background: var(--primary-soft); }
.ds-root .navmenu__item--current .navmenu__icon, .ds-root a.navmenu__item--current:hover .navmenu__icon { background: var(--primary); color: var(--on-primary); }
.navmenu__item--current .navmenu__title { color: var(--primary); }
.navmenu__item--soon { cursor: default; }
.navmenu__item--soon .navmenu__title, .navmenu__item--soon .navmenu__sub, .navmenu__item--soon .navmenu__icon { color: var(--ink-3); }
.navmenu__sep { height: 1px; margin: var(--space-1) 10px; background: var(--line); }
/* Меню аккаунта: аватар — кнопка; меню прижато к правому краю верхней панели (на телефоне не уходит за экран) */
.navgroup--account { position: static; }
.navgroup--account::after { left: auto; right: 0; width: 112px; top: 100%; height: 16px; }
button.avatar { position: relative; border: 0; padding: 0; cursor: pointer; }
.navgroup--account:hover > .avatar, .navgroup--account:focus-within > .avatar, .navgroup--account.navgroup--open > .avatar { box-shadow: 0 0 0 3px var(--primary-soft); }
.navgroup--account > .avatar--active, .navgroup--account:hover > .avatar--active, .navgroup--account:focus-within > .avatar--active, .navgroup--account.navgroup--open > .avatar--active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
button.avatar:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.avatar__dot { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--surface); }
.navmenu--account { left: auto; right: var(--space-2); top: calc(100% + 2px); width: min(340px, calc(100vw - 32px)); transform-origin: calc(100% - 20px) 0; }
/* Мостик над меню аккаунта: меню привязано к панели и стоит на 15 px ниже аватара — курсор выпадал из наведения,
   меню закрывалось и открывалось заново (мерцание). Мостик — часть меню: есть только пока меню открыто,
   по всей ширине меню — ловит и путь наискосок к «Профилю». */
.navmenu--account::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; }
.navmenu--account::before { left: auto; right: 14px; }
.navmenu__who { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-2) 10px; }
.navmenu__who .avatar { width: 40px; height: 40px; }
.navmenu__title .badge { padding: 0 var(--space-2); }
.navmenu__item--quiet .navmenu__icon { background: transparent; }
.navmenu__item--quiet .navmenu__title { font-weight: 500; color: var(--ink-2); }
@media (max-width: 860px) {
  .navmenu--account { transform-origin: calc(100% - 76px) 0; }
  .navmenu--account::before { right: 70px; }
}
/* Телефон: разделы — кнопкой меню, список группами */
.navmobile { display: none; position: relative; }
.navmobile__btn {
  list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); cursor: pointer;
}
.navmobile__btn::-webkit-details-marker { display: none; }
.navmobile__btn svg { width: 20px; height: 20px; }
.navmobile[open] .navmobile__sheet { animation: ds-menu-in 260ms var(--ease-emphasized) both; transform-origin: calc(100% - 24px) 0; }
.navmobile[open] .navmobile__btn { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary); }
.navmobile__sheet {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 40; width: min(340px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto;
  display: grid; gap: 2px; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md);
}
.navmobile__group { padding: var(--space-3) 10px var(--space-1); font: 700 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 860px) {
  .topnav { display: none; }
  .navmobile { display: block; }
  .topbar__tools { margin-left: auto; }
}

@media (max-width: 860px) {
  .search .kbd, .topbar__tools .topnav__item--soon { display: none; }
  .topbar { margin: var(--space-2) var(--space-3) 0; top: var(--space-2); padding-left: var(--space-3); gap: var(--space-2); }
  .brand__team, .brand__sub { display: none; }
}

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md);
  font: 600 15px/20px var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ds-root .btn--primary, .btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px rgba(45, 91, 240, 0.24), 0 8px 20px rgba(45, 91, 240, 0.22); }
.ds-root .btn--primary:hover, .btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(45, 91, 240, 0.24), 0 12px 28px rgba(45, 91, 240, 0.30); }
.ds-root .btn--secondary, .btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-xs); }
.ds-root .btn--secondary:hover, .btn--secondary:hover { border-color: var(--control-border); color: var(--ink); }
.ds-root .btn--ghost, .btn--ghost { background: transparent; color: var(--ink-2); }
.ds-root .btn--ghost:hover, .btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--sm { min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: 14px; }
.btn--icon { width: 48px; padding: 0; }
.btn--sm.btn--icon { width: 40px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; box-shadow: none; }

/* ---------- Segmented ---------- */
.seg { display: inline-flex; gap: 2px; padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.seg__btn {
  min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-2); font: 600 14px/20px var(--font-sans); cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.seg__btn:hover { color: var(--ink); }
.seg__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.seg__count { margin-left: 6px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.seg__btn[aria-pressed="true"] .seg__count { color: var(--primary); }
.seg--scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg--scroll::-webkit-scrollbar { display: none; }
.seg--scroll .seg__btn { flex: none; }
.seg--fill { display: flex; }
.seg--fill .seg__btn { flex: 1 1 0; padding: 0 var(--space-2); white-space: nowrap; }
.seg__btn[disabled], .seg__btn[disabled]:hover { color: var(--ink-3); cursor: default; }
.seg__btn .topnav__tag { margin-left: 6px; }

/* ---------- Field ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.field__hint { font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
.field__error { font: 600 13px/18px var(--font-sans); color: var(--danger-ink); }
.field__hint--warn { font-weight: 600; color: var(--warn-ink); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px var(--space-4);
  border: 1px solid var(--control-border); border-radius: var(--radius-md);
  background-color: var(--surface); color: var(--ink); font: 400 15px/22px var(--font-sans);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.input[readonly] { background-color: var(--surface-2); }
.input--mono { font: 500 13px/22px var(--font-mono); }
.textarea { min-height: 160px; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 23px) 50%, calc(100% - 18px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger-ink); }
.copyfield { display: flex; gap: var(--space-2); min-width: 0; }
.copyfield .input { flex: 1; min-width: 0; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.fields > .field--wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .fields { grid-template-columns: minmax(0, 1fr); } }
.inputwrap { position: relative; display: block; min-width: 0; }
.inputwrap > svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-2); pointer-events: none; }
.inputwrap > svg ~ .input { padding-left: 44px; } /* отступ под иконку — только если иконка есть */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Toolbar: фильтры над списком ---------- */
.toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); }
.toolbar__grow { flex: 1 1 240px; min-width: 0; }
.toolbar__fixed { flex: 0 1 200px; min-width: 160px; }
@media (max-width: 640px) { .toolbar__fixed { flex: 1 1 100%; } }

/* ---------- Switch ---------- */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 48px; font: 600 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
.switch input {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  width: 48px; height: 28px; border-radius: var(--radius-pill);
  border: 1px solid var(--control-border); background: var(--surface-2); cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);
}
.switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(11, 19, 36, 0.3);
  transition: transform var(--motion-base) var(--ease-emphasized);
}
.switch input:checked { background: var(--primary); border-color: var(--primary); }
.switch input:checked::after { transform: translateX(20px); }
.switch input:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px;
  border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2);
  font: 600 12px/16px var(--font-sans); white-space: nowrap;
}
.badge--primary { background: var(--primary-soft); color: var(--primary); }
.badge--positive { background: var(--positive-soft); color: var(--positive-ink); }
.badge--warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge--danger { background: var(--danger-soft); color: var(--danger-ink); }
.badge--solid { background: var(--primary); color: var(--on-primary); }
.badge--eyebrow { letter-spacing: 0.08em; text-transform: uppercase; }
.badge__dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.badge--live .badge__dot { animation: ds-pulse 2s var(--ease-standard) infinite; }

/* ---------- Card ---------- */
.card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-6) var(--space-6) 0; }
.card__titles { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 280px; min-width: 0; }
.card__body { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) var(--space-6) var(--space-6); min-width: 0; }
.card__body--flush { padding: var(--space-5) 0 0; gap: 0; }
/* Карточки одного ряда растягиваются до общей высоты, а нижний элемент (.push-end) встаёт на общую линию */
.card--fill { display: flex; flex-direction: column; }
.card--fill > .card__body { flex: 1; }
.push-end { margin-top: auto; }
.card--hover { transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Stat ---------- */
.stat {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat__label { font: 600 13px/18px var(--font-sans); color: var(--ink-2); }
.stat__value { font: 800 32px/36px var(--font-sans); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta--up { color: var(--positive-ink); }
.delta--down { color: var(--warn-ink); }
.stat--hero { justify-content: space-between; gap: var(--space-4); padding: var(--space-6); background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 4px rgba(45, 91, 240, 0.2), 0 16px 36px rgba(45, 91, 240, 0.28); overflow: hidden; }
.stat--hero .stat__label, .stat--hero .stat__meta { color: var(--on-primary-muted); }
.stat--hero .stat__value { color: var(--on-primary); font-size: 48px; line-height: 52px; letter-spacing: -0.04em; }
.stat--hero .delta--up, .stat--hero .delta--down { color: var(--on-primary); }

.splitbar { display: flex; height: 10px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.28); }
.splitbar__part { height: 100%; background: var(--on-primary); transform-origin: left center; animation: ds-grow-x 0.9s var(--ease-emphasized) 0.2s both; }
.splitbar-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font: 500 13px/18px var(--font-sans); color: var(--on-primary-muted); font-variant-numeric: tabular-nums; }
.splitbar-legend b { color: var(--on-primary); font-weight: 700; }
.splitbar-legend__key { display: inline-flex; align-items: center; gap: 6px; }
.splitbar-legend__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--on-primary); }
.splitbar-legend__dot--rest { background: rgba(255, 255, 255, 0.4); }

/* ---------- Chart: живой график с осями и подсказками ---------- */
.chart { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.chart__axis-title { font: 600 12px/16px var(--font-sans); color: var(--ink-2); }
.chart__axis-title--x { text-align: right; }
.chart__frame, .chart__x { display: grid; grid-template-columns: 56px minmax(0, 1fr); }
.chart__y { position: relative; height: var(--h, 260px); }
.chart__y > span { position: absolute; right: var(--space-3); transform: translateY(50%); font: 500 12px/16px var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart__plot {
  position: relative; height: var(--h, 260px); border-bottom: 1px solid var(--control-border);
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 100% calc(var(--h, 260px) / var(--ticks, 5));
}
.chart__cols { position: absolute; inset: 0; display: flex; }
.chart__col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: var(--space-1); }
.chart__col::before { content: ""; position: absolute; inset: 0 3px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: transparent; transition: background-color var(--motion-fast) var(--ease-standard); }
.chart__col:hover::before { background: rgba(45, 91, 240, 0.08); }
.chart__bar {
  position: relative; z-index: 1; width: clamp(8px, 22%, 36px); border-radius: 6px 6px 0 0; background: var(--primary);
  transform-origin: bottom center;
  animation: ds-grow-y var(--motion-slow) var(--ease-emphasized) both; animation-delay: calc(var(--i, 0) * var(--motion-stagger));
  transition: height var(--motion-slow) var(--ease-emphasized), opacity var(--motion-fast) var(--ease-standard);
}
.chart__bar--alt { background: var(--warn); }
.chart__bar--solo { width: clamp(12px, 40%, 56px); }
.chart__cols:hover .chart__col:not(:hover) .chart__bar { opacity: 0.38; }
.chart__tip {
  display: none; position: absolute; z-index: 5; top: var(--space-2); left: calc(100% - 4px); min-width: 232px;
  padding: var(--space-3) 14px; border-radius: var(--radius-md); background: var(--ink); color: var(--on-primary); box-shadow: var(--shadow-md);
  pointer-events: none;
}
.chart__col:hover .chart__tip { display: block; animation: ds-tip-in var(--motion-base) var(--ease-emphasized) both; }
.chart__col--end .chart__tip { left: auto; right: calc(100% - 4px); }
@media (max-width: 640px) {
  .chart__col { position: static; }
  .chart__col::before { display: none; }
  .chart__tip, .chart__col--end .chart__tip { left: var(--space-2); right: var(--space-2); min-width: 0; }
}
.chart__tip-title { display: block; margin-bottom: 6px; font: 700 13px/18px var(--font-sans); color: var(--on-primary); }
.chart__tip-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 1px 6px; margin: 0 -6px; border-radius: 6px; font: 500 13px/20px var(--font-sans); color: var(--on-primary-muted); font-variant-numeric: tabular-nums; }
.chart__tip-row b { color: var(--on-primary); font-weight: 700; }
.chart__tip-row--active { background: rgba(255, 255, 255, 0.10); }
.chart__tip-key { display: inline-flex; align-items: center; gap: 6px; }
.chart__tip-dot { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--primary); }
.chart__tip-dot--alt { background: var(--warn); }
.chart__tip-sep { height: 1px; margin: 6px 0; background: rgba(255, 255, 255, 0.14); }
.chart__xlabels { display: flex; }
.chart__xshort { display: none; }
@media (max-width: 640px) { .chart__xlong { display: none; } .chart__xshort { display: inline; } }
.chart__xlabels > span { flex: 1; min-width: 0; padding-top: var(--space-2); text-align: center; font: 500 12px/16px var(--font-sans); color: var(--ink-2); white-space: nowrap; }

/* ---------- Tip: всплывающее пояснение ---------- */
.tip-host { position: relative; }
.tip {
  display: none; position: absolute; z-index: 10; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; width: max-content; max-width: 240px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--ink); color: var(--on-primary);
  font: 500 12px/17px var(--font-sans); text-align: left; white-space: normal; box-shadow: var(--shadow-md);
  pointer-events: none;
}
.tip--below { top: calc(100% + 8px); bottom: auto; }
.tip-host:hover .tip, .tip-host:focus-within .tip { display: block; animation: ds-tip-in var(--motion-base) var(--ease-emphasized) both; }

/* ---------- Route: воронка как маршрут кандидата ---------- */
.route { position: relative; padding: var(--space-10) 0 var(--space-2); }
@media (max-width: 1079px) { .route { overflow-x: auto; } } /* 9 остановок × 104 px помещаются в карточку от 1066 px */
.route__track { position: relative; min-width: calc(var(--n, 6) * 104px); }
.route__track::before {
  content: ""; position: absolute; top: 21px; left: calc(50% / var(--n, 6)); right: calc(50% / var(--n, 6)); height: 2px;
  background-image: linear-gradient(90deg, var(--control-border) 50%, transparent 50%); background-size: 10px 2px;
}
.route__stops {
  position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.route__fill {
  position: absolute; top: 19px; left: calc(50% / var(--n, 6)); height: 6px; width: calc(var(--k, 1) * 100% / var(--n, 6));
  border-radius: var(--radius-pill); background: var(--primary); transform-origin: left center;
  animation: ds-grow-x 1.1s var(--ease-emphasized) both;
}
.route__stop {
  position: relative; display: grid; grid-template-rows: 44px 44px 30px 18px; justify-items: center; align-items: center;
  padding: 0 var(--space-2); text-align: center;
  animation: ds-rise var(--motion-slow) var(--ease-emphasized) both; animation-delay: calc(var(--i, 0) * 90ms);
}
.route__dot {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--on-primary); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--primary);
  font: 800 12px/1 var(--font-sans);
}
.route__dot svg { width: 16px; height: 16px; }
.route__stop--alert .route__dot { background: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.route__stop--alert .route__dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--warn); animation: ds-ping 1.8s var(--ease-standard) infinite; }
.route__stop--live .route__dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--primary); animation: ds-ping 1.8s var(--ease-standard) infinite; }
.route__stop--future .route__dot { background: var(--surface); color: var(--ink-3); box-shadow: 0 0 0 1px var(--control-border); }
.route__stop--goal .route__dot { width: 44px; height: 44px; }
.route__stop--goal .route__dot svg { width: 20px; height: 20px; }
.route__name { max-width: 100%; font: 600 13px/18px var(--font-sans); color: var(--ink); text-wrap: balance; }
.route__value { font: 800 24px/28px var(--font-sans); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.route__pct { font: 400 12px/16px var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.route__stop--future .route__name { color: var(--ink-2); }
.route__stop--future .route__value { font-size: 14px; line-height: 28px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.route__loss {
  position: absolute; top: -30px; left: 0; z-index: 2; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 2px; padding: 3px var(--space-2); border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-xs);
  font: 700 11px/16px var(--font-sans); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.route__loss--alert { border-color: var(--warn); background: var(--warn); color: var(--surface); }
/* Телефон: маршрут вертикальный — остановки списком, линия слева, потеря под названием */
@media (max-width: 640px) {
  .route { padding: 0; overflow: visible; }
  .route__track { min-width: 0; }
  .route__track::before {
    top: calc(50% / var(--n, 6)); bottom: calc(50% / var(--n, 6)); left: 21px; right: auto; width: 2px; height: auto;
    background-image: linear-gradient(180deg, var(--control-border) 50%, transparent 50%); background-size: 2px 10px;
  }
  .route__fill { top: calc(50% / var(--n, 6)); left: 19px; width: 6px; height: calc(var(--k, 1) * 100% / var(--n, 6)); }
  .route__stops { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
  .route__stop {
    grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto;
    grid-template-areas: "dot name value" "dot loss pct";
    column-gap: var(--space-3); row-gap: 2px; justify-items: start; padding: var(--space-2) 0; text-align: left;
  }
  .route__dot { grid-area: dot; justify-self: center; }
  .route__name { grid-area: name; }
  .route__value { grid-area: value; justify-self: end; }
  .route__pct { grid-area: pct; justify-self: end; }
  .route__loss { grid-area: loss; position: static; transform: none; justify-self: start; }
  .route .tip { left: 56px; translate: none; }
}

/* ---------- DataTable ---------- */
.dtable { min-width: 0; }
.dtable__scroll { overflow-x: auto; }
/* Таблица у края карточки повторяет её скругление — фон шапки и строки «Итого» не торчит углом */
.card > .dtable:first-child .dtable__scroll, .card > :first-child > .dtable:first-child .dtable__scroll { border-top-left-radius: calc(var(--radius-lg) - 1px); border-top-right-radius: calc(var(--radius-lg) - 1px); }
.card > .dtable:first-child .dtable__head:first-child, .card > :first-child > .dtable:first-child .dtable__head:first-child { border-top: 0; }
.card > .dtable:last-child .dtable__scroll:last-child, .card > :last-child > .dtable:last-child .dtable__scroll:last-child { border-bottom-left-radius: calc(var(--radius-lg) - 1px); border-bottom-right-radius: calc(var(--radius-lg) - 1px); }
.dtable__grid { min-width: var(--min, 720px); }
.dtable__head, .dtable__row { display: grid; grid-template-columns: var(--cols); gap: var(--space-4); align-items: center; padding: 0 var(--space-6); }
.dtable__head { min-height: 44px; background: var(--surface-2); border-top: 1px solid var(--line); font: 700 12px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.dtable__row {
  min-height: 56px; border-top: 1px solid var(--line); font: 500 14px/20px var(--font-sans); color: var(--ink);
  font-variant-numeric: tabular-nums; transition: background-color var(--motion-fast) var(--ease-standard);
}
.dtable__row:hover { background: var(--bg); }
.dtable__row--total, .dtable__row--total:hover { background: var(--surface-2); font-weight: 800; }
.dtable__row--warn, .dtable__row--warn:hover { background: var(--warn-soft); }
.dtable__row--future { color: var(--ink-3); }
.dtable__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); }
.ds-root a.dtable__row { color: var(--ink); text-decoration: none; cursor: pointer; }
.ds-root a.dtable__row:hover { background: var(--bg); color: var(--ink); }
.dtable__chev { justify-self: end; width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.ds-root a.dtable__row:hover .dtable__chev { transform: translateX(3px); color: var(--primary); }
.dtable__row--pick { cursor: pointer; }
.dtable__row--selected, .dtable__row--selected:hover { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.dtable__row--selected .badge--primary, .dtable__row--selected .avatar--soft { background: var(--surface); }
.ta-r { text-align: right; }
.cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-sub { font: 400 12px/16px var(--font-sans); color: var(--ink-2); }
/* На телефоне список сущностей становится карточками: остаются ячейки .dtable__keep
   (первая — слева, вторая — справа), а .dtable__mobile — строка, которая видна только на телефоне. */
.dtable__mobile { display: none; }
@media (max-width: 640px) {
  .dtable--cards .dtable__grid { min-width: 0; }
  .dtable--cards .dtable__head { display: none; }
  .dtable--cards .dtable__head + .dtable__row { border-top: 0; }
  .dtable--cards .dtable__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); }
  .dtable--cards .dtable__row > :not(.dtable__keep) { display: none; }
  .dtable--cards .dtable__mobile { display: block; }
  .dtable--cards .dtable__foot { padding: var(--space-3) var(--space-4); }
}

/* ---------- Bar, Legend ---------- */
.bar { height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.bar--lg { height: 12px; }
.bar__fill {
  height: 100%; border-radius: var(--radius-pill); background: var(--primary); transform-origin: left center;
  animation: ds-grow-x var(--motion-slow) var(--ease-emphasized) both; animation-delay: calc(var(--i, 0) * var(--motion-stagger));
}
.bar__fill--warn { background: var(--warn); }
.bar__fill--muted { background: var(--control-border); }
.legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font: 500 13px/18px var(--font-sans); color: var(--ink-2); }
.legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--primary); }
.legend__swatch--alt { background: var(--warn); }

/* ---------- Callout, Checklist, KV ---------- */
.callout { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--primary-soft); color: var(--ink); font: 400 14px/20px var(--font-sans); }
.callout svg { width: 20px; height: 20px; flex: none; color: var(--primary); }
.callout--warn { background: var(--warn-soft); }
.callout--warn svg { color: var(--warn-ink); }
.callout strong { font-weight: 700; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.checklist li { display: flex; align-items: center; gap: var(--space-3); font: 500 14px/20px var(--font-sans); color: var(--ink); }
.checklist__icon { width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--positive-soft); color: var(--positive-ink); }
.checklist__icon svg { width: 14px; height: 14px; }
.checklist__icon--pending { background: var(--surface-2); color: var(--ink-3); }
.kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: center; margin: 0; }
.kv dt { font: 500 14px/20px var(--font-sans); color: var(--ink-2); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.kv--narrow { grid-template-columns: 112px minmax(0, 1fr); }
@media (max-width: 640px) { .kv { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } .kv dd { margin-bottom: var(--space-2); } }

/* ---------- Timeline: путь человека или история событий ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline__item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: var(--space-3); padding-bottom: var(--space-4); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--line); }
.timeline__item:last-child::before { display: none; }
.timeline__icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); }
.timeline__icon svg { width: 14px; height: 14px; }
.timeline__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 4px; }
.timeline__title { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.timeline__meta { font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
.timeline__time { padding-top: 5px; font: 500 12px/18px var(--font-mono); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.timeline__item--done .timeline__icon { background: var(--positive-soft); color: var(--positive-ink); }
.timeline__item--warn .timeline__icon { background: var(--warn-soft); color: var(--warn-ink); }
.timeline__item--future .timeline__icon { background: var(--surface); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--control-border); }
.timeline__item--future .timeline__title { color: var(--ink-3); font-weight: 500; }
.timeline__item--future::before { background: transparent; background-image: linear-gradient(to bottom, var(--control-border) 50%, transparent 50%); background-size: 2px 6px; }

/* ---------- MessagePreview ---------- */
.msg { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--line); }
.msg__head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.msg__avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); font: 800 15px/1 var(--font-sans); }
.msg__name { display: block; font: 700 14px/20px var(--font-sans); color: var(--ink); }
.msg__sub { display: block; font: 400 12px/16px var(--font-sans); color: var(--ink-2); }
.msg__bubble {
  align-self: flex-start; max-width: 94%; padding: var(--space-3) var(--space-4); border-radius: 20px 20px 20px 6px;
  background: var(--surface); box-shadow: var(--shadow-xs); font: 400 14px/21px var(--font-sans); color: var(--ink); white-space: pre-line;
  animation: ds-pop var(--motion-slow) var(--ease-emphasized) both; animation-delay: calc(var(--i, 0) * 140ms);
}
.msg__time { display: block; margin-top: var(--space-1); text-align: right; font: 400 11px/14px var(--font-sans); color: var(--ink-3); }
.ds-root .msg__btn, .msg__btn { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--primary); font: 700 14px/20px var(--font-sans); text-decoration: none; }
.msg__keyboard { display: grid; gap: 6px; padding: var(--space-2); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
/* Экран чата: сообщения прижаты к низу, как в Telegram; клавиатура — внизу экрана */
.msg--screen { flex: 1; min-height: 440px; }
.msg__chat {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); min-height: 0;
  margin: 0 calc(var(--space-5) * -1); padding: var(--space-4) var(--space-5);
  background-image: radial-gradient(circle at 1px 1px, var(--dots) 1px, transparent 1.5px); background-size: 20px 20px;
}
.msg__date { align-self: center; margin-bottom: var(--space-2); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-xs); font: 600 12px/18px var(--font-sans); color: var(--ink-2); }
.msg__key { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--radius-sm); background: var(--surface-2); font: 600 14px/20px var(--font-sans); color: var(--ink); }

/* ---------- Overlays: Popover · Menu · Modal · Confirm · Sheet · Toast ----------
   Единые всплывающие элементы для всех экранов. Свои .v-modal / .v-menu / .v-toast на страницах не заводим.
   На холсте доска растянута на всю высоту страницы, поэтому окна и тосты прижаты к верху (под шапкой),
   а не к центру или низу экрана; на телефоне окно и боковая панель выезжают снизу. */
.pop-host { position: relative; }
.popover {
  position: absolute; z-index: 30; top: calc(100% + var(--space-2)); left: 0; min-width: 240px; width: max-content; max-width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md);
  animation: ds-menu-in var(--motion-base) var(--ease-emphasized) both; transform-origin: 24px 0;
}
.popover { color: var(--ink); text-align: left; }
.popover--end { left: auto; right: 0; transform-origin: calc(100% - 24px) 0; }
.popover--up { top: auto; bottom: calc(100% + var(--space-2)); transform-origin: 24px 100%; }
.popover--wide { width: min(420px, calc(100vw - 32px)); }
.popover__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.popover__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }

.menu {
  position: absolute; z-index: 30; top: calc(100% + var(--space-1)); right: 0; width: 272px; max-width: calc(100vw - 32px);
  display: grid; gap: 2px; padding: var(--space-2);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md);
  animation: ds-menu-in var(--motion-base) var(--ease-emphasized) both; transform-origin: calc(100% - 20px) 0;
}
.menu { color: var(--ink); text-align: left; }
.menu--start { right: auto; left: 0; transform-origin: 20px 0; }
.menu--up { top: auto; bottom: calc(100% + var(--space-1)); transform-origin: calc(100% - 20px) 100%; }
.menu__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 40px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 500 14px/20px var(--font-sans);
  text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard);
}
.menu__item > svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
.ds-root a.menu__item { color: var(--ink); }
.ds-root a.menu__item--danger { color: var(--danger-ink); }
.menu__item:hover, .ds-root a.menu__item:hover { background: var(--surface-2); color: var(--ink); }
.menu__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.menu__item--danger, .menu__item--danger > svg, .ds-root a.menu__item--danger:hover { color: var(--danger-ink); }
.menu__item--danger:hover { background: var(--danger-soft); color: var(--danger-ink); }
.menu__item[aria-disabled="true"], .menu__item[aria-disabled="true"] > svg { color: var(--ink-3); cursor: default; }
.menu__item[aria-disabled="true"]:hover { background: transparent; }
.menu__hint { margin-left: auto; font: 400 13px/18px var(--font-sans); color: var(--ink-3); }
.menu__note { margin: 0; padding: 0 var(--space-3) var(--space-1) 42px; font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
.menu__label { padding: var(--space-2) var(--space-3) var(--space-1); font: 700 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.menu__sep { height: 1px; margin: var(--space-1) var(--space-2); background: var(--line); }

.modal, .sheet { position: fixed; inset: 0; z-index: 70; display: flex; }
.modal { align-items: flex-start; justify-content: center; padding: 96px var(--space-4) var(--space-4); }
.modal__scrim, .sheet__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 44%, transparent); animation: ds-fade var(--motion-base) var(--ease-standard) both; }
.modal__box {
  position: relative; width: min(520px, 100%); max-height: calc(100vh - 112px); overflow: auto;
  display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-md);
  animation: ds-modal-in var(--motion-slow) var(--ease-emphasized) both;
}
.modal--sm .modal__box { width: min(420px, 100%); }
.modal--lg .modal__box { width: min(720px, 100%); }
.modal__head, .sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.modal__head .text-h2, .sheet__head .text-h2 { margin: 0; }
.modal__sub { margin: var(--space-1) 0 0; font: 400 14px/20px var(--font-sans); color: var(--ink-2); }
.modal__x, .sheet__x {
  flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard);
}
.modal__x svg, .sheet__x svg { width: 20px; height: 20px; }
.modal__x:hover, .sheet__x:hover { background: var(--surface-2); color: var(--ink); }
.modal__x:focus-visible, .sheet__x:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.modal__foot, .sheet__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.modal__foot--split, .sheet__foot--split { justify-content: space-between; }
/* Подтверждение необратимого действия: иконка, что именно случится, красная кнопка справа */
.modal__icon { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--danger-soft); color: var(--danger-ink); }
.modal__icon svg { width: 22px; height: 22px; }
.modal__icon--warn { background: var(--warn-soft); color: var(--warn-ink); }
.modal__icon--ok { background: var(--positive-soft); color: var(--positive-ink); }
.ds-root .btn--danger, .btn--danger { background: var(--danger-ink); color: var(--on-primary); }
.ds-root .btn--danger:hover, .btn--danger:hover { background: color-mix(in srgb, var(--danger-ink) 86%, var(--ink)); color: var(--on-primary); }
/* Шаги внутри окна: «Кто → Доступ → Готово» */
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.steps__item { display: flex; align-items: center; gap: var(--space-2); font: 500 13px/18px var(--font-sans); color: var(--ink-3); }
.steps__item + .steps__item::before { content: ""; width: 20px; height: 1px; margin-right: var(--space-1); background: var(--line); }
.steps__num { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font: 700 12px/1 var(--font-sans); }
.steps__item--current { color: var(--ink); }
.steps__item--current .steps__num { background: var(--primary); color: var(--on-primary); }
.steps__item--done .steps__num { background: var(--positive-soft); color: var(--positive-ink); }

.sheet { justify-content: flex-end; }
.sheet__box {
  position: relative; width: min(480px, 100%); height: 100%; overflow: auto;
  display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6);
  border-left: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-md);
  animation: ds-drawer-in var(--motion-slow) var(--ease-emphasized) both;
}
.sheet--wide .sheet__box { width: min(640px, 100%); }
.sheet__foot { margin-top: auto; position: sticky; bottom: calc(var(--space-6) * -1); padding-bottom: var(--space-6); margin-bottom: calc(var(--space-6) * -1); background: var(--surface); z-index: 1; } /* подвал с кнопками всегда виден, даже если содержимое длиннее экрана */
/* Открытое меню или панель: прозрачная подложка закрывает по клику мимо; держатель поднимается над соседними карточками */
.pop-catch { position: fixed; inset: 0; z-index: 25; background: transparent; }
.pop-host--open { position: relative; z-index: 31; }
.card:has(.pop-host--open) { position: relative; z-index: 31; }

.toast {
  position: fixed; z-index: 80; top: 96px; left: 0; right: 0; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-3); width: max-content; max-width: calc(100vw - 32px);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3); border-radius: var(--radius-lg);
  background: var(--ink); color: var(--on-primary); box-shadow: var(--shadow-md);
  animation: ds-toast-in var(--motion-slow) var(--ease-emphasized) both;
}
.toast__icon { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--positive-soft); color: var(--positive-ink); }
.toast__icon svg { width: 16px; height: 16px; }
.toast__icon--warn { background: var(--warn-soft); color: var(--warn-ink); }
.toast__text { display: flex; flex-direction: column; min-width: 0; }
.toast__title { font: 600 14px/20px var(--font-sans); color: var(--on-primary); }
.toast__sub { font: 400 13px/18px var(--font-sans); color: var(--on-primary-muted); }
.ds-root .toast .btn, .toast .btn { min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); background: transparent; color: var(--on-primary); box-shadow: none; }
.ds-root .toast .btn:hover, .toast .btn:hover { background: color-mix(in srgb, var(--on-primary) 14%, transparent); color: var(--on-primary); transform: none; }

@keyframes ds-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ds-drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes ds-sheet-up { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal__box, .sheet__box {
    width: 100%; height: auto; max-height: 92vh; padding: var(--space-5) var(--space-4) var(--space-6);
    border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation-name: ds-sheet-up;
  }
  .sheet { align-items: flex-end; }
  .modal__foot, .sheet__foot { flex-direction: column-reverse; align-items: stretch; }
  .modal__foot > .btn, .sheet__foot > .btn { width: 100%; }
  /* Тост на телефоне — внизу над нижней кнопкой экрана (.dock), как snackbar Android: сверху он на 4–8 с закрывал шапку — имя, статус,
     «⋯» (сквозная проверка «Найма», 2026-10-18); поднимается снизу */
  .toast { top: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); animation-name: ds-sheet-up; }
  .popover, .popover--wide { max-width: calc(100vw - 32px); }
  /* Под палец: на телефоне мелкие цели не меньше 44 px */
  .menu__item { min-height: 44px; }
  .btn--sm { min-height: 44px; }
  .btn--sm.btn--icon { width: 44px; }
  .modal__x, .sheet__x { width: 44px; height: 44px; }
}
.badge > svg { width: 14px; height: 14px; flex: none; }

/* ---------- Patterns: общие приёмы, собранные из 18 экранов (волна 3) ----------
   Каждый заменяет повторявшиеся на экранах v-*: is-off (v-off/v-hide), is-target (v-anchor, v-key--hl),
   tipword (v-tipword), checklist__icon--* (v-ci), checks (v-checks), empty (v-empty), modal__list (v-conseq),
   howto (v-howto/v-steps), numlink (v-numlink/v-num), savebar (v-stick/v-foot/v-savebar), dock (v-dock),
   meter + rules (v-meter/v-rules), secret (v-mask), decided (v-sum), chip (фишки фильтров), fixline (v-fixline). */
.is-off { display: none !important; }
/* Переход по ссылке-якорю: строка или карточка коротко подсвечивается (класс ставит экран при открытии и hashchange) */
.is-target { position: relative; }
.is-target::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: color-mix(in srgb, var(--primary) 5%, transparent); box-shadow: inset 0 0 0 2px var(--primary); animation: ds-target 2.4s var(--ease-standard) both; }
@keyframes ds-target { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
/* Термин с пояснением: пунктир снизу, пояснение — .tip рядом */
.tipword { border-bottom: 1px dashed var(--control-border); cursor: help; }
.tip--start { left: 0; translate: 0 0; }
.tip--end { left: auto; right: 0; translate: 0 0; }
/* Состояния значка в списках-проверках */
.checklist__icon--warn { background: var(--warn-soft); color: var(--warn-ink); }
.checklist__icon--no { background: var(--surface-2); color: var(--ink-3); }
.checklist__icon--danger { background: var(--danger-soft); color: var(--danger-ink); }
.checklist__icon--run { background: var(--primary-soft); color: var(--primary); }
.checklist__icon--run svg { animation: ds-spin 900ms linear infinite; }
/* Проверка по шагам: ждёт → идёт → ок / не хватает; пояснение и действие под строкой */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.checks > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-3); align-items: start; font: 500 14px/20px var(--font-sans); color: var(--ink); }
.checks > li > .checklist__icon { margin-top: -3px; }
.checks__sub { display: block; margin-top: 2px; font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
.checks > li.checks--wait { color: var(--ink-3); }
.checks > li.checks--miss { color: var(--danger-ink); }
.checks > li.checks--warn { color: var(--warn-ink); }
/* Пустое состояние: иконка, что здесь будет, одно действие */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: var(--space-12) var(--space-8); text-align: center; }
.empty__icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.empty__icon svg { width: 28px; height: 28px; }
.empty__titles { display: flex; flex-direction: column; gap: var(--space-2); max-width: 540px; }
.empty__titles > p { margin: 0; font: 400 15px/22px var(--font-sans); color: var(--ink-2); }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
/* Последствия в подтверждении: что перестанет работать / что продолжит */
.modal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.modal__list > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); align-items: start; font: 400 14px/20px var(--font-sans); color: var(--ink); }
.modal__list > li > svg { width: 18px; height: 18px; margin-top: 1px; color: var(--danger-ink); }
.modal__list--keep > li > svg { color: var(--positive-ink); }
.modal__list-title { margin: 0 0 var(--space-1); font: 700 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
/* Инструкция шагами: номер, что сделать, необязательная кнопка под шагом */
.howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); counter-reset: howto; }
.howto > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); align-items: start; counter-increment: howto; }
.howto > li::before { content: counter(howto); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font: 700 12px/1 var(--font-sans); }
.howto__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; padding-top: 2px; font: 500 14px/20px var(--font-sans); color: var(--ink); }
.howto__body > .text-caption { color: var(--ink-2); }
.howto__body > .btn { margin-top: var(--space-1); }
/* Число-ссылка: число ведёт к людям/записям за ним */
.ds-root a.numlink, a.numlink { color: inherit; text-decoration: none; border-radius: var(--radius-sm); transition: color var(--motion-fast) var(--ease-standard); }
.ds-root a.numlink:hover, a.numlink:hover { color: var(--primary); }
a.numlink:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
a.numlink .tipword { cursor: pointer; }
/* Липкая панель сохранения внутри карточки: видна, когда есть изменения; слева состояние, справа действие */
.savebar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-5) calc(var(--space-6) * -1) calc(var(--space-6) * -1); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.savebar__state { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 13px/18px var(--font-sans); color: var(--ink-2); }
.savebar__state svg { width: 16px; height: 16px; }
.savebar__state--ok { color: var(--positive-ink); }
.savebar__state--dirty { color: var(--warn-ink); }
.modal__foot--sticky { position: sticky; bottom: calc(var(--space-6) * -1); margin-bottom: calc(var(--space-6) * -1); padding-bottom: var(--space-6); background: var(--surface); z-index: 1; }
/* Главное действие на телефоне — внизу под большим пальцем; на десктопе стоит на месте */
@media (max-width: 640px) {
  .dock { position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 50; display: flex; gap: var(--space-2); }
  .dock > .btn { flex: 1; box-shadow: var(--shadow-md); }
  .savebar { padding: var(--space-3) var(--space-6); } /* поля .card__body — 24 px и на телефоне: полоса доходит до краёв карточки */
}
/* Надёжность пароля и правила по ходу ввода */
.meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: var(--space-1); }
.meter__s { height: 4px; border-radius: var(--radius-pill); background: var(--surface-2); transition: background-color var(--motion-base) var(--ease-standard); }
.meter--1 > .meter__s:nth-child(-n+1), .meter--2 > .meter__s:nth-child(-n+2) { background: var(--warn); }
.meter--3 > .meter__s:nth-child(-n+3) { background: var(--primary); }
.meter--4 > .meter__s:nth-child(-n+4) { background: var(--positive-ink); }
.meter__word { min-width: 72px; margin-left: var(--space-2); text-align: right; font: 500 13px/18px var(--font-sans); color: var(--ink-2); }
.checklist.rules { gap: var(--space-2); }
.rules > li.rules--wait { color: var(--ink-2); }
.rules > li.rules--bad { color: var(--warn-ink); }
/* Секрет: показываем только последние 4 символа */
.secret { display: inline-flex; align-items: baseline; white-space: nowrap; font: 500 13px/18px var(--font-mono); color: var(--ink-2); }
.secret__dots { margin-right: 2px; letter-spacing: -0.12em; color: var(--ink-3); }
/* «Система решила за вас»: что выбрано, почему, и «Изменить» */
.decided { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.decided:last-child { border-bottom: 0; }
.decided__label { font: 500 13px/18px var(--font-sans); color: var(--ink-2); }
.decided__value { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.decided__why { grid-column: 1 / -1; font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
/* Фишка фильтра: что применено и × чтобы снять */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-1) 0 var(--space-3); border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font: 600 13px/18px var(--font-sans); }
.chip__x { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.chip__x:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.chip__x svg { width: 14px; height: 14px; }
/* Проблема и одно действие: причина словами + кнопка, которая это чинит */
.fixline { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--ink); font: 500 14px/20px var(--font-sans); }
.fixline > svg { width: 18px; height: 18px; flex: none; color: var(--warn-ink); }
.fixline__text { flex: 1 1 280px; min-width: 0; }
.fixline > .btn { margin-left: auto; }
/* Кнопка, открывшая меню или включённая, выглядит нажатой */
.ds-root .btn--ghost[aria-expanded="true"], .ds-root .btn--secondary[aria-expanded="true"], .ds-root .btn--ghost[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
/* Двухстрочный пункт меню */
.menu__item--2l { align-items: flex-start; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.menu__item--2l > svg { margin-top: 1px; }
.menu__sub { display: block; margin-top: 2px; font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
@media (max-width: 640px) { .seg__btn { min-height: 44px; } }
/* Переход по якорю: цель встаёт под плавающей шапкой, а не за ней (шапка 16 + 68 px + зазор) */
.ds-root [id], .is-target { scroll-margin-top: 104px; }
/* Компактное пустое состояние — внутри карточки или блока, а не на весь список */
.empty--sm { gap: var(--space-3); padding: var(--space-6) var(--space-4); }
.empty--sm .empty__icon { width: 48px; height: 48px; }
.empty--sm .empty__icon svg { width: 22px; height: 22px; }
/* Последствия-факты без оценки (временный пароль, что будет дальше) — нейтральный значок */
.modal__list--info > li > svg { color: var(--ink-3); }
/* Плитка-иконка 40 px: сервис, ключ, тип объекта в строке; тон = состояние */
.tile-icon { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-2); }
.tile-icon svg { width: 20px; height: 20px; }
.tile-icon--primary { background: var(--primary-soft); color: var(--primary); }
.tile-icon--positive { background: var(--positive-soft); color: var(--positive-ink); }
.tile-icon--warn { background: var(--warn-soft); color: var(--warn-ink); }
.tile-icon--danger { background: var(--danger-soft); color: var(--danger-ink); }
.tile-icon--off { background: var(--surface); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.tile-icon--sm { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.tile-icon--sm svg { width: 16px; height: 16px; }
/* Цвет текста по тону — для слова или строки состояния, не для целых абзацев */
.text-positive { color: var(--positive-ink); }
.text-warn { color: var(--warn-ink); }
.text-danger { color: var(--danger-ink); }
/* Число-ссылка: при наведении синеет и число со своим цветом (.text-h2, .text-stat внутри) */
.ds-root a.numlink:hover > *:not(.tip) { color: var(--primary); }
/* На устройствах без наведения число-ссылку видно сразу — тонкое пунктирное подчёркивание */
@media (hover: none) { a.numlink { text-decoration: underline dotted 1px; text-decoration-color: var(--control-border); text-underline-offset: 4px; } }
/* Две кнопки в полосе сохранения («Отменить» + «Сохранить») */
.savebar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
/* Маленькая иконка внутри кнопки остаётся 16 px (.btn svg задаёт 18) */
.btn .icon--sm, .btn > svg.icon--sm { width: 16px; height: 16px; }
/* Тихая строка-совет в проверке по шагам */
.checks > li.checks--soft { color: var(--ink-2); font-weight: 400; }
/* Фишка без × — просто показать выбор; у × зона нажатия больше, чем рисунок (палец) */
.chip--static { padding-right: var(--space-3); }
.chip__x { position: relative; }
.chip__x::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
@media (max-width: 640px) { .empty { gap: var(--space-4); padding: var(--space-8) var(--space-4); } }
/* Пустое «всё в порядке» — зелёная иконка */
.empty__icon--ok { background: var(--positive-soft); color: var(--positive-ink); }
/* «Пока нет данных» — статичная заглушка; переливающийся .skeleton значит «грузится», путать нельзя */
.ghost { display: inline-block; height: 12px; min-width: 40px; border-radius: var(--radius-pill); background: var(--surface-2); vertical-align: middle; }
/* Поле с кнопкой-иконкой внутри справа: «показать пароль», «скопировать» */
.inputwrap--action > .input { padding-right: 52px; }
.inputwrap--action > .btn { position: absolute; top: 4px; right: 4px; }

/* ---------- Palette: поиск и действия по ⌘K / Ctrl+K — один вход ко всему ----------
   Пустой запрос: недавнее и быстрые действия. Ввод: результаты группами (Действия, Экраны, Подписчики, Кампании, Посты,
   Домены, Ленды, Люди, Ключи). ↑↓ — выбор, Enter — открыть, Esc — закрыть. На телефоне — на весь экран. */
.palette { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 88px var(--space-4) var(--space-4); }
.palette__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 36%, transparent); animation: ds-fade var(--motion-base) var(--ease-standard) both; }
.palette__box { position: relative; width: min(680px, 100%); max-height: min(640px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-md); animation: ds-modal-in var(--motion-slow) var(--ease-emphasized) both; }
.palette__field { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.palette__field > svg { width: 20px; height: 20px; flex: none; color: var(--ink-3); }
.palette__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 17px/24px var(--font-sans); color: var(--ink); }
.palette__input::placeholder { color: var(--ink-3); }
.ds-root .palette__input:focus-visible { outline: none; } /* палитра — уже окно в фокусе: кольцо вокруг поля лишнее */
.palette__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.palette__list { flex: 1; min-height: 0; overflow: auto; padding: var(--space-2); }
.palette__group { padding: var(--space-3) var(--space-3) var(--space-1); font: 700 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.palette__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: 48px; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md); color: var(--ink); text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard); }
.ds-root a.palette__item, .ds-root a.palette__item:hover { color: var(--ink); }
.palette__item:hover, .palette__item[aria-selected="true"] { background: var(--surface-2); }
.palette__ico { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.palette__ico svg { width: 18px; height: 18px; }
.palette__item[aria-selected="true"] .palette__ico { background: var(--primary-soft); color: var(--primary); }
.palette__text { display: flex; flex-direction: column; min-width: 0; }
.palette__title { font: 600 14px/20px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__title mark { background: transparent; color: var(--primary); }
.palette__sub { font: 400 13px/18px var(--font-sans); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__hint { font: 500 12px/16px var(--font-sans); color: var(--ink-3); white-space: nowrap; }
.palette__item[aria-selected="true"] .palette__hint { color: var(--ink-2); }
.palette__empty { padding: var(--space-8) var(--space-5); text-align: center; color: var(--ink-2); font: 400 14px/20px var(--font-sans); }
.palette__foot { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); font: 400 12px/16px var(--font-sans); color: var(--ink-3); }
.palette__foot .kbd { margin-right: var(--space-1); }
@media (max-width: 640px) {
  .palette { padding: 0; align-items: stretch; }
  .palette__box { width: 100%; max-height: none; height: 100%; border: 0; border-radius: 0; animation-name: ds-sheet-up; }
  .palette__foot { display: none; }
}

/* ---------- Иконки: Lucide (ISC), линия 1.8; размер задаёт родитель ---------- */
.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }
/* Идёт проверка — иконка крутится (refresh), а не спиннер на весь блок */
.icon-spin { animation: ds-spin 900ms linear infinite; transform-origin: 50% 50%; }
/* Успех — галочка рисует себя (check / ok) */
.icon-draw path, .icon-draw polyline { stroke-dasharray: 36; stroke-dashoffset: 36; animation: ds-draw 520ms var(--ease-emphasized) 80ms forwards; }
/* Стрелка в кнопке «дальше» чуть уходит вперёд при наведении */
.icon-nudge { transition: transform var(--motion-fast) var(--ease-standard); }
.btn:hover .icon-nudge, a:hover > .icon-nudge { transform: translateX(2px); }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-draw { to { stroke-dashoffset: 0; } }

/* ---------- Движение ---------- */
.anim-rise { animation: ds-rise var(--motion-slow) var(--ease-emphasized) backwards; animation-delay: calc(var(--i, 0) * var(--motion-stagger)); } /* backwards: после появления не держим transform — работает подъём при наведении и всплывающие не уходят под соседей */
.anim-fade { animation: ds-fade var(--motion-base) var(--ease-standard) backwards; }
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: ds-shimmer 1.4s var(--ease-standard) infinite;
}
@keyframes ds-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ds-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ds-pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ds-menu-in { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes ds-menu-item { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ds-tip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ds-ping { 0% { transform: scale(0.75); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .ds-root *, .ds-root *::before, .ds-root *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Аватарка-фото поверх инициалов (каналы, боты, подписчики): нет фото или не загрузилось — видны инициалы */
.avatar, .msg__avatar { position: relative; }
.avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Длинные слова без пробелов (имена ботов, домены, токены) переносим внутри блока, а не выпускаем за край */
.cell-stack > *, .timeline__title, .timeline__meta { overflow-wrap: anywhere; }

/* Телефон: всплывающие окна (поповеры) — панелью снизу во всю ширину. Привязанные к кнопке у края экрана, они уходили за край */
@media (max-width: 640px) {
  .pop-host .popover { position: fixed; top: auto; left: 16px; right: 16px; bottom: 16px; width: auto; min-width: 0; max-width: none;
    max-height: 70vh; overflow: auto; transform-origin: 50% 100%; z-index: 60; }
}

/* Заголовок окна с названием («Архивировать «…»?»): длинное название переносится, а не уходит за край (обходчик, 2026-10-04) */
.modal .text-h2 .nowrap { white-space: normal; overflow-wrap: anywhere; }

/* Узкий экран: подсказка — плашкой внизу во всю ширину, как поповеры. Привязанная к показателю в правой колонке, она уходила
   за край. Подъём носителя при наведении здесь выключен: у приподнятого (transform) элемента fixed считался бы от него.
   Класс удвоен ради веса — экранные стили (.ds-root a.v-kpi:hover) подключаются позже. */
@media (max-width: 640px) {
  .tip-host .tip { position: fixed; top: auto; bottom: 16px; left: 16px; right: 16px; translate: none; width: auto; max-width: none; z-index: 60; }
  .ds-root .tip-host.tip-host:hover, .ds-root .tip-host.tip-host:focus-within { transform: none; }
}

/* ==========================================================================
   Реакции (модуль) · префикс rx- · кит 2026-10-05
   Общие компоненты экранов «Реакции», «Аккаунты и боты», «Журнал реакций» и их окон.
   Сначала берём системное: badge (тоны статусов), seg, chart (оси, сетка, карточка), bar, checks, timeline,
   dtable, tile-icon, switch, empty, howto, decided, legend. Здесь только то, чего в системе нет:
     rx-nav      сегмент модуля ссылками «Обзор · Аккаунты и боты · Журнал»; rx-dot — точка «есть что посмотреть»
     rx-emo      эмодзи-реакция как данные: цветной глиф одинаково на всех системах
     rx-flow     график «Реакции идут за просмотрами»: план и поставлено ступенями, от людей сверху,
                 просмотры фоном, потолок 10% — только при «Не обгонять просмотры», «сейчас», всплывающие реакции
     rx-share    полоса процентов эмодзи (шаблон, с хвостом «не распределено» и перерасходом); rx-facts — пост по эмодзи
     rx-cells    ячейки «по штуке»: места админов из 50 (5 всегда свободны для людей), создание ботов N из 20; rx-seatbar — полоса в строке
     rx-signal   сигнальная полоса модуля: остановлены · есть проблемы · работают · пауза
     rx-acct     карточка рабочего аккаунта: шапка, проверки со временем, «Что делает сейчас», пунктирная «Подключить»
     rx-make     процесс создания ботов: пауза Telegram спокойным тоном, лента созданных
     rx-pct, rx-stepper, rx-alloc, rx-dur, rx-range, rx-emogrid — поля шаблона
     rx-launch   пустой модуль: чек-лист из трёх шагов
     rx-planc, rx-who, rx-cellstate, rx-views — ячейки строк поста и бота в DataTable
   Только токены системы. Движение — transform и opacity; «уменьшить движение» гасит всё (общее правило выше).
   ========================================================================== */

/* ---- Сегмент модуля: те же .seg / .seg__btn, но пункты — ссылки на экраны; текущий — aria-current="page" ---- */
.rx-navrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); flex-wrap: wrap; }
.rx-navrow__meta { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 13px/18px var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rx-navrow__meta > svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.rx-nav { max-width: 100%; }
.ds-root .rx-nav > a.seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.ds-root .rx-nav > a.seg__btn:hover { color: var(--ink); }
.ds-root .rx-nav > a.seg__btn[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.rx-nav > a.seg__btn > svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: color var(--motion-fast) var(--ease-standard); }
.rx-nav > a.seg__btn[aria-current="page"] > svg { color: var(--primary); }
/* Точка «есть что посмотреть» — у пункта сегмента, у бейджа канала («Просмотры не видим»); всегда с подсказкой или sr-only словом */
.rx-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--warn); }
.rx-dot--danger { background: var(--danger-ink); }
@media (max-width: 640px) {
  .rx-navrow { flex-direction: column; align-items: stretch; }
  .rx-nav { display: flex; }
  .ds-root .rx-nav > a.seg__btn { flex: 1 1 auto; padding: 0 var(--space-3); }
  .rx-nav > a.seg__btn > svg { display: none; }
}

/* ---- Эмодзи-реакция — это данные (из renderVals), а не украшение. Цветной глиф на любой системе:
   ❤ хранится как U+2764 без U+FE0F — без эмодзи-шрифта он стал бы чёрным текстовым сердцем ---- */
.rx-emo { display: inline-block; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-sans); font-style: normal; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; vertical-align: -0.12em; }
.rx-emo--md { font-size: 20px; }
.rx-emo--lg { font-size: 24px; }

/* ---- График «Реакции идут за просмотрами» (rx-flow) ----
   Строится на Chart: .chart > .chart__frame (.chart__y · .chart__plot · .rx-flow__y2), подписи осей, .chart__tip.
   Главное — реакции (левая шкала): синие ступени «поставлено», пунктир «план», сверху оранжевое «от людей»,
   верх стопки = «под постом». Просмотры — серый фон со своей шкалой справа (только для контекста).
   Пунктир потолка «10% просмотров» — в единицах реакций и только при галочке «Не обгонять просмотры».
   Наведение: столбики-срезы по снимкам просмотров (первые 30 мин — по минуте, дальше — по 5 мин): у каждого
   --x (время, % ширины) и метки --y; карточка — системная .chart__tip. */
.rx-flow { --h: 300px; }
.rx-flow__titles { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.rx-flow .chart__frame, .rx-flow .chart__x { grid-template-columns: 48px minmax(0, 1fr) 56px; }
.rx-flow .chart__y > span { right: var(--space-2); }
.rx-flow__y2 { position: relative; height: var(--h, 260px); }
.rx-flow__y2 > span { position: absolute; left: var(--space-2); transform: translateY(50%); font: 500 12px/16px var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rx-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform-origin: center bottom; animation: ds-grow-y var(--motion-slow) var(--ease-emphasized) both; }
.rx-flow__svg path { vector-effect: non-scaling-stroke; }
.rx-flow__views { fill: color-mix(in srgb, var(--ink-3) 13%, transparent); }
.rx-flow__cap { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 6 5; }
.rx-flow__under { fill: color-mix(in srgb, var(--warn) 30%, var(--surface)); }
.rx-flow__ours { fill: var(--primary); }
.rx-flow__edge { fill: none; stroke: var(--warn); stroke-width: 2; stroke-linejoin: round; }
.rx-flow__plan { fill: none; stroke: var(--primary); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.rx-flow__cols { position: absolute; inset: 0; z-index: 4; display: flex; } /* над всплывающими реакциями: карточка минуты не уходит под них */
.rx-flow__col { flex: var(--w, 1) 1 0; min-width: 0; height: 100%; }
.rx-flow__hair { display: none; position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: 1px; background: var(--ink-2); pointer-events: none; }
.rx-flow__mark { display: none; position: absolute; left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%); z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface), var(--shadow-xs); transform: translate(-50%, 50%); pointer-events: none; }
.rx-flow__mark--under { background: var(--warn); }
.rx-flow__mark--cap { background: var(--ink-2); }
.rx-flow__mark--plan { background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 2px var(--surface); }
.rx-flow__col:hover > .rx-flow__hair, .rx-flow__col:hover > .rx-flow__mark { display: block; }
.rx-flow__col > .chart__tip { left: calc(var(--x) * 1% + var(--space-3)); }
.rx-flow__col--end > .chart__tip { left: auto; right: calc((100 - var(--x)) * 1% + var(--space-3)); }
.rx-flow__col:hover > .chart__tip { display: block; animation: ds-tip-in var(--motion-base) var(--ease-emphasized) both; }
.rx-flow__tag { position: absolute; left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%); z-index: 1; transform: translate(calc(-100% - var(--space-2)), 50%); padding: 0 var(--space-1); border-radius: var(--space-1); background: color-mix(in srgb, var(--surface) 88%, transparent); font: 700 12px/16px var(--font-sans); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.rx-flow__tag--start { transform: translate(var(--space-2), 50%); }
.rx-flow__tag--below { transform: translate(var(--space-2), calc(100% + 2px)); }
.rx-flow__tag--end-below { transform: translate(calc(-100% - var(--space-2)), calc(100% + 2px)); }
.rx-flow__tag--top { bottom: auto; top: var(--space-1); transform: translate(var(--space-2), 0); }
.rx-flow__tag--ours { color: var(--primary); }
.rx-flow__tag--under { color: var(--warn-ink); }
/* «Сейчас»: тёмная линия, точка «под постом» с мягким кольцом и всплывающие свежие реакции (только transform/opacity) */
.rx-flow__now { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); z-index: 1; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); pointer-events: none; }
.rx-flow__pulse { position: absolute; left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%); z-index: 3; width: 12px; height: 12px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--surface); transform: translate(-50%, 50%); pointer-events: none; }
.rx-flow__pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--warn); animation: ds-ping calc(var(--motion-slow) * 4) var(--ease-standard) infinite; }
.rx-flow__bubbles { position: absolute; left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%); z-index: 3; width: 0; height: 0; pointer-events: none; }
.rx-flow__bub {
  position: absolute; left: -16px; bottom: var(--space-4); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary), var(--shadow-sm); font-size: 16px; opacity: 0;
  animation: rx-rise calc(var(--motion-slow) * 7) var(--ease-standard) infinite; animation-delay: calc(var(--i, 0) * var(--motion-slow) * 7 / 3);
}
.rx-flow__bub--people { box-shadow: inset 0 0 0 2px var(--warn), var(--shadow-sm); }
@keyframes rx-rise {
  0% { opacity: 0; transform: translate(0, 8px) scale(0.6); }
  14% { opacity: 1; transform: translate(0, 0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -76px) scale(0.92); }
}
/* Впереди окна (идёт): штриховка «ещё не наступило» и подпись, сколько осталось */
.rx-flow__ahead { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); right: 0; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-4); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--line) 70%, transparent) 0 1px, transparent 1px 9px); pointer-events: none; }
.rx-flow__ahead > span { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-xs); font: 500 12px/16px var(--font-sans); color: var(--ink-2); white-space: nowrap; }
.rx-flow__x { position: relative; height: 32px; }
.rx-flow__x > span { position: absolute; top: var(--space-2); left: calc(var(--x) * 1%); transform: translateX(-50%); font: 500 12px/16px var(--font-sans); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rx-flow__x > .rx-flow__xnow { top: var(--space-1); z-index: 1; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--ink); color: var(--on-primary); font-weight: 700; }
.rx-flow__skel { position: absolute; inset: 0; border-radius: var(--radius-sm); }
.rx-flow__sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.rx-flow__fig { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.rx-flow__val { font: 700 20px/26px var(--font-sans); letter-spacing: -0.015em; color: var(--ink); font-variant-numeric: tabular-nums; }
.legend__swatch.rx-sw--views { background: color-mix(in srgb, var(--ink-3) 22%, transparent); }
.legend__swatch.rx-sw--line { width: 16px; height: 0; border-radius: 0; background: transparent; border-top: 2px dashed var(--ink-2); }
.legend__swatch.rx-sw--plan { border-top-color: var(--primary); }
@media (max-width: 640px) {
  .rx-flow { --h: 240px; }
  .rx-flow .chart__frame, .rx-flow .chart__x { grid-template-columns: 34px minmax(0, 1fr) 52px; }
  .rx-flow__y2 > span { left: 6px; }
  .rx-flow__x > .rx-flow__xminor, .rx-flow__tag--minor { display: none; }
  .rx-flow__col > .chart__tip, .rx-flow__col--end > .chart__tip { left: var(--space-2); right: var(--space-2); min-width: 0; }
  .rx-flow__sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-flow__ahead > span { white-space: normal; text-align: center; }
}

/* ---- Проценты эмодзи (rx-share): шаблон — полоса процентов; хвост «не распределено»; перерасход — за чертой 100% ---- */
.rx-share { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.rx-share__bar { position: relative; display: flex; gap: 2px; height: 36px; padding: 2px; border-radius: var(--radius-md); background: var(--surface-2); overflow: hidden; }
.rx-share__seg {
  flex: var(--w, 1) 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-1); overflow: hidden;
  border-radius: calc(var(--radius-md) - 4px); background: var(--primary); color: var(--on-primary); font: 700 13px/16px var(--font-sans);
  white-space: nowrap; font-variant-numeric: tabular-nums; transform-origin: left center;
  animation: ds-grow-x var(--motion-slow) var(--ease-emphasized) both; animation-delay: calc(var(--i, 0) * var(--motion-stagger));
}
.rx-share__seg--2 { background: color-mix(in srgb, var(--primary) 42%, var(--surface)); color: var(--ink); }
.rx-share__seg--3 { background: color-mix(in srgb, var(--primary) 24%, var(--surface)); color: var(--ink); }
.rx-share__seg--4 { background: var(--primary-soft); color: var(--primary); }
.rx-share__seg--rest { background: var(--surface); background-image: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 7px); color: var(--ink-2); font-weight: 600; }
.rx-share__seg--tight > .rx-share__pct, .rx-share__seg--tiny > * { display: none; }
.rx-share__limit { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 1%); width: 2px; margin-left: -1px; background: var(--warn-ink); }
.rx-share__excess { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 1%); right: 0; background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 55%, transparent) 0 2px, transparent 2px 7px); }
.rx-share__keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); font: 500 13px/18px var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rx-share__key { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.rx-share__key > b { color: var(--ink); font-weight: 700; }
/* Факт поста по эмодзи: полоса «наши · ждут · от людей» и три числа — план, поставлено, под постом */
.rx-facts { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.rx-facts__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) repeat(3, 104px); grid-template-areas: "emo bar a b c"; gap: var(--space-2) var(--space-4); align-items: center; font: 600 14px/20px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.rx-facts__row > .rx-emo { grid-area: emo; font-size: 20px; }
.rx-facts__row--head { font: 700 12px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.rx-facts__bar { grid-area: bar; display: flex; height: 12px; min-width: 0; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.rx-facts__bar > span { flex: none; width: calc(var(--w) * 1%); height: 100%; transform-origin: left center; animation: ds-grow-x var(--motion-slow) var(--ease-emphasized) both; animation-delay: calc(var(--i, 0) * var(--motion-stagger)); }
.rx-facts__ours { background: var(--primary); }
.rx-facts__wait { background-image: repeating-linear-gradient(135deg, var(--primary) 0 2px, var(--primary-soft) 2px 6px); }
.rx-facts__people { background: var(--warn); }
.rx-facts__a, .rx-facts__b, .rx-facts__c { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.rx-facts__a { grid-area: a; } .rx-facts__b { grid-area: b; } .rx-facts__c { grid-area: c; }
.rx-facts__legend { grid-area: bar; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); text-transform: none; letter-spacing: 0; font: 500 12px/16px var(--font-sans); color: var(--ink-2); }
@media (max-width: 640px) {
  .rx-facts__row { grid-template-columns: 28px repeat(3, minmax(0, 1fr)); grid-template-areas: "emo a b c" ". bar bar bar"; gap: var(--space-1) var(--space-3); }
  .rx-facts__row--head { grid-template-areas: "emo a b c" "bar bar bar bar"; }
}

/* ---- Ячейки «по штуке» (rx-cells): одно место админа или один бот — одна ячейка; тон — чей ---- */
.rx-cells { display: grid; grid-template-columns: repeat(var(--cols, 25), minmax(0, 1fr)); gap: var(--space-1); width: 100%; }
.rx-cell { height: 22px; min-width: 0; border-radius: calc(var(--radius-sm) / 2); background: var(--surface-2); animation: ds-pop var(--motion-slow) var(--ease-emphasized) both; animation-delay: calc(var(--i, 0) * var(--motion-stagger) / 5); }
.rx-cells--sm > .rx-cell { height: 16px; }
.rx-cell--h1 { background: var(--primary); }
.rx-cell--h2 { background: color-mix(in srgb, var(--primary) 50%, var(--surface)); }
.rx-cell--h3 { background: color-mix(in srgb, var(--primary) 26%, var(--surface)); }
.rx-cell--other { background: var(--control-border); }
.rx-cell--keep { background-color: var(--surface); background-image: repeating-linear-gradient(135deg, var(--control-border) 0 1.5px, transparent 1.5px 5px); box-shadow: inset 0 0 0 1px var(--control-border); }
.rx-cell--free { background: var(--surface); box-shadow: inset 0 0 0 1px var(--control-border); }
.rx-cell--made { background: var(--primary); }
.rx-cell--now { position: relative; background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.rx-cell--now::after { content: ""; position: absolute; inset: -4px; border-radius: var(--radius-sm); border: 2px solid var(--primary); animation: ds-ping calc(var(--motion-slow) * 4) var(--ease-standard) infinite; }
.rx-cell--wait { background: var(--surface); box-shadow: inset 0 0 0 2px var(--control-border); }
.rx-seats { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.rx-seats__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.rx-seats__big { display: flex; align-items: baseline; gap: var(--space-2); }
/* Та же раскладка мест в строке таблицы — тонкая полоса; сегменты по --n мест */
.rx-seatbar { display: flex; gap: 2px; width: 100%; min-width: 96px; height: 8px; border-radius: var(--radius-pill); overflow: hidden; }
.rx-seatbar > .rx-cell--h1, .rx-seatbar > .rx-cell--h2, .rx-seatbar > .rx-cell--h3, .rx-seatbar > .rx-cell--other, .rx-seatbar > .rx-cell--keep, .rx-seatbar > .rx-cell--free { flex: var(--n, 1) 1 0; min-width: 0; height: 100%; border-radius: 0; animation: none; }
@media (max-width: 640px) { .rx-cells--wrap { --cols: 10 !important; } }

/* ---- Сигнальная полоса модуля (rx-signal): одна на экран, сверху; тон = состояние модуля ---- */
.rx-signal { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3) var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.rx-signal > .tile-icon { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.rx-signal__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rx-signal__title { font: 700 15px/22px var(--font-sans); color: var(--ink); }
.rx-signal__sub { font: 400 13px/18px var(--font-sans); color: var(--ink-2); }
.rx-signal__acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.rx-signal--danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger-ink) 22%, transparent); }
.rx-signal--danger > .tile-icon { color: var(--danger-ink); box-shadow: none; }
.rx-signal--danger .rx-signal__title { color: var(--danger-ink); }
.rx-signal--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.rx-signal--warn > .tile-icon { color: var(--warn-ink); box-shadow: none; }
.rx-signal--ok > .tile-icon { background: var(--positive-soft); color: var(--positive-ink); box-shadow: none; }
.rx-signal--muted { background: var(--surface-2); box-shadow: none; }
@media (max-width: 640px) {
  .rx-signal { grid-template-columns: 40px minmax(0, 1fr); padding: var(--space-4); }
  .rx-signal__acts { grid-column: 1 / -1; justify-content: stretch; }
  .rx-signal__acts > .btn { flex: 1 1 auto; }
}

/* ---- Карточка рабочего аккаунта (rx-acct): кто · «держит N из 20» · проверки со временем · «Что делает сейчас» ---- */
.rx-acct__head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-6) var(--space-6) 0; }
.rx-acct__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rx-acct__who > .text-mono { color: var(--ink-2); }
.rx-acct__head > .badge { grid-column: 2; justify-self: start; }
.rx-acct__hold { display: flex; flex-direction: column; gap: var(--space-2); }
.rx-acct__holdtop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); flex-wrap: wrap; }
.rx-checks > li { grid-template-columns: 26px minmax(0, 1fr) auto; }
.rx-checks__time { padding-top: 1px; font: 500 12px/18px var(--font-mono); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rx-acct__now { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.rx-acct__roles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rx-acct__foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rx-acct__hint { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-2); font: 400 12px/17px var(--font-sans); color: var(--ink-2); }
.rx-acct__hint > svg { width: 16px; height: 16px; color: var(--ink-3); }
.ds-root a.rx-acct--add, .rx-acct--add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8) var(--space-6); border: 2px dashed var(--control-border); background: transparent; box-shadow: none; color: var(--ink); text-align: center; text-decoration: none; transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); }
.ds-root a.rx-acct--add:hover { border-color: var(--primary); background: var(--surface); color: var(--ink); }
.rx-acct--add > .tile-icon { width: 56px; height: 56px; border-radius: 50%; transition: transform var(--motion-base) var(--ease-emphasized); }
.ds-root a.rx-acct--add:hover > .tile-icon { transform: scale(1.06); }

/* ---- Создание ботов как процесс (rx-make): ячейки N из 20; пауза Telegram — спокойная строка, а не тревога ---- */
.rx-make { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.rx-make__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); flex-wrap: wrap; }
.rx-make__state { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.rx-make__state > .tile-icon { background: var(--surface); }
.rx-make__state > .bar { grid-column: 2; height: 4px; background: var(--surface); }
.rx-make__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rx-feed > .timeline__item { padding-bottom: var(--space-3); }
.rx-feed > .timeline__item::before { top: 30px; }

/* ---- Поля шаблона: проценты эмодзи, помощник распределения, «сколько ботов», выбор эмодзи ---- */
.rx-pcts { display: flex; flex-direction: column; gap: var(--space-2); }
.rx-pct { display: grid; grid-template-columns: 48px auto minmax(0, 1fr) 40px; gap: var(--space-3); align-items: center; }
.ds-root .btn.rx-pct__emo { width: 48px; padding: 0; font-size: 24px; }
.rx-pct > .bar { height: 6px; }
.rx-pct--zero .rx-stepper { border-color: var(--warn); }
.rx-stepper { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.rx-stepper:hover { border-color: var(--ink-2); }
.rx-stepper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.ds-root .rx-stepper > .btn { width: 40px; min-height: 46px; border-radius: 0; }
.rx-stepper__input { width: 44px; height: 46px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); text-align: right; font: 700 15px/22px var(--font-sans); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.rx-stepper__input::-webkit-outer-spin-button, .rx-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ds-root .rx-stepper__input:focus-visible { outline: none; }
.rx-stepper__unit { padding: 0 var(--space-1) 0 2px; font: 600 15px/22px var(--font-sans); color: var(--ink-2); }
/* Число и «%» — ровно посередине между «−» и «+» (замечание владельца 2026-10-08: было смещено вправо на 12–14 px —
   поле 44 px с текстом по правому краю). Поле — по ширине числа, связка центрируется; ширина степпера постоянная,
   чтобы не прыгала с числом знаков. Без field-sizing (Safari, Firefox) — как было. */
@supports (field-sizing: content) {
  .rx-stepper { min-width: 145px; }
  .rx-stepper__input { field-sizing: content; width: auto; min-width: 1ch; margin-left: auto; text-align: center; }
  .rx-stepper__unit { margin-right: auto; }
}
.rx-alloc { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.rx-alloc__state { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; font: 600 14px/20px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.rx-alloc__state > svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.rx-alloc__acts { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.rx-alloc--ok { background: var(--positive-soft); }
.rx-alloc--ok > .rx-alloc__state, .rx-alloc--ok > .rx-alloc__state > svg { color: var(--positive-ink); }
.rx-alloc--over { background: var(--warn-soft); }
.rx-alloc--over > .rx-alloc__state, .rx-alloc--over > .rx-alloc__state > svg { color: var(--warn-ink); }
/* «За какое время поставить»: число + единица и быстрые варианты рядом */
.rx-dur { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.rx-dur__field { display: flex; gap: var(--space-2); }
.rx-dur__field > .input { width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
.rx-dur__field > .select { width: 96px; }
/* «Сколько ботов ставят реакцию»: диапазон в % от ботов канала — два ползунка на одной дорожке */
.rx-range { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.rx-range__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); flex-wrap: wrap; }
.rx-range__val { font: 700 20px/26px var(--font-sans); letter-spacing: -0.015em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rx-range__box { position: relative; height: 48px; }
.rx-range__track { position: absolute; left: 12px; right: 12px; top: 50%; height: 6px; margin-top: -3px; border-radius: var(--radius-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.rx-range__fill { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); right: calc((100 - var(--b)) * 1%); border-radius: inherit; background: var(--primary); }
.rx-range__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.rx-range__input::-webkit-slider-runnable-track { height: 48px; background: transparent; border: 0; }
.rx-range__input::-moz-range-track { height: 48px; background: transparent; border: 0; }
.rx-range__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 24px; height: 24px; margin-top: 12px; border: 0; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary), var(--shadow-sm); cursor: grab; transition: transform var(--motion-fast) var(--ease-standard); }
.rx-range__input::-moz-range-thumb { pointer-events: auto; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary), var(--shadow-sm); cursor: grab; }
.rx-range__input:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }
.rx-range__input:focus-visible { outline: none; }
.rx-range__input:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 4px var(--primary-soft); }
.rx-range__ticks { position: relative; height: 16px; margin: 0 12px; font: 500 12px/16px var(--font-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rx-range__ticks > span { position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%); white-space: nowrap; }
/* Выбор эмодзи: 73 реакции Telegram сеткой; выбранные — с галочкой, не больше 11; запрещённая в канале — оранжевая точка */
.rx-emogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: var(--space-1); }
.ds-root .btn.rx-emopick { position: relative; width: 100%; min-height: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; box-shadow: none; font-size: 22px; }
.ds-root .btn.rx-emopick:hover { background: var(--surface-2); }
.ds-root .btn.rx-emopick[aria-pressed="true"] { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.rx-emopick__check { position: absolute; top: -4px; right: -4px; display: none; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 2px var(--surface); }
.rx-emopick__check > svg { width: 12px; height: 12px; }
.rx-emopick[aria-pressed="true"] > .rx-emopick__check { display: flex; animation: ds-pop var(--motion-base) var(--ease-emphasized) both; }
.rx-emopick--ban::before { content: ""; position: absolute; top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--surface); }
.ds-root .btn.rx-emopick[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }
@media (max-width: 640px) { .rx-emogrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- Пустой модуль (rx-launch): три шага — аккаунт → каналы → проверка на посте ---- */
.rx-launch__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding: var(--space-6) var(--space-6) var(--space-5); }
.rx-launch__prog { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--space-1) var(--space-1); align-items: center; }
.rx-launch__prog > .bar { height: 6px; }
.rx-launch__prog > .text-caption { margin-left: var(--space-2); color: var(--ink); }
.rx-launch__steps { list-style: none; margin: 0; padding: 0; }
.rx-launch__step { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-5) var(--space-6); border-top: 1px solid var(--line); }
.rx-launch__num { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-2); font: 800 16px/1 var(--font-sans); }
.rx-launch__num > svg { width: 20px; height: 20px; }
.rx-launch__step--next { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.rx-launch__step--next > .rx-launch__num { background: var(--primary); color: var(--on-primary); }
.rx-launch__step--done > .rx-launch__num { background: var(--positive-soft); color: var(--positive-ink); }
.rx-launch__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding-top: var(--space-2); }
.rx-launch__title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rx-launch__act { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.rx-launch__chans { display: flex; flex-direction: column; margin-top: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.rx-launch__chan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); }
.rx-launch__chan:first-child { border-top: 0; }
@media (max-width: 640px) {
  .rx-launch__head { padding: var(--space-5) var(--space-4) var(--space-4); }
  .rx-launch__step { grid-template-columns: 40px minmax(0, 1fr); padding: var(--space-4); }
  .rx-launch__act { grid-column: 1 / -1; align-items: stretch; }
  .rx-launch__act > .btn { width: 100%; }
  .rx-launch__chan { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-2) var(--space-3); }
  .rx-launch__chan > :last-child { grid-column: 2; justify-self: start; }
  .rx-launch__head { grid-template-columns: minmax(0, 1fr); }
  .rx-launch__head > .badge { justify-self: start; }
  .rx-launch__act > .tip-host { display: block; }
  .rx-launch__act > .tip-host > .btn { width: 100%; }
}

/* ---- Ячейки строк поста и бота (DataTable) ---- */
.rx-planc { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.rx-planc > .bar { height: 4px; }
.rx-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.rx-who > .cell-stack { min-width: 0; }
.rx-who .text-mono { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Статус в строке: бейдж и строка-пояснение под ним, бейдж по ширине слова */
.rx-cellstate { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.rx-views { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.rx-views > svg { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
@media (max-width: 640px) { .dtable--cards .rx-cellstate { align-items: flex-end; max-width: 136px; text-align: right; } }

/* ==========================================================================
   Переписка и вкладки · кит 2026-10-12 (пришли из «ИИ в личке → Диалоги»)
   TextSwitch (tswitch) · Tabline (tabline) · Btngroup (btngroup) · Composer (composer) · JumpDown (jumpdown) · ScrollShade (scrollshade)
   + Overlays · Menu: вложенный экран (menu__item--sub, menu__chev, menu__back) и длинное меню с прокруткой (menu--scroll).
   Разметка, состояния и правила — components/<Имя>/README.md. Тёмной темы в системе нет; движение гасит общее правило prefers-reduced-motion.
   ========================================================================== */

/* ---------- TextSwitch: режим надписями «Сам · Через ИИ» ----------
   2–3 режима рядом с действием, где сегмент (seg) слишком тяжёл. Выбранный — тёмным, остальные — синей надписью с пунктиром.
   div.tswitch[role=radiogroup] > button.tswitch__opt[role=radio][aria-checked] > (svg) + span. Тап-зона 40 px, на телефоне 44. */
.tswitch { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.tswitch__opt { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: -2px -4px; padding: 2px 4px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--primary); font: 500 13px/20px var(--font-sans); white-space: nowrap; cursor: pointer; transition: color var(--motion-fast) var(--ease-standard); }
.tswitch__opt::before { content: ""; position: absolute; inset: -8px calc(var(--space-2) * -1); }   /* тап-зона; кольцо фокуса — вплотную к надписи */
.tswitch__opt > span { border-bottom: 1px dashed color-mix(in srgb, currentColor 55%, transparent); transition: border-color var(--motion-fast) var(--ease-standard); }
.tswitch__opt:hover > span { border-bottom-color: currentColor; }
.tswitch__opt[aria-checked="true"] { color: var(--ink); font-weight: 600; cursor: default; }
.tswitch__opt[aria-checked="true"] > span { border-bottom-color: transparent; }
.tswitch__opt > svg { flex: none; width: 14px; height: 14px; }
.tswitch__opt[aria-checked="true"] > svg { color: var(--primary); }
.tswitch__opt:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.tswitch__opt:disabled { color: var(--ink-3); cursor: default; }
.tswitch__opt:disabled > span { border-bottom-color: transparent; }
.tswitch__opt:disabled > svg { color: currentColor; }
@media (max-width: 860px) { .tswitch__opt::before { inset: -10px calc(var(--space-2) * -1); } }

/* ---------- Tabline: вкладки второго уровня надписями ----------
   Внутри карточки или колонки: «Все 24 · Мои 3 · Ждут ответа 7». Легче сегмента — не спорит с вкладками страницы над ним.
   Выбранная — тёмным с синей чертой снизу; число «смотри сюда» — оранжевой плашкой (tabline__count--warn). Не помещаются — листаются вбок. */
.tabline { display: flex; align-items: stretch; gap: var(--space-4); min-width: 0; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--line); }
.tabline::-webkit-scrollbar { display: none; }
.tabline__item { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 44px; margin: 0; padding: 0 2px;
  border: 0; border-radius: 0; background: none; color: var(--ink-2); font: 600 14px/20px var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard); }
.tabline__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary);
  transform: scaleX(0); transition: transform var(--motion-base) var(--ease-standard); }
.tabline__item:hover { color: var(--ink); }
.tabline__item[aria-selected="true"] { color: var(--ink); }
.tabline__item[aria-selected="true"]::after { transform: none; }
.tabline__item:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 2px var(--primary); }
.tabline__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2);
  font: 600 12px/20px var(--font-sans); text-align: center; font-variant-numeric: tabular-nums; }
.tabline__item[aria-selected="true"] .tabline__count { background: var(--primary-soft); color: var(--primary); }
.tabline__count--warn, .tabline__item[aria-selected="true"] .tabline__count--warn { background: var(--warn-soft); color: var(--warn-ink); }
.tabline--fill > .tabline__item { flex: 1 1 auto; }

/* ---------- Btngroup: действие и его вариант одной фигурой ----------
   «Вернуть ИИ» + «…с комментарием»: div.btngroup > .btn.btn--secondary + .btn.btn--secondary.btn--icon. Рамка между кнопками — одна линия,
   внутренние углы прямые; скрытая кнопка (is-off) группу не ломает — углы скругляются по видимым. Открытая (aria-expanded) — фоном surface-2 (Button). */
.btngroup { display: inline-flex; align-items: stretch; flex: none; }
.btngroup > .btn { position: relative; }
.btngroup > .btn:hover, .btngroup > .btn:focus-visible { z-index: 1; }
.btngroup > .btn:has(~ .btn:not(.is-off)) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btngroup > .btn:not(.is-off) ~ .btn:not(.is-off) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---------- Composer: поле сообщения в чате ----------
   div.composer (контейнер: поле подстраивается под свою ширину, а не под окно) > div.composer__box (рамка) >
   [div.composer__top — строка состояния с «×»] + label.sr-only + textarea.composer__in + div.composer__bar (режим · подсказка · счётчик · тихая · главная).
   Текст растёт до 7 строк, дальше — прокрутка внутри. Фокус — у всей рамки, как у поля системы. От 720 px — одной строкой, как в Telegram. */
.composer { container: composer / inline-size; min-width: 0; }
.composer__box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding: var(--space-3) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--control-border); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-base) var(--ease-standard); }
.composer__box:hover { border-color: var(--ink-2); }
/* черновик ИИ живёт в самом поле: рамка с синим оттенком, над текстом — строка «По-русски: …» и «×» (вернуть суть) */
.composer--draft > .composer__box { border-color: color-mix(in srgb, var(--primary) 45%, var(--control-border)); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.composer--draft > .composer__box:hover { border-color: color-mix(in srgb, var(--primary) 70%, var(--control-border)); }
.composer > .composer__box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.composer__in { display: block; width: 100%; min-height: 24px; max-height: 168px; margin: 0; padding: 0 var(--space-2) 0 0; border: 0; outline: 0; resize: none;
  background: transparent; color: var(--ink); font: 400 15px/24px var(--font-sans); field-sizing: content; overflow-y: auto; scrollbar-width: thin; }
.composer__in:focus-visible { outline: none; }   /* кольцо фокуса — у всей рамки, второе вокруг текста не нужно */
.composer__in::placeholder { color: var(--ink-3); }
.composer--locked .composer__in { color: var(--ink-2); }   /* ИИ пишет / уходит / ждёт ответа сервера — правка не принимается */
.composer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); min-height: 40px; }
.composer__bar > .tswitch { margin-right: auto; }
.composer__kbd { display: none; color: var(--ink-3); font: 400 12px/16px var(--font-sans); white-space: nowrap; }
.composer__count { flex: none; color: var(--ink-3); font: 500 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.composer__count--over { color: var(--danger-ink); font-weight: 600; }
.composer__alt, .composer__send { flex: none; }
.composer__send > svg { width: 16px; height: 16px; }
.composer__send--busy[disabled] { opacity: 0.7; }   /* занята, а не недоступна: ярче обычной выключенной, значок крутится */
.composer__top { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; padding-bottom: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, transparent); animation: ds-fade var(--motion-base) var(--ease-standard) both; }
.composer__ru { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ink-2); font: 400 13px/20px var(--font-sans); overflow-wrap: anywhere; }
.composer__ru > svg { width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; }
.composer__k { color: var(--ink); font-weight: 600; }
.composer__ru--clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; cursor: pointer; }   /* длинное — 2 строки, касанием — целиком */
.composer__ru--open { display: block; -webkit-line-clamp: none; cursor: default; }
.composer__ru--busy { color: var(--primary); font-weight: 500; }
.composer__ru--err { color: var(--danger-ink); font-weight: 500; }
.composer__ru--ready, .composer--ready .composer__in { animation: ds-composer-in var(--motion-slow) var(--ease-emphasized) both; }   /* черновик готов — текст проявляется */
@keyframes ds-composer-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.composer .composer__x { flex: none; width: 32px; height: 32px; min-height: 32px; margin: -6px 0; }
.composer__x > svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {   /* «Shift+Enter — новая строка»: на компьютере, пока набирают текст, в поле средней ширины (уже — тесно, шире — сужала бы текст) */
  @container composer (520px < width < 720px) {
    .composer:not(.composer--locked) .composer__box:focus-within > .composer__in:not(:placeholder-shown) ~ .composer__bar > .composer__kbd { display: inline; animation: ds-fade var(--motion-base) var(--ease-standard) both; }
  }
}
@container composer (max-width: 460px) { .composer__count { order: -1; flex: 1 1 100%; text-align: right; } }   /* узкое поле: счётчик — своей строкой над кнопками */
@container composer (min-width: 720px) {   /* широкое поле: текст и полоса — одной строкой, режим и кнопка внизу справа, текст растёт вверх */
  .composer__box { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); padding-block: var(--space-2); }
  .composer__top { grid-column: 1 / -1; margin-top: var(--space-1); }
  .composer__in { align-self: end; min-height: 40px; max-height: 184px; padding-block: 8px; }
  .composer__bar { align-self: end; flex-wrap: nowrap; }
}
@media (max-width: 860px) {
  .composer__in { font-size: 16px; }   /* 16 px: iPhone не увеличивает страницу при касании поля */
  .composer .composer__x { width: 40px; height: 40px; min-height: 40px; margin: -10px -4px -10px 0; }
}

/* ---------- JumpDown: «к последним» в прокручиваемой ленте ----------
   button.jumpdown[aria-label] > svg (chevron-down). Видна, когда ушли вверх дальше экрана; нажать — плавно вниз.
   Место задаёт экран: в сетке — той же областью, что лента (align-self и justify-self: end), в блоке — position: absolute в правом нижнем углу. */
.jumpdown { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-md); cursor: pointer; animation: ds-pop var(--motion-base) var(--ease-emphasized) backwards;
  transition: color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.jumpdown:hover { color: var(--primary); transform: translateY(-1px); }
.jumpdown:active { transform: translateY(1px) scale(0.96); }
.jumpdown:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.jumpdown > svg { width: 20px; height: 20px; }

/* ---------- ScrollShade: тень у края, пока есть куда прокрутить ----------
   Чистый CSS: фон «local» едет с содержимым и у края закрывает тень. Фон области — --shade-bg (по умолчанию surface; на сером — задать на самом элементе).
   Тот же приём у длинного меню — menu--scroll. */
.scrollshade, .menu--scroll { --shade-bg: var(--surface);
  background: linear-gradient(var(--shade-bg) 30%, transparent) top / 100% 24px no-repeat local, linear-gradient(transparent, var(--shade-bg) 70%) bottom / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--ink) 14%, transparent), transparent) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink) 14%, transparent), transparent) bottom / 100% 10px no-repeat scroll, var(--shade-bg); }

/* ---------- Overlays · Menu: вложенный экран и длинное меню ----------
   Длинный выбор (этапы) — вторым экраном того же меню, а не простынёй внизу. Пункт-вход: .menu__item.menu__item--sub[aria-haspopup=menu] >
   svg + текст + .menu__hint (текущее значение) + svg.menu__chev. Вложенный экран — второе .menu на том же месте: первая строка .menu__item.menu__back
   (‹ + название), под ней .menu__sep. Длинное меню — menu--scroll: прокрутка внутри, тень у края (ScrollShade). */
.menu--scroll { max-height: min(520px, 70vh); overflow-y: auto; overscroll-behavior: contain; }
.menu__item > .menu__chev { width: 16px; height: 16px; margin-left: var(--space-1); color: var(--ink-3); transition: transform var(--motion-fast) var(--ease-standard); }
.menu__item--sub:hover > .menu__chev { transform: translateX(2px); }
.menu__back { font-weight: 700; }

/* TopNav: пятый раздел верхнего меню («ИИ-рекрутер», 2026-10-12) рядом с поиском не помещается на 861–959 px — там разделы кнопкой «☰», как на телефоне */
@media (min-width: 861px) and (max-width: 959px) { .topnav { display: none; } .navmobile { display: block; } .topbar__tools { margin-left: auto; } }
/* TopNav: шестой раздел («Найм ▾», 2026-10-18) — с иконками разделы помещаются от 1160 px; на 960–1159 px пункты без иконок (подписи и ▾ остаются).
   Замер: разделы с иконками 779 px, без — 671 px; поиск на этих ширинах — кнопка 76 px */
@media (min-width: 960px) and (max-width: 1159px) { .topnav > .topnav__item > svg:first-child, .topnav > .navgroup > .topnav__item > svg:first-child { display: none; } }

/* ── Voice — голосовое сообщение: «▶ волна 0:12» (запись владельца для ИИ, 2026-10-14).
   <div class="voice"><button class="voice__play" aria-pressed="false|true">▶ / ❚❚</button><span class="voice__wave"><i style="--h: 40%"></i>…</span><span class="voice__dur">0:12</span></div>
   Играет одна запись за раз; aria-pressed="true" — играет (значок паузы, волна пульсирует). Цвет волны — от текста вокруг (пузырь, карточка). */
.voice { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 280px; }
.voice__play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); cursor: pointer; transition: background var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.voice__play:hover { background: var(--primary-hover); }
.voice__play:active { transform: scale(.94); }
.voice__play:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.voice__ic { width: 16px; height: 16px; }
.voice__ic--pause, .voice__play[aria-pressed="true"] .voice__ic--play { display: none; }
.voice__play[aria-pressed="true"] .voice__ic--pause { display: block; }
.voice__wave { display: flex; align-items: center; gap: 2px; height: 24px; flex: 1 1 auto; min-width: 72px; overflow: hidden; }
.voice__wave > i { display: block; flex: none; width: 3px; height: var(--h, 40%); min-height: 3px; border-radius: 2px; background: currentColor; opacity: .4; }
.voice__play[aria-pressed="true"] + .voice__wave > i { opacity: .85; animation: voice-pulse 900ms var(--ease-standard) infinite alternate; }
.voice__play[aria-pressed="true"] + .voice__wave > i:nth-child(3n) { animation-delay: 150ms; }
.voice__play[aria-pressed="true"] + .voice__wave > i:nth-child(3n+1) { animation-delay: 300ms; }
.voice__dur { flex: none; font: 500 12px/16px var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
@keyframes voice-pulse { to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .voice__play[aria-pressed="true"] + .voice__wave > i { animation: none; } }

/* ===== Choice — выбор крупной карточкой (2026-10-15, окна «Аккаунтов» ИИ-рекрутера): значок, название, строка описания, кружок выбора.
   Варианты, которые связаны (одна цепочка), — в одной группе-лотке со стрелкой между ними; несвязанные — разными группами через промежуток.
   <div class="choice" role="radiogroup"><div class="choice__group"><button class="choice__opt" role="radio" aria-checked="true|false" [aria-disabled="true"]>
     <span class="tile-icon">…</span><span class="choice__text"><span class="choice__title"><span class="text-h3">…</span>[<span class="badge choice__now">Сейчас</span>]
     [<span class="choice__who">лицо 20 + имя</span>]</span><span class="text-caption">…</span></span><span class="choice__radio"></span></button>
     [<span class="choice__link">↓</span> <button class="choice__opt">…</button>]</div>…</div> ===== */
.choice { display: flex; flex-direction: column; gap: var(--space-4); }
.choice__group { display: flex; flex-direction: column; padding: var(--space-1); border-radius: var(--radius-lg); background: var(--surface-2); }
.choice__link { display: flex; align-items: center; height: var(--space-5); padding-left: calc(var(--space-3) + 12px); color: var(--ink-3); }
.choice__link > svg { width: 16px; height: 16px; flex: none; }
.choice__opt { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 68px; padding: var(--space-3); border: 0; border-radius: var(--radius-md); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-xs); color: var(--ink); text-align: left; font: inherit; cursor: pointer;
  transition: box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); }
.choice__opt:hover { box-shadow: inset 0 0 0 1px var(--control-border), var(--shadow-xs); }
.choice__opt:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.choice__opt[aria-checked="true"], .choice__opt[aria-checked="true"]:hover { background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); box-shadow: inset 0 0 0 2px var(--primary), var(--shadow-xs); }
.choice__opt[aria-disabled="true"] { cursor: default; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.choice__opt[aria-disabled="true"]:hover { box-shadow: inset 0 0 0 1px var(--line); }
.choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice__title { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--space-3); min-width: 0; }
.choice__radio { position: relative; width: 22px; height: 22px; border: 2px solid var(--control-border); border-radius: 50%; background: var(--surface); }
.choice__opt[aria-checked="true"] .choice__radio { border-color: var(--primary); }
.choice__opt[aria-checked="true"] .choice__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); animation: ds-pop var(--motion-base) var(--ease-emphasized) both; }
.choice__opt[aria-disabled="true"] .choice__radio { visibility: hidden; }
.badge.choice__now { min-height: 22px; padding: 2px var(--space-2); }
.choice__who { display: inline-flex; align-items: center; gap: 6px; }
.choice__who > .text-caption { color: var(--ink-2); }
@media (max-width: 640px) { .choice { gap: var(--space-3); } .choice__opt { min-height: 64px; } }

/* ===== WaitSlot — ожидание появления объекта (2026-10-15): пунктирное место, где он появится; кольцо цвета --waitslot-line медленно
   вращается. Нажимать ничего не нужно — экран сам перейдёт дальше. <div class="waitslot" role="status" aria-live="polite">
   <span class="waitslot__ava"><svg/></span><span class="cell-stack"><span class="text-label text-strong">Ждём подключения…</span><span class="text-caption">…</span></span></div> ===== */
.waitslot { --waitslot-line: var(--primary); display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px dashed var(--control-border); border-radius: var(--radius-lg); }
.waitslot__ava { position: relative; width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; margin: 4px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); }
.waitslot__ava > svg { width: 20px; height: 20px; }
.waitslot__ava::before { content: ""; position: absolute; inset: -5px; border: 2px dashed var(--waitslot-line); border-radius: 50%; animation: ds-spin 8s linear infinite; }
.waitslot > .cell-stack { min-width: 0; }
@media (max-width: 640px) { .waitslot { gap: var(--space-3); } }
@media (prefers-reduced-motion: reduce) { .waitslot__ava::before { animation: none; } }

/* ===== fixline — тоны (2026-10-15): без модификатора — «смотри сюда» (warn); --danger — сломано; --todo — шаг ещё не сделан (не беда) ===== */
.fixline--danger { background: var(--danger-soft); }
.fixline--danger > svg { color: var(--danger-ink); }
.fixline--todo { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.fixline--todo > svg { color: var(--ink-3); }

/* Ссылка в закрытый человеку раздел (main.js markClosed): выглядит текстом, клик — подсказка «раздел закрыт» вместо «Нет доступа» */
a.lnk-closed, .ds-root a.lnk-closed { color: inherit; text-decoration: none; cursor: default; }
a.lnk-closed:hover, .ds-root a.lnk-closed:hover { color: inherit; text-decoration: none; transform: none; }