/* F-helper workspace. All colors come from the shared ui.css palette. */
:root {
  /* Заголовки - Geologica. Файлы лежат в web/fonts с самого начала, но эта
     строка держала Golos Text и перебивала ui.css: Geologica не рисовалась
     нигде и не скачивалась вовсе. Владелец 8 сентября: шрифт выглядит
     дефолтным, хочется дизайнерский и объемный - это ровно она. */
  --display: Onest, 'Golos Text', 'Segoe UI', sans-serif;
  --body: 'Golos Text', Onest, 'Segoe UI', sans-serif;
  --r-s: 9px;
  --r-m: 16px;
}
body { font-size: var(--t-text); line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--brand-primary-border); outline-offset: 3px;
}
.eyebrow { display: block; color: var(--brand-primary); font-size: var(--t-micro); font-weight: 750; letter-spacing: .15em; margin-bottom: 12px; }
.btn { font-size: var(--t-note); font-weight: 650; min-height: 42px; box-shadow: none; }
.btn--light { background: var(--surface); border-color: var(--line); }
.btn--sm { min-height: 38px; }
.card, .block { box-shadow: none; }
.card > h2, .card > h3 { letter-spacing: var(--t-card-ls); }
.sheet__head h2, .head h1, .pagehead h1, .pagehead h2 {
  font-family: var(--display); font-size: var(--t-screen); line-height: var(--t-screen-lh);
  font-weight: var(--t-screen-w); letter-spacing: var(--t-screen-ls);
}
.sheet__head p { color: var(--ink-3); line-height: 1.65; }
.workspace-intro { color: var(--ink-3); margin: -8px 0 24px; }
/* Название раздела и подпись под ним - один блок внутри шапки. Порознь
   подпись была соседкой шапки, и на 390, где шапка складывается в столбик,
   она уезжала под кнопки выгрузки. Своего margin-left: auto блоку не даем:
   его уже несет первая кнопка (ui.css, .head > .pill), а два автоматических
   отступа поделили бы свободное место пополам. */
.head__copy { min-width: 0; }
/* Нижний отступ у подписи, а не у шапки: раньше он приходил из собственных
   полей абзаца, и без него содержимое подъезжало к заголовку на десять
   пикселей ближе, чем на остальных экранах. */
.head__copy .workspace-intro { margin: 8px 0 24px; }
.loading { padding: 48px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.msg { line-height: 1.6; }
.art { max-width: 560px; margin-inline: auto; }
.art__img { max-height: 170px; object-fit: contain; }
/* The entry screen is part of the product, with no invented statistics. */
.gate { background: var(--surface); min-height: 100svh; padding: 20px; gap: 20px; }
.gate__brand { flex: 0 0 49%; background: var(--brand-primary-soft); color: var(--ink); border: 1px solid var(--blue-line); border-radius: 24px; padding: 48px clamp(28px, 4vw, 72px); align-items: stretch; }
.gate__brandin { width: 100%; max-width: 560px; display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; align-content: start; margin: auto; }
.gate__mark { width: 44px; height: 44px; border-radius: 12px; box-shadow: none; }
.gate__name { font-family: var(--body); font-size: var(--t-tile); letter-spacing: -.05em; margin: -3px 0 0; }
.gate__tag { font-size: var(--t-micro); color: var(--ink-3); opacity: 1; }
.gate__story { grid-column: 1 / -1; margin-top: 68px; }
/* Единственный кегль вне семи ступеней шкалы, и это сознательно. Строка
   «Больше контроля. Меньше рутины.» - витрина входа, а не заголовок
   раздела: она стоит до кабинета и работает как обложка. Прижать ее к
   34 значит уравнять с «Сводкой» и потерять единственное место, где
   продукт говорит громко. Ступени начинаются за дверью. */
.gate__story h2 { font-family: var(--display); font-size: clamp(36px, 3.7vw, 58px); font-weight: 600; line-height: 1.06; letter-spacing: -.055em; margin: 0 0 22px; }
.gate__story p { font-size: var(--t-text); line-height: 1.75; max-width: 38ch; color: var(--ink-2); margin: 0; }
.gate__workspace { grid-column: 1 / -1; margin-top: 36px; background: var(--surface); border: 1px solid var(--blue-line); border-radius: 14px; padding: 0 22px; transform: rotate(-2deg); }
.gate__workspace-top { padding: 16px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-micro); color: var(--ink-3); }
.gate__dots { letter-spacing: 3px; color: var(--blue-line); }
.gate__module { display: flex; gap: 14px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line-soft); }
.gate__module:last-child { border-bottom: 0; }
.gate__module-n { font-size: var(--t-micro); color: var(--brand-primary); background: var(--brand-primary-soft); border-radius: 9px; padding: 10px; }
.gate__module div { flex: 1; }
.gate__module b { display: block; font-size: var(--t-note); font-weight: 650; }
.gate__module div span { display: block; color: var(--ink-3); font-size: var(--t-micro); margin-top: 3px; }
.gate__module > span:last-child { color: var(--brand-primary); }
.gate__caption { grid-column: 1 / -1; margin: 30px 0 0; font-size: var(--t-micro); color: var(--ink-3); }
.gate__side { padding: 48px 24px; flex: 1; }
.gate__card { max-width: 422px; padding: 24px 0; border: 0; box-shadow: none; background: none; }
.gate__card h1 { font-size: var(--t-screen); font-weight: var(--t-screen-w); line-height: var(--t-screen-lh); letter-spacing: var(--t-screen-ls); margin-bottom: 14px; }
.gate__card .sub { font-size: var(--t-text); line-height: 1.7; color: var(--ink-3); margin-bottom: 32px; }
.gate .field { margin-bottom: 20px; }
.gate .field label { font-size: var(--t-note); font-weight: 650; margin-bottom: 8px; }
.gate .field input { min-height: 50px; background: var(--sunken); border-color: var(--line); border-radius: 10px; }
.gate .field input:focus { background: var(--surface); border-color: var(--brand-primary); }
.gate .btn--wide { min-height: 50px; margin-top: 6px; }
.password-control { position: relative; }
.password-control input { padding-right: 92px; }
.password-toggle { position: absolute; right: 5px; top: 5px; height: calc(100% - 10px); padding: 0 12px; background: transparent; border: 0; color: var(--ink-3); font-size: var(--t-micro); cursor: pointer; border-radius: 7px; }
.password-toggle:hover { background: var(--bg-hover); color: var(--brand-primary); }
/* Persistent identity, account context and a quiet navigation rail. */
.brandbar { padding: 12px 28px 12px 24px; gap: 24px; }
.brandbar__logo { width: calc(var(--side) - 48px); gap: 10px; flex: none; }
.brandbar__mark { width: 36px; height: 36px; border-radius: 10px; }
.brandbar__word { font-size: var(--t-block); font-weight: 750; letter-spacing: -.05em; line-height: 1.1; }
.brandbar__word span { display: block; font-size: var(--t-micro); font-weight: 500; color: var(--ink-3); letter-spacing: .1em; margin-top: 4px; }
.switch { background: var(--sunken); border-color: transparent; padding: 8px 10px; width: 272px; max-width: 272px; }
.switch__ava { border-radius: 10px; width: 32px; height: 32px; }
.workspace-back { display: flex; align-items: center; gap: 24px; background: transparent; border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px; color: var(--ink-2); font-size: var(--t-note); cursor: pointer; }
.workspace-back:hover { background: var(--brand-primary-soft); color: var(--brand-primary); }
.mobile-menu { display: none; }
.side__label { font-size: var(--t-micro); line-height: var(--t-micro-lh); letter-spacing: var(--t-micro-ls); font-weight: var(--t-micro-w); color: var(--sidebar-muted); margin: 0 12px 14px; }
.nav__group:empty { display: none; }
.side__foot { margin-top: auto; padding: 40px 8px 0; display: flex; gap: 10px; align-items: center; }
.side__foot-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 10px; color: var(--brand-primary); font-weight: 750; }
.side__foot b { display: block; font-size: var(--t-micro); font-weight: 600; }
.side__foot div span { display: block; font-size: var(--t-micro); color: var(--ink-3); margin-top: 3px; }
.top { background: var(--canvas); }
.top__in { padding: 14px var(--work-pad); min-height: var(--head); }
/* Рабочая колонка. Сверху 32 - тот самый вдох перед заголовком экрана,
   одинаковый на всех пятнадцати экранах. Снизу 48: содержимое и подвал -
   разные смысловые части. */
.main { padding: 32px var(--work-pad) 48px; width: 100%; }
.switchpop { left: var(--side); top: calc(var(--brand) - 4px); }
/* Portfolio: a useful overview before entering an account. */
.hub { padding: 0 48px 64px; max-width: var(--work-max); margin: auto; }
.portfolio-brand { min-height: 90px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.portfolio-brand img { border-radius: 9px; }
.portfolio-brand b { font-size: var(--t-tile); letter-spacing: -.05em; }
.portfolio-brand > span { font-size: var(--t-micro); margin-left: 16px; border-left: 1px solid var(--line); padding-left: 24px; color: var(--ink-3); }
.hub__head { align-items: flex-end; margin-bottom: 24px; }
.portfolio-title h1 { font-family: var(--display); font-size: var(--t-screen); line-height: var(--t-screen-lh); font-weight: var(--t-screen-w); letter-spacing: var(--t-screen-ls); }
.portfolio-title p { color: var(--ink-3); font-size: var(--t-note); margin: 8px 0 0; }
.hub__row { gap: 8px; }
.hub__head .hub__x, .hub__add, .hub__more > summary { min-height: 40px; font-size: var(--t-note); border-radius: 9px; }
.hub__head .hub__menu .hub__x { font-size: var(--t-note); }
.hub__seg { margin-right: 8px; }
.hub__segb { min-height: 32px; font-size: var(--t-micro); }
.hub__sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; border: 0; background: none; margin-bottom: 32px; }
.portfolio-stat { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; color: var(--ink); cursor: pointer; min-width: 0; }
.portfolio-stat:hover { border-color: var(--blue-line); }
.portfolio-stat__label { display: flex; gap: 9px; align-items: center; color: var(--ink-3); font-size: var(--t-micro); }
.portfolio-stat__label .ic { width: 16px; height: 16px; }
.portfolio-stat strong { display: block; font-size: var(--t-figure); line-height: var(--t-figure-lh); letter-spacing: var(--t-figure-ls); font-weight: var(--t-figure-w); margin: 16px 0 8px; font-variant-numeric: tabular-nums; }
.portfolio-stat__note { font-size: var(--t-micro); color: var(--ink-3); }
.portfolio-stat--primary { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--surface); }
.portfolio-stat--primary .portfolio-stat__label, .portfolio-stat--primary .portfolio-stat__note { color: var(--blue-line); }
.hub__filters { gap: 8px; margin-bottom: 16px; }
.hub__flt { border-radius: 8px; min-height: 34px; font-size: var(--t-micro); }
.hub__flt.is-on { background: var(--surface); color: var(--brand-primary); border-color: var(--blue-line); }
.hub__search { margin-bottom: 16px; }
.hub__searchbox { max-width: 400px; }
.hub__search input { min-height: 42px; border-radius: 9px; }
.hub__tblwrap { border-radius: 14px; }
/* Точка состояния в строке аккаунта - общая с остальным кабинетом
   (.state в ui.css). Своего вида у нее тут нет, только выравнивание по
   левому краю клетки: столбец «Состояние» единственный текстовый среди
   числовых, и наследованный right сдвигал бы точку от слова. */
.ptbl .ptbl__why.state { text-align: left; }
.hub table th { padding: 16px; font-size: var(--t-micro); text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.hub table td { padding: 16px; }
.hub__grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.hub__card { padding: 24px; border-radius: 16px; box-shadow: none; }
.hub__ava { border-radius: 12px; }
/* Analytics: legible totals, separated breakdowns, compact controls.
   Шаг тот же, что и во всем кабинете: 24 внутри карточки, 32 между
   карточками, 48 между смысловыми частями экрана. */
.summary-panels { display: grid; grid-template-columns: 1fr; gap: 32px; }
.summary-panels .block, .summary-breakdown { padding: 24px; margin-bottom: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; }
.summary-breakdown { margin-block: 32px; }
.summary-panels .block > h2 { font-size: var(--t-card); line-height: var(--t-card-lh); font-weight: var(--t-card-w); letter-spacing: var(--t-card-ls); margin-bottom: 24px; }
.summary-panels .fun { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.summary-panels .fun > div { padding-right: 24px; border-right: 1px solid var(--line); }
.summary-panels .fun > div:last-child { border: 0; }
.summary-panels .fun__t { font-size: var(--t-note); font-weight: 500; color: var(--ink-3); }
.summary-panels .fun__v { font-size: var(--t-figure); line-height: var(--t-figure-lh); font-weight: var(--t-figure-w); letter-spacing: var(--t-figure-ls); }
/* Строка следствия под числом воронки. Подписью 13, а не сноской 11:
   читать надо обе строки, а не одну - «780» без «каждая заявка обошлась в
   51,52 руб» не решает ни одного вопроса. */
.summary-panels .fun__line { margin-top: 8px; }
.summary-panels .fun__d { font-size: var(--t-note); line-height: var(--t-note-lh); margin-top: 8px; color: var(--ink-2); }
.summary-breakdown .ind { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
.ind__k { font-size: var(--t-note); font-weight: 550; }
.ind__v { font-size: var(--t-block); line-height: var(--t-block-lh); font-weight: var(--t-figure-w); letter-spacing: var(--t-block-ls); }
.ind__fill { border-color: transparent; }
.summary-body > .block__head { margin-top: 48px; }
.block__head h2 { font-size: var(--t-block); line-height: var(--t-block-lh); font-weight: var(--t-block-w); letter-spacing: var(--t-block-ls); }
.card--plot { border-radius: 16px; padding: 24px; }
.card--plot > .chart { border: 0; box-shadow: none; padding: 0; margin: 0; }
.chart__head { flex-wrap: wrap; gap: 12px; }
.chart__head .chart__v { white-space: nowrap; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--t-micro); color: var(--ink-3); margin: 0 0 16px; }
.chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart__legend i { width: 8px; height: 8px; border-radius: 3px; }
.fbar { margin-bottom: 24px; }
/* Поля и радиус плитка берет общие (ui.css), тут остается только снятая
   тень: в рабочей области глубина держится границами. */
.kpi { box-shadow: none; }
.kpi__v { font-size: var(--t-tile); line-height: var(--t-tile-lh); font-weight: var(--t-figure-w); letter-spacing: var(--t-figure-ls); margin-top: 8px; }
table { font-variant-numeric: tabular-nums; }
thead th { background: var(--sunken); }
.feed__sheets { gap: 6px; padding-bottom: 8px; }
.feed__sheet { border-radius: 9px; min-height: 38px; }
.feed__sheet.is-on { background: var(--brand-primary-soft); color: var(--brand-primary); box-shadow: none; border-color: var(--blue-line); }
.feed__tools { gap: 8px; }
.feed__acts { padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; gap: 8px; }
.feed__acts .pill { border-radius: 7px; font-size: var(--t-micro); }
.tool-onboarding { padding: 24px; }
.tool-onboarding__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 24px; }
.tool-onboarding__steps > div > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--blue-line); background: var(--brand-primary-soft); color: var(--brand-primary); border-radius: 10px; margin-bottom: 16px; font-size: var(--t-note); }
.tool-onboarding__steps h3 { font-size: var(--t-card); font-weight: 650; margin-bottom: 8px; }
.tool-onboarding__steps p { color: var(--ink-3); font-size: var(--t-note); max-width: 28ch; margin: 0; }
/* Вкладка «Настройки» до первой записи ссылки в Авито: экран читается как
   три дела подряд, номер шага стоит в заголовке карточки. Тот же кружок, что
   у подсказки первого размещения выше, только меньше. */
.feed__steps-title { margin: 0 0 16px; font-size: var(--t-block); font-weight: 700; color: var(--ink); }
.feed__step-n {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  margin-right: 9px; vertical-align: -3px;
  border: 1px solid var(--blue-line); border-radius: 7px;
  background: var(--brand-primary-soft); color: var(--brand-primary);
  font-size: var(--t-micro); font-weight: 700;
}
/* Анализ конкурентов: очередь отчетов. Глубина только границами, как у
   панелей сервиса; строка задачи - сетка, а не таблица, чтобы на телефоне
   складываться в карточку без второй разметки. Своей ширины у страницы нет:
   она стоит в общей колонке (--work-max в ui.css). */
.market-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; }
/* Строка состояния очереди - общая с биддером (.state-line в ui.css). В
   полосе она стоит слева от главной кнопки, поэтому нижний отступ снимаем. */
.market-bar .state-line { margin: 0; flex: 1 1 320px; }
.market-list { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: visible; }
.market-list__head, .market-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 84px auto; gap: 16px; align-items: center; padding: 16px 24px; }
.market-list__head { padding: 12px 24px; font-size: var(--t-micro); line-height: var(--t-micro-lh); font-weight: var(--t-micro-w); letter-spacing: var(--t-micro-ls); text-transform: uppercase; color: var(--ink-3); background: var(--sunken); border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; }
.market-row { border-bottom: 1px solid var(--line-soft); }
.market-row:last-child { border-bottom: 0; }
.market-row:hover { background: var(--sunken); }
.market-row--trash { opacity: .7; }
.market-row__name { min-width: 0; }
.market-row__name b { display: block; font-size: var(--t-note); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.market-row__name small { display: block; margin-top: 3px; font-size: var(--t-micro); color: var(--ink-3); overflow-wrap: anywhere; }
.market-row__name small a { color: inherit; text-decoration: none; }
.market-row__name small a:hover { color: var(--blue-deep); text-decoration: underline; }
/* Заметка - тихая строчка пунктиром, а не поле ввода: общий стиль полей в
   ui.css перебивается тремя классами, поэтому здесь сброшено все, что он
   задает - рамка, высота, скругление, тень. */
.market-list .market-row__name .market-note { display: block; width: 100%; min-height: 0; height: auto; margin-top: 6px; padding: 3px 0; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; box-shadow: none; background: transparent; font: inherit; font-size: var(--t-micro); line-height: 1.4; color: var(--ink-2); }
.market-list .market-row__name .market-note::placeholder { color: var(--ink-4); }
.market-list .market-row__name .market-note:hover { border-bottom-color: var(--line-strong); }
.market-list .market-row__name .market-note:focus { outline: none; box-shadow: none; border-bottom-color: var(--blue); }
.market-row__meta { font-size: var(--t-note); color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
/* Вторая строка состояния - подробность, а не сноска: «страница 3 из 5»
   и «сбор не удался, нажмите Повторить» читают, а не проглядывают. */
.market-row__status .tag, .market-row__status .state { margin-bottom: 4px; }
.market-row__status small { display: block; font-size: var(--t-note); line-height: var(--t-note-lh); color: var(--ink-3); overflow-wrap: anywhere; }
.market-row__when { font-size: var(--t-note); color: var(--ink-3); white-space: nowrap; }
.market-row__acts { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.market-row__acts .btn--sm { min-height: 34px; padding: 6px 12px; font-size: var(--t-note); }
.market-row__acts .pill { padding: 6px 11px; font-size: var(--t-note); }
/* Отказ выгрузки живет в самой строке: во всю ширину сетки, чтобы столбцы
   не разъезжались, и в самом низу строки, под кнопками. */
.market-row__msg { grid-column: 1 / -1; margin: 8px 0 0; }
.market-more { position: relative; }
.market-more > summary { list-style: none; cursor: pointer; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--t-note); font-weight: 600; color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.market-more > summary::-webkit-details-marker { display: none; }
.market-more > summary:hover, .market-more[open] > summary { border-color: var(--blue-line); color: var(--blue-deep); background: var(--blue-soft); }
.market-more__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; display: flex; flex-direction: column; gap: 4px; min-width: 176px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); }
.market-more__list .pill { text-align: left; border-color: transparent; }
.market-trash { margin-top: 16px; }
.market-trash > summary { cursor: pointer; font-size: var(--t-note); font-weight: 600; color: var(--ink-2); }
.market-trash .market-list { margin-top: 12px; }
.market-form { max-width: 760px; }
.market-label { display: block; font-size: var(--t-note); font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.market-src { display: inline-flex; gap: 3px; padding: 4px; background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; }
.market-src button { border: 0; border-radius: 7px; padding: 8px 14px; background: transparent; color: var(--ink-3); font: inherit; font-size: var(--t-note); cursor: pointer; }
.market-src button.is-on { background: var(--surface); color: var(--brand-primary); font-weight: 600; box-shadow: var(--shadow-card); }
.market-three { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.market-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 2px 0 12px; padding: 10px 12px; background: var(--brand-primary-soft); border: 1px solid var(--blue-line); border-radius: 10px; font-size: var(--t-note); color: var(--ink-2); }
.market-preview > div { min-width: 0; flex: 1; }
.market-preview b { color: var(--ink); }
.market-preview code { display: block; margin-top: 3px; font-size: var(--t-micro); color: var(--ink-3); overflow-wrap: anywhere; }
.market-preview a { color: var(--blue-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.market-preview a:hover { text-decoration: underline; }
.market-preview a .ic { width: 13px; height: 13px; margin-left: 4px; vertical-align: -2px; }
/* Таблицы отчета (п. 86 описи): раньше .grid с width: max-content растягивал
   карточку, и страница ехала вбок на всех трех ширинах. Теперь прокручивается
   таблица. Рамку и тень держит карточка, у .scroll они сняты - глубина одна.
   Подсказку «Больше показателей справа» ставит workspace.js сам. */
.market-table > .scroll { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.market-table > .scroll-hint { margin-top: 10px; padding: 8px 0 0; border-radius: 0; background: none; }
/* charts.js подписывает левый край шкалы первой точкой - для гистограммы это
   тот же диапазон, что уже стоит под первым столбиком. Дважды одно и то же
   читать незачем, справа остается «всего N». */
.market-chart .chart__scale span:first-child { visibility: hidden; }
/* Подписи диапазонов под столбиками гистограммы цен: charts.js подписывает
   только край шкалы, а без диапазона столбик ничего не значит. Колонок ровно
   столько, сколько столбиков, поэтому подпись стоит под своей. */
.market-chart { margin-bottom: 16px; }
.market-hist { display: grid; gap: 2px; padding: 0 1%; margin-top: 4px; font-size: var(--t-micro); line-height: 1.25; color: var(--ink-3); text-align: center; }
.market-hist span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .market-list__head, .market-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto; }
  .market-row__meta, .market-row__when, .market-list__head span:nth-child(2), .market-list__head span:nth-child(4) { display: none; }
}
@media (max-width: 760px) {
  .market-list__head { display: none; }
  .market-row { display: block; padding: 16px; }
  .market-row > * + * { margin-top: 10px; }
  .market-row__meta, .market-row__when { display: block; }
  .market-row__acts { justify-content: flex-start; }
  .market-more__list { position: static; box-shadow: none; padding: 6px 0 0; }
  .market-three { grid-template-columns: 1fr; }
  .market-src { display: flex; }
  .market-src button { flex: 1; }
  .market-hist { font-size: var(--t-micro); gap: 1px; }
}
.feed__wrap, .grid__box { border-radius: 12px; }
.grid .grid__n { width: 44px; min-width: 44px; max-width: 44px; text-align: center; }
.grid .grid__sw { width: 34px; min-width: 34px; max-width: 34px; text-align: center; }
.grid__box { scroll-padding-inline-start: 78px; }
.grid__box:has(.grid__st) { scroll-padding-inline-start: 208px; }
.bmodal__win, .feed__win { border-radius: 20px; }
.bmodal__head, .feed__winhead { padding: 24px; }
.bmodal__body, .feed__winbody { padding: 24px; }
@media (min-width: 1700px) { .summary-breakdown .ind { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1150px) {
  :root { --side: 208px; --work-pad: 24px; }
  .brandbar { gap: 16px; }
  .side { padding-inline: 12px; }
  .nav button { font-size: var(--t-note); }
  .nav__i { width: 18px; height: 18px; }
  .main { padding: 24px var(--work-pad); }
  .hub { padding-inline: 28px; }
  .hub__head { align-items: flex-start; gap: 24px; }
  .portfolio-stat { padding: 18px; }
  .portfolio-stat__label { font-size: var(--t-micro); }
}
@media (max-width: 960px) {
  .gate { padding: 16px; gap: 0; }
  .gate__brand { flex: none; padding: 24px; border-radius: 16px; }
  .gate__brandin { display: grid; grid-template-columns: 44px 1fr; margin: 0; align-items: center; }
  .gate__story { margin-top: 24px; }
  .gate__story h2 { font-size: 34px; margin: 0; }
  .gate__story p, .gate__workspace, .gate__caption { display: none; }
  .gate__story .eyebrow { display: none; }
  .gate__side { padding: 24px; align-content: start; }
  .gate__card { padding: 24px 0; max-width: 480px; }
  .hub__sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --work-pad: 16px; }
  .app { display: block; }
  /* Столбца нет вовсе: панель выезжает слоем поверх содержимого */
  .app::before { display: none; }
  .brandbar { display: flex; height: var(--brand); min-height: var(--brand); padding: 10px 16px; gap: 12px; flex-wrap: nowrap; }
  .mobile-menu { display: block; min-width: 40px; min-height: 42px; font-size: var(--t-block); border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; }
  .brandbar__logo { width: auto; }
  .brandbar__word, .brandbar__spacer, .workspace-back { display: none; }
  .brandbar__mark { width: 32px; height: 32px; }
  .switch { flex: 1; min-width: 0; max-width: none; width: auto; }
  .switch__name { font-size: var(--t-note); }
  .switch__sub { display: block; font-size: var(--t-micro); }
  .side { display: none; position: fixed; z-index: 35; top: var(--brand); left: 0; width: min(288px, calc(100vw - 32px)); height: calc(100dvh - var(--brand)); background: var(--sidebar-bg); border-right: 0; border-radius: 0; box-shadow: var(--shadow-pop); padding: 20px 14px 16px; }
  .menu-open .side { display: flex; }
  /* Затемнение под выехавшей панелью. Без него темная панель висит над
     читаемым текстом, и на одном экране спорят два разных мира. Размытия
     нет: плоский стиль, и на слабых телефонах оно стоит кадров. Нажатие
     проходит в .work, а он закрывает меню - тем же обработчиком, что был. */
  .menu-open .work::before {
    content: ''; position: fixed; z-index: 34;
    top: var(--menu-top, var(--brand)); right: 0; bottom: 0; left: 0;
    background: var(--sidebar-scrim);
  }
  /* Знак в панели телефону не нужен: он стоит строкой выше, в белой полосе */
  .side__brand { display: none; }
  /* Свежесть данных на телефоне идет своей строкой во всю ширину: знать
     ее здесь важнее всего, а в строке из двух кнопок ей места нет. */
  .stale { flex: 1 1 100%; order: -1; }
  .side .nav { flex-direction: column; overflow: visible; flex-wrap: nowrap; }
  .side .nav button { width: 100%; text-align: left; flex: none; }
  .side .nav__group { display: block; }
  .side .nav__group:empty { display: none; }
  .side .nav__t { white-space: normal; }
  .work { display: flex; width: 100%; }
  .top { position: static; }
  .top__in { padding: 16px var(--work-pad); gap: 12px; }
  .top__tools { margin: 0; width: 100%; gap: 8px; }
  .top__tools .btn { min-height: 40px; font-size: var(--t-note); padding: 8px 10px; }
  .main { padding: 24px var(--work-pad) 48px; }
  .switchpop { left: 8px; right: 8px; width: auto; top: var(--brand); }
  .workspace-intro { margin-top: 0; }
  .summary-panels .block { padding: 16px; }
  .summary-panels .fun { grid-template-columns: 1fr; gap: 20px; }
  .summary-panels .fun > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 24px; }
  .summary-panels .fun > div:last-child { padding-bottom: 0; }
  .summary-breakdown .ind { grid-template-columns: 1fr; }
  .summary-panels .fun__line { margin-top: 6px; }
  .hub { padding: 0 16px 32px; }
  .portfolio-brand { margin-bottom: 24px; min-height: 72px; }
  .portfolio-brand > span { font-size: var(--t-micro); margin-left: 6px; padding-left: 14px; }
  .hub__head { gap: 16px; margin-bottom: 24px; }
  .hub__row { width: 100%; }
  .hub__sum { gap: 10px; margin-bottom: 24px; }
  .portfolio-stat { padding: 16px 12px; }
  .portfolio-stat__label { font-size: var(--t-micro); min-height: 30px; align-items: flex-start; }
  .portfolio-stat strong { margin: 12px 0 8px; }
  .portfolio-stat__note { font-size: var(--t-micro); line-height: 1.5; display: block; }
  .hub__filters { gap: 6px; }
  .hub__flt { min-height: 38px; font-size: var(--t-micro); }
  .hub__searchbox { max-width: none; }
  .hub__tblwrap { max-width: 100%; }
  .gate__side { padding: 20px 8px; }
  .gate .field input { font-size: var(--t-field-mobile); }
  .feed__two { grid-template-columns: 1fr; }
  .tool-onboarding__steps { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) { .gate__workspace { transform: none; } }

/* Общие инструменты сверху, контекст аккаунта ниже. Переключатель стоит над
   своей группой и говорит правду: он меняет разделы аккаунта, а не весь экран.
   Правило пишется через #clientSwitch: у соседей в ui.css вес меньше. */
.nav #clientSwitch { width: 100%; max-width: none; min-width: 0; padding: 9px 10px; margin: 2px 0 8px; background: var(--sidebar-hover); border: 1px solid var(--sidebar-line); border-radius: 10px; color: var(--sidebar-ink); }
.nav #clientSwitch:hover { background: var(--sidebar-selected); border-color: var(--sidebar-selected); }
.nav #clientSwitch[aria-expanded="true"] { border-color: var(--sidebar-mark); }
/* Имя аккаунта в панели 232 обрывалось на середине слова («Ателье
   простран...»), и человек переставал узнавать свой аккаунт. Даем ему две
   строки: обычные названия читаются целиком, а очень длинное обрывается
   после второй строки, когда уже понятно, чей это аккаунт. Многоточие
   ставит сам -webkit-box, overflow: hidden приходит из ui.css. */
.nav #clientSwitch .switch__name { color: #FFFFFF; font-size: var(--t-note); line-height: 1.3; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* Кошелек и аванс под именем аккаунта. В 232 пикселах панели два числа в
   одну строку не встают, поэтому строка переносится: обрезать деньги
   многоточием нельзя, обрезанная сумма врет. */
.nav #clientSwitch .switch__sub { display: block; color: var(--sidebar-muted); font-size: var(--t-micro); white-space: normal; }
.nav #clientSwitch .switch__sub .wallet { font-size: var(--t-micro); line-height: 1.4; color: var(--sidebar-muted); }
.nav #clientSwitch .switch__sub .wallet b { color: #FFFFFF; font-weight: 600; }
/* В 232 пикселах панели тройка в строку не встает никогда, поэтому числа
   идут столбиком, а точка-разделитель убрана: висеть в конце строки ей
   незачем. Белый цвет числа тот же, что у имени аккаунта строкой выше. */
.nav #clientSwitch .switch__sub .wallet__i { display: block; }
.nav #clientSwitch .switch__sub .wallet__x { display: none; }
/* Ободок кружку: на чернильном фоне край синего кружка иначе пропадает.
   Это кольцо, а не глубина: размер и положение оно не меняет. */
.nav #clientSwitch .switch__ava { width: 28px; height: 28px; font-size: var(--t-micro); box-shadow: 0 0 0 1px var(--sidebar-line); }
.nav #clientSwitch .switch__chev { color: var(--sidebar-muted); }
.nav__hint { color: var(--sidebar-muted); font-size: var(--t-note); line-height: 1.6; margin: 4px 10px 8px; }
.switchpop { position: fixed; right: auto; }
.switchpop__scroll { max-height: min(360px, 45vh); }
.context-switch { border: 1px solid var(--line); background: var(--surface); padding: 6px 10px; border-radius: 7px; color: var(--ink-2); font-size: var(--t-note); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.top__title { flex-wrap: wrap; }
/* Переключатель аккаунта стоит в панели, над своей группой, и второй раз в
   верхней строке не нужен. На телефоне он там остается: панель свернута, и
   это единственное место, где при закрытом меню видно, чей аккаунт открыт. */
@media (min-width: 761px) {
  .top__title .context-switch { display: none; }
  /* Тот же уговор, что в ui.css: строки нет вовсе, когда в ней нечего
     показать. Здесь из счета выпадает спрятанный переключатель, иначе на
     «Профиле» осталась бы пустая полоса с линией снизу. */
  .top:not(:has(.top__in > #stale:not(.hidden))):not(:has(.top__in > #pageTitle > :not(.context-switch))):not(:has(.top__tools > :not(.hidden))) {
    display: none;
  }
}
.service-head { margin: 0 0 32px; }
.service-head h1, .service-accounts h1 {
  font-family: var(--display); font-size: var(--t-screen); line-height: var(--t-screen-lh);
  letter-spacing: var(--t-screen-ls); font-weight: var(--t-screen-w); margin: 0 0 8px;
}
.service-head p, .service-note { color: var(--ink-3); font-size: var(--t-text); line-height: var(--t-text-lh); margin: 0; }
.service-panel { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 24px; }
.service-panel h2 { font-size: var(--t-card); margin: 0 0 6px; }
.service-search { display: block; width: 100%; max-width: 420px; margin: 24px 0 10px; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); color: var(--ink); }
.service-account { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.service-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; background: var(--brand-primary-soft); color: var(--brand-primary); border-radius: 10px; font-size: var(--t-note); font-weight: 650; }
.service-account__name { min-width: 0; flex: 1; }
.service-account__name b { display: block; font-size: var(--t-note); font-weight: 600; overflow-wrap: anywhere; }
.service-account__name span { display: block; color: var(--ink-3); font-size: var(--t-micro); margin-top: 2px; }
.service-account .btn { font-size: var(--t-note); min-height: 36px; flex: none; }
.service-manage { margin-top: 24px; background: transparent; color: var(--brand-primary); border: 0; padding: 4px 0; cursor: pointer; font-weight: 600; font-size: var(--t-note); }
.service-empty { padding: 24px 0; color: var(--ink-3); }
/* Шапка раздела лежит на голом холсте: без плашки, без рамки, без картинки
   сбоку. Голубая плашка читалась рекламным баннером внутри рабочего
   инструмента, а иллюстрация в ней рисована прежним голубым, которого в
   палитре давно нет, и спорила с темно-синей кнопкой рядом. Сами
   картинки никуда не делись: они стоят пустыми состояниями тех же
   инструментов (art.js, art-empty-feeds, art-empty-rules, art-empty-items,
   art-empty-section).

   Заголовок разделов сервиса теперь набирается ровно так же, как у разделов
   аккаунта: имя на холсте, под ним подпись, дальше карточки. Один вдох перед
   работой на всех пятнадцати экранах. */
.service-head { display: block; padding: 0; background: none; border: 0; border-radius: 0; margin: 0 0 24px; }
.service-head__copy { min-width: 0; }
.service-head__copy > p { max-width: 74ch; }
/* Кнопка раздела стоит под подписью, а не в одну строку с ней */
.service-head__copy > .btn { margin-top: 16px; }
.service-head__art { display: none; }
.btn, button.pill, .hub__x, .hub__add { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn .ic, .pill .ic, .hub__x .ic, .hub__add .ic { flex: none; margin: 0; }
.head, .sheet__head { align-items: flex-start; gap: 16px; }
.sheet__head p { max-width: 64ch; margin-bottom: 0; }
.head h1, .sheet__head h2 { line-height: 1.2; margin-top: 0; }
.kv { max-width: none; align-items: baseline; }
.kv > span { min-width: 0; overflow-wrap: anywhere; }
.kv > span:last-child { max-width: 65%; }
.card, .tablebox { box-shadow: none; }
.tablebox { margin-bottom: 32px; }
.scroll { scrollbar-width: auto; scrollbar-color: var(--line-strong) var(--sunken); }
.scroll-hint { display: none; padding: 8px 14px; font-size: var(--t-micro); color: var(--ink-3); border-top: 1px solid var(--line); background: var(--sunken); }
.scroll-hint.is-visible { display: block; }
.sortbar { gap: 8px; padding: 12px; }
.sortbar__sel { min-height: 38px; max-width: 100%; }
.sortbar__dir { min-height: 36px; }
.items-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.items-search { width: min(440px, 100%); padding: 11px 13px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; color: var(--ink); }
.items-modes { display: flex; background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; padding: 4px; gap: 3px; }
.items-modes button { border: 0; border-radius: 7px; padding: 8px 12px; color: var(--ink-3); background: transparent; cursor: pointer; font-size: var(--t-note); }
.items-modes button.is-on { background: var(--surface); color: var(--brand-primary); font-weight: 600; }
.items-count { color: var(--ink-3); font-size: var(--t-note); margin: 0 0 16px; }
.items-table--compact table { width: 100%; }
.items-table--compact td:first-child { width: 36%; min-width: 220px; white-space: normal; }
.items-table--compact td { padding: 16px; }
.items-table--compact td a { display: block; font-weight: 550; text-decoration: none; }
.items-table--compact small { display: block; color: var(--ink-3); font-size: var(--t-micro); margin-top: 5px; }
.items-cards { display: none; }
.item-card { padding: 24px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; }
.item-card__meta { font-size: var(--t-micro); color: var(--ink-3); }
.item-card h3 { font-size: var(--t-card); line-height: 1.5; margin: 8px 0 16px; }
.item-card h3 a { color: var(--ink); text-decoration: none; }
.item-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.item-card dt { font-size: var(--t-micro); color: var(--ink-3); }
.item-card dd { font-size: var(--t-block); line-height: var(--t-block-lh); font-weight: var(--t-figure-w); letter-spacing: var(--t-block-ls); margin: 4px 0 0; }
.feed__acts { align-items: center; }
.feed__acts > .pill { min-height: 38px; }
.feed-actions-more { margin-left: auto; position: relative; }
.feed-actions-more > summary { cursor: pointer; color: var(--ink-2); padding: 9px 12px; font-size: var(--t-note); border: 1px solid var(--line); border-radius: 8px; list-style-position: inside; }
.feed-actions-more__list { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; width: 420px; max-width: calc(100vw - 64px); position: absolute; right: 0; top: calc(100% + 8px); z-index: 15; box-shadow: var(--shadow-pop); }
.feed-actions-more:not([open]) > .feed-actions-more__list { display: none; }
.feed-actions-more .feed__more2 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.feed__state:empty { display: none; }
.art__t { font-size: var(--t-card); }
.art__s { color: var(--ink-3); max-width: 48ch; }
.service-accounts { min-width: 0; }
.service-accounts .hub__head { flex-wrap: wrap; }
@media (max-width: 760px) {
  .brandbar__word { display: block; }
  .brandbar__word span { display: none; }
  .brandbar__spacer { display: block; }
  .side { overflow-y: auto; top: var(--menu-top, var(--brand)); height: calc(100dvh - var(--menu-top, var(--brand))); }
  .service-panel { padding: 18px; }
  .service-account { flex-wrap: wrap; gap: 10px; }
  .service-account__name { flex-basis: calc(100% - 48px); }
  .service-account .btn { margin-left: 48px; }
  .service-search { max-width: 100%; font-size: var(--t-field-mobile); }
  .top__title { max-width: 100%; gap: 8px; }
  /* Действие всегда ниже того, к чему относится, и во всю ширину: пальцем в
     кнопку попадают, не целясь. Правило пишется через #view, чтобы не задеть
     шапку диалога: у нее свой .head с крестиком справа. */
  #view > .head, #view > .sheet__head { flex-direction: column; align-items: stretch; }
  #view > .head > .pill, #view > .head > #btnBook, #view > .sheet__head .sheet__tools > .btn { width: 100%; margin-left: 0; }
  .items-search { width: 100%; font-size: var(--t-field-mobile); }
  .items-table--compact { display: none; }
  .items-cards { display: grid; gap: 12px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 16px; min-width: 0; }
  .kpi__k { font-size: var(--t-micro); }
  .kpi__v { overflow-wrap: anywhere; }
  .kpi__s { font-size: var(--t-micro); }
  .feed__acts { gap: 8px; }
  .feed-actions-more { margin-left: 0; }
  .feed-actions-more__list { position: static; max-width: 100%; width: 100%; margin-top: 8px; box-shadow: none; padding: 10px; }
  .feed-actions-more[open] { flex-basis: 100%; }
  .sortbar__k { flex-basis: 100%; }
  .sortbar__sel { flex: 1; min-width: 0; }
  .kv { font-size: var(--t-note); gap: 12px; }
  /* На телефоне поле карточки 16: колонка и так идет с полем 16, и
     24 внутри съедали бы шестую часть ширины экрана. */
  .card { padding: 16px; }
}
/* Account workflows and compact navigation artwork. */
.workflow-dialog{width:min(640px,calc(100vw - 32px));max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:20px;padding:26px;color:var(--ink);background:var(--surface)}
.workflow-dialog::backdrop{background:color-mix(in srgb, var(--ink) 40%, transparent);backdrop-filter:blur(3px)}
.workflow-dialog .head{display:flex;justify-content:space-between;gap:16px;align-items:center}
.workflow-dialog h2{font-size:var(--t-block)}.workflow-dialog select[size]{width:100%;height:200px;margin:10px 0}
.workflow-dialog select[size] option{padding:9px 10px;border-radius:6px}.workflow-dialog>.note{margin-top:12px;line-height:1.6}
.workflow-field{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0;font-size:var(--t-note)}
.workflow-field>input:not([type=checkbox]),.workflow-field>select{min-width:0;width:55%}
.workflow-dialog input,.workflow-dialog select,.telegram-card input,.ad-picker input[type=search]{padding:10px;border:1px solid var(--line);border-radius:9px;font:inherit}
.workflow-field input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand-primary);flex-shrink:0}
.workflow-tables,.telegram-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px;margin-top:24px}
.workflow-table h2,.telegram-card h2{font-size:var(--t-block)}.workflow-table p{overflow-wrap:anywhere}.workflow-table .btn,.telegram-card>.btn{margin:6px 8px 0 0}
.workflow-empty{padding:32px}.workflow-empty p{max-width:650px;line-height:1.7}.workflow-days{display:flex;flex-wrap:wrap;gap:5px;margin:20px 0}
.workflow-days .btn{padding:8px 10px}.workflow-days [aria-pressed=true]{background:var(--brand-primary);color:var(--surface)}
/* Диалог создания таблицы: блок с подписью сверху, поле и список под ней.
   «Категория Авито» - одна вещь: поиск и результаты стоят вместе, поэтому
   подпись одна на оба, а не по подписи на каждое поле. */
.workflow-block{margin:16px 0}
.workflow-block__t{display:block;margin-bottom:8px;font-size:var(--t-note);font-weight:650;color:var(--ink)}
.workflow-block>input[type=search]{display:block;width:100%}
/* Свой список аккаунтов: строка с кружком инициалов, как в переключателе
   аккаунтов наверху. Выбранный - синей обводкой, не заливкой. */
.wf-accs{display:grid;gap:6px;max-height:min(50vh,272px);overflow:auto}
.wf-acc{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;text-align:left;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);font:inherit;color:inherit;cursor:pointer}
.wf-acc:hover{background:var(--sunken)}
.wf-acc:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wf-acc.is-on{border-color:var(--blue-line);background:var(--brand-primary-soft)}
.wf-acc__ava{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;color:#fff;font-size:var(--t-note);font-weight:700}
.wf-acc__lines{min-width:0;display:flex;flex-direction:column}
.wf-acc__name{font-size:var(--t-note);font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-acc__id{font-size:var(--t-micro);color:var(--ink-3)}
/* Telegram: список чатов строками вместо пяти одинаковых форм. Устройство то
   же, что у очереди отчетов: рамка на весь список, строки внутри. Что
   включено и когда - второй строкой, последняя отправка - третьей. */
.telegram-list.telegram-list{display:block;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.tg-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;align-items:center;width:100%;
  padding:14px 20px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-soft);
  font:inherit;color:inherit;cursor:pointer}
.tg-row:last-child{border-bottom:0}
.tg-row:hover{background:var(--sunken)}
.tg-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.tg-row__name{grid-column:1;font-size:var(--t-card);font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.tg-row__what{grid-column:1;font-size:var(--t-note);line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.tg-row__last{grid-column:1;font-size:var(--t-micro);color:var(--ink-3);overflow-wrap:anywhere}
.tg-row__go{grid-column:2;grid-row:1/span 3;color:var(--ink-4);font-size:var(--t-block);line-height:1}
.tg-row--off .tg-row__what{color:var(--ink-3)}
.telegram-list:empty{display:none}
.telegram-list .workflow-empty{border:0;margin:0;box-shadow:none}
.workflow-dialog .bid__days{margin:6px 0 16px}
.ad-picker{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.ad-picker input[type=search]{display:block;width:100%;margin:14px 0}.ad-picker>.btn{margin:0 8px 8px 0}
.ad-picker__rows{max-height:280px;overflow:auto;padding:0 12px;background:var(--brand-primary-soft);border-radius:12px}
.ad-picker__rows .workflow-field{justify-content:flex-start;flex-direction:row-reverse}.ad-picker__rows .workflow-field span{flex:1}
/* Значок голый и берет цвет пункта. Плитки 34 на 34 не стало: на темной
   панели десяток заливок превращался в гирлянду, а рыжая плитка у «Слабых
   мест» обещала беду до того, как беда случилась. */
/* Пункт из двух строк («Управление ставками» на 1024, «Расширение для
   Авито» на всех ширинах) уводил значок к разрыву строк: у флексовой
   кнопки он вставал по центру всей кнопки. Кладем содержимое в сетку -
   строка сама встает по центру кнопки, а значок держится первой строки
   текста. Коробка значка ростом ровно в строку (1.35em - межстрочное из
   .nav__t), сам значок в ней по центру. Правило пишется через #nav и
   [data-full], чтобы не задеть переключатель аккаунта: он тоже кнопка
   внутри .nav, и трех колонок в двухколоночной сетке ему не хватило бы. */
#nav button[data-full]{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;align-content:center}
#nav .nav__icon{display:flex;flex:none;align-items:center;height:1.35em;color:inherit}
/* Карточка расширения стоит во всю колонку, как и остальные карточки
   кабинета: свои 760 делали на широком экране вторую ширину рядом с
   подвалом. Строку держит мера абзаца, а не ширина карточки. */
.extension-card{padding:32px}.extension-card>p{line-height:1.8;max-width:72ch}
/* Шапка раздела без картинки: строку держит мера, а не ширина колонки.
   У соседей («Автозагрузка», «Биддер», «Анализ конкурентов») ее держит
   иллюстрация справа, здесь иллюстрации пока нет, и строка растягивалась
   на всю тысячу с лишним пикселей. */
.extension-head .service-head__copy > p{max-width:96ch}
/* Кнопка отодвинута от абзаца на 10: при фокусе с клавиатуры кольцо
   вылезает на 2 наружу и задевало нижнюю строку текста. */
.extension-install{margin-top:10px}
/* «Что оно умеет»: две колонки на широком экране, столбик на телефоне.
   minmax(0,1fr) и min-width - чтобы длинное слово не растягивало колонку
   и экран не уезжал вбок. Плитка та же .subcard, что и в общем словаре. */
.extension-what{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0 0;padding:0;list-style:none}
.extension-what .subcard{min-width:0}
.extension-what h3{margin:0 0 6px;color:var(--ink);overflow-wrap:anywhere}
.extension-what p{margin:0;color:var(--ink-2);font-size:var(--t-note);line-height:1.6;overflow-wrap:anywhere}
@media(max-width:760px){
/* Единственное действие экрана - установка; на телефоне она во всю ширину,
   как и главные кнопки .head выше по файлу. Поле карточки 16, как у всех
   остальных на телефоне: свое правило нужно только потому, что у карточки
   расширения выше по файлу стоит собственный отступ. */
.extension-install{width:100%}
.extension-what{grid-template-columns:minmax(0,1fr)}
.extension-card{padding:16px}
}
/* Подвал стоит в той же колонке, что содержимое, и краями сходится с
   карточками: ширина считается от --work-max за вычетом полей колонки,
   поэтому линия сверху начинается и кончается там же, где рамка карточки.
   Своих боковых полей у него нет - их держит тот же расчет. */
.site-footer{display:grid;grid-template-columns:minmax(190px,1fr) minmax(300px,1.6fr) auto;gap:18px;align-items:start;width:calc(100% - var(--work-pad) * 2);max-width:calc(var(--work-max) - var(--work-pad) * 2);margin:40px auto 0;padding:24px 0 30px;border-top:1px solid var(--line);color:var(--ink-3);font-size:var(--t-micro)}
.site-footer__brand{display:flex;flex-direction:column;gap:5px}.site-footer__brand b{color:var(--ink);font-size:var(--t-card)}.site-footer__brand span{line-height:1.5;max-width:260px}
.site-footer__links{display:flex;flex-wrap:wrap;gap:8px 18px}.site-footer__links button{border:0;background:none;padding:0;color:var(--ink-3);font:inherit;cursor:pointer;text-align:left}.site-footer__links button:hover{color:var(--brand-primary);text-decoration:underline}
.site-footer__meta{display:flex;flex-direction:column;gap:5px;text-align:right;white-space:nowrap}.legal-dialog{width:min(560px,calc(100vw - 32px));border:1px solid var(--line);border-radius:18px;padding:24px;color:var(--ink);background:var(--surface);box-shadow:0 20px 70px rgba(23,32,51,.18)}.legal-dialog::backdrop{background:rgba(23,32,51,.35)}.legal-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:16px}.legal-dialog h2{font-size:var(--t-block)}.legal-dialog p{margin:18px 0 4px;line-height:1.7;color:var(--ink-2)}
@media(max-width:760px){
/* Телефон: подпись сверху, поле во всю ширину, кегль 16px. Меньше 16px
   телефон при фокусе приближает страницу, и верстка уезжает вбок. Правило
   ui.css сюда не достает: .workflow-dialog input идет позже и с тем же весом. */
.workflow-dialog input:not([type=checkbox]),.workflow-dialog select,.ad-picker input[type=search]{min-height:44px;padding:12px;font-size:var(--t-field-mobile)}
.workflow-field{flex-direction:column;align-items:stretch;gap:6px}
.workflow-field>input:not([type=checkbox]),.workflow-field>select{width:100%}
.workflow-field--check{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
/* Кнопки диалога во всю ширину: пальцем в них попадают, не целясь */
.workflow-dialog>.btn{width:100%;margin-top:8px}
.tg-row{padding:12px 14px}.workflow-block{margin:14px 0}.feed-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible!important;gap:5px}.feed-tabs button{white-space:normal;min-width:0;padding:10px 8px}.workflow-dialog{padding:18px}.workflow-field{gap:10px}.workflow-days{gap:4px}.workflow-days .btn{padding:8px}.workflow-dialog .head h2{font-size:var(--t-block)}}
@media(max-width:760px){.site-footer{display:flex;flex-direction:column;gap:16px;margin-top:28px;padding:22px 0 28px}.site-footer__links{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}.site-footer__meta{text-align:left;white-space:normal;display:flex;flex-wrap:wrap;flex-direction:row;gap:6px 14px}.legal-dialog{padding:18px}}

/* Strict, adult navigation: lightweight line icons instead of character-like art. */
#nav button .nav__t{white-space:normal;line-height:1.35;overflow:visible;text-overflow:clip}