/* ===== БАЗА ===== */
:root {
    --bg: #0b1220;
    --bg-card: #131a2c;
    --bg-card-hover: #1a2238;
    --border: #1e2940;
    --text: #e6e9f0;
    --text-muted: #8b94ad;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --green: #10b981;
    --red: #ef4444;
    --yellow: #f59e0b;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --max-width: 1140px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: var(--bg);
}
/* :fullscreen browser режим: браузер красит backdrop в свой дефолтный
   цвет (часто чёрный, но в момент exit может мелькнуть белым). Явно
   задаём тёмный фон чтобы избежать белой вспышки внизу при exit. */
:root::backdrop, ::backdrop { background: var(--bg); }
:fullscreen, ::backdrop { background-color: var(--bg) !important; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
    color: var(--text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--accent-hover);
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

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

/* ===== HEADER ===== */
.site-header {
    background: rgba(11, 18, 32, 0.8);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 600;
    font-size: 18px;
}

.logo:hover {
    color: var(--text);
}

.logo-mark {
    font-size: 22px;
}

.site-nav {
    display: flex;
    gap: 8px;
}

.site-nav a {
    color: var(--text-muted);
    padding: 8px 14px;
    border-radius: 6px;
    transition: all 0.15s;
    font-size: 15px;
}

.site-nav a:hover {
    color: var(--text);
    background: var(--bg-card);
}

/* ===== HERO ===== */
.hero {
    padding: 80px 0 60px;
    text-align: center;
}

.hero-badge {
    display: inline-block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--accent);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    margin-bottom: 24px;
}

.hero-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 19px;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 36px;
    line-height: 1.5;
}

.hero-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 13px 28px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--accent);
}

/* ===== SECTIONS ===== */
.section {
    padding: 64px 0;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 17px;
    max-width: 600px;
    margin: 0 auto 40px;
}

/* ===== FEATURES GRID ===== */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 36px;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: all 0.15s;
}

.feature-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    border-color: var(--accent);
}

.feature-icon {
    font-size: 36px;
    margin-bottom: 14px;
}

.feature-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.feature-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ===== STATS ===== */
.section-stats {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    max-width: 800px;
    margin: 36px auto 0;
}

.stat-card {
    text-align: center;
    padding: 24px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.stat-value {
    font-size: 42px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label {
    color: var(--text-muted);
    font-size: 13px;
}

/* ===== CTA ===== */
.section-cta {
    text-align: center;
}

.waitlist-form {
    display: flex;
    gap: 8px;
    max-width: 460px;
    margin: 32px auto 0;
    flex-wrap: wrap;
}

.waitlist-form input[type="email"] {
    flex: 1;
    min-width: 200px;
    padding: 13px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.waitlist-form input[type="email"]:focus {
    border-color: var(--accent);
}

.waitlist-form input[type="email"]::placeholder {
    color: var(--text-muted);
}

.form-msg {
    margin-top: 14px;
    font-size: 14px;
    min-height: 20px;
}

.form-msg.success {
    color: var(--green);
}

.form-msg.error {
    color: var(--red);
}

/* ===== PRICING ===== */
.section-pricing-hero {
    padding-top: 60px;
    padding-bottom: 30px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 50px;
}

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.15s;
}

.pricing-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.pricing-card.popular {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.pricing-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pricing-price {
    margin-bottom: 16px;
}

.pricing-amount {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.pricing-period {
    color: var(--text-muted);
    font-size: 15px;
    margin-left: 4px;
}

.pricing-desc {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.5;
    min-height: 42px;
}

.pricing-features {
    list-style: none;
    margin-bottom: 24px;
    flex: 1;
}

.pricing-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    position: relative;
    padding-left: 22px;
}

.pricing-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 700;
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-cta {
    width: 100%;
}

.pricing-form-wrap {
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 30px;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.pricing-form-wrap h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.pricing-form-wrap p {
    color: var(--text-muted);
    margin-bottom: 16px;
}

.pricing-faq {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
}

.pricing-faq ul {
    list-style: none;
    margin-top: 20px;
}

.pricing-faq li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

.pricing-faq li:last-child {
    border-bottom: none;
}

.pricing-faq strong {
    color: var(--text);
}

/* ===== FAQ ===== */
.section-faq-hero {
    padding-top: 60px;
    padding-bottom: 30px;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.faq-item[open] {
    border-color: var(--accent);
}

.faq-question {
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    list-style: none;
    position: relative;
    padding-right: 50px;
    user-select: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--accent);
    transition: transform 0.2s;
}

.faq-item[open] .faq-question::after {
    content: "−";
}

.faq-answer {
    padding: 0 22px 18px;
    color: var(--text-muted);
    line-height: 1.65;
}

/* ===== FOOTER ===== */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 32px 0;
    margin-top: 40px;
    text-align: center;
}

.site-footer p {
    color: var(--text-muted);
    font-size: 14px;
}

.footer-disclaimer {
    margin-top: 8px;
    font-size: 12px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== CHART PAGE ===== */
.chart-page {
    padding: 24px 0 60px;
}

.chart-controls {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.chart-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chart-input-group label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chart-input-group input,
.chart-input-group select {
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.chart-input-group input:focus,
.chart-input-group select:focus {
    border-color: var(--accent);
}

.chart-input-group input {
    min-width: 140px;
    text-transform: uppercase;
}

/* === Автокомплит символов === */
.symbol-group {
    position: relative;
}

.symbol-suggest {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.symbol-suggest-item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.symbol-suggest-item:last-child {
    border-bottom: none;
}

.symbol-suggest-item:hover,
.symbol-suggest-item.active {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent);
}

.symbol-suggest-item b {
    color: var(--accent);
    font-weight: 700;
}

.symbol-suggest-empty {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.chart-status {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
    padding: 8px 14px;
}

.chart-status.loading { color: var(--yellow); }
.chart-status.success { color: var(--green); }
.chart-status.error { color: var(--red); }

.chart-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* min-width: 0 нужен чтобы канвасы lightweight-charts не раздували grid:
       без этого после выхода из fullscreen канвасы остаются 100vw и grid
       растягивается за пределы своего контейнера */
    min-width: 0;
    /* Явный тёмный фон чтобы при resize-transition между fullscreen/normal
       не было белой вспышки от родителя */
    background: var(--bg);
}

.chart-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    min-width: 0;
}

.chart-panel-label {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    font-weight: 500;
}

.chart-panel-label span {
    color: var(--text);
    font-weight: 600;
}

.chart-canvas {
    width: 100%;
}
/* Высоты для autoSize lightweight-charts. В normal-режиме фиксированные,
   в fullscreen — перекрываются height: auto !important на .chart-grid.fullscreen */
.chart-panel-price .chart-canvas { height: 600px; }
.chart-panel-extra .chart-canvas { height: 150px; }

.chart-help {
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 14px;
}

.chart-help ul {
    list-style: none;
    margin-top: 8px;
}

.chart-help li {
    padding: 4px 0;
}

.chart-help strong {
    color: var(--text);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
    .hero-title {
        font-size: 38px;
    }
    .section-title {
        font-size: 28px;
    }
    .hero {
        padding: 50px 0 40px;
    }
    .section {
        padding: 48px 0;
    }
    .header-inner {
        padding: 12px 16px;
    }
    .site-nav {
        gap: 4px;
    }
    .site-nav a {
        padding: 6px 10px;
        font-size: 14px;
    }
    .container {
        padding: 0 16px;
    }
}

/* ========== ДАШБОРД ========== */
.dashboard-page {
    padding: 30px 0 80px;
}
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 20px;
    flex-wrap: wrap;
}
.dashboard-header h1 {
    font-size: 32px;
    color: var(--text);
    margin-bottom: 6px;
}
.dashboard-sub {
    color: var(--text-muted);
    font-size: 14px;
}
.dashboard-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.status-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: pulse 2s infinite;
}
.status-pulse.live { background: var(--green); box-shadow: 0 0 12px rgba(16, 185, 129, 0.5); }
.status-pulse.warming { background: var(--yellow); }
.status-pulse.error { background: var(--red); }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.widgets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1200px) { .widgets-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .widgets-grid { grid-template-columns: 1fr; } }

.widget {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
}
.widget:hover {
    border-color: var(--accent);
}

.widget-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}
.widget-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.widget-icon.up   { background: rgba(16, 185, 129, 0.15); color: var(--green); }
.widget-icon.down { background: rgba(239, 68, 68, 0.15);  color: var(--red); }
.widget-icon.vol  { background: rgba(59, 130, 246, 0.15); color: var(--accent); }
.widget-icon.pulse{ background: rgba(245, 158, 11, 0.15); color: var(--yellow); }
.widget-head h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    flex: 1;
}
.widget-tf {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg);
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.widget-body {
    padding: 6px 0;
}
.widget-row {
    display: grid;
    grid-template-columns: 26px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 18px;
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s;
}
.widget-row:last-child { border-bottom: none; }
.widget-row:hover { background: rgba(59, 130, 246, 0.06); }
.widget-rank {
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.widget-symbol {
    font-weight: 600;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}
.widget-main {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}
.widget-row.positive .widget-main { color: var(--green); }
.widget-row.negative .widget-main { color: var(--red); }
.widget-row.neutral  .widget-main { color: var(--accent); }
.widget-sub {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 70px;
}
.widget-empty {
    padding: 30px 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Skeleton loader для виджетов пока данные не приехали */
.skeleton-row {
    pointer-events: none;
}
.sk {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: skShimmer 1.6s ease-in-out infinite;
}
.sk-symbol { width: 60%; }
.sk-main   { width: 50px; justify-self: end; }
.sk-sub    { width: 60px; justify-self: end; }
@keyframes skShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Виджеты-дивергенции */
.widget-icon.fake  { background: rgba(245, 158, 11, 0.18); color: var(--yellow); }
.widget-icon.accum { background: rgba(16, 185, 129, 0.15); color: var(--green); }

.widget-divergence .widget-hint {
    padding: 8px 18px 0;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
}

/* Для дивергенций main цвет — по типу виджета, не по знаку. Цена в "Подозрительном пампе" всегда зелёная (выросла), но виджет красный по смыслу. */
.widget[data-widget="fake_pump_1h"] .widget-row .widget-main { color: var(--green); }
.widget[data-widget="fake_pump_1h"] .widget-row .widget-sub  { color: var(--red); font-weight: 500; }
.widget[data-widget="hidden_accum_1h"] .widget-row .widget-main { color: var(--green); font-weight: 500; }
.widget[data-widget="hidden_accum_1h"] .widget-row .widget-sub  { color: var(--red); }

/* ========== ИНДИКАТОРЫ НА ЧАРТЕ ========== */

/* Бэйджи активных индикаторов (под контролами чарта) */
.indicators-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
    min-height: 0;
}
.indicator-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
}
.indicator-badge-x {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    border-radius: 4px;
    transition: color 0.15s;
}
.indicator-badge-x:hover { color: var(--red); }

/* Drag-handle на каждой pane (создаётся в createIndicatorPane / template price-pane) */
.pane-drag-handle {
    display: inline-block;
    cursor: grab;
    color: var(--accent);
    margin-right: 8px;
    padding: 2px 6px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -1px;
    user-select: none;
    opacity: 0.85;
    border-radius: 4px;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.pane-drag-handle:hover {
    opacity: 1;
    background: rgba(59, 130, 246, 0.12);
}
.pane-drag-handle:active { cursor: grabbing; }
/* Весь label-row — drag-area. Курсор grab подсказывает что строку можно тащить. */
.chart-panel-label {
    cursor: grab;
}
.chart-panel-label:active { cursor: grabbing; }
/* Кликабельные элементы внутри лейбла должны иметь свой курсор */
.chart-panel-label .panel-fs-btn,
.chart-panel-label button { cursor: pointer; }
/* Подсветка panel'а который сейчас тащим */
.chart-panel-dragging {
    opacity: 0.6;
    box-shadow: 0 0 0 2px var(--accent), 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: scale(1.005);
    transition: box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    z-index: 10;
    position: relative;
}

.toolbar-sep {
    color: var(--text-muted);
    opacity: 0.4;
    margin: 0 4px;
    user-select: none;
}
.layout-switch {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.layout-btn {
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    min-width: 36px;
    border-radius: 0 !important;
    border: none !important;
    background: transparent;
    color: var(--text-muted);
    transition: all 0.15s;
}
.layout-btn:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
}
.layout-btn.active {
    background: var(--accent, #3b82f6);
    color: #fff;
}
.layout-btn.active:hover {
    background: var(--accent-hover, #2563eb);
}
.layout-btn + .layout-btn {
    border-left: 1px solid var(--border) !important;
}

.indicator-badge-place {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: lowercase;
}
.indicator-badge-toggle {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
    border-radius: 4px;
    transition: color 0.15s;
}
.indicator-badge-toggle:hover { color: var(--accent); }

.ind-item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.ind-item-btn-snap {
    background: rgba(59, 130, 246, 0.20);
    color: #93c5fd;
}
.ind-item-btn-snap:hover { background: #3b82f6; color: #fff; }
.ind-item-btn-overlay {
    background: rgba(168, 85, 247, 0.20);
    color: #d8b4fe;
}
.ind-item-btn-overlay:hover { background: #a855f7; color: #fff; }

/* Модал */
.ind-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
}
.ind-modal.open { display: block; }
.ind-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 18, 32, 0.7);
    backdrop-filter: blur(4px);
}
.ind-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 92vw);
    max-height: 80vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ind-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
}
.ind-modal-head h3 {
    font-size: 18px;
    color: var(--text);
    margin: 0;
}
.ind-modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0 6px;
    transition: color 0.15s;
}
.ind-modal-close:hover { color: var(--text); }

.ind-modal-search {
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
}
.ind-modal-search input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}
.ind-modal-search input:focus { border-color: var(--accent); }

.ind-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px 24px;
}

.ind-category { margin-bottom: 22px; }
.ind-cat-title {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.ind-items { display: grid; gap: 8px; }
.ind-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.15s;
}
.ind-item:hover { border-color: var(--accent); }
.ind-item.active {
    border-color: var(--green) !important;
    background: rgba(16, 185, 129, 0.06) !important;
    box-shadow: 0 0 0 1px var(--green);
}
.ind-item-info { flex: 1; min-width: 0; }
.ind-item-name {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    font-size: 14px;
}
.ind-item-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.ind-item-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.ind-item-btn:hover { background: var(--accent-hover); }
.ind-item.active .ind-item-btn {
    background: rgba(16, 185, 129, 0.15);
    color: var(--green);
    border: 1px solid var(--green);
}
.ind-item.active .ind-item-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--red);
    border-color: var(--red);
}
.ind-item.active .ind-item-btn:hover::before {
    content: "Убрать ";
}
.ind-item.active .ind-item-btn:hover {
    /* На ховере подменяем визуал на "Убрать" чтобы юзер понял что клик удалит */
    color: transparent;
    position: relative;
}
.ind-item.active .ind-item-btn:hover::after {
    content: "Убрать";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
}
.ind-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 30px;
    font-size: 13px;
}

/* === Камера: кнопка с дропдауном === */
.camera-menu {
    position: relative;
}
.camera-btn {
    padding: 12px 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.camera-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 50;
    min-width: 200px;
    overflow: hidden;
}
.camera-dropdown.open { display: block; }
.camera-dropdown button {
    display: block;
    width: 100%;
    padding: 11px 16px;
    background: transparent;
    border: none;
    color: var(--text);
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}
.camera-dropdown button:hover { background: rgba(59, 130, 246, 0.1); color: var(--accent); }
.camera-dropdown button + button { border-top: 1px solid var(--border); }

/* === 3 кнопки камеры (без dropdown) === */
.camera-buttons {
    display: flex;
    gap: 6px;
}
.cam-btn {
    padding: 12px 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted) !important;
}
.cam-btn:hover {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Trend Divergence widgets */
.widget[data-widget="trend_pup_oidn_4h"] .widget-row .widget-main { color: var(--green); }
.widget[data-widget="trend_pup_oidn_4h"] .widget-row .widget-sub  { color: var(--red); font-weight: 500; }
.widget[data-widget="trend_pdn_oiup_4h"] .widget-row .widget-main { color: var(--red); }
.widget[data-widget="trend_pdn_oiup_4h"] .widget-row .widget-sub  { color: var(--green); font-weight: 500; }

/* ===== Конструктор виджетов: + / × / ! ===== */

/* Кнопка "+ Добавить виджет" в конце сетки */
.widget-add {
    background: transparent;
    border: 2px dashed var(--border);
    border-radius: 12px;
    transition: all 0.2s;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.widget-add:hover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.04);
}
.widget-add-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px;
    font-family: inherit;
    transition: color 0.2s;
}
.widget-add-btn:hover {
    color: var(--accent);
}
.widget-add-plus {
    font-size: 56px;
    line-height: 1;
    font-weight: 300;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
}
.widget-add-text {
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* ===== Drag-and-drop: пара из виджета → "+" → открыть чарт ===== */
.widget-row[draggable="true"] {
    cursor: grab;
}
.widget-row[draggable="true"]:active {
    cursor: grabbing;
}
/* Когда юзер тащит пару — подсвечиваем "+" слот, чтобы было видно куда бросать */
body.is-dragging-symbol .widget-add {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.06);
}
body.is-dragging-symbol .widget-add::after {
    content: "Открыть чарт";
    position: absolute;
    bottom: 18px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: var(--accent);
    letter-spacing: 0.04em;
    pointer-events: none;
    white-space: nowrap;
}
.widget-add { position: relative; }
/* Зона активна (мышь над "+") во время drag */
.widget-add.drop-hover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.14);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
    transform: scale(1.01);
}
.widget-add.drop-hover .widget-add-plus {
    color: var(--accent);
    transform: scale(1.08);
    transition: transform 0.15s;
}

/* Кнопка "×" удаления виджета */
.widget-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    border-radius: 4px;
    margin-left: 4px;
    opacity: 0;
    transition: all 0.15s;
}
.widget:hover .widget-remove {
    opacity: 1;
}
.widget-remove:hover {
    color: var(--red);
    background: rgba(239, 68, 68, 0.1);
}

/* "!" с описанием — tooltip */
.widget-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    margin-left: 8px;
    transition: all 0.15s;
}
.widget-info:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Жёлтый "!" — индикатор «режим тестирования» */
.widget-testing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 200, 60, 0.18);
    border: 1px solid rgba(255, 200, 60, 0.6);
    color: #ffce5a;
    font-size: 11px;
    font-weight: 800;
    cursor: help;
    margin-left: 6px;
    transition: all 0.15s;
    line-height: 1;
}
.widget-testing:hover {
    background: rgba(255, 200, 60, 0.35);
    color: #ffe085;
    border-color: #ffce5a;
}

/* TF-бэйдж в каталоге рядом с названием */
.catalog-tf {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 500;
}

/* === Перекрашиваем элементы шапки виджета: белые → синие при hover === */

/* TF-бэйдж: "1ч" / "4ч" — белый текст */
.widget-tf {
    color: var(--text) !important;
    border-color: var(--border);
}

/* Toggle режима виджета (например, Daily / Rolling в "Топ роста цены") */
.widget-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
    overflow: hidden;
}
.widget-mode-pill {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.1;
}
.widget-mode-pill:hover {
    color: var(--text);
}
.widget-mode-pill.active {
    background: var(--accent);
    color: #fff;
}

/* === Биржевой переключатель в виджете (BIN активен, HL/Overall soon) === */
.widget-subhead {
    display: flex;
    align-items: center;
    padding: 4px 12px 0 12px;
    margin-top: -2px;
}
.widget-exchange-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.exch-pill {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.exch-pill:hover:not(.soon):not(.active) {
    color: var(--text);
    border-color: var(--accent);
}
.exch-pill.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.exch-pill.soon {
    opacity: 0.45;
    cursor: not-allowed;
}
.exch-pill .exch-soon {
    font-size: 8px;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(255, 200, 60, 0.25);
    color: #ffce5a;
    line-height: 1.4;
}

/* Кнопка "×" удаления — ВСЕГДА видна, белая, hover красный */
.widget-remove {
    opacity: 1 !important;
    color: var(--text) !important;
    transition: all 0.15s;
}
.widget-remove:hover {
    color: var(--red) !important;
    background: rgba(239, 68, 68, 0.15);
}

/* Кнопка "!" — белая по умолчанию, синяя при hover */
.widget-info {
    color: var(--text) !important;
    background: var(--bg);
    border-color: var(--border);
    position: relative;
    cursor: help;
}
.widget-info:hover {
    color: #fff !important;
    background: var(--accent);
    border-color: var(--accent);
}

/* Кастомный tooltip для "!" — мгновенный, не как браузерный title */
.widget-info[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    white-space: normal;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
    z-index: 50;
}
.widget-info[data-tooltip]::after {
    content: "";
    position: absolute;
    top: calc(100% + 4px);
    right: 4px;
    border: 6px solid transparent;
    border-bottom-color: var(--accent);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 51;
}
.widget-info[data-tooltip]:hover::before,
.widget-info[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* === Фиксы UI дашборда === */

/* Заголовок виджета — одной строкой с многоточием если не помещается */
.widget-head h3 {
    flex: 1 1 auto;
    min-width: 0;             /* позволяет flexbox shrink ниже content size */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Сетка адаптивная — на узких экранах виджеты автоматически уменьшаются */
.widgets-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

/* Шапка — небольшие промежутки чтобы все элементы помещались */
.widget-head {
    gap: 8px;
}

/* Виджет — для абсолютного позиционирования tooltip */
.widget {
    position: relative;
}

/* Tooltip "!" — позиционируем относительно ВИДЖЕТА, не иконки */
.widget-info[data-tooltip]::before {
    right: 8px;
    top: 56px;                /* под шапкой виджета */
    width: min(280px, calc(100vw - 40px));
}
.widget-info[data-tooltip]::after {
    right: 12px;
    top: 50px;
}

/* === Tooltip: переезжает ВВЕРХ от иконки "!" — чтобы не накрывать данные === */
.widget-info[data-tooltip]::before {
    /* Позиционируем над иконкой */
    top: auto;
    bottom: calc(100% + 12px);
    right: -12px;
    transform: translateY(4px);
}
.widget-info[data-tooltip]::after {
    /* Стрелочка теперь смотрит ВНИЗ (на иконку) */
    top: auto;
    bottom: calc(100% + 6px);
    right: -8px;
    border: 6px solid transparent;
    border-bottom-color: transparent;
    border-top-color: var(--accent);
}
.widget-info[data-tooltip]:hover::before {
    transform: translateY(0);
}

/* === Чарт и дашборд — широкий контейнер === */
.chart-page .container,
.dashboard-page .container {
    max-width: 1800px;
}

/* ========== ЧАРТ: layout с правым сайдбаром ========== */

/* Откатываем расширение чарт-страницы — теперь места хватит за счёт сайдбара */
.chart-page .container {
    max-width: 1400px;
}

.chart-layout {
    display: grid;
    /* minmax(0, 1fr) не даёт колонке вырасти под content (канвасы lightweight-charts
       могут зависнуть в большом размере после выхода из fullscreen) */
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .chart-layout { grid-template-columns: 1fr; }
    .chart-sidebar { order: 2; }
}

/* === Кнопка fullscreen на панели === */
.chart-panel-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
/* Кнопка fs всегда уходит в правый край */
.chart-panel-label .panel-fs-btn { margin-left: auto; }
.panel-fs-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: all 0.15s;
}
.panel-fs-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* === Fullscreen панель === */
body.has-fs-panel { overflow: hidden; }
/* v18.8: Fullscreen работает И через Native Fullscreen API (:fullscreen),
   И через CSS-fallback (.fullscreen class). Пропорции:
     - price-pane: flex 3 (75%)
     - extra panes (RSI/MACD/etc): flex 1 каждый
   ВАЖНО: chart-canvas height: auto !important перебивает инлайновый
   height который lightweight-charts прописывает при создании. */
.chart-grid.fullscreen,
.chart-grid:fullscreen {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--bg);
    padding: 12px;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}
.chart-grid.fullscreen .chart-panel,
.chart-grid:fullscreen .chart-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}
/* Price-pane занимает в 3 раза больше места чем индикаторные pane'ы */
.chart-grid.fullscreen .chart-panel-price,
.chart-grid:fullscreen .chart-panel-price {
    flex: 3 1 0;
}
.chart-grid.fullscreen .chart-panel-extra,
.chart-grid:fullscreen .chart-panel-extra {
    flex: 1 1 0;
}
.chart-grid.fullscreen .chart-canvas,
.chart-grid:fullscreen .chart-canvas {
    flex: 1 1 0;
    min-height: 0;
    height: auto !important;
    width: 100% !important;
}

.chart-panel.fullscreen {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}
.chart-panel.fullscreen .chart-canvas {
    flex: 1;
    height: auto !important;
}

/* ========== ПРАВЫЙ САЙДБАР: КАРУСЕЛЬ ========== */
.chart-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}
.sb-arrow {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0;
    transition: all 0.15s;
}
.sb-arrow:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.sb-title {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.sb-page-count {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 4px;
    font-weight: 400;
}
.sidebar-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.sb-tab {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    line-height: 1;
    font-family: inherit;
}
.sb-tab:hover {
    color: var(--text);
    border-color: var(--accent);
}
.sb-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.sb-tab-emoji {
    font-size: 14px;
    line-height: 1;
}
.sidebar-pages {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 6px 0 2px;
}
.sb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: background 0.15s;
}
.sb-dot.active {
    background: var(--accent);
}
.sb-dot:hover {
    background: var(--text-muted);
}

/* === Кнопки торговых сессий в тулбаре чарта === */
.toolbar-divider {
    color: var(--text-muted);
    font-size: 16px;
    opacity: 0.5;
    margin: 0 4px;
    user-select: none;
    line-height: 1;
}
.session-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
    position: relative;  /* anchor для tooltip */
}
.session-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px 10px;
    min-width: 64px;
    height: 32px;
    border-radius: 16px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: inherit;
    user-select: none;
}
.session-btn:hover {
    transform: translateY(-1px);
}
.session-btn:active {
    transform: translateY(0);
}
.session-btn .session-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
}
.session-btn .session-time {
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1;
    opacity: 0.85;
}

/* Цвета: ASIA (синий, низкая агрессия) */
.session-btn.session-asia {
    background: rgba(55, 138, 221, 0.10);
    color: #85B7EB;
    border-color: rgba(55, 138, 221, 0.20);
}
.session-btn.session-asia:hover,
.session-btn.session-asia.zone-on {
    background: rgba(55, 138, 221, 0.22);
    border-color: rgba(55, 138, 221, 0.55);
    color: #B5D4F4;
}
.session-btn.session-asia.active {
    background: #185FA5;
    border-color: #378ADD;
    color: #E6F1FB;
}

/* Цвета: EU (янтарный, средне-высокая) */
.session-btn.session-eu {
    background: rgba(239, 159, 39, 0.10);
    color: #FAC775;
    border-color: rgba(239, 159, 39, 0.20);
}
.session-btn.session-eu:hover,
.session-btn.session-eu.zone-on {
    background: rgba(239, 159, 39, 0.22);
    border-color: rgba(239, 159, 39, 0.55);
    color: #FAEEDA;
}
.session-btn.session-eu.active {
    background: #BA7517;
    border-color: #EF9F27;
    color: #FAEEDA;
}

/* Цвета: US (красный, максимум) */
.session-btn.session-us {
    background: rgba(226, 75, 74, 0.10);
    color: #F09595;
    border-color: rgba(226, 75, 74, 0.20);
}
.session-btn.session-us:hover,
.session-btn.session-us.zone-on {
    background: rgba(226, 75, 74, 0.22);
    border-color: rgba(226, 75, 74, 0.55);
    color: #F7C1C1;
}
.session-btn.session-us.active {
    background: #A32D2D;
    border-color: #E24B4A;
    color: #FCEBEB;
}

/* Цвета: ALL (нейтральный серый/фиолет) */
.session-btn.session-all {
    background: rgba(127, 119, 221, 0.10);
    color: #AFA9EC;
    border-color: rgba(127, 119, 221, 0.25);
}
.session-btn.session-all:hover,
.session-btn.session-all.zone-on {
    background: rgba(127, 119, 221, 0.25);
    border-color: rgba(127, 119, 221, 0.6);
    color: #CECBF6;
}

/* Точка ● у активной сейчас сессии */
.session-btn.active .session-name::after {
    content: " ●";
    font-size: 7px;
    vertical-align: middle;
}

/* Tooltip */
.session-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    background: var(--card-bg, #161616);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 220px;
    max-width: 280px;
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
    z-index: 1000;
    white-space: normal;
}
.session-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
.session-tooltip::before {
    content: "";
    position: absolute;
    top: -5px;
    width: 10px;
    height: 10px;
    background: var(--card-bg, #161616);
    border-left: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    transform: rotate(45deg);
    left: var(--arrow-left, 24px);
}
.session-tooltip-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text);
}
.session-tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.session-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.6;
}
.session-tooltip-row span:last-child {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.session-tooltip-desc {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
}

/* Overlay-зоны сессий на чарте */
/* Позиция, ширина, высота выставляются JS'ом (syncOverlayPosition) — мы
   подгоняем overlay ровно под #chart-price (минуя label сверху). */
.chart-session-overlay {
    position: absolute;
    pointer-events: none;
    overflow: hidden;
    z-index: 4;  /* над canvas (у lightweight-charts ~1-2), под tooltip'ами */
    border-radius: inherit;
}
.chart-session-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
    transition: opacity 0.12s;
}

/* === Виджет торговых сессий (над Watchlist) === */
.ts-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    margin-bottom: 8px;
    background: rgba(59, 130, 246, 0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.ts-time {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.ts-utc-label {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.ts-utc-clock {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.ts-sessions {
    display: flex;
    gap: 3px;
}
.ts-session {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 0.4px;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid transparent;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    cursor: default;
    user-select: none;
}
.ts-session.active {
    color: var(--green);
    background: rgba(34, 197, 94, 0.13);
    border-color: rgba(34, 197, 94, 0.35);
}

/* === Watchlist === */
.wl-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wl-row {
    display: grid;
    /* star · symbol · signals(R/O/L) · price · pct · remove
       signals = auto (схлопывается до 0 когда сигналов нет, разворачивается под буквы). */
    grid-template-columns: 18px minmax(0, 1fr) auto auto auto 16px;
    gap: 4px;
    align-items: center;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 12px;
}
.wl-row:hover { background: rgba(59, 130, 246, 0.08); }
.wl-row-active {
    background: rgba(59, 130, 246, 0.18);
    border-left: 2px solid var(--blue, #3b82f6);
    padding-left: 6px;
}
.wl-row-active:hover { background: rgba(59, 130, 246, 0.24); }
/* Кнопка "+ в Watchlist" слева от символ-инпута на /chart */
.symbol-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.wl-toggle-btn {
    background: transparent;
    border: 1px solid var(--border, #2a3441);
    color: var(--text-muted, #9aa5b1);
    width: 30px;
    height: 32px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.wl-toggle-btn:hover {
    color: var(--blue, #3b82f6);
    border-color: var(--blue, #3b82f6);
}
.wl-toggle-btn.in-wl {
    color: var(--green, #22c55e);
    border-color: var(--green, #22c55e);
}
.wl-star {
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
}
.wl-star.on { color: var(--yellow); }
.wl-star:hover { color: var(--yellow); }
.wl-sym {
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text);
}
.wl-price {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.wl-pct {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    text-align: right;
    min-width: 56px;
    font-size: 12px;
}
.wl-pct.pos { color: var(--green); }
.wl-pct.neg { color: var(--red); }

/* Бейджи сигналов P/R/O/L в Watchlist — компактный scoreboard сигналов на пару.
   Неактивный сигнал = серая точка «·», активный = буква (P, R, O, L) подсвечена.
   Подробности активного сигнала видны при ховере (title). */
.wl-signals {
    display: inline-flex;
    gap: 1px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    min-width: 28px;
    text-align: left;
    color: var(--text-muted);
    cursor: help;
}
.wl-sig {
    display: inline-block;
    min-width: 8px;
    text-align: center;
    color: var(--text-muted);
    opacity: 0.35;
    transition: color 0.15s, opacity 0.15s;
}
.wl-sig.active {
    color: #ffce5a;
    opacity: 1;
    font-weight: 700;
}
.wl-sig.active[data-sig="pump"] { color: #ff8a3d; }
.wl-sig.active[data-sig="rsi_div"] { color: #b87cf7; }
.wl-sig.active[data-sig="oi_div"] { color: #4ac6ff; }
.wl-sig.active[data-sig="liquidations"] { color: #ff7676; }
.wl-liq {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    text-align: right;
    min-width: 48px;
    font-size: 11px;
    opacity: 0.85;
}
.wl-liq.pos { color: var(--green); opacity: 1; }
.wl-liq.neg { color: var(--red); opacity: 1; }
.wl-remove {
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    text-align: center;
    opacity: 0;
    transition: all 0.15s;
}
.wl-row:hover .wl-remove { opacity: 0.5; }
.wl-remove:hover { color: var(--red) !important; opacity: 1 !important; }
.wl-add-btn {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 8px;
    width: 100%;
    cursor: pointer;
    font-size: 12px;
    margin-top: 8px;
    transition: all 0.15s;
    font-family: inherit;
}
.wl-add-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* === Сайдбар: страница "Индикаторы" === */
.ind-stat-sym {
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    padding: 6px 0 2px;
}
.ind-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ind-stat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
}
.ind-stat-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ind-stat-value {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.ind-stat-value.pos { color: var(--green); }
.ind-stat-value.neg { color: var(--red); }
.ind-stat-value.neutral { color: var(--text); }
.ind-stat-sub {
    font-size: 12px;
    font-weight: 500;
    margin-left: 6px;
}
.ind-stat-sub.pos { color: var(--green); }
.ind-stat-sub.neg { color: var(--red); }

/* Ликвидации — детализация long/short ПОД основным значением */
.ind-stat-liq-detail {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ind-stat-liq-detail .pos { color: var(--green); }
.ind-stat-liq-detail .neg { color: var(--red); }

/* Сигналы — placeholder */
.signals-empty {
    text-align: center;
    padding: 30px 12px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
}

/* === Шапка сигналов по выбранной паре (карусель → «Сигналы») === */
.sig-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 8px 8px;
}
.sig-row {
    display: grid;
    grid-template-columns: 22px 78px 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 13px;
}
.sig-row .sig-emoji { font-size: 15px; line-height: 1; text-align: center; }
.sig-row .sig-name { color: #d8dde8; font-weight: 600; letter-spacing: 0.02em; }
.sig-row .sig-val { color: #8b94a7; font-size: 12px; }
.sig-row.sig-active {
    background: rgba(80, 200, 120, 0.10);
    border-color: rgba(80, 200, 120, 0.35);
}
.sig-row.sig-active .sig-val { color: #6dd99a; font-weight: 700; }
.sig-row.sig-off { opacity: 0.55; }
.sig-row.sig-off .sig-val { font-style: italic; }
.wl-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 14px 8px;
}

/* === Watchlist: инлайн-форма добавления с автокомплитом === */
.wl-add-wrap {
    position: relative;
    margin-top: 8px;
}
.wl-add-form {
    position: relative;
}
.wl-add-form input {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wl-add-form input::placeholder {
    color: var(--text-muted);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-transform: none;
}
.wl-add-suggest {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 180px;
    overflow-y: auto;
    z-index: 30;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.wl-add-item {
    padding: 7px 10px;
    cursor: pointer;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.wl-add-item:last-child { border-bottom: none; }
.wl-add-item:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}
.wl-add-item b {
    color: var(--accent);
    font-weight: 700;
}
.wl-add-empty {
    padding: 10px;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
}

/* === Drag-and-drop состояния === */
/* Виджеты на дашборде */
.widget-ghost {
    opacity: 0.4;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}
.widget-chosen {
    cursor: grabbing !important;
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.3);
    border-color: var(--accent) !important;
}
.widget-head {
    cursor: grab;
}
.widget-head:active {
    cursor: grabbing;
}

/* Watchlist строки */
.wl-row-ghost {
    opacity: 0.4;
    background: rgba(59, 130, 246, 0.15) !important;
}
.wl-row-chosen {
    cursor: grabbing !important;
    background: rgba(59, 130, 246, 0.18) !important;
}
.wl-row {
    cursor: grab;
}
.wl-row:active {
    cursor: grabbing;
}

/* ===== JS-tooltip (portal в body) ===== */
/* Перебивает старые CSS-tooltip правила и работает поверх любого overflow */
.widget-info[data-tooltip]::before,
.widget-info[data-tooltip]::after {
    display: none !important;
}

.js-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 300px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    white-space: normal;
}
.js-tooltip.show {
    opacity: 1;
}

/* ========== ДАШБОРД: ТАБЫ Данные | Торговля ========== */
.dashboard-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.dash-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: -1px;
}
.dash-tab:hover { color: var(--text); }
.dash-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ========== ВКЛАДКА ТОРГОВЛЯ ========== */
.trading-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.trading-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 600px;
}
.trading-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.trading-widget-host { min-width: 0; }
.trading-widget-compact {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.trading-widget-compact .widget-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.trading-widget-compact .widget-head h3 {
    flex: 1;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.trading-widget-compact .widget-tf {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(139, 148, 173, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}
.widget-swap-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.widget-swap-btn:hover { color: var(--accent); border-color: var(--accent); }

.trading-widget-compact .widget-body {
    max-height: 400px;
    overflow-y: auto;
}
.trading-pair-row {
    display: grid;
    grid-template-columns: 24px 1fr auto auto;
    gap: 6px;
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(30, 41, 64, 0.5);
    color: var(--text);
    font-size: 12px;
    transition: background 0.1s;
    text-decoration: none;
}
.trading-pair-row:hover { background: rgba(59, 130, 246, 0.08); }
.trading-pair-row .widget-rank { color: var(--text-muted); font-size: 10px; }
.trading-pair-row .widget-symbol { font-weight: 500; }
.trading-pair-row .widget-main { font-size: 11px; padding-left: 4px; }
.trading-pair-row .widget-sub { font-size: 10px; color: var(--text-muted); }
.trading-pair-row.positive .widget-main { color: var(--green); }
.trading-pair-row.negative .widget-main { color: var(--red); }
.trading-pair-row.neutral .widget-main { color: var(--text); }

/* Watchlist в trading-tab — переиспользует .chart-sidebar стили */
.tab-trading .chart-sidebar {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Правая колонка: чарт или плейсхолдер */
.trading-main {
    min-width: 0;
    min-height: 600px;
}
.trading-placeholder {
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.trading-placeholder-inner { text-align: center; padding: 40px 20px; }
.trading-placeholder-icon { font-size: 48px; opacity: 0.4; margin-bottom: 12px; }
.trading-placeholder-text { font-size: 18px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.trading-placeholder-sub { font-size: 13px; color: var(--text-muted); }

/* Адаптив под 1100px — стек */
@media (max-width: 1100px) {
    .trading-layout { grid-template-columns: 1fr; }
}

/* Trading-widget — info "!" должен быть чёткий синий, а не желтый.
   Перебиваем любые наследования от .widget-icon.fake (соседний элемент). */
.trading-widget-compact .widget-info {
    color: var(--accent) !important;
    background: var(--bg) !important;
    border: 1px solid var(--accent) !important;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    cursor: help;
    flex-shrink: 0;
}
.trading-widget-compact .widget-info:hover {
    background: var(--accent) !important;
    color: #fff !important;
}

/* Подсветка выбранного виджета в каталоге (trading-pick режим) */
.ind-item.ind-item-current {
    border-color: var(--green) !important;
    background: rgba(16, 185, 129, 0.06) !important;
    box-shadow: 0 0 0 1px var(--green);
}
.ind-item.ind-item-current .ind-item-btn {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--green) !important;
    border: 1px solid var(--green) !important;
    cursor: default !important;
    opacity: 1 !important;
}
.ind-item.ind-item-current .ind-item-btn:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    transform: none !important;
}