:root{
  --gold:#F2B705;
  --petrol:#1D6F73;
  --ivory:#F4EDD9;
  --carbon:#11141A;
  --slate:#2C3E46;
  --white:#ffffff;
  --safe-x:38px;
  --safe-y:30px;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000;font-family:Arial,Helvetica,sans-serif;color:var(--white)}
.broadcast-frame{position:relative;width:100vw;height:100vh;min-width:1280px;min-height:720px;background:var(--carbon)}
.video-zone{position:absolute;left:0;top:0;right:420px;bottom:56px;background:#050607;overflow:hidden}
.live-video{width:100%;height:100%;background:#050607}
.live-video video{width:100% !important;height:100% !important;object-fit:cover;background:#050607}
.video-zone::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.42),transparent 35%,rgba(0,0,0,.22));
}
.video-status{
  position:absolute;left:var(--safe-x);bottom:26px;background:rgba(17,20,26,.72);
  border-left:5px solid var(--gold);padding:10px 14px;color:var(--ivory);
  font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
}
.top-bug{
  position:absolute;left:var(--safe-x);top:var(--safe-y);width:390px;
  background:rgba(17,20,26,.74);border:1px solid rgba(244,237,217,.16);
  padding:10px 12px 8px 12px;backdrop-filter:blur(3px);
}
.brand-logo{display:block;width:310px;height:auto}
.brand-line{margin-top:3px;color:var(--gold);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:1.2px}
.right-panel{
  position:absolute;right:0;top:0;width:420px;bottom:56px;background:linear-gradient(180deg,#11141A,#080A0D);
  border-left:6px solid var(--petrol);box-shadow:-18px 0 70px rgba(0,0,0,.56);padding:24px 24px 18px 24px;
}
.right-panel::before{content:"";position:absolute;left:0;top:0;right:0;height:6px;background:var(--gold)}
.panel-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border-bottom:1px solid rgba(244,237,217,.18);padding-bottom:18px}
.panel-title{font-size:26px;font-weight:900;color:var(--ivory);letter-spacing:-.4px}
.panel-subtitle{font-size:13px;color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-top:3px}
.clock-box{text-align:right;min-width:112px}
.clock-time{font-size:22px;line-height:1;font-weight:900;color:var(--gold)}
.clock-date{font-size:11px;line-height:1.15;color:rgba(244,237,217,.78);text-transform:uppercase;margin-top:5px}
.news-box{padding-top:24px}
.news-category{display:inline-block;background:var(--gold);color:#000;padding:6px 10px;font-size:13px;font-weight:900;text-transform:uppercase;border-radius:2px}
.news-source{margin-top:15px;color:#49A3A8;font-size:15px;font-weight:900;text-transform:uppercase}
.news-title{font-size:29px;line-height:1.08;margin-top:13px;font-weight:900;color:#fff;letter-spacing:-.55px;min-height:190px}
.news-date{font-size:13px;color:rgba(244,237,217,.70);min-height:18px;margin-top:10px}
.qr-row{display:flex;align-items:center;gap:18px;margin-top:20px}
.qr-wrap{background:#fff;width:136px;height:136px;display:flex;align-items:center;justify-content:center;padding:6px;border:4px solid var(--ivory)}
#newsQR{width:120px;height:120px}
#newsQR img{width:120px;height:120px}
.qr-label{color:var(--gold);font-size:17px;line-height:1.05;font-weight:900;text-transform:uppercase}
.weather-box{background:rgba(29,111,115,.18);border:1px solid rgba(29,111,115,.35);border-radius:6px;padding:10px 14px;display:flex;align-items:center;gap:16px;margin-top:15px}
.weather-icon{font-size:32px;line-height:1}
.weather-temp{font-size:28px;font-weight:900;color:var(--ivory);line-height:1}
.weather-detail{font-size:11px;color:rgba(244,237,217,.70);line-height:1.4}
.weather-detail strong{color:var(--ivory);font-weight:700}
.info-grid{position:absolute;left:24px;right:24px;bottom:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-card{background:rgba(244,237,217,.08);border:1px solid rgba(244,237,217,.13);padding:10px 11px}
.info-card span{display:block;color:var(--gold);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.8px}
.info-card strong{display:block;color:var(--ivory);font-size:20px;line-height:1.05;margin-top:3px}
.ticker-bar{position:absolute;left:0;right:0;bottom:0;height:56px;background:var(--gold);color:#000;overflow:hidden;border-top:4px solid var(--petrol)}
.ticker-track{white-space:nowrap;display:inline-block;padding-left:100%;animation:tickerMove 1800s linear infinite;line-height:52px;font-size:22px;font-weight:900}
.ticker-item{margin-right:66px}
.fade-in{animation:fadeIn .45s ease-out}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes fadeIn{from{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}