body,html{width:100%;height:100%;overflow:hidden;background:#000;font-family:Arial,sans-serif}.app{position:relative;width:100vw;height:100vh;background:#000;overflow:hidden}.video-fullscreen{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.video-pip{position:absolute;top:20px;right:20px;width:320px;height:180px;z-index:100;border:3px solid #0066cc;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px #0066cc80}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#fff;text-align:center}.loading h1{font-size:48px;margin-bottom:20px;text-shadow:0 0 20px rgba(255,255,255,.5)}.overlay{position:fixed;bottom:0;left:0;right:0;z-index:50;transition:opacity .3s ease-in-out,transform .3s ease-in-out;background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.7),transparent);padding:40px 40px 20px}.overlay.hidden{opacity:0;transform:translateY(20px);pointer-events:none}.overlay.visible{opacity:1;transform:translateY(0)}.info-banner{display:flex;align-items:flex-start;gap:30px;margin-bottom:20px}.channel-badge{display:flex;align-items:center;gap:15px;background:linear-gradient(135deg,#1e40af,#3b82f6);padding:15px 25px;border-radius:8px;box-shadow:0 4px 15px #3b82f666;min-width:180px}.channel-number{font-size:36px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}.channel-name{font-size:16px;font-weight:600;color:#e0e7ff;max-width:100px;line-height:1.2}.program-info{flex:1;color:#fff}.program-title{font-size:28px;font-weight:700;margin-bottom:8px;text-shadow:0 2px 8px rgba(0,0,0,.8)}.program-meta{font-size:16px;color:#cbd5e1;margin-bottom:6px}.program-time{font-size:16px;color:#94a3b8;font-weight:500}.full-info-panel{background:#0f172af2;border:2px solid #3b82f6;border-radius:12px;padding:25px;margin-bottom:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #000c}.info-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(59,130,246,.2)}.info-row:last-child{border-bottom:none}.info-label{font-size:16px;font-weight:600;color:#3b82f6;text-transform:uppercase;letter-spacing:.5px}.info-value{font-size:18px;color:#f1f5f9;font-weight:500;text-align:right}.progress-bar{position:relative;width:100%;height:8px;background:#3b82f633;border-radius:4px;overflow:hidden;margin-top:15px}.progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:4px;transition:width .3s ease}.progress-text{position:absolute;right:8px;top:-25px;font-size:14px;font-weight:700;color:#3b82f6}.controls{display:flex;gap:15px;justify-content:flex-start}.control-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#1e293be6;border:2px solid #475569;border-radius:8px;padding:15px 25px;cursor:pointer;transition:all .2s ease;color:#e2e8f0}.control-btn:hover{background:#334155f2;border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f64d}.control-btn:active{transform:translateY(0)}.btn-icon{font-size:24px}.btn-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px}.guide-btn{background:linear-gradient(135deg,#1e40af,#3b82f6);border-color:#60a5fa}.guide-btn:hover{background:linear-gradient(135deg,#2563eb,#60a5fa);transform:scale(1.05)}.guide-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;z-index:200;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.guide-container{width:90%;max-width:1400px;height:85%;background:linear-gradient(135deg,#0f172a,#1e293b);border:3px solid #3b82f6;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #000000e6,0 0 40px #3b82f64d}.guide-header{display:flex;align-items:center;justify-content:space-between;padding:20px 30px;background:linear-gradient(135deg,#1e40af,#3730a3);border-bottom:2px solid #60a5fa}.guide-logo{font-size:28px;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);letter-spacing:2px}.guide-time{font-size:20px;font-weight:600;color:#e0e7ff;padding:8px 20px;background:#ffffff1a;border-radius:8px}.close-guide{display:flex;align-items:center;gap:10px;background:#ef4444e6;border:2px solid #dc2626;border-radius:8px;padding:10px 20px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s ease}.close-guide:hover{background:#dc2626;transform:scale(1.05)}.key-hint{font-size:12px;padding:3px 8px;background:#0006;border-radius:4px;font-family:monospace}.guide-grid{flex:1;display:flex;flex-direction:column;overflow:hidden}.guide-column-header{display:flex;align-items:center;padding:15px 20px;background:linear-gradient(135deg,#334155,#475569);border-bottom:2px solid #64748b;color:#f1f5f9;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:1px}.guide-col-ch{width:70px;text-align:center}.guide-col-name{width:200px;padding-left:10px}.guide-col-schedule{flex:1;padding-left:20px}.guide-channels-list{flex:1;overflow-y:auto;overflow-x:hidden;background:#0f172a}.guide-channels-list::-webkit-scrollbar{width:12px}.guide-channels-list::-webkit-scrollbar-track{background:#1e293b}.guide-channels-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3b82f6,#2563eb);border-radius:6px;border:2px solid #1e293b}.guide-channels-list::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#60a5fa,#3b82f6)}.guide-row{display:flex;align-items:stretch;padding:15px 20px;border-bottom:1px solid rgba(100,116,139,.3);cursor:pointer;transition:all .2s ease;min-height:90px}.guide-row:hover{background:#3b82f61a;border-left:4px solid #3b82f6}.guide-row.active-channel{background:#3b82f633;border-left:6px solid #60a5fa;box-shadow:inset 0 0 20px #3b82f633}.guide-ch-num{width:70px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#60a5fa;text-shadow:0 2px 4px rgba(0,0,0,.5)}.guide-ch-name{width:200px;display:flex;align-items:center;padding-left:10px;font-size:16px;font-weight:600;color:#e2e8f0;line-height:1.3}.guide-schedule{flex:1;display:flex;flex-direction:column;gap:8px;padding-left:20px}.guide-program{display:flex;align-items:center;gap:15px;padding:8px 12px;border-radius:6px;transition:background .2s ease}.guide-program.current{background:#22c55e26;border:1px solid rgba(34,197,94,.4)}.guide-program.upcoming{background:#33415566;border:1px solid rgba(71,85,105,.4)}.program-time-slot{display:flex;flex-direction:column;gap:3px;min-width:80px;font-size:13px;font-weight:600}.guide-program.current .start-time{color:#22c55e}.guide-program.upcoming .start-time{color:#94a3b8}.end-time{color:#64748b;font-size:11px}.program-details{flex:1;display:flex;align-items:center;gap:12px}.program-title-text{font-size:15px;font-weight:500;color:#f1f5f9}.program-episode{font-size:12px;color:#cbd5e1;background:#64748b4d;padding:3px 8px;border-radius:4px;white-space:nowrap}.program-progress-mini{width:60px;height:4px;background:#64748b4d;border-radius:2px;overflow:hidden}.progress-mini-bar{height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:2px;transition:width .3s ease}.guide-footer{padding:15px 30px;background:linear-gradient(135deg,#1e293b,#334155);border-top:2px solid #475569}.guide-controls-hint{display:flex;gap:30px;align-items:center;justify-content:center;color:#cbd5e1;font-size:14px}.hint-item{display:flex;align-items:center;gap:8px}.key{background:#3b82f633;border:1px solid #3b82f6;border-radius:4px;padding:3px 8px;font-family:monospace;font-weight:700;font-size:12px;color:#60a5fa}@media (max-width: 1200px){.guide-container{width:95%;height:90%}.guide-col-name,.guide-ch-name{width:150px}.video-pip{width:280px;height:158px}}@media (max-width: 768px){.guide-logo{font-size:20px}.guide-time{font-size:16px}.guide-col-ch{width:50px}.guide-col-name,.guide-ch-name{width:120px;font-size:14px}.video-pip{width:220px;height:124px}.info-banner{flex-direction:column;gap:15px}}.channel-input-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:300;animation:fadeIn .2s ease}.channel-input-box{background:linear-gradient(135deg,#000000f2,#141e32f2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:3px solid #4682ff;border-radius:16px;padding:40px 60px;text-align:center;box-shadow:0 20px 60px #000c,0 0 0 1px #ffffff1a}.channel-input-label{font-size:1.2rem;color:#ffffffb3;margin-bottom:20px;text-transform:uppercase;letter-spacing:2px;font-weight:600}.channel-input-display{font-size:5rem;font-weight:900;color:#4682ff;text-shadow:0 0 30px rgba(70,130,255,.8);font-family:Courier New,monospace;min-width:150px;margin:20px 0;line-height:1}.channel-input-hint{font-size:1rem;color:#96b4ffcc;margin-top:20px;font-weight:500}.video-player{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center}.video-player.fullscreen{z-index:9999}.video-player.hide-cursor,.video-player.hide-cursor *{cursor:none!important}.video-element{width:100%;height:100%;object-fit:contain;background:#000;cursor:default}.video-element::-webkit-media-controls{display:none!important}.video-element::-webkit-media-controls-enclosure{display:none!important}.video-element::-webkit-media-controls-panel{display:none!important}.video-element::--webkit-media-controls-play-button{display:none!important}.video-element::-webkit-media-controls-start-playback-button{display:none!important}.error-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:100}.error-message{background:#dc2626f2;color:#fff;padding:30px 50px;border-radius:12px;font-size:20px;font-weight:600;text-align:center}.retry-btn{display:block;margin:15px auto 0;padding:10px 30px;background:#fff;color:#dc2626;border:none;border-radius:6px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s}.retry-btn:hover{background:#f0f0f0;transform:scale(1.05)}.fullscreen-btn{position:absolute;bottom:20px;right:20px;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.2);padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;z-index:100;transition:all .3s ease;opacity:1;pointer-events:all}.fullscreen-btn.hidden{opacity:0;pointer-events:none}.fullscreen-btn.visible{opacity:1;pointer-events:all}.fullscreen-btn:hover{background:#000000e6;transform:scale(1.05);border-color:#fff6}opacity: 0; z-index: 50; } .video-player:hover .fullscreen-btn{opacity:1}.fullscreen-btn:hover{background:#000c;transform:scale(1.05)}cursor: pointer; transition: all .2s; white-space: nowrap; font-weight: 600; } .fullscreen-btn:hover{background:#000000f2;border-color:#fff6;transform:scale(1.05)}.video-player.fullscreen .controls-overlay{opacity:0;transition:opacity .3s ease}.video-player.fullscreen:hover .controls-overlay{opacity:1}.channel-info-overlay{position:absolute;top:30px;left:30px;background:linear-gradient(135deg,#000000f2,#141e32f2);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:12px;padding:20px 30px;z-index:200;display:flex;align-items:center;gap:20px;box-shadow:0 10px 40px #000c,0 0 0 1px #ffffff1a;animation:slideInFromLeft .3s ease}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}.channel-info-number{font-size:3.5rem;font-weight:900;color:#4682ff;line-height:1;text-shadow:0 0 20px rgba(70,130,255,.6);min-width:80px;text-align:center}.channel-info-details{display:flex;flex-direction:column;gap:5px}.channel-info-name{font-size:1.5rem;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);letter-spacing:.5px}.channel-info-program{font-size:1.1rem;color:#96b4ffe6;font-weight:500;max-width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0a0a;color:#fff;overflow:hidden}#root{width:100vw;height:100vh}