body { background-color: #020617; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Tooltip & Histogram */
#chart-tooltip {
    opacity: 0; position: absolute; background: rgba(15, 23, 42, 0.98); color: white;
    border-radius: 16px; padding: 20px; pointer-events: none; transition: opacity 0.1s ease;
    border: 1px solid #334155; z-index: 100; min-width: 240px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px);
}

.hist-container { 
    display: grid; 
    grid-template-columns: repeat(9, 1fr); 
    gap: 4px; 
    align-items: flex-end; 
    height: 60px; 
    margin-top: 16px; 
}

.hist-bar { 
    background: #334155; 
    border-radius: 2px 2px 0 0; 
    width: 100%; 
    transition: height 0.3s ease, background 0.3s ease; 
}

.hist-bar.speeding { background: #ef4444; }

.label-grid { 
    display: grid; 
    grid-template-columns: repeat(9, 1fr); 
    gap: 4px; 
    text-align: center; 
    margin-top: 8px; 
}

/* Chart Loading Effect */
#chart-container { transition: opacity 0.4s ease; }
#chart-container.loading { opacity: 0.2; pointer-events: none; }

.filter-btn { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }