/* Единый слой оформления поверх стилей экранов. Подключается ПОСЛЕДНИМ на
   каждой странице: здесь то, что должно выглядеть одинаково на всех экранах
   (таблицы, вкладки, плитки-KPI, бейджи, модалки, список проектов),
   а стили отдельных экранов задают только своё. Ничего внешнего. */

/* ── Ритм секций ──────────────────────────────────────────────────── */

.ln-section, .rp-section, .tc-section, .kw-section, .gp-section, .pl-section, .ai-section {
  margin-bottom: 30px;
}
.ln-head, .rp-head, .tc-head, .kw-head, .gp-head, .pl-head {
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.ln-head h2, .rp-head h2, .tc-head h2, .kw-head h2, .gp-head h2, .pl-head h2 {
  font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0;
}
/* Подзаголовок «Динамика по периодам» и т. п. */
.appmain h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.ln-meta, .rp-meta, .tc-meta, .kw-meta { font-size: var(--fs-md); color: var(--fg-faint); gap: 6px 12px; }

.ln-notes, .kw-notes, .tc-notes, .rp-notes {
  border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.empty__actions { display: flex; gap: 8px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
@media (max-height: 940px) { .side__foot { display: none; } }
.card.empty { box-shadow: none; border-style: dashed; border-color: var(--line-strong); }

/* ── Бейджи и чипы: одна форма на всю систему ─────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px;
  min-height: 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.4;
  color: var(--fg-muted);
  white-space: nowrap;
  vertical-align: middle;
}
.chip--own { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); background: var(--accent-soft); }
.chip--exact, .chip--good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: var(--good-soft); }
.chip--partial, .chip--sev-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.chip--bad, .chip--miss, .chip--sev-critical { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: var(--bad-soft); }
.chip--no_data, .chip--pending, .chip--off { color: var(--fg-faint); border-style: dashed; background: transparent; }

.badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .3px; line-height: 1.5;
  white-space: nowrap;
  background: var(--none-soft); color: var(--fg-muted);
  vertical-align: middle;
}
.badge--demo { background: var(--demo-soft); color: var(--demo); box-shadow: inset 0 0 0 1px var(--demo-line); letter-spacing: .8px; }
.badge--muted { background: var(--none-soft); color: var(--fg-muted); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }

.status { font-size: var(--fs-sm); padding: 2px 9px; border-width: 1px; }
.status--bad { border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.status--warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.status--good { border-color: color-mix(in srgb, var(--good) 40%, transparent); }

/* ── Вкладки-якоря экранов (Ссылки, Репутация, Техника, AI) ───────── */

.ln-tabs, .rp-tabs, .tc-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  width: fit-content; max-width: 100%;
  margin: 2px 0 22px;
  padding: 4px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ln-tabs a, .rp-tabs a, .tc-tabs a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fg-muted);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}
.ln-tabs a:hover, .rp-tabs a:hover, .tc-tabs a:hover { background: var(--bg-card); color: var(--fg); }
.ln-tabs a[aria-current], .rp-tabs a[aria-current], .tc-tabs a[aria-current],
.ln-tabs a.is-active, .rp-tabs a.is-active, .tc-tabs a.is-active {
  background: var(--bg-card); color: var(--fg); box-shadow: var(--shadow);
}
.ln-tabs a .chip, .rp-tabs a .chip, .tc-tabs a .chip { margin-left: 0; min-height: 18px; padding: 0 6px; font-size: var(--fs-xs); }

/* ── Плитки-KPI: подпись капсом сверху, крупное число, пояснение ──── */

.ln-tiles, .rp-tiles, .tc-tiles, .gp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 12px;
  margin: 4px 0 16px;
}
.ln-tile, .rp-tile, .tc-tile, .gp-tile {
  padding: 14px 16px 13px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}
.ln-tile__label, .rp-tile__label, .tc-tile__label, .gp-tile__label {
  font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: .5px; text-transform: uppercase;
  color: var(--fg-faint);
}
.ln-tile__val, .rp-tile__val, .tc-tile__val, .gp-tile__value {
  font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1.2;
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.gp-tile__value { font-size: var(--fs-xl); }
.admin-tablewrap { max-height: 540px; margin-top: 8px; box-shadow: none; }
.admin-tablewrap table.tbl { min-width: 560px; }
/* Волна 7 · A4 (A1-13): на телефоне строка таблицы администрирования —
   карточка «подпись: значение», действия — во всю ширину под ней. */
@media (max-width: 640px) {
  .tablewrap.admin-tablewrap { max-height: none; overflow: visible; border: 0; background: none; box-shadow: none; border-radius: 0; }
  .admin-tablewrap table.tbl { min-width: 0; width: 100%; border-collapse: separate; }
  .admin-tablewrap table.tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .admin-tablewrap table.tbl, .admin-tablewrap table.tbl tbody { display: block; }
  .admin-tablewrap table.tbl tr { display: block; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
  .admin-tablewrap table.tbl tr[hidden] { display: none; }
  .admin-tablewrap table.tbl td { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0, 1fr); gap: 8px; align-items: baseline;
    padding: 3px 0; border: 0; background: none; white-space: normal; overflow-wrap: anywhere; text-align: left; }
  .admin-tablewrap table.tbl td::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); }
  .admin-tablewrap table.tbl td:first-child { display: block; padding-bottom: 6px; font-weight: var(--fw-medium); }
  .admin-tablewrap table.tbl td:first-child::before { content: none; }
  .admin-tablewrap table.tbl td[data-label="Действия"] { display: block; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line); }
  .admin-tablewrap table.tbl td[data-label="Действия"]::before { content: none; }
  .admin-tablewrap table.tbl td[data-label="Действия"] > * { display: inline-flex; flex-wrap: wrap; gap: 6px; }
}
.ln-tile__sub, .rp-tile__sub, .tc-tile__sub { font-size: var(--fs-sm); color: var(--fg-faint); line-height: 1.4; }
.ln-tile--no_data { border-style: dashed; background: var(--bg-sunken); box-shadow: none; }

/* ── Таблицы ──────────────────────────────────────────────────────── */
/* Обёртка прокручивается сама (и по горизонтали, и по вертикали), поэтому
   шапка таблицы липнет к верху обёртки, а страница не растягивается на
   десятки тысяч пикселей. */

.tablewrap, .rp-tablewrap {
  overflow: auto;
  max-height: min(72vh, 760px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

table.sb {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
table.sb th, table.sb td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.sb thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-sunken);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: .4px; text-transform: uppercase;
  color: var(--fg-faint);
  line-height: 1.3;
  border-bottom: 1px solid var(--line-strong);
  vertical-align: bottom;
}
table.sb thead th .sb__meta, table.sb thead th small { text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); }
table.sb tbody tr:nth-child(even) > td { background: var(--bg-row); }
table.sb tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 5%, var(--bg-card)); }
table.sb tbody tr:last-child > td { border-bottom: 0; }
table.sb td.sb__namecell, table.sb th.sb__namecell { background: var(--bg-card); }
table.sb thead th.sb__namecell { background: var(--bg-sunken); }
table.sb tbody tr:nth-child(even) > td.sb__namecell { background: var(--bg-row); }
table.sb tbody tr:hover > td.sb__namecell { background: color-mix(in srgb, var(--accent) 5%, var(--bg-card)); }
tr.sb__brand--own > td, table.sb tbody tr.sb__brand--own:nth-child(even) > td { background: var(--accent-soft); }
tr.sb__brand--own > td.sb__namecell { box-shadow: inset 3px 0 0 var(--accent); }
tr.sb__domain > td, table.sb tbody tr.sb__domain:nth-child(even) > td { background: var(--bg-sunken); }
table.sb td.num, table.sb th.num, .rp-num, table.imp td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb__value { font-weight: var(--fw-medium); }
.sb__meta { font-size: var(--fs-sm); }
table.sb a { text-decoration: none; }
table.sb a:hover { text-decoration: underline; }

/* Таблицы без своей обёртки (Администрирование, Бренды). */
table.tbl, .appmain table:not([class]) {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
table.tbl th, .appmain table:not([class]) th {
  text-align: left;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .4px; text-transform: uppercase;
  color: var(--fg-faint);
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg-sunken);
  position: sticky; top: 0; z-index: 1;
}
table.tbl td, .appmain table:not([class]) td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.tbl tbody tr:hover > td, .appmain table:not([class]) tbody tr:hover > td {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
}
table.imp thead th { font-size: var(--fs-xs); letter-spacing: .4px; text-transform: uppercase; color: var(--fg-faint); }

/* ── Карточки с данными (диагноз, контент, ссылки, разрывы) ───────── */

.diag-card, .kw-card, .ln-gap, .gp-card {
  border-left-width: 4px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.diag-card:hover { background: var(--bg-card); box-shadow: var(--shadow-lift); }
.diag-card--no_data:hover { box-shadow: none; }
.diag-card__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.diag-card__pos { font-size: var(--fs-xs); letter-spacing: .3px; text-transform: uppercase; }
.diag-card__more { font-size: var(--fs-md); }
.gap__value { font-size: var(--fs-kpi); font-weight: var(--fw-bold); }
.gap__word { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--fg-faint); }
.gapbar { height: 6px; border-radius: 99px; }
.gapbar__fill { border-radius: 99px; }
.diag-row { padding: 1px 0; }
.diag-row__value { font-weight: var(--fw-medium); }
.legend { border-radius: var(--radius); }

/* Горизонтальные полосы («гистограммы» в плитках и строках). */
.progress, .ai-sentbar, .gapbar { background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.progress { height: 8px; border-radius: 99px; }
.progress__fill { border-radius: 99px; }

/* ── Модальные окна и всплывашки ──────────────────────────────────── */

dialog.modal {
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .08);
  max-width: 560px;
}
dialog.modal::backdrop { background: rgba(12, 18, 28, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal__head { padding: 18px 20px 0; }
.modal__head h2 { font-size: var(--fs-xl); }
.modal__body { padding: 12px 20px 4px; font-size: var(--fs-base); line-height: 1.55; }
.modal__foot { padding: 14px 20px 18px; border-top: 1px solid var(--line); margin-top: 12px; }
.qpop { border-radius: 12px; box-shadow: var(--shadow-lift); border-color: var(--line); }

/* ── Шаги мастера и загрузки ──────────────────────────────────────── */

.steps { gap: 6px; }
.steps li { font-weight: var(--fw-medium); }

/* ── Отчёты: чекбоксы метрик не должны быть жирными ───────────────── */
.checkrow { font-weight: var(--fw-regular); }
label.checkrow input, .checkrow input { margin: 0; }

/* ── Список проектов ──────────────────────────────────────────────── */

.projtools {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin: 0 0 14px;
}
.projsearch { position: relative; flex: 0 1 380px; min-width: 220px; }
.projsearch::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898781' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  pointer-events: none;
}
.appmain .projsearch input.projsearch__input { width: 100%; padding-left: 34px; }
.projtools__count { font-size: var(--fs-md); }
.projtools .btn--ghost { margin-left: auto; }

.projgroups { display: flex; flex-direction: column; gap: 10px; }
details.pgroup { padding: 0; overflow: hidden; }
.pgroup__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  cursor: pointer; list-style: none;
  user-select: none;
}
.pgroup__head::-webkit-details-marker { display: none; }
.pgroup__head:hover { background: var(--bg-hover); }
.pgroup__caret {
  width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--fg-faint); border-bottom: 2px solid var(--fg-faint);
  transform: rotate(-45deg); transition: transform .15s ease; margin: 0 2px 0 0;
}
details[open] > .pgroup__head .pgroup__caret { transform: rotate(45deg); margin-top: -3px; }
.pgroup__name { font-weight: var(--fw-bold); font-size: var(--fs-lg); min-width: 0; overflow-wrap: anywhere; }
.pgroup__count {
  white-space: nowrap; flex: none;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-muted);
  background: var(--bg-sunken); border-radius: 99px; padding: 1px 8px;
}
.pgroup__meta { margin-left: auto; font-size: var(--fs-sm); color: var(--fg-faint); }
details[open] > .pgroup__head { border-bottom: 1px solid var(--line); }

.plist { display: flex; flex-direction: column; }
.prow {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(160px, 1.4fr) auto;
  align-items: center;
  gap: 8px 18px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
}
.prow:first-child { border-top: 0; }
.prow:hover { background: var(--bg-row); }
.prow--demo { background: color-mix(in srgb, var(--demo) 4%, var(--bg-card)); }
.prow__main { min-width: 0; }
.prow__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.prow__name { font-weight: var(--fw-medium); font-size: var(--fs-lg); color: var(--fg); text-decoration: none; }
a.prow__name:hover { color: var(--accent); text-decoration: underline; }
.prow__meta { font-size: var(--fs-sm); color: var(--fg-faint); margin-top: 2px; }
.prow__markets { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.prow__actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.mchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--fg-muted); background: var(--bg-card);
  text-decoration: none; white-space: nowrap;
}
.mchip:hover { border-color: var(--accent); color: var(--accent); }
.mchip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.mchip--ok .mchip__dot { background: var(--good); }
.mchip--ok { color: var(--fg); }
.mchip--stale .mchip__dot { background: var(--warn); }

@media (max-width: 900px) {
  .prow { grid-template-columns: 1fr; }
  .prow__actions { justify-content: flex-start; }
  .pgroup__meta { display: none; }
}

/* ── Экран без выбранного проекта ─────────────────────────────────── */
.appmain #f-project, .appmain #f-market { width: 100%; }

/* Скорборд: колонка брендов шире, пометки мельче — чтобы строки не
   распухали в высоту из-за трёх чипов друг под другом. */
@media (min-width: 721px) {
  table.sb td.sb__namecell, table.sb th.sb__namecell { min-width: 210px; }
}
.sb__namecell .chip { font-size: var(--fs-xs); min-height: 18px; padding: 0 6px; }
table.sb thead tr.sb__blockrow th { padding: 6px 12px; line-height: 18px; height: 31px; }
table.sb thead tr.sb__blockrow + tr th { top: 31px; }

/* ── Узкий экран ──────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .ln-tabs, .rp-tabs, .tc-tabs {
    flex-wrap: nowrap; overflow-x: auto; width: 100%;
    scrollbar-width: none;
  }
  .ln-tabs::-webkit-scrollbar, .rp-tabs::-webkit-scrollbar, .tc-tabs::-webkit-scrollbar { display: none; }
  .tablewrap, .rp-tablewrap { max-height: 70vh; }
  table.sb { font-size: var(--fs-md); }
  table.sb th, table.sb td { padding: 8px 9px; }
  .ln-tile__val, .rp-tile__val, .tc-tile__val { font-size: var(--fs-kpi); }
  .projsearch { flex: 1 1 100%; }
  .projtools .btn--ghost { margin-left: 0; }
  .appmain table:not([class]) { display: block; overflow-x: auto; }
}

/* Вкладки-якоря липнут под шапкой: на длинном экране до любого раздела —
   один клик, откуда бы ни читал. */
@media (min-width: 721px) {
  .ln-tabs, .rp-tabs, .tc-tabs {
    position: sticky; top: 72px; z-index: 20;
    box-shadow: 0 4px 14px rgba(11, 11, 11, .06);
  }
}
.ln-section, .rp-section, .tc-section, .kw-section, .gp-section, .ai-section { scroll-margin-top: 124px; }

/* ── Экран входа ──────────────────────────────────────────────────── */
body:has(main.auth) {
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 50% -120px, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg);
}
main.auth { max-width: 420px; padding: 64px 16px 48px; }
.auth__brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 22px; }
.auth__brand .brand__logo { width: 40px; height: 40px; border-radius: 11px; font-size: var(--fs-base); }
.auth__brand .brand__text { font-size: var(--fs-xl); }
.auth__card, main.auth #reset-area form.card { padding: 26px 26px 20px; box-shadow: var(--shadow-lift); }
.auth__card h1 { font-size: var(--fs-kpi); margin-bottom: 4px; }
.auth__lead { color: var(--fg-muted); font-size: var(--fs-base); margin: 0 0 18px; }
main.auth .field input { width: 100%; min-height: 40px; font-size: var(--fs-base); }
.auth__submit { width: 100%; min-height: 40px; font-size: var(--fs-lg); margin-top: 4px; }
.auth__links { justify-content: center; margin-top: 14px; }
.auth__note { margin-top: 18px; text-align: center; line-height: 1.55; }
.field label.checkrow { margin: 2px 0; line-height: 1.4; }

details.pgroup-more { margin-top: 4px; }
.pgroup-more__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer; list-style: none;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  color: var(--fg-muted); font-weight: var(--fw-medium); font-size: var(--fs-base);
}
.pgroup-more__head::-webkit-details-marker { display: none; }
.pgroup-more__head:hover { background: var(--bg-hover); color: var(--fg); }
details.pgroup-more[open] > .pgroup-more__head { margin-bottom: 10px; }
details.pgroup-more[open] > .pgroup-more__head .pgroup__caret { transform: rotate(45deg); margin-top: -3px; }
.pgroup-more__head .pgroup__meta { font-weight: var(--fw-regular); }

/* ── Разрывы: статус карточки, ответственный, форма статуса ────────── */
/* Статус — цветной бейдж: предложен (нейтральный) → принят (синий) →
   в работе (жёлтый) → закрыт (зелёный); отклонён — зачёркнутый серый. */
.gp-status { text-transform: none; }
.gp-status--proposed { color: var(--fg-muted); background: var(--none-soft); border-color: var(--line-strong); }
.gp-status--accepted { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.gp-status--in_progress { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.gp-status--done { color: var(--good); background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.gp-status--rejected { color: var(--fg-faint); background: transparent; border-style: dashed; text-decoration: line-through; }

.gp-owner {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 0; max-width: 100%;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-muted);
}
.gp-owner svg { flex: none; width: 13px; height: 13px; opacity: .8; }
.gp-owner > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-owner--none { font-weight: var(--fw-regular); color: var(--fg-faint); font-style: italic; }

.gp-noscore {
  margin: 8px 0 0; padding: 6px 10px;
  font-size: var(--fs-sm); line-height: 1.45;
  background: var(--bg-sunken); border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.gp-statusform {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin: 0 0 12px; padding: 8px 10px;
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: default;
}
.gp-statusform__label {
  font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: .4px; text-transform: uppercase;
  color: var(--fg-faint); margin-right: 2px;
}
.gp-statusform .control--small { min-height: 28px; padding: 3px 8px; font-size: var(--fs-md); }
.gp-statusform select.control--small { max-width: 140px; }
.gp-statusform input[type="text"] { width: 170px; }
.gp-statusform__date { display: inline-flex; align-items: center; gap: 6px; }
.gp-statusform__date input { width: 140px; }
.gp-statusform__due { font-size: var(--fs-sm); white-space: nowrap; min-width: 7em; }

/* ── Свёртка шагов (Ключи, Разрывы) ────────────────────────────────── */
.foldbtn {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 6px 0 2px; padding: 3px 10px;
  border: 1px dashed var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--accent);
  font-size: var(--fs-md); font-weight: var(--fw-medium); cursor: pointer;
}
.foldbtn:hover { background: var(--accent-soft); border-style: solid; }
.foldbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Учётная запись: карточка «Сессия» в ритме соседних ─────────────── */
.account__session { padding: 18px; margin-top: 16px; }
.account__session h2 { margin-bottom: 4px; }
.account__session > p { margin: 0 0 4px; font-size: var(--fs-md); line-height: 1.5; }
.account__session .rowbar { margin-top: 12px; }

/* ── Меню пользователя в шапке ─────────────────────────────────────── */
.top__usermenu { position: relative; flex: none; }
button.top__user { border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.top__user[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-ring); }
.usermenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 230px; max-width: 320px;
  padding: 6px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lift);
}
.usermenu[hidden] { display: none; }
.usermenu__who {
  padding: 6px 10px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--fg-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usermenu__who:empty { display: none; }
.usermenu__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--fg);
  font: inherit; font-size: var(--fs-base); text-align: left; text-decoration: none;
  cursor: pointer;
}
.usermenu__item svg { flex: none; width: 16px; height: 16px; opacity: .8; }
.usermenu__item:hover, .usermenu__item:focus-visible { background: var(--bg-hover); outline: none; }
.usermenu__item--danger { color: var(--bad); }
.usermenu__item:disabled { opacity: .6; cursor: default; }
.usermenu__msg { font-size: var(--fs-sm); color: var(--bad); padding: 0 10px; }
.usermenu__msg:empty { display: none; }

/* ── Шапка: длинное имя проекта ────────────────────────────────────── */
/* Список проекта шире, имя не рвётся посреди слова — многоточие, полное
   имя в подсказке (title ставит common.js). */
.top select.control[aria-label="Проект"] { width: 280px; max-width: 280px; }
.top select.control[aria-label="Рынок"] { max-width: 190px; }
.top select.control { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.top__snapshot { flex: none; }
.crumbs b { flex: none; }
.crumbs > a, .crumbs > span { flex: none; }
.crumbs .crumbs__project { flex: 0 1 auto; }
@media (max-width: 1360px) { .top select.control[aria-label="Проект"] { width: 250px; max-width: 250px; } }
@media (max-width: 720px) { .top select.control[aria-label="Проект"] { width: 100%; max-width: none; } }
.kw-steps > li[hidden], table.gp-steps tr[hidden] { display: none; }

/* ── Отчёты: полоса экспорта на узком экране ───────────────────────── */
@media (max-width: 720px) {
  .page__actions--export { width: 100%; gap: 8px; }
  .page__actions--export > .exportbtn:first-child { flex: 1 1 100%; }
  .page__actions--export > .exportbtn:first-child .btn { width: 100%; justify-content: center; }
  .page__actions--export > .exportbtn:not(:first-child) { flex: 1 1 0; min-width: 0; }
  .page__actions--export > .exportbtn:not(:first-child) .btn { width: 100%; justify-content: center; }
}
.foldbtn { align-self: flex-start; }

/* ── Администрирование: поиск по пользователям ─────────────────────── */
.admin-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 4px; }
.admin-search .control { flex: 1 1 260px; max-width: 420px; min-height: 34px; }
.admin-search__count, .team-search__count { font-size: var(--fs-md); }
.admin-tablewrap tr[hidden] { display: none; }
.gp-tile__value--long { font-size: var(--fs-base); line-height: 1.4; font-weight: var(--fw-bold); }
.gp-owner > span { white-space: normal; }

/* «Пульс»: таблица подписок — текстовая, всё влево; кнопка — вправо. */
table.pl-subs th, table.pl-subs td { text-align: left; }
table.pl-subs td:last-child { text-align: right; }

/* «Ссылки»: текстовые колонки (анкор, «на кого ссылается», адреса) — влево;
   адрес — одной строкой с многоточием, полный — в подсказке. */
table.ln-table th.wrap, table.ln-table td.wrap,
table.ln-table th.url, table.ln-table td.url { text-align: left; }
table.ln-table td.url {
  white-space: nowrap; word-break: normal; overflow: hidden; text-overflow: ellipsis;
  min-width: 200px; max-width: 280px;
}

/* ══ Волна 2 · F6: доступность, адаптив, печать ══════════════════════ */

/* 06-20: «Перейти к содержимому» — первый фокус страницы; видна только
   с клавиатуры. */
.skiplink {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 8px 14px; border-radius: 9px;
  background: var(--accent-btn); color: #fff; font-weight: var(--fw-medium); text-decoration: none;
  box-shadow: var(--shadow-lift);
}
.skiplink:focus { top: 10px; outline: 2px solid #fff; outline-offset: 2px; }
main[tabindex="-1"]:focus { outline: none; }

/* 06-14: поля формы не шире колонки. Самое длинное название команды
   растягивало select мастера → горизонтальный скролл страницы на ≤1024 px
   и 592–870 px раскладки на телефоне. */
.field { min-width: 0; }
.field > select, .field > input, .field > textarea, select.control, input.control { max-width: 100%; }
.field > select, .field select { width: auto; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .field > select, .field select, .field > input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
}

/* 06-26: прокручиваемая таблица получает фокус (tabindex ставит common.js). */
.tablewrap:focus-visible, .rp-tablewrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 06-25: зоны клика не меньше 24×24 (WCAG 2.5.8): чипы-фильтры, раскрытие
   бренда, ссылки доменов в таблицах, чекбоксы. */
.chip--toggle, button.chip, .sb__toggle, .foldbtn { min-height: 24px; display: inline-flex; align-items: center; }
.rp-tablewrap td a, .tablewrap td a { display: inline-block; min-height: 24px; line-height: 24px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
label.checkrow { min-height: 24px; display: inline-flex; align-items: center; gap: 8px; }
button.sb__brandbtn, .sb__name button { min-height: 24px; }

/* 06-11: подпись «рынок · снимок» — место заранее (появлялась позже экрана
   и сдвигала всё на строку); секции до показа — скрыты (common.gateSections). */
.page__scope--reserve { min-height: 19px; }
.page__scope--reserve:empty { display: flex; }
.ui-gated { display: none !important; }
.ui-gate-tail { height: 220px; margin-top: 12px; }

/* 07-22: ошибка действия — плашка над содержимым, экран не стирается. */
.actionmsg:empty { display: none; }
.actionmsg .notice { margin-bottom: 12px; }

/* 06-19: подтверждение опасного действия. */
dialog.confirm { max-width: 460px; }
dialog.confirm .modal__foot { display: flex; justify-content: flex-end; gap: 8px; }
/* Волна 5 · F4 (A4-09): ui.ask — диалог с полями (дата — календарём),
   галочкой «понимаю» и третьей кнопкой «мягкого пути». */
dialog.confirm { width: calc(100vw - 32px); box-sizing: border-box; }
dialog.ui-ask .modal__foot { flex-wrap: wrap; }
dialog.ui-ask .ui-ask__alt { margin-right: auto; }
.ui-ask__text p + p { margin-top: 8px; }
.ui-ask__field { margin-top: 12px; }
.ui-ask__field .control { width: 100%; max-width: 260px; box-sizing: border-box; }
.ui-ask__field input[type="text"].control { max-width: none; }
.ui-ask__err { color: var(--bad); font-size: var(--fs-sm); margin-top: 4px; }
.ui-ask__err[hidden] { display: none; }
.ui-ask__ack { margin-top: 12px; align-items: flex-start; }
.ui-ask__ack input { margin-top: 3px; flex: none; }
.btn--danger-solid:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 480px) {
  /* На телефоне кнопки окна — столбцом: действие сверху, «мягкий путь» внизу. */
  dialog.ui-ask .modal__foot { flex-direction: column-reverse; align-items: stretch; }
  dialog.ui-ask .ui-ask__alt { margin-right: 0; }
}
.btn--danger-solid, a.btn--danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn--danger-solid:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 85%, #000); border-color: var(--bad); color: #fff; }
.btn--danger-solid, a.btn--danger-solid { background: var(--bad-btn); border-color: var(--bad-btn); }

/* 06-09: платный сбор не настроен — причина мелко, не как ошибка. */
.collectslot__off { font-size: var(--fs-sm); color: var(--fg-faint); white-space: nowrap; display: inline-block; cursor: help; border-bottom: 1px dotted var(--fg-faint); }

/* 04-19: печать экрана — без меню, шапки и кнопок; карточки и графики не
   режутся между страницами; ссылки — с адресом. */
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #fff; --bg-card: #fff; --fg: #000; --fg-muted: #333; --fg-faint: #555;
    color-scheme: light;
  }
  /* Волна 13 · H2-06: «button» целиком прятал и содержимое — строки «Все
     направления рынка», карточки диагноза, ячейки скорборда, полосы брендов,
     заголовки столбцов (они тоже кнопки сортировки). Прячем только кнопки-
     действия; кнопки-содержимое печатаются. Цвет полос и знаков — как на
     экране (иначе браузер по умолчанию выбрасывает фоны и полосы пустые). */
  .top, .side, .side-scrim, .skiplink, .burger, .page__actions, #actions, .mockbar,
  .collectslot, .exportbtn, .actionmsg, .howto, .ui-gate-tail,
  button:not(.brand-row, .diag-card, .gp-card__toggle, .kw-card__toggle, .sbm-dom, .sx-cellbtn, .sx-gapbar,
             .ui-bar, .ui-brand, .ui-cell, .ui-chip, .ui-kpi, .ui-table__sort, .channel) { display: none !important; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ui-table__sort .ui-table__arrow, .ui-table__sort svg.ico { display: none; }
  .app { display: block; background: none; }
  .app > main.page, main.page.appmain { padding: 0; max-width: none; }
  .card, section, .rp-section, figure, svg, table, tr { break-inside: avoid; page-break-inside: avoid; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .tablewrap, .rp-tablewrap { max-height: none !important; overflow: visible !important; }
  .ui-gated { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: var(--fs-2xs); color: #555; }
  body { background: #fff; }
}
.trends-ph { height: 240px; margin: 8px 0 12px; }
/* 06-11: шапка росла на 9 px, когда приходил список проектов (подписи над
   выпадающими списками), и сдвигала весь экран. Место под выбор — заранее. */
.top__picker--reserve { min-height: 34px; }
/* 01-27: крошки — ссылки пути. 07-21/07-34: у наблюдателя нет ссылок на запись. */
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs__project { display: inline-flex; gap: 7px; align-items: center; max-width: 240px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* A1-24: имя проекта уже в пилюле «Проект» (она видна всегда, когда видны
   крошки) — в крошках его нет: «Проекты / Скорборд», без двойной обрезки. */
.crumbs .crumbs__project { display: none; }
.crumbs__project a { overflow: hidden; text-overflow: ellipsis; }
.crumbs { overflow: hidden; }
.is-readonly #actions a[href^="import.html"], .is-readonly .empty__actions a[href^="import.html"] { display: none; }
details > summary { min-height: 24px; line-height: 24px; }

/* Волна 2 (07-27): длинные имена брендов и доменов без пробелов
   («SuperMegaCasinoBrandLatinoamerica», IDN) переносятся, а не растягивают
   липкую колонку имени и карточки. */
table.sb td.sb__namecell, .brand-row__name, .cand__title h2, .diag-card__title,
.kw-card__nums .faint, .rp-own, .ln-table td.sb__namecell { overflow-wrap: anywhere; }

/* Волна 2 (01-15): пункт меню с атрибутом hidden («Администрирование» не
   админу) — скрыт: `.side__nav a { display: flex }` перебивал атрибут. */
.side__nav a[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   v13 · ФУНДАМЕНТ: иконки, бренды, контролы, поповер, drawer, таблица.
   API и классы — docs/design/v13/компоненты.md.
   ══════════════════════════════════════════════════════════════════════ */

.side { align-self: start; }
.brand--top { display: none; }
@media (max-width: 1000px) {
  .brand--top { display: flex; }
  .brand--top .brand__logo { width: 32px; height: 32px; font-size: var(--fs-md); }
  .brand--top .brand__text { display: none; }
}

/* ── Иконки ───────────────────────────────────────────────────────── */
svg.ico { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.ico--lg { width: 20px; height: 20px; }
.btn--link svg.ico, .rp-tabs a svg.ico, .chip svg.ico { width: 14px; height: 14px; vertical-align: -2px; }
.chip svg.ico, .badge svg.ico { width: 12px; height: 12px; }
.foldbtn svg.ico { width: 14px; height: 14px; }
/* Знак статуса рядом со словом (не единственное указание): «✓/✕» стали иконками. */
.sign { display: inline-flex; align-items: center; gap: 4px; }
.sign svg.ico { width: 14px; height: 14px; }
.sign--good { color: var(--good); } .sign--bad { color: var(--bad); } .sign--warn { color: var(--warn); }

/* ── Надзаголовок и шапка карточки ────────────────────────────────── */
.ui-overline {
  color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
.ui-cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ui-cardhead__titles { min-width: 0; }
.ui-cardhead__title { font-size: var(--fs-xl); letter-spacing: -.025em; margin: 3px 0 2px; }
.ui-cardhead__sub { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; }
.ui-cardhead__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Карточка: мягкая глубина, подъём у интерактивных ─────────────── */
.ui-card, .card--v13 {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 18px 19px 16px; min-width: 0;
}
.ui-card--interactive, a.ui-card, button.ui-card, .card--interactive {
  cursor: pointer; transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease;
}
.ui-card--interactive:hover, a.ui-card:hover, button.ui-card:hover, .card--interactive:hover,
.ui-card--interactive:focus-visible, .card--interactive:focus-visible {
  transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--accent-line);
}

/* ── Бренд: монограмма, чип, бейдж «мы» ───────────────────────────── */
.ui-avatar {
  --brand: var(--brand-own);
  flex: none; display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--brand); color: var(--on-brand);
  font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: -.035em; line-height: 1;
  box-shadow: 0 2px 5px rgba(20, 42, 68, .14);
}
.ui-avatar--sm { width: 20px; height: 20px; border-radius: 6px; font-size: var(--fs-2xs); }
.ui-avatar--lg { width: 34px; height: 34px; border-radius: 10px; font-size: var(--fs-sm); }
.ui-brand {
  --brand: var(--brand-own); --brand-soft: var(--brand-own-soft);
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%;
  font-weight: var(--fw-medium); color: var(--fg); white-space: nowrap; vertical-align: middle;
}
.ui-brand__name { overflow: hidden; text-overflow: ellipsis; }
.ui-brand__dot { width: 9px; height: 9px; border-radius: 3px; background: var(--brand); flex: none; }
.ui-brand--lg { gap: 9px; font-size: var(--fs-lg); color: var(--brand); }
.ui-brand--sm { gap: 6px; font-size: var(--fs-sm); }
button.ui-brand--button {
  padding: 5px 9px 5px 5px; border: 1px solid transparent; border-radius: 8px; background: transparent;
  font-size: var(--fs-md); cursor: pointer; min-height: 32px;
  transition: background-color var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) ease;
}
button.ui-brand--button:hover, button.ui-brand--button:focus-visible, button.ui-brand--button.is-active, button.ui-brand--button[aria-pressed="true"] {
  background: var(--brand-soft); border-color: var(--brand);
}
button.ui-brand--button.is-active, button.ui-brand--button[aria-pressed="true"] { box-shadow: 0 2px 8px rgba(27, 48, 74, .09); }

.ui-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 5px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .02em; line-height: 1.35; white-space: nowrap;
  background: var(--none-soft); color: var(--fg-muted);
}
.ui-badge--own { background: var(--accent-soft); color: var(--accent); text-transform: lowercase; }
.ui-badge--good { background: var(--good-soft); color: var(--good); }
.ui-badge--warn, .ui-badge--ahead { background: var(--warn-soft); color: var(--warn); }
.ui-badge--bad { background: var(--bad-soft); color: var(--bad); }
.ui-badge--info { background: var(--accent-soft); color: var(--accent); }
.ui-badge--demo { background: var(--warn-soft); color: var(--warn); text-transform: uppercase; letter-spacing: .05em; }

/* ── Чип-фильтр (кнопка-переключатель) ────────────────────────────── */
.ui-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--fg);
  font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap;
  transition: background-color var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) ease;
}
button.ui-chip { cursor: pointer; }
button.ui-chip:hover { border-color: var(--accent-line); transform: translateY(-1px); box-shadow: 0 5px 13px rgba(28, 54, 87, .10); }
.ui-chip.is-active, .ui-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.ui-chip__count { padding: 1px 5px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); }

/* ── Кнопка-меню «Колонки 3/6 ⌄» ──────────────────────────────────── */
.ui-menubtn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 9px 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--fg);
  font-size: var(--fs-md); font-weight: var(--fw-bold); white-space: nowrap; cursor: pointer;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.ui-menubtn:hover, .ui-menubtn.is-open { border-color: var(--accent-line); box-shadow: 0 3px 10px rgba(22, 53, 88, .10); }
.ui-menubtn__count { border-radius: 5px; background: var(--accent-soft); color: var(--accent); padding: 2px 5px; font-size: var(--fs-xs); }
.ui-chevron, .ui-menubtn .ui-chevron { color: var(--fg-faint); transition: transform var(--dur) ease; }
.ui-menubtn.is-open .ui-chevron, [aria-expanded="true"] > .ui-chevron { transform: rotate(180deg); }

/* ── Поле поиска с иконкой ────────────────────────────────────────── */
.ui-search { position: relative; display: flex; align-items: center; min-width: 200px; flex: 1 1 auto; max-width: 360px; }
.ui-search > svg.ico { position: absolute; left: 11px; color: var(--fg-faint); pointer-events: none; width: 16px; height: 16px; }
.appmain .ui-search input.ui-search__input, .ui-search input.ui-search__input {
  width: 100%; height: 36px; min-height: 36px; padding: 0 10px 0 35px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); font-size: var(--fs-md);
}

/* ── Сегмент-переключатель v13 ────────────────────────────────────── */
.ui-seg {
  display: inline-flex; flex: none; gap: 2px; padding: 3px;
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px;
}
.ui-seg__btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 7px; background: none;
  color: var(--fg-muted); font-size: var(--fs-md); font-weight: var(--fw-bold); padding: 7px 12px;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease;
}
.ui-seg__btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ui-seg__btn[aria-pressed="true"] { color: var(--accent); background: var(--bg-card); box-shadow: 0 2px 7px rgba(20, 49, 81, .12); }
.ui-seg--sm .ui-seg__btn { padding: 5px 9px; font-size: var(--fs-sm); }
/* Старые переключатели-вкладки экранов получают вид сегмента. */
.ln-tabs a[aria-current], .rp-tabs a[aria-current], .tc-tabs a[aria-current],
.ln-tabs a.is-active, .rp-tabs a.is-active, .tc-tabs a.is-active { color: var(--accent); box-shadow: 0 2px 7px rgba(20, 49, 81, .12); }

/* ── Ползунок v13: тонкий трек, заметный бегунок, число рядом ──────── */
.ui-range { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: var(--fs-sm); color: var(--fg-muted); font-weight: var(--fw-medium);
  padding: 4px 7px; border: 1px solid transparent; border-radius: 8px; transition: background-color var(--dur) ease, border-color var(--dur) ease; }
.ui-range:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ui-range:focus-within { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ui-range__out { min-width: 3ch; font-size: var(--fs-md); font-weight: var(--fw-heavy); color: var(--fg); font-variant-numeric: tabular-nums; }
.ui-range.is-disabled { opacity: .55; }
input[type="range"] {
  --fill: 50%;
  -webkit-appearance: none; appearance: none;
  width: 112px; height: 4px; margin: 10px 0; padding: 0;
  border: 0; border-radius: 9px; cursor: pointer; outline: none;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--line-strong) var(--fill));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-card); border: 3px solid var(--accent);
  box-shadow: 0 2px 6px rgba(19, 55, 104, .28);
  transition: transform var(--dur) ease;
}
input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-card); border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(19, 55, 104, .28);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
input[type="range"]:disabled { cursor: default; background: var(--line); }
input[type="range"]:disabled::-webkit-slider-thumb { border-color: var(--fg-faint); box-shadow: none; }

/* ── Поповер (порт в body) ────────────────────────────────────────── */
.ui-pop {
  position: fixed; z-index: 90;
  min-width: 200px; max-width: calc(100vw - 16px); width: max-content;
  overflow: auto; overscroll-behavior: contain;
  padding: 13px;
  background: var(--bg-card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-menu);
  animation: ui-pop-in .14s var(--ease);
}
.ui-pop:focus { outline: none; }
@keyframes ui-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ui-pop.is-up { animation-name: ui-pop-up; }
@keyframes ui-pop-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ui-pop__head { display: flex; flex-direction: column; gap: 2px; margin: 0 2px 10px; }
.ui-pop__head strong { font-size: var(--fs-base); }
.ui-pop__head span, .ui-pop__foot { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.4; }
.ui-pop__foot { border-top: 1px solid var(--line); padding: 9px 2px 0; margin-top: 7px; }
.ui-pop__group { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--fg-faint); margin: 10px 4px 4px; }
.ui-pop__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: 7px; background: none; color: var(--fg);
  font-size: var(--fs-md); text-align: left; cursor: pointer; text-decoration: none;
}
.ui-pop__item:hover, .ui-pop__item:focus-visible { background: var(--bg-hover); outline: none; box-shadow: inset 0 0 0 2px var(--accent-line); }
.ui-pop__item.is-active, .ui-pop__item[aria-checked="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.ui-pop__item small { display: block; color: var(--fg-muted); font-size: var(--fs-xs); }
.ui-pop .ui-search { max-width: none; margin-bottom: 9px; }

/* ── Список-выбор (ui.listMenu) и кнопка-список (ui.selectMenu) ────── */
.ui-pop--list { padding: 8px; }
.ui-pop--list .ui-pop__head { margin: 4px 6px 8px; }
.ui-pop--list .ui-search { margin: 0 0 6px; }
.ui-listmenu { display: flex; flex-direction: column; min-width: 0; }
.ui-listmenu__list { max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; outline: none; }
.ui-listmenu__list:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-line); border-radius: 8px; }
.ui-listmenu__group {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 8px 4px; background: var(--bg-card);
  font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: .07em; text-transform: uppercase; color: var(--fg-faint);
}
.ui-listmenu__opt {
  display: flex; align-items: center; gap: 9px;
  min-height: 36px; padding: 6px 8px; border-radius: 8px;
  color: var(--fg); font-size: var(--fs-md); cursor: pointer; user-select: none;
}
.ui-listmenu__opt.is-active { background: var(--bg-hover); box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.ui-listmenu__opt.is-current { color: var(--accent-ink); }
.ui-listmenu__opt.is-current .ui-listmenu__label { font-weight: var(--fw-bold); }
.ui-listmenu__opt.is-disabled { opacity: .5; cursor: default; }
.ui-listmenu__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ui-listmenu__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-listmenu__sub { font-size: var(--fs-sm); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-listmenu__check { flex: none; width: 16px; height: 16px; color: var(--accent); }
.ui-listmenu__check svg { width: 16px; height: 16px; }
.ui-listmenu__opt .ui-badge { flex: none; }
.ui-listmenu__empty { padding: 14px 8px; color: var(--fg-muted); font-size: var(--fs-md); text-align: center; }
.ui-listmenu__count { padding: 6px 8px 0; font-size: var(--fs-sm); color: var(--fg-faint); }
.ui-listmenu__count:empty { display: none; }

select.ui-select-native, .top__field select[hidden] { display: none !important; }
.ui-selectwrap { display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
.ui-selectbtn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0; max-width: 100%; height: var(--ctl-h); padding: 0 9px 0 11px;
  border: 1px solid var(--ctl-line); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--fg);
  font: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.ui-selectbtn--small { height: 32px; font-size: var(--fs-md); }
.ui-selectbtn:hover { border-color: var(--accent-2); }
.ui-selectbtn:focus-visible, .ui-selectbtn.is-open { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ui-selectbtn:disabled { opacity: .6; cursor: default; }
.ui-selectbtn__val { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui-selectbtn .ui-chevron { flex: none; width: 15px; height: 15px; color: var(--fg-faint); transition: transform var(--dur) ease; }
.ui-selectbtn.is-open .ui-chevron { transform: rotate(180deg); }

/* Оставшиеся системные <select> (формы): закрытое поле в стиле кнопок —
   без системной стрелки, своя стрелка-иконка, высота и радиус как у полей. */
.appmain select:not([multiple]):not([size]), select.control:not([multiple]) {
  -webkit-appearance: none; appearance: none;
  height: var(--ctl-h); min-height: var(--ctl-h);
  padding: 0 32px 0 11px;
  font-family: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: 1.2;
  border-radius: var(--radius-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368778d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 15px 15px;
  text-overflow: ellipsis;
}
.appmain select.control--small:not([multiple]), select.control--small:not([multiple]) { height: 32px; min-height: 32px; font-size: var(--fs-md); }
:root[data-theme="dark"] .appmain select:not([multiple]):not([size]), :root[data-theme="dark"] select.control:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}
.appmain select option { font-weight: var(--fw-regular); }

/* ── Панель деталей справа ────────────────────────────────────────── */
.ui-drawer-scrim { position: fixed; inset: 0; z-index: 95; background: var(--scrim); animation: ui-fade .18s ease-out; }
.ui-drawer {
  --brand: var(--accent); --brand-soft: var(--accent-soft);
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: var(--bg-card); color: var(--fg);
  box-shadow: var(--shadow-drawer);
  animation: ui-slide .22s var(--ease);
}
.ui-drawer:focus { outline: none; }
.ui-drawer__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 17px 22px 18px;
  border-top: 4px solid var(--brand);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(110deg, var(--brand-soft), var(--bg-card) 74%);
}
.ui-drawer__head h2 { font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -.025em; margin-top: 6px; overflow-wrap: anywhere; }
.ui-drawer__body { flex: 1; overflow: auto; padding: 20px 22px; font-size: var(--fs-base); line-height: 1.5; }
.ui-drawer__lead { color: var(--fg-muted); margin-bottom: 18px; }
.ui-drawer__body h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); margin: 22px 0 9px; }
.ui-drawer__actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid var(--line); }
.ui-facts { display: grid; margin: 0; }
.ui-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
.ui-facts dt, .ui-facts > div > :first-child { color: var(--fg-muted); }
.ui-facts dd, .ui-facts > div > :last-child { margin: 0; font-weight: var(--fw-bold); text-align: right; font-variant-numeric: tabular-nums; }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-slide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
html.has-drawer { overflow: hidden; }

/* ── Полосы-бары с пунктиром базы ─────────────────────────────────── */
/* Волна 3 (G4, A2-06): колонка имени гибкая — от 96 px до 32 % ширины
   (--name-w теперь потолок), полное имя — в подсказке строки. Шкала — сетка
   тех же колонок, деления круглые (A2-14), линии трека — по делениям. */
.ui-bars { display: grid; gap: 3px; --name-w: 240px; --num-w: 90px;
  --bar-cols: minmax(96px, min(32%, var(--name-w))) minmax(0, 1fr) var(--num-w); }
.ui-bars__item { min-width: 0; }
.ui-bar {
  --brand: var(--brand-own); --brand-soft: var(--brand-own-soft);
  display: grid; grid-template-columns: var(--bar-cols);
  align-items: center; gap: 10px; width: 100%; height: 31px;
  padding: 0 6px; border: 1px solid transparent; border-radius: var(--radius-xs);
  background: transparent; color: var(--fg); text-align: left; font: inherit;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
button.ui-bar { cursor: pointer; }
button.ui-bar:hover, button.ui-bar:focus-visible { background: var(--brand-soft); border-color: var(--brand); box-shadow: 0 3px 9px rgba(23, 48, 83, .09); transform: translateX(2px); }
.ui-bar.is-selected { background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 3px 0 var(--brand); }
.ui-bar__name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); white-space: nowrap; }
.ui-bar__label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui-bar__name em { flex: none; font-style: normal; font-size: var(--fs-2xs); color: var(--accent); font-weight: var(--fw-heavy); }
.ui-bar__dot { width: 9px; height: 9px; border-radius: 3px; background: var(--brand); flex: none; }
.ui-bar__track {
  position: relative; height: 9px; border-radius: 5px;
  background: repeating-linear-gradient(90deg, var(--bg-sunken) 0, var(--bg-sunken) calc(var(--tick, 25%) - 1px), var(--line) calc(var(--tick, 25%) - 1px), var(--line) var(--tick, 25%));
}
.ui-bar.is-own .ui-bar__track { height: 12px; }
.ui-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .32s ease; }
.ui-bar:not(.is-own):not(.is-selected) .ui-bar__fill { opacity: .78; }
.ui-bar__base {
  position: absolute; z-index: 1; top: -4px; height: 17px;
  border-left: 2px dashed var(--fg); opacity: .75; pointer-events: none;
  filter: drop-shadow(0 0 1px var(--bg-card));
}
.ui-bar__num { text-align: right; font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-bar.is-selected .ui-bar__num { color: var(--brand); }
.ui-bar.is-missing .ui-bar__num { color: var(--fg-faint); font-weight: var(--fw-regular); font-size: var(--fs-sm); }
.ui-bars__scale { display: grid; grid-template-columns: var(--bar-cols); gap: 10px; padding: 0 7px; margin-top: 3px;
  color: var(--fg-faint); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.ui-bars__ticks { position: relative; height: 14px; }
.ui-bars__ticks > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ui-bars__ticks > span.is-first { transform: none; }
.ui-bars__ticks > span.is-last { transform: translateX(-100%); }
@media (max-width: 760px) { .ui-bars { --num-w: 74px; --bar-cols: minmax(84px, 36%) minmax(0, 1fr) var(--num-w); } .ui-bar { gap: 6px; } .ui-bar__name, .ui-bar__num { font-size: var(--fs-sm); } }

/* ── KPI «Главный сигнал» ─────────────────────────────────────────── */
.ui-signal {
  --brand: var(--brand-own); --brand-soft: var(--brand-own-soft);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
  padding: 22px 24px 19px;
  background: radial-gradient(circle at 88% 15%, var(--brand-soft) 0, transparent 38%), linear-gradient(145deg, var(--bg-card) 23%, var(--bg-row));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.ui-signal::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--brand); }
.ui-signal::after { content: ""; position: absolute; right: -40px; top: -65px; width: 210px; height: 210px; border: 1px solid var(--brand); opacity: .09; border-radius: 50%; z-index: -1; }
.ui-signal__top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ui-signal__kicker { color: var(--fg-muted); }
.ui-signal__datum { font-size: var(--fs-xs); color: var(--fg-faint); }
.ui-signal__title { font-size: var(--fs-xl); letter-spacing: -.035em; margin: 10px 0 16px; line-height: 1.2; }
.ui-signal__primary { display: flex; flex-direction: column; align-items: flex-start; }
.ui-signal__value { font-size: var(--fs-hero); letter-spacing: -.06em; line-height: 1.15; margin: 6px 0 4px; font-variant-numeric: tabular-nums; font-weight: var(--fw-heavy); }
.ui-signal__unit { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--fg-muted); font-size: var(--fs-sm); }
.ui-signal__unit b { padding: 4px 8px; border-radius: 20px; color: var(--brand); background: var(--brand-soft); font-weight: var(--fw-bold); }
.ui-signal__base { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); font-size: var(--fs-md); }
.ui-signal__primary + .ui-signal__base { margin-top: 22px; }
.ui-signal__base > span { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-muted); font-weight: var(--fw-medium); }
.ui-signal__base i { width: 9px; height: 9px; border-radius: 3px; background: var(--brand); }
.ui-signal__base b { font-size: var(--fs-base); color: var(--brand); font-variant-numeric: tabular-nums; }
.ui-signal__actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.ui-signal__actions .btn--link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); }
.ui-signal__note { font-size: var(--fs-xs); color: var(--fg-faint); margin: 10px 0 0; }
/* Узкий экран: число сигнала — кеглем h1 (было clamp — лишний кегль на каждой ширине). */
@media (max-width: 1100px) { .ui-signal__value { font-size: var(--fs-h1); } }

/* ── Таблица v13 (.ui-table) ──────────────────────────────────────── */
/* Липкая шапка групп, закреплённая первая колонка, нейтральный hover строки,
   активная колонка, контур ячейки при hover/focus, числа справа. */
.ui-tablewrap { position: relative; overflow: auto; max-height: min(640px, calc(100vh - 260px)); min-height: 200px;
  border-top: 1px solid var(--line); scrollbar-color: var(--line-strong) transparent; }
.ui-tablewrap:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
table.ui-table { --row-h: 56px; width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
/* Плотность таблиц «Плотная» (Учётная запись → Интерфейс). */
html.ui-dense table.ui-table { --row-h: 42px; font-size: var(--fs-md); }
html.ui-dense table.tbl td, html.ui-dense .appmain table:not([class]) td { padding-top: 5px; padding-bottom: 5px; }
table.ui-table th, table.ui-table td { border-bottom: 1px solid var(--line); border-right: 1px solid color-mix(in srgb, var(--line) 60%, transparent); padding: 0; vertical-align: middle; background: var(--bg-card); }
table.ui-table thead th { position: sticky; top: 0; z-index: 3; text-align: left; padding: 8px 12px; background: var(--bg-row); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--fg); }
table.ui-table thead tr.ui-table__groups th { height: 31px; padding: 6px 12px; background: var(--bg-sunken); color: var(--fg-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: .08em; text-transform: uppercase; }
table.ui-table thead tr.ui-table__groups + tr th { top: 31px; }
table.ui-table th small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--fg-faint); margin-top: 3px; }
table.ui-table .is-pinned { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--line), 6px 0 12px rgba(20, 46, 78, .05); }
table.ui-table thead .is-pinned { z-index: 5; }
table.ui-table td.is-pinned { padding: 6px 12px; min-width: 180px; }
table.ui-table tbody tr { height: var(--row-h); }
table.ui-table tbody tr:hover > td { background: var(--bg-hover); box-shadow: inset 0 1px 0 var(--line-strong), inset 0 -1px 0 var(--line-strong); }
table.ui-table tbody tr:hover > td.is-pinned { box-shadow: inset 0 1px 0 var(--line-strong), inset 0 -1px 0 var(--line-strong), 6px 0 12px rgba(20, 46, 78, .05); }
table.ui-table tbody tr.is-own > td { background: var(--accent-soft); }
table.ui-table tbody tr.is-own > td.is-pinned { box-shadow: inset 4px 0 var(--accent); }
table.ui-table tbody tr[style*="--brand"] > td.is-pinned { box-shadow: inset 3px 0 var(--brand); }
table.ui-table tbody tr.is-selected > td.is-pinned { background: linear-gradient(90deg, var(--brand-soft), var(--bg-card) 90%); box-shadow: inset 4px 0 var(--brand); }
table.ui-table th.is-active { background: var(--accent-soft); box-shadow: inset 0 -2px var(--accent-2); }
table.ui-table td.is-active { background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); }
table.ui-table td.is-ahead { background: var(--warn-soft); }
table.ui-table td.is-missing { background: repeating-linear-gradient(130deg, var(--bg-row), var(--bg-row) 9px, var(--bg-sunken) 9px, var(--bg-sunken) 10px); }
table.ui-table td.num, table.ui-table th.num { text-align: right; }
.ui-table__sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 4px; margin: -2px -4px; border-radius: 5px; font: inherit; color: inherit; cursor: pointer; }
.ui-table__sort:hover { color: var(--accent); }
.ui-table__sort svg.ico { width: 14px; height: 14px; color: var(--fg-faint); }
[aria-sort="ascending"] .ui-table__sort svg.ico, [aria-sort="descending"] .ui-table__sort svg.ico { color: var(--accent); }

/* Ячейка-кнопка: основное значение крупнее, разница ниже спокойнее. */
.ui-cell {
  --brand: var(--accent);
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  width: 100%; min-height: calc(var(--row-h, 56px) - 8px);
  padding: 4px 10px; border: 0; border-radius: 6px; background: none; color: var(--fg);
  text-align: right; font: inherit;
}
button.ui-cell { cursor: pointer; }
button.ui-cell:hover, button.ui-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 5%, transparent); box-shadow: 0 3px 10px rgba(24, 58, 95, .07); }
.ui-cell strong { font-size: var(--fs-num); font-weight: var(--fw-bold); letter-spacing: -.012em; line-height: 1.12; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-cell small { margin-top: 3px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-cell--ahead small { color: var(--warn); }
.ui-cell--behind small { color: var(--fg-muted); }
.ui-cell.is-missing strong { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--fg-faint); }
.ui-cell__track { width: 100%; height: 3px; border-radius: 9px; background: var(--bg-sunken); overflow: hidden; margin-top: 5px; }
.ui-cell__track > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }

/* Подвал таблицы с ползунками («Высота строки», «Колонки»). */
.ui-tablefoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 15px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--fg-muted); }
.ui-tablefoot__tools { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }

/* Панель инструментов над таблицей. */
.ui-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 11px 15px; }
.ui-toolbar__spacer { flex: 1; }
.ui-toolbar__sep { width: 1px; height: 20px; background: var(--line); }

/* ── Существующие таблицы получают поведение v13 ─────────────────── */
.tablewrap, .rp-tablewrap { border-radius: var(--radius); }
table.sb thead th, table.tbl th, .appmain table:not([class]) th { color: var(--fg-muted); background: var(--bg-row); }
table.sb tbody tr:hover > td, table.sb tbody tr:hover > td.sb__namecell,
table.tbl tbody tr:hover > td, .appmain table:not([class]) tbody tr:hover > td { background: var(--bg-hover); }
table.sb tbody tr.sb__brand--own:hover > td { background: color-mix(in srgb, var(--accent) 14%, var(--bg-card)); }
table.sb td:focus-within, table.tbl td:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
table.sb .sb__value { font-size: var(--fs-base); }

/* ── Мелочи v13 ───────────────────────────────────────────────────── */
.card { transition: box-shadow var(--dur) ease, border-color var(--dur) ease; }
.chip { border-radius: 7px; }
/* «Демо» — свой фиолетовый, не янтарный: янтарь значит «конкурент впереди» (A1-19). */
.badge--demo, .ui-badge--demo { background: var(--demo-soft); color: var(--demo); box-shadow: inset 0 0 0 1px var(--demo-line); letter-spacing: .06em; }
.ln-tabs, .rp-tabs, .tc-tabs { background: var(--bg-sunken); border-color: var(--line); border-radius: 10px; padding: 3px; }
.ln-tabs a, .rp-tabs a, .tc-tabs a { border-radius: 7px; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.ln-tile, .rp-tile, .tc-tile, .gp-tile { border-radius: var(--radius); }
.ln-tile__label, .rp-tile__label, .tc-tile__label, .gp-tile__label { letter-spacing: .07em; font-weight: var(--fw-bold); color: var(--fg-muted); }
.usermenu { border-radius: 12px; box-shadow: var(--shadow-menu); padding: 7px; }
dialog.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-menu); background: var(--bg-card); color: var(--fg); }
/* A1-40: один язык затемнения — --scrim без размытия (как у панели справа; и дешевле для слабых ПК). */
dialog.modal::backdrop { background: var(--scrim); -webkit-backdrop-filter: none; backdrop-filter: none; }
.qpop { box-shadow: var(--shadow-menu); }
.skiplink { border-radius: var(--radius-sm); }

/* Движение — только если человек не просил его убрать. */
@media (prefers-reduced-motion: reduce) {
  .ui-pop, .ui-drawer, .ui-drawer-scrim { animation: none !important; }
  .btn:hover:not(:disabled), .ui-card--interactive:hover, button.ui-bar:hover, button.ui-chip:hover, .themebtn:hover, .iconbtn:hover { transform: none !important; }
}
@media print {
  .ui-pop, .ui-drawer-scrim, .side__tools { display: none !important; }
}
.table-wrap { overflow-x: auto; max-width: 100%; }
/* Иконки внутри старых знаков статуса — по размеру строки. */
.status__sign svg.ico, .tc-flag__sign svg.ico, .sb__caret svg.ico, .ai-cell svg.ico, .rp-manual svg.ico,
.delta--up svg.ico, .delta--down svg.ico, .delta--flat svg.ico, .sb__meta svg.ico, .diag-row__value svg.ico { width: 13px; height: 13px; vertical-align: -2px; }
.brand-row__go svg.ico { width: 18px; height: 18px; }
.status__sign { display: inline-flex; align-items: center; }
.diag-card__more svg.ico, .diag-card__gaps svg.ico, .diag-card__note a svg.ico, .howto a svg.ico, .page__lead a svg.ico { width: 14px; height: 14px; vertical-align: -2px; }
/* Смена темы — без переходов цвета (common.js ставит класс на 250 мс). */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }


/* ══ Волна 3 · G4 · дизайн-система: одна шкала, один компонент на роль ══
   Шкалы — app.css (--fs-*, --fw-*, --ctl-h / --ctl-h-sm / --ctl-h-xs,
   --card-pad / --card-pad-sm). Здесь — приведение старых классов к ним. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Высоты контролов: 34 шапки и формы, 32 фильтры/панели, 28 строки ── */
/* A1-05: главная строка действий экрана — одной высоты (--ctl-h), даже если
   экран поставил .btn--small. */
.page__actions .btn, .page__head > #actions .btn, .page__actions .ui-menubtn, .page__head > #actions .ui-menubtn {
  min-height: var(--ctl-h); height: auto; padding: 6px 13px; font-size: var(--fs-md); border-radius: var(--radius-sm); gap: 7px;
}
.page__actions .btn svg, .page__head > #actions .btn svg { width: 16px; height: 16px; }
.page__actions .btn--icon, .page__head > #actions .btn--icon { width: var(--ctl-h); padding: 0; }
.page__actions .btn--link, .page__head > #actions .btn--link { min-height: 0; padding: 0 2px; }
/* A1-07/A1-08: панели инструментов и строки фильтров — --ctl-h-sm (32). */
.ui-menubtn { height: var(--ctl-h-sm); }
.ui-chip { min-height: var(--ctl-h-sm); padding: 0 11px; }
.ui-toolbar .btn:not(.btn--link), .sbm-work__acts .btn:not(.btn--link), .ui-toolbar .ui-selectbtn,
.ui-selectbtn--small { min-height: var(--ctl-h-sm); height: var(--ctl-h-sm); padding-top: 0; padding-bottom: 0; }
.appmain input.control.control--small, input.control.control--small,
.appmain select.control.control--small:not([multiple]), select.control.control--small:not([multiple]) {
  height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); padding-top: 4px; padding-bottom: 4px; font-size: var(--fs-md);
}
/* Строки таблиц и формы внутри карточек задачи — 28. */
.gp-statusform .control--small, .gp-statusform .ui-selectbtn { min-height: var(--ctl-h-xs); height: var(--ctl-h-xs); }
/* Старые чипы-переключатели 24 px → чип-фильтр 32 (ui-chip). */
.chip--toggle, .chips .chip--toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--ctl-h-sm); height: var(--ctl-h-sm); padding: 0 11px;
  border: 1px solid var(--line); border-style: solid; border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--fg); font-size: var(--fs-md); font-weight: var(--fw-medium);
}
.chip--toggle.chip--on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
/* A1-09: одно поле поиска — 34 в формах, 32 в панелях; рамка ≥ 3:1. */
.appmain .ui-search input.ui-search__input, .ui-search input.ui-search__input {
  height: var(--ctl-h); min-height: var(--ctl-h); border-color: var(--ctl-line); font-size: var(--fs-md);
}
.ui-toolbar .ui-search input.ui-search__input, .ui-pop .ui-search input.ui-search__input {
  height: var(--ctl-h-sm); min-height: var(--ctl-h-sm);
}
/* A1-25: шапка приложения — всё по 34. */
.top__user { width: var(--ctl-h); height: var(--ctl-h); }

/* ── Кнопка «на время сборки» (A4-05): aria-disabled вместо disabled ── */
.btn[aria-disabled="true"], .ui-menubtn[aria-busy="true"] { opacity: .6; cursor: progress; }
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.ui-pop__item[aria-disabled="true"] { opacity: .5; cursor: progress; }
.exportbtn__state:empty { display: none; }
.exportbtn__state { margin-left: 8px; font-size: var(--fs-sm); }
/* Волна 5 · F4 (A4-01): подпись «собираю файл… / готово: <имя>» переносится
   в пределах карточки и не выталкивает страницу вбок (было white-space:nowrap
   — scrollWidth 459–623 при ширине 390, 1452–1502 при 1440 на «Отчётах»).
   На узком экране — отдельной строкой под кнопкой. */
.exportbtn { max-width: 100%; min-width: 0; }
.exportbtn > .exportbtn__state, .exportbtn > .faint {
  white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%;
}
@media (max-width: 720px) {
  .exportbtn > .exportbtn__state:not(:empty) { flex-basis: 100%; margin-left: 0; margin-top: 4px; }
}

/* ── Меню «Выгрузить ▾» (A1-06) ─────────────────────────────────────── */
.ui-exportmenu__list { display: flex; flex-direction: column; gap: 2px; }
.ui-exportmenu__item { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; }
.ui-exportmenu__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line, rgba(127,127,127,.25)); font-size: var(--fs-sm); flex-wrap: wrap; }
.ui-exportmenu__head select { max-width: 100%; }
.ui-exportmenu__item svg { flex: none; margin-top: 2px; color: var(--fg-faint); }
.ui-exportmenu__text { display: flex; flex-direction: column; min-width: 0; }
.ui-exportmenu__text small { color: var(--fg-faint); font-size: var(--fs-sm); }

/* ── Бейдж (статус, не кликается) и чип-фильтр (кликается) — A1-14 ──
   ui-badge: 20 px, радиус 6, 11/700. Старые .badge, .pill (Бренды),
   .mchip (Проекты), .sbm-tag--static и статичный .chip — та же геометрия. */
.ui-badge, .badge, .pill, .mchip, .chip:not(.chip--toggle):not(button) {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 20px; padding: 0 7px; border-radius: var(--radius-xs);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .02em; line-height: 1.35; white-space: nowrap;
  vertical-align: middle;
}
.ui-badge--muted { background: var(--none-soft); color: var(--fg-muted); }
/* A1-19: «кандидат» — нейтральный пунктир, не янтарь (янтарь = впереди). */
.pill--cand { border-color: var(--line-strong); color: var(--fg-muted); background: transparent; border-style: dashed; }
/* A1-18: статус у ответственного не режется («про…» вместо «просрочено»). */
.gp-owner { flex-wrap: wrap; }
.gp-owner > span { white-space: normal; overflow-wrap: anywhere; }
.gp-owner .chip, .gp-owner .ui-badge, .gp-owner .badge { flex: none; overflow: visible; text-overflow: clip; }
/* A1-28: бейдж в строке списка — у правого края, рядом с галочкой. */
.ui-listmenu__opt .ui-badge { margin-left: auto; }
/* A1-27: кнопки в ячейке таблицы не слипаются. */
td > .btn + .btn, td > .btn + a.btn, td > a.btn + .btn { margin-left: 8px; }

/* ── Сегмент и вкладки: одна дорожка (A1-15) ─────────────────────────
   md — 32 (вкладки раздела), sm — 28 («Коротко / Подробно»). */
.ui-seg, .sx-tabs, .ln-tabs, .rp-tabs, .tc-tabs {
  padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-sunken);
}
.ui-seg__btn, .sx-tabs a, .ln-tabs a, .rp-tabs a, .tc-tabs a {
  min-height: calc(var(--ctl-h-sm) - 8px); padding: 0 12px; border-radius: 7px;
  font-size: var(--fs-md); font-weight: var(--fw-bold); align-items: center;
}
.ln-tabs a, .rp-tabs a, .tc-tabs a { display: inline-flex; gap: 6px; border-color: transparent; background: transparent; }
.ln-tabs, .rp-tabs, .tc-tabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; }
.ln-tabs a[aria-current], .rp-tabs a[aria-current], .tc-tabs a[aria-current],
.ln-tabs a.is-active, .rp-tabs a.is-active, .tc-tabs a.is-active { background: var(--bg-card); }
.ui-seg--sm .ui-seg__btn { min-height: calc(var(--ctl-h-xs) - 8px); padding: 0 10px; font-size: var(--fs-sm); }
.ui-seg__btn[aria-pressed="true"], .sx-tabs a.is-active, .sx-tabs a[aria-current],
.ln-tabs a[aria-current], .rp-tabs a[aria-current], .tc-tabs a[aria-current],
.ln-tabs a.is-active, .rp-tabs a.is-active, .tc-tabs a.is-active { box-shadow: var(--shadow-sm); }

/* ── KPI-плитка: один вид у шести классов (A1-13, A1-12) ──────────── */
.ui-kpi, .sx-kpi, .ln-tile, .rp-tile, .tc-tile, .gp-tile, .pl-metric {
  padding: var(--card-pad-sm); border-radius: var(--radius);
}
.ui-kpi__value, .sx-kpi__value, .ln-tile__val, .rp-tile__val, .tc-tile__val,
.gp-tile__value:not(.gp-tile__value--long), .pl-metric__value {
  font-size: var(--fs-kpi); font-weight: var(--fw-bold); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.ln-tile__label, .rp-tile__label, .tc-tile__label, .gp-tile__label, .pl-metric__label { font-size: var(--fs-xs); }
.sx-kpis__item { display: flex; min-width: 0; }
.sx-kpis__item > .sx-kpi { flex: 1 1 auto; width: 100%; }
@media (max-width: 600px) {
  .ui-kpi__value, .sx-kpi__value, .ln-tile__val, .rp-tile__val, .tc-tile__val,
  .gp-tile__value:not(.gp-tile__value--long), .pl-metric__value { font-size: var(--fs-xl); }
}

/* ── Карточки: два отступа, два радиуса (A1-10, A1-16) ─────────────── */
/* Пара обзора «Главный сигнал + снимок»: верхние надписи на одной линии —
   одинаковый верхний отступ, слева у сигнала +4 px полосы бренда. */
.ui-signal { padding: 18px 20px 16px 24px; }
.sx-overview .ui-card, .sx-overview .sx-card { padding: var(--card-pad); }
.ui-card, .sx-card, .sx-tablecard, .tablewrap { border-radius: var(--radius); }
.sx-overview .ui-card, .sx-overview .sx-card, .ui-signal { border-radius: var(--radius-lg); }
.sx-issue { padding: 16px 18px 14px 20px; }
.ci-chart { padding: var(--card-pad); }
/* A1-39: абзацы внутри карточек — не шире 80 знаков. */
.card p, .ui-card p, .bsec p, .auth__note { max-width: 80ch; }
.card td p, .ui-card td p { max-width: none; }

/* ── Плашка ошибки действия (A1-20): крестик справа, одна строка ────── */
.actionmsg .notice { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; }
.actionmsg .notice__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: start; }
.actionmsg .notice__body > div:last-child:not(.notice__title) { grid-column: 2; grid-row: 1 / span 2; margin-top: -3px !important; }
.actionmsg .notice__title, .actionmsg .notice__body > div:not(:last-child) { grid-column: 1; }

/* ── Полосы разрывов: подпись целиком (A1-22), группы единиц (A2-12) ── */
.sx-gapbars__item { min-width: 0; }
.sx-gapbars__group { margin: 8px 8px 2px; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-faint); }
.sx-gapbars__group:first-child { margin-top: 0; }

/* ── Горячие клавиши: окно «?» и подсказка «g…» (A4-12) ────────────── */
dialog.hotkeys { width: min(560px, calc(100vw - 32px)); }
.hotkeys__body { display: grid; gap: 14px; }
.hotkeys__table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.hotkeys__table th { text-align: left; font-weight: var(--fw-regular); white-space: nowrap; padding: 4px 16px 4px 0; width: 1%; }
.hotkeys__table td { padding: 4px 0; color: var(--fg-muted); }
.hotkeys__cap { caption-side: top; text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .07em;
  text-transform: uppercase; color: var(--fg-faint); padding-bottom: 4px; }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: var(--radius-xs); background: var(--bg-sunken); color: var(--fg); font-family: var(--mono);
  font-size: var(--fs-sm); text-align: center; line-height: 1.5; }
.ui-keyhint { position: fixed; left: 50%; bottom: 22px; z-index: 130; transform: translate(-50%, 12px); opacity: 0;
  padding: 7px 12px; border-radius: var(--radius-sm); background: var(--nav-bg); color: #fff; font-size: var(--fs-md);
  box-shadow: var(--shadow-menu); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.ui-keyhint.is-on { opacity: 1; transform: translate(-50%, 0); }
/* Заголовок, получивший фокус после смены проекта/рынка (A4-22), — без рамки. */
.page__head h1[tabindex="-1"]:focus { outline: none; }
/* Полоса «Термины экрана» (glossary.js) — кегль из шкалы, без инлайна. */
.gl-strip { font-size: var(--fs-sm); }

/* ── Формы настроек проекта (project_forms.js, волна 3): воронка рынка,
      прайс работ, календарь событий ─────────────────────────────────── */
.pf-card { padding: var(--card-pad); margin: 0 0 16px; }
.pf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pf-title { margin: 0 0 4px; font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.pf-lead { margin: 0; max-width: 80ch; }
.pf-table td { vertical-align: middle; }
.pf-num { width: 110px; }
.pf-cur { width: 84px; }
.pf-pair { display: inline-flex; gap: 6px; align-items: center; }
.pf-actions { white-space: nowrap; }
.pf-actions .btn + .btn { margin-left: 6px; }
.pf-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.pf-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.pf-field--grow { flex: 1 1 260px; }
.pf-field--grow .control { width: 100%; }
.pf-msg { min-height: 18px; margin-top: 8px; font-size: var(--fs-sm); color: var(--fg-muted); }
.pf-msg--ok { color: var(--good); }
.pf-msg--warn { color: var(--warn); }
.pf-msg--bad { color: var(--bad); }
.pf-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow: auto; }
.pf-event { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0;
  border-bottom: 1px solid var(--line); }
.pf-event__date { min-width: 150px; font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.pf-event__name { font-weight: var(--fw-medium); }
/* B6-23: будущая дата — обычный текст (синий жирный читался ссылкой). */
.pf-event--future .pf-event__date { color: var(--fg); }
.pf-event .btn { margin-left: auto; }
@media (max-width: 640px) {
  .pf-head { flex-direction: column; }
  .pf-event__date { min-width: 0; }
}
/* Светофор полноты данных на «Отчётах» (exports.js, A6-07). */
.ex-ready__full { color: var(--good); }
.ex-ready__partial { color: var(--warn); }
.ex-ready__empty { color: var(--bad); }

/* ══ Волна 4 · H5: дизайн-система ═══════════════════════════════════ */

/* B6-12: «Цены и экономика» — таблица внутри карточки формы без второй
   рамки и тени («карточка в карточке в карточке»); кнопки в ряду с полями —
   высоты полей (32), а не 28. */
.pf-card .ui-tablewrap, .pf-card .tablewrap { box-shadow: none; border: 0; border-radius: 0; }
.pf-table .btn, .pf-form .btn { min-height: var(--ctl-h-sm); }
/* Интеграция волны 4 (B6-12): у ui-table ячейки без отступа (ждут ui.valueCell) —
   в таблицах форм текст и числа не должны слипаться («$1201 января»). */
table.ui-table.pf-table th, table.ui-table.pf-table td { padding: 6px 12px; }
table.ui-table.pf-table td.sb__namecell, table.ui-table.pf-table th.sb__namecell { padding-left: 12px; }
.pf-actions .ui-badge + .btn, .pf-actions .pf-eff + .btn { margin-left: 8px; }
.pf-eff { display: block; max-width: 260px; white-space: normal; margin-top: 2px; }
.pf-form .btn { align-self: flex-end; }

/* B6-21: одна высота контролов в ряду панели (32): кнопки рядом со
   списками и полями не ниже их. */
.ui-toolbar .btn, .gp-controls .btn, .cand .btn, .wz-row .btn, .kh-toolbar .btn { min-height: var(--ctl-h-sm); }
.ui-toolbar .btn--link { min-height: 0; }

/* B6-18 (A1-23): подпись разницы в ячейке режется многоточием с полным
   текстом в подсказке (title ставит ui.valueCell); на телефоне — перенос. */
.ui-cell small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .ui-cell small { white-space: normal; overflow: visible; }
}

/* B6-08: у широкой таблицы, срезанной краем карточки, правый край
   затухает, пока справа есть колонки (класс ставит common.js). */
.ui-tablewrap.has-more-right, .tablewrap.has-more-right, .rp-tablewrap.has-more-right {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 36px);
          mask-image: linear-gradient(to left, transparent 0, #000 36px);
}

/* B7-12: клавиша в пункте меню пользователя. */
.usermenu__kbd { margin-left: auto; }
.usermenu__sep { height: 1px; margin: 4px 6px; background: var(--line); }

/* B7-11: тост «Удалено · Отменить» (ui.toast / ui.undoDelete). */
.ui-toasts { position: fixed; left: 50%; bottom: 20px; z-index: 140; transform: translateX(-50%);
  display: grid; gap: 8px; width: min(520px, calc(100vw - 32px)); pointer-events: none; }
.ui-toast { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 8px 8px 14px;
  overflow: hidden; border-radius: var(--radius-sm); background: var(--nav-bg); color: #fff; box-shadow: var(--shadow-menu);
  font-size: var(--fs-md); pointer-events: auto; animation: ui-pop-in .15s ease-out; }
.ui-toast__icon { display: inline-grid; flex: none; }
/* Вид тоста — иконкой и словом; цвет иконки — белый на тёмном (контраст). */
.ui-toast--error { background: var(--bad-btn, var(--nav-bg)); }
.ui-toast__text { flex: 1 1 auto; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.ui-toast__action { flex: none; min-height: var(--ctl-h-xs); padding: 0 12px; border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--radius-sm); background: transparent; color: #fff; font: inherit; font-weight: var(--fw-bold); cursor: pointer; }
.ui-toast__action:hover { background: rgba(255, 255, 255, .12); }
.ui-toast__close { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: 6px; background: transparent; color: #fff; cursor: pointer; opacity: .8; }
.ui-toast__close:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.ui-toast__action:focus-visible, .ui-toast__close:focus-visible { outline: 3px solid #87b9fc; outline-offset: 1px; }
.ui-toast__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, .5);
  transform-origin: left; animation: ui-toast-time linear forwards; }
.ui-toast.is-paused .ui-toast__bar { animation-play-state: paused; }
@keyframes ui-toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ui-toast { animation: none; } .ui-toast__bar { display: none; } }
@media print { .ui-toasts { display: none; } }

/* B6-25: кегль и начертание в JS — только классами из шкалы, без инлайна
   (инлайн-стиль кегля). Утилиты для экранов. */
/* Интеграция волны 4: утилиты заменили инлайн-стили экранов (B6-25) — как и
   инлайн, они главнее классов компонента (.faint, .rp-tile__val…). */
.u-fs-2xs { font-size: var(--fs-2xs) !important; } .u-fs-xs { font-size: var(--fs-xs) !important; } .u-fs-sm { font-size: var(--fs-sm) !important; }
.u-fs-md { font-size: var(--fs-md) !important; } .u-fs-base { font-size: var(--fs-base) !important; } .u-fs-lg { font-size: var(--fs-lg) !important; }
.u-fs-xl { font-size: var(--fs-xl) !important; } .u-fs-kpi { font-size: var(--fs-kpi) !important; }
.u-fw-regular { font-weight: var(--fw-regular) !important; } .u-fw-medium { font-weight: var(--fw-medium) !important; }
.u-fw-bold { font-weight: var(--fw-bold) !important; } .u-fw-heavy { font-weight: var(--fw-heavy) !important; }
/* Интеграция волны 4: «Курсы валют» — валюты проекта и действующий курс. */
.pf-fxlist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-md); }
.pf-fxlist li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pf-fxlist small { flex-basis: 100%; }
/* Интеграция волны 4: шапка «Динамика по периодам» с переключателем 6/12/24
   (series_range.js) — заголовок слева, сегмент справа, перенос на узком. */
.trends-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 4px 0 8px; }
.trends-head h3 { margin: 0; }
/* Интеграция волны 4: переезды домена с кнопкой «Отменить переезд». */
.wmoves__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wmoves__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
/* Интеграция волны 4 (H8 B10-01): подпись «трафик — оценка по выгрузке ключей». */
.sx-trafficbasis { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 10px; font-size: var(--fs-sm); max-width: 100ch; }
.sx-trafficbasis .ico { flex: none; margin-top: 2px; }
/* Волна 5 · P3: трафик из нескольких источников — подпись и «оценки расходятся». */
.sx-tssources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: var(--fs-sm); max-width: 110ch; }
.sx-tssources .ico { flex: none; }
/* Волна 7 · A4: значок не отрывается от фразы — длинная подпись переносится
   внутри своей колонки, а не уезжает строкой ниже, оставляя «ⓘ» одного. */
.sx-tssources { flex-wrap: nowrap; align-items: flex-start; }
.sx-tssources .ico { margin-top: 2px; }
.sx-tssources > span:not(.ui-badge) { flex: 0 1 auto; min-width: 0; }
.sx-tssources > .ui-badge { flex: none; }
.sx-tsmark { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 2px; font-size: var(--fs-xs, 12px); cursor: help; }
.sx-tsdiverge { cursor: help; white-space: nowrap; }
.sx-tsblock { margin-top: 12px; }

/* Волна 7 · A4: пара «подпись + список» в строке фильтров — не разрывается. */
.ui-fpair { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 100%; }
.ui-fpair > :last-child { min-width: 0; }
/* Волна 7 · A4: бейдж в плитке KPI, если не влез в строку, — скругление 12 px: в одну строку — та же «пилюля»,
   в три строки — карточка, а не овал. */
.sx-kpi .ui-badge, .sx-kpi .sx-status { white-space: normal; text-align: left; border-radius: 12px; align-items: flex-start; }

/* Волна 13 · H5-03: самые узкие телефоны (320–359 px). Подписи кнопок и
   ползунков не переносились (nowrap) — страница уезжала вбок на 2–38 px
   («Скорборд», «Разрывы», «Пульс», «Отчёты», ползунки «Сколько строк»). */
@media (max-width: 359px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  .ui-range { white-space: normal; flex-wrap: wrap; max-width: 100%; }
  .ui-tablefoot__tools { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .ui-tablefoot > * { max-width: 100%; min-width: 0; }
  .ui-range > span, .ui-range .faint { white-space: normal; }
}