:root {
            --bg-color-dark: #2c3e50; --header-bg-dark: #34495e; --text-color-dark: #ecf0f1; --button-bg-dark: #34495e; --button-border-dark: #4a627d; --hover-bg-dark: #4a627d; --active-category-dark: #3498db; --modal-bg-dark: #34495e; --mute-text-color: #bbb;
        }
        .light-mode {
            --bg-color-dark: #f8f9fa; --header-bg-dark: #e9ecef; --text-color-dark: #212529; --button-bg-dark: #f0f2f5; --button-border-dark: #dee2e6; --hover-bg-dark: #e0e4e8; --active-category-dark: #007bff; --modal-bg-dark: #f8f9fa; --mute-text-color: #6c757d;
        }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: var(--bg-color-dark); color: var(--text-color-dark); display: flex; flex-direction: column; min-height: 100vh; transition: background-color 0.3s ease, color 0.3s ease; }
        header { background-color: var(--header-bg-dark); padding: 0; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
        #adblock-notice { background-color: #e74c3c; color: white; padding: 10px; text-align: center; font-size: 0.9em; display: none; }
        .header-banner { width: 100%; height: 250px; background-image: url("../../banner_tv.jpg"); background-size: cover; background-position: left center; background-repeat: no-repeat; }
        .top-controls { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; max-width: 1200px; margin: 0 auto; gap: 15px; flex-wrap: wrap; }
        .search-container { flex-grow: 1; position: relative; max-width: 400px; }
        .search-input { width: 100%; padding: 10px 15px 10px 40px; border: 1px solid var(--button-border-dark); border-radius: 25px; background-color: var(--button-bg-dark); color: var(--text-color-dark); font-size: 1em; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
        .search-input::placeholder { color: var(--mute-text-color); }
        .search-input:focus { outline: none; border-color: var(--active-category-dark); box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25); }
        .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--mute-text-color); font-size: 1.1em; }
        .theme-switch-wrapper { display: flex; align-items: center; }
        .theme-switch { display: inline-block; height: 26px; position: relative; width: 45px; min-width: 45px; }
        .theme-switch input { display: none; }
        .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; }
        .slider:before { background-color: #fff; bottom: 2px; content: ""; height: 22px; left: 2px; position: absolute; transition: .4s; width: 22px; }
        input:checked + .slider { background-color: #3498db; }
        input:checked + .slider:before { transform: translateX(19px); }
        .slider.round { border-radius: 26px; }
        .slider.round:before { border-radius: 50%; }
        .category-buttons { text-align: center; margin: 20px auto 0; max-width: 1200px; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
        .category-btn { background-color: var(--button-bg-dark); color: var(--text-color-dark); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease; }
        .category-btn:hover { background-color: var(--hover-bg-dark); }
        .category-btn.active { background-color: var(--active-category-dark); }
        .channel-button { background-color: var(--button-bg-dark); color: var(--text-color-dark); border: 1px solid var(--button-border-dark); padding: 10px; border-radius: 8px; cursor: pointer; font-size: 0.9em; font-weight: bold; transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; height: 100%; position: relative; }
        .channel-button:hover { background-color: var(--hover-bg-dark); transform: translateY(-3px); border-color: var(--active-category-dark); }
        .channel-button img { width: 80px; height: 80px; object-fit: contain; margin-bottom: 8px; border-radius: 5px; background-color: white; padding: 5px; }
        .channel-button span { display: block; margin-top: 5px; color: var(--text-color-dark); word-break: break-word; }
        .channel-skeleton { background-color: #4a627d; border-radius: 8px; padding: 10px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: pulse 1.5s infinite ease-in-out; }
        .channel-skeleton .logo-placeholder { width: 80px; height: 80px; background-color: #607d8b; border-radius: 5px; margin-bottom: 8px; }
        .channel-skeleton .text-placeholder { width: 70%; height: 1em; background-color: #607d8b; border-radius: 3px; }
        @keyframes pulse { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } }
        .video-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; flex-direction: column; color: white; z-index: 10; transition: opacity 0.3s ease; }
        .video-loading-overlay.hidden { opacity: 0; pointer-events: none; }
        .spinner-border { width: 3rem; height: 3rem; margin-bottom: 15px; }
        .modal-content { background-color: var(--modal-bg-dark); border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); color: var(--text-color-dark); }
        .modal-header { border-bottom: none; padding-bottom: 0; }
        .modal-title { color: var(--text-color-dark); font-size: 1.5em; }
        .modal-header .btn-close { filter: invert(1); opacity: 0.8; transition: opacity 0.3s ease; }
        .modal-header .btn-close:hover { opacity: 1; }
        .video-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; background-color: black; border-radius: 5px; }
        .video-container video, .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: none; }
        .modal-footer { border-top: none; padding: 10px 20px; justify-content: center; gap: 10px; flex-wrap: wrap; }
        .btn-reload, .btn-unmute, .btn-fullscreen, .btn-info { color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 0.9em; transition: background-color 0.3s ease; display: inline-flex; align-items: center; gap: 5px; }
        .btn-reload { background-color: #e74c3c; }
        .btn-unmute { background-color: #3498db; }
        .btn-fullscreen { background-color: #f39c12; }
        .btn-info { background-color: #17a2b8; }
        .btn-reload:hover { background-color: #c0392b; }
        .btn-unmute:hover { background-color: #2980b9; }
        .btn-fullscreen:hover { background-color: #e67e22; }
        .btn-info:hover { background-color: #138496; }
        .modal-body { padding-bottom: 10px; }
        .modal-dialog { display: flex; align-items: center; justify-content: center; padding-top: 5vh; }
        footer { background-color: var(--header-bg-dark); color: var(--text-color-dark); text-align: center; padding: 15px; margin-top: auto; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); font-size: 0.9em; transition: background-color 0.3s ease, color 0.3s ease; }
        @media (max-width: 768px) {
            .header-banner { height: 200px; }
            .channel-button img { width: 70px; height: 70px; }
        }
        @media (max-width: 576px) {
            .header-banner { height: 120px; }
            .channel-button img { width: 50px; height: 50px; }
            .channel-button span { font-size: 0.75em; }
        }
        .dropdown-menu { background-color: var(--modal-bg-dark); border: 1px solid var(--button-border-dark); }
        .dropdown-item { color: var(--text-color-dark); }
        .dropdown-item:hover { background-color: var(--hover-bg-dark); }