/* ==========================================================================
   DYNAMIC LIGHT & DARK MODE DESIGN SYSTEM FOR SHONATON STREAM
   ========================================================================== */

:root {
  /* DEFAULT THEME: LIGHT MODE */
  --yt-bg: #f9fafb;
  --navbar-bg: rgba(255, 255, 255, 0.98);
  --yt-card-bg: #ffffff;
  --yt-text-main: #111827;
  --yt-text-secondary: #4b5563;
  --yt-border: #e5e7eb;
  
  --search-bg: #ffffff;
  --search-border: #d1d5db;
  
  --chip-bg: #e5e7eb;
  --chip-hover: #d1d5db;
  --chip-active-bg: #111827;
  --chip-active-text: #ffffff;
  
  --footer-bg: #f3f4f6;

  /* Admin mapping light mode */
  --bg-primary: #f3f4f6;
  --bg-secondary: #ffffff;
  --bg-hover: #e5e7eb;
  --border-color: #e5e7eb;
  --text-main: #111827;
  --text-muted: #4b5563;

  /* Shonaton Brand Accents */
  --accent-blue: #00a1d6; /* Shonaton Cyan */
  --accent-pink: #fb7299; /* Shonaton Pink */
  --accent-hover: #0082b2;
  
  --radius-card: 12px;
  --radius-badge: 4px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --shadow-main: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

/* DARK MODE OVERRIDES */
[data-theme="dark"], body.dark-mode {
  --yt-bg: #0f0f0f;
  --navbar-bg: rgba(15, 15, 15, 0.98);
  --yt-card-bg: #272727;
  --yt-text-main: #f1f1f1;
  --yt-text-secondary: #aaaaaa;
  --yt-border: #272727;
  
  --search-bg: #121212;
  --search-border: #303030;
  
  --chip-bg: #272727;
  --chip-hover: #3f3f3f;
  --chip-active-bg: #f1f1f1;
  --chip-active-text: #0f0f0f;
  
  --footer-bg: #080808;

  /* Admin mapping dark mode */
  --bg-primary: #181818;
  --bg-secondary: #212121;
  --bg-hover: #2e2e2e;
  --border-color: #333333;
  --text-main: #f1f1f1;
  --text-muted: #aaaaaa;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html, body {
  background-color: var(--yt-bg);
  color: var(--yt-text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ----------------------------------------------------
   1. NAVBAR & UNIVERSAL RESPONSIVE HEADER
   ---------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--navbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--yt-border);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-badge {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-pink));
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 5px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.logo-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--yt-text-main);
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: var(--search-bg);
  border: 1px solid var(--search-border);
  border-radius: 20px;
  padding: 6px 16px;
  width: 420px;
  max-width: 100%;
  transition: all 0.2s ease;
}

.search-bar:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 10px rgba(0, 161, 214, 0.3);
}

.search-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--yt-text-main);
  width: 100%;
  font-size: 0.9rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav-icon-mobile {
  display: none;
}

.btn-nav {
  color: var(--yt-text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-nav:hover, .btn-nav.active {
  color: var(--yt-text-main);
  background-color: var(--yt-card-bg);
}

.btn-admin {
  background-color: var(--accent-blue);
  color: #fff !important;
  font-weight: 600;
  border-radius: 18px;
}

/* Theme Toggle Button */
.btn-theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--yt-card-bg);
  border: 1px solid var(--yt-border);
  color: var(--yt-text-main);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  flex-shrink: 0;
}

.btn-theme-toggle:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  box-shadow: 0 2px 8px rgba(0, 161, 214, 0.2);
}

/* Page Outer Structure */
.page-wrapper {
  display: flex;
  flex: 1;
  width: 100%;
  min-width: 0;   /* let children shrink instead of overflowing the viewport */
  max-width: 100%;
}

/* 72px Wide Mini Icon Sidebar Drawer (For Homepage) */
.mini-left-sidebar {
  width: 72px;
  min-width: 72px;
  background-color: var(--yt-bg);
  border-right: 1px solid var(--yt-border);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: sticky;
  top: 52px;
  height: calc(100vh - 52px);
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 90;
}

.mini-left-sidebar::-webkit-scrollbar {
  display: none;
}

.mini-side-item {
  width: 64px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--yt-text-secondary);
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.mini-side-item:hover, .mini-side-item.active {
  background-color: var(--yt-card-bg);
  color: var(--yt-text-main);
}

.mini-side-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.mini-side-label {
  font-size: 0.65rem;
  font-weight: 500;
  margin-top: 3px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58px;
}

/* Container */
.container {
  /* LAYOUT FIX (V5)
     .container is a flex ITEM inside .page-wrapper, sitting next to the 72px
     mini sidebar. Two things were wrong:
       1. No `min-width: 0`. A flex item defaults to min-width:auto, so it
          refuses to shrink below its content — wide content (a long title, a
          card, an ad iframe) pushed the box past the viewport. Combined with
          `overflow-x: hidden` on <body>, the overflow was silently CLIPPED,
          which is why the right-hand side looked cut off.
       2. No `flex: 1`, so it never claimed the leftover row space properly. */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1680px;
  margin: 0 auto;
  padding: 16px 24px;
  width: 100%;
}

/* Nothing inside the feed may spill past the container and get clipped. */
.container img,
.container iframe,
.container video,
.container table {
  max-width: 100%;
}
.video-grid,
.watch-bottom-grid {
  min-width: 0;
  max-width: 100%;
}
.yt-card,
.yt-details-row,
.yt-info-col {
  min-width: 0;
  max-width: 100%;
}
/* Long unbroken titles/URLs must wrap instead of stretching the column. */
.yt-title,
.yt-channel-name {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Ad slots are user-supplied HTML — keep them inside the layout. */
.ad-header-slot,
.ad-slot-box {
  max-width: 100%;
  overflow: hidden;
}

/* ----------------------------------------------------
   Top Categories Filter Bar
   V5.1 — SCROLLABLE ON DESKTOP
   The bar is overflow-x:auto, which a touchscreen can swipe but a mouse
   cannot: with 40 categories only the first ~9 were ever reachable on a
   desktop. The shell adds a ‹ / › button on each side (hidden on touch
   devices, which already swipe fine) plus a fade edge so it is visually
   obvious that more categories exist.
   ---------------------------------------------------- */
.genre-filter-shell {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.genre-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  flex: 1 1 auto;
  min-width: 0;
  scroll-padding-inline: 44px;   /* a chip never lands under an arrow button */
}

.genre-filter-bar::-webkit-scrollbar {
  display: none;
}

/* Arrow buttons. Hidden by default; main.js reveals whichever direction has
   more content, and hides both when everything already fits. */
.chip-nav {
  display: none;
  position: absolute;
  top: 0;
  bottom: 16px;                  /* line up with the bar's padding-bottom */
  width: 40px;
  z-index: 5;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--yt-text-main);
  background: transparent;
  transition: opacity 0.2s ease;
  padding: 0;
}
.chip-nav-left  { left: 0; }
.chip-nav-right { right: 0; }

/* The fade sits behind the glyph so chips slide out of view smoothly. */
.chip-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.chip-nav-left::before {
  background: linear-gradient(to right, var(--yt-bg) 45%, rgba(0, 0, 0, 0) 100%);
}
.chip-nav-right::before {
  background: linear-gradient(to left, var(--yt-bg) 45%, rgba(0, 0, 0, 0) 100%);
}

/* .is-visible is toggled by main.js — never shown when there is nothing to scroll to. */
.chip-nav.is-visible { display: flex; }
.chip-nav:hover { color: var(--accent-blue); }
.chip-nav:active { transform: scale(0.92); }

/* Touch devices swipe the bar natively; the arrows would only cover chips. */
@media (hover: none) and (pointer: coarse) {
  .chip-nav { display: none !important; }
  .genre-filter-bar { scroll-padding-inline: 0; }
}

.genre-chip {
  background-color: var(--chip-bg);
  color: var(--yt-text-main);
  border: 1px solid var(--yt-border);
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  user-select: none;
}

.genre-chip:hover {
  background-color: var(--chip-hover);
}

.genre-chip.active {
  background-color: var(--chip-active-bg);
  color: var(--chip-active-text);
  border-color: var(--chip-active-bg);
  font-weight: 600;
}

/* ----------------------------------------------------
   2. YOUTUBE STYLE CARD GRID (HOMEPAGE & BOTTOM FEED)
   ---------------------------------------------------- */
.video-grid {
  display: grid;
  /* V5 — 3 big cards per row on a normal desktop, then MORE columns as the
     screen grows. auto-fit + a large min width does this on its own: the
     browser fits as many >=var(--hp-card-min) columns as the width allows,
     so a 4K monitor naturally shows 5-6 while a laptop shows 3.
     (Admin can still tune the minimum from the Homepage Control Center.) */
  grid-template-columns: repeat(auto-fit, minmax(var(--hp-card-min, 380px), 1fr));
  gap: 26px 20px;
}

/* Explicit column counts per breakpoint so the layout is predictable and the
   thumbnails stay large, instead of the browser squeezing in a 4th narrow one. */
@media (min-width: 1000px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); }   /* desktop: 3 big */
}
@media (min-width: 1600px) {
  .video-grid { grid-template-columns: repeat(4, 1fr); }   /* large desktop */
}
@media (min-width: 2100px) {
  .video-grid { grid-template-columns: repeat(5, 1fr); }   /* ultrawide / 4K */
}
@media (min-width: 2700px) {
  .video-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Watch page bottom feed — same "big cards, more of them on wider screens"
   behaviour as the homepage. The watch page has a sidebar eating width, so it
   steps up one breakpoint later. */
.watch-bottom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px 18px;
  width: 100%;
}

@media (min-width: 1100px) {
  .watch-bottom-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1800px) {
  .watch-bottom-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 2400px) {
  .watch-bottom-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 768px) {
  .watch-bottom-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 8px;
  }
}

@media (max-width: 480px) {
  .watch-bottom-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 8px;
  }
}

.yt-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--yt-text-main);
  background: transparent;
  cursor: pointer;
  width: 100%;
  height: 100%;          /* equal-height cards across a grid row */
  min-width: 0;
  max-width: 100%;
}

.yt-card:hover .yt-thumb-img {
  transform: scale(1.04);
}

/* .yt-thumb-wrapper is defined once, in the CARD ALIGNMENT LOCK block below. */

/* .yt-thumb-img is defined once, in the CARD ALIGNMENT LOCK block below. */

.badge-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: var(--radius-badge);
}

.badge-host {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 161, 214, 0.9);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-badge);
}

.badge-trending {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #ff4d4f, var(--accent-pink));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-badge);
}

.yt-details-row {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  align-items: flex-start;
}

.yt-channel-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--yt-card-bg);
  border: 1px solid var(--yt-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent-blue);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.yt-info-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.yt-title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--yt-text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  min-height: 2.7em;     /* reserve 2 lines so every card is the same height */
}

.yt-channel-name {
  font-size: 0.8rem;
  color: var(--yt-text-secondary);
  font-weight: 400;
}

.yt-meta-row {
  font-size: 0.8rem;
  color: var(--yt-text-secondary);
  margin-top: 2px;
}

/* ----------------------------------------------------
   3. OFFICIAL YOUTUBE DESKTOP WATCH PAGE LAYOUT
   ---------------------------------------------------- */
.watch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px;
  width: 100%;
}

.main-player-col {
  min-width: 0;
  width: 100%;
}

.player-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}

@media (max-width: 768px) {
}

.player-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Video Title directly below player (YouTube Style) */
.yt-watch-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--yt-text-main);
  margin-top: 14px;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Channel & Meta Action Row (YouTube Style) */
.yt-channel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

.yt-channel-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yt-channel-pic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.yt-channel-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--yt-text-main);
}

.yt-channel-sub {
  font-size: 0.78rem;
  color: var(--yt-text-secondary);
}

.yt-stats-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--yt-text-secondary);
  font-size: 0.82rem;
  background: var(--yt-card-bg);
  border: 1px solid var(--yt-border);
  padding: 6px 14px;
  border-radius: 20px;
}

/* Expandable Description Box */
.yt-description-box {
  background-color: var(--yt-card-bg);
  border: 1px solid var(--yt-border);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--yt-text-main);
}

/* Official YouTube Watch Page Right Sidebar Card (1 Per Row) */
.sidebar-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

#sidebarRelatedList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.sidebar-yt-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  color: var(--yt-text-main);
  background: transparent;
  transition: opacity 0.2s ease;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
}

.sidebar-yt-card:hover {
  opacity: 0.85;
}

.sidebar-thumb-box {
  width: 168px;
  min-width: 168px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: #1a1a1a;
  position: relative;
  flex: 0 0 auto;        /* fixed thumb: never reflows with the title */
}

.sidebar-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidebar-info-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 3px;
  overflow: hidden;
}

.sidebar-title {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--yt-text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 0;
}

/* Infinite Scroll Loader */
.scroll-loader {
  text-align: center;
  padding: 16px 0;
  color: var(--yt-text-secondary);
  font-size: 0.85rem;
  grid-column: 1 / -1;
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 161, 214, 0.3);
  border-radius: 50%;
  border-top-color: var(--accent-blue);
  animation: spin 0.8s ease-in-out infinite;
}

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

/* Responsive Media Queries for Tablet & Mobile Screens */
@media (max-width: 1024px) {
  .watch-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .mini-left-sidebar {
    display: none !important;
  }
  .navbar {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .logo-text {
    display: none;
  }
  /* MOBILE SEARCH FIX (V5)
     Two problems were stacked here:
       1. .search-bar is an outer flex wrapper that ALSO carried its own border
          and padding, while .search-box-wrap inside it has a SECOND border and
          padding — two shells around one input.
       2. Everything shared a single navbar row. Measured on a 360px phone with
          a logged-in user, the search bar was left with only ~67px: logo +
          "+ Upload" + avatar + theme + language + mic ate the rest.
     Fix: the outer shell goes transparent, and the search bar moves onto its
     own full-width second row so it always has the whole screen. */
  .navbar {
    flex-wrap: wrap !important;
  }
  .search-bar {
    order: 3;                 /* drop below logo + nav icons */
    flex: 1 0 100%;           /* own row, full width */
    width: 100% !important;
    min-width: 0;
    margin: 6px 0 2px;
    padding: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 6px !important;
  }
  .search-bar:focus-within {
    border: none !important;
    box-shadow: none !important;
  }
  .search-box-wrap {
    min-width: 0;
    flex: 1 1 auto;
  }
  .search-input {
    font-size: 0.85rem;
    min-width: 0;
    padding: 8px 10px !important;
  }
  /* keep the 🔍 button from eating the input's width */
  .search-box-wrap > button {
    padding: 8px 12px !important;
    font-size: 0.95rem !important;
    flex-shrink: 0;
  }
  /* Row 1: logo on the left, actions on the right. */
  .logo-container {
    order: 1;
    flex-shrink: 1;
    min-width: 0;
  }
  .nav-links {
    order: 2;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
  }
  .nav-links .btn-primary {
    padding: 6px 9px !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
  }
  .nav-text-desktop {
    display: none !important;
  }
  .nav-icon-mobile {
    display: inline-block !important;
    font-size: 1rem;
    line-height: 1;
  }
  .btn-nav {
    padding: 6px 8px;
    font-size: 0.8rem;
    border-radius: 20px;
  }
  .btn-theme-toggle {
    padding: 6px 8px;
    font-size: 0.8rem;
    border-radius: 20px;
  }
  .container {
    padding: 10px;
  }
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 8px !important;
  }
  .sidebar-thumb-box {
    width: 125px !important;
    min-width: 125px !important;
  }
  .yt-title {
    font-size: 0.82rem;
    line-height: 1.25;
  }
  .yt-channel-name, .yt-meta-row {
    font-size: 0.72rem;
  }
  .yt-channel-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
  .yt-watch-title {
    font-size: 1.05rem;
  }
  .yt-channel-pic {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
  .yt-stats-right {
    font-size: 0.75rem;
    padding: 4px 8px;
  }
}

.footer {
  background-color: var(--footer-bg);
  border-top: 1px solid var(--yt-border);
  padding: 16px;
  text-align: center;
  color: var(--yt-text-secondary);
  font-size: 0.78rem;
  margin-top: auto;
}

/* ================= BUILD30 — small-screen responsive polish ================= */
.yt-title, .sidebar-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 560px) {
  .navbar {
    gap: 4px !important;
    padding: 6px 8px !important;
  }
  .btn-voice-search {
    padding: 5px 7px !important;
  }
  .search-bar {
    min-width: 0;
    gap: 5px !important;
  }
  .search-input {
    font-size: 0.82rem !important;
    padding: 7px 9px !important;
  }
  .search-box-wrap > button {
    padding: 7px 10px !important;
    font-size: 0.9rem !important;
  }
  /* On the narrowest phones the mic is optional — the input matters more. */
  .btn-voice-search {
    padding: 5px 8px !important;
    font-size: 0.9rem !important;
  }
  /* The logo badge must not steal room from the search field. */
  .logo-badge {
    font-size: 0.85rem !important;
    padding: 3px 7px !important;
  }
  .yt-watch-title {
    font-size: 1.02rem;
    line-height: 1.3;
  }
  .yt-channel-bar {
    gap: 8px;
  }
  .yt-stats-right {
    padding: 5px 10px;
    font-size: 0.78rem;
  }
  .watch-bottom-grid {
    gap: 12px 10px;
  }
  .genre-filter-bar {
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .footer {
    padding: 14px 10px;
  }
  .more-feed-title {
    margin-top: 18px;
  }
  .yt-description-box {
    font-size: 0.82rem;
    padding: 12px;
  }
}

@media (max-width: 360px) {
  .search-input {
    font-size: 0.74rem !important;
    padding: 7px 8px !important;
  }
  .logo-badge {
    font-size: 0.85rem;
    padding: 4px 7px;
  }
  .btn-nav {
    padding: 5px 7px;
    font-size: 0.75rem;
  }
  .watch-bottom-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px 8px;
  }
}

/* ----------------------------------------------------
   V5 — Image logo (Admin → Branding → Logo Image).
   Used instead of the text badge when a logo URL is set.
   ---------------------------------------------------- */
.logo-img-brand {
  height: 34px;
  max-width: 190px;
  object-fit: contain;
  display: block;
}
@media (max-width: 768px) {
  .logo-img-brand { height: 28px; max-width: 130px; }
}
@media (max-width: 560px) {
  .logo-img-brand { height: 26px; max-width: 110px; }
}

/* ----------------------------------------------------
   V5 — CARD ALIGNMENT LOCK
   Cards used to end up different heights (and the thumbnail appeared to
   "grow") because:
     • a 1-line title next to a 2-line title changed the row height, and grid
       rows stretch to the tallest item;
     • aspect-ratio has no effect if an <img> reports its own intrinsic size
       before CSS applies, so odd-sized images briefly blew the box up.
   Locking the thumbnail box and reserving a fixed 2-line title area keeps
   every card identical.
   ---------------------------------------------------- */
.yt-thumb-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  flex: 0 0 auto;          /* never stretch with the rest of the card */
  border-radius: var(--radius-card);
  background-color: #1f1f1f;
}
.yt-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;   /* hover zoom, kept from the old rule */
}

/* Grid items align to the top of their row. */
.video-grid > .yt-card,
.watch-bottom-grid > .yt-card { align-self: start; }
/* Landscape phones: a portrait short should use the full height. */
@media (max-width: 900px) and (orientation: landscape) {
}

/* ----------------------------------------------------
   V5 — VISIBLE CHECKBOXES & RADIOS
   There was no styling for form controls at all, so in dark mode the browser
   drew a dark box on a dark panel and a ticked checkbox looked identical to an
   empty one — "Select All" appeared to do nothing. These rules give every
   checkbox a real size, a clear border and a bright accent tick in both themes.
   ---------------------------------------------------- */
:root { color-scheme: light; }
/* The theme switcher uses BOTH [data-theme="dark"] and body.dark-mode. */
[data-theme="dark"], body.dark-mode { color-scheme: dark; }

/* Draw the box ourselves so "empty" and "ticked" can never look alike.
   accent-color alone was not enough: on a dark panel an unchecked native box
   still reads as a filled blue square, so every row looked selected. */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  position: relative;
  border: 2px solid var(--text-muted, #8b8b8b);
  border-radius: 4px;
  background: transparent;           /* UNCHECKED = clearly hollow */
  transition: background .12s ease, border-color .12s ease;
}
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--accent-blue, #00a1d6); }

/* CHECKED = solid blue box with a white tick drawn on top */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--accent-blue, #00a1d6);
  border-color: var(--accent-blue, #00a1d6);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent-pink, #fb7299);
  outline-offset: 2px;
}

/* Tint the whole row of a selected item so bulk selection is obvious. */
tr:has(input[type="checkbox"]:checked) {
  background: rgba(0, 161, 214, 0.12) !important;
}
.video-manage-card:has(input[type="checkbox"]:checked),
.search-result-card:has(input[type="checkbox"]:checked) {
  outline: 2px solid var(--accent-blue, #00a1d6);
  outline-offset: -2px;
  background: rgba(0, 161, 214, 0.08);
}


/* ----------------------------------------------------
   V5.3 — INSTANT SEARCH OVERLAY (watch page)
   Before: searching on the watch page swapped out the "Related Streams" grid,
   which sits below the player, the description and the comments — so the
   results were off-screen and felt like nothing had happened until you
   scrolled. Now the page behind is blurred and dimmed and the results float
   in front of it, so they are visible the instant they arrive.
   ---------------------------------------------------- */

/* Everything except the overlay and the header gets blurred. A dedicated
   class on <body> drives it, so nothing needs inline styles. */
body.search-active .navbar {
  position: relative;
  z-index: 10050;                    /* the search box must stay usable */
}
/* The watch page has no .page-wrapper (that is a homepage element) — it uses
   <main class="container"> directly, so both must be listed or nothing blurs. */
body.search-active .page-wrapper,
body.search-active > main.container,
body.search-active > footer,
body.search-active .footer {
  filter: blur(7px) brightness(0.55);
  transform: scale(1.006);           /* hides the soft edge blur leaves */
  transition: filter 0.22s ease, transform 0.22s ease;
  pointer-events: none;              /* no accidental clicks on the video */
  user-select: none;
}
/* NOTE: on this site <body> is the scrolling element (html,body are flex
   columns), so the lock belongs here rather than on <html>. Verified: with the
   overlay open body.scrollTop stays exactly where the visitor left it (1800px
   in testing) and is restored untouched on close. */
body.search-active {
  overflow: hidden;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.search-overlay.is-open {
  display: block;
  opacity: 1;
}

.search-overlay-inner {
  position: absolute;
  top: 64px;                         /* clears the fixed navbar */
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1240px, calc(100vw - 32px));
  max-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  background: var(--yt-bg, #0f0f0f);
  border: 1px solid var(--yt-border, #32353f);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.22s ease;
}
.search-overlay.is-open .search-overlay-inner {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.search-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--yt-border, #32353f);
  background: var(--yt-card-bg, #18191c);
  flex: 0 0 auto;
}
.search-overlay-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--yt-text-main, #fff);
  overflow-wrap: anywhere;
}
.search-overlay-count {
  font-size: 0.78rem;
  color: var(--yt-text-secondary, #aaa);
  margin-top: 2px;
}
.search-overlay-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--yt-border, #32353f);
  background: var(--yt-bg, #0f0f0f);
  color: var(--yt-text-main, #fff);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.search-overlay-close:hover {
  background: #ff4d4f;
  border-color: #ff4d4f;
  color: #fff;
  transform: rotate(90deg);
}

.search-overlay-body {
  overflow-y: auto;
  overscroll-behavior: contain;      /* scrolling here never scrolls the page */
  padding: 16px 18px 22px;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

/* Same card proportions as the rest of the site, just denser. */
.search-overlay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px 16px;
}
/* Breakpoint matches the navbar's own 768px rule: at and below it the search
   bar moves onto its own second row, so the panel must start lower or it
   covers the very input the visitor is typing into. */
@media (max-width: 768px) {
  .search-overlay-inner { top: 104px; width: calc(100vw - 16px); max-height: calc(100vh - 116px); border-radius: 12px; }
  .search-overlay-head { padding: 10px 13px; }
  .search-overlay-body { padding: 12px 13px 18px; }
  .search-overlay-title { font-size: 0.9rem; }
  .search-overlay-count { font-size: 0.72rem; line-height: 1.35; }
  .search-overlay-close { width: 32px; height: 32px; font-size: 0.9rem; }
}
@media (max-width: 640px) {
  .search-overlay-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
}

/* Skeleton placeholders so the overlay never appears empty while fetching. */
.search-skeleton {
  border-radius: var(--radius-card, 12px);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.11) 37%,
    rgba(255, 255, 255, 0.05) 63%);
  background-size: 400% 100%;
  animation: searchShimmer 1.3s ease-in-out infinite;
}
.search-skeleton-thumb { width: 100%; aspect-ratio: 16 / 9; }
.search-skeleton-line { height: 11px; margin-top: 9px; border-radius: 5px; }
.search-skeleton-line.short { width: 58%; }
@keyframes searchShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.search-overlay-msg {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 10px;
  color: var(--yt-text-secondary, #aaa);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Reduced-motion users get the dim, but no blur or slide. */
@media (prefers-reduced-motion: reduce) {
  body.search-active .page-wrapper,
  body.search-active > main.container,
  body.search-active > footer,
  body.search-active .footer { filter: brightness(0.5); transform: none; }
  .search-overlay,
  .search-overlay-inner { transition: none; }
}