*{box-sizing:border-box}body{margin:0;background:#000;color:#fff;font-family:system-ui,sans-serif;overflow:hidden}.app{height:100vh;display:flex;flex-direction:column}.header{position:relative;padding:10px;text-align:center;border-bottom:1px solid #111}.logo{margin:0;font-size:18px}.search{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:220px;padding:8px;border-radius:6px;border:none;background:#1a1a1a;color:#fff}.player-row{display:flex;align-items:center;justify-content:center;padding:8px 0;gap:8px}.ad-side{width:160px;height:90px;background:#0a0a0a;color:#444;display:flex;align-items:center;justify-content:center;font-size:12px;border:1px dashed #222}.player-wrap{position:relative;flex:1;max-width:900px}.player{width:100%;aspect-ratio:16 / 9;background:#000;border-radius:8px}.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#aaa}.filters{display:flex;justify-content:center;gap:12px;padding:10px}.filters select{width:180px;padding:8px;border-radius:6px;background:#1a1a1a;color:#fff;border:none}.channels-scroll{flex:1;overflow-y:auto}.channels{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.channel{background:#121212;border:none;color:#fff;padding:12px;border-radius:6px;cursor:pointer;text-align:left}.channel:hover{background:#1e1e1e}@media (max-width: 768px){.player-row{flex-direction:column}.ad-side{display:none}.search{width:150px}.filters{flex-direction:column}.filters select{width:90%}.channels{grid-template-columns:1fr}}