@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-primary:#08070e;--bg-secondary:#0f0d1a;--bg-card:#151324a6;--glass-bg:#19162b73;--glass-border:#ffffff0d;--accent-color:#a855f7;--accent-glow:#a855f726;--accent-hover:#c084fc;--text-main:#f8fafc;--text-muted:#94a3b8;--status-live:#10b981;--status-live-glow:#10b98140;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--shadow-main:0 8px 32px 0 #00000080;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1)}[data-theme=cyberpunk]{--bg-primary:#0a0908;--bg-secondary:#14110f;--bg-card:#1e1914a6;--glass-bg:#231e1973;--glass-border:#ffffff0f;--accent-color:#ff6b00;--accent-glow:#ff6b0026;--accent-hover:#ff8533}[data-theme=nordic]{--bg-primary:#0b0f19;--bg-secondary:#111827;--bg-card:#111827a6;--glass-bg:#1f293773;--glass-border:#ffffff0a;--accent-color:#14b8a6;--accent-glow:#14b8a626;--accent-hover:#2dd4bf}[data-theme=crimson]{--bg-primary:#0f0508;--bg-secondary:#1a0a10;--bg-card:#200c14a6;--glass-bg:#280f1973;--glass-border:#ffffff0d;--accent-color:#f43f5e;--accent-glow:#f43f5e26;--accent-hover:#fb7185}[data-theme=toxic]{--bg-primary:#090a09;--bg-secondary:#111311;--bg-card:#161a16a6;--glass-bg:#1a201a73;--glass-border:#ffffff0d;--accent-color:#84cc16;--accent-glow:#84cc1626;--accent-hover:#a3e635}[data-theme=solar]{--bg-primary:#05080e;--bg-secondary:#0b101c;--bg-card:#0f1626a6;--glass-bg:#141e3273;--glass-border:#ffffff0d;--accent-color:#eab308;--accent-glow:#eab30826;--accent-hover:#facc15}[data-theme=oled]{--bg-primary:#000;--bg-secondary:#121212;--bg-card:#161616bf;--glass-bg:#1c1c1c80;--glass-border:#ffffff12;--accent-color:#9ca3af;--accent-glow:#9ca3af26;--accent-hover:#d1d5db}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-main);background-image:radial-gradient(at 0 0,#7c3aed14 0,#0000 50%),radial-gradient(at 100% 100%,#14b8a60f 0,#0000 50%);background-attachment:fixed;min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--shadow-main);transition:var(--transition-smooth);border-radius:16px}.text-ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.app-container{flex-direction:column;gap:16px;max-width:1800px;min-height:100vh;margin:0 auto;padding:16px;display:flex}.app-header{z-index:100;justify-content:space-between;align-items:center;margin-bottom:4px;padding:12px 24px;display:flex;position:relative}.logo-section{align-items:center;gap:10px;text-decoration:none;display:flex}.logo-icon{background:linear-gradient(135deg, var(--accent-color), var(--accent-hover));box-shadow:0 4px 14px var(--accent-glow);border-radius:12px;justify-content:center;align-items:center;padding:8px;display:flex}.logo-section h1{letter-spacing:-.5px;background:linear-gradient(90deg,#fff,#b4b6c3);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:700}.logo-section h1 span{background:linear-gradient(to right, var(--accent-color), var(--accent-hover));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.header-actions{align-items:center;gap:12px;display:flex}.theme-selector{border:1px solid var(--glass-border);background:#ffffff08;border-radius:20px;align-items:center;gap:8px;padding:5px 8px;display:flex}.theme-dot-btn{cursor:pointer;width:16px;height:16px;transition:var(--transition-smooth);border:1.5px solid #ffffff40;border-radius:50%;padding:0;position:relative;box-shadow:inset 0 0 2px #00000080}.theme-dot-btn:hover{transform:scale(1.25)}.theme-dot-btn.active{border-color:#fff;box-shadow:0 0 8px,0 0 2px #fff}.dashboard-grid{flex:1;grid-template-columns:1fr 380px;gap:16px;display:grid}.dashboard-grid.sidebar-collapsed{grid-template-columns:1fr}.left-panel,.right-panel{flex-direction:column;gap:16px;display:flex}@media (width>=769px){.right-panel.desktop-collapsed{display:none!important}}.player-container{aspect-ratio:16/9;width:100%;box-shadow:var(--shadow-main);border:1px solid var(--glass-border);transition:var(--transition-smooth);background-color:#020205;border-radius:16px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.video-element{object-fit:contain;cursor:pointer;width:100%;height:100%}.player-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background-color:#000000bf;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.overlay-text{color:var(--text-main);font-size:1rem;font-weight:500}.spinner{border:3px solid #ffffff1a;border-top-color:var(--accent-color);width:50px;height:50px;box-shadow:0 0 15px var(--accent-glow);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.paused-overlay{-webkit-backdrop-filter:none;backdrop-filter:none;cursor:pointer;background-color:#0006}.play-button-large{background:var(--accent-color);color:#fff;width:72px;height:72px;box-shadow:0 8px 24px var(--accent-glow);transition:var(--transition-smooth);border-radius:50%;justify-content:center;align-items:center;display:flex}.paused-overlay:hover .play-button-large{background:var(--accent-hover);transform:scale(1.1)}.error-overlay{text-align:center;background-color:#0a050ff2}.error-icon{color:#ef4444;filter:drop-shadow(0 0 8px #ef444466)}.error-title{font-size:1.25rem;font-weight:700}.error-desc{color:var(--text-muted);max-width:450px;font-size:.875rem;line-height:1.5}.retry-btn{border:1px solid var(--glass-border);color:var(--text-main);cursor:pointer;transition:var(--transition-smooth);background:#ffffff14;border-radius:10px;align-items:center;gap:8px;padding:10px 20px;font-size:.85rem;font-weight:600;display:flex}.retry-btn:hover{background:var(--accent-color);box-shadow:0 4px 12px var(--accent-glow)}.player-controls{z-index:12;background:linear-gradient(#0000 0%,#0000004d 30%,#000000f2 100%);flex-direction:column;gap:14px;padding:20px 24px 16px;transition:opacity .3s;display:flex;position:absolute;bottom:0;left:0;right:0}.player-controls.hidden{opacity:0;pointer-events:none}.player-controls.visible{opacity:1}.controls-header{justify-content:space-between;align-items:center;display:flex}.channel-badge{border:1px solid var(--glass-border);background:#ffffff12;border-radius:20px;align-items:center;gap:10px;padding:6px 14px;display:flex}.channel-badge-logo{object-fit:contain;border-radius:4px;width:20px;height:20px}.channel-badge-name{font-size:.85rem;font-weight:600}.live-indicator{align-items:center;gap:6px;display:flex}.live-dot{background-color:var(--status-live);width:8px;height:8px;box-shadow:0 0 8px var(--status-live-glow);border-radius:50%}.live-text{letter-spacing:.5px;color:var(--status-live);font-size:.75rem;font-weight:800}.quality-badge{background:var(--accent-color);color:#fff;border-radius:4px;margin-left:8px;padding:2px 6px;font-size:.65rem;font-weight:700}.controls-row{justify-content:space-between;align-items:center;display:flex}.controls-group{align-items:center;gap:16px;display:flex}.control-btn{color:#fff;cursor:pointer;transition:var(--transition-smooth);opacity:.85;background:0 0;border:none;justify-content:center;align-items:center;display:flex}.control-btn:hover{opacity:1;color:var(--accent-color);transform:scale(1.05)}.control-btn.active{color:var(--accent-color)}.volume-control{align-items:center;gap:8px;display:flex}.volume-slider{-webkit-appearance:none;cursor:pointer;width:80px;height:4px;transition:var(--transition-smooth);background:#fff3;border-radius:2px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;transition:var(--transition-smooth);background:#fff;border-radius:50%}.volume-slider:hover::-webkit-slider-thumb{background:var(--accent-color);box-shadow:0 0 6px var(--accent-glow)}.channels-sidebar{flex-direction:column;height:100%;max-height:calc(100vh - 120px);display:flex;overflow:hidden}.search-container{border-bottom:1px solid var(--glass-border);align-items:center;gap:10px;padding:12px 16px;display:flex}.search-icon{color:var(--text-muted)}.search-container input{color:var(--text-main);background:0 0;border:none;outline:none;width:100%;font-size:.875rem}.sidebar-tabs{border-bottom:1px solid var(--glass-border);flex-wrap:wrap;gap:8px;padding:10px 16px;display:flex}.sidebar-tabs::-webkit-scrollbar{display:none}.tab-btn{color:var(--text-muted);cursor:pointer;letter-spacing:.5px;transition:var(--transition-smooth);white-space:nowrap;background:0 0;border:none;border-radius:20px;flex-shrink:0;padding:6px 12px;font-size:.7rem;font-weight:700}.tab-btn.active,.tab-btn:hover{color:var(--accent-color);background:#ffffff0d}.fav-tab-inner{align-items:center;gap:4px;display:flex}.channels-list{flex-direction:column;flex:1;gap:10px;padding:12px;display:flex;overflow-y:auto}.channel-card{cursor:pointer;transition:var(--transition-smooth);background:#ffffff05;border:1px solid #0000;border-radius:12px;align-items:center;gap:12px;padding:10px 12px;display:flex;position:relative}.channel-card:hover{border-color:var(--glass-border);background:#ffffff0d;transform:translateY(-2px)}.channel-card.offline{opacity:.55}.channel-card.offline:hover{opacity:.8}.channel-card.selected{background:var(--bg-card);border-color:var(--accent-color);box-shadow:inset 0 0 12px var(--accent-glow)}.logo-container{border:1px solid var(--glass-border);background:#000;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;padding:4px;display:flex;position:relative}.channel-logo{object-fit:contain;max-width:100%;max-height:100%}.online-dot{background-color:var(--status-live);border:2px solid var(--bg-primary);width:10px;height:10px;box-shadow:0 0 6px var(--status-live);border-radius:50%;position:absolute;bottom:-2px;right:-2px}.online-dot.offline{box-shadow:none;background-color:#6b7280}.channel-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.card-top-row{justify-content:space-between;align-items:center;display:flex}.channel-title{color:var(--text-main);font-size:.85rem;font-weight:600}.now-playing-preview{color:var(--text-muted);align-items:center;gap:6px;display:flex}.tv-icon{opacity:.7;flex-shrink:0}.show-title{font-size:.72rem}.channel-badges-row{gap:6px;display:flex}.cat-badge{color:var(--accent-color);background:var(--accent-glow);text-transform:uppercase;border-radius:4px;padding:1px 6px;font-size:.6rem;font-weight:700}.qual-badge{color:var(--text-muted);background:#ffffff0d;border-radius:4px;padding:1px 6px;font-size:.6rem}.offline-badge{color:#ef4444;text-transform:uppercase;background:#ef44441a;border-radius:4px;padding:1px 6px;font-size:.6rem;font-weight:700}.favorite-btn{color:var(--text-muted);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;border-radius:50%;padding:6px}.favorite-btn:hover{color:#ef4444;background:#ef44441a}.favorite-btn.favorited{color:#ef4444}.empty-state{color:var(--text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px 20px;font-size:.8rem;display:flex}.chat-container{flex-direction:column;height:100%;max-height:calc(100vh - 120px);display:flex;overflow:hidden}.chat-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;padding:16px;display:flex}.chat-title-group{align-items:center;gap:8px;display:flex}.chat-title-group h3{font-size:.95rem;font-weight:600}.theme-accent-color{color:var(--accent-color)}.viewer-count{color:var(--status-live);background:#10b9811a;border-radius:12px;align-items:center;gap:6px;padding:3px 10px;font-size:.72rem;font-weight:600;display:flex}.chat-messages-feed{flex-direction:column;flex:1;gap:12px;padding:16px;display:flex;overflow-y:auto}.chat-bubble{background:#ffffff05;border:1px solid #ffffff05;border-radius:12px;flex-direction:column;align-self:flex-start;max-width:90%;padding:8px 12px;display:flex}.chat-bubble.user-sent{border-color:var(--glass-border);background:#ffffff0d;align-self:flex-end}.bubble-header{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:3px;display:flex}.bubble-header .username{font-size:.75rem;font-weight:700}.bubble-header .timestamp{color:var(--text-muted);font-size:.6rem}.bubble-text{color:var(--text-main);word-break:break-word;font-size:.8rem;line-height:1.4}.chat-input-area{border-top:1px solid var(--glass-border);gap:8px;padding:12px 16px;display:flex}.chat-input-area input{border:1px solid var(--glass-border);color:var(--text-main);transition:var(--transition-smooth);background:#ffffff08;border-radius:10px;outline:none;flex:1;padding:8px 12px;font-size:.8rem}.chat-input-area input:focus{border-color:var(--accent-color);box-shadow:0 0 8px var(--accent-glow)}.chat-input-area button{background:var(--accent-color);color:#fff;cursor:pointer;width:34px;height:34px;transition:var(--transition-smooth);border:none;border-radius:10px;justify-content:center;align-items:center;display:flex}.chat-input-area button:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.05)}.chat-input-area button:disabled{opacity:.5;cursor:not-allowed}.import-trigger-btn{background:var(--bg-card);border:1px solid var(--glass-border);color:var(--text-main);cursor:pointer;width:36px;height:36px;transition:var(--transition-smooth);border-radius:10px;justify-content:center;align-items:center;display:flex}.import-trigger-btn:hover{border-color:var(--accent-color);color:var(--accent-color);background:#ffffff0f}.sidebar-toggle-btn{background:var(--bg-card);border:1px solid var(--glass-border);color:var(--text-main);cursor:pointer;width:36px;height:36px;transition:var(--transition-smooth);border-radius:10px;justify-content:center;align-items:center;display:flex}.sidebar-toggle-btn:hover{border-color:var(--accent-color);color:var(--accent-color);background:#ffffff0f}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000000d1;justify-content:center;align-items:flex-start;padding:40px 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-card{background:var(--bg-secondary);border:1px solid var(--glass-border);width:100%;max-width:580px;box-shadow:var(--shadow-main);border-radius:20px;flex-direction:column;margin:auto;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-header h3{font-size:1rem;font-weight:700}.close-btn{color:var(--text-muted);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none}.close-btn:hover{color:#fff}.modal-tabs{border-bottom:1px solid var(--glass-border);background:#0003;display:flex}.modal-tab{color:var(--text-muted);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px;font-size:.8rem;font-weight:600;display:flex}.modal-tab.active{background:var(--bg-secondary);color:var(--accent-color);border-bottom:2px solid var(--accent-color)}.modal-body{flex-direction:column;gap:16px;padding:20px;display:flex;overflow-y:auto}.alert-box{border-radius:8px;align-items:center;gap:10px;padding:10px 14px;font-size:.8rem;display:flex}.alert-box.error{color:#ef4444;background:#ef44441a;border:1px solid #ef444433}.alert-box.success{color:var(--status-live);background:#10b9811a;border:1px solid #10b98133}.form-grid{flex-direction:column;gap:14px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:var(--text-muted);font-size:.75rem;font-weight:700}.form-group input,.form-group textarea{border:1px solid var(--glass-border);color:var(--text-main);transition:var(--transition-smooth);background:#00000040;border-radius:10px;outline:none;padding:10px 14px;font-size:.825rem}.form-group input:focus,.form-group textarea:focus{border-color:var(--accent-color);box-shadow:0 0 8px var(--accent-glow)}.form-divider{text-align:center;color:var(--text-muted);align-items:center;font-size:.65rem;font-weight:800;display:flex}.form-divider:before,.form-divider:after{content:"";border-bottom:1px solid var(--glass-border);flex:1}.form-divider span{padding:0 10px}.help-text{color:var(--text-muted);margin-top:2px;font-size:.65rem}.submit-btn{background:var(--accent-color);color:#fff;cursor:pointer;transition:var(--transition-smooth);border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:12px;font-size:.825rem;font-weight:700;display:flex}.submit-btn:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}.submit-btn:disabled{opacity:.7;cursor:not-allowed}.spinner-small{border:2px solid #fff3;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin}.manage-custom-section{border-top:1px solid var(--glass-border);flex-direction:column;gap:12px;padding-top:16px;display:flex}.manage-custom-header{justify-content:space-between;align-items:center;display:flex}.manage-custom-header h4{font-size:.85rem;font-weight:700}.clear-all-btn{color:#ef4444;cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;font-size:.72rem;font-weight:700;display:flex}.custom-channels-list{border:1px solid var(--glass-border);background:#00000026;border-radius:12px;flex-direction:column;gap:8px;max-height:200px;padding:8px;display:flex;overflow-y:auto}.custom-channel-item{background:#ffffff03;border-radius:8px;align-items:center;gap:10px;padding:8px;display:flex}.custom-channel-item .item-logo{object-fit:contain;border:1px solid var(--glass-border);background:#000;border-radius:6px;width:28px;height:28px}.custom-channel-item .item-details{flex-direction:column;flex:1;min-width:0;display:flex}.item-name{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;font-size:.78rem;font-weight:600;overflow:hidden}.item-meta{color:var(--text-muted);font-size:.65rem}.custom-channel-item .delete-btn{color:var(--text-muted);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;border-radius:6px;padding:6px}.custom-channel-item .delete-btn:hover{color:#ef4444;background:#ef44441a}.mobile-nav-bar{display:none}.hide-on-mobile{display:flex}@media (width<=1200px){.dashboard-grid{grid-template-columns:1fr}.channels-sidebar{max-height:500px}}@media (width<=768px){body{height:100vh;overflow:hidden}.app-container{flex-direction:column;gap:8px;height:100vh;padding:8px;display:flex;overflow:hidden}.app-header{flex-shrink:0;padding:6px 10px}.logo-section h1{font-size:1.25rem}.theme-selector{scale:.85}.dashboard-grid{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex;overflow:hidden}.left-panel{flex-shrink:0}.right-panel{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.hide-on-mobile{display:none!important}.channels-sidebar{border-radius:12px;flex-direction:column;flex:1;height:100%;min-height:0;max-height:none;display:flex;overflow:hidden}.channels-list{flex:1;overflow-y:auto}.volume-slider{display:none!important}}.quality-selector-container{display:inline-block;position:relative}.quality-btn{border:1px solid var(--glass-border);transition:var(--transition-smooth);background:#ffffff14;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:.75rem;font-weight:600;display:flex}.quality-btn:hover{background:#ffffff26;border-color:#ffffff4d}.quality-btn svg{transition:transform .3s}.quality-btn.active svg{transform:rotate(45deg)}.current-quality-label{color:var(--text-main);font-size:.75rem;font-weight:600}.quality-menu{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);z-index:100;background:#0f0c1cf2;border-radius:12px;width:140px;animation:.2s cubic-bezier(.16,1,.3,1) fadeInDown;position:absolute;bottom:calc(100% + 10px);right:0;overflow:hidden;box-shadow:0 10px 25px #0009}@keyframes fadeInDown{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.quality-menu-header{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #ffffff0f;padding:10px 12px;font-size:.7rem;font-weight:700}.quality-menu-list{flex-direction:column;padding:4px;display:flex}.quality-menu-item{color:var(--text-muted);text-align:left;cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:.75rem;font-weight:500;display:flex}.quality-menu-item:hover{color:var(--text-main);background:#ffffff14}.quality-menu-item.selected{color:var(--accent-color);background:#ffffff0d;font-weight:600}.quality-checkmark{font-size:.75rem;font-weight:700}
