/**
 * TradeizChart.css - TradeizChart Component Styles
 * Version: 1.1.0
 * 
 * Required for TradeizChart.js to work properly.
 * Include this file in your HTML before using TradeizChart.
 */

/* ==========================================
   Theme Variables - Dark (Default)
   ========================================== */

/* [UPDATE] 2026-05-11 — pure black bg-primary per site-wide change.
 * --tc-bg-secondary is intentionally kept as rgba(18,18,18,.9): it is
 * used for floating panels (legend / tooltip / context menus) where a
 * non-zero opacity layer is needed to remain visually distinct over
 * the now-#000 chart surface. */
:root,
.tc-theme-dark {
    --tc-bg-primary: #0B0E11;
    --tc-bg-secondary: rgba(18, 18, 18, 0.9);
    --tc-bg-hover: rgba(40, 40, 40, 0.9);
    --tc-text-primary: #ffffff;
    --tc-text-secondary: #cccccc;
    --tc-text-muted: #999999;
    --tc-text-label: #bbbbbb;
    /* [UPDATE 2026-05-11] panel border darkened (#444 -> #2a2a2a) to
     * keep similar visual emphasis against new #000 chart bg.
     * Used by floating panels (legend, tooltip) that sit on top of
     * --tc-bg-secondary rgba(18,18,18,.9). */
    --tc-border-color: #2a2a2a;
    --tc-up-color: #00C896;
    --tc-down-color: #FF4D6A;
    --tc-up-bg: rgba(0, 200, 150, 0.2);
    --tc-down-bg: rgba(255, 77, 106, 0.2);
}

/* ==========================================
   Theme Variables - Light
   ========================================== */

.tc-theme-light {
    --tc-bg-primary: #ffffff;
    --tc-bg-secondary: rgba(245, 245, 245, 0.95);
    --tc-bg-hover: rgba(230, 230, 230, 0.95);
    --tc-text-primary: #000000;
    --tc-text-secondary: #333333;
    --tc-text-muted: #666666;
    --tc-text-label: #555555;
    --tc-border-color: #dddddd;
    --tc-up-color: #00C896;
    --tc-down-color: #FF4D6A;
    --tc-up-bg: rgba(0, 200, 150, 0.15);
    --tc-down-bg: rgba(255, 77, 106, 0.15);
}

/* ==========================================
   Core Chart Container Styles
   ========================================== */

.tc-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    contain: layout style;
}

/* [2026-04-19] Main chart area: fills entire wrapper, hosts LightweightCharts v5 single instance with native multi-pane */
.tc-main-area {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Active price reminders are canvas-aligned but DOM-based so the clock has
   accessible long-press/context-menu controls on both Web and App WebViews. */
.tc-alert-marker-layer,
.tc-calendar-marker-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 12;
}

.tc-calendar-marker {
    position: absolute;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tt-down, #ef5350);
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-50%, 0);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.tc-calendar-marker svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tc-calendar-marker--high {
    color: var(--tt-down, #ef5350);
}

.tc-calendar-marker--medium {
    color: #f59e0b;
}

.tc-calendar-marker--low {
    color: var(--tc-text-secondary, #787b86);
}

.tc-calendar-marker__count {
    position: absolute;
    top: -4px;
    right: -5px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: var(--tc-bg-primary);
    border: 1px solid currentColor;
    color: inherit;
    font: 700 9px/12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-sizing: border-box;
}

.tc-alert-marker,
.tc-alert-price-label {
    position: absolute;
    transform: translateY(-50%);
}

.tc-alert-marker {
    left: 10px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tc-text-primary);
    cursor: pointer;
    pointer-events: auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
    touch-action: none;
}

.tc-theme-light .tc-alert-marker {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.tc-alert-marker svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tc-alert-price-label {
    right: 6px;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--tc-border-color);
    background: var(--tc-bg-secondary);
    color: var(--tc-text-primary);
    font: 600 10px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* [2026-04-19] Per-pane control overlay container: absolutely positioned over native pane DOM elements.
   The bottom-pane collapse case is handled by JS auto-hiding the .tc-logo, so a plain z-index
   above heatmap/series layers is enough. */
.tc-pane-overlays {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

/* Per-pane overlay: full-width strip across pane top, info on the LEFT, action buttons on the RIGHT (left of price axis) */
.tc-pane-overlay {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    font-size: 13px;
    color: var(--tc-text-secondary);
    pointer-events: none;
    user-select: none;
    z-index: 11;
    line-height: 1;
    /* Width is set inline by JS to (paneWidth - priceAxisWidth), so buttons sit exactly to the
       left of the price axis. A small extra padding keeps a 4px gap from the axis line. */
    padding-right: 4px;
}

/* Left cluster: indicator name + colon + real-time value */
.tc-pane-overlay-info {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    pointer-events: auto;
}

.tc-pane-overlay-label {
    font-weight: 500;
    color: var(--tc-text-secondary);
}

.tc-pane-overlay-sep {
    color: var(--tc-text-muted);
}

.tc-pane-overlay-value {
    color: var(--tc-text-primary);
    min-width: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tc-pane-overlay-value.up { color: var(--tc-up-color); }
.tc-pane-overlay-value.down { color: var(--tc-down-color); }
.tc-pane-overlay-value.neutral { color: var(--tc-text-primary); }

/* [2026-05-22] Pane loading spinner — sits inline with the label so the user
   instantly sees "this pane is alive and fetching data" instead of staring at
   an empty frozen pane. Renders as a small 11x11 spinning ring next to the
   indicator name. Removed when setPaneLoading(type, false) is called. */
.tc-pane-overlay-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 6px;
    border: 1.5px solid rgba(128, 128, 128, 0.25);
    border-top-color: var(--tc-text-primary);
    border-radius: 50%;
    animation: tc-pane-spin 0.8s linear infinite;
    vertical-align: middle;
    flex-shrink: 0;
}

@keyframes tc-pane-spin {
    to { transform: rotate(360deg); }
}

/* Right cluster: action buttons — hidden until pane hover (desktop) or tap-focus (touch) */
.tc-pane-overlay-actions {
    display: inline-flex;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    pointer-events: none;
    border-radius: 4px;
    padding: 1px 2px;
    margin-right: 4px;
    background: color-mix(in srgb, var(--tc-text-muted) 10%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .tc-pane-overlay:hover .tc-pane-overlay-actions,
    .tc-pane-overlay.is-focused .tc-pane-overlay-actions {
        opacity: 1;
        pointer-events: auto;
        background: var(--tc-bg-secondary);
    }
}

.tc-pane-overlay-btn {
    width: 20px;
    height: 20px;
    padding: 3px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--tc-text-muted) 35%, transparent);
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.tc-pane-overlay-btn:hover {
    border-color: var(--tc-text-muted);
    background: var(--tc-bg-hover);
}

.tc-pane-overlay-btn svg {
    width: 12px;
    height: 12px;
    color: var(--tc-text-muted);
    transition: color 0.15s;
}

.tc-pane-overlay-actions:hover .tc-pane-overlay-btn svg {
    color: var(--tc-text-secondary);
}

.tc-pane-overlay-btn:hover svg {
    color: var(--tc-text-primary);
}

.tc-pane-overlay-btn[data-action="delete"]:hover,
.tc-pane-overlay-btn-danger:hover {
    border-color: #ef4444;
}

.tc-pane-overlay-btn[data-action="delete"]:hover svg,
.tc-pane-overlay-btn-danger:hover svg {
    color: #ef4444;
}
/* Logo (bottom-left branding) - positioned above time axis */
.tc-logo {
    position: absolute;
    bottom: 46px; /* 26px time axis + 20px offset */
    left: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 100;
    pointer-events: none;
    user-select: none;
}

.tc-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-text-primary);
    line-height: 1;
}

.tc-logo-icon svg {
    display: block;
    vertical-align: middle;
}

.tc-logo-text {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    color: var(--tc-text-primary);
    letter-spacing: 0.02em;
    line-height: 1;
    display: flex;
    align-items: center;
}

.tc-main-chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: crosshair;
    /* [PERF] Force GPU layer for main chart */
    transform: translateZ(0);
    will-change: contents;
}

.tc-main-chart canvas,
.tc-main-chart > div {
    cursor: inherit;
}

/* [FIX] 2026-07-14 — force lightweight-charts subtree transparent.
   Some lwc builds still paint an opaque pane/table background even when
   layout.background is transparent, which fully occludes z-index:0
   order-heatmap canvas under main-chart in both dark/light themes.
   [FIX] 2026-07-30 — exclude the 1px pane-separator td (colspan=3) so
   LWC layout.panes.separatorColor stays visible at rest; hover highlight
   remains the inner resize handle (separatorHoverColor). */
.tc-main-chart .tv-lightweight-charts,
.tc-main-chart .tv-lightweight-charts table,
.tc-main-chart .tv-lightweight-charts tr,
.tc-main-chart .tv-lightweight-charts td:not([colspan="3"]),
.tc-main-chart .tv-lightweight-charts canvas {
    background-color: transparent !important;
}

.tc-main-chart:active,
.tc-main-chart:active canvas,
.tc-main-chart:active > div {
    cursor: grabbing;
}

/* [2026-03-13] Elements inside tc-main-area use absolute positioning */
.tc-main-area .tc-main-chart,
.tc-main-area .tc-predicted-heatmap-canvas,
.tc-main-area .tc-pixi-canvas,
.tc-main-area .tc-footprint-canvas,
.tc-main-area .tc-visible-extrema,
.tc-main-area .tc-drawing-layer,
.tc-main-area .tc-watermark,
.tc-main-area .tc-ohlc-panel,
.tc-main-area .tc-legend-panel,
.tc-main-area .tc-countdown {
    position: absolute;
}

.tc-pixi-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    /* [PERF] Force GPU layer */
    transform: translateZ(0);
}

.tc-predicted-heatmap-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    transform: translateZ(0);
}

.tc-footprint-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    /* [PERF] Force GPU layer */
    transform: translateZ(0);
}

.tc-drawing-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

/* Allow selection/editing in cursor/delete mode */
.tc-drawing-layer.interactive {
    pointer-events: all;
    cursor: crosshair;
}

.tc-drawing-layer.interactive:active {
    cursor: grabbing;
}

/* Active drawing mode */
.tc-drawing-layer.drawing {
    pointer-events: all;
    cursor: crosshair;
}

.tc-drawing-layer.drawing:active {
    cursor: grabbing;
}

.tc-visible-extrema {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.tc-extrema-tag {
    position: absolute;
    transform: translate(-50%, -110%);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    display: none;
}

.tc-extrema-tag-high {
    color: var(--tc-up-color);
    background: color-mix(in srgb, var(--tc-up-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tc-up-color) 40%, transparent);
}

.tc-extrema-tag-low {
    color: var(--tc-down-color);
    background: color-mix(in srgb, var(--tc-down-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tc-down-color) 40%, transparent);
    transform: translate(-50%, 10%);
}

/* ==========================================
   Countdown Display - Below Y-Axis Last Price Label
   [FIX] 2026-04-21 (v3) -- Brand-blue chip aligned with .fp-btn.active
   Reason: unify accent color across the toolbar (footprint selector active
           state uses #2962ff); the countdown chip is a secondary accent and
           should inherit the same brand hue so the UI reads as one system.
   Change: background = #2962ff (same as --accent-color fallback); keep white
           text / 12px / 600 weight; width = full price-axis width (set by
           JS); font-size 12px / line-height matching lightweight-charts
           default price label (~12px text + 4px vertical padding = 20px
           total height); centered text.
   Warning: width and left are written by _updateCountdownPosition in JS so
           the chip exactly overlays the right price-axis lane; do NOT add a
           border-radius / margin / box-shadow that would visually break the
           "stacked under the price label" alignment.
   ========================================== */

.tc-countdown {
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #FFFFFF;
    background: #2962ff;
    border: none;
    border-radius: 0;
    padding: 4px 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    text-align: center;
    display: none;
}

/* ==========================================
   Chart Context Header - inline with OHLC row
   ========================================== */

.tc-chart-context {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 4px;
    margin-right: 4px;
    min-width: 0;
    max-width: 100%;
    pointer-events: none;
    user-select: none;
}

.tc-chart-context-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-shrink: 1;
}

.tc-chart-context-icon-wrap {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-chart-context-coin-icon,
.tc-chart-context-exchange-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: contain;
}

.tc-chart-context-coin-fallback {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #a78bfa;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    display: flex;
}

.tc-chart-context-symbol-text {
    font-weight: 600;
    color: var(--tc-text-primary);
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
}

.tc-chart-context-exchange-text {
    color: var(--tc-text-secondary);
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
}

/* ==========================================
   OHLC Panel - Top Left Price Data Display
   ========================================== */

.tc-ohlc-panel {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 76px;
    z-index: 10;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    row-gap: 4px;
    gap: 12px;
    width: auto;
    max-width: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
    font-size: 12px;
    pointer-events: none;
    user-select: none;
}

/* [FIX] 2026-06-24 — hide OHLC metrics when no candle data is ready.
   Keep symbol/exchange context visible; suppress placeholder "-" fields. */
.tc-ohlc-panel.is-empty .tc-ohlc-time,
.tc-ohlc-panel.is-empty .tc-ohlc-item,
.tc-ohlc-panel.is-empty .tc-ohlc-change,
.tc-ohlc-panel.is-empty .tc-ohlc-divider {
    display: none;
}

.tc-ohlc-panel.is-empty .tc-ohlc-symbol:empty {
    display: none;
}

.tc-ohlc-symbol {
    font-weight: 600;
    color: var(--tc-text-primary);
    font-size: 13px;
}

.tc-ohlc-time {
    color: var(--tc-text-secondary);
    font-size: 11px;
}

.tc-ohlc-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.tc-ohlc-label {
    color: var(--tc-text-label);
    font-size: 11px;
}

.tc-ohlc-value {
    font-weight: 500;
    font-size: 12px;
}

.tc-ohlc-value.up {
    color: var(--tc-up-color);
}

.tc-ohlc-value.down {
    color: var(--tc-down-color);
}

.tc-ohlc-value.neutral {
    color: var(--tc-text-secondary);
}

.tc-ohlc-change {
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 500;
}

.tc-ohlc-change.up {
    background: var(--tc-up-bg);
    color: var(--tc-up-color);
}

.tc-ohlc-change.down {
    background: var(--tc-down-bg);
    color: var(--tc-down-color);
}

.tc-ohlc-divider {
    width: 1px;
    height: 12px;
    background: var(--tc-border-color);
    margin: 0 4px;
}

/* ==========================================
   Legend Panel - Top Left Indicator Display
   ========================================== */

.tc-legend-panel {
    position: absolute;
    top: 24px;
    left: 4px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: auto;
    max-width: 300px;
}

.tc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: var(--tc-bg-secondary);
    border-radius: 3px;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    white-space: nowrap;
    user-select: none;
}

.tc-legend-item:hover {
    background: var(--tc-bg-hover);
}

.tc-legend-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.tc-legend-label {
    color: var(--tc-text-label);
    font-weight: 500;
}

.tc-legend-value {
    color: var(--tc-text-primary);
    margin-left: 2px;
}

.tc-legend-remove {
    margin-left: 4px;
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    color: var(--tc-text-muted);
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
}

.tc-legend-remove:hover {
    background: var(--tc-down-bg);
    color: var(--tc-down-color);
}

/* Legend group for same category (e.g., all MAs together) */
.tc-legend-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tc-legend-group-title {
    font-size: 10px;
    color: var(--tc-text-muted);
    padding: 2px 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================
   Toast Notifications
   ========================================== */

.tc-toast-container {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    max-width: 90%;
}

.tc-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 100%;
    word-break: break-word;
}

.tc-toast-visible {
    opacity: 1;
    transform: translateY(0);
}

.tc-toast-hiding {
    opacity: 0;
    transform: translateY(-10px);
}

/* Toast position variants */
.tc-toast-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tc-toast-bottom {
    position: fixed;
    bottom: 20px;
}

/* Toast type styles */
/* Info uses Binance yellow (#F0B90B) as default */
.tc-toast-info {
    background: linear-gradient(135deg, #3d3109 0%, #5c4a0e 100%);
    border: 1px solid rgba(240, 185, 11, 0.4);
    color: #fff8e1;
}

.tc-toast-success {
    background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #e8f5e9;
}

.tc-toast-warning {
    background: linear-gradient(135deg, #5c4813 0%, #7a5f1a 100%);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #fff8e1;
}

.tc-toast-error {
    background: linear-gradient(135deg, #5c1313 0%, #8b1a1a 100%);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #ffebee;
}

.tc-toast-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.tc-toast-message {
    flex: 1;
    line-height: 1.4;
}

.tc-toast-close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.tc-toast-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* ===== [RESPONSIVE-2026-05-14] BEGIN =====
 * Touch-device adjustments for TradeizChart library overlays.
 * - Pane action buttons cannot rely on hover; show them always on touch.
 * - Logo can shrink to make room on tiny viewports.
 * Rollback: delete this entire block.
 */
@media (hover: none), (pointer: coarse) {
    .tc-pane-overlay.is-focused .tc-pane-overlay-actions {
        opacity: 1 !important;
        pointer-events: auto;
        background: var(--tc-bg-secondary);
    }
    .tc-pane-overlay-btn {
        width: 24px;
        height: 24px;
        padding: 4px;
    }
    .tc-pane-overlay-btn svg {
        width: 14px;
        height: 14px;
    }
    .tc-legend-remove {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 480px) {
    .tc-logo {
        bottom: 32px;
        left: 8px;
    }
    .tc-logo-text { font-size: 10px; }
    .tc-ohlc-panel {
        top: 2px;
        left: 2px;
        right: 60px;
    }
    .tc-chart-context { column-gap: 8px; row-gap: 2px; }
    .tc-ohlc-symbol { font-size: 11px; }
    .tc-chart-context-symbol-text { font-size: 11px; }
    .tc-chart-context-exchange-text { font-size: 10px; }
    .tc-ohlc-value,
    .tc-ohlc-change,
    .tc-ohlc-time { font-size: 10px; }
    .tc-pane-overlays { left: 2px; }
    .tc-legend-panel {
        max-width: 240px;
        font-size: 10px;
    }
}
/* ===== [RESPONSIVE-2026-05-14] END ===== */