/* =======================================
   StockSharp Trading Terminal — palette + base
   Default (no theme attr or data-bs-theme="dark") = dark.
   data-bs-theme="light" overrides the same tokens to a light scheme
   so both terminal and cabinet share one palette pivot — flipping
   the html attribute is enough to retheme everything that reads
   `var(--t-*)`.
   ======================================= */

:root {
    --t-bg: var(--bw-bg);
    --t-panel: var(--bw-panel);
    --t-border: var(--bw-border);
    --t-text: var(--bw-text);
    --t-text-dim: var(--bw-text-dim);
    --t-text-bright: var(--bw-text-bright);
    --t-accent: var(--bw-accent);
    --t-accent-hover: var(--bw-accent-hover);
    --t-accent-text: var(--bw-accent-text);
    --t-green: var(--bw-green);
    --t-green-hover: #0bb574;
    --t-red: var(--bw-red);
    --t-red-hover: #dd3b52;
    --t-green-bg: rgba(14, 203, 129, 0.08);
    --t-red-bg: var(--bw-red-bg);
    --t-green-flash: rgba(14, 203, 129, 0.25);
    --t-red-flash: rgba(246, 70, 93, 0.25);
    /* Text ON a direction-filled surface — the order pad's Buy/Sell buttons.
       Not --t-text-bright: that one flips with the scheme, and both fills stay
       dark enough for white in either. Scheme-independent, so the light block
       below does not repeat it. */
    --t-on-direction: #ffffff;
    /* Measured slots, not palette knobs. The order book writes a per-level bar
       width, heat share and sentiment split onto the element it just built and
       the packaged rules read them back; these are the "nothing measured yet"
       defaults, so a ladder renders before its first frame arrives. */
    --t-ob-bar: 0%;
    --t-ob-heat: 0%;
    --t-ob-sent: 50%;
    /* Warnings. Two shades on purpose: --t-orange marks an action that is
       destructive but not a cancel (reverse a position), --t-warning marks
       information the user should read (a rejection reason). Read by
       @stocksharp/trading-controls' stylesheet, which declares no token of
       its own. */
    --t-orange: #f0b90b;
    --t-warning: var(--bw-warning);
    --t-header: var(--bw-header);
    --t-hover: var(--bw-hover);
    --t-surface: var(--bw-surface);
    --t-accent-glow: rgba(252, 213, 53, 0.18);
    --t-accent-glow-soft: rgba(252, 213, 53, 0.12);
    --t-font: 'DM Sans', -apple-system, sans-serif;
    /* JetBrains Mono / Cascadia Code включают кириллицу — IBM Plex Mono нет,
       и для "Купить/Продать/Лимит/Рынок/Отменена" браузер уходит в sans-serif
       fallback, и таблица заявок выглядит иначе чем сделки/позиции. */
    --t-mono: 'JetBrains Mono', 'Cascadia Code', 'Cascadia Mono', 'Consolas', 'Liberation Mono', monospace;
    --t-radius: 3px;
    --t-transition: 180ms ease;
}

:root[data-bs-theme="light"] {
    --t-green-hover: #15803d;
    --t-red-hover: #b91c1c;
    --t-green-bg: rgba(22, 163, 74, 0.10);
    --t-green-flash: rgba(22, 163, 74, 0.22);
    --t-red-flash: rgba(220, 38, 38, 0.22);
    --t-orange: #b45309;
    --t-accent-glow: rgba(217, 119, 6, 0.15);
    --t-accent-glow-soft: rgba(217, 119, 6, 0.08);
}

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

/* The panel shell, the blotter table skin, the icon buttons and the whole
   watchlist moved to @stocksharp/trading-controls together with the controls
   that emit those class names — styles/trading-controls.css, which
   src/vendor-terminal.entry.ts folds into vendor-terminal.bundle.css. That
   bundle is linked ahead of this file, so a rule here still wins wherever the
   terminal wants to differ from the package's default. */

html, body {
    width: 100%;
    min-height: 100vh;
    background: var(--t-bg);
    color: var(--t-text);
    font-family: var(--t-font);
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Binance-style: let the page scroll vertically when content is taller than
   the viewport instead of cramming every panel into a single screen.
   On body and not on html: the viewport then takes body's overflow, so a
   Bootstrap modal, which locks scrolling with overflow:hidden on body and pads
   body by the scrollbar's width, removes the very scrollbar it pads for. On
   html the scrollbar would stay, and the padding would narrow the page -- and
   resize the chart -- under every popup. */
body {
    overflow-x: hidden;
    overflow-y: auto;
}

/* ========== ANIMATIONS ========== */
@keyframes priceUp {
    0% { color: var(--t-green); text-shadow: 0 0 8px rgba(14,203,129,0.4); }
    100% { text-shadow: none; }
}

@keyframes priceDown {
    0% { color: var(--t-red); text-shadow: 0 0 8px rgba(246,70,93,0.4); }
    100% { text-shadow: none; }
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

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

/* ========== TOP BAR ========== */
.terminal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 14px;
    background: var(--t-header);
    border-bottom: 1px solid var(--t-border);
    gap: 14px;
    flex-shrink: 0;
}

.topbar-left, .topbar-center, .topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.topbar-pair {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.terminal-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--t-accent);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--t-transition);
    letter-spacing: 0.3px;
}
.terminal-brand:hover { color: var(--t-accent); opacity: 0.75; }
.terminal-brand i { font-size: 18px; }
.terminal-brand-name { letter-spacing: 0.5px; }
.terminal-build-id {
    font-size: 10px;
    font-family: 'Consolas', 'Menlo', monospace;
    color: var(--t-text-dim);
    opacity: 0.6;
    margin-left: 6px;
    user-select: text;
}

.instrument-selector { position: relative; }

/* Topbar instrument selector — flat-label look à la Binance's /trade
   page, but interactive: clicking the symbol opens the same instrument
   picker the orderbook / chart-pane labels use, and a confirmed pick
   routes through terminalApp.switchSymbol → terminal-wide symbol
   change (chart, BBO, order entry, URL all follow). This is the
   single canonical "switch terminal symbol" entry point now that
   orderbook label clicks are strictly per-widget. */
.btn-terminal-select {
    background: transparent;
    border: none;
    color: var(--t-text-bright);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.3px;
    padding: 0;
    border-radius: var(--t-radius);
    cursor: pointer;
    transition: all var(--t-transition);
    font-family: var(--t-font);
    display: inline-flex;
    align-items: center;
    line-height: 1;
    gap: 4px;
}
.btn-terminal-select:hover { color: var(--t-accent); }
.btn-terminal-select .chevron { font-size: 12px; opacity: 0.6; }

.instrument-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    background: var(--t-panel);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    z-index: 1000;
    padding: 8px;
    margin-top: 4px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    animation: fadeIn 0.15s ease;
}
.instrument-search-dropdown input {
    background: var(--t-bg);
    border-color: var(--t-border);
    color: var(--t-text);
    margin-bottom: 6px;
    font-family: var(--t-font);
}
.instrument-search-dropdown input:focus {
    border-color: var(--t-accent);
    box-shadow: 0 0 0 2px var(--t-accent-glow-soft);
    outline: none;
}
.instrument-list {
    max-height: 300px;
    overflow-y: auto;
}
.instrument-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    cursor: pointer;
    border-radius: var(--t-radius);
    transition: background var(--t-transition);
}
.instrument-item:hover { background: var(--t-hover); }
.instrument-item .sym { font-weight: 600; color: var(--t-text-bright); font-family: var(--t-mono); font-size: 12px; }
.instrument-item .name { color: var(--t-text-dim); font-size: 11px; }
.instrument-item .exchange { font-size: 10px; color: var(--t-text-dim); background: var(--t-surface); padding: 1px 6px; border-radius: 2px; }

.price-display {
    display: flex;
    align-items: center;
    gap: 8px;
}
.current-price {
    font-family: var(--t-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--t-text-bright);
    transition: color 0.3s ease;
    letter-spacing: -0.5px;
    line-height: 1;
}
.current-price.flash-up { animation: priceUp 0.6s ease forwards; }
.current-price.flash-down { animation: priceDown 0.6s ease forwards; }

.price-change {
    font-family: var(--t-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}
.price-change.up { color: var(--t-green); }
.price-change.down { color: var(--t-red); }

.instrument-name {
    color: var(--t-text-dim);
    font-size: 11px;
    font-weight: 500;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 6px;
    border-left: 1px solid var(--t-border);
    margin-left: 4px;
    font-family: var(--t-mono);
}
.topbar-stats .ts-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
}
.topbar-stats .ts-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--t-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--t-font);
}
.topbar-stats .ts-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--t-text);
    white-space: nowrap;
}
.topbar-stats .ts-value.up { color: var(--t-green); }
.topbar-stats .ts-value.down { color: var(--t-red); }

.timeframe-selector { display: flex; gap: 2px; }
.btn-tf {
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
    background: transparent;
    color: var(--t-text-dim);
    border-radius: var(--t-radius);
    cursor: pointer;
    transition: all var(--t-transition);
    font-family: var(--t-font);
}
.btn-tf:hover { color: var(--t-text-bright); background: var(--t-hover); }
.btn-tf.active {
    background: var(--t-accent);
    color: var(--t-accent-text);
    border-color: var(--t-accent);
    box-shadow: 0 0 8px var(--t-accent-glow);
}

.topbar-right .form-select {
    background-color: var(--t-surface);
    border-color: var(--t-border);
    color: var(--t-text);
    font-size: 12px;
    max-width: 200px;
    font-family: var(--t-font);
    transition: border-color var(--t-transition);
}
.topbar-right .form-select:focus {
    border-color: var(--t-accent);
    box-shadow: 0 0 0 2px var(--t-accent-glow-soft);
}

.account-balance {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    padding: 2px 10px;
    font-family: var(--t-font-mono);
}
.account-balance .balance-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--t-green);
    letter-spacing: 0.02em;
}
.account-balance .balance-detail {
    font-size: 10px;
    color: var(--t-text-dim);
}


/* Sign In button (anonymous topbar) */
.btn-topbar-signin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--t-font);
    color: var(--t-accent);
    background: transparent;
    border: 1px solid var(--t-accent);
    border-radius: var(--t-radius);
    text-decoration: none;
    transition: all var(--t-transition);
    white-space: nowrap;
}
.btn-topbar-signin:hover {
    background: var(--t-accent);
    color: var(--t-accent-text);
}

/* A sign-in provider's button in the login modal: the second way in, under the password form. */
.login-external {
    display: block;
    margin-top: 10px;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--t-text-bright);
    border: 1px solid var(--t-border);
    border-radius: 5px;
    text-decoration: none;
    transition: all var(--t-transition);
}
.login-external:hover {
    color: var(--t-accent);
    border-color: var(--t-accent);
}

/* The sign-in modal (src/terminal/login-modal.ts). */
.login-modal .modal-content {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 10px;
}
.login-modal .modal-body {
    padding: 24px;
}
.login-modal-head {
    margin-bottom: 18px;
    text-align: center;
}
.login-modal-head .bi {
    font-size: 28px;
    color: var(--t-accent);
}
.login-modal-title {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--t-text-bright);
}
.login-modal-error {
    margin-bottom: 12px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--t-red);
    background: var(--t-red-bg);
    border: 1px solid var(--t-red-flash);
    border-radius: 5px;
}
.login-modal-tabs {
    display: flex;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--t-border);
}
.login-modal-tab {
    flex: 1;
    padding: 8px;
    font-size: 12px;
    color: var(--t-text-dim);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.login-modal-tab.active {
    color: var(--t-text-bright);
    border-bottom-color: var(--t-accent);
}
.login-modal-field {
    margin-bottom: 12px;
}
.login-modal-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--t-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.login-modal-field .form-control {
    font-size: 13px;
    color: var(--t-text-bright);
    background: var(--t-bg);
    border-color: var(--t-border);
}
.login-modal-field .login-modal-mono {
    font-family: monospace;
}
.login-modal-field .login-modal-code {
    text-align: center;
    letter-spacing: 6px;
}
.login-modal-submit {
    justify-content: center;
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    font-size: 13px;
    color: var(--t-accent-text);
    background: var(--t-accent);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.login-modal-register {
    margin-top: 10px;
    text-align: center;
}
.login-modal-register a {
    font-size: 11px;
    color: var(--t-text-dim);
}

/* ========== MAIN GRID ========== */
/* Binance-style 3-column layout: orderbook | (chart + order entry) | trade feed
   + a horizontal bottom strip (orders / positions) that spans all columns.
   Grid height grows with the viewport; on short viewports it stays at 900px
   and the whole page scrolls — panels never cram the chart into a postage stamp. */
.terminal-grid {
    display: grid;
    /* Left → right: chart+order-entry | tradefeed | orderbook+watchlist.
       Chart owns the elastic 1fr column, the two side rails are fixed. */
    grid-template-columns: 1fr 300px 260px;
    grid-template-rows: 1fr 240px;
    height: max(980px, calc(100vh - 44px - 24px));
    gap: 1px;
    background: var(--t-border);
}

/* GoldenLayout host — replaces .terminal-grid at runtime when GL boots.
   Same height envelope so the dock occupies the same vertical band as the
   old grid; GL itself manages internal sizing/splitters/tabs. */
.terminal-dock-host {
    width: 100%;
    height: max(980px, calc(100vh - 44px - 24px));
    position: relative;
}
.terminal-dock-host .lm_content > .terminal-panel {
    /* Panels moved into GL containers must fill the cell completely so
       chart canvases / orderbook rows render at the right size.
       (Legacy: kept for any straggler GL bundles; the dockview rules
       below are the live ones.) */
    width: 100%;
    height: 100%;
}

/* Dockview-era sizing. Each dockview panel's content is my renderer
   element (.terminal-dock-panel); it has to fill the dockview-given
   parent box so the cloned <template> (.terminal-panel) and the
   chart-container / orderbook / table inside it report a real size.
   Without this rule .chart-panel collapses to toolbar height, the
   chart's `height: calc(100% - 30px)` resolves to 0, and lightweight-
   charts paints a zero-size canvas — the "empty chart" symptom. */
.terminal-dock-host .terminal-dock-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.terminal-dock-host .terminal-dock-panel > .terminal-panel {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: 100%;
}

/* Custom dockview tab — terminal-docking registers it as the default
   tabComponent. Replaces the stock title+× with title + actions slot
   + ×, and terminal-docking moves the panel's per-controls (depth
   selector, view toggle, etc.) into the actions slot at panel boot.
   The in-panel `.panel-header` is then collapsed (its display is set
   to none from the lift helper) so only one row of chrome shows. */
.terminal-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 6px 0 10px;
    min-width: 0;
}
.terminal-tab-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
}
/* The actions slot grows to fill the space between title and close;
   contents are aligned to the right, so a small button row (depth /
   cols / spread) ends up flush with the close button on the right,
   while a wide control (watchlist's search input) can flex-grow to
   eat the available width. */
.terminal-tab-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    overflow: hidden;
}
/* Watchlist search row, after being lifted into the tab actions slot,
   should grow to use the available width — it's the most useful
   widget in the tab and we want it visible without truncation. */
.terminal-tab-actions > .watchlist-search-row {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    margin: 0;
}
.terminal-tab-actions > .watchlist-search-row .watchlist-search-input {
    width: 100%;
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
}

/* Orderbook lifted into the tab: position three groups along the row —
   symbol + depth selector cluster pinned LEFT (right after the tab
   title), view-selector + invert button float roughly to the CENTER,
   and the spread label + close button anchor RIGHT. The two
   `margin-left: auto` declarations consume the available flex slack
   on each side of the view-selector cluster. */
.terminal-tab-actions > .ob-view-selector { margin-left: auto; }
.terminal-tab-actions > .spread-label     { margin-left: auto; }
.terminal-tab-actions > .ob-symbol-label,
.terminal-tab-actions > .ob-depth-selector {
    margin-left: 0;
}
.terminal-tab-actions > .spread-label {
    font-size: 10px;
    color: var(--t-text-dim);
    white-space: nowrap;
}

/* Chart toolbar, once lifted into the tab actions slot, drops the
   separator-band look (border + own background) — the tab strip
   already has them — and keeps its own internal horizontal scroller
   so a wide toolbar doesn't blow the tab apart. The flex:1 lets it
   eat the remaining slot width; min-width:0 lets the inner overflow
   actually clip (without it, flex content expands to its intrinsic
   width and the scrollbar never engages). */
.terminal-tab-actions > .chart-toolbar {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0 4px;
    background: transparent;
    border: 0;
}

/* The chart panel's container has an inline `height: calc(100% - 30px)`
   that assumed the toolbar still occupied 30px of vertical space inside
   the panel. With the toolbar lifted into the tab, that gap turns into
   dead space at the top of the panel — pin the chart container to the
   full panel height instead. !important because we're overriding an
   inline style attribute set in Index.cshtml. */
.terminal-dock-host .chart-container {
    height: 100% !important;
}
.terminal-tab-close {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--t-text-dim);
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}
.terminal-tab-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--t-text);
}
/* Inactive tabs in a multi-tab group dim the title; dockview already
   sets .dv-inactive-tab on its wrapper, so we ride that. */
.dv-inactive-tab .terminal-tab-title { opacity: 0.6; }

/* Make the tab strip blend into the panel — no contrasting band at
   the top. Override every dockview CSS variable that paints chrome
   in the tab area (and the active/inactive panel tab background) to
   the panel's own background. The user's panel uses --t-panel; we
   keep that as the single source of truth. */
.terminal-dock-host {
    --dv-tabs-and-actions-container-background-color: var(--t-panel);
    --dv-group-view-background-color: var(--t-panel);
    --dv-activegroup-visiblepanel-tab-background-color: var(--t-panel);
    --dv-activegroup-hiddenpanel-tab-background-color: var(--t-panel);
    --dv-inactivegroup-visiblepanel-tab-background-color: var(--t-panel);
    --dv-inactivegroup-hiddenpanel-tab-background-color: var(--t-panel);
}

/* Mobile / landscape-phone: drop dockview's tab strip entirely. On a
   phone the tabs eat 30px of already-scarce vertical room, the close ×
   they advertise has no easy "restore" path (the topbar Panels menu is
   hidden on mobile too), and the mobile default layout puts each panel
   in its own group anyway — there's no in-group tab to switch between.
   Same two-clause query as docking._isMobile() so the two stay in sync. */
@media (max-width: 768px), (max-height: 500px) {
    .terminal-dock-host .dv-tabs-and-actions-container {
        display: none !important;
    }
}

/* GoldenLayout drag proxy — when the user drags a tab out of a multi-
   component stack, GL clones the whole component and positions it via
   its own offset math. The clone tends to drift far from the cursor on
   long drags, which reads as the panel "flying away". Hide it; the
   drop-target indicator (.lm_dropTargetIndicator) GL paints over the
   prospective drop zone is enough visual feedback without the wandering
   thumbnail. The drop logic itself is unaffected — only the proxy's
   visual is suppressed. */
.lm_dragProxy {
    display: none !important;
}
/* Drop indicator stays visible — it's the rectangular highlight GL
   paints over the stack/zone you're hovering, telling you where the
   tab will land. */
.lm_dropTargetIndicator {
    background: rgba(74, 158, 255, 0.18) !important;
    outline: 2px solid var(--t-accent) !important;
    outline-offset: -2px;
}

/* GoldenLayout tab strip — only shown when a stack actually holds 2+
   components (i.e. the user has merged panels). Single-component stacks
   stay clean and the panel's own .panel-header is the only chrome.
   .lm_stack-no-tabs is toggled by terminal-docking._refreshTabStrips on
   every stateChanged event. */
.terminal-dock-host .lm_stack > .lm_header {
    background: var(--t-header) !important;
    border-bottom: 1px solid var(--t-border) !important;
    height: 22px !important;
    box-shadow: none !important;
}
.terminal-dock-host .lm_stack-no-tabs > .lm_header {
    display: none !important;
    height: 0 !important;
}
.terminal-dock-host .lm_header .lm_tabs {
    padding: 0 !important;
}
.terminal-dock-host .lm_header .lm_tab {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* Match the .panel-header look: tiny uppercase dim label, no flashy
       blue chrome. Keeps the dock tabs visually indistinguishable from the
       panel headers everywhere else in the terminal. */
    color: var(--t-text-dim) !important;
    font-family: var(--t-font);
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    height: 22px !important;
    line-height: 22px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    cursor: pointer !important;
}
.terminal-dock-host .lm_header .lm_tab .lm_title {
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: inherit !important;
}
.terminal-dock-host .lm_header .lm_tab.lm_active {
    background: transparent !important;
    color: var(--t-text-bright) !important;
    border-bottom: 1px solid var(--t-accent) !important;
}
.terminal-dock-host .lm_header .lm_close_tab,
.terminal-dock-host .lm_header .lm_controls {
    display: none !important;
}

/* When a panel sits in a stack that has GL tabs (i.e., merged with at
   least one other panel), the GL tab strip already shows the panel
   title, so the panel's own .panel-header is duplicate chrome. Hide
   it. Single-component stacks have .lm_stack-no-tabs (set by
   _refreshTabStrips) — there the panel-header stays visible since
   GL's strip is collapsed.
   Action buttons (cancel-selected / cancel-all / refresh) live in the
   .panel-rail inside .panel-body, not in .panel-header, so hiding the
   header here is safe for every panel including activeOrdersPanel. */
.terminal-dock-host .lm_stack:not(.lm_stack-no-tabs) .terminal-panel > .panel-header {
    display: none;
}
/* Exceptions — panels whose .panel-header carries interactive controls
   (symbol label/input + depth selector for orderbook; view toggle for
   tradefeed). Hiding them in multi-tab stacks would strand the controls
   behind the GL tab strip, so keep the panel-header visible for these
   types regardless of tab mode. */
.terminal-dock-host .lm_stack:not(.lm_stack-no-tabs) .orderbook-panel > .panel-header,
.terminal-dock-host .lm_stack:not(.lm_stack-no-tabs) .tradefeed-panel > .panel-header {
    display: flex;
}

/* PanelDragSwap drop-target highlight — colour reflects intent:
     drop on top quarter  → swap (yellow/amber outline)
     drop on body         → merge as tab (accent blue outline + wash) */
.terminal-panel.drop-target-swap {
    outline: 3px solid var(--t-orange, #f0b90b) !important;
    outline-offset: -3px;
    background-color: rgba(240, 185, 11, 0.06);
}
.terminal-panel.drop-target-merge {
    outline: 3px solid var(--t-accent) !important;
    outline-offset: -3px;
    background-color: rgba(74, 158, 255, 0.10);
}
/* Fallback for old class still used by legacy sites. */
.terminal-panel.drop-target:not(.drop-target-swap):not(.drop-target-merge) {
    outline: 3px solid var(--t-accent) !important;
    outline-offset: -3px;
}
/* Drag splitters between cells — match the resize-handle style we use
   elsewhere so the whole UI looks consistent. */
.terminal-dock-host .lm_splitter {
    background: var(--t-border) !important;
    transition: background 0.15s ease;
}
.terminal-dock-host .lm_splitter:hover {
    background: var(--t-accent) !important;
    opacity: 0.6;
}

/* GoldenLayout's bundled dark-theme stylesheet hard-codes
   `.lm_goldenlayout { background: #000 }`, which leaks through every
   inter-panel gap when our theme switches to light (panels are white,
   splitters are light grey, but the container behind shows pure black
   bands). Force the GL canvas to use our `--t-bg` so the gaps fade
   into the page on both themes. */
.terminal-dock-host .lm_goldenlayout {
    background: var(--t-bg) !important;
}

.terminal-center {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    /* Chart gets the lion's share (1fr, floor enforced by the outer grid);
       order entry needs ~280px to fit all rows + Buy/Sell CTA without
       internal scroll (tabs → Amount → % row → Total → TP/SL toggle → Max
       → submit button + estimate). */
    grid-template-rows: 1fr 280px;
    gap: 1px;
    background: var(--t-border);
    min-height: 0;
    min-width: 0;
}

.terminal-right {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    /* Only the Market Trades feed lives here now — watchlist moved to
       .terminal-left, "My Trades" moved to bt-tabs. One row is fine. */
    grid-template-rows: 1fr;
    gap: 1px;
    background: var(--t-border);
    min-height: 0;
}

.terminal-left {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    /* Three rows: primary orderbook, optional extras stack, watchlist.
       The middle row is `auto` so it takes zero space when empty
       (extras-container :empty is hidden) and grows naturally as the
       user pins extra orderbooks. */
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1px;
    background: var(--t-border);
    min-height: 0;
}
.terminal-left > .terminal-panel {
    min-height: 0;
}

/* Chart panel doesn't have a panel-header — toolbar takes its slot.
   The close button is the last toolbar button (after fullscreen) so it
   shares the toolbar's height/styling instead of floating absolute and
   overlapping other buttons. */

.terminal-bottom {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--t-border);
    min-height: 0;
}

/* ========== PANELS ========== */
.terminal-panel:nth-child(1) { animation-delay: 0s; }
.terminal-panel:nth-child(2) { animation-delay: 0.05s; }
.terminal-panel:nth-child(3) { animation-delay: 0.1s; }

/* ========== CHART ========== */
.chart-panel { min-height: 0; }
#chartContainer { width: 100%; height: 100%; }

/* ========== BOTTOM PANEL GROUP ========== */
/* The four trading-data panels — Open Orders, Order History, Trade
   History, Positions — used to live as .bt-pane children of one
   bottomTabsPanel with a custom .bt-tabs strip on top. Now they're
   four independent .terminal-panel docks; the GL native tab strip
   handles the tab UI when they share a stack. The single-tab "(N)"
   badge in the active-orders title still uses .bt-count. */
.bt-count {
    color: var(--t-text-dim);
    font-weight: 400;
    font-size: 10px;
}

/* ========== EMPTY STATES ========== */
.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 60px;
    color: var(--t-text-dim);
    font-size: 11px;
    font-style: italic;
    opacity: 0.6;
}

/* ========== STATUS BAR ========== */
.terminal-statusbar {
    height: 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    background: var(--t-header);
    border-top: 1px solid var(--t-border);
    font-size: 11px;
    color: var(--t-text-dim);
    flex-shrink: 0;
}
.terminal-statusbar .status-left,
.terminal-statusbar .status-right {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.terminal-statusbar .status-left { white-space: nowrap; }

.terminal-statusbar .hotkeys-hint {
    font-size: 10px;
    color: var(--t-text-dim);
    opacity: 0.5;
    font-family: var(--t-mono);
}

.terminal-statusbar .hotkeys-hint kbd {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 2px;
    padding: 0 4px;
    font-size: 9px;
    font-family: var(--t-mono);
    color: var(--t-text);
}

.status-ticker {
    overflow: hidden;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
}
.status-ticker-track {
    display: flex;
    gap: 24px;
    white-space: nowrap;
    animation: tickerScroll 60s linear infinite;
    animation-play-state: running;
    will-change: transform;
}
.status-ticker:hover .status-ticker-track {
    animation-play-state: paused;
}
.status-ticker-track .tk {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--t-mono);
    font-size: 11px;
}
.status-ticker-track .tk-sym { color: var(--t-text-bright); font-weight: 500; }
.status-ticker-track .tk-price { color: var(--t-text); }
.status-ticker-track .tk-chg.up { color: var(--t-green); }
.status-ticker-track .tk-chg.down { color: var(--t-red); }

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.status-link {
    color: var(--t-text-dim);
    text-decoration: none;
    font-size: 11px;
    font-family: var(--t-font);
    transition: color var(--t-transition);
}
.status-link:hover { color: var(--t-accent); }

/* The notifications bell is the only <button> in .status-right; reset
   the default UA chrome so it sits flat next to the <a> links. */
.status-icon-btn {
    background: transparent;
    border: 0;
    padding: 0 2px;
    cursor: pointer;
    line-height: 1;
}
.status-icon-btn i { font-size: 13px; }

/* Notifications settings popover — anchored above the status bar's
   right edge (the bell sits in .status-right) and floats over the
   trading layout. Mirrors the dark "panel" look so it reads as part
   of the terminal chrome rather than a stock OS dialog. */
.notifications-popover {
    position: fixed;
    bottom: 30px;
    right: 8px;
    width: 260px;
    background: var(--t-panel);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    color: var(--t-text-bright);
    font-family: var(--t-font);
    font-size: 12px;
    padding: 10px;
    z-index: 1080;
}
.notifications-popover[hidden] { display: none; }
.notifications-popover-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--t-text-dim);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--t-border);
    margin-bottom: 8px;
}
.notifications-popover .ntf-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
}
.notifications-popover .ntf-row input[type="checkbox"] { margin: 0; }
.notifications-popover .ntf-row input[type="checkbox"]:disabled + span { color: var(--t-text-dim); cursor: not-allowed; }
.notifications-popover .ntf-row-master { font-weight: 600; padding-bottom: 8px; }
.notifications-popover .ntf-row-foreground {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--t-border);
    font-size: 11px;
    color: var(--t-text-dim);
}
.notifications-popover .ntf-events {
    border: 0;
    margin: 4px 0 0;
    padding: 0;
}
.notifications-popover .ntf-events legend {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--t-text-dim);
    padding: 0;
    margin-bottom: 4px;
}
.notifications-popover .ntf-hint {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--t-text-dim);
    line-height: 1.4;
}
.notifications-popover .ntf-hint[hidden] { display: none; }

/* ========== SCROLLBARS ========== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--t-border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--t-text-dim); }

/* ========== RESPONSIVE ========== */
/* Tablet — tighten side rails, keep 3-column */
@media (max-width: 1200px) and (min-width: 993px) {
    .terminal-grid {
        grid-template-columns: 1fr 260px 220px;
    }
}

/* Small laptop — drop the tradefeed middle rail to keep chart breathing
   room. Orderbook+watchlist (right rail now) stays because L2/symbol-pick
   are higher-value than the tape. */
@media (max-width: 992px) and (min-width: 769px) {
    .terminal-grid {
        grid-template-columns: 1fr 220px;
    }
    .terminal-right { display: none; }
    .terminal-left { grid-column: 2; }
    .topbar-center { display: none; }
    .topbar-stats { display: none; }
}

/* Medium laptop — hide instrument name and day stats to keep topbar compact */
@media (max-width: 1280px) and (min-width: 993px) {
    .instrument-name { display: none; }
    .topbar-stats .ts-item:nth-child(4) { display: none; }
}

/* Phone — single-column stacked flex layout. The two-clause query
   matches portrait phones (width ≤ 768) OR landscape phones (height
   ≤ 500). iPhone Pro landscape is ~932×430 — wider than 768 but the
   short height makes the desktop chrome unusable, so we still want
   the mobile compactions. terminal-docking and panel-resizer test the
   same query string verbatim in JS — keep them in sync if you change
   it. The packaged controls state their own phone rules in the same
   query, in the stylesheet that ships with them. */
@media (max-width: 768px), (max-height: 500px) {
    body { overflow-x: hidden; overflow-y: auto; }

    /* Mobile: drastically compact order-entry to fit the panel without
       any inner scrollbar. Each column has 11+ rows on desktop (avbl,
       price, stop, qty, %-row, total, tpsl-toggle, tpsl, foot, button,
       estimate) — too tall for a phone panel ~25% of viewport. Hide
       secondary rows, halve input heights, drop padding. The user
       still gets type tabs, qty, optional price, and the Buy/Sell
       button — enough to place an order one-handed. */
    /* Portfolio selector squeezes hard on a phone topbar — the
       full label "Test Trading (USD)" pushes the theme/lang/user
       cluster onto a second row. Cap it tight; the chevron + first
       few chars + ellipsis are still enough to identify the
       portfolio, and tapping opens the full list. */
    .topbar-right #portfolioSelect {
        max-width: 110px;
        text-overflow: ellipsis;
    }

    .order-entry-content { padding: 4px 6px; gap: 3px; overflow: hidden; }
    .order-entry-split { gap: 6px; }
    .oe-col { padding: 4px 6px; gap: 2px; }
    .order-entry-content .order-type-tabs { padding: 0; gap: 4px; }
    .order-entry-content .order-type-tabs .btn-ot { padding: 4px 6px; font-size: 11px; }
    .oe-col .oe-avbl,
    .oe-col .oe-total,
    .oe-col .oe-tpsl-toggle,
    .oe-col .oe-tpsl,
    .oe-col .oe-foot,
    .oe-col .oe-estimate { display: none; }
    .oe-col .oe-field { gap: 2px; }
    .oe-col .oe-field input { height: 28px; padding: 0 6px; }
    .oe-col .oe-pct-row { gap: 4px; }
    .oe-col .oe-pct-row .btn-oe-pct { padding: 2px 4px; font-size: 10px; }
    .oe-col .btn-oe-submit { padding: 8px; font-size: 13px; }


    /* Hide all panel-close `×` buttons on mobile. The mobile layout is
       a fixed single-column stack defined by defaultMobileConfig — there
       is no UI to add panels back, so closing one would strand the user
       without a way to recover the orderbook / order-entry / tradefeed.
       Same for the buttons that open a second panel of a kind — the
       orderbook's `+` and the trade feed's: a duplicated panel is a
       desktop arrangement, and the extra row would just push everything
       off the fold. */
    .panel-close-btn,
    .orderbook-panel .ob-close-btn,
    .orderbook-panel .ob-add-btn,
    .tradefeed-panel .panel-add-btn,
    .chart-panel-close,
    /* Topbar dropdown that spawns extra panels — same reasoning as
       hiding `×` and `+`. The mobile stack is fixed; new components
       would just push existing ones below the fold. Two selectors
       so the rule still hits even when Razor hasn't been recompiled
       to render the explicit `topbar-panels-menu` class on the
       wrapper. */
    .topbar-panels-menu,
    .terminal-topbar .dropdown:has(> #panelsMenu) { display: none !important; }

    .terminal-topbar {
        flex-wrap: wrap;
        padding: 6px 8px;
        gap: 6px;
        height: auto;
        min-height: 44px;
    }
    /* Binance-style mobile header:
         row 1: BRAND (left) | portfolio/lang/user (right)
         row 2: instrument+price (left col) | 2x2 stats (right col)
       topbar-left uses `display: contents` so its children (brand +
       topbar-pair) become direct flex items of .terminal-topbar and can
       order independently. */
    .topbar-left { display: contents; }

    .topbar-left > .terminal-brand {
        order: 1;
        flex: 0 0 auto;
    }
    .topbar-right {
        order: 2;
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 6px;
        min-width: 0;
    }
    .topbar-center { display: none; }

    .topbar-pair {
        order: 3;
        flex: 1 1 100%;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 4px;
        align-items: center;
        padding-top: 4px;
        border-top: 1px solid var(--t-border);
    }
    .topbar-pair > .instrument-selector { grid-column: 1; grid-row: 1; }
    .topbar-pair > .price-display {
        grid-column: 1; grid-row: 2;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }
    .topbar-pair > .topbar-stats {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
    .instrument-name { display: none; }
    .current-price { font-size: 22px; line-height: 1; letter-spacing: -0.5px; }
    .price-change { font-size: 12px; }

    /* Interactive dropdown back on mobile — chevron returns, button gets
       pointer events + muted background. */
    .btn-terminal-select {
        background: var(--t-surface);
        border: 1px solid var(--t-border);
        padding: 3px 10px;
        font-size: 15px;
        cursor: pointer;
        pointer-events: auto;
    }
    .btn-terminal-select .chevron { display: inline; font-size: 11px; margin-left: 4px; }
    .btn-terminal-select:hover { background: var(--t-hover); border-color: var(--t-accent); }

    /* Right column: 2x2 grid of 24h stats, compact.
       Keep total width bounded so the instrument/price column gets the
       majority of the header width. */
    .topbar-stats {
        grid-area: stats;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 4px 10px;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        font-family: var(--t-mono);
        max-width: 56vw;
    }
    .topbar-stats .ts-item {
        min-width: 0;
        align-items: flex-start;
    }
    .topbar-stats .ts-item:nth-child(4) { display: flex; }
    .topbar-stats .ts-label {
        font-size: 9px;
        line-height: 1.1;
        white-space: nowrap;
    }
    .topbar-stats .ts-value {
        font-size: 10px;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .timeframe-selector { overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
    .timeframe-selector .btn-tf { flex-shrink: 0; }
    .user-email { display: none; }

    /* Mobile GL fallback: the .terminal-grid is hidden on mobile (GL
       takes over via defaultMobileConfig), but the panel children
       (.chart-panel, .order-entry-panel, .tradefeed-panel) get cloned
       into the dock-host and the legacy stacked-flex sizing leaks in.
       Scope all height/min-height fallbacks under .terminal-grid so
       they only apply when GL didn't init. */
    .terminal-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 44px - 24px);
        overflow: visible;
    }
    .terminal-grid .terminal-panel { flex-shrink: 0; }

    .terminal-grid .terminal-center {
        display: flex;
        flex-direction: column;
    }
    .terminal-grid .chart-panel { height: 55vh; min-height: 300px; }
    /* Тулбар на mobile: явно display:flex + min-height, чтобы не схлопывался
       в нулевую высоту когда mobile-режим срабатывает (например при открытии
       DevTools на десктопе viewport уменьшается → срабатывает media-query
       → если родитель сжимает toolbar до 0, юзер не видит ТФ/типы графика). */
    .chart-toolbar {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        min-height: 32px !important;
        -webkit-overflow-scrolling: touch;
    }
    /* `!important` because the desktop chart-toolbar baseline at the
       bottom of this file sets `.chart-toolbar .mc-layout-btns` to
       `inline-flex` at the same specificity and later source order,
       which would otherwise un-hide the multi-chart layout buttons on
       mobile (multi-instrument is desktop-only). */
    .chart-toolbar .btn-drawing-tool,
    .chart-toolbar .mc-layout-btns,
    .chart-toolbar .btn-fullscreen { display: none !important; }
    /* Drop the now-orphan vertical dividers that bracket the hidden
       multi-chart / fullscreen / close-panel buttons. Without this
       three pipe `|` separators stack at the end of the toolbar with
       nothing between them. */
    .chart-toolbar .toolbar-separator:has(+ .mc-layout-btns),
    .chart-toolbar .toolbar-separator:has(+ .btn-fullscreen),
    .chart-toolbar .toolbar-separator:has(+ .chart-panel-close) { display: none !important; }

    .terminal-grid .terminal-right {
        display: flex;
        flex-direction: column;
    }
    /* Hide both side rails on phone — instrument discovery lives in the
       topbar dropdown-search, price discovery in the chart. */
    .terminal-grid .terminal-left { display: none; }
    .terminal-grid .tradefeed-panel { min-height: 200px; }

    .terminal-grid .terminal-bottom {
        display: flex;
        flex-direction: column;
        grid-column: auto;
    }
    .terminal-grid .order-entry-panel { min-height: 200px; }
    .terminal-grid .orders-panel,
    .terminal-grid .positions-panel { min-height: 220px; }

    /* Larger touch targets */
    .btn-tf { padding: 6px 10px; }
    .form-control-sm { font-size: 14px; padding: 8px 10px; }

    .terminal-statusbar {
        font-size: 10px;
        padding: 4px 8px;
        grid-template-columns: 1fr auto;
    }
    .status-ticker { display: none; }
    .hotkeys-hint { display: none; }
}

/* ========== TOAST NOTIFICATIONS ========== */
.terminal-toast {
    position: fixed;
    bottom: 40px;
    right: 16px;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    z-index: 9999;
    animation: toast-in 0.25s ease;
    font-family: var(--t-font);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.terminal-toast.success { background: var(--t-green); color: #fff; }
.terminal-toast.error {
    background: var(--t-red);
    color: #fff;
    /* Make errors harder to miss — wider, bolder. */
    max-width: 560px;
    padding: 12px 16px 12px 22px;
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(246, 70, 93, 0.55);
    border-left: 4px solid #fff;
}
.terminal-toast.warning {
    background: #f5a623;
    color: #1a1a1a;
    font-weight: 600;
}
.terminal-toast.info { background: var(--t-accent); color: var(--t-accent-text); }
.terminal-toast-msg { margin-right: 12px; }
.terminal-toast-close {
    display: inline-block;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.75;
    transition: opacity var(--t-transition);
}
.terminal-toast-close:hover { opacity: 1; }
.terminal-toast.hiding {
    animation: toast-out 0.2s ease forwards;
}

.disconnect-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--t-red);
    color: #fff;
    text-align: center;
    padding: 6px 12px;
    font-family: var(--t-font);
    font-size: 13px;
    font-weight: 500;
    animation: toast-in 0.3s ease;
}
.disconnect-banner i { margin-right: 6px; }

/* ========== CHART TOOLBAR ========== */
.chart-toolbar {
    display: flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--t-header);
    border-bottom: 1px solid var(--t-border);
    gap: 2px;
    flex-shrink: 0;
    height: 30px;
    /* Pack everything on one line; horizontal scroll if the center column is
       narrow. flex-wrap:nowrap stops content spilling onto a second row
       that would collide with the chart. Dropdowns inside (TF "More",
       Drawings menu) escape this overflow via position:fixed — see the
       per-menu rule below — so we get both: scroll along the toolbar AND
       full-height dropdown menus. */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
/* Toolbar dropdowns escape the toolbar's overflow clip by detaching to the
   viewport. Bootstrap's popper still computes top/left correctly because
   none of the toolbar ancestors has a `transform` that would re-anchor a
   fixed element. */
/* Ручное позиционирование — chart-toolbar.ts сам открывает/закрывает
   .show через addClass/removeClass (Bootstrap data-API в нашем layout
   не работает: что-то перехватывает click до Bootstrap-а). */
.chart-toolbar .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 1080;
    min-width: 130px;
}
.chart-toolbar .dropdown-menu.show {
    display: block;
}
.chart-toolbar {
    overflow: visible !important;
}
.chart-toolbar .dropdown,
.chart-toolbar .timeframe-selector,
.chart-toolbar .chart-type-selector {
    position: relative;
}
/* Floating exit-button когда панель раскрыта на весь экран — viewport
   правый верхний угол. Без этого после fullscreen нет способа вернуть
   панель назад, юзер должен жать Escape. */
/* (Перешли на native Fullscreen API — браузер сам показывает кнопку выхода
   и обрабатывает Esc, плюс DockView не ломает layout. Старый css-overlay
   убран.) */
/* Legend chart-type dropdown — стилизуем как тулбарный (Bootstrap
   dropdown-menu / .dropdown-item + наши кастомные .btn-toolbar). */
.chart-legend .legend-ct-toggle {
    background: transparent;
    border: 1px solid var(--t-border);
    border-radius: 3px;
    color: var(--t-text-dim);
    padding: 1px 6px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
}
.chart-legend .legend-ct-toggle:hover {
    color: var(--t-text-bright);
    background: var(--t-hover);
}
.chart-legend-floating-ct-menu {
    min-width: 130px;
    padding: 4px 0;
    background: var(--t-panel);
    border: 1px solid var(--t-border);
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-family: var(--t-mono);
}
.chart-legend-floating-ct-menu .legend-ct-item {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--t-text);
    padding: 4px 12px;
    font-size: 11px;
}
.chart-legend-floating-ct-menu .legend-ct-item:hover {
    background: var(--t-hover);
    color: var(--t-text-bright);
}
.chart-legend-floating-ct-menu .legend-ct-item i {
    margin-right: 6px;
    color: var(--t-text-dim);
}
.chart-toolbar > * { flex-shrink: 0; }
.chart-toolbar .toolbar-separator {
    width: 1px;
    height: 18px;
    background: var(--t-border);
    margin: 0 6px;
}
/* Uniform 24px height for every clickable toolbar item. Without this, .btn-tf
   inherits Bootstrap's line-height:1.5 while .btn-toolbar is icon-only, so the
   two render at different heights and the row appears wavy. Forcing one height
   + inline-flex centering aligns all icons on a single baseline regardless of
   the wrapper (.timeframe-selector, .dropdown.tf-more-wrap, .mc-layout-btns,
   .dropdown.drawings-dropdown). */
.chart-toolbar .btn-tf,
.chart-toolbar .btn-toolbar {
    height: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.chart-toolbar .btn-tf { padding: 0 10px; }
.chart-toolbar .btn-toolbar {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
    background: transparent;
    color: var(--t-text-dim);
    border-radius: var(--t-radius);
    cursor: pointer;
    transition: all var(--t-transition);
    font-family: var(--t-font);
    white-space: nowrap;
    gap: 4px;
}
.chart-toolbar .timeframe-selector,
.chart-toolbar .mc-layout-btns,
.chart-toolbar .tf-more-wrap,
.chart-toolbar .drawings-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.chart-toolbar .btn-toolbar:hover {
    color: var(--t-text-bright);
    background: var(--t-hover);
}
.chart-toolbar .btn-toolbar.active {
    background: var(--t-accent);
    color: var(--t-accent-text);
    border-color: var(--t-accent);
}
.chart-toolbar .btn-toolbar i { font-size: 12px; }

/* ========== CHART SIDE TOOLS (vertical drawing sidebar) ========== */
.chart-side-tools {
    position: absolute;
    left: 0;
    top: 30px;
    bottom: 0;
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    background: var(--t-bg-2, #1a1d24);
    border-right: 1px solid var(--t-border);
    z-index: 8;
    overflow-y: auto;
    overflow-x: hidden;
}
.chart-side-tools .btn-side-tool {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--t-text-dim);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0;
    font-size: 14px;
}
.chart-side-tools .btn-side-tool:hover {
    background: var(--t-hover);
    color: var(--t-text-bright);
}
.chart-side-tools .btn-side-tool.active {
    background: var(--t-accent-bg, rgba(74,158,255,0.15));
    border-color: var(--t-accent, #4a9eff);
    color: var(--t-accent, #4a9eff);
}
.chart-side-tools .side-tools-separator {
    width: 24px;
    height: 1px;
    background: var(--t-border);
    margin: 4px 0;
}

/* ========== CHART LEGEND ========== */
.chart-legend {
    position: absolute;
    /* Anchored inside .chart-panes-wrapper now (see chart-pane-manager.js)
       — the wrapper starts right below the toolbar, so legend sits a few
       pixels in from the top-left of the chart canvas itself. The 48px
       left offset clears the new vertical drawing sidebar (40px + 8px gap). */
    top: 6px;
    left: 48px;
    z-index: 10;
    font-family: var(--t-mono);
    font-size: 11px;
    color: var(--t-text-dim);
    /* Каждый элемент легенды (OHLC основного инструмента + каждый индикатор)
       — на отдельной строке. column направление + align flex-start, чтобы
       строки не растягивались на всю ширину легенды. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    /* Capture mouse events anywhere in the legend strip so the chart's
       crosshair-move stops firing while the user reads / aims at the row.
       Previously this was `none` so the chart kept tracking through the
       legend — every cursor pixel changed the indicator numbers, the row
       reflowed, and the × / ✎ buttons walked away from the cursor.
       chart-legend.js additionally calls chart.clearCrosshairPosition() on
       mouseenter so the existing vertical line vanishes immediately. */
    pointer-events: auto;
    /* Clip to the primary chart's tile width — overflow:hidden on the
       wrapper handles horizontal clipping, but a hard right boundary
       prevents the legend from elbowing the price scale on narrow tiles. */
    max-width: calc(100% - 16px);
}
.chart-legend .legend-item {
    white-space: nowrap;
}
.chart-legend .legend-up { color: var(--t-green); }
.chart-legend .legend-down { color: var(--t-red); }
.chart-legend .legend-vol { color: var(--t-text-dim); }
.chart-legend .legend-time { color: var(--t-text-dim); }
.chart-legend .legend-indicators {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* OHLC = одна свечная серия = одна строка легенды. Все items (Time / O / H /
   L / C / V) inline в один row с пробелами — слипания "22:14O 0.49…" больше
   не происходит. Каждый индикатор отдельно идёт через .legend-indicators
   (column) — то есть OHLC одна строка, ниже каждый индикатор на своей. */
.chart-legend .legend-ohlcv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.chart-legend .legend-indicator {
    white-space: nowrap;
    /* Numeric values inside the row update on every crosshair-move; without
       tabular-nums + a stable minimum width the row reflows pixel-by-pixel
       and the edit/× buttons walk away from under the cursor — making it
       impossible to click them. min-width is also applied to .legend-value
       below so multi-line indicators don't bounce either. */
    font-variant-numeric: tabular-nums;
    align-items: center;
    /* Capture the mouse here so hovering ON the indicator row blocks the
       chart's crosshair-move underneath — which stops the row's values from
       updating every pixel of cursor travel. The buttons inside the row
       still receive clicks; the chart crosshair just briefly disappears
       while the user reads / aims at the × / ✎ icon. */
    pointer-events: auto;
}
.chart-legend .legend-value {
    display: inline-block;
    min-width: 56px;
    font-variant-numeric: tabular-nums;
}
/* Indicator name label before a multi-output value run (Ichimoku, MACD, …).
   Keep it dim so the coloured numbers read first. */
.chart-legend .legend-ind-name,
.chart-pane-header .pane-ind-name {
    color: var(--t-text-dim);
    font-weight: 600;
    margin-right: 4px;
}
.chart-legend .legend-edit-btn,
.chart-legend .legend-remove-btn,
.chart-pane-header .legend-edit-btn,
.chart-pane-header .legend-remove-btn {
    cursor: pointer;
    color: var(--t-text-dim);
    font-size: 11px;
    margin-left: 2px;
    padding: 0 4px;
    border-radius: 3px;
    opacity: 0.55;
    transition: opacity var(--t-transition), background var(--t-transition), color var(--t-transition);
    user-select: none;
    /* .chart-legend has pointer-events:none so crosshair tracking stays unblocked;
       opt the interactive buttons back in so clicks actually register. */
    pointer-events: auto;
}
.chart-legend .legend-edit-btn:hover,
.chart-pane-header .legend-edit-btn:hover {
    opacity: 1;
    color: var(--t-accent);
    background: rgba(252,213,53,0.12);
}
.chart-legend .legend-remove-btn,
.chart-pane-header .legend-remove-btn {
    font-size: 13px;
    line-height: 1;
}
.chart-legend .legend-remove-btn:hover,
.chart-pane-header .legend-remove-btn:hover {
    opacity: 1;
    color: var(--t-sell);
    background: rgba(246,70,93,0.15);
}
.active-indicator-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.active-indicator-actions {
    display: flex;
    gap: 4px;
}

/* ========== CHART SUB-PANES ========== */
.chart-panes-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Anchor #chartLegend (position:absolute) to this wrapper so it
       follows the primary chart's tile in multi-chart layouts and gets
       clipped by overflow:hidden instead of overflowing the neighbouring
       tile. */
    position: relative;
}
.chart-sub-pane {
    position: relative;
}
.chart-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px 8px;
    background: var(--t-header);
    border-bottom: 1px solid var(--t-border);
    height: 20px;
    flex-shrink: 0;
}
.chart-pane-header .pane-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--t-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
/* Live values for the indicators drawn on this sub-pane — painted by
   ChartLegend._paintSubPaneValues on every tick. Grows in the middle
   of the header, label on the left, × on the right. */
.chart-pane-header .pane-values {
    flex: 1;
    min-width: 0;
    font-family: var(--t-mono);
    font-size: 10px;
    color: var(--t-text-dim);
    margin-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.chart-pane-header .pane-values .pane-value {
    margin-right: 10px;
}
.chart-pane-header .pane-close-btn {
    background: none;
    border: none;
    color: var(--t-text-dim);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
    transition: color var(--t-transition);
}
.chart-pane-header .pane-close-btn:hover {
    color: var(--t-red);
}

/* ========== MULTI-CHART ========== */
.multi-chart-grid {
    width: 100%;
    height: calc(100% - 30px);
    display: grid;
    gap: 1px;
    background: var(--t-border);
}
.multi-chart-grid.mc-1x1 { grid-template: 1fr / 1fr; }
.multi-chart-grid.mc-2x1 { grid-template: 1fr / 1fr 1fr; }
.multi-chart-grid.mc-1x2 { grid-template: 1fr 1fr / 1fr; }
.multi-chart-grid.mc-2x2 { grid-template: 1fr 1fr / 1fr 1fr; }

.mc-panel {
    background: var(--t-panel);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color var(--t-transition);
}
.mc-panel.mc-active {
    border-color: var(--t-accent);
}
/* When the primary chart wrapper is moved into multiChartGrid as slot 0,
   it needs to behave like any other grid cell (border, min-size, active
   ring) so the tiling layout looks uniform. Inline width:100%/height:100%
   from ChartPaneManager.init still works inside a grid cell. */
.multi-chart-grid > .chart-panes-wrapper.mc-primary {
    background: var(--t-panel);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color var(--t-transition);
    min-width: 0;
    min-height: 0;
}
.multi-chart-grid > .chart-panes-wrapper.mc-primary.mc-active {
    border-color: var(--t-accent);
}
.mc-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    background: var(--t-header);
    font-size: 10px;
    font-weight: 600;
    color: var(--t-text-dim);
    height: 22px;
    flex-shrink: 0;
}
.mc-panel-symbol {
    color: var(--t-text-bright);
    font-family: var(--t-mono);
    cursor: pointer;
    border-bottom: 1px dashed var(--t-text-dim);
    padding-bottom: 1px;
}
.mc-panel-symbol:hover {
    color: var(--t-accent);
    border-bottom-color: var(--t-accent);
}
.mc-panel-tf {
    color: var(--t-accent);
    font-family: var(--t-mono);
}
.mc-panel-legend {
    position: absolute;
    top: 24px;
    left: 8px;
    z-index: 10;
    font-family: var(--t-mono);
    font-size: 10px;
    color: var(--t-text-dim);
    pointer-events: none;
}
/* Placeholder shown in an empty multi-chart panel before the user picks a
   symbol for it. Clicking anywhere in the pane — including this watermark —
   activates the pane and pops the top-bar instrument search open.
   z-index + pointer-events:auto guarantee the (otherwise empty) chart
   canvas below can't swallow the click. */
.mc-panel-empty {
    position: absolute;
    inset: 22px 0 0 0;
    z-index: 5;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--t-text);
    font-size: 14px;
    text-align: center;
    padding: 24px;
    cursor: pointer;
    transition: color var(--t-transition), background var(--t-transition);
}
.mc-panel-empty .bi {
    font-size: 52px;
    color: var(--t-accent);
    opacity: 0.55;
    transition: opacity var(--t-transition), transform var(--t-transition);
}
.mc-panel-empty-title {
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--t-text-bright);
}
.mc-panel-empty:hover {
    background: rgba(252, 213, 53, 0.06);
}
.mc-panel-empty:hover .bi {
    opacity: 1;
    transform: scale(1.08);
}
.mc-layout-btns {
    display: flex;
    gap: 2px;
}

/* ========== CHART FULLSCREEN ========== */
/* Native :fullscreen — браузер сам растягивает panel поверх всей
   страницы. Никаких position:fixed на наших элементах, никаких ~ sibling
   правил, скрывающих топбар/правую/нижнюю панель — браузерный fullscreen
   уже всё это перекрывает. */
.chart-panel:fullscreen {
    background: var(--t-panel);
    width: 100vw;
    height: 100vh;
}
/* Indicator-modal должен оставаться видимым над fullscreen-чартом.
   Внутри :fullscreen-стека z-index браузера обнуляется относительно
   top-layer, поэтому диалог надо рендерить ТОЖЕ как :fullscreen-child
   или через ::backdrop. Поскольку модал лежит в document.body,
   браузер автоматически кладёт top-layer элементы поверх него — но
   если pause: indicator-modal должен явно использовать ::backdrop
   класс или модал рендерится поверх :fullscreen-элемента и его
   z-index срабатывает обычно (testing required). */

/* Toolbar drawings dropdown — per-drawing rows live here as a backup
   to the on-chart × buttons. Bootstrap's default dropdown menu is wide
   and bright; restyle it to match the dim-monospace terminal look. */
.drawings-menu {
    min-width: 220px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    padding: 4px 0;
    font-family: var(--t-font);
    font-size: 11px;
}
.drawings-menu .dropdown-item,
.drawings-menu .dropdown-item-text {
    padding: 4px 10px;
    color: var(--t-text);
}
.drawings-menu .dropdown-item:hover {
    background: var(--t-hover);
    color: var(--t-text-bright);
}
.drawings-menu .drawings-menu-clear {
    color: var(--t-sell);
}
.drawings-menu .drawings-menu-divider {
    border-color: var(--t-border);
    margin: 4px 0;
}
.drawings-menu .drawings-menu-row-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--t-text);
}
.drawings-menu .drawings-menu-x {
    color: var(--t-text-dim);
    margin-left: 12px;
    font-size: 10px;
}
.drawings-menu .drawings-menu-row-btn:hover .drawings-menu-x {
    color: var(--t-sell);
}

/* Per-drawing × button: anchored at the endpoint of each drawing (right
   side of a trendline, top-right of a fibonacci band, right edge of a
   horizontal line). DOM sits above .drawing-canvas so clicks register
   even when no drawing tool is active. Bright by default — these are
   the only way to delete one specific drawing without wiping all. */
.drawing-del-btn {
    position: absolute;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 18px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    border-radius: 50%;
    border: 1.5px solid var(--t-sell);
    background: rgba(16, 20, 26, 0.95);
    color: var(--t-sell);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: opacity var(--t-transition), color var(--t-transition), background var(--t-transition), transform var(--t-transition);
}
.drawing-del-btn:hover {
    opacity: 1;
    color: #fff;
    background: var(--t-sell);
    transform: scale(1.15);
}

/* ========== DRAWING CANVAS ========== */
.drawing-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* ========== INDICATOR DIALOG ========== */
/* The dialog's own looks ship with @stocksharp/chart (styles/chart-ui.css, pulled into
   vendor-terminal.bundle.css). Only the Bootstrap chrome around it is this page's: the package
   draws the dialog's insides but knows nothing of .modal-content. */
.indicator-modal .modal-content {
    background: var(--t-panel);
    border: 1px solid var(--t-border);
    color: var(--t-text);
}
.indicator-modal .modal-header {
    border-bottom: 1px solid var(--t-border);
    padding: 8px 12px;
}
.indicator-modal .modal-header .modal-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--t-text-bright);
}
.indicator-modal .modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

/* ========== AUTH GATE MODAL ========== */
.auth-gate-modal .modal-content {
    background: var(--t-panel);
    border: 1px solid var(--t-border);
    color: var(--t-text);
    text-align: center;
}
.auth-gate-modal .modal-body {
    padding: 30px 24px;
}
.auth-gate-modal .auth-gate-icon {
    font-size: 48px;
    color: var(--t-accent);
    margin-bottom: 16px;
}
.auth-gate-modal .auth-gate-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--t-text-bright);
    margin-bottom: 8px;
}
.auth-gate-modal .auth-gate-message {
    font-size: 13px;
    color: var(--t-text-dim);
    margin-bottom: 20px;
}
.auth-gate-modal .btn-auth-signin {
    background: var(--t-accent);
    color: var(--t-accent-text);
    border: none;
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--t-radius);
    cursor: pointer;
    transition: all var(--t-transition);
    margin-bottom: 8px;
}
.auth-gate-modal .btn-auth-signin:hover {
    background: var(--t-accent-hover);
    box-shadow: 0 0 16px var(--t-accent-glow);
}
.auth-gate-modal .btn-auth-continue {
    background: none;
    border: none;
    color: var(--t-text-dim);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 12px;
}
.auth-gate-modal .btn-auth-continue:hover {
    color: var(--t-text);
}

/* ========== PANEL RESIZE HANDLES ========== */
.resize-handle {
    background: var(--t-border);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.resize-handle.rh-col {
    cursor: col-resize;
}
.resize-handle.rh-row {
    cursor: row-resize;
}
/* Extend grab area with invisible pseudo-element */
.resize-handle::after {
    content: '';
    position: absolute;
}
.resize-handle.rh-col::after {
    top: 0;
    bottom: 0;
    left: -3px;
    right: -3px;
    cursor: col-resize;
}
.resize-handle.rh-row::after {
    left: 0;
    right: 0;
    top: -3px;
    bottom: -3px;
    cursor: row-resize;
}
.resize-handle:hover {
    background: var(--t-accent);
    opacity: 0.6;
}
.resize-handle:active {
    background: var(--t-accent);
    opacity: 0.8;
}

/* ========== HOTKEY HELP MODAL ========== */
.hotkey-help-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
}
.hotkey-help-modal {
    background: var(--t-panel);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    padding: 24px 28px;
    min-width: 320px;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    text-align: center;
}
.hotkey-help-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--t-text-bright);
    margin-bottom: 16px;
}
.hotkey-help-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    text-align: left;
    font-size: 12px;
    color: var(--t-text);
    margin-bottom: 18px;
}
.hotkey-help-grid kbd {
    display: inline-block;
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    border-radius: 3px;
    padding: 1px 6px;
    font-family: var(--t-mono);
    font-size: 11px;
    color: var(--t-text-bright);
    min-width: 22px;
    text-align: center;
    margin-right: 6px;
}
.hotkey-help-close {
    margin-top: 4px;
}

/* Chart context menu (right-click on chart, see chart-context-menu.js). */
.chart-ctx-menu {
    position: fixed;
    z-index: 10001;
    min-width: 200px;
    background: var(--t-panel, #131820);
    border: 1px solid var(--t-border, #1e2633);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    padding: 4px 0;
    font-size: 12px;
    user-select: none;
}
.chart-ctx-item {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--t-text, #e0e6ed);
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}
.chart-ctx-item:hover:not(:disabled) {
    background: var(--t-hover, #1f2733);
}
.chart-ctx-item:disabled {
    color: var(--t-text-dim, #6b7a8d);
    cursor: default;
}
.chart-ctx-buy:not(:disabled) { color: #00c853; }
.chart-ctx-sell:not(:disabled) { color: #ff3d57; }
.chart-ctx-sep {
    height: 1px;
    background: var(--t-border, #1e2633);
    margin: 4px 0;
}
.chart-ctx-icon {
    display: inline-block;
    width: 1.1em;
    flex: 0 0 1.1em;
    margin-right: 8px;
    text-align: center;
    font-style: normal;
    opacity: 0.75;
}

/* Brief flash when chart-context-menu prefills the order-entry side. */
@keyframes orderSideFlash {
    0%   { box-shadow: 0 0 0 2px var(--t-accent, #4a9eff); }
    100% { box-shadow: 0 0 0 0   transparent; }
}
.order-side-flash {
    animation: orderSideFlash 600ms ease-out;
}