/* ============================================================
   СЕМАНТИКА ЦВЕТА. Сырые цвета Таба лежат в tab-palette.css
   (--tt-*, генерируется из APK). Здесь — что чем является у нас.
   Хочешь поменять вид: правь ЭТОТ блок, а не tab-palette.css.
   ============================================================ */
:root {
  --bg:          var(--tt-brand-gray-15);   /* #151616 — фон экрана */
  --card:        var(--tt-brand-gray-11);   /* #2b2d2f — плитка, светлее фона страницы */
  --card-edge:   var(--tt-brand-gray-11);   /* #2b2d2f — граница */
  --text:        var(--tt-white-2);         /* #f2f2f2 */
  /* Тикер и цена на плитке: на 15% менее ярко, чем основной текст (17.09.2026).
     Взят СПЛОШНОЙ цвет, а не прозрачность: под текстом плитки лежит спарклайн,
     и полупрозрачные буквы просвечивали бы графиком. #f2f2f2 на 85% + плитка на 15%. */
  --text-card:   #d4d4d5;
  --text-dim:    var(--tt-brand-gray);      /* #b3b7c0 */
  --text-faint:  var(--tt-brand-gray-3);    /* #89808a */

  --up:          var(--tt-brand-green);     /* #62ab6d */
  --down:        var(--tt-brand-red);       /* #f9494b */
  /* подкраска подложки — приглушённые фирменные зелёный/красный Таба */
  /* подложка значков LONG/SHORT в карточке позиции */
  --up-wash:     rgba(98,171,109,.09);
  --down-wash:   rgba(249,73,75,.09);

  --accent:      var(--tt-brand-cyan);          /* #53a8b0 — фирменный акцент */
  /* отметки сделок: намеренно ярче свечей, чтобы читались поверх графика */
  --fill-buy:    #00e676;
  --fill-sell:   #e8c34a;   /* продажа — жёлтым, чуть темнее алертов, чтобы не сливались */

  /* Свечи намеренно приглушены: линии уровней и отметки сделок должны читаться
     поверх графика, а не тонуть в нём. */
  --candle-up:   rgba(98,171,109,.67);   /* поднимали дважды по 10%: .55 → .61 → .67 */
  --candle-down: rgba(249,73,75,.67);

  /* сетка графика — вдвое бледнее границ карточек (#2b2d2f) */
  --grid: rgba(43,45,47,.5);

  /* Линии на графике — цветами Таба. В его разборе значилось: ордера оранжевой и синей,
     алерты пунктирной бирюзовой. Берём ближайшие из его собственной палитры. */
  --line-long:   rgba(98,171,109,.70);
  --line-short:  rgba(249,73,75,.70);
  --line-liq:    rgba(196,92,92,.70);            /* светлее #783435, иначе подпись не читалась */
  --line-buy:    rgba(98,171,109,.60);           /* отложенная покупка — зелёная */
  --line-sell:   rgba(249,73,75,.60);            /* отложенная продажа — красная */
  --line-alert:  rgba(255,221,119,.70);          /* алерты жёлтые */

  /* Плашки подписей: ТЁМНЫЕ, почти в цвет фона графика, а текст — цветной.
     Бледно-цветная плашка со светлым текстом читалась плохо, особенно жёлтая. */
  --label-bg:    rgba(18,19,19,.88);
  --label-long:  #62ab6d;
  --label-short: #f9494b;
  --label-liq:   #c45c5c;
  --label-buy:   #62ab6d;
  --label-sell:  #f9494b;
  --label-alert: #ffdd77;

  /* скользящие средние — бледные, чтобы не спорить со свечами */
  --sma50:  rgba(98,171,109,.45);
  --sma200: rgba(249,73,75,.45);
  --alert:       var(--tt-brand-yellow-bright); /* #ffdd77 — под алерты */

  --gap: 8px;
  --radius: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.25 -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

/* ---------- шапка ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-edge);
}
.toprow { display: flex; align-items: center; }
.tabs { display: flex; gap: 4px; }
.tab {
  appearance: none; border: 0; background: transparent;
  color: var(--text-dim); font: inherit; font-size: 14px;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.tab.is-active { color: var(--text); background: var(--card); }
.controls { margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-faint); }
.gear { text-decoration: none; color: var(--text-faint); font-size: 15px; padding: 2px 4px; }

/* ---------- сетка плиток: 2 в ряд, как в Табе ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding: var(--gap);
  padding-bottom: calc(env(safe-area-inset-bottom) + 44px);
}
@media (min-width: 720px)  { .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1080px) { .grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ---------- плитка ---------- */
.card {
  position: relative; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  padding: 9px 10px 9px;
  min-height: 88px;
  display: flex; flex-direction: column;
  isolation: isolate;
}
/* спарклайн живёт в подложке карточки, а не отдельной картинкой сбоку */
.card .spark {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
  /* 17.09.2026: бледнили дважды — .55 → .385 (−30%) → .3465 (ещё −10%) */
  z-index: -1; opacity: .3465; pointer-events: none;
}

.c-head { display: flex; align-items: baseline; gap: 6px; }
.c-venue { font-size: 9.5px; letter-spacing: .09em; color: var(--text-faint); text-transform: uppercase; }
.c-kind  { margin-left: auto; font-size: 9.5px; color: var(--text-faint); letter-spacing: .06em; }
.c-pair  { margin-top: 1px; font-size: 17px; font-weight: 600; letter-spacing: -.01em;
           color: var(--text-card); }
.c-quote { font-size: 11px; font-weight: 400; color: var(--text-faint); }
/* метка открытой позиции: L или S, цвет по знаку прибыли */
.c-pos {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px; border-radius: 4px;
  font-size: 9px; font-weight: 700; vertical-align: middle;
  border: 1px solid currentColor;
}
.c-pos[hidden] { display: none; }
/* корзина — ордера стоят, позиции нет. Тележка та же, что на кнопке торговли графика;
   жёлтая и в рамке (Дим, 03.10) */
.c-ord { display: inline-flex; align-items: center; justify-content: center;
         width: 16px; height: 14px; margin-left: 4px; vertical-align: middle; border-radius: 4px;
         color: var(--tt-brand-yellow-bright, #ffdd77); border: 1px solid currentColor; }
.c-ord svg { width: 11px; height: 11px; }
.c-ord[hidden] { display: none; }
.c-pair .nostop-badge { margin-left: 4px; }

.c-price { margin-top: auto; font-size: 21px; font-weight: 600; letter-spacing: -.02em;
           color: var(--text-card); }
.c-chg   { display: flex; gap: 7px; font-size: 12px; margin-top: 1px; }
.c-chg .abs { color: var(--text-dim); }
.up   { color: var(--up); }
.down { color: var(--down); }



.card { cursor: pointer; }
.card:active { transform: scale(.985); transition: transform .08s; }
.card.is-stale { opacity: .45; }
/* .card{display:flex} перебивает [hidden] из браузерных стилей — возвращаем явно */
.card[hidden] { display: none; }

/* ---------- статус ---------- */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px calc(env(safe-area-inset-bottom) + 7px);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--card-edge);
  font-size: 11px; color: var(--text-faint);
}
.spacer { margin-left: auto; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.dot.live { background: var(--up); box-shadow: 0 0 6px var(--up); }
.dot.dead { background: var(--down); }


/* ─────────── кнопки в шапке ─────────── */
.icon-btn {
  appearance: none; border: 1px solid var(--card-edge); background: transparent;
  color: var(--text-dim); font: inherit; font-size: 15px; line-height: 1;
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.icon-btn:active { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { display: block; }
/* Переключатель плитка/строка вне экрана плиток гасится, но место держит:
   иначе Position / History / Orders съезжали бы вправо прямо под пальцем. */
.lay-btn.is-off { visibility: hidden; pointer-events: none; }

/* ─────────── меню ☰ (алерты, стена графиков, настройки) ─────────── */
.menu-wrap { position: relative; display: flex; }
.menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 170px; padding: 4px 0;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
}
.menu[hidden] { display: none; }
.menu a {
  padding: 10px 14px; font-size: 14px; color: var(--text-dim);
  text-decoration: none; white-space: nowrap;
}
.menu a:active { color: var(--accent); background: var(--bg); }
#menuBtn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

/* ─────────── режим «строки»: каждая плитка — одна строка ───────────
   Те же элементы плитки, только разложены в ряд. Площадка над PERP и абсолютное
   изменение под процентом — мелкими подписями в своей ячейке, иначе на 360 px
   тикеру не оставалось места. Спарклайн из подложки становится маленькой картинкой. */
.grid.is-rows { grid-template-columns: minmax(0, 1fr); gap: 4px; }
@media (min-width: 720px) { .grid.is-rows { max-width: 680px; width: 100%; margin-inline: auto; } }
.grid.is-rows .card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 38px auto auto;
  grid-template-areas: "head pair spark price chg";
  column-gap: 6px; align-items: center;
  min-height: 0; padding: 6px 8px; border-radius: 9px;
}
.grid.is-rows .card[hidden] { display: none; }
.grid.is-rows .c-head {
  grid-area: head; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0;
}
.grid.is-rows .c-venue {
  font-size: 8.5px; letter-spacing: .03em; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grid.is-rows .c-kind { margin-left: 0; font-size: 8.5px; }
/* Метка позиции встаёт сразу за тикером, «/USD» — последней: если строке тесно,
   обрежется «/USD», а не L/S. Текст тикера — безымянный элемент с порядком 0. */
.grid.is-rows .c-pair {
  grid-area: pair; margin: 0; font-size: 15px; min-width: 0;
  display: flex; align-items: baseline; white-space: nowrap; overflow: hidden;
}
.grid.is-rows .c-pos, .grid.is-rows .c-ord,
.grid.is-rows .c-pair .nostop-badge { order: 1; align-self: center; flex: 0 0 auto; }
.grid.is-rows .c-quote { order: 2; min-width: 0; overflow: hidden; margin-left: 2px; }
.grid.is-rows .spark {
  grid-area: spark; position: static; z-index: auto;
  width: 38px; height: 18px; opacity: .85;
}
.grid.is-rows .c-price {
  grid-area: price; margin: 0; font-size: 15px; text-align: right; white-space: nowrap;
}
.grid.is-rows .c-chg {
  grid-area: chg; margin: 0; min-width: 50px;
  flex-direction: column-reverse; align-items: flex-end; gap: 0;
  font-size: 12px; line-height: 1.15; white-space: nowrap;
}
.grid.is-rows .c-chg .abs { font-size: 10px; }
/* Галочка выбора в строке легла бы на цифры — в правке строке даём поле слева под неё. */
body.editing .grid.is-rows .card { padding-left: 24px; }
.grid.is-rows .card.picked::after { top: 50%; right: auto; left: 5px; transform: translateY(-50%); }

/* ─────────── режим правки плиток ─────────── */
/* в режиме правки палец двигает плитку, а не прокручивает страницу.
   touch-action тут вспомогательный: главное — отмена touchmove в коде,
   потому что это свойство браузер читает в момент касания, а не по ходу жеста. */
body.editing .card { cursor: grab; touch-action: none; }
body.editing { overscroll-behavior: contain; }
.card { user-select: none; -webkit-user-select: none; }
.card.picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.card.picked::after {
  content: "✓"; position: absolute; top: 6px; right: 8px; z-index: 2;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  font-size: 10px; line-height: 16px; text-align: center;
}
.card.dragging {
  opacity: .9; z-index: 3;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  transition: none;
}

.editbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
  display: flex; gap: 8px; padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px);
  background: var(--card); border-top: 1px solid var(--card-edge);
}
.editbar[hidden] { display: none; }
.editbar button {
  flex: 1 1 0; appearance: none; border: 0; border-radius: 10px;
  padding: 12px 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.eb-del { background: var(--down); color: #fff; }
.eb-del:disabled { opacity: .45; }
.eb-done { background: var(--card-edge); color: var(--text); }

/* ─────────── лист добавления ─────────── */
.sheet-back { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.55); }
.sheet-back[hidden] { display: none; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  background: var(--card); border-top: 1px solid var(--card-edge);
  border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 16px);
  max-height: 78dvh; display: flex; flex-direction: column;
}
.sheet[hidden] { display: none; }
.sheet-grip { width: 36px; height: 4px; border-radius: 2px; margin: 0 auto 12px; background: var(--card-edge); }
.sheet-title { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.sheet input {
  background: var(--bg); color: var(--text); border: 1px solid var(--card-edge);
  border-radius: 10px; padding: 12px 13px; font: inherit; font-size: 16px; margin-bottom: 10px;
}
.sheet input:focus { outline: none; border-color: var(--accent); }
.sheet-cancel {
  appearance: none; background: transparent; border: 0; color: var(--text-faint);
  font: inherit; font-size: 13px; padding: 12px 0; cursor: pointer;
}
.found { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.found-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid var(--card-edge); cursor: pointer;
}
.found-row:active { background: var(--bg); }
.found-row b { font-size: 14px; font-weight: 600; }
.found-row .venue { font-size: 9.5px; color: var(--text-faint); letter-spacing: .08em; }
.found-row .px { margin-left: auto; font-size: 13px; color: var(--text-dim); }
.found-row.added { opacity: .4; pointer-events: none; }
.found-empty { padding: 14px 4px; font-size: 13px; color: var(--text-faint); }

/* ============================================================
   ВКЛАДКА VAULT — состояние вложений в ваулты Hyperliquid.
   Не котировки, поэтому не плитки: карточка на ваулт, крупно своя доля,
   ниже — цифры по себе и по самому ваулту. Обновляется при открытии вкладки.
   ============================================================ */
.vaults {
  padding: var(--gap);
  padding-bottom: calc(env(safe-area-inset-bottom) + 44px);
  display: flex; flex-direction: column; gap: var(--gap);
}
/* Собственный display перебивает браузерное [hidden] — скрытие возвращаем явно.
   Та же грабля, что отмечена выше у .card: без этих строк лента ваултов висела
   под каждой вкладкой, а на вкладке Vault оставалась видна сетка плиток. */
.vaults[hidden], .grid[hidden] { display: none; }

/* На компе карточку не растягиваем во всю ширину окна: это пары «подпись — значение»,
   и на широком экране они разъезжаются по разным краям — пару приходится искать
   глазами через пустоту. Порог тот же, что у сетки плиток (720px): ниже него телефон,
   и там всё остаётся во всю ширину, как было. */
@media (min-width: 720px) {
  .vaults { max-width: 680px; width: 100%; margin-inline: auto; }
}

.v-card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}

.v-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.v-name { font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; }
.v-name::after { content: " ↗"; color: var(--accent); font-size: 12px; }
.v-apr  { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

/* Своя доля — самое крупное на экране: за ней и заходят. */
.v-mine { display: flex; flex-direction: column; gap: 2px; }
/* крупная сумма и справа у края — плечо ваулта с реальным размером моей доли */
.v-bigrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.v-lev  { font-size: 12px; color: var(--text-dim); white-space: nowrap; text-align: right; }
.v-big  { font-size: 30px; font-weight: 700; letter-spacing: .3px; color: var(--text); }
.v-sub  { font-size: 13px; color: var(--text-dim); }
.v-roi  { color: var(--text-faint); margin-left: 6px; }

/* Один общий grid на весь блок, а не отдельная строка-флекс на каждую пару.
   Раньше каждая строка сама решала, где кончается подпись и начинается значение,
   поэтому граница между ними гуляла от строки к строке. Теперь колонка одна на все
   строки: подписи по самой длинной из них, значения столбиком справа, промежуток
   между колонками постоянный. */
.v-rows {
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: 14px; row-gap: 6px; align-items: baseline; font-size: 14px;
}
/* Обёртка строки растворяется, и её span/b встают прямо в колонки общего grid. */
.v-rows > div { display: contents; }
.v-rows span { color: var(--text-dim); }
.v-rows b { font-weight: 600; text-align: right; }
.v-rows i { font-style: normal; color: var(--text-faint); font-size: 12px; }

/* Блок про сам ваулт отделён чертой: это чужие цифры, не твои. */
.v-about { border-top: 1px solid var(--card-edge); padding-top: 10px; }
.v-about b { font-weight: 500; color: var(--text-dim); }

.warn { color: var(--tt-brand-yellow-bright, #ffdd77); }

.v-empty { padding: 40px 16px; text-align: center; color: var(--text-dim); }

/* кнопки ввода и вывода на карточке ваулта */
.v-move { display: flex; gap: 10px; }
.v-move button {
  flex: 1; padding: 10px; border-radius: 10px; font: inherit; font-weight: 600;
  border: 1px solid var(--card-edge); background: var(--bg); color: var(--text);
}
.v-in  { border-color: var(--up);   color: var(--up); }
.v-out { border-color: var(--accent); color: var(--accent); }
/* пока идёт блокировка, вывод физически невозможен — кнопка гасится, а не врёт */
.v-move button:disabled { opacity: .4; }

/* подсказка «потяни вниз» на вкладке ваултов */
.v-pull {
  height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-dim);
  transition: height .12s ease;
}
.v-pull.ready { color: var(--accent); }

/* ── состав ваулта (раскрывается по кнопке «Активы») ─────────────────────── */
.v-assets-btn {
  align-self: center; padding: 6px 14px; border-radius: 9px;
  font: inherit; font-size: 12px; font-weight: 600;
  border: 1px solid var(--card-edge); background: transparent; color: var(--accent);
}
.v-assets {
  display: flex; flex-direction: column; gap: 1px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.v-assets[hidden] { display: none; }

.va-head, .va-row {
  display: grid;
  /* Та же болезнь, что была у списка позиций: резиновые колонки в середине и узкие
     фиксированные в хвосте. Размер и вход забирали весь остаток строки и зияли
     провалами, а объём с upnl жались в свои 58 и 66 пикселей. Теперь доли делят все
     четыре числовые колонки поровну, фиксирован только инструмент. */
  grid-template-columns: 64px repeat(4, 1fr);
  column-gap: 8px; align-items: baseline;
  padding: 5px 0; white-space: nowrap; font-size: 12px;
}
.va-head {
  font-size: 10px; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .3px; border-bottom: 1px solid var(--card-edge);
}
.va-head span:not(:first-child) { text-align: right; }
.va-row { border-bottom: 1px solid var(--card-edge); }
.va-sz, .va-entry, .va-val, .va-pnl { text-align: right; }
/* Плечо и процент — мелкой строкой рядом: это уточнение к числу, а не число. */
.va-coin i, .va-pnl i { font-style: normal; font-size: 10px; opacity: .75; margin-left: 3px; }
.va-empty { padding: 14px; text-align: center; color: var(--text-dim); font-size: 12px; }

/* ── кнопка «Position» и список открытых позиций ─────────────────────────── */
.posbtn {
  padding: 5px 10px; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 600;
  border: 1px solid var(--card-edge); background: transparent; color: var(--text-dim);
}
.posbtn.is-active { border-color: var(--accent); color: var(--accent); }
/* Кнопка аккаунта: имя бывает длинным, а ряд на телефоне уже тесный */
.acc-wrap[hidden] { display: none; }        /* .menu-wrap{display:flex} перебивает [hidden] */
.acc-btn { max-width: 64px; padding-left: 8px; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#accBtn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
/* Меню раскрывается от кнопки ВПРАВО: она стоит слева, справа-налево ушло бы за край */
.acc-menu { left: 0; right: auto; }
/* Ряд кнопок на телефоне шириной 360 и до аккаунта занимал всё место без остатка.
   Кнопке аккаунта место отдают зазоры и поля соседних кнопок — только на узком экране. */
@media (max-width: 420px) {
  .controls { gap: 4px; }
  .posbtn { padding-left: 7px; padding-right: 7px; }
}
.acc-menu button {
  appearance: none; border: 0; background: transparent; font: inherit; text-align: left;
  padding: 10px 14px; font-size: 14px; color: var(--text-dim); white-space: nowrap; cursor: pointer;
}
.acc-menu button .sub { display: block; font-size: 11px; color: var(--text-faint); }
.acc-menu button.is-active { color: var(--accent); }
.acc-menu button:active { background: var(--bg); }

.poslist {
  padding: var(--gap);
  padding-bottom: calc(env(safe-area-inset-bottom) + 44px);
  display: flex; flex-direction: column; gap: 6px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.poslist[hidden] { display: none; }

/* Та же ширина, что у ваулта: два экрана одного приложения, и разная ширина у них
   читается как случайность. Пять колонок в строку при 680px помещаются. */
@media (min-width: 720px) {
  .poslist { max-width: 680px; width: 100%; margin-inline: auto; }
}

/* Строкой, а не плиткой: у позиции важны цифры рядом друг с другом, а не крупная цена. */
.pl-row {
  display: grid;
  grid-template-columns: 52px 1fr 1fr 1fr 84px;
  column-gap: 6px; align-items: baseline;
  padding: 10px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--card-edge);
  color: inherit; text-decoration: none; font-size: 13px; white-space: nowrap;
}
.pl-side { font-size: 11px; font-weight: 700; }
.pl-coin { font-weight: 600; }
.pl-sz, .pl-entry, .pl-pnl { text-align: right; }
/* Вторая величина мелкой строкой рядом: объём в долларах и доходность в процентах —
   уточнения к главному числу, а не самостоятельные колонки. */
.pl-row i { font-style: normal; font-size: 10px; opacity: .7; margin-left: 3px; }

/* STOP — у позиции нет стоп-ордера на бирже. Одна метка на всех экранах:
   список позиций, карточка позиции на графике, полоса позиции на стене, страница индекса,
   плитка дашборда. 02.10 пробовали дорожный знак — Дим вернул слово, только короче: STOP. */
.nostop-badge {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .06em;
  padding: 1px 5px; border-radius: 4px; color: #fff; background: var(--down);
  white-space: nowrap; vertical-align: middle;
}
.nostop-badge[hidden] { display: none; }
/* в списке позиций — мельче и в той же строке, справа от плеча (Дим, 01.10) */
.pl-coin .nostop-badge { font-size: 7.5px; padding: 0 3px; margin-left: 4px; letter-spacing: .03em;
                         vertical-align: 1px; }

/* Позиции: шесть столбцов вместо пяти — сумма стала отдельной колонкой.
   Она светло-синяя: не прибыль (зелёный/красный) и не цена (белый), а объём,
   и глаз должен отделять её от соседних чисел без чтения. */
/* Тикер получил СВОЮ ширину вместо доли наравне с числами. Раньше он был 1fr и
   забирал столько же, сколько цена, но текст в нём короткий и прижат влево — из-за
   этого после тикера зиял провал, а числам в хвосте не хватало места. Теперь доли
   поровну делят только три числовые колонки.
   Колонки заданы ОДНИМ правилом вместе с шапкой: разъедься они — подпись встанет
   не над своим столбцом, и это было бы хуже, чем отсутствие подписей вовсе. */
/* minmax(0,1fr), а не просто 1fr: доля по умолчанию не даёт колонке стать уже своего
   содержимого, а у чисел стоит запрет переноса — вместе это выпихивает строку за край
   экрана вместо того, чтобы ужать столбец. Ноль в нижней границе снимает этот упор. */
/* Тикер 84 → 118: справа от плеча должна влезать метка NO STOP, иначе её обрежет многоточие. */
.pl-head, .pl-row { grid-template-columns: 16px 118px repeat(3, minmax(0, 1fr)) 92px; column-gap: 8px; }
/* Число, которому не хватило места, обрезается в своей ячейке и не ломает строку.
   Обрезанное число хуже целого, но разъехавшаяся таблица хуже обоих. */
.pl-row > span, .pl-head > span { overflow: hidden; text-overflow: ellipsis; }

/* Телефон. На широком экране фиксированные колонки (тикер и upnl) незаметны, а здесь
   они вместе с зазорами съедали строку, и числам оставалось меньше их собственной
   ширины. Ужимаем всё, что не число, и отдаём место числам. */
@media (max-width: 430px) {
  .pl-head, .pl-row {
    grid-template-columns: 12px 92px repeat(3, minmax(0, 1fr)) 86px;
    column-gap: 5px; font-size: 12px;
    padding-left: 8px; padding-right: 8px;
  }
  .pl-head { font-size: 9px; }
  .pl-row i { font-size: 9px; margin-left: 2px; }
}

/* Шапка списка позиций. Порядок столбцов здесь не такой, как в активах ваулта
   (сумма идёт перед количеством), поэтому подписи тут особенно нужны. */
.pl-head {
  display: grid; align-items: baseline;
  /* Отступы и прозрачная рамка повторяют строку: у .pl-row есть рамка в 1 пиксель,
     и без неё подписи сдвинулись бы относительно своих колонок. */
  padding: 2px 12px 2px; border: 1px solid transparent;
  font-size: 10px; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .3px; white-space: nowrap;
}
.pl-head span { text-align: right; }
.pl-head span:nth-child(2) { text-align: left; }
.pl-side { font-size: 13px; font-weight: 700; text-align: left; }
.pl-val { text-align: right; color: #7fb6d9; }
/* Тот же светло-синий — у суммы позиции на ВСЕХ экранах (Дим, 01.10): карточка позиции
   на графике, полоса позиции на стене, позиции ваулта, окно закрытия. */
.usd-val, .va-val { color: #7fb6d9; }

/* ── история сделок на главном ───────────────────────────────────────────────
   Тот же список строкой, что и позиции, но здесь уже свершившееся. Ширина и колонки
   заданы вместе с шапкой одним правилом — разъедься они, подпись встала бы не над
   своим столбцом. */
.histlist {
  padding: var(--gap);
  padding-bottom: calc(env(safe-area-inset-bottom) + 44px);
  display: flex; flex-direction: column; gap: 6px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.histlist[hidden] { display: none; }
@media (min-width: 720px) {
  .histlist { max-width: 680px; width: 100%; margin-inline: auto; }
}

.fl-head, .fl-row {
  display: grid;
  grid-template-columns: 74px 84px repeat(2, minmax(0, 1fr)) 84px;
  column-gap: 8px; align-items: baseline;
  padding: 9px 12px; white-space: nowrap; font-size: 13px;
}
.fl-head {
  padding: 2px 12px; border: 1px solid transparent;
  font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .3px;
}
.fl-head span { text-align: right; }
.fl-head span:nth-child(1), .fl-head span:nth-child(2) { text-align: left; }
/* Итог по отфильтрованному набору стоит в шапке над колонкой результата:
   там же, где и сами числа, которые он суммирует. */
.fl-net { font-weight: 700; }
/* Итог нажимается: раскладывает сделки по активам и обратно. Стрелка — намёк,
   что это кнопка, а не просто подпись. Поля по вертикали — чтобы мелкая
   надпись не была мелкой мишенью для пальца. */
.fl-net-btn { cursor: pointer; padding: 8px 0; margin: -8px 0; -webkit-tap-highlight-color: transparent; }
.fl-net-btn b { font-weight: 400; font-size: 7px; margin-left: 3px; vertical-align: 1px; }

/* Итог по активам: инструмент, число сделок, комиссии, результат. */
.fs-head, .fs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 76px 96px;
  column-gap: 8px; align-items: baseline;
  padding: 9px 12px; white-space: nowrap; font-size: 13px;
}
.fs-head {
  padding: 2px 12px; border: 1px solid transparent;
  font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .3px;
}
.fs-head span { text-align: right; }
.fs-head span:first-child { text-align: left; }
.fs-row {
  border-radius: 12px;
  background: var(--card); border: 1px solid var(--card-edge);
  color: inherit; text-decoration: none;
}
.fs-row:active { border-color: var(--accent); }
/* С какой даты итог: дальше биржа историю не отдаёт */
.fs-note { padding: 10px 12px; font-size: 11px; color: var(--text-faint); text-align: center; }

/* Строка — ссылка на инструмент, как и в списке позиций. Цвет и подчёркивание
   гасим явно: иначе браузер красит её как обычную ссылку. */
.fl-row {
  border-radius: 12px;
  background: var(--card); border: 1px solid var(--card-edge);
  color: inherit; text-decoration: none;
}
.fl-row:active { border-color: var(--accent); }
.fl-when { color: var(--text-dim); font-size: 11px; }
.fl-coin { font-weight: 600; }
/* Сторона буквой и цветом: B и S различаются мгновенно и не занимают колонку. */
.fl-coin i { font-style: normal; font-weight: 700; font-size: 11px; margin-right: 2px; }
.fl-px, .fl-sz, .fl-pnl { text-align: right; }
.fl-pnl { font-weight: 600; }
.fl-dim { color: var(--text-faint); font-weight: 400; }

@media (max-width: 430px) {
  .fl-head, .fl-row {
    grid-template-columns: 62px 62px repeat(2, minmax(0, 1fr)) 72px;
    column-gap: 5px; font-size: 12px; padding-left: 8px; padding-right: 8px;
  }
  .fl-head { font-size: 9px; }
  .fl-when { font-size: 10px; }
}
/* Сколько частей слито в строку. Мелко и приглушённо: это не про деньги,
   а пояснение, почему цена в строке средневзвешенная. */
.fl-parts { font-weight: 400; font-size: 10px; color: var(--text-faint); margin-left: 3px; }

/* «снимок ЧЧ:ММ · обновляю…» — экран показывает сохранённые данные, свежие в пути (snap.js) */
.snap-badge {
  position: fixed; top: max(6px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 100; pointer-events: none;
  padding: 2px 9px; border-radius: 9px; font-size: 10px; font-weight: 600;
  color: var(--bg, #151616); background: var(--tt-brand-yellow-bright, #ffdd77); opacity: .92;
}
.snap-badge[hidden] { display: none; }