body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
            padding: 0;
        }

        .logo span {
            font: 600 11px;
        }

        /*font-size: 11px; font-weight: 600;*/

        video {
            width: 100%;
            /* Responsive width */
            max-width: 1200px;
            /* Maximum width */
            margin: 15px auto;
            border: none;
            /* Border around the video 
            border-radius: 4px;*/
            /* Rounded corners */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
            /* Shadow effect */
            display: block;
        }

        /* Video Controls Styling */
        .video-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px !important;
            max-width: 1200px;
            margin: 10px auto;
            padding: 10px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            flex-wrap: wrap;
        }

        .speed-controls {
            display: flex;
            align-items: center;
            gap: 0.8px;
            min-height: 44px;
        }

        .speed-btn {
            background: transparent;
            width: 26px;
            font-family: monospace;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            transition: all 0.2s;
            letter-spacing: -.1em;
            text-align: center;
            line-height: 14px;
            /**/
            font-style: italic;
            border: none;
            padding: 6px 0;
            cursor: pointer;
            font-size: 10px;
        }

        .speed-btn:first-of-type {
            width: 30px;
            padding-left: 4px !important;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
        }

        .speed-btn:last-of-type {
            width: 30px;
            padding-right: 6px !important;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
        }

        .speed-btn:hover {
            background: #ffd21433;
        }

        .speed-btn.active {
            background: #ffd21433;
            border-bottom: 4px solid #ffd214;
            margin-top: -4px;

        }

        .speed-display {
            font-size: 15px;
            color: #25ade4;
            font-weight: 400;
            letter-spacing: -.06rem;
            font-style: italic;
            text-align: left;
            /* margin-top: -22px; */
            /* margin-left:-30px; */
            width: 37px;
            display: inline-block;
            position: relative;
        }
 .speed-display:after {
     content: '\Speed';
           font-size: 10px;
            /*  color: #25ade4;
            font-weight: 400;
            letter-spacing: -.06rem;
            font-style: italic;
            text-align: left;
            margin-top: -22px;
            margin-left:-30px;
            width: 37px;
       */
 } 
        .bookmark-controls {
            display: flex;
            align-items: center;
            gap: 1px;
        }

        .bookmark-btn {
            background: transparent;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            transition: all 0.2s;
            border: none;
            padding: 6px 8px 7px 5px;
            border-radius: 0px;
            cursor: pointer;
            font-size: 10px;
        }

        .bookmark-btn:first-child {
            padding-left: 8px;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
        }

        .bookmark-btn:last-child {
            padding-right: 10px;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
        }

        .bookmark-btn:hover {
            background: #FFD214;
            color: black;
            box-shadow: none;
        }

        .bookmark-btn.clear:hover {
            background: #ff6161;
        }

        .bookmark-btn.pip {
            background: transparent;
        }

        .bookmark-btn.pip:hover {
            background: #03cebd;
        }

        .bookmark-btn.pip:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }

        .bookmarks-list {
            max-width: 1200px;
            margin: 10px auto;
            padding: 10px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            text-align: left;
        }

        .bookmarks-list h3 {
            margin: 0 0 10px 0;
            color: #333;
            font-size: 13px;
        }

        .bookmark-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 2px 5px;
            margin: 7px 0;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.5s;
        }

        .bookmark-item:hover {
            background: #efefef;
        }

        .bookmark-item:hover .bookmark-info {
            border-bottom: 0.5px dotted transparent;
            transition: all 0.5s;
        }

        /* .bookmark-item:hover .bookmark-video {
            color: black;
        } */

        .bookmark-info {
            flex: 1;
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 0.5px dotted #aaaaaa;
        }

        .bookmark-time {
            color: #2a95a8;
            min-width: 30px;
        }

        .bookmark-video {
            color: #474747;
            font-size: 13px;
        }

        .bookmark-delete {
            background: transparent;
            color: #ec4444;
            border: 1px solid #ec444466;
            padding: 3px 5.5px;
            border-radius: 33px;
            cursor: pointer;
            font-size: 11px;
        }

        .bookmark-delete:hover {
            background: #ec4444;
            color: white;
        }

        .keyboard-hint {
            display: none;
            font-size: 9px;
            color: #666;
            margin: 5px 0;
        }

        .offline-status {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: #ffc107;
            color: #000;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        #playlist {
            display: block;
            padding: 0;
            max-width: 1200px;
            margin: 20px auto;
            list-style: none;
        }

        /* Folder group styling */
        .folder-group {
            margin-bottom: 7px;
            /* border: 1px solid #bcd4d8 !important; */
            border-radius: 5px;
            background: #ffffff;
            overflow: hidden;
        }
 .dark-theme .folder-group {
            margin-bottom: 7px;
            border: 1px solid #1e3641 !important;
            border-radius: 5px;
            background: #ffffff;
            overflow: hidden;
        }
 .dark-theme .folder-group:hover {
            margin-bottom: 7px;
            border: 1px solid #1a7c8d !important;
            border-radius: 5px;
            background: #ffffff;
            overflow: hidden;
        }

        .folder-header {
            background: #e9e9e9;
            padding: 8px 9px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: bold;
            font-size: 13px;
            transition: background-color 0.2s;
            border: none;
            width: 100%;
            text-align: left;
        }

        .folder-header:hover {
            background: #ddd;
        }

        .folder-toggle {
            font-size: 14px;
            color: #8db9c1;
            transition: transform 0.2s;
        }
.dark-theme .folder-toggle {
            font-size: 14px;
            color: #2a95a8;
            transition: transform 0.2s;
        }

        .folder-group.collapsed .folder-toggle {
            transform: rotate(-90deg);
        }

        .folder-videos {
            display: flex;
            flex-wrap: wrap;
            gap: 1px;
            padding: 15px;
            justify-content: flex-start;
            transition: all 0.3s ease;
        } 
.dark-theme .folder-videos {
            display: flex;
            background: #15262E;
            flex-wrap: wrap;
            gap: 1px;
            padding: 15px;
            justify-content: flex-start;
            transition: all 0.3s ease;
        }

        .folder-group.collapsed .folder-videos {
            display: none;
        }

        /* Video button styling - now cleaner without folder paths */
        .video-button {
            font-size: 13px;
            cursor: pointer;
            padding: 8px 10px;
            background: transparent;
            border-radius: 5px;
            transition: all 0.2s;
            display: inline-block;
            border: 0.5px solid transparent;
            color: inherit;
            text-decoration: none;
        }

        .video-button:hover {
            border: 0.5px dotted #bcbcbc;
            transform: translateY(-2px);
            transition: all 0.5s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .video-button.active,
        .dark-theme .video-button.active {
            background: #0f8395;
            color: white;
            border-top: 0.5px solid #3dcce2;
            border-left: 0.5px solid #158b9d;
            border-right: 0.5px solid #158b9d;
            border-bottom: 0.5px solid #046877;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        h1 {
            font-size: 21px !important;
            border: none !important;
            margin-bottom: 20px;
        }

        .top-controls {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            justify-content: center;
            max-width: 1200px;
            margin: 5px auto 0 auto;
            padding: 4px 8px;
            border-radius: 6px;
            box-sizing: border-box;
            min-height: 0;
        }

        .folder-btn {
            background: transparent;
            border: 0.5px dotted #bbb;
            font-style: italic;
            border-radius: 6px;
            padding: 6px 10px;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            min-height: 36px;
            margin: 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        /* .folder-btn:hover {
            background: #ffffff;
            border: 0.5px dotted transparent;
            transform: translateY(-3px);
            transition: all 0.5s ease;
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
        } */

        .folder-path {
            font-size: 13px;
            color: #444444;
            margin: 0 6px 0 0;
            white-space: normal;
            /* Change from nowrap to normal to allow wrapping */
            overflow: hidden;
            text-overflow: ellipsis;
            /* Keep this to indicate overflow */
            font-weight: normal;
            max-width: 300px;
            /* Set fixed max-width */
            flex: 1;
            /* Allow the folder path to grow in the flex container */
        }

        /* .folder-path {
            font-size: 15px;
            color: #3c3c3c;
            margin: 0 6px 0 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: normal;
            max-width: 100%;
        } */

        .search-input {
            flex: 1 1 100px;
            min-width: 120px;
            max-width: 180px;
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 11px;
            box-sizing: border-box;
            margin: 0;
        }

        .theme-toggle-btn {
            background: transparent;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 6px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            min-height: 36px;
            margin: 0;
        }

        .theme-toggle-btn:hover {
            /*background: #ffffff;*/
            transform: translateY(-1px);
            transition: all 0.5s ease;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
        }

        .install-btn {
            background: #28a745;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            min-height: 36px;
            margin: 0;
        }

        .install-btn:hover {
            background: #218838;
        }


        @media (max-width: 600px) {
            .other-files-masonry {
                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            }
        }

        /* Tablet: stack in two lines if needed */
        @media (max-width: 768px) {
            .top-controls {
                gap: 5px;
                padding: 4px 4px;
            }

            .search-input {
                font-size: 12px;
                padding: 5px 8px;
                min-width: 120px;
                max-width: 120px;
            }

            .folder-path {
                /*max-width: 120px;*/
                font-size: 13px;
                /* font-weight: 600; */
            }

            .video-controls {
                gap: 1px;
            }

            .speed-controls,
            .bookmark-controls {
                gap: 1px;
            }
        }

        /* Mobile: stack controls in up to three lines */
        @media (max-width: 500px) {
            .top-controls {
                /* flex-direction: column; */
                align-items: stretch;
                gap: 4px;
                padding: 2px 2px;
            }

            .search-input {
                width: 100%;
                max-width: 80px;
                min-width: 0;
                font-size: 12px;
                padding: 5px 7px;
            }

            .folder-path {
                max-width: 100%;
                font-size: 12px;
                /* font-weight: 600; */
                margin: 0 0 0 3px;
                text-align: left;
            }

            .folder-videos {
                justify-content: center;
            }

            .video-controls {
                /* flex-direction: column; */
                gap: 1px;
            }

            .speed-controls,
            .bookmark-controls {
                width: 100%;
                justify-content: center;
                flex-wrap: wrap;
            }

            .bookmark-controls {
                gap: 1px;
            }
        }

        .loading-indicator {
            margin: 20px 0;
            font-size: 12px;
            font-style: italic;
            color: #666;
        }

        .current-video-info {
            font-size: 17px;
            margin: 10px 0;
            color: #212121;
            font-weight: normal;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 20px;
            word-wrap: break-word;
        }

        .scroll-to-button {
            background: transparent;
            color: #17A2B8;
            border: 1px solid #17A2B8;
            padding: 5px 10px;
            margin: 7px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            vertical-align: middle;
        }

        .scroll-to-button:hover {
            background: rgba(93, 92, 222, 0.1);
        }

        /* Dark theme toggle support */
        .dark-theme body {
            background-color: #0F1C21;
            color: #e0e0e0;
        }

        .dark-theme .folder-btn {
            background: #1b333c;
            color: #e0e0e0;
            border-top: 1.5px solid #0b4156;
            border-right: 1.5px solid #23414d;
            border-bottom: 1.5px solid #1a5369;
            border-left: 1.5px solid #23414d;
            font-style: italic;
            border-radius: 6px;
            padding: 6px 10px;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            min-height: 36px;
            margin: 0;
        }

        .folder-btn:hover {
            /* background: #0e5f6c;
            border-top: 1.5px solid #137c8d;
            border-right: 1.5px solid #126e7c;
            border-bottom: 1.5px solid #093f48;x
            border-left: 1.5px solid #0c4e59; */
            /* background: #9f0000;
            border-top: 1.5px solid #4b000b;
            border-right: 1.5px solid #890216;
            border-bottom: 1.5px solid #9f0219;
            border-left: 1.5px solid #890216; */
            /**/   background: #ffd214;
            border-top: 1.5px solid #ffe576;
            border-right: 1.5px solid #ffd214;
            border-bottom: 1.5px solid #a98a04;
            border-left: 1.5px solid #ffd214;
            /**/
            transform: translateY(-3px);
            transition: all 0.9s ease;
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4), 0 0 8px #ffd214;
        }

        .folder-btn:hover .logo {
            /* filter: drop-shadow(0px 0px 2px #0383ce88); */
            filter: invert();
            transition: all .4s ease;
            /* filter: hue-rotate(); */
        }

        .dark-theme video {
            border: 1px solid #3c3c3c;
            /* Border around the video */
        }

        .dark-theme .folder-group {
            background: #2a2a2a;
            border-color: #444;
        }

        .dark-theme .folder-header {
            background: #1e3641;
            color: #e0e0e0;
        }

        .dark-theme .folder-header:hover {
            background: #0b515e;
        }

        .dark-theme .video-button {
            /* background: #2a2a2a; */
            color: #e0e0e0;
            border: 0.5px dotted transparent;
        }

        /* .dark-theme .video-button.active {
            background: #17A2B8;
            color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

        } */

        /**/
        .dark-theme .video-button:hover {
            color: white;
            border: 0.5px dotted #28adc4;
        }

        .dark-theme .folder-path {
            color: #ffffff;
        }

        .dark-theme .loading-indicator {
            color: #aaa;
        }

        .dark-theme .search-input {
            background-color: #03080a;
            color: #3a90b8!important;
            border-color: #164f69;
        }

        .dark-theme .current-video-info {
            color: #e3e3e3;
        }

        .dark-theme .scroll-to-button {
            color: #1698cc;
            border-color: #126f95;
        }

        .dark-theme .scroll-to-button:hover {
            background: rgba(127, 126, 236, 0.1);
        }

        /*.dark-theme .top-controls {
             background: #2a2a2a; 
        }*/

        .dark-theme .video-controls {
            background: #15262E;
        }

        .dark-theme .speed-btn {
            color: #1b89bc;
            background: #1e3641;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            transition: all 0.2s;
            letter-spacing: -.1em;
            text-align: center;
            line-height: 14px;
            /**/
            font-style: italic;
            border: none;
            padding: 7px 0;
            cursor: pointer;
            font-size: 10px;
        }

        .dark-theme .speed-btn:hover {
            background: #ffd21433;
            box-shadow: none;
            color: #ffe400;
        }

        .dark-theme .speed-btn.active {
            background: #ffd21433;
            color: white;
            border-bottom: 4px solid #ffd214;
            margin-top: -4px;

        }

        .dark-theme .bookmark-btn {
            color: #1b89bc;
            background: #1e3641;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .dark-theme .bookmark-btn:hover {
            background: #FFD214;
            color: black;
            box-shadow: none;
        }

        .dark-theme .bookmark-btn.clear:hover {
            background: #ff6161;
        }

        .dark-theme .bookmark-btn.pip:hover {
            background: #03cebd;
        }

        .dark-theme .bookmarks-list {
            background: #15262E;
        }

        .dark-theme .bookmarks-list h3 {
            color: #e0e0e0;
        }

        .dark-theme .bookmark-item:hover {
            background: #171b1b;
        }

        .dark-theme .bookmark-item:hover .bookmark-info {
            border-bottom: 0.5px dotted transparent;
            color: white;
        }

        .dark-theme .bookmark-item:hover .bookmark-video {
            color: white;
        }

        .dark-theme .bookmark-info {
            border-bottom: 0.5px dotted #1b465a;
        }

        .dark-theme .bookmark-video {
            color: #aaa;
        }

        .dark-theme .keyboard-hint {
            color: #aaa;
        }

        /* Dark mode support for system preference */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #121212;
                color: #e0e0e0;
            }

            .folder-group {
                background: #2a2a2a;
                border-color: #444;
            }

            .folder-header {
                background: #3a3a3a;
                color: #e0e0e0;
            }

            .folder-header:hover {
                background: #4a4a4a;
            }

            .video-button {
                background: #2a2a2a;
                color: #e0e0e0;
            }

            /* .video-button:hover {
                background: #3a3a3a;
            } */

            .folder-path {
                color: #aaa;
            }

            .loading-indicator {
                color: #aaa;
            }

            .search-input {
                background-color: #2a2a2a;
                color: #e0e0e0;
                border-color: #444;
            }

            .current-video-info {
                color: #7f7eec;
            }

            .scroll-to-button {
                color: #7f7eec;
                border-color: #7f7eec;
            }

            .scroll-to-button:hover {
                background: rgba(127, 126, 236, 0.1);
            }

            .top-controls {
                background: #2a2a2a;
            }

            .video-controls {
                background: #2a2a2a;
            }

            .bookmarks-list {
                background: #2a2a2a;
            }

            .bookmarks-list h3 {
                color: #e0e0e0;
            }

            /* .bookmark-item {
                background: #3a3a3a;
            } */

            .bookmark-item:hover {
                background: #4a4a4a;
            }

            .bookmark-video {
                color: #aaa;
            }

            .keyboard-hint {
                color: #aaa;
            }
        }