/* ============================================================
   xGoalZ fixes.css — Loaded LAST, highest priority
   Fixes: footer position, nav font, scrolling, buttons
   ============================================================ */

/* ── 1. ROOT SIZING TOKENS ───────────────────────────────── */
:root {
  --sidebar-w:    250px;
  --topbar-h:     68px;
  --page-pad:     24px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    18px;
  --grid-gap:     16px;
}

/* ── 2. APP SHELL LAYOUT ─────────────────────────────────── */

/* The outermost flex row: sidebar + main */
body {
  display: flex;
  min-height: 100vh;
  background: #111;
  overflow: hidden; /* body itself does NOT scroll */
}

.sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--sidebar-w) !important;
  height: 100vh !important;
  padding: 14px 10px !important;
  background: #000 !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 200 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* main-content is the scrollable viewport */
.main-content {
  position: fixed !important;
  top: 0 !important;
  left: var(--sidebar-w) !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #111 !important;
  margin-left: 0 !important; /* reset any margin since we use fixed+left */
}

/* Topbar stays at top, doesn't scroll */
.topbar {
  flex: 0 0 var(--topbar-h) !important;
  height: var(--topbar-h) !important;
  min-height: var(--topbar-h) !important;
  max-height: var(--topbar-h) !important;
  padding: 0 24px !important;
  background: #0a0a0a !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 100 !important;
}

/* ── 3. VIEW CONTAINERS — fill remaining height, scroll ───── */

/*
 * Every view sits in the area below topbar.
 * JS sets display:flex / display:none via inline styles.
 * We must not override display — only control height/overflow.
 */
#view-home,
#view-stream,
#view-category,
#view-channels,
#view-dynamic-category,
#view-admin {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

/* ── 4. HOME VIEW LAYOUT ─────────────────────────────────── */

#view-home {
  flex-direction: column !important;
  background: #111 !important;
}

/* Banner */
#view-home .home-live-banner {
  display: block !important;
  width: min(684px, calc(100% - 48px)) !important;
  height: 78px !important;
  max-height: 120px !important;
  margin: 18px auto 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

#view-home .home-live-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Tagline */
.home-banner-intro {
  text-align: center !important;
  padding: 10px 24px 0 !important;
  flex-shrink: 0 !important;
}

/* Main content area */
#view-home .home-layout {
  padding: 0 24px 32px !important;
  width: 100% !important;
  display: block !important;
}

/* ── 5. FOOTER — always at bottom of home scroll ─────────── */

/*
 * The footer is inside #view-home (flex column, overflow-y:auto).
 * It will naturally scroll into view at the bottom.
 * We must NOT use margin-top:auto here because it breaks flex column
 * with block children — instead we use a spacer approach via
 * padding on the home-layout above, and just let the footer be static.
 */
#view-home .site-footer,
.homepage-view > .site-footer,
#main-content > .site-footer {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  padding: 32px 32px 28px !important;
  background: #0a0a0a !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  gap: 24px !important;
  position: static !important;
  transform: none !important;
  inset: auto !important;
  margin-top: 40px !important;
}

.footer-top {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 32px !important;
  align-items: start !important;
}

.footer-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.footer-logo-animated {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: inherit !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.footer-logo-animated .brand-icon-wrap {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(229,9,20,0.5) !important;
}

.footer-logo-animated .brand-img-anim {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.footer-logo-animated .brand-text-anim {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.footer-logo-animated .brand-name-anim {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #f5f5f5 !important;
  line-height: 1 !important;
}

.footer-logo-animated .brand-sub-anim {
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  color: #E50914 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.footer-brand-desc {
  font-size: 11px !important;
  color: #6a7280 !important;
  line-height: 1.55 !important;
  max-width: 280px !important;
}

.footer-links-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 110px !important;
}

.footer-links-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #4a5568 !important;
}

.footer-links-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.footer-links-list a {
  font-size: 12px !important;
  color: #9ca3af !important;
  text-decoration: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: color 0.2s !important;
}

.footer-links-list a:hover { color: #e5e7eb !important; }

.footer-telegram-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(229,9,20,0.4) !important;
  color: #fff !important;
  background: rgba(229,9,20,0.10) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.footer-telegram-btn:hover {
  background: rgba(229,9,20,0.2) !important;
}

.footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.footer-copyright {
  font-size: 11px !important;
  color: #4a5568 !important;
}

.footer-live-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #E50914 !important;
}

/* ── 6. NAV ITEMS — font/size fixes ──────────────────────── */

.sidebar .nav-item {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  text-decoration: none !important;
}

/* The text label inside nav-item (not the badge) */
.sidebar .nav-item > span:not(.nav-badge) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.sidebar .nav-icon,
.sidebar .nav-icon-img {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
}

.sidebar .nav-badge {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  min-width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  text-align: center !important;
  background: #E50914 !important;
  color: #fff !important;
}

/* Sidebar nav gap between items */
.sidebar-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* ── 7. SIDEBAR BRAND ────────────────────────────────────── */

.sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 8px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  margin-bottom: 8px !important;
  flex-shrink: 0 !important;
}

/* ── 8. SIDEBAR FOOTER ───────────────────────────────────── */

.sidebar-footer {
  margin-top: auto !important;
  padding: 14px !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  flex-shrink: 0 !important;
}

/* ── 9. MATCH CARDS — buttons must be clickable ──────────── */

.match-card {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
}

.card-watch-btn {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: none !important;
  transition: opacity 0.2s, transform 0.15s !important;
}

.card-watch-btn:hover {
  opacity: 0.85 !important;
  transform: translateY(-1px) !important;
}

/* Card icon */
.card-watch-icon {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── 10. MATCH GRID ──────────────────────────────────────── */

.matches-list,
.matches-grid {
  display: grid !important;
  gap: 14px !important;
}

/* Home page uses 3-col grid */
#view-home .matches-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Category/stream views use 3-col */
#view-category .matches-list,
#view-channels .matches-grid,
#view-dynamic-category .matches-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* ── 11. DATE TABS ───────────────────────────────────────── */

.date-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.date-nav::-webkit-scrollbar { display: none !important; }

.date-tab {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #8a8a8a !important;
  transition: all 0.18s !important;
}

.date-tab:hover:not(.active) {
  background: rgba(255,255,255,0.07) !important;
  color: #d4d4d4 !important;
}

.date-tab.active {
  background: rgba(229,9,20,0.15) !important;
  border-color: rgba(229,9,20,0.5) !important;
  color: #E50914 !important;
}

/* ── 12. SECTION HEADERS ─────────────────────────────────── */

.section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.section-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #e5e7eb !important;
}

.home-section {
  margin-top: 22px !important;
}

/* ── 13. SEARCH BAR ──────────────────────────────────────── */

.search-bar {
  width: clamp(240px, 34vw, 420px) !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  gap: 10px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: border-color 0.2s, background 0.2s !important;
}

.search-bar:focus-within {
  border-color: rgba(229,9,20,0.4) !important;
  background: rgba(255,255,255,0.07) !important;
}

.search-bar input {
  font-size: 13px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #e5e7eb !important;
  width: 100% !important;
}

/* ── 14. TOPBAR BRAND ────────────────────────────────────── */

.brand-logo-animated {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.brand-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.brand-img-anim {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.brand-name-anim {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #f5f5f5 !important;
  line-height: 1 !important;
}

.brand-sub-anim {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #E50914 !important;
}

/* ── 15. ICON BUTTONS ────────────────────────────────────── */

.icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* ── 16. SCROLL UTILITIES ────────────────────────────────── */

/* Prevent any pseudo-elements from blocking clicks */
#view-home::before,
#view-home::after,
.homepage-view::before,
.homepage-view::after {
  pointer-events: none !important;
}

/* ── 17. RESPONSIVE — 1200px ─────────────────────────────── */

@media (max-width: 1200px) {
  #view-home .matches-list,
  #view-category .matches-list,
  #view-channels .matches-grid,
  #view-dynamic-category .matches-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── 18. RESPONSIVE — 900px (tablet) ────────────────────── */

@media (max-width: 900px) {
  :root { --sidebar-w: 72px; }

  .sidebar {
    width: 72px !important;
    padding: 12px 6px !important;
  }

  /* Hide text labels in sidebar, show only icons */
  .sidebar .nav-item > span:not(.nav-badge),
  .sidebar .nav-badge,
  .sidebar-live-section,
  .sidebar-icon-links,
  .sidebar .sidebar-section-label,
  .sidebar-footer .telegram-btn span,
  .sidebar-stats,
  .telegram-btn span {
    display: none !important;
  }

  .sidebar .nav-item {
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 48px !important;
  }

  .sidebar .nav-icon,
  .sidebar .nav-icon-img {
    width: 22px !important;
    height: 22px !important;
  }

  .main-content {
    left: 72px !important;
  }

  .topbar {
    padding: 0 14px !important;
  }

  #view-home .matches-list,
  #view-category .matches-list {
    grid-template-columns: 1fr !important;
  }

  #view-home .home-layout {
    padding: 0 14px 28px !important;
  }

  #view-home .site-footer,
  .homepage-view > .site-footer,
  #main-content > .site-footer {
    padding: 24px 16px 80px !important;
  }

  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .search-bar {
    width: 100% !important;
    max-width: 260px !important;
  }
}

/* ── 19. RESPONSIVE — 600px (mobile) ────────────────────── */

@media (max-width: 600px) {
  .topbar {
    height: 56px !important;
    flex: 0 0 56px !important;
  }

  .search-bar {
    display: none !important;
  }

  #view-home .home-live-banner {
    width: calc(100% - 20px) !important;
    height: auto !important;
    aspect-ratio: 684/78 !important;
  }
}

/* ── 20. MOBILE BOTTOM NAV ───────────────────────────────── */

.mobile-bottom-nav {
  display: none; /* hidden on desktop, shown in media query below */
}

@media (max-width: 600px) {
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 300 !important;
    background: #000 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    height: 60px !important;
    align-items: stretch !important;
  }
}

/* Hide marked player elements */
#live-indicator { display: none !important; }

/* Move stream source switcher below player */
.player-source-overlay {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 16px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  padding: 0 !important;
}

.telegram-join-banner {
  margin-top: 16px;
  background: rgba(36, 161, 222, 0.1);
  border: 1px solid rgba(36, 161, 222, 0.3);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.telegram-join-banner:hover {
  background: rgba(36, 161, 222, 0.2);
}

.telegram-join-link {
  color: #24a1de;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Stream switcher label and button size tweaks */
.source-switch-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
  margin-right: 4px;
}

.player-source-overlay .source-btn {
  padding: 4px 10px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

.player-source-overlay .source-format {
  font-size: 9px !important;
  padding: 1px 4px !important;
  margin-left: 6px !important;
}


/* Player UI Auto-hide rules */
.player-ui-hidden .video-controls,
.player-ui-hidden .stream-channel-heading,
.player-ui-hidden .match-score-header,
.player-ui-hidden .player-action-bar,
.player-ui-hidden .player-source-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}



/* --- ADS MANAGEMENT FORM STYLES --- */
.ads-form-card * { box-sizing: border-box; }
.ads-input { width:100%; padding:12px; border:1px solid var(--border-color); border-radius:6px; font-size:14px; color:var(--text-primary); outline:none; transition:border 0.2s; background:var(--surface-hover); font-family: monospace; }
.ads-input:focus { border-color:var(--primary-color); }
.ads-input-label { padding:0; font-size:12px; color:var(--text-secondary); font-weight:600; text-transform: uppercase; letter-spacing: 0.5px; }
.ads-badge { background:rgba(40, 167, 69, 0.15); color:#28a745; padding:4px 8px; border-radius:12px; font-size:10px; font-weight:700; border:1px solid rgba(40, 167, 69, 0.3); }

.ads-switch { position:relative; width:44px; height:24px; }
.ads-switch input { opacity:0; width:0; height:0; }
.ads-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:var(--surface-hover); transition:.4s; border-radius:24px; border: 1px solid var(--border-color); }
.ads-slider:before { position:absolute; content:''; height:16px; width:16px; left:3px; bottom:3px; background-color:var(--text-secondary); transition:.4s; border-radius:50%; }
.ads-switch input:checked + .ads-slider { background-color:var(--primary-color); border-color:var(--primary-color); }
.ads-switch input:checked + .ads-slider:before { transform:translateX(20px); background-color:#fff; }

.ads-btn-cancel { background:transparent; border:none; color:var(--text-secondary); font-weight:600; padding:10px 24px; cursor:pointer; transition: color 0.2s; }
.ads-btn-cancel:hover { color: var(--text-primary); }
.ads-btn-add { background:var(--primary-color); border:none; color:#fff; font-weight:600; padding:10px 24px; border-radius:6px; cursor:pointer; transition:opacity 0.2s; }
.ads-btn-add:hover { opacity: 0.8; }

/* Ad Grid System */
.ads-grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ad-unit-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ad-unit-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.ad-unit-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ad-unit-actions { display: flex; gap: 8px; }
.ad-action-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
.ad-action-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
.btn-test:hover { background: rgba(40, 167, 69, 0.1); border-color: #28a745; color: #28a745; }
.btn-clear:hover { background: rgba(220, 53, 69, 0.1); border-color: #dc3545; color: #dc3545; }
.ads-select-small { background: var(--surface-hover); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 12px; padding: 4px 8px; border-radius: 4px; outline: none; }

/* --- PROFESSIONAL COMPACT ADMIN PANEL --- */
.admin-view {
  padding: 16px 18px 36px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 180px),
    #0B0B0D !important;
}

.admin-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  margin: -16px -18px 14px !important;
  padding: 14px 18px 12px !important;
  background: rgba(11,11,13,0.94) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(14px) !important;
}

.admin-title {
  font-size: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.admin-subtitle {
  font-size: 11px !important;
  margin-top: 3px !important;
}

.admin-tabs {
  gap: 6px !important;
  margin-top: 12px !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  background: #101013 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.admin-tabs::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.admin-tab-btn {
  flex: 0 0 auto !important;
  min-height: 34px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
  color: #A6A6AD !important;
}

.admin-tab-btn.active {
  background: #1B1B20 !important;
  color: #fff !important;
  border-color: rgba(229,9,20,0.45) !important;
  box-shadow: inset 3px 0 0 #E50914 !important;
}

.admin-tab-panel {
  padding-top: 0 !important;
}

.admin-grid {
  gap: 14px !important;
}

.admin-col {
  gap: 14px !important;
  min-width: 280px !important;
}

.admin-card {
  border-radius: 8px !important;
  padding: 16px !important;
  gap: 12px !important;
  background: #121216 !important;
  border-color: rgba(255,255,255,0.075) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,0.28) !important;
}

.admin-card.height-full {
  min-height: 0 !important;
}

.admin-card-header-row {
  padding-bottom: 9px !important;
}

.admin-card-title {
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  padding-left: 9px !important;
}

.admin-input,
.admin-select,
.admin-table-input {
  border-radius: 6px !important;
}

.admin-table th,
.admin-table td {
  padding: 8px 10px !important;
}

.admin-table-container {
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  background: #0D0D10 !important;
}

.admin-kicker {
  display: block;
  margin-bottom: 3px;
  color: #8A8A91;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wc-priority-key {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.wc-priority-key span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: #0D0D10;
  color: #D6D6DC;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.wc-src-row {
  padding: 6px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.018) !important;
}

/* --- ADS CONSOLE REDESIGN --- */
.ads-console {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ads-console-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: #121216;
}

.ads-console-toolbar h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.ads-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ads-console-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.ads-ops-card,
.ads-unit-workspace {
  min-height: 0;
}

.ads-profile-grid {
  display: grid;
  gap: 10px;
}

.ads-control-stack {
  display: grid;
  gap: 12px;
}

.ads-toggle-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  color: #EDEDF1;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ads-toggle-line input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ads-toggle-ui {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: #2A2A30;
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.18s, border-color 0.18s;
}

.ads-toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #A6A6AD;
  transition: transform 0.18s, background 0.18s;
}

.ads-toggle-line input:checked + .ads-toggle-ui {
  background: rgba(34,197,94,0.24);
  border-color: rgba(34,197,94,0.55);
}

.ads-toggle-line input:checked + .ads-toggle-ui::after {
  transform: translateX(18px);
  background: #22C55E;
}

.ads-status-pill {
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  background: #1A1A1F;
  color: #A6A6AD;
  font-size: 10px;
  font-weight: 800;
}

.ads-status-pill.is-live {
  color: #22C55E;
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.08);
}

.ads-mini-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ads-mini-metrics div {
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  background: #0D0D10;
}

.ads-mini-metrics strong,
.ads-mini-metrics span {
  display: block;
}

.ads-mini-metrics strong {
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.ads-mini-metrics span {
  margin-top: 4px;
  color: #8A8A91;
  font-size: 10px;
  font-weight: 700;
}

.ads-console-footer {
  display: flex;
  justify-content: flex-end;
}

.ads-grid-container {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 10px !important;
}

.ad-unit-card {
  padding: 12px !important;
  border-radius: 8px !important;
  background: #0D0D10 !important;
  border-color: rgba(255,255,255,0.07) !important;
  gap: 10px !important;
}

.ad-unit-header {
  align-items: flex-start !important;
}

.ad-unit-title {
  color: #F4F4F5 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.ad-unit-actions {
  gap: 5px !important;
}

.ad-action-btn {
  min-height: 26px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
}

.btn-add-option {
  color: #22C55E !important;
  border-color: rgba(34,197,94,0.32) !important;
}

.ad-option-list {
  display: grid;
  gap: 8px;
}

.ad-option-row {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  background: rgba(255,255,255,0.018);
}

.ad-option-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.ad-option-number {
  color: #CFCFD6;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ad-option-enabled-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #A6A6AD;
  font-size: 10px;
  font-weight: 800;
}

.ad-row-remove {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,45,85,0.24);
  border-radius: 6px;
  background: rgba(255,45,85,0.08);
  color: #FF2D55;
  font-weight: 900;
  cursor: pointer;
}

.ads-input {
  min-height: 38px;
  border-radius: 6px !important;
  background: #09090B !important;
  border-color: rgba(255,255,255,0.09) !important;
  font-size: 12px !important;
  font-family: var(--font-ui, Inter, system-ui, sans-serif) !important;
  resize: vertical;
}

textarea.ads-input {
  min-height: 82px;
}

.ad-option-name {
  flex: 1 1 120px;
  min-width: 100px;
}

.ad-option-empty {
  margin: 0;
  padding: 14px 10px;
  border: 1px dashed rgba(255,255,255,0.09);
  border-radius: 8px;
  color: #8A8A91;
  font-size: 11px;
  text-align: center;
}

.ads-status-pill.is-dirty {
  color: #F59E0B;
  border-color: rgba(245,158,11,0.35);
  background: rgba(245,158,11,0.08);
}

.ad-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3,3,8,0.82);
  backdrop-filter: blur(10px);
}

.ad-preview-backdrop[hidden] {
  display: none;
}

.ad-preview-card {
  width: min(820px, 100%);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card), var(--shadow-accent);
}

.ad-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.ad-preview-header h2 {
  margin: 2px 0 0;
  color: var(--text-primary);
  font-size: 16px;
}

.ad-preview-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 22px;
  cursor: pointer;
}

.ad-preview-frame {
  display: block;
  width: 100%;
  min-height: 430px;
  border: 0;
  background: #0B0B14;
}

@media (max-width: 980px) {
  .ads-console-grid {
    grid-template-columns: 1fr;
  }

  .ads-console-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .admin-view {
    padding: 12px 12px 92px !important;
  }

  .admin-header {
    margin: -12px -12px 12px !important;
    padding: 12px !important;
  }

  .wc-priority-key,
  .ads-mini-metrics {
    grid-template-columns: 1fr;
  }

  .ads-toolbar-actions {
    width: 100%;
    justify-content: space-between;
  }
}



/* Hide Top-Left Live Badge */
#live-badge { display: none !important; }

/* Phone layout: use bottom navigation only, never the desktop/tablet sidebar rail. */
@media (max-width: 600px) {
  :root {
    --sidebar-w: 0px !important;
    --sidebar-width: 0px !important;
  }

  body {
    overflow-x: hidden !important;
  }

  .sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: translateX(-100%) !important;
    pointer-events: none !important;
  }

  .main-content {
    left: 0 !important;
    margin-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-bottom: 76px !important;
  }

  .mobile-bottom-nav {
    display: flex !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)) !important;
  }

  .mobile-bottom-nav::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-bottom-nav .mob-nav-item {
    flex: 0 0 64px !important;
    min-width: 64px !important;
    max-width: 72px !important;
    height: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 4px !important;
    gap: 3px !important;
  }

  .mobile-bottom-nav .mob-nav-item > span:not(.mob-nav-external-icon) {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  .mobile-bottom-nav .mob-nav-item img,
  .mobile-bottom-nav .mob-nav-external-icon svg {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  .mobile-bottom-nav .mob-nav-external-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
  }

  .mobile-bottom-nav .mob-nav-external-link {
    color: var(--mob-link-color, #8a8a8a) !important;
  }
}

/* Mobile-only stream/channel sizing polish */
@media (max-width: 600px) {
  #view-stream.stream-view,
  #view-channels.channels-view,
  #view-dynamic-category.channels-view {
    padding: 0 12px calc(84px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  #view-stream .content-row {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  #view-stream .player-column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 0 0 !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  #view-stream .stream-channel-heading h1 {
    font-size: 34px !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  #view-stream .stream-title-meta {
    font-size: 15px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  #view-stream .player-container {
    width: 100% !important;
    max-width: min(860px, 94%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(56vh, 680px) !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 16px !important;
  }

  #view-stream .player-container .video-el,
  #view-stream .hls-player-mount .video-el {
    object-fit: contain !important;
  }

  #view-stream .video-controls {
    padding: 24px 10px 10px !important;
  }

  #view-stream .controls-progress {
    gap: 8px !important;
    margin-bottom: 7px !important;
  }

  #view-stream .controls-row {
    gap: 6px !important;
    min-width: 0 !important;
  }

  #view-stream .controls-left,
  #view-stream .controls-right {
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  #view-stream .controls-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #view-stream .ctrl-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 9px !important;
  }

  #view-stream .quality-ctrl-btn {
    width: auto !important;
    min-width: 46px !important;
    padding: 0 6px !important;
  }

  #view-stream .quality-ctrl-label,
  #view-stream .live-indicator-ctrl,
  #view-stream .time-display {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  #view-stream .volume-slider-wrap {
    display: none !important;
  }

  #view-stream .player-action-bar {
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 10px 0 8px !important;
  }

  #view-stream .player-action-left,
  #view-stream #player-source-wrapper {
    width: 100% !important;
  }

  #view-stream .player-action-left {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #view-stream .player-action-btn {
    min-width: 0 !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  #view-stream .player-source-overlay {
    width: 100% !important;
    margin-top: 0 !important;
    gap: 8px !important;
  }

  #view-stream .source-switch-label {
    width: 100% !important;
    margin: 0 !important;
    font-size: 11px !important;
  }

  #view-stream .player-source-overlay .source-btn {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
  }

  #view-stream .player-below-panel {
    gap: 12px !important;
  }

  #view-stream .player-panel-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  #view-stream .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 12px !important;
  }

  #view-stream .info-val {
    font-size: 14px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  #view-stream .next-matches-schedule-grid,
  #view-stream .channel-suggestions-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    padding: 2px 2px 8px !important;
  }

  #view-stream .next-matches-schedule-grid::-webkit-scrollbar,
  #view-stream .channel-suggestions-grid::-webkit-scrollbar {
    display: none !important;
  }

  #view-stream .next-matches-schedule-grid .match-card,
  #view-stream .channel-suggestions-grid .channel-card {
    flex: 0 0 min(76vw, 292px) !important;
    width: min(76vw, 292px) !important;
    max-width: min(76vw, 292px) !important;
    scroll-snap-align: start !important;
  }

  #view-stream .next-matches-schedule-grid .match-card {
    min-height: 210px !important;
    padding: 13px !important;
  }

  #view-stream .match-card .card-comp-name {
    max-width: 100% !important;
    font-size: 11px !important;
  }

  #view-stream .match-card .status-pill {
    max-width: 100% !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  #view-stream .match-card .match-score-card {
    margin: 10px 0 12px !important;
    padding: 10px !important;
  }

  #view-channels .admin-header,
  #view-dynamic-category .admin-header {
    margin: 16px 0 14px !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }

  #view-channels .admin-title,
  #view-dynamic-category .admin-title {
    font-size: 25px !important;
    line-height: 1.1 !important;
  }

  #view-channels .admin-subtitle,
  #view-dynamic-category .admin-subtitle {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #view-channels .matches-grid,
  #view-dynamic-category .matches-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }

  #view-channels .channel-card,
  #view-dynamic-category .channel-card {
    min-height: 82px !important;
    padding: 10px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }

  #view-channels .channel-logo-placeholder,
  #view-dynamic-category .channel-logo-placeholder {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  #view-channels .channel-info,
  #view-dynamic-category .channel-info {
    min-width: 0 !important;
    gap: 6px !important;
  }

  #view-channels .channel-name,
  #view-dynamic-category .channel-name {
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #view-channels .channel-status,
  #view-dynamic-category .channel-status {
    font-size: 9px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  #view-stream .ctrl-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  #view-stream .live-indicator-ctrl {
    display: none !important;
  }

  #view-channels .channel-card,
  #view-dynamic-category .channel-card {
    min-height: 76px !important;
    padding: 8px !important;
  }

  #view-channels .channel-logo-placeholder,
  #view-dynamic-category .channel-logo-placeholder {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  #view-channels .channel-name,
  #view-dynamic-category .channel-name {
    font-size: 12px !important;
  }
}

/* Header search and refresh controls */
.topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-left: auto !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

.topbar .topbar-actions .search-bar {
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  order: 0 !important;
  width: min(38vw, 430px) !important;
  min-width: 240px !important;
  max-width: 430px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
}

.topbar-refresh-btn {
  order: 1 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 10px !important;
  background: #121216 !important;
  color: #EDEDF1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease !important;
}

.topbar-refresh-btn:hover,
.topbar-refresh-btn:focus-visible {
  color: #E50914 !important;
  border-color: rgba(229,9,20,0.45) !important;
  background: rgba(229,9,20,0.1) !important;
  outline: none !important;
}

.topbar-refresh-btn:disabled {
  opacity: 0.72 !important;
  cursor: wait !important;
}

.topbar-refresh-btn.is-refreshing svg {
  animation: topbarRefreshSpin 0.8s linear infinite;
}

@keyframes topbarRefreshSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .topbar {
    gap: 10px !important;
  }

  .topbar-brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .topbar-actions {
    flex: 1 1 auto !important;
  }

  .topbar .topbar-actions .search-bar {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: none !important;
  }

  .topbar-icons {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .topbar {
    height: 62px !important;
    flex: 0 0 62px !important;
    padding: 0 10px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  .topbar-brand {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .topbar-brand .brand-logo-animated {
    display: flex !important;
  }

  .topbar-actions {
    margin-left: auto !important;
  }

  .topbar .topbar-actions .search-bar {
    display: flex !important;
    min-width: 0 !important;
    width: 130px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
  }

  .topbar .topbar-actions .search-bar input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 12px !important;
  }

  .topbar-refresh-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 9px !important;
  }

  .brand-text-anim {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .topbar {
    padding: 0 8px !important;
    gap: 6px !important;
  }

  .brand-icon-wrap,
  .brand-img-anim {
    width: 34px !important;
    height: 34px !important;
  }

  .topbar .topbar-actions .search-bar {
    height: 36px !important;
    padding: 0 8px !important;
  }

  .topbar .topbar-actions .search-bar svg {
    width: 14px !important;
    height: 14px !important;
  }

  .topbar-refresh-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
}

/* Admin site analytics */
.site-stats-shell {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.dashboard-stats-shell {
  margin-bottom: 18px;
}

.site-stats-card {
  min-height: 0 !important;
}

.site-stats-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding-bottom: 12px;
}

.stats-range-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stats-range-btn {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 6px;
  background: #0D0D10;
  color: #A6A6AD;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}

.stats-range-btn:hover,
.stats-range-btn.active {
  color: #fff;
  border-color: rgba(229,9,20,0.48);
  background: rgba(229,9,20,0.16);
}

.site-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.site-stat-tile,
.dashboard-mini-card {
  min-height: 102px;
  justify-content: center;
}

.site-stat-tile {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  background: #0D0D10;
}

.site-stat-tile span,
.dashboard-mini-card span {
  display: block;
  color: #8A8A91;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-stat-tile strong,
.dashboard-mini-card h2 {
  display: block;
  margin: 7px 0 0;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}

.site-stat-tile strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-source-list {
  display: grid;
  gap: 9px;
}

.traffic-source-list.compact {
  gap: 7px;
}

.traffic-source-row,
.traffic-activity-row,
.traffic-empty {
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  background: #0D0D10;
}

.traffic-source-main {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.traffic-source-main strong,
.traffic-activity-row strong {
  color: #F4F4F5;
  font-size: 12px;
  font-weight: 900;
}

.traffic-source-main span,
.traffic-activity-row span,
.traffic-empty {
  color: #8A8A91;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.traffic-source-meter {
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}

.traffic-source-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #E50914, #FF4D5A);
}

.traffic-activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

@media (max-width: 980px) {
  .site-stats-header {
    flex-direction: column;
    align-items: stretch;
  }

  .stats-range-toggle {
    justify-content: flex-start;
  }

  .site-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .site-stat-grid {
    grid-template-columns: 1fr;
  }

  .stats-range-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-range-btn {
    width: 100%;
  }

  .traffic-source-main,
  .traffic-activity-row {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* Floating Telegram Button */
.floating-telegram-btn {
  background: rgba(36, 161, 222, 0.15);
  border: 1px solid rgba(36, 161, 222, 0.3);
  color: #24a1de;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  text-decoration: none;
}

.floating-telegram-btn:hover {
  background: rgba(36, 161, 222, 0.25);
  color: #38bdf8;
}

/* ── Compact centered player + global footer ─────────────── */

#view-stream .player-container {
  width: 100%;
  max-width: min(860px, 94%);
  margin-left: auto;
  margin-right: auto;
}

#view-stream .player-container .video-el,
#view-stream .hls-player-mount .video-el,
#view-stream .player-container .universal-iframe-player {
  object-fit: contain !important;
}

#player-container .player-source-overlay {
  display: none !important;
}

#main-content > .site-footer {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
  position: static !important;
  z-index: 2 !important;
}

/* Requested stream page refinements */
#view-stream {
  flex-direction: column !important;
}

#view-stream .player-container {
  width: 100% !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  aspect-ratio: 16 / 9 !important;
}

#view-stream .player-container .video-el,
#view-stream .hls-player-mount .video-el,
#view-stream .player-container .universal-iframe-player {
  object-fit: contain !important;
  background: #000 !important;
}

#view-stream #player-source-overlay,
#view-stream .telegram-join-banner {
  display: none !important;
}

#view-home,
#view-stream,
#view-category,
#view-channels,
#view-dynamic-category,
#view-admin {
  flex-direction: column !important;
}

#view-home > .site-footer,
#view-stream > .site-footer,
#view-category > .site-footer,
#view-channels > .site-footer,
#view-dynamic-category > .site-footer,
#view-admin > .site-footer {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  margin-top: 40px !important;
  position: static !important;
  z-index: 2 !important;
}

/* Header search centered in the app shell */
@media (min-width: 901px) {
  .topbar {
    position: relative !important;
    justify-content: space-between !important;
  }

  .topbar-actions {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin-left: 0 !important;
    justify-content: center !important;
    width: min(42vw, 540px) !important;
    z-index: 4 !important;
  }

  .topbar .topbar-actions .search-bar {
    width: 100% !important;
    max-width: 540px !important;
  }

  .topbar-actions .topbar-refresh-btn {
    position: absolute !important;
    left: calc(100% + 8px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* Footer belongs to the app shell, below the active page */
.main-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.topbar {
  position: sticky !important;
  top: 0 !important;
}

#main-content > #site-footer {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin-top: 0 !important;
  position: static !important;
  z-index: 2 !important;
}

#main-content > #view-home,
#main-content > #view-stream,
#main-content > #view-category,
#main-content > #view-channels,
#main-content > #view-dynamic-category,
#main-content > #view-backupsites,
#main-content > #view-admin {
  flex: 0 0 auto !important;
  min-height: calc(100vh - var(--topbar-h)) !important;
  height: auto !important;
  overflow: visible !important;
}

/* Backup sites public page */
#backupsites-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
}

.backup-site-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 96px !important;
  padding: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.035) !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

.backup-site-card:hover {
  border-color: rgba(255,59,59,0.45) !important;
  background: rgba(255,255,255,0.055) !important;
  transform: translateY(-1px) !important;
}

.backup-site-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  background: rgba(255,59,59,0.12) !important;
  color: var(--accent) !important;
}

.backup-site-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.backup-site-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
}

.backup-site-url,
.backup-site-desc {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

.backup-sites-empty {
  grid-column: 1 / -1 !important;
  padding: 34px 18px !important;
  text-align: center !important;
  color: var(--text-muted) !important;
}

/* Stream action row and below-player content */
#view-stream .player-action-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 14px auto 18px !important;
  width: 100% !important;
}

#view-stream .player-action-left {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 auto !important;
}

#view-stream #player-source-wrapper,
#view-stream #player-below-panel,
#view-stream #player-match-details {
  display: none !important;
}

#view-stream .channel-suggestions,
#view-stream .next-matches-schedule {
  width: min(860px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#view-stream .section-category-icon {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  flex: 0 0 22px !important;
}

#view-stream .channel-suggestions-grid,
#view-stream .next-matches-schedule-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Compact admin channel management */
#admin-panel-channels .admin-grid {
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.65fr) !important;
  gap: 16px !important;
}

#admin-panel-channels .admin-table-container {
  overflow-x: hidden !important;
}

#admin-panel-channels .admin-table {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: fixed !important;
}

#admin-panel-channels .admin-table tbody {
  display: block !important;
  width: 100% !important;
}

#admin-panel-channels .admin-table thead {
  display: none !important;
}

#admin-panel-channels .admin-table th,
#admin-panel-channels .admin-table td {
  padding: 8px !important;
}

#admin-panel-channels .admin-channel-row {
  display: block !important;
  width: 100% !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.025) !important;
}

#admin-panel-channels .admin-channel-row td {
  display: block !important;
  border-bottom: 0 !important;
}

#admin-panel-channels .admin-channel-editor {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 88px !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#admin-panel-channels .admin-channel-main-fields {
  display: grid !important;
  grid-template-columns: minmax(110px, 0.8fr) minmax(140px, 1fr) minmax(140px, 1fr) 76px !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#admin-panel-channels .admin-channel-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#admin-panel-channels .admin-channel-field span {
  color: var(--text-muted) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#admin-panel-channels .admin-channel-stream-field,
#admin-panel-channels .admin-channel-cats {
  grid-column: 1 / -1 !important;
}

#admin-panel-channels .admin-channel-cats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#admin-panel-channels .admin-channel-cats label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 26px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  cursor: pointer !important;
}

#admin-panel-channels .admin-channel-cats input {
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
}

#admin-panel-channels .admin-channel-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  justify-content: center !important;
}

#admin-panel-channels .admin-channel-actions button {
  width: 100% !important;
  min-height: 34px !important;
  padding: 7px 8px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

#admin-panel-channels .admin-table-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 7px 9px !important;
  font-size: 12px !important;
}

#admin-panel-channels .admin-card-header-row,
#admin-panel-channels .admin-card-header-row + div {
  flex-wrap: wrap !important;
}

#admin-panel-channels #admin-ch-search {
  flex: 1 1 180px !important;
  max-width: 260px !important;
  min-width: 0 !important;
}

@media (max-width: 1180px) {
  #admin-panel-channels .admin-grid {
    grid-template-columns: 1fr !important;
  }

  #admin-panel-channels .admin-channel-editor {
    grid-template-columns: 1fr !important;
  }

  #admin-panel-channels .admin-channel-actions {
    flex-direction: row !important;
  }
}

/* ============================================================
   Night Elite color theme
   Color-only overrides: layout, sizing, and component structure
   intentionally remain controlled by the existing styles above.
   ============================================================ */

:root {
  /* Base backgrounds */
  --bg: #0B0B14;
  --bg-soft: #10101C;
  --surface: #11111F;
  --surface-2: #141426;
  --card: #141426;
  --card-hover: #1B1B33;

  /* Text */
  --text: #FFFFFF;
  --text-primary: #FFFFFF;
  --text-secondary: #C7C7D9;
  --text-muted: #8A8AA3;
  --text-soft: #6F6F85;

  /* Night Elite accents */
  --accent: #8A2BE2;
  --accent-hover: #9D4EDD;
  --accent-soft: rgba(138, 43, 226, 0.14);
  --accent-border: rgba(138, 43, 226, 0.38);
  --accent-glow: rgba(138, 43, 226, 0.35);

  /* Live / danger */
  --live: #FF2D55;
  --live-hover: #FF3F67;
  --live-soft: rgba(255, 45, 85, 0.14);
  --live-border: rgba(255, 45, 85, 0.42);
  --live-glow: rgba(255, 45, 85, 0.32);

  /* Score / success */
  --score-green: #22C55E;
  --success: #22C55E;
  --success-soft: rgba(34, 197, 94, 0.14);

  /* Borders and shadows */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --shadow-card: 0 18px 45px rgba(0, 0, 0, 0.35);
  --shadow-accent: 0 0 28px rgba(138, 43, 226, 0.22);
  --shadow-live: 0 0 28px rgba(255, 45, 85, 0.24);

  /* Existing variable aliases */
  --bg-void: #0B0B14;
  --bg-surface: #10101C;
  --bg-card: #141426;
  --bg-raised: #141426;
  --bg-hover: #1B1B33;
  --bg-border: var(--border);
  --primary: #FFFFFF;
  --secondary: #C7C7D9;
  --muted: #8A8AA3;
  --text-label: #6F6F85;
  --accent-dim: var(--accent-soft);
  --accent-mid: rgba(138, 43, 226, 0.60);
  --live-red: #FF2D55;
  --green: #22C55E;
  --home-color: #8A2BE2;
  --away-color: #FF2D55;
  --sport-blue: #C7C7D9;
}

html,
body {
  background: var(--bg) !important;
  color: var(--text-primary) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--surface-2) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover) !important;
}

.sidebar {
  background: #050509 !important;
  border-color: var(--border) !important;
}

.main-content,
#view-home,
#view-stream,
#view-category,
#view-channels,
#view-dynamic-category,
#view-backupsites,
#view-admin,
#view-home.homepage-view,
.homepage-view,
.landing-page {
  background:
    radial-gradient(circle at top left, rgba(138, 43, 226, 0.13), transparent 34%),
    linear-gradient(180deg, #0B0B14 0%, #08080F 100%) !important;
  color: var(--text-primary) !important;
}

.homepage-view::after {
  background: linear-gradient(to top, rgba(138, 43, 226, 0.13), rgba(138, 43, 226, 0)) !important;
}

.topbar {
  background: rgba(11, 11, 20, 0.92) !important;
  border-color: var(--border) !important;
}

.search-bar {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}

.search-bar input,
.search-bar input::placeholder {
  color: var(--text-muted) !important;
}

.search-bar input {
  color: var(--text-primary) !important;
}

.search-bar:focus-within {
  background: var(--surface) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.15) !important;
}

.icon-btn,
.topbar-back-btn,
.topbar-refresh-btn {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.icon-btn:hover,
.icon-btn:focus-visible,
.topbar-back-btn:hover,
.topbar-back-btn:focus-visible,
.topbar-refresh-btn:hover,
.topbar-refresh-btn:focus-visible {
  background: var(--card-hover) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent-hover) !important;
  box-shadow: var(--shadow-accent) !important;
}

.nav-item,
.sidebar-section-label,
.sidebar-stat-label {
  color: var(--text-muted) !important;
}

.nav-item .nav-icon {
  color: var(--text-muted) !important;
}

.nav-item:hover,
.nav-item-wc:hover,
.nav-item-f1:hover {
  background: var(--card-hover) !important;
  color: var(--text-primary) !important;
}

.nav-item.active,
.nav-item-wc.active,
.nav-item-f1.active {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.28), rgba(255, 45, 85, 0.12)) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--accent-border) !important;
  box-shadow: var(--shadow-accent) !important;
}

.nav-item.active .nav-icon,
.nav-item-wc.active .nav-icon,
.nav-item-f1.active .nav-icon {
  color: var(--accent-hover) !important;
  filter: drop-shadow(0 0 4px var(--accent-glow)) !important;
}

.nav-item-wc,
.nav-item-f1 {
  border-left-color: var(--accent) !important;
  color: var(--text-muted) !important;
}

.nav-item-wc::before,
.nav-item-f1::before {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent)) !important;
}

.nav-badge {
  background: var(--live) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-live) !important;
}

.mini-match,
.sidebar-footer,
.sidebar-brand {
  border-color: var(--border) !important;
}

.mini-teams,
.mini-score {
  color: var(--text-primary) !important;
}

.mini-live-dot,
.live-dot,
.live-dot-pulse,
.footer-live-dot,
.live-indicator-ctrl .live-dot {
  background: var(--live) !important;
  box-shadow: 0 0 10px var(--live-glow) !important;
}

.date-nav,
#view-home .date-nav,
.category-filter-row,
.admin-tabs {
  background: rgba(11, 11, 20, 0.92) !important;
  border-color: var(--border) !important;
}

.date-tab,
.date-tab-action,
.category-tab,
.category-filter-btn,
.source-btn,
.quality-btn,
.admin-tab-btn,
.admin-btn-secondary,
.outlined-btn,
.stream-retry-btn,
.stats-range-btn {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

.date-tab:hover,
.date-tab-action:hover,
.category-tab:hover,
.category-filter-btn:hover,
.source-btn:hover,
.quality-btn:hover,
.admin-tab-btn:hover,
.admin-btn-secondary:hover,
.outlined-btn:hover,
.stream-retry-btn:hover,
.stats-range-btn:hover {
  background: var(--card-hover) !important;
  border-color: var(--accent-border) !important;
  color: var(--text-primary) !important;
}

.date-tab.active,
.date-tab-action.active,
.category-tab.active,
.category-filter-btn.active,
.category-filter-btn[aria-pressed="true"],
.source-btn.active,
.quality-btn.active,
.admin-tab-btn.active,
.stats-range-btn.active,
.admin-btn:not(.admin-btn-danger),
.card-watch-btn,
.btn-watch,
.hero-btn,
.empty-state-btn {
  background: linear-gradient(135deg, #8A2BE2, #6D28D9) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 24px rgba(138, 43, 226, 0.28) !important;
}

.date-tab.active:hover,
.date-tab-action.active:hover,
.category-tab.active:hover,
.category-filter-btn.active:hover,
.source-btn.active:hover,
.quality-btn.active:hover,
.admin-tab-btn.active:hover,
.stats-range-btn.active:hover,
.admin-btn:not(.admin-btn-danger):hover,
.card-watch-btn:hover,
.match-card:hover .card-watch-btn,
.btn-watch:hover,
.hero-btn:hover,
.empty-state-btn:hover {
  background: linear-gradient(135deg, #9D4EDD, #7C3AED) !important;
  color: var(--text-primary) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 24px rgba(138, 43, 226, 0.35) !important;
}

.admin-action-btn-save {
  background: var(--accent-soft) !important;
  color: var(--accent-hover) !important;
  border-color: var(--accent-border) !important;
}

.admin-action-btn-save:hover {
  background: var(--accent) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-hover) !important;
}

.live-badge,
.live-badge-pill,
.badge-live-neon,
.live-section-badge,
.status-pill.live,
#view-home .status-pill.live,
.player-live-badge,
.live-indicator-ctrl {
  background: var(--live-soft) !important;
  color: var(--live) !important;
  border: 1px solid var(--live-border) !important;
  box-shadow: var(--shadow-live) !important;
}

.match-card,
.match-card.match-card-v2,
#view-home .match-card.match-card-v2,
.home-match-card {
  background: linear-gradient(145deg, #141426, #10101C) !important;
  border-color: var(--border) !important;
  border-left-color: var(--accent) !important;
  box-shadow: var(--shadow-card) !important;
}

.match-card.live-card,
.match-card.match-card-v2.live-card,
#view-home .match-card.match-card-v2.live-card,
#view-home .match-card.match-card-v2.finished-card {
  background: linear-gradient(145deg, #141426, #10101C) !important;
  border-color: var(--border) !important;
  border-left-color: var(--accent) !important;
  box-shadow: var(--shadow-card) !important;
}

.match-card:hover,
.match-card.match-card-v2:hover,
#view-home .match-card.match-card-v2:hover,
.home-match-card:hover {
  background: linear-gradient(145deg, #1B1B33, #141426) !important;
  border-color: var(--accent-border) !important;
  border-left-color: var(--accent-hover) !important;
  box-shadow: var(--shadow-accent) !important;
}

.match-card.match-card-v2::before,
#view-home .match-card.match-card-v2::before {
  background: var(--accent) !important;
}

.card-comp-badge svg,
#view-home .card-comp-badge svg,
.section-icon,
#view-home .section-icon {
  color: var(--accent-hover) !important;
}

.card-comp-name,
#view-home .card-comp-name,
.competition-label,
.card-channel,
.finished-card-footer {
  color: var(--text-muted) !important;
}

.team-name,
.score-team-name,
#view-home .score-team-name,
#view-home .match-card.live-card .score-team-name {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

.match-score,
.score-main,
.score-vs,
.score-minute,
.score-status,
.score-status-value,
.score-kickoff-time,
#view-home .score-main,
#view-home .score-status,
#view-home .score-minute,
#view-home .score-status-value,
#view-home .score-kickoff-time,
.mini-score {
  color: var(--score-green) !important;
}

.score-live-label,
#view-home .score-live-label {
  color: var(--live) !important;
}

#view-home .match-score-display.match-score-card,
.match-score-display,
.score-flag-wrap,
#view-home .score-flag-wrap {
  background: rgba(11, 11, 20, 0.72) !important;
  border-color: var(--border) !important;
}

#view-home .section-header,
.section-header {
  border-color: var(--border) !important;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 52px 2px no-repeat !important;
}

#section-live .section-header,
#view-home #section-live .section-header {
  background: linear-gradient(var(--live), var(--live)) left bottom / 52px 2px no-repeat !important;
}

.section-title,
#view-home .section-title,
.admin-title,
.category-title,
.channel-name,
.admin-card-title,
.site-stat-tile strong,
.dashboard-mini-card h2 {
  color: var(--text-primary) !important;
}

.home-banner-intro,
.category-kicker,
.footer-logo-animated .brand-sub-anim,
.brand-sub-anim,
.brand-sub,
.footer-brand-accent {
  color: var(--accent-hover) !important;
}

.brand-icon-wrap,
.footer-logo-animated .brand-icon-wrap,
.brand-img {
  border-color: var(--accent-border) !important;
  box-shadow: var(--shadow-accent) !important;
}

.category-subtitle,
.admin-subtitle,
.channel-status,
.stat-card-lbl,
.site-stat-tile span,
.dashboard-mini-card span,
.traffic-source-main span,
.traffic-activity-row span,
.traffic-empty {
  color: var(--text-muted) !important;
}

.channel-card,
.stat-card,
.category-count-card,
.rail-card,
.admin-card,
.admin-panel-card,
.site-stat-card,
.site-stat-tile,
.dashboard-mini-card,
.traffic-source-row,
.traffic-activity-row,
.traffic-empty,
.backup-site-card,
.sidebar-stats-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-card) !important;
}

.channel-card:hover,
.stat-card:hover,
.rail-card:hover,
.backup-site-card:hover {
  background: var(--card-hover) !important;
  border-color: var(--accent-border) !important;
  box-shadow: var(--shadow-accent) !important;
}

.backup-site-icon,
.stat-card-icon.today {
  background: var(--accent-soft) !important;
  color: var(--accent-hover) !important;
}

.admin-card-title {
  border-left-color: var(--accent) !important;
}

.admin-input,
.admin-select,
.admin-textarea,
.admin-table-input,
.form-input,
.form-select,
.form-textarea {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus,
.admin-table-input:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.15) !important;
}

.admin-table,
.admin-table th,
.admin-table td,
.admin-channel-row,
#admin-panel-channels .admin-channel-row,
#admin-panel-channels .admin-channel-cats label {
  border-color: var(--border) !important;
}

.admin-table th,
.admin-channel-row,
#admin-panel-channels .admin-channel-row,
#admin-panel-channels .admin-channel-cats label {
  background: var(--bg-soft) !important;
}

.player-container,
#view-stream .player-container {
  background: #000000 !important;
  border: 1px solid rgba(138, 43, 226, 0.28) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45) !important;
}

.player-controls,
.controls-bar,
.quality-popup,
.player-source-overlay,
.player-action-bar {
  background: rgba(11, 11, 20, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

.progress-bar-fill,
.progress-fill,
.progress-bar-thumb {
  background: var(--accent) !important;
}

.progress-bar-thumb {
  box-shadow: 0 0 8px var(--accent-glow) !important;
}

.volume-slider {
  accent-color: var(--accent) !important;
}

/* Match source switcher: shown below the player when two or more sources exist. */
#view-stream #player-source-wrapper.has-sources {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  width: min(860px, 100%) !important;
  margin: 12px auto 0 !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 12px !important;
  background: rgba(11,11,20,.72) !important;
  box-sizing: border-box !important;
}

#view-stream .source-switch-label {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#view-stream .player-source-switcher {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#view-stream .player-source-switcher .source-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  min-width: 132px !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#view-stream .player-source-switcher .source-btn:hover,
#view-stream .player-source-switcher .source-btn.active {
  border-color: #E50914 !important;
  background: rgba(229,9,20,.20) !important;
}

#view-stream .player-source-switcher .source-format {
  padding: 2px 5px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.10) !important;
  color: #c9c9d3 !important;
  font-size: 9px !important;
  letter-spacing: .06em !important;
}

@media (max-width: 720px) {
  #view-stream #player-source-wrapper.has-sources {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 10px auto 0 !important;
    padding: 10px !important;
  }

  #view-stream .source-switch-label {
    width: 100% !important;
    text-align: center !important;
  }

  #view-stream .player-source-switcher {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  #view-stream .player-source-switcher .source-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: space-between !important;
  }
}

@media (max-width: 420px) {
  #view-stream .player-source-switcher {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Public ad placements populated from Ads Management. */
.public-ad-host {
  width: min(970px, calc(100% - 32px)) !important;
  margin: 14px auto !important;
  padding: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 10px !important;
  background: rgba(12,12,16,.68) !important;
}

.public-ad-host[hidden] {
  display: none !important;
}

.public-ad-frame {
  flex: 1 1 100% !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

.public-ad-banner .public-ad-frame {
  height: 110px !important;
  min-height: 90px !important;
}

.public-ad-native .public-ad-frame {
  height: 280px !important;
  min-height: 180px !important;
}

.public-ad-smartlink .public-ad-frame {
  height: 100px !important;
}

.public-smartlink,
.public-social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(229,9,20,.5) !important;
  border-radius: 9px !important;
  background: rgba(229,9,20,.16) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.public-ad-runtime-popunder {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  left: -9999px !important;
  overflow: hidden !important;
}

.public-ad-runtime-social:has(.public-social-link) {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 5000 !important;
}

/* ── Ad units placed just before the footer ──────────────────────────
   Ads are inserted immediately before #site-footer by JS, keeping the
   landing experience clean above the fold while remaining visible.     */

/* Subtle "Advertisement" caption inside each ad block */
.public-ad-host::before {
  content: 'Advertisement' !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.22) !important;
  padding: 4px 0 2px !important;
  pointer-events: none !important;
}

/* Standard Banner — first in the cluster, gets the top divider */
.public-ad-banner {
  margin-top: 32px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding-top: 12px !important;
}

/* Native Banner — second */
.public-ad-native {
  margin-top: 8px !important;
}

/* Smartlink — third, adds breathing room before footer */
.public-ad-smartlink {
  margin-top: 8px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 720px) {
  .public-ad-host {
    width: calc(100% - 20px) !important;
    margin: 10px auto !important;
    padding: 5px !important;
  }

  .public-ad-banner .public-ad-frame,
  .public-ad-smartlink .public-ad-frame {
    height: 100px !important;
  }

  .public-ad-native .public-ad-frame {
    height: 250px !important;
  }
}

.quality-tag,
.quality-ctrl-label,
.subtitle-ctrl-btn.subtitles-on {
  color: var(--accent-hover) !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-soft) !important;
}

.ctrl-btn:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
}

.player-container:focus-within {
  box-shadow: 0 0 0 1px var(--accent-border), 0 22px 60px rgba(0, 0, 0, 0.45) !important;
}

.site-footer,
#view-home .site-footer,
.homepage-view > .site-footer,
#main-content > .site-footer,
#main-content > #site-footer {
  background: #08080F !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

.footer-brand-desc,
.footer-links-label,
.footer-links-list a,
.footer-copyright,
.backup-site-url,
.backup-site-desc {
  color: var(--text-muted) !important;
}

.footer-links-list a:hover,
.footer-logo-animated .brand-sub-anim {
  color: var(--accent-hover) !important;
}

.telegram-btn,
.footer-telegram-btn,
.floating-telegram-btn {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

.telegram-btn:hover,
.footer-telegram-btn:hover,
.floating-telegram-btn:hover {
  background: var(--card-hover) !important;
  border-color: var(--accent-border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-accent) !important;
}

.footer-live-indicator {
  color: var(--live) !important;
}

.traffic-source-meter {
  background: var(--border) !important;
}

.traffic-source-meter span {
  background: linear-gradient(90deg, var(--accent), var(--accent-hover)) !important;
}

.mob-nav,
.mobile-bottom-nav {
  background: rgba(11, 11, 20, 0.96) !important;
  border-color: var(--border) !important;
}

.mob-nav-item {
  color: var(--text-muted) !important;
}

.mob-nav-item.active {
  color: var(--accent-hover) !important;
  background: var(--accent-soft) !important;
}

/* Specificity guards for the legacy screenshot-restore theme. */
:root {
  --bg-void: #0B0B14 !important;
  --bg-surface: #10101C !important;
  --bg-card: #141426 !important;
  --bg-raised: #141426 !important;
  --bg-hover: #1B1B33 !important;
  --bg-border: rgba(255, 255, 255, 0.08) !important;
  --accent: #8A2BE2 !important;
  --accent-hover: #9D4EDD !important;
  --accent-dim: rgba(138, 43, 226, 0.14) !important;
  --accent-soft: rgba(138, 43, 226, 0.14) !important;
  --accent-glow: rgba(138, 43, 226, 0.35) !important;
  --accent-mid: rgba(138, 43, 226, 0.60) !important;
  --text-primary: #FFFFFF !important;
  --text-secondary: #C7C7D9 !important;
  --text-muted: #8A8AA3 !important;
  --live-red: #FF2D55 !important;
  --green: #22C55E !important;
}

.sidebar .nav-item.active,
#nav-home.active,
.sidebar .nav-item-wc.active,
.sidebar .nav-item-f1.active {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.28), rgba(255, 45, 85, 0.12)) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-border) !important;
  box-shadow: var(--shadow-accent) !important;
}

.sidebar .nav-item.active .nav-icon,
#nav-home.active .nav-icon,
.sidebar .nav-item-wc.active .nav-icon,
.sidebar .nav-item-f1.active .nav-icon {
  color: var(--accent-hover) !important;
}

.sidebar .nav-badge {
  background: var(--live) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-live) !important;
}

#view-home .date-tab.active,
#view-home .date-tab-action.active {
  background: linear-gradient(135deg, #8A2BE2, #6D28D9) !important;
  color: var(--text-primary) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 24px rgba(138, 43, 226, 0.28) !important;
}

#view-home .date-tab:hover,
#view-home .date-tab-action:hover,
#view-home .date-tab.active:hover,
#view-home .date-tab-action.active:hover {
  background: linear-gradient(135deg, #9D4EDD, #7C3AED) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-border) !important;
}

#view-home > .home-banner-intro::first-letter {
  color: var(--accent-hover) !important;
}

.topbar .brand-icon-wrap,
.topbar .brand-img-anim,
.footer-logo-animated .brand-icon-wrap {
  border-color: var(--accent-border) !important;
  box-shadow: var(--shadow-accent) !important;
}

.topbar .brand-sub-anim,
.footer-logo-animated .brand-sub-anim {
  color: var(--accent-hover) !important;
}

#view-home .card-watch-btn {
  background: linear-gradient(135deg, #8A2BE2, #6D28D9) !important;
  color: var(--text-primary) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 24px rgba(138, 43, 226, 0.28) !important;
}

#view-home .match-card:hover .card-watch-btn {
  background: linear-gradient(135deg, #9D4EDD, #7C3AED) !important;
  color: var(--text-primary) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 24px rgba(138, 43, 226, 0.35) !important;
}

.topbar .search-bar,
.topbar .topbar-actions .search-bar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.topbar .search-bar:focus-within,
.topbar .topbar-actions .search-bar:focus-within {
  background: var(--surface) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.15) !important;
}

.mini-teams {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.08), 0 0 18px rgba(138, 43, 226, 0.12) !important;
}

#view-home > .home-live-banner,
.home-live-banner {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(138, 43, 226, 0.10) !important;
}

.brand-icon-wrap .brand-img-anim,
.topbar .brand-img-anim,
.footer-logo-animated .brand-img-anim {
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 18px rgba(138, 43, 226, 0.22) !important;
}

.go-top-btn,
#go-top-btn {
  background: linear-gradient(135deg, #8A2BE2, #6D28D9) !important;
  color: var(--text-primary) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 24px rgba(138, 43, 226, 0.28) !important;
}

.go-top-btn:hover,
#go-top-btn:hover {
  background: linear-gradient(135deg, #9D4EDD, #7C3AED) !important;
  border-color: var(--accent-border) !important;
  box-shadow: var(--shadow-accent) !important;
}

.quality-popup-list .quality-btn.active,
.player-controls .quality-btn.active {
  background: var(--accent-soft) !important;
  color: var(--accent-hover) !important;
  border-color: var(--accent-border) !important;
}

.login-card {
  border-left-color: var(--accent) !important;
}

/* ============================================================
   Night Elite logo motion and color polish
   Paint-only effects: no layout, sizing, or structure changes.
   ============================================================ */

:root {
  --accent-highlight: #C084FC;
  --accent-lavender: #DDD6FE;
  --surface-glass: rgba(20, 20, 38, 0.82);
}

@keyframes nightEliteLogoFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
    filter: brightness(1) saturate(1.04) drop-shadow(0 0 5px rgba(138, 43, 226, 0.24));
  }
  28% {
    transform: translateY(-1px) rotate(-1.4deg) scale(1.018);
    filter: brightness(1.06) saturate(1.10) drop-shadow(0 0 8px rgba(138, 43, 226, 0.38));
  }
  55% {
    transform: translateY(0) rotate(0.8deg) scale(1.035);
    filter: brightness(1.12) saturate(1.14) drop-shadow(0 0 11px rgba(157, 78, 221, 0.46));
  }
  78% {
    transform: translateY(-1px) rotate(1.2deg) scale(1.012);
    filter: brightness(1.05) saturate(1.08) drop-shadow(0 0 7px rgba(192, 132, 252, 0.30));
  }
}

@keyframes nightEliteLogoHalo {
  0%, 100% {
    border-color: rgba(138, 43, 226, 0.38);
    box-shadow: 0 0 0 1px rgba(138, 43, 226, 0.08), 0 0 14px rgba(138, 43, 226, 0.20);
  }
  50% {
    border-color: rgba(192, 132, 252, 0.72);
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.16), 0 0 24px rgba(138, 43, 226, 0.42);
  }
}

@keyframes nightEliteWordmarkShine {
  0%, 18% { background-position: 130% 50%; }
  48%, 62% { background-position: 50% 50%; }
  92%, 100% { background-position: -35% 50%; }
}

@keyframes nightEliteSubtitleGlow {
  0%, 100% {
    opacity: 0.82;
    filter: brightness(1);
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.22);
  }
  50% {
    opacity: 1;
    filter: brightness(1.14);
    text-shadow: 0 0 12px rgba(192, 132, 252, 0.42);
  }
}

.topbar .brand-icon-wrap,
.footer-logo-animated .brand-icon-wrap {
  border-color: var(--accent-border) !important;
  background: linear-gradient(145deg, rgba(138, 43, 226, 0.20), rgba(192, 132, 252, 0.06)), #08080F !important;
  box-shadow: 0 0 0 1px rgba(138, 43, 226, 0.08), 0 0 14px rgba(138, 43, 226, 0.20) !important;
  animation: nightEliteLogoHalo 4.8s ease-in-out infinite !important;
}

.topbar .brand-img-anim {
  border-color: transparent !important;
  box-shadow: none !important;
  transform-origin: center !important;
  animation: nightEliteLogoFloat 4.8s cubic-bezier(0.45, 0, 0.25, 1) infinite !important;
  will-change: transform, filter;
}

.footer-logo-animated .brand-img-anim {
  border-color: transparent !important;
  box-shadow: none !important;
  transform-origin: center !important;
  animation: nightEliteLogoFloat 5.8s -1.2s cubic-bezier(0.45, 0, 0.25, 1) infinite !important;
  will-change: transform, filter;
}

.topbar .brand-name-anim,
.footer-logo-animated .brand-name-anim {
  color: var(--text-primary) !important;
  background: linear-gradient(100deg, #FFFFFF 0%, var(--accent-lavender) 38%, var(--accent-highlight) 50%, #FFFFFF 64%, #FFFFFF 100%) !important;
  background-size: 240% 100% !important;
  background-position: 130% 50%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 18px rgba(138, 43, 226, 0.14) !important;
  animation: nightEliteWordmarkShine 6.4s ease-in-out infinite !important;
}

.footer-logo-animated .brand-name-anim {
  animation-duration: 7.6s !important;
}

.topbar .brand-name-anim::after,
.footer-logo-animated .brand-name-anim::after {
  display: none !important;
  animation: none !important;
}

.topbar .brand-name-anim::before,
.footer-logo-animated .brand-name-anim::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-highlight)) !important;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.34) !important;
}

.topbar .brand-sub-anim,
.footer-logo-animated .brand-sub-anim {
  color: var(--accent-hover) !important;
  background: linear-gradient(90deg, var(--accent-hover), var(--accent-highlight), var(--accent-lavender)) !important;
  background-size: 180% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: nightEliteSubtitleGlow 3.8s ease-in-out infinite !important;
}

.brand-logo-animated:hover .brand-img-anim,
.footer-logo-animated:hover .brand-img-anim {
  animation-duration: 2.4s !important;
}

.brand-logo-animated:hover .brand-icon-wrap,
.footer-logo-animated:hover .brand-icon-wrap {
  border-color: rgba(192, 132, 252, 0.82) !important;
  box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.18), 0 0 28px rgba(138, 43, 226, 0.48) !important;
}

.brand-logo-animated:focus-visible,
.footer-logo-animated:focus-visible {
  outline: 2px solid var(--accent-hover) !important;
  outline-offset: 4px !important;
}

/* Richer Night Elite surface depth without changing geometry. */
.topbar {
  background:
    radial-gradient(circle at 8% 0%, rgba(138, 43, 226, 0.12), transparent 30%),
    rgba(11, 11, 20, 0.94) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24), inset 0 -1px 0 rgba(138, 43, 226, 0.08) !important;
}

.sidebar {
  background:
    radial-gradient(circle at 20% 4%, rgba(138, 43, 226, 0.10), transparent 26%),
    #050509 !important;
}

.site-footer,
#view-home .site-footer,
.homepage-view > .site-footer,
#main-content > .site-footer,
#main-content > #site-footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(138, 43, 226, 0.10), transparent 34%),
    #08080F !important;
  box-shadow: inset 0 1px 0 rgba(138, 43, 226, 0.08) !important;
}

.topbar .search-bar,
.topbar .topbar-actions .search-bar {
  background: linear-gradient(145deg, rgba(20, 20, 38, 0.94), rgba(17, 17, 31, 0.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.nav-item:hover,
.nav-item-wc:hover,
.nav-item-f1:hover {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.13), rgba(27, 27, 51, 0.92)) !important;
  border-color: rgba(138, 43, 226, 0.20) !important;
}

.match-card,
.match-card.match-card-v2,
#view-home .match-card.match-card-v2,
.channel-card,
.stat-card,
.admin-card,
.rail-card {
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

@media (prefers-reduced-motion: reduce) {
  .topbar .brand-icon-wrap,
  .footer-logo-animated .brand-icon-wrap,
  .topbar .brand-img-anim,
  .footer-logo-animated .brand-img-anim,
  .topbar .brand-name-anim,
  .footer-logo-animated .brand-name-anim,
  .topbar .brand-sub-anim,
  .footer-logo-animated .brand-sub-anim {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}