:root{--bg-color: #0f0f13;--sidebar-bg: #1a1a20;--accent-color: #3b82f6;--text-primary: #ffffff;--text-secondary: #a1a1aa;--card-bg: #27272a;--hover-bg: #3f3f46}body{margin:0;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-color:var(--bg-color);color:var(--text-primary)}*{box-sizing:border-box}.app-container{display:flex;height:100vh;overflow:hidden}.sidebar{width:250px;background-color:var(--sidebar-bg);border-right:1px solid #333;display:flex;flex-direction:column;padding:1rem}.sidebar-title{font-size:1.5rem;font-weight:700;margin-bottom:2rem;background:linear-gradient(to right,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.provider-list{display:flex;flex-direction:column;gap:.5rem}.provider-btn{background:transparent;border:none;color:var(--text-secondary);padding:.75rem 1rem;text-align:left;border-radius:.5rem;cursor:pointer;transition:all .2s ease;font-size:1rem;display:flex;align-items:center;gap:.75rem}.provider-btn:hover{background-color:var(--hover-bg);color:var(--text-primary)}.provider-btn.active{background-color:var(--accent-color);color:#fff;font-weight:500;box-shadow:0 4px 6px -1px #3b82f680}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.player-container{flex:1;background-color:#000;position:relative;display:flex;align-items:center;justify-content:center}.video-wrapper{width:100%;height:100%;border:none}.placeholder-container{text-align:center;color:var(--text-secondary)}.placeholder-icon{width:64px;height:64px;margin-bottom:1rem;opacity:.5}.channel-list-container{height:180px;background-color:var(--bg-color);border-top:1px solid #333;padding:1rem;overflow-x:auto}.channel-grid{display:flex;gap:1rem;padding-bottom:.5rem}.channel-card{min-width:160px;aspect-ratio:16/9;background-color:var(--card-bg);border-radius:.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border:2px solid transparent;transition:all .2s;position:relative;overflow:hidden}.channel-card:hover{transform:translateY(-2px);border-color:var(--text-secondary)}.channel-card.active{border-color:var(--accent-color);box-shadow:0 0 15px #3b82f64d}.channel-name{margin-top:.5rem;font-size:.9rem;font-weight:500;text-align:center;color:var(--text-primary)}.channel-preview{width:100%;height:100%;background:linear-gradient(45deg,#27272a,#3f3f46);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:#3f3f46;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#52525b}@media(max-width:768px){.app-container{flex-direction:column}.sidebar{width:100%;height:auto;flex-direction:row;align-items:center;padding:.5rem;overflow-x:auto;border-right:none;border-bottom:1px solid #333;flex-shrink:0}.sidebar-title{margin-bottom:0;margin-right:1rem;font-size:1.2rem;white-space:nowrap}.provider-list{flex-direction:row;gap:.5rem}.provider-btn{padding:.5rem .75rem;white-space:nowrap;font-size:.9rem;background-color:var(--card-bg)}.provider-btn.active{background-color:var(--accent-color)}.main-content{height:calc(100vh - 60px)}.player-container{flex:0 0 60vw;max-height:50vh}.channel-list-container{flex:1;height:auto;padding:.5rem}.channel-grid{flex-direction:column;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));padding-bottom:2rem}.channel-card{min-width:0;aspect-ratio:16/9}}@media(max-width:900px)and (orientation:landscape){.app-container{flex-direction:row}.sidebar{width:60px;flex-direction:column;padding:.5rem;border-bottom:none;border-right:1px solid #333;overflow-y:auto;overflow-x:hidden}.sidebar-title{display:none}.provider-list{flex-direction:column}.provider-btn span{display:none}.provider-btn{justify-content:center;padding:.75rem}.main-content{height:100vh}}