*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Arial,Helvetica,sans-serif;background:#070707;color:#fff;overflow:hidden}.screen{height:100vh;display:grid;grid-template-rows:13vh 1fr 13vh;background:radial-gradient(circle at top right,#242424 0,#0b0b0b 45%,#020202 100%)}.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,255,255,.12)}.brand{font-size:3.2vw;font-weight:900;letter-spacing:.15em}.tagline{font-size:1.2vw;opacity:.75;margin-top:.4vh}.content{display:grid;grid-template-columns:1.7fr 1fr;gap:1.2vw;padding:1.2vw}.video-wrap,.ad-panel{border-radius:24px;overflow:hidden;position:relative;background:#111;box-shadow:0 12px 40px rgba(0,0,0,.45)}.video-wrap iframe{width:100%;height:100%;border:0}.ad-panel img{width:100%;height:100%;object-fit:cover;display:block}.ad-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.88) 100%)}.ad-overlay{position:absolute;z-index:2;right:2vw;left:2vw;bottom:2vw}.ad-overlay h1{font-size:2.4vw;margin:0 0 .5vw}.ad-overlay p{font-size:1.2vw;margin:0;opacity:.9}.ticker{display:grid;grid-template-columns:1fr 14vw;align-items:center;border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.55);backdrop-filter:blur(8px)}.ticker-text{white-space:nowrap;font-size:1.5vw;font-weight:700;padding:0 2vw;animation:slide 18s linear infinite}.qr-box{height:100%;display:flex;align-items:center;justify-content:center;gap:.8vw;border-right:1px solid rgba(255,255,255,.12);font-size:1vw}.qr-placeholder{width:4vw;height:4vw;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font-weight:900;border-radius:8px}@keyframes slide{0%{transform:translateX(45%)}100%{transform:translateX(-110%)}}.admin-link{position:fixed;left:12px;bottom:12px;z-index:20;color:#fff;text-decoration:none;font-size:22px;opacity:.18}.admin-page{overflow:auto;min-height:100vh;background:#101010;padding:30px}.admin-card{max-width:900px;margin:auto;background:#191919;padding:28px;border-radius:18px}.admin-card h1{margin-top:0}.admin-card label{display:block;margin:14px 0 6px}.admin-card input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #333;background:#0e0e0e;color:#fff}.ad-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin:8px 0}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.actions button,.button-link{padding:12px 16px;border:0;border-radius:10px;background:#333;color:#fff;text-decoration:none;cursor:pointer}.actions .primary{background:#fff;color:#000;font-weight:800}.remove-btn{background:#411!important}.note{opacity:.65;font-size:14px;margin-top:18px}@media(max-width:900px){.screen{grid-template-rows:11vh 1fr 12vh}.content{grid-template-columns:1fr 1fr}.brand{font-size:5vw}.tagline{font-size:2vw}.ad-overlay h1{font-size:3vw}.ad-overlay p{font-size:1.8vw}.ticker-text{font-size:2vw}.ad-row{grid-template-columns:1fr}.admin-page{padding:14px}}
.admin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px}.muted,.help{opacity:.68}.help{font-size:13px;margin:6px 0 12px}.settings-section{padding:18px 0;border-top:1px solid #2d2d2d}.settings-section:first-of-type{border-top:0}.inline-row{display:flex;gap:8px}.inline-row input{flex:1}.search-row{margin-bottom:8px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.inline-actions{display:flex;align-items:center;gap:12px;margin-top:12px}.status{font-size:14px;opacity:.82}.secondary{padding:11px 14px;border:1px solid #444;border-radius:10px;background:#252525;color:#fff;cursor:pointer}.primary{padding:11px 17px;border:0;border-radius:10px;background:#fff;color:#000;font-weight:800;cursor:pointer}.youtube-results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.youtube-card{display:flex;flex-direction:column;text-align:right;padding:0 0 10px;overflow:hidden;border:1px solid #333;border-radius:12px;background:#111;color:#fff;cursor:pointer}.youtube-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.youtube-card span{padding:8px 9px 3px;font-weight:700;line-height:1.3}.youtube-card small{padding:0 9px;opacity:.55}.youtube-card.chosen{outline:2px solid #fff}.selected-video{margin-top:12px}.selected-card{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #333;border-radius:12px;background:#111}.selected-card img{width:140px;border-radius:8px}.sticky-actions{position:sticky;bottom:0;background:#191919;padding:14px 0;border-top:1px solid #333}.big{font-size:16px}.admin-card input[type=password]{letter-spacing:.08em}@media(max-width:700px){.admin-head{flex-direction:column}.inline-row{flex-direction:column}.grid-2{grid-template-columns:1fr}.youtube-results{grid-template-columns:1fr 1fr}.selected-card img{width:110px}}


/* V2.3 — fixed TV layout: image dimensions can no longer resize the grid. */
.content{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);min-width:0;min-height:0;overflow:hidden}
.video-wrap,.ad-panel{min-width:0;min-height:0;width:100%;height:100%;isolation:isolate}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
.ad-panel img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;background:#090909;display:block}
.ad-panel:after{pointer-events:none}
.ad-overlay{pointer-events:none}
.youtube-hint{position:absolute;inset:auto 2vw 2vw 2vw;z-index:5;padding:12px 14px;border-radius:10px;background:rgba(0,0,0,.75);font-size:1vw}
@media(max-width:900px){.content{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}


/* V2.4 — larger premium ad window + clock + ticker clipped before QR */
.screen{grid-template-rows:14vh minmax(0,1fr) 12vh}
.hero{position:relative;padding:0 2vw}
.date-time{position:absolute;right:2vw;top:50%;transform:translateY(-50%);text-align:right;direction:ltr;font-variant-numeric:tabular-nums}
.tv-time{font-size:2.05vw;font-weight:900;letter-spacing:.04em;line-height:1}
.tv-date{margin-top:.45vh;font-size:.92vw;font-weight:700;opacity:.68;letter-spacing:.08em}
.content{grid-template-columns:minmax(0,1.23fr) minmax(0,1fr);gap:1.35vw;padding:1.35vw}
.ad-panel{border:2px solid rgba(255,255,255,.18);box-shadow:0 18px 55px rgba(0,0,0,.58),0 0 0 1px rgba(212,178,92,.24),inset 0 0 45px rgba(255,255,255,.03);background:linear-gradient(145deg,#17130b,#080808 45%,#101010)}
.ad-panel:before{content:"";position:absolute;z-index:3;inset:0;border-radius:22px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,215,128,.16),inset 0 -90px 90px rgba(0,0,0,.15)}
.ad-panel img{padding:.55vw;background:radial-gradient(circle at 50% 45%,#1d1b16 0,#0b0b0b 62%,#050505 100%)}
.ad-overlay{right:1.5vw;left:1.5vw;bottom:1.4vw;padding:1vw 1.15vw;border-radius:16px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.46));text-shadow:0 2px 12px rgba(0,0,0,.9)}
.ad-overlay h1{font-size:2.25vw;line-height:1.05;margin-bottom:.55vw}
.ad-overlay p{font-size:1.12vw;font-weight:700}
.ticker{grid-template-columns:minmax(0,1fr) 14vw;overflow:hidden}
.ticker-window{position:relative;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;min-width:0}
.ticker-window:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3vw;background:linear-gradient(90deg,rgba(0,0,0,.9),transparent);pointer-events:none;z-index:2}
.ticker-text{display:inline-block;width:max-content;max-width:none;padding:0 2vw;will-change:transform;animation:slideSafe 18s linear infinite}
@keyframes slideSafe{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.qr-box{position:relative;z-index:4;background:rgba(4,4,4,.96);box-shadow:-16px 0 24px rgba(0,0,0,.55)}
@media(max-width:900px){.screen{grid-template-rows:12vh minmax(0,1fr) 12vh}.content{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}.tv-time{font-size:3vw}.tv-date{font-size:1.45vw}}
/* V2.5 */
.brand-wrap{display:flex;align-items:center;justify-content:center;gap:22px}.brand-logo{height:auto;max-height:92px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}.ad-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#070707}.ad-panel{position:relative;overflow:hidden}.ad-overlay[hidden]{display:none}.logo-preview-wrap{min-height:90px;display:flex;align-items:center;justify-content:flex-start;padding:12px 0}.logo-preview{height:auto;max-height:120px;object-fit:contain}.drive-items-editor{display:grid;gap:14px;margin-top:18px}.drive-edit-card{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:14px;border:1px solid #333;border-radius:16px;background:#101010}.drive-thumb{position:relative;height:120px;border-radius:12px;overflow:hidden;background:#050505}.drive-thumb img{width:100%;height:100%;object-fit:cover}.video-badge{position:absolute;z-index:2;top:8px;right:8px;background:#000c;color:#fff;padding:5px 8px;border-radius:999px;font-size:12px}.drive-meta{display:grid;gap:8px}.drive-fileline{display:flex;gap:10px;align-items:center}.drive-fileline span{opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkline{display:flex!important;gap:8px;align-items:center}.checkline input{width:auto!important}.ticker-window{overflow:hidden;position:relative}.ticker-track{display:flex;align-items:center;width:max-content;will-change:transform;animation:tickerLoop 22s linear infinite;direction:ltr}.ticker-copy{display:inline-block;white-space:nowrap;padding:0 48px;font-weight:800;direction:rtl}@keyframes tickerLoop{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media(max-width:800px){.drive-edit-card{grid-template-columns:1fr}.drive-thumb{height:180px}}


/* V2.6 — editable QR CTA + seamless ticker + cinematic idle showcase */
.ticker-track{animation:tickerLoop var(--ticker-duration,22s) linear infinite}
@keyframes tickerLoop{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--ticker-shift, 600px)),0,0)}}
.ticker-copy{flex:0 0 auto}
.hero,.ticker,.video-wrap,.ad-panel{transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1),filter .8s cubic-bezier(.22,.61,.36,1),border-radius .8s cubic-bezier(.22,.61,.36,1),box-shadow .8s cubic-bezier(.22,.61,.36,1)}
.ad-panel{transform-origin:center center;will-change:transform}
.screen.idle-showcase .hero,.screen.idle-showcase .ticker{opacity:0;pointer-events:none}
.screen.idle-showcase .video-wrap{filter:brightness(.34) blur(1.5px);transform:scale(1.025)}
.screen.idle-showcase .ad-panel{position:fixed;z-index:80;inset:1.4vh 1.15vw;width:auto;height:auto;border-radius:28px;transform:none;box-shadow:0 30px 100px rgba(0,0,0,.76),0 0 0 1px rgba(255,220,140,.28),0 0 60px rgba(208,166,82,.16);background:#050505}
.screen.idle-showcase .ad-media{padding:.7vw;object-fit:contain;background:radial-gradient(circle at 50% 45%,#211d14 0,#090909 58%,#030303 100%)}
.screen.idle-showcase .ad-overlay{right:3.2vw;left:3.2vw;bottom:3.1vw;padding:1.4vw 1.7vw;background:linear-gradient(180deg,transparent,rgba(0,0,0,.64));border-radius:22px}
.screen.idle-showcase .ad-overlay h1{font-size:3.4vw}
.screen.idle-showcase .ad-overlay p{font-size:1.5vw}
.screen.idle-showcase .admin-link{opacity:0}
@media (prefers-reduced-motion:reduce){.hero,.ticker,.video-wrap,.ad-panel{transition-duration:.01ms!important}}


/* V2.7 — QR image/link + true single-message ticker */
.ticker-track{display:block;position:relative;width:max-content;animation:none;direction:ltr}
.ticker-copy{display:block;white-space:nowrap;padding:0 2vw;font-weight:800;direction:rtl;flex:none}
@keyframes tickerSingle{from{transform:translate3d(var(--ticker-start,100vw),0,0)}to{transform:translate3d(var(--ticker-end,-100%),0,0)}}
.ticker-window[hidden]{display:none!important}
.qr-box{min-width:14vw;padding:0 .8vw}
.qr-image{width:var(--qr-size,86px);height:var(--qr-size,86px);object-fit:contain;background:#fff;border-radius:10px;padding:4px;flex:0 0 auto}
.qr-placeholder{width:var(--qr-size,86px);height:var(--qr-size,86px)}
.qr-admin-preview-wrap{min-height:94px;display:flex;align-items:center;padding:10px 0}.qr-admin-preview{height:auto;max-width:180px;max-height:180px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
\n\n/* V2.8 — keep branding/footer visible in showcase, per-item text sizing, robust ticker */\n.ad-overlay h1{font-size:var(--ad-title-size,44px)!important}\n.ad-overlay p{font-size:var(--ad-text-size,24px)!important}\n.screen.idle-showcase .hero,.screen.idle-showcase .ticker{opacity:1;pointer-events:auto;position:relative;z-index:95}\n.screen.idle-showcase .content{position:relative;z-index:1}\n.screen.idle-showcase .video-wrap{filter:brightness(.28) blur(1.5px);transform:scale(1.02)}\n.screen.idle-showcase .ad-panel{position:fixed;z-index:80;top:calc(14vh + .75vw);right:1.15vw;bottom:calc(12vh + .75vw);left:1.15vw;width:auto;height:auto;border-radius:28px;transform:none;box-shadow:0 30px 100px rgba(0,0,0,.76),0 0 0 1px rgba(255,220,140,.28),0 0 60px rgba(208,166,82,.16);background:#050505}\n.screen.idle-showcase .ad-overlay h1{font-size:calc(var(--ad-title-size,44px) * 1.18)!important}\n.screen.idle-showcase .ad-overlay p{font-size:calc(var(--ad-text-size,24px) * 1.12)!important}\n.ticker-window{position:relative;overflow:hidden}\n.ticker-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;width:max-content;will-change:transform;animation:none;direction:ltr}\n.ticker-copy{display:block;white-space:nowrap;padding:0 .8vw;font-weight:800;direction:rtl;text-align:right;flex:none}\n@keyframes tickerSingle{from{transform:translate3d(var(--ticker-start,100vw),0,0)}to{transform:translate3d(var(--ticker-end,-100%),0,0)}}\n.qr-placeholder{display:none!important}\n.size-control{display:grid;grid-template-columns:150px minmax(180px,1fr);align-items:center;gap:12px;padding:2px 0 4px}.size-control label{margin:0}.size-control input[type=range]{padding:0}\n@media(max-width:900px){.screen.idle-showcase .ad-panel{top:calc(12vh + .7vw);bottom:calc(12vh + .7vw)}.size-control{grid-template-columns:1fr}}\n
/* V2.9 — idle showcase safe-area + exact ticker travel */
.screen.idle-showcase .ad-panel{
  top:calc(14vh + 1.35vw)!important;
  right:1.35vw!important;
  bottom:calc(12vh + 1.35vw)!important;
  left:1.35vw!important;
  overflow:hidden!important;
}
.screen.idle-showcase .ad-media{
  position:absolute!important;
  inset:.7vw!important;
  width:calc(100% - 1.4vw)!important;
  height:calc(100% - 1.4vw)!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  max-width:none!important;
  max-height:none!important;
}
.screen.idle-showcase .ad-panel:after,
.screen.idle-showcase .ad-panel:before{border-radius:26px}
.ticker-track{animation:none!important;transform:translate3d(0,0,0)}
@media(max-width:900px){
  .screen.idle-showcase .ad-panel{
    top:calc(12vh + 1.1vw)!important;
    bottom:calc(12vh + 1.1vw)!important;
  }
}

/* V3.0 — manual showcase inside the safe content area; header/footer always stay visible */
.showcase-toggle{
  position:absolute;top:14px;left:14px;z-index:12;border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:9px 14px;background:rgba(0,0,0,.58);color:#fff;font-weight:800;
  font-size:14px;cursor:pointer;backdrop-filter:blur(8px);box-shadow:0 7px 22px rgba(0,0,0,.32)
}
.showcase-toggle:hover{background:rgba(20,20,20,.82)}
.screen.manual-showcase .content{position:relative;display:block;overflow:hidden}
.screen.manual-showcase .video-wrap{position:absolute;inset:1.35vw;z-index:1;filter:brightness(.22) blur(1px);transform:scale(1.01);opacity:.75}
.screen.manual-showcase .ad-panel{
  position:absolute!important;z-index:20!important;inset:1.1vw!important;width:auto!important;height:auto!important;
  border-radius:28px!important;transform:none!important;margin:0!important;
  box-shadow:0 28px 90px rgba(0,0,0,.74),0 0 0 1px rgba(255,220,140,.22)!important;
}
.screen.manual-showcase .ad-media{object-fit:contain!important;padding:.6vw!important;background:#050505!important}
.screen.manual-showcase .ad-overlay{right:3vw;left:3vw;bottom:2.4vw}
.screen.manual-showcase .showcase-toggle{background:rgba(20,20,20,.82)}
.screen.manual-showcase .hero,.screen.manual-showcase .ticker{opacity:1!important;visibility:visible!important;pointer-events:auto!important;z-index:100!important}
/* Disable all legacy idle-showcase positioning so it can never cover header/footer. */
.screen.idle-showcase .hero,.screen.idle-showcase .ticker{opacity:1!important;pointer-events:auto!important;z-index:100!important}
.screen.idle-showcase .content{position:relative!important;display:block!important;overflow:hidden!important}
.screen.idle-showcase .video-wrap{position:absolute!important;inset:1.35vw!important;z-index:1!important;filter:brightness(.22) blur(1px)!important;transform:scale(1.01)!important;opacity:.75!important}
.screen.idle-showcase .ad-panel{
  position:absolute!important;z-index:20!important;inset:1.1vw!important;top:1.1vw!important;right:1.1vw!important;
  bottom:1.1vw!important;left:1.1vw!important;width:auto!important;height:auto!important;margin:0!important;border-radius:28px!important;
}
.screen.idle-showcase .ad-media{object-fit:contain!important;padding:.6vw!important}
/* Ticker is positioned exclusively by JS in V3.0. */
.ticker-window{overflow:hidden!important;position:relative!important}
.ticker-track{position:absolute!important;left:0!important;top:0!important;height:100%!important;display:flex!important;align-items:center!important;width:max-content!important;animation:none!important;will-change:transform!important}
.ticker-copy{display:block!important;white-space:nowrap!important;padding:0 .8vw!important;direction:rtl!important;font-weight:800!important;flex:none!important}


/* V3.1 — smooth media transitions + strict aspect-ratio preservation */
.admin-card select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #333;background:#0e0e0e;color:#fff}
.ad-panel{--ad-transition-ms:650ms}
.ad-panel .ad-media{transition:opacity var(--ad-transition-ms) cubic-bezier(.22,.61,.36,1),filter var(--ad-transition-ms) cubic-bezier(.22,.61,.36,1),transform var(--ad-transition-ms) cubic-bezier(.22,.61,.36,1);will-change:opacity,filter,transform;transform-origin:center center}
.ad-panel .ad-overlay{transition:opacity calc(var(--ad-transition-ms) * .72) ease,transform calc(var(--ad-transition-ms) * .72) ease}
.ad-panel.ad-switching[data-transition="fade"] .ad-media{opacity:0}
.ad-panel.ad-switching[data-transition="fade"] .ad-overlay{opacity:0;transform:translateY(8px)}
.ad-panel.ad-switching[data-transition="zoom"] .ad-media{opacity:0;transform:scale(1.035)}
.ad-panel.ad-switching[data-transition="zoom"] .ad-overlay{opacity:0;transform:translateY(8px)}
.ad-panel.ad-switching[data-transition="blur"] .ad-media{opacity:0;filter:blur(12px);transform:scale(1.015)}
.ad-panel.ad-switching[data-transition="blur"] .ad-overlay{opacity:0}
/* Never stretch or crop media, including enlarged/manual showcase mode. */
.ad-panel img.ad-media,.ad-panel video.ad-media,
.screen.manual-showcase .ad-panel img.ad-media,.screen.manual-showcase .ad-panel video.ad-media,
.screen.idle-showcase .ad-panel img.ad-media,.screen.idle-showcase .ad-panel video.ad-media{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;object-position:center center!important;aspect-ratio:auto!important;background:#050505!important;
}
.screen.manual-showcase .ad-panel .ad-media,.screen.idle-showcase .ad-panel .ad-media{padding:.6vw!important}
\n\n/* V3.2 — cinematic full-screen ad fill without stretching + preserve intentionally blank branding */
.ad-panel{isolation:isolate;overflow:hidden}
.ad-panel::before{content:"";position:absolute;inset:-4%;z-index:0;background-image:var(--ad-bg,none);background-size:cover;background-position:center;opacity:0;transform:scale(1.06);filter:blur(22px) brightness(.52) saturate(1.08);transition:opacity .45s ease}
.ad-panel .ad-media{position:relative;z-index:1}
.ad-panel .ad-overlay,.ad-panel .showcase-toggle{z-index:3}
.screen.manual-showcase .ad-panel::before,.screen.idle-showcase .ad-panel::before{opacity:1}
.screen.manual-showcase .ad-panel,.screen.idle-showcase .ad-panel{background:#080808!important}
.screen.manual-showcase .ad-panel .ad-media,.screen.idle-showcase .ad-panel .ad-media{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:center center!important;padding:0!important;background:transparent!important;z-index:1!important;
}
/* Keep the actual photo/video undistorted; the blurred cover layer fills unused side space. */

/* V3.3 — remove blurred background fill completely */
.ad-panel::before{display:none!important;content:none!important;background-image:none!important;filter:none!important;opacity:0!important}
.screen.manual-showcase .ad-panel,.screen.idle-showcase .ad-panel{background:#050505!important}
.screen.manual-showcase .ad-panel .ad-media,.screen.idle-showcase .ad-panel .ad-media{background:#050505!important}

/* V3.6 — one fixed 16:9 canvas in normal and enlarged modes. */
/* Design all Drive graphics at 1920x1080. They fill the ad canvas edge-to-edge. */
.ad-panel{
  aspect-ratio:16 / 9!important;
  height:auto!important;
  align-self:center!important;
  justify-self:stretch!important;
  background:#050505!important;
}
.ad-panel img.ad-media,.ad-panel video.ad-media{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  background:#050505!important;
}
/* Enlarged mode uses the exact same 16:9 ratio, only scaled up inside the safe content area. */
.screen.manual-showcase .ad-panel,.screen.idle-showcase .ad-panel{
  position:absolute!important;
  z-index:10!important;
  inset:50% auto auto 50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(calc(100% - 2.7vw), calc((100% - 2.7vh) * 16 / 9))!important;
  height:auto!important;
  aspect-ratio:16 / 9!important;
  max-width:calc(100% - 2.7vw)!important;
  max-height:calc(100% - 2.7vh)!important;
  border-radius:24px!important;
}
.screen.manual-showcase .ad-panel img.ad-media,.screen.manual-showcase .ad-panel video.ad-media,
.screen.idle-showcase .ad-panel img.ad-media,.screen.idle-showcase .ad-panel video.ad-media{
  object-fit:cover!important;
  padding:0!important;
}

/* V3.7 — advertising-screen proportions: large normal panel + tasteful 4:3 showcase. */
/* Normal view: give the ad more room instead of shrinking it to a 16:9 strip. */
.content{grid-template-columns:minmax(0,1.28fr) minmax(0,1.42fr)!important;gap:1.35vw!important}
.ad-panel{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  align-self:stretch!important;
  justify-self:stretch!important;
}
.ad-panel img.ad-media,.ad-panel video.ad-media{
  width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;padding:0!important;
}
/* Enlarged view: a classic 4:3 digital-advertising canvas, centered in the safe area. */
.screen.manual-showcase .ad-panel,.screen.idle-showcase .ad-panel{
  position:absolute!important;
  z-index:10!important;
  inset:50% auto auto 50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(calc(100% - 2.7vw), calc((100% - 2.7vh) * 4 / 3))!important;
  height:auto!important;
  aspect-ratio:4 / 3!important;
  max-width:calc(100% - 2.7vw)!important;
  max-height:calc(100% - 2.7vh)!important;
  border-radius:24px!important;
}
.screen.manual-showcase .ad-panel img.ad-media,.screen.manual-showcase .ad-panel video.ad-media,
.screen.idle-showcase .ad-panel img.ad-media,.screen.idle-showcase .ad-panel video.ad-media{
  object-fit:cover!important;object-position:center!important;padding:0!important;
}
@media(max-width:900px){.content{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important}}

/* V3.8 — Smart Fit: upload any photo; preserve it and present it cleanly. */
.ad-panel{background:linear-gradient(145deg,#161616 0%,#080808 55%,#111 100%)!important}
.ad-panel img.ad-media,.ad-panel video.ad-media{
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  padding:0!important;
}
/* Only images whose proportions are already very close to the available frame may fill it edge-to-edge. */
.ad-panel img.ad-media.smart-cover,.ad-panel video.ad-media.smart-cover{object-fit:cover!important}
/* Enlarged advertising view: less wide, more balanced, like a dedicated signage display. */
.screen.manual-showcase .ad-panel,.screen.idle-showcase .ad-panel{
  position:absolute!important;
  z-index:10!important;
  inset:50% auto auto 50%!important;
  transform:translate(-50%,-50%)!important;
  height:calc(100% - 2.2vh)!important;
  width:auto!important;
  aspect-ratio:5 / 4!important;
  max-height:calc(100% - 2.2vh)!important;
  max-width:calc(100% - 2.4vw)!important;
  border-radius:24px!important;
}
.screen.manual-showcase .ad-panel img.ad-media,.screen.manual-showcase .ad-panel video.ad-media,
.screen.idle-showcase .ad-panel img.ad-media,.screen.idle-showcase .ad-panel video.ad-media{
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  padding:0!important;
}
.screen.manual-showcase .ad-panel img.ad-media.smart-cover,.screen.manual-showcase .ad-panel video.ad-media.smart-cover,
.screen.idle-showcase .ad-panel img.ad-media.smart-cover,.screen.idle-showcase .ad-panel video.ad-media.smart-cover{object-fit:cover!important}

/* V3.9 — larger advertising canvas, compact chrome, blurred background only in showcase */
/* Give the advertising area more usable height by making the persistent top/bottom bars slimmer. */
.screen{
  grid-template-rows:9.5vh minmax(0,1fr) 9.5vh!important;
}
.hero{
  min-height:0!important;
  padding:.35vh 1.4vw!important;
}
.brand-wrap{gap:14px!important}
.brand{font-size:2.55vw!important;line-height:1!important}
.tagline{font-size:.95vw!important;margin-top:.25vh!important;line-height:1.05!important}
.brand-logo{max-height:7vh!important}
.date-time{right:1.35vw!important}
.tv-time{font-size:1.8vw!important;line-height:1!important}
.tv-date{font-size:.72vw!important;margin-top:.25vh!important}

.content{
  grid-template-columns:minmax(0,1.08fr) minmax(0,1.55fr)!important;
  gap:1vw!important;
  padding:.9vw!important;
  min-height:0!important;
}
.video-wrap,.ad-panel{border-radius:20px!important}

.ticker{
  grid-template-columns:minmax(0,1fr) 12.5vw!important;
  min-height:0!important;
}
.ticker-copy{font-size:1.25vw!important}
.qr-box{min-width:12.5vw!important;padding:0 .55vw!important;gap:.55vw!important;font-size:.82vw!important}
.qr-image{max-width:6.4vh!important;max-height:6.4vh!important;width:min(var(--qr-size,86px),6.4vh)!important;height:min(var(--qr-size,86px),6.4vh)!important;padding:2px!important;border-radius:8px!important}

/* Manual/automatic enlarged ad: blur and darken only what is behind the ad, never the ad itself. */
.screen.manual-showcase .content::before,
.screen.idle-showcase .content::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  background:rgba(0,0,0,.36);
  -webkit-backdrop-filter:blur(14px) brightness(.45);
  backdrop-filter:blur(14px) brightness(.45);
  pointer-events:none;
}
.screen.manual-showcase .video-wrap,
.screen.idle-showcase .video-wrap{
  filter:brightness(.34)!important;
  opacity:1!important;
}
.screen.manual-showcase .ad-panel,
.screen.idle-showcase .ad-panel{
  z-index:10!important;
  height:calc(100% - 1.1vh)!important;
  max-height:calc(100% - 1.1vh)!important;
  max-width:calc(100% - 1.2vw)!important;
  aspect-ratio:5 / 4!important;
  box-shadow:0 26px 80px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.12)!important;
}
/* Smart Fit remains in force: preserve proportions, never blur or stretch the actual media. */
.screen.manual-showcase .ad-panel img.ad-media,
.screen.manual-showcase .ad-panel video.ad-media,
.screen.idle-showcase .ad-panel img.ad-media,
.screen.idle-showcase .ad-panel video.ad-media{
  filter:none!important;
  object-position:center center!important;
}

@media(max-width:900px){
  .screen{grid-template-rows:9.5vh minmax(0,1fr) 9.5vh!important}
  .content{grid-template-columns:minmax(0,1fr) minmax(0,1.28fr)!important}
  .brand{font-size:4vw!important}.tagline{font-size:1.45vw!important}
  .tv-time{font-size:2.5vw!important}.tv-date{font-size:1.05vw!important}
  .ticker-copy{font-size:1.7vw!important}
  .qr-box{font-size:1.1vw!important}
}


/* V4.0 — rebalance normal/showcase ad sizes + ticker typography controls */
:root{--ticker-font-size:24px;--ticker-font-family:Arial,Helvetica,sans-serif}
/* Normal view: return some width to YouTube and make the ad panel a little smaller than V3.9. */
.screen:not(.manual-showcase):not(.idle-showcase) .content{grid-template-columns:minmax(0,1.28fr) minmax(0,1.38fr)!important;gap:1.15vw!important;padding:1.05vw!important}
.screen:not(.manual-showcase):not(.idle-showcase) .ad-panel{height:calc(100% - 2.6vh)!important;align-self:center!important}
/* Showcase: use more of the safe middle area while preserving header/footer. */
.screen.manual-showcase .ad-panel,.screen.idle-showcase .ad-panel{height:calc(100% - .35vh)!important;max-height:calc(100% - .35vh)!important;max-width:calc(100% - .45vw)!important}
.ticker-copy{font-size:var(--ticker-font-size)!important;font-family:var(--ticker-font-family)!important;line-height:1.1!important}
@media(max-width:900px){.screen:not(.manual-showcase):not(.idle-showcase) .content{grid-template-columns:minmax(0,1.12fr) minmax(0,1.18fr)!important}.ticker-copy{font-size:var(--ticker-font-size)!important}}

/* V4.1 — caption overlay pinned cleanly to the bottom of the media */
/* Remove the old panel-wide dark gradient that could appear through the middle of the image. */
.ad-panel:after{display:none!important;content:none!important;background:none!important}

/* Caption lives at the true bottom edge in both normal and enlarged modes. */
.ad-overlay{
  position:absolute!important;
  z-index:4!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  width:100%!important;
  margin:0!important;
  padding:clamp(34px,5.4vh,76px) clamp(18px,2vw,42px) clamp(14px,1.7vh,28px)!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 30%,rgba(0,0,0,.70) 72%,rgba(0,0,0,.88) 100%)!important;
  text-shadow:0 2px 10px rgba(0,0,0,.95)!important;
  pointer-events:none!important;
}
.ad-overlay[hidden]{display:none!important}
.ad-overlay h1,.ad-overlay p{position:relative;z-index:1}

/* Keep the same bottom-caption behavior while the ad is enlarged. */
.screen.manual-showcase .ad-overlay,
.screen.idle-showcase .ad-overlay{
  left:0!important;
  right:0!important;
  bottom:0!important;
  padding:clamp(42px,6.2vh,92px) clamp(24px,2.6vw,54px) clamp(17px,2vh,34px)!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.14) 28%,rgba(0,0,0,.68) 70%,rgba(0,0,0,.90) 100%)!important;
}

/* V5.0 — Firebase auth + multi-project admin */
.auth-gate{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#1a1a1a,#070707 68%);direction:rtl}
.auth-card{width:min(460px,94vw);background:#111;border:1px solid #2a2a2a;border-radius:24px;padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.45)}
.auth-card h1{margin:8px 0 6px}.auth-card input{width:100%;box-sizing:border-box;margin:7px 0 14px}.auth-logo{font-weight:900;letter-spacing:.08em;font-size:1.1rem}
.auth-card .big{width:100%;margin-top:6px}.cloud-project-section{border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}
.project-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.project-toolbar h2{margin-top:0}.project-link-row{margin-top:10px;direction:rtl}.project-link-row code{direction:ltr;display:inline-block;padding:4px 8px;border-radius:8px;background:#0c0c0c;border:1px solid #2b2b2b}
#cloudStatus.ok{color:#69d391}#cloudStatus.err,#loginStatus.err{color:#ff7d7d}
@media(max-width:760px){.project-toolbar{flex-direction:column}.project-toolbar #logoutBtn{align-self:flex-start}.cloud-project-section .grid-2{grid-template-columns:1fr!important}.cloud-project-section .inline-row{flex-wrap:wrap}.cloud-project-section .inline-row button{width:100%}}

/* V5.4 — ensure the login gate actually disappears after successful login */
[hidden]{display:none!important}
.auth-gate[hidden]{display:none!important}

/* V5.6 media upload */
.media-upload-box{margin:10px 0 22px;padding:16px;border:1px solid #343434;border-radius:14px;background:#111}.media-upload-box h3{margin:0 0 6px}.media-upload-box input[type=file]{padding:10px;border:1px dashed #444;background:#0c0c0c}.media-upload-box .status{font-weight:700}