/* Единый стиль разделов 8levels (109, 11.10.2026).
   Почему отдельный файл: «Обзор», «Опционы», «Арбитраж» и «Портфель» писались
   в разное время, у плиток, таблиц и карточек были разные радиусы, заголовки
   и отступы. Здесь — общие правила поверх файлов разделов; подключается
   последним. Только оформление, без изменения разметки и поведения. */
:root {
  --u8-r: 12px;            /* радиус карточек */
  --u8-r-s: 8px;           /* радиус кнопок и плашек */
  --u8-up: #26a69a;
  --u8-dn: #ef5350;
  --u8-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .05);
}
[data-theme="light"] { --u8-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 3px 10px rgba(16, 24, 40, .05); }

/* Карточки */
.ov-card, .pfl-card, .opt-card, .pfl-tile, .ov-kpi { border-radius: var(--u8-r); }
.ov-card, .pfl-card { box-shadow: var(--u8-shadow); }
.ov-h, .pfl-h { font-size: 14px; font-weight: 700; letter-spacing: .005em; }

/* Плитки-счётчики: «Найденные», «Портфель», итоги «Истории» */
.pfl-tile { position: relative; border-left: 3px solid var(--border); box-shadow: var(--u8-shadow); padding: 8px 12px; }
.pfl-tile > span:first-child { font-size: 11.5px; }
.pfl-tile b { font-size: 20px; line-height: 1.2; }
.pfl-tiles > .pfl-tile:nth-child(1) { border-left-color: #14b8a6; }
.pfl-tiles > .pfl-tile:nth-child(2) { border-left-color: #8b5cf6; }
.pfl-tiles > .pfl-tile:nth-child(3) { border-left-color: #f59e0b; }
.pfl-tiles > .pfl-tile:nth-child(4) { border-left-color: #3b82f6; }

/* Таблицы: один вид шапки, строки с подсветкой, цифры моноширинные */
.ov-table th, .pfl-table th, .hi-tab th, .my-tab th, .arb-table th {
  font-size: 11.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .01em;
}
.ov-table td, .pfl-table td, .hi-tab td, .my-tab td, .arb-table td { font-variant-numeric: tabular-nums; }
.ov-table tbody tr:hover, .pfl-table tbody tr:hover, .hi-tab tbody tr:hover, .arb-table tbody tr:hover { background: var(--surface-2); }
.ov-table tbody tr:last-child td, .hi-tab tbody tr:last-child td { border-bottom: 0; }

/* Кнопки и сегменты */
.ov-btn, .pfl-btn { border-radius: var(--u8-r-s); }
.ov-chipbtn { border-radius: 999px; }
.pfl-seg { border-radius: var(--u8-r-s); }

/* Цвета роста и падения одинаковые во всех разделах */
.pfl-up, .hi-up { color: var(--u8-up); }
.pfl-dn, .hi-dn { color: var(--u8-dn); }

/* Заголовки разделов и оговорки */
.pfl-title, .ov-title { letter-spacing: .005em; }
.ov-disc, .pfl-foot { font-size: 11.5px; }

@media (max-width: 600px) {
  .ov-card, .pfl-card { box-shadow: none; }
  .pfl-tile b { font-size: 17px; }
}

/* 109 (11.10.2026): широкие мониторы. На 2560 пкс карточки «Обзора» и плитки
   «Портфеля» растягивались на всю ширину — глазу далеко ходить от названия
   к числу. Содержимое держим в колонке до 1760 пкс по центру; полоса
   прокрутки остаётся у края окна, потому что отступ — у самой страницы.
   «Опционы» и «Арбитраж» не ограничиваем: там широкие таблицы. */
@media (min-width: 1900px) {
  .ov-page, .pfl-page { padding-inline: max(0px, calc((100% - 1760px) / 2)); }
}

/* 109: подсказка «Попробуйте основной режим» на телефоне сжималась в узкий
   столбик (left: 50% + сдвиг) — растягиваем на ширину экрана с полями */
@media (max-width: 640px) {
  .pf-mode-hint { left: 12px; right: 12px; transform: none; max-width: none; }
}

/* 111 (11.10.2026): раздел «Уровни» в том же стиле, что «Обзор», «Опционы»,
   «Арбитраж» и «Портфель»: те же радиусы, тени, заголовки карточек и цифры.
   Только оформление: разметку, график и поведение не трогаем. */
.side-sec, .tour-start, .market-now { border-radius: var(--u8-r); }
.side-sec { background: var(--surface); box-shadow: var(--u8-shadow); }
.side-sec-head { border-radius: var(--u8-r); padding: 10px 12px; }
.side-sec.open .side-sec-head { border-radius: var(--u8-r) var(--u8-r) 0 0; }
.side-sec-name { font-size: 13px; font-weight: 700; letter-spacing: .005em; }
.side-sec-body { padding: 2px 12px 12px; }
.info-box { border-radius: var(--u8-r-s); }
.market-now { box-shadow: var(--u8-shadow), 0 14px 40px rgba(0, 0, 0, .22); }
[data-theme="light"] .market-now { box-shadow: var(--u8-shadow), 0 12px 32px rgba(16, 24, 40, .12); }
.mn-title b { font-size: 14px; font-weight: 700; }
.mn-price, .mn-row-val b, .pl-nums b { font-variant-numeric: tabular-nums; }
.mn-row-val { min-width: 0; }
.mn-row-val b { white-space: nowrap; }
/* Подпись «мес · 19 уровней · ширина 9,20 %» вылезала за правый край карты */
.mn-row-val span { white-space: normal; }
.mn-btn, .pl-btn { border-radius: var(--u8-r-s); }
.pl-m { border-radius: var(--u8-r-s); background: var(--surface-2, transparent); }
.mn-status { border-radius: var(--u8-r-s); }
/* Легенда графика: период без уровней в кадре был почти невидим (0,42) —
   оставляем бледнее остальных, но читаемым; точка — пустым кружком */
.legend-item.legend-empty { opacity: 1; color: var(--text-muted); }
.legend-item.legend-empty .legend-dot { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.legend-head { font-size: 10.5px; font-weight: 700; }
/* 112c: плашка расхождения цены графика и текущей в «Сценариях у уровня» */
.pl-gap { border: 1px solid color-mix(in srgb, #f59e0b 55%, var(--border)); background: color-mix(in srgb, #f59e0b 12%, transparent); color: var(--text); border-radius: var(--u8-r-s); padding: 7px 9px; font-size: 11.5px; line-height: 1.45; }

/* 112d (11.10.2026): «Карта рынка сейчас» под разные экраны.
   Ширина — переменной: на ноутбуке 300, на широком мониторе до 380 пкс,
   кнопкой «⇔» — до 560 пкс (таблица способов в один ряд). График отступает
   на ту же ширину, «Уровни рядом» под картой — той же ширины. */
.chart-area { --mn-w: 292px; }
@media (min-width: 1101px) {
  .chart-area { --mn-w: clamp(300px, 24vw, 380px); }
  .chart-area.mn-wide { --mn-w: clamp(400px, 36vw, 560px); }
  .market-now { width: var(--mn-w); }
  .chart-area.mn-open { padding-right: calc(var(--mn-w) + 28px); }
  .chart-area.mn-open .levels-panel.dock-bottom { right: calc(var(--mn-w) + 28px); }
  .chart-area.mn-open.lp-dock-right { padding-right: calc(var(--mn-w) + 28px); }
  .chart-area.mn-open .levels-panel.dock-right { width: var(--mn-w); }
}
.mn-wide-btn { margin-left: auto; font-size: 15px; }
.mn-head .mn-wide-btn + .mn-close { margin-left: 2px; }
.chart-area.mn-wide .mn-wide-btn { color: var(--primary); }
@media (max-width: 1100px) { .mn-wide-btn { display: none; } }

/* Таблица «Одна идея — разные способы» */
.pl-cmp { container-type: inline-size; }
.pl-tab { font-size: 11.5px; }
.pl-tab th, .pl-tab td { padding: 5px 5px; vertical-align: top; }
.pl-tab th { font-size: 10.5px; white-space: normal; line-height: 1.25; vertical-align: bottom; }
.pl-tab td:first-child { font-weight: 600; min-width: 92px; }
.pl-tab-sub { display: block; font-weight: 400; font-size: 10.5px; color: var(--text-muted); line-height: 1.3; margin-top: 1px; }
.pl-tab tbody tr:hover { background: var(--surface-2); }
/* Узкая карта (ноутбук, телефон): строка — карточка, подписи у чисел, без
   горизонтальной прокрутки */
@container (max-width: 470px) {
  .pl-cmp .pl-scroll { overflow: visible; }
  .pl-cmp .pl-tab thead { display: none; }
  .pl-cmp .pl-tab, .pl-cmp .pl-tab tbody { display: block; width: 100%; }
  .pl-cmp .pl-tab tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); }
  .pl-cmp .pl-tab tr:has(td:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-cmp .pl-tab td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; min-width: 0; max-width: none; }
  .pl-cmp .pl-tab td:first-child { grid-column: 1 / -1; font-size: 12px; }
  .pl-cmp .pl-tab td:nth-child(5) { grid-column: 1 / -1; }
  .pl-cmp .pl-tab td[data-l]::before { content: attr(data-l); display: block; font-size: 10px; font-weight: 500; color: var(--text-muted); margin-bottom: 1px; }
  .pl-cmp .pl-tab td:nth-child(5) br { display: none; }
  .pl-cmp .pl-tab td:nth-child(5) .pl-muted, .pl-cmp .pl-tab td:nth-child(5) .pl-over { margin-left: 6px; }
}
/* Телефон: лист во всю ширину, поля чуть больше, кнопки под палец */
@media (max-width: 860px) {
  .market-now { padding: 12px 14px 14px; }
  .mn-acts .mn-btn { min-height: 40px; }
  .pl-btn { min-height: 36px; }
}
/* Подпись «Периоды: … | Уровней: N» над графиком заходила под кнопки
   масштаба справа (2н, 1м, … Вид), когда график сужается картой рынка */
@media (min-width: 861px) {
  .chart-title-bar { max-width: calc(100% - 320px); }
  .chart-title-meta { line-height: 1.35; }
}
/* Планшет и узкое окно 861–1100: карта поверх графика — чуть шире, чтобы
   таблица способов и подписи уровней не ломались по словам */
@media (min-width: 861px) and (max-width: 1100px) {
  .market-now { width: 340px; }
}

/* 12.10.2026 (решение владельца): значок «beta» у разделов «Обзор»,
   «Арбитраж», «Опционы», «Портфель» — работают, но ещё дорабатываются.
   Виден всем, кому раздел показан; «в разработке» (точка) — отдельно. */
.pf-beta {
  font: 600 9.5px/1 var(--font-body);
  letter-spacing: .03em;
  padding: 2px 5px 3px;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  align-self: center;
  margin-left: -2px;
}
@media (max-width: 700px) {
  .pf-beta { font-size: 8.5px; padding: 1px 4px 2px; align-self: flex-start; margin-top: 7px; margin-left: -3px; }
}
.tg-app .pf-beta { font-size: 8.5px; padding: 1px 4px 2px; }

/* 113i (13.10.2026): «?» у сложных блоков ведёт на пункт справки */
.hlp-q {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    margin-left: 6px; border: 1px solid var(--border, #30363d); border-radius: 50%;
    font-size: 11px; font-weight: 600; line-height: 1; text-decoration: none; vertical-align: middle;
    color: var(--text-muted, #8b949e);
}
.hlp-q:hover { color: var(--text, #e6edf3); border-color: currentColor; }
.fb-faq { margin: 0 0 10px; font-size: 13px; color: var(--text-muted, #8b949e); }

/* 113k (13.10.2026): быстрый старт во всех разделах — меню у «?» и приглашение */
.tour-menu { position: fixed; z-index: 2900; min-width: 260px; max-width: calc(100vw - 16px); padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.tour-menu-i { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer; }
.tour-menu-i:hover, .tour-menu-i:focus-visible { background: var(--surface-2); outline: none; }
.tour-menu-i b { display: block; font-weight: 600; }
.tour-menu-i small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.tour-menu-ic { flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent); }
.tour-invite { position: fixed; z-index: 2800; left: 16px; bottom: calc(16px + var(--legal-h, 0px)); width: 340px; max-width: calc(100vw - 32px); padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--border)); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); font-size: 13.5px; line-height: 1.45; color: var(--text); }
.tour-invite-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.tour-invite-b button { font: inherit; font-size: 13px; min-height: 32px; padding: 4px 14px; border-radius: 8px; cursor: pointer; }
/* 150 (20.10.2026, документ — раздел 15): пальцем — кнопки приглашения не меньше 44 */
@media (pointer: coarse), (max-width: 760px) { .tour-invite-b button { min-height: 44px; } }
.tour-invite-later { border: 1px solid var(--border); background: none; color: var(--text-muted); }
.tour-invite-go { border: 0; background: var(--primary); color: #04150c; font-weight: 600; }
@media (max-width: 760px) {
    .tour-invite { left: 12px; right: 12px; width: auto; max-width: none; bottom: calc(var(--mob-bar-h, 0px) + var(--legal-h, 0px) + 10px + env(safe-area-inset-bottom, 0px)); }
    /* Волна 143 (19.10.2026): на телефоне приглашение в быстрый старт ложилось поверх
       предложения «Попробуйте основной режим» — пока приглашение на экране, второе ждёт */
    body:has(#tour-invite) .pf-mode-hint { display: none; }
}

/* ---------- 115h (14.10.2026): контраст текста по WCAG AA (4,5:1) ----------
   Аудит 14.10 (axe на шести страницах, обе темы) — нарушения давали несколько
   общих цветов: бледно-серый вторичный текст, синий #3b82f6 и #2962ff в
   метках и ссылках, зелёный #26a69a и красный #ef5350 в цифрах роста и
   падения. Свечи и линии графика не трогаем — только текст. Цвета подобраны
   по самому тёмному фону, на котором они стоят (у тёмной темы — #2a2e34 и
   #18362c, у светлой — #e7f0fe и #edf3f3). */
:root {
  --text-faint: #9198a1;
  --u8-ink-blue: #60a5fa;
  --u8-ink-up: #3cc2b3;
  --u8-ink-dn: #f07a77;
  --u8-ink-warn: #f59e0b;   /* 115h: янтарный текст предупреждений */
}
[data-theme="light"] {
  --text-faint: #5f6a78;
  --u8-ink-blue: #1d63d8;
  --u8-ink-up: #177a6e;
  --u8-ink-dn: #c03a37;
  --u8-ink-warn: #8a4a00;
}
.pf-beta { color: var(--u8-ink-blue); }
.ov-at, .ov-asset .ov-at { color: var(--u8-ink-blue); }
.ov-btn:not(.ov-btn-main):not(.ov-btn-w), .ov-link { color: var(--u8-ink-blue); }
.sst-st { color: var(--u8-ink-blue); }
.sst-st.sst-wait { color: var(--text-faint); }
[data-theme="light"] .sst-st.sst-wait { color: #4b5560; }   /* фон плашки серый #e0e2e4 */
/* 115h (14.10.2026): на бою axe нашёл плашки статуса на синем фоне 14% (4,28)
   и «в зоне» — синий текст на янтарном фоне (4,4). Плашкам светлой темы —
   темнее синий; «в зоне» — свой янтарный цвет в обеих темах */
[data-theme="light"] .sst-st { color: #1a56c0; }
.sst-st.sst-in_zone { color: #f59e0b; }
[data-theme="light"] .sst-st.sst-in_zone { color: #8a4a00; }
.sst-sup .sst-z, .ov-cor-l, .arb-up, .arb-good { color: var(--u8-ink-up); }
.sst-res .sst-z, .ov-cor-r, .arb-dn, .arb-bad { color: var(--u8-ink-dn); }
.u-sync-ok { color: var(--u8-ink-up); }
/* 115h: «сессия только открылась» — нейтрально, без жёлтой тревоги */
.u-sync-open { color: var(--text-muted); font-style: italic; }

/* 115h (14.10.2026): вторая проверка axe на бою — на живых данных нашлись
   места, которых не было на стенде (там нет изменений цен, котировок
   опционов и фильтров пар). Цвета — те же «чернила» роста и падения. */
.ov-chg .ov-up, .ov-sp-tf .ov-up { color: var(--u8-ink-up); }
.ov-chg .ov-dn, .ov-sp-tf .ov-dn { color: var(--u8-ink-dn); }
/* bid/ask доски опционов: в светлой теме ячейки бывают подсвечены зелёным
   и красным фоном (лучшая покупка и продажа), поэтому оттенки темнее */
.opt-bid { color: var(--u8-ink-up); }
.opt-ask { color: var(--u8-ink-dn); }
[data-theme="light"] .opt-bid { color: #0f6157; }
[data-theme="light"] .opt-ask { color: #a12e2b; }
[data-theme="light"] .opt-table td.hl-buy .opt-sz, [data-theme="light"] .opt-table td.hl-sell .opt-sz { color: #4b5560; }
/* чипы фильтров («Все 115», «Квазипары 16»): число было полупрозрачным */
.inst-chip-num { opacity: 1; color: var(--text-faint); }
.inst-chip.active, .inst-chip.active .inst-chip-num { color: #4ade80; }
[data-theme="light"] .inst-chip.active, [data-theme="light"] .inst-chip.active .inst-chip-num { color: #166534; }
.arb-linkbtn, .arb-strip-more, .arb-card-cfg .arb-card-v, .arb-m-act, .arb-m-act span, .ok-x2-link { color: var(--u8-ink-blue); }
/* 115h: счётчик ситуаций в полосе — белый на синем #3b82f6 давал 3,67 */
.sst-h b { background: #2563eb; }

/* 115h (14.10.2026): проверка на бою находила по одному месту за раз — у
   каждого свой жёстко заданный цвет текста роста, падения, предупреждения.
   Разом переводим на «чернила» все текстовые цвета этих оттенков в
   «Арбитраже», «Опционах», «Обзоре» и полосе ситуаций (рамки и графики не
   трогаем). Селекторы повторяют исходные, чтобы перекрыть их по весу. */
.arb-good, .arb-book-t td.bid, .arb-card-up .arb-card-v, .arb-m.arb-card-up b, .arb-srow.arb-card-up .arb-srow-v,
.opt-diff-dn, .ok-side.buy, .ok-tile.up b, .oj-badge.ok, .ot-ex-ctl b.up, .ot-nums b.up, .ob-t tr.ob-bid .ob-p,
.ov-cor-l { color: var(--u8-ink-up); }
.arb-bad, .arb-book-t td.ask, .arb-card-dn .arb-card-v, .arb-m.arb-card-dn b, .arb-srow.arb-card-dn .arb-srow-v,
.opt-diff-up, .ok-side.sell, .ok-tile.dn b, .oj-badge.bad, .ot-ex-ctl b.dn, .ot-nums b.dn, .ob-t tr.ob-ask .ob-p,
.ok-x2-hint.ok-dn, .ov-cor-r { color: var(--u8-ink-dn); }
.ok-up { color: var(--u8-ink-up) !important; }
.ok-dn { color: var(--u8-ink-dn) !important; }
.arb-star.is-on, .arb-card-warn .arb-card-v, .arb-unrel, .arb-m.arb-card-warn b, .arb-srow.arb-card-warn .arb-srow-v,
.ov-st-in_zone, .ov-st-bounce, .ov-st-break { color: var(--u8-ink-warn); }
.ok-gk-t b, .ov-st-near { color: var(--u8-ink-blue); }
.arb-tag { color: var(--u8-ink-dn); }