/* ============================================================
   BuyHold — Live Chart styles
   Файл вынесен из page-live-chart.php (Фаза 2.1, 2026-05-15)
   Зависит от: css/tools-ui.css (CSS-переменные --tool-*)
   ============================================================ */

/* === Фаза 3: KPI-карточки, табы категорий, reset кнопка === */

/* Reset кнопка в topbar (стиль как nav-btn / fullscreen-btn) */
.tool-app .lc-reset-btn {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(149, 206, 90, 0.3);
    color: #d1d4dc;
    cursor: pointer;
    border-radius: var(--tool-radius-sm, 6px);
    font-size: 12px;
    font-weight: 600;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.tool-app .lc-reset-btn:hover {
    background: rgba(239, 83, 80, 0.18);
    border-color: rgba(239, 83, 80, 0.6);
    color: #ef5350;
    transform: translateY(-1px);
}
.tool-app .lc-reset-btn svg { display: block; }

/* === Drawing tools + Indicators toolbar (LCT) ===
   Видна когда engine = lightweight, скрыта на mobile (drawing на touch неудобно). */
.pro-chart-wrapper .lct-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 8px 0;
    margin: 4px 0 8px;
    border-bottom: 1px dashed rgba(149, 206, 90, 0.12);
    align-items: center;
}
.pro-chart-wrapper .lct-toolbar[hidden] { display: none; }
.pro-chart-wrapper .lct-toolbar__group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.pro-chart-wrapper .lct-toolbar__group--ind {
    gap: 6px;
    margin-left: auto;
}

/* Drawing-кнопки (квадратные, 30x30) */
.pro-chart-wrapper .lct-draw-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--tool-border, #2a2e39);
    background: rgba(255, 255, 255, 0.04);
    color: var(--tool-text-secondary, #d1d4dc);
    border-radius: var(--tool-radius-sm, 6px);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    line-height: 1;
}
.pro-chart-wrapper .lct-draw-btn:hover {
    border-color: rgba(149, 206, 90, 0.5);
    color: var(--tool-accent, #95ce5a);
    background: rgba(149, 206, 90, 0.08);
}
.pro-chart-wrapper .lct-draw-btn.active {
    background: var(--tool-accent, #95ce5a);
    color: #131722;
    border-color: var(--tool-accent, #95ce5a);
    box-shadow: 0 0 0 1px rgba(149, 206, 90, 0.4);
}
.pro-chart-wrapper .lct-draw-btn.lct-draw-eraser:hover,
.pro-chart-wrapper .lct-draw-btn.lct-draw-eraser.active {
    background: #ffb74d;
    color: #131722;
    border-color: #ffb74d;
}
.pro-chart-wrapper .lct-draw-btn.lct-draw-clear { color: #ef5350; font-size: 18px; }
.pro-chart-wrapper .lct-draw-btn.lct-draw-clear:hover {
    border-color: #ef5350;
    color: #fff;
    background: #ef5350;
}

/* Indicators chips */
.pro-chart-wrapper .lct-ind-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--tool-border, #2a2e39);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tool-text-secondary, #d1d4dc);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
}
.pro-chart-wrapper .lct-ind-chip input { margin: 0; cursor: pointer; accent-color: var(--tool-accent, #95ce5a); }
.pro-chart-wrapper .lct-ind-chip:hover { border-color: rgba(149, 206, 90, 0.4); color: var(--tool-accent, #95ce5a); }
.pro-chart-wrapper .lct-ind-chip:has(input:checked) {
    background: rgba(149, 206, 90, 0.14);
    border-color: var(--tool-accent, #95ce5a);
    color: var(--tool-accent, #95ce5a);
}

.pro-chart-wrapper .lct-subpane-select {
    padding: 6px 10px;
    border: 1px solid var(--tool-border, #2a2e39);
    background: #1a1f2c;
    color: #e8eaed;
    border-radius: var(--tool-radius-sm, 6px);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    /* color-scheme: dark — браузер использует dark UI для select dropdown options.
       Это надёжнее чем option { background }, потому что Chrome/Safari игнорируют
       стилизацию options если color-scheme не задан. */
    color-scheme: dark;
}
.pro-chart-wrapper .lct-subpane-select option {
    background: #1a1f2c !important;
    color: #e8eaed !important;
    padding: 6px 10px;
}

/* Sub-pane container (RSI/MACD/Volume под основным chart).
   КРИТИЧНО: tools-ui.css делает .tool-app * { margin:0 padding:0 box-sizing:border-box }
   — это ломает Lightweight Charts table layout (chart рендерится узким прямоугольником
   в центре). all: revert полностью отменяет .tool-app reset для потомков. То же что было
   нужно для .lc-chart-container. */
.pro-chart-wrapper .lct-subpane-container {
    height: 140px;
    width: 100%;
    margin-top: 4px;
    border-top: 1px solid var(--tool-border, #2a2e39);
    background: #131722;
    border-radius: 0 0 var(--tool-radius-md, 12px) var(--tool-radius-md, 12px);
    overflow: hidden;
    position: relative;
}
.tool-app .lct-subpane-container * {
    all: revert;
}
.lct-subpane-container canvas { display: block; }

/* Drawing canvas overlay сидит над chart */
.pro-chart-wrapper .lct-drawing-overlay { position: absolute; left: 0; top: 0; }

/* Chart legend (top-left of chart) */
.pro-chart-wrapper .lct-chart-legend {
    position: absolute;
    top: 8px;
    left: 12px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
}
.pro-chart-wrapper .lct-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: rgba(19, 23, 34, 0.75);
    border: 1px solid var(--tool-border, #2a2e39);
    border-radius: 4px;
    font-size: 11px;
    color: var(--tool-text-secondary, #d1d4dc);
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
}
.pro-chart-wrapper .lct-legend-item i {
    display: inline-block;
    width: 10px;
    height: 2px;
    border-radius: 1px;
}

/* Mobile: drawing/indicators скрыты — touch без точности, экран узкий */
@media (max-width: 768px) {
    .pro-chart-wrapper .lct-toolbar { display: none !important; }
    .pro-chart-wrapper .lct-subpane-container { display: none !important; }
}

/* Stage 3a: TV-toggle-btn удалена — TV embed больше не используется (есть наш Lightweight).
   Multigrid скрыт через правило в самом конце файла (после конкурирующего общего правила). */

/* KPI-блок: 4 компактные карточки с собственными SVG-спарклайнами (Yahoo data) */

/* Шапка секции: заголовок + LIVE-индикатор */
.pro-chart-wrapper .lc-kpi-section {
    margin: 18px 0 22px;
}
.pro-chart-wrapper .lc-kpi-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 8px;
}
.pro-chart-wrapper .lc-kpi-section__title {
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--tool-text-secondary, #d1d4dc);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.pro-chart-wrapper .lc-kpi-section__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 11px;
    color: var(--tool-text-muted, #9ca3af);
}
.pro-chart-wrapper .lc-kpi-section__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #26a69a;
    box-shadow: 0 0 8px rgba(38, 166, 154, 0.6);
    animation: lcLivePulse 1.6s ease-in-out infinite;
}
@keyframes lcLivePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.pro-chart-wrapper .lc-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.pro-chart-wrapper .lc-kpi-card {
    position: relative;
    background: linear-gradient(135deg, var(--tool-bg-card, #1a1f2a) 0%, #1e2433 100%);
    border-radius: var(--tool-radius-lg, 14px);
    overflow: hidden;
    height: 130px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    isolation: isolate;
}

/* Header: название тикера + биржа */
.pro-chart-wrapper .lc-kpi-card__head {
    position: relative;
    z-index: 3;
    padding: 10px 14px 4px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}

.pro-chart-wrapper .lc-kpi-card__label {
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--tool-text-primary, #fff);
    letter-spacing: 0.2px;
}

.pro-chart-wrapper .lc-kpi-card__ticker {
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 10px;
    font-weight: 500;
    color: var(--tool-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.pro-chart-wrapper .lc-kpi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--tool-radius-lg, 14px);
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(149, 206, 90, 0.32),
        rgba(90, 149, 206, 0.16),
        rgba(149, 206, 90, 0.06));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    transition: opacity 0.4s;
    opacity: 0.7;
    z-index: 1;
}

.pro-chart-wrapper .lc-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22), 0 16px 32px rgba(149, 206, 90, 0.06);
}

.pro-chart-wrapper .lc-kpi-card:hover::before { opacity: 1; }

/* Цена: крупная моно-цифра */
.pro-chart-wrapper .lc-kpi-card__price {
    position: relative;
    z-index: 3;
    padding: 6px 14px 0;
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 22px;
    font-weight: 700;
    color: var(--tool-text-primary, #fff);
    letter-spacing: -0.3px;
    line-height: 1.05;
    pointer-events: none;
    min-height: 24px;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* Flash при tick: подсветка цены и тонкое свечение */
.pro-chart-wrapper .lc-kpi-card__price.is-flash-up {
    color: #26a69a;
    text-shadow: 0 0 12px rgba(38, 166, 154, 0.45);
    animation: lcPriceFlashUp 0.9s ease-out;
}
.pro-chart-wrapper .lc-kpi-card__price.is-flash-down {
    color: #ef5350;
    text-shadow: 0 0 12px rgba(239, 83, 80, 0.45);
    animation: lcPriceFlashDown 0.9s ease-out;
}
@keyframes lcPriceFlashUp {
    0%   { background: rgba(38, 166, 154, 0); }
    20%  { background: rgba(38, 166, 154, 0.18); }
    100% { background: rgba(38, 166, 154, 0); }
}
@keyframes lcPriceFlashDown {
    0%   { background: rgba(239, 83, 80, 0); }
    20%  { background: rgba(239, 83, 80, 0.18); }
    100% { background: rgba(239, 83, 80, 0); }
}

/* Изменение: % и абсолютное */
.pro-chart-wrapper .lc-kpi-card__change {
    position: relative;
    z-index: 3;
    padding: 4px 14px 0;
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 11px;
    font-weight: 600;
    color: var(--tool-text-muted, #9ca3af);
    letter-spacing: 0.1px;
    pointer-events: none;
}
.pro-chart-wrapper .lc-kpi-card__change.is-up   { color: #26a69a; }
.pro-chart-wrapper .lc-kpi-card__change.is-down { color: #ef5350; }

/* Спарклайн SVG: занимает оставшуюся высоту до низа карточки */
.pro-chart-wrapper .lc-kpi-card__spark {
    position: relative;
    z-index: 2;
    margin-top: auto;
    width: 100%;
    height: 42px;
    padding: 0;
    pointer-events: none;
    flex: 0 0 auto;
}
.pro-chart-wrapper .lc-kpi-card__spark svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Прозрачный overlay поверх карточки — клик ведёт на наш график с deep-link */
.pro-chart-wrapper .lc-kpi-card__link {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: transparent;
    text-decoration: none;
    border-radius: inherit;
}

/* Стейт ошибки */
.pro-chart-wrapper .lc-kpi-card.lc-kpi-error .lc-kpi-card__change { color: var(--tool-text-muted, #9ca3af); }
.pro-chart-wrapper .lc-kpi-card.lc-kpi-error .lc-kpi-card__price  { color: var(--tool-text-muted, #9ca3af); }

/* Табы категорий: pill-стиль как .tool-date-btn */
.pro-chart-wrapper .lc-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 14px;
    padding: 8px 0 4px;
    border-bottom: 1px solid rgba(149, 206, 90, 0.08);
}

.pro-chart-wrapper .lc-cat-tab {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--tool-border, #2a2e39);
    background: transparent;
    color: var(--tool-text-muted, #9ca3af);
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.pro-chart-wrapper .lc-cat-tab:hover {
    color: var(--tool-text-primary, #fff);
    border-color: rgba(149, 206, 90, 0.4);
}

.pro-chart-wrapper .lc-cat-tab.active {
    background: rgba(149, 206, 90, 0.14);
    border-color: var(--tool-accent, #95ce5a);
    color: var(--tool-accent, #95ce5a);
    box-shadow: 0 0 16px rgba(149, 206, 90, 0.18);
}

/* Скрытие инструментов при фильтре */
.pro-chart-wrapper .quick-instruments .instrument-btn.lc-hidden {
    display: none !important;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .pro-chart-wrapper .lc-kpi-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 12px 0 16px;
    }
    .pro-chart-wrapper .lc-kpi-card { height: 110px; }
    /* Cat-tabs: горизонтальный скролл, touch-target 44px (M1 fix) */
    .pro-chart-wrapper .lc-cat-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 6px;
        padding: 8px 0 6px;
        margin: 8px -10px 14px; /* выходим за padding chart-inner для full-bleed */
        padding-left: 10px;
        padding-right: 10px;
        scrollbar-width: none;
        /* Edge-fade справа — намёк на скролл */
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    }
    .pro-chart-wrapper .lc-cat-tabs::-webkit-scrollbar { display: none; }
    .pro-chart-wrapper .lc-cat-tab {
        flex: 0 0 auto;
        padding: 10px 14px;
        font-size: 13px;
        min-height: 38px;
        scroll-snap-align: start;
    }
    .tool-app .lc-reset-btn {
        min-height: 50px !important;
        padding: 8px 4px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    /* KPI: горизонтальная карусель вместо столбика 4×110px=440px (M2 fix) */
    .pro-chart-wrapper .lc-kpi-row {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding-bottom: 8px;
        margin: 12px -10px 16px;
        padding-left: 10px;
        padding-right: 10px;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    }
    .pro-chart-wrapper .lc-kpi-row::-webkit-scrollbar { display: none; }
    .pro-chart-wrapper .lc-kpi-card {
        flex: 0 0 auto;
        width: 64vw;
        max-width: 240px;
        scroll-snap-align: start;
        height: 100px;
    }
    /* Уменьшаем график на узких экранах (M1 fix) */
    .pro-chart-wrapper #tv-chart-container,
    .pro-chart-wrapper .lc-chart-container {
        height: 360px !important;
        min-height: 360px !important;
    }
    /* Multigrid (4 графика) на телефоне бесполезен — скрываем кнопку (M1 fix) */
    .pro-chart-wrapper .multigrid-btn { display: none !important; }
}
/* === Sticky-режим .chart-header === */

/* Offset под WP admin-bar для авторизованных пользователей */
body.admin-bar .pro-chart-wrapper .chart-header { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar .pro-chart-wrapper .chart-header { top: 46px; }
}

/* Когда панель прилипла к верху — добавляем стеклянный эффект, тень и убираем border-radius */
.pro-chart-wrapper .chart-header.is-stuck {
    background: rgba(19, 23, 34, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-color: rgba(149, 206, 90, 0.18);
    border-radius: 0 0 14px 14px;
    border-top: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    padding-top: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
}

/* === MOBILE chart-header: компактная иерархия (M2 v2) ===
   1. title-section (icon + название + status + LIVE) — одна строка, мелко
   2. lc-search — полная ширина, 16px (iOS zoom-фикс)
   3. header-nav (6 кнопок) — горизонтальный скролл вместо сетки 3×2
   В sticky-режиме НИЧЕГО не скрываем: всё доступно, просто сжимаем размеры.
*/
@media (max-width: 768px) {
    /* === Базовый mobile (не-sticky) === */
    /* title-section: всё в одну строку с переносом, мелкий шрифт */
    .pro-chart-wrapper .title-section {
        gap: 8px !important;
        padding: 0 !important;
    }
    .pro-chart-wrapper .title-section .chart-title {
        flex-basis: auto !important;
        width: auto !important;
        font-size: 18px !important;
    }
    .pro-chart-wrapper .status-indicator,
    .pro-chart-wrapper .live-badge {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }

    /* header-nav: горизонтальный scroll одной строкой, edge-fade */
    .pro-chart-wrapper .header-nav {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 6px !important;
        padding: 4px 0 6px !important;
        margin: 8px -10px 4px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    }
    .pro-chart-wrapper .header-nav::-webkit-scrollbar { display: none; }
    .pro-chart-wrapper .nav-btn {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        gap: 6px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 38px;
        border-radius: 999px !important;
        scroll-snap-align: start;
    }
    .pro-chart-wrapper .nav-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* === Sticky-режим: НЕ скрываем элементы — компактим === */
    .pro-chart-wrapper .chart-header.is-stuck {
        padding: 8px 12px !important;
        border-radius: 0 0 10px 10px;
    }
    .pro-chart-wrapper .chart-header.is-stuck .chart-title-row {
        gap: 6px !important;
    }
    .pro-chart-wrapper .chart-header.is-stuck .chart-title { font-size: 14px !important; }
    .pro-chart-wrapper .chart-header.is-stuck .title-section {
        gap: 6px !important;
    }
    .pro-chart-wrapper .chart-header.is-stuck .status-indicator,
    .pro-chart-wrapper .chart-header.is-stuck .live-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
    /* В sticky уменьшаем кнопки nav и иконку (компактно но видно) */
    .pro-chart-wrapper .chart-header.is-stuck .nav-btn {
        padding: 5px 9px !important;
        font-size: 11px !important;
        min-height: 32px;
    }
    .pro-chart-wrapper .chart-header.is-stuck .nav-btn svg {
        width: 12px !important;
        height: 12px !important;
    }
    /* Search в sticky — компактнее, но виден */
    .pro-chart-wrapper .chart-header.is-stuck .lc-search__input {
        height: 32px !important;
        padding: 6px 28px 6px 32px !important;
    }
    .pro-chart-wrapper .chart-header.is-stuck .lc-search__icon {
        width: 14px !important;
        height: 14px !important;
    }
}

/* iOS zoom-фикс: input ≥16px иначе Safari увеличит viewport при focus (M2 fix).
   Высокая специфичность (html body) — нужна чтобы перебить более общие правила input от темы. */
@media (max-width: 768px) {
    html body .pro-chart-wrapper input.lc-search__input,
    html body .pro-chart-wrapper .lc-search input {
        font-size: 16px !important;
    }
}

/* === Поиск тикеров (autocomplete dropdown) === */
.pro-chart-wrapper .lc-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 1 280px;
    min-width: 200px;
    max-width: 320px;
}

.pro-chart-wrapper .lc-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--tool-text-muted, #9ca3af);
    pointer-events: none;
    z-index: 2;
}

.pro-chart-wrapper .lc-search__input,
.pro-chart-wrapper input.lc-search__input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 32px 8px 36px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(149, 206, 90, 0.25) !important;
    border-radius: var(--tool-radius-sm, 8px) !important;
    /* Защита от глобального color inherit темы и autofill в WebKit */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: var(--tool-accent, #95ce5a) !important;
    font-family: var(--tool-font-body, 'DM Sans', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
    -webkit-appearance: none !important;
    text-shadow: none !important;
    box-shadow: none;
}
.pro-chart-wrapper .lc-search__input::placeholder {
    color: rgba(156, 163, 175, 0.85) !important;
    -webkit-text-fill-color: rgba(156, 163, 175, 0.85) !important;
    opacity: 1 !important;
}
.pro-chart-wrapper .lc-search__input:focus {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--tool-accent, #95ce5a) !important;
    box-shadow: 0 0 0 3px rgba(149, 206, 90, 0.15) !important;
}
/* WebKit autofill — желтый фон + чёрный текст по умолчанию, перебиваем */
.pro-chart-wrapper .lc-search__input:-webkit-autofill,
.pro-chart-wrapper .lc-search__input:-webkit-autofill:hover,
.pro-chart-wrapper .lc-search__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(20, 25, 35, 1) inset !important;
    -webkit-text-fill-color: #ffffff !important;
}
.pro-chart-wrapper .lc-search__input::-webkit-search-cancel-button { display: none; }

.pro-chart-wrapper .lc-search__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 50%;
    color: var(--tool-text-muted, #9ca3af);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}
.pro-chart-wrapper .lc-search__clear:hover {
    background: rgba(239, 83, 80, 0.18);
    color: #ef5350;
}
.pro-chart-wrapper .lc-search__clear[hidden] { display: none; }

.pro-chart-wrapper .lc-search__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: rgba(20, 25, 35, 0.96);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(149, 206, 90, 0.18);
    border-radius: var(--tool-radius-md, 12px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.1);
    max-height: 380px;
    overflow-y: auto;
    z-index: 100;
    animation: lcSearchIn 0.15s ease;
}
.pro-chart-wrapper .lc-search__dropdown[hidden] { display: none; }

@keyframes lcSearchIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pro-chart-wrapper .lc-search__item {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--tool-radius-sm, 8px);
    cursor: pointer;
    transition: background 0.12s ease;
}
.pro-chart-wrapper .lc-search__item:hover,
.pro-chart-wrapper .lc-search__item--active {
    background: rgba(149, 206, 90, 0.14);
}
.pro-chart-wrapper .lc-search__cat {
    font-size: 14px;
    text-align: center;
    opacity: 0.85;
}
.pro-chart-wrapper .lc-search__label {
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--tool-text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pro-chart-wrapper .lc-search__ticker {
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 10px;
    color: var(--tool-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.pro-chart-wrapper .lc-search__empty {
    list-style: none;
    padding: 12px 14px;
    color: var(--tool-text-muted, #9ca3af);
    font-size: 13px;
    text-align: center;
}

/* На мобильных search занимает всю строку, переносится */
@media (max-width: 768px) {
    .pro-chart-wrapper .lc-search {
        flex: 1 0 100%;
        max-width: none;
        order: 2; /* после title-section */
    }
    .pro-chart-wrapper .lc-search__dropdown {
        max-height: 60vh;
    }
}

/* === iOS fullscreen fallback (CSS-only) === */
/* Safari iOS не поддерживает Fullscreen API для div — используем position:fixed как fallback.
   Для desktop Fullscreen API всё ещё работает через .fullscreen класс (existing). */
.widget-box.fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;  /* динамический viewport — учитывает адресную строку iOS */
    max-width: none !important;
    margin: 0 !important;
    z-index: 99999 !important;
    background: var(--chart-main-bg, #131722) !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Блокируем скролл body когда любой widget в fullscreen */
body.lc-fullscreen-lock {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* === Hybrid engine: Lightweight Charts контейнер + бейдж источника данных === */

/* Подзаголовок виджета: тикер + биржа (для Lightweight). Для TV скрыт. */
.lc-chart-subtitle {
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 11px;
    font-weight: 500;
    color: var(--tool-text-muted, #9ca3af);
    margin-left: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.lc-chart-subtitle[hidden] { display: none; }

/* Таймфрейм-селектор для Lightweight Charts (TV использует свой UI внутри iframe) */
.lc-tf-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0 10px;
    align-items: center;
}
.lc-tf-bar[hidden] { display: none; }

.lc-tf-bar .lc-tf-btn {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(149, 206, 90, 0.2);
    border-radius: var(--tool-radius-sm, 6px);
    color: var(--tool-text-secondary, #d1d4dc);
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}
.lc-tf-bar .lc-tf-btn:hover {
    color: var(--tool-text-primary, #fff);
    border-color: rgba(149, 206, 90, 0.5);
    background: rgba(149, 206, 90, 0.08);
}
.lc-tf-bar .lc-tf-btn--active {
    background: rgba(149, 206, 90, 0.16);
    border-color: var(--tool-accent, #95ce5a);
    color: var(--tool-accent, #95ce5a);
    box-shadow: 0 0 10px rgba(149, 206, 90, 0.15);
}

/* Mobile: TF-кнопки крупнее (touch-target 44px), горизонтальный скролл при нехватке ширины (M1 fix) */
@media (max-width: 768px) {
    .pro-chart-wrapper .lc-tf-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 6px;
        padding: 8px 0 12px;
        scrollbar-width: none;
    }
    .pro-chart-wrapper .lc-tf-bar::-webkit-scrollbar { display: none; }
    .pro-chart-wrapper .lc-tf-bar .lc-tf-btn {
        flex: 0 0 auto;
        min-height: 38px;
        min-width: 52px;
        padding: 8px 14px;
        font-size: 13px;
        scroll-snap-align: start;
    }
}

/* Контейнер Lightweight Charts. КРИТИЧЕСКИ ВАЖНО:
   tools-ui.css делает .tool-app * { margin:0 padding:0 box-sizing:border-box }
   что СДВИГАЕТ canvas Lightweight Charts на 440px вправо (table layout ломается).
   Используем `all: revert` чтобы полностью отменить .tool-app reset для всех потомков. */
.lc-chart-container {
    background: #131722;
    border-radius: var(--tool-radius-md, 12px);
    overflow: hidden;
    width: 100%;
    height: 610px;
}
/* TradingView iframe-контейнер: высота управляется CSS, не инлайном (M1 mobile fix) */
.pro-chart-wrapper #tv-chart-container {
    height: 610px;
}
.tool-app .lc-chart-container *:not(.lc-data-badge):not(.lc-data-badge__dot):not(.lc-chart-error) {
    all: revert;
}
.lc-chart-container canvas {
    display: block;
}

.lc-chart-error {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tool-text-muted, #9ca3af);
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    padding: 20px;
    text-align: center;
}

/* Loading overlay при загрузке длинной истории */
.lc-chart-loading {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(20, 25, 35, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(149, 206, 90, 0.25);
    border-radius: 999px;
    color: var(--tool-text-secondary, #d1d4dc);
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    font-size: 12px;
    font-weight: 600;
    z-index: 20;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    animation: lcLoadingFade 0.2s ease;
}
.lc-chart-loading__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(149, 206, 90, 0.25);
    border-top-color: var(--tool-accent, #95ce5a);
    border-radius: 50%;
    animation: lcLoadingSpin 0.7s linear infinite;
}
@keyframes lcLoadingSpin { to { transform: rotate(360deg); } }
@keyframes lcLoadingFade { from { opacity: 0; } to { opacity: 1; } }

/* Live-индикатор источника данных (Binance/MOEX/Yahoo/TV).
   Inline-позиционирование внутри .widget-title — не пересекается с кнопками .widget-actions. */
.lc-data-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    margin-left: 8px;
    vertical-align: middle;
    background: rgba(20, 25, 35, 0.6);
    border: 1px solid rgba(149, 206, 90, 0.15);
    border-radius: 4px;
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 10px;
    font-weight: 500;
    color: var(--tool-text-muted, #9ca3af);
    pointer-events: none;
    user-select: none;
    line-height: 1;
    letter-spacing: 0.2px;
}
.lc-data-badge[hidden] { display: none; }

.lc-data-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.lc-data-badge--live {
    color: #26a69a;
    border-color: rgba(38, 166, 154, 0.4);
}
.lc-data-badge--live .lc-data-badge__dot {
    box-shadow: 0 0 8px rgba(38, 166, 154, 0.6);
    animation: lcLivePulse 1.6s ease-in-out infinite;
}

.lc-data-badge--delayed {
    color: #ff9800;
    border-color: rgba(255, 152, 0, 0.4);
}

.lc-data-badge--tv {
    color: var(--tool-blue, #5a95ce);
    border-color: rgba(90, 149, 206, 0.4);
}

/* Плашка «Рынок закрыт» — тот же визуальный язык, что у .lc-data-badge,
   но приглушённо-серая (нейтральный статус, не ошибка). title даёт причину. */
.lc-market-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    margin-left: 8px;
    vertical-align: middle;
    background: rgba(20, 25, 35, 0.6);
    border: 1px solid rgba(156, 163, 175, 0.35);
    border-radius: 4px;
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 10px;
    font-weight: 500;
    color: var(--tool-text-muted, #9ca3af);
    cursor: help;
    user-select: none;
    line-height: 1;
    letter-spacing: 0.2px;
}
.lc-market-status[hidden] { display: none; }
.lc-market-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .lc-data-badge {
        font-size: 10px;
        padding: 4px 8px;
        top: 8px;
        right: 8px;
    }
}

/* === конец Фазы 3 === */


/* Модал добавления тикера (стили перенесены из inline в Фазу 2.3) */
.pc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    animation: pcOverlayIn 0.2s ease;
}
.pc-modal-overlay[hidden] { display: none; }

.pc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px));
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(20, 25, 35, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(149, 206, 90, 0.18);
    border-radius: var(--tool-radius-lg, 20px);
    padding: 22px;
    z-index: 10000;
    box-shadow: 0 0 40px rgba(149, 206, 90, 0.08), 0 25px 50px rgba(0, 0, 0, 0.5);
    color: var(--tool-text-primary, #fff);
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    animation: pcModalIn 0.25s ease;
}
.pc-modal[hidden] { display: none; }

.pc-modal__title {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    color: var(--tool-text-primary, #fff);
}

.pc-modal__input {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--tool-bg-main, #131722);
    border: 1px solid var(--tool-border, #2a2e39);
    border-radius: var(--tool-radius-sm, 10px);
    color: var(--tool-text-primary, #fff);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.pc-modal__input:focus {
    border-color: var(--tool-accent, #95ce5a);
    box-shadow: 0 0 0 3px rgba(149, 206, 90, 0.15);
}

.pc-modal__hint {
    color: var(--tool-text-muted, #9ca3af);
    font-size: 12px;
    line-height: 1.55;
    margin: 12px 0 18px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--tool-radius-sm, 10px);
}

.pc-modal__hint strong { color: var(--tool-text-secondary, #d1d4dc); }

.pc-modal__actions {
    display: flex;
    gap: 10px;
}

.pc-modal__btn {
    flex: 1;
    padding: 11px 16px;
    border: none;
    border-radius: var(--tool-radius-sm, 10px);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pc-modal__btn--primary {
    background: linear-gradient(135deg, var(--tool-accent, #95ce5a), var(--tool-accent-dark, #7ab842));
    color: #1a1d24;
    box-shadow: 0 2px 8px rgba(149, 206, 90, 0.25);
}
.pc-modal__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(149, 206, 90, 0.35);
}

.pc-modal__btn--secondary {
    background: var(--tool-bg-hover, #252a33);
    color: var(--tool-text-secondary, #d1d4dc);
}
.pc-modal__btn--secondary:hover {
    background: var(--tool-bg-tertiary, #262b36);
    color: var(--tool-text-primary, #fff);
}

@keyframes pcModalIn {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes pcOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Переменные цветов — мост к tools-ui.css с фолбеками */
.pro-chart-wrapper {
    --chart-main-bg: var(--tool-bg-main, #131722);
    --chart-darker-bg: var(--tool-bg-card, #1e222d);
    --chart-border-color: var(--tool-border, #2a2e39);
    --chart-accent-color: var(--tool-accent, #95ce5a);
    --chart-secondary-accent: var(--tool-blue, #5a95ce);
    --chart-text-light: var(--tool-text-secondary, #d1d4dc);
    --chart-text-lighter: var(--tool-text-primary, #fff);
    --chart-text-muted: var(--tool-text-muted, #9ca3af);
    --chart-status-active: var(--tool-success, #26a69a);
    --chart-status-warning: var(--tool-warning, #ff9800);
    --chart-status-danger: var(--tool-danger, #ef5350);
    --chart-gold: #ffd700;
}

/* Контейнер страницы - ПОЛНАЯ ШИРИНА */
.pro-chart-wrapper {
    background: linear-gradient(135deg, var(--chart-darker-bg), var(--chart-main-bg));
    margin: -10px calc(-50vw + 50%) 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100vw !important;
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    color: var(--chart-text-light);
    min-height: calc(100vh - 200px);
    border-radius: 0;
    /* overflow: clip вместо overflow-x: hidden — современное свойство, не блокирует position: sticky у потомков */
    overflow-x: clip;
    position: relative;
}

/* Внутренний контейнер */
.chart-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Шапка с навигацией — sticky к верху viewport (в пределах chart-inner) */
.chart-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--chart-main-bg);
    border: 1px solid var(--chart-border-color);
    border-radius: var(--tool-radius-md, 12px);
    padding: 20px;
    margin-bottom: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: padding 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, backdrop-filter 0.2s ease;
}

.chart-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.title-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.chart-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--chart-text-lighter);
    margin: 0;
    display: inline-block;
}

.chart-icon {
    width: 32px;
    height: 32px;
    fill: var(--chart-accent-color);
}

.live-badge {
    background: linear-gradient(135deg, var(--chart-accent-color), #7eb942);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    animation: pulse 2s infinite;
    white-space: nowrap;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-left: 10px;
}

.status-indicator.active {
    background: rgba(38, 166, 154, 0.2);
    color: var(--chart-status-active);
}

.status-indicator.closed {
    background: rgba(239, 83, 80, 0.2);
    color: var(--chart-status-danger);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Единый стиль для всех кнопок с высоким приоритетом */
.header-nav {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

.pro-chart-wrapper .nav-btn,
.pro-chart-wrapper .fullscreen-btn,
.pro-chart-wrapper .multigrid-btn,
.pro-chart-wrapper .grid-size-btn {
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(149, 206, 90, 0.3) !important;
    color: #fff !important;
    cursor: pointer !important;
    border-radius: var(--tool-radius-sm, 6px) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-width: fit-content !important;
    position: relative !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    font-family: var(--tool-font-body, 'DM Sans', sans-serif) !important;
}

/* Tooltip стили с высоким приоритетом */
.pro-chart-wrapper [data-tooltip] {
    position: relative;
}

.pro-chart-wrapper [data-tooltip]:hover::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.95) !important;
    color: #fff !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: normal !important;
    white-space: nowrap !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    animation: tooltipFade 0.3s ease !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
}

.pro-chart-wrapper [data-tooltip]:hover::before {
    content: '' !important;
    position: absolute !important;
    bottom: calc(100% + 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-style: solid !important;
    border-width: 4px 4px 0 4px !important;
    border-color: rgba(0, 0, 0, 0.95) transparent transparent transparent !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    animation: tooltipFade 0.3s ease !important;
}

@keyframes tooltipFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pro-chart-wrapper .nav-btn:hover,
.pro-chart-wrapper .fullscreen-btn:hover,
.pro-chart-wrapper .multigrid-btn:hover,
.pro-chart-wrapper .grid-size-btn:hover {
    background: var(--chart-accent-color) !important;
    color: #000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(149, 206, 90, 0.3) !important;
}

.pro-chart-wrapper .nav-btn.active,
.pro-chart-wrapper .grid-size-btn.active {
    background: var(--chart-accent-color) !important;
    color: #000 !important;
}

.pro-chart-wrapper .nav-btn.active svg path,
.pro-chart-wrapper .nav-btn.active svg rect,
.pro-chart-wrapper .nav-btn.active svg circle,
.pro-chart-wrapper .nav-btn.active svg line,
.pro-chart-wrapper .nav-btn.active svg polyline {
    fill: #000 !important;
    stroke: #000 !important;
}

/* SVG иконки в кнопках табов */
.pro-chart-wrapper .nav-btn svg,
.pro-chart-wrapper .fullscreen-btn svg,
.pro-chart-wrapper .multigrid-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
}

.pro-chart-wrapper .nav-btn:hover svg path,
.pro-chart-wrapper .nav-btn:hover svg rect,
.pro-chart-wrapper .nav-btn:hover svg circle,
.pro-chart-wrapper .nav-btn:hover svg line,
.pro-chart-wrapper .nav-btn:hover svg polyline,
.pro-chart-wrapper .fullscreen-btn:hover svg path,
.pro-chart-wrapper .fullscreen-btn:hover svg polyline,
.pro-chart-wrapper .multigrid-btn:hover svg rect {
    fill: #000 !important;
    stroke: #000 !important;
}

/* Кнопки инструментов с высоким приоритетом */
.pro-chart-wrapper .instrument-btn {
    padding: 9px 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(149, 206, 90, 0.25) !important;
    color: #fff !important;
    cursor: pointer !important;
    border-radius: var(--tool-radius-sm, 8px) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    text-align: center !important;
    min-width: 0 !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    font-family: var(--tool-font-body, 'DM Sans', sans-serif) !important;
}

.pro-chart-wrapper .instrument-btn:hover {
    background: var(--chart-accent-color) !important;
    color: #000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(149, 206, 90, 0.3) !important;
}

.pro-chart-wrapper .instrument-btn.active {
    background: var(--chart-accent-color) !important;
    color: #000 !important;
}

/* Контент секции */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Виджет контейнер и заголовок с высоким приоритетом */
.pro-chart-wrapper .widget-box {
    background: var(--chart-main-bg) !important;
    border: 1px solid var(--chart-border-color) !important;
    border-radius: var(--tool-radius-lg, 12px) !important;
    padding: 20px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
}

.pro-chart-wrapper .widget-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--chart-border-color) !important;
    background: transparent !important;
}

.pro-chart-wrapper .widget-header .widget-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--chart-text-lighter) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
    line-height: normal !important;
    font-family: var(--tool-font-body, 'DM Sans', sans-serif) !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    /* Override critical.css .widget-title{background:#e7494a; padding:12px 15px} —
       это правило для WP sidebar widgets, бьёт по нашему chart-title (общий класс).
       В тёмной теме иногда становится #222 — всё равно убираем. */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

.widget-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Быстрые кнопки выбора инструментов — grid auto-fit, как в Журнале сделок */
.quick-instruments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
    margin: 14px 0 18px;
    width: 100%;
}

/* Стили для пользовательских инструментов */
.custom-instruments {
    display: flex;
    gap: 8px;
    margin: 10px 0 20px;
    width: 100%;
    flex-wrap: wrap;
}

.custom-instruments:empty {
    display: none;
}

.custom-instruments .instrument-btn {
    position: relative;
}

.custom-instruments .instrument-btn::after {
    content: '×';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background: #ef5350;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-instruments .instrument-btn:hover::after {
    opacity: 1;
}

.add-symbol-btn {
    background: rgba(149, 206, 90, 0.1) !important;
    border: 1px dashed rgba(149, 206, 90, 0.5) !important;
}

.add-symbol-btn:hover {
    background: rgba(149, 206, 90, 0.2) !important;
    border-style: solid !important;
}

/* Мультиграфик стили */
.multigrid-container {
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.multigrid-container.grid-1 {
    grid-template-columns: 1fr;
}

.multigrid-container.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.multigrid-container.grid-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.multigrid-item {
    border: 1px solid var(--chart-border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--chart-darker-bg);
    min-height: 400px;
}

.multigrid-item iframe {
    width: 100%;
    height: 100%;
}

/* Полноэкранный режим */
.widget-box.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 99999 !important;
    background: var(--chart-main-bg) !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.widget-box.fullscreen .widget-header {
    padding: 10px 20px;
    margin-bottom: 0;
}

.widget-box.fullscreen #tv-chart-container,
.widget-box.fullscreen #single-chart-view,
.widget-box.fullscreen #multi-chart-view {
    height: calc(100vh - 60px) !important;
}

.widget-box.fullscreen .multigrid-container {
    height: calc(100vh - 60px) !important;
    max-height: none !important;
}
/* Grid-rows на полную высоту в fullscreen (вместо фикс. 380px). */
.widget-box.fullscreen .multigrid-container.grid-2 {
    grid-template-rows: 1fr !important;
}
.widget-box.fullscreen .multigrid-container.grid-4 {
    grid-template-rows: repeat(2, 1fr) !important;
}

.widget-box.fullscreen .multigrid-item iframe {
    height: 100% !important;
}

.widget-box.fullscreen .multigrid-item,
.widget-box.fullscreen .multigrid-item .lc-mini-host {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
}

/* Описательный блок */
.info-block {
    background: rgba(149, 206, 90, 0.05);
    border: 1px solid rgba(149, 206, 90, 0.2);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.info-block h3 {
    color: var(--chart-accent-color);
    font-size: 16px;
    margin: 0 0 15px;
}

.info-block p {
    color: var(--chart-text-light);
    line-height: 1.6;
    margin: 0 0 10px;
    text-indent: 30px;
}

.info-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-block li {
    color: var(--chart-text-muted);
    padding-left: 20px;
    margin-bottom: 8px;
    position: relative;
}

.info-block li:before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--chart-accent-color);
}

/* Контент из редактора WordPress - стили подключаются из cpt-styles.css */
/* Базовые стили только для позиционирования */
.cpt-article-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* Дополнительные стили для применения ограничения ширины из cpt-styles.css */
.expert-review-page {
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.expert-review-content {
    /* Стили берутся из cpt-styles.css, здесь только поддержка */
    position: relative;
}

/* FAQ — центрируем как и контент */
.surfearner-faq-section {
    margin: 0 auto !important;
    max-width: 900px;
    padding: 0 20px;
}

/* Стили для кнопки возврата наверх - если нет в cpt-styles.css */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #95ce5a, #7eb942);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(149, 206, 90, 0.4);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(149, 206, 90, 0.5);
}

.scroll-to-top svg {
    width: 24px;
    height: 24px;
}

/* УЛУЧШЕННАЯ МОБИЛЬНАЯ АДАПТАЦИЯ */
@media (max-width: 768px) {
    /* Форсируем показ виджетов TradingView на мобильных (переопределяем глобальное скрытие из хедера темы),
       НО только если JS не выставил inline display:none — иначе hybrid-engine не может скрыть TV. */
    .pro-chart-wrapper .tradingview-widget-container:not([style*="display: none"]):not([style*="display:none"]) {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .pro-chart-wrapper {
        margin: 0 !important;
        border-radius: 0;
        width: 100% !important;
        min-height: auto;
    }
    
    .chart-inner {
        padding: 10px;
        padding-top: 40px; /* Добавлен отступ сверху, чтобы не прятался за шапкой */
        max-width: 100%;
    }
    
    .chart-header {
        padding: 15px;
        border-radius: 8px;
    }
    
    .chart-title-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .title-section {
        flex-direction: row; /* Изменено с column на row */
        flex-wrap: wrap; /* Добавлено для переноса */
        align-items: center;
        justify-content: center; /* Центрирование */
        text-align: center;
        gap: 8px; /* Уменьшен gap */
    }
    
    .chart-title {
        font-size: 20px;
        justify-content: center;
        text-align: center;
        width: 100%; /* Заголовок занимает всю ширину */
        flex-basis: 100%; /* Заголовок на отдельной строке */
    }
    
    .chart-icon {
        width: 24px;
        height: 24px;
    }
    
    .status-indicator {
        font-size: 11px;
        padding: 3px 8px;
        margin: 0;
    }
    
    .live-badge {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    /* Навигационные кнопки на мобильных - сетка 3x2 */
    .header-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        margin-top: 10px;
    }
    
    .pro-chart-wrapper .nav-btn,
    .pro-chart-wrapper .fullscreen-btn,
    .pro-chart-wrapper .multigrid-btn,
    .pro-chart-wrapper .grid-size-btn {
        padding: 8px 4px !important;
        font-size: 11px !important;
        border-radius: 5px !important;
        gap: 3px !important;
        flex-direction: column !important;
        min-height: 50px !important;
    }
    
    .pro-chart-wrapper .nav-btn svg,
    .pro-chart-wrapper .fullscreen-btn svg,
    .pro-chart-wrapper .multigrid-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Действия виджета: компактно справа, не растягиваем (M1 fix) */
    .widget-actions {
        width: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 6px;
    }

    /* grid-controls показывается только когда multigrid активен — JS управляет inline display.
       Убран принудительный !important, который ломал логику и показывал контролы всегда. */
    #grid-controls {
        gap: 5px;
    }
    
    /* Кнопки инструментов на мобильных - сетка 3x3 */
    .quick-instruments {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    
    .custom-instruments {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    
    .custom-instruments:empty {
        display: none;
    }
    
    .pro-chart-wrapper .instrument-btn {
        padding: 10px 5px !important;
        font-size: 12px !important;
        flex: none !important;
    }
    
    /* Виджет боксы */
    .pro-chart-wrapper .widget-box {
        padding: 15px !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
    }
    
    /* Widget-header на mobile: title + actions в ОДНОЙ строке (компакт),
       без border-bottom разделителя — сразу TF-bar и график (M2-FIX) */
    .pro-chart-wrapper .widget-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
        border-bottom: none !important;
    }

    .pro-chart-wrapper .widget-header .widget-title {
        font-size: 14px !important;
        text-align: left !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 6px !important;
        overflow: hidden;
    }
    .pro-chart-wrapper .widget-header .widget-title #lc-chart-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 50%;
    }
    .pro-chart-wrapper .widget-header .lc-chart-subtitle {
        font-size: 9px !important;
        margin-left: 0 !important;
        letter-spacing: 0.2px !important;
    }
    .pro-chart-wrapper .widget-header .lc-data-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
    
    /* Мультиграфики на мобильных */
    .multigrid-container.grid-2,
    .multigrid-container.grid-4 {
        grid-template-columns: 1fr !important;
    }
    
    .multigrid-item {
        min-height: 300px;
    }
    
    /* Графики на мобильных: и TV, и Lightweight (M1 fix) */
    .pro-chart-wrapper #tv-chart-container,
    .pro-chart-wrapper .lc-chart-container {
        height: 420px !important;
        min-height: 420px !important;
    }
    
    .tradingview-widget-container {
        min-height: 350px !important;
        width: 100% !important;
    }
    
    .tradingview-widget-container__widget {
        width: 100% !important;
        min-height: 350px !important;
    }
    
    /* Информационный блок */
    .info-block {
        padding: 15px;
        margin: 15px 0;
    }
    
    .info-block h3 {
        font-size: 14px;
    }
    
    .info-block p {
        text-indent: 20px;
        font-size: 14px;
    }
    
    .info-block li {
        font-size: 13px;
        padding-left: 18px;
    }
    
    /* Кнопка наверх */
    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
    
    .scroll-to-top svg {
        width: 20px;
        height: 20px;
    }
    
    /* Полноэкранный режим на мобильных */
    .widget-box.fullscreen .widget-header {
        padding: 10px;
    }
    
    .widget-box.fullscreen #tv-chart-container,
    .widget-box.fullscreen #single-chart-view,
    .widget-box.fullscreen #multi-chart-view {
        height: calc(100vh - 50px) !important;
    }
    
    /* Отключаем tooltip на мобильных */
    .pro-chart-wrapper [data-tooltip]:hover::after,
    .pro-chart-wrapper [data-tooltip]:hover::before {
        display: none !important;
    }
    
    .editor-content p,
    .info-block p {
        text-indent: 15px;
    }
    
    .expert-review-page {
        padding: 20px 10px;
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 380px) {
    .chart-title {
        font-size: 18px;
    }
    
    .header-nav {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quick-instruments {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pro-chart-wrapper .instrument-btn {
        font-size: 11px !important;
        padding: 8px 4px !important;
    }
    
    .pro-chart-wrapper .nav-btn {
        font-size: 10px !important;
    }
}

/* Стили для виджетов TradingView */
.pro-chart-wrapper .tradingview-widget-container {
    width: 100% !important;
    min-height: 400px;
}

.pro-chart-wrapper .tradingview-widget-copyright {
    display: none !important;
}

/* Фикс для iframe виджетов на мобильных */
@media (max-width: 768px) {
    .tradingview-widget-container iframe {
        width: 100% !important;
        min-height: 350px !important;
    }
}

/* === Stage 3b: Multigrid на Lightweight chart-mini (заменили TV iframe) ===
   ЗАЩИТА ОТ INFINITE EXPANSION (3 уровня):
   1) max-height на multigrid-container — глобальный потолок
   2) height + max-height на .multigrid-item — фиксированная ячейка
   3) max-height на .lc-mini-host (внутренний chart-host) — последний рубеж
   4) overflow:hidden на каждом уровне — даже если chart рендерит больше, обрежется. */
.pro-chart-wrapper .multigrid-container {
    display: grid;
    gap: 12px;
    max-height: 800px;
    overflow: hidden;
}
.pro-chart-wrapper .multigrid-container.grid-2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 380px;
}
.pro-chart-wrapper .multigrid-container.grid-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 380px);
}
.pro-chart-wrapper .multigrid-item {
    position: relative;
    background: #131722;
    border: 1px solid var(--tool-border, #2a2e39);
    border-radius: var(--tool-radius-md, 12px);
    overflow: hidden;
    height: 380px !important;
    max-height: 380px !important;
    min-height: 0 !important;
}
.pro-chart-wrapper .lc-mini-host {
    width: 100% !important;
    height: calc(100% - 0px) !important;
    max-height: 380px !important;
    overflow: hidden !important;
    position: relative !important;
}
/* Reset margin/padding для потомков (но НЕ inline-стилей chart-host) — минимальный набор
   чтобы не ломать Lightweight внутренний layout. */
.tool-app .lc-mini-host *,
.tool-app .lc-mini-host *::before,
.tool-app .lc-mini-host *::after {
    margin: 0;
    padding: 0;
}
.lc-mini-caption {
    position: absolute;
    top: 6px;
    left: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 5px 3px 8px;
    background: rgba(19, 23, 34, 0.85);
    border: 1px solid rgba(149, 206, 90, 0.22);
    border-radius: 4px;
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 11px;
    font-weight: 600;
    color: #95ce5a;
    letter-spacing: 0.3px;
}
.lc-mini-caption__label { pointer-events: none; }
.lc-mini-caption__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid rgba(149, 206, 90, 0.3);
    background: rgba(149, 206, 90, 0.08);
    color: #95ce5a;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    transition: all 0.15s ease;
}
.lc-mini-caption__edit:hover {
    background: rgba(149, 206, 90, 0.22);
    border-color: #95ce5a;
}
.lc-mini-host { width: 100%; height: 100%; }
/* На mobile <480px multigrid скрыт через @media в основном блоке (4 chart на телефоне бесполезны).
   На desktop кнопка multigrid снова видна — старое скрытие из Stage 3a временного отменено. */

/* === M4: iOS safe-area + touch-targets аудит === */

/* Sticky-header учитывает safe-area-inset-top (notch iPhone X+).
   На устройствах без notch env() возвращает 0 — никакого эффекта. */
@supports (top: env(safe-area-inset-top)) {
    .pro-chart-wrapper .chart-header {
        top: env(safe-area-inset-top);
    }
    /* Если есть admin-bar — складываем offset с safe-area */
    body.admin-bar .pro-chart-wrapper .chart-header {
        top: calc(32px + env(safe-area-inset-top));
    }
    @media (max-width: 782px) {
        body.admin-bar .pro-chart-wrapper .chart-header {
            top: calc(46px + env(safe-area-inset-top));
        }
    }
    /* Нижние блоки страницы — отступ под home-indicator на iPhone */
    .pro-chart-wrapper .chart-inner {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    /* Sticky scroll-to-top: дополнительный отступ снизу */
    .pro-chart-wrapper .scroll-to-top {
        bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
    }
}

/* Touch-target аудит на mobile: все интерактивные элементы ≥ 44×44px (Apple HIG / Material). */
@media (max-width: 768px) {
    /* TF-кнопки уже 38px — поднимаем до 44 */
    .pro-chart-wrapper .lc-tf-bar .lc-tf-btn {
        min-height: 44px;
        min-width: 56px;
    }
    /* Cat-tabs тоже */
    .pro-chart-wrapper .lc-cat-tab {
        min-height: 44px;
    }
    /* Header-nav кнопки */
    .pro-chart-wrapper .nav-btn {
        min-height: 44px !important;
    }
    /* Quick instruments — кнопки тикеров в сетке */
    .pro-chart-wrapper .instrument-btn {
        min-height: 44px !important;
    }
    /* KPI-карточка как тач-таргет (вся карточка кликабельна через .lc-kpi-card__link) */
    .pro-chart-wrapper .lc-kpi-card { min-height: 88px; }
    /* Toolbar в widget-actions */
    .pro-chart-wrapper .widget-actions button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    /* FAQ accordion — заголовки */
    .surfearner-faq-question { min-height: 48px; }
}

/* === Multigrid asset picker (modal) === */
.lct-picker-modal {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.lct-picker__overlay {
    position: absolute; inset: 0;
    background: rgba(7, 11, 20, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.lct-picker__box {
    position: relative;
    width: 100%; max-width: 480px;
    background: linear-gradient(180deg, #1a1f2c 0%, #131722 100%);
    border: 1px solid rgba(149, 206, 90, 0.25);
    border-radius: var(--tool-radius-lg, 14px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(149,206,90,0.05) inset;
    overflow: hidden;
    animation: lct-picker-in 0.18s ease-out;
}
@keyframes lct-picker-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lct-picker__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(149, 206, 90, 0.12);
}
.lct-picker__title {
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    font-size: 14px; font-weight: 600;
    color: #e8eaed;
}
.lct-picker__close {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: #9ca3af;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.lct-picker__close:hover {
    background: rgba(239, 83, 80, 0.15);
    border-color: #ef5350;
    color: #ef5350;
}
.lct-picker__search-row {
    position: relative;
    padding: 12px 14px 8px;
}
.lct-picker__search-ico {
    position: absolute;
    top: 50%; left: 26px;
    transform: translateY(-50%);
    color: #6b7280;
    pointer-events: none;
}
.lct-picker__input {
    width: 100%;
    padding: 10px 12px 10px 38px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(149, 206, 90, 0.22) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    outline: none;
    box-shadow: none !important;
    transition: border-color 0.15s ease;
}
.lct-picker__input:focus {
    border-color: #95ce5a !important;
    background: rgba(149, 206, 90, 0.06) !important;
}
.lct-picker__input::placeholder { color: #6b7280; }
.lct-picker__list {
    list-style: none;
    margin: 0;
    padding: 8px 8px 14px;
    max-height: min(60vh, 480px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(149,206,90,0.25) transparent;
}
.lct-picker__list::-webkit-scrollbar { width: 6px; }
.lct-picker__list::-webkit-scrollbar-thumb { background: rgba(149,206,90,0.25); border-radius: 3px; }
.lct-picker__item {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}
.lct-picker__item + .lct-picker__item { margin-top: 2px; }
.lct-picker__item:hover {
    background: rgba(149, 206, 90, 0.1);
    transform: translateX(2px);
}
.lct-picker__cat {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(149, 206, 90, 0.12);
    border-radius: 6px;
    font-size: 11px; font-weight: 700;
    color: #95ce5a;
    text-transform: uppercase;
}
.lct-picker__lbl {
    font-family: var(--tool-font-body, 'DM Sans', sans-serif);
    font-size: 13px; font-weight: 600;
    color: #e8eaed;
}
.lct-picker__tic {
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 11px;
    color: #9ca3af;
    background: rgba(255,255,255,0.04);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.08);
}
.lct-picker__empty {
    padding: 30px 14px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}
@media (max-width: 480px) {
    .lct-picker-modal { padding: 0; align-items: flex-end; }
    .lct-picker__box {
        max-width: none;
        border-radius: 16px 16px 0 0;
    }
    .lct-picker__list { max-height: 50vh; }
}

/* === Multigrid удалён (вариант C) — не доводили chart-mini до полного full-width === */
/* Селектор с body для повышения специфичности — перебивает общее правило с !important. */
body .pro-chart-wrapper .multigrid-btn,
body .pro-chart-wrapper #grid-controls,
body .pro-chart-wrapper #multi-chart-view {
    display: none !important;
}

/* === FIX: TV widgets в lazy-tabs (heatmaps/screener/calendar/community) ===
   Где-то в head есть inline `.tradingview-widget-container { display: none }` — оно скрывает
   все TV-виджеты во вкладках. Переопределяем с большей специфичностью только для tab-content. */
.tab-content .tradingview-widget-container,
body .tab-content .tradingview-widget-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* === Пункт 3: Compare-mode кнопка === */
.tool-app .lc-compare-btn {
    position: relative;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(149, 206, 90, 0.3);
    color: #d1d4dc;
    cursor: pointer;
    border-radius: var(--tool-radius-sm, 6px);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    transition: all 0.2s ease;
}
.tool-app .lc-compare-btn:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.6);
    color: #f59e0b;
}
.lc-compare-btn__label {
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    background: #f59e0b;
    color: #131722;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
    /* Скрываем compare-кнопку на mobile (требует точного ввода тикера) */
    .tool-app .lc-compare-btn { display: none !important; }
}

/* === Пункт 4: Drawing auto-levels кнопка === */
.pro-chart-wrapper .lct-draw-btn.lct-draw-auto {
    color: #f59e0b;
    font-size: 14px;
}
.pro-chart-wrapper .lct-draw-btn.lct-draw-auto:hover {
    background: rgba(245, 158, 11, 0.18);
    border-color: #f59e0b;
    color: #fff;
}

/* === Compare chips: список сравниваемых активов с × для удаления === */
.lc-compare-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 8px;
    vertical-align: middle;
}
.lc-compare-chips[hidden] { display: none; }
.lc-compare-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px 3px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 999px;
    font-family: var(--tool-font-mono, 'Fira Code', monospace);
    font-size: 10px;
    font-weight: 600;
    color: #e8eaed;
    line-height: 1;
    transition: background 0.15s ease;
}
.lc-compare-chip:hover {
    background: rgba(245, 158, 11, 0.1);
}
.lc-compare-chip > i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lc-compare-chip > button {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}
.lc-compare-chip > button:hover {
    background: rgba(239, 83, 80, 0.25);
    color: #ef5350;
}

/* iOS: поля <16px вызывают авто-зум при фокусе — поднимаем на мобиле */
@media (max-width: 1023px) {
    .lct-picker__input, .pc-modal__input { font-size: 16px !important; }
}