*, *::before, *::after {box-sizing:border-box;}
html {scrollbar-width:thin;scrollbar-color:#b7ccd2 #ddeaee;scrollbar-gutter:stable;background:#e6f2f5;}
html::-webkit-scrollbar {width:7px;}
html::-webkit-scrollbar-track {background:#ddeaee;}
html::-webkit-scrollbar-thumb {background:#b7ccd2;border-radius:10px;}
html::-webkit-scrollbar-thumb:hover {background:#009daf;}
body {margin:0;font-family:Tahoma,Verdana,Arial,sans-serif;font-size:14px;line-height:1.5;background:linear-gradient(145deg,#f4f7f9 0%,#e6f2f5 100%);}

.tv-layout {display:grid;grid-template-columns:380px minmax(0,1fr) 380px;min-height:100vh;}
.tv-sidebar {position:fixed;top:0;left:0;width:380px;height:100vh;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;}
.tv-content {grid-column:2;display:flex;min-width:0;min-height:100vh;flex-direction:column;padding:20px;}
.tv-content > h1 {margin:0 0 20px 0;font-size:28px;line-height:1.2;}
.tv-content.channel-page {padding:0;}
.tv-right {grid-column:3;position:sticky;top:0;align-self:start;width:380px;min-height:100vh;border-left:1px solid rgba(190,210,216,.65);}
.tv-right-content {padding:20px;}
.tv-right-box {width:100%;}

.sidebar-top {background:#ddeaee;position:relative;z-index:10;display:flex;flex:0 0 auto;align-items:center;gap:12px;padding:16px;}
.sidebar-home, .sidebar-favorites, .sidebar-category {height:44px;border:0;background:linear-gradient(145deg,#27bbc4 0%,#009daf 52%,#087f9e 100%);color:#fff;box-shadow:0 3px 10px rgba(30,70,80,.1);transition:box-shadow .2s ease;}
.sidebar-home, .sidebar-favorites {display:flex;flex:0 0 auto;width:44px;align-items:center;justify-content:center;border-radius:50%;text-decoration:none;}
.sidebar-favorites, .sidebar-category {padding:0;font:inherit;cursor:pointer;}
.sidebar-home:hover, .sidebar-favorites:hover, .sidebar-category:hover {background:linear-gradient(145deg,#20aeb9 0%,#008fa3 52%,#076f8c 100%);box-shadow:0 5px 14px rgba(30,70,80,.14);}
.sidebar-category {display:flex;flex:1;min-width:0;align-items:center;gap:10px;padding:0 20px;border-radius:22px;}
.sidebar-tv-icon {display:block;width:28px;height:28px;}
.sidebar-heart-icon {display:block;width:26px;height:26px;}
.sidebar-category-name {flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-category-arrow {display:flex;flex:0 0 auto;width:18px;height:18px;align-items:center;justify-content:center;transition:transform .18s ease;}
.sidebar-category-arrow svg {display:block;width:18px;height:18px;}
.sidebar-category[aria-expanded="true"] .sidebar-category-arrow {transform:rotate(180deg);}
.sidebar-body {position:relative;display:flex;flex:1 1 auto;min-height:0;}
.sidebar-category-menu {position:absolute;inset:0;z-index:20;overflow-x:hidden;overflow-y:auto;border:0;background:#ddeaee;scrollbar-width:thin;}
.sidebar-category-menu[hidden] {display:none;}
.sidebar-category-option {display:flex;align-items:center;gap:10px;min-width:0;padding:13px 16px;overflow:hidden;color:#111;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-category-option::before {content:'';flex:0 0 auto;width:10px;height:10px;background:radial-gradient(circle,#009daf 1.5px,transparent 1.7px) 0 0/5px 5px;}
.sidebar-category-option:hover {background:#d2e4e9;}
.sidebar-category-option.is-active {background:#d2e4e9;color:#111;}
.sidebar-channels {display:flex;flex:1 1 auto;min-height:0;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b7ccd2 #ddeaee;}

.channel-item {position:relative;display:flex;min-width:0;border-bottom:1px solid rgba(190,210,216,.45);}
.channel-item:hover, .channel-item.active {background:#d2e4e9;}
.channel-item:hover .channel-logo, .channel-item.active .channel-logo {box-shadow:0 5px 18px rgba(30,55,70,.3);}
.channel-item:hover .channel-progress, .channel-item.active .channel-progress {background:#b7cdd3;}
.channel-link {display:flex;width:100%;min-width:0;align-items:center;gap:12px;padding:12px 10px;color:inherit;text-decoration:none;}
.channel-logo {display:block;flex:0 0 auto;width:88px;min-width:88px;height:auto;border:1px solid rgba(190,210,216,.45);border-radius:10px;background:linear-gradient(145deg,#fff 0%,#d7e5e9 100%);box-shadow:0 5px 18px rgba(30,55,70,.22);}
.channel-info {display:flex;flex:1 1 auto;min-width:0;flex-direction:column;}
.channel-name {display:block;min-width:0;padding-right:20px;overflow:hidden;font-size:16px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;}
.channel-now {display:block;min-width:0;margin-top:2px;padding-right:20px;overflow:hidden;color:#444;font-size:14px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap;}
.channel-now[hidden], .channel-progress-row[hidden] {display:none;}
.channel-progress-row {display:flex;width:100%;min-width:0;align-items:center;gap:7px;margin-top:6px;}
.channel-time-start, .channel-time-stop {flex:0 0 auto;color:#444;font-size:13px;line-height:1;white-space:nowrap;}
.channel-progress {display:block;flex:1 1 auto;min-width:0;height:3px;overflow:hidden;border-radius:10px;background:#cbdce1;}
.channel-favorite {position:absolute;top:7px;right:7px;display:flex;width:36px;height:36px;padding:0;align-items:center;justify-content:center;border:0;background:transparent;color:#999;cursor:pointer;}
.channel-favorite svg {display:block;width:20px;height:20px;}
.channel-favorite path {fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;}
.channel-favorite:hover, .channel-favorite.active {color:#e53935;}
.channel-favorite.active path {fill:currentColor;stroke:currentColor;}
.channel-epg-jump {display:none;}

.channel-content {display:flex;flex:1 1 auto;min-width:0;flex-direction:column;padding:20px;}
.channel-player {display:flex;width:100%;justify-content:center;overflow:hidden;background:#000;}
.channel-player-screen {position:relative;width:min(100%,991px);aspect-ratio:16/9;overflow:hidden;}
.channel-player-screen iframe {display:block;width:100%;height:100%;border:0;}
.channel-player h1 {position:absolute;top:12px;left:10px;z-index:2;margin:0;color:#fff;font-size:18px;font-weight:700;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.5);}

.epg-heading {margin:32px 0 16px;font-size:20px;font-weight:700;line-height:1.3;}
.epg {width:100%;min-width:0;}
.epg-tabs {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;margin-bottom:20px;}
.epg-tab {position:relative;min-width:0;margin:0;padding:10px 4px 12px;border:0;background:transparent;color:#555;font:inherit;text-align:center;cursor:pointer;}
.epg-tab:hover {color:#009daf;}
.epg-tab-date {display:block;font-size:24px;line-height:1.1;}
.epg-tab-weekday {display:block;margin-top:3px;overflow:hidden;font-size:14px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;}
.epg-tab.active {color:#009daf;}
.epg-day[hidden] {display:none;}
.epg-row {display:grid;grid-template-columns:110px minmax(0,1fr);gap:2px;align-items:center;min-height:46px;padding:9px 12px;}
.epg-time {color:#444;white-space:nowrap;}
.epg-info {min-width:0;}
.epg-title {display:block;min-width:0;color:#444;}
.epg-day.past-day .epg-time, .epg-day.past-day .epg-title {color:#777;}
.epg-past-toggle {display:block;width:100%;height:32px;margin:0 0 14px;padding:0;border:0;background:#ddeaee;color:#555;font:inherit;font-size:14px;cursor:pointer;}
.epg-past-toggle:hover {background:#d2e4e9;color:#009daf;}
.epg-past-toggle[hidden] {display:none;}
.epg-past-list {margin-bottom:14px;border-top:1px solid #eee;}
.epg-past-list[hidden] {display:none;}
.epg-past-list .epg-time, .epg-past-list .epg-title {color:#777;}
.epg-now {margin-bottom:8px;padding:14px 16px 16px;border:1px solid rgba(190,210,216,.65);border-radius:12px;background:linear-gradient(145deg,#fbfdfe 0%,#edf7f9 100%);box-shadow:0 5px 18px rgba(30,55,70,.11);}
.epg-now[hidden] {display:none;}
.epg-now-head {display:flex;align-items:center;gap:14px;margin:-15px -15px 10px -15px;padding-right:15px;}
.epg-now-label {flex:0 0 auto;width:max-content;margin:0;padding:7px 15px;background:linear-gradient(135deg,#9b3fb5 0%,#ed3347 100%);color:#fff;font-size:14px;border:0;outline:0;box-shadow:none;border-radius:12px 0 12px 0;}
.epg-now-title {display:block;flex:1 1 auto;min-width:0;color:#111;font-size:16px;line-height:1.4;margin-top:3px;}
.epg-now-progress-row {display:flex;width:100%;min-width:0;align-items:center;gap:8px;margin-top:8px;}
.epg-now-time-start, .epg-now-time-stop {flex:0 0 auto;color:#444;font-weight:700;font-size:14px;line-height:1;white-space:nowrap;}
.epg-now .epg-progress {display:block;flex:1 1 auto;min-width:0;height:3px;overflow:hidden;background:#cbdce1;border-radius:10px;}
.epg-progress-value {display:block;width:0;height:100%;background:linear-gradient(145deg,#27bbc4 0%,#009daf 52%,#087f9e 100%);}
.epg-desc {margin-top:10px;color:#444;font-size:14px;line-height:1.5;}
.epg-desc[hidden] {display:none;}
.epg-tabs-nav {width:100%;}
.epg-tabs-viewport {width:100%;min-width:0;}
.epg-tabs-arrow {display:none;}

.category-channels {display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:24px 18px;width:100%;}
.category-channel {display:block;min-width:0;overflow:hidden;border:1px solid rgba(190,210,216,.65);border-radius:18px;background:linear-gradient(145deg,#fff 0%,#e6f2f5 100%);color:inherit;text-decoration:none;box-shadow:0 5px 18px rgba(30,55,70,.11);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.category-channel:hover {transform:translateY(-3px);border-color:rgba(170,198,205,.9);box-shadow:0 10px 28px rgba(30,55,70,.17);}
.category-channel-image {position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:transparent;}
.category-channel-image img {display:block;width:100%;height:100%;padding:12px 18px 25px;object-fit:contain;}
.category-channel.no-current .category-channel-image img {padding-top:22px;padding-bottom:2px;}
.category-channel.no-current::after {content:"\00a0";display:block;line-height:1.4;visibility:hidden;}
.category-channel-progress-row {position:absolute;right:11px;bottom:8px;left:11px;display:flex;min-width:0;align-items:center;gap:7px;}
.category-channel-progress-row[hidden] {display:none;}
.category-channel-time-start, .category-channel-time-stop {flex:0 0 auto;color:#444;font-size:12px;line-height:1;white-space:nowrap;}
.category-channel-progress {display:block;flex:1 1 auto;min-width:0;height:3px;overflow:hidden;background:#cbdce1;border-radius:10px;}
.channel-progress > span, .category-channel-progress-bar {display:block;width:0;height:100%;background:linear-gradient(145deg,#27bbc4 0%,#009daf 52%,#087f9e 100%);transition:width 60s linear;}
.category-channel-now {min-width:0;margin:0;padding:0 10px 10px;overflow:hidden;color:#444;font-weight:400;line-height:1.4;text-align:center;text-overflow:ellipsis;white-space:nowrap;}

.main-text, .category-text {margin-top:24px;}
.main-text h2, .category-text h2 {margin:0 0 10px;font-size:22px;line-height:1.3;}
.main-text h2:not(:first-child), .category-text h2:not(:first-child) {margin-top:24px;}
.main-text p, .category-text p {margin:0 0 14px;color:#444;font-size:14px;line-height:1.6;}
.main-text p:last-child, .category-text p:last-child {margin-bottom:0;}

.favorites-channel {position:relative;}
.favorites-channel[hidden] {display:none;}
.favorites-channel-link {display:block;color:inherit;text-decoration:none;}
.favorites-remove {position:absolute;top:8px;right:8px;z-index:4;display:flex;width:30px;height:30px;padding:0;align-items:center;justify-content:center;border:0;background:transparent;color:#777;cursor:pointer;}
.favorites-remove:hover {color:#e53935;}
.favorites-remove svg {display:block;width:18px;height:18px;}
.favorites-empty {padding:20px 0;color:#555;text-align:center;}

.tv-footer {display:flex;width:100%;gap:20px;align-items:center;justify-content:center;margin-top:auto;padding-top:20px;color:#000;font-size:14px;}
.tv-footer a {color:#009daf;text-decoration:none;}
.tv-footer a:hover {color:#000;}

.error-page {display:flex;flex:1 1 auto;min-height:500px;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;}
.error-code {color:#009daf;font-size:110px;font-weight:700;line-height:1;}
.error-page h1 {margin:18px 0 10px;font-size:28px;line-height:1.2;}
.error-page p {margin:0 0 24px;color:#555;font-size:15px;}
.error-home {display:inline-flex;min-width:160px;height:42px;padding:0 24px;align-items:center;justify-content:center;border-radius:22px;background:linear-gradient(145deg,#27bbc4 0%,#009daf 52%,#087f9e 100%);color:#fff;text-decoration:none;box-shadow:0 3px 10px rgba(30,70,80,.10);}
.error-home:hover {background:linear-gradient(145deg,#20aeb9 0%,#008fa3 52%,#076f8c 100%);}

.tv-layout-channel {grid-template-rows:minmax(0,1fr) auto;}
.tv-layout-channel > .channel-page {min-height:0;}
.tv-layout-channel > .tv-right-comments {grid-row:1;min-height:0;border-left:0;}
.tv-layout-channel .channel-content {padding-bottom:0;}
.channel-footer {grid-column:2;grid-row:2;min-width:0;padding:0 20px 20px;}

@media screen and (min-width:992px) {
    .tv-sidebar .sidebar-channels {position:relative;z-index:2;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:#b7ccd2 #ddeaee;scrollbar-gutter:stable;}
}

@media screen and (min-width:1440px) and (max-width:1655px) {
    .tv-layout {grid-template-columns:360px minmax(0,1fr) 300px;}
    .tv-sidebar {width:360px;}
    .tv-right {width:300px;}
    .tv-layout-content .tv-content {padding-right:10px;padding-left:10px;}
    .tv-layout-content .category-channels {grid-template-columns:repeat(auto-fill,minmax(180px,1fr));column-gap:10px;}
    .tv-content > h1  {font-size:24px;}
}

@media screen and (min-width:1366px) and (max-width:1439px) {
    body {font-size:13px;}
    .tv-layout {grid-template-columns:300px minmax(0,1fr) 300px;}
    .tv-sidebar {width:300px;}
    .tv-right {width:300px;}
    .tv-layout-content .tv-content {padding-right:10px;padding-left:10px;}
    .tv-layout-content .category-channels {grid-template-columns:repeat(auto-fill,minmax(155px,1fr));column-gap:10px;}
    .tv-content > h1 {font-size:24px;}
    .category-channels {gap:18px 10px;}
    .category-channel-image img {padding:8px 14px 16px;}
    .channel-logo {width:80px;min-width:80px;}
    .channel-name {font-size:14px;}
    .channel-now {font-size:13px;}
    .channel-time-start, .channel-time-stop {font-size:12px;}
    .sidebar-top {gap:8px;padding:10px;}
    .sidebar-category-name {font-size:14px;}
    .sidebar-category {gap:7px;padding:0 12px;}
    .sidebar-category-option {font-size:14px;}
    .epg-heading {font-size:18px;}
    .epg-tab-weekday {font-size:13px;}
}

@media screen and (min-width:1366px) {
    .tv-layout-channel::after {content:'';grid-column:3;grid-row:1/-1;justify-self:start;align-self:stretch;width:1px;background:rgba(190,210,216,.65);pointer-events:none;}
}

@media screen and (min-width:992px) and (max-width:1365px) {
    .tv-content > h1 {font-size:24px;}
    .tv-layout {grid-template-columns:360px minmax(0,1fr);}
    .tv-sidebar {width:360px;}
    .tv-content {grid-column:2;padding-right:10px;padding-left:10px;}
    .tv-right {grid-column:2;position:static;width:100%;min-height:0;border-left:0;}
    .tv-layout-channel {grid-template-rows:auto auto auto;}
    .tv-layout-channel > .channel-page {grid-column:2;grid-row:1;}
    .tv-layout-channel > .tv-right-comments {grid-column:2;grid-row:2;}
    .tv-layout-channel > .channel-footer {grid-column:2;grid-row:3;}
    .epg-tab-weekday {font-size:13px;}
    .epg-heading {font-size:18px;}
}

@media screen and (max-width:991px) {
    html, body {width:100%;max-width:100%;overflow-x:hidden;}
    html {scrollbar-width:none;}
    html::-webkit-scrollbar {width:0;height:0;}

    .tv-content {padding:20px 0;}
    .main-random {display:none;}
    .error-page {flex:0 0 auto;min-height:360px;padding:35px 20px;}
    .error-code {font-size:82px;}
    .error-page h1 {font-size:22px;}
    .tv-content > h1 {font-size:20px;text-align:center;}
    .tv-layout-channel .channel-player h1 {right:0;left:0;top:5px;padding:0 5px;text-align:center;font-size:16px;}
    .tv-layout-content, .tv-layout-channel {display:block;min-height:100vh;}
    .tv-layout-content .tv-content, .tv-layout-channel .tv-content {grid-column:auto;width:100%;}
    .tv-layout-content .tv-sidebar, .tv-layout-channel .tv-sidebar {position:static;top:auto;left:auto;width:100%;height:auto;min-height:0;overflow:visible;}
    .tv-layout-content .sidebar-body, .tv-layout-channel .sidebar-body {flex:0 0 auto;height:min(650px,75vh);}
    .tv-layout-content .sidebar-channels, .tv-layout-channel .sidebar-channels {height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:auto;}
    .tv-layout-content .category-channels {display:none;}

    .tv-layout-channel .channel-epg-jump {display:flex;width:100%;height:42px;padding:0;align-items:center;justify-content:center;border:0;background:#d2e4e9;color:#009daf;font:inherit;font-size:14px;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
    .tv-layout-channel .channel-epg-jump:hover {background:#d2e4e9;color:#009daf;}
    .tv-layout-channel .epg-heading {scroll-margin-top:10px;}

    .tv-layout-channel .epg-now-head {flex-direction:column;align-items:flex-start;gap:8px;padding-right:0;}
    .tv-layout-channel .epg-now-title {width:calc(100% - 30px);margin:0 15px;}

    .tv-layout-channel .epg-tabs-nav {display:grid;grid-template-columns:34px minmax(0,1fr) 34px;width:100%;align-items:stretch;margin-bottom:20px;}
    .tv-layout-channel .epg-tabs-viewport {min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
    .tv-layout-channel .epg-tabs-viewport::-webkit-scrollbar {display:none;}
    .tv-layout-channel .epg-tabs {display:flex;width:var(--epg-tabs-width);min-width:100%;margin-bottom:0;}
    .tv-layout-channel .epg-tab {flex:0 0 var(--epg-tab-width);width:var(--epg-tab-width);padding:10px 2px 12px;}
    .tv-layout-channel .epg-tabs-arrow {display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:#009daf;font-size:30px;line-height:1;cursor:pointer;}
    .tv-layout-channel .epg-tabs-arrow:disabled {color:#b7ccd2;cursor:default;}

    .tv-right-content {display:none;}
    .tv-layout-channel .tv-right-comments {position:static;width:100%;min-height:0;border-left:0;}
    .tv-layout-channel .channel-footer {grid-column:auto;grid-row:auto;width:100%;padding:0 20px 20px;}

    .main-text, .category-text {margin-top:20px;}
    .main-text {padding:0 10px;}
    .category-text {padding:0 10px;}
    .main-text h2, .category-text h2 {font-size:19px;}
    .main-text p, .category-text p {font-size:14px;line-height:1.6;}

    .channel-name {font-size:14px;}
    .sidebar-home, .sidebar-favorites, .sidebar-category, .sidebar-category-option, .channel-favorite {-webkit-tap-highlight-color:transparent;}
    .epg-heading {font-size:16px;margin:10px 0 16px;text-align:center;}
    .epg-tab-weekday {font-size:11px;}
    .epg-tab-date {font-size:22px;}
    .epg-now-title {font-size:14px;}
    
    .tv-layout-favorites .sidebar-body {display:block;width:100%;height:auto;}
    .tv-layout-favorites .sidebar-channels {display:none;}
    .tv-layout-favorites .sidebar-category-menu {position:static;inset:auto;width:100%;margin-bottom:14px;}
    .tv-layout-favorites .favorites-channels {display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:0 10px;}
}