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

        html, body {
            height: 100%;
            width: 100%;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #0a0e27;
            color: #e0e0e0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* ============================================
           EMBED MODE STYLES
           Hide header/footer, full height chart
           Disable interactive features for demo
           ============================================ */
        body.embed-mode .header {
            display: none !important;
        }

        body.embed-mode .main-container {
            margin-top: 0 !important;
        }

        body.embed-mode .chart-toolbar {
            top: 8px !important;
        }

        body.embed-mode .chart-ohlc-wrapper {
            top: 28px !important;
        }

        /* Hide timeframe buttons in embed mode */
        body.embed-mode .timeframe-group,
        body.embed-mode .timeframe-divider {
            display: none !important;
        }

        /* Disable drawing tools in embed mode */
        body.embed-mode .drawing-tool-btn:not([data-tool="cursor"]):not([data-tool="crosshair"]) {
            opacity: 0.3 !important;
            pointer-events: none !important;
            cursor: not-allowed !important;
        }

        /* Disable pattern detection in embed mode */
        body.embed-mode .pattern-dropdown {
            opacity: 0.3 !important;
            pointer-events: none !important;
        }

        /* Disable screenshot in embed mode */
        body.embed-mode .screenshot-btn {
            opacity: 0.3 !important;
            pointer-events: none !important;
        }

        /* Hide analysis panel toggle in embed mode */
        body.embed-mode .panel-toggle-btn {
            display: none !important;
        }

        /* Hide right panel in embed mode */
        body.embed-mode .right-panel {
            display: none !important;
        }

        /* Disable symbol selector in embed mode */
        body.embed-mode .toolbar-symbol-selector select {
            pointer-events: none !important;
            opacity: 0.7 !important;
            background: transparent !important;
        }

        /* Add demo badge in embed mode */
        body.embed-mode::after {
            content: 'DEMO';
            position: fixed;
            bottom: 12px;
            right: 12px;
            background: rgba(0, 212, 170, 0.15);
            border: 1px solid rgba(0, 212, 170, 0.3);
            color: #00d4aa;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1px;
            z-index: 9999;
            pointer-events: none;
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #131722;
            height: 40px;
            padding: 0 20px;
            border-bottom: 1px solid #2a2e39;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
            z-index: 1001;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .logo {
            font-size: 18px;
            font-weight: bold;
            color: #2962ff;
        }

        .symbol-selector {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .symbol-selector select {
            background: #1e222d;
            color: #e0e0e0;
            border: 1px solid #363a45;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            outline: none;
            min-width: 110px;
            height: 26px;
            box-sizing: border-box;
        }

        .symbol-selector select:hover {
            border-color: #2962ff;
        }

        /* Toolbar symbol selector - smaller version */
        .toolbar-symbol-selector select {
            background: #1e222d;
            color: #e0e0e0;
            border: 1px solid #363a45;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            outline: none;
            min-width: 100px;
            height: 26px;
            box-sizing: border-box;
        }

        .toolbar-symbol-selector select:hover {
            border-color: #2962ff;
        }

        /* Symbol category colors - for options */
        .toolbar-symbol-selector select option.symbol-forex {
            background: #1a237e;
            color: #90caf9;
        }
        .toolbar-symbol-selector select option.symbol-metals {
            background: #4a148c;
            color: #ce93d8;
        }
        .toolbar-symbol-selector select option.symbol-indexes {
            background: #004d40;
            color: #80cbc4;
        }
        .toolbar-symbol-selector select option.symbol-commodities {
            background: #bf360c;
            color: #ffab91;
        }
        .toolbar-symbol-selector select option.symbol-cryptos {
            background: #f57f17;
            color: #fff59d;
        }

        /* Smooth transition for select background */
        .toolbar-symbol-selector select {
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 13px;
        }

        /* User Menu Styles */
        .user-menu {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .login-btn {
            background: linear-gradient(135deg, #2962ff 0%, #1e4bd8 100%);
            color: white;
            border: none;
            padding: 6px 16px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            height: 28px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .login-btn:hover {
            background: linear-gradient(135deg, #3d73ff 0%, #2962ff 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(41, 98, 255, 0.3);
        }

        .user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2962ff 0%, #1e4bd8 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .user-avatar:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(41, 98, 255, 0.4);
        }

        .user-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            background: #1e222d;
            border: 1px solid #2a2e39;
            border-radius: 8px;
            min-width: 180px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.2s ease;
            z-index: 1100;
        }

        .user-dropdown.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .user-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            color: #e0e0e0;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.15s ease;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }

        .user-dropdown-item:first-child {
            border-radius: 8px 8px 0 0;
        }

        .user-dropdown-item:last-child {
            border-radius: 0 0 8px 8px;
        }

        .user-dropdown-item:hover {
            background: rgba(41, 98, 255, 0.15);
        }

        .user-dropdown-item svg {
            width: 16px;
            height: 16px;
            stroke: #787b86;
        }

        .user-dropdown-divider {
            height: 1px;
            background: #2a2e39;
            margin: 4px 0;
        }

        /* Auth Modal Styles */
        .auth-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .auth-modal-overlay.visible {
            opacity: 1;
            visibility: visible;
        }

        .auth-modal {
            background: #1e222d;
            border: 1px solid #2a2e39;
            border-radius: 12px;
            width: 100%;
            max-width: 380px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
            transform: scale(0.95) translateY(20px);
            transition: all 0.3s ease;
        }

        .auth-modal-overlay.visible .auth-modal {
            transform: scale(1) translateY(0);
        }

        .auth-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px 16px;
            border-bottom: 1px solid #2a2e39;
        }

        .auth-modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #e0e0e0;
        }

        .auth-modal-close {
            background: none;
            border: none;
            color: #787b86;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.15s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .auth-modal-close:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #e0e0e0;
        }

        .auth-modal-body {
            padding: 24px;
        }

        .auth-tabs {
            display: flex;
            gap: 4px;
            background: #131722;
            border-radius: 8px;
            padding: 4px;
            margin-bottom: 24px;
        }

        .auth-tab {
            flex: 1;
            background: none;
            border: none;
            color: #787b86;
            padding: 10px 16px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .auth-tab:hover {
            color: #e0e0e0;
        }

        .auth-tab.active {
            background: #2962ff;
            color: white;
        }

        .auth-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .auth-form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .auth-form-label {
            font-size: 12px;
            font-weight: 500;
            color: #787b86;
        }

        .auth-form-input {
            background: #131722;
            border: 1px solid #2a2e39;
            border-radius: 6px;
            padding: 12px 14px;
            color: #e0e0e0;
            font-size: 14px;
            transition: all 0.2s ease;
            outline: none;
        }

        .auth-form-input:focus {
            border-color: #2962ff;
            box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15);
        }

        .auth-form-input::placeholder {
            color: #4a4e5a;
        }

        .auth-submit-btn {
            background: linear-gradient(135deg, #2962ff 0%, #1e4bd8 100%);
            color: white;
            border: none;
            padding: 14px 24px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-top: 8px;
        }

        .auth-submit-btn:hover {
            background: linear-gradient(135deg, #3d73ff 0%, #2962ff 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(41, 98, 255, 0.3);
        }

        .auth-submit-btn:active {
            transform: translateY(0);
        }

        .auth-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 8px 0;
        }

        .auth-divider-line {
            flex: 1;
            height: 1px;
            background: #2a2e39;
        }

        .auth-divider-text {
            font-size: 12px;
            color: #787b86;
        }

        .auth-forgot {
            font-size: 12px;
            color: #2962ff;
            text-decoration: none;
            cursor: pointer;
            align-self: flex-end;
        }

        .auth-forgot:hover {
            text-decoration: underline;
        }

        .auth-error {
            background: rgba(239, 83, 80, 0.1);
            border: 1px solid rgba(239, 83, 80, 0.3);
            border-radius: 6px;
            padding: 10px 14px;
            color: #ef5350;
            font-size: 13px;
            display: none;
        }

        .auth-error.visible {
            display: block;
        }

        .panel-toggle-btn {
            background: transparent;
            color: #787b86;
            border: 1px solid #363a45;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.15s ease;
            height: 26px;
            min-width: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .panel-toggle-btn svg {
            width: 16px;
            height: 16px;
        }

        .panel-toggle-btn:hover {
            background: rgba(41, 98, 255, 0.15);
            border-color: #2962ff;
            color: #e0e0e0;
        }

        .panel-toggle-btn.active {
            background: rgba(41, 98, 255, 0.25);
            border-color: #2962ff;
            color: #2962ff;
        }

        /* Chart OHLC Overlay - positioned top-right of chart, before price axis */
        .chart-ohlc-overlay {
            display: flex;
            gap: 12px;
            background: rgba(19, 23, 34, 0.85);
            padding: 6px 10px;
            border-radius: 4px;
            border: 1px solid rgba(42, 46, 57, 0.5);
            transition: opacity 0.15s ease;
        }

        .ohlc-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .ohlc-label {
            color: #787b86;
            font-size: 10px;
            font-weight: 500;
        }

        .ohlc-value {
            font-weight: 600;
            font-size: 11px;
            color: #e0e0e0;
        }

        .ohlc-value.high {
            color: #26a69a;
        }

        .ohlc-value.low {
            color: #ef5350;
        }

        /* Visibility Toggle Button */
        .visibility-toggle-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: rgba(19, 23, 34, 0.85);
            border: 1px solid rgba(42, 46, 57, 0.5);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .visibility-toggle-btn svg {
            width: 18px;
            height: 18px;
        }

        /* Objects toggle - Yellow */
        .visibility-toggle-btn.objects-toggle {
            color: #f7b731;
        }

        .visibility-toggle-btn.objects-toggle:hover {
            background: rgba(247, 183, 49, 0.15);
            border-color: #f7b731;
        }

        .visibility-toggle-btn.objects-toggle.hidden {
            color: #787b86;
            background: rgba(19, 23, 34, 0.6);
        }

        .visibility-toggle-btn.objects-toggle.hidden:hover {
            color: #f7b731;
            background: rgba(247, 183, 49, 0.1);
        }

        /* Indicators toggle - Orange */
        .visibility-toggle-btn.indicators-toggle {
            color: #ff9800;
        }

        .visibility-toggle-btn.indicators-toggle:hover {
            background: rgba(255, 152, 0, 0.15);
            border-color: #ff9800;
        }

        .visibility-toggle-btn.indicators-toggle.hidden {
            color: #787b86;
            background: rgba(19, 23, 34, 0.6);
        }

        .visibility-toggle-btn.indicators-toggle.hidden:hover {
            color: #ff9800;
            background: rgba(255, 152, 0, 0.1);
        }

        /* Save Template Button - Green */
        .visibility-toggle-btn.save-template-btn {
            color: #26a69a;
            transition: all 0.2s ease;
        }

        .visibility-toggle-btn.save-template-btn:hover {
            background: rgba(38, 166, 154, 0.15);
            border-color: #26a69a;
        }

        .visibility-toggle-btn.save-template-btn.saved {
            color: #4caf50;
            background: rgba(76, 175, 80, 0.2);
            border-color: #4caf50;
            animation: saveSuccess 0.3s ease-out;
        }

        @keyframes saveSuccess {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        /* Reset Template Button - Red */
        .visibility-toggle-btn.reset-template-btn {
            color: #ef5350;
            transition: all 0.2s ease;
        }

        .visibility-toggle-btn.reset-template-btn:hover {
            background: rgba(239, 83, 80, 0.15);
            border-color: #ef5350;
        }

        /* Template Save Notification */
        .template-notification {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(38, 166, 154, 0.95);
            color: #fff;
            padding: 16px 32px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            pointer-events: none;
        }

        .template-notification.show {
            opacity: 1;
            visibility: visible;
        }

        .template-notification.fade-out {
            opacity: 0;
        }

        /* Template Reset Confirmation Modal */
        .template-confirm-modal {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1001;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }

        .template-confirm-modal.show {
            opacity: 1;
            visibility: visible;
        }

        .template-confirm-content {
            background: #1e222d;
            border: 1px solid #363a45;
            border-radius: 8px;
            padding: 24px 32px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        }

        .template-confirm-content p {
            color: #d1d4dc;
            font-size: 14px;
            margin: 0 0 20px 0;
            line-height: 1.5;
        }

        .template-confirm-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

        .template-confirm-btn {
            padding: 8px 24px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
        }

        .template-confirm-btn.confirm-yes {
            background: #ef5350;
            color: #fff;
        }

        .template-confirm-btn.confirm-yes:hover {
            background: #f44336;
        }

        .template-confirm-btn.confirm-no {
            background: #363a45;
            color: #d1d4dc;
        }

        .template-confirm-btn.confirm-no:hover {
            background: #434651;
        }

        .chart-ohlc-wrapper {
            position: absolute;
            top: 48px;
            right: 105px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 50;
        }

        /* Main Layout Container */
        .main-container {
            display: flex;
            width: 100%;
            flex: 1;
            min-height: 0; /* Important for flex children to shrink */
            margin-top: 40px; /* Space for fixed header */
            position: relative;
        }

        /* No need for footer-expanded overrides - flexbox handles it automatically */

        .chart-container {
            flex: 1;
            min-height: 0; /* Allow shrinking in flex layout */
            background: #131722;
            position: relative;
            min-width: 600px;
            border: none;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #chart {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            border: none;
            outline: none;
            background: #131722;
            -ms-user-select: none;
        }

        #chart svg {
            user-select: none;
            -webkit-user-select: none;
            outline: none;
            border: none;
        }

        #chart svg > g {
            outline: none;
        }

        /* Remove any default stroke from clip-path and container rects */
        #chart svg defs rect,
        #chart svg clipPath rect {
            stroke: none;
            fill: none;
        }

        #chart svg text {
            user-select: none;
            -webkit-user-select: none;
            pointer-events: none;
        }

        #chart svg .candles,
        #chart svg .grid,
        #chart svg .watermark,
        #chart svg .indicators {
            pointer-events: none;
        }

        /* Drawing mode cursor styles */
        #chart.drawing-mode {
            cursor: crosshair !important;
        }

        #chart.drawing-mode svg {
            cursor: crosshair !important;
        }

        /* Drawing overlay - captures mouse events */
        #chart svg .drawing-overlay {
            cursor: inherit;
        }

        #chart.drawing-mode svg .drawing-overlay {
            cursor: crosshair;
        }

        /* Drawings group - only interactive in cursor mode */
        #chart:not(.drawing-mode) svg .drawings line,
        #chart:not(.drawing-mode) svg .drawings rect,
        #chart:not(.drawing-mode) svg .drawings path {
            pointer-events: stroke;
        }

        /* Disable drawing interactions while in drawing mode */
        #chart.drawing-mode svg .drawings {
            pointer-events: none !important;
        }

        #chart svg .temp-drawing {
            pointer-events: none;
        }

        /* Drawing selection and resize handles */
        #chart svg .drawing-item {
            /* No transitions to avoid cursor flickering */
        }

        #chart svg .drawing-item:hover {
            filter: brightness(1.1);
        }

        /* Prevent filter changes when hovering on handles to avoid cursor flickering */
        #chart svg .drawing-item:has(.resize-handle:hover),
        #chart svg .drawing-item:has(.rotate-handle:hover) {
            filter: none !important;
        }

        /* Handle base styles - pointer-events auto for clickability */
        #chart svg .resize-handle,
        #chart svg .rotate-handle {
            pointer-events: auto !important;
        }

        #chart svg .resize-handle {
            cursor: pointer;
        }

        #chart svg .rotate-handle {
            cursor: grab;
        }

        /* Handle hover styles - applied with will-change to prevent flickering */
        #chart svg .resize-handle:hover,
        #chart svg .rotate-handle:hover {
            will-change: fill, stroke;
        }

        #chart svg .resize-handle:hover {
            fill: #4fc3f7 !important;
            stroke: #0288d1 !important;
        }

        #chart svg .rotate-handle:hover {
            fill: #ffb74d !important;
            stroke: #f57c00 !important;
        }

        /* Cursor styles for handles - nw/ne/sw/se resize */
        #chart svg .resize-handle[data-handle="tl"] { cursor: nwse-resize !important; }
        #chart svg .resize-handle[data-handle="tr"] { cursor: nesw-resize !important; }
        #chart svg .resize-handle[data-handle="bl"] { cursor: nesw-resize !important; }
        #chart svg .resize-handle[data-handle="br"] { cursor: nwse-resize !important; }
        #chart svg .resize-handle[data-handle="start"] { cursor: move !important; }
        #chart svg .resize-handle[data-handle="end"] { cursor: move !important; }

        #chart svg .selection-outline {
            animation: selection-dash 0.5s linear infinite;
        }

        @keyframes selection-dash {
            to {
                stroke-dashoffset: -8;
            }
        }

        /* Drawing Properties Modal Styles */
        .drawing-props-modal {
            max-width: 420px;
        }

        .drawing-props-modal .modal-body {
            padding: 20px;
        }

        .props-section {
            margin-bottom: 20px;
        }

        .props-section:last-child {
            margin-bottom: 0;
        }

        .props-section-title {
            font-size: 12px;
            font-weight: 600;
            color: #787b86;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
            padding-bottom: 6px;
            border-bottom: 1px solid #363a45;
        }

        .props-row {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            gap: 12px;
        }

        .props-row:last-child {
            margin-bottom: 0;
        }

        .props-label {
            font-size: 13px;
            color: #d1d4dc;
            min-width: 100px;
            flex-shrink: 0;
        }

        .props-input {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .props-input input[type="text"],
        .props-input input[type="number"],
        .props-input select,
        .props-input textarea {
            width: 100%;
            padding: 8px 12px;
            background: #1e222d;
            border: 1px solid #363a45;
            border-radius: 4px;
            color: #d1d4dc;
            font-size: 13px;
            outline: none;
            transition: border-color 0.2s;
        }

        .props-input input:focus,
        .props-input select:focus,
        .props-input textarea:focus {
            border-color: #2962ff;
        }

        .props-input input[type="color"] {
            width: 40px;
            height: 32px;
            padding: 2px;
            border: 1px solid #363a45;
            border-radius: 4px;
            cursor: pointer;
            background: #1e222d;
        }

        .props-input input[type="range"] {
            flex: 1;
            height: 6px;
            background: #363a45;
            border-radius: 3px;
            -webkit-appearance: none;
        }

        .props-input input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            background: #2962ff;
            border-radius: 50%;
            cursor: pointer;
        }

        .props-input .range-value {
            min-width: 45px;
            text-align: center;
            font-size: 12px;
            color: #787b86;
        }

        .props-input select {
            cursor: pointer;
        }

        .props-color-preview {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            border: 1px solid #363a45;
            flex-shrink: 0;
        }

        .props-checkbox-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .props-checkbox-row input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #2962ff;
            cursor: pointer;
        }

        .props-checkbox-row label {
            font-size: 13px;
            color: #d1d4dc;
            cursor: pointer;
        }

        .gradient-preview {
            width: 100%;
            height: 24px;
            border-radius: 4px;
            border: 1px solid #363a45;
            margin-top: 8px;
        }

        .stroke-style-options {
            display: flex;
            gap: 8px;
        }

        .stroke-style-option {
            flex: 1;
            padding: 8px;
            background: #1e222d;
            border: 1px solid #363a45;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
        }

        .stroke-style-option:hover {
            border-color: #2962ff;
        }

        .stroke-style-option.active {
            border-color: #2962ff;
            background: rgba(41, 98, 255, 0.1);
        }

        .stroke-style-option svg {
            width: 100%;
            height: 16px;
        }

        .stroke-style-option svg line {
            stroke: #d1d4dc;
            stroke-width: 2;
        }

        /* Font family select styling */
        .font-family-select option {
            padding: 8px;
        }

        /* Text preview */
        .text-preview {
            padding: 15px;
            background: #0f1117;
            border-radius: 4px;
            border: 1px solid #363a45;
            text-align: center;
            margin-top: 10px;
        }

        .text-preview span {
            display: inline-block;
        }

        /* Splitter / Resizer */
        .panel-splitter {
            width: 6px;
            height: 100%;
            background: #1e222d;
            cursor: col-resize;
            display: none;
            flex-shrink: 0;
            position: relative;
            z-index: 10;
            transition: background 0.2s;
        }

        .panel-splitter:hover,
        .panel-splitter.dragging {
            background: #2962ff;
        }

        .panel-splitter::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 2px;
            height: 40px;
            background: #363a45;
            border-radius: 1px;
        }

        .panel-splitter:hover::after,
        .panel-splitter.dragging::after {
            background: #fff;
        }

        .main-container.panel-open .panel-splitter {
            display: block;
        }

        /* Right Panel */
        .right-panel {
            width: 0;
            height: 100%;
            background: #131722;
            border-left: 1px solid #2a2e39;
            overflow: hidden;
            flex-shrink: 0;
            transition: width 0.3s ease;
            z-index: 10; /* Lower than toolbar */
        }

        .main-container.panel-open .right-panel {
            width: 350px;
            max-width: calc(100vw - 620px); /* Leave min 600px for chart + 20px margin */
        }

        .right-panel-inner {
            width: 350px;
            height: 100%;
            display: flex;
            flex-direction: column;
            opacity: 0;
            transition: opacity 0.2s ease 0.1s;
        }

        .main-container.panel-open .right-panel-inner {
            opacity: 1;
        }

        /* Right Panel Header */
        .right-panel-header {
            padding: 12px 15px;
            border-bottom: 1px solid #2a2e39;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .right-panel-title {
            font-size: 14px;
            font-weight: 600;
            color: #e0e0e0;
        }

        .right-panel-close {
            background: none;
            border: none;
            color: #787b86;
            font-size: 18px;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .right-panel-close:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #e0e0e0;
        }

        /* Right Panel Tabs */
        .right-panel-tabs {
            display: flex;
            border-bottom: 1px solid #2a2e39;
            flex-shrink: 0;
        }

        .right-panel-tab {
            flex: 1;
            padding: 10px 15px;
            background: transparent;
            border: none;
            color: #787b86;
            font-size: 12px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            text-align: center;
        }

        .right-panel-tab:hover {
            color: #e0e0e0;
            background: rgba(255, 255, 255, 0.02);
        }

        .right-panel-tab.active {
            color: #2962ff;
            border-bottom-color: #2962ff;
        }

        /* Right Panel Content */
        .right-panel-content {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
        }

        /* Right Panel Scrollbar - Theme Compatible */
        .right-panel-content::-webkit-scrollbar {
            width: 8px;
        }

        .right-panel-content::-webkit-scrollbar-track {
            background: #1e222d;
            border-radius: 4px;
        }

        .right-panel-content::-webkit-scrollbar-thumb {
            background: #363a45;
            border-radius: 4px;
        }

        .right-panel-content::-webkit-scrollbar-thumb:hover {
            background: #4a4e59;
        }

        /* Firefox scrollbar */
        .right-panel-content {
            scrollbar-width: thin;
            scrollbar-color: #363a45 #1e222d;
        }

        .right-panel-tab-content {
            display: none;
        }

        .right-panel-tab-content.active {
            display: block;
        }

        /* Sentiment Section */
        .sentiment-section {
            margin-bottom: 20px;
        }

        .sentiment-title {
            font-size: 12px;
            color: #787b86;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 10px;
        }

        .sentiment-gauge {
            background: #1a1d26;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 12px;
        }

        .sentiment-gauge-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .sentiment-gauge-label {
            font-size: 13px;
            color: #e0e0e0;
            font-weight: 500;
        }

        .sentiment-gauge-value {
            font-size: 14px;
            font-weight: 600;
        }

        .sentiment-gauge-value.bullish {
            color: #26a69a;
        }

        .sentiment-gauge-value.bearish {
            color: #ef5350;
        }

        .sentiment-gauge-value.neutral {
            color: #ffc107;
        }

        .sentiment-bar {
            height: 8px;
            background: #2a2e39;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
        }

        .sentiment-bar-fill {
            height: 100%;
            transition: width 0.5s ease;
        }

        .sentiment-bar-fill.bullish {
            background: linear-gradient(90deg, #26a69a, #4caf50);
        }

        .sentiment-bar-fill.bearish {
            background: linear-gradient(90deg, #ef5350, #f44336);
        }

        .sentiment-legend {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            font-size: 11px;
            color: #787b86;
        }

        /* Sentiment Mini Charts */
        .sentiment-charts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 15px;
        }

        .sentiment-mini-chart {
            background: #1a1d26;
            border-radius: 8px;
            padding: 12px;
        }

        .sentiment-mini-chart-title {
            font-size: 11px;
            color: #787b86;
            margin-bottom: 8px;
        }

        .sentiment-mini-chart-value {
            font-size: 18px;
            font-weight: 600;
            color: #e0e0e0;
        }

        .sentiment-mini-chart-change {
            font-size: 11px;
            margin-top: 4px;
        }

        .sentiment-mini-chart-change.positive {
            color: #26a69a;
        }

        .sentiment-mini-chart-change.negative {
            color: #ef5350;
        }

        /* Analysis Section */
        .analysis-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .analysis-item {
            background: #1a1d26;
            border-radius: 8px;
            padding: 12px;
            border-left: 3px solid #2962ff;
        }

        .analysis-item.bullish {
            border-left-color: #26a69a;
        }

        .analysis-item.bearish {
            border-left-color: #ef5350;
        }

        .analysis-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .analysis-item-type {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 2px 8px;
            border-radius: 3px;
            background: rgba(41, 98, 255, 0.2);
            color: #2962ff;
        }

        .analysis-item-type.technical {
            background: rgba(156, 39, 176, 0.2);
            color: #9c27b0;
        }

        .analysis-item-type.fundamental {
            background: rgba(255, 152, 0, 0.2);
            color: #ff9800;
        }

        .analysis-item-time {
            font-size: 11px;
            color: #787b86;
        }

        .analysis-item-title {
            font-size: 13px;
            color: #e0e0e0;
            font-weight: 500;
            margin-bottom: 6px;
        }

        .analysis-item-summary {
            font-size: 12px;
            color: #787b86;
            line-height: 1.5;
        }

        .analysis-item-signal {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-top: 8px;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 4px;
        }

        .analysis-item-signal.buy {
            background: rgba(38, 166, 154, 0.2);
            color: #26a69a;
        }

        .analysis-item-signal.sell {
            background: rgba(239, 83, 80, 0.2);
            color: #ef5350;
        }

        .analysis-item-signal.neutral {
            background: rgba(255, 193, 7, 0.2);
            color: #ffc107;
        }

        .analysis-empty {
            text-align: center;
            padding: 40px 20px;
            color: #787b86;
        }

        .analysis-empty-icon {
            font-size: 40px;
            margin-bottom: 10px;
            opacity: 0.5;
        }

        .analysis-empty-text {
            font-size: 13px;
        }

        /* Pivot Levels */
        .pivot-levels {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .pivot-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
        }

        .pivot-row.resistance {
            background: rgba(239, 83, 80, 0.1);
        }

        .pivot-row.support {
            background: rgba(38, 166, 154, 0.1);
        }

        .pivot-row.pivot-main {
            background: rgba(255, 193, 7, 0.2);
            font-weight: bold;
        }

        .pivot-label {
            color: #787b86;
            font-weight: 500;
            min-width: 40px;
        }

        .pivot-row.resistance .pivot-label {
            color: #ef5350;
        }

        .pivot-row.support .pivot-label {
            color: #26a69a;
        }

        .pivot-row.pivot-main .pivot-label {
            color: #ffc107;
        }

        .pivot-value {
            font-family: 'Roboto Mono', monospace;
            font-weight: 600;
            color: #d1d4dc;
        }

        /* Support/Resistance Levels */
        .sr-levels {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

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

        .sr-group-title {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
            padding-left: 4px;
        }

        .sr-group-title.resistance-title {
            color: #ef5350;
        }

        .sr-group-title.support-title {
            color: #26a69a;
        }

        .sr-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
        }

        .sr-row.resistance {
            background: rgba(239, 83, 80, 0.08);
            border-left: 3px solid #ef5350;
        }

        .sr-row.support {
            background: rgba(38, 166, 154, 0.08);
            border-left: 3px solid #26a69a;
        }

        .sr-label {
            color: #787b86;
            font-weight: 500;
            min-width: 30px;
        }

        .sr-value {
            font-family: 'Roboto Mono', monospace;
            font-weight: 600;
            color: #d1d4dc;
            flex: 1;
            text-align: center;
        }

        .sr-distance {
            font-size: 11px;
            color: #787b86;
            min-width: 60px;
            text-align: right;
        }

        .sr-row.resistance .sr-distance {
            color: #ef5350;
        }

        .sr-row.support .sr-distance {
            color: #26a69a;
        }

        /* ========================================
           CHART TOOLBAR (Timeframe & Drawing Tools)
           ======================================== */

        .chart-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(180deg, #1a1e2a 0%, #131722 100%);
            border-bottom: 1px solid #2a2e39;
            padding: 6px 10px;
            gap: 8px;
            flex-shrink: 0;
            position: relative;
            z-index: 100;
            overflow: visible;
        }

        .toolbar-section {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 1;
            white-space: nowrap;
            overflow: visible;
            min-width: 0;
        }

        .toolbar-divider {
            width: 1px;
            height: 20px;
            background: #363a45;
            margin: 0 6px;
            flex-shrink: 0;
        }

        .toolbar-label {
            display: none;
        }

        /* Timeframe Toolbar Buttons */
        .tf-toolbar-btn {
            background: transparent;
            color: #787b86;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.15s ease;
            height: 26px;
            min-width: 28px;
            position: relative;
        }

        .tf-toolbar-btn:hover {
            background: rgba(41, 98, 255, 0.15);
            color: #e0e0e0;
        }

        .tf-toolbar-btn.active {
            background: #2962ff;
            color: white;
        }

        .tf-toolbar-btn.live-btn {
            font-weight: 600;
            color: #26a69a;
        }

        .tf-toolbar-btn.live-btn:hover {
            background: rgba(38, 166, 154, 0.15);
        }

        .tf-toolbar-btn.live-btn.active {
            background: #26a69a;
            color: white;
            animation: pulse 1.5s ease-in-out infinite;
        }

        /* Drawing Tools Buttons */
        .drawing-tool-btn {
            background: transparent;
            color: #787b86;
            border: none;
            padding: 4px 6px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.15s ease;
            height: 26px;
            min-width: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .drawing-tool-btn svg {
            width: 16px;
            height: 16px;
        }

        .drawing-tool-btn:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #e0e0e0;
        }

        .drawing-tool-btn.active {
            background: rgba(41, 98, 255, 0.25);
            color: #2962ff;
        }

        /* Global Tooltip Styles */
        .tf-toolbar-btn[title]:hover::after,
        .drawing-tool-btn[title]:hover::after,
        .pattern-btn[title]:hover::after,
        .screenshot-btn[title]:hover::after,
        .panel-toggle-btn[title]:hover::after {
            content: attr(title);
            position: absolute;
            bottom: -26px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e222d;
            color: #e0e0e0;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 10px;
            white-space: nowrap;
            z-index: 9999;
            border: 1px solid #363a45;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        /* Tool Group */
        .tool-group {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 2px 4px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 4px;
        }

        /* Dropdown for more tools */
        .tool-dropdown {
            position: relative;
        }

        .tool-dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: #1e222d;
            border: 1px solid #363a45;
            border-radius: 6px;
            padding: 4px;
            min-width: 140px;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .tool-dropdown:hover .tool-dropdown-menu,
        .tool-dropdown.open .tool-dropdown-menu {
            display: block;
        }

        .tool-dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            color: #787b86;
            cursor: pointer;
            border-radius: 4px;
            font-size: 12px;
            transition: all 0.15s;
        }

        .tool-dropdown-item:hover {
            background: rgba(41, 98, 255, 0.15);
            color: #e0e0e0;
        }

        .tool-dropdown-item.active {
            background: rgba(41, 98, 255, 0.25);
            color: #2962ff;
        }

        .tool-dropdown-item span:first-child {
            width: 18px;
            text-align: center;
        }

        /* Pattern Detection Dropdown */
        .pattern-dropdown {
            position: relative;
            z-index: 1100;
        }

        .pattern-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px 8px;
            background: transparent;
            border: 1px solid #363a45;
            border-radius: 4px;
            color: #b2b5be;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.15s;
            height: 26px;
            min-width: 26px;
            position: relative;
        }

        .pattern-btn svg {
            width: 16px;
            height: 16px;
        }

        .pattern-btn:hover {
            background: rgba(41, 98, 255, 0.15);
            border-color: #2962ff;
            color: #e0e0e0;
        }

        .pattern-btn svg {
            flex-shrink: 0;
        }

        .pattern-dropdown.open .pattern-btn {
            background: rgba(41, 98, 255, 0.2);
            border-color: #2962ff;
            color: #2962ff;
        }

        .pattern-dropdown-menu {
            display: none;
            position: absolute;
            top: calc(100% + 5px);
            right: 0;
            background: #1e222d;
            border: 1px solid #363a45;
            border-radius: 8px;
            min-width: 260px;
            z-index: 9999;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        }

        .pattern-dropdown.open .pattern-dropdown-menu {
            display: block;
        }

        .pattern-dropdown.open {
            z-index: 9999;
        }

        .pattern-dropdown-header {
            padding: 12px 14px;
            border-bottom: 1px solid #363a45;
            font-size: 13px;
            font-weight: 600;
            color: #e0e0e0;
        }

        .pattern-dropdown-content {
            padding: 10px 14px;
        }

        .pattern-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            color: #b2b5be;
            font-size: 12px;
            cursor: pointer;
            transition: color 0.15s;
        }

        .pattern-checkbox input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: #2962ff;
            cursor: pointer;
        }

        .pattern-checkbox:hover {
            color: #e0e0e0;
        }

        .pattern-dropdown-sensitivity {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-top: 1px solid #363a45;
            font-size: 11px;
            color: #787b86;
        }

        .pattern-dropdown-sensitivity label {
            white-space: nowrap;
        }

        .pattern-dropdown-sensitivity input[type="range"] {
            flex: 1;
            height: 4px;
            -webkit-appearance: none;
            background: #363a45;
            border-radius: 2px;
            cursor: pointer;
        }

        .pattern-dropdown-sensitivity input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
            background: #2962ff;
            border-radius: 50%;
            cursor: pointer;
        }

        .pattern-dropdown-sensitivity input[type="range"]::-moz-range-thumb {
            width: 14px;
            height: 14px;
            background: #2962ff;
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }

        .pattern-dropdown-actions {
            display: flex;
            gap: 8px;
            padding: 10px 14px;
            border-top: 1px solid #363a45;
        }

        .pattern-btn-scan, .pattern-btn-clear {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
        }

        .pattern-btn-scan {
            background: #2962ff;
            color: white;
        }

        .pattern-btn-scan:hover {
            background: #1e4bd8;
        }

        .pattern-btn-scan:disabled {
            background: #363a45;
            color: #787b86;
            cursor: not-allowed;
        }

        .pattern-btn-clear {
            background: transparent;
            color: #ef5350;
            border: 1px solid #ef5350;
        }

        .pattern-btn-clear:hover {
            background: rgba(239, 83, 80, 0.15);
        }

        /* Screenshot Button */
        .screenshot-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px 8px;
            background: transparent;
            border: 1px solid #363a45;
            border-radius: 4px;
            color: #b2b5be;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.15s;
            height: 26px;
            min-width: 26px;
            position: relative;
        }

        .screenshot-btn:hover {
            background: rgba(38, 166, 154, 0.15);
            border-color: #26a69a;
            color: #26a69a;
        }

        .screenshot-btn:active {
            transform: scale(0.95);
        }

        .screenshot-btn.saving {
            pointer-events: none;
            opacity: 0.6;
        }

        .screenshot-btn svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .pattern-dropdown-results {
            max-height: 200px;
            overflow-y: auto;
            border-top: 1px solid #363a45;
        }

        .pattern-results-empty {
            padding: 12px 14px;
            color: #787b86;
            font-size: 11px;
            text-align: center;
        }

        .pattern-result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 14px;
            border-bottom: 1px solid #2a2e39;
            font-size: 11px;
            cursor: pointer;
            transition: background 0.15s;
        }

        .pattern-result-item:last-child {
            border-bottom: none;
        }

        .pattern-result-item:hover {
            background: rgba(41, 98, 255, 0.1);
        }

        .pattern-result-item .pattern-name {
            color: #e0e0e0;
        }

        .pattern-result-item .pattern-confidence {
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 600;
        }

        .pattern-result-item.bullish .pattern-confidence {
            background: rgba(38, 166, 154, 0.2);
            color: #26a69a;
        }

        .pattern-result-item.bearish .pattern-confidence {
            background: rgba(239, 83, 80, 0.2);
            color: #ef5350;
        }

        .pattern-scanning {
            padding: 12px 14px;
            color: #2962ff;
            font-size: 11px;
            text-align: center;
        }

        /* Icon Picker Panel */
        .icon-picker-panel {
            display: none;
            position: fixed;
            background: #1e222d;
            border: 1px solid #363a45;
            border-radius: 8px;
            padding: 0;
            width: 320px;
            z-index: 1001;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        .icon-picker-panel.visible {
            display: block;
        }

        .icon-picker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            border-bottom: 1px solid #363a45;
            font-size: 13px;
            font-weight: 600;
            color: #e0e0e0;
        }

        .icon-picker-close {
            background: none;
            border: none;
            color: #787b86;
            font-size: 18px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }

        .icon-picker-close:hover {
            color: #e0e0e0;
        }

        .icon-picker-tabs {
            display: flex;
            border-bottom: 1px solid #363a45;
            padding: 0 8px;
        }

        .icon-tab {
            background: none;
            border: none;
            color: #787b86;
            padding: 8px 12px;
            font-size: 11px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            transition: all 0.15s;
        }

        .icon-tab:hover {
            color: #e0e0e0;
        }

        .icon-tab.active {
            color: #2962ff;
            border-bottom-color: #2962ff;
        }

        .icon-picker-content {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 4px;
            padding: 12px;
            max-height: 200px;
            overflow-y: auto;
        }

        .icon-picker-content::-webkit-scrollbar {
            width: 6px;
        }

        .icon-picker-content::-webkit-scrollbar-track {
            background: #131722;
        }

        .icon-picker-content::-webkit-scrollbar-thumb {
            background: #363a45;
            border-radius: 3px;
        }

        .icon-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            font-size: 18px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.15s;
            background: transparent;
            border: none;
        }

        .icon-item:hover {
            background: rgba(41, 98, 255, 0.2);
            transform: scale(1.15);
        }

        .icon-item.selected {
            background: rgba(41, 98, 255, 0.3);
            box-shadow: 0 0 0 2px #2962ff;
        }

        .icon-picker-size {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-top: 1px solid #363a45;
            font-size: 12px;
            color: #787b86;
        }

        .icon-picker-size label {
            min-width: 40px;
        }

        .icon-picker-size input[type="range"] {
            flex: 1;
            height: 4px;
            -webkit-appearance: none;
            background: #363a45;
            border-radius: 2px;
            outline: none;
        }

        .icon-picker-size input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
            background: #2962ff;
            border-radius: 50%;
            cursor: pointer;
        }

        .icon-picker-size span {
            min-width: 35px;
            text-align: right;
            color: #e0e0e0;
        }

        /* Color Picker */
        .color-picker-btn {
            width: 26px;
            height: 26px;
            border-radius: 4px;
            border: 2px solid #363a45;
            cursor: pointer;
            transition: border-color 0.15s;
        }

        .color-picker-btn:hover {
            border-color: #787b86;
        }

        /* ========================================
           INDICATOR PANELS (RSI, MACD)
           ======================================== */

        .chart-panels-wrapper {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            min-height: 0;
            height: 100%;
            padding-bottom: 3px; /* Small gap between chart and status bar */
        }

        .main-chart-area {
            flex: 1;
            min-height: 200px;
            position: relative;
            overflow: hidden;
            border: none;
            outline: none;
            background: #131722;
            display: flex;
            flex-direction: column;
        }

        .indicator-panels-container {
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }

        .indicator-panel {
            background: #131722;
            border-top: 1px solid #2a2e39;
            position: relative;
            overflow: hidden;
            display: none;
        }

        .indicator-panel.visible {
            display: block;
        }

        .indicator-panel-resizer {
            height: 6px;
            background: #1e222d;
            cursor: ns-resize;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 20;
            transition: background 0.2s;
        }

        .indicator-panel-resizer:hover,
        .indicator-panel-resizer.dragging {
            background: #2962ff;
        }

        .indicator-panel-resizer::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 2px;
            background: #363a45;
            border-radius: 1px;
        }

        .indicator-panel-resizer:hover::after,
        .indicator-panel-resizer.dragging::after {
            background: #fff;
        }

        .indicator-panel-header {
            position: absolute;
            top: 8px;
            left: 10px;
            z-index: 15;
            display: flex;
            align-items: center;
            gap: 10px;
            pointer-events: none;
        }

        .indicator-panel-title {
            font-family: 'Segoe UI', sans-serif;
            font-size: 11px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .indicator-panel-value {
            font-family: 'Share Tech Mono', monospace;
            font-size: 12px;
            font-weight: 500;
        }

        .indicator-panel-close {
            position: absolute;
            top: 8px;
            right: 10px;
            z-index: 15;
            width: 20px;
            height: 20px;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: #787b86;
            border-radius: 3px;
            cursor: pointer;
            font-size: 14px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            pointer-events: auto;
        }

        .indicator-panel-close:hover {
            background: rgba(255, 82, 82, 0.3);
            color: #ff5252;
        }

        .indicator-panel-chart {
            width: 100%;
            height: 100%;
            padding-top: 6px;
        }

        /* RSI specific styles */
        .rsi-panel .indicator-panel-value {
            color: #2962ff;
        }

        .rsi-panel .indicator-panel-value.overbought {
            color: #ff5252;
        }

        .rsi-panel .indicator-panel-value.oversold {
            color: #26a69a;
        }

        /* MACD specific styles */
        .macd-panel .macd-value {
            color: #2962ff;
        }

        .macd-panel .signal-value {
            color: #ff9800;
        }

        .macd-panel .histogram-value {
            color: #26a69a;
        }

        .macd-panel .histogram-value.negative {
            color: #ff5252;
        }

        /* RSI level lines */
        .rsi-level-line {
            stroke-dasharray: 3, 3;
            opacity: 0.5;
        }

        .rsi-overbought-line {
            stroke: #ff5252;
        }

        .rsi-oversold-line {
            stroke: #26a69a;
        }

        .rsi-middle-line {
            stroke: #787b86;
        }

        /* MACD zero line */
        .macd-zero-line {
            stroke: #787b86;
            stroke-dasharray: 3, 3;
            opacity: 0.5;
        }

        .crosshair {
            pointer-events: none;
        }

        .crosshair-line {
            stroke: #787b86;
            stroke-width: 1;
            stroke-dasharray: 5, 5;
            opacity: 0.5;
        }

        /* Enhanced Candle Tooltip */
        .candle-tooltip {
            position: absolute;
            background: var(--tooltip-bg, rgba(19, 23, 34, 0.98));
            border: 1px solid var(--tooltip-border, #363a45);
            border-radius: 8px;
            padding: 0;
            font-size: 12px;
            pointer-events: none;
            display: none;
            z-index: 100;
            min-width: 200px;
            max-width: 260px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(8px);
            overflow: hidden;
            transition: opacity 0.15s ease;
        }

        .candle-tooltip.visible {
            display: block;
        }

        .candle-tooltip.fade-in {
            animation: tooltipFadeIn 0.15s ease;
        }

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

        /* Tooltip Header */
        .tooltip-header {
            padding: 10px 12px;
            border-bottom: 1px solid var(--tooltip-border, #363a45);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .tooltip-symbol {
            font-weight: 700;
            font-size: 13px;
            color: var(--tooltip-text, #e0e0e0);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .tooltip-timeframe {
            font-size: 10px;
            color: var(--tooltip-label, #787b86);
            background: rgba(255, 255, 255, 0.05);
            padding: 2px 6px;
            border-radius: 3px;
        }

        .tooltip-direction {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 4px;
        }

        .tooltip-direction.bullish {
            background: rgba(38, 166, 154, 0.2);
            color: var(--bullish-color, #26a69a);
        }

        .tooltip-direction.bearish {
            background: rgba(239, 83, 80, 0.2);
            color: var(--bearish-color, #ef5350);
        }

        .tooltip-direction-icon {
            font-size: 10px;
        }

        /* Tooltip Body */
        .tooltip-body {
            padding: 10px 12px;
        }

        /* OHLC Grid */
        .tooltip-ohlc-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .tooltip-ohlc-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .tooltip-ohlc-label {
            font-size: 9px;
            color: var(--tooltip-label, #787b86);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .tooltip-ohlc-value {
            font-size: 13px;
            font-weight: 600;
            color: var(--tooltip-text, #e0e0e0);
            font-family: 'Consolas', 'Monaco', monospace;
        }

        .tooltip-ohlc-value.high {
            color: var(--bullish-color, #26a69a);
        }

        .tooltip-ohlc-value.low {
            color: var(--bearish-color, #ef5350);
        }

        /* Tooltip Stats Row */
        .tooltip-stats {
            display: flex;
            justify-content: space-between;
            padding: 10px 12px;
            background: rgba(0, 0, 0, 0.15);
            border-top: 1px solid var(--tooltip-border, rgba(54, 58, 69, 0.5));
            gap: 8px;
        }

        .tooltip-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            flex: 1;
        }

        .tooltip-stat-label {
            font-size: 9px;
            color: var(--tooltip-label, #787b86);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .tooltip-stat-value {
            font-size: 11px;
            font-weight: 600;
            color: var(--tooltip-text, #e0e0e0);
        }

        .tooltip-stat-value.positive {
            color: var(--bullish-color, #26a69a);
        }

        .tooltip-stat-value.negative {
            color: var(--bearish-color, #ef5350);
        }

        /* Tooltip Footer (Time) */
        .tooltip-footer {
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .tooltip-time-icon {
            font-size: 11px;
            color: var(--tooltip-label, #787b86);
        }

        .tooltip-time {
            font-size: 11px;
            color: var(--tooltip-label, #787b86);
        }

        /* Tooltip Arrow/Pointer */
        .candle-tooltip::before {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background: var(--tooltip-bg, rgba(19, 23, 34, 0.98));
            border: 1px solid var(--tooltip-border, #363a45);
            transform: rotate(45deg);
        }

        .candle-tooltip.arrow-left::before {
            left: -6px;
            top: 20px;
            border-right: none;
            border-top: none;
        }

        .candle-tooltip.arrow-right::before {
            right: -6px;
            top: 20px;
            border-left: none;
            border-bottom: none;
        }

        .candle-tooltip.arrow-top::before {
            top: -6px;
            left: 50%;
            margin-left: -5px;
            border-bottom: none;
            border-right: none;
        }

        .candle-tooltip.arrow-bottom::before {
            bottom: -6px;
            left: 50%;
            margin-left: -5px;
            border-top: none;
            border-left: none;
        }

        .candle-tooltip.no-arrow::before {
            display: none;
        }

        .candle {
            cursor: crosshair;
        }

        .candle-body {
            stroke-width: 1;
        }

        .candle-wick {
            stroke-width: 1;
        }

        .candle.bullish .candle-body {
            fill: #26a69a;
            stroke: #26a69a;
        }

        .candle.bearish .candle-body {
            fill: #ef5350;
            stroke: #ef5350;
        }

        .candle.bullish .candle-wick {
            stroke: #26a69a;
        }

        .candle.bearish .candle-wick {
            stroke: #ef5350;
        }

        .candle.gap-candle .candle-body {
            fill: #ff8c00;
            stroke: #ff8c00;
            opacity: 0.3;
        }

        .candle.gap-candle .candle-wick {
            stroke: #ff8c00;
            opacity: 0.5;
        }

        .axis path.domain {
            stroke: none;
            display: none;
        }

        .axis path,
        .axis line {
            stroke: rgba(42, 46, 57, 0.3);
            stroke-width: 0.5px;
        }

        .axis text {
            fill: #787b86;
            font-size: 11px;
            pointer-events: none;
        }

        .axis .tick {
            pointer-events: none;
        }

        .x-axis-background {
            pointer-events: all !important;
            cursor: ew-resize !important;
        }

        .y-axis-background {
            pointer-events: all !important;
            cursor: ns-resize !important;
        }

        .grid path.domain {
            stroke: none;
            display: none;
        }

        .grid line {
            stroke: #2a2e39;
            stroke-opacity: 0.5;
        }

        .loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(10, 14, 39, 0.85);
            backdrop-filter: blur(4px);
            z-index: 1000;
        }

        .loading.active {
            display: flex;
        }

        .loading-modal {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            background: linear-gradient(145deg, #1e222d 0%, #131722 100%);
            border: 2px solid #2962ff;
            border-radius: 16px;
            padding: 40px 60px;
            box-shadow: 0 20px 60px rgba(41, 98, 255, 0.4), 0 0 100px rgba(41, 98, 255, 0.1);
            animation: modal-appear 0.3s ease-out, pulse-glow 2s ease-in-out infinite;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #363a45;
            border-top-color: #2962ff;
            border-right-color: #2962ff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        .loading-text {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .loading-title {
            color: #2962ff;
            font-weight: 700;
            font-size: 18px;
            letter-spacing: 0.5px;
        }

        .loading-subtitle {
            font-size: 14px;
            color: #787b86;
        }

        .loading-dots {
            display: inline-flex;
            gap: 4px;
            margin-left: 4px;
        }

        .loading-dots span {
            width: 6px;
            height: 6px;
            background: #2962ff;
            border-radius: 50%;
            animation: dot-bounce 1.4s ease-in-out infinite;
        }

        .loading-dots span:nth-child(1) { animation-delay: 0s; }
        .loading-dots span:nth-child(2) { animation-delay: 0.2s; }
        .loading-dots span:nth-child(3) { animation-delay: 0.4s; }

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

        @keyframes modal-appear {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes pulse-glow {
            0%, 100% {
                border-color: #2962ff;
                box-shadow: 0 20px 60px rgba(41, 98, 255, 0.4), 0 0 100px rgba(41, 98, 255, 0.1);
            }
            50% {
                border-color: #5d8aff;
                box-shadow: 0 20px 80px rgba(41, 98, 255, 0.6), 0 0 120px rgba(41, 98, 255, 0.2);
            }
        }

        @keyframes dot-bounce {
            0%, 80%, 100% {
                transform: scale(0.6);
                opacity: 0.5;
            }
            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .zoom-controls {
            position: absolute;
            right: 20px;
            top: 80px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            z-index: 10;
        }

        .zoom-btn {
            background: #1e222d;
            color: #e0e0e0;
            border: 1px solid #363a45;
            width: 32px;
            height: 32px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .zoom-btn:hover {
            background: #2962ff;
            border-color: #2962ff;
        }

        .status-bar {
            position: relative;
            width: 100%;
            height: 42px;
            min-height: 42px;
            padding: 0 20px;
            font-size: 12px;
            color: #a0a0a0;
            background: #1a1d26;
            border-top: 1px solid #2a2e39;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            z-index: 1000;
            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        /* Handler grip at top center */
        .status-bar-handler {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 24px;
            background: linear-gradient(180deg, #2a2e39 0%, #1a1d26 100%);
            border: 1px solid #3a3e49;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            z-index: 1001;
        }

        .status-bar-handler:hover {
            background: linear-gradient(180deg, #3a3e49 0%, #2a2e39 100%);
            top: -14px;
            height: 26px;
        }

        .status-bar-handler:hover .handler-grip span {
            background: #60a5fa;
        }

        .handler-grip {
            display: flex;
            flex-direction: column;
            gap: 2px;
            align-items: center;
        }

        .handler-grip span {
            display: block;
            width: 24px;
            height: 2px;
            background: #555;
            border-radius: 1px;
            transition: background 0.2s ease;
        }

        /* Status bar content */
        .status-bar-content {
            height: 42px;
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .status-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ========================================
           NEW MINIMAL FOOTER DESIGN
           ======================================== */

        /* Status bar expanded - auto height based on content */
        .status-bar.expanded {
            height: auto;
            min-height: 170px;
            max-height: 45vh; /* Max 45% of viewport height */
        }

        .status-bar-expanded {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 10px 0;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.25s ease, transform 0.25s ease;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .status-bar.expanded .status-bar-expanded {
            opacity: 1;
            transform: translateY(0);
        }

        /* Scrollbar for expanded area */
        .status-bar-expanded::-webkit-scrollbar {
            width: 4px;
        }
        .status-bar-expanded::-webkit-scrollbar-track {
            background: transparent;
        }
        .status-bar-expanded::-webkit-scrollbar-thumb {
            background: #3a3e49;
            border-radius: 2px;
        }

        /* Footer Pin Button - absolute positioned at top-right of status-bar */
        .footer-pin-btn {
            position: absolute;
            top: 6px;
            right: 12px;
            width: 26px;
            height: 26px;
            background: rgba(42, 46, 57, 0.95);
            border: 1px solid #3a3e49;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
            transition: all 0.2s ease;
            z-index: 1001;
            opacity: 0;
            pointer-events: none;
        }

        /* Show pin button only when footer is expanded */
        .status-bar.expanded .footer-pin-btn {
            opacity: 1;
            pointer-events: auto;
        }

        .footer-pin-btn:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: #3b82f6;
            color: #3b82f6;
        }

        .footer-pin-btn.pinned {
            background: rgba(38, 166, 154, 0.2);
            border-color: #26a69a;
            color: #26a69a;
            transform: rotate(45deg);
        }

        .footer-pin-btn.pinned:hover {
            background: rgba(38, 166, 154, 0.3);
        }

        .footer-pin-btn .pin-icon {
            transition: transform 0.2s ease;
        }

        .footer-pin-btn.pinned .pin-icon {
            transform: rotate(-45deg);
        }

        /* Pinned state indicator on handler */
        .status-bar.pinned .status-bar-handler {
            border-color: #26a69a;
        }

        .status-bar.pinned .status-bar-handler .handler-grip span {
            background: #26a69a;
        }

        /* Indicators Row */
        .footer-indicators-row {
            display: flex;
            gap: 8px;
            min-height: 72px;
            flex-wrap: wrap;
        }

        .footer-indicator-card {
            flex: 1 1 120px;
            background: rgba(30, 34, 45, 0.9);
            border: 1px solid #2a2e39;
            border-radius: 6px;
            padding: 8px 12px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 110px;
            max-width: 200px;
            transition: border-color 0.2s ease;
        }

        .footer-indicator-card:hover {
            border-color: #3a3e49;
        }

        .footer-indicator-card.alert {
            border-color: #ffd54f;
            box-shadow: 0 0 8px rgba(255, 213, 79, 0.2);
        }

        .footer-indicator-card.bullish-alert {
            border-color: #26a69a;
            box-shadow: 0 0 8px rgba(38, 166, 154, 0.2);
        }

        .footer-indicator-card.bearish-alert {
            border-color: #ef5350;
            box-shadow: 0 0 8px rgba(239, 83, 80, 0.2);
        }

        .indicator-header {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .indicator-name {
            font-size: 11px;
            font-weight: 600;
            color: #aaa;
        }

        .indicator-period {
            font-size: 9px;
            color: #666;
        }

        .indicator-value-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }

        .indicator-value {
            font-size: 18px;
            font-weight: 700;
            font-family: 'Roboto Mono', monospace;
            color: #e0e0e0;
        }

        .indicator-value.bullish { color: #26a69a; }
        .indicator-value.bearish { color: #ef5350; }
        .indicator-value.neutral { color: #ffd54f; }
        .indicator-value.overbought { color: #ef5350; }
        .indicator-value.oversold { color: #26a69a; }

        .indicator-status {
            font-size: 9px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 3px;
            background: rgba(42, 46, 57, 0.8);
            color: #888;
        }

        .indicator-status.bullish {
            background: rgba(38, 166, 154, 0.2);
            color: #26a69a;
        }

        .indicator-status.bearish {
            background: rgba(239, 83, 80, 0.2);
            color: #ef5350;
        }

        .indicator-status.overbought {
            background: rgba(239, 83, 80, 0.2);
            color: #ef5350;
        }

        .indicator-status.oversold {
            background: rgba(38, 166, 154, 0.2);
            color: #26a69a;
        }

        .indicator-status.neutral {
            background: rgba(255, 213, 79, 0.15);
            color: #ffd54f;
        }

        /* RSI Bar */
        .indicator-bar {
            height: 4px;
            border-radius: 2px;
            position: relative;
            margin-top: 2px;
        }

        .indicator-bar.rsi-gradient {
            background: linear-gradient(90deg, #26a69a 0%, #26a69a 30%, #ffd54f 50%, #ef5350 70%, #ef5350 100%);
        }

        .indicator-marker {
            position: absolute;
            top: -3px;
            width: 3px;
            height: 10px;
            background: #fff;
            border-radius: 1px;
            box-shadow: 0 0 3px rgba(0,0,0,0.5);
            transition: left 0.3s ease;
        }

        /* MACD Mini Display */
        .macd-mini, .stoch-mini, .atr-info {
            display: flex;
            gap: 8px;
            margin-top: 2px;
        }

        .macd-item, .stoch-item, .atr-item {
            font-size: 9px;
            color: #666;
            font-family: 'Roboto Mono', monospace;
        }

        .macd-item span, .stoch-item span, .atr-item span {
            color: #aaa;
        }

        .macd-item span.positive, .stoch-item span.positive { color: #26a69a; }
        .macd-item span.negative, .stoch-item span.negative { color: #ef5350; }

        /* Momentum Bar */
        .momentum-bar {
            height: 4px;
            background: #2a2e39;
            border-radius: 2px;
            position: relative;
            overflow: hidden;
            margin-top: 2px;
        }

        .momentum-fill {
            position: absolute;
            top: 0;
            left: 50%;
            height: 100%;
            background: #888;
            transition: all 0.3s ease;
            border-radius: 2px;
        }

        .momentum-fill.positive {
            background: #26a69a;
        }

        .momentum-fill.negative {
            background: #ef5350;
            transform: translateX(-100%);
        }

        /* Signals Row */
        .footer-signals-row {
            display: flex;
            gap: 8px;
            min-height: 50px;
            align-items: stretch;
            flex-wrap: wrap;
        }

        /* Signals Panel */
        .signals-panel {
            flex: 2 1 250px;
            background: rgba(30, 34, 45, 0.9);
            border: 1px solid #2a2e39;
            border-radius: 6px;
            padding: 6px 10px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            overflow: visible;
            min-width: 200px;
        }

        .signals-header {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .signals-icon {
            font-size: 12px;
        }

        .signals-title {
            font-size: 10px;
            font-weight: 600;
            color: #888;
            text-transform: uppercase;
        }

        .signals-list {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            overflow-y: visible;
            flex: 1;
            align-items: center;
            padding-top: 4px;
        }

        .signals-list::-webkit-scrollbar {
            height: 3px;
        }

        .signals-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .signals-list::-webkit-scrollbar-thumb {
            background: #3a3e49;
            border-radius: 3px;
        }

        .signal-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: rgba(42, 46, 57, 0.6);
            border: 1px solid #2a2e39;
            border-radius: 4px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .signal-item.bullish {
            background: rgba(38, 166, 154, 0.15);
            border-color: rgba(38, 166, 154, 0.3);
        }

        .signal-item.bearish {
            background: rgba(239, 83, 80, 0.15);
            border-color: rgba(239, 83, 80, 0.3);
        }

        .signal-item.warning {
            background: rgba(255, 213, 79, 0.15);
            border-color: rgba(255, 213, 79, 0.3);
        }

        .signal-item.neutral {
            opacity: 0.6;
        }

        .signal-icon {
            font-size: 12px;
        }

        .signal-text {
            font-size: 10px;
            color: #ccc;
        }

        .signal-item.bullish .signal-text { color: #26a69a; }
        .signal-item.bearish .signal-text { color: #ef5350; }
        .signal-item.warning .signal-text { color: #ffd54f; }

        /* Signal Tooltip */
        .signal-item {
            position: relative;
            cursor: help;
        }

        .signal-tooltip {
            position: fixed;
            top: 0;
            left: 0;
            background: #1e222d;
            border: 1px solid #4a4e59;
            border-radius: 6px;
            padding: 10px 12px;
            min-width: 240px;
            max-width: 320px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
            z-index: 99999;
            opacity: 0;
            visibility: hidden;
            transform: translateY(5px);
            transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
            pointer-events: none;
        }

        .signal-tooltip.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .signal-tooltip::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 20px;
            border: 6px solid transparent;
            border-top-color: #4a4e59;
            border-bottom: none;
        }

        .signal-tooltip::before {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 21px;
            border: 5px solid transparent;
            border-top-color: #1e222d;
            border-bottom: none;
        }

        .signal-tooltip.arrow-up::after {
            bottom: auto;
            top: -6px;
            border-top-color: transparent;
            border-bottom-color: #4a4e59;
            border-top: none;
        }

        .signal-tooltip.arrow-up::before {
            bottom: auto;
            top: -5px;
            border-top-color: transparent;
            border-bottom-color: #1e222d;
            border-top: none;
        }

        .tooltip-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid #2a2e39;
        }

        .tooltip-title {
            font-size: 11px;
            font-weight: 600;
            color: #e0e0e0;
        }

        .tooltip-title.bullish { color: #26a69a; }
        .tooltip-title.bearish { color: #ef5350; }
        .tooltip-title.warning { color: #ffd54f; }

        .tooltip-time {
            font-size: 9px;
            color: #888;
            font-family: 'Roboto Mono', monospace;
        }

        .tooltip-desc {
            font-size: 10px;
            color: #aaa;
            line-height: 1.5;
            margin-bottom: 6px;
        }

        .tooltip-details {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid #2a2e39;
        }

        .tooltip-detail {
            font-size: 9px;
            color: #888;
        }

        .tooltip-detail span {
            color: #ccc;
            font-family: 'Roboto Mono', monospace;
        }

        /* Global Tooltip - rendered at body level to escape overflow */
        .global-tooltip {
            position: fixed;
            top: 0;
            left: 0;
            background: #1e222d;
            border: 1px solid #4a4e59;
            border-radius: 6px;
            padding: 10px 12px;
            min-width: 240px;
            max-width: 320px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
            z-index: 999999;
            opacity: 0;
            visibility: hidden;
            transform: translateY(5px);
            transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
            pointer-events: none;
        }

        .global-tooltip.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .global-tooltip::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 20px;
            border: 6px solid transparent;
            border-top-color: #4a4e59;
            border-bottom: none;
        }

        .global-tooltip::before {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 21px;
            border: 5px solid transparent;
            border-top-color: #1e222d;
            border-bottom: none;
        }

        .global-tooltip .tooltip-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid #2a2e39;
        }

        .global-tooltip .tooltip-title {
            font-size: 11px;
            font-weight: 600;
            color: #e0e0e0;
        }

        .global-tooltip .tooltip-title.bullish { color: #26a69a; }
        .global-tooltip .tooltip-title.bearish { color: #ef5350; }
        .global-tooltip .tooltip-title.warning { color: #ffd54f; }

        .global-tooltip .tooltip-time {
            font-size: 9px;
            color: #888;
            font-family: 'Roboto Mono', monospace;
        }

        .global-tooltip .tooltip-desc {
            font-size: 10px;
            color: #aaa;
            line-height: 1.4;
        }

        .global-tooltip .tooltip-details {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid #2a2e39;
        }

        .global-tooltip .tooltip-detail {
            font-size: 9px;
            color: #888;
        }

        .global-tooltip .tooltip-detail span {
            color: #ccc;
            font-family: 'Roboto Mono', monospace;
        }

        /* MTF Compact */
        .mtf-compact {
            flex: 1 1 180px;
            background: rgba(30, 34, 45, 0.9);
            border: 1px solid #2a2e39;
            border-radius: 6px;
            padding: 6px 10px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 160px;
        }

        .mtf-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .mtf-title {
            font-size: 10px;
            font-weight: 600;
            color: #888;
            text-transform: uppercase;
        }

        .mtf-trend {
            font-size: 10px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 3px;
            background: rgba(42, 46, 57, 0.8);
            color: #888;
        }

        .mtf-trend.bullish {
            background: rgba(38, 166, 154, 0.25);
            color: #26a69a;
        }

        .mtf-trend.bearish {
            background: rgba(239, 83, 80, 0.25);
            color: #ef5350;
        }

        .mtf-trend.neutral {
            background: rgba(255, 213, 79, 0.2);
            color: #ffd54f;
        }

        .mtf-row {
            display: flex;
            gap: 3px;
            flex: 1;
            align-items: center;
        }

        .mtf-cell {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
            padding: 3px 2px;
            background: rgba(42, 46, 57, 0.5);
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .mtf-cell:hover {
            background: rgba(42, 46, 57, 0.9);
        }

        .tf-label {
            font-size: 8px;
            font-weight: 600;
            color: #666;
        }

        .tf-arrow {
            font-size: 12px;
            font-weight: bold;
            line-height: 1;
        }

        .tf-arrow.bullish { color: #26a69a; }
        .tf-arrow.bearish { color: #ef5350; }
        .tf-arrow.neutral { color: #555; }

        /* Quick Stats */
        .quick-stats {
            display: flex;
            gap: 4px;
            background: rgba(30, 34, 45, 0.9);
            border: 1px solid #2a2e39;
            border-radius: 6px;
            padding: 6px 8px;
            align-items: center;
            flex-shrink: 0;
        }

        .qs-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
            padding: 0 6px;
            border-right: 1px solid #2a2e39;
        }

        .qs-item:last-child {
            border-right: none;
        }

        .qs-label {
            font-size: 8px;
            font-weight: 600;
            color: #555;
            text-transform: uppercase;
        }

        .qs-value {
            font-size: 10px;
            font-weight: 600;
            font-family: 'Roboto Mono', monospace;
            color: #aaa;
        }

        .qs-value.high { color: #26a69a; }
        .qs-value.low { color: #ef5350; }
        .qs-value.positive { color: #26a69a; }
        .qs-value.negative { color: #ef5350; }

        /* Trend Compact */
        .trend-compact {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            background: rgba(30, 34, 45, 0.9);
            border: 1px solid #2a2e39;
            border-radius: 6px;
            padding: 6px 14px;
            min-width: 60px;
            flex-shrink: 0;
        }

        .trend-icon {
            font-size: 20px;
            line-height: 1;
        }

        .trend-icon.bullish { color: #26a69a; }
        .trend-icon.bearish { color: #ef5350; }
        .trend-icon.neutral { color: #666; }

        .trend-text {
            font-size: 9px;
            font-weight: 600;
            color: #888;
            text-transform: uppercase;
        }

        .trend-text.bullish { color: #26a69a; }
        .trend-text.bearish { color: #ef5350; }

        /* Keep backward compatibility for some classes */
        .stat-value.high { color: #26a69a; }
        .stat-value.low { color: #ef5350; }
        .stat-value.positive { color: #26a69a; }
        .stat-value.negative { color: #ef5350; }

        /* ========================================
           RESPONSIVE FOOTER - Small Screens
           ======================================== */
        @media (max-width: 700px) {
            .footer-indicators-row {
                gap: 6px;
            }
            .footer-indicator-card {
                flex: 1 1 100px;
                min-width: 90px;
                padding: 6px 8px;
            }
            .indicator-value {
                font-size: 15px;
            }
            .footer-signals-row {
                gap: 6px;
            }
            .signals-panel {
                flex: 1 1 150px;
                min-width: 140px;
            }
            .mtf-compact {
                flex: 1 1 140px;
                min-width: 130px;
            }
            .quick-stats {
                padding: 4px 6px;
            }
            .qs-item {
                padding: 0 4px;
            }
            .qs-value {
                font-size: 9px;
            }
            .trend-compact {
                padding: 4px 10px;
                min-width: 50px;
            }
            .trend-icon {
                font-size: 16px;
            }
        }

        @media (max-width: 500px) {
            .footer-indicator-card {
                flex: 1 1 80px;
                min-width: 75px;
            }
            .indicator-name {
                font-size: 10px;
            }
            .indicator-period {
                display: none;
            }
            .indicator-value {
                font-size: 14px;
            }
            .indicator-status {
                font-size: 8px;
                padding: 1px 4px;
            }
            .macd-mini, .stoch-mini, .atr-info {
                display: none;
            }
            .quick-stats .qs-item:nth-child(3),
            .quick-stats .qs-item:nth-child(4) {
                display: none;
            }
        }

        .error-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(239, 83, 80, 0.1);
            border: 1px solid #ef5350;
            color: #ef5350;
            padding: 15px 20px;
            border-radius: 4px;
            font-size: 14px;
        }

        /* Context Menu */
        .context-menu {
            position: absolute;
            background: #1e222d;
            border: 1px solid #363a45;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            padding: 5px 0;
            min-width: 180px;
            z-index: 1000;
            display: none;
        }

        .context-menu-item {
            padding: 10px 15px;
            cursor: pointer;
            color: #e0e0e0;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.2s;
        }

        .context-menu-item:hover {
            background: #2962ff;
        }

        .context-menu-item i {
            width: 16px;
            text-align: center;
        }

        .context-menu-separator {
            height: 1px;
            background: #363a45;
            margin: 5px 0;
        }

        .context-menu-header {
            padding: 8px 15px;
            color: #9598a1;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid #363a45;
            margin-bottom: 5px;
        }

        /* Object List Modal */
        .object-list-modal .modal {
            max-width: 550px;
        }

        .object-list-container {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #2a2e39;
            border-radius: 6px;
            background: #0d1017;
        }

        .object-list-empty {
            padding: 40px 20px;
            text-align: center;
            color: #787b86;
        }

        .object-list-empty-icon {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.5;
        }

        .object-list-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid #1e222d;
            transition: background 0.15s ease;
        }

        .object-list-item:last-child {
            border-bottom: none;
        }

        .object-list-item:hover {
            background: rgba(41, 98, 255, 0.1);
        }

        .object-list-item.selected {
            background: rgba(41, 98, 255, 0.2);
        }

        .object-list-icon {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
            background: #1e222d;
            border-radius: 6px;
        }

        .object-list-info {
            flex: 1;
            min-width: 0;
        }

        .object-list-name {
            font-size: 13px;
            font-weight: 500;
            color: #e0e0e0;
            margin-bottom: 2px;
        }

        .object-list-details {
            font-size: 11px;
            color: #787b86;
        }

        .object-list-actions {
            display: flex;
            gap: 8px;
        }

        .object-list-btn {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: all 0.15s ease;
        }

        .object-list-btn-select {
            background: rgba(41, 98, 255, 0.2);
            color: #2962ff;
        }

        .object-list-btn-select:hover {
            background: #2962ff;
            color: white;
        }

        .object-list-btn-delete {
            background: rgba(239, 83, 80, 0.2);
            color: #ef5350;
        }

        .object-list-btn-delete:hover {
            background: #ef5350;
            color: white;
        }

        .object-list-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 15px;
            border-top: 1px solid #2a2e39;
            margin-top: 15px;
        }

        .object-list-count {
            font-size: 12px;
            color: #787b86;
        }

        .object-list-delete-all {
            background: rgba(239, 83, 80, 0.15);
            border: 1px solid rgba(239, 83, 80, 0.3);
            color: #ef5350;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .object-list-delete-all:hover {
            background: #ef5350;
            color: white;
            border-color: #ef5350;
        }

        /* Modal Overlay */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: #131722;
            border: 1px solid #363a45;
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .modal-header {
            padding: 20px 25px;
            border-bottom: 1px solid #363a45;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #e0e0e0;
        }

        .modal-close {
            background: transparent;
            border: none;
            color: #787b86;
            font-size: 24px;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .modal-close:hover {
            background: #2a2e39;
            color: #e0e0e0;
        }

        .modal-body {
            padding: 25px;
            overflow-y: auto;
            flex: 1;
        }

        .modal-footer {
            padding: 15px 25px;
            border-top: 1px solid #363a45;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .btn {
            padding: 8px 20px;
            border-radius: 4px;
            border: 1px solid #363a45;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s;
        }

        .btn-primary {
            background: #2962ff;
            color: white;
            border-color: #2962ff;
        }

        .btn-primary:hover {
            background: #1e4fc7;
        }

        .btn-secondary {
            background: #1e222d;
            color: #e0e0e0;
        }

        .btn-secondary:hover {
            background: #2a2e39;
        }

        /* Form Controls */
        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            color: #787b86;
            font-size: 12px;
            font-weight: 500;
            text-transform: uppercase;
        }

        .form-control {
            width: 100%;
            background: #1e222d;
            border: 1px solid #363a45;
            color: #e0e0e0;
            padding: 10px 12px;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
        }

        .form-control:focus {
            border-color: #2962ff;
        }

        .form-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .form-checkbox input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .form-checkbox label {
            color: #e0e0e0;
            font-size: 14px;
            cursor: pointer;
        }

        /* Theme Modal Styles */
        .theme-modal {
            max-width: 700px;
            width: 95%;
        }

        .theme-tabs {
            display: flex;
            border-bottom: 1px solid #363a45;
            margin-bottom: 20px;
        }

        .theme-tab {
            padding: 12px 24px;
            background: transparent;
            border: none;
            color: #787b86;
            font-size: 14px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }

        .theme-tab:hover {
            color: #e0e0e0;
        }

        .theme-tab.active {
            color: #2962ff;
            border-bottom-color: #2962ff;
        }

        .theme-tab-content {
            display: none;
        }

        .theme-tab-content.active {
            display: block;
        }

        /* Preset Themes Grid */
        .themes-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }

        .theme-card {
            background: #1e222d;
            border: 2px solid #363a45;
            border-radius: 8px;
            padding: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .theme-card:hover {
            border-color: #2962ff;
            transform: translateY(-2px);
        }

        .theme-card.selected {
            border-color: #2962ff;
            box-shadow: 0 0 15px rgba(41, 98, 255, 0.3);
        }

        .theme-preview {
            height: 60px;
            border-radius: 4px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 8px;
        }

        .theme-preview-candle {
            width: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .theme-preview-wick {
            width: 2px;
            height: 8px;
        }

        .theme-preview-body {
            width: 10px;
            height: 20px;
            border-radius: 2px;
        }

        .theme-name {
            font-size: 13px;
            color: #e0e0e0;
            text-align: center;
            font-weight: 500;
        }

        /* Customization Section */
        .customize-section {
            background: #1a1d26;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .customize-section-title {
            font-size: 14px;
            color: #2962ff;
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .color-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            padding: 8px 12px;
            background: #1e222d;
            border-radius: 6px;
        }

        .color-row:last-child {
            margin-bottom: 0;
        }

        .color-label {
            color: #e0e0e0;
            font-size: 13px;
        }

        .color-picker-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .color-picker {
            width: 40px;
            height: 30px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background: transparent;
            padding: 0;
        }

        .color-picker::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        .color-picker::-webkit-color-swatch {
            border: 2px solid #363a45;
            border-radius: 4px;
        }

        .color-hex {
            width: 80px;
            background: #131722;
            border: 1px solid #363a45;
            color: #e0e0e0;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-family: monospace;
            text-transform: uppercase;
        }

        .color-hex:focus {
            border-color: #2962ff;
            outline: none;
        }

        /* Reset Button */
        .btn-reset {
            background: transparent;
            color: #787b86;
            border: 1px dashed #363a45;
        }

        .btn-reset:hover {
            color: #e0e0e0;
            border-color: #787b86;
            background: rgba(120, 123, 134, 0.1);
        }

        /* Theme Preview Live */
        .live-preview {
            background: #1a1d26;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }

        .live-preview-title {
            font-size: 12px;
            color: #787b86;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .live-preview-chart {
            height: 100px;
            border-radius: 4px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 6px;
            padding: 15px;
            position: relative;
            overflow: hidden;
        }

        .live-preview-chart::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(transparent 0%, transparent 24%, var(--grid-color, #2a2e39) 24%, var(--grid-color, #2a2e39) 25%, transparent 25%, transparent 49%, var(--grid-color, #2a2e39) 49%, var(--grid-color, #2a2e39) 50%, transparent 50%, transparent 74%, var(--grid-color, #2a2e39) 74%, var(--grid-color, #2a2e39) 75%, transparent 75%);
            pointer-events: none;
        }

        .preview-candle {
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 1;
        }

        .preview-wick {
            width: 2px;
        }

        .preview-body {
            width: 14px;
            border-radius: 2px;
        }

        /* Import/Export */
        .import-export-section {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #363a45;
        }

        .btn-small {
            padding: 6px 12px;
            font-size: 12px;
        }

        /* Indicator Modal Styles */
        .indicator-tabs {
            display: flex;
            border-bottom: 1px solid #363a45;
            margin-bottom: 20px;
            gap: 5px;
        }

        .indicator-tab {
            padding: 10px 20px;
            background: transparent;
            border: none;
            color: #787b86;
            font-size: 13px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }

        .indicator-tab:hover {
            color: #e0e0e0;
        }

        .indicator-tab.active {
            color: #2962ff;
            border-bottom-color: #2962ff;
        }

        .indicator-tab-content {
            display: none;
        }

        .indicator-tab-content.active {
            display: block;
        }

        .indicator-section {
            background: #1a1d26;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
        }

        .indicator-section-title {
            font-size: 14px;
            color: #2962ff;
            font-weight: 600;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid #2a2e39;
        }

        .indicator-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .indicator-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: #1e222d;
            border-radius: 6px;
            transition: background 0.2s;
        }

        .indicator-item:hover {
            background: #252930;
        }

        .indicator-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: #2962ff;
        }

        .indicator-item label {
            flex: 1;
            color: #e0e0e0;
            font-size: 13px;
            cursor: pointer;
        }

        .indicator-color {
            width: 28px;
            height: 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background: transparent;
            padding: 0;
        }

        .indicator-color::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        .indicator-color::-webkit-color-swatch {
            border: 2px solid #363a45;
            border-radius: 4px;
        }

        .indicator-row {
            margin-bottom: 12px;
        }

        .indicator-params {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 12px;
            padding: 12px;
            background: #1e222d;
            border-radius: 6px;
        }

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

        .param-group label {
            font-size: 11px;
            color: #787b86;
            text-transform: uppercase;
        }

        .param-input {
            width: 80px;
            background: #131722;
            border: 1px solid #363a45;
            color: #e0e0e0;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 13px;
            outline: none;
        }

        .param-input:focus {
            border-color: #2962ff;
        }

        .indicator-note {
            font-size: 11px;
            color: #787b86;
            font-style: italic;
            margin-top: 10px;
            padding: 8px;
            background: rgba(41, 98, 255, 0.1);
            border-radius: 4px;
            border-left: 3px solid #2962ff;
        }

        /* Responsive Toolbar for narrow widths (900px and below) - for embedded charts */
        @media (max-width: 900px) {
            .chart-toolbar {
                padding: 4px 6px;
                gap: 4px;
            }

            .toolbar-section {
                gap: 2px;
            }

            .toolbar-divider {
                height: 18px;
                margin: 0 4px;
            }

            .tool-group {
                padding: 2px 3px;
                gap: 1px;
            }

            .tf-toolbar-btn {
                padding: 3px 6px;
                font-size: 11px;
                height: 24px;
                min-width: 24px;
            }

            .drawing-tool-btn {
                padding: 3px 5px;
                height: 24px;
                min-width: 24px;
            }

            .drawing-tool-btn svg {
                width: 14px;
                height: 14px;
            }

            .pattern-btn,
            .screenshot-btn,
            .panel-toggle-btn {
                padding: 3px 6px;
                font-size: 11px;
                height: 24px;
                min-width: 24px;
            }

            .pattern-btn svg,
            .screenshot-btn svg,
            .panel-toggle-btn svg {
                width: 14px;
                height: 14px;
            }

            .toolbar-symbol-selector select {
                padding: 3px 6px;
                font-size: 11px;
                min-width: 90px;
            }
        }

        /* Responsive Toolbar for very narrow widths (700px and below) */
        @media (max-width: 700px) {
            .chart-toolbar {
                padding: 3px 4px;
                gap: 2px;
            }

            .toolbar-divider {
                height: 16px;
                margin: 0 3px;
            }

            .tool-group {
                padding: 1px 2px;
            }

            .tf-toolbar-btn {
                padding: 2px 4px;
                font-size: 10px;
                height: 22px;
                min-width: 22px;
            }

            .drawing-tool-btn {
                padding: 2px 4px;
                height: 22px;
                min-width: 22px;
            }

            .drawing-tool-btn svg {
                width: 13px;
                height: 13px;
            }

            .pattern-btn,
            .screenshot-btn,
            .panel-toggle-btn {
                padding: 2px 4px;
                font-size: 10px;
                height: 22px;
                min-width: 22px;
            }

            .pattern-btn svg,
            .screenshot-btn svg,
            .panel-toggle-btn svg {
                width: 13px;
                height: 13px;
            }

            .toolbar-symbol-selector select {
                padding: 2px 4px;
                font-size: 10px;
                min-width: 80px;
            }
        }

        /* Responsive Toolbar for extra narrow widths (500px and below) */
        @media (max-width: 500px) {
            .chart-toolbar {
                padding: 2px 3px;
                gap: 1px;
            }

            .toolbar-divider {
                height: 14px;
                margin: 0 2px;
            }

            .tool-group {
                padding: 1px;
            }

            .tf-toolbar-btn {
                padding: 1px 3px;
                font-size: 9px;
                height: 20px;
                min-width: 20px;
            }

            .drawing-tool-btn {
                padding: 1px 3px;
                height: 20px;
                min-width: 20px;
            }

            .drawing-tool-btn svg {
                width: 12px;
                height: 12px;
            }

            .pattern-btn,
            .screenshot-btn,
            .panel-toggle-btn {
                padding: 1px 3px;
                font-size: 9px;
                height: 20px;
                min-width: 20px;
            }

            .pattern-btn svg,
            .screenshot-btn svg,
            .panel-toggle-btn svg {
                width: 12px;
                height: 12px;
            }

            .toolbar-symbol-selector select {
                padding: 1px 3px;
                font-size: 9px;
                min-width: 70px;
            }
        }

        /* Responsive for smaller screens - indicator grid */
        @media (max-width: 768px) {
            .indicator-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .indicator-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================
           PATTERN TOOLTIP STYLES
           Beautiful hover tooltips for chart patterns
           ============================================ */
        .pattern-tooltip {
            position: fixed;
            z-index: 10000;
            min-width: 280px;
            max-width: 360px;
            background: linear-gradient(145deg, #1a1f2e 0%, #131722 100%);
            border-radius: 12px;
            box-shadow:
                0 10px 40px rgba(0, 0, 0, 0.5),
                0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            opacity: 0;
            transform: translateY(5px);
            transition: opacity 0.15s ease, transform 0.15s ease;
            pointer-events: none;
            font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        .pattern-tooltip.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Bullish tooltip accent */
        .pattern-tooltip.pattern-tooltip-bullish {
            border-left: 3px solid #26a69a;
        }

        /* Bearish tooltip accent */
        .pattern-tooltip.pattern-tooltip-bearish {
            border-left: 3px solid #ef5350;
        }

        /* Tooltip Header */
        .pattern-tooltip-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px 12px 0 0;
        }

        .pattern-tooltip-icon {
            font-size: 20px;
            line-height: 1;
        }

        .pattern-tooltip-title {
            font-size: 14px;
            font-weight: 600;
            color: #ffffff;
            flex: 1;
        }

        .pattern-tooltip-badge {
            font-size: 10px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .pattern-tooltip-badge.bullish {
            background: rgba(38, 166, 154, 0.2);
            color: #26a69a;
            border: 1px solid rgba(38, 166, 154, 0.3);
        }

        .pattern-tooltip-badge.bearish {
            background: rgba(239, 83, 80, 0.2);
            color: #ef5350;
            border: 1px solid rgba(239, 83, 80, 0.3);
        }

        .pattern-tooltip-badge.neutral {
            background: rgba(156, 163, 175, 0.2);
            color: #9ca3af;
            border: 1px solid rgba(156, 163, 175, 0.3);
        }

        /* Tooltip Body */
        .pattern-tooltip-body {
            padding: 12px 14px;
        }

        .pattern-tooltip-desc {
            font-size: 12px;
            line-height: 1.5;
            color: #b0b8c4;
            margin-bottom: 12px;
        }

        .pattern-tooltip-section {
            margin-bottom: 10px;
        }

        .pattern-tooltip-section:last-of-type {
            margin-bottom: 0;
        }

        .pattern-tooltip-label {
            font-size: 11px;
            font-weight: 600;
            color: #7d8590;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .pattern-tooltip-section p {
            font-size: 11px;
            line-height: 1.5;
            color: #d1d5db;
            margin: 0;
        }

        .pattern-tooltip-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .pattern-tooltip-list li {
            font-size: 11px;
            line-height: 1.6;
            color: #9ca3af;
            padding-left: 14px;
            position: relative;
        }

        .pattern-tooltip-list li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: #4b5563;
        }

        /* Tooltip Footer */
        .pattern-tooltip-footer {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .pattern-tooltip-stat {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .pattern-tooltip-stat .stat-label {
            font-size: 10px;
            color: #6b7280;
        }

        .pattern-tooltip-stat .stat-value {
            font-size: 11px;
            font-weight: 600;
            color: #e5e7eb;
            background: rgba(255, 255, 255, 0.05);
            padding: 2px 6px;
            border-radius: 4px;
        }