:root { --silo-red: #b5121b; --silo-red-dark: #8f0e15; }

html, body { min-height: 100%; background: #080a0d; }
.viewer { min-height: 100dvh; background: #080a0d; }
.viewer-top { background: rgba(14, 17, 21, .96); backdrop-filter: blur(18px); }
.viewer-top .logo {
  border-radius: 12px;
  background: var(--silo-red);
  color: #fff;
  box-shadow: 0 10px 28px rgba(181, 18, 27, .28);
}
.viewer-top .brand b { letter-spacing: -.02em; }
.viewer-top .brand small { color: #f0646b; }
.matrix-state { color: #58d68d !important; }
.screen-empty span { background: var(--silo-red); color: #fff; }
.screen-empty b { letter-spacing: -.02em; }
.live-badge, #live-badge { background: var(--silo-red) !important; }
.program-card div, .epg-channel i, .channel-drawer [data-channel] > span { border-radius: 12px; }
.epg-tag { border: 0 !important; }

@media (max-width: 720px) {
  .viewer-top { padding-top: max(12px, env(safe-area-inset-top)); }
  .viewer-top .brand small { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}