body { background-color: #080a0d; color: #e5e7eb; font-family: 'Rubik', 'Inter', sans-serif; } /* Rubik: slightly rounded, easier to read (Trello "Minor tweaks" #4) */
    .card { background-color: #111318; border: 1px solid #2d3748; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); overflow: hidden; }
    .stat-box { background: linear-gradient(180deg, #161920 0%, #0f1115 100%); border: 1px solid #2d3748; }
    .stat-value { font-family: 'Chakra Petch', sans-serif; }
    .chart-title { font-family: 'Chakra Petch', sans-serif; letter-spacing: 0.05em; }
    
    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #0b0d10; }
    ::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    
    /* Checkbox */
    .lap-checkbox:checked + div { background-color: #3b82f6; border-color: #3b82f6; }
    .lap-checkbox:checked + div svg { display: block; }

    /* Loader */
    #loadingOverlay { backdrop-filter: blur(8px); background: rgba(0,0,0,0.8); }
    .loader { width: 48px; height: 48px; border: 3px solid #FFF; border-bottom-color: #3b82f6; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }
    @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    /* Playback Slider */
    input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; }
    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 12px; width: 12px; border-radius: 50%; background: #3b82f6; cursor: pointer; margin-top: -4px; box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); transition: transform 0.1s; }
    input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.3); }
    input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #374151; border-radius: 2px; }
    
    /* Plotly Tweaks */
    /* Map attribution: OpenStreetMap's licence requires it to be visible, so it's kept but made small and dark */
    .mapboxgl-ctrl-attrib { background-color: rgba(5,5,5,0.6) !important; font-size: 9px; }
    .mapboxgl-ctrl-attrib a, .mapboxgl-ctrl-attrib-inner { color: #6b7280 !important; }
    .mapboxgl-ctrl-attrib.mapboxgl-compact { min-height: 18px; }
    
    /* Toggle Switch */
    .axis-btn { width: 80px; text-align: center; justify-content: center; background-color: transparent; color: #9ca3af; border: 1px solid #374151; transition: all 0.2s ease; }
    .axis-btn.active { background-color: #2563eb; color: white; border-color: #2563eb; }

    /* Playback Cursor CSS Overlay */
    .chart-cursor { position: absolute; width: 1px; border-left: 1px dashed rgba(255,255,255,0.7); pointer-events: none; z-index: 50; display: none; }
    
    /* Table Styles (Organic Glow Transition Added) */
    .data-table th, .data-table td { 
        text-align: center; 
        padding: 0.5rem; 
        transition: background-color 0.4s ease-out, color 0.4s ease-out; 
    }
    .data-table th:first-child, .data-table td:first-child { text-align: left; }

    /* Custom Dropdown Arrow Fix */
    .custom-select {
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.5rem center;
        background-size: 1.2em;
        padding-right: 2.25rem;
    }
    
    /* SortableJS Drag & Drop Classes */
    .drag-handle { touch-action: none; }
    .sortable-ghost { opacity: 0.4; background-color: #1f2937; border: 2px dashed #3b82f6; transform: scale(0.98); border-radius: 0.5rem; }
    .sortable-drag { cursor: grabbing !important; opacity: 0.95 !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }