/* Панель как окно на рабочем столе.
   Подключается после liquid-glass.css и theme-light.css: меняет только
   обрамление оболочки, геометрию разделов и материал поверхностей внутри
   неё не трогает.

   Приём взят из промо-страниц настольных приложений: окно со светофором и
   заголовочной полосой лежит на цветной подложке, отступив от её краёв.
   Здесь он уместен буквально — панель и есть рабочее окно продавца, открытое
   весь день, и рамка отделяет его содержимое от фона, который продавец
   выбирает сам.

   Рамка живёт на уже существующем .app-shell, а не на новой обёртке:
   вкладки, диалоги и чат ищут свои узлы по .main и .sidebar, и лишний слой
   между ними сломал бы позиционирование. */

:root{
 /* Поля вокруг окна. На широком экране окно отступает заметно, на узком
    прижимается к краям: там каждый пиксель ширины нужен содержимому. */
 --desk-gap:clamp(14px,1.8vw,26px);
 --desk-radius:18px;
 --desk-bar:38px;
 --desk-light-red:#ff5f57;
 --desk-light-amber:#febc2e;
 --desk-light-green:#28c840;
}

/* --- Подложка под окном ---
   Тот же кобальтовый свет, что на главной странице до входа: панель
   открывается из лендинга, и переход не должен менять мир вокруг.
   Градиент лежит на :root, а не на body: body внутри окна прокручивается
   вместе с содержимым, и фон уезжал бы из-под рамки. */
:root:has(#app:not([hidden])){
 background:
   radial-gradient(70% 48% at 18% 0%,rgba(59,130,246,.3),rgba(59,130,246,0) 68%),
   radial-gradient(64% 46% at 88% 8%,rgba(30,64,175,.34),rgba(30,64,175,0) 70%),
   radial-gradient(80% 60% at 50% 108%,rgba(37,99,235,.2),rgba(37,99,235,0) 72%),
   #070910;
 background-attachment:fixed;
}
:root[data-theme="light"]:has(#app:not([hidden])){
 background:
   radial-gradient(70% 48% at 18% 0%,rgba(147,197,253,.5),rgba(147,197,253,0) 68%),
   radial-gradient(64% 46% at 88% 8%,rgba(165,180,252,.42),rgba(165,180,252,0) 70%),
   radial-gradient(80% 60% at 50% 108%,rgba(191,219,254,.45),rgba(191,219,254,0) 72%),
   #e8edf6;
 background-attachment:fixed;
}
/* Сам body прозрачен: иначе его заливка из liquid-glass.css и theme-light.css
   закрыла бы подложку целиком. Поля вокруг окна задаёт он же — так рамка
   отступает от краёв экрана, оставаясь одним прямоугольником. */
body:has(#app:not([hidden])){
 background:none;
 padding:var(--desk-gap);
}
/* Пятна градиента, выбранные продавцом, переезжают наружу окна и становятся
   самими обоями рабочего стола. Внутри они спорили с содержимым: панель
   открыта весь день, и цвет в ней должен приходить от данных. Снаружи тот же
   выбор продолжает работать — он окрашивает подложку вокруг окна.
   mix-blend-mode снимается: пятна лежат на собственной тёмной подложке, а не
   поверх поверхностей, и экранное смешивание выбеливало бы их до молока. */
body:has(#app:not([hidden])) .mesh-field{z-index:0}
body:has(#app:not([hidden])) .mesh-field>span{mix-blend-mode:normal;opacity:.5}
:root[data-theme="light"] body:has(#app:not([hidden])) .mesh-field>span{
 mix-blend-mode:normal;opacity:.55}

/* --- Само окно --- */
#app.app-shell{
 position:relative;
 /* Собственная подложка окна. Без неё пятна обоев просвечивали сквозь
    полупрозрачные поверхности и красили таблицы и карточки: в панели,
    открытой весь день, цвет должен приходить от данных, а не от фона.
    Непрозрачность неполная — обои под краями окна остаются различимы, и
    стекло читается как стекло, а не как вырезанный прямоугольник. */
 background:color-mix(in srgb,var(--bg) 88%,transparent);
 /* Содержимое прокручивается внутри окна, поэтому высота фиксируется по
    экрану за вычетом полей. min-height:100vh из styles.css дал бы окно выше
    экрана, и нижний край рамки оказался бы за его пределами. */
 min-height:0;
 height:calc(100dvh - var(--desk-gap) * 2);
 /* Полоса окна лежит отдельной строкой над меню и содержимым: так заголовок
    и светофор не наезжают ни на то, ни на другое. */
 display:grid;
 /* Первая колонка — меню. max-content берёт его собственную ширину из
    styles.css (240 px, ниже 1150 px — 210 px), поэтому адаптив работает
    по-прежнему и здесь ничего дублировать не нужно. */
 grid-template-columns:max-content minmax(0,1fr);
 grid-template-rows:var(--desk-bar) minmax(0,1fr);
 border-radius:var(--desk-radius);
 overflow:hidden;
 border:1px solid rgba(255,255,255,.14);
 box-shadow:
   inset 0 1px 0 rgba(255,255,255,.16),
   0 2px 8px rgba(5,10,22,.3),
   0 28px 80px rgba(5,10,22,.5);
}
:root[data-theme="light"] #app.app-shell{
 border-color:rgba(18,28,48,.1);
 box-shadow:
   inset 0 1px 0 rgba(255,255,255,.8),
   0 2px 8px rgba(18,28,48,.08),
   0 28px 80px rgba(18,28,48,.18);
}

/* --- Полоса окна --- */
.window-bar{
 grid-column:1 / -1;
 position:relative;
 display:flex;
 align-items:center;
 gap:10px;
 padding:0 14px;
 background:color-mix(in srgb,var(--surface) 62%,transparent);
 border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
 backdrop-filter:blur(22px) saturate(160%);
 -webkit-backdrop-filter:blur(22px) saturate(160%);
}
.window-lights{display:flex;gap:8px;flex-shrink:0}
.window-lights>i{
 width:12px;height:12px;border-radius:50%;display:block;
 /* Внутренний кант делает кружок выпуклым: плоские круги читаются как метки
    состояния, а не как кнопки окна. */
 box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18),inset 0 1px 1px rgba(255,255,255,.4);
}
.window-lights>i:nth-child(1){background:var(--desk-light-red)}
.window-lights>i:nth-child(2){background:var(--desk-light-amber)}
.window-lights>i:nth-child(3){background:var(--desk-light-green)}
/* Заголовок строго по центру окна, а не по центру оставшегося места: иначе
    светофор слева сдвигал бы его вправо. */
.window-title{
 position:absolute;left:50%;transform:translateX(-50%);
 max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font-size:calc(var(--text-12) * var(--font-scale));
 font-weight:500;color:var(--ink-secondary,var(--muted));
}

/* --- Меню и содержимое внутри окна ---
   Боковая панель перестаёт быть position:fixed: внутри окна она обычная
   колонка сетки, и прибитый к экрану блок вылезал бы за рамку. */
#app .sidebar{
 position:static;
 grid-row:2;
 /* Ширина не задаётся: её уже ставит styles.css — 240 px, а ниже 1150 px
    210 px. Повтор здесь отменил бы это сужение, и на 1024 px меню съедало бы
    у таблицы лишние 30 px. */
 height:auto;
 min-height:0;
 padding:14px 12px 12px;
 overflow-y:auto;
 border-right:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
}
/* Логотип уже назван в полосе окна и в заголовке раздела: третий раз он
   только отнимал бы высоту у списка разделов. */
#app .sidebar .brand{display:none}
#app .sidebar .nav-heading{margin-top:4px}
/* Пункты меню в духе боковых панелей системы: плотнее, с мягким скруглением
   и без собственной рамки. Прежде каждый пункт был отдельной стеклянной
   плиткой с кантом (liquid-glass.css): одиннадцать рамок подряд читались как
   одиннадцать кнопок, и выбранный раздел терялся среди них. Теперь фон и
   рамку получает только выбранный, остальные — простые строки списка. */
/* Зазор между пунктами — 6 px: меньше набор native.test.cjs считает дефектом,
   и справедливо. Соседние строки списка без просвета сливаются в одну
   мишень, и промах по разделу стоит лишнего перехода. */
#app .navigation{gap:6px}
#app .nav-item{
 min-height:32px;padding:6px 10px;border-radius:8px;gap:9px;
 background:transparent;border-color:transparent;box-shadow:none;
}
/* Наведение не трогает выбранный раздел: курсор остаётся на пункте после
   щелчка, и подсветка наведения перекрывала бы акцентную заливку — выбранный
   раздел выглядел бы невыбранным, пока мышь не уехала. */
@media(hover:hover){
 :root[data-theme="light"] #app .nav-item:hover:not(:disabled):not(.selected),
 #app .nav-item:hover:not(:disabled):not(.selected){
  background-color:color-mix(in srgb,var(--ink) 7%,transparent);
  border-color:transparent;box-shadow:none;
 }
}
/* Выбранный раздел — плотная акцентная заливка с белой подписью, как активная
   строка системного списка. Полупрозрачный акцент на светлой теме давал почти
   белую плитку: раздел приходилось искать глазами. */
/* Цвет подписи берётся из --primary-ink: он подобран под каждый акцент в
   customization.css. Запасного #fff здесь нет намеренно — на оранжевом
   акценте по умолчанию белый даёт 2.58, а токен даёт 6.38.
   Селектор повторяет тему: в theme-light.css выбранный пункт красится белым
   (:root[data-theme="light"] .nav-item.selected), и без равной специфичности
   на светлой теме получалась белая плитка на белом меню. */
/* Саму заливку рисует слой .nav-item::after (motion.css): подсветку нужно
   провести между двумя разными пунктами, а заливку одного узла в другой не
   перевести. Здесь остаётся только цвет подписи. */
:root[data-theme="light"] #app .nav-item.selected,
#app .nav-item.selected{
 background-color:transparent;
 border-color:transparent;
 color:var(--primary-ink);
 box-shadow:none;
}
/* Значок выбранного пункта берёт цвет подписи, а не акцента: на залитой
   плашке акцентный значок совпадал с её фоном и исчезал. Селектор не может
   быть `>svg` — значок обёрнут в <span data-icon>, и прямым потомком не
   является. */
:root[data-theme="light"] #app .nav-item.selected svg,
#app .nav-item.selected svg,
:root[data-theme="light"] #app .nav-item.selected [data-icon],
#app .nav-item.selected [data-icon]{color:currentColor}
:root[data-theme="light"] #app .nav-item.selected .nav-count,
#app .nav-item.selected .nav-count{
 background:color-mix(in srgb,var(--primary-ink) 24%,transparent);
 color:var(--primary-ink);
}
/* Кнопки под списком — такие же тихие строки, пока на них не наведён курсор. */
#app .sidebar .panel-control{background:transparent;border-color:transparent;box-shadow:none}
@media(hover:hover){
 #app .sidebar .panel-control:hover:not(:disabled){
  background-color:color-mix(in srgb,var(--ink) 7%,transparent);border-color:transparent;
 }
}

/* Чат считает свою высоту от экрана (78dvh в messenger.css), а внутри окна
   столько места нет: поля с двух сторон, полоса заголовка, заголовок раздела
   и строка выбора аккаунта над ним — переписка уходила под нижний край рамки.
   Высота области содержимого известна только во время работы, поэтому её
   меряет скрипт и кладёт в --app-main-height; CSS вычитает то, что лежит над
   чатом внутри этой области. Запасное значение на случай, если скрипт ещё не
   отработал, повторяет прежнюю долю экрана. */
#app .chat-layout{
 height:min(800px,calc(var(--app-main-height,78dvh) - var(--chat-offset,0px) - 20px));
}

#app .main{
 grid-row:2;
 margin-left:0;
 width:auto;
 max-width:none;
 min-width:0;
 /* Прокручивается содержимое, а не страница: заголовочная полоса и меню
    остаются на месте, как в настоящем окне. */
 overflow-y:auto;
 padding:24px 26px 20px;
}

/* --- Узкие экраны ---
   Ниже 850 px styles.css раскладывает оболочку в столбец (display:block),
   меню становится горизонтальной лентой. Рамка окна там мешает: полей по
   22 px с каждой стороны стоят 44 px ширины, а прокрутка внутри окна на
   телефоне спорит с жестом «потянуть вниз». Поэтому окно раскрывается во
   весь экран, а полоса со светофором прячется. */
@media(max-width:850px){
 body:has(#app:not([hidden])){padding:0}
 body:has(#app:not([hidden])) .mesh-field{inset:0;border-radius:0}
 #app.app-shell{
  display:block;height:auto;min-height:100dvh;
  border:0;border-radius:0;box-shadow:none;
 }
 .window-bar{display:none}
 #app .sidebar{width:100%;overflow:visible;border-right:0}
 #app .sidebar .brand{display:flex}
 #app .main{overflow:visible;padding:26px 22px}
}

/* Прозрачности пользователь мог отключить: тогда полоса окна становится
   плотной, а не мутной. */
@media(prefers-reduced-transparency:reduce){
 .window-bar{
  background:var(--surface);
  backdrop-filter:none;-webkit-backdrop-filter:none;
 }
}

/* ==========================================================================
   Внутренность окна в том же языке, что и его рамка.
   ==========================================================================

   Рамка сделана 1 ноября; содержимое под ней осталось прежним — стеклянные
   плитки с глянцевым бликом, цветные значки у показателей, капс в подписях,
   одиннадцать размеров значков. Снаружи окно системы, внутри — вкладка сайта.

   Этот блок приводит содержимое к той же мере:

   — шаг 4 px везде, где раньше стояли 13, 17, 19, 21, 37 и 39;
   — хром держится на нейтральной ступени и одном акценте, цвет остаётся
     данным: балансам, состояниям, графику;
   — значки одного размера с одним шагом до подписи;
   — подписи строчными, вес 400–500, иерархия размером и цветом;
   — движение отвечает на действие и нигде не зациклено.

   Слой идёт последним, поэтому правила выше он только уточняет: ни один файл
   из стопки не переписан, и отключение этого файла возвращает прежний вид. */

/* --- 1. Отступы: один шаг внутри окна --- */
/* Шапка таблицы и ячейки стояли на 13/17 и 20/17 — числа не из шкалы.
   Высота строки от этого гуляла между соседними таблицами. */
#app th{padding:12px 16px}
#app td{padding:16px}
@media(min-width:1550px){#app .account-table td{padding:20px 24px}#app .account-table th{padding:12px 24px}}
/* Подпись раздела: 24 сверху к предыдущей группе, 8 снизу к своим пунктам. */
#app .sidebar .nav-heading{margin:24px 12px 8px}
#app .sidebar>.brand+.nav-heading{margin-top:0}
/* Нижний блок меню: равные промежутки вместо 16/19/20 вразнобой. */
#app .panel-controls{margin:16px 0;padding-top:12px}
#app .panel-control{padding:8px 10px;min-height:32px;gap:10px;border-radius:8px}
#app .connection-card{padding:12px;margin-bottom:16px;border-radius:10px}
#app .user-bar{padding:16px 4px 0}
/* Аватар и поле поиска: 36 вместо 37, 40 вместо 39 — оба попадают на шаг. */
#app .avatar{width:36px;height:36px}
#app .account-cell .avatar{width:44px;height:44px;min-width:44px}
#app .search-box input{padding-left:40px}
#app .event-row{padding:16px 20px;gap:12px}

/* --- 2. Цвет: тихий хром, цвет остаётся данным --- */
/* Стеклянная кнопка несла собственную заливку, кант, внутренний блик, тень и
   размытие — пять слоёв у каждой из полусотни кнопок на экране. Остаётся
   поверхность на ступень выше фона и волосяная линия. */
#app :is(button.button,button.icon-button,button.panel-control,
         button.account-name,button.dialog-item),#app .file-label{
 background:var(--surface-soft);
 background-image:none;
 border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
 box-shadow:none;
 backdrop-filter:none;-webkit-backdrop-filter:none;
}
/* Глянцевая плёнка поверх каждой кнопки (workspace.css рисует её в ::before,
   liquid-glass.css перекрашивает). Именно она делала интерфейс «мокрым». */
#app button::before,#app .file-label::before{display:none}
@media(hover:hover){
 #app :is(button.button,button.icon-button,button.panel-control,
          button.account-name,button.dialog-item):hover:not(:disabled),
 #app .file-label:hover{
  background:var(--surface-hover);
  border-color:color-mix(in srgb,var(--ink) 16%,transparent);
  box-shadow:none;
 }
}
/* Главная кнопка: плотный акцент без цветного свечения под ним. Свечение
   повторяло цвет кнопки на подложке и читалось как подсветка ошибки. */
#app button.primary{
 background:var(--accent);
 background-image:none;
 border-color:transparent;
 color:var(--primary-ink);
 box-shadow:none;
}
@media(hover:hover){#app button.primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:none}}
/* Карточки и панели: та же ступень, тот же волос. Прежде панель несла
   полупрозрачную заливку, кант, внутренний блик и две тени сразу. */
#app :is(.panel,.stat-card,.module-card,.seller-widget,.seller-row,
         .seller-metric,.chart-card,.settings-category,.rule-editor,
         .proxy-box,.balance-mini,.switch-row,.notification-rules){
 background:var(--surface);
 border:1px solid var(--border);
 box-shadow:none;
 backdrop-filter:none;-webkit-backdrop-filter:none;
}
#app :is(.panel .panel,.module-card .panel,.settings-category .rule-editor,
         .panel .keyword-condition,.modal .panel){
 background:var(--surface-soft);box-shadow:none;
}
@media(hover:hover){
 #app :is(.panel,.stat-card,.module-card,.seller-widget,.chart-card):hover{
  box-shadow:none;border-color:color-mix(in srgb,var(--ink) 16%,transparent);
 }
}
/* Поля ввода: вдавленная тень снята — на плоской поверхности она читалась
   как полоса грязи вдоль верхнего края.

   Переключатели из правила исключены. Тумблер — это input[type=checkbox] с
   role=switch, и он попадал под «поля ввода» целиком: заливка подменялась на
   --surface-soft и в выключенном, и во включённом состоянии, то есть цвет
   вообще переставал меняться. Выиграть своим правилом он не мог —
   `input[role=switch]:checked` (customization.css:56) весит 0,2,1 против
   1,0,1 у этого селектора: идентификатор сильнее любого числа атрибутов.
   Рядом, в правиле радиусов ниже, поля уже отбираются так же — через :not(). */
#app :is(input:not([role=switch]),textarea,select){
 background:var(--surface-soft);
 border:1px solid var(--field-border);
 box-shadow:none;
 backdrop-filter:none;-webkit-backdrop-filter:none;
}
#app :is(input:not([role=switch]),textarea,select):focus{
 background:var(--surface);
 border-color:var(--accent);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
/* Шапка таблицы — ступень поверхности, а не отдельное стекло. */
#app thead{background:var(--surface-soft);backdrop-filter:none;-webkit-backdrop-filter:none}
#app .status-pill,#app .notice{backdrop-filter:none;-webkit-backdrop-filter:none}
/* Диалог: окно над окном. Тень остаётся — он действительно висит над
   содержимым, — но нейтральная и без канта в три слоя. */
#app~dialog.modal,dialog.modal{
 background:var(--surface);
 border:1px solid var(--border);
 box-shadow:0 24px 64px rgba(5,10,22,.38);
 backdrop-filter:none;-webkit-backdrop-filter:none;
}
:root[data-theme="light"] dialog.modal{box-shadow:0 20px 56px rgba(18,28,48,.16)}
dialog.modal::backdrop{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* --- 3. Значки: один размер, один столбец --- */
/* Было одиннадцать размеров: 13, 14, 15, 17, 18, 19, 20, 21, 22, 23 и 34.
   Остаются два — 18 в строках и кнопках, 32 в пустом состоянии, где значок
   сам является содержимым. */
/* 20, а не 18: на 18 внутренние просветы значка — прорезь в шестерне, полоски
   в коробке — опускаются ниже пикселя и замыливаются. Два лишних пикселя дают
   просветам целую точку и возвращают деталь. */
#app svg.icon,#app .icon-button svg,#app .button svg,
#app .panel-control .icon,#app .connection-card>svg,
#app .settings-heading .icon,#app .notification-rule>.check-label .icon,
#app .search-box>[data-icon]>svg,#app .footnote svg,#app .event-icon svg{
 width:20px;height:20px;flex-basis:20px;
}
#app .empty-icon svg{width:32px;height:32px}
#app .metric-trend svg.icon{width:14px;height:14px;flex-basis:14px}
/* Одинаковая ширина значковой клетки в строках списка: подписи выстраиваются
   в один столбец независимо от того, какой значок достался пункту. */
#app .nav-item>[data-icon],#app .panel-control>[data-icon]{width:20px;justify-content:center}
#app .nav-item,#app .panel-control{gap:10px}
/* Оптический размер против геометрического. Клетка значка у всех пунктов одна —
   20 px, — но рисунки заполняют её по-разному, и равный размер в пикселях
   выглядит неравным. Монитор рабочего места и круг статистики заливают почти
   весь квадрат и рядом с остальными казались крупнее; кольцо «Клиентов» занято
   своим контуром, внутри воздух, и на общем размере оно читалось мельче. Клетка
   не меняется — меняется только сам рисунок внутри неё, поэтому столбец
   подписей остаётся ровным. */
#app .nav-item[data-tab="seller"]>[data-icon]>svg.icon{
 width:17px;height:17px;flex-basis:17px;
}
#app .nav-item[data-tab="clients"]>[data-icon]>svg.icon{
 width:23px;height:23px;flex-basis:23px;
}
/* Круг статистики возвращён к общему размеру клетки — 20 px, как у «Чатов», —
   по прямой просьбе. Оптическая поправка на 17 px снята вместе с подгонкой
   штриха: на 20 px рисунок масштабируется вместе с толщиной 3 из сетки 24 и
   даёт те же 2.5 px, что у соседей, так что отдельное правило не нужно.
   Монитор рабочего места остаётся на 17 px — его не просили менять. */
/* Пустое состояние: значок без цветной плитки под ним. Плитка была четвёртой
   поверхностью подряд и притягивала взгляд к заглушке. */
#app .empty-icon{
 width:auto;height:auto;background:none;border-radius:0;
 color:var(--muted);margin-bottom:12px;
}

/* --- 4. Тип: системная гарнитура внутри окна --- */
/* Montserrat — геометрический дисплейный шрифт: в заголовке лендинга он
   уместен, в таблице из девяти колонок цифры в нём шире и ниже строки.
   Внутри окна интерфейс набирается тем же шрифтом, что и остальная система,
   с Inter как запасным — он уже загружен локально. */
#app{
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Inter,Roboto,sans-serif;
 letter-spacing:0;
}
/* Заголовок страницы: 28 с небольшим поджатием вместо 32 с -.4px.
   Иерархию держат размер и цвет, а не вес. */
#app .page-header h1{font-size:calc(28px * var(--font-scale));font-weight:500;letter-spacing:-.01em}
#app h2{font-weight:500;letter-spacing:-.005em}
#app h3{font-weight:500}
#app .settings-category>summary{font-weight:500}
#app :is(label,.switch-row strong,.event-row strong,.order-title,
         .connection-card strong,.notification-popup strong){font-weight:500}
#app .account-name{font-weight:500}
#app .reputation-badge{font-weight:400}
/* Малый текст без отрицательного трекинга и без капса. */
#app .nav-heading{text-transform:none;letter-spacing:0;font-size:calc(var(--text-12) * var(--font-scale))}
#app .stat-heading{letter-spacing:0;font-weight:400}
#app .stat-card>strong{letter-spacing:-.01em;font-weight:500}
/* Крупные числа плиток показателей — Syncopate 700. Шрифт широкий и
   геометрический: его знаки заметно шире Montserrat, поэтому отрицательный
   трекинг снимается, иначе цифры наезжали бы друг на друга.

   Кириллицы у Syncopate нет, и это определяет границы правила: оно
   назначается только самим числам (<strong> внутри плитки), где бывают лишь
   0–9, пробел, запятая и ₽. Подписи и заголовки плиток остаются в
   Montserrat — русские буквы там подменились бы запасным шрифтом.

   Знак рубля лежит в U+20BD, то есть в наборе latin-ext: он подключён
   вторым файлом в fonts.css. Прочерк «—» (U+2014) приходит из latin. */
#app .stats-grid>.stat-card>strong{
 font-family:Syncopate,var(--font-sans);
 font-weight:700;
 letter-spacing:0;
}
#app .empty-state h3,#app h2{letter-spacing:-.01em}
/* Цифры одной шириной во всех местах, где они сравниваются взглядом. */
#app :is(.stat-card>strong,.cell-value,.orders-count,.nav-count,.balance-mini strong,
         .seller-metric strong,.extra-metric strong,.metric-trend,td .mono){
 font-variant-numeric:tabular-nums;
}

/* --- 5. Детали: вложенные радиусы и тихие счётчики --- */
/* Карточка 16 с полем 16 держит внутри 8; кнопка и поле — 8; мелкая метка — 6.
   Прежде всё подряд было 10, а счётчики — пилюлями. */
#app :is(.button,.icon-button,.panel-control,.nav-item,.dialog-item,
         input:not([type=checkbox]):not([type=range]):not([type=color]),
         select,textarea,.file-label,.switch-row,.rule-editor){border-radius:8px}
#app :is(.count-chip,.nav-count,.orders-count,.proxy-chip,.status-pill,
         .optional-chip,.metric-trend){border-radius:6px}
/* Счётчик раздела — число, а не плашка: подсвеченная пилюля у каждого пункта
   меню соревновалась с выбранным разделом. */
#app .nav-count{
 background:none;padding:0;min-width:0;margin-left:auto;
 color:var(--muted);font-variant-numeric:tabular-nums;
}
#app .nav-item.selected .nav-count{background:none;color:inherit;opacity:.8}
#app .count-chip{background:none;padding:0;color:var(--muted);margin-left:6px}
/* Показатель роста — текст со знаком, а не заливка. Четыре зелёные и красные
   плашки в ряду карточек читались как четыре тревоги. */
#app .metric-trend{background:none;padding:0;font-weight:400;gap:4px}
/* Раскрытие раздела: шевронь вместо полноширинных ＋ и −. Знаки приходили из
   другой гарнитуры и стояли выше строки. */
#app .settings-category>summary::after{
 content:"";width:9px;height:9px;flex-shrink:0;
 border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
 transform:rotate(45deg);margin-top:-4px;color:var(--muted);font-size:0;
}
#app .settings-category[open]>summary::after{content:"";transform:rotate(225deg);margin-top:2px}
/* Полоса запаса: одна ступень акцента и две смысловые — мало и пусто.
   Прежде цвет считался как hsl(0…120) и полоса меняла оттенок непрерывно,
   обещая шкалу там, где есть только «хватает» и «кончается». */
#app :is(.storage-bar,.stock-gauge-track){background:var(--surface-hover);border-radius:4px;overflow:hidden}
#app :is(.storage-bar-fill,.stock-gauge-fill){background-color:var(--accent)!important;border-radius:4px}
#app .stock-gauge.warning .stock-gauge-fill{background-color:var(--wait-ink)!important}
#app .stock-gauge.danger .stock-gauge-fill{background-color:var(--bad-ink)!important}

/* --- 5a. Аватарки: одна плитка вместо синего градиента --- */
/* Все аватарки были одним градиентом #5ab4f1 → #4384dd с !important в
   telegram.css: четыре тона из styles.css не доходили, и список диалогов терял
   единственный признак, по которому строки различались до прочтения имени.
   Тон теперь приходит из avatarTone() по идентификатору и остаётся за
   собеседником постоянным.

   Два набора вместо одного: на светлом фоне нужен насыщенный тон с белой
   монограммой, на тёмном — светлый тон с тёмной. Один набор не укладывается в
   оба требования сразу — насыщенный тон на тёмной поверхности даёт 2.3 к фону,
   светлый на белой даёт 1.9 под монограммой. Контраст посчитан: монограмма от
   5.16, плитка к поверхностям окна от 6.71. */
#app .avatar{
 --avatar-tone:#1266CC;--avatar-ink:#fff;
 background:var(--avatar-tone)!important;color:var(--avatar-ink);
 font-weight:590;letter-spacing:.01em;line-height:1;
 /* Монограмма из двух букв в кружке 36 px не переносится и не растягивает
    строку, если имя оказалось длинным. */
 overflow:hidden;white-space:nowrap;
}
#app .avatar-0{--avatar-tone:#1266CC}
#app .avatar-1{--avatar-tone:#574ECA}
#app .avatar-2{--avatar-tone:#9A34BC}
#app .avatar-3{--avatar-tone:#C62C57}
#app .avatar-4{--avatar-tone:#0F7489}
#app .avatar-5{--avatar-tone:#1C7A48}
#app .avatar-6{--avatar-tone:#A85812}
#app .avatar-7{--avatar-tone:#BE392F}
:root[data-theme="dark"] #app .avatar{--avatar-ink:#10151d}
:root[data-theme="dark"] #app .avatar-0{--avatar-tone:#8FC2FF}
:root[data-theme="dark"] #app .avatar-1{--avatar-tone:#B9B5FF}
:root[data-theme="dark"] #app .avatar-2{--avatar-tone:#E2A7F3}
:root[data-theme="dark"] #app .avatar-3{--avatar-tone:#FFA8BE}
:root[data-theme="dark"] #app .avatar-4{--avatar-tone:#8ED6E6}
:root[data-theme="dark"] #app .avatar-5{--avatar-tone:#8FDCAE}
:root[data-theme="dark"] #app .avatar-6{--avatar-tone:#FFC98A}
:root[data-theme="dark"] #app .avatar-7{--avatar-tone:#FFAFA6}
/* Снимок перекрывает плитку целиком, поэтому тон под ним не виден, а белая
   монограмма не просвечивает сквозь полупрозрачный PNG. */
#app .avatar>img{width:100%;height:100%;object-fit:cover;display:block}
/* Силуэт-заглушка занимает долю кружка, а не 18 px общего размера значков:
    иначе в аватаре 54 px он выглядел точкой по центру. */
#app .avatar>svg.icon{
 width:62%;height:62%;flex-basis:auto;opacity:.92;
}
/* Размер монограммы следует за кружком. Кегль 13 был один на все аватарки, и
   в крупных буквы плавали в пустоте. Размеры здесь — те, что действительно
   применяются: #app .avatar перебивает по специфичности классовые правила
   messenger.css, поэтому кружок в списке диалогов равен базовым 36, а не 54. */
#app .avatar{font-size:14px}
#app .account-cell .avatar{font-size:17px}
#app .chat-layout .dialog-item .avatar{width:44px;height:44px;min-width:44px;font-size:17px}
#app .chat-thread>header>.avatar{width:36px;height:36px;min-width:36px;font-size:14px}
@media(max-width:720px){
 #app .chat-layout .dialog-item .avatar{width:40px;height:40px;min-width:40px;font-size:16px}
 #app .chat-thread>header>.avatar{width:32px;height:32px;min-width:32px;font-size:13px}
}

/* --- 6. Движение --- */
/* Выбранный переключатель был увеличен на 3% постоянно: это не движение, а
   лишний размер — соседние варианты выглядели сжатыми. */
#app :is(.zone-option,.period-option)[aria-pressed="true"],
#app :is(.zone-option,.period-option).selected{transform:none}
/* Отклик на нажатие остаётся: он отвечает на действие. */
#app button:active:not(:disabled){transform:scale(.98)}

/* --- 7. Баланс и сетка показателей --- */
/* Плиток стало три вместо четырёх: «Аккаунты включены» убрана. Жёсткие четыре
   колонки растянули бы последнюю на пустое место. */
#app .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){#app .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#app .stats-grid{grid-template-columns:1fr}}
/* Доступная к выводу сумма — единственное число на экране, которое означает
   деньги в руках. Зелёный здесь семантический: он отделяет её от прочих
   счётчиков. Оттенок берётся свой в каждой теме: на светлой подложке яркий
   зелёный даёт меньше 4.5 : 1 и его приходится гасить. */
#app #stat-balance{color:#3ddc84}
:root[data-theme="light"] #app #stat-balance{color:#12794a}

/* --- 8. Кнопка покупки прокси --- */
/* Ссылка на продавца прокси лежала строкой мелкой подсказки внутри абзаца, и
   на неё не нажимали: подсказку взгляд пропускает. Теперь это кнопка со своей
   целью нажатия. Акцентной она не сделана намеренно — главное действие формы
   остаётся «Сохранить», а покупка прокси лишь один из путей её заполнить.
   Правила кнопок выше написаны на `button.button`; здесь элемент — ссылка,
   поэтому поверхность задаётся своим правилом. */
.proxy-buy-row{margin:var(--space-3) 0}
/* Без префикса `#app`: диалог аккаунта — <dialog> в конце документа, за
   пределами оболочки, и правило с этим префиксом до него не доставало.
   Заливка акцентом, а не контур: контурный вариант в тёмной теме вставал в
   ряд с «Проверить подключение» и «Собрать URL» — одинаковая тёмная плашка
   среди таких же, и кнопка снова терялась. Плотный акцент отделяет её от
   служебных действий формы: это единственная ссылка наружу. */
a.button.proxy-buy{
 display:inline-flex;align-items:center;gap:8px;
 min-height:var(--action-height,38px);padding:0 16px;
 background:var(--accent);
 background-image:none;
 border:1px solid transparent;
 border-radius:var(--radius,10px);
 color:var(--primary-ink);
 font-weight:500;text-decoration:none;
 box-shadow:none;
}
@media(hover:hover){
 a.button.proxy-buy:hover{background:var(--accent-hover);border-color:transparent}
}
a.button.proxy-buy:active{transform:scale(.98)}