:root{--primary:#00d7ef;--accent:#ffc857;--ink:#f4fbff;--muted:#91a8b3;--ticker-height:clamp(42px,4.2vw,78px);--transition-ms:500ms;--safe:rgba(255,255,255,.22)}
*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;background:#020304;color:var(--ink);font-family:Tajawal,"IBM Plex Sans Arabic",Arial,sans-serif;-webkit-tap-highlight-color:transparent}body{overflow-x:hidden}.channel-page-shell{width:100%;min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;padding:clamp(0px,1.5vw,20px);background:radial-gradient(900px 520px at 50% 0,rgba(0,215,239,.08),transparent 65%),#020304}.channel-broadcast-frame{position:relative;width:min(100%,1600px);display:flex;flex-direction:column;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.12);border-radius:clamp(0px,1.2vw,20px);box-shadow:0 30px 100px rgba(0,0,0,.75)}.channel-stage-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}.channel-stage{position:absolute;inset:0;background:#020508;color:#fff;overflow:hidden;isolation:isolate}.channel-content,.channel-scene,.channel-source-layout{position:absolute;inset:0}.channel-content{z-index:10}.channel-source-layout{display:grid;gap:2px;background:#000}.channel-source-layout.layout-FULL,.channel-source-layout.layout-HERO{grid-template-columns:1fr}.channel-source-layout.layout-SPLIT{grid-template-columns:1fr 1fr}.channel-source-layout.layout-TRIPLE{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}.channel-source-layout.layout-TRIPLE>.channel-source:first-child{grid-row:1/3}.channel-source-layout.layout-QUAD{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.channel-source-layout.layout-PIP{display:block}.channel-source-layout.layout-PIP>.channel-source:first-child{position:absolute;inset:0}.channel-source-layout.layout-PIP>.channel-source:nth-child(2){position:absolute;width:30%;height:34%;left:3%;bottom:4%;z-index:5;border:2px solid rgba(255,255,255,.82);box-shadow:0 18px 60px #000}.channel-source-layout.layout-VERTICAL{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.channel-source{position:relative;min-width:0;min-height:0;overflow:hidden;background:#000}.channel-source>video,.channel-source>img,.channel-source>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}.channel-source.cover>video,.channel-source.cover>img{object-fit:cover}.channel-source.contain>video,.channel-source.contain>img{object-fit:contain}.channel-source.fill>video,.channel-source.fill>img{object-fit:fill}.channel-source iframe{pointer-events:none}.channel-placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at center,#143348,#020508 70%);font-weight:900;font-size:clamp(12px,1.3vw,25px);color:#d8eaf1}.channel-placeholder small{display:block;margin-top:.5em;color:var(--muted);font-size:.65em}.source-label{position:absolute;z-index:20;left:1.2%;bottom:1.8%;max-width:70%;padding:.35em .75em;border-radius:999px;background:rgba(0,0,0,.66);border:1px solid rgba(255,255,255,.16);font-size:clamp(9px,.75vw,14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-scene{overflow:hidden}.channel-layer{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:pre-wrap}.channel-layer img,.channel-layer video,.channel-layer iframe{width:100%;height:100%;object-fit:cover;border:0}.channel-layer.ticker{justify-content:flex-start;white-space:nowrap}.channel-layer.ticker span{display:inline-block;min-width:100%;padding-inline-start:100%;animation:scrollTicker 28s linear infinite}.channel-overlay{position:absolute;z-index:500;pointer-events:none}.channel-logo{top:2.1%;right:2%;display:flex;align-items:center;gap:.7vw;padding:.55vw .8vw;border:1px solid rgba(255,255,255,.18);border-radius:.8vw;background:linear-gradient(135deg,rgba(3,10,15,.84),rgba(5,20,28,.68));box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(12px)}.channel-logo img{width:clamp(30px,3.8vw,72px);height:clamp(30px,3.8vw,72px);object-fit:contain}.channel-logo b{font-size:clamp(11px,1.25vw,24px);max-width:18vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-clock{top:2.2%;left:2%;font:900 clamp(12px,1.45vw,28px) ui-monospace,monospace;padding:.45vw .72vw;border-radius:.55vw;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(8px)}.channel-scoreboard{top:2.1%;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:minmax(7vw,1fr) auto minmax(7vw,1fr);align-items:center;min-width:30vw;max-width:70vw;border-radius:.65vw;overflow:visible;background:linear-gradient(180deg,rgba(7,17,24,.96),rgba(2,7,11,.94));border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 35px rgba(0,0,0,.55)}.score-team{padding:.55vw .85vw;font-size:clamp(10px,1.05vw,20px);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-team.away{text-align:left}.score-numbers{display:flex;align-items:center;gap:.6vw;padding:.4vw .8vw;background:linear-gradient(135deg,var(--primary),#2485ff);color:#001017;font:1000 clamp(16px,2vw,38px) ui-monospace,monospace}.score-meta{position:absolute;top:100%;left:50%;transform:translateX(-50%);display:flex;gap:.4vw;padding:.23vw .6vw;background:#020608;border-radius:0 0 .45vw .45vw;font-size:clamp(8px,.72vw,14px);white-space:nowrap}.channel-lower-third{right:3%;bottom:5%;min-width:26vw;max-width:55vw;padding:.75vw 1vw .65vw 1.4vw;border-right:.35vw solid var(--lower-accent,var(--primary));background:linear-gradient(90deg,rgba(3,11,16,.95),rgba(6,27,36,.78));box-shadow:0 15px 40px rgba(0,0,0,.5);clip-path:polygon(0 0,96% 0,100% 100%,4% 100%);backdrop-filter:blur(10px);animation:lowerIn .45s ease both}.channel-lower-third b{display:block;font-size:clamp(14px,1.65vw,32px)}.channel-lower-third span{font-size:clamp(9px,.9vw,17px);color:#b9d0d8}.channel-lower-third small{margin-inline-start:.5vw;color:var(--accent)}.channel-breaking{top:14%;left:0;padding:.7vw 1.5vw .7vw 2.3vw;max-width:80vw;background:linear-gradient(90deg,#e2223e,#921021);box-shadow:0 15px 40px rgba(0,0,0,.45);clip-path:polygon(0 0,96% 0,100% 50%,96% 100%,0 100%);font-size:clamp(12px,1.4vw,27px);font-weight:1000;animation:breakingIn .38s ease both}.channel-breaking em{font-style:normal;font-size:.65em;padding:.22em .5em;margin-inline-end:.6em;border-radius:.25em;background:#fff;color:#a40d25}.channel-sponsor{right:2%;bottom:4%;display:flex;align-items:center;gap:.6vw;padding:.45vw .7vw;border-radius:.55vw;background:rgba(0,0,0,.6);backdrop-filter:blur(9px);font-size:clamp(8px,.8vw,15px)}.channel-sponsor img{width:clamp(35px,4vw,76px);height:clamp(22px,2.5vw,48px);object-fit:contain}.channel-safe-area{inset:5%;border:1px dashed var(--safe);z-index:1000}.channel-safe-area:after{content:"SAFE";position:absolute;right:0;top:0;padding:.15vw .4vw;background:rgba(0,0,0,.55);font:700 9px ui-monospace,monospace;color:rgba(255,255,255,.5)}.channel-ticker-dock{position:relative;z-index:1200;width:100%;height:var(--ticker-height);flex:0 0 var(--ticker-height);background:#02080c;border-top:1px solid var(--primary);overflow:hidden}.channel-ticker{height:100%;display:flex;align-items:stretch;background:rgba(2,8,12,.98);overflow:hidden}.ticker-label{display:grid;place-items:center;padding:0 1.4vw;min-width:clamp(92px,11vw,180px);background:linear-gradient(135deg,#e92747,#a20e25);font-size:clamp(11px,1.15vw,22px);font-weight:1000;z-index:2;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}.ticker-track{flex:1;overflow:hidden;display:flex;align-items:center}.ticker-track span{display:inline-block;white-space:nowrap;padding-inline-start:100%;font-size:clamp(12px,1.4vw,27px);font-weight:900;animation:scrollTicker var(--ticker-duration,32s) linear infinite}.channel-badge-overlay{position:absolute;inset:0;z-index:1600;background:#000;display:grid;place-items:center;pointer-events:none;animation:badgeIn .2s ease both}.channel-badge-overlay img,.channel-badge-overlay video{width:100%;height:100%;background:#000}.channel-badge-overlay.fit-cover img,.channel-badge-overlay.fit-cover video{object-fit:cover}.channel-badge-overlay.fit-contain img,.channel-badge-overlay.fit-contain video{object-fit:contain}.channel-badge-overlay.fit-fill img,.channel-badge-overlay.fit-fill video{object-fit:fill}.channel-badge-label{position:absolute;right:2%;bottom:2%;padding:.35em .7em;border-radius:.4em;background:rgba(0,0,0,.55);font-size:clamp(8px,.65vw,12px);opacity:.45}.channel-viewer-shield{position:absolute;inset:0;z-index:1750;background:transparent;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:default}.channel-view-controls{position:absolute;z-index:1800;left:clamp(6px,1vw,14px);bottom:clamp(6px,1vw,14px);display:flex;align-items:center;gap:7px;pointer-events:auto}.channel-view-controls button{min-width:clamp(34px,3.2vw,52px);height:clamp(34px,3.2vw,52px);padding:0 10px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(0,0,0,.5);color:#fff;font-size:clamp(16px,1.5vw,25px);backdrop-filter:blur(8px);cursor:pointer}.channel-offline{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:1vw;background:radial-gradient(circle at 50% 40%,#15374a,#020406 68%)}.channel-offline .offline-mark{margin:auto;width:clamp(70px,10vw,180px);aspect-ratio:1;display:grid;place-items:center;border-radius:28%;background:linear-gradient(145deg,var(--primary),#306fff);color:#001018;font:1000 clamp(25px,4vw,72px) ui-monospace,monospace;box-shadow:0 0 80px rgba(0,215,239,.22)}.channel-offline b{font-size:clamp(25px,4.5vw,82px)}.channel-offline p{margin:0;color:#91a8b3;font-size:clamp(12px,1.4vw,26px)}.transitioning .channel-content{animation:channelFade var(--transition-ms) ease both}.control-mode .channel-safe-area,.encoder-mode .channel-safe-area{display:block}.embed-mode .source-label{display:none}.embed-mode .channel-page-shell,.control-mode .channel-page-shell,.encoder-mode .channel-page-shell{padding:0;min-height:100%;height:100%}.embed-mode .channel-broadcast-frame,.control-mode .channel-broadcast-frame,.encoder-mode .channel-broadcast-frame{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}.embed-mode .channel-stage-wrap,.control-mode .channel-stage-wrap,.encoder-mode .channel-stage-wrap{flex:1;min-height:0;aspect-ratio:auto}.tv-mode .channel-page-shell{padding:0;height:100dvh;min-height:100dvh}.tv-mode .channel-broadcast-frame{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}.tv-mode .channel-stage-wrap{flex:1;min-height:0;aspect-ratio:auto}.tv-mode #publicFullscreenBtn{display:none}@keyframes scrollTicker{to{transform:translateX(100%)}}@keyframes channelFade{from{opacity:.1;filter:blur(5px);transform:scale(1.015)}to{opacity:1;filter:none;transform:none}}@keyframes lowerIn{from{transform:translateX(110%);opacity:0}to{transform:none;opacity:1}}@keyframes breakingIn{from{transform:translateX(-105%);opacity:0}to{transform:none;opacity:1}}@keyframes badgeIn{from{opacity:0}to{opacity:1}}
@media(max-width:780px){.channel-page-shell{padding:0;min-height:auto}.channel-broadcast-frame{border-inline:0;border-radius:0}.channel-stage-wrap{aspect-ratio:16/9}.channel-logo b{display:none}.channel-scoreboard{min-width:72vw;max-width:88vw}.channel-lower-third{max-width:88vw;min-width:56vw;bottom:4%}.channel-source-layout.layout-SPLIT{grid-template-columns:1fr 1fr}.ticker-label{min-width:88px;padding:0 15px}.ticker-track span{font-size:clamp(11px,3.2vw,17px)}.channel-view-controls{bottom:5px;left:5px}}
@media(max-width:480px){:root{--ticker-height:42px}.channel-scoreboard{top:3%;grid-template-columns:minmax(24vw,1fr) auto minmax(24vw,1fr)}.score-team{font-size:9px;padding:5px}.score-numbers{font-size:16px;padding:4px 7px}.channel-breaking{top:18%;font-size:11px;max-width:92vw}.channel-lower-third{font-size:10px}.channel-clock{font-size:10px}.channel-logo{padding:4px}.channel-logo img{width:28px;height:28px}.ticker-label{min-width:78px;font-size:10px}.channel-view-controls button{width:34px;height:34px}}
@media(orientation:landscape) and (max-height:600px){.channel-page-shell{padding:0;height:100dvh;min-height:100dvh}.channel-broadcast-frame{width:100%;height:100%;border:0;border-radius:0}.channel-stage-wrap{flex:1;min-height:0;aspect-ratio:auto}.channel-view-controls{display:flex}}

.channel-view-controls .sound-button{width:auto;min-width:118px;font-size:clamp(10px,.85vw,14px);font-weight:900;white-space:nowrap}.control-mode .channel-view-controls,.encoder-mode .channel-view-controls{display:none}@media(max-width:480px){.channel-view-controls .sound-button{min-width:104px;padding:0 8px;font-size:10px}}


/* 7.1.4 — تشغيل مباشر مستمر وزر صوت لا يظهر إلا عند الحاجة. */
.channel-view-controls [hidden]{display:none!important}
.channel-view-controls .sound-button{min-width:0;width:auto;height:clamp(30px,2.8vw,44px);padding:0 clamp(9px,1vw,14px);border-radius:999px;font-size:clamp(9px,.75vw,13px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.channel-content video,.channel-content audio{visibility:visible!important;opacity:1!important}
@media(max-width:480px){.channel-view-controls .sound-button{min-width:0;width:auto;height:30px;padding:0 9px;font-size:9px}}

/* 8.2.9 clean selected-channel output */
.clean-mode .channel-ticker-dock{display:none!important}.clean-mode .channel-broadcast-frame{background:#000}.clean-mode .channel-page-shell{background:#000}.clean-mode .channel-stage-wrap{aspect-ratio:16/9}.clean-mode .channel-offline p:after{content:' · لا يوجد مصدر مرئي على الهواء';}

/* 1.1.0 — Channel identity metadata */
.channel-logo{display:flex;align-items:center;gap:12px;max-width:min(46vw,560px)}
.channel-logo>span{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.channel-logo>span b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-logo>span small{margin-top:5px;font-size:clamp(9px,.72vw,13px);font-weight:700;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-output-label{position:absolute;right:2.1%;bottom:13%;z-index:78;padding:.46em .85em;border:1px solid color-mix(in srgb,var(--primary) 55%,transparent);border-radius:999px;background:rgba(2,8,14,.72);backdrop-filter:blur(12px);font-size:clamp(10px,.72vw,14px);font-weight:900;letter-spacing:.02em;color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.3)}

/* 1.2.0 — six and nine source grids */
.channel-source-layout.layout-GRID6{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.channel-source-layout.layout-GRID9{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
@media(max-width:780px){.channel-source-layout.layout-GRID6,.channel-source-layout.layout-GRID9{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}}

/* 1.3.0 — Virtual Studio output */
.channel-source.fada-vs-active{position:relative!important;overflow:hidden;background:#000;isolation:isolate}
.channel-source.fada-vs-active>.fada-vs-background-source{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover;z-index:0;opacity:0;pointer-events:none}
.channel-source.fada-vs-active>.fada-vs-live-source{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:contain!important;z-index:1;opacity:0!important;pointer-events:none}
.channel-source.fada-vs-active>.fada-vs-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.channel-source.fada-vs-active>.source-label{z-index:4}
.channel-source.fada-vs-fallback>.fada-vs-background-source{opacity:1}
.channel-source.fada-vs-fallback>.fada-vs-live-source{opacity:1!important;z-index:2}
.channel-source.fada-vs-fallback>.fada-vs-canvas{display:none}

/* 1.3.2 — GPU virtual studio compositor */
.channel-source.fada-vs-active>.fada-vs-background-source{opacity:1!important;object-fit:cover;z-index:0}
.channel-source.fada-vs-active>.fada-vs-live-source{opacity:0!important;z-index:1}
.channel-source.fada-vs-active>.fada-vs-canvas{z-index:2;filter:drop-shadow(var(--fada-vs-shadow-x,8px) var(--fada-vs-shadow-y,14px) var(--fada-vs-shadow-blur,16px) rgba(0,0,0,var(--fada-vs-shadow-alpha,.25)))}
.channel-source.fada-vs-fallback>.fada-vs-live-source{opacity:1!important}

/* 1.3.2 — background always below the processed source */
.channel-source.fada-vs-active>[data-vs-layer="background"],.channel-source.fada-vs-active>.fada-vs-background-source{z-index:0!important;opacity:1!important}
.channel-source.fada-vs-active>[data-vs-layer="source"],.channel-source.fada-vs-active>.fada-vs-live-source{z-index:1!important}
.channel-source.fada-vs-active>[data-vs-layer="subject"],.channel-source.fada-vs-active>.fada-vs-canvas{z-index:3!important}