@import "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&family=DM+Sans:wght@300;400;500&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--violet:#4a2d7a;--violet-dark:#341f57;--violet-deep:#1e1233;--violet-light:#ede8f5;--violet-mid:#6b4fa8;--bg:#f2f0f8;--surface:#fff;--border:#ddd8ec;--text:#1a1a1a;--text-muted:#8a8a8a;--text-light:#4a4a4a;--live:#ef4444;--header-h:60px;--tabs-h:44px;--sidebar-w:280px;--radius:10px}html.dark{--bg:#0f0a1a;--surface:#1a1230;--border:#2a1f42;--text:#e8e0f5;--text-muted:#6b5a8a;--text-light:#b0a0cc}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:DM Sans,sans-serif;overflow-x:hidden}@keyframes gradientShift{0%,to{background-position:0%}50%{background-position:100%}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.login-screen{background:linear-gradient(135deg,#4a2d7a 0%,#341f57 40%,#1e1233 70%,#4a2d7a 100%) 0 0/300% 300%;justify-content:center;align-items:center;min-height:100vh;padding:2rem;animation:8s infinite gradientShift;display:flex;position:relative;overflow:hidden}.login-screen:before{content:"";background:radial-gradient(at 60% 40%,#ffffff0a 0%,#0000 60%);position:absolute;inset:0}.login-card{z-index:1;width:100%;max-width:400px;animation:.6s fadeUp;position:relative}.login-logo{text-align:center;margin-bottom:2rem}.login-icon{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff1f;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin:0 auto 1.25rem;display:flex}.login-wordmark{color:#fff;letter-spacing:-.02em;font-family:Playfair Display,Georgia,serif;font-size:30px;font-weight:700}.login-tagline{color:#fff9;margin-top:6px;font-size:13px}.login-form{background:#fffffff7;border:.5px solid #ffffff26;border-radius:20px;padding:2.25rem;box-shadow:0 24px 64px #0000004d}.login-form-title{color:#1a1a1a;margin-bottom:1.75rem;font-family:Playfair Display,Georgia,serif;font-size:20px;font-weight:700}.login-error{color:#dc2626;background:#fef2f2;border:.5px solid #fecaca;border-radius:8px;margin-bottom:1rem;padding:9px 14px;font-size:13px}.login-form input{color:#1a1a1a;background:#f2f0f8;border:.5px solid #ddd8ec;border-radius:8px;outline:none;width:100%;margin-bottom:1rem;padding:11px 14px;font-family:DM Sans,sans-serif;font-size:14px;transition:border-color .2s}.login-form input:focus{border-color:#4a2d7a;box-shadow:0 0 0 3px #4a2d7a14}.login-form button{color:#fff;cursor:pointer;letter-spacing:.01em;background:linear-gradient(135deg,#4a2d7a,#341f57);border:none;border-radius:10px;width:100%;margin-top:.25rem;padding:13px;font-family:DM Sans,sans-serif;font-size:15px;font-weight:500;transition:opacity .2s}.login-form button:hover{opacity:.9}.login-form button:disabled{opacity:.6;cursor:not-allowed}.login-badge-row{justify-content:center;align-items:center;gap:8px;margin-top:1.25rem;display:flex}.live-badge{background:#ef44441a;border:1px solid #ef444440;border-radius:20px;align-items:center;gap:6px;padding:4px 12px;display:flex}.live-dot{background:#ef4444;border-radius:50%;width:6px;height:6px;animation:1.5s infinite pulse;display:inline-block}.live-text{color:#ef4444;font-size:11px;font-weight:500}.free-badge{color:#fff9;background:#ffffff14;border:1px solid #ffffff26;border-radius:20px;padding:4px 12px;font-size:11px}.app-shell{background:var(--bg);flex-direction:column;height:100vh;display:flex;overflow:hidden}.app-header{height:var(--header-h);z-index:50;background:linear-gradient(135deg,#1e1233,#0d0820);border-bottom:.5px solid #ffffff14;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 1.5rem;display:flex}.header-left{align-items:center;gap:12px;display:flex}.header-logo{align-items:center;gap:10px;display:flex}.header-title{color:#fff;letter-spacing:-.01em;font-family:Playfair Display,Georgia,serif;font-size:19px;font-weight:700}.header-waypoint{color:#fff6;letter-spacing:.06em;margin-left:2px;font-size:11px}.header-right{align-items:center;gap:8px;display:flex}.header-live{background:#ef444426;border:1px solid #ef44444d;border-radius:20px;align-items:center;gap:6px;padding:4px 12px;display:flex}.channel-count{color:#ffffff73;background:#ffffff12;border:1px solid #ffffff1a;border-radius:20px;padding:3px 10px;font-size:12px}.icon-btn{color:#ffffffbf;cursor:pointer;background:#ffffff12;border:1px solid #ffffff1a;border-radius:8px;align-items:center;padding:6px 10px;font-family:DM Sans,sans-serif;font-size:14px;transition:background .2s;display:flex}.icon-btn:hover{color:#fff;background:#ffffff21}.back-btn{color:#fffc;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;padding:6px 14px;font-family:DM Sans,sans-serif;font-size:13px}.back-btn:hover{background:#ffffff26}.category-tabs{height:var(--tabs-h);scrollbar-width:none;background:#1a0f30;border-bottom:.5px solid #ffffff12;flex-shrink:0;align-items:center;gap:4px;padding:0 1.25rem;display:flex;overflow-x:auto}.category-tabs::-webkit-scrollbar{display:none}.cat-tab{color:#ffffff80;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #ffffff1f;border-radius:20px;flex-shrink:0;padding:4px 14px;font-family:DM Sans,sans-serif;font-size:12px;font-weight:500;transition:all .2s}.cat-tab:hover{color:#fff;background:#ffffff14;border-color:#ffffff40}.cat-tab.active{color:#fff;background:#ffffff1f;border-color:#ffffff59;font-weight:500}.main-layout{flex:1;display:flex;overflow:hidden}.channel-sidebar{width:var(--sidebar-w);background:var(--surface);border-right:.5px solid var(--border);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.search-wrap{border-bottom:.5px solid var(--border);flex-shrink:0;padding:12px;position:relative}.search-icon{pointer-events:none;font-size:14px;position:absolute;top:50%;left:22px;transform:translateY(-50%)}.search-input{border:.5px solid var(--border);background:var(--bg);width:100%;color:var(--text);border-radius:8px;outline:none;padding:8px 32px;font-family:DM Sans,sans-serif;font-size:13px;transition:border-color .2s}.search-input:focus{border-color:var(--violet);box-shadow:0 0 0 3px #4a2d7a14}.search-clear{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:14px;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.channel-list{flex:1;overflow-y:auto}.channel-list::-webkit-scrollbar{width:4px}.channel-list::-webkit-scrollbar-track{background:0 0}.channel-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.group-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);background:var(--bg);border-bottom:.5px solid var(--border);z-index:1;padding:7px 14px 5px;font-size:10px;font-weight:500;position:sticky;top:0}.channel-item{cursor:pointer;border-bottom:.5px solid var(--border);justify-content:space-between;align-items:center;padding:9px 12px;transition:background .15s;display:flex}.channel-item:hover{background:var(--violet-light)}.channel-item.active{background:var(--violet-light);border-left:3px solid var(--violet)}html.dark .channel-item:hover{background:#4a2d7a33}html.dark .channel-item.active{background:#4a2d7a40}.channel-info{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.channel-logo{object-fit:contain;background:var(--bg);border-radius:4px;flex-shrink:0;width:28px;height:28px}.channel-logo-placeholder{background:linear-gradient(135deg, var(--violet), var(--violet-dark));color:#fff;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:11px;font-weight:700;display:flex}.channel-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.fav-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:2px 4px;font-size:16px;line-height:1;transition:color .15s}.fav-btn:hover{color:var(--violet)}.fav-btn.active{color:#f59e0b}.list-loading{padding:8px}.channel-skeleton{background:linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);background-size:200% 100%;border-radius:8px;height:44px;margin-bottom:6px;animation:1.5s infinite shimmer}.list-empty{text-align:center;color:var(--text-muted);padding:2.5rem;font-size:14px}.player-area{background:#0a0612;flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}.player-empty{text-align:center;padding:3rem}.player-empty-icon{margin-bottom:1.25rem;font-size:56px}.player-empty-title{color:#ffffffa6;margin-bottom:8px;font-family:Playfair Display,Georgia,serif;font-size:20px;font-weight:700}.player-empty-sub{color:#ffffff4d;font-size:13px}@media (width<=768px){:root{--sidebar-w:100vw}.main-layout{position:relative}.channel-sidebar{z-index:2;width:100%;transition:transform .3s;position:absolute;inset:0}.channel-sidebar.mobile-hidden{pointer-events:none;transform:translate(-100%)}.player-area{z-index:1;position:absolute;inset:0}.player-area.mobile-hidden{pointer-events:none;opacity:0}.back-btn{display:flex!important}.channel-count,.header-waypoint{display:none}}@media (width>=769px){.back-btn{display:none!important}.channel-sidebar.mobile-hidden,.player-area.mobile-hidden{opacity:1!important;pointer-events:all!important;transform:none!important}}