:root{
  --bg:#071022;
  --card:#071726;
  --muted:#9aa4b2;
  --accent:#00c2ff;
  --online:#22c55e;
  --offline:#ef4444;
  --glass: rgba(255,255,255,0.04);
  --container:1120px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Page layout */
body.site-dark{background:linear-gradient(180deg,#02050a,var(--bg));color:#e7f1fb;margin:0;min-height:100vh}
.container{max-width:var(--container);margin:0 auto;padding:20px}

/* Navbar */
.navbar{position:fixed;top:0;left:0;right:0;backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.04);z-index:50;background:linear-gradient(180deg, rgba(8,12,18,0.65), rgba(8,12,18,0.45));padding:10px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-mark{width:44px;height:44px;border-radius:10px;object-fit:cover;box-shadow:0 6px 18px rgba(2,6,12,0.6)}
.brand-text h1{margin:0;font-size:16px;font-weight:800}
.tag{font-size:13px;color:var(--muted)}

/* modern nav links and CTA */
.nav-actions{display:flex;align-items:center;gap:16px}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:700;transition:all .18s}
.nav-link:hover{background:rgba(255,255,255,0.02);color:var(--accent);transform:translateY(-1px)}
.nav-cta .contact{--pad-x:14px;--pad-y:8px;background:linear-gradient(90deg,var(--accent),#7dd3fc);color:#041122;border-radius:10px;padding:var(--pad-y) var(--pad-x);font-weight:800;text-decoration:none;box-shadow:0 8px 24px rgba(0,194,255,0.12)}
.nav-cta .contact:hover{opacity:0.95;transform:translateY(-1px)}

/* Main content spacing to account for fixed navbar */
.site-main{padding-top:92px;padding-bottom:40px}

/* Hero */
.hero-card{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:22px;margin-bottom:18px;border:1px solid var(--glass)}
.hero-content h2{margin:0;font-size:20px}
.hero-sub{margin:6px 0 0;color:var(--muted)}

/* Grid & cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column}
.thumb{position:relative;height:160px;background:linear-gradient(135deg,#021827,#043a5a);display:flex;align-items:flex-end;padding:14px;overflow:hidden}
.thumb .banner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.18}
.thumb .logo{
  position:relative;
  z-index:2;
  width:80px;
  height:80px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:var(--accent);
  font-size:20px;
  overflow:hidden;
}
.thumb .logoImg{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  display:block;
}
.thumb .logoFallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:var(--accent);
  font-size:20px;
  text-transform:uppercase;
}
.liveBadge{position:absolute;left:14px;top:14px;background:var(--offline);color:white;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px}
.liveBadge.online{background:var(--online);box-shadow:0 10px 30px rgba(34,197,94,0.12)}
.cardBody{padding:14px;display:flex;flex-direction:column;gap:8px}
.titleRow{display:flex;justify-content:space-between;align-items:center}
.name{margin:0;font-size:16px}
.details{font-size:13px;color:var(--muted);font-weight:700}
.cardActions{display:flex;gap:8px;align-items:center;margin-top:6px}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:inherit;text-decoration:none;cursor:pointer;font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--accent),#7dd3fc);color:#041122;border:0}

/* Watch page */
.video-wrap{width:100%;height:calc(100vh - 120px);border-radius:10px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,0.03)}
.video-js{width:100% !important;height:100% !important}

/* Guide / Cable-style grid */
.guide-hero {
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  border-radius:10px;
  background:linear-gradient(90deg, rgba(0,0,0,0.35), rgba(255,255,255,0.02));
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,0.03);
}
.guide-row {
  display:flex;
  gap:12px;
  overflow:auto;
  padding-bottom:6px;
}
.channel-column {
  min-width:220px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
  overflow:hidden;
}
.channel-column .col-header {
  padding:10px;
  background:#041220;
  font-weight:800;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}
.program {
  padding:10px;
  border-top:1px solid rgba(255,255,255,0.02);
  display:flex;
  flex-direction:column;
  gap:6px;
  background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
}
.program .time { color:var(--muted); font-size:12px; font-weight:700; }
.program .title { font-weight:800; font-size:14px; color:#e7f1fb; }
.program .meta { font-size:12px; color:var(--muted); }

/* Responsive tweaks */
@media(max-width:640px){
  .nav-inner{gap:8px}
  .brand-text h1{font-size:14px}
  .nav-links{display:none} /* keep nav minimal on small screens */
  .nav-cta .contact{padding:8px 10px;font-size:14px}
  .site-main{padding-top:92px} /* preserve spacing for fixed navbar */
  .guide-row{gap:8px}
  .channel-column{min-width:180px}
}

/* utility hidden */
.hidden{display:none}