/* ==========================================================================
   BeeHiwe Popular Channels discovery - page body only.

   Loaded by layout/popular_channels/beehiwe/shell.html and by nothing else.
   The header, sidebar and footer belong to the parent theme and are
   untouched: every rule is namespaced under .bh-app / .bh-chan-app, and the
   one rule that reaches outside (#main-container, below) is safe because the
   theme's page swap replaces #container_content wholesale and takes this
   <link> with it.

   PARENT THEME LEAKS
   ------------------
   youplay's stylesheets style bare elements, and night-mode.css does it with
   !important, so a plain class rule here loses:

     night-mode.css:84  p, span, h1..h6, button, input, li { color: #eee !important }
     night-mode.css:83  a { color: #eee !important }
     night-mode.css:85  li { background: #212121 !important; border-color: #444 !important }
     night-mode.css:89  ul { background: #212121 !important; border-color: #444 !important }

   The reset block below neutralises them, which is why colour and background
   declarations on p / span / h1-h3 / a / button / ul / li carry !important
   throughout this file. They are ordered after the reset, so equal-specificity
   component rules win on source order.

   ACCENTS
   -------
   Purple carries the page's own furniture - the title mark, the selected
   filter, the follow buttons. BeeHiwe gold stays reserved for rank, so the
   #1 creator and the trending numbers keep the accent the rest of the site
   already reads as "top".
   ========================================================================== */

/* --- page canvas -------------------------------------------------------- */

/* popular_channels is not in container.html's `container-full` list, so the
   parent pins it to a 1056px column - too narrow for a five-card creator row
   beside a discovery rail. Widened to the same cap the other BeeHiwe body
   redesigns use, here rather than in the shared template so no other page's
   offset can change. */
#main-container.container {
   box-sizing: border-box;
   width: 100%;
   max-width: 1750px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 20px;
   padding-right: 20px;
}

.bh-app {
   --bh-card:        #202325;
   --bh-raise:       #2b2e31;
   --bh-line:        rgba(255, 255, 255, .09);
   --bh-line-soft:   rgba(255, 255, 255, .07);
   --bh-text:        #e8eaed;
   --bh-text-dim:    #aab0b6;
   --bh-text-mute:   #8f969d;

   --bh-accent:      #ffb800;
   --bh-accent-wash: rgba(255, 184, 0, .10);
   --bh-accent-line: rgba(255, 184, 0, .24);

   --bh-purple:      #a78bfa;
   --bh-purple-mid:  #8b5cf6;
   --bh-purple-wash: rgba(139, 92, 246, .14);
   --bh-purple-line: rgba(167, 139, 250, .32);

   --bh-rail:   clamp(272px, 21%, 330px);
   --bh-gap:    18px;
   --bh-r-card: 12px;
   --bh-r-btn:  9px;

   /* Creator rows: how many cards are visible, and the gap between them.
      Both are re-declared per breakpoint; the card width is derived from
      them so a row is always exactly full with no trailing sliver. */
   --bh-cols:  5;
   --bh-cols-sm: 5;
   --bh-cgap:  13px;

   color: var(--bh-text);
   font-size: 15px;
}

.bh-app *,
.bh-app *::before,
.bh-app *::after { box-sizing: border-box; }

/* --- parent theme reset (see header note) ------------------------------- */

.bh-app :where(p, span, h1, h2, h3, h4, a, button, input, li, small, b, strong) {
   color: inherit !important;
}
.bh-app :where(ul, ol, li) {
   background: transparent !important;
   border-color: var(--bh-line-soft) !important;
}

.bh-app :where(a) { text-decoration: none; }
.bh-app :where(a:hover) { text-decoration: none; }
.bh-app :where(img) { max-width: 100%; display: block; }
.bh-app :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; font-weight: inherit; }
.bh-app :where(ul, ol) { list-style: none; }
.bh-app :where(button) { font: inherit; background: none; border: 0; cursor: pointer; }

.bh-app :focus-visible {
   outline: 2px solid var(--bh-purple);
   outline-offset: 2px;
   border-radius: 4px;
}

.bh-dot { color: var(--bh-text-mute) !important; margin: 0 4px; }
.bh-verified { flex: none; vertical-align: -2px; }

/* Announcements for outcomes with no visual of their own. */
.bh-sr-live {
   position: absolute; width: 1px; height: 1px;
   margin: -1px; padding: 0; border: 0;
   clip: rect(0 0 0 0); clip-path: inset(50%);
   overflow: hidden; white-space: nowrap;
}

/* --- page heading ------------------------------------------------------- */

.bh-page-head {
   display: flex; align-items: flex-end; justify-content: space-between;
   gap: 18px; flex-wrap: wrap;
   padding-top: 16px;
}
.bh-page-head-text { min-width: 0; }

.bh-page-title {
   display: flex; align-items: center; gap: 10px;
   font-size: clamp(28px, 2vw, 32px);
   font-weight: 700; letter-spacing: -.022em;
   line-height: 1.18;
   color: var(--bh-text) !important;
}
.bh-page-icon { display: inline-flex; }
.bh-page-icon svg { width: 26px; height: 26px; }
.bh-ico-star { color: var(--bh-purple) !important; }

.bh-page-sub {
   margin-top: 7px;
   font-size: 14.5px; line-height: 1.5;
   color: var(--bh-text-dim) !important;
}

/* --- filter bar --------------------------------------------------------- */

.bh-filters {
   display: flex; align-items: center; gap: 14px;
   margin: 18px 0;
}

.bh-filter-scroll {
   display: flex; align-items: center; gap: 9px;
   flex: 1 1 auto; min-width: 0;
   overflow-x: auto; overflow-y: visible;
   scrollbar-width: none; -ms-overflow-style: none;
}
.bh-filter-scroll::-webkit-scrollbar { display: none; }

.bh-pill {
   display: inline-flex; align-items: center; gap: 7px;
   height: 36px; padding: 0 14px; flex: none;
   border-radius: var(--bh-r-btn);
   background: var(--bh-raise);
   border: 1px solid var(--bh-line);
   font-size: 13.5px; font-weight: 500;
   color: var(--bh-text) !important;
   white-space: nowrap;
   transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bh-pill:hover { background: #3a3e42; border-color: rgba(255, 255, 255, .18); }

/* Selected filter carries the page's purple. */
.bh-pill.is-active {
   background: var(--bh-purple-wash);
   border-color: var(--bh-purple-line);
   color: #d8ccff !important;
}
.bh-pill.is-active:hover { background: rgba(139, 92, 246, .22); }
.bh-pill.is-active .bh-pill-icon { color: var(--bh-purple) !important; }

.bh-pill-icon { display: inline-flex; color: var(--bh-text-mute) !important; }
.bh-pill-icon svg { width: 15px; height: 15px; }
.bh-pill-caret { display: inline-flex; margin-left: 1px; color: var(--bh-text-mute) !important; }

.bh-ico-bolt  { color: var(--bh-accent) !important; }
.bh-ico-trend { color: #4ade80 !important; }
.bh-ico-video { color: #60a5fa !important; }
.bh-ico-loop  { color: #f472b6 !important; }
.bh-ico-pen   { color: #22d3ee !important; }
.bh-ico-fire  { color: #f97316 !important; }
.bh-ico-crown { color: var(--bh-accent) !important; }

/* --- period menu -------------------------------------------------------- */

.bh-more { position: relative; flex: none; }
.bh-period { margin-left: auto; }

.bh-more-menu {
   position: absolute; top: calc(100% + 7px); right: 0; z-index: 30;
   min-width: 178px;
   padding: 6px;
   background: var(--bh-raise) !important;
   border: 1px solid var(--bh-line) !important;
   border-radius: var(--bh-r-btn);
   box-shadow: 0 10px 26px rgba(0, 0, 0, .40);
}
.bh-more-menu[hidden] { display: none; }
.bh-more-menu li { background: transparent !important; }
.bh-more-menu a {
   display: flex; align-items: center; justify-content: space-between; gap: 10px;
   padding: 8px 10px; border-radius: 6px;
   font-size: 13.5px; color: var(--bh-text) !important;
}
.bh-more-menu a:hover { background: rgba(255, 255, 255, .08); }
.bh-more-menu a.is-active { color: #d8ccff !important; background: var(--bh-purple-wash); }

/* --- shared controls ---------------------------------------------------- */

.bh-btn-primary {
   display: inline-flex; align-items: center; justify-content: center; gap: 7px;
   height: 38px; padding: 0 18px;
   border-radius: var(--bh-r-btn);
   background: linear-gradient(135deg, #ffc62b 0%, #ff9d00 100%);
   color: #17120a !important;
   font-size: 14px; font-weight: 600; white-space: nowrap;
   transition: filter .15s ease;
}
.bh-btn-primary:hover { filter: brightness(1.07); }

.bh-card {
   background: var(--bh-card);
   border: 1px solid var(--bh-line);
   border-radius: var(--bh-r-card);
   padding: 16px;
}

.bh-sec-head {
   display: flex; align-items: center; justify-content: space-between;
   gap: 14px; margin-bottom: 13px;
}
.bh-sec-title {
   display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
   font-size: 17px; font-weight: 600; letter-spacing: -.015em;
   color: var(--bh-text) !important;
}
.bh-sec-icon { display: inline-flex; }
.bh-sec-icon svg { width: 17px; height: 17px; }
.bh-sec-count { font-size: 12.5px; color: var(--bh-text-mute) !important; white-space: nowrap; }

/* Section subtitle - a sibling of the heading, not part of it, so a screen
   reader announces "Rising Stars" and not the tagline with it. */
.bh-sec-headings { min-width: 0; }
.bh-sec-sub {
   margin-top: 3px;
   font-size: 12.5px; line-height: 1.45;
   color: var(--bh-text-mute) !important;
}

.bh-view-all {
   display: inline-flex; align-items: center; gap: 5px;
   font-size: 12.5px; font-weight: 500;
   color: var(--bh-text-dim) !important;
   white-space: nowrap;
   transition: color .15s ease;
}
.bh-view-all:hover { color: var(--bh-purple) !important; }

/* One failing panel says so where the panel is, instead of blanking the page. */
.bh-sec-error {
   display: flex; align-items: center; gap: 9px;
   padding: 14px 15px;
   border-radius: 10px;
   background: rgba(239, 68, 68, .09) !important;
   border: 1px solid rgba(239, 68, 68, .26);
   font-size: 13px; line-height: 1.45;
   color: #f7b4b4 !important;
}
.bh-sec-error-icon { display: inline-flex; flex: none; color: #ef7676 !important; }

/* --- layout ------------------------------------------------------------- */

.bh-body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--bh-rail);
   gap: var(--bh-gap);
   align-items: start;
   padding-bottom: 28px;
}
.bh-col-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.bh-col-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* --- creator rails ------------------------------------------------------ */

.bh-rail-wrap { position: relative; }

.bh-rail {
   display: flex; gap: var(--bh-cgap);
   overflow-x: auto; scroll-behavior: smooth;
   scrollbar-width: none; -ms-overflow-style: none;
   scroll-snap-type: x proximity;
   /* room for the focus ring on the cards' own controls */
   padding: 2px;
   margin: -2px;
}
.bh-rail::-webkit-scrollbar { display: none; }

.bh-rail-next,
.bh-rail-prev {
   position: absolute; top: 50%; transform: translateY(-50%);
   width: 34px; height: 34px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   background: var(--bh-raise) !important;
   border: 1px solid var(--bh-line);
   color: var(--bh-text) !important; z-index: 4;
   box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
   transition: background .15s ease;
}
.bh-rail-next { right: -6px; }
.bh-rail-prev { left: -6px; }
.bh-rail-next:hover,
.bh-rail-prev:hover { background: #363a3e !important; }
.bh-rail-next[hidden],
.bh-rail-prev[hidden] { display: none; }

/* --- creator card ------------------------------------------------------- */

.bh-ccard {
   position: relative;
   flex: 0 0 calc((100% - (var(--bh-cols) - 1) * var(--bh-cgap)) / var(--bh-cols));
   min-width: 0;
   scroll-snap-align: start;
   display: flex; flex-direction: column; align-items: center;
   padding: 18px 14px 14px;
   border-radius: var(--bh-r-card);
   background: var(--bh-card) !important;
   border: 1px solid var(--bh-line) !important;
   text-align: center;
   transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bh-ccard:hover {
   transform: translateY(-2px);
   border-color: rgba(255, 255, 255, .17) !important;
   box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}

/* Rank badge, upper-left. */
.bh-ccard-rank {
   position: absolute; top: 10px; left: 10px;
   min-width: 24px; height: 24px; padding: 0 6px;
   display: inline-flex; align-items: center; justify-content: center;
   border-radius: 7px;
   font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
   background: var(--bh-raise) !important;
   border: 1px solid var(--bh-line);
   color: var(--bh-text-dim) !important;
}

/* Gold for first, cool silver for second, bronze for third. The glow is one
   soft ring, not a halo - the card still has to sit in a row of five. */
.bh-rank-1 .bh-ccard-rank {
   background: linear-gradient(135deg, #ffd257, #f0a000) !important;
   border-color: rgba(255, 210, 87, .5);
   color: #2a1d00 !important;
}
.bh-rank-1 { border-color: rgba(255, 184, 0, .34) !important; }
.bh-rank-1 .bh-ccard-avatar {
   box-shadow: 0 0 0 2px rgba(255, 184, 0, .55), 0 0 18px rgba(255, 184, 0, .22);
}
.bh-rank-1:hover { border-color: rgba(255, 184, 0, .5) !important; }

.bh-rank-2 .bh-ccard-rank {
   background: linear-gradient(135deg, #dbe6f0, #a9bdd1) !important;
   border-color: rgba(219, 230, 240, .5);
   color: #1b2530 !important;
}
.bh-rank-2 .bh-ccard-avatar { box-shadow: 0 0 0 2px rgba(190, 212, 232, .45); }

.bh-rank-3 .bh-ccard-rank {
   background: linear-gradient(135deg, #e2a06a, #c26b2c) !important;
   border-color: rgba(226, 160, 106, .5);
   color: #2a1607 !important;
}
.bh-rank-3 .bh-ccard-avatar { box-shadow: 0 0 0 2px rgba(214, 140, 82, .45); }

.bh-ccard-avatar {
   width: 104px; height: 104px; border-radius: 50%;
   overflow: hidden; flex: none; display: block;
   background: var(--bh-raise) !important;
   margin-bottom: 12px;
}
.bh-ccard-avatar img { width: 100%; height: 100%; object-fit: cover; }

.bh-ccard-name {
   display: flex; align-items: center; justify-content: center; gap: 5px;
   max-width: 100%;
   font-size: 16px; font-weight: 600; letter-spacing: -.012em;
   color: var(--bh-text) !important;
}
.bh-ccard-name a {
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-ccard-name a:hover { color: var(--bh-purple) !important; }

.bh-ccard-user {
   margin-top: 2px;
   font-size: 12.5px; color: var(--bh-text-mute) !important;
   max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bh-ccard-topics {
   margin-top: 7px;
   font-size: 12px; line-height: 1.4;
   color: var(--bh-text-dim) !important;
   max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bh-ccard-stats {
   display: flex; align-items: flex-start; justify-content: center;
   gap: 4px; width: 100%;
   margin: 13px 0 13px;
}
.bh-ccard-stats li {
   flex: 1 1 0; min-width: 0;
   display: flex; flex-direction: column; gap: 2px;
}
.bh-stat-value {
   font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
   letter-spacing: -.02em;
   color: var(--bh-text) !important;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-stat-label {
   font-size: 10.5px; letter-spacing: .02em;
   color: var(--bh-text-mute) !important;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- follow ------------------------------------------------------------- */

.bh-follow {
   flex: none;
   min-width: 68px; height: 30px; padding: 0 13px;
   display: inline-flex; align-items: center; justify-content: center;
   border-radius: 999px;
   background: transparent;
   border: 1px solid var(--bh-purple-line);
   font-size: 12.5px; font-weight: 600;
   color: var(--bh-purple) !important;
   white-space: nowrap;
   transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bh-follow:hover {
   background: var(--bh-purple-mid);
   border-color: var(--bh-purple-mid);
   color: #fff !important;
}
.bh-follow.is-following {
   background: var(--bh-purple-wash);
   border-color: var(--bh-purple-line);
   color: #d8ccff !important;
}
.bh-follow.is-following:hover {
   background: rgba(139, 92, 246, .26);
   color: #fff !important;
}
.bh-follow-wide {
   width: 100%; height: 34px; margin-top: auto;
   border-radius: var(--bh-r-btn);
   font-size: 13px;
}
/* Your own card gets the same footprint without a control that does nothing. */
.bh-follow-self {
   border-color: var(--bh-line);
   color: var(--bh-text-dim) !important;
   cursor: pointer;
}
.bh-follow-self:hover {
   background: rgba(255, 255, 255, .08);
   border-color: var(--bh-line);
   color: var(--bh-text) !important;
}
.bh-follow-sm {
   min-width: 0; height: 26px; padding: 0 11px;
   font-size: 11.5px;
}

/* --- rising stars card -------------------------------------------------- */

.bh-rail-sm { --bh-cols: var(--bh-cols-sm); }

.bh-rcard {
   flex: 0 0 calc((100% - (var(--bh-cols-sm) - 1) * var(--bh-cgap)) / var(--bh-cols-sm));
   min-width: 0;
   scroll-snap-align: start;
   display: flex; flex-direction: column;
   padding: 13px;
   border-radius: var(--bh-r-card);
   background: var(--bh-card) !important;
   border: 1px solid var(--bh-line) !important;
   transition: transform .15s ease, border-color .15s ease;
}
.bh-rcard:hover {
   transform: translateY(-2px);
   border-color: rgba(255, 255, 255, .17) !important;
}

.bh-rcard-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bh-rcard-avatar {
   width: 46px; height: 46px; border-radius: 50%;
   overflow: hidden; flex: none; display: block;
   background: var(--bh-raise) !important;
}
.bh-rcard-avatar img { width: 100%; height: 100%; object-fit: cover; }

.bh-rcard-id { min-width: 0; }
.bh-rcard-name {
   display: flex; align-items: center; gap: 5px;
   font-size: 13.5px; font-weight: 600;
   color: var(--bh-text) !important;
   white-space: nowrap; overflow: hidden;
}
.bh-rcard-name a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-rcard-name a:hover { color: var(--bh-purple) !important; }
.bh-rcard-user {
   margin-top: 2px;
   font-size: 11.5px; color: var(--bh-text-mute) !important;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bh-rcard .bh-ccard-topics { margin-top: 9px; text-align: left; }

.bh-stats-sm {
   justify-content: flex-start;
   gap: 14px;
   margin: 10px 0 12px;
}
.bh-stats-sm li { flex: 0 1 auto; }
.bh-stats-sm .bh-stat-value { font-size: 13.5px; }

/* --- top channels by category ------------------------------------------- */

.bh-ccat-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 12px;
}

.bh-ccat-card.is-extra { display: none; }
.bh-ccat-grid.is-open .bh-ccat-card.is-extra { display: flex; }

.bh-ccat-card {
   display: flex; flex-direction: column;
   padding: 14px;
   border-radius: var(--bh-r-card);
   background: var(--bh-card) !important;
   border: 1px solid var(--bh-line) !important;
   transition: border-color .15s ease, transform .15s ease;
}
.bh-ccat-card:hover { transform: translateY(-2px); }

.bh-ccat-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.bh-cat-icon {
   display: inline-flex; align-items: center; justify-content: center;
   width: 30px; height: 30px; border-radius: 9px; flex: none;
}
.bh-ccat-name {
   font-size: 14px; font-weight: 600; letter-spacing: -.01em;
   color: var(--bh-text) !important;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bh-ccat-list { display: flex; flex-direction: column; gap: 7px; }
.bh-ccat-list li {
   display: flex; align-items: center; gap: 7px; min-width: 0;
   font-size: 12.5px;
}
.bh-ccat-rank {
   flex: none; width: 14px;
   font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
   color: var(--bh-text-mute) !important;
}
.bh-ccat-link {
   min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   color: var(--bh-text-dim) !important;
   transition: color .15s ease;
}
.bh-ccat-link:hover { color: var(--bh-purple) !important; }

.bh-ccat-empty {
   font-size: 12px; line-height: 1.45;
   color: var(--bh-text-mute) !important;
}

.bh-ccat-all {
   display: inline-flex; align-items: center; gap: 4px;
   margin-top: 12px; padding-top: 10px;
   border-top: 1px solid var(--bh-line-soft);
   font-size: 12px; font-weight: 500;
   color: var(--bh-text-mute) !important;
   transition: color .15s ease;
}
.bh-ccat-all:hover { color: var(--bh-purple) !important; }

/* Category tints, kept low enough that a category card never outweighs the
   creator cards above it. */
.bh-tint-0 .bh-cat-icon { background: rgba(96, 165, 250, .14); color: #60a5fa !important; }
.bh-tint-1 .bh-cat-icon { background: rgba(244, 114, 182, .14); color: #f472b6 !important; }
.bh-tint-2 .bh-cat-icon { background: rgba(34, 211, 238, .14);  color: #22d3ee !important; }
.bh-tint-3 .bh-cat-icon { background: rgba(74, 222, 128, .14);  color: #4ade80 !important; }
.bh-tint-4 .bh-cat-icon { background: rgba(167, 139, 250, .14); color: #a78bfa !important; }
.bh-tint-5 .bh-cat-icon { background: rgba(255, 184, 0, .14);   color: #ffb800 !important; }

.bh-tint-0:hover { border-color: rgba(96, 165, 250, .38) !important; }
.bh-tint-1:hover { border-color: rgba(244, 114, 182, .38) !important; }
.bh-tint-2:hover { border-color: rgba(34, 211, 238, .38) !important; }
.bh-tint-3:hover { border-color: rgba(74, 222, 128, .38) !important; }
.bh-tint-4:hover { border-color: rgba(167, 139, 250, .38) !important; }
.bh-tint-5:hover { border-color: rgba(255, 184, 0, .38) !important; }

/* --- trending rail ------------------------------------------------------ */

.bh-trend-list { display: flex; flex-direction: column; }

.bh-trend-item {
   display: grid;
   grid-template-columns: 22px 62px minmax(0, 1fr);
   align-items: center; gap: 10px;
   padding: 10px 0;
   border-bottom: 1px solid var(--bh-line-soft);
}
.bh-trend-item:last-child { border-bottom: 0; padding-bottom: 0; }
.bh-trend-item:first-child { padding-top: 0; }

.bh-trend-rank {
   font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
   color: var(--bh-accent) !important; letter-spacing: -.03em;
}

.bh-trend-thumb {
   display: block; width: 62px; height: 40px;
   border-radius: 7px; overflow: hidden;
   background: var(--bh-raise) !important;
   border: 1px solid var(--bh-line-soft);
}
.bh-trend-thumb img { width: 100%; height: 100%; object-fit: cover; }

.bh-trend-body { min-width: 0; }
.bh-trend-title {
   font-size: 13px; font-weight: 500; line-height: 1.38;
   color: var(--bh-text) !important;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
   overflow: hidden;
   transition: color .15s ease;
}
.bh-trend-item:hover .bh-trend-title { color: var(--bh-purple) !important; }
.bh-trend-sub {
   margin-top: 4px;
   font-size: 11.5px; color: var(--bh-text-mute) !important;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- top bloggers ------------------------------------------------------- */

.bh-creator-list { display: flex; flex-direction: column; }

.bh-creator {
   display: flex; align-items: center; gap: 10px;
   padding: 10px 0;
   border-bottom: 1px solid var(--bh-line-soft);
}
.bh-creator:last-child { border-bottom: 0; padding-bottom: 0; }
.bh-creator:first-child { padding-top: 0; }

.bh-creator-avatar {
   width: 38px; height: 38px; border-radius: 50%;
   overflow: hidden; flex: none; display: block;
   background: var(--bh-raise) !important;
}
.bh-creator-avatar img { width: 100%; height: 100%; object-fit: cover; }

.bh-creator-body { min-width: 0; flex: 1 1 auto; }
.bh-creator-name {
   display: flex; align-items: center; gap: 5px;
   font-size: 13.5px; font-weight: 600;
   color: var(--bh-text) !important;
   white-space: nowrap; overflow: hidden;
}
.bh-creator-name a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-creator-name a:hover { color: var(--bh-purple) !important; }
.bh-creator-meta {
   margin-top: 3px;
   font-size: 11.5px; color: var(--bh-text-mute) !important;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- creator promo ------------------------------------------------------ */

.bh-chan-cta {
   position: relative; overflow: hidden;
   display: flex; flex-direction: column; align-items: flex-start;
   background:
      linear-gradient(150deg, rgba(139, 92, 246, .20) 0%, rgba(255, 184, 0, .12) 100%),
      var(--bh-card) !important;
   border-color: var(--bh-purple-line) !important;
}
/* Drawn, not fetched - the card carries no external asset. */
.bh-chan-cta-art {
   position: absolute; right: -34px; top: -34px;
   width: 128px; height: 128px; border-radius: 50%;
   background: radial-gradient(circle at 34% 34%, rgba(255, 184, 0, .34), transparent 62%);
   pointer-events: none;
}
.bh-cta-icon {
   display: inline-flex; align-items: center; justify-content: center;
   width: 34px; height: 34px; border-radius: 10px;
   background: rgba(255, 184, 0, .16);
   color: var(--bh-accent) !important;
   margin-bottom: 11px;
}
.bh-chan-cta-title {
   font-size: 15px; font-weight: 700; letter-spacing: -.015em;
   color: var(--bh-text) !important;
}
.bh-chan-cta-sub {
   margin-top: 5px;
   font-size: 12.5px; line-height: 1.5;
   color: var(--bh-text-dim) !important;
}
.bh-chan-cta-btn { margin-top: 13px; height: 34px; font-size: 13px; }

/* --- empty states ------------------------------------------------------- */

.bh-blank {
   display: flex; flex-direction: column; align-items: center;
   text-align: center; gap: 9px;
   padding: 52px 24px;
   background: var(--bh-card);
   border: 1px solid var(--bh-line);
   border-radius: var(--bh-r-card);
}
.bh-blank-sm { padding: 32px 24px; }
.bh-blank-icon { color: var(--bh-text-mute) !important; }
.bh-blank-title { font-size: 15.5px; font-weight: 600; color: var(--bh-text) !important; }
.bh-blank-sub {
   font-size: 13.5px; color: var(--bh-text-mute) !important;
   max-width: 420px; line-height: 1.55;
}

/* --- loading -------------------------------------------------------------
   Changing tab or period is a page swap, so the rails are replaced rather
   than refreshed in place. This holds their footprint while that request is
   in flight, instead of letting the section collapse and jump back.
   ------------------------------------------------------------------------ */

.bh-chan-app.is-busy .bh-rail,
.bh-chan-app.is-busy .bh-ccat-grid { position: relative; }

.bh-chan-app.is-busy .bh-ccard,
.bh-chan-app.is-busy .bh-rcard,
.bh-chan-app.is-busy .bh-ccat-card {
   pointer-events: none;
   border-color: var(--bh-line) !important;
}
.bh-chan-app.is-busy .bh-ccard > *,
.bh-chan-app.is-busy .bh-rcard > *,
.bh-chan-app.is-busy .bh-ccat-card > * {
   visibility: hidden;
}
.bh-chan-app.is-busy .bh-ccard::after,
.bh-chan-app.is-busy .bh-rcard::after,
.bh-chan-app.is-busy .bh-ccat-card::after {
   content: ""; position: absolute; inset: 0;
   border-radius: var(--bh-r-card);
   background: linear-gradient(100deg,
      rgba(255, 255, 255, .03) 20%,
      rgba(255, 255, 255, .08) 50%,
      rgba(255, 255, 255, .03) 80%);
   background-size: 220% 100%;
   animation: bh-shimmer 1.15s linear infinite;
}
.bh-chan-app.is-busy .bh-ccat-card { position: relative; }

@keyframes bh-shimmer {
   from { background-position: 120% 0; }
   to   { background-position: -120% 0; }
}

/* ==========================================================================
   Light mode - follows the parent theme's day/night cookie
   ========================================================================== */

.bh-app.bh-light {
   --bh-card:        #ffffff;
   --bh-raise:       #eef0f2;
   --bh-line:        rgba(0, 0, 0, .10);
   --bh-line-soft:   rgba(0, 0, 0, .08);
   --bh-text:        #16191d;
   --bh-text-dim:    #545b63;
   --bh-text-mute:   #6b727a;

   --bh-accent:      #a86800;
   --bh-accent-wash: rgba(255, 152, 0, .12);
   --bh-accent-line: rgba(255, 152, 0, .34);

   --bh-purple:      #6d3fd4;
   --bh-purple-mid:  #7c4ddb;
   --bh-purple-wash: rgba(124, 77, 219, .12);
   --bh-purple-line: rgba(109, 63, 212, .34);
}
.bh-app.bh-light .bh-pill:hover { background: #e3e6e9; border-color: rgba(0, 0, 0, .16); }
.bh-app.bh-light .bh-pill.is-active,
.bh-app.bh-light .bh-more-menu a.is-active { color: #4b2596 !important; }
.bh-app.bh-light .bh-pill.is-active:hover { background: rgba(124, 77, 219, .18); }
.bh-app.bh-light .bh-follow.is-following { color: #4b2596 !important; }
.bh-app.bh-light .bh-more-menu a:hover { background: rgba(0, 0, 0, .05); }
.bh-app.bh-light .bh-more-menu { box-shadow: 0 10px 26px rgba(0, 0, 0, .13); }
.bh-app.bh-light .bh-rail-next,
.bh-app.bh-light .bh-rail-prev { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.bh-app.bh-light .bh-rail-next:hover,
.bh-app.bh-light .bh-rail-prev:hover { background: #e3e6e9 !important; }
.bh-app.bh-light .bh-ccard:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .10); }
.bh-app.bh-light .bh-ico-star { color: #6d3fd4 !important; }
.bh-app.bh-light .bh-ico-bolt,
.bh-app.bh-light .bh-ico-crown { color: #c07d00 !important; }
.bh-app.bh-light .bh-rank-1 .bh-ccard-avatar {
   box-shadow: 0 0 0 2px rgba(240, 160, 0, .6), 0 0 16px rgba(255, 184, 0, .26);
}
.bh-app.bh-light .bh-sec-error {
   background: rgba(239, 68, 68, .08) !important;
   border-color: rgba(197, 48, 48, .26);
   color: #a02626 !important;
}
.bh-app.bh-light .bh-sec-error-icon { color: #c23333 !important; }
.bh-app.bh-light.is-busy .bh-ccard::after,
.bh-app.bh-light.is-busy .bh-rcard::after,
.bh-app.bh-light.is-busy .bh-ccat-card::after {
   background: linear-gradient(100deg,
      rgba(0, 0, 0, .03) 20%, rgba(0, 0, 0, .07) 50%, rgba(0, 0, 0, .03) 80%);
   background-size: 220% 100%;
}

/* ==========================================================================
   Responsive

   Creator rows keep a whole number of cards at every width by changing
   --bh-cols / --bh-cols-sm rather than the card width, so a row never ends
   on a sliver.
   ========================================================================== */

@media (max-width: 1560px) {
   .bh-app { --bh-cols: 4; --bh-cols-sm: 4; }
   .bh-ccat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
   .bh-app { --bh-cols: 3; --bh-cols-sm: 3; --bh-rail: clamp(260px, 24%, 300px); }
   .bh-ccat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* rail drops under the main column; sections take the mobile reading order */
@media (max-width: 1024px) {
   .bh-body {
      display: flex; flex-direction: column;
      align-items: stretch; gap: 22px;
   }
   .bh-col-main, .bh-col-side { display: contents; }

   .bh-chan-top       { order: 1; }
   .bh-chan-rising    { order: 2; }
   .bh-chan-trending  { order: 3; }
   .bh-chan-bloggers  { order: 4; }
   .bh-chan-cats      { order: 5; }
   .bh-chan-cta       { order: 6; }

   .bh-app { --bh-cols: 3; --bh-cols-sm: 3; }
}

@media (max-width: 860px) {
   .bh-app { --bh-cols: 2.6; --bh-cols-sm: 2.6; }
   .bh-ccat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
   .bh-app { --bh-cols: 2.15; --bh-cols-sm: 2.15; --bh-gap: 16px; }
   .bh-page-head { align-items: flex-start; }
   .bh-filters { flex-wrap: wrap; }
   .bh-period { margin-left: 0; }
   .bh-sec-sub { display: none; }
}

@media (max-width: 560px) {
   #main-container.container { padding-left: 14px; padding-right: 14px; }
   .bh-app { --bh-cols: 1.35; --bh-cols-sm: 1.6; --bh-gap: 14px; --bh-cgap: 11px; }
   .bh-card { padding: 14px; }

   .bh-page-head { padding-top: 14px; }
   .bh-page-sub { font-size: 13.5px; }

   /* the arrows are redundant next to a swipeable rail */
   .bh-rail-next, .bh-rail-prev { display: none; }

   .bh-ccard-avatar { width: 92px; height: 92px; }
   .bh-ccat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .bh-trend-item { grid-template-columns: 22px 56px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
   .bh-app *, .bh-app *::before, .bh-app *::after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
   }
   .bh-rail { scroll-behavior: auto; }
}