/* ─────────────────────────────────────────────────────────────────────────
   app.css — the customer page.

   Colours are the Volametric set, copied from vm-chrome.css rather than
   invented: the products sit side by side in a browser and a second palette
   would read as a second company. Dark is true black for AMOLED; the light
   block is that same file's light theme.

   The theme follows the system by default and can be overridden by the toggle,
   which stores the choice. Both directions must work — a reader who prefers
   light on a dark system is exactly who the button is for.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #000000;
  --surface: #0d0d0d;
  --surface-2: #161b22;
  --border: #282828;
  --text: #e6edf3;
  --text-strong: #ffffff;
  --muted: #8b949e;
  --accent: #58a6ff;
  --accent-soft: rgba(88, 166, 255, .13);
  --success: #3fb950;
  --danger: #f85149;
  --gold: #e3b341;
  --orange: #ff7722;
  --hover: rgba(255, 255, 255, .05);
  --shadow: 0 0 #0000;

  --attention: #58a6ff;   /* the attention line */
  --price: #e3b341;       /* the price line — never green: the top zone is green */
}

:root[data-theme="light"] {
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --border: #d0d7de;
  --text: #1f2328;
  --text-strong: #0b0f14;
  --muted: #57606a;
  --accent: #0969da;
  --accent-soft: rgba(9, 105, 218, .10);
  --success: #1a7f37;
  --danger: #cf222e;
  --gold: #9a6700;
  --orange: #bc4c00;
  --hover: rgba(9, 105, 218, .07);
  --shadow: 0 1px 3px rgba(31, 35, 40, .08), 0 1px 2px rgba(31, 35, 40, .04);

  --attention: #0969da;
  --price: #9a6700;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
        system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Activation ────────────────────────────────────────────────────────── */

.gate {
  min-height: calc(100vh - 96px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.gate-card {
  width: 100%; max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 32px 28px;
  text-align: center;
  box-shadow: var(--shadow);
}
.logo-lockup { display: block; margin: 0 auto 14px; width: 150px; height: auto; }
.logo-lockup.bar {
  display: inline-block; width: 40px; height: auto;
  margin: 0 10px 0 0; vertical-align: middle; border-radius: 9px;
}
.gate-h {
  font-size: 21px; font-weight: 650; letter-spacing: -.02em;
  line-height: 1.3; margin: 0 0 8px; color: var(--text-strong);
}
.tagline { color: var(--muted); font-size: 13.5px; margin: 0 0 24px; }

#activate-form { display: flex; gap: 10px; }
#licence {
  flex: 1; min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font: 500 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}
#licence:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.primary {
  background: var(--success); color: #06210c;
  border: 0; border-radius: 10px;
  padding: 12px 22px;
  font: 650 14px/1 inherit;
  cursor: pointer; display: inline-block;
}
:root[data-theme="light"] .primary { color: #ffffff; }
.primary:hover { filter: brightness(1.08); text-decoration: none; }

.error { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 10px; }
.gate-foot { color: var(--muted); font-size: 12.5px; margin: 22px 0 0; }

/* ─── Shared header ─────────────────────────────────────────────────────── */
/*
 * One size knob. The mark was 34px and read as decoration next to the
 * wordmark; --logo-size is the only place to change it, and it applies to
 * every page at once because they all include the same header.
 */
:root { --logo-size: 68px; }

.site-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 5;
}
.site-brand {
  display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none;
}
.site-brand:hover { text-decoration: none; }
.site-brand:hover span { color: var(--accent); }
.site-brand img {
  width: var(--logo-size); height: auto; border-radius: 14px;
  display: block; transition: transform .12s ease;
}
.site-brand:hover img { transform: scale(1.03); }
.site-brand span {
  font-weight: 650; letter-spacing: -.014em; font-size: 16px;
  transition: color .12s ease;
}
.site-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.plan-chip {
  font: 600 10.5px/1 inherit; text-transform: uppercase; letter-spacing: .09em;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
}
.plan-chip.plan-premium { color: var(--gold); border-color: var(--gold); }
.plan-chip.plan-trial { color: var(--orange); border-color: var(--orange); }

@media (max-width: 700px) {
  :root { --logo-size: 48px; }
  .site-brand span { display: none; }
  .site-nav .btn { padding: 6px 10px; font-size: 12px; }
}

/* Атрибут `hidden` обязан прятать.
 *
 * Браузерное `[hidden] { display: none }` перебивается ЛЮБЫМ авторским
 * `display`: авторская таблица сильнее браузерной всегда, специфичность тут ни
 * при чём. `.btn` ниже отменял `hidden` на каждой кнопке страницы — «Send a
 * test» стояла на экране у того, кто уведомления не включал, и нажатие на неё
 * ничего не делало.
 *
 * То же ограждение стоит в site.css: страницы подключают разные таблицы, и
 * одно на двоих здесь не работает. */
[hidden] { display: none !important; }

.btn, .ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 13px; font: 500 13px/1 inherit; cursor: pointer;
  display: inline-block;
}
.btn:hover, .ghost:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.btn.icon { padding: 7px 11px; font-size: 14px; }

/* ─── Layout ────────────────────────────────────────────────────────────── */

.app { max-width: 860px; margin: 0 auto; padding: 30px 22px 60px; }

.headline {
  font-size: 26px; font-weight: 650; letter-spacing: -.025em;
  line-height: 1.25; margin: 0 0 6px; color: var(--text-strong);
}
.headline .dim { color: var(--muted); font-weight: 400; }
.subline { color: var(--muted); font-size: 12.5px; margin: 0 0 34px; }

.eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 14px;
}
.sec-h { font-size: 15px; font-weight: 650; letter-spacing: -.015em; margin: 0 0 4px; }
.sec-sub { font-size: 11.5px; color: var(--muted); margin: 0 0 16px; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */

.hero { border-top: 2px solid var(--text); padding-top: 16px; }
.hero-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
}
.ticker { font-size: 38px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.tname { font-size: 13px; color: var(--muted); margin-top: 5px; }
.tpath { font-size: 11px; color: var(--muted); margin-top: 8px; opacity: .8; }
.cap { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }

.horizons { margin: 22px 0 10px; }
.hz-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); border-bottom: 1px solid var(--border);
  padding-bottom: 5px; margin-bottom: 10px; max-width: 300px;
}
.hz-row { display: flex; gap: 36px; }
.hz-k {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); margin-bottom: 4px;
}
.hz-v { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.up { color: var(--success); }
.down { color: var(--danger); }
.flat { color: var(--muted); }

.tracking { font-size: 11.5px; color: var(--muted); }

/* ─── Chart ─────────────────────────────────────────────────────────────── */

.chart-wrap { margin-top: 22px; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--muted); margin: 2px 132px 0 4px;
}
.chart-legend { display: flex; gap: 20px; font-size: 11.5px; margin-top: 12px; }
.key {
  display: inline-block; width: 16px; height: 3px; border-radius: 2px;
  vertical-align: middle; margin-right: 7px;
}

.figs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
}
.fig-k { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.fig-v { font-size: 27px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.fig-m { font-size: 13px; font-weight: 600; margin-top: 6px; }
.fig-w { font-size: 11px; color: var(--muted); margin-top: 5px; }

.chart-wait {
  margin-top: 22px; padding: 18px;
  border: 1px dashed var(--border); border-radius: 12px;
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
}

/* ─── Table ─────────────────────────────────────────────────────────────── */

.also { margin-top: 40px; }
.tbl { display: grid; grid-template-columns: 92px 1fr repeat(3, 66px); gap: 0 10px; }
.tbl > * { padding: 11px 0; border-bottom: 1px solid var(--border); align-self: baseline; }
.tbl .th {
  font-size: 9px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); text-align: right; padding-bottom: 6px;
}
.tbl .th.band { grid-column: 3 / span 3; text-align: center; }
.tbl .tk { font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.tbl .tn { font-size: 12px; color: var(--muted); }
.tbl .tv { font-size: 13px; font-weight: 600; text-align: right; }

/* ─── Pro ───────────────────────────────────────────────────────────────── */

.pro { margin-top: 34px; }
.pro-locked {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 28px 22px; text-align: center; background: var(--surface);
}
.pro-count { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.pro-line { font-size: 14px; color: var(--muted); margin: 10px auto 18px; max-width: 42ch; }

.cards { display: grid; gap: 10px; }
.card {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; background: var(--surface);
}
.card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card .tk { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.card .tn { font-size: 12px; color: var(--muted); }
.card .badge {
  font: 600 9px/1 inherit; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 7px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent);
}
.card-stats { display: flex; gap: 20px; margin-top: 10px; font-size: 12px; }
.card-stats .k {
  color: var(--muted); font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; display: block; margin-bottom: 2px;
}
.card-why { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ─── Themes ────────────────────────────────────────────────────────────── */

.themes { margin-top: 40px; }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.theme-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.theme-row .c { font-size: 11px; color: var(--muted); }

/* ─── Footer ────────────────────────────────────────────────────────────── */

.appfoot {
  max-width: 860px; margin: 0 auto; padding: 18px 22px 40px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 11px; color: var(--muted);
}

.empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 13px; }

@media (max-width: 620px) {
  .tbl { grid-template-columns: 74px 1fr repeat(3, 56px); }
  .theme-grid { grid-template-columns: 1fr; }
  .hz-row { gap: 22px; }
  .hz-v { font-size: 22px; }
  .ticker { font-size: 30px; }
  .chart-axis { margin-right: 0; }
}

/* The verdict on a candidate's attention: a judgement, never the reason.
   Naming which check failed would tell whoever is running a campaign exactly
   what to change next time. */
.card .badge.verdict {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}


/* ─── The watchdog's window ───────────────────────────────────────────────── */
/* Bottom corner rather than centre: a divergence is worth reading and is not
   worth taking the screen away from whatever the reader was doing. */

.watch {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: min(360px, calc(100vw - 40px));
  padding: 16px 18px 12px;
  /* `--card` и `--line` в этой таблице не заданы — они из monitor.css и
     console.css, у которых свой набор. Неизвестная переменная делает свойство
     недействительным, поэтому окно оставалось без фона и без рамки: текст
     карточки под ним читался сквозь оповещение, и обе панели наезжали друг на
     друга. Здесь поверхность называется --surface, а линия --border. */
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}

.watch-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.watch-title {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.watch-head { margin-bottom: 6px; }

.watch-ticker {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 17px;
  color: var(--accent);
  cursor: pointer;
}

.watch-line {
  margin: 3px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}

.watch-more {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.watch-mute {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}


/* ─── Called early, then moved ────────────────────────────────────────────── */

/* Lives in the sidebar with the reference material, so it inherits the column
   width and the page's own padding rather than running edge to edge under the
   whole layout. */
.confirmed {
  margin: 18px 0 4px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.confirmed .sec-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.confirmed .muted { font-size: 12px; line-height: 1.5; margin: 0; }

/* Заголовок группы на витрине. Три группы вместо одного списка: сработавшие,
   не подтверждённые ценой и не утверждавшие направления. Цвет несёт смысл и
   потому берётся из тех же двух переменных, что и знаки движения. */
.confirmed-group {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.confirmed-group.worked { color: var(--success); }
.confirmed-group.missed { color: var(--danger); }

.confirmed-list { list-style: none; margin: 10px 0 0; padding: 0; }

.confirmed-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  white-space: nowrap;
}

.confirmed-ticker {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

.confirmed-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.confirmed-move { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Номер версии в подвале. Стоит на КАЖДОЙ странице, а не только на
   внутренней консоли: покупатель, сообщающий о поломке, называет
   версию, и без неё разговор начинается с выяснения, что у него
   вообще открыто. */
.site-foot .ver, .appfoot .ver {
  opacity: .55;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* ── Витрина пятого поколения ─────────────────────────────────────────────
 *
 * Живые сигналы таблицей, под ними — исходы. Исход печатается со знаком как
 * есть: программа ставила на падение, поэтому −9% значит, что она права, а
 * +4% — что нет. Удача и провал различаются цветом метки, а не тем, что
 * провал спрятан.
 */

.sig-rec {
  font-size: 12px;
  opacity: .7;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sig-tick { font-weight: 600; }

.sig-empty { font-size: 13px; opacity: .55; margin: 4px 0 10px; }

.sig-lock { text-align: center; padding: 14px 10px 16px; }
.sig-lock-n { font-size: 30px; font-weight: 700; line-height: 1.1; }
.sig-lock-t { font-size: 13px; opacity: .65; margin: 2px 0 12px; }

.pv-side-note { font-size: 12px; opacity: .6; margin: 2px 0 10px; }

/* Кнопки уведомлений. Две в ряд и переносятся: на телефоне боковая колонка
   занимает всю ширину экрана, а «Send a test» появляется только после
   включения и меняет ширину ряда на ходу. */
.sig-lock-key { display: block; margin-top: 8px; font-size: 12px;
  color: var(--muted); text-decoration: underline; }

.notify-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }

/* Поле токена и список чатов. Ширина ограничена колонкой, а не содержимым:
   токен длиной в сорок шесть символов иначе растягивал бы боковую панель. */
.tg-input {
  flex: 1 1 120px; min-width: 0; max-width: 100%;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font: 500 13px/1 inherit;
}

/* Общий счёт над списком закрытых позиций. Крупно: это единственное число на
   экране, отвечающее на вопрос «сколько всего», и мелким шрифтом оно
   потерялось бы среди пятидесяти строк под ним. */
/* Страница настройки доставки. Узкая колонка по центру: читать тут нечего,
   нажать надо две кнопки, и растягивать это на весь экран незачем. */
.alerts-page { max-width: 620px; margin: 0 auto; padding: 40px 24px 80px; }
.alerts-h { font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 8px; }
.alerts-lede { color: var(--muted); font-size: 14px; margin: 0 0 34px; }
.alerts-block { margin-bottom: 34px; }

.pv-total { margin: 0 0 18px; }
.pv-total .n {
  display: block; font-size: 30px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.05;
}
.pv-total .n.up { color: var(--success); }
.pv-total .n.down { color: var(--danger); }
.pv-total .u { font-size: 12.5px; color: var(--muted); margin-top: 4px;
  display: block; }

.out-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 5px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.out-row:hover { border-color: var(--accent); }
.out-tick { font-weight: 600; }
.out-when { font-size: 12px; opacity: .55; font-variant-numeric: tabular-nums; }
.out-move { font-variant-numeric: tabular-nums; font-weight: 600; }
.out-mark {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: .03em;
}
.out-ok  .out-move, .out-ok  .out-mark { color: var(--success); }
.out-ok  .out-mark { background: color-mix(in srgb, var(--success) 14%, transparent); }
.out-miss .out-move, .out-miss .out-mark { color: var(--danger); }
.out-miss .out-mark { background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* ── Счётчик срока в строке сигнала ───────────────────────────────────────
 *
 * Срок удержания 72 часа, вход — по цене часа сигнала. Значит сигнал часовой
 * давности и вчерашний это разные цены входа, и разница обязана читаться с
 * одного взгляда: рядом со счётчиком полоса показывает долю прошедшего срока.
 */

.sig-age {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
}
.sig-age-n {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.sig-bar {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 999px;
  background: var(--hover);
  overflow: hidden;
  margin-top: 5px;
}
.sig-bar-fill {
  display: block;
  height: 100%;
  background: var(--muted);
  border-radius: 999px;
  transition: width .6s linear;
}

/* ── Табличная левая колонка ──────────────────────────────────────────────
 *
 * Все живые одной таблицей: строка — токен-час, модели значками. Строка в
 * тридцать пикселей против карточки в шестьдесят: тот же список виден целиком
 * там, где карточки требовали трёх экранов прокрутки. Карточная раскладка
 * удалена 25 августа вместе с пробной страницей /app2. */

.sig-strip { margin: 0 0 12px; }
.sig-strip-i {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.sig-strip-i b { font-size: 13px; letter-spacing: .01em; }

.sig-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.sig-filter-b {
  font: 500 12px/1 inherit;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.sig-filter-b.on { color: var(--text); border-color: var(--accent); }

.sig-tbl { width: 100%; border-collapse: collapse; }
.sig-trow { cursor: pointer; border-bottom: 1px solid var(--border); }
.sig-trow:hover td { background: var(--hover); }
.sig-trow td { padding: 6px 6px 6px 0; vertical-align: middle; }
.sig-trow .sig-tick { font-weight: 600; font-size: 13px; }
.sig-trow .sig-mods {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  white-space: nowrap;
}
.sig-trow .sig-age { display: block; padding-top: 8px; }
.sig-trow .sig-age-n { font-size: 12.5px; font-weight: 600; }
.sig-trow .sig-bar { display: block; margin-top: 3px; width: 100%; }
.sig-trow .sig-price {
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: .75;
  white-space: nowrap;
}

.sig-trow.age-fresh .sig-age-n { color: var(--success); }
.sig-trow.age-fresh .sig-bar-fill { background: var(--success); }
.sig-trow.age-late { opacity: .62; }
.sig-trow.age-late .sig-bar-fill { background: var(--danger); }

/* Сигналы позиции в карточке токена: час, цена, модели — по строке на сигнал.
   Ответ на вопрос «я вхожу по позднему сигналу — по какой цене?». */
.pos-signals { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.pos-sig-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 4px 0; font-size: 13px; font-variant-numeric: tabular-nums;
}
.pos-sig-when { color: var(--muted); min-width: 110px; }
.pos-sig-price { font-weight: 600; }
.pos-sig-mods { color: var(--muted); font-size: 11px; letter-spacing: .06em; }

/* Отметка «×2» у токена, давшего несколько сигналов за срок одной позиции.
   Две строки об одном шорте читались как две одинаковые позиции. */
.out-x.over { color: var(--danger); border-color: var(--danger); }
.side {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  border-radius: 3px; padding: 1px 4px; margin-left: 6px; vertical-align: 1px;
}
.side.short { color: var(--danger); border: 1px solid var(--danger); }
.side.long  { color: var(--success); border: 1px solid var(--success); }

.out-x {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}

/* ─── Страница History ──────────────────────────────────────────────────────
   Все позиции с первого дня. Таблица широкая, на узком экране она
   прокручивается внутри своей обёртки, страница вбок не едет. */
.hist-page { max-width: 1120px; margin: 0 auto; padding: 30px 24px 80px; }
.hist-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap; margin: 0 0 18px;
}
.hist-h { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.hist-lede { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }
.hist-first { color: var(--muted); font-size: 12.5px; }
.hist-wrap { overflow-x: auto; }
.hist-tbl {
  width: 100%; border-collapse: collapse; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.hist-tbl th {
  text-align: right; font-weight: 500; font-size: 11.5px; color: var(--muted);
  padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.hist-tbl td {
  text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.hist-tbl th:first-child, .hist-tbl td:first-child { text-align: left; }
.hist-months { max-width: 560px; }
.hist-months .dim { color: var(--muted); }
.hist-pos { cursor: pointer; }
.hist-pos:hover, .hist-pos:focus-visible { background: var(--hover); outline: none; }
.hist-tk { font-weight: 650; color: inherit; }
.hist-caret { display: inline-block; width: 12px; color: var(--muted); font-size: 10px; }
.hist-pos.out-ok .hist-res, .hist-pos.out-ok .hist-mark { color: var(--success); }
.hist-pos.out-miss .hist-res, .hist-pos.out-miss .hist-mark { color: var(--danger); }
.hist-pos.is-open td { color: var(--muted); }
.hist-pos.is-open .hist-tk { color: var(--text); }
.hist-leg td { background: var(--surface-2); font-size: 12px; color: var(--muted); }
.hist-leg .hist-kind { padding-left: 28px; }
.hist-leg .up { color: var(--success); }
.hist-leg .down { color: var(--danger); }

/* Ссылка на страницу History под последней строкой правой колонки. */
.pv-all {
  display: block; text-align: center; margin: 12px 0 4px;
  font-size: 13px; font-weight: 600;
}