/* Редизайн 16.09.2026 под тёмный кабинет (стили сняты с darktelegram.pro и
   перенесены из digitex-social). Токены — HSL-тройки без функции цвета:
   реальный цвет собирается как hsl(var(--t-x) / alpha), одна переменная
   работает с любой прозрачностью. Тёмная тема по умолчанию, светлая —
   переключателем в шапке. Старые имена переменных mlm-crm (--bg, --text,
   --accent, --bad, --sp-*, --s*, --r-*, --h-*) оставлены алиасами: без них
   пришлось бы переписывать инлайн-стили в одиннадцати шаблонах. */

/* Inter лежит локально (static/fonts): внешние шрифты не подключаем — Google
   Fonts из РФ не всегда достаёт. Файл не версионируется в имени, потому что
   не меняется; если когда-нибудь заменим — переименуем сам файл. */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --t-background: 220 30% 6%;
  --t-foreground: 210 20% 92%;
  --t-card: 220 25% 10%;
  --t-surface: 220 24% 11%;
  --t-popover: 220 25% 10%;
  --t-secondary: 220 20% 16%;
  --t-muted: 220 20% 14%;
  --t-muted-foreground: 215 15% 55%;
  --t-border: 220 20% 18%;
  --t-input: 220 20% 18%;
  --t-primary: 110 42% 55%;
  --t-primary-foreground: 220 30% 6%;
  --t-lk-accent-bright: 110 48% 62%;
  --t-ring: 110 42% 55%;
  --t-glow: 110 42% 55%;
  --t-success: 142 71% 45%;
  --t-warning: 45 93% 56%;
  --t-info: 217 91% 60%;
  --t-destructive: 0 84% 60%;
  --t-destructive-bright: 0 91% 71%;
  --t-sidebar-background: 220 25% 8%;
  --t-sidebar-accent: 220 20% 14%;
  --t-sidebar-border: 220 20% 18%;
  --t-scrim: 220 40% 3%;
  --t-on-media: 210 20% 92%;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  /* Алиасы старых имён на новые токены: инлайн-стили шаблонов и два других
     CSS-файла переключаются между темами без переписывания. Внимание: старый
     --muted был цветом ТЕКСТА, --t-muted (HSL) — цветом ФОНА, поэтому у новых
     токенов префикс --t-, а голые имена не переиспользуются. */
  --bg: hsl(var(--t-background));
  --card: hsl(var(--t-card));
  --surface: hsl(var(--t-surface));
  --tint: hsl(var(--t-muted));
  --line: hsl(var(--t-border));
  --line-ctl: hsl(var(--t-input));
  --text: hsl(var(--t-foreground));
  --fg: var(--text);
  --muted: hsl(var(--t-muted-foreground));
  --faint: hsl(var(--t-muted-foreground) / .7);
  --accent: hsl(var(--t-primary));
  --accent-hover: hsl(var(--t-lk-accent-bright));
  --accent-ink: hsl(var(--t-primary-foreground));
  --accent-tint: hsl(var(--t-primary) / .12);
  --bad: hsl(var(--t-destructive));
  --bad-bright: hsl(var(--t-destructive-bright));
  --bad-tint: hsl(var(--t-destructive) / .12);
  --bad-line: hsl(var(--t-destructive) / .25);
  --ok: hsl(var(--t-success));
  --warn-tint: hsl(var(--t-warning) / .14);
  --warn-ink: hsl(var(--t-warning));
  --info: hsl(var(--t-info));
  --a: hsl(var(--t-success));
  --b: hsl(var(--t-warning));
  --c: hsl(var(--t-muted-foreground));
  --ring: 0 0 0 3px hsl(var(--t-ring) / .25);

  /* шрифт: 12 / 13 / 15 / 18 / 24 / 28 — разрыв между ступенями крупный,
     чтобы заголовок страницы и строка таблицы не выглядели одинаковыми */
  --s0: 12px;
  --s1: 13px;
  --s2: 15px;
  --s3: 18px;
  --s4: 24px;
  --s5: 28px;
  /* отступы: 4 / 8 / 12 / 16 / 24 / 32 / 48 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  /* радиусы: контролов 8px, карточек 12px — как у референса */
  --radius: 12px;
  --radius-sm: 8px;
  --r-card: var(--radius);
  --r-ctl: var(--radius-sm);
  --r: var(--r-card);
  --r-sm: var(--r-ctl);
  /* высота контролов: поле, кнопка, селект — одна; small для строк таблиц */
  --h-ctl: 36px;
  --h-sm: 32px;

  --shadow: 0 8px 28px hsl(var(--t-scrim) / .45);
  --glow-soft: 0 0 20px -5px hsl(var(--t-glow) / .15);
  --glow: 0 0 20px -5px hsl(var(--t-glow) / .3);
  --glow-strong: 0 0 30px -5px hsl(var(--t-glow) / .5);

  --side-w: 264px;
  --side-w-narrow: 72px;
  --top-h: 64px;
  --header-h: var(--top-h);

  /* Моноширинный — для адресов и id: цифры и точки должны стоять ровно. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Светлая тема — своя палитра (у референса собственной светлой нет). Светлота
   пересчитана по WCAG: зелёная кнопка и пилюли warning/success с прежними
   значениями давали 2.9–4.1:1 вместо 4.5:1. color-scheme: light обязателен —
   без него браузер в системной тёмной теме перекрашивает поля поверх нашей
   светлой. */
:root[data-theme="light"] {
  color-scheme: light;
  --t-background: 220 20% 97%;
  --t-foreground: 222 47% 11%;
  --t-card: 0 0% 100%;
  --t-surface: 220 20% 98%;
  --t-popover: 0 0% 100%;
  --t-secondary: 220 15% 93%;
  --t-muted: 220 15% 94%;
  --t-muted-foreground: 215 15% 45%;
  --t-border: 220 15% 88%;
  --t-input: 220 15% 88%;
  --t-primary: 110 45% 34%;
  --t-primary-foreground: 0 0% 100%;
  --t-lk-accent-bright: 110 45% 30%;
  --t-ring: 110 45% 34%;
  --t-glow: 110 45% 34%;
  --t-success: 142 60% 26%;
  --t-warning: 38 92% 26%;
  --t-info: 217 80% 48%;
  --t-destructive: 0 72% 44%;
  --t-destructive-bright: 0 72% 40%;
  --t-sidebar-background: 220 20% 98%;
  --t-sidebar-accent: 220 15% 93%;
  --t-sidebar-border: 220 15% 88%;
  --t-scrim: 220 30% 20%;
  --t-on-media: 210 20% 92%;
  --shadow: 0 8px 28px rgb(15 23 42 / .08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg); color: var(--text);
  /* Inter первым — файл лежит локально. Чужие имена и тексты сообщений несут
     эмодзи — без эмодзи-шрифта в стеке они рисуются пустым квадратом. */
  font: var(--s2)/1.5 "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Переходы 150мс — не на всё подряд, а на то, что меняет состояние по
   наведению или клику. Отключаются, если система просит меньше движения. */
a, button, .tab, .pill, .card, .tile, .pick-btn, .pick-opt, .flash-close, tr {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
    box-shadow .15s ease, transform .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  a, button, .tab, .pill, .card, .tile, .pick-btn, .pick-opt, .flash-close, tr { transition: none; }
  .side, .theme-toggle, .side-fold { transition: none; }
  .card:hover, .tile:hover, a.tile:hover { transform: none; }
  .pick-list, .flash { animation: none; }
}
:focus-visible { outline: 2px solid hsl(var(--t-ring)); outline-offset: 2px; }

a { color: inherit; text-decoration: underline; text-decoration-color: hsl(var(--t-muted-foreground) / .5); text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
h1, h2, h3, p { margin: 0; }
code { font: inherit; }
code, .mono { font-family: var(--font-mono); }
.icon { vertical-align: -3px; flex: none; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
.note { color: var(--muted); font-size: var(--s1); line-height: 1.5; }
.bad { color: var(--bad-bright); }

/* --- каркас: боковая панель слева + шапка сверху ---------------------------
   Вкладки строкой в шапке на семи пунктах начинали переноситься. Боковая
   панель тянет сколько угодно пунктов в столбик и сворачивается до значков,
   шапка остаётся под заголовок страницы и переключатель темы. */
body.app {
  margin: 0; min-height: 100vh;
  display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr);
}
body.app > .frame { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
html.side-narrow body.app { grid-template-columns: var(--side-w-narrow) minmax(0, 1fr); }
html.side-narrow .tab-label,
html.side-narrow .side-title,
html.side-narrow .brand-name,
html.side-narrow .who-name {
  display: none;
}
html.side-narrow .side-brand,
html.side-narrow .side .tab {
  justify-content: center;
}
html.side-narrow .side-fold { transform: rotate(180deg); }
/* shell.css даёт подписи пунктов `.side .tab .tab-label { display:
   inline-block }` — три класса сильнее, чем `html.side-narrow .tab-label`, и
   в свёрнутом меню подписи торчали обрезанным текстом поверх столбца. В
   модуле YouTube это уже чинили (его style.css), в панели — нет. */
html.side-narrow .side .tab .tab-label { display: none; }
/* Знак с кнопкой сворачивания и аватар с выходом в узкий столбец строкой не
   влезают и режутся левым краем: ставим их в колонку. */
@media (min-width: 1101px) {
  html.side-narrow .side-brand,
  html.side-narrow .side-foot .who { flex-direction: column; align-items: center; gap: 6px; }
  html.side-narrow .side-brand .brand { flex: none; }
  html.side-narrow .who-out { margin-left: 0; }
}

.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: hsl(var(--t-sidebar-background));
  border-right: 1px solid hsl(var(--t-sidebar-border));
  display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-3); gap: var(--sp-2);
  transition: width .28s var(--ease-drawer);
}
.side-brand { display: flex; align-items: center; gap: 4px; padding: 0 2px var(--sp-3); }
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none;
  white-space: nowrap; color: var(--text); flex: 1; min-width: 0; overflow: hidden;
}
.brand:hover { color: var(--text); text-decoration: none; }
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-ctl); background: var(--accent); flex: none;
}
.mark svg { width: 16px; height: 16px; }
.brand-name { font-weight: 650; font-size: var(--s2); letter-spacing: -0.01em; flex: 1; }
.side-fold {
  flex: none; padding: 5px; border: 0; background: transparent; color: var(--muted);
  height: auto; min-height: 0; transition: transform .2s ease;
}
.side-fold:hover { background: hsl(var(--t-sidebar-accent)); color: var(--text); }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-title {
  font-size: var(--s0); letter-spacing: .12em; text-transform: uppercase;
  color: hsl(var(--t-muted-foreground)); padding: var(--sp-4) var(--sp-3) 6px; font-weight: 600;
}
.side .tab {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 var(--sp-3);
  border-radius: 10px; color: hsl(var(--t-muted-foreground)); font-weight: 500;
  font-size: var(--s2); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
}
.side .tab .icon { color: inherit; }
.side .tab:hover { background: hsl(var(--t-sidebar-accent)); color: hsl(var(--t-foreground)); }
.side .tab.active {
  background: hsl(var(--t-primary) / .12); color: hsl(var(--t-primary));
  border-color: hsl(var(--t-primary) / .35);
}
.tab-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--bad); color: hsl(var(--t-primary-foreground));
  font-size: 11px; font-weight: 600; line-height: 18px; margin-left: auto;
}
.side-foot { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid hsl(var(--t-sidebar-border)); }
.who { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--s1); white-space: nowrap; }
.side-foot .who { display: flex; padding: 4px; }
.who-avatar { width: 26px; height: 26px; font-size: 11px; }
.who-me { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex: 1; color: inherit; text-decoration: none; border-radius: var(--r-ctl); }
.who-me:hover { color: var(--text); }
.who-me:hover .who-name { text-decoration: underline; text-underline-offset: 3px; }
/* Картинка оператора (templates/_face.html): значок линиями на цветной плитке. */
.op-face-wrap { position: relative; display: inline-flex; flex: none; }
.avatar.op-face-g {
  color: oklch(0.97 0.02 var(--h));
  background: linear-gradient(150deg, oklch(0.64 0.13 var(--h)), oklch(0.45 0.12 calc(var(--h) + 35)));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .18);
}
.avatar.op-face-g .face-svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.avatar.op-face-g .face-svg .f { fill: currentColor; stroke: none; }
.op-online {
  position: absolute; right: 2%; bottom: 2%; width: 26%; height: 26%; min-width: 9px; min-height: 9px;
  border-radius: 50%; background: var(--ok); border: 2px solid var(--card);
}
.who-name { overflow: hidden; text-overflow: ellipsis; }
.who-out {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--r-ctl); color: var(--faint); text-decoration: none; margin-left: auto;
}
.who-out:hover { color: var(--text); background: hsl(var(--t-sidebar-accent)); }

.scrim { position: fixed; inset: 0; background: hsl(var(--t-scrim) / .6); z-index: 25; display: none; }
.scrim[hidden] { display: none; }

.top {
  position: sticky; top: 0; z-index: 10; height: var(--top-h);
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-6);
  background: hsl(var(--t-background) / .85); backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--t-border));
}
.top-menu {
  display: none; flex: none; width: 36px; height: 36px; padding: 6px; border: 0;
  background: transparent; color: var(--text);
}
.top-title { min-width: 0; }
.top-h { font-size: var(--s4); font-weight: 700; margin: 0; letter-spacing: -0.01em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-sub { margin: 0; font-size: var(--s1); color: hsl(var(--t-muted-foreground));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-sub:empty { display: none; }
.top-count { font-weight: 400; font-size: var(--s3); color: hsl(var(--t-muted-foreground)); margin-left: 6px; }
.top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.theme-toggle {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid hsl(var(--t-border));
  background: hsl(var(--t-card)); color: hsl(var(--t-muted-foreground));
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.theme-toggle:hover { border-color: hsl(var(--t-primary) / .5); box-shadow: var(--glow-soft); }
:root[data-theme="dark"] .theme-moon,
:root[data-theme="light"] .theme-sun { display: none; }

main { max-width: 1280px; width: 100%; margin: 0 auto; padding: var(--sp-6) var(--sp-6) 96px; }
[id] { scroll-margin-top: var(--header-h); }

/* --- заголовок страницы внутри контента ---------------------------------- */
h1 { font-size: var(--s5); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
h2 { font-size: var(--s3); font-weight: 600; letter-spacing: -0.005em; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.page-head h1 { font-size: var(--s5); }
.page-head h1 .count { color: var(--faint); font-weight: 500; margin-left: var(--sp-2); font-size: var(--s4); }
.page-head .lead { color: var(--muted); flex: 0 0 100%; margin-top: calc(-1 * var(--sp-2)); max-width: 70ch; }
.page-head .tools { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.page-head .who { font-size: var(--s2); }

/* Заголовок раздела внутри страницы: между h1 и капсом карточки. */
.section-head { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--s3); font-weight: 600; margin: var(--sp-8) 0 var(--sp-3); }
.section-head:first-child { margin-top: 0; }
.section-head .count { color: var(--faint); font-weight: 500; }
.section-head + .note { margin: calc(-1 * var(--sp-1)) 0 var(--sp-3); }

/* --- аватар ---------------------------------------------------------------- */
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; overflow: hidden; background: var(--tint); vertical-align: middle; }
/* Картинка лежит поверх инициалов: не загрузилась — onerror её убирает. */
.avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--tint); }
.avatar-text { font-weight: 600; letter-spacing: 0.02em; color: hsl(var(--h, 210) 35% 32%); background: hsl(var(--h, 210) 45% 90%); }
.person-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.person-cell > div { min-width: 0; }
.person-cell .name { font-weight: 500; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-cell .name:hover { text-decoration: underline; }
.person-cell .sub { display: block; color: var(--muted); font-size: var(--s0); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- плитки-показатели: значок в круге, крупное число, подпись ------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); align-items: stretch; }
/* Плитка с числом не тянется во всю ширину: на широком экране четыре
   значения расползались на полтора метра, а после того как пустые плитки
   перестали показываться, две оставшиеся занимали по половине страницы.
   Верхняя граница держит их одного размера при любом числе. */
.tiles-quad { grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); gap: var(--sp-3); justify-content: start; }
a.tile { text-decoration: none; color: inherit; }
a.tile:hover { color: inherit; }
.tile { padding: 18px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.tile.over, .tile.bad { border-color: hsl(var(--t-destructive) / .3); }
.tile.active { border-color: hsl(var(--t-primary) / .6); box-shadow: var(--glow); }
.tile.tile-row { flex-direction: row; align-items: center; gap: var(--sp-4); }
.tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: hsl(var(--t-primary) / .12); color: var(--accent); flex: none;
  font-size: var(--s3); font-weight: 700;
}
.tile-body { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.tile-value { display: block; font-size: var(--s4); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.tile-label { display: block; font-size: var(--s1); color: var(--muted); line-height: 1.35; }
.tile-hint { font-size: var(--s0); color: var(--muted); margin-top: auto; padding-top: 6px; opacity: .85; }

/* --- счётчики-фильтры пилюлями (диалоги рассылки) -------------------------- */
.summary { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.summary a, .summary span.stat {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 var(--sp-3);
  border: 1px solid var(--line-ctl); border-radius: 999px; background: var(--card);
  text-decoration: none; font-size: var(--s1); color: var(--text);
}
.summary a:hover { background: var(--tint); border-color: hsl(var(--t-primary) / .5); }
.summary a.on { border-color: hsl(var(--t-primary) / .5); background: hsl(var(--t-primary) / .08); color: var(--text); box-shadow: var(--glow-soft); }
.summary a.on .l, .summary a.on .icon, .summary a.on .tier { color: inherit; }
.summary .n { font-weight: 600; }
.summary .l { color: var(--muted); }

/* --- свой выпадающий список ------------------------------------------------ */
.pick { position: relative; display: inline-block; }
.pick-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.pick-btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left; font-weight: 400; color: var(--muted); }
.pick.set > .pick-btn { color: var(--text); }
.pick-btn .icon { margin-left: auto; color: var(--muted); }
.pick.open > .pick-btn { border-color: var(--accent); }
.pick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-list {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-width: min(420px, calc(100vw - 32px)); max-height: 300px; overflow-y: auto; overflow-x: hidden; padding: var(--sp-1);
  background: hsl(var(--t-popover)); border: 1px solid var(--line-ctl); border-radius: var(--r-card);
  box-shadow: var(--shadow);
  animation: enter .15s var(--ease-out);
}
@keyframes enter { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.pick.pick-flip > .pick-list { left: auto; right: 0; }
.pick-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pick-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 6px 10px; border-radius: var(--r-ctl); white-space: nowrap; cursor: pointer; font-size: var(--s2); }
.pick-opt:hover { background: hsl(var(--t-muted) / .7); }
.pick-opt .icon { visibility: hidden; color: var(--accent); }
.pick-opt.here { background: var(--tint); }
.pick-opt.on { color: var(--accent); font-weight: 500; background: hsl(var(--t-primary) / .12); }
.pick-opt.on .icon { visibility: visible; }
label.field .pick { display: block; }

/* --- всплывающее окно результата ---------------------------------------------
   Маленькое окно поверх страницы, справа под шапкой: страница под ним не
   сдвигается, кнопки шапки не закрывает. Цвет несёт только значок и полоса слева, текст обычный. */
.flash {
  position: fixed; z-index: 90; top: calc(var(--top-h) + var(--sp-3)); right: var(--sp-4);
  width: min(360px, calc(100vw - 2 * var(--sp-4)));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--sp-2);
  padding: 10px 8px 10px 12px; border-radius: var(--r-card); overflow: hidden;
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-size: var(--s2); line-height: 1.4;
  transition: opacity .16s ease, transform .18s var(--ease-out);
}
.flash::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--flash-c, var(--muted)); }
.flash.is-leaving { opacity: 0; transform: translateX(8px); pointer-events: none; }
.flash span { display: contents; }
.flash span > .icon { color: var(--flash-c, var(--muted)); margin-top: 1px; }
.flash-text { overflow-wrap: anywhere; min-width: 0; }
.flash-text::first-letter { text-transform: uppercase; }
.flash-ok { --flash-c: hsl(var(--t-success)); }
.flash-error { --flash-c: hsl(var(--t-destructive)); }
.flash-info { --flash-c: hsl(var(--t-primary)); }
/* Сколько окну осталось: тонкая полоса внизу, на наведении замирает. */
.flash-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--flash-c); opacity: .5; transform-origin: left; }
.flash:hover .flash-timer { animation-play-state: paused; }
@keyframes flash-timer { to { transform: scaleX(0); } }
.flash-close { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 2px; height: auto; min-height: 0; border-radius: var(--r-ctl); line-height: 0; }
.flash-close:hover { color: var(--text); background: var(--tint); }
@media (prefers-reduced-motion: no-preference) {
  .flash { animation: flash-in .22s var(--ease-out); }
}
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .flash.is-leaving { transform: none; }
}
@media (max-width: 640px) {
  .flash { right: var(--sp-4); left: var(--sp-4); width: auto; }
}

/* --- карточки и колонки ------------------------------------------------------ */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-6); }
.card + .card { margin-top: var(--sp-6); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); margin-bottom: var(--sp-6); }
.cols > .card { margin-top: 0; }
.card h2, .cap { font-size: var(--s0); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--sp-4); line-height: 1.4; }
.card h2:not(:first-child) { margin-top: var(--sp-8); }
/* Кликабельная карточка ведёт себя как кнопка: рамка зеленеет, свечение, подъём. */
.card.clickable, a.tile { cursor: pointer; }
.card.clickable:hover {
  border-color: hsl(var(--t-primary) / .5);
  box-shadow: var(--glow-soft), var(--shadow); transform: translateY(-2px);
}
/* Панель настроек (фильтры) — не кликабельная плитка: без подъёма и свечения. */
.card.static:hover { transform: none; box-shadow: none; border-color: var(--line); }
.filters-card { display: block; margin-bottom: var(--sp-4); }
.filters-card .filters { margin-bottom: 0; }
.empty { color: var(--muted); text-align: center; padding: var(--sp-12) var(--sp-6); }
.warn {
  position: relative; padding: 10px var(--sp-4); border-radius: var(--r-card);
  background: var(--warn-tint); border-left: 3px solid hsl(var(--t-warning) / .6);
  color: var(--text); margin-top: var(--sp-3); overflow-wrap: anywhere;
}
.warn-inline { color: var(--warn-ink); }

/* --- таблицы: без рамки-коробки, только разделители строк ------------------- */
table { width: 100%; border-collapse: collapse; background: transparent; font-size: var(--s1); line-height: 1.4; }
th, td { padding: 9px var(--sp-3); text-align: left; vertical-align: middle; border-bottom: 1px solid hsl(var(--t-border) / .6); }
th:first-child, td:first-child { padding-left: var(--sp-2); }
th:last-child, td:last-child { padding-right: var(--sp-2); }
th { font-size: var(--s0); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 0; padding-bottom: var(--sp-2); white-space: nowrap; border-bottom-color: var(--line); }
tbody tr:hover td { background: hsl(var(--t-muted) / .5); }
tbody tr:hover td:first-child { border-top-left-radius: var(--r-ctl); border-bottom-left-radius: var(--r-ctl); }
tbody tr:hover td:last-child { border-top-right-radius: var(--r-ctl); border-bottom-right-radius: var(--r-ctl); }
td.num, th.num { text-align: right; }
td .sub { display: block; color: var(--muted); font-size: var(--s0); margin-top: 2px; }
td a.name { font-weight: 500; text-decoration: none; }
td a.name:hover { text-decoration: underline; }
td.empty { padding: var(--sp-12) var(--sp-6); }
tr:hover td.empty { background: transparent; }
table + .card, .card + table { margin-top: var(--sp-6); }

/* --- метки: точка, уровень, состояние ------------------------------------- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); vertical-align: 1px; flex: none; }
.dot-ready, .dot-done, .dot-ok { background: var(--a); }
.dot-running, .dot-queued { background: var(--info); }
.dot-selected, .dot-created { background: var(--c); }
.dot-stopped { background: var(--b); }
.dot-bad { background: var(--bad); }
.dot-new { background: hsl(var(--t-border)); }
.state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.state .icon { flex: none; }
.mark-ready { color: var(--accent); }
.mark-queued { color: var(--muted); }
td.flag { width: 72px; text-align: center; }
th.flag { text-align: center; }
.tier { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--s1); letter-spacing: 0.02em; }
.tier-A { color: var(--a); } .tier-A .dot { background: var(--a); }
.tier-B { color: var(--b); } .tier-B .dot { background: var(--b); }
.tier-C { color: var(--c); } .tier-C .dot { background: var(--c); }
.pill {
  display: inline-flex; align-items: center; height: 20px; font-size: var(--s0); font-weight: 600;
  padding: 0 var(--sp-2); border-radius: 999px; background: var(--tint); color: var(--muted);
  vertical-align: middle; white-space: nowrap; border: 1px solid transparent;
}
.pill-warn { background: hsl(var(--t-warning) / .12); border-color: hsl(var(--t-warning) / .25); color: var(--b); }
.pill-ok { background: hsl(var(--t-success) / .12); border-color: hsl(var(--t-success) / .25); color: var(--a); }
.pill-bad { background: hsl(var(--t-destructive) / .12); border-color: hsl(var(--t-destructive) / .25); color: var(--bad-bright); }
.pill-flat { background: var(--tint); color: var(--muted); }

/* --- каналы связи ------------------------------------------------------------ */
.channels { display: inline-flex; gap: 2px; align-items: center; color: var(--text); }
.channels .icon-channel { color: var(--muted); }
.channels a, .channels > .icon-channel { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--r-ctl); }
.channels a:hover { background: var(--tint); }
.channels a.strong .icon-channel { color: var(--accent); }
td.channels-cell { width: 164px; }
.contact-kind { display: block; margin-top: 2px; color: var(--muted); font-size: var(--s0); line-height: 1.3; white-space: nowrap; }
table.people td { padding-top: 10px; padding-bottom: 10px; font-size: var(--s2); }
table.people td.flag { width: 40px; }

/* Контакт в карточке: значок | адрес | состояние | кнопки. */
.contact { display: grid; grid-template-columns: 20px minmax(0, 1fr) max-content max-content; align-items: center; gap: var(--sp-3); min-height: 44px; padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); }
.contact:last-of-type { border-bottom: 0; }
.contact .icon-channel { color: var(--muted); justify-self: center; }
.contact.strong .icon-channel { color: var(--accent); }
.contact .value, .contact .value a { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact .value a { text-decoration: none; }
.contact .value a:hover { text-decoration: underline; }
.contact .meta { color: var(--muted); font-size: var(--s1); white-space: nowrap; }
/* Все пометки контакта в одном grid-слоте, иначе при двух пометках сразу
   кнопки съезжают на свою строку. */
.contact .badges { display: inline-flex; align-items: center; gap: var(--sp-2); }
.contact .tools { display: inline-flex; gap: 2px; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 0; padding: 0;
  border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--muted); cursor: pointer;
}
.iconbtn:hover { background: var(--tint); color: var(--text); }
.iconbtn.copied { color: var(--accent); }
a.iconbtn { text-decoration: none; }

/* --- полосы «сделано из потолка» --------------------------------------------- */
.bar-row { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 110px; }
.bar-text { font-size: var(--s1); color: var(--muted); white-space: nowrap; }
.bar { display: block; height: 4px; border-radius: 2px; background: var(--tint); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.bar-full > span { background: var(--b); }
.bars { display: flex; flex-direction: column; gap: var(--sp-4); }
.bars .bar-row { min-width: 0; gap: 6px; }
.bars .bar-text { display: flex; justify-content: space-between; color: var(--text); font-size: var(--s2); }
.bars .bar-text .muted { color: var(--muted); }
.bars .bar { height: 6px; border-radius: 3px; }

/* --- цитата, причина, черновик ------------------------------------------------ */
.reason { padding: var(--sp-3) var(--sp-4); background: var(--accent-tint); border-left: 3px solid var(--accent); border-radius: var(--r-ctl); font-size: var(--s2); line-height: 1.55; color: var(--text); }
.evidence { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.evidence:first-of-type { padding-top: 0; }
.evidence:last-child { border-bottom: 0; padding-bottom: 0; }
.evidence .head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); min-height: 28px; }
.evidence .head b { font-weight: 600; }
.evidence .head .iconbtn { margin-left: auto; }
.evidence .head .muted { font-size: var(--s1); }
.evidence .where { color: var(--faint); font-size: var(--s0); margin-left: auto; white-space: nowrap; }
blockquote {
  margin: 0; padding: 10px var(--sp-3); background: var(--tint); border-radius: var(--r-ctl);
  color: var(--text); white-space: pre-wrap; font-size: var(--s1); line-height: 1.5;
  overflow-wrap: anywhere;
}
textarea {
  width: 100%; font: inherit; line-height: 1.55; padding: 10px var(--sp-3); color: var(--text);
  border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); background: hsl(var(--t-input) / .35);
  resize: vertical; min-height: 120px; overflow-wrap: break-word;
}
textarea:focus { outline: 0; border-color: hsl(var(--t-ring)); box-shadow: var(--ring); }
textarea[readonly] { background: var(--tint); color: var(--text); border-color: transparent; }
.draft-form { display: flex; flex-direction: column; }
.draft-toolbar { display: flex; align-items: center; min-height: var(--h-sm); margin-bottom: var(--sp-2); }
.draft-toolbar .ghost { margin-left: auto; }
.draft-language { color: var(--muted); font-size: var(--s1); }
.draft-translation {
  max-width: 75ch; margin: 0 0 var(--sp-4); color: var(--text);
  font-size: var(--s3); font-weight: 500; line-height: 1.55; white-space: pre-wrap;
}
.draft-original { min-height: 120px; font-size: var(--s2); color: var(--muted); }
.draft-original:focus { color: var(--text); }
.draft-original-main { color: var(--text); font-size: var(--s3); }
.draft-warning { margin-top: var(--sp-2); color: var(--warn-ink); font-size: var(--s1); line-height: 1.45; }
.draft-warning b { font-weight: 600; }
.revision { padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.revision pre { white-space: pre-wrap; font: inherit; margin: 6px 0 0; color: var(--text); }
details summary { cursor: pointer; color: var(--muted); font-size: var(--s1); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .icon { transform: rotate(180deg); }
details.drop { margin-top: var(--sp-4); }
details.more { margin-top: var(--sp-2); }
details.more summary { padding: 6px 0; }
details.more[open] summary { margin-bottom: var(--sp-2); }

/* Русский подстрочник под иностранным текстом: оператор не знает урду
   и арабского, а решение принимает он. */
.translation { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); background: var(--tint); color: var(--muted); font-size: var(--s1); line-height: 1.5; border-radius: var(--r-ctl); }
.translation .tag { display: inline-block; margin-right: var(--sp-2); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }

/* --- формы и кнопки ------------------------------------------------------------ */
input[type=text], input[type=number], input[type=password], input[type=url], input[type=email], input[type=search], input:not([type]), select {
  font: inherit; color: var(--text); padding: 0 var(--sp-3); height: var(--h-ctl);
  border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); background: hsl(var(--t-input) / .35);
  -webkit-text-fill-color: currentColor;
}
input:focus, select:focus { outline: 0; border-color: hsl(var(--t-ring)); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: hsl(var(--t-muted-foreground) / .8); -webkit-text-fill-color: hsl(var(--t-muted-foreground) / .8); opacity: 1; }
select { padding-right: 32px; appearance: none; -webkit-appearance: none; text-overflow: ellipsis;
  /* Стрелка — единственный хекс в data-URI (SVG не умеет current-color без
     инлайна): тон под тёмную тему, светлая переопределяет ниже. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%237b899d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4.5 6 8 10 11.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px;
}
:root[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23627084' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4.5 6 8 10 11.5 6'/%3E%3C/svg%3E");
}
input[type=file] { font: inherit; font-size: var(--s1); color: var(--muted); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: hsl(var(--t-primary)); vertical-align: -3px; margin: 0; }
label.field, span.field { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: var(--s1); color: var(--muted); }
label.field input, label.field select { color: var(--text); }

/* Кнопки: обычная (secondary), primary (заливка), ghost (без рамки),
   danger (красная). Цвет задаём явно — иначе браузер на телефоне в тёмной
   теме берёт системный и кнопка выглядит пустой. */
button, .button {
  font: inherit; font-size: var(--s2); font-weight: 500; height: var(--h-ctl); padding: 0 14px; cursor: pointer; white-space: nowrap;
  border: 1px solid hsl(var(--t-border)); border-radius: var(--r-ctl);
  background: hsl(var(--t-secondary)); color: var(--text); -webkit-text-fill-color: currentColor;
  appearance: none; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:hover, .button:hover { background: hsl(var(--t-muted) / .7); border-color: hsl(var(--t-primary) / .5); }
@media (prefers-reduced-motion: no-preference) {
  button:active, .button:active { transform: scale(.98); }
}
button:focus-visible, .button:focus-visible { outline: 0; box-shadow: var(--ring); border-color: hsl(var(--t-ring)); }
button:disabled, .button:disabled { opacity: .55; cursor: default; }
button.primary, .button.primary {
  background: var(--accent); color: var(--accent-ink); -webkit-text-fill-color: var(--accent-ink);
  border-color: transparent; font-weight: 600; box-shadow: var(--glow-soft);
}
button.primary:hover, .button.primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
  color: var(--accent-ink); -webkit-text-fill-color: var(--accent-ink); box-shadow: var(--glow);
}
button.danger {
  border-color: transparent; background: hsl(var(--t-destructive) / .12);
  color: var(--bad-bright); -webkit-text-fill-color: var(--bad-bright);
}
button.danger:hover { background: hsl(var(--t-destructive) / .2); }
button.ghost, .button.ghost { border-color: transparent; background: transparent; color: var(--muted); box-shadow: none; }
button.ghost:hover, .button.ghost:hover { color: var(--text); background: var(--tint); }
button.small, .button.small { height: var(--h-sm); padding: 0 10px; font-size: var(--s1); }

/* Частые hover-состояния должны быть спокойными. Движение оставляем только
   точным указателям; на touch оно иначе «залипает» после нажатия. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a.tile:hover {
    border-color: hsl(var(--t-primary) / .42);
    box-shadow: var(--glow-soft);
    transform: translateY(-1px);
  }
}
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-4); }
.actions form { margin: 0; display: inline-flex; gap: var(--sp-2); }
.actions .spacer { flex: 1; }
.actions .note { margin-left: var(--sp-1); }
.actions-danger { border-top: 1px solid var(--line); margin-top: var(--sp-6); padding-top: var(--sp-4); }
.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.filters select { min-width: 150px; }
.inline-form { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.inline-form input[type=text] { min-width: 200px; }
.inline-form .field input[type=number] { width: 120px; }
.row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
form.row { margin: 0; }

/* --- выпадающий список ссылок («Скачать») -------------------------------------- */
.menu { position: relative; }
.menu > summary {
  height: var(--h-ctl); padding: 0 var(--sp-3); border: 1px solid hsl(var(--t-border)); border-radius: var(--r-ctl);
  color: var(--text); font-size: var(--s2); font-weight: 500; background: hsl(var(--t-secondary));
}
.menu > summary:hover { background: hsl(var(--t-muted) / .7); border-color: hsl(var(--t-primary) / .5); }
.menu[open] > summary .icon { transform: none; }
.menu .items {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 180px;
  background: hsl(var(--t-popover)); border: 1px solid var(--line-ctl); border-radius: var(--r-card);
  padding: var(--sp-1); display: flex; flex-direction: column; box-shadow: var(--shadow);
  animation: enter .15s var(--ease-out);
}
.menu .items a { padding: 6px 10px; text-decoration: none; border-radius: var(--r-ctl); white-space: nowrap; }
.menu .items a:hover { background: hsl(var(--t-muted) / .7); }

/* --- постраничная полоса --------------------------------------------------------- */
.paging { display: flex; gap: var(--sp-1); align-items: center; margin-top: var(--sp-4); color: var(--muted); font-size: var(--s1); }
.paging .range { margin-right: auto; }
.paging a, .paging b, .paging span.gap {
  min-width: 32px; height: 32px; padding: 0 6px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--r-ctl); text-decoration: none;
  border: 1px solid transparent;
}
.paging a { border-color: hsl(var(--t-border)); background: hsl(var(--t-secondary)); }
.paging a:hover { border-color: hsl(var(--t-primary) / .5); background: hsl(var(--t-muted) / .7); color: var(--text); }
.paging b { background: hsl(var(--t-primary)); color: var(--accent-ink); font-weight: 600; }
.paging span.gap { color: var(--muted); }

/* --- карточка человека ------------------------------------------------------------ */
.person-head { display: flex; justify-content: space-between; gap: var(--sp-6); align-items: center; margin-bottom: var(--sp-6); }
.person-head .person-cell { gap: var(--sp-4); }
.person-head h1 { font-size: var(--s5); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; white-space: normal; overflow: visible; }
.person-head .sub { color: var(--muted); margin-top: 6px; }
.person-head .meta { display: flex; flex-wrap: wrap; gap: 6px var(--sp-3); align-items: center; color: var(--muted); margin-top: var(--sp-1); font-size: var(--s1); }
.person-head .meta .channels { gap: 0; margin-left: calc(-1 * var(--sp-1)); }
.person-head .lang { font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); padding: 0 5px; line-height: 18px; }
.person-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); flex: none; }
.person-side .owner { justify-content: flex-end; }
.person-side .warn { margin: 0; font-size: var(--s1); padding: var(--sp-2) var(--sp-3); }
.platform { display: flex; align-items: center; gap: var(--sp-3); min-height: 36px; padding: 0; }
.platform .icon-channel { color: var(--muted); width: 20px; }
.platform a { text-decoration: none; }
.platform a:hover { text-decoration: underline; }
.platform .meta { color: var(--muted); font-size: var(--s1); margin-left: auto; white-space: nowrap; }
.reason-block { margin-bottom: var(--sp-6); }
.reason-block h2 { font-size: var(--s0); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--sp-2); }

/* --- поиски -------------------------------------------------------------------------- */
.pair b { font-weight: 500; display: block; }
.pair span { color: var(--muted); font-size: var(--s0); }
.pair .channels { vertical-align: middle; }
td.progress { width: 130px; }
td.outcome { max-width: 180px; font-size: var(--s1); }
td.actions-cell { text-align: right; white-space: nowrap; }
td.actions-cell form { display: inline-flex; }
td.progress-cell { width: 260px; }
.run-progress { min-width: 180px; }
.run-progress .main { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--s1); line-height: 1.4; }
.run-progress .main b { font-weight: 600; }
.run-progress .bar { margin: 6px 0; }
.run-progress .sub { color: var(--muted); font-size: var(--s0); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-list { max-height: 132px; overflow-y: auto; margin-top: var(--sp-2); }
.project-line { margin: 0; padding: 2px 0; font-size: var(--s1); line-height: 1.3; color: var(--muted); }

/* Площадки в форме нового поиска: чипы со значком, выбранная — акцентная.
   Родной чекбокс остаётся в форме и для клавиатуры, рисуем только обёртку. */
.checks { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.checks label {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 var(--sp-3) 0 10px;
  border: 1px solid var(--line-ctl); border-radius: 999px; background: var(--card); color: var(--muted);
  font-size: var(--s1); font-weight: 500; cursor: pointer; user-select: none;
}
.checks label:hover { background: var(--tint); }
.checks label input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.checks label .icon-channel { color: var(--faint); }
.checks label:has(:checked) { background: hsl(var(--t-primary) / .12); border-color: hsl(var(--t-primary) / .5); color: var(--accent); }
.checks label:has(:checked) .icon-channel { color: var(--accent); }
.checks label:has(:focus-visible) { box-shadow: var(--ring); }
.checks label:has(:disabled) { opacity: .45; cursor: default; }
.checks label:has(:disabled) input { cursor: default; }

/* --- двойники -------------------------------------------------------------------------- */
.case { margin-bottom: var(--sp-6); }
.case .matched { display: flex; flex-wrap: wrap; gap: 6px var(--sp-4); align-items: center; color: var(--muted); font-size: var(--s1); }
.case .matched .hit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--text); }
.case .matched + .note { margin-top: var(--sp-2); }
.case .cols { margin: var(--sp-4) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.case h3 { font-size: var(--s3); font-weight: 600; }
.case h3 a { text-decoration: none; }
.case h3 a:hover { text-decoration: underline; }
.case .sub { color: var(--muted); font-size: var(--s1); margin: 2px 0 0; }
.case .person-cell { margin-bottom: var(--sp-3); }
.case .line { display: flex; align-items: center; gap: var(--sp-2); min-height: 28px; min-width: 0; overflow-wrap: anywhere; }
.case .line .icon-channel { color: var(--muted); }

/* --- расход ------------------------------------------------------------------------------ */
.bignum { font-size: var(--s4); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.bignum-row { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.bignum-row .label { color: var(--muted); font-size: var(--s1); margin-bottom: var(--sp-1); }

/* --- воронка рассылки: полосы вместо квадратов с цифрами --------------------------------- */
.funnel { display: flex; flex-direction: column; gap: var(--sp-2); }
.funnel-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 40px; gap: var(--sp-3); align-items: center; }
.funnel .l { font-size: var(--s1); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.funnel .l:hover { text-decoration: underline; }
.funnel .track { height: 8px; border-radius: 4px; background: var(--tint); overflow: hidden; }
.funnel .track span { display: block; height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; }
.funnel .track.warn span { background: var(--b); }
.funnel .track.bad span { background: var(--bad); }
.funnel .n { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.funnel .n.zero { color: var(--faint); font-weight: 500; }
.stat-line { display: flex; flex-wrap: wrap; gap: 6px var(--sp-6); color: var(--muted); font-size: var(--s1); }
.stat-line b { color: var(--text); font-weight: 600; font-size: var(--s2); }
.status-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); align-items: center; margin: calc(-1 * var(--sp-3)) 0 var(--sp-6); color: var(--muted); font-size: var(--s1); }
.status-row .state { color: var(--text); }
.status-row + .card, .status-row + table { margin-top: 0; }

/* --- проекты: список, карточка проекта, выбор стран -------------------------------------------- */
.crumbs { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); font-size: var(--s1); }
.crumbs a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.crumbs a:hover { color: var(--text); }
.card-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.card-head h2 { margin: 0; }
.card-head .chosen { color: var(--muted); font-size: var(--s1); margin-left: auto; }
.pick-countries.has-choice .card-head .chosen { color: var(--accent); font-weight: 500; }
.pick-countries .presets { margin: 0 0 var(--sp-4); }
.pick-countries .region { margin-bottom: var(--sp-4); }
.pick-countries .region h3 { margin: 0 0 var(--sp-2); font-size: var(--s1); font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.pick-countries label.was { border-style: dashed; }
.pick-countries label.was .icon { color: var(--accent); width: 12px; height: 12px; }
.field-inline { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: var(--sp-3); }
.field-inline > span.lbl { font-weight: 400; color: var(--muted); font-size: var(--s1); display: inline-flex; align-items: center; gap: 6px; }
.add-project > summary { font-weight: 500; }
.add-project .bulk { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.add-project .bulk > summary { color: var(--muted); font-size: var(--s1); }
table.projects td.pair a { text-decoration: none; }
table.projects td.pair a:hover b { color: var(--accent); }
table.projects .countries { display: block; font-size: var(--s1); margin-top: 2px; }
table.compact th, table.compact td { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
a.btn { display: inline-flex; align-items: center; gap: 6px; height: var(--h-ctl); padding: 0 var(--sp-3); border: 1px solid var(--line-ctl); border-radius: var(--r-ctl); color: var(--text); text-decoration: none; white-space: nowrap; }
a.btn:hover { background: hsl(var(--t-muted) / .7); border-color: hsl(var(--t-primary) / .5); }
a.btn.small { height: 30px; font-size: var(--s1); }
.ask .big { font-size: var(--s3); line-height: 1.4; margin: 0 0 var(--sp-4); }
.filter-line { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
/* Блок после карточки не должен к ней прилипать: у <p> и <div> своего
   верхнего отступа нет, а .card + .card его даёт только карточкам. */
.card + .filter-line, .card + .cols, .card + table, .tiles + .filter-line { margin-top: var(--sp-6); }
/* Форма в карточке и таблица под ней — разные разделы страницы, и слипаться
   им нельзя. Блок таблицы собран классами Tailwind, своего отступа у него
   нет, поэтому он приходит отсюда. */
.tiles + .card, .tiles + .warn, .tiles + .note { margin-top: var(--sp-6); }
.table-block { margin-top: var(--sp-6); }
.filter-line + table { margin-top: 0; }
.limit-form { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.limit-form input { width: 96px; }
.filter-line input { width: min(340px, 100%); }
.filter-line .muted { font-size: var(--s1); }
.more-countries > summary { color: var(--muted); font-size: var(--s1); margin: var(--sp-3) 0; }
.more-countries[open] > summary { margin-bottom: var(--sp-4); }
.form-grid .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-grid .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.form-grid details.limits > summary { color: var(--muted); font-size: var(--s1); margin-bottom: var(--sp-3); }
table.runs .outcome { display: block; font-size: var(--s1); margin-top: 2px; }
table.runs td.pair a { text-decoration: none; }
table.runs td.pair a:hover b { color: var(--accent); }
.run-progress .main { display: flex; justify-content: space-between; gap: var(--sp-3); }

/* --- формы настроек: подпись, поле, подсказка ---------------------------------------------- */
.form-grid { display: grid; gap: var(--sp-6); }
.form-grid .field { gap: 6px; }
.form-grid .field > span.lbl { color: var(--text); font-weight: 500; font-size: var(--s2); }
.form-grid .hint { color: var(--muted); font-size: var(--s1); line-height: 1.45; margin-top: -2px; }
.form-grid textarea { min-height: 0; }
.form-grid input[type=text], .form-grid input[type=url], .form-grid input[type=email], .form-grid input[type=number], .form-grid input[type=password], .form-grid input:not([type]) { width: 100%; }
.form-grid h2 { margin: 0; padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.form-grid h2:first-child { padding-top: 0; border-top: 0; }
.form-grid .actions { margin-top: 0; }
.form-grid .meta { color: var(--faint); font-size: var(--s0); }
details.card > summary { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--s2); font-weight: 500; color: var(--text); }
details.card > summary .hint { color: var(--muted); font-size: var(--s1); font-weight: 400; }
details.card > summary h2 { margin: 0; display: inline; }
details.card > summary .icon { margin-left: auto; color: var(--faint); }
details.card[open] > summary { margin-bottom: var(--sp-4); }
.cols > details.card { align-self: start; }

/* --- согласование: строка с текстом и подстрочником ------------------------------------------ */
.approve-row td { vertical-align: top; }
.approve-text { white-space: pre-wrap; font-size: var(--s1); color: var(--text); max-width: 60ch; }
.approve-text + .translation { max-width: 60ch; font-size: var(--s1); }
.check-col { width: 32px; }

/* --- журнал ---------------------------------------------------------------------------------- */
.log-what b { font-weight: 500; }
td.when { white-space: nowrap; width: 110px; }
.line.unread { font-weight: 500; }
.line.unread::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 2px; }
.card > .line { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--s1); }
.card > .line:last-of-type { border-bottom: 0; }

/* --- шаги подключения аккаунта: полоска вместо абзаца ------------------------------------------ */
.steps { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-6); padding: 0; list-style: none; counter-reset: step; }
.steps li { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--h-sm); padding: 0 var(--sp-3) 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: var(--s1); color: var(--muted); }
.steps li::before { counter-increment: step; content: counter(step); display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-weight: 600; font-size: 11px; }

/* Кто ведёт карточку: состояние, метка и кнопка в одну строку. */
.owner { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.owner form { margin: 0; display: inline-flex; gap: var(--sp-2); }
.owner .state { margin-right: var(--sp-2); }
.owner select { width: 160px; }
.owner button { height: var(--h-sm); padding: 0 10px; font-size: var(--s1); }

/* --- живой / мёртвый контакт ------------------------------------------------------------------- */
.alive { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--s0); font-weight: 500; white-space: nowrap; }
.alive-ok { color: var(--accent); }
.alive-no { color: var(--bad-bright); }
.alive .icon { stroke-width: 2.2; }
.alive-text { font-weight: 500; }

/* --- диалоги: сетка список | лента | карточка (детали — в outreach.css) --------------------------- */
.dialogs { display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px; gap: var(--sp-6); align-items: start; }
.dialog-list { display: flex; flex-direction: column; max-height: 75vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.dialog-list .empty { padding: var(--sp-6); }
.dialog-thread { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 40vh; }
.dialog-reply { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.dialog-reply textarea { min-height: 88px; }
.dialog-card { position: sticky; top: calc(var(--top-h) + var(--sp-6)); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--card); }
.dialog-card h2 { font-size: var(--s3); font-weight: 600; margin: 0; }
.dialog-card p { margin: 0; }
.dialog-card .inline-form { flex-direction: column; align-items: stretch; margin-top: var(--sp-2); }
.dialog-card .field .hint { font-weight: 400; }
.dialog-back { display: none; }

/* --- вход ---------------------------------------------------------------------------------------- */
.login-page {
  display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: var(--sp-6);
  /* Мягкое пятно за карточкой, как у референса: не заливка на весь экран. */
  background:
    radial-gradient(600px 300px at 50% 0%, hsl(var(--t-primary) / .12), transparent),
    var(--bg);
}
.login {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--glow), var(--shadow);
  padding: var(--sp-8); width: 380px; max-width: 100%;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.login h1 { font-size: var(--s3); font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: var(--sp-2); }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand .mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, hsl(var(--t-primary)), hsl(var(--t-lk-accent-bright)));
}
.login label { display: flex; flex-direction: column; gap: 4px; font-size: var(--s1); color: var(--muted); }
.login .lead { color: var(--muted); font-size: var(--s1); margin: calc(-1 * var(--sp-2)) 0 var(--sp-2); }
.login input { width: 100%; height: 40px; }
.login button { height: 40px; justify-content: center; margin-top: var(--sp-1); }
.login .error { color: var(--bad-bright); font-size: var(--s1); margin: 0; }
.login-forgot { font-size: var(--s0); color: var(--muted); text-align: center; }
.login-forgot > summary { list-style: none; cursor: pointer; }
.login-forgot > summary::-webkit-details-marker { display: none; }
.login-forgot > summary:hover { color: var(--text); }
.login-forgot p { margin: 8px 0 0; text-align: left; line-height: 1.45; }
.login-forgot code { font-size: .95em; padding: 1px 4px; border-radius: 4px; background: var(--tint); color: var(--text); }

/* Печать: интерфейс тёмный по умолчанию, а бумага не должна выйти чёрным
   листом. Панель и шапка на бумаге не нужны. */
@media print {
  * { box-shadow: none !important; text-shadow: none !important; background: transparent !important; }
  body, .card, .tile { color: hsl(0 0% 0%) !important; }
  html, body { background: hsl(0 0% 100%) !important; }
  .side, .top, .scrim, .flash, .theme-toggle, .top-menu, .filters, .actions,
  form button, form input, form select { display: none !important; }
  body.app { display: block; }
  main { max-width: none; margin: 0; padding: 0; }
  a { color: hsl(0 0% 0%) !important; text-decoration: underline; }
}

/* --- планшет: боковая панель становится ящиком ----------------------------------------------- */
@media (max-width: 1100px) {
  body.app { grid-template-columns: 1fr; }
  .side {
    position: fixed; left: 0; top: 0; width: var(--side-w); height: 100vh;
    transform: translateX(-100%); transition: transform .32s var(--ease-drawer);
    z-index: 30; box-shadow: var(--shadow);
  }
  html.side-open .side { transform: none; }
  .scrim { display: block; }
  .scrim[hidden] { display: none; }
  .top-menu { display: inline-flex; }
  html.side-narrow body.app { grid-template-columns: 1fr; }
  html.side-narrow .side { width: var(--side-w); }
  html.side-narrow .tab-label, html.side-narrow .side-title,
  html.side-narrow .brand-name, html.side-narrow .who-name { display: inline; }
  html.side-narrow .side .tab .tab-label { display: inline-block; }
  html.side-narrow .side-brand, html.side-narrow .side .tab { justify-content: flex-start; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}

/* --- телефон -----------------------------------------------------------------------------------
   Единственный мобильный брейкпоинт в файле (720): тест редизайна режет CSS
   по первому вхождению и ломается, если блоков два. Всё для телефона —
   только сюда, дубль блока ниже по файлу ломает проверку при рабочем коде. */
@media (max-width: 720px) {
  .field-inline { grid-template-columns: 1fr; gap: 4px; }
  .form-grid .two, .form-grid .three { grid-template-columns: 1fr; gap: var(--sp-3); }
  .pick-countries .presets button { flex: 1 1 auto; }

  :root { --h-ctl: 40px; --h-sm: 36px; }
  main { padding: var(--sp-4) var(--sp-3) var(--sp-12); }
  .top { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .top-h { font-size: var(--s3); }
  h1, .page-head h1 { font-size: var(--s4); }
  .page-head { margin-bottom: var(--sp-4); }
  .page-head .lead { margin-top: 0; }
  .card { padding: var(--sp-4); }
  .bignum-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--sp-3); }
  .bignum { font-size: var(--s4); }
  /* minmax(0, …): иначе длинный адрес в контакте растягивает колонку шире экрана. */
  .cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
  .cols > * { min-width: 0; }
  .optional { display: none; }
  th, td { padding: 10px var(--sp-2); overflow-wrap: anywhere; }
  .person-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .person-head h1 { font-size: var(--s4); }
  .person-side { align-items: flex-start; }
  .person-side .owner { justify-content: flex-start; }
  .owner select { width: auto; flex: 1; }
  table { display: block; overflow-x: auto; }
  /* Список людей: имя переносится, значки контактов складываются в два ряда. */
  table.people { display: table; table-layout: fixed; }
  table.people thead { display: none; }
  table.people td.select-cell { width: 28px; }
  table.people td.tier-cell { width: 28px; }
  table.people td.channels-cell { width: 48px; }
  table.people .contact-kind { display: none; }
  table.people td.reach-cell { width: 58px; }
  table.people td.flag { width: 24px; }
  table.people td { padding-left: 3px; padding-right: 3px; }
  table.people .person-cell { gap: 0; }
  table.people .person-cell .avatar { display: none; }
  table.people .person-cell .name, table.people .person-cell .sub { white-space: nowrap; }
  .channels-cell .channels { flex-wrap: wrap; width: 44px; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form input[type=text], .inline-form .field input[type=number], .inline-form select, .inline-form .pick { width: 100%; min-width: 0; }
  .filters select, .filters .pick { flex: 1 1 45%; min-width: 0; }
  .summary a { height: var(--h-sm); }
  .flash-close { min-height: 0; }
  button.small, .button.small { height: var(--h-sm); }
  .iconbtn { width: 36px; height: 36px; }
  .run-progress .sub { white-space: normal; }
  .status-row { margin-top: 0; }
  .check-col { width: auto; }
  /* Контакт: адрес во всю ширину, под ним состояние и кнопки. */
  .contact { grid-template-columns: 20px minmax(0, 1fr) max-content; grid-template-areas: "icon value tools" "icon status tools"; row-gap: 2px; padding: var(--sp-2) 0; }
  .contact .icon-channel { grid-area: icon; align-self: start; margin-top: 4px; }
  .contact .value { grid-area: value; white-space: normal; overflow-wrap: anywhere; }
  .contact .value a { white-space: normal; }
  .contact .badges { grid-area: status; justify-self: start; }
  .contact .tools { grid-area: tools; align-self: start; }
  .contact:not(:has(.badges *)) { grid-template-areas: "icon value tools"; }
  .platform .meta { margin-left: auto; }
  .funnel-row { grid-template-columns: minmax(0, 1fr) 32px; }
  .funnel-row .track { grid-column: 1 / -1; order: 1; height: 6px; }
  .tiles, .tiles-quad { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .tile { min-width: 0; padding: var(--sp-3); }
  .tile-value { font-size: var(--s3); }
  .tile-icon { width: 40px; height: 40px; }
  .paging a, .paging b, .paging span.gap { min-width: 40px; height: 40px; }
  .login-page { min-height: auto; padding: var(--sp-6) var(--sp-3); }
  .login { width: 100%; max-width: 360px; }
  .steps li { height: auto; padding: 6px var(--sp-3) 6px 6px; }
  select, input[type=text], input[type=password], input[type=url], input[type=email], textarea, button { font-size: 16px; }

  /* Таблица, которая складывается в карточки. */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack { overflow: visible; display: table; }
  table.stack thead { display: none; }
  table.stack tbody, table.stack tr { display: block; }
  table.stack tr { padding: var(--sp-3) 0 var(--sp-4); border-bottom: 1px solid var(--line); }
  table.stack tr:hover td { background: transparent; }
  table.stack td { border: 0; padding: 3px 0; max-width: none; min-height: 24px; }
  table.stack td.num { text-align: left; }
  /* Подпись колонки слева одной ширины, содержимое блоком справа. */
  table.stack td[data-l] { position: relative; padding-left: 96px; }
  table.stack td[data-l]::before { content: attr(data-l); position: absolute; left: 0; top: 5px; width: 84px; color: var(--muted); font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.stack td.pair { display: block; padding-bottom: var(--sp-2); }
  table.stack td.pair b { font-size: var(--s3); }
  table.stack td.empty { text-align: center; }
  table.stack .run-progress { min-width: 0; }
  table.stack td.actions-cell { padding-top: var(--sp-3); text-align: left; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  table.stack td.actions-cell form { display: inline-flex; }
  table.stack .inline-form { width: 100%; }
}

/* Значки площадок в подстрочнике строки «Проект и страна»: мельче сетка. */
.pair .channels { gap: 0; }
.pair .channels > .icon-channel, .pair .channels a { width: 20px; height: 16px; }
/* Картинка оператора в выпадающем списке «Кому» (ui.js, data-ico="op:Имя"):
   размер и отступ даёт .pick-ic, здесь только выравнивание. */
.op-face-wrap.pick-ic { display: inline-flex; vertical-align: -4px; }
.kb-props dd.kb-assignee { display: flex; align-items: center; gap: 8px; }
.kb-props dd.kb-assignee select { flex: 1; min-width: 0; }

/* Знак площадки у пункта «Комментарии» (_icons.brand): в свои 16px значка,
   чтобы подписи в меню стояли ровно. */
.side .tab-brand { display: inline-flex; align-items: center; justify-content: center; width: 16px; flex: none; }
.side .tab-brand .brand-logo { width: 18px; height: auto; flex: none; }
.side .tab:not(.active) .tab-brand { opacity: .9; }
/* Свёрнутое меню: число у пункта — маленькой меткой в углу значка, а не
   рядом с ним. Рядом оно раздувало пункт шире столбца, и выбранный пункт
   с числом выглядел отдельной кнопкой. */
@media (min-width: 1101px) {
  html.side-narrow .side .tab { position: relative; padding: 0; width: 44px; margin: 0 auto; justify-content: center; }
  html.side-narrow .side .tab .tab-count {
    position: absolute; top: -1px; right: -5px; margin: 0; min-width: 16px; height: 16px;
    padding: 0 4px; font-size: 10px; line-height: 16px; border-radius: 8px;
    box-shadow: 0 0 0 2px hsl(var(--t-sidebar-background));
  }
  html.side-narrow .side-foot { display: flex; flex-direction: column; align-items: center; }
  html.side-narrow .side-foot .tab { width: 44px; }
}