*,*: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}.searchbar input{width:100%;background:#0f1117;border:1px solid #2d3748;border-radius:6px;padding:8px 12px;color:#e2e8f0;font-size:14px;outline:none;min-height:40px}.content-row{display:flex;flex:1;overflow:hidden}.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}.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}.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}@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}}