/* ============================================================
   Живой график по правилам R (LC_R_2026_10_12).
   Часть 1 — css/live-chart.css, преобразованный test/build_css.py (размеры от 13 px, без прописных,
   разрядки и Fira Code, без теней и свечения, цвета и скругления R). Часть 2 — оболочка и поправки (shell_r.css).
   Прежний css/live-chart.css не удалён: откат — вернуть шаблон из бэкапа.
   ============================================================ */
/* ============================================================
   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(255,255,255,.12);
    color: #b3b9c2;
    cursor: pointer;
    border-radius: var(--tool-radius-sm, 6px);
    font-size: 13px;
    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(244,63,94, 0.18);
    border-color: rgba(244,63,94, 0.6);
    color: #f43f5e;
    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(255,255,255,.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, #1f2630);
    background: rgba(255, 255, 255, 0.04);
    color: var(--tool-text-secondary, #b3b9c2);
    border-radius: var(--tool-radius-sm, 6px);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    line-height: 1}
.pro-chart-wrapper .lct-draw-btn:hover {
    border-color: rgba(255,255,255,.12);
    color: var(--tool-accent, #95ce5a);
    background: rgba(255,255,255,.06)}
.pro-chart-wrapper .lct-draw-btn.active {
    background: var(--tool-accent, #95ce5a);
    color: #0a0d12;
    border-color: var(--tool-accent, #95ce5a);
    box-shadow: none}
.pro-chart-wrapper .lct-draw-btn.lct-draw-eraser:hover,
.pro-chart-wrapper .lct-draw-btn.lct-draw-eraser.active {
    background: #b3b9c2;
    color: #0a0d12;
    border-color: #b3b9c2}
.pro-chart-wrapper .lct-draw-btn.lct-draw-clear { color: #f43f5e; font-size: 18px}
.pro-chart-wrapper .lct-draw-btn.lct-draw-clear:hover {
    border-color: #f43f5e;
    color: #fff;
    background: #f43f5e}

/* 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, #1f2630);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tool-text-secondary, #b3b9c2);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.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(255,255,255,.12); color: var(--tool-accent, #95ce5a)}
.pro-chart-wrapper .lct-ind-chip:has(input:checked) {
    background: rgba(255,255,255,.06);
    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, #1f2630);
    background: #121820;
    color: #e8eaed;
    border-radius: var(--tool-radius-sm, 6px);
    font-size: 13px;
    cursor: pointer;
    font-family: var(--tool-font-body, 'IBM Plex 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: #121820 !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, #1f2630);
    background: #0a0d12;
    border-radius: 0 0 var(--tool-radius-md, 8px) var(--tool-radius-md, 8px);
    overflow: hidden;
    position: relative}
.tool-app .lct-subpane-container *:where(:not(.lcd-ui):not(.lcd-ui *)) {
    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(10, 13, 18, 0.75);
    border: 1px solid var(--tool-border, #1f2630);
    border-radius: 6px;
    font-size: 13px;
    color: var(--tool-text-secondary, #b3b9c2);
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.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, 'IBM Plex Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--tool-text-secondary, #b3b9c2);
    letter-spacing: 0;
    text-transform: none}
.pro-chart-wrapper .lc-kpi-section__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    color: var(--tool-text-muted, #949ca7)}
.pro-chart-wrapper .lc-kpi-section__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #95ce5a;
    box-shadow: none;
    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: var(--tool-bg-card, #121820);
    border-radius: var(--tool-radius-lg, 8px);
    overflow: hidden;
    height: 130px;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    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, 'IBM Plex Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--tool-text-primary, #fff);
    letter-spacing: 0}

.pro-chart-wrapper .lc-kpi-card__ticker {
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--tool-text-muted, #949ca7);
    text-transform: none;
    letter-spacing: 0}

.pro-chart-wrapper .lc-kpi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--tool-radius-lg, 8px);
    padding: 1px;
    background: rgba(149, 206, 90, 0.32);
    -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: none}

.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: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--tool-text-primary, #fff);
    letter-spacing: 0;
    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: #95ce5a;
    text-shadow: none;
    animation: lcPriceFlashUp 0.9s ease-out}
.pro-chart-wrapper .lc-kpi-card__price.is-flash-down {
    color: #f43f5e;
    text-shadow: none;
    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: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--tool-text-muted, #949ca7);
    letter-spacing: 0;
    pointer-events: none}
.pro-chart-wrapper .lc-kpi-card__change.is-up   { color: #95ce5a}
.pro-chart-wrapper .lc-kpi-card__change.is-down { color: #f43f5e}

/* Спарклайн 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, #949ca7)}
.pro-chart-wrapper .lc-kpi-card.lc-kpi-error .lc-kpi-card__price  { color: var(--tool-text-muted, #949ca7)}

/* Табы категорий: 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(255,255,255,.12)}

.pro-chart-wrapper .lc-cat-tab {
    padding: 7px 16px;
    border-radius: 6px;
    border: 1px solid var(--tool-border, #1f2630);
    background: transparent;
    color: var(--tool-text-muted, #949ca7);
    font-family: var(--tool-font-body, 'IBM Plex 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(255,255,255,.12)}

.pro-chart-wrapper .lc-cat-tab.active {
    background: rgba(255,255,255,.06);
    border-color: var(--tool-accent, #95ce5a);
    color: var(--tool-accent, #95ce5a);
    box-shadow: none}

/* Скрытие инструментов при фильтре */
.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: 13px !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(10, 13, 18, 0.78);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255,255,255,.12);
    border-radius: 0 0 8px 8px;
    border-top: none;
    box-shadow: none;
    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: 13px !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: 13px !important;
        min-height: 38px;
        border-radius: 6px !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 8px 8px}
    .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: 13px !important;
        padding: 2px 6px !important}
    /* В sticky уменьшаем кнопки nav и иконку (компактно но видно) */
    .pro-chart-wrapper .chart-header.is-stuck .nav-btn {
        padding: 5px 9px !important;
        font-size: 13px !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, #949ca7);
    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(255,255,255,.12) !important;
    border-radius: var(--tool-radius-sm, 6px) !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, 'IBM Plex 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(12, 15, 21, 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, #949ca7);
    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(244,63,94, 0.18);
    color: #f43f5e}
.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(12, 15, 21, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--tool-radius-md, 8px);
    box-shadow: none;
    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, 6px);
    cursor: pointer;
    transition: background 0.12s ease}
.pro-chart-wrapper .lc-search__item:hover,
.pro-chart-wrapper .lc-search__item--active {
    background: rgba(255,255,255,.06)}
.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, 'IBM Plex 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: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    color: var(--tool-text-muted, #949ca7);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap}
.pro-chart-wrapper .lc-search__empty {
    list-style: none;
    padding: 12px 14px;
    color: var(--tool-text-muted, #949ca7);
    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, #0a0d12) !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: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--tool-text-muted, #949ca7);
    margin-left: 10px;
    letter-spacing: 0;
    text-transform: none}
.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(255,255,255,.12);
    border-radius: var(--tool-radius-sm, 6px);
    color: var(--tool-text-secondary, #b3b9c2);
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    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(255,255,255,.12);
    background: rgba(255,255,255,.06)}
.lc-tf-bar .lc-tf-btn--active {
    background: rgba(255,255,255,.06);
    border-color: var(--tool-accent, #95ce5a);
    color: var(--tool-accent, #95ce5a);
    box-shadow: none}

/* 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: #0a0d12;
    border-radius: var(--tool-radius-md, 8px);
    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):where(:not(.lcd-ui):not(.lcd-ui *)) {
    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, #949ca7);
    font-family: var(--tool-font-body, 'IBM Plex 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(12, 15, 21, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    color: var(--tool-text-secondary, #b3b9c2);
    font-family: var(--tool-font-body, 'IBM Plex Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    z-index: 20;
    box-shadow: none;
    pointer-events: none;
    animation: lcLoadingFade 0.2s ease}
.lc-chart-loading__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.12);
    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(12, 15, 21, 0.6);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--tool-text-muted, #949ca7);
    pointer-events: none;
    user-select: none;
    line-height: 1;
    letter-spacing: 0}
.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: #95ce5a;
    border-color: rgba(255,255,255,.12)}
.lc-data-badge--live .lc-data-badge__dot {
    box-shadow: none;
    animation: lcLivePulse 1.6s ease-in-out infinite}

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

.lc-data-badge--tv {
    color: var(--tool-blue, #787b86);
    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(12, 15, 21, 0.6);
    border: 1px solid rgba(156, 163, 175, 0.35);
    border-radius: 6px;
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--tool-text-muted, #949ca7);
    cursor: help;
    user-select: none;
    line-height: 1;
    letter-spacing: 0}
.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: 13px;
        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: none;
    -webkit-backdrop-filter: none;
    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(12, 15, 21, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--tool-radius-lg, 8px);
    padding: 22px;
    z-index: 10000;
    box-shadow: none;
    color: var(--tool-text-primary, #fff);
    font-family: var(--tool-font-body, 'IBM Plex 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: 600;
    color: var(--tool-text-primary, #fff)}

.pc-modal__input {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--tool-bg-main, #0a0d12);
    border: 1px solid var(--tool-border, #1f2630);
    border-radius: var(--tool-radius-sm, 8px);
    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, #949ca7);
    font-size: 13px;
    line-height: 1.55;
    margin: 12px 0 18px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--tool-radius-sm, 8px)}

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

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

.pc-modal__btn {
    flex: 1;
    padding: 11px 16px;
    border: none;
    border-radius: var(--tool-radius-sm, 8px);
    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: var(--tool-accent, #95ce5a);
    color: #1a1d24;
    box-shadow: none}
.pc-modal__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: none}

.pc-modal__btn--secondary {
    background: var(--tool-bg-hover, #171f29);
    color: var(--tool-text-secondary, #b3b9c2)}
.pc-modal__btn--secondary:hover {
    background: var(--tool-bg-tertiary, #18202a);
    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, #0a0d12);
    --chart-darker-bg: var(--tool-bg-card, #141a23);
    --chart-border-color: var(--tool-border, #1f2630);
    --chart-accent-color: var(--tool-accent, #95ce5a);
    --chart-secondary-accent: var(--tool-blue, #787b86);
    --chart-text-light: var(--tool-text-secondary, #b3b9c2);
    --chart-text-lighter: var(--tool-text-primary, #fff);
    --chart-text-muted: var(--tool-text-muted, #949ca7);
    --chart-status-active: var(--tool-success, #95ce5a);
    --chart-status-warning: var(--tool-warning, #b3b9c2);
    --chart-status-danger: var(--tool-danger, #f43f5e);
    --chart-gold: #b3b9c2}

/* Контейнер страницы - ПОЛНАЯ ШИРИНА */
.pro-chart-wrapper {
    background: var(--chart-darker-bg);
    margin: -10px calc(-50vw + 50%) 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100vw !important;
    font-family: var(--tool-font-body, 'IBM Plex 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, 8px);
    padding: 20px;
    margin-bottom: 10px;
    box-shadow: none;
    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: 600;
    color: var(--chart-text-lighter);
    margin: 0;
    display: inline-block}

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

.live-badge {
    background: var(--chart-accent-color);
    color: #000;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    animation: pulse 2s infinite;
    white-space: nowrap}

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

.status-indicator.active {
    background: rgba(255,255,255,.06);
    color: var(--chart-status-active)}

.status-indicator.closed {
    background: rgba(244,63,94, 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(255,255,255,.12) !important;
    color: #fff !important;
    cursor: pointer !important;
    border-radius: var(--tool-radius-sm, 6px) !important;
    font-size: 13px !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, 'IBM Plex 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: 13px !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: none !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(255,255,255,.12) !important;
    color: #fff !important;
    cursor: pointer !important;
    border-radius: var(--tool-radius-sm, 6px) !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, 'IBM Plex 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: none !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, 8px) !important;
    padding: 20px !important;
    margin-bottom: 25px !important;
    box-shadow: none !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: 600 !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, 'IBM Plex 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 (общий класс).
       В тёмной теме иногда становится #141a23 — всё равно убираем. */
    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: #f43f5e;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease}

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

.add-symbol-btn {
    background: rgba(255,255,255,.06) !important;
    border: 1px dashed rgba(255,255,255,.12) !important}

.add-symbol-btn:hover {
    background: rgba(255,255,255,.06) !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: 6px;
    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,
.widget-box.fullscreen .lc-chart-container {
    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(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    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: #95ce5a;
    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: none}

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

.scroll-to-top:hover {
    transform: translateY(-3px);
    box-shadow: none}

.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: 6px}
    
    .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: 13px;
        padding: 3px 8px;
        margin: 0}
    
    .live-badge {
        font-size: 13px;
        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: 13px !important;
        border-radius: 6px !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: 13px !important;
        flex: none !important}
    
    /* Виджет боксы */
    .pro-chart-wrapper .widget-box {
        padding: 15px !important;
        border-radius: 6px !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: 600 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 50%}
    .pro-chart-wrapper .widget-header .lc-chart-subtitle {
        font-size: 13px !important;
        margin-left: 0 !important;
        letter-spacing: 0 !important}
    .pro-chart-wrapper .widget-header .lc-data-badge {
        font-size: 13px !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,
    .widget-box.fullscreen .lc-chart-container {
        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: 13px !important;
        padding: 8px 4px !important}
    
    .pro-chart-wrapper .nav-btn {
        font-size: 13px !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: #0a0d12;
    border: 1px solid var(--tool-border, #1f2630);
    border-radius: var(--tool-radius-md, 8px);
    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(10, 13, 18, 0.85);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #95ce5a;
    letter-spacing: 0}
.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(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #95ce5a;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    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: none;
    -webkit-backdrop-filter: none}
.lct-picker__box {
    position: relative;
    width: 100%; max-width: 480px;
    background: #121820;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--tool-radius-lg, 8px);
    box-shadow: none;
    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(255,255,255,.12)}
.lct-picker__title {
    font-family: var(--tool-font-body, 'IBM Plex 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: #949ca7;
    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(244,63,94, 0.15);
    border-color: #f43f5e;
    color: #f43f5e}
.lct-picker__search-row {
    position: relative;
    padding: 12px 14px 8px}
.lct-picker__search-ico {
    position: absolute;
    top: 50%; left: 26px;
    transform: translateY(-50%);
    color: #949ca7;
    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(255,255,255,.12) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-family: var(--tool-font-body, 'IBM Plex 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(255,255,255,.06) !important}
.lct-picker__input::placeholder { color: #949ca7}
.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(255,255,255,.12) 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(255,255,255,.06);
    transform: translateX(2px)}
.lct-picker__cat {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    font-size: 13px; font-weight: 600;
    color: #95ce5a;
    text-transform: none}
.lct-picker__lbl {
    font-family: var(--tool-font-body, 'IBM Plex Sans', sans-serif);
    font-size: 13px; font-weight: 600;
    color: #e8eaed}
.lct-picker__tic {
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    color: #949ca7;
    background: rgba(255,255,255,0.04);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08)}
.lct-picker__empty {
    padding: 30px 14px;
    text-align: center;
    color: #949ca7;
    font-size: 13px}
@media (max-width: 480px) {
    .lct-picker-modal { padding: 0; align-items: flex-end}
    .lct-picker__box {
        max-width: none;
        border-radius: 8px 8px 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(255,255,255,.12);
    color: #b3b9c2;
    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(255,255,255, 0.12);
    border-color: rgba(255,255,255, 0.6);
    color: #b3b9c2}
.lc-compare-btn__label {
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    background: #b3b9c2;
    color: #0a0d12;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    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: #b3b9c2;
    font-size: 14px}
.pro-chart-wrapper .lct-draw-btn.lct-draw-auto:hover {
    background: rgba(255,255,255, 0.18);
    border-color: #b3b9c2;
    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(255,255,255, 0.35);
    border-radius: 6px;
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #e8eaed;
    line-height: 1;
    transition: background 0.15s ease}
.lc-compare-chip:hover {
    background: rgba(255,255,255, 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: #949ca7;
    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(244,63,94, 0.25);
    color: #f43f5e}

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

/* === Share + PNG-снимок + чип «обзор актива» + пресеты алертов (04.07.2026) === */
.tool-app .lc-share-btn,
.tool-app .lc-snap-btn {
    position: relative;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255,255,255,.12);
    color: #b3b9c2;
    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-share-btn:hover,
.tool-app .lc-snap-btn:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(149, 206, 90, 0.6);
    color: #95ce5a}
@media (max-width: 768px) {
    /* Снимок PNG на мобиле малополезен (нет курсора для разметки) — оставляем только share */
    .tool-app .lc-snap-btn { display: none !important}
}

.pro-chart-wrapper .lc-asset-review {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 2px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: #a6d873;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease}
.pro-chart-wrapper .lc-asset-review:hover {
    background: rgba(255,255,255,.06);
    color: #d3f7a9}
.pro-chart-wrapper .lc-asset-review__arrow { opacity: .7}

/* Ряд действий под графиком: обзор актива (вторичное) + маршрут к покупке (первичное) */
/* display у класса перебивает атрибут hidden — без этого скрытый чип остаётся на экране
   с адресом и текстом от прошлого актива. Касается и «Обзора актива». */
.pro-chart-wrapper .lc-asset-review[hidden],
.pro-chart-wrapper .lc-asset-buy[hidden],
.pro-chart-wrapper .lc-asset-note[hidden] { display: none !important}

.pro-chart-wrapper .lc-asset-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 10px 0 2px}
.pro-chart-wrapper .lc-asset-actions .lc-asset-review { margin: 0}
.pro-chart-wrapper .lc-asset-buy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background: #95ce5a;
    color: #080b0f;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease}
.pro-chart-wrapper .lc-asset-buy:hover,
.pro-chart-wrapper .lc-asset-buy:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(149, 206, 90, .32);
    color: #080b0f}
.pro-chart-wrapper .lc-asset-buy__arrow { opacity: .75}
.pro-chart-wrapper .lc-asset-note {
    font-size: 13px;
    color: rgba(255, 255, 255, .42)}
@media (max-width: 768px) {
    .pro-chart-wrapper .lc-asset-buy { min-height: 44px}
}
@media (prefers-reduced-motion: reduce) {
    .pro-chart-wrapper .lc-asset-buy { transition: none}
    .pro-chart-wrapper .lc-asset-buy:hover { transform: none}
}

.lc-alert-presets {
    display: flex;
    gap: 6px;
    margin-top: 8px}
.lc-alert-preset {
    flex: 1;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s}
.lc-alert-preset:hover {
    border-color: rgba(255,255,255,.12);
    color: #a6d873;
    background: rgba(255,255,255,.06)}

/* === Модалка ценовых алертов (перенесено из inline page-live-chart.php 04.07.2026) === */
.lc-alert-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;color:#95ce5a}
            .lc-alert-btn__count{position:absolute;top:-4px;right:-6px;min-width:15px;height:15px;padding:0 3px;border-radius:6px;background:#95ce5a;color:#0b0e13;font-size:13px;font-weight:600;line-height:15px;text-align:center}
            .lc-alert-modal{max-width:440px}
            .lc-alert-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
            .lc-alert-head .pc-modal__title{margin:0}
            .lc-alert-x{background:transparent;border:0;color:rgba(255,255,255,.55);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
            .lc-alert-x:hover{color:#fff}
            .lc-alert-asset{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
            .lc-alert-asset__name{font-weight:600;font-size:15px;color:#e8edf4}
            .lc-alert-asset__price{font-weight:600;font-size:18px;color:#95ce5a;font-variant-numeric:tabular-nums}
            .lc-alert-tabs{display:flex;gap:6px;margin-bottom:12px}
            .lc-alert-tab{flex:1;padding:9px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:rgba(255,255,255,.7);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
            .lc-alert-tab--active{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#a6d873}
            .lc-alert-pane{margin-bottom:10px}
            .lc-alert-sel{margin-bottom:8px}
            .lc-alert-target-row{display:flex;align-items:center;gap:8px}
            .lc-alert-target-row .pc-modal__input{margin-bottom:0;flex:1}
            .lc-alert-cur{color:rgba(255,255,255,.6);font-size:14px;font-weight:600;white-space:nowrap}
            .lc-alert-check{display:flex;align-items:flex-start;gap:9px;margin:9px 0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.72);cursor:pointer}
            /* Кастомный ВИДИМЫЙ чекбокс: тема ставит appearance:none без рамки/фона → нативный невидим на тёмном.
               !important — перебиваем тему в скоуп-компоненте. Пустой = рамка, выбран = зелёная заливка + галочка. */
            .lc-alert-check input[type=checkbox]{-webkit-appearance:none !important;appearance:none !important;width:18px !important;height:18px !important;flex-shrink:0;margin:1px 8px 0 0 !important;border:1.5px solid rgba(255,255,255,.45) !important;border-radius:6px !important;background:rgba(255,255,255,.05) !important;cursor:pointer;position:relative;box-sizing:border-box;transition:border-color .15s,background .15s}
            .lc-alert-check input[type=checkbox]:hover{border-color:rgba(149,206,90,.8) !important}
            .lc-alert-check input[type=checkbox]:checked{background:#95ce5a !important;border-color:#95ce5a !important}
            .lc-alert-check input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;border:solid #0b0e13;border-width:0 2px 2px 0;transform:rotate(45deg)}
            /* тема красит «label span» в синий (#2e40b3) — возвращаем наследование от label */
            .lc-alert-check span{color:inherit}
            .lc-alert-check a{color:#95ce5a}
            .lc-alert-consent{color:rgba(255,255,255,.55);font-size:13px}
            /* тема стилизует input[type=email] шире, чем .pc-modal__input → ID-селектор возвращает 100% (фикс переполнения на мобиле) */
            #lc-alert-email{margin-top:6px;width:100%;max-width:100%;box-sizing:border-box}
            .lc-alert-modal input,.lc-alert-modal select{max-width:100%;box-sizing:border-box}
            .lc-alert-msg{margin-top:10px;font-size:13px;min-height:1px}
            .lc-alert-msg--ok{color:#95ce5a}
            .lc-alert-msg--err{color:#ff6b6b}
            .lc-alert-mylist{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
            .lc-alert-mylist__h{font-size:13px;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.45);margin-bottom:8px}
            .lc-alert-mylist__ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto}
            .lc-alert-mylist__ul li{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:8px 10px;font-size:13px;color:#dfe6ee}
            .lc-alert-mylist__cond{flex:1;min-width:0}
            .lc-alert-mylist__cond b{color:#fff}
            .lc-alert-mylist__tag{font-size:13px;color:rgba(255,255,255,.45)}
            .lc-alert-mylist__del{background:transparent;border:0;color:rgba(255,255,255,.4);font-size:18px;line-height:1;cursor:pointer;padding:0 2px;flex-shrink:0}
            .lc-alert-mylist__del:hover{color:#ff6b6b}


/* ============================================================
   FIX 2026-07-07: neutralize theme table accent
   Тема добавляет всем контентным <table> зелёный ::before/::after
   акцент (linear-gradient #95ce5a). LWC верстает панели графика
   через <table> -> акцент протекал полосой поверх графика/объёма.
   #chart-widget-box (id) выигрывает по специфичности. Аналог .bhcp-chart fix.
   ============================================================ */
#chart-widget-box table::before,  #chart-widget-box table::after,
#chart-widget-box tr::before,     #chart-widget-box tr::after,
#chart-widget-box td::before,     #chart-widget-box td::after,
#chart-widget-box thead::before,  #chart-widget-box thead::after,
#chart-widget-box tbody::before,  #chart-widget-box tbody::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    height: 0 !important}


/* FIX 2026-07-07: live-badge state colors — верхний бейдж отражает реальную свежесть актива:
   LIVE (зелёный, пульс, база) / 15 МИН (amber) / ЗАКРЫТО (red). Amber #ff9800
   совпадает с .lc-data-badge--delayed для единой семантики. */
.live-badge.is-delayed {
    background: #b3b9c2;
    color: #1a1400;
    animation: none}
.live-badge.is-closed {
    background: #f43f5e;
    color: #fff;
    animation: none}


/* ============================================================
   FIX 2026-07-07b: compact header (tf in widget-header)
   Таймфреймы перенесены в шапку виджета (пустой центр); инструменты
   рисования остаются видимыми; вертикальное уплотнение верхней зоны.
   ============================================================ */
.pro-chart-wrapper .widget-header { justify-content: flex-start !important; gap: 8px 14px !important; flex-wrap: wrap !important}
.pro-chart-wrapper .widget-header .widget-actions { margin-left: auto !important}
.pro-chart-wrapper .widget-header #lc-tf-bar { padding: 0 !important; margin: 0 !important}
.pro-chart-wrapper .widget-header #lc-tf-bar .lc-tf-btn { padding: 4px 11px}
/* вертикальное уплотнение */
.pro-chart-wrapper .chart-header { padding: 14px 20px !important}
.pro-chart-wrapper .chart-title-row { gap: 10px 15px !important}
.pro-chart-wrapper .widget-header { margin-bottom: 10px !important; padding-bottom: 8px !important}
.pro-chart-wrapper .lct-toolbar { margin: 2px 0 6px !important; padding: 6px 0 !important}
/* Мобила: ТФ на своей строке внутри widget-header (как раньше отдельный ряд) */
@media (max-width: 768px) {
    .pro-chart-wrapper .widget-header #lc-tf-bar { flex-basis: 100%; order: 3; margin-top: 6px !important}
}


/* ============================================================
   FIX 2026-07-07c: PROTO 2 - vertical rail + indicators dropdown + unified navbar
   ============================================================ */
/* Nav: чистая раскладка как в оригинале (титул+поиск ряд1, табы ряд2), только компактнее титул */
.pro-chart-wrapper .chart-navbar .chart-title { font-size: 20px !important}

/* session badge у символа */
.pro-chart-wrapper .widget-title .status-indicator { margin-left: 2px; font-size: 13px; padding: 3px 10px}

/* Индикаторы: дропдаун в шапке виджета */
.pro-chart-wrapper .lct-ind-dd { position: relative}
.pro-chart-wrapper .lct-ind-toggle {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
    border: 1px solid var(--tool-border, #1f2630); background: rgba(255,255,255,.03);
    border-radius: 8px; color: var(--tool-text-secondary, #b3b9c2); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .15s ease; white-space: nowrap}
.pro-chart-wrapper .lct-ind-toggle:hover { border-color: rgba(255,255,255,.12); color: var(--tool-accent, #95ce5a)}
.pro-chart-wrapper .lct-ind-toggle.is-active { background: rgba(255,255,255,.06); border-color: var(--tool-accent, #95ce5a); color: var(--tool-accent, #95ce5a)}
.pro-chart-wrapper .lct-ind-toggle svg { display: block}
.pro-chart-wrapper .lct-ind-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    background: #10151d; border: 1px solid var(--tool-border, #1f2630); border-radius: 8px;
    padding: 12px; box-shadow: none;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: min(380px, 82vw)}
.pro-chart-wrapper .lct-ind-pop[hidden] { display: none}
.pro-chart-wrapper .lct-ind-pop .lct-toolbar__group--ind { margin-left: 0 !important; display: flex; flex-wrap: wrap; gap: 8px}

/* Вертикальный рельс рисования + график в один ряд */
.pro-chart-wrapper .lct-chart-row { display: flex; align-items: stretch; gap: 0}
.pro-chart-wrapper .lct-rail {
    flex: none; padding: 6px; background: #10151d;
    border: 1px solid var(--tool-border, #1f2630); border-right: none;
    border-radius: var(--tool-radius-md,8px) 0 0 var(--tool-radius-md,8px)}
.pro-chart-wrapper .lct-rail .lct-toolbar__group { flex-direction: column; flex-wrap: nowrap; gap: 5px; margin: 0}
.pro-chart-wrapper .lct-rail .lct-draw-btn { width: 34px; height: 32px}
.pro-chart-wrapper .lct-chart-row #lc-chart-container {
    flex: 1 1 auto; min-width: 0;
    border-radius: 0 var(--tool-radius-md,8px) var(--tool-radius-md,8px) 0 !important}

/* Fullscreen: рельс+график на весь экран */
.widget-box.fullscreen .lct-chart-row { height: calc(100vh - 60px) !important}
.widget-box.fullscreen .lct-chart-row #lc-chart-container { height: 100% !important}
.widget-box.fullscreen .lct-rail { border-radius: 0 !important}

/* Мобила: рельс и дропдаун индикаторов скрыты */
@media (max-width: 768px) {
    .pro-chart-wrapper .lct-rail { display: none !important}
    .pro-chart-wrapper .lct-ind-dd { display: none !important}
    .pro-chart-wrapper .lct-chart-row #lc-chart-container { border-radius: var(--tool-radius-md,8px) !important}
}


/* FIX 2026-07-07d: search height aligned to tabs — поиск в нав-баре по высоте вровень с табами */
.pro-chart-wrapper .chart-navbar .lc-search { align-self: center}
.pro-chart-wrapper .chart-navbar .lc-search__input,
.pro-chart-wrapper .chart-navbar input.lc-search__input {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.35 !important}


/* FIX 2026-07-07e: search input exact tab height */
.pro-chart-wrapper .chart-navbar .lc-search { padding: 0 !important; min-height: 0 !important}
.pro-chart-wrapper .chart-navbar .lc-search__input,
.pro-chart-wrapper .chart-navbar input.lc-search__input { height: 34px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 32px !important}


/* FIX 2026-07-07f: kill search input margin — глобальный margin у input сбивал вертикаль по табам */
.pro-chart-wrapper .chart-navbar .lc-search__input,
.pro-chart-wrapper .chart-navbar input.lc-search__input { margin: 0 !important}


/* FIX 2026-07-07g: alert bell prominent — колокольчик алертов заметнее: акцентный зелёный бокс */
.pro-chart-wrapper .lc-alert-btn { padding: 6px 11px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(149,206,90,0.6) !important; border-radius: var(--tool-radius-sm,6px) !important; color: #95ce5a !important; transition: all .2s ease !important}
.pro-chart-wrapper .lc-alert-btn:hover { background: rgba(149,206,90,0.26) !important; border-color: #95ce5a !important; box-shadow: none !important}
.pro-chart-wrapper .lc-alert-btn svg { width: 19px !important; height: 19px !important}


/* FIX 2026-07-07h: flat hero header — убираем ободок-карточку у шапки (герой = график); sticky-режим сохраняет фон/блюр */
.pro-chart-wrapper .chart-header:not(.is-stuck) {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px 20px 10px !important;
    margin-bottom: 6px !important}


/* FIX 2026-07-07i: flat stuck bar — залипшая шапка тоже плоская (без скруглённого ободка) */
.pro-chart-wrapper .chart-header.is-stuck { border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important}

/* ==========================================================================
   BH_POSITION_2026_08_06 — панель «Расчёт позиции»
   Пристыковывается справа от графика, зеркально левому рельсу инструментов.
   Палитра: токены системы + торговые цвета графика (#ef5350 стоп, #26a69a цель),
   чтобы панель и линии на графике читались как один объект.
   Числа — моноширинным Fira Code с табличными знаками.
   Селекторы усилены и местами с !important: тема задаёт свои поля ввода и ссылки.
   ========================================================================== */

.pro-chart-wrapper .lcp-panel {
    flex: 0 0 300px;
    width: 300px;
    box-sizing: border-box;
    background: var(--tool-bg-sidebar, #10151d);
    border: 1px solid var(--tool-border, #1f2630);
    border-left: none;
    border-radius: 0 var(--tool-radius-md, 8px) var(--tool-radius-md, 8px) 0;
    padding: 14px 16px 16px;
    overflow-y: auto;
    font-family: var(--tool-font-body, inherit)}

.pro-chart-wrapper .lct-chart-row.has-lcp #lc-chart-container { border-radius: 0 !important}

.pro-chart-wrapper .lcp-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 14px}
.pro-chart-wrapper .lcp-title {
    margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0;
    color: var(--tool-text-primary, #b3b9c2)}
.pro-chart-wrapper .lcp-close {
    flex: none; width: 26px; height: 26px; line-height: 1; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent !important;
    border: 1px solid var(--tool-border, #1f2630);
    border-radius: var(--tool-radius-sm, 6px);
    color: var(--tool-text-muted, #787b86) !important; font-size: 17px; cursor: pointer;
    transition: color .15s, border-color .15s}
.pro-chart-wrapper .lcp-close:hover {
    color: var(--tool-text-primary, #b3b9c2) !important;
    border-color: var(--tool-text-muted, #787b86)}

.pro-chart-wrapper .lcp-field { margin-bottom: 12px}
.pro-chart-wrapper .lcp-lab {
    display: block; margin-bottom: 5px;
    font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--tool-text-muted, #787b86)}
.pro-chart-wrapper .lcp-inline { display: flex; align-items: stretch; gap: 6px}

/* тема красит поля ввода в светлое — перебиваем адресно */
.pro-chart-wrapper .lcp-panel input.lcp-inp {
    flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; margin: 0;
    background: var(--tool-bg-main, #0a0d12) !important;
    border: 1px solid var(--tool-border, #1f2630) !important;
    border-radius: var(--tool-radius-sm, 6px) !important;
    color: var(--tool-text-primary, #b3b9c2) !important;
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
    font-size: 14px; line-height: 32px;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important}
.pro-chart-wrapper .lcp-panel input.lcp-inp::placeholder { color: var(--tool-text-muted, #787b86)}
.pro-chart-wrapper .lcp-panel input.lcp-inp:focus,
.pro-chart-wrapper .lcp-panel input.lcp-inp:focus-visible {
    outline: 2px solid var(--tool-accent, #95ce5a); outline-offset: 1px;
    border-color: transparent !important}
.pro-chart-wrapper .lcp-panel input.lcp-inp--risk { color: #ef5350 !important}

.pro-chart-wrapper .lcp-unit {
    flex: none; display: flex; align-items: center; padding: 0 8px;
    color: var(--tool-text-muted, #787b86);
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size: 13px}

.pro-chart-wrapper .lcp-pick {
    flex: none; width: 34px; height: 34px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--tool-bg-main, #0a0d12) !important;
    border: 1px solid var(--tool-border, #1f2630);
    border-radius: var(--tool-radius-sm, 6px);
    color: var(--tool-text-muted, #787b86) !important; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s}
.pro-chart-wrapper .lcp-pick:hover { color: var(--tool-text-primary, #b3b9c2) !important}
.pro-chart-wrapper .lcp-pick.is-armed {
    color: var(--tool-accent, #95ce5a) !important;
    border-color: var(--tool-accent, #95ce5a);
    background: rgba(var(--tool-accent-rgb, 149,206,90), .12) !important}
.pro-chart-wrapper .lcp-pick:focus-visible { outline: 2px solid var(--tool-accent, #95ce5a); outline-offset: 1px}

.pro-chart-wrapper .lcp-chips { display: flex; gap: 5px; margin-top: 6px}
.pro-chart-wrapper .lcp-chip {
    flex: 1 1 auto; height: 26px; padding: 0 4px;
    background: var(--tool-bg-main, #0a0d12) !important;
    border: 1px solid var(--tool-border, #1f2630);
    border-radius: var(--tool-radius-sm, 6px);
    color: var(--tool-text-secondary, #b2bec3) !important;
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size: 13px; cursor: pointer;
    transition: color .15s, border-color .15s}
.pro-chart-wrapper .lcp-chip.is-on {
    color: var(--tool-accent, #95ce5a) !important; border-color: var(--tool-accent, #95ce5a)}
.pro-chart-wrapper .lcp-chip:focus-visible { outline: 2px solid var(--tool-accent, #95ce5a); outline-offset: 1px}

.pro-chart-wrapper .lcp-sep { height: 1px; background: var(--tool-border, #1f2630); margin: 14px 0}

.pro-chart-wrapper .lcp-snap {
    width: 100%; margin-top: 6px; padding: 7px 8px;
    background: transparent !important;
    border: 1px dashed var(--tool-border, #1f2630);
    border-radius: var(--tool-radius-sm, 6px);
    color: var(--tool-text-secondary, #b2bec3) !important; font-size: 13px; cursor: pointer;
    transition: color .15s, border-color .15s}
.pro-chart-wrapper .lcp-snap:hover {
    color: var(--tool-accent, #95ce5a) !important; border-color: var(--tool-accent, #95ce5a)}
.pro-chart-wrapper .lcp-snap:focus-visible { outline: 2px solid var(--tool-accent, #95ce5a); outline-offset: 1px}

/* Главный блок: сначала деньги, потом объём. Красный тот же, что у линии стопа. */
.pro-chart-wrapper .lcp-out {
    margin: 14px 0 12px; padding: 13px 14px;
    background: var(--tool-bg-main, #0a0d12);
    border: 1px solid var(--tool-border, #1f2630);
    border-left: 3px solid #ef5350;
    border-radius: var(--tool-radius-sm, 6px)}
.pro-chart-wrapper .lcp-out__lab {
    margin: 0 0 4px; font-size: 13px; font-weight: 600;
    text-transform: none; letter-spacing: 0;
    color: var(--tool-text-muted, #787b86)}
.pro-chart-wrapper .lcp-out__big {
    margin: 0; font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 28px; line-height: 1.15; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tool-text-muted, #787b86);
    transition: color .2s}
.pro-chart-wrapper .lcp-out__big.is-live { color: #ef5350}
.pro-chart-wrapper .lcp-out__sub {
    margin: 6px 0 0; font-size: 13px; color: var(--tool-text-secondary, #b2bec3)}
.pro-chart-wrapper .lcp-out__num {
    font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--tool-text-primary, #b3b9c2)}

.pro-chart-wrapper .lcp-meta { margin: 0; display: flex; flex-direction: column; gap: 7px}
.pro-chart-wrapper .lcp-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px}
.pro-chart-wrapper .lcp-meta dt { font-size: 13px; color: var(--tool-text-muted, #787b86)}
.pro-chart-wrapper .lcp-meta dd {
    margin: 0; font-family: "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size: 13px;
    font-variant-numeric: tabular-nums; color: var(--tool-text-secondary, #b2bec3)}
.pro-chart-wrapper .lcp-meta dd#lcpTp { color: #26a69a}

.pro-chart-wrapper .lcp-hint {
    margin: 10px 0 0; padding: 7px 9px;
    background: rgba(var(--tool-accent-rgb, 149,206,90), .10);
    border-radius: var(--tool-radius-sm, 6px);
    font-size: 13px; color: var(--tool-accent, #95ce5a)}
.pro-chart-wrapper .lcp-note {
    margin: 10px 0 0; font-size: 13px; line-height: 1.45;
    color: var(--tool-text-muted, #787b86)}

/* тема красит подписи как ссылки — фиксируем цвет и возвращаем чекбоксу размер */
.pro-chart-wrapper .lcp-levels {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 0; padding-top: 12px;
    border-top: 1px solid var(--tool-border, #1f2630);
    font-size: 13px; cursor: pointer;
    color: var(--tool-text-secondary, #b2bec3) !important}
.pro-chart-wrapper .lcp-levels span { color: var(--tool-text-secondary, #b2bec3) !important}
.pro-chart-wrapper .lcp-levels:hover span { color: var(--tool-text-primary, #b3b9c2) !important}
.pro-chart-wrapper .lcp-levels input[type="checkbox"] {
    flex: none; width: 15px !important; height: 15px !important;
    min-width: 15px; margin: 0 !important; padding: 0 !important;
    -webkit-appearance: checkbox !important; appearance: checkbox !important;
    accent-color: var(--tool-accent, #95ce5a);
    opacity: 1 !important; position: static !important}

#lc-chart-container.lcp-picking { cursor: crosshair}

/* кнопка в шапке виджета */
.pro-chart-wrapper .lct-pos-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px;
    background: var(--tool-bg-main, #0a0d12) !important;
    border: 1px solid var(--tool-border, #1f2630);
    border-radius: var(--tool-radius-sm, 6px);
    color: var(--tool-text-secondary, #b2bec3) !important;
    font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: color .15s, border-color .15s}
.pro-chart-wrapper .lct-pos-toggle:hover { color: var(--tool-text-primary, #b3b9c2) !important}
.pro-chart-wrapper .lct-pos-toggle.is-on {
    color: var(--tool-accent, #95ce5a) !important; border-color: var(--tool-accent, #95ce5a)}
.pro-chart-wrapper .lct-pos-toggle:focus-visible { outline: 2px solid var(--tool-accent, #95ce5a); outline-offset: 1px}

/* Узкие экраны: панель уходит под график во всю ширину */
@media (max-width: 900px) {
    .pro-chart-wrapper .lct-chart-row { flex-wrap: wrap}
    .pro-chart-wrapper .lcp-panel {
        flex: 1 1 100%; width: 100%;
        border-left: 1px solid var(--tool-border, #1f2630);
        border-radius: 0 0 var(--tool-radius-md, 8px) var(--tool-radius-md, 8px);
        border-top: none; max-height: none}
    .pro-chart-wrapper .lct-chart-row.has-lcp #lc-chart-container {
        border-radius: var(--tool-radius-md, 8px) var(--tool-radius-md, 8px) 0 0 !important}
}

/* Нижний индикатор на мобильном создавался, но старое правило display:none
   скрывало готовый canvas. Показываем контейнер только когда JS явно включил
   его через inline display:block; при выборе «нет» он остаётся скрытым. */
@media (max-width: 768px) {
    .tool-app.pro-chart-wrapper .lct-subpane-container[style*="display: block"] {
        display: block !important;
        height: 120px}
}

@media (prefers-reduced-motion: reduce) {
    .pro-chart-wrapper .lcp-close,
    .pro-chart-wrapper .lcp-pick,
    .pro-chart-wrapper .lcp-chip,
    .pro-chart-wrapper .lcp-snap,
    .pro-chart-wrapper .lcp-out__big,
    .pro-chart-wrapper .lct-pos-toggle { transition: none}
}

/* ==========================================================================
   BH_LC_POLISH_2026_08_07
   1. Иконки рельса переведены с текстовых глифов на SVG (𝛗 выводился пустым
      квадратом, ⚡ — оранжевым эмодзи вопреки палитре).
   2. Панель расчёта позиции в полноэкранном режиме уходила за нижнюю границу окна.
   3. Мобильная шапка виджета занимала 161px против 420px графика — 28% блока.
   ========================================================================== */

/* --- 1. SVG вместо глифов в рельсе --------------------------------------- */
.pro-chart-wrapper .lct-rail .lct-draw-btn {
    display: flex; align-items: center; justify-content: center; padding: 0}
.pro-chart-wrapper .lct-draw-btn .lct-ico { display: block; flex: none}

/* --- 2. Панель в полноэкранном режиме ------------------------------------ */
.widget-box.fullscreen .lcp-panel {
    height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    border-radius: 0 !important;
    overflow-y: auto}
@media (max-width: 768px) {
    .widget-box.fullscreen .lcp-panel {
        height: auto !important;
        max-height: 42vh !important}
}

/* --- 3. Мобильная шапка: только скрытие дублирующего тикера ---------------
   Сжимать её НЕЛЬЗЯ: в файле есть сознательный аудит тач-целей (строка ~2218,
   «все интерактивные элементы ≥ 44×44px, Apple HIG / Material»). Высота 162px
   на 390px это три ряда корректных по размеру контролов, а не дефект. */
@media (max-width: 768px) {
    .pro-chart-wrapper .widget-header #lc-chart-subtitle { display: none !important}
    /* своя кнопка обязана соответствовать тому же стандарту */
    .pro-chart-wrapper .lct-pos-toggle { min-height: 44px !important; height: 44px !important}
}

/* ==========================================================================
   BH_LC_POLISH2_2026_08_07 — доводка после замеров
   1. Полноэкранный режим: ряд графика имел жёсткую высоту calc(100vh - 60px),
      но реально начинается на y=106 → низ уезжал на 46px за окно, и график
      обрезался снизу ВСЕГДА (не только с открытой панелью). Переводим на flex:
      блок занимает всю высоту окна, ряд забирает остаток.
   2. Мобильная шапка: блок иконок и таймфреймы держали по 44px.
   ========================================================================== */

.widget-box.fullscreen {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    box-sizing: border-box}
.widget-box.fullscreen .lct-chart-row {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important}
.widget-box.fullscreen .lct-chart-row #lc-chart-container,
.widget-box.fullscreen .lcp-panel {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important}
.widget-box.fullscreen .lcp-panel { overflow-y: auto}

/* промежуточный #single-chart-view не тянулся, из-за чего ряд не забирал высоту */
.widget-box.fullscreen #single-chart-view {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important}


/* BH_AUTO_BTN_PALETTE 07.08.2026: кнопка авто-уровней была амбер #f59e0b —
   оранжевый запрещён палитрой проекта. Переводим на бренд-акцент. */
.pro-chart-wrapper .lct-draw-btn.lct-draw-auto { color: var(--tool-accent, #95ce5a) !important}
.pro-chart-wrapper .lct-draw-btn.lct-draw-auto:hover {
    background: rgba(var(--tool-accent-rgb, 149,206,90), 0.16) !important;
    border-color: var(--tool-accent, #95ce5a) !important;
    color: #fff !important}


/* кнопка передачи плана в Журнал сделок */
.pro-chart-wrapper .lcp-journal {
    width: 100%; margin-top: 12px; padding: 9px 10px;
    background: rgba(var(--tool-accent-rgb, 149,206,90), .10) !important;
    border: 1px solid var(--tool-accent, #95ce5a);
    border-radius: var(--tool-radius-sm, 6px);
    color: var(--tool-accent, #95ce5a) !important;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s}
.pro-chart-wrapper .lcp-journal:hover { background: rgba(var(--tool-accent-rgb, 149,206,90), .18) !important}
.pro-chart-wrapper .lcp-journal:focus-visible { outline: 2px solid var(--tool-accent, #95ce5a); outline-offset: 1px}

/* ==========================================================================
   BH_LC_MOBILE_AUDIT_2026_08_15
   Единая геометрия toolbar, рабочий sticky и доступные mobile-панели.
   Этот блок намеренно расположен последним: выше остались исторические mobile-
   прототипы с конфликтующими flex/order/height правилами.
   ========================================================================== */

/* Глобальный mobile-friendly-fix ставит overflow-x:hidden на html/body.
   В Chromium это превращает предка sticky-header в scroll-container и шапка
   уезжает вверх. clip+visible сохраняет защиту от горизонтального скролла,
   но возвращает sticky относительно viewport. */
html:has(body.page-template-page-live-chart),
body.page-template-page-live-chart {
    overflow-x: clip !important;
    overflow-y: visible !important}

.pro-chart-wrapper .lc-widget-tools {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    min-width: 0;
    margin-left: auto}
.pro-chart-wrapper .lc-widget-tools .widget-actions {
    margin-left: 0 !important;
    gap: 5px}
.pro-chart-wrapper .lc-widget-tools .widget-actions > button:not(.lcaw-toggle) {
    box-sizing: border-box;
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px !important;
    height: 34px;
    padding: 0 !important}

/* На обычном desktop вся панель — одна строка. Вторичный Yahoo-тикер скрыт:
   название инструмента и badge источника уже дают ту же информацию. */
@media (min-width: 1200px) {
    .pro-chart-wrapper .widget-header {
        flex-wrap: nowrap !important;
        gap: 8px !important}
    .pro-chart-wrapper .widget-header .widget-title {
        flex: 1 1 auto !important;
        min-width: 250px !important;
        flex-wrap: nowrap !important;
        overflow: hidden}
    .pro-chart-wrapper .widget-header #lc-chart-title {
        max-width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap}
    .pro-chart-wrapper .widget-header #lc-chart-subtitle { display: none !important}
    .pro-chart-wrapper .widget-header #lc-tf-bar {
        flex: 0 0 auto;
        gap: 4px}
    .pro-chart-wrapper .widget-header #lc-tf-bar .lc-tf-btn { padding: 4px 8px}
    .pro-chart-wrapper .lct-ind-toggle { padding-inline: 9px}
    .pro-chart-wrapper .lct-pos-toggle { padding-inline: 9px}
}

/* На 1200–1399px оставляем все функции, но текст трёх tool-кнопок заменяет
   доступная иконка + tooltip/aria-label. Это лучше переноса целого action-блока. */
@media (min-width: 1200px) and (max-width: 1399px) {
    .pro-chart-wrapper .lct-ind-toggle,
    .pro-chart-wrapper .lct-pos-toggle,
    .pro-chart-wrapper .lcaw-toggle {
        box-sizing: border-box;
        flex: 0 0 34px;
        width: 34px;
        min-width: 34px;
        height: 34px;
        padding: 0 !important;
        justify-content: center}
    .pro-chart-wrapper .lct-ind-toggle span,
    .pro-chart-wrapper .lct-pos-toggle span,
    .pro-chart-wrapper .lcaw-toggle span,
    .pro-chart-wrapper .lcaw-toggle sup { display: none !important}
}

@media (max-width: 1199px) and (min-width: 769px) {
    .pro-chart-wrapper .widget-header { align-items: center !important}
    .pro-chart-wrapper .lc-widget-tools { margin-left: 0}
}

@media (max-width: 768px) {
    .pro-chart-wrapper .widget-header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important}
    .pro-chart-wrapper .widget-header .widget-title {
        order: 1;
        flex: 1 1 100% !important;
        width: 100%}
    .pro-chart-wrapper .widget-header .lc-widget-tools {
        order: 2;
        flex: 0 0 100%;
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch}
    .pro-chart-wrapper .widget-header .lc-widget-tools::-webkit-scrollbar { display: none}
    .pro-chart-wrapper .widget-header #lc-tf-bar {
        order: 3;
        flex-basis: 100%;
        margin-top: 0 !important}
    .pro-chart-wrapper .lct-pos-toggle {
        box-sizing: border-box;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        justify-content: center}
    .pro-chart-wrapper .lct-pos-toggle span { display: none}
    .pro-chart-wrapper .lc-widget-tools .widget-actions {
        flex: 0 0 auto;
        margin-left: auto !important;
        gap: 6px}
    .pro-chart-wrapper .lc-widget-tools .widget-actions > button:not(.lcaw-toggle) {
        flex-basis: 44px;
        width: 44px;
        min-width: 44px !important;
        height: 44px;
        min-height: 44px !important}

    /* Панель позиции была flex-строкой под 420px-графиком: после клика она
       оказывалась вне viewport. На touch это полноценная фиксированная sheet. */
    .pro-chart-wrapper .lcp-panel {
        position: fixed;
        z-index: 10020;
        top: 56px;
        right: 8px;
        bottom: auto;
        left: 8px;
        box-sizing: border-box;
        width: auto;
        max-height: calc(100vh - 70px);
        max-height: calc(100dvh - 70px);
        padding: 12px 14px 18px;
        border: 1px solid rgba(149, 206, 90, .38);
        border-radius: 8px;
        background: rgba(14, 15, 18, .98);
        box-shadow: none;
        overflow-y: auto;
        overscroll-behavior: contain}
    .widget-box.fullscreen .lcp-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 70px) !important}
    .pro-chart-wrapper .lct-chart-row.has-lcp #lc-chart-container {
        border-radius: var(--tool-radius-md, 8px) !important}
    .pro-chart-wrapper .lcp-close,
    .pro-chart-wrapper .lcp-pick {
        min-width: 44px;
        width: 44px;
        min-height: 44px;
        height: 44px}
    .pro-chart-wrapper .lcp-panel input.lcp-inp {
        min-height: 44px;
        height: 44px;
        font-size: 16px;
        line-height: 42px}
    .pro-chart-wrapper .lcp-chip,
    .pro-chart-wrapper .lcp-snap,
    .pro-chart-wrapper .lcp-journal { min-height: 44px}

    /* Оставшиеся интерактивные цели: WCAG-friendly touch geometry. */
    .pro-chart-wrapper #lc-search-input,
    .pro-chart-wrapper .bh-acc-native-save--lc,
    .pro-chart-wrapper #lc-asset-review,
    .pro-chart-wrapper #tv-attr-logo {
        min-height: 44px !important}
    .pro-chart-wrapper #tv-attr-logo {
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center}

    /* H1 остаётся в DOM и виден в начале страницы; при sticky-режиме убираем
       только его дубликат, оставляя поиск и все вкладки. */
    .pro-chart-wrapper .chart-header.is-stuck .title-section { display: none !important}
}

/* MOBILE_TOOLBAR_ACCESS_2026_08_15
   Все функции остаются доступны на touch-экранах. Панель не переносится:
   лишние кнопки открываются горизонтальным свайпом, а не исчезают из UI. */
@media (max-width: 768px) {
    .tool-app.pro-chart-wrapper .widget-header .lc-widget-tools {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        padding: 0 2px 2px}
    .tool-app.pro-chart-wrapper .widget-header .lc-widget-tools > *,
    .tool-app.pro-chart-wrapper .widget-header .widget-actions > * {
        scroll-snap-align: start}
    .tool-app.pro-chart-wrapper .lct-ind-dd {
        display: block !important;
        position: static;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px}
    .tool-app.pro-chart-wrapper .lct-ind-toggle {
        box-sizing: border-box;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0 !important;
        justify-content: center}
    .tool-app.pro-chart-wrapper .lct-ind-toggle span { display: none !important}
    .tool-app.pro-chart-wrapper .lct-ind-pop {
        position: fixed;
        z-index: 10060;
        top: calc(62px + env(safe-area-inset-top, 0px));
        right: 10px;
        bottom: auto;
        left: 10px;
        box-sizing: border-box;
        width: auto;
        max-height: calc(100vh - 130px);
        max-height: calc(100dvh - 130px);
        overflow-y: auto;
        overscroll-behavior: contain}
    .tool-app.pro-chart-wrapper .lc-snap-btn,
    .tool-app.pro-chart-wrapper .lc-compare-btn {
        display: inline-flex !important}
}

/* Телефон в landscape всё ещё touch-устройство: 34px desktop-кнопки слишком
   малы. Увеличение не переносит сам toolbar, потому что его группы nowrap. */
@media (max-width: 900px) {
    .tool-app.pro-chart-wrapper .lc-widget-tools .widget-actions > button:not(.lcaw-toggle) {
        flex-basis: 44px;
        width: 44px;
        min-width: 44px !important;
        height: 44px;
        min-height: 44px !important}
    .tool-app.pro-chart-wrapper .lct-ind-toggle,
    .tool-app.pro-chart-wrapper .lct-pos-toggle {
        min-height: 44px !important}
}

/* DESKTOP_TOOLBAR_POLISH_2026_08_15
   Финальная геометрия иконок: кнопки с нулевым padding должны центрировать SVG,
   а визуальный размер соседних действий не должен прыгать от 12 до 20px. */
.tool-app.pro-chart-wrapper .lc-widget-tools button {
    align-items: center;
    justify-content: center}
.tool-app.pro-chart-wrapper .lc-widget-tools button > svg {
    display: block;
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important}

/* ==========================================================================
   BH_LC_TOUCH_ORIENTATION_2026_08_15
   - browser pinch не увеличивает всю страницу внутри холста;
   - drawing tools доступны и на телефоне;
   - fullscreen landscape использует одну компактную строку управления.
   ========================================================================== */
.tool-app.pro-chart-wrapper #lc-chart-container,
.tool-app.pro-chart-wrapper #lc-chart-container canvas {
    touch-action: pan-y;
    overscroll-behavior: contain}

/* Ранние mobile-правила скрывали весь drawing rail. На touch он становится
   горизонтальной прокручиваемой лентой над графиком с целями 44x44px. */
@media (pointer: coarse) and (max-width: 1024px) and (orientation: portrait) {
    .tool-app.pro-chart-wrapper .lct-chart-row { flex-wrap: wrap !important}
    .tool-app.pro-chart-wrapper .lct-rail {
        display: block !important;
        order: -1;
        flex: 1 1 100%;
        width: 100%;
        padding: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid var(--tool-border, #1f2630);
        border-bottom: 0;
        border-radius: var(--tool-radius-md, 8px) var(--tool-radius-md, 8px) 0 0 !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch}
    .tool-app.pro-chart-wrapper .lct-rail::-webkit-scrollbar { display: none}
    .tool-app.pro-chart-wrapper .lct-rail .lct-toolbar__group {
        flex-direction: row;
        flex-wrap: nowrap;
        width: max-content;
        gap: 4px}
    .tool-app.pro-chart-wrapper .lct-rail .lct-draw-btn {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px}
    .tool-app.pro-chart-wrapper .lct-chart-row #lc-chart-container {
        border-radius: 0 0 var(--tool-radius-md, 8px) var(--tool-radius-md, 8px) !important}
}

/* Телефон в landscape часто шире 768/900px, поэтому определяем его также по
   coarse pointer и малой высоте. Все контролы остаются доступны без второй строки. */
@media (pointer: coarse) and (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
    .tool-app.pro-chart-wrapper .widget-box.fullscreen {
        width: 100dvw !important;
        height: 100dvh !important;
        min-height: 100dvh !important}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .widget-header {
        flex: 0 0 auto;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 52px;
        margin: 0 !important;
        padding: 4px max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)) !important;
        overflow: hidden;
        border-bottom: 1px solid var(--tool-border, #1f2630) !important}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .widget-title {
        display: flex !important;
        flex: 0 0 116px !important;
        width: 116px !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
        overflow: hidden}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .widget-title > :not(#lc-chart-title) {
        display: none !important}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen #lc-chart-title {
        display: block;
        max-width: 112px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px !important}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen #lc-tf-bar {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 3px !important;
        overflow-x: auto;
        scrollbar-width: none}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen #lc-tf-bar::-webkit-scrollbar { display: none}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen #lc-tf-bar .lc-tf-btn {
        box-sizing: border-box;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0 !important}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lc-widget-tools {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lc-widget-tools::-webkit-scrollbar { display: none}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lct-ind-dd,
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lct-ind-toggle,
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lct-pos-toggle,
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lcaw-toggle,
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .widget-actions > button {
        box-sizing: border-box;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lct-ind-toggle span,
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lct-pos-toggle span,
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lcaw-toggle span,
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lcaw-toggle sup { display: none !important}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen #single-chart-view {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lct-chart-row {
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        min-height: 0 !important}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lct-rail {
        display: block !important;
        order: 0;
        flex: 0 0 54px;
        width: 54px;
        padding: 4px;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 0 !important;
        scrollbar-width: none}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lct-rail::-webkit-scrollbar { display: none}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lct-rail .lct-toolbar__group {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lct-rail .lct-draw-btn {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px}
    .tool-app.pro-chart-wrapper .widget-box.fullscreen .lct-chart-row #lc-chart-container {
        flex: 1 1 auto;
        width: auto;
        height: 100% !important;
        min-width: 0;
        min-height: 0 !important;
        border-radius: 0 !important}
}


/* ============================================================
   Часть 2 — оболочка R для живого графика (LC_R_2026_10_12)
   Каркас — классы оболочки калькуляторов (css/calc-shell.css): меню разделов слева, полоса сверху.
   .lc-r стоит на том же узле, что и .pro-chart-wrapper, поэтому «.lc-r.pro-chart-wrapper …» перебивает
   прежние правила с !important без гонки специфичности.
   ============================================================ */

/* ---------- мост переменных: старые --tool-* и --chart-* получают значения R ---------- */
.lc-r {
    --tool-bg-main: #0a0d12; --tool-bg-card: #121820; --tool-bg-elevated: #171e28;
    --tool-border: rgba(255,255,255,.07); --tool-accent: #95ce5a;
    --tool-text-primary: #e6e9ee; --tool-text-secondary: #b3b9c2; --tool-text-muted: #949ca7;
    --tool-success: #95ce5a; --tool-danger: #f43f5e; --tool-warning: #b3b9c2; --tool-blue: #787b86;
    --tool-font-body: var(--r-f); --tool-font-mono: var(--r-f);
    --tool-radius-sm: 6px; --tool-radius-md: 8px; --tool-radius-lg: 8px;
    --chart-main-bg: #0a0d12; --chart-darker-bg: #121820; --chart-border-color: rgba(255,255,255,.07);
    --chart-accent-color: #95ce5a; --chart-secondary-accent: #787b86;
    --chart-text-light: #b3b9c2; --chart-text-lighter: #e6e9ee; --chart-text-muted: #949ca7;
    --chart-status-active: #95ce5a; --chart-status-warning: #b3b9c2; --chart-status-danger: #f43f5e; --chart-gold: #b3b9c2;
}

/* ---------- каркас ---------- */
.lc-r.pro-chart-wrapper { background: var(--r-bg) !important; color: var(--r-t1); font-family: var(--r-f); min-height: 0; }
.lc-r .bhc-main { min-width: 0; }
.lc-r .chart-inner { max-width: none; margin: 0; padding: 20px 24px 40px; }
.lc-r .tab-content.active { animation: none; }
.lc-r :where(button) { box-shadow: none; }

/* ---------- меню разделов: кнопки сохранили .nav-btn (по нему JS переключает разделы) ---------- */
.lc-r.pro-chart-wrapper .bhc-side .bhc-nav-item.nav-btn {
    display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 12px !important;
    width: 100%; min-width: 0 !important; padding: 10px 12px !important; margin: 0;
    background: transparent !important; border: 0 !important; border-radius: 8px !important;
    color: var(--r-t2) !important; font: 500 14px/1.2 var(--r-f) !important; text-align: left;
    white-space: normal !important; box-shadow: none !important; transform: none !important;
    transition: background .15s, color .15s !important; cursor: pointer;
    flex-direction: row !important; flex: none !important; min-height: 0 !important; scroll-snap-align: none;
}
.lc-r.pro-chart-wrapper .bhc-side .bhc-nav-item.nav-btn:hover { background: rgba(255,255,255,.03) !important; color: var(--r-t1) !important; }
.lc-r.pro-chart-wrapper .bhc-side .bhc-nav-item.nav-btn.active { background: rgba(149,206,90,.08) !important; color: var(--r-g) !important; }
.lc-r.pro-chart-wrapper .bhc-side .nav-btn svg { width: 18px !important; height: 18px !important; flex: none; }
.lc-r.pro-chart-wrapper .bhc-side .nav-btn svg :is(path, rect, circle, line, polyline) { fill: none !important; stroke: currentColor !important; }
.lc-r.pro-chart-wrapper .bhc-side .nav-btn:focus-visible { outline: 2px solid var(--r-g) !important; outline-offset: -2px; }

/* ---------- полоса сверху: название, поиск, «Сохранить прогресс» ---------- */
.lc-r .lc-topbar { gap: 12px 16px; }
.lc-r.pro-chart-wrapper .lc-topbar .lc-search { margin-left: auto; flex: 1 1 220px; min-width: 200px; max-width: 360px; }
/* второй тикер (технический символ Yahoo, «EURUSD=X») не показываем: название и значок источника дают то же */
.lc-r.pro-chart-wrapper .widget-header #lc-chart-subtitle { display: none !important; }
.lc-r.pro-chart-wrapper .lc-search__input,
.lc-r.pro-chart-wrapper input.lc-search__input {
    height: 36px; padding: 0 32px 0 36px !important; background: var(--r-s1) !important;
    border: 1px solid var(--r-line2) !important; border-radius: 6px !important;
    color: var(--r-t1) !important; -webkit-text-fill-color: var(--r-t1) !important; caret-color: var(--r-t1) !important;
    font: 400 14px/1.2 var(--r-f) !important;
}
.lc-r.pro-chart-wrapper .lc-search__input::placeholder { color: var(--r-t3) !important; -webkit-text-fill-color: var(--r-t3) !important; }
.lc-r.pro-chart-wrapper .lc-search__input:focus { background: var(--r-s1) !important; border-color: rgba(255,255,255,.3) !important; box-shadow: none !important; }
.lc-r.pro-chart-wrapper .lc-search__icon { color: var(--r-t3); }
.lc-r .lc-top-act { display: flex; align-items: center; gap: 8px; flex: none; }
/* слот кнопки носит класс .header-nav (по нему плагин аккаунтов находит место) — снимаем прежние мобильные правила полосы разделов */
.lc-r.pro-chart-wrapper .lc-top-act.header-nav {
    display: flex !important; width: auto !important; flex: none !important; margin: 0 0 0 auto !important; padding: 0 !important;
    overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; grid-template-columns: none !important;
}
.lc-r .lc-top-act:empty { display: none; }
.lc-r.pro-chart-wrapper .lc-top-act button,
.lc-r.pro-chart-wrapper .lc-top-act a {
    height: 36px; padding: 0 14px !important; border: 0 !important; border-radius: 6px !important;
    background: rgba(255,255,255,.06) !important; color: var(--r-t1) !important;
    font: 500 14px/1 var(--r-f) !important; box-shadow: none !important; transform: none !important;
}
.lc-r.pro-chart-wrapper .lc-top-act button:hover,
.lc-r.pro-chart-wrapper .lc-top-act a:hover { background: rgba(255,255,255,.1) !important; color: var(--r-t1) !important; }
.lc-r.pro-chart-wrapper .lc-top-act svg :is(path, rect, circle, line, polyline) { stroke: currentColor !important; }
.lc-r.pro-chart-wrapper .lc-top-act .bh-acc-native-save--lc {
    height: 36px !important; margin: 0 !important; padding: 0 14px !important; gap: 8px !important;
    background: rgba(255,255,255,.06) !important; border: 0 !important; border-radius: 6px !important;
    color: var(--r-t1) !important; font: 500 14px/1 var(--r-f) !important;
}
.lc-r.pro-chart-wrapper .lc-top-act .bh-acc-native-save--lc:hover { background: rgba(255,255,255,.1) !important; }
.lc-r.pro-chart-wrapper .lc-top-act .bh-acc-native-save--lc span { color: inherit !important; }
.lc-r.pro-chart-wrapper .lc-top-act .bh-acc-native-save--lc svg { stroke: currentColor !important; width: 16px !important; height: 16px !important; }

/* ---------- выбранное — серым сегментом #252e3a с белым текстом, зелёный — только у действия ---------- */
.lc-r.pro-chart-wrapper .lc-tf-bar .lc-tf-btn { border-color: var(--r-line2); color: var(--r-t2); background: transparent; font: 500 13px/1 var(--r-f); }
.lc-r.pro-chart-wrapper .lc-tf-bar .lc-tf-btn:hover { color: var(--r-t1); border-color: rgba(255,255,255,.24); background: transparent; }
.lc-r.pro-chart-wrapper .lc-tf-bar .lc-tf-btn--active,
.lc-r.pro-chart-wrapper .lc-cat-tab.active,
.lc-r.pro-chart-wrapper .lct-ind-toggle.is-active,
.lc-r.pro-chart-wrapper .lct-ind-chip:has(input:checked),
.lc-r.pro-chart-wrapper .lct-draw-btn.active {
    background: #252e3a !important; border-color: #252e3a !important; color: #fff !important; box-shadow: none !important;
}
.lc-r.pro-chart-wrapper .lct-draw-btn.active svg :is(path, rect, circle, line, polyline) { stroke: #fff; }
.lc-r.pro-chart-wrapper .instrument-btn {
    border-color: var(--r-line2) !important; background: transparent !important; color: var(--r-t1) !important;
    font: 500 14px/1.2 var(--r-f) !important;
}
.lc-r.pro-chart-wrapper .instrument-btn:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; transform: none !important; box-shadow: none !important; }
.lc-r.pro-chart-wrapper .instrument-btn.active { background: #252e3a !important; border-color: #252e3a !important; color: #fff !important; font-weight: 600 !important; }

/* ---------- значок источника данных: спокойный серый, «онлайн» — точкой цвета роста ---------- */
.lc-r .lc-data-badge { background: transparent; border-color: var(--r-line2); color: var(--r-t2); font: 500 13px/1 var(--r-f); padding: 4px 8px; }
.lc-r .lc-data-badge--live { color: var(--r-t1); border-color: var(--r-line2); }
.lc-r .lc-data-badge--live .lc-data-badge__dot { color: #26a69a; background: #26a69a; box-shadow: none; }
.lc-r .lc-data-badge--delayed { color: var(--r-t2); border-color: var(--r-line2); }
.lc-r .lc-data-badge--delayed .lc-data-badge__dot { background: var(--r-t3); }

/* ---------- кнопка покупки — одно зелёное действие, без подъёма и тени ---------- */
.lc-r.pro-chart-wrapper .lc-asset-buy { background: var(--r-g); color: #0c0f15; font: 600 14px/1.2 var(--r-f); border-radius: 6px; box-shadow: none; transition: background .15s; }
.lc-r.pro-chart-wrapper .lc-asset-buy:hover,
.lc-r.pro-chart-wrapper .lc-asset-buy:focus-visible { background: var(--r-g2); color: #0c0f15; transform: none; box-shadow: none; }
.lc-r.pro-chart-wrapper .lc-asset-buy:focus-visible { outline: 2px solid var(--r-g); outline-offset: 2px; }
.lc-r.pro-chart-wrapper .lc-asset-note { font-size: 13px; color: var(--r-t3); }

/* ---------- блоки и карточки: плоские поверхности R ---------- */
.lc-r.pro-chart-wrapper .widget-box { border-color: var(--r-line) !important; box-shadow: none !important; }
.lc-r.pro-chart-wrapper .lc-kpi-card { background: var(--r-s1); border-color: var(--r-line); }
.lc-r.pro-chart-wrapper .lc-kpi-card:hover { border-color: var(--r-line2); transform: none; box-shadow: none; }
.lc-r.pro-chart-wrapper .lc-kpi-card::before { display: none; }

/* ---------- строка источников и библиотеки — внизу колонки инструмента ---------- */
.lc-r .lc-credit { margin: 0; padding: 0 24px 24px; font: 400 13px/1.5 var(--r-f); color: var(--r-t3); }
.lc-r .lc-credit a { color: var(--r-t2) !important; text-decoration: underline; text-underline-offset: 2px; }
.lc-r .lc-credit a:hover { color: var(--r-t1) !important; }

/* ---------- блок описания под графиком: заголовок белым, без красной строки, галочки серым ---------- */
.lc-r.pro-chart-wrapper .info-block { background: var(--r-s1); border-color: var(--r-line); }
.lc-r.pro-chart-wrapper .info-block h3 { color: var(--r-t1) !important; font: 600 16px/1.3 var(--r-f); margin: 0 0 12px; }
.lc-r.pro-chart-wrapper .info-block p { text-indent: 0 !important; color: var(--r-t2); font-size: 14px; }
.lc-r.pro-chart-wrapper .info-block li { color: var(--r-t2); font-size: 14px; }
.lc-r.pro-chart-wrapper .info-block li::before { color: var(--r-t3); }

/* ---------- полный экран графика: меню и полоса не мешают ---------- */
.lc-r .widget-box.fullscreen { z-index: 10050; }

/* ---------- tools-ui.css сбрасывает margin/padding у всех потомков .tool-app — возвращаем отступы оболочки ---------- */
.lc-r .bhc-side { padding: 18px 12px 16px; }
.lc-r .bhc-side-head { padding: 0 10px 16px; }
.lc-r .bhc-side-all { margin-top: auto; padding: 12px; }
.lc-r .bhc-top { padding: 12px 24px; }

/* ---------- шапка графика: строка названия и значков, ниже — периоды и инструменты.
   Прежняя раскладка в одну строку рассчитана на всю ширину окна; с меню слева название пары сжималось до одной буквы. ---------- */
@media (min-width: 769px) {
    .lc-r.pro-chart-wrapper .widget-header { flex-wrap: wrap !important; gap: 10px 14px !important; }
    .lc-r.pro-chart-wrapper .widget-header .widget-title { flex: 1 1 100% !important; min-width: 0 !important; overflow: visible; flex-wrap: wrap !important; }
    .lc-r.pro-chart-wrapper .widget-header #lc-chart-title { max-width: none; }
    .lc-r.pro-chart-wrapper .widget-header .lc-widget-tools { flex: 1 1 auto; margin-left: 0; flex-wrap: wrap; row-gap: 8px; }
    .lc-r.pro-chart-wrapper .widget-header .lc-widget-tools .widget-actions { margin-left: auto !important; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .lc-r.pro-chart-wrapper .lct-ind-toggle,
    .lc-r.pro-chart-wrapper .lct-pos-toggle,
    .lc-r.pro-chart-wrapper .lcaw-toggle { flex: 0 0 auto; width: auto; min-width: 0; padding: 7px 10px !important; }
    .lc-r.pro-chart-wrapper .lct-ind-toggle > span,
    .lc-r.pro-chart-wrapper .lct-pos-toggle > span,
    .lc-r.pro-chart-wrapper .lcaw-toggle .lcaw-toggle__short { display: inline !important; }
    .lc-r.pro-chart-wrapper .lcaw-toggle sup { display: inline !important; }
}
.lc-r.pro-chart-wrapper .widget-header .widget-title { animation: none !important; font: 600 20px/1.2 var(--r-f) !important; color: #fff !important; }
.lc-r .lc-data-badge, .lc-r .status-indicator { white-space: nowrap; }

/* значок торговой сессии и статуса рынка — как значок источника: рамка, серый текст, цвет только у точки */
.lc-r.pro-chart-wrapper .widget-title .status-indicator { margin-left: 0; padding: 4px 8px; border: 1px solid var(--r-line2); border-radius: 6px; background: transparent; color: var(--r-t2); font: 500 13px/1 var(--r-f); }
.lc-r .status-indicator .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--r-t3); animation: none; box-shadow: none; }
.lc-r .status-indicator.active .status-dot { background: #26a69a; }

/* кнопки-значки шапки (уведомление, поделиться, снимок, сравнение, полный экран, сброс) — одним нейтральным видом */
.lc-r.pro-chart-wrapper .lc-widget-tools .widget-actions > button,
.lc-r.pro-chart-wrapper .lc-alert-btn,
.lc-r.pro-chart-wrapper .fullscreen-btn {
    background: transparent !important; border: 1px solid var(--r-line2) !important; color: var(--r-t2) !important;
    border-radius: 6px !important; box-shadow: none !important; transform: none !important;
}
.lc-r.pro-chart-wrapper .lc-widget-tools .widget-actions > button:hover,
.lc-r.pro-chart-wrapper .lc-alert-btn:hover,
.lc-r.pro-chart-wrapper .fullscreen-btn:hover { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.24) !important; color: var(--r-t1) !important; box-shadow: none !important; transform: none !important; }
.lc-r.pro-chart-wrapper .fullscreen-btn:hover svg :is(path, rect, circle, line, polyline),
.lc-r.pro-chart-wrapper .widget-actions > button:hover svg :is(path, rect, circle, line, polyline) { fill: none !important; stroke: currentColor !important; }
.lc-r.pro-chart-wrapper .lc-widget-tools button:focus-visible { outline: 2px solid var(--r-g) !important; outline-offset: 2px; }
.lc-r.pro-chart-wrapper .lct-ind-toggle,
.lc-r.pro-chart-wrapper .lct-pos-toggle { border-color: var(--r-line2); color: var(--r-t2); background: transparent; box-shadow: none; }
.lc-r.pro-chart-wrapper .lct-ind-toggle:hover,
.lc-r.pro-chart-wrapper .lct-pos-toggle:hover { color: var(--r-t1); border-color: rgba(255,255,255,.24); background: transparent; }
.lc-r.pro-chart-wrapper .lct-pos-toggle[aria-expanded="true"],
.lc-r.pro-chart-wrapper .lct-ind-toggle[aria-expanded="true"] { background: #252e3a; border-color: #252e3a; color: #fff; }

/* ---------- телефон и планшет ---------- */
@media (max-width: 899px) {
    .lc-r.pro-chart-wrapper { margin: 0 !important; width: 100% !important; }
    .lc-r .chart-inner { padding: 14px 16px 32px; }
    .lc-r .lc-topbar { flex-wrap: wrap; }
    .lc-r.pro-chart-wrapper .lc-topbar .lc-search { order: 5; flex: 1 1 100%; max-width: none; min-width: 0; margin-left: 0; }
    .lc-r.pro-chart-wrapper .lc-search__input,
    .lc-r.pro-chart-wrapper input.lc-search__input { height: 40px; font-size: 16px !important; }
    .lc-r .lc-topbar .bhc-h1 { flex: 1 1 0; min-width: 0; text-align: left; }
    .lc-r .lc-top-act { margin-left: auto; }
    .lc-r.pro-chart-wrapper .lc-top-act .bh-acc-native-save--lc { width: 40px !important; height: 40px !important; padding: 0 !important; justify-content: center !important; }
    .lc-r.pro-chart-wrapper .lc-top-act .bh-acc-native-save--lc span { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .lc-r .lc-credit { padding: 0 16px 20px; }
    .lc-r .bhc-side { padding: 18px 12px calc(84px + env(safe-area-inset-bottom, 0px)); }
    html.bh-pwa-standalone .lc-r .bhc-side { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    .lc-r .bhc-brand { padding: 2px 10px 18px; }
    .lc-r .bhc-top { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .lc-r .lc-data-badge--live .lc-data-badge__dot { animation: none; }
}
/* CANON_2026_10_13: кнопки панели — r6, как остальные контролы */
.lc-r.pro-chart-wrapper #lctIndToggle.lct-ind-toggle{border-radius:6px}

/* DUP16_2026_10_16: пара, открытая на графике, — цена и изменение только в шапке графика; карточка выбранная (плитка #252e3a) с подписью */
.lc-r.pro-chart-wrapper .lc-kpi-card.lc-kpi-current { background: #252e3a; }
.pro-chart-wrapper .lc-kpi-card .lc-kpi-card__here { display: none; }
.pro-chart-wrapper .lc-kpi-card.lc-kpi-current .lc-kpi-card__here { display: block; position: relative; z-index: 3; padding: 8px 14px 0; min-height: 44px; box-sizing: border-box; pointer-events: none; font: 400 14px/1.3 var(--r-f, "IBM Plex Sans", Arial, sans-serif); color: #b3b9c2; }
.pro-chart-wrapper .lc-kpi-card.lc-kpi-current .lc-kpi-card__price,
.pro-chart-wrapper .lc-kpi-card.lc-kpi-current .lc-kpi-card__change { display: none !important; }

/* ---------- LCH21_2026_10_21 — шапка живого графика на компьютере (владелец 20–21.10, вариант «1»; канон 0.1, исключение у живого графика).
   С 900 px: верхней полосы нет (H1 скрыт с экрана, как на телефоне), шапка карточки в две строки — актив, цена, изменение, «за день»
   и справа поле поиска; ниже периоды и инструменты. Значки источника и сессии — подписью справа под графиком, «Сохранить прогресс» —
   в боковом меню. Переносы делает js/live-chart-phone.js (LCH21). ---------- */
@media (min-width: 900px) {
    html:root body #bhc-shell .bhc-top.lc-topbar { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; }
    html:root body #bhc-shell .bhc-top.lc-topbar > :not(h1) { display: none !important; }
    html:root body #bhc-shell .bhc-top.lc-topbar h1.bhc-h1 { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; }

    html body #chart-widget-box > .widget-header { row-gap: 12px !important; }
    html body #chart-widget-box .widget-title { flex-wrap: wrap !important; align-items: baseline !important; column-gap: 12px !important; row-gap: 8px !important; }
    html body #chart-widget-box .widget-title > #lc-chart-title,
    html body #chart-widget-box .widget-title > .lc-chart-subtitle { order: 0; }
    html body #chart-widget-box .widget-title > .lcd-px { order: 1; flex-basis: auto !important; margin-top: 0 !important; gap: 4px 12px !important; }
    html body #chart-widget-box .widget-title > .lc-compare-chips { order: 2; align-self: center; }

    /* поле поиска на фоне страницы — #171e28 без рамки, наведение #1f2834, фокус — рамка #95ce5a (канон 0.6; карточки под шапкой нет, LCB21) */
    html body :is(#chart-widget-box, #analysis) .widget-title > .lc-search { order: 3; display: flex !important; position: relative !important; flex: 0 1 320px !important; min-width: 200px !important; max-width: 320px !important; margin: 0 0 0 auto !important; padding: 0 !important; align-self: center !important; }
    html body :is(#chart-widget-box, #analysis) .widget-title .lc-search__input { width: 100% !important; height: 36px !important; line-height: 36px !important; margin: 0 !important; background: #171e28 !important; border: 1px solid transparent !important; border-radius: 6px !important; padding: 0 30px 0 34px !important; font: 400 14px/36px 'IBM Plex Sans', Arial, sans-serif !important; color: #e6e9ee !important; box-shadow: none !important; }
    html body :is(#chart-widget-box, #analysis) .widget-title .lc-search__input::placeholder { color: #949ca7 !important; -webkit-text-fill-color: #949ca7 !important; }
    html body :is(#chart-widget-box, #analysis) .widget-title .lc-search__input:hover { background: #1f2834 !important; }
    html body :is(#chart-widget-box, #analysis) .widget-title .lc-search__input:focus { border-color: #95ce5a !important; }
    /* список подсказок сплошной: над кнопками полупрозрачный фон просвечивал */
    html body :is(#chart-widget-box, #analysis) .widget-title .lc-search__dropdown { left: auto !important; right: 0 !important; width: 360px !important; max-width: calc(100vw - 32px) !important; z-index: 1000 !important; background: #171e28 !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 8px 24px rgba(0,0,0,.45) !important; }

    /* значки источника и сессии — подписью справа в строке под графиком, без плиток */
    html body #chart-widget-box .lc-asset-actions > .lc-meta { display: flex; align-items: center; gap: 16px; margin-left: auto; white-space: nowrap; }
    html:root body #bhc-shell #chart-widget-box .lc-meta :is(#lc-data-badge, #lc-session-badge, #lc-market-status),
    html:root body #bhc-shell #chart-widget-box .lc-meta :is(#lc-data-badge, #lc-session-badge, #lc-market-status):hover { background: transparent !important; border-color: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; gap: 6px !important; color: #949ca7 !important; font: 400 13px/1.2 'IBM Plex Sans', Arial, sans-serif !important; }

    /* «Сохранить прогресс» в боковом меню — текстом, плитка под курсором (канон 0.6, «Одна главная кнопка на экран») */
    html:root body #bhc-shell .bhc-side :is(.lc-top-act, #lc-top-act) { display: flex !important; margin: 8px 0 0 !important; padding: 0 !important; }
    html:root body #bhc-shell .bhc-side :is(.lc-top-act, #lc-top-act) :is(.bh-acc-native-save, #bh-acc-native-save) { width: 100% !important; justify-content: flex-start !important; height: 38px !important; padding: 0 10px !important; background: transparent !important; color: #b3b9c2 !important; font: 500 14px/1 'IBM Plex Sans', Arial, sans-serif !important; }
    html:root body #bhc-shell .bhc-side :is(.lc-top-act, #lc-top-act) :is(.bh-acc-native-save, #bh-acc-native-save):hover { background: #1f2834 !important; color: #e6e9ee !important; }
}
/* /LCH21_2026_10_21 */

/* ---------- LCB21_2026_10_21 — «График» без светлой подложки (владелец 21.10: «точно подумай нужна ли эта подложка более светлого цвета?» → «Б»;
   «лишнее свободное место сверху», «как то обособленно теперь выглядит панель инструментов»). Карточка «Графика» тоном страницы, как
   «Анализ», «Тепловые карты» и остальные вкладки; график по-прежнему «экран» #0a0d12 (канон 0.9), только без рамки вокруг. Край всех вкладок —
   по краю «Ключевых рынков», верх — вровень с названием инструмента в меню. Панель рисования без плашки, от графика — линией, как шапка снизу.
   Полный экран не трогаем. ---------- */
@media (min-width: 900px) {
    html:root body #bhc-shell #main-chart #chart-widget-box:not(.fullscreen) { background: #0a0d12 !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; }
    html:root body #bhc-shell .chart-inner > :is(#main-chart, #analysis, #heatmaps, #screeners, #calendar, #sentiment) > .widget-box:not(.fullscreen) { padding: 0 0 8px !important; }
    html:root body #bhc-shell #main-chart .lct-rail { background: transparent !important; border-radius: 0 !important; border-right: 1px solid rgba(255,255,255,.07) !important; }
    html:root body #bhc-shell #main-chart #lc-chart-container { border-radius: 0 !important; }
    /* панель «Расчёт позиции» теперь стоит на фоне страницы — блок тоном карточки #121820 (канон 0.2), а не вложенной поверхности */
    html:root body #bhc-shell #main-chart :is(#lcpPanel, .lcp-panel) { background: #121820 !important; }
}
/* /LCB21_2026_10_21 */

/* LCSIGN21_2026_10_21 — живой график: знак актива у названия (ставит js/bh-logos.js, канон 0.8.1). Откат — удалить блок. */
html body #chart-widget-box .widget-title > .bh-lg { align-self: center; }
html body .lcm-head .lcm-asset > .bh-lg { margin-right: 4px; }
/* знак занял 44 px строки: поле поиска сжимается до 200 px раньше, чем уходит на вторую строку, и растёт до 320, когда место есть */
@media (min-width: 900px) {
    html body :is(#chart-widget-box, #analysis) .widget-title > .lc-search { flex: 1 1 200px !important; }
}
/* /LCSIGN21_2026_10_21 */

/* LCVH21_2026_10_21 — высота графика от окна (владелец 21.10, вариант «1»): точное число считает js/live-chart-phone.js (LCVH21) в --lc-vh.
   До скриптов высоту оценивает сам CSS по замеру 21.10 (верх графика + строка «Торговать» 43 px + отступ 16), иначе график сначала
   рисовался в 610 px и через 1–2 с растягивался (владелец: «сначала открывается не на всю страницу и растягивается»); скрипт потом
   поправляет на несколько px. Полный экран — своя высота. Откат — удалить блок и модуль LCVH21. */
@media (min-width: 768px) {
    html body #chart-widget-box:not(.fullscreen) #lc-chart-container { height: var(--lc-vh, 420px); }
}
@media (min-width: 1000px) {   /* шапка карточки в 3–4 строки: верх графика 277–295 */
    html body #chart-widget-box:not(.fullscreen) #lc-chart-container { height: var(--lc-vh, max(420px, calc(100vh - 345px))); }
}
@media (min-width: 1100px) {   /* верх 250 */
    html body #chart-widget-box:not(.fullscreen) #lc-chart-container { height: var(--lc-vh, max(420px, calc(100vh - 309px))); }
}
@media (min-width: 1180px) {   /* верх 210 */
    html body #chart-widget-box:not(.fullscreen) #lc-chart-container { height: var(--lc-vh, max(420px, calc(100vh - 269px))); }
}
@media (min-width: 1240px) {   /* шапка в две строки: верх 175 */
    html body #chart-widget-box:not(.fullscreen) #lc-chart-container { height: var(--lc-vh, max(420px, calc(100vh - 234px))); }
}
/* /LCVH21_2026_10_21 */

/* LCMY21_2026_10_21 — «Мои активы» (владелец 21.10, вариант 3: закреплённые сверху, ниже частые). Разметку строит js/live-chart-phone.js
   (LCMY21), знак слева — js/bh-logos.js. Компьютер: раздел меню под чертой; телефон: вверху листа «Актив». Выбранный актив — плиткой
   #252e3a (канон 0.9.3: выбранное не зелёным), изменение — цветом направления. Откат — удалить блок и модуль LCMY21. */
html body #bhc-shell .bhc-side > #lcmy-side { display: flex; flex-direction: column; gap: 2px; flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; margin: 12px 0 0; padding: 12px 0 4px; border-top: 1px solid rgba(255,255,255,.07); }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-h { margin: 0; padding: 8px 12px 4px; font: 400 13px/16px "IBM Plex Sans", sans-serif; color: #949ca7; letter-spacing: 0; text-transform: none; }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-h:first-child { padding-top: 0; }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 36px; margin: 0; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: #e6e9ee; font: 400 14px/18px "IBM Plex Sans", sans-serif; text-align: left; cursor: pointer; }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-row.is-cur { background: #252e3a; }
@media (hover: hover) { html body :is(#bhc-shell, .lcm-sheet) .lcmy-row:not(.is-cur):hover { background: #171e28; } }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-row:focus-visible { outline: 2px solid #95ce5a; outline-offset: -2px; }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-row:not(.bh-lg-host) > :first-child { margin-left: 36px; }   /* у сырья знака нет — название в линию с остальными */
html body :is(#bhc-shell, .lcm-sheet) .lcmy-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-c { flex: none; font: 500 13px/16px "IBM Plex Sans", sans-serif; color: #949ca7; font-variant-numeric: tabular-nums; }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-c.is-up { color: #95ce5a; }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-c.is-dn { color: #f43f5e; }
/* звёздочка у названия: не закреплён — контур #949ca7, закреплён — заливка #e6e9ee */
html body :is(#bhc-shell, .lcm-sheet) .lcmy-star { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 0 0 -4px; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: #949ca7; cursor: pointer; align-self: center; }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-star.is-pinned { color: #e6e9ee; }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-star { position: relative; }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-star > .bh-wn-nav-dot { position: absolute !important; top: 2px !important; right: 2px !important; margin: 0 !important; }   /* «новое» 21 день (класс C) */
html body :is(#bhc-shell, .lcm-sheet) :is(.lcmy-star, .lcmy-pin).is-pinned svg { fill: currentColor; }
@media (hover: hover) { html body :is(#bhc-shell, .lcm-sheet) .lcmy-star:hover { background: #171e28; color: #e6e9ee; } }
html body :is(#bhc-shell, .lcm-sheet) .lcmy-star:focus-visible, html body .lcmy-pin:focus-visible { outline: 2px solid #95ce5a; outline-offset: 0; }
html body #bhc-shell .lcm-head .lcmy-star { width: 44px; height: 44px; margin: -8px -8px -8px -6px; }   /* телефон: зона касания 44 */
html body #bhc-shell .lcm-head .lcmy-star > .bh-wn-nav-dot { top: 10px !important; right: 10px !important; }   /* у значка, а не в углу зоны касания */
/* лист «Актив» на телефоне */
html body .lcm-sheet .lcmy--sheet { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
html body .lcm-sheet .lcmy--sheet .lcmy-h { padding: 8px 12px 4px; }
html body .lcm-sheet .lcmy-item { display: flex; align-items: center; gap: 4px; }
html body :is(#bhc-shell, .lcm-sheet) .lcmy--sheet .lcmy-item > .lcmy-row { flex: 1 1 auto; min-width: 0; min-height: 44px; border-radius: 6px; font-weight: 500; }   /* зона касания 44 */
html body .lcm-sheet .lcmy-pin { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: #949ca7; cursor: pointer; }
html body .lcm-sheet .lcmy-pin.is-pinned { color: #e6e9ee; }
@media (hover: hover) { html body .lcm-sheet .lcmy-item > .lcmy-row:not(.is-cur):hover, html body .lcm-sheet .lcmy-pin:hover { background: #1f2834; } }
/* /LCMY21_2026_10_21 */

/* ==========================================================================
   LCDRAW22_2026_10_22 — рисование v3 (js/lc-drawing.js): группы инструментов со списком вправо, магнит к ценам свечи,
   панель выделенного объекта «цвет · Удалить», уведомление с «Вернуть», поле текста на графике.
   Канон DESIGN-DNA-TOOLS.md 0.2/0.9: плитки #171e28, наведение #1f2834, выбранное #252e3a, рамка .12 только у всплывающих слоёв, радиус 6
   ========================================================================== */
.pro-chart-wrapper .lct-grp { display: contents }
.pro-chart-wrapper .lct-draw-btn.lct-grp-btn { position: relative }
.pro-chart-wrapper .lct-grp-mark {
    position: absolute; right: 3px; bottom: 3px; width: 0; height: 0; pointer-events: none;
    border-style: solid; border-width: 0 0 5px 5px; border-color: transparent transparent #949ca7 transparent}
.pro-chart-wrapper .lct-draw-btn.lct-grp-btn[aria-expanded="true"] { background: #1f2834 !important; color: #e6e9ee !important}
.pro-chart-wrapper .lct-draw-btn.lct-grp-btn[aria-expanded="true"]:hover::after, .pro-chart-wrapper .lct-draw-btn.lct-grp-btn[aria-expanded="true"]:hover::before { display: none !important}   /* подсказка не дублирует открытый список */
.pro-chart-wrapper .lct-draw-btn.lct-draw-magnet[aria-pressed="true"] { background: #252e3a !important; border-color: #252e3a !important; color: #e6e9ee !important}

.pro-chart-wrapper .lct-fly {
    position: absolute; z-index: 60; min-width: 232px; padding: 4px;
    display: flex; flex-direction: column; gap: 2px;
    background: #121820; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; box-shadow: none}
.pro-chart-wrapper .lct-fly[hidden] { display: none !important}
.lc-r.pro-chart-wrapper .lct-fly .lct-draw-btn.lct-fly-i {
    width: 100%; height: 36px; min-height: 36px; padding: 0 10px; gap: 10px;
    display: flex; align-items: center; justify-content: flex-start;
    border: 0 !important; border-radius: 6px; background: transparent !important; box-shadow: none !important;
    color: #e6e9ee !important; font: 400 14px/1.2 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; text-align: left; white-space: nowrap}
.lc-r.pro-chart-wrapper .lct-fly .lct-draw-btn.lct-fly-i svg { color: #b3b9c2; flex: none}
.lc-r.pro-chart-wrapper .lct-fly .lct-draw-btn.lct-fly-i:hover { background: #1f2834 !important}
.lc-r.pro-chart-wrapper .lct-fly .lct-draw-btn.lct-fly-i.active { background: #252e3a !important}
.lc-r.pro-chart-wrapper .lct-fly .lct-draw-btn.lct-fly-i.active svg { color: #e6e9ee}
.pro-chart-wrapper .lct-fly .lct-draw-btn.lct-fly-i:focus-visible { outline: 2px solid #95ce5a; outline-offset: -2px}
@media (pointer: coarse) {
    .lc-r.pro-chart-wrapper .lct-fly .lct-draw-btn.lct-fly-i { height: 44px; min-height: 44px}
}
/* подсказки панели — справа от кнопки: над кнопкой у левого края страницы они обрезались («Фибо…чи») */
@media (hover: hover) {
    .pro-chart-wrapper .lct-rail [data-tooltip]:hover::after {
        bottom: auto !important; top: 50% !important; left: calc(100% + 8px) !important; transform: translateY(-50%) !important;
        background: #171e28 !important; border: 1px solid rgba(255,255,255,.14) !important; color: #e6e9ee !important;
        padding: 6px 10px !important; border-radius: 6px !important; font: 400 13px/1.2 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important; z-index: 70 !important}
    .pro-chart-wrapper .lct-rail [data-tooltip]:hover::before { display: none !important}
}

/* Элементы рисования и легенды индикаторов внутри графика помечены .lcd-ui и исключены из общего сброса контейнера
   («.tool-app .lc-chart-container *… { all: revert }» выше): сброс гасил у SVG обводку и форму — у «Удалить» не было корзины, у легенды
   крестиков, а легенда с прежним «.pro-chart-wrapper .lct-chart-legend» вообще уходила под полотно. Селекторы с #lc-chart-container —
   сильнее правил «.tool-app button…» из tools-ui.css */
html:root body :is(#lc-chart-container, #lctSubpaneChart) .lcd-ui svg { display: block; flex: none; overflow: visible}
html:root body :is(#lc-chart-container, #lctSubpaneChart) .lcd-ui button {
    min-width: 0; min-height: 0; text-transform: none; letter-spacing: normal; transform: none; transition: background-color .12s ease, color .12s ease; -webkit-tap-highlight-color: transparent}
/* панель выделенного объекта и уведомление — над слоем рисунков */
html:root body #lc-chart-container .lcd-bar {
    position: absolute; z-index: 7; display: flex; align-items: center; gap: 4px; margin: 0; padding: 4px; box-sizing: border-box;
    background: #171e28; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
    font: 500 13px/1 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #e6e9ee; white-space: nowrap}
html:root body #lc-chart-container :is(.lcd-bar, .lcd-sw-row, .lcd-toast, .lcd-toast-b, .lct-chart-legend)[hidden] { display: none !important}
html:root body #lc-chart-container .lcd-sw-row { display: flex; gap: 2px; margin: 0; padding: 0}
html:root body #lc-chart-container .lcd-bar button {
    margin: 0; border: 0; box-shadow: none; background: transparent; cursor: pointer; border-radius: 6px; box-sizing: border-box;
    font: 500 13px/1 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #e6e9ee; text-transform: none; letter-spacing: normal}
html:root body #lc-chart-container .lcd-bar .lcd-sw { width: 30px; height: 30px; padding: 0; display: grid; place-items: center}
html:root body #lc-chart-container .lcd-bar .lcd-sw::before { content: ''; display: block; width: 14px; height: 14px; border-radius: 3px; background: var(--c)}
html:root body #lc-chart-container .lcd-bar .lcd-sw.is-on { background: #252e3a}
html:root body #lc-chart-container .lcd-bar .lcd-del { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px}
html:root body #lc-chart-container .lcd-bar .lcd-del svg { width: 16px; height: 16px; color: #b3b9c2}
html:root body #lc-chart-container .lcd-bar button:focus-visible, html:root body #lc-chart-container .lcd-toast .lcd-toast-b:focus-visible, html:root body #lc-chart-container .lct-chart-legend .lct-legend-x:focus-visible { outline: 2px solid #95ce5a; outline-offset: 1px}
html:root body #lc-chart-container .lcd-toast {
    position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 8; max-width: calc(100% - 24px); box-sizing: border-box;
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 4px 4px 12px;
    background: #171e28; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
    color: #e6e9ee; font: 400 13px/1.3 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; white-space: nowrap}
html:root body #lc-chart-container .lcd-toast .lcd-toast-t { overflow: hidden; text-overflow: ellipsis}
html:root body #lc-chart-container .lcd-toast .lcd-toast-b {
    margin: 0; height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; cursor: pointer; flex: none;
    color: #95ce5a; font: 500 13px/1 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; text-decoration: none; text-transform: none}
@media (hover: hover) {
    html:root body #lc-chart-container .lcd-bar button:not(.is-on):hover, html:root body #lc-chart-container .lcd-toast .lcd-toast-b:hover, html:root body #lc-chart-container .lct-chart-legend .lct-legend-x:hover { background: #1f2834; color: #e6e9ee}
}
@media (pointer: coarse) {
    html:root body #lc-chart-container .lcd-bar { gap: 2px}
    html:root body #lc-chart-container .lcd-bar .lcd-sw { width: 44px; height: 44px}
    html:root body #lc-chart-container .lcd-bar .lcd-del { height: 44px; padding: 0 14px}
    html:root body #lc-chart-container .lcd-toast .lcd-toast-b { height: 44px; padding: 0 14px}
}

/* поле текста на графике: вместо окна браузера */
html:root body #lc-chart-container input.lcd-text-in, html:root body #lc-chart-container input.lcd-text-in:focus {
    position: absolute; z-index: 8; width: 200px; height: 34px; margin: 0; padding: 0 10px; box-sizing: border-box;
    background: #171e28; color: #e6e9ee; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; box-shadow: none;
    font: 400 14px/1.2 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; outline: none}
html:root body #lc-chart-container input.lcd-text-in:focus-visible { outline: 2px solid #95ce5a; outline-offset: 1px}
html:root body #lc-chart-container input.lcd-text-in::placeholder { color: #949ca7; opacity: 1}
@media (pointer: coarse) { html:root body #lc-chart-container input.lcd-text-in, html:root body #lc-chart-container input.lcd-text-in:focus { height: 44px; font-size: 16px} }

/* легенда индикаторов на графике и подпись нижней панели: название, значения под перекрестием, крестик «убрать» */
html:root body #lc-chart-container .lct-chart-legend {
    position: absolute; top: 8px; left: 8px; z-index: 6; margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none}
html:root body #lctSubpaneChart .lct-sub-legend { position: absolute; top: 6px; left: 8px; z-index: 3; margin: 0; padding: 0; display: flex; pointer-events: none}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-item {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; margin: 0; padding: 0 2px 0 8px; box-sizing: border-box;
    background: rgba(10,13,18,.78); border: 0; border-radius: 6px;
    font: 400 13px/1 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #b3b9c2; white-space: nowrap}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-item > i { display: block; width: 10px; height: 2px; margin: 0; border-radius: 1px; flex: none}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-n { color: #e6e9ee}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-v { color: #b3b9c2; font-variant-numeric: tabular-nums}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-note { color: #949ca7}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-x {
    position: relative; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; box-sizing: border-box;
    border: 0; border-radius: 6px; background: transparent; color: #949ca7; cursor: pointer; pointer-events: auto; box-shadow: none}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-x svg { width: 14px; height: 14px}
html:root body #lctSubpaneChart .lct-sub-legend .lct-legend-x:focus-visible { outline: 2px solid #95ce5a; outline-offset: 1px}
@media (hover: hover) { html:root body #lctSubpaneChart .lct-sub-legend .lct-legend-x:hover { background: #1f2834; color: #e6e9ee} }
@media (pointer: coarse) {   /* зона касания 44 без роста плашки */
    :is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-x::after { content: ''; position: absolute; inset: -11px -11px -11px -11px}
}

/* ================= LCIND22_2026_10_22 — индикаторы (владелец 22.10: «в живом графике надо пополнить арсенал индикаторов, а то слишком мало»).
   Список на компьютере — по группам: «группа — кнопки», нижняя панель кнопками (выбранная — плиткой #252e3a, как флажки наложений);
   окно настроек у легенды; в легенде — «Настроить» и «Убрать»; у нижней панели — значения под перекрестием ================= */
html:root body .pro-chart-wrapper .lct-ind-pop {
    left: 0; right: auto; width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 160px)); overflow-y: auto;
    padding: 16px; box-sizing: border-box; display: block; overscroll-behavior: contain}
html:root body .pro-chart-wrapper .lct-ind-pop[hidden] { display: none}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-toolbar__group--ind { display: block !important; margin: 0 !important}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-sec { margin: 0 0 10px; padding: 0; font: 600 14px/1.3 "IBM Plex Sans", Arial, sans-serif; color: #e6e9ee}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-sec span { font-weight: 400; color: #949ca7}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-grp + .lct-ind-sec { margin-top: 18px}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-grp { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0 0 8px}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-gl { padding-top: 7px; font: 400 13px/1.3 "IBM Plex Sans", Arial, sans-serif; color: #949ca7}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-gc { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0}
/* подпись флажка — в span: общее правило темы «label span» красило её синим */
html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-chip .lct-ind-chip-t { color: inherit; font: inherit}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-chip { height: 32px; box-sizing: border-box}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-sub-chip { margin: 0; text-transform: none; letter-spacing: normal; line-height: 1.2; box-shadow: none; min-height: 0; min-width: 0}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-sub-chip.is-on { background: #252e3a !important; border-color: #252e3a !important; color: #fff !important}
html:root body .pro-chart-wrapper .lct-subpane-select[hidden] { display: none !important}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-foot { display: flex; justify-content: flex-end; margin-top: 12px}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-clear {
    margin: 0; height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: #171e28; color: #e6e9ee; box-shadow: none; cursor: pointer;
    font: 500 13px/1 "IBM Plex Sans", Arial, sans-serif; text-transform: none; letter-spacing: normal}
html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-clear[hidden] { display: none}
@media (hover: hover) { html:root body .pro-chart-wrapper .lct-ind-pop .lct-ind-clear:hover { background: #1f2834}}
html:root body .pro-chart-wrapper .lct-ind-pop :is(.lct-ind-clear, .lct-sub-chip):focus-visible { outline: 2px solid #95ce5a; outline-offset: 2px}

/* легенда: «Настроить» — как крестик; на сенсорном экране между ними 22 px, чтобы у каждой кнопки была своя зона 44 */
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-set {
    position: relative; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; box-sizing: border-box;
    border: 0; border-radius: 6px; background: transparent; color: #949ca7; cursor: pointer; pointer-events: auto; box-shadow: none}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-set svg { width: 14px; height: 14px}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-set:focus-visible { outline: 2px solid #95ce5a; outline-offset: 1px}
@media (hover: hover) { :is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-set:hover { background: #1f2834; color: #e6e9ee}}
@media (pointer: coarse) {
    :is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-set { margin-right: 22px}
    :is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-set::after { content: ''; position: absolute; inset: -11px}
}
html:root body #lctSubpaneChart .lct-sub-legend .lct-legend-item { padding-left: 8px}

/* длинная строка легенды (у полос три значения) не уходит за край: значения обрезаются, кнопки «Настроить» и «Убрать» видны всегда */
html:root body #lc-chart-container .lct-chart-legend { max-width: calc(100% - 88px)}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) .lct-legend-item { max-width: 100%}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) :is(.lct-legend-n, .lct-legend-item > i, .lct-legend-set, .lct-legend-x) { flex: none}
:is(html:root body #lc-chart-container .lct-chart-legend, html:root body #lctSubpaneChart .lct-sub-legend) :is(.lct-legend-v, .lct-legend-note) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis}

/* окно настроек (общие правила окна и листа на телефоне — через :where, чтобы телефонные из css/live-chart-phone.css их перебивали): лист #121820 с рамкой .12 (всплывающий слой), поле — лунка #0a0d12, «Готово» — единственная зелёная */
html:root body #chart-widget-box .lct-ind-set {
    position: absolute; z-index: 70; width: 272px; margin: 0; padding: 14px; box-sizing: border-box;
    background: #121820; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.5);
    font: 400 13px/1.3 "IBM Plex Sans", Arial, sans-serif; color: #e6e9ee; text-align: left}
html:root body #chart-widget-box .lct-ind-set .lct-ind-set-h { margin: 0 0 12px; padding: 0; font: 600 14px/1.3 "IBM Plex Sans", Arial, sans-serif; color: #e6e9ee}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) .lct-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 0; cursor: default}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) .lct-set-l { font: 400 13px/1.3 "IBM Plex Sans", Arial, sans-serif; color: #b3b9c2}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) input.lct-set-in,
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) input.lct-set-in:focus {
    flex: none; width: 88px; height: 32px; margin: 0; padding: 0 10px; box-sizing: border-box; border: 0; border-radius: 6px; box-shadow: none; outline: none;
    background: #0a0d12; color: #e6e9ee; font: 400 14px/1 "IBM Plex Sans", Arial, sans-serif; text-align: right; font-variant-numeric: tabular-nums}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) input.lct-set-in:focus-visible { outline: 2px solid #95ce5a; outline-offset: 1px}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) input.lct-set-in[aria-invalid="true"] { color: #f43f5e}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) .lct-set-err { margin: 0 0 8px; padding: 0; font: 400 13px/1.3 "IBM Plex Sans", Arial, sans-serif; color: #f43f5e}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) .lct-set-err[hidden] { display: none}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) .lct-set-acts { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 0; padding: 0}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) :is(.lct-set-reset, .lct-set-ok) {
    margin: 0; height: 32px; padding: 0 12px; border: 0; border-radius: 6px; box-shadow: none; cursor: pointer;
    font: 500 13px/1 "IBM Plex Sans", Arial, sans-serif; text-transform: none; letter-spacing: normal}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) .lct-set-reset { background: #171e28; color: #e6e9ee}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) .lct-set-ok {
    background: #95ce5a; color: #0a0d12; font-weight: 600;
    background-image: linear-gradient(180deg, rgba(255,255,255,var(--bh-lit-g, .045)), rgba(255,255,255,0) var(--bh-lit-h, 56px)); box-shadow: inset 0 1px 0 rgba(255,255,255,var(--bh-lit-l, .085))}
@media (hover: hover) {
    html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) .lct-set-reset:hover { background: #1f2834}
    html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) .lct-set-ok:hover { background-color: #a3d76d}
}
html:root body :where(#chart-widget-box .lct-ind-set, .lcm-sheet) :is(.lct-set-reset, .lct-set-ok):focus-visible { outline: 2px solid #95ce5a; outline-offset: 2px}