*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;height:100dvh}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#0f1117;color:#e2e8f0;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.app{display:flex;height:100dvh;overflow:hidden}.sidebar{width:220px;background:#141922;border-right:1px solid #1e2533;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:50}.sidebar-drawer{position:fixed;top:0;left:0;bottom:0;width:80vw;max-width:300px;background:#141922;border-right:1px solid #1e2533;display:flex;flex-direction:column;overflow-y:auto;z-index:51;transform:translate(-100%);transition:transform .25s ease}.sidebar-drawer.open{transform:translate(0)}.sidebar-overlay.open{display:block}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.topbar{display:none;align-items:center;gap:10px;padding:10px 12px;background:#141922;border-bottom:1px solid #1e2533;flex-shrink:0}.topbar-menu-btn{background:none;border:none;color:#7dd3fc;font-size:22px;cursor:pointer;padding:4px;line-height:1;min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center}.topbar-title{font-size:14px;font-weight:600;color:#e2e8f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.searchbar{padding:10px 16px;background:#141922;border-bottom:1px solid #1e2533;flex-shrink:0}.search-field{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:12px;font-size:14px;opacity:.6;pointer-events:none}.searchbar input{width:100%;background:#0f1117;border:1px solid #2d3748;border-radius:6px;padding:8px 44px 8px 36px;color:#e2e8f0;font-size:14px;outline:none;min-height:40px}.search-field.has-value input{border-color:#d97706}.search-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;border-radius:50%;background:#2d3748;color:#e2e8f0;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}.filter-status{display:flex;align-items:center;gap:10px;padding:6px 16px;font-size:12px;color:#64748b;background:#11161f;border-bottom:1px solid #1e2533;flex-shrink:0;min-width:0}.filter-status.active{background:#2a1d05;color:#fde68a;border-bottom-color:#78350f}.filter-count{font-weight:600;white-space:nowrap}.filter-desc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-clear{margin-left:auto;background:#78350f;color:#fde68a;border:none;border-radius:14px;padding:4px 12px;font-size:12px;cursor:pointer;min-height:28px;white-space:nowrap;flex-shrink:0}.content-row{display:flex;flex:1;overflow:hidden}.workspace{flex:1;display:flex;overflow:hidden;min-height:0}.channels-pane{width:360px;flex-shrink:0;display:flex;flex-direction:column;background:#141922;border-right:1px solid #1e2533;overflow:hidden;transition:width .18s ease}.channels-pane.collapsed{width:46px}.pane-header{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #1e2533;flex-shrink:0}.channels-pane.collapsed .pane-header{flex-direction:column;align-items:center;height:100%;border-bottom:none}.pane-toggle{background:#1e2533;border:1px solid #2d3748;color:#7dd3fc;width:28px;height:28px;border-radius:6px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.pane-title{font-size:13px;font-weight:600;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pane-title-vertical{writing-mode:vertical-rl;font-size:11px;letter-spacing:2px;color:#4b5563;margin-top:8px}.pane-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.pane-body .groups-tabs{display:flex;flex-wrap:wrap;overflow-x:hidden;overflow-y:auto;max-height:132px;scrollbar-width:thin}.pane-body .groups-tabs::-webkit-scrollbar{display:block;width:8px}.pane-body .groups-tabs::-webkit-scrollbar-thumb{background:#2d3748;border-radius:4px}.player-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:#0a0e18}.player-bar.fill{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.player-bar.fill .player-video-wrap{flex:1;aspect-ratio:auto;max-height:none;min-height:0}.groups-panel{width:200px;background:#141922;border-right:1px solid #1e2533;padding:12px 8px;overflow-y:auto;flex-shrink:0}.groups-tabs{display:none;overflow-x:auto;overflow-y:hidden;padding:8px 12px;gap:6px;background:#141922;border-bottom:1px solid #1e2533;flex-shrink:0;scrollbar-width:none;-ms-overflow-style:none;flex-direction:row;align-items:center;white-space:nowrap}.groups-tabs::-webkit-scrollbar{display:none}.groups-tab-btn{display:inline-flex;align-items:center;padding:6px 14px;border-radius:20px;border:1px solid #2d3748;background:#1e2533;color:#94a3b8;font-size:13px;cursor:pointer;white-space:nowrap;min-height:36px;flex-shrink:0}.groups-tab-btn.active{background:#1e3a5f;border-color:#3b82f6;color:#7dd3fc}.groups-tab-btn.fav.active{background:#422006;border-color:#d97706;color:#fde68a}.channel-list{flex:1;overflow-y:auto;padding:4px 0;-webkit-overflow-scrolling:touch}.channel-row{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;border-bottom:1px solid #1a2030;transition:background .1s;min-height:56px}.channel-row:active,.channel-row.playing{background:#1e2d4a}.ch-logo{width:36px;height:36px;object-fit:contain;border-radius:4px;flex-shrink:0}.ch-logo-placeholder{background:#1e2533;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#4b5563}.ch-text{flex:1;overflow:hidden;min-width:0}.ch-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-row.playing .ch-name{font-weight:600}.ch-playing{color:#22c55e;margin-right:6px}.ch-group{font-size:11px;color:#4b5563;margin-top:2px}.channel-empty{flex:1;display:flex;align-items:center;justify-content:center;color:#4b5563;font-size:14px}.player-bar{flex-shrink:0;background:#0a0e18;border-top:1px solid #1e2533}.player-titlebar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#141922;border-bottom:1px solid #1e2533;min-height:44px}.player-video-wrap{position:relative;width:100%;aspect-ratio:16/9;max-height:35vh}.player-channels-btn{min-height:32px;padding:4px 12px;margin-right:10px;flex-shrink:0}.player-title{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.player-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;margin-left:8px}.mode-select{background:#1e2533;color:#94a3b8;border:1px solid #2d3748;border-radius:4px;padding:4px 6px;font-size:12px;cursor:pointer;min-height:32px}.player-empty-icon{font-size:32px}.player-empty-text{color:#4b5563;font-size:13px}.player-error{background:#450a0a;color:#fca5a5;padding:8px 16px;font-size:12px}.btn-primary{background:#1d4ed8;color:#fff;border:none;border-radius:6px;padding:8px 20px;cursor:pointer;font-size:14px;min-height:40px}.btn-secondary{background:#2d3748;color:#e2e8f0;border:none;border-radius:6px;padding:8px 20px;cursor:pointer;font-size:14px;min-height:40px}.btn-stop{background:#7f1d1d;color:#fca5a5;border:none;border-radius:4px;padding:6px 12px;cursor:pointer;font-size:12px;min-height:36px;white-space:nowrap}.fav-btn{background:none;border:none;cursor:pointer;font-size:20px;padding:4px 8px;min-width:36px;min-height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:36px;height:36px;border:3px solid #2d3748;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}.playlist-item{display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;border-bottom:1px solid #1a2030;min-height:52px}.playlist-item:active{background:#1e2d4a}.playlist-item.active{background:#1e2d4a;border-left:3px solid #3b82f6}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:#1e2533;border:1px solid #2d3748;border-radius:12px;padding:24px;width:100%;max-width:420px}:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px;border-radius:4px}.channel-row:focus-visible,.playlist-item:focus-visible{outline:2px solid #7dd3fc;outline-offset:-2px;background:#1e2d4a}.tv-toggle-btn{margin-left:auto;background:#1e2533;border:1px solid #2d3748;color:#94a3b8;font-size:11px;padding:4px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;flex-shrink:0}html.tv{font-size:clamp(22px,1.5vw,44px)}body.tv{font-size:1rem}.tv .app{padding:2.5vh 3vw;background:#0f1117}.tv .sidebar,.tv .topbar{display:none}.tv .workspace.tv{position:relative;border-radius:.5rem;overflow:hidden}.tv .channels-pane.tv-overlay{position:absolute;top:0;left:0;bottom:0;width:50vw;z-index:40;box-shadow:.4rem 0 2rem #000000b3;transition:transform .2s ease}.tv .channels-pane.tv-overlay.collapsed{width:50vw;transform:translate(-102%)}.tv .channels-pane.tv-overlay.collapsed .pane-header{display:none}.pane-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:39}.tv .pane-header{padding:.6rem .8rem;gap:.6rem}.tv .pane-toggle{width:1.9rem;height:1.9rem;font-size:1.2rem;border-radius:.3rem}.tv .pane-title{font-size:1.05rem}.tv .tv-toggle-btn{font-size:.7rem;padding:.35rem .7rem;border-radius:.3rem}.tv-playlist-strip{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 4px}.tv .tv-playlist-strip{gap:.4rem;padding:.5rem .8rem .2rem}.tv .searchbar{padding:.5rem .8rem}.tv .searchbar input{font-size:1rem;min-height:2.3rem;padding:.4rem 2.6rem .4rem 2.1rem;border-radius:.3rem}.tv .search-icon{left:.7rem;font-size:.85rem}.tv .search-clear{width:1.9rem;height:1.9rem;right:.2rem;font-size:.9rem}.tv .filter-status{font-size:.75rem;padding:.35rem .8rem;gap:.5rem}.tv .filter-clear{font-size:.75rem;padding:.25rem .8rem;min-height:1.7rem;border-radius:1rem}.tv .pane-body .groups-tabs{max-height:6.4rem;padding:.5rem .8rem;gap:.4rem}.tv .groups-tab-btn{font-size:.8rem;padding:.35rem .9rem;min-height:2rem;border-radius:1rem}.tv .channel-row{padding:.45rem .8rem;min-height:3.2rem;gap:.7rem}.tv .ch-logo{width:2.1rem;height:2.1rem;border-radius:.2rem}.tv .ch-logo-placeholder,.tv .ch-name{font-size:1rem}.tv .ch-group{font-size:.68rem;color:#64748b;margin-top:.1rem}.tv .ch-playing{margin-right:.3rem}.tv .fav-btn{font-size:1.3rem;min-width:2.2rem;min-height:2.2rem}.tv .channel-empty{font-size:1rem}.tv .player-titlebar{padding:.5rem .9rem;min-height:2.8rem}.tv .player-title{font-size:1rem}.tv .player-actions{gap:.4rem;margin-left:.4rem}.tv .player-channels-btn{margin-right:.5rem}.tv .btn-primary,.tv .btn-secondary{font-size:.85rem;min-height:2.2rem;padding:.4rem 1rem;border-radius:.3rem}.tv .btn-stop{font-size:.8rem;min-height:2.1rem;padding:.35rem .9rem}.tv .mode-select{font-size:.8rem;min-height:2.1rem;padding:.25rem .5rem}.tv .player-empty-icon{font-size:3rem}.tv .player-empty-text{font-size:1rem;color:#94a3b8}.tv .player-error{font-size:.8rem;padding:.5rem .9rem}.tv .spinner{width:2.5rem;height:2.5rem;border-width:.2rem}.tv .modal{max-width:32rem;padding:1.2rem}.tv :focus,.tv :focus-visible{outline:.16rem solid #7dd3fc;outline-offset:.1rem}.tv .channel-row:focus,.tv .channel-row:focus-visible{outline:.16rem solid #7dd3fc;outline-offset:-.16rem;background:#24477a}.tv .groups-tab-btn:focus{background:#24477a;color:#fff}.tv .channel-list{scrollbar-width:auto}.tv .channel-list::-webkit-scrollbar{width:.5rem}.tv .channel-list::-webkit-scrollbar-thumb{background:#2d3748;border-radius:.25rem}@media (max-width: 767px){.sidebar{display:none}.topbar{display:flex}.groups-panel{display:none}.groups-tabs{display:flex}.player-video-wrap{max-height:30vh}.channel-row{padding:10px 12px}.searchbar,.player-titlebar{padding:8px 12px}.player-titlebar span{font-size:13px}}