/* ============================================================================
   Kapifolio — стили приложения.
   Источник правды — макет web/demo/botscan.html (задача 0010, раздел 5):
   палитра, радиусы, кегли, формы кнопок и чипов, шапка — значениями макета,
   буквально. Решение задачи 0007 «жёлтого в интерфейсе нет» отменено автором
   14.10.2026: акцент — жёлтый #FFD633 макета. Не менять на глаз.

   Порядок разделов:
     1. Токены
     2. База и типографика
     3. Каркас: шапка, полосы состояния, экраны, навигация
     4. Панели, плитки, метрики
     5. Управление: кнопки, чипы, поля, тумблеры
     6. Компоненты экранов
     7. Состояния: скелетон, пусто, ошибка, оффлайн, демо
     8. Тост и модалка
     9. Экран входа
    10. Планшет и десктоп
   ========================================================================== */

/* ── 1. Токены ───────────────────────────────────────────────────────────── */
:root{
  /* Палитра макета (задача 0010, раздел 5.1). Имена согласованы заранее для
     четырёх зон: остальные файлы фронта пишут var(...) именно на них. */
  --accent:#FFD633; --accent-hover:#FFE680;
  --accent-bg:rgba(255,214,51,.15); --accent-border:rgba(255,214,51,.4);
  --green:#34D399; --red:#F87171;
  --bg-doc:#07090F; --bg-app:#0A0F1C;
  --card:#111827; --card-strong:#161E30; --mono-chip:#1C2538;
  --text:#E7EAF0; --muted:rgba(231,234,240,.55);
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);

  /* Прежние имена не удалены: на них ссылается CSS всех зон. Каждое теперь
     выводится из палитры макета, поэтому старый CSS перекрасился сам. */
  --bg:var(--bg-doc); --bg-2:var(--bg-app);
  --panel:var(--card); --panel-strong:var(--card-strong);
  --panel-inset:var(--bg-app);  /* вложенная плашка внутри карточки */
  --chip-bg:var(--mono-chip);   /* монограмма монеты, значок */
  --line-accent:var(--accent-border);
  --cyan:var(--accent);
  /* Градиента на кнопках и заголовках в макете нет: имя осталось ради
     старых ссылок, а значение — плоский акцент. */
  --iris-grad:var(--accent);
  /* Предупреждение макета #F5A623 (раздел 5.1). Золото как цвет числа снято:
     жёлтый занят акцентом, и число им читалось бы как кнопка. */
  --gold:#F5A623; --orange:#F5A623;
  --blue:#38BDF8;               /* информационный синий макета, не акцент */
  --violet:rgba(231,234,240,.7);/* фиолетового в макете нет */

  /* Линейка тепла и градиент знака — только знак марки и термометр */
  --heat-1:#ef7423; --heat-2:#f57d2c; --heat-3:#ff7b34;
  --heat-4:#ff8f4d; --heat-5:#ff9a5c; --heat-6:#ffd08a;
  --warm:#fffaf3; --mint:#0de0b1;
  --brand-grad:linear-gradient(135deg,#ffd08a 0%,#ff8f4d 45%,#ef7423 100%);
  --heat-ruler:linear-gradient(90deg,#ef7423,#ff7b34 38%,#ff9a5c 70%,#ffd08a);
  --glow:none;

  /* Заливки долей — цвета площадок макета (exColors) и его синий */
  --fill-1:#FFD633; --fill-2:#F5A623; --fill-3:#34D399;
  --fill-4:#F87171; --fill-5:#38BDF8; --fill-6:#E7EAF0;
  --grid:rgba(255,255,255,.08);

  /* Форма макета (раздел 5.2): карточка 14, вложенное и кнопка 10, чип-плашка
     8, поле 12, пилюля 999. */
  --radius:14px; --radius-sm:10px; --radius-xs:8px; --radius-field:12px; --pill:999px;
  --shadow:0 28px 80px rgba(0,0,0,.36);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* Шапка макета 64px */
  --nav-h:64px; --head-h:64px;
  /* Адаптив (задача 0053). Шкала контрольных точек — четыре числа во всех
     web/*.css: max-width 419/599/899/1279 и min-width 420/600/900/1280, плюс
     (max-height:500px) для телефона боком; других порогов нет (тест
     tests/адаптив-0053.test.mjs). Ниже — общие величины, на которые
     опираются все зоны; значения по ширинам переопределены в конце раздела.
       --tap      цель касания до 899 (Р5): квадрат 44×44 вокруг центра;
       --bnav-h   высота нижнего меню телефона с вырезом айфона: всё
                  фиксированное внизу экрана встаёт НАД ним (bottom:var(--bnav-h));
                  от 600 — 0;
       --gutter   поле #main по бокам: 32 десктоп, 16 до 899, 12 до 599 (Р7);
       --gap-card зазор между карточками: 22, 16 до 899, 12 до 599 (Р7);
       --measure  предельная длина строки абзаца (Р9). */
  --tap:44px; --bnav-h:0px; --gutter:32px; --gap-card:22px; --measure:72ch;
  --ff:'IBM Plex Sans',system-ui,sans-serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
@media (max-width:899px){:root{--gutter:16px;--gap-card:16px}}
@media (max-width:599px){:root{--gutter:12px;--gap-card:12px;--bnav-h:calc(56px + env(safe-area-inset-bottom))}}

/* Шрифт. IBM Plex Sans и IBM Plex Mono лежат файлами в web/шрифты/ — те самые
   подмножества, что внутри прототипа BOTSCAN (Google Fonts, лицензия OFL 1.1,
   текст в web/шрифты/LICENSE.txt). Берём только latin и cyrillic: интерфейс у
   нас русский и английский, а греческое, вьетнамское и расширенные — это ещё
   56 КБ и шесть файлов. Цена названа: имя монеты с буквой вне этих двух
   подмножеств отрисуется системным шрифтом.

   Четыре грабли, на которые наступают по умолчанию:
   1. Sans — ПЕРЕМЕННЫЙ шрифт, один файл на веса 400–700. Поэтому вес
      объявлен диапазоном: объявишь как 400 — получишь синтетический жирный
      вместо настоящего начертания.
   2. unicode-range перенесён из прототипа дословно. Без него браузер качает
      оба подмножества всегда.
   3. font-display:swap — текст читается, пока шрифт едет.
   4. Имя файла неизменяемо по содержимому: nginx отдаёт woff2 с
      max-age=2592000, immutable. Поменялось содержимое — меняется имя файла,
      правки «по тому же адресу» не существует. */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url('/шрифты/plex-sans-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url('/шрифты/plex-sans-var-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/шрифты/plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/шрифты/plex-mono-500-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/шрифты/plex-mono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/шрифты/plex-mono-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* ── 2. База и типографика ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg-doc)}
/* В макете документ #07090F, а всё приложение лежит на обёртке #0A0F1C во
   всю высоту — видимый фон экрана именно #0A0F1C. */
body{
  background:var(--bg-app); color:var(--text); font-family:var(--ff);
  font-variant-numeric:tabular-nums;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  /* нижней навигации нет — место только под вырез айфона */
  padding-bottom:calc(env(safe-area-inset-bottom) + 12px);
  /* Двух радиальных засветок на фоне больше нет: в прототипе фон ровный, а
     засветка под прокруткой (background-attachment:fixed) на телефоне ещё и
     стоила кадров при каждом скролле. */
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
img,svg,canvas{max-width:100%}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
::selection{background:rgba(255,214,51,.28)}

/* Скрыто визуально, но доступно скринридеру */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Ссылка «к содержимому»: видна только с клавиатуры */
.skip{position:fixed;left:var(--s4);top:-100px;z-index:80;background:var(--panel-strong);
  border:1px solid var(--line-strong);border-radius:var(--pill);padding:10px 16px;
  font-size:14px;transition:top .15s}
.skip:focus{top:calc(env(safe-area-inset-top) + 8px)}
[hidden]{display:none!important}

/* Заголовки макета (раздел 5.5): экран — h1, карточка — h2 18/600,
   обычным регистром, цветом текста, без градиента и трекинга. Заголовок
   экрана — 32/700, до 420 px — 28 (задача 0031: «везде как в „Сделках“»). */
.h1{font-size:32px;font-weight:700;margin:0;line-height:1.15;color:var(--text)}
@media (max-width:419px){.h1{font-size:28px}}
.h2{font-size:18px;font-weight:600;margin:0;text-transform:none;letter-spacing:0}
.h3{font-size:15px;font-weight:600;margin:0}
.body{font-size:15px}
.small{font-size:13px}
.micro{font-size:12px;letter-spacing:.02em}
.muted{color:var(--muted)}
/* Подпись внутри карточки — как в макете «Капитал сейчас», «По биржам»,
   «Заработано за период»: 12px, трекинг .08em, капслок, цвет .55, вес 400.
   Это не заголовок карточки: заголовок — .h2 обычным регистром. */
.label{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.nowrap{white-space:nowrap}
/* Плотная лестница прототипа (14/12/11) включается с 600px. Прототип
   ДЕСКТОПНЫЙ, и его 11–12px на телефоне превращаются в текст, который читают
   с прищуром; до 600px кегли остаются нашими 15/13/12. Это решение, а не
   недоделка: мобильную читаемость мы уже один раз выстрадали. */
/* Задача 0053 (Р6): порог лестницы поднят с 600 на 900 — на планшете и
   телефоне боком 11px читали с прищуром так же, как на телефоне. */
@media (min-width:900px){
  .body{font-size:14px}
  .small{font-size:12px}
  .micro{font-size:11px}
}

/* Деньги: табличные цифры IBM Plex Sans (ровная колонка) и выключка вправо.
   Числа пишем ГАРНИТУРОЙ ИНТЕРФЕЙСА, а не моношрифтом: у Sans есть tnum, и
   колонка от этого ровная. Mono оставлен тому, где важен каждый символ, —
   ключи, адреса кошельков, code и kbd (классы ниже). */
.money{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;text-align:right;white-space:nowrap}
.money.left{text-align:left}
.num{font-variant-numeric:tabular-nums}
.hero-num{font-size:40px;line-height:1.05;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:proportional-nums}
.big-num{font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.015em;
  font-variant-numeric:proportional-nums}
.pos{color:var(--green)} .neg{color:var(--red)} .warn{color:var(--gold)}
.heat{color:var(--cyan)}
/* ГЕРОЙСКАЯ ЦИФРА КРАСИТСЯ ОДНИМ СПЛОШНЫМ ЦВЕТОМ ЦЕЛИКОМ: знак, валюта, сумма и
   дробь — один цвет. Никаких градиентов и двухцветности внутри числа
   (дизайн-система §2). Плюс к бенчмарку «просто держал» — зелёный, отставание —
   красный. Логика вешает .behind на [data-fm-heat], когда дельта < 0.
   Раньше здесь стоял оранжевый brand-grad на сумме при зелёном знаке — это и был
   «плюс зелёный, доллары оранжевые». Убрано. */
.hero-num.up,.hero-num.up .sg{background:none;-webkit-text-fill-color:var(--green);color:var(--green)}
.hero-num.behind,.hero-num.behind .sg{background:none;-webkit-text-fill-color:var(--red);color:var(--red)}

/* Качелька $|₽ рядом с «Капитал сейчас» — как в макете: обойма #0A0F1C,
   граница .1, padding 3, 12/600; половина 4×12; выбранная — сплошной жёлтый
   с тёмным текстом, невыбранная — текст .6. Тач-цель добрана псевдоэлементом. */
.cur-switch{display:inline-flex;flex:none;padding:3px;border:1px solid rgba(255,255,255,.1);
  border-radius:var(--pill);background:var(--bg-app)}
.cur-btn{position:relative;padding:4px 12px;border:0;border-radius:var(--pill);
  background:none;color:rgba(231,234,240,.6);font:600 12px/1.5 var(--ff);cursor:pointer}
.cur-btn::after{content:'';position:absolute;inset:-9px -2px}
.cur-btn.on{background:var(--accent);color:#111827}
/* Подпись «по курсу ЦБ» видна только в режиме рублей (body.rub) */
.cur-note{display:none;margin-top:4px}
body.rub .cur-note{display:block}
code,kbd,.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}

/* ── 3. Каркас ───────────────────────────────────────────────────────────── */
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--s4)}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack.tight{gap:var(--s3)}
.row{display:flex;align-items:center;gap:var(--s3)}
.row.between{justify-content:space-between}
.row.top{align-items:flex-start}
.row.wrap-row{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)} .mt5{margin-top:var(--s5)}
.tail{height:var(--s6)}

/* Шапка макета (задача 0010, раздел 5.4), дословно на ширине от 900px:
   flex, align-items:center, gap 24, padding 0 28, высота 64, фон #0A0F1C,
   нижняя граница .08. Знак высотой 34. Навигация внутри шапки: боковой
   рельсы и нижней панели в макете нет.
   Шапка НЕПРОЗРАЧНАЯ: под прилипшей полосой иначе просвечивает контент, а
   размытие — это стекло, которого в макете нет. */
.topbar{position:sticky;top:0;z-index:40;background:var(--bg-2);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.topbar-in{display:flex;align-items:center;gap:24px;padding:0 28px;height:var(--head-h);
  white-space:nowrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:-.01em;
  min-width:0;flex:none;height:100%;color:var(--text)}
.brand-mark{display:block;height:34px;width:auto;flex:none}
.brand-name{color:var(--text)}

/* Навигация: gap 2, 14px, на всю высоту шапки. Пункт — padding 0 12, нижняя
   граница 2px; активный жёлтый 600 с жёлтой границей, остальные — .65, 400. */
.nav{display:flex;gap:2px;font-size:14px;height:100%;flex:none;background:var(--bg-2)}
.nav button{display:flex;align-items:center;gap:6px;padding:0 12px;height:100%;
  border-bottom:2px solid transparent;border-radius:0;color:rgba(231,234,240,.65);
  font-size:14px;font-weight:400;white-space:nowrap}
.nav button:hover{color:var(--text)}
.nav button[aria-current="page"]{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
/* Значок-число у пункта (раздел 5.4). Сейчас не ставится: числа за ним нет. */
.nav-badge{font-size:10px;font-weight:700;background:var(--accent);color:#111827;
  border-radius:var(--pill);padding:1px 6px}

/* Правый блок: margin-left:auto, gap 12 */
.head-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
/* Состояние синхронизации: точка 7×7 и текст 12px .6 — она же кнопка
   обновления. Без рамки и подложки, как в макете. */
.sync{position:relative;display:inline-flex;align-items:center;gap:8px;padding:0;border:0;
  font-size:12px;color:rgba(231,234,240,.6);background:none;white-space:nowrap;
  flex:0 1 auto;min-width:0;max-width:220px}
.sync span:last-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Добор тач-цели: это главная кнопка «обновить» */
.sync::after{content:'';position:absolute;inset:-12px -4px}
.sync:hover{color:var(--text)}
.sync .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.sync.stale .dot{background:var(--gold)}
.sync.broken .dot{background:var(--red)}
.sync[disabled]{opacity:.6}
/* Метка языка: 12/600, граница .12, радиус 8, padding 6×10 */
.lang-btn{font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-xs);padding:6px 10px;line-height:1.5;flex:none}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}
/* Квадратная кнопка со значком (строка кошелька и т.п.) — кружок макета */
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--pill);
  border:1px solid var(--line-strong);background:transparent;color:rgba(231,234,240,.7);flex:none}
.icon-btn:hover{color:var(--accent);border-color:var(--accent)}

/* Шестерёнка: настройки и «Ещё у нас есть» (задача 0010, допущение Д4).
   Меню — карточка макета: фон #111827, граница .08, радиус 14. */
.head-menu{position:relative;flex:none}
.head-menu > summary{list-style:none;position:relative}
.head-menu > summary::-webkit-details-marker{display:none}
.head-menu > summary .dot-new{position:absolute;top:2px;right:2px}
.head-menu[open] > summary{border-color:var(--accent);color:var(--accent)}
.head-menu-in{position:absolute;right:0;top:calc(100% + 10px);z-index:45;min-width:260px;
  display:flex;flex-direction:column;gap:2px;padding:8px;white-space:normal;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.head-menu-in a{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;
  border-radius:var(--radius-sm);color:var(--text);font-size:14px;text-decoration:none}
.head-menu-in a:hover{background:var(--card-strong);color:var(--accent)}
.head-menu-in a svg{flex:none;color:rgba(231,234,240,.7)}
.head-menu-in a .dot-new{margin-left:auto}
.head-menu-in a[aria-disabled="true"]{opacity:.5;pointer-events:none}
.head-menu-in .ttl{font-size:12px;color:var(--muted);padding:8px 12px 2px;
  border-top:1px solid var(--line);margin-top:4px}
.head-menu-in .ttl:first-child{border-top:0;margin-top:0}
body.guest .head-menu-in .ttl{border-top:0;margin-top:0}

/* Узкий экран: макет десктопный, поведение придумано нами (задача 0010,
   раздел 8, пункт 6). Шапка в две строки: знак и правый блок сверху,
   навигация второй строкой во всю ширину и прокручивается по горизонтали. */
@media (max-width:899px){
  .topbar-in{flex-wrap:wrap;height:auto;padding:0 16px;column-gap:12px;row-gap:0}
  .brand{height:56px}
  .brand-name{display:none}
  .head-right{height:56px}
  /* Без прокрутки вбок (задача 0060, Р8): пять пунктов помещаются */
  .nav{order:3;width:calc(100% + 32px);margin:0 -16px;padding:0 4px;height:44px;
    border-top:1px solid var(--line)}
  .sync{max-width:120px}
}
@media (max-width:419px){
  /* Текст состояния уступает место — точка остаётся, полная фраза в title */
  .sync span:last-child{display:none}
  .head-right{gap:8px}
}

/* Нижнее меню телефона (задача 0053, Р2). До 599 px пять разделов — в
   фиксированной полосе внизу: 56 px плюс вырез айфона (--bnav-h), значок над
   подписью 12 px, активный жёлтый, как в шапке. Ничего не прокручивается:
   пять равных колонок. Шапка при этом — одна строка 48 px (знак, точка
   синхронизации, язык, шестерёнка) и не липкая: уезжает с прокруткой, а
   разделы всегда под большим пальцем. От 600 полоса скрыта, меню в шапке.
   z-index 45: выше карточек и шапки, ниже подсказки «?» (50), тоста (60) и
   диалога (70). */
.bnav{display:none}
@media (max-width:599px){
  .bnav{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));height:var(--bnav-h);
    padding:0 0 env(safe-area-inset-bottom);background:var(--bg-2);border-top:1px solid var(--line)}
  .bnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-width:0;height:auto;padding:0;color:rgba(231,234,240,.65);font-size:12px;line-height:1.2;font-weight:500;
    letter-spacing:-.01em}
  .bnav button svg{width:22px;height:22px;flex:none}
  .bnav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bnav button[aria-current="page"]{color:var(--accent);font-weight:600}
  .topbar{position:static}
  .topbar-in{flex-wrap:nowrap;height:48px;padding:0 var(--gutter);column-gap:8px}
  .brand,.head-right{height:48px}
  .topbar .nav{display:none}
  /* Содержимое и тост — над полосой меню. Селекторы с тегом: правила #main
     и .toast стоят в файле ниже и иначе перебили бы эти. */
  #main.wrap{padding-bottom:calc(24px + var(--bnav-h))}
  div.toast{bottom:calc(var(--bnav-h) + 12px)}
}
/* Планшет и альбомная (600–899, Р3): меню второй строкой шапки. Помещается —
   не прокручивается; не помещается — активный пункт подкручивает в видимую
   часть показатьЭкран (web/app.js), а у краёв тень-намёк, что там ещё есть:
   две полосы фона прокручиваются вместе с пунктами и закрывают тень у того
   края, дальше которого прокручивать некуда. */
@media (min-width:600px) and (max-width:899px){
  .nav{background:
      linear-gradient(90deg,var(--bg-2) 40%,rgba(10,15,28,0)) left/28px 100% no-repeat local,
      linear-gradient(270deg,var(--bg-2) 40%,rgba(10,15,28,0)) right/28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,rgba(231,234,240,.22),rgba(231,234,240,0)) left/12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%,rgba(231,234,240,.22),rgba(231,234,240,0)) right/12px 100% no-repeat scroll,
      var(--bg-2)}
  .nav button{flex:none}
}
/* Телефон боком (высота до 500): шапка и полоса демо не липкие, а шапка от
   600 в ширину — одной строкой, как на десктопе: две строки и полоса демо
   съедали 40% экрана высотой 390. */
@media (max-height:500px){
  .topbar{position:static}
}
@media (max-height:500px) and (min-width:600px){
  .topbar-in{flex-wrap:nowrap;height:52px;padding:0 var(--gutter)}
  .brand,.head-right{height:52px}
  .nav{order:0;width:auto;margin:0;padding:0;height:100%;border-top:0}
}

/* Экраны. Смена пишется в URL (#dash, #bots) — системный «назад» работает. */
.view{display:none}
.view.on{display:block}
/* Рабочая область макета (раздел 5.5): padding 24 32 32, max-width 1440,
   прижата влево под шапкой, как в макете. Зазор между карточками — 22.
   Селектор по id: main несёт ещё и общий .wrap, его отступы здесь не нужны. */
#main{max-width:1440px;width:100%;margin:0;padding:24px var(--gutter) 32px}
.view .card.mt3,.view .card.mt4,.view > .mt4,.view .cols.mt4,
.view > .card + .card{margin-top:var(--gap-card)}
.view > .card:first-child,.view > .section-title:first-child{margin-top:0}
/* Узкий экран: макет десктопный, отступы смягчены (раздел 8, пункт 6) */
@media (max-width:899px){
  #main{padding:16px var(--gutter) 24px}
}

/* Широкий десктоп (задача 0053, Р9, Д6): от 1600 рабочая область встаёт по
   центру, а внутренность шапки получает ту же ширину 1440, а поле 26 —
   знак (6 px собственного поля кнопки .brand) встаёт ровно над левым краем
   контента #main (поле 32). На 1280–1599 всё как было (прижато
   влево). Порога 1600 в шкале нет (Р1: только 420/600/900/1280), поэтому
   ступенька на 1600 собрана арифметикой внутри правила от 1280:
   (100vw − 1599px) × 999 — ноль и меньше до 1599 и огромное число от 1600;
   clamp/max превращают его в «0 или половина остатка» и «без предела или
   1440». Поле margin в процентах берётся от ширины страницы, поэтому центр
   точный и без полосы прокрутки. */
@media (min-width:1280px){
  #main{margin-left:clamp(0px,calc((100vw - 1599px) * 999),calc((100% - 1440px) / 2))}
  .topbar-in{max-width:max(1440px,calc((1600px - 100vw) * 99999));
    margin-left:clamp(0px,calc((100vw - 1599px) * 999),calc((100% - 1440px) / 2));
    padding-inline:clamp(26px,calc(28px - (100vw - 1599px) * 999),28px)}
}
/* Полоса демо от 1600 — по ширине контента (возврат 0053): текст и кнопка
   «Войти» стоят над краями #main, а не у краёв окна 1920. Та же ступенька. */
@media (min-width:1280px){
  body.demo .demo-bar{padding-inline:calc(16px + clamp(0px,calc((100vw - 1599px) * 999),calc((100% - 1440px) / 2 + 16px)))}
}
/* Абзацы пояснений не шире 72 знаков на любой ширине (Р9). Мелкие серые
   абзацы экранов (возврат 0053, п.7: «про блокчейн» на Биржах, пояснения
   Приветствия) — тем же пределом. */
.note,.hint,.ov-note,.view p.small.muted,.view p.muted{max-width:var(--measure)}

/* Точка «есть непрочитанный ответ поддержки». Без числа: счётчик здесь
   ничего не добавляет, а точка читается мгновенно. */
.dot-new{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

/* ── 4. Панели, плитки, метрики ──────────────────────────────────────────── */
/* Карточка макета (раздел 5.5): фон #111827, граница .08, радиус 14,
   отступ 22×26. Ни стекла, ни тени, ни линии по верхнему краю. На узком
   экране отступ 16×18 — тоже значение макета. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;position:relative;overflow:hidden}
@media (min-width:900px){.card{padding:22px 26px}}
.card.flush{padding:0}
/* Телефон (задача 0053, Р7): карточка 14×14 — место под содержимое, а не
   под поля. «Почему безопасно» на Биржах задаёт свои поля селектором
   экрана — сюда же. Экраны с собственными полями (боты.css, спутники.css)
   правят их своими правилами. */
@media (max-width:599px){
  .card:not(.flush){padding:14px}
  #v-key .ex-safe{padding:14px}
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
/* «Карточка-акцент» в макете ничем не отличается от обычной: линии сверху и
   цветной рамки там нет. Класс оставлен — на него ссылается разметка. */
.card.accent{border-color:var(--line)}
.card.danger{border-color:rgba(248,113,113,.34)}
.card.alarm{border-color:rgba(248,113,113,.34);background:linear-gradient(180deg,rgba(248,113,113,.08),rgba(248,113,113,.02))}
.divider{height:1px;background:var(--line);margin:var(--s4) 0}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin:var(--s4) 0 var(--s3);flex-wrap:wrap}
.note{border-left:2px solid var(--accent);padding:2px 0 2px 14px;font-size:14px;color:var(--muted)}
.hint{font-size:13px;color:var(--muted)}

.metric{display:flex;flex-direction:column;gap:6px}
.metric .val{font-size:22px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.tile{background:var(--panel-inset);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s3)}
.tile .val{font-size:22px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums}
/* Кнопка-подсказка «что это за цифра»: 24px значок, тач-цель добирается псевдоэлементом */
.why{position:relative;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  color:var(--muted);font-size:12px;font-weight:700;display:inline-grid;place-items:center;flex:none}
.why::after{content:'';position:absolute;inset:-12px}
.why:hover,.why[aria-expanded="true"]{color:var(--text);border-color:var(--line-strong)}

/* Полоса долей */
.allocbar{display:flex;height:14px;border-radius:var(--pill);overflow:hidden;gap:2px;background:transparent}
.allocbar span{display:block;height:100%}
.alloc-list{display:flex;flex-direction:column;gap:2px;margin-top:var(--s3)}
.alloc-row{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.alloc-row:last-child{border-bottom:0}
.alloc-row .sw{width:10px;height:10px;border-radius:3px}
.platform-toggle{display:block;flex:none;border:0;padding:0;position:relative;cursor:pointer}
.platform-toggle::after{content:'';position:absolute;inset:-14px}
.platform-row{transition:opacity .16s ease,filter .16s ease}
.platform-row.off{opacity:.36;filter:grayscale(1)}
.alloc-row .pct{color:var(--muted);font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.alloc-row .amt{font-variant-numeric:tabular-nums;min-width:92px;text-align:right;font-weight:600}
.alloc-row.two{grid-template-columns:1fr auto}
.alloc-row.check{grid-template-columns:22px 1fr auto}
.alloc-row.plain{grid-template-columns:1fr}

/* Графики: высота с запасом на подписи оси X, иначе появляется прокрутка */
.chart-box{position:relative;width:100%}
.chart-box.eq{height:210px}
.chart-box.sm{height:150px}
.chart-box.md{height:200px}
.legend{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s3);font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:16px;height:2px;border-radius:2px;margin-right:7px;vertical-align:middle}
.spark{width:72px;height:26px;display:block}
.linkish{color:var(--cyan);border-bottom:1px dashed rgba(255,214,51,.4);padding:0;font:inherit}

/* ── 5. Управление ───────────────────────────────────────────────────────── */
/* Кнопки — формы макета дословно (задача 0010, раздел 5.3).
   .btn          — вторичная кнопка-контур: пилюля 8×16, граница .14, 13/600,
                   при наведении граница и текст жёлтые;
   .btn.primary  — главная: плоская жёлтая, радиус 10, 14×24, 15/600,
                   min-width 220. Ни градиента, ни тени, ни пилюли;
   .btn.sm.primary — малая жёлтая пилюля 8×16, 13/600 («Подключить»);
   .btn.round    — кнопка-кружок 36×36 (обновить, закрыть). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 16px;border-radius:var(--pill);font-weight:600;font-size:13px;line-height:1.5;
  border:1px solid var(--line-strong);background:transparent;color:var(--text);
  transition:border-color .2s,color .2s,background .2s;text-decoration:none}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{min-width:220px;padding:14px 24px;border:0;border-radius:var(--radius-sm);
  background:var(--accent);color:#111827;font-size:15px;font-weight:600;box-shadow:none;text-align:center}
.btn.primary:hover{background:var(--accent);color:#111827}
.btn.sm.primary{min-width:0;padding:8px 16px;border-radius:var(--pill);font-size:13px}
.btn.ghost{background:transparent}
.btn.block{width:100%;min-width:0}
.btn.sm{font-size:13px;padding:8px 16px}
.btn.round{width:36px;height:36px;padding:0;border-radius:var(--pill);color:rgba(231,234,240,.7)}
.btn.round:hover{border-color:var(--accent);color:var(--accent)}
/* Удаление — тот же контур, при наведении красный (кнопка «Отключить» макета) */
.btn.danger{color:var(--text)}
.btn.danger:hover{border-color:var(--red);color:var(--red);background:transparent}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn .spin{margin-right:2px}

/* Чип-фильтр макета дословно (раздел 5.3): 5×12, пилюля, 12/600.
   Выключен — прозрачный, текст .7, граница .1; включён — подложка .14,
   жёлтый текст, граница прозрачная. */
.chip{position:relative;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:var(--pill);border:1px solid rgba(255,255,255,.1);background:transparent;
  color:rgba(231,234,240,.7);font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}
/* тач-цель добирается невидимым полем, вёрстка при этом не разъезжается */
.chip::after{content:'';position:absolute;inset:-8px 0}
.chip[aria-pressed="true"],.chip.on{border-color:transparent;color:var(--accent);
  background:rgba(255,214,51,.14);box-shadow:none}
/* Чип периода крупнее (раздел 5.3): 7×14, 13/600; включённый с жёлтой
   границей и подложкой .15, выключенный — граница .12. */
.chip.period{padding:7px 14px;font-size:13px;border-color:rgba(255,255,255,.12)}
.chip.period[aria-pressed="true"],.chip.period.on{background:var(--accent-bg);
  color:var(--accent);border-color:var(--accent)}
.chip .sw{width:8px;height:8px;border-radius:2px;flex:none}
.chip .cnt{font-variant-numeric:tabular-nums;opacity:.7}
/* Ряд чипов не прокручивается вбок ни на какой ширине (задача 0060, Р8,
   слово автора «убери прокруты в табах»): помещается или переносится. */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);padding:4px 0 6px}
.chips .micro{white-space:nowrap;align-self:center}
/* Ряды чипов до 899 переносятся строками, а не прокручиваются вбок (задача
   0053, Р4): все варианты видны сразу, выбранный всегда на экране. Зазор
   между строками 12: добор касания чипа (см. ниже) не налезает на соседний
   ряд. */
@media (max-width:899px){
  .chips{flex-wrap:wrap;overflow-x:visible;row-gap:16px;scroll-snap-type:none}
}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:var(--muted);font-weight:500}
/* Поле макета: фон #0A0F1C, граница .14, радиус 10 (поле адреса кошелька) */
.field input,.field select,.field textarea{min-height:44px;background:var(--bg-app);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;
  font-family:var(--ff);width:100%}
/* Ключи биржи — моноширинно: так видно пробел, вставленный при копировании */
.field input.mono{font-family:var(--ff-mono)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:rgba(248,113,113,.55)}
/* Ошибка формы живёт под своим полем, а не в тосте */
.field .err{font-size:13px;color:var(--red);min-height:0}
.field .err:empty{display:none}
/* Поиск макета: высота 56, фон #0A0F1C, граница .14, радиус 12 */
.search-field{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--radius-field);background:var(--bg-app)}
.search-field input{flex:1;min-width:0;border:0;background:none;font-size:15px;outline:none;font-family:var(--ff)}
.copyrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;background:var(--panel-inset)}
.copyrow code{font-size:14px;letter-spacing:.02em}

/* Тумблер из двух половин (раздел 5.3): обойма #0A0F1C, граница .1,
   пилюля, padding 3; половина 5×12 пилюлей; включённая — подложка .15 и
   жёлтый текст, как «Простой / Эксперт» в шапке макета. */
.seg{display:inline-flex;padding:3px;gap:0;border:1px solid rgba(255,255,255,.1);border-radius:var(--pill);
  background:var(--bg-app)}
.seg button{padding:5px 12px;border-radius:var(--pill);font-size:12px;font-weight:600;line-height:1.5;
  color:rgba(231,234,240,.7)}
.seg button[aria-pressed="true"]{color:var(--accent);background:var(--accent-bg);box-shadow:none}

.opt{display:flex;align-items:flex-start;gap:var(--s3);padding:14px 0;border-bottom:1px solid var(--line)}
.opt:last-child{border-bottom:0}
.opt .grow b{font-size:15px;font-weight:600}
.opt .grow .small{display:block;margin-top:2px}
.sw-btn{flex:none;width:52px;height:32px;border-radius:var(--pill);border:1px solid var(--line);
  background:var(--panel-inset);position:relative;transition:background .2s,border-color .2s;margin-top:2px}
.sw-btn::before{content:'';position:absolute;inset:-6px}   /* тач-цель 44px */
.sw-btn::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:var(--muted);transition:transform .2s,background .2s}
.sw-btn[aria-checked="true"]{background:rgba(52,211,153,.18);border-color:rgba(52,211,153,.5)}
.sw-btn[aria-checked="true"]::after{transform:translateX(20px);background:var(--green)}
.sw-btn[disabled]{opacity:.6}

/* Цели касания до 899 (задача 0053, Р5): каждый мелкий элемент управления
   принимает нажатие во всём квадрате 44×44 вокруг своего центра. Видимая
   плашка не меняется — добирает невидимый ::after ровно до 44 по той стороне,
   где не хватает: min(0, 50% − 22px) — 0, если сторона уже 44 и больше.
   От 900 размеры и доборы прежние: десктоп автора не трогаем. Владельцы
   экранов добирают свои элементы так же, своим селектором. */
@media (max-width:899px){
  .btn,.chip,.cur-btn,.lang-btn,.where-q,.why,.sync,.where-link,.linkish{position:relative}
  .btn::after,.chip::after,.cur-btn::after,.lang-btn::after,.where-q::after,.why::after,
  .sync::after,.where-link::after,.linkish::after{content:'';position:absolute;
    top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));
    left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}
  /* $|₽ стоят вплотную: квадрат одной половины лёг бы на другую, поэтому
     каждая половина шириной 44 */
  .cur-btn{min-width:44px}
  /* Имя строки и «?» рядом: зазор 12, чтобы квадраты 44 не ложились друг на
     друга; строки раскладки героя высотой 44 по той же причине. */
  .where .where-name{gap:12px}
  .ov-hero .ov-split-row{min-height:44px;padding:0}
  .head-menu-in a{min-height:44px}
}
@media (max-width:419px){
  /* Точка синхронизации без текста — 7 px: кнопка шириной 44, чтобы её
     добор не ложился на «RU» */
  .sync{min-width:44px;min-height:44px;justify-content:center}
}

/* ── 6. Компоненты экранов ───────────────────────────────────────────────── */

/* 6.1 Карточка бота. Итог сессии в подвале — единственное число,
   по которому боты сравнимы между собой. */
.bot{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s4);position:relative;overflow:hidden;
  transition:transform .15s,border-color .2s}
.bot:hover{border-color:var(--line-strong)}
.bot:active{transform:scale(.985)}
.bot-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.pair{font-size:17px;font-weight:700;letter-spacing:-.01em}
.tagline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
/* Метка в строке — как метка площадки в макете: 10px, плашка .08, радиус 4,
   обычный регистр. Тип бота различается словом, цвета у типов одинаковые:
   своих цветов типам макет не даёт. */
.tag{font-size:10px;font-weight:600;padding:1px 6px;border-radius:4px;border:0;
  background:rgba(255,255,255,.08);color:rgba(231,234,240,.7)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.status.off .dot{background:var(--muted)}
.status.alert .dot{background:var(--red)}
.bot-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4)}
.bot-nums div{display:flex;flex-direction:column;gap:2px}
.bot-nums .k{font-size:12px;color:var(--muted)}
.bot-nums .v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.bot-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.bot-foot .net{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.bots-grid{display:flex;flex-direction:column;gap:var(--s4)}

/* 6.1б Плотный список позиций «как на бирже» (экран «Боты»): шапка колонок,
   строки-кнопки и суммарная строка. Числа колонками, выключка вправо. */
.bots-table{overflow:hidden}
/* На телефоне в строке три колонки: пара, здоровье, результат. Здоровье —
   второе, сразу после пары: это главное число строки.
   Колонку «вложено» на узком экране прячем (решение автора, 09.10.2026). Из
   четырёх чисел строки вложенная сумма при беглом просмотре нужна меньше
   всех, а целиком она видна в карточке бота. Четыре колонки на 390px
   оставляли паре 48px и резали «TON спот» в «TO…» — имя важнее. Отступы и
   зазор поэтому вернулись к прежним: ужимали их только ради четвёртой
   колонки. Паре на 390px остаётся 136px — больше, чем было до здоровья. */
.bots-head,.bots-total,.bot-row{display:grid;grid-template-columns:minmax(0,1fr) 56px 108px;
  gap:var(--s3);align-items:center;padding:10px var(--s4)}
.bcol-inv{display:none}
/* Каждая клетка привязана к своей колонке ЯВНО, а не положением в потоке.
   Повод (владелец, 09.10.2026, десктоп): браузер собрал новую шапку из
   четырёх заголовков со старым кодом из кэша, который клетку здоровья не
   рисует, — и всё правое крыло строки съехало на колонку влево, а PNL уехал
   на вторую строку шапки. Таблица стала нечитаемой.
   С явной привязкой пропавшая клетка оставляет пустое место, а числа стоят
   под своими заголовками. grid-row:1 держит шапку в одну строку: лишняя
   клетка не переносится вниз, а встаёт в свою колонку.
   -2/-1 — последняя колонка, сколько бы их ни было: на 390 их три, с 600px
   четыре, и повторять раскладку в медиазапросе не нужно. */
.bots-head>*,.bots-total>*,.bot-row>*{grid-row:1}
.bots-head>:first-child,.bots-total>:first-child,.bot-row>:first-child{grid-column:1}
.bcol-health,.bhealth{grid-column:2}
.bcol-inv{grid-column:3}
.bots-head>:last-child,.bots-total>:last-child,.bot-row>:last-child{grid-column:-2/-1}
.bots-head{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(231,234,240,.5);
  font-weight:400;border-bottom:1px solid var(--line);padding-top:14px;padding-bottom:8px}
.bots-head span:nth-child(n+2),.bots-total .money,.bot-row .bc2{text-align:right}
.bot-row{width:100%;text-align:left;border-bottom:1px solid var(--line);min-height:58px;
  transition:background .15s}
.bot-row:active{background:rgba(255,214,51,.06)}
.bot-row:hover{background:rgba(255,214,51,.04)}
.bot-row.closed{opacity:.72}
.bpair{display:flex;align-items:center;gap:6px;min-width:0}
.bpair b{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.lev{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line);
  border-radius:6px;padding:0 4px;flex:none;font-variant-numeric:tabular-nums}
.bsub{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:3px;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bsub .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.bsub.off .dot{background:var(--muted)}
.bsub.alert .dot{background:var(--red)}
.bc1{min-width:0}
.bc2{font-size:14px;font-variant-numeric:tabular-nums}
.bc3{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.bc3 b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.broi{font-size:12px;font-variant-numeric:tabular-nums}
/* Клетка здоровья: балл числом и слово под ним — двумя элементами в столбик,
   как .bc3. Термометра, шкалы и подложки под числом тут нет и быть не может
   (§8.4 «Термометра нет»): цвет берёт только само число. */
.bhealth{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;min-width:0}
.bhealth b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
/* Слово — равноправный носитель смысла: градаций четыре, цветов три, и без
   слова «срочно» от «внимания» не отличить. Поэтому слово переносим, а не
   режем многоточием. break-word, а не anywhere: anywhere рвёт и «Внимание»
   посередине, хотя оно в 56px помещается целиком. */
.bgrade{font-size:11px;line-height:1.2;color:var(--muted);overflow-wrap:break-word}
.bots-total{border-top:1px solid var(--line);background:var(--panel-inset);font-size:13px;
  color:var(--muted);font-weight:600}
.bots-total .money{color:var(--text);font-weight:700;font-size:14px}
/* С 600px «вложено» возвращается: там на все четыре колонки места хватает и
   пара всё равно получает больше 200px. */
@media (min-width:600px){
  .bots-head,.bots-total,.bot-row{grid-template-columns:minmax(0,1fr) 56px 84px 108px}
  .bcol-inv{display:block}
}

/* 6.1в Здоровье портфеля вверху вкладки «Боты» (задача 0004).
   Кольцо с баллом, числа рядом, строка охвата. Термометра, градиента и
   тепловой палитры здесь нет: дуга красится ОДНИМ цветом из трёх разрешённых
   (--green, --red, цвет текста), остаток кольца — цвет границы. Оранжевого в
   блоке нет вообще. Носитель смысла — слово градации под кольцом, цвет его
   только дублирует. */
.phealth{margin-bottom:var(--s4)}
.phealth .label{margin-bottom:var(--s3)}
.ph-top{display:flex;align-items:center;gap:var(--s4)}
.ph-ring{position:relative;flex:none;width:72px;height:72px}
.ph-ring svg{display:block;transform:rotate(-90deg)}
.ph-track{stroke:var(--line)}
/* Дуга по умолчанию нейтральная — цвет текста. Классы .pos и .neg приходят от
   градации, четвёртого цвета нет (§2 «Деньги»). */
.ph-arc{stroke:var(--text);transition:stroke-dasharray .3s}
.ph-arc.pos{stroke:var(--green)}
.ph-arc.neg{stroke:var(--red)}
.ph-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;line-height:1}
.ph-val b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.ph-max{font-size:10px}
/* Числа в две колонки: на 390px четыре подписи в строку не помещаются, а
   резать их многоточием нельзя — цифра без подписи не значит ничего. */
.ph-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s3);min-width:0;flex:1}
.ph-cell{display:flex;flex-direction:column;gap:1px;min-width:0}
.ph-cell b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* .money по умолчанию прижат вправо — это для колонок таблиц, где числа
   выравниваются друг под другом. Здесь колонка своя и широкая: на 1440 клетка
   под 250 точек, подпись стоит слева, а число уезжало к правому краю и
   зрительно оказывалось под ЧУЖИМ заголовком. Подпись и число — одна пара,
   поэтому читаются от одного края. */
.ph-cell .money{text-align:left}
.ph-k{font-size:11px;color:var(--muted);letter-spacing:.02em}
/* Полоса распределения капитала: та же стопка долей, что и на главной
   (§7.1 «доли активов — горизонтальная стопка + таблица с числами»).
   Заливки из §7.2, оранжевого среди них нет: рядом стоят числа. Подпись у
   каждой доли своя — цвет здесь только метка, а не носитель смысла. */
.ph-alloc{margin-top:var(--s4)}
.ph-alloc .allocbar{margin-top:6px}
.ph-alloc-legend{display:flex;flex-wrap:wrap;gap:4px var(--s4);margin-top:var(--s2)}
.ph-leg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.ph-leg .sw{width:8px;height:8px;border-radius:2px;flex:none}
.ph-leg b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.ph-seg-work{background:var(--fill-1)}
.ph-seg-free{background:var(--fill-5)}
.ph-seg-other{background:var(--line-strong)}
.ph-grade{display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}
.ph-grade b{font-size:14px;font-weight:700}
.ph-note{margin:6px 0 0}
@media (min-width:600px){
  /* Пять величин, а не четыре: уровень риска вернулся на экран рядом с
     худшим ботом (просьба автора, 09.10.2026). */
  .ph-nums{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Заголовки секций «Работают» и «Закрытые»: зелёная точка у живой секции */
.bots-sec .h2{display:flex;align-items:center;gap:8px}
.bots-sec .dot.live{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}

/* 6.1в Донат «Где деньги» на главной: диаграмма слева, список долей рядом.
   Список — равноправный носитель данных: имя, доля и сумма читаются без цвета. */
/* На телефоне донат сверху, список долей под ним во всю ширину: имена бирж
   не должны резаться ради диаграммы. На ≥600px — рядом. */
.donut-row{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.chart-box.donut{width:186px;height:186px;flex:none}
.sk-donut{width:186px;height:186px;border-radius:50%;flex:none;display:block;margin:0 auto}
.donut-legend{width:100%;min-width:0;display:flex;flex-direction:column}
@media (min-width:600px){
  .donut-row{flex-direction:row;align-items:center;gap:var(--s5)}
  .donut-legend{flex:1;width:auto}
}
.where{border-bottom:1px solid var(--line)}
.where:last-child{border-bottom:0}
.where-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:center;
  gap:8px;width:100%;text-align:left;min-height:44px;padding:6px 0;color:var(--text);font-size:14px}
.where-row .sw{width:10px;height:10px;border-radius:3px;flex:none}
.where-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
/* «Где лежит» — мелкая подпись площадки второй строкой (Активы, монеты) */
.where-loc{display:block;font-size:11px;line-height:1.3;color:var(--muted);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.where-row .pct{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.where-row b{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Плашка-тултип донатов: тёмная карточка, летит за курсором/пальцем
   (позицию ставит charts.js), за края экрана не вылезает */
.donut-tip{position:fixed;left:0;top:0;z-index:70;pointer-events:none;min-width:118px;max-width:240px;
  padding:10px 12px;border:1px solid var(--line-accent);border-radius:var(--radius-sm);
  background:var(--panel-strong);box-shadow:var(--shadow)}
.donut-tip .k{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut-tip .v{display:flex;align-items:baseline;gap:8px}
.donut-tip .v b{font-size:15px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.donut-tip .v span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Распределение по активам (0036, Р9): строки не раскрываются. Имя строки
   с маршрутом — ссылка-кнопка, рядом «?» с подсказкой: по наведению (где
   есть мышь) и по тапу (класс tip-on на строке). */
.where-name{display:flex;align-items:center;gap:var(--s2);min-width:0;max-width:100%}
/* Длинное имя («Монеты на споте» на 390) режется многоточием, «?» остаётся. */
.where-name > :first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* До 420 px имя строки распределения переносится, а не режется (0037, Р3):
   «Монеты на споте» на 375/390 читается целиком, «?» остаётся в строке. */
@media (max-width:419px){
  .where-row .where-name > :first-child{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:break-word}
}
/* До 899 (задача 0053, Р5): добор касания ссылки-имени и «?» выходит за
   строку имени, а overflow:hidden у .nm и у самой ссылки его срезал — квадрат
   44 ловил касание только в видимой плашке. Имя до 899 переносится, а не
   режется многоточием (как уже было до 419). */
@media (max-width:899px){
  .where-row .nm{overflow:visible;white-space:normal}
  .where-row .where-name > :first-child{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:break-word}
}
.where-link{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;
  text-decoration:underline;text-decoration-color:rgba(231,234,240,.35);text-underline-offset:3px}
.where-link:hover{color:var(--accent);text-decoration-color:currentColor}
.where-link:focus-visible,.where-q:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.where-q{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:none;color:var(--muted);font:600 12px/1 var(--ff);cursor:pointer}
.where-q:hover{color:var(--text);border-color:var(--muted)}
/* Подсказка — всплывашкой поверх следующих строк, а не блоком в потоке: на
   широком экране список центрирован рядом с кольцом, и блок в потоке
   сдвигал «?» из-под курсора, наведение пропадало, подсказка закрывалась,
   список возвращался — мигание без конца.
   Поверх страницы, а не внутри карточки (0037, Р1): у .card overflow:hidden,
   и absolute-подсказка у нижней плитки «Сделок» срезалась краем карточки.
   Координаты ставит разместитьПодсказку (app.js): под «?» или над ним,
   целиком в окне; ширина по тексту, до 320 px и не шире окна минус 16 px.
   Выше нижней навигации (45), ниже диалогов (60). */
.where{position:relative}
.where-tip{display:none;position:fixed;z-index:50;left:0;top:0;width:max-content;
  max-width:min(320px,calc(100vw - 16px));padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  background:var(--panel-strong);font-size:13px;font-weight:400;line-height:1.5;color:var(--text);
  white-space:normal;text-align:left}
.where-tip > div + div{margin-top:4px;color:var(--muted)}
/* Состав «Прочего» — равноправный список, а не текст с оговоркой. */
.where-tip-list > div + div{color:var(--text)}
.where.tip-on .where-tip{display:block}
@media (hover:hover){.where:has(.where-q:hover) .where-tip{display:block}}

/* 6.1г Сводка: чипы периода и произвольный диапазон дат */
/* Свой период (задача 0027): строка двух дат под чипами, а не карточка */
/* Правка 0028: подписи дат обычным белым, «Применить» — крупная кнопка в
   одну строку с полями и той же высоты (44), прижата к низу полей. */
.sum-range{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;max-width:560px;margin-top:var(--s4)}
.sum-range[hidden]{display:none}
.sum-range .field{flex:1;min-width:150px}
.sum-range .field label{font-size:14px;color:var(--text);font-weight:500}
.sum-range .field input{height:44px;min-height:44px;padding-top:0;padding-bottom:0}
.sum-range .btn{min-height:44px;min-width:140px;padding:0 24px;font-size:15px;font-weight:600;flex:none;border-radius:var(--radius-sm)}
/* Топ-вклады ботов — строки-кнопки: наследуют сетку alloc-row */
button.alloc-row{font:inherit;color:inherit}
button.alloc-row:hover{background:rgba(255,214,51,.04)}
.platform-row{width:100%;text-align:left;border-radius:var(--radius-sm);cursor:pointer}
.platform-row.off{opacity:.42}
.platform-row.off .amt{text-decoration:line-through}
.platform-row:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* 6.2 Термометр: только там, где у величины есть шкала и есть с чем сравнивать.
   На деньгах запрещён — у них знак, а не температура. */
.temp{display:flex;align-items:center;gap:10px;margin-top:var(--s2)}
.temp .scale{position:relative;flex:1;height:6px;border-radius:var(--pill);
  background:linear-gradient(90deg,#123845,var(--heat-1) 45%,var(--heat-4) 74%,var(--heat-6))}
.temp .scale i{position:absolute;top:-4px;width:2px;height:14px;border-radius:2px;
  background:var(--text);box-shadow:0 0 0 2px var(--bg)}
.temp .cap{font-size:11px;color:var(--heat-5);font-weight:600}

/* 6.3 Дневник */
.entry{display:flex;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.entry:first-child{padding-top:0}
.entry:last-child{border-bottom:0}
/* Оценка уверенности: цвет дублирует цифру, а не заменяет её */
.mood{width:38px;height:38px;flex:none;border-radius:var(--radius-xs);display:grid;place-items:center;
  font-size:15px;font-weight:700;border:1px solid var(--line);font-variant-numeric:tabular-nums}
.mood.good{color:var(--green);border-color:rgba(52,211,153,.34);background:rgba(52,211,153,.09)}
.mood.mid{color:var(--gold);border-color:rgba(245,166,35,.3);background:rgba(245,166,35,.08)}
.mood.bad{color:var(--red);border-color:rgba(248,113,113,.32);background:rgba(248,113,113,.09)}
.entry-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:5px}
.entry-meta b{color:var(--text)}
.entry-text{font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.entry-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--s2)}
.entry-actions{display:flex;gap:var(--s2);margin-top:var(--s2)}
.ttag{font-size:12px;color:var(--cyan);background:rgba(255,214,51,.10);
  border:1px solid rgba(255,214,51,.2);border-radius:var(--radius-xs);padding:3px 9px}
.quick{display:flex;flex-direction:column;gap:var(--s3)}
.quick textarea{width:100%;min-height:88px;resize:vertical;background:var(--panel-inset);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;font-size:15px}
.quick textarea:focus{outline:none;border-color:var(--line-strong)}
.moodpick{display:flex;gap:var(--s2)}
.moodpick button{flex:1;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--panel-inset);color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.moodpick button[aria-pressed="true"]{color:var(--text);border-color:var(--line-strong);background:rgba(255,214,51,.12)}

/* 6.4 Лента событий */
.ev{display:flex;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.ev:last-child{border-bottom:0}
.ev .ic{width:30px;height:30px;flex:none;border-radius:var(--radius-xs);display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);font-size:13px}
.ev .t{font-size:12px;color:var(--muted);white-space:nowrap}

/* 6.5 Баннер сверки. Не модалка: напоминание приходит не вовремя по определению. */
.nudge{border:1px solid rgba(245,166,35,.34);
  background:linear-gradient(180deg,rgba(245,166,35,.10),rgba(245,166,35,.03));
  border-radius:var(--radius);padding:var(--s4);display:flex;gap:var(--s3)}
.nudge .ic{width:34px;height:34px;flex:none;border-radius:var(--radius-xs);display:grid;place-items:center;
  background:rgba(245,166,35,.14);color:var(--gold);font-weight:700}
.nudge.bad{border-color:rgba(248,113,113,.34);background:linear-gradient(180deg,rgba(248,113,113,.10),rgba(248,113,113,.03))}
.nudge.bad .ic{background:rgba(248,113,113,.14);color:var(--red)}
.nudge-actions{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}

/* 6.6 Онбординг ключа */
.steps{display:flex;gap:6px;margin-bottom:var(--s4)}
.steps span{flex:1;height:4px;border-radius:var(--pill);background:var(--line)}
.steps span.done{background:var(--iris-grad)}
.perm{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--panel-inset);margin-bottom:var(--s2)}
.perm .box{width:22px;height:22px;flex:none;border-radius:var(--radius-xs);display:grid;place-items:center;
  font-size:13px;font-weight:700}
.perm.yes .box{background:rgba(52,211,153,.14);color:var(--green);border:1px solid rgba(52,211,153,.4)}
.perm.no .box{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.36)}
/* Лестница шагов: показывает конец пути и его длину — снимает страх отдать ключ */
.ladder{list-style:none;margin:var(--s3) 0 0;padding:0;position:relative}
.ladder li{display:flex;gap:var(--s3);padding:0 0 var(--s4);position:relative}
.ladder li:last-child{padding-bottom:0}
.ladder li::before{content:'';position:absolute;left:15px;top:34px;bottom:6px;width:2px;
  background:linear-gradient(180deg,rgba(255,214,51,.5),rgba(255,214,51,.08))}
.ladder li:last-child::before{display:none}
.ladder .n{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:14px;color:#111827;background:var(--iris-grad);font-variant-numeric:tabular-nums}
.ladder b{font-size:15px;font-weight:600}
/* Результат проверки ключа: карточка рядом с формой, а не тост */
.result{margin-top:var(--s2);border-radius:var(--radius-sm);border:1px solid var(--line);
  padding:var(--s3) var(--s4);font-size:14px}
.result:empty{display:none}
.result.ok{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.07)}
.result.warn{border-color:rgba(245,166,35,.4);background:rgba(245,166,35,.07)}
.result.bad{border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.07)}
.result b{display:block;margin-bottom:4px}

/* 6.6b Экран «Биржи»: список бирж и форма подключения по кнопке «Подключить».
   Подключённая биржа — чистая строка (иконка, название, баланс, дата, удалить),
   без технических подписей. Неподключённая — кнопка, раскрывающая форму. */
.ex-list{display:flex;flex-direction:column;gap:var(--s3)}
.ex-row{display:flex;align-items:center;gap:var(--s3);min-height:64px;padding:12px 14px;position:relative;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);
  overflow:hidden}
.ex-logo{width:40px;height:40px;flex:none;border-radius:var(--radius-xs);display:grid;place-items:center;
  border:1px solid var(--line);color:var(--cyan);overflow:hidden;background:var(--chip-bg)}
.ex-ico{width:22px;height:22px}
/* Настоящий знак биржи: официальный файл из web/логотипы/ */
.ex-img{width:26px;height:26px;display:block;object-fit:contain;border-radius:7px}
.ex-main{flex:1;min-width:0}
.ex-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ex-sub{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-bal{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ex-state{font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 8px;border-radius:var(--radius-xs);
  border:1px solid var(--line);color:var(--muted)}
.ex-state.ok{color:var(--green);border-color:rgba(52,211,153,.34);background:rgba(52,211,153,.09)}
.ex-state.err{color:var(--red);border-color:rgba(248,113,113,.32);background:rgba(248,113,113,.09)}
.ex-act{display:flex;align-items:center;gap:var(--s2);flex:none}
.ex-row.soon{opacity:.6}
.ex-row.err .ex-logo{color:var(--red);border-color:rgba(248,113,113,.32)}
.ex-row.on{border-color:var(--line-strong)}   /* у этой биржи открыта форма ниже */
.ex-connect{margin-top:var(--s3)}
/* Поле секрета с глазом: глаз внутри поля справа, по центру по вертикали,
   не выходит за рамку поля ни на 1440, ни на 390. */
.key-wrap{position:relative}
.key-wrap input{padding-right:52px}
.key-wrap .key-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:36px;height:34px;min-width:0;min-height:0;padding:0;border:0;border-radius:var(--radius-xs);
  display:grid;place-items:center}

/* Строки-кнопки в списках площадок (карточки-группы кошельков и т.п.).
   Нереализованные биржи выглядят ровно как рабочие — обычная строка с кнопкой
   «Подключить»; «в разработке» человек узнаёт уже внутри, на экране #soon. */
button.ex-row{width:100%;text-align:left;font:inherit;color:var(--text);cursor:pointer}

/* Экран «Раздел в разработке»: карточка по центру, крупный знак площадки */
.soon-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3)}
.soon-card .ex-logo.lg{width:64px;height:64px;border-radius:var(--radius)}
.soon-card .ex-logo.lg .ex-img{width:40px;height:40px;border-radius:10px}
.soon-card .ex-logo.lg .ex-ico{width:34px;height:34px}
.soon-card .btn{margin-top:var(--s2)}

/* «Почему безопасно» — раскрывающийся блок под списком */
.ex-safe{margin-top:var(--s3)}
.ex-safe > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.ex-safe > summary::-webkit-details-marker{display:none}
.ex-safe > summary::after{content:'';width:9px;height:9px;flex:none;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .18s;margin-right:4px}
.ex-safe[open] > summary::after{transform:rotate(-135deg)}

/* 6.6б Кошельки по адресу (экран «Биржи»). Каталог — карточки с настоящими
   иконками из web/иконки-кошельков/, тап раскрывает форму адреса. Подключённый
   кошелёк — тот же чистый ряд .ex-row, что и биржа. */
.wal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s3)}
.wal-card{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:88px;
  padding:12px 6px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel);color:var(--text)}
.wal-card:active{background:rgba(255,214,51,.06)}
.wal-card.on{border-color:var(--line-strong)}   /* у этого кошелька открыта форма */
.wal-card .nm{font-size:12px;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.wal-logo{width:36px;height:36px;flex:none;border-radius:var(--radius-xs);display:grid;place-items:center;
  border:1px solid var(--line);color:var(--cyan);overflow:hidden;background:var(--chip-bg)}
.wal-logo img{width:24px;height:24px;display:block;object-fit:contain;border-radius:6px}
.wal-logo .wal-fallback{width:20px;height:20px}
.wal-row .wal-logo{width:40px;height:40px}
.wal-row .wal-logo img{width:26px;height:26px}
/* Две карточки-группы («Холодный» / «Горячий») — тот же ряд, что у биржи;
   стрелка как у «Почему безопасно» показывает, что карточка раскрывается. */
.wal-group{width:100%;text-align:left;font:inherit;color:var(--text)}
.wal-group .ex-name,.wal-group .ex-sub{display:block}
.wal-group .ex-name{display:flex}
.wal-group .wal-logo{width:40px;height:40px}
.wal-group .wal-logo img{width:26px;height:26px}
.wal-group::after{content:'';width:9px;height:9px;flex:none;margin-right:4px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s}
.wal-group[aria-expanded="true"]::after{transform:rotate(-135deg)}
.wal-group[aria-expanded="true"]{border-color:var(--line-strong)}

/* 6.7 Хаб «Ещё» и настройки */
.hub{display:flex;flex-direction:column}
.hub button,.hub a{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;min-height:56px;
  padding:10px 0;border-bottom:1px solid var(--line);color:var(--text);font-size:15px;text-decoration:none}
.hub button:last-child,.hub a:last-child{border-bottom:0}
.hub .ic{width:36px;height:36px;flex:none;border-radius:var(--radius-xs);display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted)}
.hub .sub{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:1px}
.hub .chev{margin-left:auto;color:var(--muted)}
.sess{display:flex;align-items:center;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.sess:last-child{border-bottom:0}
.sess .ic{width:34px;height:34px;flex:none;border-radius:var(--radius-xs);display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted)}

/* 6.8 Движение денег */
.flow{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:var(--s3);
  padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.flow:last-child{border-bottom:0}
.flow .ic{width:34px;height:34px;border-radius:var(--radius-xs);display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);font-size:15px}
.flow.in .ic{color:var(--green);border-color:rgba(52,211,153,.34)}
.flow.out .ic{color:var(--red);border-color:rgba(248,113,113,.32)}
.flow .amt{font-variant-numeric:tabular-nums;font-weight:700;text-align:right;white-space:nowrap}
.flow .sub{font-size:12px;color:var(--muted);margin-top:2px}
.flow.unexplained{background:rgba(245,166,35,.05);box-shadow:inset 2px 0 0 var(--gold)}

/* 6.9 Сравнение: на 390px рейтинг-строки, на десктопе — обычная таблица */
.cmp{display:flex;flex-direction:column;gap:2px;position:relative}
.cmp-row{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;width:100%;
  text-align:left;padding:10px 0;border-bottom:1px solid var(--line)}
.cmp-row:last-of-type{border-bottom:0}
.cmp-row .rk{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.cmp-row .nm{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;min-width:0}
.cmp-row .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-row .vl{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.cmp-bar{grid-column:2/4;height:8px;border-radius:var(--pill);background:rgba(255,255,255,.06);
  position:relative;margin-top:6px}
.cmp-bar i{position:absolute;top:0;bottom:0;border-radius:var(--pill);display:block}
.cmp-zero{position:absolute;top:-2px;bottom:-2px;width:1px;background:rgba(255,255,255,.3)}
.tbl-wrap{display:none}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(231,234,240,.5);
  font-weight:400;text-align:right;padding:10px 18px;border-bottom:1px solid var(--line)}
table.tbl th:first-child,table.tbl td:first-child{text-align:left}
table.tbl td{padding:10px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
table.tbl tr:last-child td{border-bottom:0}

/* 6.10 Блок «Ещё у нас есть». Живёт в меню шестерёнки в шапке (задача
   0010); нижние копии на экранах скрыты, чтобы ссылки не стояли дважды. */
.foot-links{display:none}
.foot-grid{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.foot-card{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;
  border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel-inset);
  color:var(--muted);font-size:13px;text-decoration:none}
.foot-card b{display:block;color:var(--text);font-size:14px;font-weight:600}
.foot-card .ext{margin-left:auto;color:var(--muted);opacity:.6;flex:none}
.foot-card:hover{border-color:var(--line-accent);background:var(--chip-bg)}
.foot-card[aria-disabled="true"]{opacity:.55}

/* 6.11 Экран «Поддержать проект»: QR-плашка и адрес. На узком экране QR и
   адрес складываются в столбик (flex-wrap), на широком стоят рядом. */
.donate-box{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s4)}
.donate-qr{flex:none;padding:10px;background:#fff;border-radius:var(--radius-sm);line-height:0}
.donate-qr canvas{display:block;width:132px;height:132px;image-rendering:pixelated}
.donate-addr{flex:1;min-width:230px;display:flex;flex-direction:column;gap:8px}
/* Адрес моноширинно и с переносом: виден целиком, tap выделяет его весь */
.donate-addr code{font-family:var(--ff-mono);font-size:15px;letter-spacing:.02em;word-break:break-all;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;
  background:var(--panel-inset);user-select:all;-webkit-user-select:all}

/* ── 7. Состояния ────────────────────────────────────────────────────────── */

/* Панель с состоянием: JS ставит на контейнер data-state, CSS показывает нужный слой.
   Значения: loading | empty | error | ok */
[data-state] > [data-when]{display:none}
[data-state="loading"] > [data-when="loading"],
[data-state="empty"]   > [data-when="empty"],
[data-state="error"]   > [data-when="error"],
[data-state="ok"]      > [data-when="ok"]{display:block}

/* Скелетон — только для первой загрузки экрана. При фоновом обновлении цифры
   остаются на месте и просто бледнеют (см. .refreshing ниже). */
.sk{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.11),rgba(255,255,255,.05));
  background-size:200% 100%;animation:sh 1.4s linear infinite;border-radius:var(--radius-sm);display:block}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-line{height:14px;margin:8px 0}
.sk-line.w40{width:40%} .sk-line.w60{width:60%} .sk-line.w80{width:80%}
.sk-num{height:30px;width:56%;margin:8px 0;border-radius:var(--radius-sm)}
.sk-hero{height:44px;width:70%;margin:10px 0;border-radius:var(--radius-sm)}
.sk-chart{height:210px;border-radius:var(--radius-sm)}
.sk-tile{height:82px;border-radius:var(--radius-sm)}
.sk-card{height:168px;border-radius:var(--radius)}
.sk-row{height:52px;border-radius:var(--radius-sm);margin-bottom:var(--s2)}

/* Пусто: причина пустоты и что сделать, а не констатация.
   Класс .empty занят логикой (им помечен подставленный прочерк), поэтому .emptybox. */
.emptybox{text-align:center;padding:var(--s6) var(--s4)}
.emptybox .ic{width:56px;height:56px;margin:0 auto var(--s3);border-radius:var(--radius-sm);display:grid;place-items:center;
  border:1px solid var(--line);background:var(--chip-bg);color:var(--muted)}
.emptybox .h3{margin-bottom:6px}
.emptybox p{margin:0 auto var(--s4);max-width:38ch;font-size:14px;color:var(--muted)}
/* Значение, которого нет: прочерк не должен выглядеть как настоящая цифра */
.empty{color:var(--muted);opacity:.75}

/* Ошибка: карточка на месте содержимого, с кнопкой «Повторить» */
.errbox{text-align:center;padding:var(--s5) var(--s4);border:1px solid rgba(248,113,113,.28);
  border-radius:var(--radius-sm);background:rgba(248,113,113,.05)}
.errbox .h3{color:var(--text)}
.errbox p{margin:6px auto var(--s4);max-width:40ch;font-size:14px;color:var(--muted)}

/* Оффлайн и устаревшие данные: цифры не прячем никогда, только бледнеем */
.offline-bar{display:none;align-items:center;gap:10px;padding:10px var(--s4);font-size:13px;
  background:rgba(245,166,35,.12);border-bottom:1px solid rgba(245,166,35,.34);color:var(--orange)}
body.offline .offline-bar{display:flex}
body.offline .stale-num{opacity:.55}
body.refreshing .stale-num{opacity:.55;transition:opacity .2s}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
  border-top-color:var(--cyan);animation:sp .8s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}

/* Демо-данные: пример не должен ни на секунду выглядеть как свои деньги */
.demo-bar{position:sticky;top:0;z-index:39;display:flex;align-items:center;gap:10px;
  padding:10px var(--s4);font-size:13px;color:var(--gold);
  background:repeating-linear-gradient(135deg,rgba(245,166,35,.10) 0 10px,rgba(245,166,35,.05) 10px 20px);
  border-bottom:1px solid rgba(245,166,35,.3)}
/* Полоса демо на телефоне и боком (задача 0053, Р2, Р3): не липкая и одной
   строкой — текст и короткая кнопка «Войти»; метку «Демо-данные» прячем, текст
   полосы говорит то же самое. Длинная кнопка «Войти через Telegram» на 320–360
   вставала круглой пилюлей в три строки. Внутри карточки героя метка
   остаётся: полоса уезжает за экран. */
.demo-bar .demo-short{display:none}
@media (max-width:599px),(max-height:500px){
  .demo-bar{position:static;padding:8px var(--gutter);gap:8px;font-size:13px;line-height:1.35}
  .demo-bar > .demo-tag,.demo-bar .demo-long{display:none}
  .demo-bar .demo-short{display:inline-flex;flex:none}
}
.demo-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(245,166,35,.4);border-radius:var(--pill);padding:2px 7px;background:rgba(245,166,35,.10)}
.demo .card,.demo .bot{position:relative}
.demo .card::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:var(--radius);
  background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(245,166,35,.035) 22px 44px)}

/* Кегль до 899 — не меньше 12 px (задача 0053, Р6). Десктопные метки 10–11 px
   из разделов 6–7 на телефоне и планшете поднимаются до 12; от 900 — как
   были. Метки экранов других зон (боты.css, спутники.css, Сделки) правят их
   владельцы своими файлами. */
@media (max-width:899px){
  .demo-tag,.tag,.nav-badge,.lev,.bgrade,.ph-max,.ph-k,.where-loc,.bots-head,
  .temp .cap,.ex-state,.deal-side,.cal-kind{font-size:12px}
}

/* ── 8. Тост и модалка ───────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);
  bottom:calc(env(safe-area-inset-bottom) + 24px);z-index:60;
  display:flex;align-items:center;gap:var(--s3);max-width:calc(100vw - 32px);
  background:var(--panel-strong);border:1px solid var(--line-strong);border-radius:var(--pill);
  padding:12px 20px;font-size:14px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast[data-tone="error"]{border-color:rgba(248,113,113,.5)}
.toast button{color:var(--cyan);font-weight:600;font-size:14px;min-height:32px}

/* Модалка — только для необратимых действий, которые человек начал сам */
.dlg{position:fixed;inset:0;z-index:70;display:none;align-items:flex-end;justify-content:center;
  /* Затемнение осталось полупрозрачным сознательно: это штора, а не
     прилипшая полоса — под ней ДОЛЖНО быть видно, откуда пришёл человек.
     Размытие снято: стекла в прототипе нет. */
  background:rgba(3,6,12,.82)}
.dlg.on{display:flex}
.dlg-in{width:100%;max-width:520px;background:var(--panel-strong);border:1px solid var(--line-strong);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  box-shadow:var(--shadow);animation:up .22s cubic-bezier(.2,.7,.3,1)}
@keyframes up{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.dlg-in .field input{font-family:var(--ff);letter-spacing:.1em;text-transform:uppercase}
.dlg-actions{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}

/* ── 9. Экран входа и гостевой режим ─────────────────────────────────────── */
/* Гость ходит по демо-данным, поэтому навигация остаётся. Прячем только то,
   что для него не работает: плашку обновления и настройки. */
body.guest .sync,body.guest .only-user{display:none}
body:not(.guest) .only-guest{display:none}
/* Полоса «это пример» появляется вместе с демо-данными */
.demo-bar{display:none}
body.demo .demo-bar{display:flex}
.auth{min-height:calc(100dvh - 140px);display:flex;flex-direction:column;justify-content:center;
  gap:var(--s4);padding:var(--s6) 0 var(--s5);max-width:520px;margin:0 auto;text-align:center}
.auth .mark{width:64px;height:64px;margin:0 auto}
.auth h1{font-size:26px;font-weight:700;margin:0;letter-spacing:-.02em;
  background:var(--iris-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.auth h1{color:var(--cyan)}}
.auth p{margin:0 auto;max-width:34ch;color:var(--muted);font-size:15px}
.auth .btn.block{margin-top:var(--s2)}
.auth-safe{text-align:left;margin-top:var(--s4)}
.auth-safe .alloc-row{grid-template-columns:20px 1fr}
.auth-note{font-size:12px;color:var(--muted);opacity:.85}

/* ── 10. Планшет и десктоп ───────────────────────────────────────────────── */
@media (min-width:600px){
  .metric-grid{grid-template-columns:repeat(4,1fr)}
  .bots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}
  .foot-grid{display:grid;grid-template-columns:repeat(3,1fr)}
  .foot-card{flex-direction:column;align-items:flex-start;gap:2px;min-height:72px;justify-content:center}
  .foot-card .ext{position:absolute;top:10px;right:12px;margin:0}
  .dlg{align-items:center}
  .dlg-in{border-radius:var(--radius)}
  .dlg-actions{flex-direction:row-reverse}
  .dlg-actions .btn{flex:1}
}
@media (min-width:900px){
  body{padding-bottom:var(--s7)}
  .wrap{padding:0 var(--s6)}
  .cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s4);align-items:start}
  .cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
  .chart-box.eq{height:320px}
  .hero-num{font-size:52px}
  .big-num{font-size:32px}
  /* В тройке плиток цифры на размер меньше: «−$1 380,59» на 32px вылезает
     из плитки и наезжает на соседнюю. */
  .cols-3 .tile .big-num{font-size:24px}
  .bots-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .cmp{display:none}
  .tbl-wrap{display:block}
}
/* До 900px колонки складываются в одну */
@media (max-width:899px){
  .cols,.cols-3{display:flex;flex-direction:column;gap:var(--s4)}
}
/* Малый телефон (до 419, задача 0053 слила сюда прежний порог 359): цифры не
   должны переноситься. Кегль чисел не скачком на 360, а плавно 34→40 и
   22→26 на 320–360: на 360–419 числа остаются прежними 40 и 26 (Р7: числа
   не уменьшаются ниже нынешних), на 320 — прежние 34 и 22. */
@media (max-width:419px){
  .hero-num{font-size:clamp(34px,calc(34px + (100vw - 320px) * .15),40px)}
  .big-num{font-size:clamp(22px,calc(22px + (100vw - 320px) * .1),26px)}
  .bot-nums{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:0 var(--s3)}
}

/* ── Движение выключается разом ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── 11. Классы, которые рисует логика (web/app.js) ──────────────────────────
   Списки app.js собирает сам, если вёрстка не дала <template>. Оформление
   этих строк живёт здесь, чтобы код не знал ничего про внешний вид. */

/* Пара «подпись — значение» внутри строк списков */
.k{font-size:12px;color:var(--muted);display:block}
.v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;display:block}
.row.gap{gap:var(--s2)}

/* Запись дневника в ленте */
.entry-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:4px}
.entry-body{font-size:15px;line-height:1.55;margin:0;overflow-wrap:anywhere}
.chip.tag{text-transform:none;color:var(--cyan);border-color:rgba(255,214,51,.2);
  background:rgba(255,214,51,.10);font-size:12px;padding:0 10px;min-height:30px}

/* Движение денег */
.flow{display:flex;align-items:center;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.flow:last-child{border-bottom:0}
.flow > :first-child{flex:1;min-width:0}
.flow b{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Предложение сверки: не факт, а вопрос — отбиваем золотом и не красим цифру */
.flow.suggested{box-shadow:inset 2px 0 0 var(--gold);padding-left:10px;
  background:linear-gradient(90deg,rgba(245,166,35,.07),transparent 60%)}

/* Календарь инвестора: дата у первой выплаты дня, бейдж типа, сумма.
   Дни отбиты линией потолще, внутри дня строки без даты. */
.cal-row{display:grid;grid-template-columns:minmax(52px,auto) minmax(0,1fr) auto auto;align-items:center;
  gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.cal-row:last-child{border-bottom:0}
.cal-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cal-date{font-size:12px;color:var(--muted);white-space:nowrap}
.cal-row.new-day:not(:first-child){border-top:1px solid var(--line-strong);margin-top:2px;padding-top:12px}
.cal-kind{font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 8px;border-radius:var(--radius-xs);
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.cal-kind.dividend{color:var(--cyan);border-color:rgba(255,214,51,.32);background:rgba(255,214,51,.09)}
.cal-kind.coupon{color:var(--green);border-color:rgba(52,211,153,.34);background:rgba(52,211,153,.09)}
.cal-amt{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Короткая сводка над лентой сделок: три числа в ряд — сколько сделок,
   заработано и комиссий. На телефоне помещается в одну строку, потому что
   подписи мелкие и над числами, а не рядом. */
.deal-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:var(--s3);
  padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:var(--s2)}
/* .money по умолчанию прижат вправо (колонки таблиц) — здесь колонка своя,
   и подпись с числом обязаны стоять по одной левой границе, иначе «Результат»
   висит над пустотой, а число уезжает к соседней подписи. */
.deal-sum-cell{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.deal-sum-cell b,.deal-sum-cell .money{text-align:left}
.deal-sum-cell .label{font-size:12px}
.deal-sum-cell b{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Лента закрытых сделок (экран «Сделки»): дата, имя с подписью, сторона
   бейджем, справа объём и реализованный PnL цветом по знаку. */
.deal-list{display:flex;flex-direction:column}
.deal-row{display:grid;grid-template-columns:minmax(44px,auto) minmax(0,1fr) auto;align-items:center;
  gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.deal-row:last-child{border-bottom:0}
.deal-date{font-size:12px;color:var(--muted);white-space:nowrap}
.deal-row .nm{min-width:0}
.deal-top{display:flex;align-items:center;gap:8px;min-width:0}
.deal-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.deal-side{font-size:11px;font-weight:600;letter-spacing:.02em;padding:1px 7px;border-radius:var(--radius-xs);
  border:1px solid var(--line);white-space:nowrap;flex:none}
.deal-side.buy{color:var(--green);border-color:rgba(52,211,153,.34);background:rgba(52,211,153,.09)}
.deal-side.sell{color:var(--red);border-color:rgba(248,113,113,.32);background:rgba(248,113,113,.09)}
.deal-nums{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.deal-nums b{font-variant-numeric:tabular-nums;white-space:nowrap}
.deal-nums .small{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Подключение биржи */
.conn{display:flex;align-items:center;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--line)}
.conn:last-child{border-bottom:0}
.conn > :first-child{flex:1;min-width:0}
.conn .k{font-size:15px;text-transform:none;letter-spacing:0;color:var(--text);font-weight:600}
.conn .mono{font-family:var(--ff-mono);font-size:12px;word-break:break-all}

/* Факт посмертного разбора: цифра и, если есть, оговорка к ней */
.fact{display:grid;grid-template-columns:1fr auto;gap:4px var(--s3);align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:0}
.fact .k{font-size:13px;text-transform:none;letter-spacing:0;color:var(--muted)}
.fact .v{font-size:16px;text-align:right}
.fact .small{grid-column:1/-1;color:var(--muted)}
.fact.warn .small{color:var(--gold)}

/* Расшифровка здоровья на карточке бота (задача 0003).
   Шапка: балл крупно, слово градации рядом, момент расчёта мелким. Цвет берёт
   только само число, и ровно по правилу трёх цветов (§2 «Деньги»); подложки,
   шкалы и термометра тут нет — §8.4. */
.health-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}
.health-head #healthScore{font-size:30px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.health-head .health-grade{font-size:14px;font-weight:600}
/* Строка компонента: имя слева, вклад справа и под ним балл с весом.
   Разметка своя, а не .fact: там оговорка уезжает во всю ширину влево, а
   здесь подстрока должна стоять ПОД числом и по правому краю. */
.hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s3);align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:0}
/* Сброс глобального .k, как у .fact .k: названия компонентов — это обычные
   названия строк, а не ярлыки колонок, и капслок на «Техническое состояние»
   только мешает читать. */
.hrow .k{font-size:13px;color:var(--muted);text-transform:none;letter-spacing:0}
.hrow .v{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right}
.hrow .v b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
/* «Не посчитан» — слово, а не число: ноль здесь означал бы «плохо». */
.hrow .v .word{font-size:14px;color:var(--muted)}
.hrow .v .micro{color:var(--muted);font-variant-numeric:tabular-nums}
/* Причина, по которой компонент не посчитан, и строка-предупреждение
   перехвата. Золотым красится рамка и мелкий текст, но не число: золотого
   числа в системе не бывает. */
.hnote{font-size:13px;color:var(--muted);padding:7px 0}
.hnote.warn{color:var(--gold);border-left:2px solid rgba(245,166,35,.45);
  padding-left:10px;margin-top:var(--s2)}

/* Поле с ошибкой и место под её текст */
input.bad,textarea.bad,select.bad{border-color:rgba(248,113,113,.55)}
[data-fm-error]{font-size:13px;color:var(--red);margin:2px 0 0}
[data-fm-error]:empty{display:none}

/* Загрузка: скелетон живёт в отдельном блоке и виден только на первой загрузке.
   При фоновом обновлении цифры остаются на месте и просто бледнеют. */
.skel{display:none}
.skel.loading{display:block}
.loading .btn,.btn[aria-busy="true"]{opacity:.7}

/* Плашка обновления в работе и устаревшие данные */
.sync.busy{opacity:.75}
body.stale .sync .dot{background:var(--gold)}
/* Ключа нет: в этих местах нечего показывать, пока не подключена биржа */
body.nokey [data-need-key]{display:none}

/* ── 12. Радио-чипы: выбор, который видит форма ──────────────────────────────
   Тип движения денег и уверенность в записи — это поля формы, а не «чипы
   с aria-pressed»: иначе значение не уедет на сервер. Сам input скрыт,
   но остаётся фокусируемым и доступным клавиатуре. */
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip.pick:has(input:checked){border-color:var(--line-strong);color:var(--text);
  background:rgba(255,214,51,.12);box-shadow:inset 0 0 0 1px rgba(255,214,51,.18)}
.chip.pick:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}
.moodpick .pick{flex:1;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--panel-inset);color:var(--muted);font-weight:600;display:grid;place-items:center;
  font-variant-numeric:tabular-nums}
.moodpick .pick:has(input:checked){color:var(--text);border-color:var(--line-strong);background:rgba(255,214,51,.12)}
.moodpick .pick:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}
/* Запасной путь для браузеров без :has — цвет по соседству со скрытым input */
.pick input:checked ~ span{color:var(--text)}

/* Вывод посмертного разбора: он идёт первым, остальное на экране его доказывает */
.verdict{font-size:17px;line-height:1.45;font-weight:600}

/* ── 13. Чат поддержки (#v-support) ─────────────────────────────────────────
   Переписка живёт внутри приложения: наши пузыри справа, ответы поддержки
   слева. Никакой библиотеки — обычный столбец блоков, который сам скроллится
   вниз. Высота лога ограничена вьюпортом: на телефоне поле ввода не должно
   уезжать под клавиатуру, поэтому лог сжимается, а форма остаётся видимой. */
.chat{display:flex;flex-direction:column}
.chat-log{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);
  max-height:min(56vh,520px);overflow-y:auto;overscroll-behavior:contain}
.chat-log:empty{display:none}
.chat-empty{margin:0;padding:var(--s5) var(--s4);text-align:center}
.msg{max-width:min(84%,560px);padding:10px 14px;border-radius:var(--radius-sm);font-size:15px;line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere}
/* Наше сообщение — справа, голубым; ответ поддержки — слева, на панели */
.msg.mine{align-self:flex-end;background:var(--accent-bg);
  border:1px solid var(--accent-border);border-bottom-right-radius:6px}
.msg.theirs{align-self:flex-start;background:var(--panel-inset);border:1px solid var(--line);
  border-bottom-left-radius:6px}
.msg .when{display:block;margin-top:4px;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.msg.failed{border-color:rgba(248,113,113,.4)}
/* Разделитель дня: тонкая подпись по центру, без линий и рамок */
.chat-day{align-self:center;font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;opacity:.75}
.chat-form{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end;
  padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--line)}
.chat-form textarea{flex:1 1 220px;min-width:0;min-height:44px;max-height:160px;resize:vertical;
  padding:11px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel-inset);
  color:var(--text);font:inherit;font-size:15px}
.chat-form textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--line-strong)}
/* Кнопка прижата вправо: на широком экране она стоит рядом с полем, на узком
   переносится на свою строку — и там левый край под полем выглядел бы обрывком. */
.chat-form .btn{flex:0 0 auto;min-height:44px;margin-left:auto}
.chat-err{flex:1 0 100%;color:var(--red);font-size:13px}
.chat-err:empty{display:none}
.chat-foot{display:flex;justify-content:space-between;gap:var(--s3);
  padding:0 var(--s4) var(--s4);font-variant-numeric:tabular-nums}

/* Полоса «смотрю чужой аккаунт»: жёлтая, поверх всего, с кнопкой выхода.
   Видеть чужие цифры и не помнить об этом нельзя (31.08.2026). */
.viewas{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:center;
  gap:var(--s3);flex-wrap:wrap;padding:8px 14px;font-size:13px;font-weight:600;
  color:#111827;background:var(--accent);border-bottom:1px solid rgba(0,0,0,.25)}
.viewas .btn{min-height:32px;background:rgba(0,0,0,.12);color:#111827;border-color:rgba(0,0,0,.25)}

/* ═══ 9. Обзор, Сделки, Биржи — композиция и числа макета ═══════════════════
   Классы ov-/sc-/exn- живут только на трёх экранах, поэтому правка здесь не
   задевает остальные 13. Значения — с web/demo/botscan.html (задача 0010,
   раздел 5), в комментарии к каждому блоку — что взято. */

/* ── 9.1 Обзор: «Капитал сейчас» ──────────────────────────────────────────
   Макет: число 44/700, трекинг −.02em, межстрочное 1; дельта 16/600 справа.
   На узком экране 44px переносит доллары, поэтому до 420px кегль меньше. */
.ov-hero .ov-big{font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1}
@media (min-width:420px){.ov-hero .ov-big{font-size:44px}}
.ov-hero .ov-delta{font-size:18px;font-weight:600}
/* «Капитал сейчас» (0036, Р11): белым, как заголовки, и шаг сетки 8px до суммы. */
.ov-hero .ov-cap{color:var(--text)}
/* «Капитал сейчас» и подпись периода обычным шрифтом, без капслока и
   разрядки; «Капитал сейчас» крупнее подписи периода (0038, Р7). */
.ov-hero .ov-cap{text-transform:none;letter-spacing:normal}
.ov-hero .ov-cap{font-size:16px;font-weight:500}
.ov-hero .ov-cap-row{margin-bottom:var(--s2)}
/* Период и изменение (0036, Р12): сразу под суммой той же колонкой слева на
   любой ширине, а не прижатыми к правому краю. Процента в строке нет
   (просьба владельца 26.10.2026). */
.ov-hero .ov-period{flex:1 1 100%;text-align:left}
/* Ответ выбранного периода ещё идёт (0038, Р5): подпись чужого периода не
   видна, вместо изменения прочерк — число и подпись меняются вместе. */
.ov-hero .ov-period[data-wait] .ov-delta > *{display:none}
.ov-hero .ov-period[data-wait] .ov-delta::before{content:'—';color:var(--muted)}
/* Раскладка изменения (0046): три строки мелким шрифтом под изменением,
   подпись слева, сумма справа; «?» у «прочего» — общая механика .where.
   Пока ответ периода идёт, раскладка чужого периода не видна. */
.ov-hero .ov-split{margin-top:8px;max-width:360px;font-size:13px;color:var(--muted)}
.ov-hero .ov-split-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0}
.ov-hero .ov-split-row.where{border-bottom:0}
.ov-hero .ov-split .where-name{display:inline-flex;align-items:center;gap:6px}
/* Длинная подпись остатка (0052, «Монеты в открытых позициях подешевели»)
   переносится, а не раздвигает карточку: на 390 числа уезжали за край. */
.ov-hero .ov-split .where-name{min-width:0}
.ov-hero .ov-split .where-name > :first-child{white-space:normal;overflow:visible;text-overflow:clip}
.ov-hero .ov-split b{font-weight:600;white-space:nowrap}
/* Остаток в ноль — строка скрыта (задача 0052): flex перебивал hidden. */
.ov-hero .ov-split-row[hidden]{display:none}
.ov-hero .ov-period[data-wait] .ov-split{visibility:hidden}
.ov-hero .chips{gap:6px;margin-top:10px}
/* Чипы периода героя до 899 переносятся (задача 0053, Р4): с «Сегодня» из
   0052 на 390 «Всё время» уезжал за край. Зазор строк 12 — под добор касания. */
@media (max-width:899px){.ov-hero .chips{row-gap:16px}}
/* Строки «По биржам»: 13px 0, 16px, граница .06; точка 10 круглая, имя 500,
   сумма 600 по правому краю. */
.ov-rows{gap:0}
.ov-rows .alloc-row{padding:13px 0;font-size:16px;border-bottom:1px solid rgba(255,255,255,.06);gap:12px}
.ov-rows .alloc-row:last-child{border-bottom:1px solid rgba(255,255,255,.06)}
.ov-rows .alloc-row .sw{width:10px;height:10px;border-radius:50%}
.ov-rows .alloc-row .amt{font-size:16px;font-weight:600;min-width:104px}
.ov-rows .alloc-row .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.ov-rows .alloc-row .pct{font-size:13px}
/* Полоса «По биржам» (задача 0033, Р1.3): стопка долей высотой 8px над
   строками. Ширины сегментов — проценты, поэтому на 390 полоса не шире
   карточки; зазор 2px между сегментами — от общей .allocbar. */
.ov-hero .ov-bar{height:8px;margin-top:10px}
/* Заголовки карточек «Обзора» — как на «Сделках» (0028): 20/600 цветом
   текста, серым на экране только второстепенное. */
#v-dash .h2{font-size:20px;font-weight:600;color:var(--text)}

/* Одна ссылка на разбор заработка вместо дубля блоков с Сделок (0009).
   Вид — вложенная плашка макета: #0A0F1C, радиус 10. */
.ov-link{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  width:100%;margin-top:var(--s3);min-height:44px;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-app);
  color:var(--text);font:600 14px/1.3 var(--ff);text-align:left;cursor:pointer}
.ov-link:hover{border-color:var(--accent);color:var(--accent)}
.ov-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ov-link-arrow{flex:none;color:var(--accent);font-size:16px}

/* ── 9.2 Обзор: «Из чего состоит» (до 0033 — «Где деньги») ─────────────────
   Макет: пончик 280×280 в колонке 300px, список рядом,
   зазор 40. Строка списка: 14px 0, 16px, граница .06, точка 10 круглая,
   имя 600, доля 13px .5, сумма 600 шириной от 100. Пончик 280 на любой
   ширине: на 390 карточке остаётся 322px, и 280 помещается; уже 280 —
   по ширине карточки, кругом. Заголовок — 20px, правило #v-dash .h2 выше. */
.ov-where .chart-box.donut{width:min(280px,100%);height:auto;aspect-ratio:1;margin:0 auto}
.ov-where .where-row{padding:14px 0;font-size:16px;gap:12px;min-height:0}
.ov-where .where{border-bottom:1px solid rgba(255,255,255,.06)}
.ov-where .where:last-child{border-bottom:0}
.ov-where .where-row .sw{width:10px;height:10px;border-radius:50%}
.ov-where .where-row .nm{font-weight:600}
.ov-where .where-row .pct{font-size:13px;color:rgba(231,234,240,.5)}
.ov-where .where-row b{font-size:16px;font-weight:600;min-width:100px;text-align:right}
.ov-note{font-size:13px;color:var(--muted);line-height:1.6}
/* Малый телефон (задача 0053, Р7): сумма строки не держит 100 px — на 320
   имя «В ботах» рвалось по буквам в колонку шириной 40 px. */
@media (max-width:419px){
  .ov-where .where-row{gap:8px}
  .ov-where .where-row b{min-width:0}
}
/* Под графиком капитала (0036, Р2, Р6): легенда точек слева, валюта справа.
   Точка того же размера, что на линии (радиус 6). */
.eq-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap}
.eq-legend{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.eq-legend[hidden]{display:none}
.eq-key{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--text)}
.eq-dot{width:12px;height:12px;border-radius:50%;flex:none}
.eq-cur{margin-left:auto}
@media (min-width:900px){
  .ov-where{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:center}
  .ov-where .donut-legend{flex:none;width:auto}
}

/* ── 9.3 Сделки ───────────────────────────────────────────────────────────
   Макет: h1 24/700 и чипы периода в одну строку (gap 16), карточка разбора
   двумя столбцами с зазором 32; «заработано» 44/700; строки «из чего
   складывается» 11px 0, 15px, граница .06. */
/* Прижато к #v-summary: имя .sc-head занято в web/боты.css шапкой таблицы
   сценариев (грид в пять колонок, 10px, капслок, линия снизу), и без
   прижима оно ложилось на шапку Сделок — заголовок капслоком наезжал на
   чипы периода. Сбрасываем всё, что там задано. */
/* Правка 0028: заголовок отдельной строкой, под ним строка периода. */
#v-summary .sc-head{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;
  margin:0;padding:0;border-bottom:0;grid-template-columns:none;font-size:inherit;
  text-transform:none;letter-spacing:0;color:inherit}
#v-summary .sc-period{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;max-width:100%}
#v-summary .sc-head .sc-chips{gap:6px;max-width:100%}
.sc-hero .sc-col .ov-rows .alloc-row{padding:11px 0;font-size:15px}
.sc-hero .sc-col .ov-rows .alloc-row .amt{font-size:15px}
@media (min-width:900px){
  .sc-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px}
}
/* Задача 0027: страница вдвое короче. Чипы мельче, число 40 (до 420 — 34)
   в одну строку, строки разбивки без линий, график и вклад ботов рядом. */
.sc-ex-item b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
/* ── Задача 0028: облик PnL-экрана ────────────────────────────────────────
   Сегментный переключатель периода и плашка дат (§6.1), плашки разбивки и
   плитки сделок и оборота (§6.2), график со шкалой и столбик итогов дней
   (§6.3), таблица «Сделки по ботам» с раскрытием (§6.4). Цвет — правило
   0016: зелёный и красный только у главного числа, столбцов и точек плашек. */
/* Без прокрутки вбок (задача 0060, Р8): семь вариантов помещаются в ширину
   контента; до 899 — перенос (0053), до 599 — ровный блок (0060, Р2). */
#v-summary .sc-chips{gap:0;padding:3px;background:var(--bg-app);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--pill);flex-wrap:wrap}
/* Сегмент периода и таб ботов «Открытые / Закрытые» — один компонент
   (задача 0032): размер, вес, высота строки и цвета только здесь. */
#v-summary .sc-chips .chip.period,.sc-tab{padding:6px 12px;font-size:13px;font-weight:600;line-height:1.5;
  border:0;background:none;color:rgba(231,234,240,.7);white-space:nowrap;flex:none}
#v-summary .sc-chips .chip.period.on,#v-summary .sc-chips .chip.period[aria-pressed="true"],.sc-tab.on{
  background:var(--accent-bg);color:var(--accent)}
.sc-dates{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--pill);
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong);color:var(--text);
  font:inherit;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.sc-dates:hover{border-color:var(--accent-border)}
.sc-dates svg{color:var(--muted);flex:none}
.sc-dates span{font-size:14px;color:var(--text)}
#v-summary .sc-head .sc-dates{padding:8px 16px;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
#v-summary .sc-head .sc-dates svg{color:var(--text)}
.sc-note[hidden]{display:none}
.sc-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sc-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:var(--pill);
  background:rgba(255,255,255,.04);border:1px solid var(--line);white-space:nowrap}
.sc-pill-dot{display:block;width:8px;height:8px;border-radius:50%;flex:none}
.sc-pill span{font-size:13px;color:var(--muted)}
.sc-pill b{font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
/* Правка 0028: «Сделок ботов» и «Оборот» — единым рядом KPI под плашками,
   отделённым линией, а не двумя плитками сбоку. Подпись над числом,
   число 22/600 белым, «с 9 окт.» — рядом с подписью. */
.sc-kpis{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.sc-kpis:not(:has(.sc-kpi:not([hidden]))){display:none}
.sc-kpi{min-width:0;display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:8px;row-gap:2px;align-items:baseline}
.sc-kpi[hidden]{display:none}
.sc-kpi-label{font-size:13px;color:var(--muted);grid-column:1}
.sc-kpi-num{font-size:22px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;
  grid-column:1 / -1;grid-row:2;text-align:left}
.sc-kpi-sub{font-size:13px;color:var(--muted);grid-column:2;grid-row:1}
.sc-kpi-sub[hidden]{display:none}
.sc-days-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.chart-box.sc-days{height:200px}
@media (max-width:899px){.chart-box.sc-days{height:160px}}
/* Правка 0028: итоги дней — рядом блоков под графиком, график во всю
   ширину карточки; четыре в ряд от 900 (до 0053 — от 720), 2×2 ниже. */
.sc-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sc-stats[hidden]{display:none}
@media (min-width:900px){.sc-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sc-stat{padding:10px 12px;border-radius:var(--radius-sm);background:var(--panel-inset);display:flex;flex-direction:column;gap:2px;min-width:0}
.sc-stat-label,.sc-stat-sub{font-size:12px;color:var(--muted)}
.sc-stat b{font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:left}
/* Табы «Открытые / Закрытые» (правка 0028): сегменты как у периода.
   Размер, вес и цвета — общим правилом с .chip.period выше (задача 0032);
   число — тем же весом и цветом, что подпись, цифры одной ширины. */
.sc-tabs{display:inline-flex;gap:0;padding:3px;margin:0 0 16px;background:var(--bg-app);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--pill);max-width:100%}
.sc-tab{display:inline-flex;align-items:center;gap:6px;border-radius:var(--pill)}
.sc-tab b{font-weight:inherit;color:inherit;font-variant-numeric:tabular-nums}
.sc-bt-none{margin:4px 0 8px;font-size:14px;color:var(--muted)}
/* Таблица ботов: от 900 — шесть столбцов, до 900 — три (шкала 0053, было 720) (шеврон, имя с
   подстрокой, итог с долей). Числа по правому краю. */
.sc-bt-head{display:none}
.sc-bt-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:10px;
  width:100%;min-height:52px;padding:8px 0;font:inherit;color:var(--text);background:none;border:0;
  border-top:1px solid var(--line);text-align:left;cursor:pointer}
.sc-bt-chev{width:12px;height:12px;color:var(--muted);transition:transform .15s}
.sc-bt-row[aria-expanded="true"] .sc-bt-chev{transform:rotate(90deg)}
.sc-bt-name{display:flex;flex-direction:column;min-width:0}
.sc-bt-pair{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-bt-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-bt-sub.wide,.sc-bt-cell{display:none}
.sc-bt-net{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.sc-bt-net b{font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-bt-net span{font-size:12px;color:var(--muted)}
.sc-bt-share{align-items:center;justify-content:flex-end;gap:8px;font-size:13px;color:var(--muted)}
.sc-bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.sc-bt-share .sc-bar{width:64px;flex:none}
.sc-bar i{display:block;height:100%;border-radius:3px;background:rgba(231,234,240,.35)}
@media (min-width:900px){
  .sc-bt-head,.sc-bt-row{display:grid;grid-template-columns:20px minmax(0,1fr) 90px 120px 140px 120px;gap:12px}
  .sc-bt-head{font-size:12px;color:var(--muted);padding:0 0 8px}
  .sc-bt-head .r{text-align:right}
  .sc-bt-cell{display:block;text-align:right;font-size:14px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
  .sc-bt-cell.sc-bt-share{display:inline-flex}
  .sc-bt-sub.wide{display:block}
  .sc-bt-sub.narrow,.sc-bt-net span{display:none}
}
/* Таблицы пар «Спот» и «Фьючерсы» (задача 0033, Р4): разметка строк — та
   же, что у таблицы ботов, но строки не раскрываются. Своя сетка: колонки
   шеврона и итога пустые и уходят совсем, остаются пара | сделок | оборот |
   доля без хвоста справа; до 900 — пара и доля. Курсор обычный, без
   подсветки: «рука» над строкой, которая не нажимается, обещает действие. */
:is(#sumSpotCard,#sumFuturesCard) .sc-bt-row{grid-template-columns:minmax(0,1fr) auto;cursor:default}
:is(#sumSpotCard,#sumFuturesCard) .sc-bt-row:hover{background:none}
:is(#sumSpotCard,#sumFuturesCard) .sc-bt-row > :first-child,
:is(#sumSpotCard,#sumFuturesCard) .sc-bt-head > :first-child,
:is(#sumSpotCard,#sumFuturesCard) .sc-bt-head > :last-child{display:none}
@media (min-width:900px){
  :is(#sumSpotCard,#sumFuturesCard) .sc-bt-head,
  :is(#sumSpotCard,#sumFuturesCard) .sc-bt-row{grid-template-columns:minmax(0,1fr) 90px 140px 160px}
  :is(#sumSpotCard,#sumFuturesCard) .sc-bt-row > .sc-bt-net{display:none}
}
/* Задача 0064, Р5: колонки «Заработано», «Комиссии», у фьючерсов «Плечо».
   От 900: пара | сделок | оборот с полоской доли | заработано | комиссии
   (| плечо); до 900 — пара с подстрокой «×плечо · сделок · оборот» и
   справа «Заработано» со знаком (прежняя клетка .sc-bt-net). Пояснение под
   заголовком «Фьючерсов» — одна строка мелким, не шире --measure. */
.sc-pr-note{margin:0 0 10px;max-width:var(--measure,72ch)}
.sc-pr-row .sc-bt-net > span{font-size:14px;font-weight:600;color:var(--text)}
.sc-pr-row .sc-bt-net > span.pos,.sc-pr-row .sc-pr-net.pos{color:var(--green)}
.sc-pr-row .sc-bt-net > span.neg,.sc-pr-row .sc-pr-net.neg{color:var(--red)}
.sc-pr-row .sc-bt-net b.pos{color:var(--green)}
.sc-pr-row .sc-bt-net b.neg{color:var(--red)}
@media (min-width:900px){
  #sumSpotCard .sc-bt-head,
  #sumSpotCard .sc-bt-row{grid-template-columns:minmax(0,1fr) 80px 190px 120px 100px}
  #sumFuturesCard .sc-bt-head,
  #sumFuturesCard .sc-bt-row{grid-template-columns:minmax(0,1fr) 80px 190px 120px 100px 70px}
  .sc-bt-cell.sc-pr-vol{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px}
  .sc-pr-vol .sc-bar{width:56px;flex:none}
  .sc-pr-row .sc-bt-cell[title]:not(.sc-pr-vol){color:var(--muted)}
}
.sc-bt-days{background:var(--panel-inset);border-radius:var(--radius-sm);padding:4px 12px;margin:0 0 10px}
.sc-bt-days[hidden]{display:none}
@media (min-width:900px){.sc-bt-days{margin-left:32px}}
.sc-bd-head{display:none}
.sc-bd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;
  padding:8px 0;font-size:13px;color:var(--text);border-top:1px solid var(--line)}
.sc-bd-row:first-of-type{border-top:0}
.sc-bd-row .sc-bd-net{font-size:14px;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sc-bd-row .sc-bd-parts{grid-column:1 / -1;font-size:12px;color:var(--muted)}
.sc-bd-cell{display:none}
.sc-bd-skel{height:34px;border-radius:6px;background:rgba(255,255,255,.04);margin:4px 0}
.sc-bd-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 0 6px;font-size:12px;color:var(--muted)}
.sc-bd-foot .linklike,.sc-bd-more{font:inherit;font-size:13px;color:var(--accent);background:none;border:0;padding:4px 0;cursor:pointer}
@media (min-width:900px){
  .sc-bd-head,.sc-bd-row{display:grid;grid-template-columns:90px 80px 1fr 1fr 1fr 1fr;gap:12px;align-items:center}
  .sc-bd-head{font-size:12px;color:var(--muted);padding:6px 0}
  .sc-bd-head span:not(:first-child){text-align:right}
  .sc-bd-row{min-height:34px;padding:0}
  .sc-bd-row .sc-bd-parts,.sc-bd-row .sc-bd-mob{display:none}
  .sc-bd-cell{display:block;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
  .sc-bd-cell.l{text-align:left}
  .sc-bd-row .sc-bd-net{font-size:13px;font-weight:400}
  .sc-bd-row.closed .sc-bd-cell.wide{grid-column:1 / 6;text-align:left}
}
/* Правка 0028 (автор, 23.10): одна гарнитура на всём экране — без
   моноширинной даже в монограмме монеты; заголовок экрана и карточек
   крупнее и белые (размер h1 с задачи 0031 — общий, в .h1), между заголовком карточки и содержимым больше воздуха.
   Серым остаётся второстепенное: даты, подписи таблиц и плиток. */
#v-summary,#v-summary *{font-family:var(--ff)}
#v-summary .h2{font-size:20px;font-weight:600;color:var(--text)}
#v-summary .card-head{margin-bottom:20px}
/* Правка 0028: главная цифра крупнее и с воздухом над и под ней. */
#v-summary .sc-hero .hero-num{font-size:56px;white-space:nowrap;line-height:1.1;margin:10px 0 6px}
@media (max-width:419px){#v-summary .sc-hero .hero-num{font-size:42px}}
#v-summary .sc-hero .label{color:var(--text);font-size:13px;font-weight:500}
/* «Заработано за период, чистыми» (0038, Р7, Д3): обычным шрифтом, 16 px. */
#v-summary .sc-hero #sumHeroLabel{font-size:16px;text-transform:none;letter-spacing:normal}
/* «?» у плиток KPI (0038, Р7): механизм подсказки «Распределения» (0036), но
   плитка не строка списка — без разделителя, подсказка шириной по тексту. */
.sc-kpi.where{border-bottom:0}
.sc-kpi .where-name{display:inline-flex}
.sc-kpi .where-q[hidden]{display:none}
.sc-kpi .where-name > :first-child{overflow:visible}
#v-summary .sc-hero .sc-pills{margin-top:18px}
#v-summary .sc-hero .hero-num.muted,#v-summary .sc-hero .hero-num.muted .sg{color:var(--muted)}
.sc-note{margin:6px 0 0;font-size:13px;color:var(--muted)}
.sc-ex{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:13px}
.sc-ex[hidden]{display:none}
.sc-ex-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sc-ex-item .sc-dot{width:8px;height:8px;border-radius:50%;flex:none}
.sc-row[hidden]{display:none}
.sc-bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.sc-bar i{display:block;height:100%;border-radius:3px;background:rgba(231,234,240,.35)}
.sc-minus{display:block;margin-top:6px;padding:4px 0;font:inherit;font-size:13px;color:var(--muted);
  background:none;border:0;text-align:left;cursor:pointer}
.sc-minus[hidden]{display:none}
/* Скелет только при первой загрузке: при смене периода числа бледнеют на
   месте, и страница не прыгает. */
#v-summary .skel.loading:has(+ [data-fm-when="summary"]:not([hidden])){display:none}
.sc-log-note{margin:0;font-size:14px;color:var(--muted)}
.sc-log-note + .sc-log-note{margin-top:4px}
.sc-log .deal-sum,.sc-log #dealsChips{margin-top:var(--s3)}
/* Строка закрытой сделки — сетка макета 110px 36px 1fr auto, gap 14,
   12px 0, граница .06; дата 13px .5; монограмма 32 кругом, 9px Mono;
   пара 15/600; метка стороны — пилюля 11px 2×7 с цветной границей;
   сумма 15/600. До 600px колонки сжаты под 390px. */
.sc-deal{grid-template-columns:minmax(44px,auto) 30px minmax(0,1fr) auto;gap:14px;padding:12px 0;
  border-bottom-color:rgba(255,255,255,.06)}
.sc-deal .deal-date{font-size:13px;color:rgba(231,234,240,.5)}
.sc-deal .deal-name{font-size:15px;font-weight:600}
.sc-deal .deal-side{font-size:11px;font-weight:400;padding:2px 7px;border-radius:var(--pill);background:none}
.sc-deal .deal-side.buy{border-color:rgba(52,211,153,.4)}
.sc-deal .deal-side.sell{border-color:rgba(248,113,113,.4)}
.sc-deal .where-loc{font-size:12px;color:rgba(231,234,240,.5)}
.sc-deal .deal-nums b{font-size:15px;font-weight:600}
.sc-tkr{width:30px;height:30px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--mono-chip);color:var(--text);
  font:600 9px/1 var(--ff-mono);overflow:hidden}
.sc-tkr:empty{background:none}
@media (min-width:600px){
  .sc-deal{grid-template-columns:110px 36px minmax(0,1fr) auto}
  .sc-tkr{width:32px;height:32px}
}
/* Задача 0053, Р4: до 899 ряд периода переносится строками, а не уезжает
   вбок — все варианты видны сразу, выбранный всегда на экране (на 320
   после «Свой период» прокрутка уводила «День, Неделя, Месяц» за край).
   Прокрутка заодно резала невидимый добор чипов до 44 (.chip::after),
   поэтому снимается и overflow. До 599 сегментная плашка распадается на
   отдельные пилюли: две строки внутри одной капсулы читаются как сбой.
   Зазор строк 14: добор чипа (8 сверху и снизу) не залезает в соседнюю
   строку, и угол квадрата 44 ловит свой чип, а не соседний. */
@media (max-width:899px){
  #v-summary .sc-head .sc-chips{flex-wrap:wrap;overflow:visible;row-gap:14px}
}
@media (max-width:599px){
  #v-summary .sc-head .sc-chips{gap:14px 6px;padding:0;background:none;border:0;border-radius:0}
  /* Контур пилюли — тенью внутрь, а не рамкой (возврат 0053, п.3): рамка
     добавляла 2 px, и чип периода (33,5) расходился с табом ботов (31,5) —
     регрессия 0032 TC-1 «таб = сегмент периода». */
  #v-summary .sc-chips .chip.period{border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);border-radius:var(--pill)}
  #v-summary .sc-chips .chip.period.on,#v-summary .sc-chips .chip.period[aria-pressed="true"]{box-shadow:none}
}
/* Задача 0053, Р5: до 899 каждая цель «Сделок» ловит касание в квадрате
   44×44 вокруг центра. Плашка дат, «Свернуть», «Все боты» и ссылки под
   таблицей дней — ростом 44; табы ботов и «?» у плиток KPI — невидимым
   добором ::after, как у .chip: вид не меняется. Чипы площадок «Сделок по
   одной» — переносом вместо прокрутки (прокрутка резала добор чипа). */
@media (max-width:899px){
  #v-summary .sc-head .sc-dates{min-height:44px}
  #v-summary .sc-tab{position:relative}
  #v-summary .sc-tab::after{content:'';position:absolute;inset:-6px 0}
  #v-summary .sc-kpi .where-q{position:relative;z-index:1}
  #v-summary .sc-kpi .where-q::after{content:'';position:absolute;inset:-14px}
  #v-summary .sc-minus{display:flex;align-items:center;min-height:44px;margin-top:0}
  #v-summary #sumBotsMore,#v-summary #dealsMore{min-height:44px}
  #v-summary .sc-bd-foot .linklike,#v-summary .sc-bd-more{display:inline-flex;align-items:center;min-height:44px}
  #v-summary #dealsChips{flex-wrap:wrap;overflow:visible;row-gap:14px}
}
/* Задача 0053, Р6: до 899 на «Сделках» нет текста мельче 12px — монограмма
   монеты (была 9) и метка «Покупка / Продажа» (была 11) в строке сделки. */
@media (max-width:899px){
  #v-summary .sc-tkr{font-size:12px;letter-spacing:-.04em}
  #v-summary .sc-deal .deal-side{font-size:12px}
}
/* Задача 0053, Р8: итоги «Сделок по одной» до 599 — две колонки, а не
   четыре по 84px: на 360–390 «−$12 315,67» и «$1 235 467,89» в 17px
   вылезали из своей ячейки на соседнюю. */
@media (max-width:599px){
  #v-summary .deal-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Задача 0053, Р8 и TC-3: строка сделки до 599. Четыре колонки на 320–360
   оставляли имени пары 40px, метка «Продажа» наезжала на сумму, имя
   резалось до «E…». Дата уходит строкой над сделкой, метка стороны
   переносится под имя, если рядом не помещается. */
@media (max-width:599px){
  #v-summary .sc-deal{grid-template-columns:30px minmax(0,1fr) auto;gap:4px 12px}
  #v-summary .sc-deal .deal-date{grid-column:1 / -1}
  #v-summary .sc-deal .deal-top{flex-wrap:wrap;row-gap:4px}
}

/* ── 9.4 Биржи ────────────────────────────────────────────────────────────
   Макет: экран шириной до 1100, h1 24/700, заголовок раздела 17/600,
   между карточками 10. Карточка площадки — #111827, граница .08, радиус 14,
   14×18, зазор 14; знак 40 с радиусом 10; имя 15/600; подпись 12px .55;
   состояние — пилюля 11px 2×8 с зелёной границей .4; кнопка «обновить» —
   кружок 36, «отключить» — контур с красным наведением, «подключить» —
   малая жёлтая пилюля. «Почему это безопасно» — 16×18, заголовок 16/600. */
/* Колонка «Бирж» — по центру рабочей области (просьба автора, 2026-10-22):
   список строк с кнопкой справа на всю ширину 1440 читался прижатым влево
   с пустой третью справа. Только этот экран; #main и прочие не тронуты. */
#v-key{max-width:880px;margin-inline:auto}
#v-key .section-title{margin:22px 0 10px}
#v-key .section-title:first-child{margin-top:0}
#v-key .section-title .h2{font-size:17px}
.exn-list{gap:10px}
.exn-list .ex-row{padding:14px 18px;min-height:68px;gap:14px;border-radius:var(--radius);
  background:var(--card);border-color:var(--line)}
.exn-list .ex-logo,.exn-list .wal-logo{width:40px;height:40px;border-radius:var(--radius-sm);border:0;
  background:var(--mono-chip)}
.exn-list .ex-name{font-size:15px;font-weight:600}
.exn-list .ex-sub{margin-top:2px;font-size:12px;color:var(--muted)}
.exn-list .ex-bal{color:var(--text);font-weight:600}
.exn-list .ex-state{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--pill);
  background:none;letter-spacing:0}
.exn-list .ex-state.ok{color:var(--green);border-color:rgba(52,211,153,.4);background:none}
.exn-list .ex-state.err{color:var(--red);border-color:rgba(248,113,113,.4);background:none}
.exn-list .ex-act{gap:8px}
.exn-list .wal-group{min-height:68px}
/* Карточка неподключённой площадки кликается целиком (2026-10-22) */
.exn-list .ex-row[role="button"]{cursor:pointer;transition:border-color .2s,background .2s}
.exn-list .ex-row[role="button"]:hover,.exn-list .wal-group:hover{border-color:var(--line-strong);background:var(--panel-strong)}
.exn-list .ex-row[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#v-key .ex-safe{padding:16px 18px}
#v-key .ex-safe .h2{font-size:16px}
#v-key .ex-safe .alloc-row{font-size:14px;color:rgba(231,234,240,.75);border-bottom:0;padding:3px 0}
/* Задача 0053 (Р8): сумма и дата в строке биржи не режутся многоточием.
   Базовый .ex-sub резал строку одной линией — на 360 дата подключённого
   Pionex обрывалась на «24 окт…». Не помещается — строка переносится, а
   сумма остаётся целой. Многоточие остаётся только у имён. */
#v-key .ex-sub{white-space:normal;overflow:visible;text-overflow:clip}
#v-key .ex-bal{white-space:nowrap}
/* Задача 0053 (Р5/Р6): «Биржи» на телефоне и планшете, до 899 px.
   Малые кнопки («Подключить» 36, «Удалить» и «Отмена» 38) добирают касание
   до 44 невидимым полем ::after — пилюли макета не растут. Глаз секрета уже
   стоит абсолютно внутри поля — добор ему отдельный, без position. Заголовок
   «Почему это безопасно» — 24 по высоте: поле касания растёт полями, а
   отрицательные поля держат карточку прежней высоты. Пилюля состояния —
   12 px вместо 11. */
@media (max-width:899px){
  #v-key .btn:not(.key-eye){position:relative}
  #v-key .btn::after{content:'';position:absolute;inset:-5px 0}
  #v-key .key-eye::after{inset:-5px -4px}
  #v-key .ex-safe > summary{padding:10px 0;margin:-10px 0}
  #v-key .ex-state{font-size:12px}
}

/* ── Задача 0060, Р1: строки подключённого одной высоты на телефоне ────────
   До 599 все подключённые строки (биржи, кошельки, площадка на паузе) — две
   строки текста ровно: имя с бейджем в одну строку, подпись в одну строку с
   многоточием (полный текст в title; правило 0053 Р8 «подпись переносится»
   до 599 заменено). Чтобы влезло: «Подключено» — зелёная точка у имени
   (слово скрыто глазу и остаётся в aria-label), «Удалить» — иконка 44×44
   (слово в aria-label). Бейджи-исключения («на паузе», «ошибка») остаются
   словами — они требуют внимания. Блок в конце файла: правила .exn-list и
   #v-key выше иначе перебили бы его. От 600 — как в v78. */
.ex-del-ico{display:none}
@media (max-width:599px){
  .ex-row .ex-name{flex-wrap:nowrap;min-width:0}
  .ex-row .ex-name > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Бейдж-слово («на паузе») не выше строки имени: иначе эта строка на
     1–2 px выше соседних */
  .ex-row .ex-state{flex:none;white-space:nowrap;line-height:16px}
  .ex-row .ex-state.ok{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--green)}
  .ex-row .ex-state.ok .ex-state-txt,.ex-row .ex-del .ex-del-txt{position:absolute;width:1px;height:1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ex-row .ex-sub,#v-key .ex-row .ex-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ex-row .ex-del{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
    display:inline-flex;align-items:center;justify-content:center}
  .ex-row .ex-del .ex-del-ico{display:block}
  /* Углы квадрата касания 44 у круглой кнопки лежат за скруглением —
     квадратный добор поверх (как .wz-amount-o в мастере, задача 0053) */
  .ex-row .ex-del{position:relative}
  .ex-row .ex-del::after,#v-key .ex-row .ex-del::after,.sat .ex-row .ex-del::after{content:'';position:absolute;inset:-1px}
  /* «Обновить» у кошелька — тоже 44×44 (TC-3: все кнопки строки ≥ 44) */
  .ex-row .icon-btn{width:44px;height:44px}
}

/* ── Задача 0060, Р2: чипы периода на телефоне ровным блоком ───────────────
   До 599 («Обзор», «Сделки») — по четыре в ряд равной ширины, ряд во всю
   ширину; неполный последний ряд растягивается на всю ширину (flex 1 1 с
   базой в четверть). Прокрутки вбок и обрезки нет; пилюли 13 px, поля 8 px;
   цель касания 44 — добор ::after задачи 0053. 600–899 — перенос 0053. */
@media (max-width:599px){
  .chips .chip.period{flex:1 1 calc(25% - 8px);min-width:0;justify-content:center;padding:7px 8px;font-size:13px}
  /* «Сделки»: свой сегмент 0028 (flex:none, поля 6×12) перебивал общее
     правило; высота пилюли прежняя — равна табу ботов (0032 TC-1). */
  /* «Капитал по дням» (5 вариантов, задача 0060, Р8): один ряд равных
     пилюль 13 px с полями 8 px; не помещается (320) — перенос, неполный
     ряд растянут во всю ширину, как ровный блок Р2. */
  .chips .chip[data-action="equity-period"]{flex:1 1 0;min-width:fit-content;justify-content:center;padding:5px 8px;font-size:13px}
  #v-summary .sc-head .sc-chips{flex:1 1 100%}
  #v-summary .sc-chips .chip.period{flex:1 1 calc(25% - 6px);min-width:0;justify-content:center}
  /* Таб ботов «Открытые / Закрытые» — тот же компонент, что сегмент периода
     (0032 TC-1, TC-3): поля 6×8 одним общим правилом */
  #v-summary .sc-chips .chip.period,#v-summary .sc-tab{padding:6px 8px}
}

/* ── Задача 0060, Р3: числа компактнее на телефоне ──────────────────────────
   До 599 герой «Обзора» и «Сделок» — 32 px, .big-num — 22 px, заголовок
   экрана — 24 px. Блок в конце файла: правила 0053 (clamp до 419) и героев
   (44 от 420, 42 до 419) стоят выше и иначе перебили бы его. От 600 — как
   в v78. */
@media (max-width:599px){
  .h1{font-size:24px}
  .hero-num,.ov-hero .ov-big,#v-summary .sc-hero .hero-num{font-size:32px}
  .big-num{font-size:22px}
}

/* ── Задача 0060, Р4: одна строка изменения героя «Обзора» ─────────────────
   «−$467,44 (−3,1%) за 30 дней»: период — в конце строки изменения, мельче
   и серым, как прежняя подпись периода (14 px). Раскладки в герое нет. */
.ov-hero .ov-for{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:normal}
/* Число, процент и период — неразрывными кусками (.delta — inline-flex с
   зазором 4): обычная строка в одну линию, а гигантское изменение аудита на
   320 переносит кусок целиком, а не вылезает из карточки. */
.ov-hero #ovChange{flex-wrap:wrap;row-gap:0;max-width:100%}
.ov-hero #ovChange > span{white-space:nowrap}

/* ── Задача 0156: счета площадки на «Биржах» ────────────────────────────────
   Строка площадки — одна при любом числе счетов, нажимается целиком (стили
   кликабельной карточки .exn-list .ex-row[role="button"] выше); справа
   шеврон, раскрытая — повёрнут вниз. Под ней список счетов на месте: тонкая
   линия слева, строка счёта — название, «UID 48•••309», «субаккаунт»,
   подпись с суммой и датой, «Удалить» справа. Название длиннее места —
   многоточием (полное — в title). До 599 «Удалить» — корзина 44×44, как у
   строк площадок (0060, Р1). */
.ex-plat{display:flex;flex-direction:column;gap:6px;min-width:0}
.ex-chev{width:16px;height:16px;color:var(--muted);flex:none;transition:transform .18s}
.ex-plat-row[aria-expanded="true"]{border-color:var(--line-strong)}
.ex-plat-row[aria-expanded="true"] .ex-chev{transform:rotate(90deg)}
.ex-accs{display:flex;flex-direction:column;margin:0 0 6px 20px;padding-left:16px;border-left:1px solid var(--line-strong);min-width:0}
.ex-accs[hidden]{display:none}
.ex-acc{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 0;border-bottom:1px solid var(--line);min-width:0}
.ex-acc-main{flex:1;min-width:0}
.ex-acc-name{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;font-weight:600}
.ex-acc-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-acc-uid{flex:none;font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ex-acc-sub-tag{flex:none}
.ex-acc-sub{font-size:12px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.ex-acc-err{font-size:12px;color:var(--red);margin-top:2px}
.ex-acc-dup{font-size:12px;color:var(--gold);margin-top:6px;padding-left:8px;border-left:2px solid rgba(245,166,35,.45)}
.ex-acc-act{display:flex;align-items:center;gap:8px;flex:none}
.ex-acc-add{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;color:var(--accent);
  font-size:14px;font-weight:600;text-align:left}
.ex-acc-add:hover{color:var(--accent-hover)}
.ex-acc-plus{font-size:18px;line-height:1}
.ex-acc-note{font-size:12px;color:var(--muted);margin:0 0 4px;max-width:var(--measure)}
@media (max-width:599px){
  .ex-accs{margin-left:10px;padding-left:12px}
  .ex-acc .ex-del{position:relative;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
    display:inline-flex;align-items:center;justify-content:center}
  .ex-acc .ex-del .ex-del-ico{display:block}
  .ex-acc .ex-del .ex-del-txt{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .ex-acc .ex-del::after,#v-key .ex-acc .ex-del::after{content:'';position:absolute;inset:-1px}
}

/* ── Задача 0175: подписи трёх чисел и «?» с составом ───────────────────────
   Механизм «?» общий (.where, .where-q, .where-tip — раздел 6, 0036/0037):
   всплывашка поверх страницы, по наведению и по тапу. Здесь только место:
   подпись смысла под изменением «Обзора», под числом за период «Ботов»,
   «?» у заголовка «Сделок» и у каждой доли полосы капитала. Разделителя
   строки списка (.where) у них нет. */
.ov-meaning.where,.ph-period-k.where,.sc-hero-k.where,.ph-leg.where{border-bottom:0}
.ov-meaning{margin-top:4px;font-size:13px;color:var(--muted)}
.ov-meaning .where-name{gap:8px}
.ov-meaning .where-name > :first-child{white-space:normal;overflow:visible;text-overflow:clip}
.ov-split-line,.ph-part{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.ov-split-line b,.ph-part b{font-weight:600;color:var(--text);white-space:nowrap}
.ov-split-flows{margin-top:6px;color:var(--muted)}
/* Подпись периода «За 30 дней» и «?» справа от неё — одной строкой
   (правка автора 28.10); переключатель периода переносится, как раньше. */
.ph-period-k{display:block}
.ph-period-k .where-name{gap:8px;align-items:center}
.ph-period-k .where-name > :first-child{overflow:visible;text-overflow:clip}
.sc-hero-k .where-name{gap:8px}
.ph-leg.where{position:relative}
.ph-leg .where-q{width:18px;height:18px;font-size:11px}
.bb-variant-note{margin:4px 0 0;font-size:12px;color:var(--muted)}