:root{
  --bg:#02040a;
  --panel:#070b13;
  --line:#1c2637;
  --text:#f7f9ff;
  --muted:#9da7bb;
  --accent:#ff2a6d;
  --accent2:#6b4cff;
  --top-h:58px;
  --foot-h:52px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow:hidden}
button{font:inherit}
.tv-shell{width:100vw;height:100vh;display:grid;grid-template-rows:var(--top-h) minmax(0,1fr) var(--foot-h);background:#000}
.tv-topbar,.tv-footer{background:rgba(3,6,12,.96);border-color:var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:16px;z-index:20}
.tv-topbar{border-bottom:1px solid var(--line)}
.tv-footer{border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.brand-block,.top-actions,.footer-controls{display:flex;align-items:center;gap:10px;min-width:0}
.brand-block strong{letter-spacing:.08em;white-space:nowrap}
.tagline{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px rgba(255,42,109,.65);flex:0 0 auto}
.clock{font-variant-numeric:tabular-nums;color:#dfe5f2;white-space:nowrap}
.top-btn,.footer-controls button{color:#eaf0ff;background:#111827;border:1px solid #2a3850;border-radius:10px;padding:8px 12px;cursor:pointer}
.top-btn:hover,.footer-controls button:hover{background:#192235}
.stage{position:relative;min-height:0;background:#000;overflow:hidden}
#tvFrame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;display:block}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(135deg,rgba(0,0,0,.88),rgba(8,12,24,.88));z-index:8;transition:opacity .25s ease}
.loading.hidden{opacity:0;pointer-events:none}
.loading small{display:block;color:var(--muted);margin-top:4px;max-width:70vw}
.spinner{width:34px;height:34px;border:3px solid #273249;border-top-color:var(--accent2);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lower-third{position:absolute;left:16px;right:16px;bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;z-index:10;pointer-events:none}
.program-info,.visit-box{background:rgba(4,7,13,.88);border:1px solid rgba(147,166,201,.25);backdrop-filter:blur(9px);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.program-info{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"now title" "now cat";column-gap:12px;align-items:center;max-width:min(900px,72vw);padding:12px 16px;border-radius:14px}
.now-label{grid-area:now;background:var(--accent);border-radius:999px;padding:7px 10px;font-size:11px;font-weight:700;letter-spacing:.08em}
.program-info strong{grid-area:title;font-size:clamp(18px,2vw,32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.program-info span:last-child{grid-area:cat;color:var(--muted);font-size:13px}
.visit-box{padding:10px 14px;border-radius:12px;text-align:right;max-width:30vw}
.visit-box span{display:block;font-size:10px;letter-spacing:.18em;color:var(--muted)}
.visit-box strong{font-size:13px;word-break:break-all}
.progress-track{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08);z-index:11}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .08s linear}
.safe-badge{position:absolute;top:14px;right:14px;z-index:10;background:rgba(0,0,0,.66);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 11px;font-size:10px;letter-spacing:.08em;color:#dbe6ff}

/* OBS: ocupa a tela inteira. A barra inferior continua como overlay de canal. */
html[data-obs="1"] .tv-shell{display:block;position:relative}
html[data-obs="1"] .tv-topbar,html[data-obs="1"] .tv-footer{display:none}
html[data-obs="1"] .stage{position:absolute;inset:0;width:100vw;height:100vh}
html[data-obs="1"] .lower-third{left:34px;right:34px;bottom:30px}
html[data-obs="1"] .progress-track{height:5px}
html[data-obs="1"] .safe-badge{display:block}
html[data-overlay="0"] .lower-third,html[data-overlay="0"] .progress-track,html[data-overlay="0"] .safe-badge{display:none!important}

@media (max-width:780px){
  :root{--top-h:54px;--foot-h:58px}
  .tagline{display:none}.brand-block strong{font-size:13px}.clock{display:none}
  .tv-topbar{padding:0 8px}.top-btn{padding:7px 9px;font-size:12px}
  .tv-footer{padding:0 8px}.footer-controls{gap:5px}.footer-controls button{padding:7px 8px;font-size:10px}
  .lower-third{left:8px;right:8px;bottom:12px;gap:8px}.program-info{padding:8px 10px;max-width:74vw}.visit-box{padding:8px 9px}.visit-box strong{font-size:10px}.program-info strong{font-size:16px}
}