@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#080b13;--panel:#151923;--panel2:#202530;--text:#f7f8fb;--muted:#a7afbd;--green:#20e0ae;--red:#e52c48;--line:rgba(255,255,255,.1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.accent{color:var(--green)}.muted{color:var(--muted);font-size:.85rem}
.topbar{height:68px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 max(4vw,20px);background:rgba(12,16,26,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.1rem}.brand img{width:38px;height:38px;object-fit:cover;border-radius:10px}.desktop-nav{display:flex;gap:7px;padding:6px;background:#1b202b;border:1px solid var(--line);border-radius:30px}.desktop-nav a{padding:10px 14px;color:#c5cbd5;border-radius:24px;font-size:.88rem;font-weight:650}.desktop-nav a.active,.desktop-nav a:hover{background:#303b4a;color:white}.top-actions{display:flex;gap:15px;align-items:center;color:#d5d9e0}.icon-btn{border:0;background:none;color:white;font-size:1.6rem;cursor:pointer}
.hero{min-height:390px;position:relative;overflow:hidden;display:flex;align-items:center;padding:55px max(5vw,24px);background:radial-gradient(ellipse at 78% 30%,rgba(0,190,115,.3),transparent 45%),linear-gradient(115deg,#0d1920,#0c111c 55%,#10261f)}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,11,18,.98),rgba(7,11,18,.7) 52%,rgba(7,11,18,.2));z-index:1}.hero-shade{position:absolute;inset:0;background-image:radial-gradient(circle at 80% 50%,rgba(28,224,174,.12),transparent 35%)}.hero-content{position:relative;z-index:2;max-width:620px}.pills{display:flex;gap:8px;flex-wrap:wrap}.pills span{font-size:.68rem;font-weight:800;letter-spacing:.08em;border:1px solid #ffffff30;background:#ffffff12;padding:7px 10px;border-radius:20px}.hero h1{font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.04;margin:20px 0 12px;letter-spacing:-.05em}.hero p{color:#d0d6df;max-width:520px;line-height:1.65}.primary-btn{display:inline-flex;margin-top:16px;padding:13px 19px;border-radius:12px;background:var(--green);color:#042018;font-weight:850}.hero-mark{position:absolute;right:10%;top:50%;transform:translateY(-50%);width:min(280px,26vw);aspect-ratio:1;border-radius:50%;overflow:hidden;opacity:.16;filter:drop-shadow(0 0 40px #00e3a2)}.hero-mark img{width:100%;height:100%;object-fit:cover}
.section{padding:36px max(4vw,20px)}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}.eyebrow{font-size:.68rem;color:var(--green);font-weight:850;letter-spacing:.16em;margin:0 0 7px}.section h2{margin:0;font-size:1.7rem;letter-spacing:-.04em}.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}.searchbox{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:24px;padding:0 15px;min-width:240px}.searchbox span{font-size:1.3rem;color:var(--muted)}.searchbox input{background:transparent;border:0;outline:0;color:white;padding:12px 0;width:100%}.filters{display:flex;gap:8px;overflow:auto}.filter{white-space:nowrap;border:1px solid var(--line);background:var(--panel2);color:#d8dce4;border-radius:20px;padding:9px 14px;cursor:pointer;font-size:.8rem;font-weight:700}.filter.active{background:var(--green);color:#05251b;border-color:var(--green)}
.live-layout{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:16px;min-height:470px}.channel-panel,.player-panel{background:linear-gradient(145deg,#171c27,#10141d);border:1px solid var(--line);border-radius:18px;overflow:hidden}.panel-title{padding:17px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.panel-title h3{margin:0;font-size:1.05rem}.panel-title span{color:var(--green);font-weight:800}.channel-list{max-height:520px;overflow:auto;padding:8px}.channel-item{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:transparent;border:1px solid transparent;border-radius:12px;padding:10px;color:white;cursor:pointer}.channel-item:hover,.channel-item.selected{background:#ffffff0d;border-color:var(--green)}.channel-logo{width:48px;height:42px;flex:none;border-radius:9px;background:#252a35;display:grid;place-items:center;overflow:hidden;color:var(--green);font-weight:900}.channel-logo img{width:100%;height:100%;object-fit:contain;padding:4px}.channel-info{min-width:0;flex:1}.channel-info strong{display:block;font-size:.87rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-info small{display:block;color:var(--muted);margin-top:5px}.fav{border:0;background:none;color:#9299a6;font-size:1.2rem;cursor:pointer}.fav.on{color:#ff5c89}.empty{padding:22px;color:var(--muted);font-size:.9rem}
.player-top{display:flex;align-items:center;justify-content:space-between;padding:15px 18px}.live-dot{display:inline-block;width:8px;height:8px;background:#f3445c;border-radius:50%;margin-right:9px;box-shadow:0 0 10px #f3445c}.video-wrap{position:relative;background:#000;aspect-ratio:16/9;max-height:520px;display:grid;place-items:center}.video-wrap video{width:100%;height:100%;object-fit:contain;background:#000}.player-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle,#1c352f,#05070b 70%);color:#c1c8d2}.player-placeholder img{width:110px;height:110px;object-fit:cover;border-radius:20px;opacity:.85}.player-placeholder p{margin:0}.player-message{padding:14px 18px;color:var(--muted);font-size:.82rem;line-height:1.5}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding-top:0}.feature-card{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#19222b,#111620);border:1px solid var(--line);border-radius:16px;padding:22px}.feature-icon{width:48px;height:48px;border-radius:14px;background:#20e0ae1a;color:var(--green);display:grid;place-items:center;font-size:1.5rem;flex:none}.feature-card h2{font-size:1.2rem}.feature-card p:last-child{color:var(--muted);font-size:.82rem;line-height:1.5;margin-bottom:0}
footer{border-top:1px solid var(--line);padding:24px max(4vw,20px);display:flex;align-items:center;gap:20px;color:var(--muted);font-size:.78rem}.footer-brand{display:flex;align-items:center;gap:8px;color:white;font-weight:850}.footer-brand img{width:28px;height:28px;border-radius:7px;object-fit:cover}footer p{flex:1}.mobile-nav{display:none}
@media(max-width:900px){.desktop-nav a{padding:9px 10px}.desktop-nav a span{display:none}.hero-mark{right:4%}.feature-grid{grid-template-columns:1fr}.live-layout{grid-template-columns:1fr}.channel-list{max-height:290px}.player-panel{grid-row:1}.channel-panel{grid-row:2}}
@media(max-width:620px){.topbar{height:60px;padding:0 15px}.desktop-nav{display:none}.top-actions{gap:10px}.hero{min-height:340px;padding:38px 22px}.hero-mark{width:150px;right:-15px;top:65%;opacity:.11}.hero h1{font-size:2.65rem}.section{padding:28px 15px}.section-heading{align-items:start;gap:8px}.section-heading h2{font-size:1.45rem}.toolbar{display:block}.searchbox{width:100%;margin-bottom:10px}.filters{padding-bottom:5px}.live-layout{gap:12px}.video-wrap{aspect-ratio:16/9}.player-top{padding:12px}.player-message{font-size:.76rem}.feature-card{padding:17px}footer{padding:20px 15px 88px;display:block}footer p{line-height:1.5}.mobile-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:9px 5px calc(9px + env(safe-area-inset-bottom));background:rgba(12,16,26,.96);backdrop-filter:blur(15px);border-top:1px solid var(--line)}.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#c7ced9;font-size:1.1rem}.mobile-nav small{font-size:.62rem}.section#ao-vivo{padding-top:22px}}