:root{--blue:#1677ff;--cyan:#43c7ff;--navy:#071321;--panel:#071220ed;--line:#78b0e22e;--text:#f5f9ff;--muted:#8294a8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--text);background:#030a12;margin:0;font-family:Arial,Helvetica,sans-serif}button,a{font:inherit}.header{border-bottom:1px solid var(--line);z-index:5;background:#030912;justify-content:space-between;align-items:center;height:76px;padding:0 clamp(24px,6vw,110px);display:flex;position:relative}.brand{color:#fff;letter-spacing:-1px;align-items:center;gap:11px;font-size:25px;font-weight:950;text-decoration:none;display:flex}.brand strong{color:var(--cyan);margin-left:4px}.brand-play{background:linear-gradient(145deg,var(--cyan),#145cff);clip-path:polygon(0 0,100% 0,76% 50%,100% 100%,0 100%,22% 50%);place-items:center;width:42px;height:42px;font-size:21px;display:grid}.header nav{align-items:center;gap:25px;display:flex}.header nav a{color:#a5b5c7;align-items:center;gap:7px;font-size:13px;font-weight:800;text-decoration:none;display:flex}.header nav svg{width:17px}.header nav a:last-child{color:var(--cyan)}.hero{isolation:isolate;min-height:calc(100vh - 76px);padding:24px clamp(34px,8vw,150px) 58px;position:relative}.hero-photo{z-index:-2;background-image:linear-gradient(90deg,#0208101a,#020810c7 28%,#020810cc 72%,#0208101f),linear-gradient(#0007120d,#030a12 90%),url(/images/justin-tv-hero.png);background-position:top;background-size:cover;position:absolute;inset:0}.hero:after{content:"";z-index:-1;background:radial-gradient(circle at 50% 26%,#1677ff1f,#0000 42%);position:absolute;inset:0}.status-strip{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);color:#cde4ff;background:#051426d6;border:1px solid #3699ff4d;border-radius:8px;justify-content:center;align-items:center;gap:10px;max-width:1320px;min-height:48px;margin:0 auto 16px;padding:9px 18px;font-size:13px;font-weight:800;display:flex}.status-strip svg{width:17px;color:var(--cyan)}.status-strip b{color:var(--cyan);letter-spacing:.7px;background:#0a2d50;border-radius:4px;margin-left:8px;padding:5px 8px;font-size:9px}.workspace{grid-template-columns:minmax(0,1.72fr) minmax(360px,.78fr);align-items:start;gap:16px;width:min(1320px,100%);margin:auto;display:grid}.broadcast,.guide{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);min-width:0;box-shadow:0 25px 70px #00000073}.broadcast{border-radius:14px;padding:18px}.broadcast-head{justify-content:space-between;align-items:flex-end;margin-bottom:13px;display:flex}.eyebrow{color:var(--cyan);letter-spacing:1.4px;font-size:9px;font-weight:950}.broadcast h1{letter-spacing:-.8px;margin:5px 0 0;font-size:24px}.quality{color:#aacef4;border:1px solid #244668;border-radius:5px;padding:6px 9px;font-size:9px;font-weight:900}.source-tabs{gap:6px;margin-bottom:8px;display:flex;overflow:auto}.source-tabs button{color:#8da6bf;cursor:pointer;white-space:nowrap;background:#0a1928;border:1px solid #24405e;border-radius:5px;padding:7px 11px;font-size:10px;font-weight:800}.source-tabs button.active{background:var(--blue);border-color:var(--blue);color:#fff}.player-shell{aspect-ratio:16/9;background:radial-gradient(circle at 50% 45%,#0b3158,#04101c 58%,#01050a);border:1px solid #24517c;border-radius:8px;position:relative;overflow:hidden}.player-shell:after{content:"JUSTIN TV";color:#ffffff06;pointer-events:none;font-size:54px;font-weight:950;position:absolute;inset:auto 22px 20px auto}.player-shell video{z-index:1;object-fit:contain;background:#000;width:100%;height:100%;position:absolute;inset:0}.player-start{z-index:3;color:#fff;cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:center;gap:8px;width:max-content;height:max-content;margin:auto;display:flex;position:absolute;inset:0}.player-start span{background:linear-gradient(145deg,#2c9aff,#075cff);border-radius:24px;place-items:center;width:80px;height:80px;display:grid;box-shadow:0 0 50px #1677ff73}.player-start span svg{width:34px;height:34px}.player-start strong{margin-top:7px;font-size:18px}.player-start small{color:#7790aa}.reload{z-index:4;color:#a9c6e2;cursor:pointer;background:#040f1bcc;border:1px solid #2b4f72;border-radius:6px;place-items:center;width:37px;height:37px;display:grid;position:absolute;top:14px;right:14px}.reload svg,.controls svg{width:17px}.player-error{z-index:5;color:#b9cee3;background:#081727;border-radius:5px;padding:8px 12px;font-size:12px;position:absolute;bottom:62px;left:50%;transform:translate(-50%)}.controls{z-index:5;border-bottom:3px solid var(--blue);background:linear-gradient(#0000,#00050cfa);align-items:center;gap:7px;min-height:48px;padding:5px 12px;display:flex;position:absolute;bottom:0;left:0;right:0}.controls button{color:#fff;background:0 0;border:0;place-items:center;padding:7px;display:grid}.controls .live{color:var(--cyan);align-items:center;gap:6px;margin-left:auto;font-size:9px;font-weight:950;display:flex}.controls .live i,.channel-list small i,.now-playing i{background:#26cfff;border-radius:50%;width:6px;height:6px;display:inline-block;box-shadow:0 0 9px #26cfff}.now-playing{background:#071524;border:1px solid #1d3852;border-radius:7px;align-items:center;gap:12px;min-height:58px;margin-top:9px;padding:8px 13px;display:flex}.now-playing>span{color:#718ca7;align-items:center;gap:6px;font-size:9px;font-weight:900;display:flex}.now-playing strong{font-size:13px}.now-playing button{color:var(--cyan);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;margin-left:auto;font-size:11px;font-weight:800;display:flex}.now-playing button svg{width:15px}.guide{border-radius:10px;overflow:hidden}.guide-tabs{border-bottom:1px solid var(--line);background:#07111d;grid-template-columns:1fr 1fr;gap:5px;padding:10px;display:grid}.guide-tabs button{color:#73859a;cursor:pointer;background:0 0;border:0;border-radius:6px;justify-content:center;align-items:center;gap:7px;min-height:43px;font-size:12px;font-weight:900;display:flex}.guide-tabs button svg{width:16px}.guide-tabs button.active{color:#fff;background:#11345a}.match-list,.channel-list{scrollbar-width:thin;scrollbar-color:var(--blue)#081420;height:548px;overflow-y:auto}.date-divider{z-index:4;color:#d7eaff;text-transform:uppercase;letter-spacing:.5px;background:#0b1c2d;border-bottom:1px solid #24415e;margin:0;padding:8px 12px;font-size:9px;font-weight:950;position:sticky;top:0}.date-divider small{color:var(--cyan)}.match{color:#fff;cursor:pointer;background:#081522;border:0;border-bottom:1px solid #172e44;grid-template-columns:minmax(0,1fr) 98px minmax(0,1fr);align-items:center;gap:5px;width:100%;min-height:73px;padding:8px 10px;display:grid}.match:hover{background:#0d2033}.match.featured{box-shadow:inset 3px 0 var(--cyan);background:#0a1c2d}.club{text-align:left;align-items:center;gap:7px;min-width:0;display:flex}.club.away{text-align:right;justify-content:flex-end}.club b{text-overflow:ellipsis;font-size:11px;line-height:1.12;overflow:hidden}.team-mark{object-fit:contain;flex:0 0 29px;width:29px;height:29px}.team-mark.fallback{color:#6fcfff;background:#143b61;border-radius:8px;place-items:center;font-size:11px;font-weight:950;display:grid}.kickoff{flex-direction:column;align-items:center;gap:5px;min-width:0;display:flex}.kickoff strong{color:var(--cyan);font-size:17px}.kickoff small{text-overflow:ellipsis;white-space:nowrap;color:#718399;text-align:center;width:100%;font-size:8px;overflow:hidden}.empty{text-align:center;color:var(--muted);padding:30px;font-size:12px}.channel-list{align-content:start;gap:6px;padding:8px;display:grid}.channel-list button{color:#fff;text-align:left;cursor:pointer;background:#091827;border:1px solid #1e3851;border-radius:7px;grid-template-columns:42px 1fr auto;align-items:center;gap:9px;min-height:58px;padding:8px 11px;display:grid}.channel-list button:hover,.channel-list button.selected{background:#102a43;border-color:#278cff}.channel-icon{color:#7fcaff;background:#113c66;border-radius:9px;place-items:center;width:38px;height:38px;font-size:9px;font-weight:950;display:grid}.channel-list strong{font-size:12px}.channel-list small{color:#5fbfff;align-items:center;gap:5px;font-size:8px;font-weight:900;display:flex}@media (max-width:1050px){.hero{padding-inline:24px}.workspace{grid-template-columns:minmax(0,1.35fr) minmax(330px,.75fr)}}@media (max-width:820px){.header{height:66px;padding:0 14px}.brand{font-size:20px}.brand-play{width:36px;height:36px}.header nav a:first-child{display:none}.header nav a{font-size:12px}.hero{background:#030a12;min-height:calc(100vh - 66px);padding:10px 9px 35px}.hero-photo{display:none}.status-strip{min-height:42px;margin-bottom:9px;padding:7px 10px;font-size:10px}.status-strip b{display:none}.workspace{grid-template-columns:1fr;gap:9px}.broadcast{border-radius:9px;padding:10px}.broadcast h1{font-size:18px}.broadcast-head{margin-bottom:9px}.player-shell{border-radius:6px}.player-start span{border-radius:18px;width:62px;height:62px}.player-start strong{font-size:14px}.now-playing{min-height:52px}.guide{border-radius:8px}.match-list,.channel-list{height:510px}.match{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);min-height:68px}.team-mark{flex-basis:26px;width:26px;height:26px}.club b{font-size:10px}}
.filters{background:#07111d;border-bottom:1px solid #1d3852;grid-template-columns:minmax(0,1fr) 125px;gap:6px;padding:8px;display:grid}.filters label{background:#0a1928;border:1px solid #24405e;border-radius:5px;align-items:center;gap:6px;padding:0 9px;display:flex}.filters svg{color:#43c7ff;width:14px}.filters input,.filters select,.filters select{color:#dceeff;background:0 0;border:0;outline:0;width:100%;min-width:0;height:34px;font-size:10px}.filters select{color:#a9c7e4;background:#0a1928;border:1px solid #24405e;border-radius:5px;padding:0 7px}.team-logo,.team-logo-fallback{object-fit:contain;flex:0 0 29px;width:29px;height:29px}.team-logo-fallback{color:#6fcfff;background:#143b61;border-radius:8px;place-items:center;font-size:11px;font-weight:950;display:grid}.channel-icon img{object-fit:contain;max-width:36px;max-height:28px}.player-shell:fullscreen{aspect-ratio:auto;background:#000;border:0;border-radius:0;width:100vw;height:100vh}.player-shell:fullscreen video{width:100%;height:100%}@media (max-width:520px){.filters{grid-template-columns:1fr}.team-logo,.team-logo-fallback{flex-basis:26px;width:26px;height:26px}}
.hero{padding-inline:clamp(60px,12vw,240px)}.hero-photo{height:min(900px,42.85vw);inset:0 0 auto}.watch-main{min-width:0}.brand-logo{object-fit:contain;width:auto;height:54px;display:block}.player-shell video.video-pending{opacity:0}.video-idle-overlay{z-index:2;background:radial-gradient(circle at 50% 54%,#102b48 0,#071421 40%,#02070d 76%);place-items:center;display:grid;position:absolute;inset:0}.video-idle-overlay .player-start{gap:16px;margin:0;position:static}.video-idle-overlay .player-start span{border:3px solid var(--cyan);width:86px;height:86px;box-shadow:none;filter:drop-shadow(0 0 24px #43c7ff6b);background:0 0;border-radius:50%;transition:transform .2s}.video-idle-overlay .player-start:hover span{transform:scale(1.07)}.video-idle-overlay .player-start span svg{width:34px;height:34px;fill:var(--cyan);color:var(--cyan);margin-left:5px}.video-idle-overlay .player-start strong{letter-spacing:1px;margin:0;font-size:clamp(20px,2vw,29px)}.seo-panel{background:#071524;border:1px solid #1d3852;border-radius:7px;margin:10px 0 0}.seo-panel summary{color:#9ab0c8;cursor:pointer;padding:13px 15px;font-size:12px;font-weight:800}.seo-content{color:#9eb0c3;padding:2px 15px 16px;font-size:13px;line-height:1.65}.seo-content h1,.seo-content h2,.seo-content h3,.seo-content h4,.seo-content h5,.seo-content h6{color:#edf6ff;margin:16px 0 5px;font-size:17px}.seo-content p{margin:0}.seo-links{flex-wrap:wrap;gap:8px 14px;margin-top:18px;display:flex}.seo-links a{color:var(--cyan);font-size:12px;text-decoration:none}.seo-links a:hover{text-decoration:underline}@media (max-width:1050px){.hero{padding-inline:36px}}@media (max-width:820px){.hero{padding-inline:9px}.workspace{flex-direction:column;display:flex}.watch-main{display:contents}.broadcast{order:1}.guide{order:2;width:100%}.seo-panel{order:3;width:100%}.brand-logo{height:43px}.video-idle-overlay .player-start{gap:11px}.video-idle-overlay .player-start span{width:66px;height:66px}.video-idle-overlay .player-start strong{font-size:18px}}