:root{font-family:Inter,ui-sans-serif,system-ui;color:#eef7f8;background:#061827}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}header{height:76px;padding:0 clamp(18px,4vw,58px);display:flex;align-items:center;gap:12px;border-bottom:1px solid #173449;background:#071c2c}header div:last-child{display:grid}header span{font-size:11px;color:#7390a0}.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#286dce,#18b7a0);font-weight:900}main{display:grid;grid-template-columns:minmax(480px,1.4fr) minmax(380px,.8fr);min-height:calc(100vh - 76px)}.viewer{padding:clamp(20px,4vw,60px);background:radial-gradient(circle at 80% 0,#103e4b,#061827 45%)}.player{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#02080d;box-shadow:0 28px 70px #0007}.player video{width:100%;height:100%;background:#02080d}.player-status{position:absolute;inset:0;display:grid;place-content:center;gap:14px;padding:24px;text-align:center;color:#bdd0d8;background:linear-gradient(#02080da8,#02080de8);pointer-events:none}.player-status.error{color:#ffb1ba}.player-status button{justify-self:center;padding:9px 16px;border:1px solid #60d9c7;border-radius:10px;color:#05202c;background:#60d9c7;pointer-events:auto}.welcome{width:100%;aspect-ratio:16/9;border-radius:18px;background:#02080d;box-shadow:0 28px 70px #0007;display:grid;place-content:center;text-align:center}.welcome b{font-size:28px}.welcome span{margin-top:8px;color:#7390a0}.now{display:flex;align-items:center;justify-content:space-between;margin-top:22px}.now small{color:#60d9c7}.now h1{margin:4px 0}.now button,.filters button{border:1px solid #25465a;border-radius:10px;color:#bdd0d8;background:#0e2a3d;padding:9px 12px}.catalog{padding:24px;border-left:1px solid #173449;background:#091e2f;overflow:auto;max-height:calc(100vh - 76px)}.filters{display:flex;gap:7px;overflow:auto;padding-bottom:12px}.filters button{white-space:nowrap}.filters .active{color:#05202c;background:#60d9c7;border-color:#60d9c7}.catalog>input{width:100%;margin-bottom:15px;padding:12px;border:1px solid #25465a;border-radius:11px;color:#fff;background:#102c40}.channels{display:grid;gap:8px}.channel{display:grid;grid-template-columns:32px 44px 1fr 24px;gap:10px;align-items:center;width:100%;padding:10px;border:1px solid #17384d;border-radius:13px;color:#fff;text-align:left;background:#0d293c}.channel:hover,.channel.selected{border-color:#2ab8a3;background:#113449}.number{color:#668598}.mark{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;color:#60d9c7;background:#061827;font-weight:800}.mark img{max-width:100%;max-height:100%}.channel b,.channel small{display:block}.channel small{margin-top:4px;color:#7390a0}.channel i{color:#f6ca73;font-style:normal;font-size:20px}.error{color:#ff98a5}@media(max-width:900px){main{grid-template-columns:1fr}.catalog{max-height:none;border-left:0}.viewer{padding:16px}}.channel-copy{min-width:0}.epg{margin-top:20px;padding:20px;border:1px solid #25465a;border-radius:16px;background:#0b2637}.epg h2{font-size:17px;margin:0 0 18px}.epg h2 small{display:block;font-size:12px;color:#a5bdcb;font-weight:400;margin-top:5px}.epg-label{color:#60d9c7;font-size:12px}.epg-title{font-weight:650;font-size:18px;line-height:1.4;margin-top:5px;overflow-wrap:anywhere}.epg-time,.epg-empty{font-size:13px;color:#a5bdcb;margin-top:5px}.epg-track{height:4px;overflow:hidden;border-radius:4px;background:#29495a;margin-top:9px}.epg-track>div{height:100%;background:#60d9c7;border-radius:4px}.epg-next{margin-top:18px;padding-top:16px;border-top:1px solid #25465a}.epg-next .epg-label{color:#a5bdcb}.epg p{color:#bdd0d8;font-size:14px;line-height:1.5;margin-bottom:0}.epg.compact{border:0;padding:0;margin-top:7px;background:none}.compact .epg-title{font-size:13px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#dbe7ee}.compact .epg-time,.compact .epg-empty{font-size:11px}.compact .epg-track{height:3px}.channel-copy>b{overflow-wrap:anywhere}button:focus-visible,input:focus-visible{outline:2px solid #60d9c7;outline-offset:3px}@media(max-width:450px){.now{gap:12px;align-items:flex-start}.now h1{font-size:22px}.now button{font-size:12px}.catalog,.epg{padding:16px}}