:root {
           --primary-color: #3498db;
           --secondary-color: #2c3e50;
           --background-color: #f8f9fa;
           --card-background: #ffffff;
           --text-color: #333333;
           --text-secondary: #6c757d;
           --border-color: #e9ecef;
           --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
           --shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.1);
           --orange: #4DABF7;
       }

       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       body {
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           background-color: var(--background-color);
           color: var(--text-color);
           line-height: 1.6;
       }

       .container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 20px;
       }

       header {
           text-align: center;
           padding: 30px 0;
           margin-bottom: 30px;
           background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
           color: white;
           border-radius: 10px;
           box-shadow: var(--shadow);
       }

       header h1 {
           font-size: 2.5rem;
           margin-bottom: 10px;
       }

       header p {
           font-size: 1.1rem;
           opacity: 0.9;
       }

       .controls {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 20px;
           flex-wrap: wrap;
           gap: 10px;
       }

       .search-box {
           display: flex;
           align-items: center;
           background-color: var(--card-background);
           border-radius: 30px;
           padding: 8px 15px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
           width: 100%;
           max-width: 300px;
       }

       .search-box input {
           border: none;
           background: none;
           outline: none;
           flex: 1;
           padding: 5px;
       }

       .view-toggle {
           display: flex;
           background-color: var(--card-background);
           border-radius: 30px;
           overflow: hidden;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
       }

       .view-toggle button {
           background: none;
           border: none;
           padding: 8px 15px;
           cursor: pointer;
           transition: all 0.3s ease;
       }

       .view-toggle button.active {
           background-color: var(--primary-color);
           color: white;
       }

       .channels-container {
           display: flex;
           flex-direction: column;
           gap: 25px;
       }

       .channel-card {
           background-color: var(--card-background);
           border-radius: 10px;
           overflow: hidden;
           box-shadow: var(--shadow);
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           width: 100%;
       }

       .channel-card:hover {
           transform: translateY(-5px);
           box-shadow: var(--shadow-hover);
       }

       .channel-header {
           padding: 15px;
           display: flex;
           align-items: center;
           border-bottom: 1px solid var(--border-color);
           position: relative;
       }

       .channel-avatar {
           width: 40px;
           height: 40px;
           border-radius: 50%;
           margin-right: 15px;
           background-color: var(--primary-color);
           display: flex;
           align-items: center;
           justify-content: center;
           color: white;
       }

       .channel-info {
           flex: 1;
       }

       .channel-title {
           font-weight: 600;
           margin-bottom: 5px;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }

       .channel-title a {
           text-decoration: none;
           color: var(--text-color);
       }

       .channel-title a:hover {
           color: var(--primary-color);
       }

       .channel-stats {
           font-size: 0.8rem;
           color: var(--text-secondary);
       }

       .videos-container {
           position: relative;
           overflow: hidden;
           padding: 10px 0;
       }

       .videos-scroll {
           display: flex;
           overflow-x: auto;
           scroll-behavior: smooth;
           scrollbar-width: none;
           -ms-overflow-style: none;
       }

       .videos-scroll::-webkit-scrollbar {
           display: none;
       }

       .video-card {
           flex: 0 0 auto;
           width: 200px;
           margin: 10px;
           cursor: pointer;
           position: relative;
       }

       .video-thumbnail {
           position: relative;
           padding-bottom: 56.25%;
           overflow: hidden;
           border-radius: 8px;
           background-color: #f0f0f0;
       }

       .video-thumbnail img {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: transform 0.3s ease;
       }

       .video-card:hover .video-thumbnail img {
           transform: scale(1.05);
       }

       .video-duration {
           position: absolute;
           bottom: 5px;
           right: 5px;
           background-color: rgba(0, 0, 0, 0.7);
           color: white;
           padding: 2px 5px;
           border-radius: 4px;
           font-size: 0.7rem;
       }

       .video-info {
           margin-top: 8px;
           min-height: 3.5rem;
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
       }

       .video-title {
           font-size: 0.9rem;
           font-weight: 500;
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
           overflow: hidden;
           text-overflow: ellipsis;
           line-height: 1.3;
           word-wrap: break-word;
           flex-grow: 1;
       }

       .video-meta {
           font-size: 0.8rem;
           color: var(--text-secondary);
           flex-shrink: 0;
           margin-top: auto;
       }

       .play-button {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: 50px;
           height: 50px;
           background-color: rgba(0, 0, 0, 0.7);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           color: white;
           font-size: 20px;
           opacity: 0;
           transition: opacity 0.3s ease;
           cursor: pointer;
           z-index: 2;
       }

       .video-card:hover .play-button {
           opacity: 1;
       }

       .video-modal {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0, 0, 0, 0.8);
           z-index: 1000;
           justify-content: center;
           align-items: center;
       }

       .video-modal-content {
           position: relative;
           width: 80%;
           max-width: 900px;
           background-color: #000;
           border-radius: 8px;
           overflow: hidden;
       }

       .video-modal-iframe {
           width: 100%;
           height: 500px;
           border: none;
       }

       .video-modal-close {
           position: absolute;
           top: 15px;
           right: 15px;
           color: white;
           font-size: 24px;
           cursor: pointer;
           z-index: 1001;
       }

       .scroll-btn {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
           background-color: rgba(255, 255, 255, 0.8);
           border: none;
           width: 30px;
           height: 30px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           z-index: 10;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
           transition: background-color 0.3s ease;
       }

       .scroll-btn:hover {
           background-color: white;
       }

       .scroll-btn.left {
           left: 5px;
       }

       .scroll-btn.right {
           right: 5px;
       }

       .list-view .channel-card {
           display: flex;
           flex-direction: column;
       }

       .list-view .videos-container {
           padding: 10px 0;
       }

       .list-view .video-card {
           width: 100%;
           display: flex;
           margin: 10px 15px;
           padding-bottom: 10px;
           border-bottom: 1px solid var(--border-color);
       }

       .list-view .video-card:last-child {
           border-bottom: none;
       }

       .list-view .video-thumbnail {
           width: 120px;
           height: 70px;
           padding-bottom: 0;
           margin-right: 15px;
           flex-shrink: 0;
       }

       .list-view .video-info {
           flex: 1;
       }

       .list-view .videos-scroll {
           flex-direction: column;
           overflow-x: hidden;
           overflow-y: auto;
           max-height: 300px;
       }

       .list-view .scroll-btn {
           display: none;
       }

       .list-view .scroll-btn {
           display: none;
       }

       .channels-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 25px;
       }

       .channels-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 25px;
       }

       @media (min-width: 900px) {
           .channels-grid {
               grid-template-columns: repeat(3, 1fr);
           }
       }

       @media (min-width: 600px) and (max-width: 899px) {
           .channels-grid {
               grid-template-columns: repeat(2, 1fr);
           }
       }

       @media (max-width: 599px) {
           .channels-grid {
               grid-template-columns: 1fr;
           }
       }

       .channels-grid .videos-container {
           padding: 10px 0;
       }

       .channels-grid .videos-scroll {
           display: flex;
           flex-direction: column;
           max-height: 300px;
           overflow-y: scroll;
           padding-right: 15px;
       }

       .channels-grid .videos-scroll>div {}

       .channels-grid .videos-scroll>div {
           margin-right: -15px;
           padding-right: 15px;
       }

       .channels-grid .videos-scroll::-webkit-scrollbar {
           width: 8px;
       }

       .channels-grid .videos-scroll::-webkit-scrollbar-track {
           background: transparent;
           border-radius: 4px;
       }

       .channels-grid .videos-scroll::-webkit-scrollbar-thumb {
           background: var(--text-secondary);
           border-radius: 4px;
           border: 1px solid var(--border-color);
       }

       .channels-grid .videos-scroll::-webkit-scrollbar-thumb:hover {
           background: var(--text-color);
       }

       .channels-grid .video-card {
           display: flex;
           width: 100%;
           margin: 10px 15px;
           padding-bottom: 10px;
           border-bottom: 1px solid var(--border-color);
       }

       .channels-grid .video-card:last-child {
           border-bottom: none;
       }

       .channels-grid .video-thumbnail {
           width: 120px;
           height: 70px;
           padding-bottom: 0;
           margin-right: 15px;
           flex-shrink: 0;
       }

       .channels-grid .video-info {
           flex: 1;
       }

       .channels-grid .scroll-btn {
           display: none;
       }

       footer {
           text-align: center;
           padding: 20px 0;
           margin-top: 40px;
           color: var(--text-secondary);
           font-size: 0.9rem;
           border-top: 1px solid var(--border-color);
       }

       .footer-links {
           margin-top: 10px;
       }

       .footer-links a {
           color: var(--primary-color);
           text-decoration: none;
           margin: 0 10px;
       }

       .footer-links a:hover {
           text-decoration: underline;
       }

       .category-badge {
           display: inline-block;
           font-size: 0.9rem;
           color: white;
           background-color: var(--primary-color);
           padding: 6px;
           border-radius: 0px 10px;
           font-weight: bold;
           white-space: nowrap;
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
       }

       .category-badge-top-right {
           position: absolute;
           top: 0px;
           right: 0px;
           background-color: #4DABF7;
       }

       .today-badge {
           position: absolute;
           top: 5px;
           right: 5px;
           background-color: #FC7E11;
           color: white;
           font-size: 0.7rem;
           padding: 3px 6px;
           border-radius: 4px;
           font-weight: bold;
           z-index: 2;
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
       }

       @media (max-width: 768px) {

           .controls {
               flex-direction: column;
               align-items: stretch;
           }

           .view-toggle {
               width: 100%;
               margin-top: 10px;
           }

           .view-toggle button {
               flex: 1;
           }

           .search-box {
               max-width: none;
           }

           .video-modal-content {
               width: 95%;
           }

           .video-modal-iframe {
               height: 300px;
           }

           body .channels-grid {
               grid-template-columns: 1fr !important;
           }

           body.list-view {
               overflow: auto;
           }

           .header-text h2 {
               height: auto;
           }
       }

       @media (prefers-color-scheme: dark) {
           :root {
               --primary-color: #4dabf7;
               --secondary-color: #495057;
               --background-color: #212529;
               --card-background: #343a40;
               --text-color: #f8f9fa;
               --text-secondary: #adb5bd;
               --border-color: #495057;
               --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
               --shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.4);
           }
       }

       .back-top-container {
           position: fixed;
           bottom: 80px;
           right: 20px;
           width: 60px;
           height: 60px;
           z-index: 1001;
           opacity: 0;
           visibility: hidden;
           transition: opacity 0.3s ease, visibility 0.3s ease;
       }

       .back-top-container.show {
           opacity: 1;
           visibility: visible;
       }

       .back-top-main {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           cursor: pointer;
           width: 44px;
           height: 44px;
           border-radius: 50%;
           background-color: var(--orange);
           padding: 8px;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
           display: flex;
           align-items: center;
           justify-content: center;
           z-index: 2;
           transition: background-color 0.2s ease;
       }

       .back-top-main:hover {
           background-color: #2a80c6;
       }

       .progress-ring {
           position: absolute;
           width: 100%;
           height: 100%;
           transform: rotate(-90deg);
           z-index: 1;
       }

       .progress-ring-background {
           fill: none;
           stroke: rgba(252, 126, 17, 0.15);
           stroke-width: 3;
       }

       .progress-ring-circle {
           fill: none;
           stroke: var(--orange);
           stroke-width: 3;
           stroke-dasharray: 264;
           stroke-linecap: round;
           transition: stroke-dashoffset 0.15s ease-out;
       }

       .icon {
           width: 24px;
           height: 24px;
       }

       @media (max-width: 720px) {
           .back-top-container {
               bottom: 40px;
               right: 10px;
               width: 50px;
               height: 50px;
           }

           .back-top-main {
               width: 38px;
               height: 38px;
           }

           .icon {
               width: 20px;
               height: 20px;
           }
       }

       .header-content {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 10px;
           padding: 30px 0;
       }

       .header-logo {
           height: 40px;
           width: auto;
           margin-left: 10px;
           max-width: 60px;
           object-fit: contain;
       }

       .header-text {
           text-align: left;
       }


       .header-text p {
           margin: 5px 0 0 0;
           font-size: 1.1rem;
           opacity: 0.9;
       }

       .header-text h2 {
           background-image: linear-gradient(to top, #dd5cc5 0%, #fffebf 100%);
           background-clip: text;
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           color: transparent;
           font-weight: bold;
           display: inline-block;
       }