/* Base Scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #0f172a; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #475569; }

        /* Background & Patterns */
        .checkerboard {
            background-color: #0f172a;
            background-image:
                linear-gradient(45deg, #1e293b 25%, transparent 25%),
                linear-gradient(-45deg, #1e293b 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #1e293b 75%),
                linear-gradient(-45deg, transparent 75%, #1e293b 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
        }
        .filmstrip-fade {
            mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        }

        /* SVG & Visualization */
        .bbox-rect {
            fill: none;
            stroke-width: 2px;
            vector-effect: non-scaling-stroke;
            transition: opacity 0.2s;
        }
        .bbox-rect:hover { stroke-width: 4px; opacity: 0.8; cursor: pointer; }
        .bbox-text { font-family: monospace; font-weight: bold; font-size: 14px; fill: white; pointer-events: none; text-shadow: 0px 0px 3px black; }

        /* Custom Inputs */
        input[type=range] { -webkit-appearance: none; 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;
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%; height: 4px; cursor: pointer; background: #334155; border-radius: 2px;
        }

        /* Tabs */
        .tab-btn.active { border-bottom: 2px solid #3b82f6; color: white; background: rgba(59, 130, 246, 0.1); }
        .tab-btn { color: #94a3b8; border-bottom: 2px solid transparent; transition: all 0.2s; }
        .tab-btn:hover { color: #cbd5e1; background: rgba(255,255,255,0.05); }

        /* --- MODERN TOGGLE SWITCH --- */
        .toggle-checkbox:checked {
            right: 0;
            border-color: #3b82f6;
        }
        .toggle-checkbox:checked + .toggle-label {
            background-color: #3b82f6;
        }
        .toggle-label {
            width: 32px;
            height: 18px;
            background-color: #334155;
            border-radius: 9999px;
            position: relative;
            cursor: pointer;
            transition: background-color 0.2s ease-in;
        }
        .toggle-label:after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 14px;
            height: 14px;
            background-color: white;
            border-radius: 50%;
            transition: transform 0.2s ease-in;
        }
        .toggle-checkbox:checked + .toggle-label:after {
            transform: translateX(14px);
        }
        .toggle-checkbox { display: none; }

        /* Utilities */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .btn-nav { padding: 2px 6px; font-size: 9px; font-family: monospace; background: #0f172a; border: 1px solid #334155; border-radius: 4px; color: #94a3b8; transition:all 0.2s; }
        .btn-nav:hover { color: white; border-color: #3b82f6; }