body { height: 100dvh; background-color: #0b0e14; color: #d1d4dc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; overflow: hidden; display: flex; flex-direction: column; }
        
        .tab-btn { border-bottom: 2px solid transparent; transition: all 0.2s; }
        .tab-btn.active { border-bottom: 2px solid #2962FF; color: #ffffff; background-color: #1e222d; }
        .chart-box { width: 100%; position: relative; }
        .chart-box > div:not([id^="combined-heatmap"]):not([id^="combined-vol-profile"]):not(.qtp-watermark) { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; }

        .qtp-watermark {
            position: absolute; bottom: 15px; right: 15px;
            font-family: 'Trebuchet MS', sans-serif; font-size: 10px; font-weight: bold;
            color: #ffffff; opacity: 0.06; pointer-events: none; user-select: none; z-index: 40;
       }
        .neon-text { text-shadow: 0 0 10px rgba(41, 98, 255, 0.4); }
        .tape-row { animation: slideIn 0.2s ease-out; border-left: 2px solid transparent; }
        @keyframes slideIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
        .asset-container { display: none; width: 100%; animation: fadeIn 0.3s ease-in-out; }
        .asset-container.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: #0b0e14; }
        ::-webkit-scrollbar-thumb { background: #2a2e39; border-radius: 2px; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }

        .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 32px; }
        @media (min-width: 1024px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; } }

        .hero-panel { display: flex; flex-direction: column; gap: 15px; margin-bottom: 32px; padding: 24px; background: #131722; border: 1px solid #2a2e39; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
        .hero-panel > div { width: 100%; border-top: 1px solid #2a2e39; padding-top: 12px; }
        .hero-panel > div:first-child { border-top: none; padding-top: 0; }
        @media (min-width: 640px) {
            .hero-panel { flex-direction: row; align-items: center; justify-content: space-between; gap: 0; }
            .hero-panel > div { width: 25%; border-top: none; padding-top: 0; text-align: center; border-left: 1px solid #2a2e39; }
            .hero-panel > div:first-child { text-align: left; border-left: none; }
            .hero-panel > div:last-child { text-align: right; }
        }

        .layout-wrapper { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
        .layout-charts { flex: 1; overflow-y: auto; background: #0b0e14; transition: width 0.3s ease; -webkit-overflow-scrolling: touch; }
        .layout-tape { height: 40%; display: flex; flex-direction: column; background: #131722; transition: all 0.3s ease; flex-shrink: 0; }
        .layout-tape.collapsed { height: 0; border: none; overflow: hidden; }

        .tape-toggle-btn {
            display: flex; align-items: center; justify-content: center;
            width: 100%; height: 44px; background: #1e222d; cursor: pointer;
            border-top: 1px solid #2a2e39; border-bottom: 1px solid #2a2e39;
            transition: background 0.2s, color 0.2s; color: #787b86; z-index: 50; flex-shrink: 0;
        }
        .tape-toggle-btn:hover { background: #2962FF; color: white; }
        
        #tape-arrow { transition: transform 0.3s ease; transform: rotate(90deg); width: 24px; height: 24px; }
        .tape-collapsed #tape-arrow { transform: rotate(-90deg); }

        body.fullscreen-active header,
        body.fullscreen-active > div.z-50.relative,
        body.fullscreen-active #tape-toggle,
        body.fullscreen-active #tape-area { display: none !important; }
        
        body.fullscreen-active .layout-charts { padding: 0 !important; overflow: hidden !important; }

        .fullscreen-mode {
            position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
            z-index: 999999 !important; background-color: #0b0e14 !important; padding: 12px !important; margin: 0 !important;
            border-radius: 0 !important; border: none !important; box-shadow: none !important; display: flex !important;
            flex-direction: column !important; width: 100vw !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100dvh !important; box-sizing: border-box !important;
        }
        @media (min-width: 640px) { .fullscreen-mode { padding: 32px !important; } }
        
        .fullscreen-mode > div:first-child { flex: 0 0 auto !important; margin-bottom: 12px !important; width: 100% !important; max-width: 100% !important; }
        .fullscreen-mode .chart-box { flex: 1 1 0px !important; height: 100% !important; width: 100% !important; min-height: 0 !important; min-width: 0 !important; }

        @media (min-width: 1024px) {
            .layout-wrapper { flex-direction: row; }
            .layout-charts { height: 100%; width: 75%; }
            .layout-charts.expanded { width: 100%; }
            .layout-tape { height: 100%; width: 25%; border-top: none; border-left: 1px solid #2a2e39; }
            .layout-tape.collapsed { width: 0; border: none; overflow: hidden; }
            .tape-toggle-btn { width: 24px; height: 100%; border-left: 1px solid #2a2e39; border-right: 1px solid #2a2e39; border-top: none; border-bottom: none; }
            #tape-arrow { transform: rotate(0deg); width: 18px; height: 18px; }
            .tape-collapsed #tape-arrow { transform: rotate(180deg); }
        }