@import url('https://fonts.googleapis.com/css2?family=Inter:wght=300;400;500;600;700;800&display=swap');
        
        html { overscroll-behavior-y: auto; }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            background-color: #f1f3f5;
        }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: gray; border-radius: 4px; }
        
        .timeline-container {
            position: relative;
            height: 40px;
            display: flex;
            align-items: center;
            user-select: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #228be6;
            border: 2px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            cursor: pointer;
            position: relative;
            z-index: 40;
            transition: transform 0.1s ease;
        }
        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

        #rrweb-mount-container {
            width: 100%;
            height: 100%;
            display: block;
            overflow-y: auto !important; 
            overflow-x: hidden !important;
            background-color: transparent;
            position: relative;
            pointer-events: auto !important;
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        #rrweb-mount-container iframe {
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
            outline: none !important;
            display: block;
            margin: 0 !important;
            padding: 0 !important;
            pointer-events: auto !important;
            width: 100% !important;  
            height: 100% !important; 
        }

        .rr-cursor, .rr-replayer-cursor, .replayer-cursor, .rr-replayer-mouse-tail,
        [class*="rr-cursor"], [class*="replayer-cursor"], [class*="mouse-tail"],
        svg[class*="cursor"], svg.rr-cursor, .replayer-wrapper svg, .rr-replayer svg {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        .fl-wrap {
            position: relative;
            flex-grow: 1;
        }
        .match-input {
            width: 100%;
            padding: 16px 10px 5px 10px;
            font-size: 13px;
            border: 1px solid #c8d0d8;
            border-radius: 5px;
            outline: none;
            background: #fff;
            color: #1e293b;
            font-family: inherit;
            transition: border-color 0.15s;
            line-height: 1.2;
        }

        .match-input::placeholder { color: transparent; }
        .match-input:focus { border-color: #228be6; }
        /* Floating label */
        .fl-label {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 13px;
            color: #94a3b8;
            font-weight: 500;
            pointer-events: none;
            transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease, transform 0.15s ease;
            white-space: nowrap;
            font-family: inherit;
        }

        .match-input:focus + .fl-label,
        .match-input:not(:placeholder-shown) + .fl-label,
        .match-input.has-value + .fl-label {
            top: 7px;
            transform: translateY(0);
            font-size: 9px;
            color: #228be6;
            font-weight: 700;
            letter-spacing: 0.03em;
        }

        .av-input {
            width: 100%;
            padding: 7px 10px;
            font-size: 13px;
            border: 1px solid #c8d0d8;
            border-radius: 5px;
            outline: none;
            background: #fff;
            color: #1e293b;
            font-family: inherit;
            transition: border-color 0.15s;
        }
        .av-input::placeholder { color: #94a3b8; font-size: 13px; }
        .av-input:focus { border-color: #228be6; }


        .ctrl-group { display: flex; align-items: center; gap: 14px; }
        .tooltip-target {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .tooltip-target::after {
            content: attr(data-tip);
            position: absolute;
            bottom: calc(100% + 7px);
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            color: #0f172a;
            border: 1.5px solid #228be6;
            border-radius: 4px;
            padding: 2px 9px;
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s;
            box-shadow: 0 2px 6px rgba(0,0,0,0.12);
            z-index: 99;
        }
        .tooltip-target:hover::after { opacity: 1; }
        .ctrl-icon {
            width: 20px;
            height: 20px;
            display: block;
            color: #475569;
            transition: color 0.12s, transform 0.1s;
            pointer-events: none;
        }
        .tooltip-target:hover .ctrl-icon { color: #0f172a; transform: scale(1.12); }
        .tooltip-target:active .ctrl-icon { transform: scale(0.92); }


        #play-pause-btn { gap: 0; }
        #play-pause-btn svg.ctrl-icon { width: 18px; height: 18px; }


        #custom-slider-progress {
            transition: background-color 0.2s ease, height 0.2s ease, box-shadow 0.2s ease;
        }
        #custom-slider-progress.is-playing {
            background-color: #0ea5e9;
            height: 5px;
            box-shadow: 0 0 8px rgba(14, 165, 233, 0.45);
        }


        body, main, aside, header, footer, p, span, h1, h2, h3, h4, h5 {
            user-select: text;
            -webkit-user-select: text;
        }

        #advanced-slider-wrapper, .select-none { user-select: none; -webkit-user-select: none; }


        #mobile-replay-overlay {
            background: transparent;
        }

        /* Prevent pull-to-refresh scroll chaining from the fixed layout containers */
        #app-root, main {
            overscroll-behavior: contain;
        }

 
        #match-data-drawer {
            transition: transform 0.3s ease-in-out;
        }
        #mobile-drawer-backdrop {
            transition: opacity 0.25s ease;
        }

        @media (max-width: 1023px) {
            #match-data-drawer {
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                width: 86%;
                max-width: 360px;
                z-index: 60;
                transform: translateX(-100%);
                box-shadow: 8px 0 24px rgba(0,0,0,0.25);
            }
            #match-data-drawer.drawer-open {
                transform: translateX(0);
            }
        }