/* ============================================================
   BHADKO DIGITAL TV MEDIA — Fire-dark design system
   ============================================================ */
:root {
  /* BHADKO Cinematic Fire — brand palette (deep obsidian) */
  --bk-bg: #030305;            /* Obsidian Black — main background */
  --bk-bg-2: #08080C;          /* Charcoal Black — navbar/sidebar */
  --bk-surface: #0E0E15;       /* Dark Graphite — cards/modals */
  --bk-surface-2: #17171F;     /* Gunmetal — highlights/dropdowns */
  --bk-card: rgba(13,13,20,.78);
  --bk-border: #26262F;        /* card border */
  --bk-border-2: rgba(255,255,255,.07);
  --bk-text: #F4F4F6;          /* Cool White */
  --bk-muted: #9B9BA8;         /* Slate Grey */
  --bk-red: #E62916;           /* Flame Red — primary/LIVE/active */
  --bk-red-2: #B31407;         /* deep flame */
  --bk-orange: #FF5A1F;        /* Fire Orange — hover/highlights */
  --bk-amber: #FFB347;         /* Molten Gold — premium */
  --bk-grad: linear-gradient(90deg, #E62916, #FF5A1F);
  --bk-grad-soft: linear-gradient(135deg, rgba(230,41,22,.25), rgba(255,90,31,.14));
  --bk-glow: 0 0 24px rgba(230,41,22,.35);
  --bk-radius: 16px;
  --bk-radius-sm: 10px;
  --bk-font: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  --bk-font-disp: 'Poppins', 'Baloo 2', 'Inter', sans-serif;
  --bk-font-hi: 'Tiro Devanagari Hindi', serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bk-bg);
  color: var(--bk-text);
  font-family: var(--bk-font);
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: #030305;
}

::selection { background: var(--bk-red); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bk-bg-2); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--bk-red-2), var(--bk-orange)); border-radius: 8px; }

a { color: var(--bk-orange); text-decoration: none; }
a:hover { color: var(--bk-amber); }
.text-muted-2 { color: var(--bk-muted) !important; }
.font-disp { font-family: var(--bk-font-disp); }
.font-hi { font-family: var(--bk-font-hi); }
.grad-text {
  background: var(--bk-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}

/* ============ Buttons ============ */
.btn-bk {
  background: var(--bk-grad); color: #fff; border: 0;
  border-radius: 12px; padding: .6rem 1.4rem; font-weight: 600;
  box-shadow: 0 4px 18px rgba(230,41,22,.4);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s;
}
.btn-bk:hover, .btn-bk:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(230,41,22,.5); filter: brightness(1.08); }
.btn-bk:active { transform: translateY(0); }
.btn-ghost {
  background: rgba(255,255,255,.05); color: var(--bk-text);
  border: 1px solid var(--bk-border-2); border-radius: 12px; padding: .55rem 1.2rem;
  transition: all .18s ease;
}
.btn-ghost:hover { background: rgba(230,41,22,.14); border-color: var(--bk-border); color: #fff; }
.btn-ghost-danger { color: var(--bk-red); border-color: rgba(230,41,22,.4); }
.btn-ghost-danger:hover { background: rgba(230,41,22,.16); color: #fff; }
.btn-sm-bk { padding: .3rem .8rem; font-size: .82rem; border-radius: 9px; }

/* ============ Cards ============ */
.card-bk {
  background: var(--bk-card);
  border: 1px solid var(--bk-border-2);
  border-radius: var(--bk-radius);
  backdrop-filter: blur(10px);
  transition: transform .22s ease, border-color .22s, box-shadow .22s;
}
.card-bk:hover { border-color: var(--bk-border); box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.card-bk-pad { padding: 1.25rem; }
.card-title-bk { font-family: var(--bk-font-disp); font-weight: 700; font-size: 1.05rem; }

/* ============ Nav (viewer topbar) ============ */
.topbar {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(8,8,12,.8); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--bk-border-2);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  transition: background .3s, box-shadow .3s;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,90,31,.55) 30%, rgba(255,179,71,.55) 60%, transparent);
}
.topbar.scrolled { background: rgba(4,4,7,.94); box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.topbar .nav-link {
  color: var(--bk-muted); font-weight: 500; font-size: .92rem;
  padding: .5rem .85rem; border-radius: 10px; position: relative;
  transition: color .18s, transform .18s, background .18s;
}
.topbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); transform: translateY(-1px); }
.topbar .nav-link.active { color: #fff; }
.topbar .nav-link.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px;
  background: var(--bk-grad); border-radius: 3px 3px 0 0;
  box-shadow: 0 0 12px rgba(255,90,31,.7);
}
.brand-logo { display: flex; align-items: center; gap: .6rem; font-family: 'Space Grotesk', var(--bk-font-disp); font-weight: 700; font-size: 1.32rem; letter-spacing: -.015em; color: #fff; white-space: nowrap; }
.brand-logo:hover { color: #fff; }
.brand-word { letter-spacing: -.015em; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bk-grad); color: #fff; font-size: 1.12rem;
  box-shadow: 0 4px 18px rgba(230,41,22,.45), inset 0 1px 0 rgba(255,255,255,.28);
}
.brand-tag {
  display: inline-block; margin-left: .5rem; padding: .17rem .5rem .2rem; vertical-align: .16em;
  font-size: .56rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1.4;
  background: var(--bk-grad); color: #fff; border-radius: 6px;
  box-shadow: 0 3px 12px rgba(230,41,22,.4);
}
.brand-flame { font-size: 1.5rem; filter: drop-shadow(0 0 8px rgba(255,90,31,.7)); animation: flame-flick 2.6s ease-in-out infinite; display: inline-block; }
.brand-img { height: 34px; width: auto; max-width: 130px; object-fit: contain; }
@keyframes flame-flick { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }

.icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; color: var(--bk-muted); background: var(--bk-card);
  border: 1px solid var(--bk-border-2); transition: all .18s;
}
.icon-btn:hover { color: var(--bk-orange); border-color: var(--bk-orange); background: rgba(230,41,22,.12); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(230,41,22,.22); }
.menu-btn { color: #fff; font-size: 1.3rem; background: rgba(230,41,22,.16); border-color: rgba(255,90,31,.4); }
.menu-btn:hover { color: #fff; background: var(--bk-grad); border-color: transparent; box-shadow: 0 6px 20px rgba(230,41,22,.45); }
.badge-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--bk-red); box-shadow: 0 0 8px var(--bk-red); }

/* ============ Mobile nav drawer (Nistha-style) ============ */
.mobile-nav {
  position: fixed; top: 0; left: -320px; width: 300px; max-width: 86vw; height: 100dvh; z-index: 1050;
  background: var(--bk-bg-2); border-right: 1px solid var(--bk-border-2);
  overflow-y: auto; padding-bottom: 2rem; transition: left .3s ease;
}
.mobile-nav.open { left: 0; box-shadow: 30px 0 60px rgba(0,0,0,.55); }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: .95rem 1.1rem; border-bottom: 1px solid var(--bk-border-2); position: sticky; top: 0; background: var(--bk-bg-2); z-index: 2; }
.mn-user { display: flex; align-items: center; gap: .8rem; margin: .8rem .7rem 1rem; padding: .9rem 1rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(230,41,22,.16), rgba(255,123,0,.07)); border: 1px solid rgba(255,90,31,.28); }
.mn-user .mn-avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--bk-grad); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; color: #fff; flex-shrink: 0; box-shadow: var(--bk-glow); }
.mn-user .mn-uname { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.mn-user .mn-uemail { font-size: .72rem; color: var(--bk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.mobile-nav-close { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--bk-card); border: 1px solid var(--bk-border-2); color: var(--bk-text); font-size: 1.1rem; transition: all .2s; }
.mobile-nav-close:hover { border-color: var(--bk-orange); color: var(--bk-orange); }
.mn-link { display: flex; align-items: center; gap: .85rem; margin: .15rem .7rem; padding: .55rem .7rem; border-radius: 12px; color: var(--bk-text); font-size: .9rem; font-weight: 500; text-decoration: none; transition: all .2s; }
.mn-link i { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--bk-muted); background: rgba(255,255,255,.05); border: 1px solid transparent; transition: all .2s; flex-shrink: 0; }
.mn-link:hover { background: rgba(230,41,22,.1); color: var(--bk-orange); transform: translateX(3px); }
.mn-link.active { background: rgba(230,41,22,.14); color: var(--bk-orange); font-weight: 600; }
.mn-link:hover i, .mn-link.active i { color: var(--bk-orange); background: rgba(230,41,22,.15); border-color: rgba(255,90,31,.3); box-shadow: 0 4px 14px rgba(230,41,22,.25); }
.mn-sep { border-top: 1px solid var(--bk-border-2); margin: .7rem 1.2rem; }
.mn-label { margin: .8rem 1.2rem .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bk-muted-2); }
.mn-cta { display: flex; gap: .6rem; padding: .8rem 1.2rem 0; }
.mobile-nav-backdrop { position: fixed; inset: 0; z-index: 1045; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); display: none; }
.mobile-nav-backdrop.show { display: block; }

/* ============ Mobile bottom nav ============ */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  background: rgba(6,6,10,.95); backdrop-filter: blur(18px);
  border-top: 1px solid var(--bk-border-2);
  display: flex; justify-content: space-around; padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom));
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--bk-muted); font-size: .66rem; padding: .3rem .6rem; border-radius: 10px; }
.bottom-nav a i { font-size: 1.15rem; }
.bottom-nav a.active, .bottom-nav a:hover { color: var(--bk-orange); }

/* ============ Hero ============ */
.hero-wrap { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--bk-border); }
.hero-slide { position: relative; aspect-ratio: var(--hero-ar, 21/9); min-height: 200px; max-height: min(92vh, 820px); display: flex; align-items: flex-end;
  transition: opacity .55s ease; animation: heroIn .65s cubic-bezier(.22,.8,.3,1) both; }
.hero-slide.hero-leave { position: absolute; inset: 0; opacity: 0; }
@keyframes heroIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.hero-slide::before {
  content:''; position:absolute; inset:0;
  background: var(--hero-bg) center/cover no-repeat;
  filter: blur(36px) brightness(.5) saturate(1.15); transform: scale(1.15);
}
.hero-slide img.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1;
  animation: heroKen 6.5s ease-out both; }
@keyframes heroKen { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero-slide-link { position: absolute; inset: 0; z-index: 3; }
.hero-slide::after { content:''; position:absolute; inset:0; z-index:2; background: linear-gradient(180deg, rgba(3,3,5,0) 30%, rgba(3,3,5,.62) 82%, var(--bk-bg) 100%); }
.hero-content { position: relative; z-index: 4; padding: 2.2rem 2.4rem 3.1rem; max-width: 720px; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .9rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bk-amber); background: rgba(255,179,71,.1);
  border: 1px solid rgba(255,179,71,.32); border-radius: 50px; padding: .32rem .85rem;
  backdrop-filter: blur(6px);
}
.live-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bk-red); color: #fff; font-weight: 700; font-size: .72rem;
  letter-spacing: .08em; padding: .28rem .7rem; border-radius: 6px;
}
.live-chip::before { content:''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.hero-title {
  font-family: var(--bk-font-disp); font-weight: 800; margin-bottom: .55rem;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.015em;
  color: var(--bk-text); text-shadow: 0 6px 30px rgba(0,0,0,.7);
}
.hero-accent {
  background: linear-gradient(92deg, var(--bk-orange), var(--bk-amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(255,90,31,.45));
}
.hero-sub { color: rgba(245,241,234,.62); font-size: .95rem; letter-spacing: .04em; margin-bottom: 1.25rem; }
/* per-banner title style variants */
.ht-disp { font-family: var(--bk-font-disp); }
.ht-hi { font-family: var(--bk-font-hi); }
.ht-body { font-family: var(--bk-font); font-weight: 700; }
.ht-sm { font-size: clamp(1.4rem, 3vw, 2.2rem); }
.ht-md { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
.ht-lg { font-size: clamp(2.2rem, 5.4vw, 4rem); }
.ht-xl { font-size: clamp(2.6rem, 6.5vw, 5rem); }
.hero-btn { padding: .72rem 1.7rem; font-weight: 700; font-size: .95rem; box-shadow: 0 8px 26px rgba(230,41,22,.4); }
.hero-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(230,41,22,.55); color: #fff; }
.hero-btn-ghost { display: inline-flex; align-items: center; gap: .4rem; padding: .8rem 1.8rem; border-radius: 30px;
  font-weight: 600; font-size: .95rem; color: #fff; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); text-decoration: none; transition: all .2s; }
.hero-btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
/* category chips (nav-tab filter) */
.cat-chips { display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; padding: 1rem .1rem .4rem; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip { flex: 0 0 auto; padding: .5rem 1.15rem; border-radius: 50px; background: var(--bk-card);
  border: 1px solid var(--bk-border-2); color: var(--bk-muted); font-size: .85rem; font-weight: 600;
  text-decoration: none; transition: all .2s; white-space: nowrap; }
.cat-chip:hover { border-color: rgba(255,90,31,.55); color: var(--bk-orange); transform: translateY(-1px); }
.cat-chip.active { background: var(--bk-grad); border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px rgba(230,41,22,.4); }

/* quick-link tiles (Nistha-style) */
.quick-links { display: flex; gap: .85rem; overflow-x: auto; scrollbar-width: none; padding: 1.3rem .1rem .5rem; }
.quick-links::-webkit-scrollbar { display: none; }
.quick-link { flex: 0 0 auto; display: flex; align-items: center; gap: .7rem; padding: .65rem 1.15rem .65rem .7rem;
  background: linear-gradient(145deg, var(--bk-card), var(--bk-surface));
  border: 1px solid var(--bk-border-2); border-radius: 14px;
  color: var(--bk-text); font-size: .88rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.42);
  transition: all .22s; }
.quick-link:hover { border-color: rgba(255,90,31,.6); transform: translateY(-3px); color: var(--bk-orange);
  box-shadow: 0 16px 34px rgba(0,0,0,.5), 0 8px 24px rgba(230,41,22,.3); }
.quick-link i { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--bk-orange); background: rgba(230,41,22,.13); flex-shrink: 0; transition: all .22s; }
.quick-link:hover i { background: var(--bk-grad); color: #fff; box-shadow: 0 4px 14px rgba(230,41,22,.45); }
@media (max-width: 576px) {
  .hero-content { padding: 1.4rem 1.15rem 2.7rem; }
  .hero-title { font-size: clamp(1.55rem, 7.2vw, 2.1rem); }
  .hero-kicker { font-size: .6rem; letter-spacing: .16em; }
}
.hero-live { position: absolute; top: 14px; left: 14px; z-index: 5; }
.btn-pill { border-radius: 50px; }
.hero-next {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--bk-border-2);
  background: rgba(0,0,0,.45); color: #fff; font-size: 1.2rem; backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.hero-next:hover { background: var(--bk-red); border-color: var(--bk-red); }
.hero-dots button { width: 26px; height: 5px; border-radius: 4px; border: 0; background: rgba(255,255,255,.25); transition: all .25s; }
.hero-dots button.active { background: var(--bk-orange); width: 38px; }

/* ============ Content rails / cards ============ */
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 2.1rem 0 .9rem; }
.section-title { font-family: var(--bk-font-disp); font-weight: 700; font-size: 1.22rem; display: flex; align-items: center; gap: .6rem; }
.section-title::before { content:''; width: 4px; height: 22px; border-radius: 3px; background: var(--bk-grad); box-shadow: var(--bk-glow); }
.rail { display: flex; gap: 1rem; overflow-x: hidden; padding: .35rem .1rem 1rem; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 auto; }
/* Marquee — JS wraps overflowing items in .rail-track > .rail-group x2 for a seamless loop */
.rail-track { display: flex; width: max-content; }
.rail-group { display: flex; gap: 1rem; padding-right: 1rem; }
.rail-group > * { flex: 0 0 auto; }
@keyframes rail-marquee { to { transform: translateX(-50%); } }
.rail.is-marquee .rail-track { animation: rail-marquee var(--rail-dur, 40s) linear infinite; }
.rail.is-marquee:hover .rail-track, .rail.is-marquee:focus-within .rail-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .rail.is-marquee .rail-track { animation: none; } }

.ch-card { width: 168px; cursor: pointer; }
.ch-card .ch-thumb {
  position: relative; width: 168px; height: 168px; border-radius: 18px;
  overflow: hidden; border: 1px solid var(--bk-border-2);
  background: linear-gradient(145deg, #191920, #111117);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.42);
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.ch-card:hover .ch-thumb { transform: translateY(-5px); border-color: rgba(255,90,31,.6); box-shadow: 0 16px 34px rgba(0,0,0,.5), 0 8px 24px rgba(230,41,22,.32); }
.ch-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.ch-card:hover .ch-thumb img { transform: scale(1.06); }
.ch-thumb .live-tag { position: absolute; top: 10px; left: 10px; }
.ch-name { font-weight: 600; font-size: .86rem; margin-top: .55rem; }
.ch-meta { font-size: .72rem; color: var(--bk-muted); }

.v-card { width: 262px; cursor: pointer; }
.v-card .v-thumb {
  position: relative; width: 262px; height: 148px; border-radius: 14px;
  overflow: hidden; border: 1px solid var(--bk-border-2); background: var(--bk-surface);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.v-card:hover .v-thumb { transform: translateY(-5px); border-color: var(--bk-orange); box-shadow: 0 14px 30px rgba(230,41,22,.26); }
.v-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.v-card:hover .v-thumb img { transform: scale(1.07); }
.v-thumb .v-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10,5,7,.3); opacity: 0; transition: opacity .22s;
}
.v-card:hover .v-play { opacity: 1; }
.v-play i { font-size: 2.6rem; color: #fff; filter: drop-shadow(0 0 12px rgba(230,41,22,.9)); }
.v-thumb .v-dur { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.78); color: #fff; font-size: .68rem; font-weight: 600; padding: .15rem .5rem; border-radius: 6px; }
.v-thumb .progress-line { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--bk-grad); }
.v-title { font-weight: 600; font-size: .88rem; margin-top: .55rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v-meta { font-size: .72rem; color: var(--bk-muted); margin-top: 2px; }

.grid-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.grid-videos .v-card { width: auto; }
.grid-videos .v-thumb { width: 100%; height: auto; aspect-ratio: 16/9; }
.grid-ch { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.1rem; }
.grid-ch .ch-card, .grid-ch .ch-thumb { width: 100%; }
.grid-ch .ch-thumb { height: auto; aspect-ratio: 1; }

.cat-tile {
  position: relative; border-radius: var(--bk-radius); overflow: hidden;
  border: 1px solid var(--bk-border-2); height: 130px; display: flex; align-items: flex-end;
  transition: transform .2s, border-color .2s;
}
.cat-tile:hover { transform: translateY(-4px); border-color: var(--bk-orange); }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.cat-tile::after { content:''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.85)); }
.cat-tile .cat-label { position: relative; z-index: 2; padding: .8rem 1rem; font-family: var(--bk-font-disp); font-weight: 700; color: #fff; }

/* ============ Player ============ */
.player-shell { position: relative; background: #000; border-radius: var(--bk-radius); overflow: hidden; border: 1px solid var(--bk-border); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.player-shell video { width: 100%; aspect-ratio: 16/9; display: block; background: #000; }
.player-overlay-info { position: absolute; top: 12px; left: 12px; z-index: 5; }
.epg-bar { display: flex; gap: .7rem; overflow-x: auto; padding: .5rem 0; }
.epg-item { min-width: 210px; padding: .8rem 1rem; border-radius: var(--bk-radius-sm); background: var(--bk-card); border: 1px solid var(--bk-border-2); }
.epg-item.now { border-color: var(--bk-red); background: var(--bk-grad-soft); }
.epg-time { font-size: .74rem; color: var(--bk-orange); font-weight: 700; }
.epg-item.now .epg-time { color: #fff; }

/* ============ Shorts ============ */
.shorts-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 1rem; }
.short-tile { position: relative; aspect-ratio: 9/16; border-radius: var(--bk-radius); overflow: hidden; border: 1px solid var(--bk-border-2); cursor: pointer; }
.short-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.short-tile:hover img { transform: scale(1.06); }
.short-tile::after { content:''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.88)); }
.short-tile .s-info { position: absolute; bottom: 0; left: 0; right: 0; padding: .8rem; z-index: 2; font-size: .8rem; font-weight: 600; }
.short-tile .s-badge { position: absolute; top: 8px; right: 8px; z-index: 2; }

/* ============ Forms ============ */
.form-control, .form-select {
  background: rgba(255,255,255,.05); border: 1px solid var(--bk-border-2);
  color: var(--bk-text); border-radius: 11px; padding: .6rem .9rem;
}
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A9A19B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,.07); border-color: var(--bk-red);
  color: var(--bk-text); box-shadow: 0 0 0 .2rem rgba(230,41,22,.18);
}
.form-control::placeholder { color: #6B6B78; }
.form-select option { background: var(--bk-surface); color: var(--bk-text); }
.form-label { color: var(--bk-muted); font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.form-check-input { background-color: rgba(255,255,255,.08); border-color: var(--bk-border-2); }
.form-check-input:checked { background-color: var(--bk-red); border-color: var(--bk-red); }
.input-group-text { background: rgba(255,255,255,.06); border: 1px solid var(--bk-border-2); color: var(--bk-muted); }

/* ============ Tables ============ */
.table-bk { --bs-table-color: var(--bk-text); --bs-table-bg: transparent; --bs-table-border-color: rgba(255,255,255,.05); color: var(--bk-text); }
.table-bk > :not(caption) > * > * { color: var(--bk-text); }
.table-bk thead th { color: var(--bk-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; border-color: var(--bk-border-2); font-weight: 700; }
.table-bk td { border-color: rgba(255,255,255,.05); vertical-align: middle; }
.table-bk tbody tr { transition: background .15s; }
.table-bk tbody tr:hover { background: rgba(255,255,255,.03); }

/* ============ Badges ============ */
.badge-bk { font-size: .68rem; font-weight: 700; padding: .3rem .6rem; border-radius: 6px; }
.bg-soft-red { background: rgba(230,41,22,.16); color: #ff8f9a; }
.bg-soft-green { background: rgba(46,196,116,.16); color: #6fe3ac; }
.bg-soft-amber { background: rgba(255,179,71,.15); color: var(--bk-amber); }
.bg-soft-blue { background: rgba(76,159,255,.15); color: #8fc3ff; }
.bg-soft-grey { background: rgba(255,255,255,.08); color: var(--bk-muted); }
.bg-soft-orange { background: rgba(255,90,31,.16); color: #ffab5e; }
.bg-soft-purple { background: rgba(160,110,255,.16); color: #c1a3ff; }

/* ============ Panel layout (admin/partner/etc) ============ */
.panel-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 252px; flex: 0 0 252px; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040;
  background: rgba(6,6,10,.96); border-right: 1px solid var(--bk-border-2);
  padding: 1.1rem .8rem; overflow-y: auto; transition: transform .25s ease;
}
.sidebar .brand-logo { padding: .3rem .6rem 1.1rem; border-bottom: 1px solid var(--bk-border-2); margin-bottom: .9rem; font-size: 1.12rem; }
.side-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; color: var(--bk-muted); padding: .9rem .7rem .35rem; font-weight: 700; }
.side-link {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem;
  color: var(--bk-muted); border-radius: 10px; font-size: .88rem; font-weight: 500; margin-bottom: 2px;
  transition: all .16s;
}
.side-link i { font-size: 1rem; width: 20px; text-align: center; }
.side-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.side-link.active { color: #fff; background: var(--bk-grad); box-shadow: 0 4px 16px rgba(230,41,22,.35); }
.panel-main { flex: 1; margin-left: 252px; min-width: 0; }
.panel-top {
  position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.5rem; background: rgba(6,6,10,.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bk-border-2);
}
.panel-body { padding: 1.5rem; }
.sidebar-toggle { display: none; }
@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 30px 0 60px rgba(0,0,0,.5); }
  .panel-main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
}
.sidebar-backdrop { position: fixed; inset: 0; z-index: 1035; background: rgba(0,0,0,.5); display: none; }
.sidebar-backdrop.show { display: block; }

/* ============ Stat cards ============ */
.stat-card { position: relative; overflow: hidden; padding: 1.1rem 1.2rem; }
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; background: var(--bk-grad-soft); color: var(--bk-orange); margin-bottom: .8rem;
}
.stat-card .stat-num { font-family: var(--bk-font-disp); font-size: 1.7rem; font-weight: 800; line-height: 1; }
.stat-card .stat-lbl { font-size: .76rem; color: var(--bk-muted); margin-top: .35rem; }
.stat-card::after { content:''; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(230,41,22,.16), transparent 70%); }

/* ============ Auth pages ============ */
.auth-shell { min-height: 100vh; display: flex; }
.auth-visual {
  flex: 1.1; display: none; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #15151D, #030305 70%);
}
.auth-visual .flame-logo { font-size: clamp(4rem, 8vw, 7rem); font-family: var(--bk-font-disp); font-weight: 800;
  background: var(--bk-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(255,90,31,.4)); }
.auth-visual .tagline { font-family: var(--bk-font-hi); font-size: 1.3rem; color: var(--bk-amber); }
.auth-visual .glow-orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.auth-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1.2rem; }
.auth-card { width: 100%; max-width: 430px; }
@media (min-width: 992px) { .auth-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } }

.auth-input-icon { position: relative; }
.auth-input-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bk-muted); }
.auth-input-icon .form-control { padding-left: 2.6rem; }
.auth-input-icon > i.pw-eye { left: auto; right: 14px; cursor: pointer; }
.auth-input-icon:has(.pw-eye) .form-control { padding-right: 2.4rem; }

/* ============ Misc ============ */
.modal-content { background: var(--bk-surface); border: 1px solid var(--bk-border-2); border-radius: var(--bk-radius); color: var(--bk-text); }
.modal-header, .modal-footer { border-color: var(--bk-border-2); }
.dropdown-menu { background: var(--bk-surface-2); border: 1px solid var(--bk-border-2); }
.dropdown-item { color: var(--bk-text); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(230,41,22,.15); color: #fff; }
.toast-bk { background: var(--bk-surface-2); border: 1px solid var(--bk-border); color: var(--bk-text); }
.alert-bk-success { background: rgba(46,196,116,.12); border: 1px solid rgba(46,196,116,.3); color: #7fe7b4; border-radius: 12px; }
.alert-bk-danger { background: rgba(230,41,22,.12); border: 1px solid rgba(230,41,22,.3); color: #ff9aa5; border-radius: 12px; }
.alert-bk-info { background: rgba(76,159,255,.12); border: 1px solid rgba(76,159,255,.3); color: #9dcbff; border-radius: 12px; }
.alert-bk-amber { background: rgba(255,179,71,.12); border: 1px solid rgba(255,179,71,.3); color: var(--bk-amber); border-radius: 12px; }
.pagination .page-link { background: var(--bk-surface); border-color: var(--bk-border-2); color: var(--bk-muted); }
.pagination .page-item.active .page-link { background: var(--bk-grad); border-color: transparent; color: #fff; }
.pagination .page-link:hover { color: #fff; background: rgba(230,41,22,.18); }
.nav-pills-bk .nav-link { color: var(--bk-muted); border-radius: 10px; font-size: .85rem; font-weight: 600; padding: .45rem 1rem; }
.nav-pills-bk .nav-link.active { background: var(--bk-grad); color: #fff; }
.nav-pills-bk .nav-link:hover:not(.active) { color: #fff; background: rgba(255,255,255,.06); }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--bk-muted); }
.empty-state i { font-size: 3rem; opacity: .5; display: block; margin-bottom: 1rem; }
.search-hero { background: rgba(255,255,255,.05); border: 1px solid var(--bk-border-2); border-radius: 14px; }
.skeleton { border-radius: var(--bk-radius); background: linear-gradient(100deg, #0E0E15 40%, #17171F 50%, #0E0E15 60%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.fade-up { animation: fadeUp .5s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: fadeUp .5s ease both; }
.stagger > *:nth-child(1){animation-delay:.03s}.stagger > *:nth-child(2){animation-delay:.08s}
.stagger > *:nth-child(3){animation-delay:.13s}.stagger > *:nth-child(4){animation-delay:.18s}
.stagger > *:nth-child(5){animation-delay:.23s}.stagger > *:nth-child(6){animation-delay:.28s}
.stagger > *:nth-child(7){animation-delay:.33s}.stagger > *:nth-child(8){animation-delay:.38s}
.avatar-ring { border: 2px solid var(--bk-red); border-radius: 50%; }
.list-group-bk .list-group-item { background: transparent; border-color: rgba(255,255,255,.06); color: var(--bk-text); }
.accordion-button { background: var(--bk-card); color: var(--bk-text); box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: var(--bk-grad-soft); color: #fff; }
.accordion-item { background: transparent; border-color: var(--bk-border-2); }
.accordion-body { color: var(--bk-muted); }
.step-pill { display:flex; gap:.5rem; align-items:center; }
.step-dot { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; background:var(--bk-surface-2); border:1px solid var(--bk-border-2); }
.step-pill.done .step-dot { background: var(--bk-grad); border-color: transparent; color:#fff; }

footer.site-footer { border-top: 1px solid var(--bk-border-2); margin-top: 4rem; padding: 2.5rem 0 6rem; color: var(--bk-muted); font-size: .85rem; }
@media (min-width: 992px) { footer.site-footer { padding-bottom: 2.5rem; } }
@media (max-width: 991px) {
  .topbar .desktop-nav { display: none; }
  body.viewer-body { padding-bottom: 62px; }
}
@media (min-width: 992px) { .bottom-nav { display: none; } }

/* ============================================================
   PANEL — ERP dark polish (admin/partner/operator shells only)
   ============================================================ */
.panel-shell { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.panel-shell .panel-main {
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(230,41,22,.055), transparent 60%),
    var(--bk-bg);
}
.panel-shell .panel-body { padding: 1.4rem 1.6rem; }

/* --- sidebar --- */
.panel-shell .sidebar { background: #060609; border-right: 1px solid rgba(255,255,255,.055); }
.panel-shell .sidebar .brand-logo { font-size: 1.15rem; padding: .2rem .6rem 1.05rem; }
.panel-shell .side-label { font-size: .6rem; letter-spacing: .18em; color: #5C5C69; padding: 1rem .7rem .4rem; }
.panel-shell .side-link { position: relative; font-size: .86rem; border-radius: 9px; padding: .55rem .8rem; color: #8E8E9C; }
.panel-shell .side-link i { transition: color .16s; }
.panel-shell .side-link:hover { color: #EDEDF2; background: rgba(255,255,255,.045); transform: translateX(2px); }
.panel-shell .side-link.active {
  color: #FFB59E; background: rgba(230,41,22,.12); box-shadow: none; font-weight: 600;
}
.panel-shell .side-link.active::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px;
  border-radius: 3px; background: var(--bk-grad); box-shadow: 0 0 10px rgba(255,90,31,.6);
}
.panel-shell .side-link.active i { color: var(--bk-orange); }

/* --- topbar --- */
.panel-shell .panel-top { background: rgba(4,4,8,.9); border-bottom: 1px solid rgba(255,255,255,.055); }
.panel-shell .panel-top h5 { font-family: 'Space Grotesk', var(--bk-font-disp); font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; }

/* --- cards / tables / stats --- */
.panel-shell .card-bk {
  background: #0B0B12; border: 1px solid rgba(255,255,255,.06);
  border-radius: 13px; backdrop-filter: none;
}
.panel-shell .card-bk:hover { border-color: rgba(255,90,31,.26); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.panel-shell .card-title-bk, .panel-shell .stat-num { font-family: 'Space Grotesk', var(--bk-font-disp); letter-spacing: 0; }
.panel-shell .card-title-bk { font-weight: 600; font-size: 1rem; }
.panel-shell .table-bk thead th {
  background: rgba(255,255,255,.022); font-size: .65rem; letter-spacing: .1em;
  padding-top: .7rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.07);
}
.panel-shell .table-bk td { border-color: rgba(255,255,255,.04); }
.panel-shell .table-bk tbody tr:hover { background: rgba(255,90,31,.045); }
.panel-shell .stat-card .stat-lbl { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 600; }

/* --- controls --- */
.panel-shell .form-control, .panel-shell .form-select {
  background: rgba(255,255,255,.032); border-color: rgba(255,255,255,.075); border-radius: 9px;
}
.panel-shell .form-control:focus, .panel-shell .form-select:focus { background: rgba(255,255,255,.05); border-color: var(--bk-orange); }
.panel-shell .btn-ghost, .panel-shell .btn-bk { border-radius: 9px; }
.panel-shell .icon-btn { border-radius: 10px; background: #0B0B12; }
.panel-shell .modal-content { background: #101018; }
.panel-shell .dropdown-menu { background: #14141C; }
.panel-shell ::-webkit-scrollbar-thumb { background: #26262F; }
.panel-shell ::-webkit-scrollbar-thumb:hover { background: var(--bk-red-2); }

/* ============ Dashboard widgets ============ */
.panel-shell .dash-greet { font-family: 'Space Grotesk', var(--bk-font-disp); font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.panel-shell .health-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .95rem; border-radius: 50px; font-size: .74rem; font-weight: 600; }
.panel-shell .health-pill i { font-size: .72rem; }
.panel-shell .stat-hero { padding: 1.15rem 1.25rem; }
.panel-shell .stat-hero .stat-icon { width: 46px; height: 46px; font-size: 1.28rem; border-radius: 12px; margin-bottom: .95rem; }
.panel-shell .stat-hero .stat-num { font-size: 1.8rem; }
.panel-shell .kpi-sub { font-size: .7rem; color: var(--bk-muted); margin-top: .55rem; display: flex; align-items: center; gap: .35rem; }
.panel-shell .mini-stat {
  display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; height: 100%;
  border-radius: 12px; background: #0B0B12; border: 1px solid rgba(255,255,255,.06);
  transition: border-color .2s, transform .2s;
}
.panel-shell .mini-stat:hover { border-color: rgba(255,90,31,.3); transform: translateY(-2px); }
.panel-shell .mini-stat .ms-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .98rem; flex: 0 0 auto; }
.panel-shell .mini-stat .ms-num { font-family: 'Space Grotesk', var(--bk-font-disp); font-weight: 700; font-size: 1.02rem; line-height: 1.1; }
.panel-shell .mini-stat .ms-lbl { font-size: .64rem; color: var(--bk-muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-top: 2px; }
.panel-shell .list-row { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.045); }
.panel-shell .list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.panel-shell .partner-row { display: flex; align-items: center; gap: .9rem; padding: .85rem .4rem; border-bottom: 1px solid rgba(255,255,255,.045); border-radius: 10px; transition: background .15s; }
.panel-shell .partner-row:last-child { border-bottom: 0; }
.panel-shell .partner-row:hover { background: rgba(255,255,255,.022); }
.panel-shell .partner-avatar { width: 44px; height: 44px; border-radius: 13px; background: var(--bk-grad); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; color: #fff; flex-shrink: 0; box-shadow: var(--bk-glow); }
@media (max-width: 991px) { .panel-shell .partner-row { flex-wrap: wrap; } }
.panel-shell .rank-num { width: 20px; text-align: center; font-family: 'Space Grotesk', var(--bk-font-disp); font-weight: 700; font-size: .85rem; color: var(--bk-muted); flex: 0 0 auto; }
.panel-shell .rank-num.top { color: var(--bk-orange); }
.panel-shell .rank-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 6px; }
.panel-shell .rank-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--bk-grad); }
.panel-shell .act-item { position: relative; padding: 0 0 .95rem 1.05rem; margin-left: .35rem; border-left: 1px solid rgba(255,255,255,.07); }
.panel-shell .act-item:last-child { padding-bottom: .15rem; }
.panel-shell .act-item::before { content: ''; position: absolute; left: -4px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--bk-surface-2); border: 1px solid rgba(255,255,255,.22); }
.panel-shell .act-item.act-hot::before { background: var(--bk-red); border-color: var(--bk-red); box-shadow: 0 0 8px rgba(230,41,22,.7); }
.panel-shell .rev-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }

/* ============ Shared page pieces ============ */
.panel-shell .pg-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex: 0 0 auto; }
.panel-shell .pg-sub { font-size: .72rem; color: var(--bk-muted); }
.panel-shell .empty-mini { text-align: center; color: var(--bk-muted); padding: 1.8rem 1rem; font-size: .85rem; }
.panel-shell .empty-mini i { font-size: 1.6rem; opacity: .45; display: block; margin-bottom: .4rem; }
.panel-shell .filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.panel-shell .filter-bar .form-control { max-width: 250px; }
.panel-shell .filter-bar .form-select { width: auto; }