:root {
--bg: #0c1116;
--bg2: #131920;
--bg3: #1a2330;
--border: #1e2d3d;
--accent: #57a5ff;
--gold: #d4a016;
--green: #3fb84f;
--red: #f75049;
--muted: #4a5568;
--text: #e6edf2;
--text2: #8a939e;
--topbar-h: 66px; /* фиксированная высота шапки сайта; sticky-офсеты ссылаются (match FA) */
/* Typography scale — синхронизирован с FA-страницей (см. web_app.py :root) */
--fs-2xs: 11px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px;
--fs-base: 14px; --fs-lg: 15px; --fs-xl: 16px; --fs-2xl: 18px;
--fs-3xl: 22px; --fs-4xl: 28px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
font-family: -apple-system, Segoe UI, Roboto, sans-serif;
font-size: 14px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: 'JetBrains Mono', monospace; }
/* ── Top bar (sticky) ─────────────────────────── */
/* Grid с теми же колонками что layout, чтобы stats был выровнен с main column,
а session-chip — с chart-panel колонкой. */
/* Flex-шапка — единая с остальными APP_TOPBAR-страницами (APP_TOPBAR_CSS).
session-chip и hamburger прижаты вправо через margin-left:auto. sticky —
setups-специфика (топбар держится при скролле). */
.topbar { display: flex; align-items: center; gap: 14px; padding: 0 18px;
height: var(--topbar-h); box-sizing: border-box;
background: var(--bg2); border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 100; }
.topbar .logo { padding-left: 22px; }
/* padding 22px = main padding (8) + card inner padding (14) → выровнено с
левым краем ТЕКСТА в TOP-карточках и таблице. */
.topbar-stats { padding: 0 22px; font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: var(--text2);
display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.topbar-stats .stats-text { color: var(--text); }
.topbar-stats .hl { color: var(--accent); font-size: 16px; font-weight: 700; }
.topbar-stats .matched-num { color: var(--gold); font-size: 16px; font-weight: 700; }
.topbar-stats .divider { color: var(--border); }
.topbar .session-chip { margin-left: auto; padding-right: 8px; }
.logo { font-family: 'Chakra Petch', sans-serif; font-size: var(--fs-xl); font-weight: 700;
letter-spacing: 0.1em; color: var(--text); text-decoration: none; display: inline-flex;
align-items: center; }
.logo span { color: var(--accent); }
.logo h1 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.session-chip { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.session-date { color: var(--text2); font-family: 'JetBrains Mono', monospace;
padding-right: 10px; border-right: 1px solid var(--border); }
.topbar-regime { padding-right: 10px; border-right: 1px solid var(--border); }
.topbar-regime:empty { display: none; }
.topbar-regime .regime-badge { display: inline-flex; align-items: center; gap: 6px;
padding: 3px 9px; border-radius: 4px;
font-family: 'JetBrains Mono', monospace; font-size: 11px;
font-weight: 700; }
.topbar-regime .regime-badge .regime-badge-lbl { color: var(--text2); font-weight: 400;
font-family: 'Chakra Petch', sans-serif;
text-transform: none; letter-spacing: .02em; }
.topbar-regime .regime-badge.green { background: rgba(63,184,79,0.15); color: var(--green); }
.topbar-regime .regime-badge.red { background: rgba(247,80,73,0.15); color: var(--red); }
.topbar-regime .regime-badge.gold { background: rgba(212,160,22,0.15); color: var(--gold); }
.topbar-regime .regime-badge.muted { background: rgba(138,147,158,0.15); color: var(--text2); }
.session-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.session-dot.active { background: var(--green); box-shadow: 0 0 8px rgba(63,184,79,0.6); }
.session-dot.inactive { background: var(--muted); }
.session-info { color: var(--text); }
.session-info .session-time { color: var(--text2); font-family: 'JetBrains Mono', monospace;
margin-left: 6px; }
.session-info.closed { color: var(--text2); }
/* Desktop: hamburger прижат вправо через margin-left:auto (HAMBURGER_CSS),
в flex-шапке — после session-chip. Отдельное позиционирование не нужно. */
/* ── Mobile topbar (≤900px) — 2 ряда: header + stats marquee ─────
Row 1 (46px high — match FA topbar): logo (left) + filter icon (right)
Row 2: stats running marquee — visually separates topbar from chart header
Hidden: regime, session-info, session-dot, date.
Цвет фона = var(--bg2) (как у FA topbar). */
@media (max-width: 900px) {
/* .topbar.topbar — двойная специфичность (0,2,0), чтобы выиграть у инжектируемого
ниже общего APP_TOPBAR_CSS `.topbar{display:flex}` (0,1,0, но позже по source).
Иначе на mobile топбар становится flex → grid-template-areas/grid-area:hamburger
не работают → гамбургер уезжает влево. */
.topbar.topbar {
display: grid;
grid-template-columns: auto 1fr auto auto;
grid-template-rows: 46px auto;
grid-template-areas:
"logo . settings hamburger"
"stats stats stats stats";
align-items: center;
gap: 0 10px;
height: auto; padding: 0 14px;
}
.topbar .logo {
grid-area: logo; justify-self: start; align-self: center;
font-size: var(--fs-2xl);
padding-left: 0; /* override desktop padding-left:22px — выравниваем
по левому краю chart-panel-header content (14px) */
}
/* sidebar-toggle теперь sticky-floating элемент под topbar (см. блок CSS ниже) */
/* Regime + session целиком скрыты на mobile */
.topbar .session-chip { display: none; }
/* Stats — JS-driven marquee через scrollLeft (вместо CSS animation,
чтобы можно было паузить + ручной свайп влево-вправо). overflow-x:
auto для native scroll, scrollbar скрыт. Mask-edges для мягкого fade
по краям. */
.topbar .topbar-stats {
grid-area: stats;
padding: 8px 0 10px 0;
font-size: var(--fs-md);
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.topbar .topbar-stats::-webkit-scrollbar { display: none; }
.topbar .topbar-stats .stats-marquee-inner {
display: inline-block; white-space: nowrap;
}
.topbar .topbar-stats .matched-num,
.topbar .topbar-stats .hl { font-size: var(--fs-lg); }
.topbar .topbar-stats .stats-gap { display: inline-block; width: 28px; }
}
/* ── Layout ─────────────────────────────────── */
/* min-height учитывает statusbar (26px фикс. сверху, см. .statusbar) */
.layout { display: grid; grid-template-columns: 180px 1fr 560px; gap: 0; min-height: calc(100vh - var(--topbar-h) - 26px); }
/* Sidebar — flex column: scroll-контент + sticky auth-bar внизу */
/* z-index: 50 — поднимаем sidebar выше .main, чтобы position:fixed
тултипы внутри сайдбара (custom-dd-menu)
рисовались поверх TOP-карточек. Без этого sticky-stacking-context
сайдбара остаётся на уровне auto и перекрывается соседним .main
просто по DOM-порядку. */
.sidebar { border-right: 1px solid var(--border); background: var(--bg);
position: sticky; top: var(--topbar-h); z-index: 50;
height: calc(100vh - var(--topbar-h) - 26px);
display: flex; flex-direction: column; }
.sb-content { flex: 1 1 auto; overflow-y: auto; padding: 16px 12px; min-height: 0; }
.main { padding: 20px 8px; min-width: 0; }
/* ── Chart Panel (sticky right) ─────────────────── */
/* Отступ 20px от topbar (как у .market-header слева) — visual breathing room */
/* Height учитывает statusbar (26px) — иначе chart-panel уходит под него */
.chart-panel { border: 1px solid var(--border); background: var(--bg2);
border-radius: 8px; margin: 8px 8px 8px 0;
position: sticky; top: calc(var(--topbar-h) + 8px);
height: calc(100vh - var(--topbar-h) - 16px - 26px);
display: flex; flex-direction: column; overflow: hidden; }
/* ── Mobile layout overhaul (≤900px) — Phase 2 ────────────────────
ВАЖНО: блок размещён ПОСЛЕ базовых правил .layout / .chart-panel,
иначе одинаковая специфичность → последнее правило (десктопное)
перебивает мобильное.
На mobile меняем структуру:
- topbar НЕ sticky (уезжает вверх с контентом)
- sidebar скрыт (Phase 4 сделает выезжающий drawer)
- layout 1-col, chart-panel order:-1 (визуально первый, над cards/table)
- chart-panel sticky top:0, высота 33vh / 240px min — прилипает к верху
при скролле, под ним cards и table
- thead таблицы sticky под chart'ом — top: max(33vh, 240px)
- main column padding уменьшено */
@media (max-width: 900px) {
.topbar { position: static; z-index: auto; }
.layout { grid-template-columns: 1fr; min-height: auto; }
.layout .sidebar { display: none; }
.layout > .chart-panel {
order: -1;
margin: 0;
border-radius: 0;
border-left: none; border-right: none;
position: sticky;
top: 0;
height: max(33vh, 240px);
width: auto;
z-index: 50;
}
.main { padding: 12px 8px; }
.table-wrap thead th { top: max(33vh, 240px); }
}
.chart-panel-header { padding: 10px 14px; border-bottom: 1px solid var(--border);
background: var(--bg2); flex-shrink: 0; }
/* 3 блока: ticker слева | layers центр | TF справа */
.cp-row { display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap; }
.cp-ticker-block { display: flex; align-items: baseline; gap: 8px; }
.cp-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 700;
font-size: 16px; color: var(--text); }
.cp-name { font-size: 12px; color: var(--text2); }
.cp-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chart-panel .tf-switch { display: flex; gap: 3px; }
.chart-panel .tf-btn { font-family: 'JetBrains Mono', monospace; font-size: 11px;
font-weight: 600; padding: 3px 6px; border-radius: 0;
border: none; background: transparent;
color: var(--text2); cursor: pointer; transition: color .15s; }
.chart-panel .tf-btn:hover { color: var(--text); }
.chart-panel .tf-btn.active { color: var(--accent); }
.chart-panel .layer-toggles { display: flex; gap: 3px; }
.chart-panel .layer-btn { font-family: 'JetBrains Mono', monospace; font-size: 10px;
font-weight: 600; padding: 3px 7px; border-radius: 3px;
border: 1px solid var(--border); background: transparent;
color: var(--muted); cursor: pointer; transition: all .15s;
letter-spacing: .03em; }
.chart-panel .layer-btn:hover { border-color: var(--text2); color: var(--text2); }
.chart-panel .layer-btn.active { border-color: rgba(138,147,158,0.5);
color: var(--text2); background: rgba(138,147,158,0.08); }
.chart-panel .regime-badge { display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 4px;
font-family: 'JetBrains Mono', monospace; font-size: 11px;
font-weight: 700; margin-left: auto; }
.chart-panel .regime-badge .regime-badge-lbl { color: var(--text2); font-weight: 400;
font-family: 'Chakra Petch', sans-serif;
text-transform: none; letter-spacing: .02em; }
.chart-panel .regime-badge.green { background: rgba(63,184,79,0.15); color: var(--green); }
.chart-panel .regime-badge.red { background: rgba(247,80,73,0.15); color: var(--red); }
.chart-panel .regime-badge.gold { background: rgba(212,160,22,0.15); color: var(--gold); }
.chart-panel .regime-badge.muted { background: rgba(138,147,158,0.15); color: var(--text2); }
/* 8px padding сверху/снизу chart-а (соразмерно лево-право margin'у самой панели) */
.chart-panel-chart { flex: 1; position: relative; min-height: 200px; overflow: hidden;
padding: 8px 0; box-sizing: border-box; }
.chart-panel-chart #panel-tv-chart { width: 100%; height: 100%; }
.chart-panel .vsa-tooltip { position: absolute; display: none; background: #1a2330;
border: 1px solid #2e3d4d; border-radius: 4px;
padding: 6px 10px; font-size: 12px; color: #e6edf2;
pointer-events: none; z-index: 20; white-space: nowrap;
font-family: 'JetBrains Mono', monospace;
box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.chart-panel-empty { flex: 1; display: flex; align-items: center; justify-content: center;
color: var(--text2); font-size: 13px; padding: 20px; text-align: center; }
/* Floating expand/collapse button — top-right of chart area */
.chart-expand-btn { position: absolute; top: 10px; right: 10px; z-index: 12;
background: rgba(20,30,40,0.7); border: 1px solid var(--border);
color: var(--text2); padding: 5px 7px; border-radius: 4px;
cursor: pointer; line-height: 0; transition: all 0.15s;
backdrop-filter: blur(6px); }
.chart-expand-btn:hover { color: var(--text); border-color: var(--accent);
background: rgba(20,30,40,0.9); }
.chart-expand-btn svg { display: block; transition: transform 0.15s; }
.layout.expanded .chart-expand-btn svg { transform: rotate(180deg); }
/* Pulse-attention анимация при первом визите (3 импульса по 500мс) */
@keyframes expandPulse {
0% { box-shadow: 0 0 0 0 rgba(87,165,255, 0.0); }
50% { box-shadow: 0 0 0 10px rgba(87,165,255, 0.55); }
100% { box-shadow: 0 0 0 0 rgba(87,165,255, 0.0); }
}
.chart-expand-btn.pulse { animation: expandPulse 0.5s ease-in-out 3;
border-color: var(--accent); }
/* Floating «Фундамент» button — слева от expand, ведёт на ФА в новой вкладке.
Высота 26px = как у expand (5+5 padding + 16 line-height).
Лёгкий синий glow для лучшей видимости на тёмном графике.
right: 68px = 44 (по краю expand-зоны) + 24 (доп.отступ от ценовой шкалы). */
.chart-fa-btn { position: absolute; top: 10px; right: 68px; z-index: 12;
background: rgba(20,30,40,0.7); border: 1px solid var(--border);
color: var(--text2); padding: 5px 10px; border-radius: 4px;
cursor: pointer; transition: all 0.15s;
backdrop-filter: blur(6px);
font-family: 'Chakra Petch', sans-serif; font-weight: 600;
font-size: 12px; line-height: 16px; letter-spacing: 0.3px;
text-decoration: none; box-sizing: border-box;
box-shadow: 0 0 6px rgba(87, 165, 255, 0.22); }
.chart-fa-btn:hover { color: var(--text); border-color: var(--accent);
background: rgba(20,30,40,0.9); text-decoration: none;
box-shadow: 0 0 10px rgba(87, 165, 255, 0.4); }
/* Алерт «отчёт МСФО рядом» — золотой бейдж ⚠ + glow */
.chart-fa-btn .fa-btn-alert { color: var(--gold); margin-right: 5px; font-size: 12px;
line-height: 1; }
.chart-fa-btn.has-report-alert { border-color: rgba(212,160,22,0.6); color: var(--gold);
box-shadow: 0 0 8px rgba(212,160,22,0.35); }
.chart-fa-btn.has-report-alert:hover { border-color: var(--gold); color: var(--gold);
box-shadow: 0 0 12px rgba(212,160,22,0.55); }
.fa-btn-tip { position: absolute; top: 42px; right: 68px; z-index: 13; max-width: 240px;
background: var(--bg3); color: var(--text);
border: 1px solid rgba(212,160,22,0.45); border-radius: 5px; padding: 7px 10px;
font-family: 'Chakra Petch', sans-serif; font-size: 12px; line-height: 1.45;
box-shadow: 0 4px 14px rgba(0,0,0,0.5); pointer-events: none; }
.fa-btn-tip .tip-title { color: var(--gold); font-weight: 600; }
.fa-btn-tip .tip-sub { color: var(--text2); font-size: 11px; margin-top: 3px; }
/* В expanded mode FA button наследует те же top/right (оба внутри .chart-panel-chart) */
/* ── Expanded mode: chart на всю ширину сверху, таблица под ─────── */
.layout.expanded { grid-template-columns: 180px 1fr; }
/* Chart-panel: 8px gap сверху (от topbar) и со сторон, как у обычной карточки. */
.layout.expanded > .chart-panel { position: fixed;
top: calc(var(--topbar-h) + 8px);
left: calc(180px + 8px);
right: 8px;
height: 65vh;
width: auto;
margin: 0;
z-index: 50; }
/* Скрываем всё что выше таблицы */
.layout.expanded > .main > .cards,
.layout.expanded > .main > .tc-row-wrap,
.layout.expanded > .main > .sec-title,
.layout.expanded > .main > .topcards-header { display: none; }
/* Main padding-top = 65vh (chart) + 16px (8px над chart + 8px между chart и таблицей).
padding-bottom 26px = высота statusbar (чтобы table не уходил под него). */
.layout.expanded > .main { padding: calc(65vh + 16px) 8px 26px 8px; }
/* Sticky thead — на 8px ниже chart'а (как табличный gap) */
.layout.expanded .table-wrap thead th { top: calc(var(--topbar-h) + 16px + 65vh); }
/* Маски для 8px gap'ов в expand-режиме (две зоны bleed'а):
::before — между topbar и chart-panel (top: var(--topbar-h), 8px вниз)
::after — между chart-panel и thead таблицы (top: chart-panel-bottom)
Обе с position: fixed (pinned к viewport напрямую) и z-index 99
(выше таблицы z=0 и chart-panel z=50, ниже topbar z=100).
left: 180px — ровно ширина сайдбара (.layout.expanded grid-col 1),
иначе маски накрывают границу сайдбара и кнопку «Получать сетапы». */
.layout.expanded::before,
.layout.expanded::after {
content: '';
position: fixed;
left: 180px; right: 0;
height: 8px;
background: var(--bg);
z-index: 99;
pointer-events: none;
}
.layout.expanded::before { top: var(--topbar-h); }
.layout.expanded::after { top: calc(var(--topbar-h) + 8px + 65vh); }
/* ── Mobile expand mode (Phase 5) ──────────────────────────────────
На mobile в expand режиме:
- layout 1-col (override desktop `.layout.expanded { 180px 1fr }`,
иначе main-колонка получает viewport - 180px и таблица обрезается)
- chart на ВСЁ верх viewport'а (top:0, full width, без gap'ов)
- chart высота 65vh — почти 2/3 экрана как просил пользователь
- под chart сразу таблица (без day-picker, без TOP cards — наследуем
hide-rules из desktop expand)
- thead sticky прилипает под chart'ом (top: 65vh)
- gap-маски ::before/::after не нужны (зазоров нет)
ВАЖНО: блок ПОСЛЕ всех desktop expand правил для каскадного override. */
@media (max-width: 900px) {
/* Topbar скрываем в expand — на mobile он в потоке (не sticky) и занимает
место выше main'а. Без скрытия main (с padding-top: 65vh) сдвигается
вниз на высоту topbar'а — между chart'ом (fixed top:0, height 65vh) и
таблицей возникает зазор. Скрытие схлопывает зазор; при collapse класс
снимается → topbar возвращается.
Класс `.layout-expanded` ставится JS-ом на body (зеркало `.expanded`
на .layout) — потому что .topbar не дочерний для .layout, нужен
подъём в body для селектора. */
body.layout-expanded .topbar { display: none; }
.layout.expanded { grid-template-columns: 1fr; }
.layout.expanded > .chart-panel {
top: 0; left: 0; right: 0;
width: auto; height: 65vh;
border-radius: 0;
border-left: none; border-right: none;
}
.layout.expanded > .main { padding: 65vh 8px 26px 8px; }
/* В expand thead sticky уже relative к table-wrap (overflow-x:auto),
поэтому top:0 = top of table-wrap (= 65vh viewport, под chart'ом).
Top:65vh из desktop-expand правил уводил thead за пределы viewport'а
и текст шапки не отображался. */
.layout.expanded .table-wrap thead th { top: 0; }
.layout.expanded::before,
.layout.expanded::after { display: none; }
}
/* ── Sidebar ─────────────────────────────────── */
.sb-section { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.sb-section:last-child { border-bottom: none; }
.sb-title { font-size: 11px; color: var(--text2); text-transform: uppercase;
letter-spacing: 0.5px; font-weight: 600; margin-bottom: 10px;
display: flex; align-items: center; gap: 6px; }
.sb-check { display: flex; align-items: center; gap: 8px; padding: 5px 0;
font-size: 12px; cursor: pointer; user-select: none;
font-family: 'JetBrains Mono', monospace; color: var(--text); }
.sb-check input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
.sb-check:hover { color: var(--accent); }
.sb-slider-row { padding: 6px 0; font-size: 12px; }
/* ── Сердечко избранного (общий компонент, см. static/js/favorites.js) ── */
.fav-heart { display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; padding: 0; margin: 0; flex-shrink: 0;
background: none; border: none; cursor: pointer; color: var(--text2);
border-radius: 4px; vertical-align: middle;
transition: color .15s, background .15s, transform .08s; }
.fav-heart:hover { color: #f48fb1; background: rgba(244,143,177,.12); }
.fav-heart:active { transform: scale(0.9); }
.fav-heart.is-fav { color: #f48fb1; }
.fav-heart.is-fav:hover { color: #ec5f8b; }
.fav-heart svg { width: 14px; height: 14px; display: block; pointer-events: none; }
.fav-heart.is-fav .fav-outline { display: none; }
.fav-heart.is-fav .fav-filled { display: block !important; }
/* Контекст шапки графика — чуть крупнее */
.cp-fav { width: 24px; height: 24px; }
.cp-fav svg { width: 17px; height: 17px; }
/* Pro-таблица: ticker-cell выровнен по baseline → центрируем сердечко */
.ticker-col .ticker-cell .fav-heart { align-self: center; width: 18px; height: 18px; }
.ticker-col .ticker-cell .fav-heart svg { width: 13px; height: 13px; }
/* Тост избранного (всплывает у курсора) — копия с /fa */
.fav-toast { position: fixed; background: var(--bg3); color: var(--text);
padding: 6px 12px; border-radius: 5px; font-size: 12px; border: 1px solid var(--border);
box-shadow: 0 4px 12px rgba(0,0,0,0.4); z-index: 1000; pointer-events: none;
opacity: 1; transition: opacity .5s ease-out; white-space: nowrap;
font-family: 'Chakra Petch', sans-serif; }
.fav-toast.out { opacity: 0; }
.fav-toast.err { color: var(--red); border-color: rgba(247,80,73,.4); }
.sb-slider-label { display: flex; flex-direction: column; gap: 2px;
color: var(--text2); margin-bottom: 6px; }
.sb-slider-label span:first-child { white-space: nowrap; }
.sb-slider-label span:last-child { color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.sb-slider-row input[type="range"] { width: 100%; accent-color: var(--accent); }
/* Двойной ползунок диапазона оборота: min + max на одном треке */
/* Слайдер депозита (₽-режим, admin) */
.sb-depo-row { display: none; }
body.mode-rubles .sb-depo-row { display: block; }
.sb-depo-slider { width: 100%; margin-top: 6px; }
.sb-dual-range { position: relative; height: 22px; margin-top: 4px; }
.sb-dual-track { position: absolute; top: 9px; left: 0; width: 100%; height: 4px;
border-radius: 2px; background: var(--bg3); }
.sb-dual-fill { position: absolute; top: 9px; height: 4px; border-radius: 2px;
background: var(--accent); }
.sb-dual-range input[type="range"] {
position: absolute; top: 0; left: 0; width: 100%; height: 22px; margin: 0;
-webkit-appearance: none; appearance: none; background: transparent;
pointer-events: none; } /* трек не интерактивен — двигаем только ползунки */
.sb-dual-range input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; pointer-events: auto;
width: 15px; height: 15px; border-radius: 50%; background: var(--accent);
border: 2px solid var(--bg); cursor: pointer; }
.sb-dual-range input[type="range"]::-moz-range-thumb {
pointer-events: auto; width: 15px; height: 15px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--bg); cursor: pointer; }
.sb-dual-range input[type="range"]::-moz-range-track { background: transparent; }
#f-turnover-min { z-index: 4; }
#f-turnover-max { z-index: 3; }
.sb-reset { width: 100%; margin-top: 6px; padding: 6px 10px; background: var(--bg2);
border: 1px solid var(--border); color: var(--text2); cursor: pointer;
border-radius: 4px; font-size: 11px; }
.sb-reset:hover { color: var(--text); border-color: var(--accent); }
/* Кнопка «Бэктест» → /lab/backtest. Собственный класс (НЕ sb-reset, который
скрыт в mode-light/Admin) — видна во всех режимах. */
.sb-lab-btn { width: 100%; margin-top: 10px; padding: 8px 10px;
background: rgba(87,165,255,0.10);
border: 1px solid rgba(87,165,255,0.45); color: var(--accent); cursor: pointer;
border-radius: 4px; font-size: 12px;
box-shadow: 0 0 8px rgba(87,165,255,0.15);
transition: background 0.15s, box-shadow 0.15s, border-color 0.15s; }
.sb-lab-btn:hover { background: rgba(87,165,255,0.18); border-color: var(--accent);
box-shadow: 0 0 12px rgba(87,165,255,0.28); }
/* Мои пресеты (радиокнопки) + строки пресет-журнала */
.sb-presets { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.sb-presets-h { font-size: 11px; color: var(--text2); margin-bottom: 6px;
text-transform: uppercase; letter-spacing: .04em; }
.sb-preset-radio { display: flex; align-items: center; gap: 7px; padding: 6px 8px;
margin-bottom: 4px; background: var(--bg2); border: 1px solid var(--border);
border-radius: 5px; cursor: pointer; font-size: 12px; }
.sb-preset-radio:hover { border-color: var(--accent); }
.sb-preset-radio.active { border-color: var(--accent); background: var(--bg3); }
.sb-preset-radio .pr-tt { font-size: 10px; color: var(--text2); margin-left: auto; }
.prow { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center;
padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.prow:hover { background: var(--bg2); }
.prow-tkr { font-weight: 600; }
.prow-meta { color: var(--text2); font-size: 11px; }
.prow-dir.long { color: var(--green); }
.prow-dir.short { color: var(--red); }
.preset-info { padding: 8px 12px; font-size: 11px; color: var(--text2);
border-bottom: 1px solid var(--border); background: var(--bg2); }
/* ── FA strength filter (sidebar custom dropdown) ─────────────────── */
/* Native select игнорирует option.color на macOS — поэтому custom dropdown.
Скрытый хранит value (id=f-fa-strength), button открывает меню. */
.sb-fa-filter { margin: 4px 0 8px 0; }
.sb-fa-label { display: block; font-size: 11px; color: var(--text2);
margin-bottom: 5px; }
.custom-dd { position: relative; }
.custom-dd-trigger {
width: 100%; padding: 6px 10px; display: flex; align-items: center; gap: 6px;
background: var(--bg2); border: 1px solid var(--border); color: var(--text);
border-radius: 4px; cursor: pointer;
font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 16px;
text-align: left;
}
.custom-dd-trigger:hover { border-color: var(--text2); }
.custom-dd-trigger:focus { outline: none; border-color: var(--accent); }
/* Active filter state — accent border when value is set (data-empty != 1) */
.custom-dd-trigger:not([data-empty="1"]) { border-color: var(--accent); }
.custom-dd-label { flex: 1 1 auto; }
.custom-dd-arrow { color: var(--text2); font-size: 10px; }
.custom-dd-dot { display: inline-block; width: 10px; height: 10px;
border-radius: 50%; flex: 0 0 auto; }
.custom-dd-menu {
/* position: fixed чтобы не наследовать overflow:auto от .sb-content
(иначе появляется scrollbar когда dropdown открывается). Top/left/width
выставляются JS'ом по getBoundingClientRect() trigger'а. */
position: fixed;
background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.custom-dd-item {
padding: 7px 10px; display: flex; align-items: center; gap: 8px;
color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 12px;
cursor: pointer; line-height: 16px;
}
.custom-dd-item:hover { background: var(--bg3); }
.custom-dd-item.selected { background: var(--bg3); color: var(--accent); }
/* ── Auth bar (низ сайдбара) ─────────────────── */
.sb-notif-wrap { flex: 0 0 auto; padding: 10px 12px 0; }
.sb-auth { flex: 0 0 auto; padding: 10px 14px; border-top: 1px solid var(--border);
background: var(--bg); font-family: 'JetBrains Mono', monospace;
font-size: 11px; color: var(--text2);
display: flex; align-items: center; justify-content: space-between;
gap: 8px; min-height: 38px; white-space: nowrap; }
.sb-auth .auth-info { color: var(--text); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-auth .auth-info .auth-tier { color: var(--text2); }
.sb-auth .auth-link { color: var(--accent); cursor: pointer; flex-shrink: 0; }
.sb-auth .auth-link:hover { text-decoration: underline; }
.sb-auth .auth-loading { color: var(--muted); }
/* CTA «Получать сетапы в Telegram» — под кнопкой «Сбросить фильтры»
внутри .sb-content. Текст одинаковый во всех состояниях, отличаются
цвет и тень: default = синий primary; .activated = зелёный (paid+bot);
.configured = accent border (paid но бот не активирован). */
.sb-cta { width: 100%; margin-top: 12px; padding: 12px 12px;
border-radius: 6px;
background: var(--accent); border: 1px solid var(--accent);
color: #fff; font-family: inherit; font-size: 13px;
font-weight: 400; line-height: 1.35; cursor: pointer;
text-align: center; white-space: normal;
transition: background 0.15s, box-shadow 0.15s, transform 0.06s;
box-shadow: 0 0 12px rgba(87,165,255, 0.25); }
.sb-cta:hover { background: #6db5ff; box-shadow: 0 0 18px rgba(87,165,255, 0.4); }
.sb-cta:active { transform: translateY(1px); }
/* Для paid users с активным ботом — calm зелёный */
.sb-cta.activated { background: rgba(63,184,79,0.15); border-color: rgba(63,184,79,0.5);
color: var(--green); box-shadow: none; }
.sb-cta.activated:hover { background: rgba(63,184,79,0.25); box-shadow: 0 0 8px rgba(63,184,79,0.2); }
/* Для paid users которые ещё не нажали /start в боте */
.sb-cta.configured { background: var(--bg2); border-color: var(--accent);
color: var(--accent); box-shadow: 0 0 6px rgba(87,165,255, 0.15); }
.sb-cta.configured:hover { background: var(--bg3); box-shadow: 0 0 10px rgba(87,165,255, 0.25); }
/* ── Auth popup ─────────────────────────────── */
.auth-popup-overlay { display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
z-index: 1000; align-items: center; justify-content: center; }
.auth-popup-overlay.open { display: flex; }
.auth-popup { background: var(--bg2); border: 1px solid var(--border);
border-radius: 10px; padding: 30px 32px;
max-width: 380px; width: 92%; text-align: center;
position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.auth-popup-close { position: absolute; top: 8px; right: 12px;
background: none; border: none; color: var(--text2);
font-size: 22px; cursor: pointer; line-height: 1;
padding: 4px 8px; }
.auth-popup-close:hover { color: var(--text); }
.auth-popup-title { font-size: 18px; font-weight: 700; color: var(--text);
margin-bottom: 10px; font-family: 'Chakra Petch', sans-serif; }
.auth-popup-text { font-size: 13px; color: var(--text2);
line-height: 1.55; margin-bottom: 18px; }
.auth-popup-text b { color: var(--gold); font-weight: 700; }
.auth-popup-tg { margin: 14px 0; min-height: 44px;
display: flex; justify-content: center; align-items: center; }
.auth-popup-fallback { display: none; margin-top: 12px; }
.auth-popup-fallback a { display: inline-block; padding: 10px 24px;
background: #2AABEE; color: #fff; border-radius: 4px;
font-family: 'JetBrains Mono', monospace; font-size: 13px;
font-weight: 600; text-decoration: none; }
.auth-popup-fallback a:hover { opacity: 0.9; }
.auth-popup-msg { font-size: 12px; min-height: 18px; margin-top: 10px; color: var(--red); }
/* ── Notifications wizard ────────────────────── */
.nw-overlay { display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
z-index: 1000; align-items: center; justify-content: center; }
.nw-overlay.open { display: flex; }
.nw-modal { background: var(--bg2); border: 1px solid var(--border);
border-radius: 10px; padding: 28px 32px;
max-width: 460px; width: 92%;
position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
max-height: 90vh; overflow-y: auto; }
.nw-close { position: absolute; top: 8px; right: 12px;
background: none; border: none; color: var(--text2);
font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px; }
.nw-close:hover { color: var(--text); }
.nw-title { font-size: 18px; font-weight: 700; color: var(--text);
margin-bottom: 8px; font-family: 'Chakra Petch', sans-serif; }
.nw-text { font-size: 13px; color: var(--text2); line-height: 1.5;
margin-bottom: 20px; }
.nw-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.nw-row { display: flex; flex-direction: column; gap: 6px; }
.nw-row-toggle { padding: 6px 0; }
.nw-row-label { display: flex; justify-content: space-between;
font-size: 12px; color: var(--text2); font-weight: 500; }
.nw-row-value { color: var(--accent); font-family: 'JetBrains Mono', monospace; }
/* Toggle: чекбокс стилизован под switch */
.nw-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer;
font-size: 13px; color: var(--text); user-select: none; }
.nw-toggle input { display: none; }
.nw-toggle-track { width: 36px; height: 20px; background: var(--bg3);
border: 1px solid var(--border); border-radius: 12px;
position: relative; transition: background 0.18s; flex-shrink: 0; }
.nw-toggle-thumb { position: absolute; top: 1px; left: 1px;
width: 16px; height: 16px; background: var(--text2);
border-radius: 50%; transition: transform 0.18s, background 0.18s; }
.nw-toggle input:checked ~ .nw-toggle-track { background: rgba(63,184,79,0.25);
border-color: var(--green); }
.nw-toggle input:checked ~ .nw-toggle-track .nw-toggle-thumb { transform: translateX(16px);
background: var(--green); }
.nw-toggle-label { flex: 1; }
/* Range slider */
.nw-row input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; }
/* Checkboxes — same style как в sidebar (для консистентности) */
.nw-check { display: flex; align-items: center; gap: 8px; padding: 5px 0;
font-size: 13px; cursor: pointer; user-select: none;
font-family: 'JetBrains Mono', monospace; color: var(--text); }
.nw-check input[type="checkbox"] { width: 14px; height: 14px;
accent-color: var(--accent); cursor: pointer; }
.nw-check:hover { color: var(--accent); }
/* Grid 2-cols для trigger types — компактнее в modal'е */
.nw-checks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.nw-checks-row { display: flex; gap: 18px; }
/* Bot status hint (если бот не активирован) */
.nw-bot-status { display: flex; gap: 10px; padding: 10px 12px;
background: rgba(212,160,22,0.10);
border: 1px solid rgba(212,160,22,0.4);
border-radius: 6px; margin-bottom: 16px;
font-size: 12px; color: var(--text); line-height: 1.4; }
.nw-bot-icon { font-size: 18px; flex-shrink: 0; }
.nw-bot-text { flex: 1; }
.nw-bot-text a { color: var(--gold); font-weight: 600; }
.nw-actions { display: flex; gap: 10px; justify-content: flex-end; }
.nw-btn { padding: 9px 18px; border-radius: 6px; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 600;
border: 1px solid; transition: all 0.12s; }
.nw-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.nw-btn-primary:hover { background: #6db5ff; }
.nw-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.nw-btn-secondary { background: transparent; border-color: var(--border); color: var(--text2); }
.nw-btn-secondary:hover { background: var(--bg3); color: var(--text); }
.nw-msg { font-size: 12px; min-height: 16px; margin-top: 10px;
text-align: center; }
/* Pricing step (Step C): карточки тарифов — единый компонент PAYWALL (web_app.py).
CSS классов pricing- и popup- общий с лабораторией и главной (PAYWALL_CSS).
Здесь — только wizard-специфика (.nw-modal.wide) и .pricing-loading. */
.nw-modal.wide { max-width: 720px; }
/* «верхняя фраза» пэйвол-шага — по центру, как на других пэйволах */
#nw-paywall-title, #nw-paywall-text { text-align: center; }
.pricing-loading { color: var(--text2); padding: 30px; text-align: center;
font-size: 13px; }
/* ── Step D: success / deep-link ───────────────────── */
.nw-success-ico { font-size: 56px; color: var(--green); text-align: center;
line-height: 1; margin: 0 0 14px; }
.nw-success-text { color: var(--text2); font-size: 13px; line-height: 1.55;
text-align: center; margin-bottom: 22px; }
.nw-success-text b { color: var(--text); }
.nw-deep-link { display: block; padding: 14px 24px;
background: #2AABEE; color: #fff; border: none;
border-radius: 8px; font-family: 'Chakra Petch', sans-serif;
font-size: 16px; font-weight: 700; cursor: pointer;
letter-spacing: .04em; text-decoration: none; text-align: center;
margin: 0 auto 14px; max-width: 320px;
transition: opacity .15s; }
.nw-deep-link:hover { opacity: 0.88; }
.nw-deep-link-hint { font-size: 11px; color: var(--text2);
text-align: center; margin-bottom: 18px; }
/* market-header / window-toggle / .stats-items блоки удалены —
stats переехали в topbar (см. .topbar-stats). */
/* ── Section title ─────────────────────────────────── */
/* padding-left 14 = card inner padding → выровнено с текстом внутри карточек/таблицы */
.sec-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 14px 0;
padding-left: 14px; letter-spacing: 0.2px; }
.sec-sub { font-size: 11px; color: var(--text2); font-weight: 400; margin-left: 8px; }
/* sec-title-row — заголовок (+ подзаголовок столбиком) в одну строку с поиском.
Desktop: align-items:center → центрируем title-block против input field
(общая высота title+subtitle ≈ высоте input'а ~32px).
Mobile: column-stack, поле тикера во вторую строку. */
.sec-title-row { display: flex; justify-content: space-between; align-items: center;
gap: 12px; margin: 0 0 14px 0; flex-wrap: wrap; }
.sec-title-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sec-title-block .sec-title { margin: 0; line-height: 1.2; }
.sec-title-block .sec-sub { margin: 0; padding-left: 14px; line-height: 1.1; }
/* sec-count — light-вес число «(N сегодня)» справа от заголовка */
.sec-count { font-weight: 300; color: var(--text2); margin-left: 6px;
font-size: 13px; }
/* topcards-header: заголовок слева (растягивается на всю ширину), тоггл справа,
без переноса. ВАЖНО: ниже по файлу (раскладка строки «Все сетапы») есть
`.sec-title-row .sec-title-block { order: 1 }` — оно бьёт и по topcards-header,
давая заголовку order:1, а тогглу дефолтный order:0 → тоггл оказывался ПЕРЕД
заголовком (слева). Поэтому тогглу явно order:5 (после заголовка), а flex:1 на
title-block растягивает его на всю ширину → тоггл упирается в правый край. */
.topcards-header { flex-wrap: nowrap; }
.topcards-header .sec-title-block { flex: 1 1 auto; }
.topcards-header .mode-toggle { flex: 0 0 auto; order: 5; }
@media (max-width: 700px) {
/* Ряд 1: «Все сетапы» (слева) + поиск (справа). Ряд 2: Доходность (слева) +
переключатель (справа, свёрнут в кнопку + popup). Порядок — из base order. */
.sec-title-row { flex-direction: row; flex-wrap: wrap; align-items: center;
row-gap: 12px; position: relative; }
/* «Все сетапы» / «Сетапы дня» — по левому краю карточек/таблицы (убираем
desktop-отступ .sec-title, который выравнивал по тексту внутри карточек). */
.sec-title { padding-left: 0; }
.sec-title-row .ticker-search-wrap { flex: 0 1 150px; min-width: 0; margin-left: auto; }
.sec-title-row .range-seg { flex: 0 0 auto; margin-left: auto; }
/* Переключатель свёрнут в одну кнопку (border, как «Сетапы»). */
.sec-title-row .range-seg { position: relative; border: 0; border-radius: 0; overflow: visible; }
.sec-title-row .range-seg .rng-btn { border: 1px solid var(--border);
border-radius: 6px; background: transparent; }
.sec-title-row .range-seg .rng-btn:not(.active) { display: none; }
.sec-title-row .range-seg .rng-btn:hover { color: var(--text); border-color: var(--text2); }
.sec-title-row .range-seg .rng-btn.active { background: transparent;
color: var(--accent); border-color: var(--accent); }
.sec-title-row .range-seg .rng-btn.active .rng-count { color: var(--accent); }
/* Раскрыто (.rng-open) — ГОРИЗОНТАЛЬНЫЙ segmented popup, разворот ВЛЕВО, поверх
контента. absolute bottom/right относительно sec-title-row (relative) = на
месте свёрнутой кнопки в ряду 2; не раздвигает строку и не уходит под таблицу.
ВАЖНО: префикс .sec-title-row у всех .rng-open правил — иначе свёрнутые
правила (.sec-title-row .range-seg ...) выигрывают по специфичности и
блокируют popup (position остаётся relative, не-active кнопки display:none). */
.sec-title-row .range-seg.rng-open { position: absolute; bottom: 0; right: 0; z-index: 60;
flex-direction: row; border: 1px solid var(--border);
border-radius: 6px; overflow: hidden; background: var(--bg2); }
.sec-title-row .range-seg.rng-open .rng-btn { display: inline-flex; position: static;
border: 0; border-right: 1px solid var(--border);
border-radius: 0; background: var(--bg3); }
.sec-title-row .range-seg.rng-open .rng-btn:last-child { border-right: 0; }
.sec-title-row .range-seg.rng-open .rng-btn.active { background: var(--accent); color: #000;
border-color: transparent; }
.sec-title-row .range-seg.rng-open .rng-btn.active .rng-count { color: #000; }
/* Тултип Доходности — раскрывается вправо (Доходность у левого края экрана). */
.track-cards .tr-tip { left: 0; right: auto; }
/* topcards-header — toggle не стек, остаётся справа от заголовка даже на mobile */
.topcards-header { flex-direction: row; align-items: center; }
}
/* Mode toggle (Light/Pro) — segmented control в правой части шапки "ТОП сетапов".
Сохраняется в prefs.setups.ui.mode. Toggle меняет body.mode-light/.mode-pro класс,
дальше рендеринг карточек/таблицы выбирает шаблон по этому классу. */
.mode-toggle { display: inline-flex; gap: 0; flex-shrink: 0;
border: 1px solid var(--border); border-radius: 6px;
background: var(--bg); overflow: hidden; }
.mode-toggle .mode-btn { background: transparent; border: 0; padding: 5px 14px;
font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace;
color: var(--text2); cursor: pointer; letter-spacing: 0.03em;
transition: background 0.15s ease, color 0.15s ease; }
.mode-toggle .mode-btn + .mode-btn { border-left: 1px solid var(--border); }
.mode-toggle .mode-btn:hover { color: var(--text); }
.mode-toggle .mode-btn.active { background: var(--bg3); color: var(--accent); }
@media (max-width: 700px) {
.mode-toggle .mode-btn { padding: 4px 10px; font-size: 10px; }
}
/* ── Light mode — visibility dispatch ──
В Pro работают существующие #top-cards (V2 SVG ring) + .table-wrap. В Light —
параллельные #top-cards-light + #list-light. Один контейнер видим, другой нет. */
body.mode-light #top-cards,
body.mode-light .table-wrap,
body.mode-light .pager,
body.mode-light .load-more-btn,
body.mode-light .ticker-search-wrap { display: none !important; }
body.mode-pro .cards-light,
body.mode-pro .list-light,
body.mode-pro .list-light-hdr { display: none !important; }
/* Подзаголовок «клик на строку...» — только в Pro (в Light строки не
раскрываются). topcards-header sec-sub (дисклеймер позиции) не трогаем. */
body.mode-light .sec-title-row:not(.topcards-header) .sec-sub { display: none !important; }
/* Light упрощает сайдбар — прячем FA strength, разделитель, Reset, long/short.
Оборот-слайдер + заголовок «Фильтры» оставлены (мин. оборот полезен и в Light). */
body.mode-light .sb-fa-filter,
body.mode-light .sb-reset { display: none !important; }
body.mode-light .sb-section > div[style*="dashed"] { display: none !important; }
/* Тонкий root-скроллбар: Light скроллит body (как Pro), дефолтный «во весь
экран» слишком толстый. Не трогает внутренние скроллы (sidebar/chart). */
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
html::-webkit-scrollbar-thumb:hover { background: var(--text2); }
/* ── Light sticky: body-скролл, ТОЧНО как Pro ──
Прежний фикс (внутренний скролл .main) ломал sticky-шапку списка во вложенном
scroll-контейнере (вложенный sticky + overflow:clip ведёт себя иначе, чем при
body-скролле). Pro работает безотказно на body-скролле: thead sticky
top:var(--topbar-h). Light использует тот же механизм — .list-light-hdr тоже
sticky top:var(--topbar-h) (базовое правило ниже), скролл на body.
Тонкий root-скроллбар задан глобально (html ниже). Известный компромисс:
chart-panel/sidebar (sticky) на самом ХВОСТЕ длинного списка чуть уезжают —
как и в Pro-механизме; для витрины приемлемо. */
/* ── Light TOP cards (Сетапы дня) — flex-scroll 240px, зеркало Pro .cards.tc-grid ── */
.cards-light { display: flex; gap: 10px; margin: 0;
overflow-x: auto; overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 6px 20px 8px 0; }
.cards-light::-webkit-scrollbar { height: 4px; }
.cards-light::-webkit-scrollbar-track { background: transparent; }
.cards-light::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.cards-light::-webkit-scrollbar-thumb:hover { background: var(--text2); }
.cards-light .loading { padding: 28px 12px; text-align: center;
color: var(--text2); font-size: 12px; }
.cards-light .empty { flex: 1; padding: 32px 16px; text-align: center;
color: var(--text2); font-size: 12px; line-height: 1.5;
background: var(--bg2); border-radius: 10px;
border: 1px dashed var(--border); }
/* Light TOP card использует Pro-классы tc-* (базовый стиль наследуется). Здесь —
только раскладка в flex-scroll контейнере + z-index для tooltip. */
.cards-light .tc-card { flex: 0 0 240px; scroll-snap-align: start;
position: relative; }
.cards-light .tc-card:hover,
.cards-light .tc-card:focus-within { overflow: visible; z-index: 30; }
/* Середина карточки — якорь «+XR на 100 сделок» (2 строки, по центру),
вместо Pro SVG-круга */
.cards-light .tc-anchor-mid { flex: 1; display: flex; flex-direction: column;
align-items: flex-start; justify-content: center; gap: 3px;
margin-bottom: 24px; position: relative; cursor: help; }
/* Направление = цветная полоска слева от блока «+XR / потенциал»
(вместо словесного LONG/SHORT). Класс tc-dir-* на .tc-card; полоска обнимает
именно блок val+lbl (tc-anchor-strip), не всю середину. */
.cards-light .tc-anchor-strip { display: flex; flex-direction: column; gap: 3px; }
.cards-light .tc-card.tc-dir-long .tc-anchor-strip { border-left: 5px solid var(--green); padding-left: 14px; }
.cards-light .tc-card.tc-dir-short .tc-anchor-strip { border-left: 5px solid var(--red); padding-left: 14px; }
/* Карточка — единый тёмный фон/рамка; направление показывает ТОЛЬКО полоска
слева (большое зелёное/красное пятно фона резало глаз). Перебиваем фон+рамку
от .tc-dir-* (это правила старого LONG/SHORT-бейджа, висят на самой карточке). */
.cards-light .tc-card.tc-dir-long,
.cards-light .tc-card.tc-dir-short { background: var(--bg2); border-color: var(--border); }
/* Маркер надёжности в футере выравниваем по левому краю «+XR/потенциал»
(полоска 5px + отступ 14px = 19px). Divider (border-top) остаётся на всю ширину. */
.cards-light .tc-footer { padding-left: 19px; }
.cards-light .tc-anchor-val { font: 700 27px/1 'JetBrains Mono', monospace;
color: var(--green); letter-spacing: 0.5px; }
.cards-light .tc-anchor-lbl { font-size: 12px; color: var(--text2); }
.cards-light .tc-anchor-empty { cursor: default; }
.cards-light .tc-anchor-empty .tc-anchor-lbl { font-style: italic; opacity: 0.7; }
.cards-light .card-l.dir-long { border-left-color: var(--green); }
.cards-light .card-l.dir-short { border-left-color: var(--red); }
.cards-light .card-l-head { display: flex; justify-content: space-between;
align-items: baseline; gap: 8px; margin-bottom: 2px; }
.cards-light .card-l-ticker { font: 700 18px/1 'JetBrains Mono', monospace;
color: var(--text); }
.cards-light .card-l-dir { font: 700 10px/1 'JetBrains Mono', monospace;
letter-spacing: 0.06em; padding: 3px 6px; border-radius: 3px; }
.cards-light .card-l-dir.dir-long { color: var(--green); background: rgba(63,184,79,0.10); }
.cards-light .card-l-dir.dir-short { color: var(--red); background: rgba(247,80,73,0.10); }
.cards-light .card-l-name { font-size: 10px; color: var(--text2); margin-bottom: 8px;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cards-light .card-l-headline { font-size: 12px; line-height: 1.4; color: var(--text);
flex: 1; margin: 6px 0; overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; }
.cards-light .card-l-footer { margin-top: auto; display: flex; justify-content: space-between;
align-items: flex-end; gap: 6px; padding-top: 8px;
border-top: 1px dashed rgba(255,255,255,0.04); }
.cards-light .card-l-pnl { font-size: 11px; line-height: 1.4; color: var(--text2); }
.cards-light .card-l-pnl b { font-weight: 700; }
.cards-light .card-l-pnl .pnl-tp { color: var(--green); }
.cards-light .card-l-pnl .pnl-sl { color: var(--red); }
.cards-light .card-l-q { font-size: 10px; letter-spacing: 0.04em; flex-shrink: 0;
white-space: nowrap; color: var(--text2); align-self: flex-end;
background: transparent !important; padding: 0; }
.cards-light .card-l-q.qual-solid { color: var(--green); }
.cards-light .card-l-q.qual-balanced { color: var(--accent); }
.cards-light .card-l-q.qual-fragile { color: var(--gold); }
@media (max-width: 900px) {
.cards-light .card-l { flex: 0 0 56%; } /* зеркало Pro .tc-card mobile */
}
/* ── Распределение исходов (stacked-бар на Light-карточке, MVP DIVERGENCE) ──
Две стороны маркетинга: «риск зафиксирован» (строка сверху) + «прибыль
не ограничена» (бар: убыток / +1R / +2R / +3R+). */
.card-l-footer-rdist { flex-direction: column; align-items: stretch; gap: 8px;
margin-top: auto; }
/* Якорь «ожидаем +XR на 100 сделок» */
.rdist-anchor { position: relative; cursor: help; outline: none; }
.card-anchor { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rdist-anchor-lead { font-size: 11px; color: var(--text2); }
.rdist-anchor-val { font: 700 19px/1 'JetBrains Mono', monospace; color: var(--green);
letter-spacing: 0.2px; }
.rdist-anchor-lbl { font-size: 11px; color: var(--text2); }
/* Серийная вероятность — строка под потенциалом (колонка + Топ-карточки) */
.rdist-series { font-size: 11px; color: var(--text2); margin-top: 3px; }
.cards-light .tc-series { font-size: 12px; color: var(--text2); margin-top: 6px;
padding-left: 14px; }
/* Бар: 4 сегмента целыми границами (Убыток / 0–1R / 1–2R / 2R+) */
.rdist-bar { display: flex; height: 8px; border-radius: 3px; overflow: hidden;
background: var(--bg); }
.rdist-seg { min-width: 0; }
.rdist-seg.seg-loss { background: #e0827c; }
.rdist-seg.seg-r1 { background: #a9d6a2; }
.rdist-seg.seg-r2 { background: #57b257; }
.rdist-seg.seg-r3 { background: #2c7a2c; }
/* Tooltip-таблица (hover/focus на якоре) */
.rdist-tip { position: absolute; z-index: 200; left: 0; bottom: calc(100% + 8px);
width: 232px; background: var(--bg3); border: 1px solid var(--border);
border-radius: 8px; padding: 10px 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.45);
opacity: 0; visibility: hidden; transform: translateY(4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; }
.rdist-anchor:hover .rdist-tip,
.rdist-anchor:focus .rdist-tip,
.rdist-anchor:focus-within .rdist-tip { opacity: 1; visibility: visible; transform: translateY(0); }
/* TOP-карточки: tooltip — центрированный оверлей ВНУТРИ карточки (а не pop-out
вверх). scroll-контейнер .cards-light клипает вертикальный overflow → pop-out
обрезался. Оверлей в пределах карточки (240px) не клипается. */
.cards-light .rdist-tip { left: 50%; right: auto; top: 50%; bottom: auto;
width: 216px;
transform: translate(-50%, -50%) scale(0.97); }
.cards-light .rdist-anchor:hover .rdist-tip,
.cards-light .rdist-anchor:focus .rdist-tip,
.cards-light .rdist-anchor:focus-within .rdist-tip {
transform: translate(-50%, -50%) scale(1); }
.rdist-tip-hdr { font-size: 10px; color: var(--text2); margin-bottom: 6px;
text-transform: uppercase; letter-spacing: 0.04em; }
/* Текстовый тултип-объяснение метрик (Потенциал/риск 1R/серия) */
.rdist-tip-text { width: 248px; font: 400 11.5px/1.45 'Chakra Petch', sans-serif;
color: var(--text2); text-align: left; }
.cards-light .rdist-tip-text { width: 230px; }
.rdist-tip-text > div + div { margin-top: 7px; }
.rdist-tip-text b { color: var(--text); font-weight: 600; }
.rdist-tip-text .rt-note { margin-top: 9px; padding-top: 8px;
border-top: 1px solid var(--border);
color: var(--muted); font-size: 10.5px; }
.rdist-tip-tbl { width: 100%; border-collapse: collapse;
font: 500 11px/1.4 'JetBrains Mono', monospace; }
.rdist-tip-tbl th { font-weight: 500; color: var(--text2); text-align: right;
padding: 2px 0 4px 0; font-size: 10px; }
.rdist-tip-tbl th:first-child { text-align: left; }
.rdist-tip-tbl td { text-align: right; padding: 3px 0; color: var(--text);
white-space: nowrap; font-weight: 300; }
.rdist-tip-tbl td:first-child { text-align: left; padding-right: 8px; font-weight: 400; }
.rdist-tip-tbl tbody td { border-top: 1px solid rgba(255,255,255,0.04); }
.rdist-tip-tbl tfoot td { border-top: 1px solid var(--border); padding-top: 5px;
font-weight: 700; }
.rdist-tip-tbl .rt-pos { color: var(--green); }
.rdist-tip-tbl .rt-neg { color: var(--red); }
/* Точки убыток/прибыль — мелкие (≈вдвое меньше эмодзи) */
.rt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
margin-right: 7px; vertical-align: middle; }
.rt-dot-loss { background: var(--red); }
.rt-dot-win { background: var(--green); }
@media (max-width: 900px) {
.rdist-tip { width: 232px; left: auto; right: 0; }
}
/* ── Light list (горизонтальные карточки вместо таблицы) ── */
/* Track-record карточки (Всего сетапов / WR / Доходность) — компактные chip'ы
ВНУТРИ строки заголовка «Все сетапы» (label + value в строку). Только Light. */
.track-cards { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
body.mode-pro .track-cards { display: none !important; }
/* Пользовательский режим: карточка «Доходность» (агрегат результатов закрытых
сделок) скрыта. В Бэктесте остаётся — body.mode-backtest .track-cards
{ display:flex !important } ниже по source выигрывает при равной специфичности. */
body.mode-user .track-cards { display: none !important; }
/* Доходность — просто текст (без карточки-фона); число и лейбл сохраняют размер/цвет. */
.track-cards .tr-card { display: flex; align-items: baseline; gap: 9px;
background: transparent; border: 0; padding: 0; }
.track-cards .tr-lab { font-size: 14px; color: var(--text2);
letter-spacing: normal; white-space: nowrap; }
.track-cards .tr-val { font: 700 16px/1 'JetBrains Mono', monospace; color: var(--text); }
.track-cards .tr-card.tr-help { cursor: help; position: relative; }
.track-cards .tr-info { font-size: 14px; color: var(--text2); opacity: 0.7; }
/* Тултип «Доходность» — по наведению (мгновенно) И по клику (.tip-open для mobile). */
.track-cards .tr-tip { display: none; position: absolute; top: calc(100% + 8px); right: 0;
z-index: 300; width: 300px; max-width: 78vw; padding: 10px 12px;
background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
font: 400 11px/1.5 'JetBrains Mono', monospace; color: var(--text2);
text-transform: none; letter-spacing: normal; white-space: normal;
box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.track-cards .tr-tip b { color: var(--text); font-weight: 700; }
.track-cards .tr-tip > div + div { margin-top: 7px; }
/* Заголовок тултипа + нижнее примечание (совет про комиссию/проскальзывание) */
.track-cards .tr-tip-title { color: var(--text); font-weight: 700; font-size: 12px;
margin-bottom: 9px; padding-bottom: 8px;
border-bottom: 1px solid var(--border); }
.track-cards .tr-tip .tr-tip-note { margin-top: 12px; padding-top: 12px;
border-top: 1px solid var(--border); }
.track-cards .tr-card.tr-help:hover .tr-tip,
.track-cards .tr-card.tr-help.tip-open .tr-tip { display: block; }
.lh-help { cursor: help; }
/* Реализованный R по закрытой сделке (колонка «Доходность», влево как заголовок). */
.list-light .row-l-realr { text-align: left; font: 700 16px/1 'JetBrains Mono', monospace;
color: var(--text2); }
/* CANCELED — гэп до входа, сделка не открылась (не путать с потенциалом). */
.list-light .row-l-canceled { text-align: left; font: 400 12px/1.3 'JetBrains Mono', monospace;
color: var(--text2); font-style: italic; opacity: 0.75; }
.list-light .row-l-realr.real-pos { color: var(--green); }
.list-light .row-l-realr.real-neg { color: var(--red); }
.list-light .row-l-realr .realr-lbl { display: block; font: 400 9px/1 'JetBrains Mono', monospace;
color: var(--text2); text-transform: uppercase;
letter-spacing: 0.3px; margin-top: 3px; }
/* Селектор окна таблицы («Последние 14 дней» / История) — в строке заголовка «Все сетапы».
Заголовок прижат влево margin-right:auto → селектор + ticker группируются справа. */
.sec-title-row .sec-title-block { margin-right: auto; }
/* Десктоп: единый segmented как /trades .toggle-group — контейнер с рамкой +
overflow, кнопки bg3 с разделителями border-right, активная = accent-заливка.
На mobile (@700) сворачивается в одну кнопку + раскрывается popup'ом. */
.range-seg { display: inline-flex; border: 1px solid var(--border);
border-radius: 6px; overflow: hidden; }
.rng-btn { background: var(--bg3); color: var(--text2); border: 0;
border-right: 1px solid var(--border); cursor: pointer;
font: 600 14px/1 'JetBrains Mono', monospace; padding: 7px 14px;
white-space: nowrap; transition: all 0.15s; }
.rng-btn:last-child { border-right: 0; }
.rng-btn:hover:not(.active) { color: var(--text); }
.rng-btn.active { background: var(--accent); color: #000; }
/* Счётчик сетапов в переключателе (Последние 14 дней N / История 60k) */
.rng-count { margin-left: 6px; font-size: 13px; font-weight: 400;
color: var(--text2); opacity: 0.9; }
.rng-btn.active .rng-count { color: #000; opacity: 1; }
.rng-count:empty { display: none; }
/* Раскладка sec-title-row: заголовок · поиск · Доходность · переключатель.
Порядок через order (HTML-порядок другой). Десктоп — одна строка; mobile
(@700) — wrap на 2 ряда. Поиск тикера показываем и в Light (был скрыт). */
.sec-title-row { justify-content: flex-start; }
.sec-title-row .sec-title-block { order: 1; }
.sec-title-row .ticker-search-wrap { order: 2; }
.sec-title-row .track-cards { order: 3; }
.sec-title-row .range-seg { order: 4; }
body.mode-light .sec-title-row .ticker-search-wrap,
body.mode-backtest .sec-title-row .ticker-search-wrap { display: flex !important; }
/* Десктоп: строка «Все сетапы» — заголовок+поиск слева (вплотную), Доход+окно
справа, БЕЗ переноса. В ₽-режиме track-cards длиннее (откр/проп/депо) → раньше
Последние 14 дней / История переносились на 2-ю строку. nowrap + margin-left:auto на
track-cards (прижимает Доход+окно вправо, при тесноте — ужимается) это убирает.
Mobile (@700) — свой 2-рядный layout, его не трогаем. */
@media (min-width: 701px) {
.sec-title-row:not(.topcards-header) { flex-wrap: nowrap; }
.sec-title-row:not(.topcards-header) .track-cards { margin-left: auto; min-width: 0; }
.sec-title-row:not(.topcards-header) .range-seg { flex: 0 0 auto; }
}
/* ── Витрина бэктеста (body.mode-backtest) — историческая, на месте таблицы ── */
.bt-label { display: none; align-items: center; gap: 10px; margin: 0 0 12px;
padding: 9px 14px; background: #14202d;
border: 1px solid rgba(87,165,255,0.35); border-radius: 8px;
font-size: 12px; color: var(--text2);
/* Прилипает под шапкой таблицы при скролле (как был золотой алерт) */
position: sticky; top: calc(var(--topbar-h) + 34px); z-index: 4; }
.bt-label b { color: var(--accent); font-weight: 700; }
.bt-label .bt-emph { color: var(--text); font-weight: 600; }
.bt-label-icon { font-size: 15px; flex-shrink: 0; }
.bt-pager { display: none; align-items: center; justify-content: center; gap: 6px;
flex-wrap: wrap; margin: 14px 0 26px; }
.bt-pg-btn { background: var(--bg2); border: 1px solid var(--border); color: var(--text);
cursor: pointer; font: 600 12px/1 'JetBrains Mono', monospace;
padding: 8px 13px; border-radius: 7px; transition: background .15s, border-color .15s; }
.bt-pg-btn:hover:not(:disabled) { background: var(--bg3); border-color: var(--accent); }
.bt-pg-btn:disabled { opacity: 0.4; cursor: default; }
/* Кликабельные номера страниц (1 2 3 … N) */
.bt-pg-num { background: var(--bg2); border: 1px solid var(--border); color: var(--text2);
cursor: pointer; font: 600 12px/1 'JetBrains Mono', monospace; min-width: 34px;
padding: 8px 6px; border-radius: 7px; text-align: center;
transition: background .15s, border-color .15s, color .15s; }
.bt-pg-num:hover:not(.active) { background: var(--bg3); border-color: var(--accent); color: var(--text); }
.bt-pg-num.active { background: var(--accent); border-color: var(--accent); color: #08111c; cursor: default; }
.bt-pg-ellipsis { color: var(--muted); font: 600 12px/1 'JetBrains Mono', monospace; padding: 0 2px; }
.bt-pg-info { font: 400 12px/1 'JetBrains Mono', monospace; color: var(--text2); margin-left: 8px; }
.bt-pg-info b { color: var(--text); }
/* В бэктесте: показываем Light-витрину (Сетапы дня + список + чипы + плашка/
пагинатор) ПОВЕРХ любого режима (Light/Pro); прячем Pro-таблицу/пагинацию +
анон-плашку. «Сетапы дня» оставляем — живая витрина рынка (история ≠ живые,
но карточки помогают не пустовать; клик по карточке = живой график). */
body.mode-backtest .bt-label,
body.mode-backtest .bt-pager { display: flex; }
body.mode-backtest #top-cards,
body.mode-backtest .table-wrap,
body.mode-backtest .anon-banner,
body.mode-backtest .pager { display: none !important; }
body.mode-backtest .cards-light { display: flex !important; }
body.mode-backtest .list-wrap { display: block !important; }
body.mode-backtest .list-light { display: flex !important; }
body.mode-backtest .list-light-hdr { display: grid !important; }
body.mode-backtest .track-cards { display: flex !important; }
/* ── Пресет-режим (body.mode-preset) — forward-журнал пресета на месте таблицы ── */
body.mode-preset #top-cards,
body.mode-preset .table-wrap,
body.mode-preset .anon-banner,
body.mode-preset .track-cards,
body.mode-preset .bt-label,
body.mode-preset .bt-pager,
body.mode-preset .list-light-hdr,
body.mode-preset .pager { display: none !important; }
body.mode-preset .list-wrap { display: block !important; }
body.mode-preset .list-light { display: flex !important; flex-direction: column; }
/* Обводка таблицы Light — как Pro .table-wrap: border + скруглённые углы.
overflow: clip клипает углы шапки/строк БЕЗ scroll-context (sticky жив). */
.list-wrap { background: var(--bg2); border: 1px solid var(--border);
border-radius: 8px; overflow: clip; margin-bottom: 24px; }
body.mode-pro .list-wrap { display: none !important; }
/* Sticky-шапка списка — как thead в Pro. Колонки = .row-l. Прозрачный
border-left 2px компенсирует полосу направления у строк (выравнивание). */
.list-light-hdr { display: grid; grid-template-columns: 80px 140px 1fr 190px 100px;
gap: 14px; align-items: center;
padding: 9px 16px; border-left: 2px solid transparent;
background: var(--bg3); border-bottom: 1px solid var(--border);
font: 500 11px/1 'JetBrains Mono', monospace; color: var(--text2);
letter-spacing: 0.3px;
position: sticky; top: var(--topbar-h); z-index: 5; }
.list-light-hdr .lh-right { text-align: right; }
@media (max-width: 900px) { .list-light-hdr { top: max(33vh, 240px); } }
/* Строки вплотную (gap 0), разделитель — border-bottom. margin у .list-wrap. */
.list-light { display: flex; flex-direction: column; gap: 0; }
.list-light .loading,
.list-light .empty { padding: 24px 16px; text-align: center; color: var(--text2);
font-size: 12px; background: var(--bg2);
border-radius: 8px; border: 1px dashed var(--border); }
.list-light .row-l { display: grid;
grid-template-columns: 80px 140px 1fr 190px 100px;
gap: 14px; align-items: center;
padding: 14px 16px; background: var(--bg2);
border-bottom: 1px solid var(--border);
border-left: 2px solid var(--border);
cursor: pointer;
transition: background 0.15s ease; }
.list-light .row-l:hover { background: var(--bg3); }
.list-light .row-l.selected { background: var(--bg3); border-left-width: 4px; }
.list-light .row-l.dir-long { border-left-color: var(--green); }
.list-light .row-l.dir-short { border-left-color: var(--red); }
/* Дата — два строки DD.MM / HH:MM (зеркало Pro fmtTime). */
.list-light .row-l-time { font: 500 12px/1.3 'JetBrains Mono', monospace;
color: var(--text2); white-space: nowrap; }
.list-light .row-l-time .date-line { display: block; }
.list-light .row-l-time .time-line { display: block; opacity: 0.65; font-size: 11px; }
.list-light .row-l-tk { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.list-light .row-l-tkr-line { display: flex; align-items: center; gap: 3px; }
.list-light .row-l-tkr-line .fav-heart { width: 18px; height: 18px; }
.list-light .row-l-tkr-line .fav-heart svg { width: 13px; height: 13px; }
/* Ticker — синий accent (зеркало Pro .ticker-name). */
.list-light .row-l-ticker { font: 700 14px/1 'JetBrains Mono', monospace; color: var(--accent); }
.list-light .row-l-name { font-size: 10px; color: var(--text2);
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.list-light .row-l-headline { font-size: 12px; line-height: 1.3; color: var(--text);
min-width: 0; overflow: hidden; white-space: nowrap;
text-overflow: ellipsis; }
/* Название сетапа (англ., как сайдбар) — основной; уровень/тег — приглушённый. */
.list-light .row-l-headline .hl-name { font-weight: 600; color: var(--text); letter-spacing: 0.2px; }
.list-light .row-l-headline .hl-lvl { color: var(--text2); }
.list-light .row-l-pnl { text-align: right; font-size: 11px; line-height: 1.4;
color: var(--text2); white-space: nowrap; }
.list-light .row-l-pnl b { font-weight: 700; }
.list-light .row-l-pnl .pnl-tp { color: var(--green); }
.list-light .row-l-pnl .pnl-sl { color: var(--red); }
.list-light .row-l-q { font-size: 10px; letter-spacing: 0.04em;
color: var(--text2); text-align: right; white-space: nowrap;
background: transparent !important; padding: 0; }
.list-light .row-l-q.qual-solid { color: var(--green); }
.list-light .row-l-q.qual-balanced { color: var(--accent); }
.list-light .row-l-q.qual-lottery { color: #ff9800; }
.list-light .row-l-q.qual-fragile { color: var(--gold); }
.list-light .row-l-q.qual-small_n { color: var(--text2); }
/* Distribution-вариант строки — колонка «Доходность» (190px): якорь «+XR/100»
(с hover-tooltip) + бар. Грид унифицирован с базовым (5 кол с N). */
.list-light .row-l.has-rdist { grid-template-columns: 80px 140px 1fr 190px 100px; }
.list-light .row-l-rdist { min-width: 0; }
/* ₽-режим (admin): +колонка Лот/₽ → grid на 6 колонок (header + строки) */
body.mode-rubles .list-light-hdr,
body.mode-rubles .list-light .row-l,
body.mode-rubles .list-light .row-l.has-rdist { grid-template-columns: 80px 140px 1fr 130px 190px 100px; }
.list-light-hdr .lh-lotrub { display: none; }
body.mode-rubles .list-light-hdr .lh-lotrub { display: block; }
.row-l-lotrub { font: 600 12px/1.3 'JetBrains Mono', monospace; color: var(--text2); min-width: 0; }
.row-l-lotrub b { color: var(--text); }
.row-l-lotrub-dim { color: var(--muted); }
.row-l-netrub { font: 600 13px/1.3 'JetBrains Mono', monospace; min-width: 0; }
.row-l-netrub.real-pos { color: var(--green); }
.row-l-netrub.real-neg { color: var(--red); }
/* RR-уровень сетапа (TP/риск в R) — приглушённая вторая строка под net₽. */
.row-l-netrub .row-l-rr { display: block; font: 400 9px/1.2 'JetBrains Mono', monospace;
color: var(--text2); margin-top: 3px; }
/* Колонка N (размер выборки) — точка качества + N, влево (как в Pro).
padding-left 40px = зазор между «Доходность» и N (трек N расширен на 40px,
1fr «Сетап» ужимается на эти 40px → «Доходность» отъезжает влево от N). */
.list-light .row-l-n { text-align: left; font: 600 13px/1 'JetBrains Mono', monospace;
color: var(--text2); white-space: nowrap; padding-left: 40px; }
.list-light-hdr .lh-n { padding-left: 40px; }
/* .rdist-anchor оборачивает И текст, И бар → hover на всей шкале (не только числе) */
.list-light .row-l-rdist .rdist-anchor { display: flex; flex-direction: column;
gap: 5px; }
.list-light .row-l-rdist .rdist-anchor-line { display: flex; align-items: baseline; gap: 6px; }
.list-light .row-l-rdist .rdist-anchor-val { font-size: 15px; }
.list-light .row-l-rdist .rdist-anchor-lbl { font-size: 10px; }
.list-light .row-l-rdist .rdist-bar { height: 6px; }
/* Tooltip строки списка раскрывается вниз (строки выше — мало места сверху) */
.list-light .row-l-rdist .rdist-tip { bottom: auto; top: calc(100% + 8px);
left: auto; right: 0; }
@media (max-width: 900px) {
/* Шапку списка убираем — строки самодостаточны (тикер / тип / R видны).
Включая backtest-режим, где hdr форсится display:grid. */
.list-light-hdr,
body.mode-backtest .list-light-hdr { display: none !important; }
/* Раскладка строки: Время · Тикер · [Сетап над Доходностью] · Выборка.
Боковые колонки (Время/Тикер/Выборка) тянутся на 2 ряда и центрируются;
центральная колонка — 2 ряда: название сетапа сверху, блок доходности
снизу. Высота строки заметно больше десктопа (by design). */
.list-light .row-l,
.list-light .row-l.has-rdist {
grid-template-columns: 52px minmax(58px, 78px) 1fr 64px;
grid-template-rows: auto auto;
gap: 8px 11px;
padding: 16px 14px;
align-items: center;
}
/* Время и Тикер — как на десктопе, но текст на пару пунктов крупнее. */
.list-light .row-l-time { grid-column: 1; grid-row: 1 / 3; align-self: center;
font-size: 14px; }
.list-light .row-l-time .time-line { font-size: 13px; }
.list-light .row-l-tk { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.list-light .row-l-ticker { font-size: 16px; }
.list-light .row-l-name { font-size: 12px; }
/* Сетап (название + уровень входа) — верх центральной колонки. */
.list-light .row-l-headline { grid-column: 3; grid-row: 1; white-space: normal; }
/* Блок доходности (любой из 4 вариантов) — низ центральной колонки. */
.list-light .row-l-realr,
.list-light .row-l-canceled,
.list-light .row-l-rdist,
.list-light .row-l-pnl { grid-column: 3; grid-row: 2; text-align: left; }
/* Закрытая сделка — значение и причина в одну строку («−1.00R стоп»). */
.list-light .row-l-realr .realr-lbl { display: inline; margin-left: 5px; font-size: 11px; }
/* Выборка (точка качества + N) — правее, на 2 ряда, по центру; фикс. ширина
под 5-значное N (пригодится в будущем), выравнивание влево. */
.list-light .row-l-n { display: flex !important; grid-column: 4; grid-row: 1 / 3;
align-self: center; justify-content: flex-start;
min-width: 64px; padding-left: 0; }
/* «Значение ожидаемой доходности над цветной шкалой» — rdist в столбик;
шкала уже на ~20% (width 80%, выравнивание влево). */
.list-light .row-l-rdist .rdist-anchor { flex-direction: column; align-items: flex-start; gap: 5px; }
.list-light .row-l-rdist .rdist-anchor-line { flex: 0 0 auto; }
.list-light .row-l-rdist .rdist-bar { flex: none; width: 80%; height: 7px; }
}
/* Anon banner — жёлтая плашка между sec-title «Все сетапы» и day-picker.
4h delay для анонимов — кликабельно открывает auth popup.
Sticky под шапкой таблицы при скролле (top = topbar + thead height ≈ 34px).
Background opaque (var(--bg2)) — чтобы при sticky содержимое не просвечивало. */
.anon-banner { display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 22px 18px;
background: var(--bg2);
border: 1px solid rgba(212, 160, 22, 0.45);
box-shadow: inset 0 0 0 9999px rgba(212, 160, 22, 0.10);
border-radius: 6px;
color: var(--text); font-size: 14px; line-height: 1.4;
margin: 4px 0 12px 0;
cursor: pointer; transition: background 0.15s;
position: sticky; top: calc(var(--topbar-h) + 34px); z-index: 4; }
.anon-banner:hover { box-shadow: inset 0 0 0 9999px rgba(212, 160, 22, 0.18); }
.anon-banner-text { display: flex; align-items: center; gap: 12px; }
.anon-banner-lock { font-size: 20px; line-height: 1; flex-shrink: 0; }
.anon-banner-text b { color: var(--gold); font-weight: 700; }
.anon-banner-lines { display: flex; flex-direction: column; gap: 2px; }
.anon-banner-main { line-height: 1.3; }
.anon-banner-sub { font-size: 12px; color: var(--text2); line-height: 1.3; }
.anon-banner-sub b { color: var(--gold); font-weight: 700; }
.anon-banner-cta { color: var(--gold); font-weight: 600; white-space: nowrap; }
/* Premium-expiry — info-тон (синий акцент), отличить от золотого апселла */
.anon-banner.premium-expiry { border-color: rgba(87, 165, 255, 0.45);
box-shadow: inset 0 0 0 9999px rgba(87, 165, 255, 0.10); }
.anon-banner.premium-expiry:hover { box-shadow: inset 0 0 0 9999px rgba(87, 165, 255, 0.18); }
.anon-banner.premium-expiry .anon-banner-main b,
.anon-banner.premium-expiry .anon-banner-cta { color: var(--accent); }
/* ── Top cards ─────────────────────────────────── */
/* V1 fallback (TOP_CARDS_V2 = false) — grid 4/2/1. V2 path (default) уходит
в horizontal scroll-row через .cards.tc-grid (см. ниже). margin-bottom
теперь у wrapper'а .tc-row-wrap, чтобы V1 и V2 имели одинаковый внешний gap. */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 0; }
@media (max-width: 1400px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .cards { grid-template-columns: repeat(1, 1fr); } }
/* TOP cards — визуальный акцент:
- Subtle gradient bg (accent fade сверху)
- Border с accent-tint
- Default: blue glow (показывает что это TOP, не обычные карточки)
- Hover: glow гаснет + лифт — «получили внимание, акцент не нужен» */
.card { background: linear-gradient(180deg, rgba(87,165,255,0.06) 0%, var(--bg2) 60%);
border: 1px solid rgba(87,165,255,0.25); border-radius: 8px;
padding: 14px 14px; cursor: pointer;
transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
/* Квадратные карточки на десктопе */
aspect-ratio: 1 / 1;
display: flex; flex-direction: column;
/* Blue glow по дефолту — visual presence */
box-shadow: 0 6px 20px rgba(87,165,255,0.12); }
.card:hover { border-color: rgba(87,165,255,0.6); transform: translateY(-2px);
/* Glow гаснет на hover — нейтральная elevation */
box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.card-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px;
color: var(--text); margin-bottom: 2px; }
/* card-name: 2 строки зарезервированы для единообразия высоты карточек
(короткие имена не «прыгают» по вертикали). Длинные обрезаются ellipsis'ом. */
.card-name { font-size: 11px; color: var(--text2); margin-bottom: 10px;
line-height: 14px; min-height: 28px;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden; }
/* card-trigger — английское имя триггера (FALSE_BREAKOUT, COMPRESSION...) в mono.
card-context — человекопонятная фраза (sans-serif, мелким серым) под ним. */
.card-trigger { font-family: 'JetBrains Mono', monospace; font-size: 11px;
color: var(--accent); letter-spacing: 0.4px; margin-bottom: 4px; }
.card-context { font-family: -apple-system, Segoe UI, Roboto, sans-serif;
font-size: 11px; color: var(--text2);
line-height: 14px; min-height: 14px; margin-bottom: 8px; }
/* margin-top: auto: пустое пространство уходит между context и LONG/SHORT.
margin-bottom: 14px — комфортный отступ от LONG/SHORT до quality-badge снизу. */
.card-dir-row { display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-top: auto; margin-bottom: 14px; font-size: 13px; }
.card-er-block { display: inline-flex; align-items: baseline; gap: 5px; }
.card-er-lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px;
color: var(--text2); font-weight: 400; }
.card-er { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; }
.dir-badge { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 10px;
padding: 2px 8px; border-radius: 3px; letter-spacing: 0.4px; }
.dir-long { background: rgba(63,184,79,0.15); color: var(--green); }
.dir-short { background: rgba(247,80,73,0.15); color: var(--red); }
.card-quality { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
margin-right: 5px; vertical-align: middle; }
.q-solid { background: var(--green); }
.q-balanced { background: #5e9bff; }
.q-lottery { background: #ff9800; }
.q-fragile { background: #ff7a4a; }
.q-small_n { background: var(--text2); }
/* quality-badge сидит сразу под LONG/SHORT — auto-margin теперь на dir-row */
.card-variants-note { font-size: 10px; color: var(--text2);
font-family: 'JetBrains Mono', monospace; }
/* ── Top cards V2 (namespaced .tc-*) ─────────────────────────────────
Активируются JS-флагом TOP_CARDS_V2. Старые .card-* классы выше остаются
нетронутыми — откат двумя строками (TOP_CARDS_V2 = false). */
.tc-card { background: var(--bg2);
border: 1px solid var(--border); border-radius: 8px;
padding: 14px; cursor: pointer;
transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
aspect-ratio: 1 / 1;
display: flex; flex-direction: column;
box-shadow: 0 6px 20px rgba(87,165,255,0.08); }
.tc-card:hover { border-color: rgba(87,165,255,0.55); transform: translateY(-2px);
box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
/* Header: ticker+badge | time */
.tc-header { display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 8px; }
.tc-ticker-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tc-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 700;
font-size: 18px; color: var(--text); letter-spacing: 0.3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-variants-badge { background: var(--bg3); color: var(--text2);
font-family: 'JetBrains Mono', monospace; font-size: 11px;
font-weight: 600; padding: 2px 7px; border-radius: 3px;
flex-shrink: 0; }
.tc-time { font-family: 'JetBrains Mono', monospace; font-size: 12px;
color: var(--text2); flex-shrink: 0; white-space: nowrap; }
/* Title row: trigger-type (синий caps) + location (серый, smaller) inline.
flex-wrap: wrap — если не влезает в одну строку, location уходит на следующую
строку целиком (не разрывается посередине). gap 6px — визуальный пробел.
margin-bottom 24px — пробел в одну строку до тела карточки (E[R] круг). */
.tc-title { display: flex; align-items: baseline; flex-wrap: wrap;
gap: 6px; margin-bottom: 24px; min-width: 0; }
.tc-trigger-type { font-family: 'JetBrains Mono', monospace; font-size: 13px;
font-weight: 700; color: var(--accent);
letter-spacing: 0.5px; flex: 0 0 auto; }
.tc-location { font-family: -apple-system, Segoe UI, Roboto, sans-serif;
font-size: 12px; color: var(--text2); font-weight: 400;
flex: 0 1 auto; min-width: 0; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
/* Body: 2-col grid (circle | bullets), gap 16px между ними */
.tc-body { display: grid; grid-template-columns: auto 1fr;
column-gap: 16px; flex: 1; align-items: start; min-height: 0; }
/* E[R] circle — SVG progress-ring. Дуга = WR (нормализация 40-80% → 5-100% arc),
tier color = E[R] threshold (8 уровней, согласовано с «Силой фундамента»).
Backside кольца — тот же tier color при alpha 0.15 (faint hint что круг
полный). Активная дуга — full opacity, старт 12 часов по часовой стрелке.
Все цвета — через currentColor (set через .tc-er-tier-* класс на parent). */
.tc-er-circle { width: 70px; height: 70px;
position: relative;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
flex-shrink: 0;
color: var(--green); }
.tc-er-ring { position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none; }
.tc-er-ring-bg { fill: none; stroke: currentColor; stroke-opacity: 0.15; }
.tc-er-ring-arc { fill: none; stroke: currentColor; stroke-linecap: round; }
/* Inner content over SVG */
.tc-er-circle .tc-er-value {
position: relative; z-index: 1;
font-family: 'JetBrains Mono', monospace; font-weight: 700;
font-size: 18px; color: currentColor; line-height: 1;
}
.tc-er-circle .tc-er-label { position: relative; z-index: 1; }
/* Default fallback for non-namespaced .tc-er-value (no longer used standalone) */
.tc-er-value { font-family: 'JetBrains Mono', monospace; font-weight: 700;
font-size: 18px; color: var(--green); line-height: 1; }
/* Tier colors — только color на parent. SVG strokes и text наследуют через currentColor. */
.tc-er-circle.tc-er-tier-buy_strong { color: #10b981; }
.tc-er-circle.tc-er-tier-buy { color: #3fb84f; }
.tc-er-circle.tc-er-tier-buy_care { color: #84cc16; }
.tc-er-circle.tc-er-tier-hold_quality { color: #d4a016; }
.tc-er-circle.tc-er-tier-hold { color: #8a939e; }
.tc-er-circle.tc-er-tier-sell_care { color: #fb923c; }
.tc-er-circle.tc-er-tier-sell { color: #f75049; }
.tc-er-circle.tc-er-tier-sell_strong { color: #7f1d1d; }
/* Statusbar (footer) — shared component, см. STATUSBAR_CSS в web_app.py */
/* Body padding под statusbar (26px фикс), чтобы контент не уходил под него */
body { padding-bottom: 26px; }
/* Mini-circle для E[R] в шапке карточки таблицы. Та же SVG progress-ring
механика что и в TOP, но размер 32px (≈45% от 70px) и stroke 2px. Inner
текст ".XXX" в `.er-mini-value` поверх SVG через z-index. */
.er-mini-circle { position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
font-family: 'JetBrains Mono', monospace; font-size: 10px;
font-weight: 700; line-height: 1;
color: var(--green); }
.er-mini-circle .er-mini-value { position: relative; z-index: 1;
color: currentColor; }
.er-mini-circle.tc-er-tier-buy_strong { color: #10b981; }
.er-mini-circle.tc-er-tier-buy { color: #3fb84f; }
.er-mini-circle.tc-er-tier-buy_care { color: #84cc16; }
.er-mini-circle.tc-er-tier-hold_quality { color: #d4a016; }
.er-mini-circle.tc-er-tier-hold { color: #8a939e; }
.er-mini-circle.tc-er-tier-sell_care { color: #fb923c; }
.er-mini-circle.tc-er-tier-sell { color: #f75049; }
.er-mini-circle.tc-er-tier-sell_strong { color: #7f1d1d; }
.tc-er-label { font-family: 'JetBrains Mono', monospace; font-size: 9px;
color: var(--text2); margin-top: 4px; letter-spacing: 0.3px; }
/* Right column: bullets only (headline убран — location теперь в title row) */
.tc-context { display: flex; flex-direction: column; gap: 6px;
min-width: 0; padding-top: 2px; }
.tc-bullets { list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 3px; }
.tc-bullet { font-family: -apple-system, Segoe UI, Roboto, sans-serif;
font-size: 12px; color: var(--text2);
line-height: 1.35; padding-left: 12px; position: relative; }
.tc-bullet::before { content: '•'; position: absolute; left: 2px;
color: var(--text2); }
.tc-bullet b { color: var(--text); font-weight: 700;
font-family: 'JetBrains Mono', monospace; }
/* Entry-bullet — белый текст, акцент на actionable метрику */
.tc-bullet--entry { color: var(--text); }
.tc-bullet--entry::before { color: var(--text); }
/* Footer: direction (L) | quality (R) — divider line above */
.tc-footer { display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding-top: 12px; margin-top: 10px;
border-top: 1px solid var(--border); }
.tc-direction { font-family: 'JetBrains Mono', monospace; font-weight: 700;
font-size: 11px; padding: 4px 10px; border-radius: 3px;
letter-spacing: 0.5px; }
.tc-dir-long { background: rgba(63,184,79,0.15); color: var(--green);
border: 1px solid rgba(63,184,79,0.35); }
.tc-dir-short { background: rgba(247,80,73,0.15); color: var(--red);
border: 1px solid rgba(247,80,73,0.35); }
.tc-quality { display: inline-flex; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', monospace; font-size: 11px;
font-weight: 400; letter-spacing: 0.4px; }
.tc-quality svg { width: 14px; height: 14px; flex-shrink: 0;
stroke: currentColor; }
.tc-quality-solid { color: var(--green); }
.tc-quality-balanced { color: #5e9bff; }
.tc-quality-lottery { color: #ff9800; }
.tc-quality-fragile { color: #ff7a4a; }
.tc-quality-small_n { color: var(--text2); }
/* V2 horizontal scroll-row — ВСЕГДА (на всех viewport'ах). Карточка 300px
фиксированной ширины — последняя на правом краю peek'ает за viewport'ом,
служит visual hint что есть ещё контент. Mobile: 88% для удобного swipe
большим пальцем. */
.tc-row-wrap { position: relative; margin-bottom: 24px; }
/* Fade gradient справа — visual hint про скрытое содержимое.
Активируется JS-классом .has-overflow, когда scrollWidth > clientWidth.
bottom: 8px — чтобы не перекрывать scrollbar. */
.tc-row-wrap.has-overflow::after {
content: ''; position: absolute;
top: 0; right: 0; bottom: 8px; width: 60px;
background: linear-gradient(to right, rgba(12,17,22,0) 0%, var(--bg) 90%);
pointer-events: none; z-index: 1;
}
/* padding-top 6px — буфер для hover-lift (translateY -2px). overflow-x:auto
неявно делает overflow-y:auto тоже, поэтому без padding'а верх клипается.
padding-right 20px — место для тени последней карточки при scroll'е до конца,
чтобы она не упиралась в chart-panel. padding-bottom 8px — scrollbar. */
.cards.tc-grid {
display: flex; grid-template-columns: none;
overflow-x: auto; overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 10px;
padding: 6px 20px 8px 0;
margin-bottom: 0;
}
.cards.tc-grid > .tc-card {
flex: 0 0 240px; scroll-snap-align: start;
}
.cards.tc-grid::-webkit-scrollbar { height: 4px; }
.cards.tc-grid::-webkit-scrollbar-track { background: transparent; }
.cards.tc-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.cards.tc-grid::-webkit-scrollbar-thumb:hover { background: var(--text2); }
/* Mobile breakpoint унифицирован с layout-overhaul (≤900px). 56% — одна
целиком + ~½ второй (явный peek hint). */
@media (max-width: 900px) {
.cards.tc-grid > .tc-card { flex: 0 0 56%; }
}
/* ── Table ─────────────────────────────────── */
.table-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
/* overflow: clip — clip rounded corners БЕЗ создания scroll-context (sticky thead остаётся жив) */
overflow: clip; margin-bottom: 20px; }
/* СКОУПИРОВАНО на .table-wrap — глобальный `table {...}` ломал внутреннюю
таблицу Lightweight Charts в модалке (она тоже ). */
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 12px;
/* Фиксированный layout — колонки не съезжают при expand/collapse var-rows */
table-layout: fixed; }
.table-wrap thead tr { background: var(--bg3); }
/* Шапка таблицы прилипает к нижней границе sticky-topbar */
.table-wrap thead th { position: sticky; top: var(--topbar-h); z-index: 5; background: var(--bg3); }
/* Mobile (≤900px): thead прилипает под chart'ом (chart sticky top:0, height
max(33vh, 240px)), не под topbar'ом. ВАЖНО: это правило идёт ПОСЛЕ базы
одинаковой специфичности — иначе base `top: var(--topbar-h)` перебивает.
Дубликат правила есть в Phase 2 mobile-overhaul блоке (строка 168), но
там оно проигрывает каскад из-за позиции. */
@media (max-width: 900px) {
.table-wrap thead th { top: max(33vh, 240px); }
}
/* Явные ширины колонок (Тикер забирает оставшееся пространство).
Сумма фиксированных = 670px. */
.table-wrap th[data-sort="time"] { width: 80px; }
.table-wrap th[data-sort="trigger"] { width: 120px; }
.table-wrap th[data-sort="direction"] { width: 80px; }
.table-wrap th[data-sort="tp"] { width: 60px; }
.table-wrap th[data-sort="sl"] { width: 60px; }
.table-wrap th[data-sort="er"] { width: 80px; }
.table-wrap th.maxr-col { width: 70px; }
.table-wrap td.maxr-col { color: var(--green); font-weight: 600; }
/* Скрытие колонок SL + Макс. ОТКАТ: удалить класс hide-slmax из .
SL фиксирован = 1R во всех вариантах (риск всегда 1R), Макс почти не
различается между вариантами (трейл ловит хвост одинаково). Обе неинформативны
по вариантам — скрыты, чтобы не путать. Трейл (порог активации) остаётся —
он реально различает варианты. sl-col + maxr-col помечают th + ячейки. */
body.hide-slmax .sl-col,
body.hide-slmax .maxr-col { display: none; }
.table-wrap th[data-sort="wr"] { width: 70px; }
.table-wrap th[data-sort="n"] { width: 120px; }
/* Mobile (≤900px) — Variant B1: horizontal scroll + frozen 2-я колонка
(ТИКЕР). Все 9 колонок видны (включая TP/SL/WR), таблица шире viewport'а,
пользователь свайпает горизонтально. ТИКЕР sticky `left: 0` — остаётся
виден когда остальное скроллится.
ВНИМАНИЕ: overflow-x:auto делает table-wrap scroll-context'ом → sticky
thead перестаёт прилипать под chart'ом (CSS-спека форсит overflow-y:auto
при overflow-x:auto). thead виден только пока table-wrap-top в viewport'е.
ВАЖНО: блок ПОСЛЕ базовых widths/overflow:clip — каскад побеждает поздним. */
@media (max-width: 900px) {
/* Override base overflow: clip → horizontal scroll */
.table-wrap { overflow-x: auto; overflow-y: visible; }
.table-wrap::-webkit-scrollbar { height: 4px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* thead sticky relative to table-wrap (top:0 inside), а не viewport.
На скролл страницы thead уезжает с table-wrap'ом — accepted trade-off. */
.table-wrap thead th { top: 0; }
/* Mobile widths — все 9 колонок видны через scroll. Padding 6px sides.
Учитываем variant-rows: ТРИГГЕР показывает "окно XXч", E[R] показывает
"+0.123" (sign+3 decimals), N показывает label ("Мало данных" 11 chars). */
.table-wrap th[data-sort="time"] { width: 64px; }
.table-wrap th[data-sort="trigger"] { width: 80px; }
.table-wrap th[data-sort="direction"] { width: 72px; }
.table-wrap th[data-sort="tp"] { width: 56px; }
.table-wrap th[data-sort="sl"] { width: 56px; }
.table-wrap th[data-sort="er"] { width: 80px; }
.table-wrap th[data-sort="wr"] { width: 56px; }
.table-wrap th[data-sort="n"] { width: 110px; }
/* Тикер col (no data-sort) — explicit width через nth-child. 90px чтобы
префы (5 chars типа SBERP) + plus-count "+5" badge не клипались. */
.table-wrap thead th:nth-child(2) { width: 90px; }
/* N cell: dot + count inline (без wrap'а на новую строку) */
.table-wrap td.q-cell { white-space: nowrap; }
/* Frozen 2-я колонка (ТИКЕР) — sticky left:0 на всех ячейках
Background match'нем под состояния row'а (default/hover/expanded/var-row).
Border-right + box-shadow — visual hint про frozen-state. */
.table-wrap td:nth-child(2),
.table-wrap th:nth-child(2) {
position: sticky; left: 0;
background: var(--bg2);
border-right: 1px solid var(--border);
box-shadow: 4px 0 6px -4px rgba(0,0,0,0.5);
z-index: 4;
}
/* Thead sticky-col — sticky в обеих осях (top:0 + left:0), z-index выше */
.table-wrap thead th:nth-child(2) { background: var(--bg3); z-index: 6; }
/* Sticky col background under hover/expanded — match row hover (--bg3) */
.table-wrap tbody tr:hover td:nth-child(2),
.table-wrap tbody tr[data-tid].expanded td:nth-child(2) {
background: var(--bg3);
}
/* Variant rows — bg #0a0e12 (см. .table-wrap tr.var-row td) */
.table-wrap tr.var-row td:nth-child(2) { background: #0a0e12; }
/* Прячем название компании, оставляем только тикер-символ + plus-count */
.table-wrap .ticker-col .nm { display: none; }
/* Компактный padding (6px сторонами) */
.table-wrap td, .table-wrap th { padding: 8px 6px; }
}
/* Все table-related селекторы скоупированы под .table-wrap, чтобы НЕ ломать
внутреннюю Lightweight Charts в модалке. */
.table-wrap td { overflow: hidden; text-overflow: ellipsis;
padding: 10px 12px; border-bottom: 1px solid var(--border);
font-family: 'JetBrains Mono', monospace; }
.table-wrap th { padding: 9px 12px; text-align: left; font-weight: 500;
color: var(--text2); font-size: 11px; text-transform: uppercase;
letter-spacing: 0.4px; cursor: pointer; user-select: none;
border-bottom: 1px solid var(--border); }
.table-wrap th:hover { color: var(--accent); }
.table-wrap th.sorted { color: var(--accent); }
.table-wrap th.sorted::after { content: attr(data-arrow); margin-left: 4px; font-size: 9px; }
.table-wrap tbody tr { cursor: pointer; transition: background 0.12s; }
.table-wrap tbody tr:hover { background: var(--bg3); }
/* Expanded main row — highlighted as if hovered */
.table-wrap tbody tr[data-tid].expanded { background: var(--bg3); }
.table-wrap tbody tr[data-tid].expanded td { background: var(--bg3); }
/* Selected row (тикер на графике) — accent slim border слева */
.table-wrap tbody tr[data-tid].selected td:first-child { border-left: 3px solid var(--accent); }
/* Expansion sibling rows: meta line + variant rows */
.table-wrap tr.exp-meta, .table-wrap tr.var-row { display: none; cursor: default; }
.table-wrap tr.exp-meta.shown, .table-wrap tr.var-row.shown { display: table-row; }
.table-wrap tr.exp-meta:hover, .table-wrap tr.var-row:hover { background: var(--bg3); }
.table-wrap tr.exp-meta td { padding: 10px 12px 6px 12px; font-size: 11px;
color: var(--text2); background: #0a0e12;
border-bottom: 1px dashed var(--border); }
.table-wrap tr.var-row td { padding: 7px 10px; font-size: 12px;
background: #0a0e12; border-bottom: 1px solid #151d27;
color: var(--text); }
.table-wrap tr.var-row td.var-meta { color: var(--text2); }
.table-wrap tr.var-row:last-of-type td { border-bottom: 1px solid var(--border); }
/* E[R] — главная метрика, bold для акцента (применяется и в main row, и в variant rows) */
.er-pos { color: var(--green); font-weight: 700; }
.er-neg { color: var(--red); font-weight: 700; }
.date-col { color: var(--text2); white-space: nowrap; line-height: 1.3; }
.date-col .date-line { display: block; }
.date-col .time-line { display: block; opacity: 0.65; font-size: 11px; }
/* WR и N — вторичная инфа, приглушаем тем же цветом, что и время */
.table-wrap td.muted-col { color: var(--text2); }
/* Variant B: тикер и счётчик стратегий (+N) всегда видны целиком,
обрезается только русское имя. Реализация: flex-контейнер внутри td,
.nm шринкается + ellipsis, ticker-name и plus-count — flex:0 0 auto. */
.ticker-col { color: var(--text); font-weight: 500; }
.ticker-col .ticker-cell { display: flex; align-items: baseline; gap: 6px;
max-width: 100%; min-width: 0; }
.ticker-col .ticker-name { flex: 0 0 auto; white-space: nowrap; }
.ticker-col .nm { color: var(--text2); font-family: -apple-system, Segoe UI, sans-serif;
font-size: 11px;
flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-col .plus-count { flex: 0 0 auto; }
/* Trigger-type tooltip — мгновенно всплывает рядом со строкой типа при hover.
Богатый multi-line контент (ТФ / Паттерн / Идея) по образцу старого
общего пузыря, но по одному типу за раз. */
.trig-tooltip { position: fixed; display: none; z-index: 1000;
width: 340px; max-width: 86vw;
background: #1a2330; border: 1px solid #2e3d4d;
color: #e6edf2; padding: 10px 12px; border-radius: 5px;
font-family: 'JetBrains Mono', monospace; font-size: 11px;
pointer-events: none; white-space: normal;
line-height: 1.55; text-align: left; letter-spacing: 0.02em;
box-shadow: 0 4px 12px rgba(0,0,0,0.6); }
.trig-tooltip strong { color: var(--accent); font-weight: 600; }
.trig-tooltip .tip-label { color: var(--text2); font-weight: 600; }
.trig-tooltip em { color: var(--text2); font-style: italic; }
/* Quality tooltip — multi-line описание quality маркера на N в таблице */
.q-tooltip { position: fixed; display: none; z-index: 800;
background: var(--bg3); border: 1px solid var(--border);
color: var(--text); padding: 8px 11px; border-radius: 4px;
font-family: -apple-system, Segoe UI, Roboto, sans-serif;
font-size: 12px; line-height: 1.45;
pointer-events: none; max-width: 320px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.trigger-col { color: var(--accent); font-size: 11px; }
.plus-count { background: var(--bg3); color: var(--text2); font-size: 10px;
padding: 2px 6px; border-radius: 3px; margin-left: 6px; }
/* ── Ticker filter — inline с заголовком «Все сетапы» (через .sec-title-row) ─────── */
/* Ticker filter input — desktop: справа от заголовка; mobile: под заголовком на всю ширину */
.ticker-search-wrap { position: relative; flex: 0 0 auto; min-width: 95px; }
.ticker-search-wrap input {
width: 100%; padding: 7px 26px 7px 10px;
background: var(--bg2); border: 1px solid var(--border); border-radius: 5px;
color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 12px;
line-height: 16px; box-sizing: border-box;
transition: border-color 0.15s;
}
.ticker-search-wrap input:focus { outline: none; border-color: var(--accent); }
.ticker-search-wrap input::placeholder { color: var(--text2); opacity: 0.7; }
.ticker-search-wrap .ticker-clear {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; padding: 0;
background: transparent; border: none; color: var(--text2);
font-size: 14px; line-height: 16px; cursor: pointer;
display: none; /* hidden when input empty */
opacity: 0.7;
}
.ticker-search-wrap .ticker-clear:hover { opacity: 1; color: var(--text); }
.ticker-search-wrap.has-value .ticker-clear { display: block; }
/* Active ticker mode — input gets accent border */
.ticker-search-wrap.has-value input { border-color: var(--accent); }
/* Mobile width handled inside .sec-title-row (см. media-query выше) */
/* ── Sidebar drawer + toggle icon (Phase 4 mobile) ─────────────────
На desktop: икон скрыта, sidebar в нормальном flow (sticky слева).
На mobile (≤900px): icon видна слева в шапке (absolute-positioned),
sidebar превращается в drawer position: fixed, скрыт через
transform: translateX(-100%). При .open class — выезжает translateX(0).
Backdrop overlay появляется при открытом drawer'е (клик закрывает). */
/* Стилистически совпадает с .chart-expand-btn — grey square с border */
/* Sidebar-toggle — floating-кнопка под topbar на mobile (открывает фильтры-drawer).
На desktop скрыта (фильтры всегда видны в постоянном sidebar). */
.sidebar-toggle { display: none;
background: var(--bg3); border: 1px solid var(--border);
color: var(--text2); padding: 6px;
border-radius: 4px; cursor: pointer;
line-height: 0; transition: all 0.15s;
position: fixed; top: 54px; left: 8px; z-index: 99; }
.sidebar-toggle:hover { color: var(--text); border-color: var(--accent); }
.sidebar-toggle svg { width: 18px; height: 18px; display: block; }
.sidebar-backdrop { display: none; position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.5); z-index: 199; }
.sidebar-backdrop.open { display: block; }
/* Mobile-specific drawer behavior — placed AFTER Phase 2 .sidebar override
(которая стояла display:none) для каскадной победы.
Icon position теперь через grid-area в topbar @media block выше — не
нужны больше position:absolute / padding-left хаки. */
@media (max-width: 900px) {
/* Кнопка «Сетапы» — текстовая, в потоке шапки графика справа (была
floating-эквалайзер слева, перекрывала тикер). position:static
перебивает базовый fixed. */
.sidebar-toggle {
display: inline-flex; align-items: center; justify-content: center;
position: static; flex-shrink: 0; line-height: 1;
padding: 6px 12px; border-radius: 5px;
font: 600 13px/1 'JetBrains Mono', monospace;
color: var(--accent); border-color: var(--accent); }
/* Шапка графика: ch-header растёт, «Сетапы» прижата вправо */
.chart-panel-header { display: flex; align-items: center; gap: 8px; }
.chart-panel-header #panel-chart-header { flex: 1; min-width: 0; }
/* Слои S/R · Fib · EMA · MTF — скрыть (дефолт S/R+EMA остаётся включён) */
#panel-layers { display: none !important; }
/* TF — одна кнопка (текущий = active); клик раскрывает все TF инлайн */
.ch-tf-switch .ch-tf-btn:not(.active) { display: none; }
.ch-tf-switch.tf-open .ch-tf-btn { display: inline-flex; }
/* Sidebar — drawer */
.layout .sidebar {
display: flex; /* override Phase 2 display:none */
position: fixed; top: 0; left: 0; bottom: 0;
width: 75%; max-width: 320px; z-index: 200;
/* 100dvh = visible viewport (на мобиле учитывает нижнюю панель браузера),
иначе при 100vh нижний .sb-auth (статус авторизации) уезжает под край. */
height: 100dvh;
transform: translateX(-100%);
transition: transform 0.3s ease;
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.35);
}
.layout .sidebar.open { transform: translateX(0); }
}
/* ── Pagination ─────────────────────────────────── */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px;
margin-bottom: 30px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.pager button { background: var(--bg2); border: 1px solid var(--border);
color: var(--text2); padding: 6px 10px; cursor: pointer; border-radius: 4px; }
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pager .summary { color: var(--text2); margin: 0 12px; }
/* ── Load more button (mobile only) ────────────────────────────────── */
/* По умолчанию скрыта. На mobile (≤900px) показывается, когда в data
есть больше rows чем уже отрендерено (через .has-more class из JS). */
.load-more-btn { display: none; width: 100%; padding: 12px;
background: var(--bg2); color: var(--accent);
border: 1px solid var(--accent); border-radius: 6px;
font-family: 'JetBrains Mono', monospace; font-size: 13px;
cursor: pointer; transition: background 0.15s;
margin-top: 12px; margin-bottom: 30px; }
.load-more-btn:hover { background: rgba(87, 165, 255, 0.1); }
/* Mobile (≤900px): pager скрыт, load-more показывается при наличии данных.
ВАЖНО: правило идёт ПОСЛЕ базовых .pager / .load-more-btn — иначе каскад
одинаковой специфичности побеждает в пользу базы. */
@media (max-width: 900px) {
.pager { display: none; }
.load-more-btn.has-more { display: block; }
}
.empty { text-align: center; padding: 40px 20px; color: var(--text2); font-size: 13px; }
.loading { text-align: center; padding: 40px 20px; color: var(--text2); font-size: 13px; }
/* ── Clickable ticker (opens TA modal) ─────────────────────────── */
.card { cursor: pointer; }
/* Тикер в строке таблицы — просто цвет accent, без отдельного click handler.
Click handler стоит на всей строке — открывает chart в правой panel. */
.ticker-name { color: var(--accent); }
/* TA Chart Modal удалён — chart теперь живёт в .chart-panel справа.
Модалку можно вернуть как mobile fallback в @media (max-width:768px). */
/* Hamburger — общий для всех unified pages. Показывается ВЕЗДЕ (desktop + mobile);
на desktop (@901) позиционируется absolute справа, на mobile (@900) — grid-area.
Базовое display:inline-flex обязательно — иначе перебивает @901 по source-order. */
.topbar .hamburger {
display: inline-flex; align-items: center;
background: none; border: none; color: var(--text2);
font-size: 26px; line-height: 1; cursor: pointer;
padding: 4px 8px; transition: color 0.15s;
}
.topbar .hamburger:hover { color: var(--accent); }
@media (max-width: 900px) {
.topbar .hamburger { display: inline-flex; align-items: center; grid-area: hamburger; }
}