/*
 * Примитивы нового слоя. Правило одно: значения берутся из tokens.css.
 * Числом пишутся только нули, единицы рамок и проценты — всё прочее ловит
 * tests/test_design_tokens.py.
 *
 * Этот файл подключают ТОЛЬКО наши страницы. Bootstrap с ними не соседствует:
 * его пластика и есть то, из-за чего интерфейс читался как админка.
 */

/* Документ прокручивает содержимое. На телефоне вся шапка закреплена,
   а её измеренная высота резервирует место над списком. */
.app-shell {
  min-height: 100dvh;
  padding-bottom: var(--app-nav-h);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
}

/* Шрифт слоя — и вне оболочки: лист (sheet.js) монтируется прямо в body,
   а у body из base.css Inter (сверка profile п.31). */
html.app-layer body { font-family: var(--font-sans); }

/* Фокус и переходы по якорю не должны заезжать под липкую шапку: высота у
   неё разная (на ленте ещё поиск и чипы), поэтому её измеряет ui/app/shell.js
   и кладёт сюда. Без этого «Показать все» в чекапе уводил начало списка под
   полосу бренда. */
/* Без запасного значения: не доехал shell.js — правило просто не действует,
   как было до него (и «0px» в запасном не проскочит мимо шкалы отступов). */
html { scroll-padding-top: var(--app-head-h); }

/* Атрибут hidden обязан прятать. Браузерное [hidden] { display: none } —
   стиль браузера, и ЛЮБОЕ авторское display у класса его перебивает: так
   на карточке сигнала оставались чипы ленты (.app-toolbar { display: flex }).
   Одно правило на весь слой вместо [hidden] у каждого класса; !important —
   чтобы его не перебил и селектор с id. Легаси (без app-layer) не задето. */
html.app-layer [hidden] { display: none !important; }

.app-head { display: block; }
@media (max-width: 959.98px) {
  html.app-layer, html.app-layer body { overscroll-behavior-y: none; }
  .app-shell { padding-top: var(--app-head-h); }
  .app-head { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: var(--surface); }
}
html.app-installed, html.app-installed body { touch-action: pan-x pan-y; overscroll-behavior-y: contain; }
/* Браузер сохраняет кадр между документами и сам выполняет растворение.
   При уменьшении движения и без поддержки остаётся обычный переход. */
@media (max-width: 959.98px) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: var(--dur-tap); animation-timing-function: var(--ease-out); }
}
/* Подпись раздела — десктопная (макет м:1875); телефон её не показывает. */
.app-head__caption { display: none; }

/* Страница нового слоя видна сразу, не дожидаясь входа. base.css прячет тело
   целиком до класса keycloak-initialized и потом проявляет его за 0,3 с — на
   каждом переходе по панели экран гас и загорался заново. Оболочке прятать
   нечего: шапка и панель одинаковы на всех экранах, данные грузятся после
   входа и до того показывают своё «Загружаем…». */
body:has(> .app-shell):not(.keycloak-initialized) {
  visibility: visible;
  opacity: 1;
}

/* Тело экрана — просто блок: прокруткой заведует документ (см. .app-shell).
   Макет (м:1283 и др.): содержимое на 14 px ниже полосы бренда и на 24 px
   выше нижней панели — у последнего блока свой воздух, не впритык. */
.app-shell__body {
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
}

/* Высота панели, собранная из тех же токенов, что её и задают ниже:
   кромка + отступ сверху + пункт + отступ снизу. Пункт выше цели касания
   (м:1380–1386: поля 10/4, ≈59 px): иначе плашка активного пункта
   приплюснута до 44 px.
   Нижний отступ включает безопасную зону, без добавочного поля поверх неё.
   Нужна снаружи: mobile.css бронирует под панель место в конце легаси-страницы,
   и числом 82 это была бы копия, разъезжающаяся при первой правке отступов. */
:root {
  --app-nav-item-h: calc(var(--touch) + var(--sp-3));
  --app-nav-bottom: max(var(--sp-2), env(safe-area-inset-bottom, 0px));
  --app-nav-h: calc(
    1px + var(--sp-2) + var(--app-nav-item-h) + var(--app-nav-bottom)
  );
}

/* Панель нового слоя прижата к низу экрана на любой ширине: другой навигации
   у этих страниц нет. Место под неё бронирует отступ оболочки — панель
   монтируется после готовности прав, и без брони хвост списка сначала стоял
   бы под панелью, а потом прыгал. */
.app-shell .app-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Полоса бренда светлая (макет м:583–593): фон экрана, тонкая граница снизу. */
/* Липкая — единственная часть шапки, что держится у верха на телефоне (см. .app-head). */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) var(--sp-4) var(--sp-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
}
@media (max-width: 959.98px) { .app-head .app-bar { position: static; } }
.app-bar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 100dvh; background: var(--surface); }
.app-bar__brand, .app-bar__back {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: var(--touch);
  margin: calc((var(--fs-body) * var(--lh-body) - var(--touch)) / 2) 0;
  text-decoration: none;
}
.app-bar__brand { gap: var(--sp-2); color: var(--text); font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 700; }
/* Знак бренда (записка о логотипе 21.09): 26 px в полосе телефона, 30 px в
   панели десктопа. Рисунок несёт собственную тёмную подложку, поэтому на
   кремовой бумаге стоит в скруглённом квадрате того же тона. */
.app-brand-mark { flex: none; display: block; width: 26px; height: 26px; border-radius: var(--r-control); overflow: hidden; background: var(--brand-canvas); }
.app-brand-mark img { display: block; width: 100%; height: 100%; }
.app-bar__back { color: var(--link); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.app-bar__brand[hidden], .app-bar__back[hidden] { display: none; }
/* Шестерёнка: круг 34 px по макету, цель касания 44 px (решение 5). */
.app-bar__gear {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-1)) calc(-1 * var(--sp-1)) 0;
  color: var(--link);
}
.app-bar__gear::before {
  content: '';
  position: absolute;
  inset: var(--sp-1);
  border-radius: 50%;
  background: var(--surface-card);
  border: 1px solid var(--border);
}
.app-bar__gear svg { position: relative; }
.app-bar__brand:focus-visible, .app-bar__back:focus-visible, .app-bar__gear:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.app-nav {
  flex: none;
  z-index: 10;
  display: flex;
  /* Рулинг B6: на легаси-страницах (без .app-shell) панель тем же шрифтом. */
  font-family: var(--font-sans);
  background: var(--surface-card);
  border-top: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-2) var(--app-nav-bottom);
}

/* Легаси-страница: панель прижата к низу ЭКРАНА, а не стоит в конце документа.
   Раньше здесь было position: sticky — и оно не делало ничего. Липкий элемент
   перемещается только внутри своего блока-контейнера, а точка монтирования
   (#app-nav-mount) — обычный блок в хвосте тела ровно высотой панели: двигаться
   некуда. На ленте из сорока сигналов документ 3373 px, панель стояла на
   3291…3373 при экране 664, то есть навигации на странице не было вовсе —
   легаси-меню к этому моменту уже погашено классом app-nav-mounted.
   Ставит класс ui/app/shell.js, когда точка монтирования НЕ внутри .app-shell:
   внутри оболочки панель прижата раскладкой, и вынимать её из потока нельзя —
   тело оболочки тогда заберёт себе её высоту.

   Медиазапрос — не украшение, а пара к брони места. Место под вынутую панель
   бронирует mobile.css, и только в этом же медиазапросе телефона. Без границы
   на десктопе панель накрывала бы хвост страницы: замер на 1280×800 — панель
   на 718…800, а подпись «Это все сигналы за выбранный период» на 730…751, то
   есть целиком под ней (то же на 1024 и 900). На десктопе панель и не нужна
   прижатой: навигация там — вкладки в шапке, а панель остаётся в потоке в
   хвосте документа, как и была. Граница совпадает с mobile.css намеренно. */
@media (max-width: 767.98px) {
  .app-nav--fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

/* На десктопе прижатой панели нет вовсе: навигация легаси-страниц там —
   вкладки в шапке, а панель в хвосте документа была бы вторым, лишним меню.
   Страницы нового слоя (.app-shell) панель держат на любой ширине: у них
   другой навигации нет. */
@media (min-width: 768px) {
  .app-nav--fixed { display: none; }
}

/* Раздел с пунктами — свой флекс-контейнер: пункты лежат внутри <nav>, а
   бренд и профиль — его соседи (кнопка выхода не должна попадать в
   навигационный лендмарк). Без этого правила пункты теряли `flex: 1` и
   вставали в столбик, а панель накрывала низ страницы. */
.app-nav__tabs { flex: 1; display: flex; gap: var(--sp-1); min-width: 0; }

/* Бренд и профиль в панели, как и заголовок экрана в шапке, — только в
   широкой раскладке (см. ниже): на телефоне экран называет полоса бренда.
   Сам пункт профиля гасится отдельно от обёртки: getComputedStyle у потомка
   спрятанного родителя возвращает его СОБСТВЕННЫЙ display, и без этой строки
   он считается видимым — замер ширины панели видел на телефоне пять пунктов
   вместо четырёх (тест «нижняя панель вмещает пункты админа»). */
.app-nav__brand, .app-nav__aside, .app-nav__aside .app-nav__item,
.app-head__title { display: none; }
.feed-aside { display: none; }

.app-nav__item {
  flex: 1;
  /* Не ниже цели касания (--touch) — и выше неё, см. --app-nav-item-h. */
  min-height: max(var(--touch), var(--app-nav-item-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  border-radius: var(--r-block);
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
  font-weight: 600;
  color: var(--text-faint);
  text-decoration: none;
}

.app-nav__pill { display: grid; place-items: center; color: var(--nav-idle); }

/* Скрытый пункт обязан исчезать.
   Браузерное правило [hidden] { display: none } — это стиль браузера, и
   ЛЮБОЕ авторское display его перебивает независимо от специфичности.
   Без этой строки shell.js честно проставляет hidden, тесты честно видят
   атрибут, а человек честно видит все пять пунктов панели. */
.app-nav__item[hidden] { display: none; }

.app-nav__item[aria-current="page"] { background: var(--gold-soft); color: var(--text); }
.app-nav__item[aria-current="page"] .app-nav__pill { color: var(--text); }
/* Аналитики на телефоне нет (решение 3): пункт прячется до широкой раскладки. */
@media (max-width: 959.98px) {
  .app-shell .app-nav__item[data-tab="reports"], .app-nav--fixed .app-nav__item[data-tab="reports"] { display: none; }
}

/* Фокус нужен и здесь: это ссылка, по которой ходят с клавиатуры.
   Полагаться на кольцо браузера значит отдать его вид теме и не проверять. */
.app-nav__item:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

/* Поле ввода. 16 px — не вкусовщина: мельче Safari зумит страницу
   при фокусе, и человек оказывается в увеличенной вёрстке без выхода. */
.app-control {
  width: 100%;
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-family: inherit;
  color: var(--text);
  /* Белое, как в макете (м:616, 1217): кремовое поле на кремовой странице
     сливалось с фоном. */
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
}
.app-control::placeholder { color: var(--text-faint); opacity: 1; }

.app-control:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

/* Список разделов: строка — цель для пальца целиком, не только текст.
   Сетка 1fr auto: имя+подпись в первой колонке (двумя строками при
   .app-list__note), значение — во второй, на всю высоту строки. Строка без
   спанов (более.html — простой текст) ложится в ту же первую ячейку. */
.app-list a, .app-list button {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--sp-2);
  min-height: var(--touch);
  padding: var(--sp-2);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-decoration: none;
  text-align: left;
  font-family: inherit;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.app-list__name { grid-column: 1; grid-row: 1; }
.app-list__note {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-faint);
}
.app-list a[hidden] { display: none; }
.app-list a:focus-visible, .app-list button:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

/* Карточка-список (м:1221–1230, 1266–1277, 1284–1293, 1304–1313, 1332–1350):
   строки в белой карточке, между ними линия #F0EAD9, у перехода «›» справа.
   Один компонент на корень профиля, «Ваш доступ», подписки, оглавление
   справки и корень «Ещё». Строкой считается любой прямой потомок, поэтому
   карточкой становятся и свои разметки (.access-limit, .push-row).
   Линия — над строкой, у которой ВЫШЕ есть видимая соседка: поиск по
   справке прячет строки, и первая видимая не должна получать линию сверху. */
.app-list--card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.app-list--card > *, .app-list--card > a, .app-list--card > button {
  margin: 0;
  padding: calc(var(--sp-1) * 3.75) var(--sp-4);
  border: 0;
  font-size: var(--fs-row);
  line-height: var(--lh-row);
}
.app-list--card > :not([hidden]) ~ * { border-top: 1px solid var(--surface-accent); }
.app-list--card .app-list__note { margin-top: calc(var(--sp-1) * .5); font-size: var(--fs-note); line-height: var(--lh-note); }
/* Кольцо фокуса внутрь: снаружи его срезает overflow карточки. */
.app-list--card > a:focus-visible, .app-list--card > button:focus-visible { outline-offset: -2px; border-radius: var(--r-card); }
/* «›» у перехода без значения (Справка, Выйти, пункты оглавления): у строки
   со значением стрелка уже приклеена к нему (.app-list__value::after). */
.app-list--card > a:not(:has(.app-list__value))::after,
.app-list--card > button.app-list__row::after { content: '›'; grid-column: 2; grid-row: 1 / -1; color: var(--text-faint); font-size: var(--fs-lead); }

/* Цифры и тикеры — моноширинным: разряды встают друг под другом при
   прокрутке, и величины сравниваются глазом без чтения. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Кнопка. Одна высота с полем ввода и целью касания. */
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  color: var(--text);
  /* Вторичная кнопка белая (м:577, 609, 855, 1323): кремовая выглядела
     «дырой» в белой карточке и сливалась со страницей. */
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  text-decoration: none;
}
.app-btn--primary {
  color: var(--surface);
  background: var(--brand-ink);
  border-color: var(--brand-ink);
}
.app-btn:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}
/* Лист снизу. Подложка на весь экран, панель прижата к низу, верхняя кромка
   скруглена радиусом листа. Тело прокручивается само, не выше 80 % экрана. */
.app-sheet {
  border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent;
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.app-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--text);
  opacity: 40%;
  animation: app-sheet-fade var(--dur-sheet) var(--ease-out);
}
/* Лист выезжает снизу, подложка проявляется. Появление рывком читалось как
   ошибка отрисовки — «что-то моргнуло», а не «открылось». */
@keyframes app-sheet-rise { from { transform: translateY(100%); } }
@keyframes app-sheet-fade { from { opacity: 0; } }
.app-sheet__panel {
  animation: app-sheet-rise var(--dur-sheet) var(--ease-out);
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 80%;
  /* Лист кремовый, строки — в белой карточке (м:566–568). Шрифт — явно:
     лист монтируется в body, вне .app-shell, и --font-sans не наследует. */
  background: var(--surface);
  font-family: var(--font-sans);
  color: var(--text);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-sheet__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-2);
}
.app-sheet__close {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--touch);
  background: none;
  border: 0;
}
.app-sheet__close:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.app-sheet__handle {
  display: block;
  width: 38px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--dashed);
}
.app-sheet__title {
  outline: none;
  align-self: flex-start;
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 700;
}
.app-sheet-row { border-bottom: 1px solid var(--border-subtle); }
.app-sheet-row > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--touch);
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-row);
  line-height: var(--lh-row);
}
.app-sheet-row > summary::-webkit-details-marker { display: none; }
.app-sheet-row__value { color: var(--text-faint); font-size: var(--fs-caption); line-height: var(--lh-caption); }
/* Значение — одной строкой справа (м: лист отчёта): длинное название фильтра
   («Только долгосрочный подтверждённый прогноз») переносится само, а не
   сжимает «по умолчанию ›» в три строки. Очень длинный выбор обрезается. */
.app-sheet-row > summary { gap: var(--sp-3); }
.app-sheet-row > summary > span:first-child { flex: 1 1 auto; min-width: 0; }
.app-sheet-row__value { flex: none; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Строки фильтров ленты — белая карточка с тонкими линиями между строками
   (м:568–571): строка 15 px, поля 14/15. */
.app-sheet__rows { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.app-sheet__rows > .app-sheet-row { padding: 0 calc(var(--sp-1) * 3.75); border-bottom: 0; }
.app-sheet__rows > .app-sheet-row + .app-sheet-row { border-top: 1px solid var(--surface-accent); }
.app-sheet__rows .app-sheet-row > summary { padding: calc(var(--sp-1) * 3.5) 0; }
.app-sheet-row__body { padding: 0 0 var(--sp-3); }
.app-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Докрутил лист до конца и тянешь дальше — страница под ним НЕ едет.
     Раньше прокрутки у документа не было вовсе, теперь есть. */
  overscroll-behavior: contain;
  padding: 0 var(--sp-4) var(--sp-4);
}
.app-sheet__actions {
  flex: none;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
/* По макету (м:576–577): первая кнопка («Сбросить») — по ширине содержимого,
   вторая («Показать») — забирает остаток. min-width держит тап-таргет узкой
   первой кнопки не меньше 44 px, даже если подпись короче. */
.app-sheet__actions .app-btn:first-child { flex: none; min-width: var(--touch); }
.app-sheet__actions .app-btn:last-child { flex: 1; }
/* Кнопки листа 14 px, радиус 9; «Сбросить» — обычным начертанием (м:577–578). */
.app-sheet__actions .app-btn { font-size: var(--fs-label); line-height: var(--lh-label); border-radius: var(--r-row); }
.app-sheet__actions .app-btn:first-child:not(.app-btn--primary) { font-weight: 400; color: var(--text-soft); }

/* Строка инструментов над лентой: чипы и кнопка фильтров. На узком экране
   («Все»+«Действующие»+«Super»+«Избранное»+«Все фильтры» шире 375/390 px)
   ряд переносится (макет м:~620), а не скроллится вбок и не толкает кнопку
   фильтров за край экрана — она обязана остаться в кадре. */
.app-toolbar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sp-1) * 1.75); /* 7 px, макет м:620 */
  align-items: center;
  /* sp-1, не sp-2: кнопка-инструмент ниже подросла до --touch (44 px) —
     ужатое вертикальное поле держит однострочный тулбар на прежней высоте
     (44 + 2×4 = 36 + 2×8 = 52 px), а не делает его выше. */
  padding: var(--sp-1) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
}
/* Чипы ленты: без линии под рядом, 12 px от поиска (м:612, 1881). Кнопка
   «Все фильтры» на телефоне стоит в строке поиска (feed-filters.js), так что
   четыре чипа занимают ряд целиком и не переносятся. */
#feed-toolbar { border-bottom: 0; padding: var(--sp-3) var(--sp-4) 0; }

/* Вкладки «Рыночной аналитики» — сегментный переключатель (задача 14, макет
   м:1768), не строка чипов: одна дорожка-плашка, активный сегмент —
   отдельная плитка светлее дорожки. Длинные подписи на телефоне не
   помещаются в строку — прокручиваются вбок, а не переносятся на вторую.
   Внутренний отступ дорожки — 3 px по макету; литералом писать нельзя (страж
   шкалы отступов не пропускает и число внутри calc()), отсюда доля --sp-1. */
.an-seg {
  display: inline-flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding: calc(var(--sp-1) * 0.75);
  /* Дорожка не прижата к краю экрана (фикс-раунд 1): без своих боковых полей
     она садилась прямо на 0/0 — .app-toolbar, у которого их сняла эта
     разметка, их и давал. Прокрутка вбок работает как прежде. */
  margin: 0 var(--sp-4) var(--sp-2);
  background: var(--surface-accent);
  border-radius: var(--r-control);
}
.an-seg [role="tab"] {
  flex: none;
  display: inline-flex;
  align-items: center;
  /* Цель касания сегмента ≥36 px (фикс-раунд 1) — дорожка тоньше --touch, но
     сама плитка обязана оставаться нажимаемой; align-items держит подпись по
     центру возросшей высоты. */
  min-height: calc(var(--touch) - var(--sp-2));
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--r-control);
  cursor: pointer;
}
.an-seg [role="tab"][aria-selected="true"] { background: var(--surface-card); color: var(--text); }
/* Телефон: три сегмента делят дорожку поровну и переносят подпись, а не
   уезжают за край — «Все сигналы» раньше обрезался краем экрана, и
   прокрутка внутри дорожки ничем не обозначалась. */
@media (max-width: 959.98px) {
  .an-seg { display: flex; overflow: visible; }
  .an-seg [role="tab"] { flex: 1 1 auto; justify-content: center; text-align: center; padding: var(--sp-2); }
}

/* Панель вкладки без контента (задачи 2-5 ещё не наполнили её) занимает 0
   высоты — блочный элемент без содержимого её не имеет. Тогда видимой
   панель не считает и браузер, и e2e (toBeVisible смотрит на bounding box),
   хотя атрибут hidden с неё уже снят. */
[role="tabpanel"] { min-height: 1px; }

/* Поиск по тикеру над лентой. Лупа и крестик лежат поверх поля: поле одно и
   во всю ширину, внутренние отступы оставляют им место. Крестик свой — iOS
   у поля type="search" штатного не рисует, а стирать SBER по букве неудобно. */
.app-search {
  flex: none;
  position: relative;
  padding: var(--sp-2) var(--sp-4) 0;
}
.app-search .app-control {
  padding-left: calc(var(--sp-3) + var(--sp-5));
  padding-right: var(--touch);
  -webkit-appearance: none;
  appearance: none;
  /* Макет (м:613–616, 711): обычный шрифт, набранный тикер — 600, подсказка —
     14 px обычным начертанием. Кегль самого поля остаётся 16: мельче iOS
     увеличивает страницу при фокусе. */
  font-weight: 600;
  border-radius: var(--r-block);
}
.app-search .app-control::placeholder { font-size: var(--fs-label); font-weight: 400; }
.app-search .app-control::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.app-search__icon {
  position: absolute;
  left: calc(var(--sp-4) + var(--sp-3));
  /* От низа, а не от верха: верхний отступ формы на телефоне и на десктопе
     разный, а поле всегда стоит на дне формы. */
  bottom: calc(var(--touch) / 2);
  transform: translateY(50%);
  width: var(--sp-4);
  height: var(--sp-4);
  color: var(--text-faint);
  pointer-events: none;
}
.app-search__clear {
  position: absolute;
  bottom: 0;
  right: var(--sp-4);
  width: var(--touch);
  height: var(--touch);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.app-search__clear[hidden] { display: none; }
/* Телефон: «Все фильтры» — квадрат 44×44 справа от поля поиска (в макете
   телефона кнопки нет, м:621; фильтры при этом должны оставаться под рукой).
   Поле уступает ей место, крестик сдвигается вместе с краем поля. */
.app-search:has(> .app-chip--all) { padding-right: calc(var(--sp-4) + var(--touch) + var(--sp-2)); }
.app-search:has(> .app-chip--all) .app-search__clear { right: calc(var(--sp-4) + var(--touch) + var(--sp-2)); }
.app-search > .app-chip--all {
  position: absolute;
  right: var(--sp-4);
  bottom: 0;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border-style: solid;
  border-color: var(--border);
  border-radius: var(--r-block);
}
.app-search > .app-chip--all::after { content: none; }
.app-search > .app-chip--all .app-chip__icon { display: block; }
.app-search > .app-chip--all .app-chip__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-search > .app-chip--all .app-chip__count { position: absolute; top: calc(var(--sp-1) * -1); right: calc(var(--sp-1) * -1); }
.app-search__clear:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; }

/* Телефон: первое, что стоит в шапке под полосой бренда (поиск ленты и
   чекапа, вкладки аналитики), отступает от неё на тот же шаг, что и тело
   экрана — макет м:614 (padding-top 14). */
@media (max-width: 959.98px) {
  .app-head .app-search { padding-top: var(--sp-3); }
  .app-head .an-seg { margin-top: var(--sp-3); }
}

/* Лента (макет 18.09, B3): карточка сигнала — тикер и время, название,
   плашки срока/SUPER, статус-пилюля и примечание, с разделителями дат. */
/* Макет м:626–640: поля 13/14, 7 px между строками карточки, 10 — между карточками. */
.feed-row { display: flex; flex-direction: column; gap: calc(var(--sp-1) * 1.75); margin: 0 0 calc(var(--sp-1) * 2.5); padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5);
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-card); color: var(--text); text-decoration: none; }
.feed-row--super[data-status="active"] { border-color: var(--gold); }
.feed-row:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; }
.feed-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.feed-row__ticker { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; }
.feed-row__star { flex: none; color: var(--gold); }
.feed-row__star:empty { display: none; }
.feed-row__time { margin-left: auto; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-faint); }
.feed-row__name { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-faint); }
.feed-row__contour { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-soft); }
.sig__contour { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-soft); }
.feed-row__tags { display: flex; flex-wrap: wrap; gap: calc(var(--sp-1) * 1.5); }
.feed-row__foot { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--sp-1) * 1.75); }
.feed-row__note { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-soft); }
/* Пилюля статуса строки — 11/700, поля 4/9 (м:637). Специфичнее .app-pill,
   который объявлен ниже. */
.feed-row .feed-row__status { padding: var(--sp-1) calc(var(--sp-1) * 2.25); font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 700; }
.feed-row[hidden], .feed-row__status[hidden] { display: none; }
.app-icon-btn { min-width: var(--touch); min-height: var(--touch); border: 0; border-radius: var(--r-row); background: transparent; color: var(--text-muted); font: 500 var(--fs-title)/1 var(--font-sans); cursor: pointer; }
.app-icon-btn:hover { background: var(--surface-row); color: var(--text); }
.app-icon-btn[aria-busy="true"] { animation: app-refresh-spin .7s linear infinite; }
@keyframes app-refresh-spin { to { transform: rotate(360deg); } }
.feed-refresh { margin-left: auto; }
.feed-refresh--wide { display: none; margin-left: calc(var(--sp-1) * -2); }
.feed-refresh-indicator { position: fixed; z-index: 9; top: var(--app-head-h); left: 50%; transform: translate(-50%, -120%); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-card); color: var(--text-muted); font-size: var(--fs-small); box-shadow: 0 var(--sp-1) var(--sp-3) var(--shadow); transition: transform .16s ease; }
.feed-refresh-indicator[data-show="true"] { transform: translate(-50%, var(--sp-2)); }
.sig__head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.sig__refresh { min-width: var(--touch); min-height: var(--touch); }

/* Карточка сигнала (задача 5, макет 18.09): одна разметка на отдельный
   экран телефона (#signal-screen) и правую колонку десктопа (#feed-aside,
   см. WIDE-медиа ниже). */
.signal-screen[hidden], .feed-layout[hidden] { display: none; }
/* Рамка карточки золотая всегда — и по тапу, и из пуша (м:666, 1915). */
.sig { background: var(--surface-card); border: 1px solid var(--gold); border-radius: var(--r-card); padding: var(--sp-4); }
/* Пометка «из пуша» — отдельная плашка над карточкой (м:665). */
.sig__push { margin: 0 0 calc(var(--sp-1) * 3.5); padding: calc(var(--sp-1) * 2.25) var(--sp-3); border: 1px solid var(--gold); border-radius: var(--r-control); background: var(--gold-soft); color: var(--link); font-size: var(--fs-note); line-height: var(--lh-note); }
.sig__head { display: flex; justify-content: space-between; gap: var(--sp-2); }
.sig__head > div { display: flex; flex-direction: column; min-width: 0; }
.sig__ticker { font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 700; }
/* Тикер — цель программного фокуса при открытии экрана (tabindex="-1",
   не остановка Tab): рамка вокруг него на каждом открытии читалась как
   выделенное поле ввода. Диктор имя экрана получает и без неё. */
.sig__ticker:focus { outline: none; }
.sig__name { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-soft); }
.sig__sector { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-faint); }
.sig__when { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-faint); white-space: nowrap; }
.sig__tags { display: flex; flex-wrap: wrap; gap: calc(var(--sp-1) * 1.5); margin: var(--sp-3) 0; }
.sig__status { padding: calc(var(--sp-1) * 2.75) var(--sp-3); border-radius: var(--r-row); background: var(--surface-sunk); }
.sig__status--active { background: var(--up-surface); color: var(--up-ink); }
.sig__status--suspended { background: var(--gold-soft); color: var(--warn-ink); }
.sig__status--expired { background: var(--down-surface); color: var(--down-ink); }
.sig__status-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-label); line-height: var(--lh-label); }
/* Рекомендация — жирным, 13 px (м:684); примечание — тёмным текстом, не цветом статуса (м:685). */
.sig__rec { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 700; }
.sig__status-note { margin: var(--sp-1) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-soft); }
.sig__note { margin: var(--sp-3) 0 0; font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-soft); }
/* Плитки фактов: значения без засечек (м:693–697), тон плиток — фон
   страницы, как в макете, а не утопленный. */
.sig__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--sp-1) * 2.5); margin: var(--sp-3) 0 0; }
.sig .app-tile { padding: calc(var(--sp-1) * 2.5) calc(var(--sp-1) * 2.75); border-radius: var(--r-control); background: var(--surface); }
.sig .app-tile__k { letter-spacing: .05em; color: var(--text-faint); }
.sig__facts dd { margin: 0; }
.sig__v--up { color: var(--up-ink); } .sig__v--down { color: var(--down-ink); }
.sig__foot { margin: var(--sp-3) 0; padding-top: calc(var(--sp-1) * 2.5); border-top: 1px dashed var(--border); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
.sig__actions { display: grid; grid-template-columns: 1fr var(--touch); gap: var(--sp-2); }
.sig__actions .app-btn { font-size: var(--fs-label); line-height: var(--lh-label); border-radius: var(--r-row); }
/* Звезда — значок 18 px цвета ссылки (м:703). Без своих полей: в колонке
   44 px поля кнопки (16+16) сжимали значок до 10 px. */
.sig__star { padding: 0; color: var(--link); }
.sig__star[aria-pressed="true"] { color: var(--gold); }
/* Широкая колонка (задача 12): тикер крупнее, действие — одна текстовая
   ссылка на всю ширину (звезда живёт в строке ленты, не в карточке). */
.sig__ticker--wide { font-size: var(--fs-title); line-height: var(--lh-title); }
.sig--wide .sig__actions { display: block; margin-top: var(--sp-3); }
.sig__link { color: var(--link); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; text-decoration: none; }
/* Колонка десктопа (м:1915–1940): время под названием, а не справа от
   тикера (там оно сжимало название до двух строк); всё на полшага мельче. */
.sig--wide { padding: calc(var(--sp-1) * 3.75); border-radius: var(--r-box); }
.sig--wide .sig__head { flex-direction: column; gap: 0; }
.sig--wide .sig__name { font-size: var(--fs-note); line-height: var(--lh-note); }
.sig--wide .sig__when { margin-top: calc(var(--sp-1) * 0.75); font-size: var(--fs-nav); line-height: var(--lh-small); white-space: normal; }
.sig--wide .sig__tags { gap: calc(var(--sp-1) * 1.25); }
.sig--wide .sig__status { padding: calc(var(--sp-1) * 2.25) calc(var(--sp-1) * 2.75); border-radius: var(--r-control); }
.sig--wide .sig__status-row { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.sig--wide .sig__rec { font-size: var(--fs-note); line-height: var(--lh-note); }
.sig--wide .sig__facts { gap: calc(var(--sp-1) * 2.25); }
.sig--wide .app-tile { padding: calc(var(--sp-1) * 2.25) calc(var(--sp-1) * 2.5); }
.sig--wide .app-tile__k { font-size: var(--fs-tag); line-height: var(--lh-tag); }
.sig--wide .app-tile__v { font-size: var(--fs-label); line-height: var(--lh-label); }
.sig__link:hover, .sig__link:focus-visible { text-decoration: underline; }

/* Строка «а мой счёт это купил?» (предпросмотр модели, задача 16, макет
   м:2225–2252) — пять состояний, цвет несёт тон ответа. */
.sig__mine { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-block); border: 1px solid var(--dashed); background: var(--surface-sunk); color: var(--link); }
.sig__mine--1 { background: var(--up-surface); border-color: var(--up-border); color: var(--up-ink); }
.sig__mine--3 { background: var(--down-surface); border-color: var(--down-border); color: var(--down-ink); }
.sig__mine--5 { background: var(--down-surface-soft); border-color: var(--down-border); color: var(--down-ink); }
.sig__mine-title { display: block; font-size: var(--fs-label); line-height: var(--lh-label); }
.sig__mine-note { margin: var(--sp-1) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); }
/* Оговорка о свежести денег и риска: тише примечания, но тем же цветом —
   состояния строки красят контейнер, и свой цвет тут провалил бы контраст. */
.sig__mine-asof { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); line-height: var(--lh-caption); }

/* Баннер триала в предпросмотре модели (B9, решение 18). */
.trial-banner { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-block); border: 1px solid var(--gold); background: var(--gold-soft); color: var(--warn-ink); font-size: var(--fs-caption); }

/* Отклик на нажатие: то, что нажали, темнеет под пальцем и возвращается
   плавно. Без этого тап по строке до раскрытия ничем не отзывался. */
.feed-row,
.app-chip,
.app-btn,
.app-list a,
.app-list button,
.app-nav__item {
  transition: background-color var(--dur-tap) linear;
}
.feed-row:active,
.app-chip:active,
.app-list a:active,
.app-list button:active,
.app-nav__item:active {
  background-color: var(--surface-sunk);
}
.app-btn:active { background-color: var(--surface-sunk); }
.app-btn--primary:active { background-color: var(--navy-hover); }
/* Ниже правил состояния: у выбранного чипа та же специфичность, и объявленный
   выше :active проигрывал бы ему — нажатие на включённый срез не отзывалось.
   aria-selected — та же подсветка для вкладок (role="tab" не допускает
   aria-pressed, R10). */
.app-chip[aria-pressed="true"]:active,
.app-chip[aria-selected="true"]:active { background-color: var(--navy-hover); }
/* Сетка фактов в две колонки — общая для раскрытой строки ленты и карточки
   чекапа (checkup.js), поэтому живёт под нейтральным именем, а не под
   feed-row__*. */
.app-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-3);
}
.app-facts div { display: flex; justify-content: space-between; gap: var(--sp-2); }
.app-facts dt { color: var(--text-muted); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.app-facts dd { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; }

/* Хвост списка: грузится, ещё, конец, пусто, ошибка. */
.app-tail {
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}

/* Чип: срез, значение, кнопка инструмента. Нажатый — залит чернилами. */
.app-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: calc(var(--touch) - var(--sp-2));
  /* Макет м:622: 12,5/600, поля 7/11, пилюля. Высота остаётся 36 (цель
     касания), поэтому вертикальное поле задаёт min-height, а не padding.
     11 px — доля --sp-1: литерал страж шкалы отступов не пропускает. */
  padding: 0 calc(var(--sp-1) * 2.75);
  font-family: inherit;
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  font-weight: 600;
  color: var(--text-soft);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.app-chip[aria-pressed="true"],
.app-chip[aria-selected="true"] {
  color: var(--on-navy);
  background: var(--navy);
  border-color: var(--navy);
}
/* Единственный чип-кнопка (не срез) — полный тап-таргет 44×44, а не
   min-height чипа (36 px). */
.app-chip--tool { margin-left: auto; padding: 0 var(--sp-2); min-height: var(--touch); min-width: var(--touch); }
/* «Все фильтры» — не срез (не подсвечивается нажатым): пунктир золотом,
   сразу после «Избранного» (м:1885). Видимая высота — как у соседних чипов,
   цель касания добирает до 44 px невидимая полоса ::after. */
.app-chip--all { position: relative; border-style: dashed; border-color: var(--gold); color: var(--link); }
.app-chip--all::after { content: ''; position: absolute; inset: calc(var(--sp-1) * -1) 0; }
.app-chip__icon { display: none; }
.app-chip__count {
  min-width: var(--sp-4);
  padding: 0 var(--sp-1);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 700;
  color: var(--text);
  background: var(--gold);
  border-radius: var(--r-sheet);
  text-align: center;
}
.app-chip__count[hidden] { display: none; }
.app-chip:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
/* Чип-значение с крестиком (отслеживаемые бумаги в «Подписках»): сам чип не
   кнопка, кнопка — только крестик, и у него полный тап-таргет. */
.app-chip--static { padding-right: 0; }
.app-chip__x {
  min-width: var(--touch);
  min-height: calc(var(--touch) - var(--sp-2));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-title);
  cursor: pointer;
}
.app-chip__x:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; }
.push-panel__followed { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }

.app-field { padding: var(--sp-3) 0 0; }
.app-field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  color: var(--text-muted);
}
.app-field__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.app-field__hint {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}
.app-field__hint + .app-btn { margin-top: var(--sp-2); }
/* Утилита доступности: прячет текст визуально, оставляет его читалке. */
.app-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.app-switch {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: var(--sp-3) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.app-switch input { width: var(--sp-5); height: var(--sp-5); accent-color: var(--brand-ink); }
.app-tail .app-btn { margin-top: var(--sp-2); }

/* Врезка: подсказка, пустое состояние, стена. Одна строка, крестик справа. */
.app-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
  background: var(--surface-sunk);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-control);
}
.app-note[hidden] { display: none; }
.app-note > svg { flex: none; }
.app-note > span { flex: 1; min-width: 0; }
/* Цель касания 44 px без раздувания строки: тот же приём, что у шестерёнки
   в шапке (.app-bar__gear) — рамка кнопки визуально с сжатый (32 px), тап-
   зона у неё настоящая (--touch), отрицательный отступ забирает разницу. */
.app-note > button {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  margin: calc((var(--sp-6) - var(--touch)) / 2);
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--r-control);
}

/* Панель уведомлений на странице настроек: строки «Куда присылать» / «Что
   присылать», а не панель кнопок (макет 18.09). */
.push-panel { padding: var(--sp-4) 0 var(--sp-3); }
.push-panel__hint { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.push-panel__section { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }
/* Итог действия. Пустой — не занимает места (значка и текста нет), поэтому
   отдельного [hidden] не нужно. Ошибку отличают слово «Ошибка:» и значок, а
   не цвет: красный и зелёный здесь значат только направление сделки. */
.push-panel__result { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.push-panel__result:empty { margin-top: 0; }
.push-panel__result--error { color: var(--text); }

/* Строки «Куда присылать»/«Что присылать» — карточка-список (.app-list--card,
   м:1332–1350): цель для пальца целиком, значение справа. Поля и линии даёт
   карточка; своя разметка — потому что второй строки-подписи нет. */
.push-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--touch);
  background: none;
  color: var(--text);
  font-family: inherit;
  text-align: left;
}
.push-row[disabled] { color: var(--text-muted); }
.push-row:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; }
.push-row__state { flex: none; color: var(--text-faint); font-size: var(--fs-caption); line-height: var(--lh-caption); }
/* Состояние канала — цветом и 600 (м:2776–2785): включено — зелёным, «как
   подключить» — ссылкой, выключено — бледным. */
#push-channels .push-row__state { font-weight: 600; }
.push-row__state--on { color: var(--up-ink); }
.push-row__state--link { color: var(--link); }
/* Подсказка под строкой канала — продолжение строки, без линии над ней. */
.app-list--card > .push-row__hint { padding-top: 0; border-top: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }

/* Своё окно разрешения (#push-ask, м:1364–1372): рамка золотом — с классом
   .app-card, иначе объявленная ниже рамка .app-card перебивает её. Стоит
   в самом низу экрана, под пояснением (order в #screen-subscriptions). */
.push-ask.app-card { order: 1; padding: var(--sp-4); border-color: var(--gold); }
.push-ask b { display: block; font-size: var(--fs-row); line-height: var(--lh-row); }
.push-ask p { margin: calc(var(--sp-1) * 1.25) 0 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-soft); }
.push-ask__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-3); }
.push-ask__actions .app-btn { font-size: var(--fs-label); border-radius: var(--r-row); }
.push-ask__actions .app-btn:not(.app-btn--primary) { font-weight: 400; color: var(--text-soft); }
/* «Подписки» (м:1328–1350): подпись раздела и карточка через 8, группы
   через 16. Панель — display: contents, её строки встают в колонку экрана:
   так окно разрешения уходит вниз, под пояснение, как в макете. */
#screen-subscriptions { display: flex; flex-direction: column; gap: var(--sp-2); }
#screen-subscriptions > * { margin: 0; }
#screen-subscriptions .push-panel { display: contents; }
#screen-subscriptions .app-section-label:not(:first-child),
#screen-subscriptions > .app-note--dashed,
#screen-subscriptions .push-ask { margin-top: var(--sp-2); }

/* Чекап бумаги: поисковая форма, карточка бумаги, статус, последние сигналы. */
.app-search--gold .app-control { border-color: var(--gold); }
/* Поле берёт фокус при открытии (мышь): кольцо со смещением вокруг золотой
   рамки читалось двойной рамкой — кольцо прижато к рамке. */
.app-search--gold .app-control:focus-visible { outline-offset: 0; border-color: var(--brand-ink); }
.checkup-hint { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-small); line-height: var(--lh-note); color: var(--text-muted); }
/* Вторая фраза выделена (м:713) — только в телефонном тексте, на десктопе
   она обычным (м:1465). На пустом экране её нет: карточки ещё нет, «при
   открытии карточки» читается странно. */
.checkup-hint--phone .checkup-hint__fresh { font-weight: 600; color: var(--link); }
.app-shell__body:has(#checkup-tail[data-state="idle"]:not([hidden])) .checkup-hint__fresh { display: none; }
/* Два текста подсказки (P12, задача 12) — десктоп упоминает отчёты/позиции,
   которых на телефоне ещё нет в навигации; показ переключает ширина. */
.checkup-hint--wide { display: none; }
.checkup-history__empty { font-size: var(--fs-caption); color: var(--text-muted); }
.checkup-h2 { margin: 0; }
/* «Повторить» — своей строкой по центру под текстом ошибки, а не рядом с
   ним: кнопка 44 px рядом со строкой 13 px сбивала базовые линии. */
#checkup-tail .app-btn { display: flex; width: fit-content; margin: var(--sp-2) auto 0; }

/* Карточка актива (checkup.js). На телефоне — три отдельные карточки с
   шагом 14 (м:710–783): бумага (шапка, тёмный блок цен, долгосрочный
   статус), статус в золотой рамке (полосы, рекомендация, метрики) и
   последние сигналы. #checkup-card — обёртка без рамки; на десктопе рамка у
   неё, и всё собрано в одну карточку (м:1467). */
.asset { display: flex; flex-direction: column; gap: calc(var(--sp-1) * 3.5); }
.asset__paper { display: flex; flex-direction: column; gap: calc(var(--sp-1) * 3.5); }
.asset__paper, .asset-signals { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-4); }
.asset__head { display: flex; align-items: center; gap: calc(var(--sp-1) * 2.75); }
.asset__avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-accent); border: 1px solid var(--border); color: var(--link); font-size: var(--fs-caption); font-weight: 700; }
.asset__who { min-width: 0; display: flex; flex-direction: column; }
.asset__symbol { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; }
.asset__name { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-soft); }
.asset__kind { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-faint); }

/* Цены — тёмный блок #16203A (--navy), 2 колонки на телефоне (м:724–727). */
.asset__tiles-row { display: flex; flex-direction: column; gap: calc(var(--sp-1) * 3.5); }
.asset__prices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: calc(var(--sp-1) * 3.5);
  border-radius: var(--r-box); background: var(--navy); }
.asset__price-k { display: block; font-size: var(--fs-key); line-height: var(--lh-key); letter-spacing: .05em; text-transform: uppercase; color: var(--on-navy-soft); }
.asset__price-v { display: block; margin-top: calc(var(--sp-1) * .75); font-size: var(--fs-num); line-height: var(--lh-num); font-weight: 700; color: var(--on-navy); overflow-wrap: anywhere; }
.asset__price--target .asset__price-v { color: var(--gold-soft); }
/* Третья цена — во всю строку: «ПОТЕНЦИАЛ ОТ ТЕКУЩЕЙ» заглавными в половину
   блока на 375–390 переносился на две строки. */
.asset__price:nth-child(3) { grid-column: 1 / -1; }
.asset__price--up .asset__price-v { color: var(--on-navy-up); }
/* Долгосрочный статус (м:731–737): зелёная/красная плашка, справа источник
   моношрифтом — плашкой. */
.asset__lt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(var(--sp-1) * 2.5);
  padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5); border-radius: var(--r-box); background: var(--surface-sunk); }
.asset__lt--long { background: var(--up-surface); color: var(--up-ink); }
.asset__lt--short { background: var(--down-surface); color: var(--down-ink); }
.asset__lt-k { display: block; font-size: var(--fs-key); line-height: var(--lh-key); letter-spacing: .05em; text-transform: uppercase; }
.asset__lt-v { display: block; margin-top: calc(var(--sp-1) * .5); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 700; }
.asset__lt-src { flex: none; padding: calc(var(--sp-1) * 1.25) var(--sp-2); border-radius: var(--r-tag); background: var(--surface-card); color: var(--text-muted);
  font-size: var(--fs-micro); line-height: 1; font-weight: 700; }
.asset__lt--long .asset__lt-src { background: var(--up-ink); color: var(--up-surface); }
.asset__lt--short .asset__lt-src { background: var(--down-ink); color: var(--down-surface); }

/* Статус (м:740–765) — своя карточка в золотой рамке, рекомендация и
   метрики внутри неё. */
.asset__state { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--gold); border-radius: var(--r-card); background: var(--surface-card); }
.asset__state-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: calc(var(--sp-1) * 2.5); }
.asset__state-label { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; }
.asset__state-score { font-size: var(--fs-note); line-height: 1; color: var(--link); white-space: nowrap; }
.asset__state-none { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
/* Шкала из пяти полос: номер и диапазон баллов, текущая — фирменной синей.
   Название полосы спрятано на телефоне и раскрывается на десктопе. */
.asset__scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.asset__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--sp-1) * .5);
  padding: var(--sp-2) calc(var(--sp-1) * 1.5);
  border-radius: var(--r-control);
  background: var(--surface-sunk);
  color: var(--text-muted);
}
.asset__band-n { font-weight: 700; font-size: var(--fs-caption); line-height: var(--lh-caption); }
.asset__band-range { font-size: var(--fs-tag); line-height: var(--lh-tag); }
.asset__band[aria-current="true"] { background: var(--brand-ink); color: var(--on-navy); }
.asset__rec { padding: var(--sp-3) calc(var(--sp-1) * 3.25); border-radius: var(--r-row); background: var(--gold-soft); }
.asset__rec-k { display: block; font-size: var(--fs-key); line-height: var(--lh-key); letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.asset__rec-v { display: block; margin-top: calc(var(--sp-1) * .5); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 700; color: var(--link); }
.asset__rec-rule { display: block; margin-top: calc(var(--sp-1) * 1.25); font-size: var(--fs-small); line-height: var(--lh-note); color: var(--text-muted); }
/* Метрики (м:758–765): сетка 2×2 без плиток, над ней пунктир. */
.asset__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding-top: calc(var(--sp-1) * 2.75);
  border-top: 1px dashed var(--border);
}
.asset__metrics div { display: block; }
.asset__metrics dt { font-size: var(--fs-key); line-height: var(--lh-key); color: var(--text-faint); }
.asset__metrics dd { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; color: var(--text-soft); }

/* Последние сигналы (м:767–783) — третья карточка; в колонке десктопа
   рамки нет, колонка сама себе подложка. */
.asset-side { margin-top: calc(var(--sp-1) * 3.5); }
.asset-signals { display: flex; flex-direction: column; gap: calc(var(--sp-1) * 2.5); }
.asset-signals__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.asset-signals__wins { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; color: var(--text-muted); }
.asset-signals__wins--up { color: var(--up-ink); }
.asset-signals__list { display: flex; flex-direction: column; gap: calc(var(--sp-1) * 2.5); }
.asset-signal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--sp-1) * 2.5);
  min-height: var(--touch);
  padding: calc(var(--sp-1) * 2.75) var(--sp-3);
  background: var(--surface-row);
  border: 1px solid var(--border);
  border-radius: var(--r-row);
  color: var(--text);
  text-decoration: none;
}
.asset-signal:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; }
.asset-signal__main { display: flex; flex-direction: column; min-width: 0; }
.asset-signal__date { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; }
.asset-signal__type { margin-top: calc(var(--sp-1) * .5); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-faint); }
.asset-signal__gain { flex: none; font-size: var(--fs-label); line-height: var(--lh-label); }
.asset-signal__gain--up { color: var(--text-up); }
.asset-signal__gain--down { color: var(--text-down); }
.asset-signals__note, .asset-signals__empty { margin: 0; font-size: var(--fs-nav); line-height: var(--lh-small); color: var(--text-faint); }
/* Действия (м:785–789): «В избранное» и «Следить» в ряд — 13/600 золотом,
   основная ссылка ниже — 14/600. */
.asset__actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: calc(var(--sp-1) * 3.5); }
.asset__actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.asset__actions .app-btn { padding: 0 var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--link); border-radius: var(--r-row); }
.asset__actions .app-btn--primary { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--surface); background: var(--brand-ink); border-color: var(--brand-ink); }
.asset__actions .app-btn[aria-pressed="true"] { border-color: var(--brand-ink); color: var(--brand-ink); }
.asset__actions .app-btn[disabled] { opacity: .6; cursor: progress; }
.asset__follow-note { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.asset__follow-note:empty { display: none; }
.asset__follow-note--error { color: var(--text-down); }
/* Подсказки поиска — выпадающий список поверх экрана точно под полем и
   шириной с поле (он внутри формы). */
.app-suggest { position: absolute; top: 100%; left: var(--sp-4); right: var(--sp-4); z-index: 5; margin-top: var(--sp-1);
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-block); overflow: hidden;
  box-shadow: 0 var(--sp-1) var(--sp-3) var(--shadow); }
.app-suggest__item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--touch); padding: 0 var(--sp-3); font: inherit; text-align: left; background: none; border: 0; border-top: 1px solid var(--border-subtle); color: var(--text); }
.app-suggest__item:first-child { border-top: 0; }
.app-suggest__item[aria-selected="true"] { background: var(--surface-sunk); }
.app-suggest__item span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-suggest__market { margin-left: auto; flex: none; font-size: var(--fs-caption); }

/* Просьба переустановить: видна только на старой установке iPhone
   (класс ставит ui/app/shell.js). */
.app-reinstall { display: none; }
.app-old-install .app-reinstall { display: flex; }

/* Профиль и справка: заголовок экрана, «назад», лид, список границ, шаги.
   Подэкраны живут на одной странице и переключаются адресом (#access…). */
.app-title { margin: 0; padding: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-title); line-height: var(--lh-title); }
/* Заголовок подэкрана профиля и справки (м:1199, 1238): 22/700 сразу под
   полосой — у тела уже свои 12 сверху. Корень на телефоне без заголовка,
   его называет «‹ Назад» в полосе (screens.js, opts.rootTitle). */
#profile-title, #help-title { padding: 0 0 calc(var(--sp-1) * 3.5); font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 700; }
@media (max-width: 959.98px) {
  .app-title--root { display: none; }
}
.app-back { margin: 0; padding: var(--sp-3) 0 0; font-size: var(--fs-caption); line-height: var(--lh-caption); }
.app-back[hidden] { display: none; }
.app-back a { color: var(--link); }
.app-back + .app-title { padding-top: var(--sp-1); }
.app-subtitle { margin: 0; padding: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.app-lead { margin: 0; padding: 0 0 var(--sp-3); font-size: var(--fs-body); line-height: var(--lh-body); }
.app-lead--muted { color: var(--text-muted); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.app-list__value {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  color: var(--text-faint);
  font-size: var(--fs-caption);
}
.app-list__value::after { content: ' ›'; }
/* Подэкраны профиля — колонка блоков с шагом 14 (м:1197, 1248, 1299):
   промежуток задаёт сам экран, у блоков внешних полей нет. Скрытые блоки
   (триал на платном, пустая подпись) промежутка не занимают. */
#screen-access, #screen-tariff, #screen-install { display: flex; flex-direction: column; gap: calc(var(--sp-1) * 3.5); }
#screen-access > *, #screen-tariff > *, #screen-install > * { margin: 0; }
#install-lead { padding: 0; }
/* Пустая врезка (подпись установки на десктопе) не рисует пустую рамку. */
.app-note:empty { display: none; }
/* Розовая врезка (м:1261): «цифры подставные» — оговорка, а не подсказка. */
.app-note--down { background: var(--down-surface-soft); border-color: var(--down-border); color: var(--down-ink); border-radius: var(--r-card); padding: calc(var(--sp-1) * 3.5) var(--sp-4); font-size: var(--fs-note); line-height: var(--lh-note); }
/* «Ваш доступ»: тёмная карточка уровня + четыре границы разом (м:1300–1302):
   уровень — золотая подпись заглавными, под ней текст 15/1.5. */
.access-card { padding: calc(var(--sp-1) * 4.5); background: var(--navy); color: var(--on-navy); border-radius: var(--r-card); }
.access-card b { display: block; font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.access-card p { margin: var(--sp-2) 0 0; color: var(--on-navy-body); font-size: var(--fs-row); line-height: 1.5; }
/* Границы — карточка-список (.app-list--card), значение цветом (м:2201–2213). */
.access-limits { padding: 0; list-style: none; }
.access-limit { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.access-limits > .access-limit { padding: calc(var(--sp-1) * 3.5) var(--sp-4); }
.access-limit b { display: block; font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 400; }
.access-limit small { display: block; margin-top: calc(var(--sp-1) * .5); color: var(--text-faint); font-size: var(--fs-note); line-height: 1.4; }
.access-limit__value { flex: none; font-size: var(--fs-label); font-weight: 700; }
.access-limit__value--down { color: var(--down-ink); }
.access-limit__value--up { color: var(--up-ink); }
/* Триал (м:1316–1319): золотая врезка, кнопка во всю ширину. */
.access-trial { padding: var(--sp-4); background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--r-card); }
.access-trial b { display: block; font-size: var(--fs-row); line-height: var(--lh-row); }
.access-trial p { margin: calc(var(--sp-1) * 1.25) 0 0; color: var(--text-soft); font-size: var(--fs-caption); line-height: 1.5; }
.access-trial .app-btn { width: 100%; margin-top: var(--sp-3); font-size: var(--fs-label); border-radius: var(--r-row); }
.access-trial__note:empty { display: none; }
/* «Тариф · что можно купить» (м:1323): белая, золотая рамка, текст ссылкой. */
.access-tariff { display: flex; justify-content: center; border-color: var(--gold); color: var(--link); border-radius: var(--r-block); font-size: var(--fs-label); }
/* «Тариф» (м:1249–1261): карточки через 14, название 17/700, цена — моно
   плашкой, «Подключить» — основная во всю ширину. */
.tariff-list { padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--sp-1) * 3.5); }
.tariff.app-card { display: flex; flex-direction: column; gap: calc(var(--sp-1) * 2.25); padding: var(--sp-4); }
.tariff:first-child { border-color: var(--gold); }
.tariff__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.tariff__name { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.tariff__price { flex: none; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-tag); background: var(--gold-soft); font-family: var(--font-mono); font-size: var(--fs-nav); line-height: 1; color: var(--link); }
.tariff p { margin: 0; font-size: var(--fs-label); line-height: 1.5; color: var(--text-soft); }
.tariff .app-btn { width: 100%; font-size: var(--fs-label); border-radius: var(--r-row); }
.tariff-status:empty { display: none; }
/* Установка (м:1197–1211): шаги в карточке, маркер — золотой кружок «·»,
   основная кнопка во всю ширину, подпись — пунктирная врезка. */
.install-steps { display: flex; flex-direction: column; gap: calc(var(--sp-1) * 3.25); padding: var(--sp-4); list-style: none; }
.install-steps li { display: flex; align-items: flex-start; gap: calc(var(--sp-1) * 2.75); font-size: var(--fs-label); line-height: var(--lh-note); color: var(--text-soft); }
.install-steps li::before { content: '·'; flex: none; width: calc(var(--sp-1) * 5.5); height: calc(var(--sp-1) * 5.5); border-radius: 50%; background: var(--gold-soft); color: var(--link); font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700; line-height: calc(var(--sp-1) * 5.5); text-align: center; }
#install-cta { width: 100%; font-size: var(--fs-label); border-radius: var(--r-block); }
.install-hint { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
/* Стена бесплатного уровня в конце ленты: карточка-ссылка на «Ваш доступ». */
/* Макет м:654–658: заголовок 14/700 красным, объяснение 13 px приглушённым,
   ссылка 13/600 с отступом 9. Раньше все три строки наследовали 16 px, и
   стена была вдвое крупнее соседних карточек. */
.feed-wall { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-4); padding: var(--sp-4);
  border-radius: var(--r-card); background: var(--down-surface-soft); border: 1px solid var(--down-border); color: var(--down-ink); text-decoration: none;
  font-size: var(--fs-caption); line-height: var(--lh-caption); }
.feed-wall[hidden] { display: none; }
.feed-wall b { font-size: var(--fs-label); line-height: var(--lh-label); }
.feed-wall span { color: var(--text-muted); }
.feed-wall .feed-wall__go { margin-top: calc(var(--sp-1) * 1.25); font-weight: 600; color: var(--link); }
/* Состояния хвоста ленты (пусто/ошибка/нет сети) — карточка с заголовком,
   объяснением и кнопкой, а не строка-хвост (макет 18.09). */
/* Макет м:648–651: карточка во всю ширину ленты, текст влево, заголовок
   16/700 цветом состояния, объяснение тёмным, кнопка — основная. */
.app-tail:has(> .app-state) { padding: 0; text-align: left; }
.app-state { padding: calc(var(--sp-1) * 5) calc(var(--sp-1) * 4.5); border-radius: var(--r-card); background: var(--down-surface-soft); border: 1px solid var(--down-border); color: var(--down-ink); }
.app-state--empty { background: var(--surface); border-color: var(--dashed); color: var(--text-muted); }
.app-state__title { display: block; font-size: var(--fs-body); line-height: var(--lh-body); color: inherit; }
.app-state p { margin: calc(var(--sp-1) * 2.25) 0 calc(var(--sp-1) * 3.5); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-soft); }
.app-state .app-btn { margin-top: 0; font-size: var(--fs-label); line-height: var(--lh-label); border-radius: var(--r-row); }
/* Приглашение установить — карточка на ленте, не строка (макет 18.09). */
/* Стоит в шапке ленты над поиском (м:603–611): поля 12/16 от краёв экрана,
   текст 13 px, «Показать как» тянется, «Позже» — тихая белая. */
.install-card { margin: var(--sp-3) var(--sp-4) 0; padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5); border: 1px solid var(--gold); border-radius: var(--r-box); background: var(--surface-card); }
.install-card p { margin: 0 0 calc(var(--sp-1) * 2.25); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-soft); }
.install-card__actions { display: flex; gap: var(--sp-2); }
.install-card__actions .app-btn { font-size: var(--fs-label); line-height: var(--lh-label); }
.install-card__actions .app-btn--primary { flex: 1; }
.install-card__actions .app-btn:not(.app-btn--primary) { color: var(--text-faint); font-weight: 400; }
/* Справка (м:1216–1244): поиск во всю ширину колонки, оглавление —
   карточка-список, статья — белая карточка, врезка — золотая с рамкой. */
#help-root .app-search { padding: 0; margin-bottom: calc(var(--sp-1) * 3.5); }
#help-root .app-search__icon { left: var(--sp-3); }
.help-article { display: flex; flex-direction: column; gap: calc(var(--sp-1) * 3.5); }
.help-card.app-card { padding: var(--sp-4); }
.help-article h2 { margin: 0; padding: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 700; }
.help-article h3 { margin: 0; padding: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 700; }
.help-card > :first-child { padding-top: 0; }
.help-article p, .help-article li { font-size: var(--fs-label); line-height: 1.6; color: var(--text-soft); }
.help-article p { margin: 0 0 var(--sp-3); }
.help-card > :last-child { margin-bottom: 0; }
.help-article ul, .help-article ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.help-article a { color: var(--link); }
.help-article .app-note { margin-bottom: var(--sp-3); }
.help-terms { margin: 0; }
.help-terms div { padding: var(--sp-2) 0; border-top: 1px solid var(--surface-accent); }
.help-card > .help-terms:first-child > div:first-child { border-top: 0; padding-top: 0; }
.help-terms dt { font-weight: 600; font-size: var(--fs-row); line-height: var(--lh-row); }
.help-terms dd { margin: var(--sp-1) 0 0; font-size: var(--fs-label); line-height: var(--lh-note); color: var(--text-muted); }
.help-qa { margin: 0; }
.help-qa div { padding: var(--sp-2) 0; border-top: 1px solid var(--surface-accent); }
.help-card > .help-qa:first-child > div:first-child { border-top: 0; padding-top: 0; }
.help-qa dt { font-size: var(--fs-label); line-height: var(--lh-note); }
.help-qa dd { margin: var(--sp-1) 0 0; font-size: var(--fs-label); line-height: var(--lh-note); font-weight: 600; }
/* Технические типы пробоев — свёрнуты под «Для продвинутых». */
.help-more { margin-top: var(--sp-3); }
.help-more summary { display: flex; align-items: center; min-height: var(--touch); color: var(--link); font-size: var(--fs-label); font-weight: 600; cursor: pointer; }
/* Врезка статьи. Селектор с .help-article — иначе .help-article p (0,1,1)
   перебивал кегль врезки (0,1,0), и она шла 16 px вместо 13 (сверка п.14). */
.help-article .help-callout { margin: 0; padding: calc(var(--sp-1) * 3.75) var(--sp-4); background: var(--gold-soft); color: var(--text-soft); border: 1px solid var(--gold); border-radius: var(--r-card); font-size: var(--fs-caption); line-height: 1.5; }

/* Счета (accounts.html): портфель, строка счёта, карточка, пауза, позиции,
   операции, настройки, мастер. Зелёный и красный — только направление денег. */
.acc-up { color: var(--text-up); }
.acc-down { color: var(--text-down); }
/* Тёмная карточка портфеля (макет 18.09) — единственное место нового слоя,
   где на телефоне используется фирменный navy, а не белая поверхность:
   портфель — это про деньги целиком, а не про отдельный счёт. */
.acc-total {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0 0 calc(var(--sp-1) * 3.5);
  padding: calc(var(--sp-1) * 4.5);
  background: var(--navy);
  border-radius: var(--r-card);
}
.acc-total__label {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Одна .acc-total__row на валюту (обычно она одна — рубль): раскладка по
   валютам не должна визуально отличаться от прежнего единственного блока. */
.acc-total__row + .acc-total__row { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--navy-line); }
/* Сумма, доход и подпись — каждая своей строкой (м:799–801): строчные <b> и
   <span> сливались в «6 052 300 ₽+192 600 ₽ за месяц». */
.acc-total__sum { display: block; margin-top: calc(var(--sp-1) * 1.5); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700; color: var(--on-navy); }
/* Рост красит весь период целиком (--on-navy-up); падение и «—» — нейтральным
   --on-navy: утверждённого токена «падение на navy» нет. */
.acc-total__income { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--on-navy); }
.acc-total__income-up { color: var(--on-navy-up); }
.acc-total__note { font-size: var(--fs-nav); line-height: var(--lh-nav); color: var(--on-navy-soft); }
/* Строка счёта — белая карточка (м:815–821), промежуток 14. */
.acc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--sp-1) * 1.5) var(--sp-2);
  align-items: baseline;
  margin: 0 0 calc(var(--sp-1) * 3.5);
  padding: calc(var(--sp-1) * 3.5);
  min-height: var(--touch);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-tap) linear;
}
.acc-row:active { background-color: var(--surface-sunk); }
.acc-row:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; }
.acc-row__name { font-weight: 700; font-size: var(--fs-row); line-height: var(--lh-row); }
.acc-row__meta { grid-column: 1 / -1; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
/* Статус счёта — квадратная плашка 11,5/700 (м:818), а не пилюля. */
.acc-row .app-pill, .acc-card__head .app-pill { padding: var(--sp-1) calc(var(--sp-1) * 1.75); border-radius: var(--r-tag); font-size: var(--fs-nav); line-height: var(--lh-nav); font-weight: 700; }
/* Кнопка подключения — пунктирная рамка золотом, а не заливка: это призыв
   к действию на пустом месте списка, не основной CTA экрана. */
.acc-connect { margin: 0 0 var(--sp-4); }
.acc-connect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch);
  padding: calc(var(--sp-1) * 3.5);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--link);
  text-decoration: none;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--gold);
  border-radius: var(--r-card);
}
.acc-connect-btn:active { background-color: var(--surface-sunk); }
.acc-connect-btn:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
/* Карточка счёта: заголовок, действия, период и плитки показателей. */
.acc-card.app-card { padding: var(--sp-4); }
.acc-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.acc-card__title { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 700; }
.acc-refresh { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.acc-refresh__status { flex: 1; min-width: 12ch; font-size: var(--fs-small); line-height: var(--lh-note); color: var(--text-muted); }
.acc-period { display: flex; flex-wrap: wrap; gap: calc(var(--sp-1) * 1.5); margin: var(--sp-3) 0; }
.acc-period .app-chip { font-size: var(--fs-small); }
.acc-card .acc-card__tiles { gap: calc(var(--sp-1) * 2.5); }
.acc-card .app-tile { padding: calc(var(--sp-1) * 2.5) calc(var(--sp-1) * 2.75); background: var(--surface); border-radius: var(--r-control); }
.acc-card .app-tile__k { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-faint); }
.acc-card .app-tile__v { margin-top: calc(var(--sp-1) * .75); }
/* minmax(0, …) и сброс отступа dd: иначе длинное значение («2 · входов 3»)
   в узкой колонке десктопа распирает плитку за край. */
.acc-card__tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); margin: 0; }
.acc-card__tiles dd { margin: 0; overflow-wrap: anywhere; }
.acc-card__incomplete { margin: var(--sp-2) 0 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--warn-ink); }
/* Пауза — крупно и отдельно от прочих настроек: это про деньги, не про настройку. */
.acc-pause {
  display: block;
  width: 100%;
  margin: calc(var(--sp-1) * 3.5) 0 0;
  padding: var(--sp-4);
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.acc-pause b { display: block; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; }
.acc-pause span { display: block; margin-top: var(--sp-1); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-muted); }
.acc-pause--stop { background: var(--down-surface-soft); border: 1.5px solid var(--danger); }
.acc-pause--stop b { color: var(--down-ink); }
.acc-pause:active { background-color: var(--surface-sunk); }
.acc-btn--danger { color: var(--text-down); border-color: var(--text-down); }
/* Предупреждение биллинга («счёт не открывает сделки», MR !441, м:~803–804) —
   тон предупреждения макета: золотой, не красный (это не отказ и не ошибка,
   а напоминание/статус оплаты). */
.acc-billing-warn {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--r-card);
}
.acc-billing-warn b { display: block; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; color: var(--warn-ink); }
.acc-billing-warn p { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--warn-ink); }
/* «Оплатить» — во всю ширину, как «Подключить» у тарифа (м:1256). */
.acc-billing-warn .app-btn { width: 100%; font-size: var(--fs-label); line-height: var(--lh-label); }
/* Подтверждение паузы — блок прямо на экране (не лист): решение про деньги
   не должно уезжать за край экрана листом. */
.acc-confirm {
  margin-top: calc(var(--sp-1) * 3.5);
  padding: var(--sp-4);
  background: var(--surface-card);
  border: 1px solid var(--danger);
  border-radius: var(--r-card);
}
.acc-confirm__title { display: block; font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 700; }
.acc-confirm p { margin: var(--sp-3) 0; font-size: var(--fs-caption); line-height: var(--lh-note); color: var(--text-soft); }
.acc-confirm__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.acc-confirm__actions .app-btn { padding: 0 var(--sp-2); font-size: var(--fs-label); line-height: var(--lh-label); border-radius: var(--r-row); }
/* Смена профиля (м:1013–1019) — красная врезка, заголовок красным. */
#acc-hconfirm { background: var(--down-surface-soft); border: 1.5px solid var(--danger); }
#acc-hconfirm .acc-confirm__title { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--down-ink); }
/* Макет (м:855–856): «Отмена» — обычная кнопка (фон-поверхность, рамка,
   базовый .app-btn — без правок), «Приостановить» — залитая опасным цветом,
   не просто обведённая. .acc-btn--danger сама по себе (настройки, смена
   стратегии) остаётся контурной — заливка только здесь. */
.acc-confirm__actions .acc-btn--danger, .app-sheet__actions .acc-btn--danger { color: var(--surface-card); background: var(--down-ink); border-color: var(--down-ink); }
/* Удаление счёта (задача 20) — строка-кнопка во всю ширину: живёт и в
   .acc-account-nav (.app-list — эти правила там просто задают цвет поверх
   базовых), и в колонке #acc-aside (.app-aside, своего правила для кнопок
   нет), поэтому размер и выравнивание собственные, не наследуются. */
/* Селектор с типом (не просто .acc-delete) — та же специфичность, что у
   ".app-list button" (строка выше): внутри .acc-account-nav это правило
   должно победить его цвет/рамку, а не проиграть по specificity. */
button.acc-delete {
  display: block;
  width: 100%;
  min-height: var(--touch);
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2);
  font: inherit;
  text-align: left;
  color: var(--down-ink);
  background: none;
  border: 0;
}
/* Строки-переходы счёта (м:878–884) — белая карточка, 14 px, стрелка «›»
   справа; «Удалить…» — такая же строка, только красная. */
.acc-account-nav { margin-top: calc(var(--sp-1) * 3.5); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.acc-account-nav:empty { display: none; }
.acc-account-nav a, .acc-account-nav button.acc-delete {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  border-bottom: 1px solid var(--border-subtle);
}
.acc-account-nav > :last-child { border-bottom: 0; }
.acc-account-nav a::after, .acc-account-nav button.acc-delete::after { content: '›'; color: var(--text-faint); }
/* Операции (м:860–877) — белая карточка, записи — плашки цвета страницы. */
.acc-ops { margin-top: calc(var(--sp-1) * 3.5); padding: var(--sp-4); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-card); }
.acc-ops .app-tail { padding: 0; }
.acc-ops__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.acc-ops__title { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 700; }
.acc-ops__count { flex: none; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-faint); }
.acc-op { display: flex; flex-direction: column; gap: calc(var(--sp-1) * .75); padding: calc(var(--sp-1) * 2.75) var(--sp-3); margin-bottom: calc(var(--sp-1) * 2.25); background: var(--surface); border-radius: var(--r-row); }
.acc-op__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.acc-op__title { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700; }
.acc-op__when { flex: none; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-faint); }
.acc-op__note { margin: 0; font-size: var(--fs-small); line-height: var(--lh-note); color: var(--text-soft); }
.acc-positions { border-top: 1px solid var(--border-subtle); }
.acc-pos {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 var(--sp-2);
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.acc-pos__ticker { display: inline-flex; align-items: center; min-height: var(--touch); margin: calc((var(--fs-body) * var(--lh-body) - var(--touch)) / 2) 0; font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--link); text-decoration: none; }
.acc-pos__name { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-pos__change { text-align: right; font-weight: 600; }
.acc-pos__qty { color: var(--text-muted); }
.acc-pos__price { grid-column: 2 / -1; text-align: right; color: var(--text-muted); }
/* Стратегия — карточка, как режим мастера (м:1000–1005). */
.acc-strategy {
  display: block;
  width: 100%;
  margin: 0 0 calc(var(--sp-1) * 2.5);
  padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5);
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-block);
}
.acc-strategy[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.acc-strategy b { font-size: var(--fs-row); line-height: var(--lh-row); }
/* «текущая» у выбранной стратегии — общий .app-pill--up. */
.acc-strategy .app-pill { margin-left: var(--sp-2); }
.acc-strategy__desc { display: block; margin-top: calc(var(--sp-1) * .75); font-size: var(--fs-caption); line-height: var(--lh-note); color: var(--text-muted); }
.acc-strategy:active { background-color: var(--surface-sunk); }
.acc-inline { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.acc-inline .app-control { flex: 1; min-width: 0; }
.acc-field { display: block; margin: 0 0 var(--sp-3); }
.acc-field > span { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.acc-field__hint { display: block; margin-top: var(--sp-1); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-muted); }
.acc-field .app-control { width: 100%; }
.acc-hedge-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0 var(--sp-3); }
.acc-hedge-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); }
.acc-hedge-row__text { display: grid; gap: var(--sp-1); min-width: 0; }
.acc-hedge-row__text small { color: var(--text-muted); }
.acc-hedge-row__actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
/* Мастер подключения (макет 18.09): номера шагов — кнопки, а не пассивный
   прогресс-бар — пройденные и текущий открыты для возврата. */
.acc-wnums { display: flex; gap: calc(var(--sp-1) * 1.75); margin: var(--sp-1) 0 calc(var(--sp-1) * 4.5); }
.acc-wnum {
  position: relative;
  flex: 1;
  min-height: calc(var(--touch) - var(--sp-2));
  padding: 0;
  border-radius: var(--r-pill);
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 700;
  background: var(--surface-accent);
  color: var(--text-muted);
}
.acc-wnum::after { content: ''; position: absolute; inset: calc(var(--sp-1) * -1) 0; }
.acc-wnum.is-current { background: var(--navy); color: var(--on-navy); }
.acc-wnum.is-done { background: var(--gold); color: var(--text); }
.acc-wnum[disabled] { opacity: .6; }
.acc-wtitle { margin: 0 0 calc(var(--sp-1) * 1.25); font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; }
.acc-wnote { margin: 0 0 calc(var(--sp-1) * 3.5); font-size: var(--fs-caption); line-height: var(--lh-note); color: var(--text-muted); }
/* .acc-wcard переиспользует .app-card (фон/рамка) — здесь раскладка и поля
   карточек мастера (м:902–913): ключ 11 заглавными, значение 15/600. */
.acc-wcard.app-card { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0 0 calc(var(--sp-1) * 2.5); padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5); border-radius: var(--r-block); }
.acc-wcard__k { margin: 0; font-size: var(--fs-micro); line-height: var(--lh-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.acc-wcard b { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 600; }
.acc-wcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.acc-wmask { font-weight: 400; }
/* «Изменить» — ссылка справа от маски; цель касания 44 — полями, без роста строки. */
.acc-wedit {
  flex: none;
  min-height: var(--touch);
  margin: calc((var(--fs-caption) * var(--lh-caption) - var(--touch)) / 2) 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
}
.acc-wresult:empty { padding: 0; }
.acc-wresult[data-state="ok"] { margin: 0 0 calc(var(--sp-1) * 2.5); padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5); text-align: left; font-weight: 600; background: var(--up-surface); color: var(--up-ink); border: 1px solid var(--up-border); border-radius: var(--r-block); }
.acc-wlimits {
  margin: 0;
  padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5);
  background: var(--down-surface-soft);
  border: 1px solid var(--down-border);
  border-radius: var(--r-block);
  color: var(--down-ink);
  font-size: var(--fs-note);
  line-height: var(--lh-note);
}
.acc-mode {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  margin: 0 0 calc(var(--sp-1) * 2.5);
  padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5);
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--surface-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-block);
}
.acc-mode[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); }
.acc-mode__head, .acc-level__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.acc-mode b { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 700; }
/* Метка режима и уровня (м:925, 941) — моно заглавными справа от имени. */
.acc-mode__tag, .acc-level__tag { flex: none; font-family: var(--font-mono); font-size: var(--fs-tag); line-height: var(--lh-tag); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.acc-mode__tag--investment { color: var(--up-ink); }
/* На нажатой (золотой) карточке --text-faint (3,96:1) и --text-muted (4,46:1)
   не проходят AA — --text-soft. */
.acc-mode[aria-pressed="true"] .acc-mode__tag:not(.acc-mode__tag--investment):not(.acc-mode__tag--auto):not(.acc-mode__tag--soon),
.acc-level[aria-pressed="true"] .acc-level__tag:not(.acc-level__tag--off) { color: var(--text-soft); }
/* --soon («в разработке» у брокера, которого ещё нет) держится того же цвета, что
   и заглушка режима: выбрать его можно, а хода дальше нет. */
.acc-mode__tag--auto, .acc-mode__tag--soon, .acc-level__tag--off { color: var(--down-ink); }
.acc-mode__note { display: block; margin-top: calc(var(--sp-1) * .75); font-size: var(--fs-caption); line-height: var(--lh-note); color: var(--text-muted); }
#acc-wbody .app-section-label { margin: var(--sp-4) 0 var(--sp-2); }
/* «Назад» компактная слева, «Дальше» — на остаток (м:985–988). */
.acc-wnav { display: flex; gap: var(--sp-2); margin: var(--sp-4) 0; }
.acc-wnav .app-btn { flex: 1; font-size: var(--fs-label); line-height: var(--lh-label); border-radius: var(--r-row); }
.acc-wnav #acc-wprev { flex: none; }
.acc-warn { color: var(--text); }
#acc-wcheck { margin-bottom: var(--sp-2); }
/* Баннер после подключения (портфель, задача 8) — тон успеха, как billing-warn
   его же формы, но зелёный. */
.acc-bound { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--sp-1) * 1.75); margin: 0 0 calc(var(--sp-1) * 3.5); padding: calc(var(--sp-1) * 3.75) var(--sp-4); background: var(--up-surface); border: 1px solid var(--up-border); border-radius: var(--r-card); }
.acc-bound b { display: block; font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 700; color: var(--up-ink); }
.acc-bound p { margin: calc(var(--sp-1) * 1.75) 0 0; font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-soft); }
/* «Понятно» на телефоне — текстовая кнопка (м:811); цель касания добирает ::after. */
.acc-bound .app-btn { position: relative; min-height: 0; padding: 0; border: 0; background: none; font-size: var(--fs-note); line-height: var(--lh-note); color: var(--up-ink); }
.acc-bound .app-btn::after { content: ''; position: absolute; inset: calc(var(--sp-1) * -3.5) calc(var(--sp-1) * -2); }

/* Предпросмотр модели автоторговли (задача 17): «нужна настройка», уровни и
   профили мастера и «Горизонта и риска», ступень, строки-сводки, докупка. */
.acc-warn-setup { margin: 0 0 calc(var(--sp-1) * 3.5); padding: calc(var(--sp-1) * 3.75) var(--sp-4); background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--r-card); color: var(--warn-ink); }
.acc-warn-setup b { display: block; font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 700; }
.acc-warn-setup p { margin: calc(var(--sp-1) * 1.5) 0 0; font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-soft); }
/* «Настроить счёт» (колонка десктопа, м:1718) — мелкая белая кнопка. */
.acc-warn-setup .app-btn { min-height: 0; margin-top: calc(var(--sp-1) * 1.5); padding: var(--sp-2) calc(var(--sp-1) * 2.75); font-size: var(--fs-small); line-height: var(--lh-small); background: var(--surface-card); border-color: var(--gold); border-radius: var(--r-control); color: var(--link); }
.acc-level, .acc-profile {
  display: flex;
  width: 100%;
  margin: 0 0 calc(var(--sp-1) * 2.5);
  padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5);
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--surface-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-block);
}
.acc-level { gap: calc(var(--sp-1) * 2.75); align-items: flex-start; }
.acc-level[aria-pressed="true"], .acc-profile[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); }
.acc-level.is-off { opacity: .55; }
/* Флажок — квадрат 22 с радиусом 5 (м:938): радиус 8 на 20 px читался кругом. */
.acc-level__box { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: calc(var(--sp-1) * .25); border: 1.5px solid var(--dashed); border-radius: var(--r-tag); font-size: var(--fs-caption); font-weight: 700; }
.acc-level[aria-pressed="true"] .acc-level__box { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.acc-level__text { flex: 1; min-width: 0; }
.acc-level b { font-size: var(--fs-row); line-height: var(--lh-row); }
.acc-level small { display: block; margin-top: calc(var(--sp-1) * .75); font-size: var(--fs-caption); line-height: var(--lh-note); color: var(--text-muted); }
/* Предупреждение об уровнях — красная врезка (м:948). */
.acc-wwarn { margin: 0 0 calc(var(--sp-1) * 2.5); padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5); background: var(--down-surface-soft); border: 1px solid var(--down-border); border-radius: var(--r-block); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--down-ink); }
/* «Уровень не различает сторон» — белая карточка (м:949). */
.acc-wside.app-card { margin: 0 0 var(--sp-3); padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5); border-radius: var(--r-block); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-soft); }
.acc-wcard__note { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.acc-profile { flex-direction: column; gap: calc(var(--sp-1) * 1.5); }
.acc-profile__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.acc-profile__head b { font-size: var(--fs-row); line-height: var(--lh-row); }
/* Ступени риска моно 12,5/600 (м:959): при 16 px «Ультра-консервативная» ломалась. */
.acc-profile__head .mono { flex: none; white-space: nowrap; font-size: var(--fs-note); line-height: var(--lh-note); font-weight: 600; color: var(--link); }
/* Профили настроенного счёта (м:1000–1005): текущий — только золотой рамкой. */
#acc-horizon .acc-profile[aria-pressed="true"] { background: var(--surface-card); }
#acc-horizon .app-lead { font-size: var(--fs-caption); line-height: var(--lh-note); color: var(--text-muted); }
.acc-profile__note { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.acc-profile__instr { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--link); }
.acc-wstep.app-card { display: flex; flex-direction: column; gap: calc(var(--sp-1) * 2.25); margin: 0 0 var(--sp-3); padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5); border-radius: var(--r-block); }
.acc-steps { display: flex; gap: calc(var(--sp-1) * 1.5); margin: 0; }
/* Видимо 36 px (м:969), цель касания 44 — ::after. */
.acc-steps button { position: relative; flex: 1; min-height: calc(var(--touch) - var(--sp-2)); padding: 0 var(--sp-1); font: inherit; font-size: var(--fs-note); line-height: var(--lh-note); font-weight: 600; color: var(--text); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-control); }
.acc-steps button::after { content: ''; position: absolute; inset: calc(var(--sp-1) * -1) 0; }
.acc-steps button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.acc-steps__note { margin: 0; font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-muted); }
.acc-summary, .acc-hrows, .acc-hextra { margin: 0 0 var(--sp-3); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
/* Строка: ключ слева сжимается, значение справа в своей строке (м:975–980). */
.acc-summary > div, .acc-hrows > div, .acc-hextra > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: calc(var(--sp-1) * .75) calc(var(--sp-1) * 2.5); padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.75); border-bottom: 1px solid var(--border-subtle); }
.acc-summary > div, .acc-hrows > div { flex-wrap: nowrap; }
.acc-summary > div:last-child, .acc-hrows > div:last-child, .acc-hextra > div:last-child { border-bottom: 0; }
.acc-summary dt, .acc-hrows dt { flex: none; }
.acc-summary dd, .acc-hrows dd { flex: 1 1 0; min-width: 0; }
.acc-hextra dt { flex: 1 1 0; min-width: 0; }
.acc-summary dt, .acc-hrows dt { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-muted); }
.acc-hextra dt { font-size: var(--fs-row); line-height: var(--lh-row); }
.acc-summary dd, .acc-hrows dd, .acc-hextra dd { margin: 0; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700; text-align: right; }
.acc-hextra dd.acc-hextra__note { flex-basis: 100%; font-size: var(--fs-note); line-height: var(--lh-note); font-weight: 400; text-align: left; color: var(--text-muted); }
.acc-hextra__link { display: inline-flex; align-items: center; min-height: var(--touch); margin: calc((var(--fs-label) * var(--lh-label) - var(--touch)) / 2) 0; font-weight: 400; color: var(--text-faint); text-decoration: none; }
.acc-hsave { width: 100%; margin: 0 0 var(--sp-3); }
.acc-op--add .acc-op__title { color: var(--up-ink); }
.acc-op--down .acc-op__title { color: var(--down-ink); }
.acc-op--up .acc-op__title { color: var(--up-ink); }
.acc-pos__entries { grid-column: 2 / -1; text-align: right; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }

/* Оговорка о риске (base.css — легаси-жёлтая) в тоне слоя: примечание 12,5
   на тоне строки с золотой полосой. */
.app-layer .risk-disclaimer { margin: var(--sp-3) 0 0; padding: calc(var(--sp-1) * 2.5) var(--sp-3); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-muted); background: var(--surface-row); border-left-color: var(--gold); border-radius: 0 var(--r-control) var(--r-control) 0; }
/* Таблица отчёта на телефоне (390): четыре колонки помещаются без прокрутки. */
.grid__table.acc-periods th, .grid__table.acc-periods td { padding: var(--sp-2) calc(var(--sp-1) * 1.5); white-space: normal; }
.grid__table.acc-periods td.grid__num { white-space: nowrap; }

/* Две одинаковые точки входа у имени выбранного счёта. */
.acc-account-actions { display: flex; gap: var(--sp-2); margin: var(--sp-3) 0; }
.acc-account-actions .app-btn { flex: 1; min-width: 0; justify-content: center; font-size: var(--fs-caption); }

/* Закрыть/свернуть встроенную панель (фикс-раунд 1) — свой класс, не чужой
   .asset-side__link из чекапа. */
.acc-inline__close { padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); cursor: pointer; }

/* Общая таблица нового слоя (ui/app/grid.js) — отчёты и вкладки сигналов.
   overflow-x на обёртке, а не на самой table: скролл вбок остаётся внутри
   карточки раздела, не утаскивая за собой соседние блоки. */
.grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid__table { border-collapse: collapse; width: 100%; font-size: var(--fs-caption); }
.grid__table th, .grid__table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  text-align: left;
}
/* Имя в Super Stock занимает ширину содержимого, без доли свободного места таблицы. */
.an-reports__view[data-report="preset_long_super"] th[data-sort="name"],
.an-reports__view[data-report="preset_long_super"] td.grid__name { width: 1%; }
/* Деньги/числа/проценты выравниваются по правому краю, табличные цифры —
   чтобы разряды не прыгали между строками при сортировке. */
.grid__table .grid__num { text-align: right; font-variant-numeric: tabular-nums; }
/* Тикер остаётся на месте при горизонтальном скролле узкой таблицы на
   телефоне — иначе непонятно, к какой бумаге относится съехавшая колонка. */
.grid__table th:first-child, .grid__table td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
}
/* Тикер: крупнее и жирнее соседних значений (задача 14). По классу колонки
   (grid.js, `column.key === 'symbol'`), не по позиции: на «Всех сигналах»
   первая колонка — звезда избранного, а не тикер (фикс-раунд 1). */
.grid__table td.grid__ticker { font-size: var(--fs-label); font-weight: 700; }
/* Шапка таблицы (задача 14, макет): моноширинная, заглавные буквы, утопленный
   фон — как заголовок колонки в остальном новом слое (.app-section-label).
   Селектор th.grid__th (не .grid__table .grid__th): та же специфичность, что
   у th:first-child выше, и идёт следом — иначе первая ячейка шапки осталась
   бы белой на фоне остальных, утопленных. */
.grid__table th.grid__th {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--surface-sunk);
  color: var(--text-muted);
}
.grid__table th button {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--touch);
  cursor: pointer;
}
.grid__table th button:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.grid__up { color: var(--text-up); }
.grid__down { color: var(--text-down); }
.grid__link { color: inherit; text-decoration: none; }
.grid__empty { color: var(--text-muted); padding: var(--sp-4) 0; font-size: var(--fs-caption); line-height: var(--lh-caption); text-align: center; }

/* «Все сигналы» — прежняя таблица алертов во встроенной рамке (analytics.js):
   высота — остаток экрана под шапкой, прокрутку ведёт сама таблица. Точную
   высоту ставит fitFrame() в analytics.js (меряет, где рамка начинается);
   здесь только запасная, пока скрипт не отработал. */
.an-frame { display: block; width: 100%; height: 70dvh; border: 0; }

/* Список отчётов и открытый отчёт (задача 14) — телефон видит одну половину
   ([hidden] решает analytics.js), широкая раскладка сажает обе в сетку рядом.
   Список — своя лента строк на утопленном фоне, как строки ленты сигналов. */
.an-reports { display: block; }
/* display у класса перебивает [hidden] — без этого «Отчёты» (и их ошибка)
   оставались видны на вкладках сигналов. Специфичность выше, чем у сетки ниже. */
.an-reports[hidden] { display: none; }


/* Группа списка отчётов «Рост» / «Падение» (макет м:1043): моноширинная
   подпись направления + бледная подсказка вида, затем сами пункты. */
.an-group { margin: 0 0 var(--sp-4); }
.an-group__label {
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Подсказка вида мельче метки (м:1051). Цвет макета #B9AE97 на кремовом —
   1,9:1, поэтому бледный текст слоя. */
.an-group__hint { font-size: var(--fs-nav); color: var(--text-faint); }
.an-report-link {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  width: 100%;
  margin-top: var(--sp-2);
  padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-box);
  text-decoration: none;
  color: inherit;
}
/* Открытый отчёт — золотая рамка (м:1766, 2511). */
.an-report-link[aria-current] { border-color: var(--gold); }
/* Номер отчёта в группе — кружок с моноширинной цифрой (макет м:1043). */
.an-report-link__n {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--r-control);
  background: var(--gold-soft);
  color: var(--link);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 24px;
  text-align: center;
}
.an-report-link__title { display: block; font-size: var(--fs-row); font-weight: 600; }
.an-report-link__desc { display: block; margin-top: var(--sp-1); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-muted); }

/* Заголовок открытого отчёта и раскрываемое «Кто попадает» — детали закрыты
   по умолчанию (не открыты в разметке), список причин появляется только
   после тапа по summary. */
.an-report__title { margin: 0 0 var(--sp-3); font-size: var(--fs-num); line-height: var(--lh-title); font-weight: 700; }
/* «Кто попадает» — белая карточка-кнопка с «▸/▾» после подписи, пункты
   через «·» (м:1068–1077). Отступ — у summary: вся строка и есть цель касания. */
.an-criteria { margin: 0 0 var(--sp-3); padding: 0 calc(var(--sp-1) * 3.25); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-block); }
.an-criteria summary { display: flex; align-items: center; min-height: var(--touch); list-style: none; cursor: pointer; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; color: var(--link); }
.an-criteria summary::-webkit-details-marker { display: none; }
.an-criteria summary::after { content: '\00a0▸'; }
.an-criteria[open] summary::after { content: '\00a0▾'; }
.an-criteria ul { margin: 0; padding: 0 0 var(--sp-3); list-style: none; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-soft); }
.an-criteria li::before { content: '·\00a0'; }

/* Быстрые чипы отчёта (макет м:1086) — та же строка, что и кнопка листа с
   пунктирной рамкой; применённые значения — отдельной моноширинной строкой
   ниже, со «Сбросить» на весь набор разом. */
.an-quick, .an-applied { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; }
/* Длинная подпись быстрого фильтра переносится внутри чипа, а не вылезает
   за ряд (м:1082–1085). */
.an-quick .app-chip { max-width: 100%; white-space: normal; text-align: left; }
.an-more-filters {
  display: inline-flex;
  align-items: center;
  /* Цель касания ≥36 px (фикс-раунд 1) — кнопка тоньше при своих паддингах. */
  min-height: calc(var(--touch) - var(--sp-2));
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--gold);
  border-radius: var(--r-pill);
  background: none;
  color: var(--link);
  cursor: pointer;
}
.an-applied__chip {
  font-family: var(--font-mono);
  font-size: var(--fs-nav);
  padding: calc(var(--sp-1) * 1.5) var(--sp-2);
  border-radius: var(--r-tag);
  background: var(--surface-accent);
  color: var(--link);
  border: 0;
}
/* Снимаемый чип — кнопка, не просто подпись: цель касания ≥36 px
   (фикс-раунд 1). Чип-умолчание (<span>, не button) остаётся компактным —
   он не нажимаемый. */
button.an-applied__chip {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--touch) - var(--sp-2));
  cursor: pointer;
}
/* «Сбросить» снимает весь набор разом — полноценная цель касания 44 px
   (фикс-раунд 1), а не декоративная подпись. */
.an-applied__reset {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

/* Отрасль отчёта по группам (задача 14) — раскрываемая карточка вместо
   плоского заголовка: сектор/группа, плашка SUPER, страна/RS/потенциал и
   счётчик «N из M» видны сразу, бумаги — по тапу. */
/* Макет м:1123–1147: карточка с шапкой на фоне страницы — слева название и
   «страна · RS · потенциал», справа SUPER и «N из M». */
.an-industry { margin-top: var(--sp-3); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.an-industry summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-1) var(--sp-2);
  align-items: baseline;
  padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5);
  background: var(--surface);
  list-style: none;
  cursor: pointer;
}
.an-industry summary::-webkit-details-marker { display: none; }
.an-industry[open] summary { border-bottom: 1px solid var(--border-subtle); }
.an-industry__title { grid-column: 1; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700; }
.an-industry summary .app-tag { grid-column: 2; grid-row: 1; justify-self: end; font-size: var(--fs-key); font-weight: 400; }
.an-industry__meta { grid-column: 1; grid-row: 2; color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.an-industry__count { grid-column: 2; grid-row: 2; justify-self: end; font-size: var(--fs-nav); color: var(--text-muted); }
.an-industry .grid__empty { padding: var(--sp-3); }

/* Строка «Сигналов в реальном времени» (задача 14, макет м:~1782) — карточка-
   ссылка, а не строка таблицы: тикер, время, пилюля статуса и примечание в
   ОДНУ строку — flex, не grid (фикс-раунд 1: grid-column:1/-1 переносило
   примечание на вторую строку, а в макете оно остаётся в первой). */
/* Строки — в одной карточке, между строками линия (м:1781–1788). */
.an-live-list:has(> .an-live-row) { background: var(--surface-row); border: 1px solid var(--border); border-radius: var(--r-box); overflow: hidden; }
.an-live-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: calc(var(--sp-1) * 2.75) calc(var(--sp-1) * 3.75);
  text-decoration: none;
  color: inherit;
  overflow-wrap: anywhere;
}
.an-live-row + .an-live-row { border-top: 1px solid var(--surface-accent); }
.an-live-row__ticker { flex: none; width: 70px; font-size: var(--fs-label); }
/* Время — второстепенное: моно 12 бледным (м:1785), не кегль строки. */
.an-live-row__time { flex: none; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-faint); }
.an-live-row .app-pill { flex: none; }
.an-live-row__note { flex: 1; min-width: 0; color: var(--text-muted); font-size: var(--fs-caption); line-height: var(--lh-caption); }
/* Телефон: примечанию в строке оставалось 8–17 px — оно ломалось по слову и
   выталкивало страницу вбок. Здесь оно уходит второй строкой на всю ширину,
   пилюля прижата вправо. */
@media (max-width: 959.98px) {
  .an-live-row { flex-wrap: wrap; row-gap: var(--sp-1); }
  .an-live-row .app-pill { margin-left: auto; }
  .an-live-row__note { flex: 1 1 100%; }
}
/* Чипы периода — вровень с краем содержимого, без своей линии: подпись
   ниже отделена отступом (у тулбара свои поля 16 внутри тела с полями 16). */
#an-live .app-toolbar { padding: 0; border-bottom: 0; }
#an-live .app-tail .app-btn, #an-reports > .app-tail .app-btn { display: flex; width: fit-content; margin: var(--sp-2) auto 0; }

/* Подпись над таблицей вкладок «Сигналы» (задача 14) — что это за лента и чем
   она отличается от соседней. */
.an-caption { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-caption); color: var(--text-muted); }

/* Таблица отчёта — карточка (м:1097–1108): белая, рамка, шапка на фоне
   страницы, 600. Внутри отрасли — без своей рамки: карточка там — отрасль. */
.an-reports__view .grid { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-card); }
.an-reports__view .an-industry .grid { border: 0; border-radius: 0; }
.an-reports__view .grid__table th.grid__th { background: var(--surface); font-weight: 600; }
.an-reports__view .grid__table td:first-child { background: var(--surface-card); }
.an-reports__view .grid__table tr:last-child td { border-bottom: 0; }
/* Шапка была 61 px: кнопка сортировки 44 плюс поля ячейки. Поля сняты, высоту
   44 держит сама ячейка — цель касания та же, шапка ниже. */
.an-reports__view .grid__table th.grid__th { height: var(--touch); padding-top: 0; padding-bottom: 0; }
/* Телефон: четыре колонки по приоритету (analytics.js columnsOf) помещаются,
   если длинные подписи шапки переносятся («GROWTH / POTENTIAL», м:1093). */
@media (max-width: 959.98px) {
  .an-reports__view .grid__table th { white-space: normal; }
}
/* Хвост отчёта: «Показано N из M» слева, «Ещё» справа (м:1112–1116). */
#an-report-tail { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; text-align: left; }
#an-report-tail .app-btn { flex: none; margin: 0; font-size: var(--fs-label); font-weight: 600; color: var(--link); }
/* Нечего тапать — приписки нет. */
.an-reports__view:has(.grid__empty) .an-note { display: none; }
.an-note { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
/* Подпись «Расширенные» перед карточкой advanced_filters в листе — раздел
   внутри одного тела, не отдельное поле, поэтому не .app-field__label. */
.rf-more {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 600;
  color: var(--text-muted);
}

/* ── Примитивы макета 18.09 ─────────────────────────────────────────── */
/* .checkup-h2 — тот же моноподпис раздела, только со своими margin/padding;
   общий вид не копируется построчно, а разделяется групповым селектором. */
.app-section-label, .checkup-h2, .app-aside__label {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  line-height: var(--lh-tag);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.app-section-label { margin: 0; }
/* Колонка сигнала/чекапа без выбора (задача 12, P15): объясняющая заглушка
   вместо пустоты, пока человек не выбрал строку в ленте. */
/* Подпись колонки ленты отстоит от карточки на 14 px (м:1906: gap колонки). */
.feed-aside .app-aside__label { margin-bottom: calc(var(--sp-1) * 3.5); }
.app-aside__empty { margin: 0; padding: calc(var(--sp-1) * 5.5) calc(var(--sp-1) * 3.75); border: 1px dashed var(--dashed); border-radius: var(--r-box); background: var(--surface-card); text-align: center; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-faint); }
.app-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-3); }
.app-tile { background: var(--surface-sunk); border-radius: var(--r-block); padding: var(--sp-2) var(--sp-3); }
.app-tile__k { display: block; font-size: var(--fs-key); line-height: var(--lh-key); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.app-tile__v { display: block; font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 700; color: var(--text); }
.app-tag { display: inline-flex; align-items: center; padding: var(--sp-1) calc(var(--sp-1) * 1.75); border-radius: var(--r-tag); font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 700; }
.app-tag--up { background: var(--up-surface); color: var(--up-ink); }
.app-tag--down { background: var(--down-surface); color: var(--down-ink); }
.app-tag--cream { background: var(--surface-sunk); color: var(--link); }
.app-tag--navy { background: var(--super-surface); color: var(--super-ink); }
.app-pill { display: inline-flex; align-items: center; padding: 0 var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; white-space: nowrap; }
.app-pill--up { background: var(--up-surface); color: var(--up-ink); }
.app-pill--down { background: var(--down-surface); color: var(--down-ink); }
.app-pill--gold { background: var(--gold-soft); color: var(--warn-ink); }
.app-preview-badge { display: inline-block; margin-bottom: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-tag); line-height: var(--lh-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--link); }

/* ────────────────────────────────────────────────────────────────────────
   Широкая раскладка: то же приложение, панель слева.

   Не отдельная «десктопная версия», а поворот той же оболочки: состав панели
   и порядок пунктов те же, меняется только сторона. Граница 960 px — там,
   где рядом с панелью (236) и правой колонкой (288 = 30vw) остаётся ~400 px
   под содержимое. Колонка тянется с экраном до 440: на 264 из макета
   карточка сигнала не помещалась и давала странице прокрутку вбок; планшет (768–959) остаётся с нижней панелью, как телефон. Та
   же граница — в JS-константе WIDE (shell.js) и в feed.js: разъедутся —
   активный пункт и двухколонка ленты будут переключаться на разной ширине.

   Легаси-страницы сюда не попадают: у них своя шапка с вкладками, а панель
   на десктопе им и не рисуется (.app-nav--fixed выше).
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 960px) {
  :root { --app-rail-w: 236px; --app-aside-w: clamp(264px, 30vw, 440px); --app-list-w: 262px; --app-more-w: 236px; }

  /* Оболочка — две колонки: панель и содержимое. Брони под нижнюю панель
     больше нет, её место занимает колонка. */
  /* Рабочая область белая (м:1421): окно приложения #fff, кремовая — только
     правая колонка. Строки ленты и карточки держат свой тон (#FCFAF5). */
  .app-shell {
    display: grid;
    grid-template-columns: var(--app-rail-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: 0;
    background: var(--surface-card);
  }
  /* Поле поиска на белом — кремовое, 13 px подсказка (м:1876–1878). */
  .app-head .app-search .app-control { background: var(--surface); border-radius: var(--r-row); }
  .app-head .app-search .app-control::placeholder { font-size: var(--fs-caption); }

  /* Шапка экрана: заголовок раздела (+ подпись) слева, поиск справа — одной
     строкой. flex-wrap нужен ради того, что в строку не входит: тулбар чипов
     ленты и подсказки чекапа переносятся на свою собственную строку ниже. */
  .app-head {
    grid-column: 2; grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-5) var(--sp-3);
  }
  .app-head__title {
    display: block;
    margin: 0;
    font-size: var(--fs-head);
    line-height: var(--lh-head);
    font-weight: 700;
  }
  .feed-refresh--wide { display: inline-grid; place-items: center; }
  .app-head__caption {
    display: block;
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-faint);
  }
  /* Поиск — компактное поле справа. Свой боковой паддинг ему тут не нужен:
     ширину и отступ от заголовка держит сама шапка. */
  .app-head .app-search { margin-left: auto; min-width: 180px; max-width: 320px; padding-left: 0; padding-right: 0; }
  .app-head .app-search--gold { min-width: 200px; }
  /* Поле чекапа — в одной строке с заголовком и по центру её (м:1460):
     верхний отступ формы нужен только телефону. Основа 200 и рост до 320 —
     перенос строки считается по основе, и с 320 на 960 px поле уезжало под
     заголовок. Подсказки — шириной с поле. */
  .app-head .app-search--gold { flex: 1 1 200px; padding-top: 0; }
  .app-head .app-suggest { left: 0; right: 0; }
  .app-head .app-search__icon { left: var(--sp-3); }
  .app-head .app-search__clear { right: 0; }
  /* Всё, что не заголовок/подпись/поиск, — своей строкой во всю ширину
     (тулбар чипов ленты, подсказки чекапа), с тем же боковым отступом. */
  .app-head > *:not(.app-head__title):not(.app-head__caption):not(.app-search):not(.feed-refresh--wide) {
    flex-basis: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .app-bar { display: none; }

  .app-shell__body { grid-column: 2; grid-row: 2; padding: 0 var(--sp-5) var(--sp-5); }
  /* Точка монтирования панели — первая колонка на всю высоту. В разметке она
     стоит в хвосте оболочки; порядок задаёт раскладка, а не DOM. */
  #app-nav-mount { grid-column: 1; grid-row: 1 / -1; }

  /* Прилипание шапки в этой раскладке не работает и не нужно: её ряд сетки
     ровно по её высоте, ехать некуда. Значит и бронь под неё не нужна —
     иначе переходы по якорю перелетают на её высоту. */
  html { scroll-padding-top: 0; }

  /* Пункты в колонку — вместе с самой панелью. */
  .app-shell .app-nav__tabs { flex-direction: column; gap: var(--sp-1); }

  /* Панель: колонка во всю высоту экрана, прилипшая к верху. position: fixed
     ей больше не нужен — место под неё держит колонка сетки. */
  .app-shell .app-nav {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    bottom: auto;
    height: 100dvh;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-3);
    background: var(--navy);
    border-top: 0;
  }

  .app-nav__brand .app-brand-mark { width: 30px; height: 30px; }
  .app-nav__brand {
    /* Знак и надпись в строку (м: панель десктопа, знак 30 px). */
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-2);
    color: var(--on-navy);
    font-size: var(--fs-row);
    line-height: var(--lh-row);
    font-weight: 700;
    text-decoration: none;
  }

  /* Пункт разворачивается в строку: значок слева, подпись обычным кеглем —
     подпись под значком нужна там, где пунктов пять в ряд, а не в колонке. */
  .app-shell .app-nav__item {
    flex: none;
    min-height: var(--touch);
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--r-row);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    font-weight: 600;
    color: var(--on-navy-muted);
  }
  .app-shell .app-nav__pill { color: var(--navy-icon); }
  .app-shell .app-nav__item[aria-current="page"] {
    background: var(--navy-active);
    color: var(--on-navy);
  }
  .app-shell .app-nav__item[aria-current="page"] .app-nav__pill { color: var(--gold); }
  .app-shell .app-nav__item:active { background: var(--navy-active); }
  /* Кольцо фокуса на тёмной панели — золотом: базовое navy на navy не видно. */
  .app-shell .app-nav__item:focus-visible,
  .app-nav__links a:focus-visible,
  .app-nav__links button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* Профиль прижат к низу колонки: он не раздел, а выход из приложения. */
  .app-nav__aside {
    display: block;
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--navy-line);
  }
  .app-nav__aside .app-nav__item { display: flex; }
  /* «Профиль» — не раздел, а выход из приложения: обычное начертание, значок
     бледнее значков разделов (м:1445–1449). */
  .app-shell .app-nav__profile { font-weight: 400; }
  .app-shell .app-nav__profile:not([aria-current]) .app-nav__pill { color: var(--on-navy-faint); }
  .app-nav__links {
    margin: var(--sp-2) 0 0;
    padding: 0 var(--sp-2);
    font-size: var(--fs-nav);
    line-height: var(--lh-nav);
    color: var(--on-navy-faint);
  }
  .app-nav__links a, .app-nav__links button {
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .app-nav__links a:hover, .app-nav__links button:hover { color: var(--on-navy); }

  /* Общая раскладка «содержимое + правая колонка во всю высоту»: лента и
     карточка сигнала, бумага и история чекапа, счета (задача 11). Колонка —
     как в макете (м:1906): от верха окна до низа, рядом и с шапкой экрана, и
     с содержимым. Поэтому она прибита к правому краю окна, а место под неё
     держит отступ оболочки справа — шапка и тело встают левее.
     Липкая колонка в потоке (как было) стояла под шапкой и тянулась на
     100dvh от своего верха: документ всегда был длиннее окна на высоту шапки
     и нижний отступ (≈117 px пустой прокрутки на «Счетах»). Длинное
     содержимое колонки прокручивается внутри неё. */
  .app-shell:has(.app-split) { padding-right: var(--app-aside-w); }
  .app-aside {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--app-aside-w);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-5) var(--sp-4);
    background: var(--surface);
    border-left: 1px solid var(--border-subtle);
  }

  /* Строка ленты (задача 12): своя карточка вместо фона страницы, выбранная —
     золотом, как карточка сигнала рядом с ней. */
  .feed-row { background: var(--surface-row); border: 1.5px solid var(--border); }
  .feed-row[aria-current="true"] { background: var(--gold-soft); border-color: var(--gold); }
  /* Бледное время на золотой подложке ниже AA (3,96:1) — --text-soft. */
  .feed-row[aria-current="true"] .feed-row__time { color: var(--text-soft); }
  /* Строка — одной линией (м:1888–1896): тикер, плашки, статус, время
     справа; примечание — своей строкой во всю ширину. Названия в строке нет:
     оно в карточке справа. Обёртки головы и низа растворяются, порядок
     задаёт order. */
  .feed-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: calc(var(--sp-1) * 1.75) calc(var(--sp-1) * 2.5);
    margin-bottom: calc(var(--sp-1) * 2.25); padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.75); border-radius: var(--r-block); }
  .feed-row__head, .feed-row__foot { display: contents; }
  .feed-row__ticker { order: 1; font-size: var(--fs-row); line-height: var(--lh-row); }
  .feed-row__star { order: 2; }
  .feed-row__tags { order: 3; gap: calc(var(--sp-1) * 1.25); }
  .feed-row .feed-row__status { order: 4; }
  .feed-row__time { order: 5; }
  .feed-row__note { order: 6; flex: 1 1 100%; font-size: var(--fs-caption); line-height: var(--lh-caption); }
  .feed-row__note:empty, .feed-row__name { display: none; }
  /* Чипы ленты на десктопе — поля 12 (м:1883); тулбар в шапке, отступ
     сверху даёт промежуток шапки. */
  #feed-toolbar { padding: 0; }
  #feed-toolbar .app-chip { padding: 0 var(--sp-3); }
  /* Пустой отбор ленты — пунктирная карточка по центру (м:1898). Только
     лента: остальные пустые хвосты (операции, позиции, отчёты) стоят внутри
     своих карточек, вложенная пунктирная рамка там лишняя. */
  #feed-tail[data-state="empty"] { padding: calc(var(--sp-1) * 5.5) calc(var(--sp-1) * 3.75); border: 1px dashed var(--dashed); border-radius: var(--r-block); background: var(--surface-row); color: var(--text-faint); }
  /* Приглашение установить — телефонное (install-note.js: только iOS), на
     широком экране его нет (макет десктопа). */
  .install-card { display: none; }

  /* Подсказка чекапа (P12) — десктопный текст вместо телефонного. */
  .checkup-hint--phone { display: none; }
  .checkup-hint--wide { display: block; }

  /* Карточка актива (чекап, м:1467–1512): одна карточка #FCFAF5 на белой
     рабочей области — рамка у обёртки, у бумаги и статуса своей нет. */
  .asset { padding: calc(var(--sp-1) * 4.5); background: var(--surface-row); border: 1px solid var(--border); border-radius: var(--r-box); }
  .asset__paper { padding: 0; background: none; border: 0; border-radius: 0; }
  /* Прилипший столбец тикера в таблице красится фоном под ней: на белой
     рабочей области — белым, в кремовой колонке — кремовым. */
  .grid__table td:first-child { background: var(--surface-card); }
  .app-aside .grid__table td:first-child { background: var(--surface); }

  /* Шапка бумаги: тикер, под ним имя, вид и сектор одной строкой; « · » —
     настоящий текст в разметке (.asset__who-sep), CSS его только
     показывает/прячет по ширине. */
  .asset__avatar { width: 36px; height: 36px; font-size: var(--fs-note); }
  .asset__who { display: block; }
  .asset__symbol { display: block; font-size: var(--fs-num); line-height: var(--lh-num); }
  .asset__name, .asset__kind { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-soft); }
  .asset__who-sep { display: inline; font-size: var(--fs-note); color: var(--text-soft); }

  /* Цены и долгосрочный статус — рядом, а не друг под другом: цены в три
     колонки, статус — узкой колонкой, источник под ним строкой. */
  .asset__tiles-row { flex-direction: row; flex-wrap: wrap; gap: var(--sp-3); }
  .asset__prices { flex: 1 1 320px; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-block); }
  .asset__price:nth-child(3) { grid-column: auto; }
  .asset__price-k { font-size: var(--fs-tag); line-height: var(--lh-tag); }
  .asset__price-v { font-size: var(--fs-sub); line-height: var(--lh-sub); }
  .asset__lt { flex: 1 1 200px; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: calc(var(--sp-1) * 3.5); border-radius: var(--r-block); }
  .asset__lt-k { font-size: var(--fs-tag); line-height: var(--lh-tag); }
  .asset__lt-v { margin-top: calc(var(--sp-1) * .75); }
  .asset__lt--long .asset__lt-src, .asset__lt--short .asset__lt-src, .asset__lt-src {
    margin-top: var(--sp-1); padding: 0; background: none; color: inherit; font-weight: 400; line-height: var(--lh-small); }

  /* Статус без своей рамки и заголовка (балл — в ключе рекомендации):
     полосы во всю ширину карточки, ниже рекомендация и рядом метрики. */
  .asset__state { flex-direction: row; flex-wrap: wrap; gap: calc(var(--sp-1) * 3.5) var(--sp-3); padding: 0; border: 0; border-radius: 0; background: none; }
  .asset__state-head { display: none; }
  .asset__state-none, .asset__scale { flex: 1 1 100%; }
  .asset__rec, .asset__metrics { flex: 1 1 260px; min-width: 0; }
  .asset__rec { padding: calc(var(--sp-1) * 3.25) calc(var(--sp-1) * 3.5); border-radius: var(--r-block); }
  .asset__rec-k { font-size: var(--fs-tag); line-height: var(--lh-tag); }
  .asset__metrics { gap: calc(var(--sp-1) * 2.25); align-content: start; padding-top: 0; border-top: 0; }
  /* Полосы гибким рядом (м:1490–1495): название с номером, диапазон под
     ним, влево. Номер отдельным значком (.asset__band-n) не нужен — он уже
     входит в текст названия («N · имя»). */
  .asset__scale { display: flex; flex-wrap: wrap; gap: calc(var(--sp-1) * 1.25); }
  .asset__band { flex: 1 1 120px; min-width: 0; align-items: flex-start; padding: var(--sp-2); }
  .asset__band-n { display: none; }
  .asset__band-name { font-size: var(--fs-note); line-height: var(--lh-note); font-weight: 700; overflow-wrap: anywhere; }
  .asset__band-range { font-size: var(--fs-key); line-height: var(--lh-key); }

  /* Колонка: сигналы без своей карточки (колонка сама подложка), строки —
     белые; «Прибыльных…» своей строкой под подписью (м:1515–1528). */
  .asset-side { margin-top: 0; }
  .asset-signals { gap: var(--sp-3); padding: 0; background: none; border: 0; border-radius: 0; }
  .asset-signals__head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .asset-signals__wins { font-size: var(--fs-note); line-height: var(--lh-note); }
  .asset-signal { background: var(--surface-card); }
  .asset-signal__date { font-size: var(--fs-caption); line-height: var(--lh-caption); }
  .asset-signal__type { font-size: var(--fs-nav); line-height: var(--lh-nav); }
  .asset-signal__gain { font-size: var(--fs-caption); line-height: var(--lh-caption); }

  /* Действия колонки (м:1531–1535) — текстовые ссылки в столбец под
     пунктиром: две тихие, основная — золотом. */
  .asset-side__actions { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--sp-1) * 1.75);
    margin-top: var(--sp-3); padding-top: calc(var(--sp-1) * 2.75); border-top: 1px dashed var(--dashed); }
  .asset-side__link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-note);
    line-height: var(--lh-note);
    text-align: left;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
  }
  .asset-side__link:last-child { font-weight: 600; color: var(--link); }
  .asset-side__link:hover, .asset-side__link:focus-visible { text-decoration: underline; }
  .asset-side__link[aria-pressed="true"] { color: var(--brand-ink); }
  .asset-side__link[disabled] { opacity: .6; cursor: progress; }

  /* Список отчётов и открытый отчёт (задача 14) — рядом, список фиксированной
     ширины (--app-list-w, как список счетов задачи 13), отчёт занимает
     остаток. На телефоне это два экрана ([hidden] в analytics.js), здесь оба
     видны разом — [hidden] в JS для широкой раскладки не выставляется. */
  .an-reports {
    display: grid;
    grid-template-columns: var(--app-list-w) minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
  }
  /* Вкладки — по ширине подписей, от края заголовка, своей строкой под ним
     (м:1772). Селектор с id: общее правило шапки (.app-head > *:not(…))
     растягивало дорожку на всю ширину, а свои поля .an-seg сдвигали её на 16. */
  .app-head > #an-tabs { flex: 0 0 auto; margin: 0; }
  .app-head:has(> #an-tabs) .app-head__title { flex-basis: 100%; }
  /* Колонка отчётов (м:1758–1766): своя подложка с границей справа,
     пункты компактные — номер, заголовок, без описания. */
  .an-reports__list { padding: var(--sp-5) var(--sp-4); background: var(--surface-row); border-right: 1px solid var(--border-subtle); }
  .an-report-link { gap: var(--sp-2); padding: calc(var(--sp-1) * 2.5) calc(var(--sp-1) * 2.75); border-radius: var(--r-control); }
  .an-report-link__n { width: auto; height: auto; background: none; font-size: var(--fs-micro); line-height: var(--lh-label); }
  .an-report-link__title { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 400; }
  .an-report-link__desc { display: none; }
  .an-report__title { font-size: var(--fs-title); }
}

/* Название полосы статуса (P: задача 12) — видно на десктопе, на телефоне
   спрятано: полосы там подписаны только диапазоном баллов. */
@media (max-width: 959.98px) {
  .asset__band-name, .asset__who-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* График цены (задача 12, м:1510) — только в широкой раскладке (checkup.js
   рисует его лишь при wide.matches), поэтому без него на телефоне. */
.asset__chart { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-row); background: var(--surface-sunk); color: var(--brand-ink); }
.asset__chart svg { display: block; width: 100%; height: 120px; }
.asset__chart-target { stroke: var(--gold); }
.asset__chart figcaption { margin: var(--sp-1) 0 0; font-family: var(--font-mono); font-size: var(--fs-nav); color: var(--text-muted); }
.asset__chart--empty { display: flex; align-items: center; justify-content: center; min-height: 80px; font-size: var(--fs-caption); color: var(--text-muted); }

/* Счета на десктопе (задача 13): портфель строкой, карточки-кнопки списка. */
@media (min-width: 960px) {
  /* Шапка «Счетов» — только полоса бренда, а она здесь скрыта: без полей
     шапки заголовок встаёт в 24 px от верха, как «Счета» 22/700 в макете
     (м:1545). Заголовок раздела — сам #acc-title. */
  .app-head--bare { padding: 0; }
  .app-shell__body:has(#acc-view-head:not([hidden])) > #acc-title { display: none; }
  .acc-view-head { position: sticky; top: 0; z-index: 3; padding: var(--sp-4) 0; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
  .acc-view-back { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-3); margin-left: calc(-1 * var(--sp-3)); border-radius: var(--r-control); color: var(--text-muted); font-size: var(--fs-caption); font-weight: 600; text-decoration: none; }
  .acc-view-back:hover { background: var(--surface-row); color: var(--brand-ink); text-decoration: none; }
  .acc-view-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .acc-view-head h1 { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-head); line-height: var(--lh-head); }
  .acc-view-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-caption); }
  #acc-portfolio:has(#acc-view-head:not([hidden])) #acc-inline-head,
  #acc-portfolio > #acc-details .acc-details__close,
  #acc-portfolio > #acc-details .acc-details__head { display: none; }
  #acc-inline:has(#acc-settings:not([hidden])) { border: 0; padding: var(--sp-5) 0; margin: 0; background: none; }
  .acc-account-actions a[aria-current="page"] { background: var(--gold-soft); border-color: var(--gold); color: var(--brand-ink); }
  /* Подробности и настройки занимают центральную область вместо списка. */
  #acc-portfolio:has(> #acc-view-head:not([hidden])) > :not([data-screen]):not(#acc-inline):not(#acc-view-head) { display: none; }
  #acc-title { padding: var(--sp-5) 0 var(--sp-4); font-size: var(--fs-head); line-height: var(--lh-head); }
  /* Портфель (м:1547–1553): сумма слева, доход справа — месяц 14 цветом роста,
     ниже полгода и подпись 12,5 приглушённо. */
  .acc-total { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: var(--sp-4); row-gap: 0; padding: calc(var(--sp-1) * 5); border-radius: var(--r-box); }
  .acc-total__label { flex-basis: 100%; }
  .acc-total__row { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
  .acc-total__sum { font-size: var(--fs-hero); line-height: var(--lh-hero); white-space: nowrap; }
  .acc-total__income { text-align: right; font-size: var(--fs-label); line-height: var(--lh-label); }
  .acc-total__sep { display: none; }
  .acc-total__half { display: block; font-size: var(--fs-note); line-height: var(--lh-note); color: var(--on-navy-soft); }
  .acc-total__note { flex-basis: 100%; text-align: right; font-size: var(--fs-note); line-height: var(--lh-note); }
  .acc-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0 calc(var(--sp-1) * 3.5); width: 100%; margin: 0 0 var(--sp-3); padding: calc(var(--sp-1) * 3.5) var(--sp-4); background: var(--surface-row); border: 1.5px solid var(--border); border-radius: var(--r-block); font: inherit; text-align: left; cursor: pointer; }
  .acc-row .acc-row__meta { grid-column: auto; order: 2; }
  .acc-row .app-pill { order: 3; }
  .acc-row[aria-current="true"] { background: var(--gold-soft); border-color: var(--gold); }
  /* Кнопки раздела — слева по тексту, 14/600 (м:1571–1572). */
  .acc-desk-actions { display: flex; flex-wrap: wrap; gap: calc(var(--sp-1) * 2.25); margin: var(--sp-1) 0 var(--sp-4); }
  .acc-desk-actions > * { flex: 1 1 200px; justify-content: flex-start; text-align: left; padding: calc(var(--sp-1) * 3.5) var(--sp-4); font-size: var(--fs-label); line-height: var(--lh-label); border-radius: var(--r-block); }
  .acc-desk-actions .acc-connect-btn { flex-basis: 240px; background: none; }
  /* Баннер «подключён» — одной строкой, «Понятно» белой кнопкой справа (м:1555–1561). */
  .acc-bound { flex-direction: row; align-items: center; gap: calc(var(--sp-1) * 3.5); padding: calc(var(--sp-1) * 3.75) calc(var(--sp-1) * 4.25); border-radius: var(--r-box); }
  .acc-bound__text { flex: 1; min-width: 0; }
  .acc-bound .app-btn { flex: none; min-height: var(--touch); padding: 0 calc(var(--sp-1) * 3.5); background: var(--surface-card); border: 1px solid var(--up-border); border-radius: var(--r-control); font-size: var(--fs-caption); font-weight: 600; }
  .acc-bound .app-btn::after { content: none; }

  /* Встроенная панель мастера и настроек (м:1576–1580, 1678–1681). */
  #acc-inline { padding: calc(var(--sp-1) * 4.5) calc(var(--sp-1) * 5); background: var(--surface-row); }
  #acc-inline:has(#acc-connect:not([hidden])) { border: 1.5px solid var(--gold); }
  #acc-inline-head { align-items: baseline; margin-bottom: calc(var(--sp-1) * 3.5); }
  #acc-inline-head .acc-card__title { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); }
  #acc-inline .acc-wtitle { font-size: var(--fs-lead); line-height: var(--lh-lead); }
  #acc-inline .acc-wnote { font-size: var(--fs-note); max-width: 640px; }
  #acc-inline .acc-wnav .app-btn { flex: none; padding: 0 calc(var(--sp-1) * 4.5); font-size: var(--fs-caption); }
  #acc-inline .acc-wnav #acc-wnext { padding: 0 calc(var(--sp-1) * 5.5); font-size: var(--fs-label); }
  /* Вкладки шагов — сетка на всю ширину панели, текст переносится (м:1582–1586). */
  .acc-wtabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .acc-wtabs .acc-wnum { padding: calc(var(--sp-1) * 2.5) calc(var(--sp-1) * 2.75); text-align: left; white-space: normal; font-family: var(--font-sans); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface-card); }
  .acc-wtabs .acc-wnum.is-current { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
  .acc-wtabs .acc-wnum.is-done { background: var(--gold-soft); color: var(--link); border-color: var(--gold); }
  /* Карточки режимов, уровней и профилей — сеткой (м:1607, 1623, 1642). */
  #acc-inline .acc-modes, #acc-inline .acc-profiles, #acc-inline .acc-levels, #acc-inline #acc-wbody:has(> .acc-level) {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: calc(var(--sp-1) * 2.25); margin-bottom: calc(var(--sp-1) * 2.5);
  }
  #acc-inline #acc-wbody:has(> .acc-level) > :not(.acc-level), #acc-inline .acc-levels > :not(.acc-level) { grid-column: 1 / -1; }
  #acc-inline .acc-mode, #acc-inline .acc-level, #acc-inline .acc-profile { margin: 0; }
  /* Строки «Горизонта и риска» и сводки — сеткой мелких ячеек (м:1684, 1664). */
  #acc-inline .acc-hrows, #acc-inline .acc-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-radius: var(--r-row); }
  #acc-inline .acc-hrows > div, #acc-inline .acc-summary > div { display: block; padding: calc(var(--sp-1) * 2.75) calc(var(--sp-1) * 3.25); border-bottom: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); }
  #acc-inline .acc-hrows dt, #acc-inline .acc-summary dt { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-faint); }
  #acc-inline .acc-hrows dd, #acc-inline .acc-summary dd { margin-top: calc(var(--sp-1) * .5); text-align: left; font-size: var(--fs-caption); line-height: var(--lh-caption); }

  /* Колонка счёта (м:1712–1751): операции белой карточкой, плитки белые с
     рамкой, пауза одной строкой, «Удалить…» мелко под пунктиром. */
  #acc-aside .acc-aside__title { margin: 0; }
  #acc-aside .acc-warn-setup { padding: var(--sp-3) calc(var(--sp-1) * 3.25); border-radius: var(--r-block); }
  #acc-aside .acc-warn-setup b { font-size: var(--fs-caption); line-height: var(--lh-caption); }
  #acc-aside .acc-warn-setup p { font-size: var(--fs-nav); line-height: var(--lh-note); }
  #acc-aside .acc-pause { margin-top: var(--sp-3); padding: calc(var(--sp-1) * 3.5); border-radius: var(--r-block); }
  #acc-aside .acc-pause b { font-size: var(--fs-label); line-height: var(--lh-label); }
  #acc-aside .acc-pause span { display: none; }
  #acc-aside .acc-confirm { padding: calc(var(--sp-1) * 3.5); border-width: 1.5px; border-radius: var(--r-block); }
  #acc-aside .acc-confirm__actions .app-btn { font-size: var(--fs-caption); border-radius: var(--r-control); }
  #acc-aside .checkup-history__empty { margin: var(--sp-3) 0 0; font-size: var(--fs-small); line-height: var(--lh-note); }
  #acc-aside button.acc-delete { margin-top: var(--sp-3); padding: calc(var(--sp-1) * 2.75) 0 0; border-top: 1px dashed var(--dashed); font-size: var(--fs-small); line-height: var(--lh-note); }
}

/* «Ещё» (задача 15): операторские разделы (справочники/пользователи/
   техадминка) — только в широкой раскладке, слева колонкой шириной
   --app-more-w; на телефоне их нет вовсе (решение 3). */
.more-ops { display: none; }
.more-acc small { display: block; margin-top: calc(var(--sp-1) * .5); font-family: var(--font-mono); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-faint); }
.more-acc b { font-size: var(--fs-row); line-height: var(--lh-row); }
/* Плашка статуса — как в строке «Счетов»: 11,5/700, радиус 5 (м:1163–1168). */
.more-acc .app-pill { flex: none; padding: var(--sp-1) calc(var(--sp-1) * 1.75); border-radius: var(--r-tag); font-size: var(--fs-nav); line-height: var(--lh-nav); font-weight: 700; }

/* Пунктирная врезка: что есть только на десктопе, почему «только просмотр». */
.more-note, .app-note--dashed { margin: var(--sp-3) 0 0; padding: calc(var(--sp-1) * 3.5) var(--sp-4); border: 1px dashed var(--dashed); border-radius: var(--r-card); background: var(--surface); font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-muted); }
/* Поиск «Чужих счетов» — во всю ширину карточек (м:1157–1160): у .app-search
   свои поля 16 внутри тела с полями 16. */
#more-accounts .app-search { padding: 0; margin-bottom: var(--sp-3); }
#more-accounts .app-search__icon { left: var(--sp-3); }
/* Заголовок подэкрана на телефоне — только для читалки: в макете его нет,
   экран назван «‹ Назад» в полосе (м:1157, 1177). */
@media (max-width: 959.98px) {
  #more-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
#more-title { font-weight: 700; }

/* Профиль и справка на десктопе (сверка profile п.12, 13). Полосы бренда
   нет, и «‹ Назад» подэкрана (Тариф → Ваш доступ, статья → оглавление)
   остаётся строкой над заголовком. Колонка текста не шире 640: строки на
   всю ширину окна разносили имя и значение на тысячу пикселей. */
@media (min-width: 960px) {
  .app-head--back .app-bar:has(> .app-bar__back:not([hidden])) { display: flex; position: static; padding: var(--sp-5) var(--sp-5) 0; background: none; border: 0; }
  .app-head--back .app-bar::before, .app-head--back .app-bar__gear { display: none; }
  .app-shell__body:has(> #profile-title, > #help-title) { max-width: calc(640px + var(--sp-5) * 2); }
  #profile-title, #help-title { padding: var(--sp-5) 0 var(--sp-4); }
  .app-head--back:has(.app-bar__back:not([hidden])) + .app-shell__body > .app-title { padding-top: var(--sp-3); }
}

/* Строка «Чужих счетов» — своя карточка, как строка ленты/счетов: имя и
   владелец слева, пилюля статуса справа. */
.more-acc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: calc(var(--sp-1) * 3.5);
  margin: 0 0 calc(var(--sp-1) * 2.5);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  color: var(--text);
  text-decoration: none;
}
.more-acc[aria-current] { background: var(--gold-soft); border-color: var(--gold); }
/* Специфичность .more-acc { display: flex } иначе перебивает базовое
   [hidden] { display: none } браузера — строка осталась бы видна под
   фильтром поиска (та же ловушка, что у .app-list a[hidden] выше). */
.more-acc[hidden] { display: none; }
.more-acc-view__owner { display: block; margin: var(--sp-1) 0 var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-note); color: var(--text-faint); }
/* Чужой счёт (м:1177–1192): карточка 16, «Счёт 1042» 18/700; значения плиток
   без моно; ниже — плашка репликации и пунктирная врезка отдельными блоками. */
.more-acc-view { padding: var(--sp-4); }
.more-acc-view__title { display: block; font-size: var(--fs-sub); line-height: var(--lh-sub); }
.more-acc-view .app-tile__v { font-size: var(--fs-row); }
.more-acc-view > a { display: inline-block; margin-top: var(--sp-3); color: var(--link); font-size: var(--fs-label); font-weight: 600; }
.more-acc-view__repl { margin: var(--sp-3) 0 0; padding: calc(var(--sp-1) * 3.75) var(--sp-4); background: var(--up-surface); border: 1px solid var(--up-border); border-radius: var(--r-card); color: var(--up-ink); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700; }
.more-acc-view__repl.is-off { background: var(--down-surface-soft); border-color: var(--down-border); color: var(--down-ink); }

@media (min-width: 960px) {
  /* Операторская колонка — во всю высоту окна вплотную к панели (м:1833–1840):
     отрицательные поля съедают поля тела слева/снизу, ширина та же 236. */
  .more-desk { display: grid; grid-template-columns: calc(var(--app-more-w) - var(--sp-5)) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
  .more-ops {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 100dvh;
    margin: 0 0 calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));
    padding: calc(var(--sp-1) * 5.5) var(--sp-4);
    background: var(--surface-row);
    border-right: 1px solid var(--border-subtle);
  }
  .more-ops .app-section-label { margin-bottom: var(--sp-1); }
  /* Пункты — белые карточки (м:1835–1837), а не строки списка. */
  .more-ops .app-list a {
    margin-top: var(--sp-2);
    padding: calc(var(--sp-1) * 2.75) var(--sp-3);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    color: var(--text-muted);
  }
  .more-ops__note { margin: auto 0 0; padding-top: var(--sp-4); font-size: var(--fs-small); line-height: var(--lh-note); color: var(--text-muted); }
  .more-note { display: none; }
}

/* Реквизиты остаются рядом с инструментом и в компактной колонке. */
.feed-day { margin: var(--sp-5) 0 var(--sp-3); color: var(--text-muted); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; }
.feed-day:first-child { margin-top: 0; }
.feed-row__venue, .sig__venue { display: block; color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-small); overflow-wrap: anywhere; }
.feed-row__time { white-space: nowrap; }
.profile-theme { margin-top: var(--sp-5); display: grid; gap: var(--sp-2); }
.profile-theme .app-subtitle { margin: 0; }
.push-onboarding { margin-bottom: var(--sp-4); }
.push-onboarding__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

.an-kind__title { font-size: var(--fs-body); margin: var(--sp-5) 0 var(--sp-3); }

.app-sheet::backdrop { background: transparent; }

#feed-period { padding: 0 var(--sp-4); }
@media (min-width: 960px) { #feed-period { padding: 0; flex-basis: 100%; } }