body{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#0d0a0b;color:#fff;min-height:100vh}.layout{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex:1;padding:20px 30px;gap:30px;overflow:hidden}.player-section{flex:1;display:flex;flex-direction:column}.player-wrapper{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:12px;overflow:hidden;border:1px solid transparent;box-shadow:0 4px 60px #e5091426}.player-wrapper>div{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important}.now-playing-badge{margin-top:20px;align-self:flex-start;background-color:#ef233c;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}.sidebar{width:380px;background-color:#121011;border-radius:12px;border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;padding:20px;overflow-y:auto}.sidebar-header h2{font-size:18px;margin:0 0 5px;font-weight:800;display:flex;align-items:center;gap:8px}.live-icon{color:#ef233c}.sidebar-header p{color:#666;font-size:12px;margin:0 0 20px}.search-box{display:flex;align-items:center;background:#1a1718;border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:10px 15px;margin-bottom:20px;gap:10px}.search-box input{background:transparent;border:none;color:#fff;outline:none;width:100%;font-family:inherit}.channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.channel-card{background:transparent;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:0;cursor:pointer;display:flex;flex-direction:column;color:#fff;transition:all .2s;overflow:hidden;height:120px}.channel-card:hover{background:#ffffff0d}.channel-card .channel-id{padding:6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}.channel-card .channel-name{font-size:12px;padding:6px;text-align:center;color:#888;border-bottom:1px solid transparent}.channel-logo-container{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;background:#fff;width:100%;box-sizing:border-box;overflow:hidden}.channel-logo{width:100%;height:100%;max-height:50px;object-fit:contain}.channel-card.active{border-color:#ef233c;box-shadow:0 0 10px #ef233c4d}.channel-card.active .channel-name{background:#ef233c;color:#fff}@media (max-width: 900px){.layout{height:auto}.main-content{flex-direction:column;padding:15px;overflow-y:auto}.sidebar{width:100%;box-sizing:border-box;flex:none;overflow-y:visible}.channel-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.player-wrapper{max-height:50vh}}