/* ==========================================================================
   ВЕБ-ВЕРСИЯ ПРИЛОЖЕНИЯ - раскладка для большого экрана (Igor 31.07).

   Приложение спроектировано под телефон: одна колонка, нижняя плавающая навигация, шторки
   снизу. На десктопе это нельзя просто растянуть - получится полоса контента посреди пустоты.
   Здесь тот же интерфейс перекладывается по-другому: навигация уходит в левую колонку с
   подписями, содержимое встаёт в сетку, «Баланс» и «Безопасность аккаунта» переезжают в правый
   рельс, шторки становятся диалогами по центру. Разметку и скрипты приложения НЕ трогаем -
   только раскладка, поэтому пересборка index.html ничего здесь не ломает.

   Стиль не меняется: цвета, шрифты, радиусы и тени берутся из тех же токенов.
   Файл подключается только на /app (мобильная и веб-версия - одна и та же страница).
   ========================================================================== */

@media (min-width: 1024px) {

  /* ---------- каркас: слева навигация, справа рабочая область ---------- */
  :root { --wnav: 232px; --wmax: 1240px; }

  #app { padding-left: var(--wnav); padding-bottom: 0; min-height: 100dvh; }

  #navbar {
    left: 0; top: 0; bottom: 0; transform: none; z-index: 40;
    inline-size: var(--wnav); flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px; padding: 18px 12px calc(var(--safebot) + 18px);
    border-radius: 0; border-width: 0 1px 0 0; background: var(--surface);
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  }
  #navbar b {
    inline-size: auto; block-size: 46px; justify-content: flex-start; gap: 12px;
    padding: 0 14px; border-radius: 13px;
  }
  #navbar b .l { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
  #navbar b svg { inline-size: 21px !important; block-size: 21px !important; }
  #navbar b:hover { background: var(--inset); color: var(--ink); }
  #navbar b.on:hover { background: var(--black); color: #fff; }


  /* бренд в шапке боковой колонки */
  .wbrand{display:flex;align-items:center;padding:6px 14px 18px;color:var(--logo-ink,#000);
    text-decoration:none;}
  /* утверждённый горизонтальный локап; пропорции мастер-файла 688.96:120.17 не трогаем */
  .wbrand .lg{inline-size:126px;block-size:22px;flex:0 0 auto;}
  .wbrand .mkonly{display:none;}

  /* ---------- свёрнутая колонка: только знаки ----------
     Место нужно содержимому - в первую очередь графику, поэтому колонку можно сжать до
     полосы значков. Выбор запоминается; на экране графика она сжимается сама. */
  .wnavtog{margin-block-start:auto;display:flex;align-items:center;gap:12px;
    inline-size:auto;block-size:40px;padding:0 14px;border:none;border-radius:13px;
    background:none;color:var(--ink3);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
  .wnavtog:hover{background:var(--inset);color:var(--ink);}
  .wnavtog svg{inline-size:18px;block-size:18px;flex:0 0 auto;transition:transform .15s;}

  html.wnavmin { --wnav: 72px; }
  html.wnavmin #navbar{padding-inline:10px;}
  html.wnavmin #navbar b{inline-size:46px;justify-content:center;padding:0;margin-inline:auto;}
  html.wnavmin #navbar b .l{display:none;}
  html.wnavmin .wbrand{justify-content:center;padding-inline:0;}
  /* в узкой полосе локап не помещается - показываем ЗНАК из мастер-файла, надпись рядом
     не набираем и логотип не режем (правило Igor 09.09) */
  html.wnavmin .wbrand .lg{display:none;}
  html.wnavmin .wbrand .mkonly{display:block;inline-size:42px;block-size:22px;flex:0 0 auto;}
  html.wnavmin .wnavtog{justify-content:center;padding:0;inline-size:46px;margin-inline:auto;}
  html.wnavmin .wnavtog span{display:none;}
  html.wnavmin .wnavtog svg{transform:rotate(180deg);}

  /* ---------- ширина контента: читаемая колонка, а не растянутая простыня ---------- */
  :root { --wread: 860px; }              /* строчные списки: значение справа не должно улетать */

  #modebar.vx, .screen.vx, #s-chart .tfrow, #s-chart .dock {
    max-inline-size: var(--wmax); margin-inline: auto;
  }
  .screen.vx { padding-inline: 28px; }
  #modebar.vx { padding-inline: 28px; padding-block-start: 22px; }
  .screen.vx > div[style*="height:90px"] { display: none; }   /* место под нижнюю навигацию не нужно */

  /* ---------- главная: слева поток возможностей, справа счёт и риск ---------- */
  #home-root {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(304px, .82fr);
    gap: 14px 26px; align-items: start;
  }
  #home-root > * { grid-column: 1; }
  /* в симуляции правого рельса нет (нет счёта и риск-менеджера) - тогда и колонка не нужна,
     иначе половина экрана простаивает, а содержимое жмётся в 700px */
  #home-root:not(:has(> .wrail)) { display: block; }

  /* «Продолжить» в симуляции: на телефоне кнопка тянется во всю ширину, потому что ширины мало.
     На мониторе это полоса на 1140px - крупнее всего остального в интерфейсе (Igor 31.07). */
  #home-root .ctarow { justify-content: flex-start; }
  #home-root .ctarow .bigcta { flex: 0 0 auto; min-inline-size: 320px; padding-block: 14px; }
  /* правый рельс собирает скрипт: через строки грида блоки повисали бы в пустоте,
     подстраиваясь под высоту левой колонки */
  #home-root > .wrail {
    grid-column: 2; grid-row: 1 / span 99; align-self: start; position: sticky; top: 18px;
    display: flex; flex-direction: column; gap: 12px;
  }
  #home-root > .wrail > * { margin: 0; }
  #home-root > .wrail > .eye { margin-block-start: 6px; }

  /* Переключатель Test/Live: не растягивать на весь экран, но и не жать в угол - он главный
     переключатель продукта, поэтому стоит по центру рабочей области и крупнее (Igor 31.07). */
  #modebar.vx { justify-content: center; gap: 10px; }
  #modebar.vx .mseg {
    flex: 0 0 auto; min-inline-size: 196px; padding-block: 12px; font-size: 14px; border-radius: 14px;
  }

  /* ---------- вкладки внутри экрана: пилюли по содержимому, а не во всю ширину ----------
     На телефоне вкладки делят ширину поровну (flex:1) - иначе не попасть пальцем. На мониторе
     из-за этого «Актуальные» превращается в кнопку на пол-экрана, а соседние ярлыки повисают
     в пустоте. Возвращаем им собственную ширину. */
  .vx .tabs { padding-block-end: 8px; }
  .vx .tabs .tab { flex: 0 0 auto; padding-inline: 20px; }
  /* Пояснение к ленте: на мониторе строка во всю ширину нечитаема - держим колонку. */
  .vx .tiernote { margin-block-start: 0; max-inline-size: 720px; padding: 12px 14px; }

  /* ---------- список сетапов: карточки в две колонки ----------
     Поток - около 12 сетапов в день, одной колонкой это лента на весь монитор с пустой
     правой половиной. Заголовки групп («В зоне входа») остаются во всю ширину. */
  #setups-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 10px; align-items: start;
  }
  #setups-list > *:not(.trade) { grid-column: 1 / -1; }
  #setups-list > .grp { padding-block: 12px 2px; }
  #setups-list > .trade { margin: 0; }

  /* список сетапов для тренировки - та же сетка */
  #simlist.tlist {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 10px; align-items: start;
  }
  #simlist.tlist > *:not(.trade) { grid-column: 1 / -1; }
  #simlist.tlist > .trade { margin: 0; }

  /* ---------- строчные списки: читаемая колонка ----------
     Сделки, аналитика и настройки - это строки «название слева, значение справа». Растянутые
     на 1100px они читаются как две несвязанные колонки текста, поэтому ограничиваем ширину. */
  #tr-body, #stats-root > *, #profile-root > *:not(.hdr) { max-inline-size: var(--wread); }

  /* разбор входов в симуляции - отдельные карточки, их можно класть в две колонки */
  #sim-review-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px;
  }
  #sim-review-list > .flat { margin: 0; }
  #sim-review-list > *:not(.flat) { grid-column: 1 / -1; }   /* переключатель исходов - во всю ширину */
  .subrows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  /* ---------- крупный экран заслуживает крупнее шапки ---------- */
  .vx .eye .t { font-size: 17px; }
  .vx .hero, .vx .shero { border-radius: var(--r-xl, 22px); }

  /* ---------- график: панель ордера сбоку, а не под графиком ----------
     На телефоне ордер живёт снизу - иначе не хватает ширины. На большом экране это ошибка:
     график сжимается по высоте, а справа простаивает половина монитора. Раскладываем экран
     в две колонки: слева шапка + график + таймфреймы, справа - панель сделки во всю высоту. */
  #s-chart.screen.full.on {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 392px;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "head  dock" "stat  dock" "chart dock" "tf    dock";
    column-gap: 0;
  }
  #s-chart .chtop      { grid-area: head; padding-inline: 24px; }

  /* ---------- плашка состояния сетапа: строкой во всю ширину ----------
     На телефоне статус стоит над метриками, а метрики жмутся к левому краю - иначе не влезают.
     На мониторе это выглядит как ошибка: строка на 976px, содержимое в первой трети.
     Раскладываем в одну строку: статус слева, метрики равными колонками до правого края. */
  #s-chart #vx-status {
    grid-area: stat; padding: 10px 24px 9px;
    flex-direction: row; align-items: center; gap: 20px;
  }
  #s-chart #vx-status .st { flex: 0 0 auto; }
  #s-chart #vx-status .mm { flex: 1 1 auto; flex-wrap: nowrap; }
  /* значение - СПРАВА от подписи, а не под ней: на телефоне колонка экономит ширину,
     на мониторе она только рвёт строку пополам (Igor 31.07) */
  #s-chart #vx-status .m  {
    flex: 1 1 0; padding-inline: 16px;
    flex-direction: row; align-items: baseline; gap: 8px;
  }
  #s-chart #vx-status .m:first-child { padding-inline-start: 16px; }
  #s-chart .chartwrap  { grid-area: chart; min-block-size: 0; }

  /* 🔴 17.09. Здесь стоял сдвиг бегунков на 34 px влево: он писался 31.07, когда скрипт
     прижимал их к ПРАВОЙ ценовой шкале и они дрались за точку с «+» по перекрестью. С 07.09
     бегунки живут у ЛЕВОГО края графика, и старый сдвиг уносил их ЗА край - на широком экране
     они попадали под левую панель навигации (она шириной 72 px и лежит выше по слою), то есть
     мышью взять вход, стоп и тейк было нельзя вовсе. Драки с «+» больше нет: он остался
     справа. Сдвиг убран, осталось только выравнивание по центру линии. */
  #s-chart .handles .hdl { transform: translateY(-50%); }
  #s-chart .tfrow      { grid-area: tf; padding-inline: 24px; }
  #s-chart .dock {
    grid-area: dock; overflow-y: auto; max-inline-size: none; margin: 0;
    border-block-start: 0; border-inline-start: 1px solid var(--hair);
    padding: 18px 20px calc(var(--safebot) + 20px);
  }
  /* Панель сделки на большом экране раскрыта сразу (скрипт зовёт toggleSetup): места хватает,
     прятать настройки за кнопкой незачем. Поля идут сверху, кнопка открытия - внизу колонки. */
  #s-chart .dock { display: flex; flex-direction: column; }
  #s-chart .dock > #o-setupbox { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; }
  #s-chart .dock #o-setupbtn { position: sticky; inset-block-start: 0; z-index: 2; }
  #s-chart .dock #o-place {
    margin-block-start: auto; position: sticky; inset-block-end: 0; z-index: 2;
  }
  #s-chart .dock #vx-grab { display: none; }   /* «язычок» шторки - жест телефона, у боковой панели его нет */

  /* ---------- гость и Free: та же панель, но неактивная ----------
     Пустая кнопка «Подготовить сделку», которая отвечает «только в Pro», не говорит человеку
     ничего о продукте. Показываем настоящую панель приглушённой и подписываем, что входит в Pro. */
  /* Приглушение - ровно настолько, чтобы читалось «недоступно»: значения должны оставаться
     разборчивыми, иначе панель не показывает продукт, а просто мешает (Igor 31.07). */
  #s-chart .dock.wprev > #o-setupbox {
    filter: blur(.8px); opacity: .78; pointer-events: none; user-select: none;
  }
  #s-chart .dock .wprevnote {
    position: sticky; inset-block-end: 0; margin-block-start: auto; z-index: 3;
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px; border-radius: 18px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .wprevnote b { font-size: 15px; font-weight: 700; color: var(--ink); }
  .wprevnote span { font-size: 13px; line-height: 18px; color: var(--ink2); }
  .wprevnote .bigbtn { margin-block-start: 8px; }
  /* Полноэкранные режимы (график, симуляция) скриптом прячут навигацию - значит и полоса
     под неё не нужна, иначе слева остаётся пустой столбец. */
  #app:has(.screen.full.on) { padding-inline-start: 0; }
  /* на узком десктопе (1024-1279) панель уже, иначе графику не остаётся места */
  @media (max-width: 1279px) { #s-chart.screen.full.on { grid-template-columns: minmax(0, 1fr) 340px; } }

  /* От 1280px ширины хватает и графику, и навигации: на графике её держим на месте, чтобы
     уйти на «Сделки» можно было в один клик, а не только кнопкой «назад».
     Навигацию скрипт гасит инлайновым display:none - перебиваем только для экрана графика. */
  @media (min-width: 1280px) {
    #app:has(#s-chart.full.on), #app:has(#s-sim.full.on) { padding-inline-start: var(--wnav); }
    #app:has(#s-chart.full.on) ~ #navbar, #app:has(#s-sim.full.on) ~ #navbar { display: flex !important; }
  }

  /* ---------- симуляция: тот же порядок, что на живом графике (Igor 31.07) ----------
     Экран тренировки был растянутым телефоном: график во всю ширину, а управление - полосой
     кнопок на 1400px внизу. Раскладываем как Live: слева шапка, прогресс, плашка и график,
     справа колонка управления - параметры виртуального ордера, «+1 бар» и действия. */
  #s-sim.screen.full.on {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 392px;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "head dock" "bar dock" "stat dock" "chart dock" "tf dock";
    column-gap: 0;
  }
  #s-sim .chtop     { grid-area: head; padding-inline: 24px; }
  #s-sim .simbar    { grid-area: bar;  padding-inline: 24px; }
  #s-sim #sim-leg   { grid-area: stat; padding: 10px 24px 9px; }
  #s-sim .chartwrap { grid-area: chart; min-block-size: 0; }
  #s-sim .tfrow     { grid-area: tf;   padding-inline: 24px; }
  #s-sim .dock {
    grid-area: dock; overflow-y: auto; max-inline-size: none; margin: 0;
    display: flex; flex-direction: column;
    border-block-start: 0; border-inline-start: 1px solid var(--hair);
    padding: 18px 20px calc(var(--safebot) + 20px);
  }
  /* плашка состояния сетапа - строкой во всю ширину, как на живом графике */
  #s-sim #sim-leg.vxstat { flex-direction: row; align-items: center; gap: 20px; }
  #s-sim #sim-leg .st { flex: 0 0 auto; }
  #s-sim #sim-leg .mm { flex: 1 1 auto; flex-wrap: nowrap; }
  #s-sim #sim-leg .m  { flex: 1 1 0; padding-inline: 16px; flex-direction: row; align-items: baseline; gap: 8px; }

  /* параметры виртуального ордера переезжают в колонку (скрипт переносит .simsheet сюда) */
  .wsimord { margin-block-end: 14px; }
  body.simreview .wsimord { display: none; }   /* разбор входа - только просмотр, ставить нечего */
  .wsimord .simsheet .fbtn { margin-block-start: 10px; }
  .wsimord .fnote { margin-block-start: 8px; }
  /* прокрутка баров и действия - внизу колонки: «+1 бар» остаётся главной кнопкой */
  #s-sim .dock #vxsim-dock { padding: 0; margin-block-start: auto; }
  #s-sim .dock .vxsim-row { flex-wrap: wrap; }
  #s-sim .dock .vxsim-row button { flex: 1 1 46%; padding-block: 12px; }
  #s-sim .dock #vxsim-redo { margin-block-start: 10px; }
  @media (max-width: 1279px) { #s-sim.screen.full.on { grid-template-columns: minmax(0, 1fr) 340px; } }

  /* ---------- шторки снизу превращаются в диалоги по центру ----------
     #isheet - вторая шторка приложения (объяснения: «Сделки - в тарифе Pro», ключ биржи).
     На телефоне обе выезжают снизу, на мониторе прижатый к нижнему краю диалог смотрится
     обрезанным. */
  #fsheet, #isheet { align-items: center; }
  #fsheet .box, #isheet .box {
    max-inline-size: 520px; border-radius: 22px; max-block-size: 76dvh; overflow: auto;
    padding-block-end: 22px;
  }
  .csheet { align-items: center !important; }
  .csheet-box {
    max-inline-size: 520px; margin-inline: auto; border-radius: 18px;
    padding-block-end: 18px;
  }

  /* ---------- карточка возможности: размер по содержимому, а не по монитору (Igor 03.08) ----------
     На телефоне «Открыть» тянется на всё свободное место (flex:1 1 auto) - там ширины мало и это
     верно. На мониторе та же строка превращается в кнопку-полосу на 900px, а «Уровень» и «До
     уровня» жмутся к левому краю и обрезаются. Кнопке даём собственную ширину, группы разводим.
     Метрики (Создан · За 24 ч · Объём · Осталось) стояли четырьмя равными колонками во всю
     карточку - подпись над значением, между парами дыры по 200px. Ставим значение СПРАВА от
     подписи (как в плашке состояния сетапа) и собираем пары слева. */
  #home-root .shero .hmeta {
    display: flex; flex-wrap: wrap; gap: 6px 34px; padding-block-end: 12px;
  }
  #home-root .shero .hmeta .hm {
    display: flex; align-items: baseline; gap: 8px; min-inline-size: 0;
  }
  #home-root .shero .hmeta .hm .v { margin-block-start: 0; }
  #home-root .shero .hbot { gap: 34px; }
  #home-root .shero .hbot .hg { flex: 0 0 auto; }
  #home-root .shero .hbot .openbtn {
    flex: 0 0 auto; margin-inline-start: auto; inline-size: 220px; min-inline-size: 0;
  }

  /* ---------- симуляция на главной: не растягивать на весь монитор (Igor 03.08) ----------
     В симуляции правого рельса нет (нет счёта и риск-менеджера), и раскладка сваливалась в одну
     колонку во всю ширину: карточка «Симуляция рынка» на 1680px и полоса «Итог R · Win Rate ·
     Входов» под ней. Даём ту же сетку, что в Live, а тройку показателей уводим в правый рельс
     колонкой - там же, где в Live стоят «Баланс» и «Безопасность аккаунта». */
  #home-root:not(:has(> .wrail)) {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(304px, .82fr);
    gap: 14px 26px; align-items: start;
  }
  #home-root:not(:has(> .wrail)) > * { grid-column: 1; }
  /* Тройка стоит СТРОКОЙ - ровно в том же виде, что везде в приложении (три ячейки с
     разделителями, значение над подписью). Столбиком она превращалась в три пустых поля. */
  #home-root:not(:has(> .wrail)) > .trio {
    grid-column: 2; grid-row: 1; align-self: start;
    margin-block: 0; margin-inline: var(--pad);
  }
  /* верхние края блоков должны совпадать: у карточек своя отбивка сверху, в сетке она
     сдвигала «Симуляцию рынка» на 10px ниже соседа */
  #home-root:not(:has(> .wrail)) > .simhero { margin-block-start: 0; }

  /* ---------- курсор мыши: у интерактивного должно быть состояние наведения ---------- */
  .vx .card:hover, .vx .rrow:hover, .vx .trade:hover, .vx .setup:hover { background: var(--inset); }
  .vx .mseg { cursor: pointer; }
}

/* Очень широкий экран: не даём контенту расплываться, но и не жмём его в телефон */
@media (min-width: 1600px) {
  :root { --wmax: 1520px; }
}
/* Igor 03.08: на широком мониторе по краям оставались пустые поля, а карточный график
   выглядел расплющенным. Даём рабочей области больше ширины и поднимаем высоту графика,
   чтобы свечи читались, а не сжимались в полосу. */
@media (min-width: 1800px) {
  :root { --wmax: 1680px; }
}
@media (min-width: 1024px) {
  .vx .hchart { height: 300px; }
}
@media (min-width: 1600px) {
  .vx .hchart { height: 340px; }
}

/* ---------- 15.08 (скрин Igor, Safari с крупным зумом страницы) ----------
   Между телефоном и десктопной колонкой (700-1023px эффективной ширины: планшет либо
   широкое окно с зумом) телефонная раскладка размазывалась во всю ширину. Держим колонку
   читаемой ширины по центру. */
@media (min-width: 700px) and (max-width: 1023.98px) {
  #app { max-width: 640px; margin-inline: auto; }
}
/* Элементы широкой раскладки (логотип, «Свернуть») впрыскиваются скриптом один раз при
   загрузке на широком окне; после сужения (зум, resize) они всплывали в плавающей нижней
   навигации. Ниже порога - прячем. */
@media (max-width: 1023.98px) {
  #navbar .wbrand, #navbar .wnavtog { display: none; }
}

/* ==========================================================================
   АНАЛИТИКА - ДЕСКТОПНАЯ РАСКЛАДКА (Igor 19.08, ТЗ на переработку раздела).

   Мобильная версия - одна колонка с прогрессивным раскрытием; здесь тот же дашборд, те же
   компоненты и те же данные, но в сетке: на большом экране человек обязан видеть несколько
   аналитических блоков рядом и сравнивать их, а не листать простыню. Разметку и скрипты
   приложения не трогаем - только раскладка.
   ========================================================================== */

/* Планшет и широкое окно с зумом: одна колонка, но шире и с воздухом. */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .vx .anlkpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vx .anlinsw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx .anlchart { height: 220px; }
}

@media (min-width: 1024px) {
  /* Аналитика - единственный экран, которому читаемая колонка 860px мешает: это дашборд,
     он живёт во всю рабочую область. Переопределяем общее правило для строчных списков. */
  #tr-body:has(.anlgrid) { max-inline-size: none; }

  /* На мониторе панель - одна строка: периоды по содержимому слева, действия справа.
     Растянутые во всю ширину кнопки (нужные на телефоне) здесь читались бы как полосы. */
  .vx .anlbar { top: 0; padding: 12px 0 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .vx .anlbar .anlrow { flex: 1 1 auto; }
  .vx .anlbar .anlrow2 { margin-top: 0; flex: 0 0 auto; }
  .vx .anlbar .anlrow2 .anlbtn { flex: 0 0 auto; }
  .vx .anlseg.grow { flex: 0 1 auto; }
  .vx .anlseg.grow button { flex: 0 0 auto; }
  .vx .anlchips { flex: 1 1 100%; margin-top: 0; }
  .vx .anlrow { gap: 10px; }
  .vx .anlseg button:hover { background: var(--inset); color: var(--ink); }
  .vx .anlbtn:hover { background: var(--inset); }

  .vx .anlgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; padding-inline: 0; align-items: start;
  }
  /* Ряд 1 - итог во всю ширину: это первый уровень иерархии (что произошло). */
  .vx .anlgrid > [data-w="summary"] { grid-column: 1 / -1; }
  .vx .anlkpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vx .anltot .v { font-size: 34px; }
  /* Ряд 2 - инсайты рядом с кривой: причина рядом с результатом. */
  .vx .anlinsw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx .anlchart { height: 260px; }
  /* Широкие блоки: карта и таблица инструментов. */
  .vx .anlgrid > [data-w="heat"],
  .vx .anlgrid > [data-w="symbols"] { grid-column: 1 / -1; }
  .vx .anlheat .c { height: 34px; font-size: 11px; }
  /* На мониторе сегментный переключатель не растягиваем на всю карточку - держим справа
     от заголовка, но колонки внутри остаются равными. */
  .vx .anlw .anlseg.sm { flex: 0 0 auto; margin-left: auto; grid-auto-columns: minmax(76px, 1fr); }
  .vx .anltbl .hh, .vx .anltbl .rr { grid-template-columns: minmax(0, 1.6fr) 70px 90px 80px 70px 70px; }
  .vx .anltbl .rr.tap:hover { background: var(--inset); }
  .vx .anlcal i b { font-size: 11.5px; }
  .vx .anlyear { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .vx .anlcal i u { font-size: 11px; }
  .vx .anlbars .b.tap:hover .lb { color: var(--ink); }
  .vx .anlins.tap:hover { background: var(--inset); }
  .vx .anldl { max-height: 52vh; }
}

/* Большой монитор: три колонки для узких блоков, календарь и карта - во всю ширину.
   Порядок задаёт человек в «Настроить», поэтому привязываемся к data-w, а не к позиции. */
@media (min-width: 1600px) {
  .vx .anlgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vx .anlgrid > [data-w="summary"] { grid-column: 1 / -1; }
  .vx .anlgrid > [data-w="equity"] { grid-column: span 2; }
  .vx .anlgrid > [data-w="calendar"] { grid-column: span 2; }
  .vx .anlgrid > [data-w="heat"] { grid-column: 1 / -1; }
  .vx .anlgrid > [data-w="symbols"] { grid-column: span 2; }
  .vx .anlinsw { grid-template-columns: 1fr; }
  .vx .anlchart { height: 300px; }
}