/* Root variables */
:root {
    --bg: #f6f7f9;
    --fg: #0f172a;
    --muted: #475569;
    --card: #ffffff;
    --line: #e5e7eb;
    --success: #10b981;
    --warn: #f59e0b;
    --danger: #ef4444;
    --blue: #3b82f6;
    --purple: #a855f7;
}

body.dark {
    --bg: #0b0f14;
    --fg: #e5e7eb;
    --muted: #9ca3af;
    --card: #0f1620;
    --line: #1f2937;
}

/* Base styles */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
    background: var(--bg);
    color: var(--fg);
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}

/* Header */
.header {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(1.2) blur(6px);
    background: rgba(255,255,255,.7);
    border-bottom: 1px solid var(--line);
}

body.dark .header {
    background: rgba(15,22,32,.7);
}

.header .inner {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
}

.header-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-left: auto;
}

.filter-group, .search-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-group {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
}

.search-input {
    padding-left: 32px !important;
    width: 180px;
}

.title {
    font-weight: 700;
    letter-spacing: .2px;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Form elements */
.chip {
    font-size: 12px;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
}

select, input[type="text"], input[type="range"], button {
    font: inherit;
    color: inherit;
}

.ctl {
    border: 1px solid var(--line);
    background: transparent;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 14px;
}

.btn {
    border: 1px solid var(--line);
    background: transparent;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
}

.btn:hover {
    background: rgba(15,23,42,.06);
}

body.dark .btn:hover {
    background: rgba(255,255,255,.06);
}

.btn-primary {
    background: #111827;
    color: #fff;
    border: none;
}

body.dark .btn-primary {
    background: #e5e7eb;
    color: #0f172a;
}

/* Layout */
.grid {
    display: grid;
    gap: 14px;
}

.g-3 {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

@media (max-width: 768px) {
    .g-3 {
        grid-template-columns: 1fr;
    }
}

.main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: 16px;
}

.span-12 { grid-column: span 12; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-4 { grid-column: span 4; }

@media (max-width: 1024px) {
  .span-8, .span-4 { grid-column: span 12; }
}


@media (max-width: 1024px) {
    .span-6 { grid-column: span 12; }
}

/* Cards */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}

.card-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.card-b {
    padding: 14px;
}

/* Stats */
.stat {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
}

.stat .h {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.stat .v {
    font-size: 20px;
    font-weight: 600;
}

.statusbar {
    margin: 16px 0;
}

/* Pills and Tags */
.pill {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(16,185,129,.35);
    color: #34d399;
}

.pill.warn {
    border-color: rgba(245,158,11,.35);
    color: #f59e0b;
}

.tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
}

.tag-ok {
    background: rgba(16,185,129,.12);
    color: #34d399;
    border-color: rgba(16,185,129,.35);
}

.tag-pilot {
    background: rgba(245,158,11,.12);
    color: #f59e0b;
    border-color: rgba(245,158,11,.35);
}

.tag-low-sample, .tag-low_sample {
    background: rgba(239,68,68,.12);
    color: #ef4444;
    border-color: rgba(239,68,68,.35);
}

.tag-stale {
    background: rgba(156,163,175,.12);
    color: #9ca3af;
    border-color: rgba(156,163,175,.35);
}

.tag-stale-soft, .tag-stale_soft {
    background: rgba(234,179,8,.12);
    color: #fce49d;
    border-color: rgba(244, 213, 120, 0.35);
}

.tag-stale-hard, .tag-stale_hard {
    background: rgba(107,114,128,.12);
    color: #6b7280;
    border-color: rgba(107,114,128,.35);
}

.tag-metric {
    background: rgba(59,130,246,.12);
    color: #9ca3af;
    border-color: rgba(156,163,175,.35);
}

.tag-underperform {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.35);
}

/* Top Picks */
.top-picks-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.top-picks-grid-3 { grid-template-columns: repeat(3, 1fr); }
.top-picks-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .top-picks-grid-3,
    .top-picks-grid-4 { grid-template-columns: 1fr; }
}

.tp {
    transition: box-shadow .15s ease, transform .15s ease;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    background: var(--card);
}

.tp:hover {
    box-shadow: 0 10px 24px rgba(2,6,23,.12);
    transform: translateY(-1px);
}

.tp-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.tp-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.tp-actions .btn-primary {
    margin-left: auto;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

/* Tables */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    font-size: 13px;
}

.data-table th {
    text-align: left;
    padding: 6px 10px;
    color: var(--muted);
    font-weight: 600;
}

.data-table td {
    padding: 6px 10px;
}

.table-empty {
    text-align: center;
    padding: 20px !important;
    color: var(--muted);
}

.table-container {
    overflow: auto;
}

body.dark .li:hover {
    background: rgba(255,255,255,.06);
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.4);
    z-index: 30;
    padding: 10px;
    overflow-y: auto;
}

.modal.open {
    display: flex;
}

.modal-box {
    width: min(720px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.modal-section {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}

.modal-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--muted);
}

.modal-section-full {
    grid-column: span 2;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
}

.modal-section-full h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--muted);
}

/* Snapshot */
.snapshot-model {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 12px;
}

.snapshot-model:last-child {
    margin-bottom: 0;
}

.snapshot-details {
    margin-top: 12px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}

/* Overview blocks */
.overview-block {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.overview-block:last-child {
    margin-bottom: 0;
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.overview-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

/* Utilities */
.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.muted {
    color: var(--muted);
}

.s {
    font-size: 12px;
}

.mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" on;
}

/* Footer and Legend */
.footer {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    padding: 22px;
}

.legend-container {
    margin: 32px auto;
    padding: 16px;
    max-width: 1200px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.legend-title {
    font-weight: 600;
    margin-bottom: 16px;
    font-size: 14px;
}

.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.legend-text {
    font-size: 12px;
    color: var(--muted);
}

.loading {
    text-align: center;
    padding: 40px;
    color: var(--muted);
}

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

.error-message {
    background: rgba(239,68,68,.1);
    color: var(--danger);
    padding: 12px;
    border-radius: 8px;
    margin: 12px 0;
}

/* Model status colors */
.count-ok { color: #34d399; }
.count-pilot { color: #f59e0b; }
.count-stale { color: #9ca3af; }

/* Responsive */
@media (max-width: 768px) {
    .modal-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .modal-section-full {
        grid-column: span 1;
    }
    
    .tp-metrics {
        grid-template-columns: 1fr;
    }
    
    .overview-stats {
        grid-template-columns: 1fr;
    }
    
    .modal {
    align-items: center;
    padding: 20px 10px;
    }
    
    .modal-box {
    width: calc(100% - 10px);
    max-width: 95vw;
    max-height: 80vh;
    overflow-y: auto;
    margin: auto;
    padding: 10px;
    }
    
    .modal-header h3 {
        font-size: 16px;
    }
    
    .modal-section h4 {
        font-size: 13px;
    }
    
    .detail-row {
        font-size: 11px;
        padding: 2px 0;
    }

    .header-controls {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .filter-group {
        order: 1;
        flex: 1 1 100%;
    }

    .search-group {
        order: 2;
        flex: 1 1 calc(50% - 4px);
    }

    .search-input {
        width: 100% !important;
    }

    #filterTag {
        order: 3;
        flex: 1 1 calc(25% - 4px);
    }

    #theme {
        order: 4;
        flex: 1 1 calc(25% - 4px);
    }

    #connectionStatus {
        order: 0;
        width: 12px !important;
        height: 12px !important;
        flex: 0 0 12px;  /* 2026-01-06: Фикс деформации круга в эллипс */
        margin: 0 auto 4px;
    }

    input[type="range"] {
        flex: 1;
    }
}

/* Health indicators */
.health-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.health-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.health-good {
    background: #10b981;
    box-shadow: 0 0 4px rgba(16,185,129,0.4);
}

.health-warning {
    background: #f59e0b;
    box-shadow: 0 0 4px rgba(245,158,11,0.4);
}

.health-critical {
    background: #ef4444;
    box-shadow: 0 0 4px rgba(239,68,68,0.4);
}

.sparkline {
    font-family: monospace;
    font-size: 10px;
    letter-spacing: -2px;
    color: var(--muted);
}

/* Full width legend container */
.legend-container.full-width {
    max-width: 100%;
    margin: 32px 0;
}

.legend-content {
    flex: 1;
}

.legend-content strong {
    display: block;
    margin-bottom: 8px;
    color: var(--fg);
}

.legend-details {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    font-size: 11px;
    line-height: 1.6;
}

.legend-details li {
    padding: 2px 0;
}

.legend-action {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    font-weight: 500;
    color: var(--blue);
}

.tag-underperform {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    border-color: rgba(168, 85, 247, 0.35);
}

.metrics-note{
  margin: 8px 0 14px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted-text, #8892a6);
}
.metrics-note code, .metrics-note em { color: inherit; }

/* ▼ NEW: фильтры — правая панель со счётчиками */
.dashboard-filters { margin-bottom: 12px; }
.filters-container {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: space-between;
}
.filters-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.status-counters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-counters .sep { color: var(--muted); opacity: .6; }
.pill-count {
  font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
}
body.dark .pill-count { background: rgba(255,255,255,.06); }

/* цвета под наши теги */
.pill-count.ok          { color:#10b981; border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.08); }
.pill-count.pilot       { color:#f59e0b; border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.08); }
.pill-count.low         { color:#fb923c; border-color: rgba(251,146,60,.35); background: rgba(251,146,60,.08); }
.pill-count.stale-soft  { color:#a3a3a3; border-color: rgba(163,163,163,.35); background: rgba(163,163,163,.10); }
.pill-count.stale-hard  { color:#6b7280; border-color: rgba(107,114,128,.35); background: rgba(107,114,128,.10); }
.pill-count.under       { color:#f87171; border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.10); }

.mini-note { display:flex; align-items:center; gap:8px; font-size:12px; }
.mini-note .muted { color: var(--muted); }
.mini-note .sep { color: var(--muted); opacity:.6; }
/* ▲ NEW */

/* ▼ Legend collapsible */
.legend-container.collapsed .legend-grid { display: none; }

.legend-title { display:flex; align-items:center; justify-content:space-between; }
.legend-toggle {
  font: inherit; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text); text-align: left;
}
.legend-toggle[aria-expanded="false"]::after { content: "  ▸"; opacity:.7; }
.legend-toggle[aria-expanded="true"]::after  { content: "  ▾"; opacity:.7; }
/* ▲ Legend collapsible */

/* ▼ Шапка — раскладка в 3 строки (вариант 2) */
.filters-container { display:flex; flex-direction:column; gap:8px; }
.filters-row.row-main {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
/* левая часть не переносит элементы на новую строку,
   поэтому кнопка All остаётся прямо после поиска */
.filters-left {
  display:flex; align-items:center; gap:12px;
  flex:1 1 auto; min-width:0; flex-wrap:nowrap;
}

/* делаем поиск заметно шире, но он ещё может ужаться при нехватке места */
#searchGroup { flex:1 1 700px; min-width:320px; }

/* явно фиксируем, что кнопка All не растягивается и не «прыгает» */
#filterTag { flex:0 0 auto; }

.filters-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.status-counters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.status-counters .sep { color: var(--muted); opacity:.6; }

.filters-row.row-tags { display:flex; justify-content:center; }
.tags-center { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

.filters-row.row-note { display:flex; justify-content:center; }
.note-center { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.note-center .sep { opacity:.6; }
/* ▲ Шапка */

/* ▼ Мини-пиллы T/R/API рядом с символом */
.sym-wrap { display:flex; align-items:center; gap:6px; }
.pill-mini {
  display:inline-block; font-size:10px; line-height:1; padding:3px 6px; border-radius:999px;
  border:1px solid var(--line);
}
.pill-mini.pill-t   { color:#10b981; border-color:rgba(16,185,129,.4); }
.pill-mini.pill-r   { color:#f59e0b; border-color:rgba(245,158,11,.4); }
.pill-mini.pill-api { color:#0ea5e9; border-color:rgba(14,165,233,.4); }
/* ▲ Мини-пиллы */

/* SEARCH: растягиваем инпут в шапке дашборда */
.filters-container .search-group .search-input {
  width: 100% !important;
  max-width: none;
}

/* чтобы левая часть не переносила элементы на новую строку */
.filters-left { min-width: 0; flex-wrap: nowrap; }

/* кнопка All — фикс. ширина, стоит сразу после поиска */
#filterTag { flex: 0 0 auto; }

.filters-container .search-group .search-input { width:100% !important; max-width:none; }
.filters-left { min-width:0; flex-wrap:nowrap; }
#filterTag { flex:0 0 auto; }

/* Live signals panel */
#liveSignalsSection { margin: 16px 0 24px; }
#liveSignalsSection .block-title { margin-bottom: 8px; }
.live-agg .pill-count { margin-right: 8px; }
.pill-count.warn { color:#f59e0b; border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.08); }
.pill-count.danger { color:#ef4444; border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); }
.live-table td, .live-table th { white-space: nowrap; }
.live-table .chip.sl { background: rgba(14,165,233,.12); color:#0ea5e9; border-color: rgba(14,165,233,.35); }
.live-table .chip.bull { background: rgba(16,185,129,.12); color:#10b981; border-color: rgba(16,185,129,.35); }
.live-table .chip.bear { background: rgba(239,68,68,.12); color:#ef4444; border-color: rgba(239,68,68,.35); }
.live-table tr.is-slonly { background: rgba(14,165,233,.04); }

/* Свежесть: прогресс до HARD, метка SOFT */
.fresh-bar{ position:relative; height:10px; background:var(--line); border-radius:999px; overflow:hidden; min-width:160px; }
.fresh-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg, rgba(16,185,129,.7), rgba(245,158,11,.7), rgba(239,68,68,.8)); }
.fresh-soft{ position:absolute; top:0; bottom:0; width:2px; background:#f59e0b; opacity:.8; }

/* live signals header layout */
.live-agg {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin: 4px 0 10px;
}

/* Corrections queue */
#slQueueSection .card-b { padding-top: 8px; }
.sl-row { display:grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line); }
.sl-row:last-child { border-bottom:0; }
.sl-left .chip { margin-left:6px; }
.sl-right .chip { margin-left:6px; }

/* Events feed */
#eventsSection .card-b { padding-top: 8px; }
.ev { padding:8px 0; border-bottom:1px dashed var(--line); }
.ev:last-child{ border-bottom:0; }
.ev-h { font-size:13px; display:flex; align-items:center; gap:8px; }
.ev-b { font-size:12px; color:var(--muted); margin-left:22px; }


#eventsSection .card-b { padding-top: 8px; }
#eventsBody { max-height: 360px; overflow-y: auto; } /* ~10 строк, прокрутка */
.ev { padding:8px 0; border-bottom:1px dashed var(--line); cursor:pointer; }
.ev:last-child{ border-bottom:0; }
.ev-h { font-size:13px; display:flex; align-items:center; gap:8px; }
.ev-b { font-size:12px; color:var(--muted); margin-left:22px; }


/* Events feed — прокрутка и цвета PnL */
#eventsSection .card-b { padding-top: 8px; }
#eventsBody { max-height: 360px; overflow-y: auto; } /* фиксированная высота, скроллим контент */
.ev { padding:8px 0; border-bottom:1px dashed var(--line); cursor:pointer; }
.ev:last-child{ border-bottom:0; }
.ev-h { font-size:13px; display:flex; align-items:center; gap:8px; }
.ev-b { font-size:12px; color:var(--muted); margin-left:22px; }

.txt-bull { color: var(--green); }
.txt-bear { color: var(--red); }
.txt-muted { color: var(--muted); }

.list-actions { margin-top: 8px; display:flex; justify-content:center; }

/* ===== Events feed: скролл и оформление ===== */
#eventsSection .card-b { padding-top: 8px; }
#eventsBody { max-height: 360px; overflow-y: auto; }
.ev { padding:8px 0; border-bottom:1px dashed var(--line); cursor:pointer; }
.ev:last-child{ border-bottom:0; }
.ev-h { font-size:13px; display:flex; align-items:center; gap:8px; }
.ev-b { font-size:12px; color:var(--muted); margin-left:22px; }

.txt-bull { color: var(--success); }
.txt-bear { color: var(--danger); }
.txt-muted { color: var(--muted); }

.list-actions { margin-top: 8px; display:flex; justify-content:center; }

/* chip-пометки для направлений и алертов */
.chip.bull   { border-color: rgba(16,185,129,.35); color:#34d399; background: rgba(16,185,129,.12); }
.chip.bear   { border-color: rgba(239,68,68,.35);  color:#ef4444; background: rgba(239,68,68,.12); }
.chip.warn   { border-color: rgba(245,158,11,.35); color:#f59e0b; background: rgba(245,158,11,.12); }
.chip.danger { border-color: rgba(239,68,68,.35);  color:#ef4444; background: rgba(239,68,68,.12); }
.chip.sl     { border-color: rgba(156,163,175,.35); color:#9ca3af; background: rgba(156,163,175,.12); }

/* полоска свежести в «Живых сигналах» (из JS: fresh-bar/soft/fill) */
.fresh-bar { position:relative; height:8px; border-radius:6px; background:rgba(148,163,184,.25); overflow:hidden; }
.fresh-fill{ position:absolute; inset:0 auto 0 0; height:100%; background:rgba(59,130,246,.45); }
.fresh-soft{ position:absolute; top:0; bottom:0; width:2px; background:rgba(245,158,11,.9); }

/* Разделители и контейнер — уже есть у тебя */
#eventsSection .card-b { padding-top: 8px; }
#eventsBody { max-height: 360px; overflow-y: auto; }
.ev { padding:8px 0; border-bottom:1px dashed var(--line); cursor:pointer; }
.ev:last-child{ border-bottom:0; }
.ev-h { font-size:13px; display:flex; align-items:center; gap:8px; }
.ev-b { font-size:12px; color:var(--muted); margin-left:22px; }

.txt-bull { color: var(--success); }
.txt-bear { color: var(--danger); }
.txt-muted { color: var(--muted); }
.list-actions { margin-top: 8px; display:flex; justify-content:center; }

/* ЧИПЫ: направление (контурные) и причина (заливка) */
.chip.dir { background: transparent; }
.chip.dir-bull { color: var(--success); border-color: var(--success); }
.chip.dir-bear { color: var(--danger);  border-color: var(--danger);  }


.chip.res-bull   { color: var(--success); background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
.chip.res-bear   { color: var(--danger);  background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.35);  }
.chip.res-warn   { color: var(--warn);    background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
.chip.res-neutral{ color: var(--muted);   background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.35); }

/* Events feed: прокрутка и PnL-цвета (если дубли есть выше — не страшно, низ имеет приоритет) */
#eventsBody { max-height: 360px; overflow-y: auto; }
.ev { padding:8px 0; border-bottom:1px dashed var(--line); cursor:pointer; }
.ev:last-child{ border-bottom:0; }
.ev-h { font-size:13px; display:flex; align-items:center; gap:8px; }
.ev-b { font-size:12px; color:var(--muted); margin-left:22px; }

.txt-bull { color: var(--success); }
.txt-bear { color: var(--danger); }
.txt-muted { color: var(--muted); }
.list-actions { margin-top: 8px; display:flex; justify-content:center; }

/* Разделяем направление (контур) и причину (заливка) */
.chip.dir { background: transparent; }
.chip.dir-bull { color: var(--success); border-color: var(--success); }
.chip.dir-bear { color: var(--danger);  border-color: var(--danger);  }

.chip.res-bull    { color: var(--success); background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
.chip.res-bear    { color: var(--danger);  background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.35);  }
.chip.res-warn    { color: var(--warn);    background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
.chip.res-neutral { color: var(--muted);   background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.35); }

.table.live-table tbody tr { cursor: pointer; }
.table.live-table tbody tr:hover { background: rgba(2,6,23,.04); }
body.dark .table.live-table tbody tr:hover { background: rgba(255,255,255,.04); }

/* Причина закрытия (заливка) */
.chip.res { color: #fff; border-color: transparent; }
.chip.res-bull { background: var(--success); }
.chip.res-bear { background: var(--danger); }
.chip.res-warn { background: var(--warn); color:#1f2937; }
.chip.res-neutral { background: rgba(148,163,184,.25); color: var(--fg); }

/* Feed filters (events) */
.feed-filters { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin: 8px 12px 0 12px; }
.feed-filters .ff-types label { margin-right:12px; font-size:12px; color: var(--muted); }
.feed-filters .ff-period { display:flex; gap:6px; }
.feed-filters .seg { border:1px solid var(--line); border-radius:10px; padding:4px 8px; background:transparent; cursor:pointer; }
.feed-filters .seg.active { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.35); }
.feed-filters .ff-search { margin-left:auto; display:flex; gap:8px; }
@media (max-width: 900px){
  .feed-filters { flex-direction:column; align-items:stretch; }
  .feed-filters .ff-search { margin-left:0; }
}

/* --- twin layout for Events + Corrections --- */
.twin-column .card-b {
  /* фиксируем одинаковую высоту и свой скролл */
  /* max-height: 52vh; */
  overflow: auto;
}

@media (max-width: 1024px) {
  .twin-column { grid-column: span 12; }
  .twin-column .card-b { max-height: none; }
}

/* компактнее таблицу "Сигналы и зависания" */
.table.live-table td, .table.live-table th {
  padding: 6px 8px;
}
.table.live-table td.mono, .table.live-table th.mono {
  font-variant-numeric: tabular-nums;
}

/* ссылка "перейти к ленте" на символе */
a.goto-feed { text-decoration: none; border-bottom: 1px dotted var(--line); }
a.goto-feed:hover { border-bottom-color: currentColor; }


/* Пара в таблице "Сигналы": ссылка без "браузерной синевы" */
a.goto-feed {
  color: inherit;                 /* берём цвет как у текста/strong */
  text-decoration: none;          /* без подчёркивания по умолчанию */
  font-weight: 600;               /* как <strong> */
}
a.goto-feed:hover {
  text-decoration: underline;     /* аккуратный ховер */
  text-underline-offset: 2px;
}


/* Одинаковая «ритмика» элементов в "Ленте" и "Коррекциях" */
#slQueueSection .card-b,
#eventsSection   .card-b { padding-top: 6px; }

.sl-row,
.ev {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.sl-row:last-child,
.ev:last-child { border-bottom: 0; }

/* Заголовки и вторичная строка */
.ev-h { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.ev-b { font-size: 12px; color: var(--muted); margin-left: 0; }

/* Чипы справа/слева — одинаковые отступы */
.sl-left .chip, .sl-right .chip { margin-left: 8px; }


/* Убираем фиксированные 360px — используем общую высоту twin-column */
#eventsBody { max-height: none; }
.twin-column #eventsBody { max-height: 52vh; overflow-y: auto; }

/* Горизонтальный скролл для таблицы "Сигналы" на узких экранах */
#liveSignalsSection .card-b { overflow-x: auto; }
@media (max-width: 900px) {
  .table.live-table { min-width: 860px; } /* порог под твои колонки */
}

.table.live-table td, .table.live-table th { padding: 6px 8px; }
.table.live-table td.mono, .table.live-table th.mono { font-variant-numeric: tabular-nums; }


/* === Baseline (stage 0): typography & spacing aligned to "Все модели" === */
html { font-size: 14px; }
body { line-height: 1.5; }
.s { font-size: 12px; }
.data-table { font-size: 13px; }   /* table text baseline */
.chip, .pill { font-size: 12px; }
.btn, .ctl { font-size: 12px; }
.card-h { padding: 12px 14px; }
.card-b { padding: 14px; }



/* === Stage 2: Live Signals adjustments === */
#liveSignalsSection .table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table.live-table, .live-table { width:100%; min-width:860px; table-layout:fixed; font-size:13px; }
.live-table th, .live-table td { padding:8px 10px; vertical-align:middle; }
.chip.dir { background:transparent; font-weight:400; line-height:1.2; }
/* Freshness gradient */
:root { --fresh-green:#22c55e; --fresh-amber:#f59e0b; --fresh-red:#ef4444; }
.fresh-bar { position:relative; height:10px; background:var(--line); border-radius:999px; overflow:hidden; min-width:160px; }
.fresh-fill { position:absolute; inset:0 auto 0 0; height:100%; background:linear-gradient(90deg,var(--fresh-green) 0%,var(--fresh-amber) 50%,var(--fresh-red) 100%); transition:width .25s ease; }
.fresh-soft { position:absolute; top:0; bottom:0; width:2px; background:rgba(245,158,11,.9); }



/* === Stage 3: Unify pills & headers; events pills; details buttons; health visuals === */

/* Pills: match elegance of Snapshot's pills (.pill-count) but keep existing colors */
.chip { font-size:11px; padding:3px 8px; border:1px solid var(--line); border-radius:999px; line-height:1.2; }
/* .chip:not(.dir):not(.res):not(.warn):not(.danger):not(.sl) { background:#fff; color:var(--fg); } neutral chips like model name */
.chip.warn   { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.08); }
.chip.danger { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }
.chip.sl     { border-color: rgba(14,165,233,.35); background: rgba(14,165,233,.12); color:#0ea5e9; }

/* Table headers: use same font size & color as in "Все модели" */
.data-table thead th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: none; white-space: nowrap; }
#liveSignalsSection thead th { font-size: 12px; color: var(--muted); }

/* Events feed: unify pill sizing */
#eventsSection .chip { font-size:11px; padding:3px 8px; line-height:1.2; border-radius:999px; }

/* Details buttons — compact, ghost, elegant */
.btn.details, .btn[data-role="details"] {
  font-size:12px; line-height:1.2; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--fg);
}
.btn.details:hover, .btn[data-role="details"]:hover { box-shadow: 0 0 0 3px rgba(2,6,23,.06) inset; }
body.dark .btn.details, body.dark .btn[data-role="details"] { background: #0b1220; border-color: rgba(148,163,184,.25); color: var(--fg); }

/* Modal typography/layout (until screenshot arrives)    */
.modal, .drawer, .dialog {
  --modal-pad: 16px;
  font-size: 14px; line-height:1.2;
}
.modal .modal-h, .drawer .modal-h, .dialog .modal-h { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.modal .modal-b, .drawer .modal-b, .dialog .modal-b { padding: var(--modal-pad); }
.modal .modal-f, .drawer .modal-f, .dialog .modal-f { padding: var(--modal-pad); display:flex; gap:8px; justify-content:flex-end; }

/* Health column: enhance segmented bars without changing palette */
.health { display:flex; gap:3px; }
.health .seg { width:8px; height:14px; border-radius:2px; background: var(--line); position:relative; overflow:hidden; }
.health .seg.is-on::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); mix-blend-mode:soft-light; }
.health .seg.is-on { background: var(--accent, #64748b); } /* uses current accent if provided */

/* ─── Corrections (SL-only): компактная сетка и типографика ───────────────── */
#slQueueSection .sl-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
#slQueueSection .sl-row:last-child { border-bottom: 0; }
#slQueueSection .sl-row:hover { background: rgba(255,255,255,.03); }
body.dark #slQueueSection .sl-row:hover { background: rgba(255,255,255,.04); }

#slQueueSection .sl-left .sl-title { font-size: 13px; line-height: 1.2; }
#slQueueSection .sl-left .sl-meta  { font-size: 12px; color: var(--muted); margin-top: 2px; }

#slQueueSection .sl-mid {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on;
}

#slQueueSection .sl-right {
  white-space: nowrap;
  text-align: right;
}
#slQueueSection .sl-right .chip { padding: 4px 8px; border-radius: 999px; }

/* Мобильная адаптация: символ + пилюля в первой строке, SL/PnL — во второй */
@media (max-width: 900px) {
  #slQueueSection .sl-row {
    grid-template-columns: minmax(140px,1.4fr) minmax(260px,2.4fr) auto;
    gap: 16px;
  }
  #slQueueSection .sl-mid { grid-column: 1 / -1; }
  #slQueueSection .sl-mid .txt-bull,
  #slQueueSection .sl-mid .txt-bear { font-weight: 600; }

}

#slQueueSection .sl-row.sev-soft {
  box-shadow: inset 0 0 0 1px rgba(245,158,11,.35);
}
#slQueueSection .sl-row.sev-hard {
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.35);
}
#slQueueSection .sl-left .sl-meta {
  line-height: 1.25;
  letter-spacing: 0;
}


/* corr# — тот же цвет, что и .live-table .chip.sl */
.chip.corr {
  background: rgba(14,165,233,.12);
  color: #0ea5e9; /* sky-500 */
  border-color: rgba(14,165,233,.35);
}
/* Вход — нейтральный, «мягкий» серый */
.chip.entry {
  background: rgba(100,116,139,.12);   /* slate-500 @ 12% */
  color: #64748b;                      /* slate-500 */
  border-color: rgba(100,116,139,.35);
}


/* ============ MODEL VERSIONS WIDGET ============ */

.model-versions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.version-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.version-row:hover {
    background: var(--card);
    border-color: var(--accent);
    transform: translateX(4px);
}

.version-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.version-symbol {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    min-width: 120px;
}

.version-model {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    background: rgba(156, 163, 175, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.version-id {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--muted);
    background: rgba(100, 116, 139, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
}

.version-metrics {
    display: flex;
    align-items: center;
    gap: 16px;
}

.version-wr {
    font-weight: 600;
    font-size: 14px;
}

.version-delta {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.version-delta.positive {
    color: var(--success);
    background: rgba(34, 197, 94, 0.1);
}

.version-delta.negative {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.version-delta.neutral {
    color: var(--muted);
}

.version-time {
    font-size: 12px;
    color: var(--muted);
    min-width: 80px;
    text-align: right;
}

@media (max-width: 768px) {
    .version-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .version-metrics {
        width: 100%;
        justify-content: space-between;
    }
}

/* ============================================
   MOBILE RESPONSIVE STYLES (Dashboard Filters)
   ============================================ */

@media (max-width: 767px) {

    /* === Панель фильтров === */
    .dashboard-filters {
        padding: 10px 12px;
    }

    .filters-container {
        gap: 10px;
    }

    /* Строка 1: WR ползунок + поиск + кнопка All */
    .filters-row.row-main {
        flex-direction: column;
        gap: 10px;
    }

    .filters-left {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    /* WR ползунок - по центру, 100% ширины */
    #wrGroup {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    #wrGroup input[type="range"] {
        flex: 1;
        min-width: 0;
        max-width: 200px;
    }

    /* Поиск (70%) + кнопка All (30%) в одну строку */
    .filters-row.row-main .filters-left {
        display: flex;
        flex-direction: column;
    }

    /* Контейнер для поиска и кнопки */
    #searchGroup {
        flex: 0 0 auto;
        width: 100%;
    }

    .search-group {
        width: 70%;
    }

    #filterTag {
        width: 28%;
        min-width: 80px;
    }

    /* Группа: поиск + кнопка All */
    .filters-left > #searchGroup,
    .filters-left > #filterTag {
        display: inline-flex;
    }

    /* Враппер для поиска и кнопки (создаём flex-контейнер) */
    .filters-left {
        display: flex;
        flex-direction: column;
    }

    /* WR на первой строке */
    #wrGroup {
        order: 1;
    }

    /* Поиск и кнопка на второй строке в ряд */
    #searchGroup {
        order: 2;
        width: 70%;
        display: inline-block;
    }

    #filterTag {
        order: 3;
        width: 28%;
        display: inline-block;
        margin-left: 2%;
    }

    /* Переопределяем: поиск и кнопка должны быть в одном flex-ряду */
    .filters-left {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    #wrGroup {
        flex: 1 1 100%;
    }

    #searchGroup {
        flex: 1 1 68%;
        min-width: 0;
    }

    #filterTag {
        flex: 0 0 28%;
        min-width: 70px;
    }

    .search-group .search-input {
        width: 100%;
    }

    /* Строка 2: Бейджи статусов - компактнее */
    .filters-row.row-tags {
        margin-top: 8px;
    }

    .status-counters {
        font-size: 10px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pill-count {
        font-size: 10px;
        padding: 3px 6px;
        white-space: nowrap;
    }

    /* Убираем разделители между бейджами */
    .status-counters .sep {
        display: none;
    }

    /* Строка 3: Заметка - компактнее */
    .filters-row.row-note {
        margin-top: 6px;
    }

    .note-center {
        font-size: 10px;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}

/* ===== Очень узкие экраны (портретная ориентация) ===== */
@media (max-width: 375px) {
    /* Поиск и кнопка друг под другом на совсем маленьких экранах */
    #searchGroup {
        flex: 1 1 100%;
    }

    #filterTag {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ===== Виджет "Эффективность портфеля" ===== */
#portfolioEfficiencySection .card-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.period-switcher {
    display: flex;
    gap: 4px;
}

.period-btn {
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.period-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.period-btn.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.pe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}

/* 4 колонки для виджета эффективности */
.pe-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.pe-category {
    padding: 12px;
    border-radius: 8px;
    background: var(--bg);
}

/* 🔮 Виртуальные торгуемые */
.pe-virtual { border-left: 3px solid #9b59b6; }
/* 💰 Реальные торгуемые */
.pe-real { border-left: 3px solid var(--success); }
/* 🧪 Тестовые */
.pe-test { border-left: 3px solid var(--warn); }
/* 📡 Все */
.pe-all { border-left: 3px solid var(--blue); }

.pe-cat-header {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 13px;
}

.pe-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.pe-metric {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.pe-label {
    color: var(--muted);
}

.pe-value {
    font-weight: 500;
}

.pe-value.positive { color: var(--success); }
.pe-value.negative { color: var(--danger); }

.pe-models {
    display: flex;
    gap: 24px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
}

.pe-model {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Кликабельные категории */
.pe-category.clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pe-category.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.pe-category.clickable:active {
    transform: translateY(0);
}

/* Wide modal для графиков */
.modal-box.modal-wide {
    max-width: 900px;
    width: 95%;
}

/* PNL Chart Modal */
.pnl-chart-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pnl-chart-controls {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.pnl-control-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pnl-control-group select {
    min-width: 120px;
}

#pnlChartContainer {
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--line);
}

.chart-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--muted);
    font-size: 14px;
}

.pnl-indicators {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.indicator-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
}

.indicator-checkbox input {
    cursor: pointer;
}

.pnl-chart-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

/* Адаптивность для виджета эффективности */
@media (max-width: 768px) {
    .pe-grid {
        grid-template-columns: 1fr;
    }

    .pe-models {
        flex-direction: column;
        gap: 8px;
    }
}