:root{--bg:#141414;--surface:#1a1a2e;--card:#1e1e36;--card-hover:#252540;--red:#e50914;--red-hover:#f40612;--blue:#00a8e1;--text:#fff;--text-sec:#b3b3b3;--text-muted:#666;--grad-hero:linear-gradient(to top,#141414 0%,rgba(20,20,20,.7) 30%,transparent 60%);--grad-left:linear-gradient(to right,#141414 0%,transparent 30%);--radius:6px;--radius-lg:12px;--tr:300ms cubic-bezier(.4,0,.2,1);--font:'Helvetica Neue',Arial,sans-serif;--header-h:68px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:0 0}
::-webkit-scrollbar-thumb{background:#444;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#666}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;color:inherit;font-family:inherit}
img{display:block;max-width:100%}
.hidden{display:none!important}

.profile-screen{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px}
.profile-screen h1{font-size:2.5rem;font-weight:400}
.profile-grid{display:flex;gap:30px;flex-wrap:wrap;justify-content:center}
.profile-card{display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:var(--tr)}
.profile-card:hover{transform:scale(1.05)}
.profile-card:hover .profile-avatar{border-color:var(--text)}
.profile-avatar{width:120px;height:120px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;border:3px solid transparent;transition:var(--tr)}
.profile-name{font-size:1rem;color:var(--text-sec)}
.profile-card:hover .profile-name{color:var(--text)}
.profile-add{width:120px;height:120px;border-radius:var(--radius);border:2px dashed var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--text-muted);transition:var(--tr)}
.profile-card:hover .profile-add{border-color:var(--text-sec);color:var(--text-sec)}

.header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-h);display:flex;align-items:center;padding:0 4%;background:linear-gradient(to bottom,rgba(20,20,20,.95),transparent);transition:background var(--tr)}
.header.scrolled{background:rgba(20,20,20,.97);backdrop-filter:blur(10px)}
.header-logo{display:flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:700;color:var(--red);margin-right:40px;flex-shrink:0}
.header-logo i{font-size:1.3rem}
.header-nav{display:flex;gap:20px;flex:1}
.header-nav a{font-size:.9rem;color:var(--text-sec);transition:color var(--tr);white-space:nowrap}
.header-nav a:hover,.header-nav a.active{color:var(--text)}
.header-actions{display:flex;align-items:center;gap:20px;margin-left:auto}
.header-btn{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--text-sec);transition:color var(--tr)}
.header-btn:hover{color:var(--text)}
.header-profile{width:32px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;cursor:pointer}
.search-toggle{font-size:1.1rem}

.search-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.92);backdrop-filter:blur(20px);display:none;flex-direction:column;padding:80px 4% 40px;overflow-y:auto}
.search-overlay.active{display:flex}
.search-close{position:absolute;top:20px;right:4%;font-size:1.5rem;color:var(--text-sec)}
.search-input-wrap{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--text-sec);padding-bottom:12px;margin-bottom:30px}
.search-input-wrap i{font-size:1.5rem;color:var(--text-sec)}
.search-input{flex:1;background:none;border:none;outline:none;font-size:2rem;color:var(--text);font-family:var(--font)}
.search-input::placeholder{color:var(--text-muted)}
.search-suggestions{margin-bottom:30px}
.search-suggestions h3{font-size:1rem;color:var(--text-sec);margin-bottom:12px}
.search-tags{display:flex;gap:10px;flex-wrap:wrap}
.search-tag{padding:8px 16px;border-radius:20px;background:var(--surface);font-size:.85rem;color:var(--text-sec);transition:var(--tr)}
.search-tag:hover{background:var(--card-hover);color:var(--text)}
.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}

.hero{position:relative;width:100%;height:80vh;min-height:500px;overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hero-slide.active{opacity:1}
.hero-bg{width:100%;height:100%;object-fit:cover}
.hero-gradient{position:absolute;inset:0;background:var(--grad-hero)}
.hero-gradient::before{content:'';position:absolute;inset:0;background:var(--grad-left)}
.hero-content{position:absolute;bottom:20%;left:4%;max-width:550px;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:4px;background:var(--red);font-size:.75rem;font-weight:600;text-transform:uppercase;margin-bottom:16px}
.hero-title{font-size:3.5rem;font-weight:700;line-height:1.1;margin-bottom:16px;text-shadow:2px 2px 8px rgba(0,0,0,.6)}
.hero-desc{font-size:1.1rem;color:var(--text-sec);margin-bottom:24px;line-height:1.5}
.hero-buttons{display:flex;gap:12px}
.btn-play{display:flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--radius);background:var(--red);color:var(--text);font-size:1.1rem;font-weight:600;transition:background var(--tr)}
.btn-play:hover{background:var(--red-hover)}
.btn-list{display:flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--radius);background:rgba(109,109,110,.7);color:var(--text);font-size:1.1rem;font-weight:600;transition:background var(--tr)}
.btn-list:hover{background:rgba(109,109,110,.5)}
.hero-indicators{position:absolute;bottom:8%;right:4%;display:flex;gap:8px;z-index:2}
.hero-dot{width:12px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);transition:var(--tr)}
.hero-dot.active{width:24px;background:var(--text)}

.content-area{position:relative;z-index:3;margin-top:-100px;padding-bottom:80px}
.carousel-row{padding:0 4%;margin-bottom:40px}
.carousel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.carousel-title{font-size:1.4rem;font-weight:600;display:flex;align-items:center;gap:10px}
.carousel-title i{color:var(--red);font-size:1.1rem}
.carousel-see-all{font-size:.85rem;color:var(--blue);transition:color var(--tr)}
.carousel-see-all:hover{color:var(--text)}
.carousel-wrap{position:relative}
.carousel-track{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding-bottom:8px;-ms-overflow-style:none;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-arrow{position:absolute;top:0;bottom:8px;width:50px;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(20,20,20,.7);font-size:1.5rem;color:var(--text);opacity:0;transition:opacity var(--tr)}
.carousel-wrap:hover .carousel-arrow{opacity:1}
.carousel-arrow:hover{background:rgba(20,20,20,.9)}
.carousel-arrow.left{left:0;border-radius:0 var(--radius) var(--radius) 0}
.carousel-arrow.right{right:0;border-radius:var(--radius) 0 0 var(--radius)}

.channel-card{flex:0 0 230px;scroll-snap-align:start;border-radius:var(--radius);overflow:visible;position:relative;transition:transform var(--tr),z-index 0s;cursor:pointer}
.channel-card:hover{transform:scale(1.3);z-index:10;transition:transform var(--tr),z-index 0s}
.card-thumb{width:100%;aspect-ratio:16/9;background:var(--surface);border-radius:var(--radius);overflow:hidden;position:relative}
.card-thumb img{width:100%;height:100%;object-fit:cover}
.card-thumb .placeholder-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--text-muted)}
.live-badge{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:3px;background:var(--red);font-size:.65rem;font-weight:700;text-transform:uppercase;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.card-hover-info{position:absolute;bottom:0;left:0;right:0;padding:10px;background:linear-gradient(to top,rgba(0,0,0,.95),transparent);opacity:0;transition:opacity var(--tr);border-radius:0 0 var(--radius) var(--radius)}
.channel-card:hover .card-hover-info{opacity:1}
.card-hover-name{font-size:.85rem;font-weight:600;margin-bottom:4px}
.card-hover-cat{font-size:.7rem;color:var(--text-sec);margin-bottom:8px}
.card-hover-actions{display:flex;gap:6px}
.card-action-btn{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:var(--tr)}
.card-action-btn.play-btn{background:var(--text);color:var(--bg)}
.card-action-btn.play-btn:hover{background:var(--red);color:var(--text)}
.card-action-btn.list-btn{border:2px solid var(--text-sec)}
.card-action-btn.list-btn:hover{border-color:var(--text)}
.card-action-btn.list-btn.in-list{background:var(--text);color:var(--bg);border-color:var(--text)}
.card-resolution{position:absolute;top:8px;right:8px;padding:1px 5px;border-radius:2px;background:rgba(0,0,0,.7);font-size:.6rem;font-weight:600;opacity:0;transition:opacity var(--tr)}
.channel-card:hover .card-resolution{opacity:1}

.continue-card{position:relative}
.continue-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.2);border-radius:0 0 var(--radius) var(--radius)}
.continue-bar{height:100%;background:var(--red);border-radius:0 0 0 var(--radius)}
.continue-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.7);font-size:.6rem;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--tr)}
.channel-card:hover .continue-remove{opacity:1}

.player-modal{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center}
.player-modal.active{display:flex}
.player-container{width:100%;height:100%;position:relative}
.player-video-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
.player-video-wrap video{width:100%;height:100%;object-fit:contain}
.player-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;opacity:0;transition:opacity .4s ease;pointer-events:none}
.player-overlay.visible{opacity:1;pointer-events:auto}
.player-top-bar{display:flex;align-items:center;gap:16px;padding:20px 30px;background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent)}
.player-back{font-size:1.3rem;padding:8px}
.player-channel-title{font-size:1.2rem;font-weight:600}
.player-live-tag{padding:3px 10px;border-radius:3px;background:var(--red);font-size:.7rem;font-weight:700;text-transform:uppercase}
.player-center{display:flex;align-items:center;justify-content:center;flex:1}
.player-big-play{width:70px;height:70px;border-radius:50%;background:rgba(229,9,20,.8);display:flex;align-items:center;justify-content:center;font-size:1.8rem;transition:var(--tr)}
.player-big-play:hover{background:var(--red);transform:scale(1.1)}
.player-bottom-bar{padding:16px 30px 24px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent)}
.player-controls-row{display:flex;align-items:center;gap:16px}
.player-ctrl-btn{font-size:1.2rem;padding:6px;color:var(--text);transition:color var(--tr)}
.player-ctrl-btn:hover{color:var(--red)}
.volume-wrap{display:flex;align-items:center;gap:8px}
.volume-slider{width:80px;height:4px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.3);border-radius:2px;outline:none}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--red);cursor:pointer}
.player-spacer{flex:1}
.quality-select{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--text);padding:4px 8px;border-radius:4px;font-size:.8rem;outline:none}
.player-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(0,0,0,.6)}
.spinner{width:50px;height:50px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.player-error-overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,0,0,.8)}
.player-error-overlay.active{display:flex}
.player-error-overlay i{font-size:3rem;color:var(--red)}
.player-error-overlay span{color:var(--text-sec)}

.player-page{position:fixed;inset:0;display:flex;background:var(--bg)}
.player-page-main{flex:1;display:flex;flex-direction:column;position:relative}
.player-page-video{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:#000}
.player-page-video video{width:100%;height:100%;object-fit:contain}
.player-page-controls{padding:12px 20px;background:rgba(20,20,20,.95);display:flex;align-items:center;gap:12px}
.player-page-sidebar{width:320px;background:var(--surface);display:flex;flex-direction:column;transition:width var(--tr);overflow:hidden}
.player-page-sidebar.collapsed{width:0}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(255,255,255,.1);font-weight:600}
.sidebar-channel-list{flex:1;overflow-y:auto}
.sidebar-ch-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background var(--tr);border-bottom:1px solid rgba(255,255,255,.05)}
.sidebar-ch-item:hover,.sidebar-ch-item.active{background:var(--card-hover)}
.sidebar-ch-thumb{width:60px;height:34px;border-radius:4px;background:var(--card);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sidebar-ch-thumb img{width:100%;height:100%;object-fit:cover}
.sidebar-ch-name{font-size:.85rem;font-weight:500}
.sidebar-ch-cat{font-size:.7rem;color:var(--text-sec)}

.toast-container{position:fixed;bottom:24px;right:24px;z-index:9000;display:flex;flex-direction:column;gap:8px}
.toast{padding:14px 20px;border-radius:var(--radius);background:var(--surface);min-width:280px;display:flex;align-items:center;gap:10px;font-size:.9rem;box-shadow:0 4px 20px rgba(0,0,0,.4);animation:slideUp .3s ease;border-left:4px solid var(--blue)}
.toast.success{border-left-color:#2ecc71}
.toast.error{border-left-color:var(--red)}
.toast.info{border-left-color:var(--blue)}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

.skeleton-row{padding:0 4%;margin-bottom:40px}
.skeleton-title{width:200px;height:24px;background:var(--surface);border-radius:4px;margin-bottom:14px}
.skeleton-track{display:flex;gap:8px;overflow:hidden}
.skeleton-card{flex:0 0 230px;aspect-ratio:16/9;background:var(--surface);border-radius:var(--radius);position:relative;overflow:hidden}
.skeleton-card::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:1000;height:56px;background:rgba(20,20,20,.97);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);justify-content:space-around;align-items:center}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.65rem;color:var(--text-sec);transition:color var(--tr)}
.bottom-nav-item i{font-size:1.2rem}
.bottom-nav-item.active,.bottom-nav-item:hover{color:var(--text)}

.no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--text-sec)}
.no-results i{font-size:3rem}

@media(max-width:1200px){
.channel-card{flex:0 0 200px}
.channel-card:hover{transform:scale(1.15)}
.hero-title{font-size:2.5rem}
.header-nav{display:none}
}
@media(max-width:768px){
.hero{height:50vh;min-height:350px}
.hero-title{font-size:1.8rem}
.hero-desc{font-size:.9rem}
.hero-content{bottom:25%;max-width:80%}
.btn-play,.btn-list{padding:10px 20px;font-size:.9rem}
.channel-card{flex:0 0 150px}
.channel-card:hover{transform:scale(1.05)}
.carousel-row{padding:0 3%}
.carousel-title{font-size:1.1rem}
.carousel-arrow{display:none}
.header-actions .header-btn span{display:none}
.bottom-nav{display:flex}
.content-area{padding-bottom:70px}
.player-page-sidebar{position:absolute;right:0;top:0;bottom:0;z-index:10;width:280px}
.player-page-sidebar.collapsed{width:0}
.profile-avatar{width:80px;height:80px;font-size:1.8rem}
.profile-screen h1{font-size:1.5rem}
.search-input{font-size:1.3rem}
.search-results-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media(max-width:480px){
.channel-card{flex:0 0 140px}
.hero-title{font-size:1.4rem}
.hero-buttons{flex-direction:column;gap:8px}
}

.epg-toggle{font-size:1rem}
.epg-panel{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:90vw;z-index:3000;background:var(--surface);transform:translateX(100%);transition:transform var(--tr);display:flex;flex-direction:column;box-shadow:-4px 0 20px rgba(0,0,0,.5)}
.epg-panel.open{transform:translateX(0)}
.epg-panel-header-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}
.epg-panel-header-bar h3{font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:10px}
.epg-panel-header-bar h3 i{color:var(--red)}
.epg-panel-close{font-size:1.2rem;color:var(--text-sec);transition:color var(--tr)}
.epg-panel-close:hover{color:var(--text)}
.epg-panel-content{flex:1;overflow-y:auto}

.epg-now-item{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:background var(--tr)}
.epg-now-item:hover{background:var(--card-hover)}
.epg-now-channel{font-size:.75rem;color:var(--text-sec);margin-bottom:4px}
.epg-now-title{font-size:.9rem;font-weight:500;margin-bottom:4px}
.epg-now-time{font-size:.75rem;color:var(--blue)}

.player-epg-info{position:absolute;top:var(--header-h);left:0;right:0;padding:12px 30px;background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);z-index:1;transition:opacity .4s ease}
.player-epg-info .epg-loading{display:flex;align-items:center;gap:10px;color:var(--text-sec);font-size:.85rem}
.player-epg-info .epg-no-info{color:var(--text-muted);font-size:.85rem}

.epg-now-playing{background:rgba(0,0,0,.5);border-radius:var(--radius);padding:12px 16px;backdrop-filter:blur(10px)}
.epg-now-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.epg-live-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:3px;background:var(--red);font-size:.65rem;font-weight:700;text-transform:uppercase}
.epg-live-badge i{font-size:.4rem;animation:pulse 2s infinite}
.epg-time-range{font-size:.75rem;color:var(--text-sec)}
.epg-now-title{font-size:1rem;font-weight:600;margin-bottom:6px}
.epg-now-desc{font-size:.8rem;color:var(--text-sec);line-height:1.4;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.epg-progress-bar{width:100%;height:3px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
.epg-progress-fill{height:100%;background:var(--red);border-radius:2px;transition:width 1s linear}

.epg-timeline{padding:8px 0}
.epg-timeline-item{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);transition:background var(--tr)}
.epg-timeline-item:hover{background:var(--card-hover)}
.epg-timeline-item.epg-now{background:rgba(229,9,20,.1);border-left:3px solid var(--red)}
.epg-timeline-item.epg-past{opacity:.5}
.epg-timeline-time{font-size:.75rem;color:var(--blue);margin-bottom:4px;font-weight:600}
.epg-timeline-title{font-size:.9rem;font-weight:500;margin-bottom:4px}
.epg-timeline-desc{font-size:.75rem;color:var(--text-sec);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.epg-timeline-duration{font-size:.7rem;color:var(--text-muted);margin-top:4px}

.epg-panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--text-sec)}
.epg-panel-empty i{font-size:2.5rem;color:var(--text-muted)}

.epg-panel-header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.epg-panel-logo{width:40px;height:40px;border-radius:var(--radius);object-fit:cover}
.epg-panel-logo-placeholder{width:40px;height:40px;border-radius:var(--radius);background:var(--card);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--text-muted)}
.epg-panel-header h3{font-size:1rem;font-weight:600}

@media(max-width:768px){
.epg-panel{width:100%;max-width:100%}
.player-epg-info{padding:12px 16px}
.epg-now-title{font-size:.9rem}
}